/* ============================================================
   CouponHub — custom styles layered on top of the Tailwind CDN
   ============================================================ */

:root {
    --brand-50: #eef2ff;
    --brand-100: #e0e7ff;
    --brand-500: #6366f1;
    --brand-600: #4f46e5;
    --brand-700: #4338ca;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: .75rem;
    padding: .625rem 1.25rem;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.25rem;
    transition: all .2s ease;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    box-shadow: 0 4px 14px rgba(99, 102, 241, .35);
}
.btn-primary:hover { box-shadow: 0 6px 22px rgba(99, 102, 241, .5); transform: translateY(-1px); }

.btn-outline { border-color: #e5e7eb; color: #374151; background: #fff; }
.btn-outline:hover { border-color: #6366f1; color: #4f46e5; background: #eef2ff; }

.btn-danger { background: #ef4444; color: #fff; }
.btn-danger:hover { background: #dc2626; }  .btn-sm { padding: .375rem .75rem; font-size: .75rem; border-radius: .5rem; }

/* ---------- Hide scrollbars on snap carousels ---------- */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ---------- Letter avatars ---------- */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

/* ---------- Text helpers ---------- */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Nav links (frontend) ---------- */
.nav-link {
    display: inline-flex;
    align-items: center;
    padding: .5rem .875rem;
    border-radius: .625rem;
    color: #4b5563;
    transition: all .15s;
}
.nav-link:hover { background: #f3f4f6; color: #111827; }
.nav-active { background: #eef2ff !important; color: #4f46e5 !important; font-weight: 600; }

/* ---------- Badges ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .125rem .5rem;
    border-radius: 9999px;
    font-size: .625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.25rem;
}
.badge-verified { background: #ecfdf5; color: #059669; }
.badge-popular  { background: #fff7ed; color: #ea580c; }
.badge-featured { background: #eef2ff; color: #4f46e5; }
.badge-code     { background: #f0fdfa; color: #0d9488; }
.badge-deal     { background: #eef2ff; color: #4f46e5; }
.badge-active   { background: #dcfce7; color: #16a34a; }
.badge-expired  { background: #fee2e2; color: #dc2626; }
.badge-disabled { background: #f3f4f6; color: #6b7280; }
.badge-mega     { background: #f5f3ff; color: #7c3aed; }

/* ---------- Coupon cards ---------- */
.coupon-card {
    transition: box-shadow .25s ease, transform .25s ease;
}
.coupon-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(17, 24, 39, .12);
}

/* ---------- Search dropdown ---------- */
.search-dropdown {
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    box-shadow: 0 12px 32px rgba(17, 24, 39, .14);
    padding: .5rem;
    z-index: 60;
    max-height: 22rem;
    overflow-y: auto;
}
.search-dropdown.hidden { display: none; }
.search-group { padding: .375rem .75rem; font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #9ca3af; }
.search-item { display: block; padding: .5rem .75rem; border-radius: .625rem; font-size: .875rem; color: #374151; }
.search-item:hover { background: #eef2ff; color: #4f46e5; }
.search-empty { padding: .75rem; font-size: .875rem; color: #6b7280; }
.search-all { display: block; margin-top: .25rem; padding: .625rem .75rem; border-top: 1px solid #f3f4f6; font-size: .8125rem; font-weight: 600; color: #4f46e5; border-radius: .5rem; }
.search-all:hover { background: #f9fafb; }

/* ---------- Flash messages ---------- */
.flash {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .875rem 1rem;
    border-radius: .75rem;
    font-size: .875rem;
    font-weight: 500;
    border: 1px solid;
    transition: opacity .3s ease, transform .3s ease;
}
.flash-success { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.flash-error   { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.flash-warning { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.flash-info    { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.flash-hide { opacity: 0; transform: translateY(-4px); }
.flash-close { background: transparent; border: 0; font-size: 1.25rem; line-height: 1; cursor: pointer; opacity: .6; padding: 0 .25rem; }
.flash-close:hover { opacity: 1; }

/* ---------- Modal ---------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 70;
    padding: 1rem;
}
.modal-hidden { display: none !important; }

/* ---------- Animations ---------- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.fade-in { animation: fadeInUp .3s ease-out; }

/* ---------- Scroll-reveal (newsletter CTA card) ----------
   The hidden state (.reveal) is applied from JS only, so the content stays
   visible when JavaScript is disabled or blocked (progressive enhancement).
   The reveal transition respects prefers-reduced-motion. */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease-out, transform .7s ease-out;
}
.reveal-visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-visible { transition: none; transform: none; }
    .reveal { opacity: 1; }
}

/* ---------- Admin ---------- */
.admin-label { display: block; font-size: .8125rem; font-weight: 600; color: #374151; margin-bottom: .375rem; }.admin-input {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    padding: .625rem .875rem;
    font-size: .875rem;
    outline: none;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.admin-input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .15); }
.admin-input[type="file"] { padding: .375rem; }

.dropdown-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .875rem;
    font-size: .8125rem;
    font-weight: 500;
    color: #374151;
    transition: all .15s;
}
.dropdown-item:hover { background: #f3f4f6; color: #4f46e5; }

.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th {
    text-align: left;
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6b7280;
    padding: .625rem .75rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 700;
}
.admin-table td { padding: .625rem .75rem; font-size: .8125rem; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
.admin-table tbody tr:hover td { background: #f9fafb; }
.admin-table tbody tr:last-child td { border-bottom: 0; }

/* Drag & drop reorder (coupons admin list) */
.coupon-row { transition: background-color .15s ease, opacity .15s ease; }
.coupon-row.dragging { opacity: .45; background: #eef2ff; }
.coupon-row.drop-target td { background: #eef2ff !important; box-shadow: inset 0 2px 0 #6366f1; }
.drag-handle { cursor: grab; }
.drag-handle:active { cursor: grabbing; }

/* Drag & drop reorder (homepage section order card) */
.homepage-section-row { transition: background-color .15s ease, opacity .15s ease; }
.homepage-section-row.dragging { opacity: .45; background: #eef2ff; }
.homepage-section-row.drop-target { background: #eef2ff !important; box-shadow: inset 0 2px 0 #6366f1; }

.menu-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5625rem .75rem;
    border-radius: .625rem;
    color: #cbd5e1;
    font-weight: 500;
    transition: all .15s;
}
.menu-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.menu-active { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff !important; }

.menu-badge {
    margin-left: auto;
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0 .375rem;
    border-radius: 9999px;
    background: #ef4444;
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.menu-active .menu-badge, .menu-item:hover .menu-badge { background: #fff; color: #dc2626; }
body.sidebar-collapsed .admin-sidebar .menu-badge { display: none; }

/* ---------- Collapsible admin sidebar ---------- */
.admin-sidebar { transition: width .2s ease; }
body.sidebar-collapsed .admin-sidebar { width: 4.5rem !important; }
body.sidebar-collapsed .admin-sidebar .menu-label,
body.sidebar-collapsed .admin-sidebar .sidebar-brand-text { display: none; }
body.sidebar-collapsed .admin-sidebar .menu-item { justify-content: center; padding-left: .625rem; padding-right: .625rem; }
body.sidebar-collapsed .admin-sidebar .menu-item svg { margin: 0; }
body.sidebar-collapsed .admin-sidebar nav { padding-left: .625rem; padding-right: .625rem; }
body.sidebar-collapsed .admin-sidebar .shrink-0 { padding-left: .5rem; padding-right: .5rem; }
body.sidebar-collapsed .admin-sidebar .h-16 { padding-left: .75rem; padding-right: .75rem; }

/* ---------- Session timeout toast ---------- */
.timeout-toast {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 80;
    background: #1e293b;
    color: #e2e8f0;
    padding: .875rem 1rem;
    border-radius: .75rem;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .35);
    font-size: .8125rem;
    display: flex;
    align-items: center;
    gap: .75rem;
}
.timeout-toast a { color: #a5b4fc; font-weight: 700; }
.timeout-toast a:hover { text-decoration: underline; }

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Hide scrollbars on horizontal-scroll rows (e.g. Top Categories on
   store pages) while keeping the row scrollable. */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* Scroll arrows for horizontal rows (shown only when the row overflows). */
.category-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(17, 24, 39, .12);
    color: #4b5563;
    transition: all .15s ease;
    cursor: pointer;
}
.category-scroll-btn:hover { border-color: #6366f1; color: #4f46e5; background: #eef2ff; }
.category-scroll-prev { left: -0.75rem; }
.category-scroll-next { right: -0.75rem; }
/* Required: the base .category-scroll-btn sets display:inline-flex, which would
   otherwise override the browser's built-in [hidden] rule — keep this selector
   so toggling the hidden attribute actually hides the arrows. */
.category-scroll-btn[hidden] { display: none; }

/* ---------- Blog prose ---------- */
.prose h2 { font-size: 1.5rem; font-weight: 800; margin-top: 1.75rem; margin-bottom: .75rem; }
.prose h3 { font-size: 1.25rem; font-weight: 700; margin-top: 1.5rem; margin-bottom: .5rem; }
.prose p { margin-bottom: 1rem; }
.prose ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose a { color: #4f46e5; font-weight: 600; }
.prose a:hover { text-decoration: underline; }
.prose img { border-radius: .75rem; margin: 1rem 0; }
.prose blockquote { border-left: 3px solid #c7d2fe; padding-left: 1rem; color: #6b7280; font-style: italic; margin: 1rem 0; }