: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;
}

/* ---------------------------------------------------------------------------
   Show the full menu from 1152px, not 1280px.

   The header switches to the hamburger below Tailwind's xl breakpoint of
   1280px. Measured on the live page, its three parts need 1145px between them:
   145 for the logo, 564 for the six menu items, 212 for Login and Donate Now,
   and 224 of gaps and padding. So everything from 1145 to 1280 was hiding a
   menu that fits.

   That band is not unusual, it is where a lot of real desktops sit. Windows
   ships 150% scaling by default on many machines, which turns a 1920 screen
   into 1280 logical pixels, and the scrollbar takes it just under. A 1366
   laptop at 125% lands on 1093. Any window that is not maximised can land
   there too.

   1152 keeps a small margin over the 1145 the header actually needs. Tailwind
   has no default breakpoint between lg at 1024 and xl at 1280, and 1024 is
   below what fits, so the rule is written here rather than as a utility.
   crescent.css is the last stylesheet the page loads, so this lands after the
   xl utilities it overrides.
--------------------------------------------------------------------------- */
@media (min-width: 1152px) {
    header nav > ul.hidden,
    header nav > div.hidden {
        display: flex !important;
    }

    header nav > button[onclick*="openCrescentMobileMenu"] {
        display: none !important;
    }
}