/* Dark theme overrides for storefront */

.theme-dark body {
    color: var(--dark-text);
}

.theme-dark {
    --site-section-bg: var(--site-section-bg-dark);
    --dark-bg: #020617; /* slate-950 */
    --dark-elevated-bg: #111827; /* slate-900 */
    --dark-border: #1e293b; /* slate-800 */
    --dark-strong-border: #1f2937; /* strong border */
    --dark-text: #e5e7eb; /* slate-200 */
    --dark-muted-text: #9ca3af; /* slate-400 */
    --dark-skeleton-bg: #1f2933; /* skeleton base */
}

.theme-dark .bg-white,
.theme-dark .bg-slate-50,
.theme-dark .bg-slate-100,
.theme-dark .bg-slate-200,
.theme-dark .bg-slate-300 {
    background-color: var(--dark-bg);
}

.theme-dark .border-slate-100,
.theme-dark .border-slate-200,
.theme-dark .border-slate-300 {
    border-color: var(--dark-border);
}

.theme-dark .text-slate-900,
.theme-dark .text-slate-800,
.theme-dark .text-slate-700 {
    color: var(--dark-text);
}

.theme-dark .text-black {
    color: var(--dark-text);
}

.theme-dark .text-slate-600,
.theme-dark .text-slate-500,
.theme-dark .text-slate-400 {
    color: var(--dark-muted-text);
}

/* Escape special characters for Tailwind's arbitrary value class names in raw CSS */
.theme-dark [class*="bg-\[var(--site-bg)\]"] {
    background-color: var(--dark-bg);
}

/* In dark mode, avoid using the configurable primary/secondary
   colors as solid backgrounds so the overall feel stays truly dark. */
.theme-dark [class*="bg-\[color:var(--site-primary)\]"],
.theme-dark [class*="bg-\[color:var(--site-primary-light)\]"] {
    background-color: var(--dark-bg);
}
.theme-dark .shop-page-sidebar-container {
    border-color: var(--dark-border);
}

.theme-dark [class*="border-\[color:var(--site-primary)\]"],
.theme-dark [class*="border-\[color:var(--site-primary-light)\]"] {
    border-color: var(--dark-border);
}

.theme-dark [class*="bg-\[color:var(--site-primary)\]/10"] {
    background-color: rgba(15, 23, 42, 0.7); /* dark overlay */
}

/* Dark-mode version of primary CTA button */
.theme-dark .website-btn-primary {
    background-color: var(--dark-elevated-bg);
    color: var(--dark-text);
    border: 1px solid var(--dark-strong-border);
}

.theme-dark .website-btn-primary:hover {
    background-color: var(--dark-bg);
    border-color: #38bdf8; /* accent border (matches shop-category-pill:hover) */
    color: #e0f2fe; /* sky-100 */
}
.theme-dark .shop-by-category-container {
    background-color: var(--dark-bg);
}

/* Dark mode for category gradient backgrounds - use subtle dark gradients */
.theme-dark .shop-category-packages-btn .bg-gradient-to-br {
    background: linear-gradient(to bottom right, var(--dark-elevated-bg), var(--dark-bg)) !important;
}

.theme-dark .shop-category-pill .bg-gradient-to-br {
    background: linear-gradient(to bottom right, var(--dark-elevated-bg), var(--dark-bg)) !important;
}

/* Dark mode for category text colors */
.theme-dark .shop-category-packages-btn h3 {
    color: var(--dark-text) !important;
}

.theme-dark .shop-category-pill h3 {
    color: var(--dark-text) !important;
}

.theme-dark .shop-category-pill p {
    color: var(--dark-muted-text) !important;
}

/* Dark-mode tweaks for key interactive pills and wishlist/add buttons */
.theme-dark .shop-category-pill {
    background-color: var(--dark-bg);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

.theme-dark .shop-category-pill:hover {
    background-color: var(--dark-elevated-bg);
    border-color: #38bdf8; /* accent border */
    color: #e0f2fe; /* sky-100 */
}

.theme-dark .shop-category-packages-btn {
    background-color: var(--dark-elevated-bg);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

.theme-dark .shop-category-packages-btn:hover {
    background-color: var(--dark-bg);
}

.theme-dark .website-add-pill {
    background-color: var(--dark-elevated-bg);
    color: var(--dark-text);
    border: 1px solid var(--dark-strong-border);
    box-shadow: none;
}

.theme-dark .website-add-pill:hover {
    background-color: var(--dark-bg);
    border-color: #38bdf8; /* accent border (matches shop-category-pill:hover) */
    color: #e0f2fe; /* sky-100 */
}

.theme-dark .website-wishlist-btn {
    background-color: var(--dark-elevated-bg);
    border: 1px solid var(--dark-strong-border);
    color: var(--dark-text);
}

.theme-dark .category-scroll-btn {
    background-color: var(--dark-bg);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

.theme-dark .category-scroll-btn:hover {
    background-color: var(--dark-elevated-bg);
}

/* Dark-mode styling for skeleton loaders */
.theme-dark .skeleton {
    background-color: var(--dark-skeleton-bg);
    background-image: linear-gradient(
        90deg,
        var(--dark-skeleton-bg) 0px,
        var(--dark-elevated-bg) 40px,
        var(--dark-skeleton-bg) 80px
    );
}

/* Chat widget dark/light adjustments */
.theme-dark .chat-widget__panel {
    background: var(--dark-bg);
    color: var(--dark-text);
}

.theme-dark .chat-widget__header {
    background: rgba(148, 163, 184, 0.08);
    border-bottom: 1px solid var(--dark-border);
}

.theme-dark .chat-widget__label input,
.theme-dark .chat-widget__label textarea {
    background: rgba(15, 23, 42, 0.7);
    border-color: var(--dark-border);
}

.theme-dark .chat-widget__composer input {
    background: rgba(148, 163, 184, 0.18);
}

.theme-dark .chat-widget__bubble {
    background: rgba(56, 189, 248, 0.16);
}

.theme-dark .chat-widget__message--customer .chat-widget__bubble {
    background: rgba(59, 130, 246, 0.5);
}

.theme-dark .chat-widget__toggle {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}