/**
 * BOfferly Dark Mode Styles
 *
 * Dark mode is the DEFAULT theme for BOfferly.
 * This file provides explicit dark mode styling and ensures dark mode
 * overrides any conflicting styles when the .bofferly-dark class is present.
 *
 * @package BOfferly
 * @since   1.0.0
 */

/* ============================================
   DARK MODE ROOT VARIABLES
   ============================================ */
body.bofferly-dark,
body.dark-mode,
[data-theme="dark"] {
	/* Colors - Deep emerald/blue + black luxury */
	--bofferly-primary: #0D5C63;
	--bofferly-primary-dark: #094a50;
	--bofferly-primary-light: #0f7078;
	--bofferly-secondary: #1B2A41;
	--bofferly-accent: #C9A227;
	--bofferly-accent-light: #e0b534;

	/* Backgrounds */
	--bofferly-background: #0F1115;
	--bofferly-surface: #1A1D24;
	--bofferly-surface-hover: #232730;
	--bofferly-surface-light: #22262F;

	/* Text */
	--bofferly-text: #E8EAED;
	--bofferly-text-muted: #A0A5B0;
	--bofferly-text-dim: #6B7280;

	/* Borders */
	--bofferly-border: rgba(255, 255, 255, 0.08);
	--bofferly-border-strong: rgba(255, 255, 255, 0.15);

	/* Shadows */
	--bofferly-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
	--bofferly-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
	--bofferly-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
	--bofferly-shadow-glow: 0 0 40px rgba(13, 92, 99, 0.35);

	background-color: var(--bofferly-background);
	color: var(--bofferly-text);
}

/* ============================================
   DARK MODE BACKGROUND OVERRIDES
   ============================================ */
body.bofferly-dark {
	background: radial-gradient(ellipse at top left, #0F1A1C 0%, #0F1115 50%),
		radial-gradient(ellipse at bottom right, #0F1115 0%, #0A0D10 100%);
	background-attachment: fixed;
}

/* Body pattern overlay */
body.bofferly-dark::before {
	background-image:
		radial-gradient(circle at 20% 30%, rgba(13, 92, 99, 0.1) 0%, transparent 40%),
		radial-gradient(circle at 80% 70%, rgba(201, 162, 39, 0.06) 0%, transparent 40%);
	opacity: 1;
}

/* ============================================
   DARK MODE HEADER
   ============================================ */
body.bofferly-dark .top-bar {
	background: rgba(15, 17, 21, 0.7);
	border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.bofferly-dark .site-header {
	background: rgba(15, 17, 21, 0.85);
	border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.bofferly-dark .site-header.is-scrolled {
	background: rgba(15, 17, 21, 0.95);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* ============================================
   DARK MODE CARDS & SURFACES
   ============================================ */
body.bofferly-dark .content-card,
body.bofferly-dark .premium-card,
body.bofferly-dark .widget,
body.bofferly-dark .scholar-card,
body.bofferly-dark .video-card,
body.bofferly-dark .podcast-card,
body.bofferly-dark .debate-card,
body.bofferly-dark .ebook-card,
body.bofferly-dark .stat-card,
body.bofferly-dark .profile-stat-card,
body.bofferly-dark .history-item-card,
body.bofferly-dark .bookmark-card,
body.bofferly-dark .note-card,
body.bofferly-dark .popular-hadith-item,
body.bofferly-dark .quick-action-card,
body.bofferly-dark .feature-card,
body.bofferly-dark .tool-card,
body.bofferly-dark .related-content-card,
body.bofferly-dark .post-nav-link,
body.bofferly-dark .author-box,
body.bofferly-dark .summary-item,
body.bofferly-dark .auth-card,
body.bofferly-dark .panel-inner,
body.bofferly-dark .membership-tier-card {
	background: rgba(26, 29, 36, 0.6);
	border-color: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

body.bofferly-dark .content-card:hover,
body.bofferly-dark .scholar-card:hover,
body.bofferly-dark .video-card:hover,
body.bofferly-dark .podcast-card:hover,
body.bofferly-dark .debate-card:hover,
body.bofferly-dark .ebook-card:hover {
	background: rgba(30, 34, 42, 0.75);
	border-color: rgba(201, 162, 39, 0.3);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* ============================================
   DARK MODE FORMS
   ============================================ */
body.bofferly-dark .input-field,
body.bofferly-dark .input-textarea,
body.bofferly-dark .input-select,
body.bofferly-dark .modal-textarea,
body.bofferly-dark .newsletter-email-input,
body.bofferly-dark .donation-custom-input,
body.bofferly-dark .notes-search-input {
	background: rgba(15, 17, 21, 0.6);
	border-color: rgba(255, 255, 255, 0.08);
	color: var(--bofferly-text);
}

body.bofferly-dark .input-field:focus,
body.bofferly-dark .input-textarea:focus,
body.bofferly-dark .input-select:focus,
body.bofferly-dark .modal-textarea:focus,
body.bofferly-dark .newsletter-email-input:focus,
body.bofferly-dark .donation-custom-input:focus,
body.bofferly-dark .notes-search-input:focus {
	background: rgba(20, 23, 28, 0.8);
	border-color: var(--bofferly-primary);
	box-shadow: 0 0 0 3px rgba(13, 92, 99, 0.2);
}

body.bofferly-dark .input-field::placeholder,
body.bofferly-dark .input-textarea::placeholder,
body.bofferly-dark .modal-textarea::placeholder {
	color: rgba(255, 255, 255, 0.3);
}

/* ============================================
   DARK MODE BUTTONS
   ============================================ */
body.bofferly-dark .btn-primary {
	background: var(--bofferly-primary);
	color: #FFFFFF;
	box-shadow: 0 4px 14px rgba(13, 92, 99, 0.4);
}

body.bofferly-dark .btn-primary:hover {
	background: var(--bofferly-primary-light);
	box-shadow: 0 8px 24px rgba(13, 92, 99, 0.5);
}

body.bofferly-dark .btn-secondary {
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.15);
	color: var(--bofferly-text);
}

body.bofferly-dark .btn-secondary:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--bofferly-accent);
	color: var(--bofferly-accent);
}

/* ============================================
   DARK MODE NAVIGATION
   ============================================ */
body.bofferly-dark .primary-menu > li > a:hover,
body.bofferly-dark .primary-menu > li.current-menu-item > a {
	background: rgba(255, 255, 255, 0.05);
	color: var(--bofferly-accent);
}

body.bofferly-dark .sub-menu {
	background: rgba(20, 23, 28, 0.98);
	border-color: rgba(255, 255, 255, 0.08);
}

body.bofferly-dark .mega-panel {
	background: rgba(20, 23, 28, 0.98);
	border-color: rgba(255, 255, 255, 0.08);
}

body.bofferly-dark .mobile-navigation-overlay {
	background: rgba(15, 17, 21, 0.98);
}

body.bofferly-dark .mobile-navigation-inner {
	background: #1A1D24;
}

/* ============================================
   DARK MODE SEARCH OVERLAY
   ============================================ */
body.bofferly-dark .search-overlay {
	background: rgba(15, 17, 21, 0.98);
}

body.bofferly-dark .global-search-input-group {
	background: rgba(26, 29, 36, 0.9);
	border-color: rgba(255, 255, 255, 0.12);
}

body.bofferly-dark .search-results-container {
	background: rgba(20, 23, 28, 0.98);
}

/* ============================================
   DARK MODE HERO
   ============================================ */
body.bofferly-dark .hero-section {
	background: radial-gradient(ellipse at top, #0F1A1C 0%, #0F1115 60%);
}

body.bofferly-dark .hero-search-input-group {
	background: rgba(26, 29, 36, 0.8);
	border-color: rgba(255, 255, 255, 0.12);
}

body.bofferly-dark .hero-badge {
	background: rgba(201, 162, 39, 0.1);
	border-color: rgba(201, 162, 39, 0.3);
}

/* ============================================
   DARK MODE ISLAMIC CONTENT BLOCKS
   ============================================ */
body.bofferly-dark .ayah-arabic-text,
body.bofferly-dark .hadith-arabic-text,
body.bofferly-dark .dua-arabic-text {
	background: linear-gradient(135deg, rgba(13, 92, 99, 0.12), rgba(201, 162, 39, 0.05));
	color: #F5F5F5;
}

body.bofferly-dark .article-content blockquote {
	background: rgba(13, 92, 99, 0.1);
	color: #E8EAED;
}

body.bofferly-dark .reference-block,
body.bofferly-dark .dua-reference-info,
body.bofferly-dark .hadith-reference-info {
	background: rgba(13, 92, 99, 0.1);
}

body.bofferly-dark .dua-benefits-info,
body.bofferly-dark .bookmark-user-note {
	background: rgba(201, 162, 39, 0.08);
}

/* ============================================
   DARK MODE FOOTER
   ============================================ */
body.bofferly-dark .site-footer {
	background: rgba(10, 12, 15, 0.98);
	border-top-color: rgba(255, 255, 255, 0.06);
}

/* ============================================
   DARK MODE SIDEBAR WIDGETS
   ============================================ */
body.bofferly-dark .widget {
	background: rgba(26, 29, 36, 0.6);
}

body.bofferly-dark .widget-title {
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* ============================================
   DARK MODE PAGINATION
   ============================================ */
body.bofferly-dark .pagination-item a,
body.bofferly-dark .pagination-item span {
	background: rgba(26, 29, 36, 0.6);
	border-color: rgba(255, 255, 255, 0.08);
}

body.bofferly-dark .pagination-item a:hover {
	background: rgba(13, 92, 99, 0.2);
	border-color: var(--bofferly-primary);
}

/* ============================================
   DARK MODE MODALS
   ============================================ */
body.bofferly-dark .modal-overlay {
	background: rgba(0, 0, 0, 0.85);
}

body.bofferly-dark .modal-content {
	background: #1A1D24;
	border-color: rgba(255, 255, 255, 0.08);
}

body.bofferly-dark .modal-header {
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.bofferly-dark .modal-footer {
	border-top-color: rgba(255, 255, 255, 0.08);
}

/* ============================================
   DARK MODE TOGGLES
   ============================================ */
body.bofferly-dark .toggle-slider {
	background: rgba(255, 255, 255, 0.15);
}

body.bofferly-dark .toggle-switch input:checked + .toggle-slider {
	background: var(--bofferly-primary);
}

/* ============================================
   DARK MODE BREADCRUMBS
   ============================================ */
body.bofferly-dark .bofferly-breadcrumbs {
	border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* ============================================
   DARK MODE FILTERS
   ============================================ */
body.bofferly-dark .filter-button,
body.bofferly-dark .filter-link,
body.bofferly-dark .filter-term,
body.bofferly-dark .popular-search-tag,
body.bofferly-dark .taxonomy-term {
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.08);
	color: var(--bofferly-text-muted);
}

body.bofferly-dark .filter-button:hover,
body.bofferly-dark .filter-link:hover,
body.bofferly-dark .filter-term:hover,
body.bofferly-dark .popular-search-tag:hover,
body.bofferly-dark .taxonomy-term:hover {
	background: rgba(201, 162, 39, 0.1);
	border-color: var(--bofferly-accent);
	color: var(--bofferly-accent);
}

body.bofferly-dark .filter-button.is-active,
body.bofferly-dark .filter-link.is-active {
	background: rgba(13, 92, 99, 0.25);
	border-color: var(--bofferly-primary);
	color: var(--bofferly-accent);
}

/* ============================================
   DARK MODE DASHBOARD
   ============================================ */
body.bofferly-dark .dashboard-nav,
body.bofferly-dark .settings-tabs-nav,
body.bofferly-dark .bookmarks-filter-nav,
body.bofferly-dark .notes-filter-nav,
body.bofferly-dark .history-filter-nav {
	background: rgba(26, 29, 36, 0.6);
	border-color: rgba(255, 255, 255, 0.08);
}

body.bofferly-dark .dashboard-nav-link:hover,
body.bofferly-dark .dashboard-nav-item.is-active .dashboard-nav-link,
body.bofferly-dark .tab-link:hover,
body.bofferly-dark .tab-link.is-active {
	background: rgba(13, 92, 99, 0.2);
	color: var(--bofferly-accent);
}

/* ============================================
   DARK MODE PROFILE
   ============================================ */
body.bofferly-dark .profile-avatar {
	border-color: #0F1115;
}

body.bofferly-dark .profile-cover {
	background: linear-gradient(135deg, #094a50 0%, #1B2A41 100%);
}

/* ============================================
   DARK MODE SELECTION
   ============================================ */
body.bofferly-dark ::selection {
	background-color: rgba(13, 92, 99, 0.6);
	color: #FFFFFF;
}

body.bofferly-dark ::-moz-selection {
	background-color: rgba(13, 92, 99, 0.6);
	color: #FFFFFF;
}

/* ============================================
   DARK MODE SCROLLBAR
   ============================================ */
body.bofferly-dark ::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

body.bofferly-dark ::-webkit-scrollbar-track {
	background: rgba(15, 17, 21, 0.5);
}

body.bofferly-dark ::-webkit-scrollbar-thumb {
	background: rgba(13, 92, 99, 0.6);
	border-radius: var(--bofferly-radius-full);
}

body.bofferly-dark ::-webkit-scrollbar-thumb:hover {
	background: rgba(13, 92, 99, 0.8);
}

/* ============================================
   DARK MODE IMAGE ADJUSTMENTS
   ============================================ */
body.bofferly-dark img {
	/* Slight dimming for images in dark mode (opt-out via .no-dim) */
	transition: filter var(--bofferly-transition-fast);
}

body.bofferly-dark img.no-dim,
body.bofferly-dark img[data-no-dim] {
	filter: none;
}

/* ============================================
   DARK MODE PRINT
   ============================================ */
@media print {
	body.bofferly-dark {
		background: #FFFFFF !important;
		color: #000000 !important;
	}

	body.bofferly-dark .site-header,
	body.bofferly-dark .site-footer,
	body.bofferly-dark .top-bar,
	body.bofferly-dark .bofferly-back-to-top,
	body.bofferly-dark .reading-progress-bar,
	body.bofferly-dark .bofferly-reading-progress {
		display: none !important;
	}
}

/* ============================================
   RESPONSIVE DARK-MODE HARDENING
   ============================================ */
@media screen and (max-width: 767px) {
	body.bofferly-dark .hero-search-input-group {
		background: rgba(26, 29, 36, 0.92);
		border-color: rgba(255, 255, 255, 0.14);
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	}

	body.bofferly-dark .hero-search-submit {
		background: var(--bofferly-primary);
		color: #FFFFFF;
	}

	body.bofferly-dark .bofferly-search-toggle {
		background: rgba(255, 255, 255, 0.02);
		border-color: rgba(255, 255, 255, 0.12);
		color: var(--bofferly-text);
	}
}