/* ==========================================================================
   FBL THEME — shared UI kit (design handoff: "UI States" + "Modals & Toasts")
   Toasts · Modals/Drawers · Empty / Loading / Error states.
   Reuses the theme-wide --fbl-* palette (defined in fbl-home.css). Loaded on
   every page so all upcoming pages share one component vocabulary.
   ========================================================================== */

/* ============================================================== TOASTS ==== */
/* WNToast colours (--wn-toast-*) are emitted from Theme Options in base.blade.php.
   These rules only handle the design's toast SHAPE (filled-circle icon etc.). */

/* Design toast icon = a filled accent-colour circle with a white glyph (not the
   default left-bar + tinted icon). Specificity via `.wn-toasts` beats wn-toast.css. */
.wn-toasts .wn-toast {
    box-shadow: 0 8px 24px rgba(18, 32, 30, .25);
}
.wn-toasts .wn-toast--success,
.wn-toasts .wn-toast--error,
.wn-toasts .wn-toast--warning,
.wn-toasts .wn-toast--info {
    border-inline-start: 0;
    padding-inline-start: 14px;
}
.wn-toasts .wn-toast__icon {
    width: 24px;
    height: 24px;
    margin-top: 0;
    border-radius: 999px;
    background: var(--wn-accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.wn-toasts .wn-toast__icon svg { width: 15px; height: 15px; }
.wn-toasts .wn-toast__close { color: var(--fbl-on-footer-muted); opacity: 1; }
.wn-toasts .wn-toast__close:hover { color: #fff; }

/* ============================================================== MODALS ==== */
/* Storefront Bootstrap modals (quick-view / quick-shop / confirmations). */
.modal-backdrop { --bs-backdrop-bg: var(--fbl-footer-bg); --bs-backdrop-opacity: .5; }
.custom-modal .modal-content,
.fbl-modal .modal-content {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 20px 48px rgba(18, 32, 30, .3);
    overflow: hidden;
}

/* Reusable confirm / action modal recipe for the upcoming pages ------------- */
.fbl-modal-panel {
    background: #fff; border-radius: 12px; width: 100%;
    box-shadow: 0 20px 48px rgba(18, 32, 30, .3); overflow: hidden;
    display: flex; flex-direction: column;
}
.fbl-modal-panel--confirm { max-width: 400px; }
.fbl-modal-panel--action { max-width: 440px; }
.fbl-modal-panel--wide { max-width: 520px; }
.fbl-modal-head {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 24px; border-bottom: 1px solid var(--fbl-neutral-1);
}
.fbl-modal-title { font-size: 15.5px; font-weight: 600; color: var(--fbl-ink); margin: 0; }
.fbl-modal-close {
    margin-inline-start: auto; color: var(--fbl-ink-3); font-size: 18px; line-height: 1;
    background: none; border: 0; padding: 4px; cursor: pointer;
}
.fbl-modal-close:hover { color: var(--fbl-ink); }
.fbl-modal-body { padding: 18px 24px; font-size: 13.5px; line-height: 1.6; color: var(--fbl-ink-2); }
.fbl-modal-icon {
    width: 44px; height: 44px; border-radius: 11px; display: inline-flex;
    align-items: center; justify-content: center; font-size: 19px; flex: none;
}
.fbl-modal-icon--danger { background: var(--fbl-danger-bg); color: var(--fbl-danger); }
.fbl-modal-icon--brand { background: var(--fbl-brand-tint); color: var(--fbl-brand); }
.fbl-modal-foot {
    display: flex; gap: 10px; justify-content: flex-end;
    padding: 16px 24px 20px;
}
/* Money / escrow amounts are always restated in mono */
.fbl-modal-body .fbl-amount { font-family: 'IBM Plex Mono', 'Roboto Mono', monospace; font-weight: 700; }

/* Side drawer (desktop) ---------------------------------------------------- */
.fbl-drawer-panel {
    position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(420px, 92vw);
    background: #fff; box-shadow: -8px 0 32px rgba(18, 32, 30, .25);
    display: flex; flex-direction: column; z-index: 100700;
}
.fbl-drawer-head { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--fbl-neutral-1); }
.fbl-drawer-body { padding: 16px 20px; flex: 1; overflow-y: auto; }
.fbl-drawer-foot { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--fbl-neutral-1); }

/* Danger button (destructive actions — never the teal primary) ------------- */
.fbl-btn-danger { background: var(--fbl-danger); color: #fff; padding: 11px 18px; font-size: 13px; }
.fbl-btn-danger:hover { background: color-mix(in srgb, var(--fbl-danger) 82%, #000); color: #fff; }
.fbl-btn-danger-outline { background: #fff; color: var(--fbl-danger); border-color: var(--fbl-danger-border); padding: 10px 18px; font-size: 13px; }
.fbl-btn-danger-outline:hover { border-color: var(--fbl-danger); color: var(--fbl-danger); }

/* ========================================================= EMPTY STATES === */
.fbl-empty {
    background: #fff; border: 1px solid var(--fbl-border); border-radius: 12px;
    padding: 36px 28px; text-align: center;
}
.fbl-empty-icon {
    width: 56px; height: 56px; border-radius: 14px; background: var(--fbl-brand-tint);
    color: var(--fbl-brand); display: inline-flex; align-items: center; justify-content: center;
    font-size: 24px;
}
.fbl-empty-icon .material-symbols-outlined { font-size: 26px; }
.fbl-empty-title { font-size: 15px; font-weight: 600; color: var(--fbl-ink); margin-top: 14px; }
.fbl-empty-desc { font-size: 12.5px; color: var(--fbl-ink-3); margin-top: 6px; line-height: 1.55; }
.fbl-empty .fbl-btn { margin-top: 16px; }

/* ======================================================= LOADING STATES === */
@keyframes fbl-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes fbl-spin { to { transform: rotate(360deg); } }

.fbl-skeleton {
    background: linear-gradient(90deg, var(--fbl-neutral-1) 25%, var(--fbl-neutral-2) 50%, var(--fbl-neutral-1) 75%);
    background-size: 200% 100%;
    animation: fbl-shimmer 1.4s infinite linear;
    border-radius: 4px;
    display: block;
}
.fbl-skeleton--media { height: 130px; border-radius: 10px; }
.fbl-skeleton--line { height: 12px; }
.fbl-skeleton--line-sm { height: 11px; }
.fbl-skeleton--price { height: 16px; width: 40%; }
.fbl-skeleton--avatar { width: 34px; height: 34px; border-radius: 6px; }

.fbl-spinner,
.fbl-spinner-sm {
    display: inline-block; border-radius: 999px; border: 3px solid var(--fbl-border);
    border-top-color: var(--fbl-brand); animation: fbl-spin .8s infinite linear;
    width: 28px; height: 28px;
}
.fbl-spinner-sm { width: 18px; height: 18px; border-width: 2.5px; }

/* Busy button: disable + darken + inline spinner while pending */
.fbl-btn.is-busy,
.fbl-btn[aria-busy="true"] {
    background: var(--fbl-brand-deep); opacity: .85; cursor: wait; pointer-events: none;
}
.fbl-btn.is-busy::before {
    content: ""; width: 14px; height: 14px; border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
    animation: fbl-spin .8s infinite linear; margin-inline-end: 4px;
}

/* ========================================================= ERROR STATES === */
/* Page-level error/empty card */
.fbl-state-card {
    background: #fff; border: 1px solid var(--fbl-border); border-radius: 12px;
    padding: 40px 28px; text-align: center;
}
.fbl-state-icon {
    width: 56px; height: 56px; border-radius: 14px; display: inline-flex;
    align-items: center; justify-content: center; font-size: 24px; font-weight: 700;
}
.fbl-state-icon--danger { background: var(--fbl-danger-bg); color: var(--fbl-danger); }
.fbl-state-icon--brand { background: var(--fbl-brand-tint); color: var(--fbl-brand); }
.fbl-state-title { font-size: 16px; font-weight: 600; color: var(--fbl-ink); margin-top: 14px; }
.fbl-state-desc { font-size: 12.5px; color: var(--fbl-ink-3); margin-top: 6px; line-height: 1.55; }
.fbl-state-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.fbl-state-ref { font-size: 10.5px; color: var(--fbl-ink-3); margin-top: 14px; font-family: 'IBM Plex Mono', 'Roboto Mono', monospace; }

/* Inline banner alerts */
.fbl-alert {
    display: flex; gap: 12px; align-items: flex-start;
    border-radius: 8px; padding: 12px 16px; font-size: 13px; line-height: 1.5;
    border: 1px solid transparent;
}
.fbl-alert-icon { font-weight: 700; flex: none; line-height: 1.5; }
.fbl-alert-icon .material-symbols-outlined { font-size: 18px; }
.fbl-alert--danger { background: var(--fbl-danger-bg); border-color: var(--fbl-danger-border); color: var(--fbl-ink-2); }
.fbl-alert--danger .fbl-alert-icon { color: var(--fbl-danger); }
.fbl-alert--warning { background: var(--fbl-amber-bg); border-color: var(--fbl-amber-border); color: var(--fbl-ink-2); }
.fbl-alert--warning .fbl-alert-icon { color: var(--fbl-amber); }
.fbl-alert--success { background: var(--fbl-success-bg); border-color: var(--fbl-success-border); color: var(--fbl-ink-2); }
.fbl-alert--success .fbl-alert-icon { color: var(--fbl-success); }
.fbl-alert--info { background: var(--fbl-brand-tint); border-color: var(--fbl-brand-tint-2); color: var(--fbl-ink-2); }
.fbl-alert--info .fbl-alert-icon { color: var(--fbl-brand); }
.fbl-alert a { font-weight: 600; }

/* Field-level validation */
.fbl-field-error input,
.fbl-field-error textarea,
.fbl-field-error select,
input.fbl-input-error,
textarea.fbl-input-error {
    border-color: var(--fbl-danger) !important;
    background: var(--fbl-danger-bg);
}
.fbl-field-error input:focus,
input.fbl-input-error:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--fbl-danger) 18%, transparent); outline: none; }
.fbl-field-error-msg { font-size: 12px; color: var(--fbl-danger); margin-top: 5px; font-weight: 500; }

/* No-results (search) */
.fbl-noresults { display: flex; gap: 14px; align-items: center; }
.fbl-noresults-icon {
    width: 40px; height: 40px; border-radius: 10px; background: var(--fbl-neutral-2); color: var(--fbl-ink-3);
    display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex: none;
}
.fbl-noresults-text { font-size: 12.5px; color: var(--fbl-ink-2); line-height: 1.5; }

/* ================================================================ MOBILE == */
@media (max-width: 575.98px) {
    /* Modals become bottom sheets (radius 16 top corners) */
    .custom-modal .modal-dialog { align-items: flex-end; min-height: 100%; margin: 0; }
    .custom-modal .modal-content { border-radius: 16px 16px 0 0; }
    .fbl-drawer-panel { inset-inline: 0; width: 100%; top: auto; height: auto; max-height: 88vh; border-radius: 16px 16px 0 0; }
}