/* ============================================
   BIM Notices & Alerts — Centralized System
   ============================================
   Notice boxes, warnings, hints, and inline alerts.
   High specificity to override WordPress defaults.
   ============================================ */

/* ============================================
   ADMIN NOTICES — Payment Locked, Errors
   ============================================ */
.notice.bim-admin-payment-locked-notice,
.bim-admin-payment-locked-notice {
    display: flex;
    align-items: center;
    gap: var(--bim-space-2);
    padding: var(--bim-space-4) var(--bim-space-6) !important;
    background-color: var(--bim-danger-light) !important;
    border: 1px solid var(--bim-danger) !important;
    border-left: 4px solid var(--bim-danger) !important;
    border-radius: var(--bim-radius) !important;
    margin: var(--bim-space-6) 0 !important;
    box-shadow: var(--bim-shadow-sm);
}

.bim-admin-payment-locked-notice p {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--bim-text-primary) !important;
    font-size: var(--bim-text-base) !important;
    font-weight: 600;
    line-height: 1.5;
}

.bim-admin-payment-locked-notice strong {
    color: var(--bim-danger);
    font-weight: 900;
    text-transform: uppercase;
}

.bim-admin-payment-locked-notice .material-symbols-outlined {
    font-size: var(--bim-icon-sm);
    color: var(--bim-danger);
}

/* ============================================
   WARNING BOXES — Alternative Product, etc.
   ============================================ */
.bim-alt-price-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--bim-space-3);
    padding: var(--bim-space-3) var(--bim-space-4);
    background-color: var(--bim-warning-light);
    border: 1px solid var(--bim-warning-border);
    border-left: 3px solid var(--bim-warning);
    border-radius: var(--bim-radius-sm);
    margin-top: var(--bim-space-3);
}

.bim-warning-icon {
    font-size: var(--bim-icon-base);
    flex-shrink: 0;
    line-height: 1;
    margin-top: 0.125rem;
}

.bim-alt-price-warning p {
    margin: 0;
    color: var(--bim-text-secondary);
    font-size: var(--bim-text-sm);
    font-weight: 600;
    line-height: 1.5;
}

/* ============================================
   HINTS — Original Price, Screenshot, etc.
   ============================================ */
.bim-original-price-hint,
.bim-screenshot-hint {
    font-size: var(--bim-text-xs);
    color: var(--bim-text-faint);
    font-style: italic;
    font-weight: 500;
}

.bim-screenshot-hint {
    display: block;
    text-align: center;
}

.bim-screenshot-hint small {
    font-size: var(--bim-text-2xs);
}

/* ============================================
   INLINE EMPTY STATES — "Sin registrar"
   ============================================ */
.bim-empty-state-text {
    color: var(--bim-text-faint);
    font-style: italic;
    font-weight: 500;
}

/* ============================================
   INFO NOTICES — Customer Notes, etc.
   ============================================ */
.bim-info-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--bim-space-3);
    padding: var(--bim-space-4) var(--bim-space-6);
    background-color: var(--bim-info-light);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: var(--bim-radius);
    font-size: var(--bim-text-base);
    color: var(--bim-text-secondary);
    line-height: 1.5;
}

.bim-info-notice .material-symbols-outlined {
    font-size: var(--bim-icon-base);
    color: var(--bim-info);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

/* ============================================
   RESTORE / WELCOME BANNER
   Dynamically injected before the order form
   after login or registration when a pending
   order is restored from localStorage.
   Same markup for both flows — only title differs:
     Login:        "¡Bienvenido de vuelta!"
     Registration: "¡Bienvenido! Tu cuenta ha sido creada."
   ============================================ */

.bim-restore-banner {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--bim-space-5);
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.07) 0%, rgba(16, 185, 129, 0.04) 100%);
    border: 1px solid rgba(22, 163, 74, 0.25);
    border-left: 5px solid var(--bim-success);
    border-radius: var(--bim-radius);
    padding: var(--bim-space-5) var(--bim-space-6);
    padding-right: 3rem;
    margin-bottom: var(--bim-space-6);
    box-shadow: 0 4px 20px rgba(22, 163, 74, 0.12), 0 1px 4px rgba(0, 0, 0, 0.04);
    animation: bimSlideDown 0.4s ease;
}

/* ── Close button (button element — needs !important for theme override) ── */
.bim-restore-banner button.bim-restore-banner-close {
    position: absolute;
    top: var(--bim-space-3);
    right: var(--bim-space-3);
    background: none !important;
    border: none;
    cursor: pointer;
    color: var(--bim-text-faint);
    font-size: 1.25rem;
    line-height: 1;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--bim-transition-fast), color var(--bim-transition-fast);
}

.bim-restore-banner button.bim-restore-banner-close:hover {
    background: var(--bim-bg-hover) !important;
    color: var(--bim-text-secondary);
}

/* ── Icon circle ── */
.bim-restore-banner .bim-restore-banner-icon {
    flex-shrink: 0;
    width: 3.25rem;
    height: 3.25rem;
    background: rgba(22, 163, 74, 0.12);
    border: 2px solid rgba(22, 163, 74, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bim-restore-banner .bim-restore-banner-icon .material-symbols-outlined {
    font-size: var(--bim-icon-lg);
    color: var(--bim-success);
}

/* ── Body ── */
.bim-restore-banner .bim-restore-banner-body {
    flex: 1;
    min-width: 0;
}

.bim-restore-banner .bim-restore-banner-title {
    font-size: var(--bim-text-lg);
    font-weight: 700;
    color: var(--bim-success);
    margin: 0 0 var(--bim-space-3) 0;
    line-height: 1.3;
}

/* ── List items ── */
.bim-restore-banner .bim-restore-banner-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--bim-space-2);
}

.bim-restore-banner .bim-restore-banner-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--bim-space-2);
    font-size: var(--bim-text-base);
    color: var(--bim-text-secondary);
    line-height: 1.5;
}

.bim-restore-banner .bim-restore-banner-list li .material-symbols-outlined {
    font-size: var(--bim-icon-base);
    color: var(--bim-success);
    flex-shrink: 0;
    margin-top: 1px;
}

/* Per-item icon semantic colors */
.bim-restore-banner .bim-restore-banner-list li:nth-child(1) .material-symbols-outlined {
    color: #16a34a; /* green — order restored */
}
.bim-restore-banner .bim-restore-banner-list li:nth-child(2) .material-symbols-outlined {
    color: #2563eb; /* blue — action required */
}
.bim-restore-banner .bim-restore-banner-list li:nth-child(3) .material-symbols-outlined {
    color: #d97706; /* amber — image re-upload warning */
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .bim-restore-banner {
        gap: var(--bim-space-4);
        padding: var(--bim-space-4);
        padding-right: 2.75rem;
    }

    .bim-restore-banner .bim-restore-banner-icon {
        width: 2.5rem;
        height: 2.5rem;
    }

    .bim-restore-banner .bim-restore-banner-icon .material-symbols-outlined {
        font-size: var(--bim-icon-base);
    }

    .bim-restore-banner .bim-restore-banner-list li {
        font-size: var(--bim-text-sm);
    }
}

/* ============================================
   UTILITY LABELS — "Valores de utilidad"
   ============================================ */
.bim-utility-label {
    font-size: var(--bim-text-xs);
    font-weight: 700;
    color: rgba(255, 0, 0, 0.6);
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: -0.025em;
}

/* ============================================
   TOAST NOTIFICATIONS
   Used by BIM_Toast (customer.js + admin.js).
   Appended to <body> via JS — fixed bottom-right.

   Types: success | error | warning | info
   Exit: JS adds .bim-toast-out → CSS transitions out
   ============================================ */

/* ── Container ── */
.bim-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: var(--bim-space-3);
    max-width: 400px;
    width: calc(100vw - 48px);
    pointer-events: none; /* clicks pass through gaps between toasts */
}

/* ── Base toast ── */
.bim-toast {
    pointer-events: all;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--bim-space-3);
    background: var(--bim-surface);
    border-radius: var(--bim-radius);
    border-left: 5px solid transparent;
    padding: var(--bim-space-4) var(--bim-space-5) var(--bim-space-4) var(--bim-space-4);
    padding-right: 2.5rem; /* room for close button */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13), 0 2px 8px rgba(0, 0, 0, 0.07);
    animation: bimToastIn 0.3s ease-out both;
    transition: opacity var(--bim-transition-slow) ease, transform var(--bim-transition-slow) ease;
}

/* ── Exit state (JS adds this class) ── */
.bim-toast.bim-toast-out {
    opacity: 0;
    transform: translateX(calc(100% + 24px));
}

/* ── Type: left border color ── */
.bim-toast-success { border-left-color: var(--bim-success); }
.bim-toast-error   { border-left-color: var(--bim-danger); }
.bim-toast-warning { border-left-color: var(--bim-warning); }
.bim-toast-info    { border-left-color: var(--bim-info); }

/* ── Icon circle ── */
.bim-toast-icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bim-toast-success .bim-toast-icon { background: var(--bim-success-light); }
.bim-toast-error   .bim-toast-icon { background: var(--bim-danger-light); }
.bim-toast-warning .bim-toast-icon { background: var(--bim-warning-light); }
.bim-toast-info    .bim-toast-icon { background: var(--bim-info-light); }

.bim-toast-icon .material-symbols-outlined {
    font-size: var(--bim-icon-base);
}

.bim-toast-success .bim-toast-icon .material-symbols-outlined { color: var(--bim-success); }
.bim-toast-error   .bim-toast-icon .material-symbols-outlined { color: var(--bim-danger); }
.bim-toast-warning .bim-toast-icon .material-symbols-outlined { color: var(--bim-warning-dark); }
.bim-toast-info    .bim-toast-icon .material-symbols-outlined { color: var(--bim-info); }

/* ── Content ── */
.bim-toast-content {
    flex: 1;
    min-width: 0;
}

.bim-toast-title {
    font-size: var(--bim-text-base);
    font-weight: 700;
    color: var(--bim-text-primary);
    margin: 0 0 var(--bim-space-1) 0;
    line-height: 1.3;
}

.bim-toast-message {
    font-size: var(--bim-text-sm);
    color: var(--bim-text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* ── Close button — !important needed for theme button:hover override ── */
.bim-toast-close {
    position: absolute;
    top: var(--bim-space-3);
    right: var(--bim-space-3);
    background: none !important;
    border: none;
    cursor: pointer;
    font-size: 1.125rem;
    line-height: 1;
    color: var(--bim-text-faint);
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border-radius: var(--bim-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--bim-transition-fast), color var(--bim-transition-fast);
}

.bim-toast-close:hover {
    background: var(--bim-bg-hover) !important;
    color: var(--bim-text-secondary);
}

/* ── Responsive — full width on mobile ── */
@media (max-width: 480px) {
    /* Container: full width, respects iOS safe area (home indicator) */
    .bim-toast-container {
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        right: 16px;
        left: 16px;
        width: auto;
        max-width: none;
    }

    /* Toast: slide up from bottom instead of in from right */
    .bim-toast {
        padding: var(--bim-space-3) var(--bim-space-4);
        padding-right: 2.25rem;
        animation-name: bimToastInMobile;
    }

    /* Exit: slide down off screen instead of right */
    .bim-toast.bim-toast-out {
        opacity: 0;
        transform: translateY(calc(100% + 16px));
    }
}

/* ============================================
   CONFIRM DIALOG
   Blocking overlay for admin confirmation actions.
   Rendered by BIM_Notify.confirm() — appended to
   <body> via JS. Closes on backdrop click, Escape,
   or Enter.

   Structure: header [ icon-box | content(title+message) ] + footer
   Types: info (default) | warning | danger
   Icon box is a rounded square, not a circle.
   ============================================ */

@keyframes bimConfirmIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(-8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes bimConfirmOut {
    from { opacity: 1; transform: scale(1)    translateY(0); }
    to   { opacity: 0; transform: scale(0.96) translateY(-6px); }
}

.bim-confirm-dialog--out {
    animation: bimConfirmOut 0.13s ease-in both;
}

/* ── Backdrop ── */
.bim-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--bim-space-4);
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
    animation: bimFadeIn 0.15s ease-out both;
}

/* ── Dialog box ── */
.bim-confirm-dialog {
    background: var(--bim-surface);
    border-radius: var(--bim-radius-lg);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.16),
        0 4px 12px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 400px;
    overflow: hidden;
    animation: bimConfirmIn 0.22s ease-out both;
    animation-delay: 0.04s;
}

/* ── Header: rounded-square icon + stacked content ── */
.bim-confirm-header {
    display: flex;
    align-items: flex-start;
    gap: var(--bim-space-4);
    padding: var(--bim-space-6) var(--bim-space-6) var(--bim-space-5);
}

/* ── Icon box — rounded square, semantic color ── */
.bim-confirm-icon {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: var(--bim-radius);
    background: var(--bim-accent-light);        /* Default: light red */
    display: flex;
    align-items: center;
    justify-content: center;
}

.bim-confirm-icon .material-symbols-outlined {
    font-size: var(--bim-icon-lg);
    color: var(--bim-accent);                   /* Default: red icon */
}

/* ── Warning variant ── */
.bim-confirm-icon.warning {
    background: var(--bim-warning-light);
}

.bim-confirm-icon.warning .material-symbols-outlined {
    color: var(--bim-warning-dark);
}

/* ── Danger variant ── */
.bim-confirm-icon.danger {
    background: var(--bim-danger-light);
}

.bim-confirm-icon.danger .material-symbols-outlined {
    color: var(--bim-danger);
}

/* ── Content: title + message stacked ── */
.bim-confirm-content {
    flex: 1;
    min-width: 0;
    padding-top: var(--bim-space-1);    /* Optical alignment with icon top */
}

/* ── Title ── */
.bim-confirm-title {
    font-size: var(--bim-text-lg);
    font-weight: 800;
    color: var(--bim-text-primary);
    line-height: 1.3;
    margin: 0 0 var(--bim-space-2);
    font-family: var(--bim-font);
    letter-spacing: -0.01em;
}

/* ── Message ── */
.bim-confirm-message {
    font-size: var(--bim-text-sm);
    color: var(--bim-text-muted);
    line-height: 1.55;
    margin: 0;
    font-family: var(--bim-font);
}

.bim-confirm-message p {
    margin: 0 0 var(--bim-space-2);
}

.bim-confirm-message p:last-child {
    margin-bottom: 0;
}

/* ── Product blocks injected by buildEmptyCostsMessage() ── */
.bim-confirm-products-list {
    display: flex;
    flex-direction: column;
    gap: var(--bim-space-2);
    margin: var(--bim-space-2) 0 var(--bim-space-3);
}

.bim-confirm-product-block {
    background: var(--bim-bg);
    border: 1px solid var(--bim-border);
    border-left: 3px solid var(--bim-warning);
    border-radius: var(--bim-radius-sm);
    padding: var(--bim-space-3) var(--bim-space-4);
}

/* ── Product name ── */
.bim-confirm-product-name {
    font-size: var(--bim-text-sm);
    font-weight: 700;
    color: var(--bim-text-secondary);
    font-family: var(--bim-font);
    margin-bottom: var(--bim-space-2);
    line-height: 1.4;
}

/* ── Missing field tags ── */
.bim-confirm-field-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bim-space-1);
}

.bim-confirm-field-tag {
    display: inline-flex;
    align-items: center;
    background: var(--bim-warning-light);
    color: var(--bim-warning-dark);
    font-size: var(--bim-text-xs);
    font-weight: 700;
    font-family: var(--bim-font);
    padding: 2px var(--bim-space-2);
    border-radius: var(--bim-radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.6;
}

/* Captura de Compra — softer (optional field) */
.bim-confirm-field-tag.bim-confirm-field-tag--soft {
    background: var(--bim-info-light);
    color: var(--bim-info);
}

/* ── Footer — action buttons ── */
.bim-confirm-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--bim-space-3);
    padding: var(--bim-space-4) var(--bim-space-6);
    background: var(--bim-bg);
    border-top: 1px solid var(--bim-border);
}

/* ── Responsive — stack buttons full-width on mobile ── */
@media (max-width: 480px) {
    .bim-confirm-dialog {
        max-width: none;
    }

    .bim-confirm-footer {
        flex-direction: column-reverse;
        gap: var(--bim-space-2);
    }

    .bim-confirm-footer .bim-btn {
        width: 100%;
        justify-content: center;
    }
}