/**
 * capture.css -- front-end stylesheet for the exit-intent capture modal.
 *
 * Transported property for property from ECModal04.html, the sanctioned
 * mockup. Two departures from that mockup are deliberate and recorded.
 *
 * First, the button rules and the custom property block are duplicated here
 * from admin.css. This is the exception sanctioned in the design register:
 * admin.css is never enqueued on the front end, so a rule that exists only
 * there does not exist at all for a visitor.
 *
 * Second, every class the mockup names with a bare "modal-" prefix carries
 * an "ec-" prefix here. The mockup is a standalone document where a name
 * like .modal-header is unambiguous. A client's front end is not: Bootstrap
 * defines .modal-header and .modal-body, and countless themes define
 * .modal-overlay. Transporting those names verbatim would hand the modal's
 * layout to whatever stylesheet happened to load last, which is the exact
 * class of selector collision this codebase has already been bitten by
 * once. Every property declaration below is the mockup's own, unchanged;
 * only the selector names are namespaced.
 *
 * The .wo- prefixed button classes are not renamed, because they are the
 * portfolio's own vocabulary and already carry a namespace of their own.
 */

/* ==========================================================================
   CUSTOM PROPERTIES
   ========================================================================== */

:root {
    --wo-text-primary:       #1d1d1f;
    --wo-text-heading:       #1d2327;
    --wo-text-secondary:     #646970;
    --wo-text-on-primary:    #ffffff;
    --wo-primary:            #2271b1;
    --wo-primary-hover:      #135e96;
    --wo-surface-white:      #ffffff;
    --wo-surface-section:    #F7F7F7;
    --wo-destructive:        #b32d2e;
    --wo-success:            #1a8a4a;
    --wo-error:              #cc2222;
    --wo-font-family:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --wo-fs-12:              12px;
    --wo-fs-13:              13px;
    --wo-fs-14:              14px;
    --wo-fs-15:              15px;
    --wo-fs-16:              16px;
    --wo-fs-17:              17px;
    --wo-fs-24:              24px;
    --wo-fs-28:              28px;
    --wo-fw-medium:          500;
    --wo-fw-semibold:        600;
    --wo-lh-normal:          1.5;
    --wo-sp-5:   5px;
    --wo-sp-8:   8px;
    --wo-sp-10:  10px;
    --wo-sp-12:  12px;
    --wo-sp-16:  16px;
    --wo-sp-20:  20px;
    --wo-sp-24:  24px;
    --wo-sp-40:  40px;
    --wo-radius-none:        0;
    --wo-ease-base:          0.2s ease;
    --wo-shadow-modal:       0 2px 20px rgba(0, 0, 0, 0.08);
    --wo-border-color:       #e5e5e7;
}

/* ==========================================================================
   BUTTONS (duplicated from admin.css under the sanctioned exception)
   ========================================================================== */

.ec-modal-overlay .wo-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--wo-sp-5);
    padding: var(--wo-sp-10) var(--wo-sp-20);
    border-radius: var(--wo-radius-none);
    cursor: pointer;
    font-size: var(--wo-fs-16);
    font-weight: var(--wo-fw-semibold);
    font-family: var(--wo-font-family);
    transition: all var(--wo-ease-base);
    border: none;
    text-decoration: none;
    line-height: 1.4;
    box-sizing: border-box;
}

.ec-modal-overlay .wo-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.ec-modal-overlay .wo-btn-tinted {
    border-radius: var(--wo-radius-none);
    border-width: 1.5px;
    border-style: solid;
}

.ec-modal-overlay .wo-btn-tinted-blue {
    color: var(--wo-primary);
    border-color: var(--wo-primary);
    background: color-mix(in srgb, var(--wo-primary) 8%, white);
}

.ec-modal-overlay .wo-btn-tinted-blue:hover {
    background: color-mix(in srgb, var(--wo-primary) 15%, white);
}

.ec-modal-overlay .wo-btn-tinted-red {
    color: #cc2222;
    border-color: #cc2222;
    background: color-mix(in srgb, #cc2222 8%, white);
}

.ec-modal-overlay .wo-btn-tinted-red:hover {
    background: color-mix(in srgb, #cc2222 15%, white);
}

.ec-modal-overlay .wo-btn-full {
    width: 100%;
    justify-content: center;
    font-size: var(--wo-fs-17);
}

/* ==========================================================================
   MODAL
   ========================================================================== */

.ec-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: var(--wo-sp-20);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: var(--wo-font-family);
    font-size: var(--wo-fs-14);
    line-height: var(--wo-lh-normal);
    color: var(--wo-text-primary);
    box-sizing: border-box;
}

.ec-modal-overlay *,
.ec-modal-overlay *::before,
.ec-modal-overlay *::after {
    box-sizing: border-box;
}

.ec-modal-overlay.ec-modal-active {
    display: flex;
}

.ec-modal-container {
    background: var(--wo-surface-white);
    box-shadow: var(--wo-shadow-modal);
    max-width: 520px;
    width: 100%;
    overflow: hidden;
    animation: ecModalSlideUp 0.4s ease-out;
    position: relative;
}

@keyframes ecModalSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ec-modal-header {
    padding: var(--wo-sp-24) var(--wo-sp-40);
    border-bottom: 1px solid var(--wo-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wo-sp-16);
}

.ec-modal-header-left {
    display: flex;
    align-items: center;
    gap: var(--wo-sp-16);
}

.ec-modal-header-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ec-modal-header-icon svg {
    width: 100%;
    height: 100%;
    fill: #000000;
}

.ec-modal-header h2 {
    font-size: var(--wo-fs-24);
    font-weight: var(--wo-fw-semibold);
    letter-spacing: -0.5px;
    color: var(--wo-text-heading);
    margin: 0;
    padding: 0;
}

.ec-modal-close-btn {
    flex-shrink: 0;
}

.ec-modal-body {
    padding: var(--wo-sp-24) var(--wo-sp-40) var(--wo-sp-40);
    display: flex;
    flex-direction: column;
    gap: var(--wo-sp-24);
}

.ec-modal-copy {
    font-size: var(--wo-fs-17);
    color: var(--wo-text-secondary);
    line-height: var(--wo-lh-normal);
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   FORM FIELDS
   ========================================================================== */

.ec-modal-form-section {
    display: flex;
    flex-direction: column;
    gap: var(--wo-sp-16);
}

.ec-modal-form-field {
    display: flex;
    flex-direction: column;
}

.ec-modal-form-field label {
    font-size: var(--wo-fs-14);
    font-weight: var(--wo-fw-semibold);
    color: var(--wo-text-primary);
    margin-bottom: var(--wo-sp-8);
    font-family: var(--wo-font-family);
    text-transform: none;
    letter-spacing: normal;
}

.ec-modal-form-field input {
    padding: 14px 16px;
    border: 1.5px solid var(--wo-border-color);
    border-radius: var(--wo-radius-none);
    font-size: var(--wo-fs-15);
    color: var(--wo-text-primary);
    background: var(--wo-surface-white);
    transition: all var(--wo-ease-base);
    font-family: var(--wo-font-family);
    width: 100%;
    margin: 0;
    line-height: var(--wo-lh-normal);
    box-shadow: none;
}

.ec-modal-form-field input::placeholder {
    color: var(--wo-text-secondary);
}

.ec-modal-form-field input:focus {
    outline: none;
    border-color: var(--wo-primary);
    box-shadow: none;
}

.ec-modal-form-field-note {
    font-size: var(--wo-fs-12);
    color: var(--wo-text-secondary);
    margin-top: 6px;
}

.ec-modal-form-field-note.ec-modal-note-error {
    color: var(--wo-error);
}

/* ==========================================================================
   DISMISS LINK
   ========================================================================== */

.ec-modal-dismiss {
    text-align: center;
    font-size: var(--wo-fs-14);
    color: var(--wo-text-secondary);
    cursor: pointer;
    transition: color var(--wo-ease-base);
    background: none;
    border: none;
    font-family: var(--wo-font-family);
    font-weight: var(--wo-fw-medium);
    padding: 0;
    text-decoration: none;
}

.ec-modal-dismiss:hover {
    color: var(--wo-text-primary);
}

/* ==========================================================================
   SECURITY BADGE
   ========================================================================== */

.ec-modal-security-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wo-sp-8);
    font-size: var(--wo-fs-14);
    color: var(--wo-text-secondary);
}

.ec-modal-security-badge svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ==========================================================================
   SUCCESS STATE
   ========================================================================== */

.ec-modal-success {
    display: none;
    text-align: center;
    padding: 60px var(--wo-sp-40);
    animation: ecModalFadeIn 0.4s ease;
}

.ec-modal-success.ec-modal-active {
    display: block;
}

@keyframes ecModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ec-modal-success-icon {
    width: 80px;
    height: 80px;
    background: var(--wo-success);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--wo-sp-24);
}

.ec-modal-success-icon svg {
    width: 40px;
    height: 40px;
    stroke: white;
}

.ec-modal-success h3 {
    font-size: var(--wo-fs-28);
    color: var(--wo-text-primary);
    margin: 0 0 var(--wo-sp-12) 0;
    padding: 0;
    font-weight: var(--wo-fw-semibold);
    font-family: var(--wo-font-family);
}

.ec-modal-success p {
    font-size: var(--wo-fs-17);
    color: var(--wo-text-secondary);
    line-height: var(--wo-lh-normal);
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 480px) {
    .ec-modal-header {
        padding: var(--wo-sp-20) var(--wo-sp-20);
    }

    .ec-modal-header-icon {
        width: 36px;
        height: 36px;
    }

    .ec-modal-header h2 {
        font-size: 18px;
    }

    .ec-modal-body {
        padding: var(--wo-sp-20) var(--wo-sp-24) 32px;
    }
}

@media (hover: none) and (pointer: coarse) {
    .ec-modal-overlay .wo-btn {
        min-height: 44px;
    }
}

/* ==========================================================================
   UTILITY
   ========================================================================== */

.ec-modal-hidden {
    display: none !important;
}