/**
 * WhatsApp Order for WooCommerce — Frontend Button Styles
 *
 * All properties use !important to override WooCommerce and theme stylesheets
 * that target .button and other generic selectors.
 *
 * Dynamic properties (bg-color, text-color, padding) are injected via
 * wp_add_inline_style() in class-waow-button.php — also with !important.
 */

/* ── Button reset & base ─────────────────────────────────────────────────── */
.waow-button {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             8px !important;
    cursor:          pointer !important;
    border:          none !important;
    border-radius:   4px !important;
    font-size:       15px !important;
    font-weight:     600 !important;
    line-height:     1.4 !important;
    text-decoration: none !important;
    text-transform:  none !important;
    letter-spacing:  normal !important;
    transition:      filter 0.2s ease, opacity 0.2s ease !important;
    margin-top:      12px !important;
    width:           100% !important;
    box-sizing:      border-box !important;
    box-shadow:      none !important;
    outline:         none !important;
}

/* ── Hover / Focus ───────────────────────────────────────────────────────── */
.waow-button:hover:not(:disabled) {
    filter:          brightness(92%) !important;
    text-decoration: none !important;
}

.waow-button:focus-visible {
    outline:        3px solid #25D366 !important;
    outline-offset: 2px !important;
}

/* ── Disabled state (variable products before variation is selected) ─────── */
.waow-button:disabled,
.waow-button[disabled],
.waow-button.disabled {
    opacity: 0.5 !important;
    cursor:  not-allowed !important;
    filter:  none !important;
}

/* ── Icon ────────────────────────────────────────────────────────────────── */
.waow-icon {
    width:       20px !important;
    height:      20px !important;
    flex-shrink: 0 !important;
    fill:        currentColor !important;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media ( max-width: 480px ) {
    .waow-button {
        font-size: 14px !important;
    }

    .waow-icon {
        width:  18px !important;
        height: 18px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LEAD CAPTURE MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Overlay ──────────────────────────────────────────────────────────────── */
#waow-modal-overlay {
    display:          none;
    position:         fixed !important;
    inset:            0 !important;
    background:       rgba(0,0,0,0.55) !important;
    z-index:          999999 !important;
    align-items:      center !important;
    justify-content:  center !important;
    padding:          16px !important;
    box-sizing:       border-box !important;
    /* Flex is set via jQuery fadeIn; override display only when visible */
}
#waow-modal-overlay[style*="display: block"] {
    display:          flex !important;
}

/* Prevent body scroll when modal is open */
body.waow-modal-open {
    overflow: hidden !important;
}

/* ── Modal box ────────────────────────────────────────────────────────────── */
#waow-modal-box {
    background:       #ffffff !important;
    border-radius:    12px !important;
    box-shadow:       0 20px 60px rgba(0,0,0,0.25) !important;
    width:            100% !important;
    max-width:        420px !important;
    overflow:         hidden !important;
    animation:        waowSlideUp 0.22s ease-out !important;
}

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

/* ── Header ───────────────────────────────────────────────────────────────── */
.waow-modal-header {
    display:          flex !important;
    align-items:      center !important;
    gap:              12px !important;
    padding:          20px 20px 16px !important;
    border-bottom:    1px solid #f0f0f0 !important;
    position:         relative !important;
}

.waow-modal-icon {
    width:            44px !important;
    height:           44px !important;
    background:       #25D366 !important;
    border-radius:    50% !important;
    display:          flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    flex-shrink:      0 !important;
    color:            #fff !important;
}

.waow-modal-icon svg {
    width:  24px !important;
    height: 24px !important;
}

.waow-modal-titles h2 {
    margin:      0 0 2px !important;
    font-size:   17px !important;
    font-weight: 700 !important;
    color:       #1a1a1a !important;
    line-height: 1.3 !important;
}

.waow-modal-titles p {
    margin:      0 !important;
    font-size:   13px !important;
    color:       #666 !important;
    line-height: 1.4 !important;
}

.waow-modal-close {
    position:         absolute !important;
    top:              14px !important;
    right:            14px !important;
    background:       none !important;
    border:           none !important;
    font-size:        22px !important;
    line-height:      1 !important;
    color:            #999 !important;
    cursor:           pointer !important;
    padding:          4px 6px !important;
    border-radius:    4px !important;
    transition:       color 0.15s, background 0.15s !important;
    box-shadow:       none !important;
}
.waow-modal-close:hover {
    color:       #333 !important;
    background:  #f5f5f5 !important;
}

/* ── Body / Fields ────────────────────────────────────────────────────────── */
.waow-modal-body {
    padding: 20px !important;
}

.waow-field {
    margin-bottom: 12px !important;
}

.waow-input {
    width:         100% !important;
    padding:       11px 14px !important;
    border:        1.5px solid #ddd !important;
    border-radius: 8px !important;
    font-size:     14px !important;
    color:         #333 !important;
    background:    #fafafa !important;
    box-sizing:    border-box !important;
    outline:       none !important;
    transition:    border-color 0.15s, box-shadow 0.15s !important;
    box-shadow:    none !important;
}
.waow-input:focus {
    border-color: #25D366 !important;
    background:   #fff !important;
    box-shadow:   0 0 0 3px rgba(37,211,102,0.15) !important;
}
.waow-input::placeholder {
    color: #aaa !important;
}

/* ── Error ────────────────────────────────────────────────────────────────── */
.waow-modal-error {
    background:    #fff2f2 !important;
    border:        1px solid #ffcccc !important;
    border-radius: 6px !important;
    color:         #c0392b !important;
    font-size:     13px !important;
    padding:       9px 12px !important;
    margin-bottom: 12px !important;
}

/* ── Actions ──────────────────────────────────────────────────────────────── */
.waow-modal-actions {
    display:   flex !important;
    gap:       10px !important;
    margin-top: 4px !important;
}

.waow-btn-cancel {
    flex:          1 !important;
    padding:       11px !important;
    background:    #f5f5f5 !important;
    color:         #555 !important;
    border:        1.5px solid #e0e0e0 !important;
    border-radius: 8px !important;
    font-size:     14px !important;
    font-weight:   600 !important;
    cursor:        pointer !important;
    transition:    background 0.15s !important;
    box-shadow:    none !important;
    line-height:   1.4 !important;
}
.waow-btn-cancel:hover {
    background: #ebebeb !important;
}

.waow-btn-submit {
    flex:            2 !important;
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             7px !important;
    padding:         11px 16px !important;
    background:      #25D366 !important;
    color:           #ffffff !important;
    border:          none !important;
    border-radius:   8px !important;
    font-size:       14px !important;
    font-weight:     700 !important;
    cursor:          pointer !important;
    transition:      filter 0.15s !important;
    box-shadow:      none !important;
    line-height:     1.4 !important;
    text-transform:  none !important;
}
.waow-btn-submit:hover:not(:disabled) {
    filter: brightness(92%) !important;
}
.waow-btn-submit:disabled {
    opacity: 0.7 !important;
    cursor:  not-allowed !important;
}
.waow-btn-submit svg {
    flex-shrink: 0 !important;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media ( max-width: 480px ) {
    #waow-modal-box {
        border-radius: 10px !important;
    }
    .waow-modal-header {
        padding: 16px 16px 14px !important;
    }
    .waow-modal-body {
        padding: 16px !important;
    }
    .waow-modal-actions {
        flex-direction: column !important;
    }
    .waow-btn-cancel,
    .waow-btn-submit {
        flex: none !important;
        width: 100% !important;
    }
}