@import url("../theme/variables.css");
@charset "UTF-8";
/*
 * AZZAM GLOBAL THEME — single source of truth for all website colors.
 * Change ONLY the variables inside 

/* Base */
html, body { background: var(--azzam-page) !important; color: var(--azzam-text) !important; }
body { accent-color: var(--azzam-primary) !important; }
a { color: var(--azzam-primary-hover); }
a:hover { color: var(--azzam-primary); }
::selection { background: var(--azzam-primary); color: var(--azzam-on-primary); }

/* Admin / owner / user shells */
.page-wrapper, .page-body-wrapper, .page-body, .container-fluid { background-color: var(--azzam-page) !important; }
.page-main-header, .page-header, .header-wrapper, .page-title, .landing-header, .azzam-topbar {
  background: var(--azzam-dark) !important;
  border-color: var(--azzam-border) !important;
  color: var(--azzam-on-dark) !important;
}
.page-main-header *, .page-header *, .header-wrapper *, .landing-header *, .azzam-topbar * { border-color: var(--azzam-border) !important; }
.main-nav, .sidebar-wrapper, .page-sidebar, .sidebar-main, .sidebar-user, .navs-icon, .page-sidebar .sidebar-menu {
  background: var(--azzam-dark) !important;
  color: var(--azzam-on-dark) !important;
  border-color: var(--azzam-border) !important;
}
/* Sidebar typography/colors — V60: premium gold text like the redesigned pages */
.sidebar-wrapper a,
.main-nav a,
.sidebar-menu a,
.sidebar-wrapper .sidebar-link,
.main-nav .sidebar-link,
.sidebar-menu .sidebar-link,
.sidebar-wrapper .sidebar-list > a,
.main-nav .sidebar-list > a {
  color: #e8c86a !important;
  font-weight: 800 !important;
}

/* Force nested labels/icons to inherit the same gold even when the base template overrides them. */
.sidebar-wrapper a span,
.main-nav a span,
.sidebar-menu a span,
.sidebar-wrapper .sidebar-link span,
.main-nav .sidebar-link span,
.sidebar-wrapper a i,
.main-nav a i,
.sidebar-menu a i,
.sidebar-wrapper a svg,
.main-nav a svg,
.sidebar-menu a svg {
  color: #e8c86a !important;
  fill: currentColor;
  stroke: currentColor;
}

.sidebar-wrapper a:hover,
.main-nav a:hover,
.sidebar-menu a:hover,
.sidebar-wrapper .sidebar-link:hover,
.main-nav .sidebar-link:hover,
.sidebar-wrapper .active > a,
.main-nav .active > a,
.sidebar-menu .active > a,
.sidebar-wrapper .sidebar-link.active,
.main-nav .sidebar-link.active {
  color: #ffd34d !important;
  background: rgba(var(--azzam-primary-rgb), .11) !important;
}

.sidebar-wrapper a:hover span,
.main-nav a:hover span,
.sidebar-menu a:hover span,
.sidebar-wrapper a:hover i,
.main-nav a:hover i,
.sidebar-menu a:hover i,
.sidebar-wrapper .active > a span,
.main-nav .active > a span,
.sidebar-menu .active > a span,
.sidebar-wrapper .active > a i,
.main-nav .active > a i,
.sidebar-menu .active > a i,
.sidebar-wrapper .active > a svg,
.main-nav .active > a svg,
.sidebar-menu .active > a svg {
  color: #ffd34d !important;
  fill: currentColor;
  stroke: currentColor;
}

/* Cards and surfaces */
.card, .box, .panel, .modal-content, .dropdown-menu, .list-group-item, .accordion-item,
.default-according, .widget-joins, .small-widget, .authenticator-box, .cal-date-widget,
.todo, .activity-table, .order-history, .product-page-main, .login-card, .table-responsive {
  background-color: var(--azzam-card) !important;
  color: var(--azzam-text) !important;
  border-color: var(--azzam-border) !important;
  box-shadow: var(--azzam-shadow-sm) !important;
}
.card, .box, .panel, .modal-content { border-radius: var(--azzam-radius) !important; }
.card-header, .modal-header, .modal-footer, .card-footer { border-color: var(--azzam-border) !important; }

/* Buttons, badges, form focus */
.btn-primary, .btn-success, .btn-warning, button[type="submit"], input[type="submit"],
.azzam-btn-primary, .submit-btn, .order-btn, .request-btn, .whatsapp-btn,
.badge-primary, .badge-success, .bg-primary, .bg-success {
  background: var(--azzam-gradient) !important;
  border-color: var(--azzam-primary) !important;
  color: var(--azzam-on-primary) !important;
  box-shadow: 0 10px 24px rgba(var(--azzam-primary-rgb), .22) !important;
}
.btn-primary:hover, .btn-success:hover, .btn-warning:hover, button[type="submit"]:hover,
.azzam-btn-primary:hover, .submit-btn:hover, .order-btn:hover, .request-btn:hover {
  background: linear-gradient(135deg, var(--azzam-primary) 0%, var(--azzam-primary-hover) 100%) !important;
  border-color: var(--azzam-primary-hover) !important;
  transform: translateY(-1px);
}
.btn-outline-primary, .btn-outline-success, .azzam-btn-outline {
  background: transparent !important; color: var(--azzam-primary-hover) !important; border-color: var(--azzam-primary) !important;
}
.form-control:focus, .form-select:focus, .select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus {
  border-color: var(--azzam-primary) !important;
  box-shadow: 0 0 0 .2rem rgba(var(--azzam-primary-rgb), .16) !important;
}

/* Tables */
.table thead th, table thead th { background: var(--azzam-dark-soft) !important; color: var(--azzam-primary-light) !important; border-color: var(--azzam-border) !important; }
.table td, .table th, table td, table th { border-color: rgba(var(--azzam-primary-rgb), .18) !important; }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(var(--azzam-primary-rgb), .045) !important; }

/* Public landing page */
body.landing-wrraper, .landing-wrraper, .landing-page { background: var(--azzam-page) !important; }
.landing-home, .hero-section, #home, .home-section {
  background: var(--azzam-gradient-dark) !important;
  color: var(--azzam-on-dark) !important;
}
.landing-home::before, .hero-section::before, #home::before {
  background: radial-gradient(circle at 20% 35%, rgba(var(--azzam-primary-rgb), .16), transparent 42%) !important;
}
.hero-video-wrapper, .hero-image-wrapper, .hero-circle, .video-circle, .horse-video-container {
  border-color: var(--azzam-primary) !important;
  box-shadow: 0 0 0 1px rgba(var(--azzam-primary-rgb), .42), 0 24px 60px rgba(var(--azzam-dark-rgb), .34) !important;
}

/* Statistics */
#stats, .stats-section, .hero-stats-section { background: var(--azzam-page) !important; }
.stats-wrapper, .stats-container, .hero-stats, .statistics-container {
  background: transparent !important; box-shadow: none !important; border-color: transparent !important;
}
.stat-card, .stats-card, .hero-stat-card, .stat-item {
  background: var(--azzam-card) !important;
  color: var(--azzam-text) !important;
  border: 1px solid var(--azzam-border) !important;
  border-radius: var(--azzam-radius) !important;
  box-shadow: var(--azzam-shadow-sm) !important;
}
.stat-card i, .stats-card i, .hero-stat-card i, .stat-item i, .stat-icon {
  color: var(--azzam-on-primary) !important; background: var(--azzam-gradient) !important;
}

/* Training section — deliberately light, premium and readable */
#training, .training-section, .training-area, .training-wrapper {
  background: var(--azzam-section) !important;
  color: var(--azzam-text) !important;
  border-color: var(--azzam-border) !important;
}
#training .training-card, #training .training-card-body, .training-card, .training-card-body,
.program-card, .course-card {
  background: var(--azzam-card) !important;
  color: var(--azzam-text) !important;
  border: 1px solid var(--azzam-border) !important;
  border-radius: var(--azzam-radius) !important;
  box-shadow: var(--azzam-shadow-sm) !important;
}
#training .training-card:hover, .training-card:hover, .program-card:hover {
  border-color: var(--azzam-border-strong) !important;
  box-shadow: var(--azzam-shadow) !important;
  transform: translateY(-5px);
}
#training h1, #training h2, #training h3, #training h4, #training h5,
.training-section h1, .training-section h2, .training-card h3 { color: var(--azzam-text) !important; }
#training p, #training li, .training-card p, .training-card li { color: var(--azzam-muted) !important; }
#training .icon, #training i, .training-card i { color: var(--azzam-primary-hover) !important; }

/* Services */
#services, #mares, .services-section, .mares-section { background: var(--azzam-page) !important; }
#services .framworks-list li, #mares .framworks-list li, .service-card, .service-item, .framework-item {
  background: var(--azzam-card) !important;
  color: var(--azzam-text) !important;
  border: 1px solid var(--azzam-border) !important;
  border-radius: var(--azzam-radius-sm) !important;
  box-shadow: var(--azzam-shadow-sm) !important;
}
#services .framworks-list li:hover, #mares .framworks-list li:hover, .service-card:hover, .service-item:hover {
  border-color: var(--azzam-border-strong) !important; transform: translateY(-4px); box-shadow: var(--azzam-shadow) !important;
}

/* Stallions / horses */
#stallions, .stallions-section, .horses-section { background: var(--azzam-section) !important; }
.azzam-stallion-card, .stallion-card, .horse-card, .product-box {
  background: var(--azzam-card) !important;
  color: var(--azzam-text) !important;
  border: 1px solid var(--azzam-border) !important;
  border-radius: var(--azzam-radius) !important;
  box-shadow: var(--azzam-shadow) !important;
  overflow: hidden;
}
.azzam-stallion-card .badge, .stallion-card .badge, .season-badge {
  background: var(--azzam-gradient) !important; color: var(--azzam-on-primary) !important;
}

/* Footer */
footer, .landing-footer, .azzam-footer, .footer {
  background: var(--azzam-dark) !important;
  color: rgba(var(--azzam-card-rgb), .78) !important;
  border-color: var(--azzam-border) !important;
}
footer h1, footer h2, footer h3, footer h4, footer h5, footer strong,
.landing-footer h1, .landing-footer h2, .landing-footer h3, .azzam-footer h3 { color: var(--azzam-primary-light) !important; }
footer a, .landing-footer a, .azzam-footer a { color: rgba(var(--azzam-card-rgb), .82) !important; }
footer a:hover, .landing-footer a:hover, .azzam-footer a:hover { color: var(--azzam-primary-light) !important; }

/* Utility compatibility */
.text-primary, .text-success { color: var(--azzam-primary-hover) !important; }
.border-primary, .border-success { border-color: var(--azzam-primary) !important; }
.nav-tabs .nav-link.active, .nav-pills .nav-link.active { background: var(--azzam-gradient) !important; color: var(--azzam-on-primary) !important; border-color: var(--azzam-primary) !important; }
.pagination .page-item.active .page-link { background: var(--azzam-primary) !important; border-color: var(--azzam-primary) !important; color: var(--azzam-on-primary) !important; }

/* Smooth global transitions without affecting layout */
.btn, .card, .service-card, .service-item, .training-card, .azzam-stallion-card, .stallion-card, .horse-card {
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease, transform .25s ease !important;
}

/* Payment attachment viewer — contain the file without cropping or nested scrolling. */
.page-body:has(.scroll-bar-wrap) .page-header {
  min-height: 92px !important;
  padding: 18px 24px !important;
  background: linear-gradient(135deg, #211e19, #11100e) !important;
  border: 1px solid rgba(216,184,79,.42) !important;
  border-radius: 0 0 16px 16px !important;
}
.page-body:has(.scroll-bar-wrap) .page-header h3,
.page-body:has(.scroll-bar-wrap) .page-header h4,
.page-body:has(.scroll-bar-wrap) .breadcrumb-item,
.page-body:has(.scroll-bar-wrap) .breadcrumb-item a { color: #f2d875 !important; }
.page-body:has(.scroll-bar-wrap) .project-list {
  display:flex !important;
  justify-content:flex-start !important;
  align-items:center !important;
  padding:14px 0 !important;
}
.page-body:has(.scroll-bar-wrap) .project-list .btn {
  min-width:118px !important;
  min-height:46px !important;
  border:1px solid #d8b84f !important;
  border-radius:12px !important;
  background:#fffaf0 !important;
  color:#171512 !important;
  font-weight:800 !important;
}
.page-body:has(.scroll-bar-wrap) .card:has(.scroll-bar-wrap) {
  padding:18px !important;
  border:1px solid rgba(216,184,79,.42) !important;
  border-radius:18px !important;
  background:#fffdf8 !important;
  box-shadow:0 14px 34px rgba(23,21,18,.08) !important;
  overflow:hidden !important;
}
.page-body:has(.scroll-bar-wrap) .scroll-bar-wrap,
.page-body:has(.scroll-bar-wrap) .scroll-bar-wrap > div,
.page-body:has(.scroll-bar-wrap) .scroll-bar-wrap .vertical-scroll,
.page-body:has(.scroll-bar-wrap) .scroll-bar-wrap .scroll-demo,
.page-body:has(.scroll-bar-wrap) .scroll-bar-wrap .ps-container {
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
}
.page-body:has(.scroll-bar-wrap) .scroll-bar-wrap img {
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  max-height:72vh !important;
  margin:0 auto !important;
  object-fit:contain !important;
  object-position:center !important;
  border-radius:12px !important;
  background:#f8f5ed !important;
}
.page-body:has(.scroll-bar-wrap) .scroll-bar-wrap .ps-scrollbar-y-rail,
.page-body:has(.scroll-bar-wrap) .scroll-bar-wrap .ps-scrollbar-x-rail { display:none !important; }
@media (max-width:767.98px){
  .page-body:has(.scroll-bar-wrap) .page-header{min-height:76px !important;padding:14px !important;}
  .page-body:has(.scroll-bar-wrap) .card:has(.scroll-bar-wrap){padding:10px !important;border-radius:14px !important;}
  .page-body:has(.scroll-bar-wrap) .scroll-bar-wrap img{max-height:62vh !important;border-radius:9px !important;}
  .page-body:has(.scroll-bar-wrap) .project-list .btn{width:100% !important;min-height:44px !important;}
}

/* Keep page titles close to the fixed header without overlapping it. */
.page-body > .page-header:first-child,
.page-body > .az-page-header:first-child,
.page-body > .container-fluid:first-child > .page-header:first-child,
.page-body > .container-fluid:first-child > .az-page-header:first-child{
  margin-top:10px!important;
}
.page-body > .az-stallion-page:first-child{
  padding-top:8px!important;
}
@media(max-width:767.98px){
  .page-body > .page-header:first-child,
  .page-body > .az-page-header:first-child,
  .page-body > .container-fluid:first-child > .page-header:first-child,
  .page-body > .container-fluid:first-child > .az-page-header:first-child{
    margin-top:4px!important;
  }
  .page-body > .az-stallion-page:first-child{
    padding-top:4px!important;
  }
}

/* The fixed header offset belongs on the body, not on both body and content. */
.page-wrapper.compact-wrapper:has(.az-owner-header-v83) .page-body-wrapper > .page-body,
.page-wrapper.compact-wrapper:has(.azzam-admin-header) .page-body-wrapper > .page-body{
  margin-top:72px!important;
  padding-top:0!important;
}
@media(max-width:991.98px){
  .page-wrapper.compact-wrapper:has(.azzam-admin-header) .page-body-wrapper > .page-body{
    margin-top:62px!important;
  }
}
@media(max-width:767.98px){
  .page-wrapper.compact-wrapper:has(.az-owner-header-v83) .page-body-wrapper > .page-body{
    margin-top:68px!important;
  }
}