.tm-wrap{max-width:1100px;margin:30px auto;font-family:inherit}.tm-header{display:flex;align-items:center;justify-content:space-between;gap:20px}.tm-button{display:inline-block;background:#2271b1;color:#fff!important;padding:10px 18px;border-radius:4px;text-decoration:none;border:0;cursor:pointer}.tm-table{width:100%;border-collapse:collapse}.tm-table th,.tm-table td{padding:12px;border:1px solid #ddd;text-align:left}.tm-ticket-head,.tm-description,.tm-message{border:1px solid #ddd;padding:18px;margin-bottom:15px;border-radius:6px}.tm-message-meta{margin-bottom:8px;color:#666}.tm-thread{margin-bottom:25px}.tm-wrap input,.tm-wrap select,.tm-wrap textarea{width:100%;box-sizing:border-box;padding:10px}.tm-wrap label{display:block;font-weight:600;margin-bottom:6px}.tm-success{padding:15px;background:#e8f7e8;border:1px solid #8bc48b}.tm-error{padding:15px;background:#fdeaea;border:1px solid #d88}
.tm-dynamic-fields{margin:20px 0}.tm-dynamic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.tm-field label{display:block;font-weight:600;margin-bottom:6px}.tm-field input,.tm-field select{width:100%;box-sizing:border-box;padding:10px}.tm-location-wrap{display:flex;gap:8px}.tm-location-wrap input{flex:1}.tm-locate-button{white-space:nowrap;padding:8px 10px}.tm-field-info .tm-info{padding:10px;background:#f5f5f5;border-radius:4px;font-weight:600}@media(max-width:700px){.tm-dynamic-grid{grid-template-columns:1fr}.tm-location-wrap{display:block}.tm-locate-button{width:100%;margin-top:6px}}
.tm-dynamic-fields{margin:20px 0;padding:18px;border:1px solid #ddd;background:#fafafa}.tm-dynamic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.tm-field label{display:block;font-weight:600;margin-bottom:6px}.tm-field input,.tm-field select{width:100%;box-sizing:border-box;padding:10px}.tm-location-wrap{display:flex;gap:8px}.tm-location-wrap input{flex:1}.tm-locate-button{white-space:nowrap;padding:8px 12px}.tm-field-info .tm-info{padding:10px;background:#f2f2f2;font-weight:600}@media(max-width:700px){.tm-dynamic-grid{grid-template-columns:1fr}.tm-location-wrap{display:block}.tm-locate-button{margin-top:6px;width:100%}}
.tm-no-fields{padding:12px;background:#f6f7f7;border:1px solid #ddd;border-radius:4px}.tm-dynamic-fields h3{margin-top:0}.tm-dynamic-fields{clear:both}

/* =========================================================
   Ticket Create Form - compact 2-column layout
   Targets the actual shortcode markup: .tm-wrap > .tm-card > form
   ========================================================= */
.tm-wrap .tm-card > form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 18px !important;
    row-gap: 10px !important;
    align-items: start !important;
}

.tm-wrap .tm-card > form > p {
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
}

/* Title + Phone = first row */
.tm-wrap .tm-card > form > p:nth-of-type(1) { grid-column: 1 !important; }
.tm-wrap .tm-card > form > p:nth-of-type(2) { grid-column: 2 !important; }

/* Service occupies one normal column; dynamic fields use both columns */
.tm-wrap .tm-card > form > p:nth-of-type(3) { grid-column: 1 / -1 !important; }

/* Details = full width */
.tm-wrap .tm-card > form > p:nth-of-type(4) { grid-column: 1 / -1 !important; }

/* Attachments + submit button share a row */
.tm-wrap .tm-card > form > p:nth-of-type(5) { grid-column: 1 !important; }
.tm-wrap .tm-card > form > p:nth-of-type(6) { grid-column: 2 !important; align-self: end !important; }

.tm-wrap .tm-card > form > p > label {
    margin: 0 0 4px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
}

.tm-wrap .tm-card > form input[type="text"],
.tm-wrap .tm-card > form input[type="tel"],
.tm-wrap .tm-card > form input[type="email"],
.tm-wrap .tm-card > form input[type="date"],
.tm-wrap .tm-card > form input[type="number"],
.tm-wrap .tm-card > form select {
    height: 38px !important;
    min-height: 38px !important;
    padding: 6px 9px !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
}

.tm-wrap .tm-card > form textarea {
    min-height: 90px !important;
    height: 90px !important;
    padding: 7px 9px !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
}

.tm-wrap .tm-card > form input[type="file"] {
    width: 100% !important;
    min-height: 34px !important;
    height: auto !important;
    padding: 3px !important;
    margin: 0 !important;
    font-size: 13px !important;
}

.tm-wrap .tm-card > form small {
    display: block !important;
    margin-top: 3px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

/* Dynamic fields always span the full form width, with 2 fields per row */
.tm-wrap .tm-card > form > #tm-dynamic-fields {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tm-wrap .tm-card .tm-dynamic-fields {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 8px 0 !important;
    padding: 10px !important;
    border: 1px solid #ddd !important;
    background: #fafafa !important;
}

.tm-wrap .tm-card .tm-dynamic-fields h3 {
    margin: 0 0 8px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
}

.tm-wrap .tm-card .tm-dynamic-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 18px !important;
    row-gap: 9px !important;
    width: 100% !important;
    margin: 0 !important;
}

.tm-wrap .tm-card .tm-dynamic-grid .tm-field {
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tm-wrap .tm-card .tm-dynamic-grid .tm-field label {
    margin: 0 0 4px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
}

.tm-wrap .tm-card .tm-dynamic-grid .tm-field input,
.tm-wrap .tm-card .tm-dynamic-grid .tm-field select {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 5px 8px !important;
    margin: 0 !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
}

.tm-wrap .tm-card .tm-location-wrap {
    display: flex !important;
    gap: 5px !important;
    width: 100% !important;
}

.tm-wrap .tm-card .tm-location-wrap input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.tm-wrap .tm-card .tm-locate-button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 105px !important;
    height: 36px !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
}

.tm-wrap .tm-card .tm-field-info .tm-info {
    padding: 8px !important;
    font-size: 12px !important;
}

.tm-wrap .tm-card > form > p:last-of-type .tm-button {
    margin-top: 0 !important;
    padding: 9px 18px !important;
}

@media (max-width: 700px) {
    .tm-wrap .tm-card > form {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .tm-wrap .tm-card > form > p:nth-of-type(1),
    .tm-wrap .tm-card > form > p:nth-of-type(2),
    .tm-wrap .tm-card > form > p:nth-of-type(3),
    .tm-wrap .tm-card > form > p:nth-of-type(4),
    .tm-wrap .tm-card > form > p:nth-of-type(5),
    .tm-wrap .tm-card > form > p:nth-of-type(6) {
        grid-column: 1 !important;
    }
    .tm-wrap .tm-card .tm-dynamic-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}


/* =========================================================
   v0.6.5 Typography, alignment, overflow and popup sizing
   ========================================================= */
.tm-wrap,
.tm-wrap * {
    text-align: left !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.tm-wrap {
    font-size: 14px !important;
    line-height: 1.4 !important;
    overflow-x: auto !important;
    max-width: 1100px !important;
    box-sizing: border-box !important;
}

.tm-wrap h1 { font-size: 26px !important; line-height: 1.2 !important; }
.tm-wrap h2 { font-size: 22px !important; line-height: 1.25 !important; }
.tm-wrap h3 { font-size: 17px !important; line-height: 1.3 !important; }
.tm-wrap p { font-size: 14px !important; }
.tm-wrap label { font-size: 13px !important; }
.tm-wrap input,
.tm-wrap select,
.tm-wrap textarea,
.tm-wrap button { font-family: inherit !important; }

/* Keep cards usable if their content is wider than the available window. */
.tm-wrap .tm-card,
.tm-wrap .tm-ticket-head,
.tm-wrap .tm-description,
.tm-wrap .tm-message {
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow-x: auto !important;
}

/* Generic ticket modal / popup / dialog sizing. */
.tm-wrap .tm-modal,
.tm-wrap .tm-popup,
.tm-wrap .tm-dialog,
.tm-modal,
.tm-popup,
.tm-dialog {
    width: min(400px, calc(100vw - 30px)) !important;
    max-width: 400px !important;
    max-height: 80vh !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    text-align: left !important;
    font-size: 14px !important;
}

/* Any popup content should not force the viewport wider. */
.tm-modal *,
.tm-popup *,
.tm-dialog * {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
}

/* Tables and long ticket content get their own horizontal scroll when needed. */
.tm-wrap .tm-table-wrap,
.tm-wrap .tm-table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
}

.tm-wrap .tm-table {
    min-width: 650px;
}

@media (max-width: 700px) {
    .tm-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px auto !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .tm-wrap h1 { font-size: 22px !important; }
    .tm-wrap h2 { font-size: 19px !important; }
    .tm-wrap h3 { font-size: 16px !important; }
    .tm-wrap,
    .tm-wrap p { font-size: 14px !important; }

    .tm-wrap .tm-modal,
    .tm-wrap .tm-popup,
    .tm-wrap .tm-dialog,
    .tm-modal,
    .tm-popup,
    .tm-dialog {
        width: calc(100vw - 20px) !important;
        max-width: 400px !important;
        max-height: 85vh !important;
    }
}


/* =========================================================
   v0.6.7 - Submission message and popup-friendly scrolling
   The outer popup should scroll; the ticket form itself should not.
   ========================================================= */
.tm-wrap {
    overflow: visible !important;
}

.tm-wrap .tm-card,
.tm-wrap .tm-ticket-head,
.tm-wrap .tm-description,
.tm-wrap .tm-message {
    overflow: visible !important;
}

.tm-submission-success {
    overflow: visible !important;
}

.tm-submission-success .tm-card {
    overflow: visible !important;
}

.tm-ticket-success{padding:20px;border:1px solid #e7c98a;border-radius:10px;background:#fffdf7}
.tm-ticket-success h3{margin-top:0}
.tm-submitted-ticket-details{margin-top:18px}
.tm-submitted-ticket-details p{margin:7px 0}
.tm-submitted-service-fields{margin-top:16px;padding-top:12px;border-top:1px solid #ddd}
.tm-submitted-description{margin-top:16px}

.tm-ajax-ticket-result{max-height:70vh;overflow:auto}
.tm-ajax-success{padding:4px}
.tm-submitted-attachments{margin-top:16px;padding-top:12px;border-top:1px solid #ddd}
.tm-submitted-attachments ul{margin:8px 0 0 18px}
.tm-ajax-error{margin-bottom:12px}