/*
 * Quotilio for WooCommerce — Request a Quote button + modal styles.
 *
 * Everything is namespaced under .qtl- so a merchant theme cannot bleed
 * into it and it cannot bleed out. The brand accent is exposed as
 * --qtl-primary so a merchant CSS override can rebrand without editing
 * this file. Default #D48344 matches the BC Quotilio brand palette.
 *
 * Layering: .qtl-modal-open on <html> locks the body scroll while the
 * modal is up. Overlay z-index 2147483000 sits above every reasonable
 * theme layer while staying below the WP Toolbar (which uses
 * z-index 99999).
 *
 * 2026-08-20 track-b-step-5 adversarial-audit fixes (search "AUDIT-B5-#n"):
 *   #8  iOS body-scroll lock (JS handles the position:fixed trick);
 *       mobile panel switched to 100dvh for visual-viewport shrink.
 *   #9  box-sizing on all modal boxes so theme
 *       "* { box-sizing: content-box }" cannot overflow buttons.
 *   #10 Double-class specificity boost so .woocommerce a.button.alt
 *       (0,2,1) does not repaint our button. Also self-doubled.
 *   #11 RTL: logical margin/padding + explicit dir=rtl select-arrow
 *       mirror.
 */

:root {
    --qtl-primary:        #D48344;
    --qtl-primary-hover:  #b96e33;
    --qtl-primary-text:   #ffffff;
    --qtl-bg:             #ffffff;
    --qtl-text:           #1a1a1a;
    --qtl-muted:          #666666;
    --qtl-border:         #d0d0d0;
    --qtl-border-focus:   #005fcc;
    --qtl-error-bg:       #fdecea;
    --qtl-error-border:   #f5c2be;
    --qtl-error-text:     #a12622;
    --qtl-success-bg:     #eef7ee;
    --qtl-success-text:   #256029;
    --qtl-input-bg:       #ffffff;
    --qtl-overlay:        rgba(0, 0, 0, 0.55);
    --qtl-panel-shadow:   0 12px 40px rgba(0, 0, 0, 0.25);
    --qtl-radius:         6px;
}

/* ----------------------------------------------------------------- */
/* Buttons (product page, cart page, blocks cart) -- self-contained   */
/* so the theme's .button / .button.alt cannot inherit into us.       */
/* AUDIT-B5-#10: the base selector is triple-classed                  */
/* (.qtl-btn.qtl-btn--request-quote.qtl-btn--request-quote,           */
/* specificity 0,3,0) so themes like Storefront/Flatsome that use     */
/* .woocommerce a.button.alt (specificity 0,2,1) can no longer        */
/* repaint us. wire()/ensureBlocksButton() add the qtl-btn class at   */
/* runtime; the second qtl-btn--request-quote is a self-double, which */
/* is a valid CSS trick to bump specificity without requiring a       */
/* second real class on the DOM node.                                 */
/* ----------------------------------------------------------------- */

.qtl-request-quote-wrap {
    margin: 8px 0;
}

.qtl-btn.qtl-btn--request-quote.qtl-btn--request-quote {
    display:            inline-block;
    box-sizing:         border-box;
    padding:            10px 18px;
    border:             1px solid var(--qtl-primary);
    background:         var(--qtl-primary);
    color:              var(--qtl-primary-text);
    cursor:             pointer;
    font:               inherit;
    font-size:          15px;
    line-height:        1.4;
    border-radius:      var(--qtl-radius);
    text-align:         center;
    text-decoration:    none;
    -webkit-appearance: none;
    appearance:         none;
    transition:         background-color 120ms ease, border-color 120ms ease;
}

.qtl-btn.qtl-btn--request-quote.qtl-btn--request-quote:hover {
    background:   var(--qtl-primary-hover);
    border-color: var(--qtl-primary-hover);
    color:        var(--qtl-primary-text);
}

.qtl-btn.qtl-btn--request-quote.qtl-btn--request-quote:focus,
.qtl-btn.qtl-btn--request-quote.qtl-btn--request-quote:focus-visible {
    outline:        2px solid var(--qtl-border-focus);
    outline-offset: 2px;
}

.qtl-btn.qtl-btn--request-quote.qtl-btn--request-quote[disabled] {
    opacity: 0.6;
    cursor:  wait;
}

/* Fallback for the brief pre-JS window before wire() has added the     */
/* .qtl-btn class -- still styled, just slightly less specific.         */
.qtl-btn--request-quote {
    display:            inline-block;
    box-sizing:         border-box;
    padding:            10px 18px;
    border:             1px solid var(--qtl-primary);
    background:         var(--qtl-primary);
    color:              var(--qtl-primary-text);
    cursor:             pointer;
    font:               inherit;
    line-height:        1.4;
    border-radius:      var(--qtl-radius);
    text-align:         center;
    text-decoration:    none;
    -webkit-appearance: none;
    appearance:         none;
}

/* ----------------------------------------------------------------- */
/* Body scroll lock while modal is open.                             */
/* AUDIT-B5-#8: this alone does NOT lock iOS touch-scroll; the JS in */
/* qtl-buttons.js also flips body { position:fixed; top:-scrollY } . */
/* This overflow rule remains as a belt-and-braces for desktop.      */
/* ----------------------------------------------------------------- */

html.qtl-modal-open,
html.qtl-modal-open body {
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/* Overlay + panel.                                                  */
/* ----------------------------------------------------------------- */

.qtl-modal-overlay {
    position:        fixed;
    inset:           0;
    top:             0;
    right:           0;
    bottom:          0;
    left:            0;
    z-index:         2147483000;
    background:      var(--qtl-overlay);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         20px;
    box-sizing:      border-box;
    animation:       qtl-fade-in 140ms ease-out;
}

.qtl-modal-panel {
    background:    var(--qtl-bg);
    color:         var(--qtl-text);
    width:         100%;
    max-width:     500px;
    max-height:    90vh;
    /* AUDIT-B5-#9: don't rely on inheriting box-sizing; some themes ship
       "* { box-sizing: content-box }" which broke the panel's max-width. */
    box-sizing:    border-box;
    border-radius: var(--qtl-radius);
    box-shadow:    var(--qtl-panel-shadow);
    display:       flex;
    flex-direction:column;
    overflow:      hidden;
    animation:     qtl-slide-in 160ms ease-out;
    font:          inherit;
    font-size:     15px;
    line-height:   1.45;
}

.qtl-modal-panel:focus,
.qtl-modal-panel:focus-visible {
    outline: none;
}

.qtl-modal-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         14px 18px;
    border-bottom:   1px solid var(--qtl-border);
    flex-shrink:     0;
}

.qtl-modal-title {
    margin:      0;
    padding:     0;
    font-size:   18px;
    font-weight: 600;
    color:       var(--qtl-text);
    line-height: 1.3;
}

.qtl-modal-close {
    background:  transparent;
    border:      0;
    padding:     4px 8px;
    /* AUDIT-B5-#11: logical properties mirror correctly under [dir=rtl].
       Previously margin:-4px -6px -4px 6px put the × on the wrong side
       for Hebrew/Arabic merchants. */
    margin-block:        -4px;
    margin-inline-start: 6px;
    margin-inline-end:   -6px;
    cursor:      pointer;
    color:       var(--qtl-muted);
    font-size:   24px;
    line-height: 1;
    border-radius: 4px;
}

.qtl-modal-close:hover  { color: var(--qtl-text); background: rgba(0, 0, 0, 0.05); }
.qtl-modal-close:focus,
.qtl-modal-close:focus-visible { outline: 2px solid var(--qtl-border-focus); outline-offset: 2px; }

.qtl-modal-body {
    padding:    18px;
    overflow-y: auto;
    flex:       1 1 auto;
}

/* ----------------------------------------------------------------- */
/* Error banner (top of form).                                       */
/* ----------------------------------------------------------------- */

.qtl-error-banner {
    background:    var(--qtl-error-bg);
    border:        1px solid var(--qtl-error-border);
    color:         var(--qtl-error-text);
    padding:       10px 12px;
    border-radius: 4px;
    margin-bottom: 14px;
    font-size:     14px;
}

.qtl-error-banner[hidden] { display: none; }

/* ----------------------------------------------------------------- */
/* Form fields.                                                      */
/* ----------------------------------------------------------------- */

.qtl-modal-form {
    margin:  0;
    padding: 0;
}

.qtl-field {
    margin-bottom: 14px;
}

.qtl-label {
    display:       block;
    margin-bottom: 4px;
    font-size:     13px;
    font-weight:   600;
    color:         var(--qtl-text);
}

.qtl-required {
    color: var(--qtl-error-text);
}

.qtl-input {
    display:            block;
    box-sizing:         border-box;
    width:              100%;
    padding:            9px 11px;
    border:             1px solid var(--qtl-border);
    border-radius:      4px;
    background:         var(--qtl-input-bg);
    color:              var(--qtl-text);
    font:               inherit;
    font-size:          14px;
    line-height:        1.4;
    -webkit-appearance: none;
    appearance:         none;
    transition:         border-color 120ms ease, box-shadow 120ms ease;
}

.qtl-textarea {
    min-height:  80px;
    resize:      vertical;
    font-family: inherit;
}

.qtl-select {
    background-image:    linear-gradient(45deg, transparent 50%, var(--qtl-muted) 50%),
                         linear-gradient(135deg, var(--qtl-muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size:     5px 5px, 5px 5px;
    background-repeat:   no-repeat;
    /* AUDIT-B5-#11: padding-inline-end flips under [dir=rtl] so the arrow
       has clearance on the correct side. */
    padding-inline-end:  32px;
}

/* AUDIT-B5-#11: mirror the caret glyph position for RTL locales.       */
[dir="rtl"] .qtl-select {
    background-position: 18px 50%, 13px 50%;
}

.qtl-input:focus,
.qtl-input:focus-visible {
    outline:      none;
    border-color: var(--qtl-border-focus);
    box-shadow:   0 0 0 3px rgba(0, 95, 204, 0.18);
}

.qtl-input--error {
    border-color: var(--qtl-error-text);
}

.qtl-input--error:focus {
    box-shadow: 0 0 0 3px rgba(161, 38, 34, 0.18);
}

.qtl-field-error {
    margin-top: 4px;
    font-size:  12px;
    color:      var(--qtl-error-text);
}

.qtl-field-error[hidden] { display: none; }

/* Honeypot -- visually and semantically hidden but reachable to bots. */
.qtl-hp {
    position:   absolute !important;
    left:       -9999px !important;
    top:        auto !important;
    width:      1px !important;
    height:     1px !important;
    overflow:   hidden !important;
}

/* ----------------------------------------------------------------- */
/* Actions row.                                                      */
/* ----------------------------------------------------------------- */

.qtl-modal-actions {
    display:         flex;
    justify-content: flex-end;
    gap:             10px;
    margin-top:      18px;
    padding-top:     14px;
    border-top:      1px solid var(--qtl-border);
}

.qtl-modal-btn {
    display:            inline-flex;
    align-items:        center;
    justify-content:    center;
    gap:                8px;
    padding:            9px 18px;
    /* AUDIT-B5-#9: don't rely on "* { box-sizing: border-box }" being
       set by the theme -- some ship content-box, which pushed .qtl-modal-btn
       past the mobile-panel edge (1px border + 18px h-padding + width:100%). */
    box-sizing:         border-box;
    font:               inherit;
    font-size:          14px;
    font-weight:        600;
    line-height:        1.3;
    border-radius:      var(--qtl-radius);
    border:             1px solid transparent;
    cursor:             pointer;
    -webkit-appearance: none;
    appearance:         none;
    transition:         background-color 120ms ease, border-color 120ms ease, color 120ms ease;
    min-height:         38px;
}

.qtl-modal-btn:focus,
.qtl-modal-btn:focus-visible {
    outline:        2px solid var(--qtl-border-focus);
    outline-offset: 2px;
}

.qtl-modal-btn[disabled] {
    opacity: 0.7;
    cursor:  wait;
}

.qtl-modal-btn--primary {
    background:   var(--qtl-primary);
    border-color: var(--qtl-primary);
    color:        var(--qtl-primary-text);
}

.qtl-modal-btn--primary:hover:not([disabled]) {
    background:   var(--qtl-primary-hover);
    border-color: var(--qtl-primary-hover);
}

.qtl-modal-btn--secondary {
    background:   transparent;
    border-color: var(--qtl-border);
    color:        var(--qtl-text);
}

.qtl-modal-btn--secondary:hover:not([disabled]) {
    background: rgba(0, 0, 0, 0.04);
}

/* ----------------------------------------------------------------- */
/* Loading spinner (pure CSS, no image).                             */
/* ----------------------------------------------------------------- */

.qtl-spinner {
    display:              inline-block;
    width:                14px;
    height:               14px;
    border:               2px solid rgba(255, 255, 255, 0.4);
    border-top-color:     var(--qtl-primary-text);
    border-radius:        50%;
    animation:            qtl-spin 700ms linear infinite;
    vertical-align:       middle;
}

.qtl-spinner[hidden] { display: none; }

@keyframes qtl-spin {
    to { transform: rotate(360deg); }
}

@keyframes qtl-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes qtl-slide-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ----------------------------------------------------------------- */
/* Success panel.                                                    */
/* ----------------------------------------------------------------- */

.qtl-success-panel {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    padding:         20px 10px 10px;
}

.qtl-success-panel[hidden] { display: none; }

.qtl-success-icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           52px;
    height:          52px;
    border-radius:   50%;
    background:      var(--qtl-success-bg);
    color:           var(--qtl-success-text);
    font-size:       28px;
    font-weight:     700;
    line-height:     1;
    margin-bottom:   14px;
}

.qtl-success-message {
    margin:      0 0 18px 0;
    font-size:   15px;
    color:       var(--qtl-text);
    line-height: 1.5;
}

.qtl-modal-form[hidden] { display: none; }

/* ----------------------------------------------------------------- */
/* Body-level toast (AUDIT-B5-#12). Rendered when a POST resolves    */
/* after the modal was already dismissed, so the user still gets an  */
/* acknowledgement instead of silence.                               */
/* ----------------------------------------------------------------- */

.qtl-toast {
    position:      fixed;
    left:          50%;
    bottom:        24px;
    transform:     translateX(-50%);
    z-index:       2147483000;
    background:    var(--qtl-success-bg);
    color:         var(--qtl-success-text);
    border:        1px solid var(--qtl-border);
    padding:       10px 16px;
    border-radius: var(--qtl-radius);
    box-shadow:    var(--qtl-panel-shadow);
    font-size:     14px;
    max-width:     90vw;
    box-sizing:    border-box;
    animation:     qtl-fade-in 200ms ease-out;
}

/* ----------------------------------------------------------------- */
/* Mobile (<600px).                                                  */
/* ----------------------------------------------------------------- */

@media (max-width: 599px) {
    .qtl-modal-overlay {
        padding: 0;
        align-items: stretch;
    }
    /* AUDIT-B5-#8: switch from fixed 100vh (which is the LARGE viewport
       and never shrinks when the iOS virtual keyboard opens) to 100dvh
       + auto height. The panel now shrinks with the visual viewport so
       the submit button stays reachable while the keyboard is up. */
    .qtl-modal-panel {
        max-width:     100%;
        width:         100%;
        max-height:    100vh;   /* fallback for browsers without dvh */
        max-height:    100dvh;
        height:        auto;
        border-radius: 0;
        box-sizing:    border-box;
    }
    .qtl-modal-header { padding: 12px 14px; }
    .qtl-modal-body   { padding: 14px; }
    .qtl-modal-actions {
        flex-direction: column-reverse;
    }
    .qtl-modal-btn {
        width: 100%;
    }
}

/* ----------------------------------------------------------------- */
/* Dark mode. Honors OS preference -- a merchant that wants forced    */
/* light can override --qtl-bg / --qtl-text via a scoped stylesheet. */
/* ----------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    :root {
        --qtl-bg:           #1e1e1e;
        --qtl-text:         #f2f2f2;
        --qtl-muted:        #a0a0a0;
        --qtl-border:       #3a3a3a;
        --qtl-input-bg:     #2a2a2a;
        --qtl-error-bg:     #3a1c1a;
        --qtl-error-border: #5b2624;
        --qtl-error-text:   #ff9c96;
        --qtl-success-bg:   #1e3324;
        --qtl-success-text: #7fdc94;
        --qtl-overlay:      rgba(0, 0, 0, 0.7);
        --qtl-panel-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    }
    .qtl-modal-close:hover { background: rgba(255, 255, 255, 0.08); }
    .qtl-modal-btn--secondary:hover:not([disabled]) { background: rgba(255, 255, 255, 0.06); }
}