:root {
  --cr-dark: #0a2540;
  --cr-dark-2: #0A2540;
  --cr-green: #0a2540;
  --cr-gold: #c9a84c;
  --cr-gold-light: #e8d48b;
  --cr-cream: #f8f5f0;
  --cr-cream-2: #f0ece4;
  --cr-white: #ffffff;
  --cr-dark-bg: #0a1a2e;
  --cr-text: #2d2d2d;
  --cr-text-light: #6b7280;
  --cr-shadow: 0 4px 24px rgba(0,0,0,0.08);
  --cr-radius: 12px;
  --cr-transition: all 0.3s ease;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--cr-text);
  overflow-x: hidden;
}

/* ─── Utility Bar ─── */
#hadithContent {
  transition: opacity 0.4s ease;
}

/* ─── Navigation ─── */
.cr-nav {
  background: var(--cr-white);
  padding: 0;
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.cr-nav .container-fluid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.cr-nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.cr-nav__brand span {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--cr-dark);
  letter-spacing: -0.5px;
}
.cr-nav__brand img {
  max-height: 44px;
  width: auto;
  display: block;
}
.cr-nav__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cr-btn-login {
  color: var(--cr-dark);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 8px 16px;
  border-radius: 6px;
  transition: var(--cr-transition);
}
.cr-btn-login:hover {
  background: var(--cr-cream);
  color: var(--cr-dark);
}
.cr-btn-donate {
  background: var(--cr-dark);
  color: var(--cr-white) !important;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 10px 24px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  transition: var(--cr-transition);
  border: 2px solid var(--cr-dark);
}
.cr-btn-donate:hover {
  background: var(--cr-dark-2);
  border-color: var(--cr-dark-2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15,59,44,0.3);
}
.cr-hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--cr-dark);
  cursor: pointer;
  padding: 4px;
}

/* ─── Hero ─── */

/* ─── Metrics Bar ─── */

/* ─── Section Headers ─── */
.cr-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}
.cr-header__sub {
  display: inline-block;
  color: var(--cr-gold);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.cr-header__title {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--cr-dark);
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}
.cr-header__desc {
  color: var(--cr-text-light);
  font-size: 1.05rem;
  line-height: 1.7;
}
.cr-header--light .cr-header__title {
  color: var(--cr-white);
}
.cr-header--light .cr-header__desc {
  color: rgba(255,255,255,0.7);
}

/* ─── Campaign Cards ─── */

/* ─── Impact ─── */
.cr-impact {
  padding: 100px 0;
  background: linear-gradient(135deg, var(--cr-dark) 0%, #0d1f35 100%);
  position: relative;
  overflow: hidden;
}
.cr-impact::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 10C50 10 10 50 10 100s40 90 90 90 90-40 90-90S150 10 100 10z" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="2"/><path d="M100 30C60 30 30 60 30 100s30 70 70 70 70-30 70-70S140 30 100 30z" fill="none" stroke="rgba(255,255,255,0.02)" stroke-width="2"/></svg>') repeat;
  background-size: 300px;
  opacity: 0.5;
}
.cr-impact__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  position: relative;
  z-index: 1;
}
.cr-impact-card {
  text-align: center;
  padding: 40px 24px;
  border-radius: var(--cr-radius);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  transition: var(--cr-transition);
}
.cr-impact-card:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-4px);
}
.cr-impact-card__icon {
  font-size: 2.5rem;
  color: var(--cr-gold);
  margin-bottom: 16px;
}
.cr-impact-card__number {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--cr-white);
  margin-bottom: 6px;
}
.cr-impact-card__label {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
}

/* ─── Footer ─── */

/* ─── Mobile Menu ─── */

/* ─── Responsive ─── */
@media (max-width: 1199px) {
  
  .cr-nav__actions .cr-btn-login,
  .cr-nav__actions .cr-btn-donate {
    display: none;
  }
  .cr-hamburger { display: block; }
  .cr-nav__actions { gap: 8px; }
}

/* Pagination - circular, light gold */

/* Form control focus - lighter gold */
.form-control:focus,
.form--control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: #dcc391 !important;
  outline-color: #dcc391 !important;
}

@media (max-width: 991px) {
  .cr-impact__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .cr-header__title { font-size: 2rem; }
}

@media (max-width: 767px) {
  .cr-impact__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .cr-impact-card { padding: 24px 16px; }
  .cr-impact-card__number { font-size: 1.8rem; }
}

@media (max-width: 480px) {
  .cr-impact__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 400px) {
  .cr-impact__grid { grid-template-columns: 1fr; }
}

/* ─── Fix Bootstrap overrides for Tailwind colors ─── */
.text-primary { color: #000f22 !important; }
.text-primary-container { color: #0a2540 !important; }
.text-secondary-container { color: #d8ad45 !important; }
.bg-secondary-container { background-color: #d8ad45 !important; }
.text-on-surface-variant { color: #6F6F6F !important; }
.text-on-primary { color: #ffffff !important; }
.text-outline-variant { color: #c4c6ce !important; }
.text-secondary { color: #735c00 !important; }

/* ===== GLOBAL TYPOGRAPHY ===== */
body { font-family: 'Inter', sans-serif; }
h1, h2, h3, h4, h5, h6,
.font-serif, [class*="font-display"], [class*="font-headline"],
.card-title, .section-heading__title { font-family: 'Playfair Display', serif !important; }

/* ===== CARD HOVER BORDER ===== */

/* ===== VIEW ALL LINKS HOVER ===== */
a.border-b-2.border-primary-container:hover {
    color: #d8ad45 !important;
    border-color: #d8ad45 !important;
}

/* ===== GLOBAL HOVER, ACTIVE, FOCUS, SELECTION OVERRIDES ===== */
::selection { background: #c8a96e !important; color: #ffffff !important; }
::-moz-selection { background: #c8a96e !important; color: #ffffff !important; }

a:hover, a:focus, a:active,
button:hover, button:focus, button:active,
.nav-link:hover, .nav-link:focus, .nav-link.active,
.btn:hover, .btn:focus, .btn:active, .btn.active,
.form-control:focus, .form-select:focus,
[class*="hover"]:hover,
.footer-menu__link:hover,
.social-list__link:hover, .social-list__link.active, .social-list__link:focus,
.share-card__social-item:hover,
.dropdown-item:hover, .dropdown-item:active,
.payment-item:hover,
.language-dropdown__item:hover,
.border-effect:hover,
.client-logo:hover,
.latest-blog__title a:hover,
.account-form__social-link:hover,
.hover--effect-1:hover,
a.dashboard-widget:hover,
.user-details__menu-list:hover, .user-details__menu-list.active {
  color: #d8ad45 !important;
}

/* ===== SIDEBAR WHITE TEXT ===== */
.dashboard-sidebar .sidebar-menu__item {
  background-color: #0A2540 !important;
}
.dashboard-sidebar .sidebar-menu__item .icon,
.dashboard-sidebar .sidebar-menu__item .text {
  color: #fff !important;
}
.dashboard-sidebar .sidebar-menu__item:hover {
  background-color: #0A2540 !important;
}
.dashboard-sidebar .sidebar-menu__item.active,
.dashboard-sidebar .active > .sidebar-menu__item {
  background-color: #0A2540 !important;
}
.sidebar-profile__btn.btn--base {
  background-color: #0A2540 !important;
  color: #fff !important;
  border-color: #0A2540 !important;
}
.sidebar-profile__btn.btn--base:hover {
  background-color: #0A2540 !important;
}

/* ===== DASHBOARD WIDGET ICONS ===== */
.dashboard-widget__icon {
  background-color: rgba(31, 87, 143, 0.15) !important;
  color: #0A2540 !important;
}

/* ===== ALL btn--base ===== */
.btn--base {
  background-color: #0A2540 !important;
  color: #fff !important;
  border-color: #0A2540 !important;
}
.btn--base:hover, .btn--base:focus {
  background-color: #0A2540 !important;
  color: #fff !important;
}

/* ===== PROFILE TABS ===== */
.dashboard-tab__item:hover {
  color: #0A2540 !important;
  border-bottom-color: #0A2540 !important;
}
.dashboard-tab__item.active {
  background-color: #0A2540 !important;
  color: #fff !important;
  border-bottom-color: #0A2540 !important;
}

/* ===== PROFILE EDIT PAGE ===== */
.thumb-upload__label {
  border-color: #0A2540 !important;
}
.thumb-upload__label .icon,
.cover-upload__label .icon {
  background-color: #0A2540 !important;
  color: #fff !important;
}
.profile-share-btn,
.user-details__share .profile-share-btn,
.bg--base {
  background-color: #0A2540 !important;
  color: #fff !important;
}

/* ===== CIRCULAR SHAPES ===== */
.btn, .nav-link, .sidebar-menu__item, .dashboard-tab__item,
.dropdown-item, .payment-item, .share-card__social-item,
a.dashboard-widget, .user-details__menu-list,
[class*="hover--effect"],
.event-card, .bento-card, .impact-card {
  border-radius: 12px !important;
}

/* ===== CARD STANDARDIZATION ===== */
.bento-card, .impact-card, [class*="card"]:not(.card-header):not(.card-footer) {
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s !important;
}
.bento-card:hover, .impact-card:hover, [class*="card"]:hover {
  transform: translateY(-2px) !important;
}