/* The Quran Tuition Premium Graphics System v18.6.0
   Decorative graphics, SVG icon surfaces, responsive polish and interaction upgrades.
   Loaded after v18.5 so it can safely enhance the complete public/admin/portal UI. */

:root {
  --pg-navy-950: #061725;
  --pg-navy-900: #0a2236;
  --pg-navy-800: #0e3447;
  --pg-teal-700: #0f6b66;
  --pg-teal-600: #16857d;
  --pg-gold-500: #d9ad36;
  --pg-gold-300: #f2d779;
  --pg-cyan-500: #2d9cca;
  --pg-violet-500: #7c66d9;
  --pg-rose-500: #d16a83;
  --pg-emerald-500: #2a9a72;
  --pg-surface: #ffffff;
  --pg-soft: #f4f8fa;
  --pg-border: #dbe6eb;
  --pg-ink: #163044;
  --pg-muted: #637889;
  --pg-shadow: 0 24px 70px rgba(7, 31, 48, .12);
  --pg-shadow-sm: 0 12px 34px rgba(7, 31, 48, .09);
  --pg-radius-xl: 26px;
  --pg-radius-lg: 20px;
  --pg-radius-md: 14px;
}

/* Global graphics polish */
.public-body,
.admin-body,
.portal-body {
  position: relative;
  isolation: isolate;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.public-body::before,
.admin-body::before,
.portal-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 18%, rgba(45, 156, 202, .09), transparent 23rem),
    radial-gradient(circle at 90% 10%, rgba(217, 173, 54, .10), transparent 25rem),
    radial-gradient(circle at 75% 82%, rgba(22, 133, 125, .08), transparent 30rem);
}

.public-body main,
.admin-content,
.portal-content { position: relative; }

.public-body main::before {
  content: "";
  position: absolute;
  top: 5rem;
  right: 0;
  width: min(28vw, 420px);
  height: min(28vw, 420px);
  pointer-events: none;
  opacity: .45;
  background-image:
    linear-gradient(30deg, rgba(15, 107, 102, .08) 12%, transparent 12.5%, transparent 87%, rgba(15, 107, 102, .08) 87.5%, rgba(15, 107, 102, .08)),
    linear-gradient(150deg, rgba(217, 173, 54, .08) 12%, transparent 12.5%, transparent 87%, rgba(217, 173, 54, .08) 87.5%, rgba(217, 173, 54, .08));
  background-size: 46px 80px;
  mask-image: linear-gradient(to left, #000, transparent);
  -webkit-mask-image: linear-gradient(to left, #000, transparent);
  z-index: -1;
}

/* SVG icon system */
.premium-svg-icon {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  overflow: visible;
}

.nav-svg-chip,
.trust-svg-icon,
.control-svg-icon,
.floating-svg-icon,
.card-watermark-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.nav-svg-chip {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: var(--pg-teal-700);
  background: rgba(22, 133, 125, .10);
  border: 1px solid rgba(22, 133, 125, .13);
  box-shadow: inset 0 1px rgba(255,255,255,.7);
  transition: transform .18s ease, background .18s ease, color .18s ease;
}

.nav-svg-chip .premium-svg-icon { width: 17px; height: 17px; }
.icon-tone-0 { --icon-tone: var(--pg-teal-600); --icon-soft: rgba(22,133,125,.12); }
.icon-tone-1 { --icon-tone: var(--pg-gold-500); --icon-soft: rgba(217,173,54,.15); }
.icon-tone-2 { --icon-tone: var(--pg-cyan-500); --icon-soft: rgba(45,156,202,.13); }
.icon-tone-3 { --icon-tone: var(--pg-violet-500); --icon-soft: rgba(124,102,217,.12); }
.icon-tone-4 { --icon-tone: var(--pg-rose-500); --icon-soft: rgba(209,106,131,.12); }
.icon-tone-5 { --icon-tone: var(--pg-emerald-500); --icon-soft: rgba(42,154,114,.12); }
.icon-tone-0 .nav-svg-chip, .nav-svg-chip.icon-tone-0,
.icon-tone-1 .nav-svg-chip, .nav-svg-chip.icon-tone-1,
.icon-tone-2 .nav-svg-chip, .nav-svg-chip.icon-tone-2,
.icon-tone-3 .nav-svg-chip, .nav-svg-chip.icon-tone-3,
.icon-tone-4 .nav-svg-chip, .nav-svg-chip.icon-tone-4,
.icon-tone-5 .nav-svg-chip, .nav-svg-chip.icon-tone-5 { color: var(--icon-tone); background: var(--icon-soft); }

.action-svg-icon {
  width: 1.05em;
  height: 1.05em;
  margin-right: .42em;
  vertical-align: -.14em;
}

.text-arrow .action-svg-icon { width: .95em; height: .95em; }
.control-svg-icon { width: 100%; height: 100%; }
.control-svg-icon .premium-svg-icon { width: 20px; height: 20px; }

/* Header and 3-dot menu */
.site-header {
  border-bottom-color: rgba(217, 229, 235, .9) !important;
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217,173,54,.7), rgba(22,133,125,.55), transparent);
  pointer-events: none;
}
.nav-wrap { position: relative; }
.brand-logo { object-fit: contain; }
.site-header .brand {
  min-width: 0;
  padding: 6px 9px 6px 6px;
  border-radius: 16px;
  transition: background .18s ease, transform .18s ease;
}
@media (hover:hover) {
  .site-header .brand:hover { background: #f6fafb; transform: translateY(-1px); }
}

.site-nav > .nav-item > a {
  border-radius: 11px;
  padding: 9px 10px !important;
}
.site-nav > .nav-item > a .nav-svg-chip { display: none; }
.header-more-links a {
  display: flex !important;
  align-items: center;
  gap: 10px;
}
.header-more-links .nav-svg-chip { width: 30px; height: 30px; }

.header-more-toggle,
.nav-toggle {
  position: relative;
  overflow: hidden;
}
.header-more-toggle::after,
.nav-toggle::after {
  content: "";
  position: absolute;
  inset: auto -12px -16px auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(217,173,54,.18);
}
.header-more-toggle .control-svg-icon,
.nav-toggle .control-svg-icon { position: relative; z-index: 1; }
.header-more-menu {
  overflow: hidden;
  transform-origin: top right;
}
.header-more-menu:not([hidden]) { animation: pgMenuIn .18s ease-out both; }
@keyframes pgMenuIn { from { opacity:0; transform: translateY(-7px) scale(.98); } to { opacity:1; transform:none; } }
.header-more-heading { position: relative; overflow: hidden; }
.header-more-heading::after {
  content:"";
  position:absolute;
  width:120px;height:120px;border-radius:50%;
  right:-42px;top:-64px;
  background:rgba(242,215,121,.15);
}

/* Premium hero graphics */
.hero,
.page-hero,
.course-hero,
.article-hero,
.trial-page-hero,
.premium-page-hero {
  position: relative;
  overflow: hidden;
}
.hero::before,
.page-hero::before,
.course-hero::before,
.article-hero::before,
.trial-page-hero::before,
.premium-page-hero::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 18%, rgba(242,215,121,.17) 0 2px, transparent 3px) 0 0/38px 38px,
    linear-gradient(115deg, transparent 0 62%, rgba(255,255,255,.035) 62% 64%, transparent 64% 100%);
  mask-image: linear-gradient(90deg,#000,transparent 80%);
  -webkit-mask-image: linear-gradient(90deg,#000,transparent 80%);
  z-index: 0;
}
.hero > *, .page-hero > *, .course-hero > *, .article-hero > *, .trial-page-hero > *, .premium-page-hero > * { position: relative; z-index: 1; }
.hero-showcase { position: relative; }
.hero-showcase::before,
.hero-showcase::after {
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter: blur(.1px);
}
.hero-showcase::before {
  width:190px;height:190px;right:2%;top:2%;
  border:1px solid rgba(242,215,121,.32);
  box-shadow: 0 0 0 24px rgba(242,215,121,.035), 0 0 0 52px rgba(255,255,255,.025);
}
.hero-showcase::after {
  width:115px;height:115px;left:4%;bottom:8%;
  background:linear-gradient(135deg,rgba(45,156,202,.18),rgba(22,133,125,.08));
}
.hero-illustration { filter: drop-shadow(0 28px 35px rgba(0,0,0,.18)); }
.hero-card-glass { box-shadow: 0 28px 65px rgba(1,14,25,.28) !important; }
.hero-progress-badge { animation: pgFloat 5.5s ease-in-out infinite; }
@keyframes pgFloat { 0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)} }

/* Cards */
.public-body :is(.feature-card,.course-card,.teacher-card,.blog-card,.price-card,.testimonial,.testimonial-card,.content-card,.form-card,.auth-card),
.admin-body :is(.admin-panel,.detail-card,.admin-stat-card,.statistics-card,.admin-form,.maintenance-action-card,.maintenance-manual-card,.maintenance-section),
.portal-body :is(.admin-panel,.detail-card,.admin-stat-card,.form-card,.invoice-card) {
  position: relative;
  overflow: hidden;
}
.public-body :is(.feature-card,.course-card,.teacher-card,.blog-card,.price-card,.testimonial,.testimonial-card)::before,
.admin-body :is(.admin-panel,.detail-card,.admin-stat-card,.statistics-card,.maintenance-action-card)::before,
.portal-body :is(.admin-panel,.detail-card,.admin-stat-card)::before {
  content:"";
  position:absolute;
  width:110px;height:110px;
  right:-58px;top:-62px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(45,156,202,.10), rgba(22,133,125,.04) 58%, transparent 60%);
  pointer-events:none;
}
.card-watermark-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  color: var(--icon-tone, var(--pg-teal-600));
  background: var(--icon-soft, rgba(22,133,125,.10));
  border: 1px solid rgba(18, 74, 91, .07);
  opacity: .72;
  pointer-events: none;
  z-index: 0;
}
.card-watermark-icon .premium-svg-icon { width: 19px; height: 19px; }
.card-watermark-icon ~ * { position: relative; z-index: 1; }
.feature-card .card-watermark-icon,
.price-card .card-watermark-icon { display:none; }

.feature-card {
  border-top: 3px solid transparent !important;
  background-image: linear-gradient(#fff,#fff), linear-gradient(90deg,var(--pg-teal-600),var(--pg-gold-500),var(--pg-cyan-500)) !important;
  background-origin: border-box !important;
  background-clip: padding-box,border-box !important;
}
.feature-icon {
  width: 58px !important;
  height: 58px !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg,#fff7dc,#f6df91) !important;
  box-shadow: 0 10px 26px rgba(192,147,31,.16), inset 0 1px #fff !important;
}
.feature-icon img { width: 30px; height: 30px; object-fit: contain; }

/* Trust badges with real SVG */
.trust-chips span,
.trust-badge-row span,
.footer-trust-seals span,
.trial-hero-pills span {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
}
.trust-svg-icon {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  color: var(--icon-tone, var(--pg-teal-600));
  background: var(--icon-soft, rgba(22,133,125,.12));
}
.trust-svg-icon .premium-svg-icon { width: 13px; height: 13px; stroke-width:2.3; }
.hero .trust-svg-icon,
.section-navy .trust-svg-icon,
.site-footer .trust-svg-icon { background: rgba(255,255,255,.12); color: var(--pg-gold-300); }

/* Buttons */
.btn,
button,
a { -webkit-tap-highlight-color: transparent; }
.btn { gap: 7px; }
.btn .action-svg-icon { transition: transform .18s ease; }
@media (hover:hover) {
  .btn:hover .action-svg-icon,
  .text-arrow:hover .action-svg-icon { transform: translateX(2px) scale(1.04); }
}
.btn-gold {
  box-shadow: 0 10px 24px rgba(190, 143, 25, .18), inset 0 1px rgba(255,255,255,.45) !important;
}
.btn-navy {
  box-shadow: 0 10px 24px rgba(7, 31, 48, .18), inset 0 1px rgba(255,255,255,.12) !important;
}

/* Admin / portal premium app shell */
.admin-sidebar,
.portal-sidebar { overflow: hidden; }
.admin-sidebar::before,
.portal-sidebar::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 5%,rgba(242,215,121,.10),transparent 210px),
    radial-gradient(circle at 110% 55%,rgba(45,156,202,.12),transparent 260px),
    linear-gradient(145deg,transparent 62%,rgba(255,255,255,.025) 62% 64%,transparent 64%);
}
.admin-sidebar > *, .portal-sidebar > * { position:relative; z-index:1; }
.admin-brand { padding-top: 16px !important; padding-bottom: 16px !important; }
.admin-brand a { min-width:0; }
.admin-brand .brand-logo {
  width: 45px !important;
  height: 45px !important;
  padding: 5px;
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
}
.admin-brand b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.admin-nav .nav-group-links a,
.portal-sidebar .admin-nav > a {
  display:flex !important;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:6px 10px !important;
}
.admin-nav .nav-group-links a .nav-svg-chip,
.portal-sidebar .admin-nav > a .nav-svg-chip {
  color: var(--icon-tone, #9edbd4);
  background: rgba(255,255,255,.075);
  border-color: rgba(255,255,255,.075);
}
.admin-nav .nav-group-links a:hover .nav-svg-chip,
.portal-sidebar .admin-nav > a:hover .nav-svg-chip {
  transform: translateY(-1px) scale(1.03);
  background: rgba(255,255,255,.13);
}
.admin-nav .nav-group-links a.active .nav-svg-chip,
.portal-sidebar .admin-nav > a.active .nav-svg-chip {
  color: #0b2a39;
  background: rgba(255,255,255,.58);
  border-color: rgba(255,255,255,.4);
}
.admin-nav .nav-group-links a > span:not(.nav-svg-chip),
.portal-sidebar .admin-nav > a > span:not(.nav-svg-chip) { min-width:0; }
.nav-group-toggle { min-height:44px; }
.nav-group-chevron { width:24px;height:24px; }
.nav-group-chevron .premium-svg-icon { width:15px;height:15px; }
.nav-group.is-open .nav-group-chevron { transform:rotate(180deg); }

.admin-topbar,
.portal-topbar { min-height: 72px; }
.sidebar-toggle,.sidebar-collapse {
  display:inline-grid;
  place-items:center;
  width:42px !important;
  height:42px !important;
  padding:0 !important;
}
.topbar-actions > a {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:8px 10px;
  border-radius:10px;
}
.topbar-actions > a:hover { background:#edf6f7; }
.topbar-signout-button { display:inline-flex; align-items:center; gap:8px; }
.topbar-signout-button .action-svg-icon { margin-right:0; }

.admin-page-head {
  overflow:hidden;
}
.admin-page-head::after {
  content:"";
  position:absolute;
  width:220px;height:220px;
  right:-95px;bottom:-145px;
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(217,173,54,.12) 0 30%,transparent 31%),
    conic-gradient(from 20deg,rgba(22,133,125,.08),rgba(45,156,202,.08),rgba(217,173,54,.08),rgba(22,133,125,.08));
  pointer-events:none;
}
.admin-page-head > * { position:relative; z-index:1; }

.admin-table thead th,
.portal-table thead th {
  background: linear-gradient(180deg,#f6fafb,#eff5f7) !important;
  color:#284557 !important;
  font-size:.76rem !important;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.admin-table tbody tr,
.portal-table tbody tr { transition: background .15s ease, transform .15s ease; }
@media (hover:hover) {
  .admin-table tbody tr:hover,
  .portal-table tbody tr:hover { background:#f6fbfb !important; }
}

/* Inputs */
.public-body :is(input,select,textarea),
.admin-body :is(input,select,textarea),
.portal-body :is(input,select,textarea) {
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.public-body :is(input,select,textarea):focus,
.admin-body :is(input,select,textarea):focus,
.portal-body :is(input,select,textarea):focus {
  outline:none;
  border-color:#58a9a2 !important;
  box-shadow:0 0 0 4px rgba(22,133,125,.10) !important;
}

/* Mobile card slider */
.premium-slider-controls {
  display:none;
  justify-content:flex-end;
  gap:8px;
  margin-top:14px;
}
.premium-slider-arrow {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid var(--pg-border);
  border-radius:13px;
  background:#fff;
  color:var(--pg-ink);
  box-shadow:var(--pg-shadow-sm);
  cursor:pointer;
}
.premium-slider-arrow .premium-svg-icon { width:19px;height:19px; }

/* Footer */
.site-footer { position:relative; overflow:hidden; }
.site-footer::before {
  content:"";
  position:absolute;
  width:420px;height:420px;
  left:-180px;bottom:-280px;
  border-radius:50%;
  border:1px solid rgba(242,215,121,.12);
  box-shadow:0 0 0 42px rgba(242,215,121,.025),0 0 0 88px rgba(45,156,202,.025);
}
.site-footer > * { position:relative; z-index:1; }
.topbar-socials a,.footer-socials a {
  display:inline-grid !important;
  place-items:center;
}
.topbar-socials .premium-svg-icon,.footer-socials .premium-svg-icon { width:17px;height:17px; }
.footer-socials a { color:var(--icon-tone,#fff) !important; }

/* Floating actions */
.whatsapp-float,.call-float {
  display:inline-flex !important;
  align-items:center;
  gap:9px;
  border:1px solid rgba(255,255,255,.24) !important;
  box-shadow:0 18px 42px rgba(4,28,39,.22) !important;
  backdrop-filter:blur(12px);
}
.floating-svg-icon { width:30px;height:30px;border-radius:10px;background:rgba(255,255,255,.16); }
.floating-svg-icon .premium-svg-icon { width:18px;height:18px; }

/* Responsive hardening */
@media (max-width: 1080px) {
  .site-nav.open { box-shadow: 0 30px 70px rgba(5,28,42,.28) !important; }
  .site-nav .nav-item > a { display:flex !important; align-items:center; gap:10px; }
  .site-nav .nav-item > a .nav-svg-chip { display:inline-grid; }
  .site-nav .nav-item > a .nav-svg-chip { width:30px;height:30px; }
  .nav-actions,.header-more { flex:0 0 auto; }
}

@media (max-width: 920px) {
  .admin-sidebar,.portal-sidebar { width:min(88vw,350px) !important; }
  .admin-sidebar.open,.portal-sidebar.open { box-shadow: 28px 0 80px rgba(2,17,27,.34) !important; }
  .admin-topbar,.portal-topbar { padding-left:14px !important; padding-right:14px !important; }
  .topbar-title { min-width:0; }
  .topbar-title strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; max-width:46vw; }
  .sidebar-collapse { display:none !important; }
}

@media (max-width: 780px) {
  .section { padding-top:62px !important; padding-bottom:62px !important; }
  .premium-scroll-slider {
    display:flex !important;
    gap:14px !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding:18px;
    padding:4px 18px 18px 2px !important;
    margin-right:-18px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .premium-scroll-slider::-webkit-scrollbar { display:none; }
  .premium-scroll-slider > * {
    flex:0 0 min(86vw,340px) !important;
    width:min(86vw,340px) !important;
    scroll-snap-align:start;
  }
  .premium-slider-controls { display:flex; }
  .admin-content,.portal-content { padding:16px !important; }
  .admin-page-head { border-radius:16px !important; padding:20px !important; }
  .admin-page-head h1 { font-size:clamp(1.55rem,7vw,2.2rem) !important; }
  .admin-panel,.detail-card,.admin-form { border-radius:16px !important; padding:16px !important; }
  .card-watermark-icon { width:34px;height:34px;top:12px;right:12px; }
}

@media (max-width: 600px) {
  .nav-wrap { min-height:68px !important; gap:9px !important; }
  .site-header .brand { flex:1 1 auto; max-width:calc(100% - 54px); }
  .site-header .brand-logo { width:42px !important;height:42px !important; }
  .site-header .brand strong { font-size:.94rem !important; }
  .site-header .brand small { font-size:.68rem !important; }
  .header-more { display:none !important; }
  .nav-toggle { display:inline-grid !important; }
  .hero-actions,.card-actions,.topbar-actions { gap:8px !important; }
  .hero-actions .btn { width:100%; justify-content:center; }
  .footer-grid { gap:28px !important; }
  .whatsapp-float span:not(.floating-svg-icon),.call-float span:not(.floating-svg-icon) { display:none; }
  .whatsapp-float,.call-float { width:50px;height:50px;padding:0 !important;justify-content:center;border-radius:16px !important; }
  .floating-svg-icon { background:transparent; }
  .topbar-actions > a { display:none; }
  .topbar-signout-label { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-progress-badge { animation:none !important; }
  .header-more-menu:not([hidden]) { animation:none !important; }
  *,*::before,*::after { scroll-behavior:auto !important; }
}

/* Print: remove decorative UI */
@media print {
  .card-watermark-icon,.premium-slider-controls,.public-menu-backdrop { display:none !important; }
  .public-body::before,.admin-body::before,.portal-body::before,.public-body main::before { content:none !important; }
}