/* =============================================================================
   Product Inquiry — inline notice + modal form.

   Palette matches the rest of the inquiry chrome injected by js/inquiry-mode.js
   (near-black gradients, #ffcc00 brand yellow, #e01e26 accent, #c62828 errors)
   so the modal reads as part of the same site, not a bolted-on plugin.

   Everything is scoped under .t27-pi-* and the rules that have to beat the
   theme's global button / input / h2 cascade carry !important — same approach
   the existing inquiry styles take.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Product page notice — "Please Contact Us for purchasing inquiries."
   The trigger is a <button> so it never navigates, styled to read as the
   inline text link it replaces (.inq-inquiry-link).
   -------------------------------------------------------------------------- */

.t27-pi-notice {
    font-family: inherit;
    font-size: 1.15rem;
    line-height: 1.5;
    color: #333333;
    margin: 14px 0;
    font-weight: 500;
}

.t27-pi-trigger {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    font: inherit !important;
    color: #111111 !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    cursor: pointer !important;
    width: auto !important;
    min-width: 0 !important;
    line-height: inherit !important;
}

.t27-pi-trigger:hover,
.t27-pi-trigger:focus {
    color: #000000 !important;
    opacity: 0.85;
    background: transparent !important;
    text-decoration: underline !important;
}

.t27-pi-trigger:focus-visible {
    outline: 2px solid #111111;
    outline-offset: 3px;
}

/* Shortcode variant: a real button rather than an inline text link. Same
   yellow pill as the submit button above. The !important flags only exist to
   undo the inline-link resets on .t27-pi-trigger, which are themselves
   !important. */
.t27-pi-trigger.t27-pi-trigger--button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 200px !important;
    height: 46px;
    padding: 0 24px !important;
    background: #F9D71E !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 100px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    opacity: 1;
    transition: all 0.25s ease;
}

.t27-pi-trigger.t27-pi-trigger--button:hover,
.t27-pi-trigger.t27-pi-trigger--button:focus {
    background: #F9D71E !important;
    color: #000000 !important;
    text-decoration: none !important;
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* -----------------------------------------------------------------------------
   2. Overlay + modal shell
   -------------------------------------------------------------------------- */

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

@keyframes t27-pi-pop-in {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.t27-pi-overlay[hidden] {
    display: none !important;
}

.t27-pi-overlay {
    position: fixed !important;
    inset: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999998;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    box-sizing: border-box;
    font-family: "proxima-regular", "Proxima Nova", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    animation: t27-pi-fade-in 0.22s ease-out;
}

/* Scroll lock applied to <html> while the modal is open. */
.t27-pi-locked {
    overflow: hidden !important;
}

.t27-pi-modal {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: auto;
    background: #ffffff;
    color: #1a1a1a;
    border-radius: 14px;
    padding: 40px 38px 32px;
    box-sizing: border-box;
    box-shadow: 0 30px 80px -10px rgba(0, 0, 0, 0.45), 0 10px 30px -5px rgba(0, 0, 0, 0.15);
    animation: t27-pi-pop-in 0.28s ease-out;
}

/* Close X — static, neutral, never competes with the submit button. */
.t27-pi-close {
    position: absolute !important;
    top: 12px;
    right: 12px;
    width: 34px !important;
    height: 34px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #9aa1ad !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.t27-pi-close:hover,
.t27-pi-close:focus,
.t27-pi-close:active {
    background: transparent !important;
    color: #6d7480 !important;
    box-shadow: none !important;
    transform: none !important;
}

.t27-pi-close svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* -----------------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------------- */

.t27-pi-header {
    margin-bottom: 22px;
    padding-right: 28px;
}

.t27-pi-modal h2.t27-pi-title {
    margin: 0 0 12px !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: 1.6rem !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #111111 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    background: transparent !important;
}

.t27-pi-accent {
    display: block;
    width: 44px;
    height: 3px;
    background: #e01e26;
    border-radius: 2px;
    margin-bottom: 14px;
}

.t27-pi-intro {
    margin: 0 !important;
    font-size: 0.96rem;
    line-height: 1.6;
    color: #555555;
}

/* -----------------------------------------------------------------------------
   4. Fields
   -------------------------------------------------------------------------- */

.t27-pi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 18px;
}

.t27-pi-field {
    min-width: 0;
}

.t27-pi-field--full,
.t27-pi-field--product,
.t27-pi-field--captcha {
    grid-column: 1 / -1;
}

.t27-pi-label {
    display: block;
    margin: 0 0 6px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #333333;
    text-transform: none;
}

.t27-pi-required {
    color: #e01e26;
    margin-left: 2px;
}

.t27-pi-modal .t27-pi-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    font-family: inherit !important;
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    color: #111111 !important;
    background: #ffffff !important;
    border: 1px solid #d7dade !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.t27-pi-modal .t27-pi-input:focus {
    border-color: #111111 !important;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08) !important;
    outline: none !important;
}

.t27-pi-modal .t27-pi-input::placeholder {
    color: #9aa1ad;
    opacity: 1;
}

.t27-pi-modal .t27-pi-textarea {
    min-height: 110px;
    resize: vertical;
    display: block;
}

/* Native chevron is removed by appearance:none above, so draw one. */
.t27-pi-modal .t27-pi-select {
    padding-right: 38px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 16px !important;
    cursor: pointer;
}

/* Product Name — read-only, visibly locked. */
.t27-pi-modal .t27-pi-input--readonly {
    background: #f6f7f9 !important;
    border-color: #e3e5e9 !important;
    color: #4a4f57 !important;
    font-weight: 600 !important;
    cursor: default;
}

.t27-pi-modal .t27-pi-input--readonly:focus {
    border-color: #e3e5e9 !important;
    box-shadow: none !important;
}

/* -----------------------------------------------------------------------------
   5. Validation
   -------------------------------------------------------------------------- */

.t27-pi-error {
    display: none;
    margin: 6px 0 0 !important;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.4;
    color: #c62828;
}

.t27-pi-error:not(:empty) {
    display: block;
}

.t27-pi-field--invalid .t27-pi-input,
.t27-pi-field--invalid .t27-pi-input:focus {
    border-color: #c62828 !important;
    background-color: #fffafa !important;
}

.t27-pi-form-error {
    display: none;
    margin: 16px 0 0 !important;
    padding: 10px 14px;
    border-radius: 8px;
    background: #fdeaea;
    color: #c62828;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
}

.t27-pi-form-error:not(:empty) {
    display: block;
}

.t27-pi-captcha {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* Off-screen, never display:none — some bots skip hidden inputs. */
.t27-pi-honeypot {
    display: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* -----------------------------------------------------------------------------
   6. Footer / submit
   -------------------------------------------------------------------------- */

/* The site's action buttons are yellow pills. This block replicates the
   theme's own button, declaration for declaration, from:

       style.css  .product-card__add-btn, .single_add_to_cart_button,
                  .view-cart-btn            (metrics)
       style.css  .product-card__add-btn, .single_add_to_cart_button
                                             (#F9D71E on #000)
       style.css  .product-card__add-btn:hover, ...:hover
                                             (lift + shadow, text stays black)

   Why copied instead of reusing those classes: both .product-card__add-btn
   and .single_add_to_cart_button appear in ADD_TO_CART_SELECTOR in
   js/inquiry-mode.js, whose capture-phase click handler cancels the click and
   navigates away. Putting either class on this button would stop the form
   from ever submitting, so the look is duplicated here on purpose. Keep these
   values in sync with the style.css rules above if the theme button changes.

   No !important needed: product-inquiry.css loads after style.css and
   main.css, and `.t27-pi-modal .t27-pi-submit` outranks `.btn`/`button`. */

/* Centres the 220px pill, matching how the theme centres it in a card. */
.t27-pi-footer {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}

.t27-pi-modal .t27-pi-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 220px;
    height: 46px;
    padding: 0 24px;
    margin: 0;
    background: #F9D71E;
    color: #000000;
    border: none;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transition: all 0.25s ease;
}

/* Theme hover: the yellow stays, the button lifts. */
.t27-pi-modal .t27-pi-submit:hover,
.t27-pi-modal .t27-pi-submit:focus {
    background: #F9D71E;
    color: #000000;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    outline: none;
}

.t27-pi-modal .t27-pi-submit:active {
    transform: translateY(0);
}

.t27-pi-modal .t27-pi-submit:focus-visible {
    outline: 2px solid #000000;
    outline-offset: 3px;
}

.t27-pi-modal .t27-pi-submit[disabled] {
    opacity: 0.65;
    pointer-events: none;
}

.t27-pi-spinner {
    display: none;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(0, 0, 0, 0.22);
    border-top-color: #000000;
    flex: 0 0 auto;
    box-sizing: border-box;
    border-radius: 50%;
    animation: t27-pi-spin 0.7s linear infinite;
}

.t27-pi-form--submitting .t27-pi-spinner {
    display: inline-block;
}

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

/* -----------------------------------------------------------------------------
   7. Success state — replaces the form inside the same modal
   -------------------------------------------------------------------------- */

.t27-pi-success[hidden] {
    display: none !important;
}

.t27-pi-success {
    text-align: center;
    padding: 8px 0 4px;
}

.t27-pi-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: #f0f9f2;
    color: #1e8e3e;
}

.t27-pi-success-icon svg {
    width: 28px;
    height: 28px;
}

.t27-pi-success-text {
    margin: 0 auto 26px !important;
    max-width: 420px;
    font-size: 1rem;
    line-height: 1.6;
    color: #333333;
}

/* -----------------------------------------------------------------------------
   8. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
    .t27-pi-overlay {
        padding: 14px;
    }

    .t27-pi-modal {
        padding: 34px 22px 26px;
        border-radius: 12px;
    }

    .t27-pi-modal h2.t27-pi-title {
        font-size: 1.32rem !important;
    }

    .t27-pi-intro {
        font-size: 0.9rem;
    }

    /* One column: side-by-side fields are unusable at this width. */
    .t27-pi-grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 15px;
    }

    .t27-pi-field--half {
        grid-column: 1 / -1;
    }

    .t27-pi-footer {
        margin-top: 20px;
    }

    .t27-pi-notice {
        font-size: 1rem;
    }
}

@media (max-width: 360px) {
    .t27-pi-modal {
        padding: 30px 16px 22px;
    }
}

/* Respect a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
    .t27-pi-overlay,
    .t27-pi-modal {
        animation: none;
    }

    .t27-pi-modal .t27-pi-submit,
    .t27-pi-modal .t27-pi-input {
        transition: none;
    }

    .t27-pi-spinner {
        animation-duration: 2s;
    }
}