@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@400;600;700;900&display=swap");

   /* ========= Base ========= */
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   :root {
       /* نفس الألوان الأصلية */
       --primary: #2D9999;
       --accent: #00D9D9;
       --dark: #0A2342;
       --text: #1E3A5F;
       --text-light: #6B7C8E;
       --bg: #FFFFFF;
       --bg-light: #F8FCFD;
       /* إضافات محايدة لا تغيّر التمكين اللونية */
       --border: rgba(45, 153, 153, 0.12);
       --shadow: 0 12px 30px rgba(45, 153, 153, 0.15);
       --shadow-sm: 0 5px 15px rgba(45, 153, 153, 0.12);
       --ring: rgba(0, 217, 217, 0.35);
       --success: #16a34a;
       --warning: #f59e0b;
       --error: #ef4444;
       --header-bg: rgba(255, 255, 255, 0.98);
   }

   html {
       scroll-behavior: smooth;
   }

   /* ========= Custom Scrollbar - Auto Hide ========= */
   /* Scrollbar container */
   ::-webkit-scrollbar {
       width: 8px;
       height: 8px;
   }

   /* Track - matches theme background */
   ::-webkit-scrollbar-track {
       background: transparent;
   }

   /* Thumb - the draggable part */
   ::-webkit-scrollbar-thumb {
       background: rgba(45, 153, 153, 0.4);
       border-radius: 10px;
       transition: all 0.3s ease;
   }

   ::-webkit-scrollbar-thumb:hover {
       background: rgba(45, 153, 153, 0.7);
   }

   ::-webkit-scrollbar-thumb:active {
       background: var(--primary);
   }

   ::-webkit-scrollbar-corner {
       background: transparent;
   }

   /* Auto-hide scrollbar - show only on hover/scroll */
   html {
       scrollbar-gutter: stable;
   }

   body {
       overflow-y: overlay;
   }

   /* Firefox Scrollbar - auto hide style */
   * {
       scrollbar-width: thin;
       scrollbar-color: rgba(45, 153, 153, 0.4) transparent;
   }

   *:hover {
       scrollbar-color: rgba(45, 153, 153, 0.6) transparent;
   }

   /* Dark Theme Scrollbar */
   :root[data-theme="dark"] ::-webkit-scrollbar-track {
       background: transparent;
   }

   :root[data-theme="dark"] ::-webkit-scrollbar-thumb {
       background: rgba(45, 153, 153, 0.5);
   }

   :root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
       background: rgba(45, 153, 153, 0.8);
   }

   :root[data-theme="dark"] ::-webkit-scrollbar-corner {
       background: transparent;
   }

   :root[data-theme="dark"] * {
       scrollbar-color: rgba(45, 153, 153, 0.5) transparent;
   }

   :root[data-theme="dark"] *:hover {
       scrollbar-color: rgba(45, 153, 153, 0.7) transparent;
   }

   body {
         font-family: "Tajawal", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
       background: var(--bg);
       color: var(--text);
       line-height: 1.7;
       overflow-x: hidden;
   }

   :where(a, button, input, select, textarea):focus-visible {
       outline: 3px solid var(--ring);
       outline-offset: 2px;
   }

   .container {
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 1.5rem;
   }

   /* ========= Header ========= */
   header {
       position: fixed;
       inset-inline: 0;
       top: 0;
       width: 100%;
       background: var(--header-bg);
       -webkit-backdrop-filter: blur(20px);
       backdrop-filter: blur(20px);
       z-index: 1000;
       border-bottom: 1px solid var(--border);
       transition: box-shadow 0.3s;
   }

   header.scrolled {
       box-shadow: var(--shadow);
   }

   .nav-wrapper {
       display: flex;
       align-items: center;
       gap: 1rem;
       padding: 0.5rem 0;
       justify-content: space-between
   }

   .nav-wrapper nav {
       margin-inline-start: auto;
   }

   .row-menu {
       display: flex;
       align-items: center;
       gap: 0.8rem;
       text-decoration: none;
       align-items: baseline;

   }

   .logo {
       display: flex;
       align-items: center;
       gap: 0.8rem;
       text-decoration: none;
   }


   .logo-circle {
       width: 50px;
       height: 50px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       overflow: hidden;
   }

   .logo-circle img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }

   .logo-text h1 {
       font-size: 1.5rem;
       font-weight: 900;
       background: linear-gradient(135deg, var(--primary), var(--accent));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
   }

   .logo-text p {
       font-size: 0.7rem;
       color: var(--text-light);
       margin-top: -3px;
   }

   .menu-toggle {
       display: none;
       background: none;
       border: none;
       font-size: 1.8rem;
       color: var(--primary);
       cursor: pointer;
   }

   .theme-toggle {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 0.4rem;
       padding: 0.55rem 0.7rem;
       border-radius: 10px;
       border: 1px solid var(--border);
       background: var(--bg);
       color: var(--text);
       cursor: pointer;
       margin-inline-start: 0.6rem;
       transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
   }

   .theme-toggle:hover {
       box-shadow: var(--shadow-sm);
       transform: translateY(-1px);
   }

   .theme-toggle svg {
       width: 18px;
       height: 18px;
   }

   /* Language Switcher */
   .language-switcher {
       position: relative;
   }

   .language-toggle {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 0.4rem;
       padding: 0.55rem 0.7rem;
       border-radius: 10px;
       border: 1px solid var(--border);
       background: var(--bg);
       color: var(--text);
       cursor: pointer;
       font-weight: 600;
       font-size: 0.9rem;
       transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
   }

   .language-toggle:hover {
       box-shadow: var(--shadow-sm);
       transform: translateY(-1px);
   }

   .language-toggle svg {
       width: 18px;
       height: 18px;
   }

   .language-menu {
       position: absolute;
       top: calc(100% + 0.5rem);
       inset-inline-end: 0;
       background: var(--bg);
       border: 1px solid var(--border);
       border-radius: 10px;
       box-shadow: var(--shadow-sm);
       min-width: 120px;
       opacity: 0;
       visibility: hidden;
       transform: translateY(-10px);
       transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
       z-index: 1000;
       list-style: none;
       padding: 0.5rem 0;
   }

   .language-menu.show {
       opacity: 1;
       visibility: visible;
       transform: translateY(0);
   }

   .language-menu li {
       margin: 0;
   }

   .language-menu a {
       display: block;
       padding: 0.7rem 1.2rem;
       color: var(--text);
       text-decoration: none;
       font-weight: 600;
       font-size: 0.9rem;
       transition: all 0.2s ease;
   }

   .language-menu a:hover {
       background: rgba(45, 153, 153, 0.05);
       color: var(--primary);
   }

   .language-menu a.active {
       background: rgba(45, 153, 153, 0.1);
       color: var(--primary);
   }


   .icon-sun {
       display: inline;
   }

   .icon-moon {
       display: none;
   }

   nav ul {
       display: flex;
       list-style: none;
       gap: 0.3rem;
       align-items: center;
   }

   nav a {
       color: var(--text);
       text-decoration: none;
       font-weight: 600;
       font-size: 0.95rem;
       padding: 0.7rem 1.2rem;
       border-radius: 10px;
       transition: all 0.25s ease;
       position: relative;
   }

   nav a:hover,
   nav a.active {
       color: var(--primary);
       background: rgba(45, 153, 153, 0.05);
   }

   nav a.active::after {
       content: "";
       position: absolute;
       inset-inline-end: 12px;
       bottom: 6px;
       width: 6px;
       height: 6px;
       border-radius: 50%;
       background: var(--accent);
       box-shadow: 0 0 0 6px var(--ring);
   }

   .cta-nav {
       background: linear-gradient(135deg, var(--primary), var(--accent));
       color: #fff !important;
       box-shadow: var(--shadow-sm);
   }

   /* ========= Hero ========= */
   .hero {
       min-height: 100vh;
       display: flex;
       align-items: center;
       padding: 8rem 0 4rem;
       background: var(--bg);
       background: linear-gradient(180deg, var(--bg-light), var(--bg));
   }

   .hero-grid {
       display: grid;
       grid-template-columns: 1.2fr 0.8fr;
       gap: 3rem;
       align-items: center;
   }

   .hero-content h2 {
       font-size: clamp(2rem, 5vw, 3.5rem);
       font-weight: 900;
       color: var(--dark);
       line-height: 1.2;
       margin-bottom: 1.5rem;
   }

   .gradient-text {
       background: linear-gradient(135deg, var(--primary), var(--accent));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
   }

   .hero-content p {
       font-size: clamp(1rem, 2vw, 1.2rem);
       color: var(--text-light);
       margin-bottom: 2rem;
       line-height: 1.8;
   }

   .hero-buttons {
       display: flex;
       gap: 1rem;
       flex-wrap: wrap;
   }

   .btn {
       display: inline-flex;
       align-items: center;
       gap: 0.6rem;
       padding: 1rem 1.4rem;
       border-radius: 12px;
       text-decoration: none;
       font-weight: 700;
       font-size: 1rem;
       transition: transform 0.2s ease, box-shadow 0.2s ease;
   }

   .btn-primary {
       background: linear-gradient(135deg, var(--primary), var(--accent));
       color: #fff !important;
       box-shadow: var(--shadow-sm);
       font-family: "Tajawal", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
       text-decoration: none;
       font-weight: 600;
       font-size: 0.95rem;
       padding: 0.7rem 1.2rem;
       border-radius: 10px;
       position: relative;
       border: none;
       cursor: pointer;
       align-items: center;
       gap: 0.5rem;
   }

   .btn-primary:hover {
       transform: translateY(-3px);
       box-shadow: 0 8px 25px rgba(45, 153, 153, 0.35);
   }

   .btn-secondary {
       background: #fff;
       color: var(--primary);
       border: 2px solid var(--primary);
   }

   .btn-secondary:hover {
       background: var(--primary);
       color: #fff;
   }

   .glass-card {
       background: rgba(255, 255, 255, 0.9);
       backdrop-filter: blur(20px);
       border-radius: 25px;
       padding: 2rem;
       border: 1px solid var(--border);
       /* box-shadow: var(--shadow); */
       text-align: center;
   }
   .consulting-card-title{
    color: var(--dark); font-weight: 900; margin-bottom: 1rem;
   }

   .hero-visual {
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
       width: 100%;
       height: 100%;
   }

   .stats-container {
       width: 100%;
       max-width: 500px;
       height: auto;
       display: block;
       object-fit: contain;
       border-radius: 20px;
       /* box-shadow: var(--shadow); */
       transition: transform 0.3s ease, box-shadow 0.3s ease;
   }

   .stats-container:hover {
       transform: translateY(-5px) scale(1.02);
       box-shadow: 0 20px 50px rgba(45, 153, 153, 0.25);
   }

   /* تأثير إطار ديناميكي حول الصورة */
   .hero-visual::before {
       content: "";
       position: absolute;
       inset: -10px;
       background: linear-gradient(135deg, var(--primary), var(--accent));
       border-radius: 25px;
       opacity: 0.1;
       z-index: -1;
       animation: pulse 3s ease-in-out infinite;
   }

   /* ========= Achievements Bar ========= */
   .achievements-bar {
       padding: 3rem 0;
       background: linear-gradient(135deg, rgba(45, 153, 153, 0.05), rgba(0, 217, 217, 0.03));
       border-top: 1px solid var(--border);
       border-bottom: 1px solid var(--border);
   }

   .achievements-slider {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
       gap: 2rem;
   }

   .achievement-item {
       display: flex;
       align-items: center;
       gap: 1rem;
       padding: 1.2rem;
       background: rgba(255, 255, 255, 0.8);
       backdrop-filter: blur(10px);
       border-radius: 15px;
       border: 1px solid var(--border);
       transition: all 0.3s ease;
   }

   .achievement-item:hover {
       transform: translateY(-3px);
       box-shadow: 0 10px 30px rgba(45, 153, 153, 0.15);
       border-color: var(--primary);
   }

   .achievement-icon-small {
       width: 50px;
       height: 50px;
       background: linear-gradient(135deg, var(--primary), var(--accent));
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
   }

   .achievement-icon-small i {
       font-size: 1.5rem;
       color: #fff;
   }

   .achievement-content-inline {
       flex: 1;
   }

   .achievement-number {
       font-size: 1.8rem;
       font-weight: 900;
       background: linear-gradient(135deg, var(--primary), var(--accent));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       margin-bottom: 0.2rem;
       line-height: 1;
   }

   .achievement-label {
       font-size: 0.85rem;
       color: var(--text-light);
       font-weight: 600;
       margin: 0;
       line-height: 1.3;
   }

/* ========= Banner Slider (index page) ========= */
.banner-slider {
    width: 100%;
    height: 55px;
    /* fallback for older browsers */
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 50%);
    /* preferred smoother mix when supported */
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 50%, color-mix(in srgb, var(--accent) 70%, var(--primary) 30%));
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 32px rgba(45, 153, 153, 0.12);
}
.banner-slider .slider {
    display: flex;
    align-items: center;
    height: 100%;
    animation: hs-slide 18s linear infinite;
}
@keyframes hs-slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.banner-slider .item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 28px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    min-width: fit-content;
    opacity: 0.98;
}
.banner-slider .item i,
.banner-slider .item span.emoji {
    font-size: 18px;
}
.banner-slider::before,
.banner-slider::after {
    content: "";
    position: absolute;
    top: 0;
    width: 64px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}
.banner-slider::before {
    left: 0;
    background: linear-gradient(to right, var(--primary), transparent);
}
.banner-slider::after {
    right: 0;
    background: linear-gradient(to left, color-mix(in srgb, var(--accent) 85%, black 15%), transparent);
}
.banner-slider:hover .slider { animation-play-state: paused; }

:root[data-theme="dark"] .banner-slider {
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
    /* fallback for older browsers */
    background: linear-gradient(135deg, var(--primary), var(--accent));
    /* darker mix for dark mode when supported */
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 85%, black 15%), color-mix(in srgb, var(--accent) 85%, black 15%));
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
    .banner-slider .slider { animation: none; }
}

/* ========= Improved Achievements slider layout ========= */
.achievements-slider {
    /* display: flex; */
    gap: 1rem;
    align-items: stretch;
    overflow-x: auto;
    padding-bottom: 6px;
}
.achievements-slider::-webkit-scrollbar { height: 8px; }
.achievements-slider::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.08); border-radius: 8px; }

.achievement-item {
    min-width: 220px;
    max-width: 360px;
    flex: 0 0 auto;
}

:root[data-theme="dark"] .achievement-item {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.06);
}

/* Tighter card content for small screens */
@media (max-width: 480px) {
    .banner-slider { height: 48px; border-radius: 10px; }
    .banner-slider .item { padding: 0 18px; font-size: 13px; }
    .achievement-number { font-size: 1.4rem; }
}

   @media (max-width: 968px) {
       .achievements-slider {
           grid-template-columns: repeat(2, 1fr);
           gap: 1rem;
       }
   }

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

       .achievement-item {
           padding: 1rem;
       }

       .achievement-number {
           font-size: 1.5rem;
       }
   }

   :root[data-theme="dark"] .achievements-bar {
       background: linear-gradient(135deg, rgba(45, 153, 153, 0.08), rgba(0, 217, 217, 0.05));
   }

   :root[data-theme="dark"] .achievement-item {
       background: rgba(255, 255, 255, 0.05);
   }

   :root[data-theme="dark"] .achievement-label {
       color: rgba(255, 255, 255, 0.7);
   }

   /* ========= Stats (existing) ========= */
   .stat {
       text-align: center;
       padding: 1.5rem;
       background: #fff;
       border-radius: 15px;
       transition: transform 0.25s ease, box-shadow 0.25s ease;
       border: 1px solid var(--border);
   }

   .stat:hover {
       transform: translateY(-8px);
       box-shadow: var(--shadow-sm);
   }

   .stat-number {
       font-size: 2.5rem;
       font-weight: 900;
       background: linear-gradient(135deg, var(--primary), var(--accent));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
   }

   .stat-label {
       font-size: 0.9rem;
       color: var(--text-light);
       font-weight: 600;
       margin-top: 0.3rem;
   }

   /* ========= Sections ========= */
   .section {
       padding: 5rem 0;
   }

   .section-header {
       text-align: center;
       margin-bottom: 3rem;
   }

   .section-badge {
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       background: rgba(45, 153, 153, 0.1);
       color: var(--primary);
       padding: 0.6rem 1.5rem;
       border-radius: 25px;
       font-weight: 700;
       font-size: 0.9rem;
       margin-bottom: 1rem;
   }

   .section-title {
       font-size: clamp(2rem, 4vw, 3rem);
       font-weight: 900;
       color: var(--dark);
       margin-bottom: 1rem;
   }

   .section-subtitle {
       font-size: clamp(1rem, 2vw, 1.15rem);
       color: var(--text-light);
       max-width: 700px;
       margin: 0 auto;
   }

   /* ========= Cards ========= */
   .cards-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
       gap: 2rem;
       justify-items: center;
   }

   .card {
       position: relative;
       /* يقيّد ::after داخل البطاقة */
       overflow: hidden;
       /* يمنع أي تمدد بصري خارج البطاقة */
       background: #fff;
       border-radius: 20px;
       padding: 2rem;
       border: 1px solid rgba(45, 153, 153, 0.1);
       transition: all 0.3s;
       text-align: center;
   }

   .card::after {
       content: "";
       z-index: 0;
       position: absolute;
       inset: 0;
       /* background: linear-gradient(135deg, transparent, rgba(0, 217, 217, 0.06)); */
       pointer-events: none;
   }

   .card:hover {
       transform: translateY(-10px);
       box-shadow: 0 20px 50px rgba(45, 153, 153, 0.15);
   }

   .card-icon {
       width: 70px;
       height: 70px;
       background: rgba(45, 153, 153, 0.1);
       border-radius: 15px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 2.2rem;
       margin-bottom: 1.2rem;
   }

   .card h3 {
       font-size: 1.4rem;
       color: var(--dark);
       margin-bottom: 0.8rem;
       font-weight: 900;
   }

   .card p {
       color: var(--text-light);
       line-height: 1.7;
       margin-bottom: 1.2rem;
   }

   .btn-register {
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       background: linear-gradient(135deg, var(--accent), var(--primary));
       color: white;
       padding: 0.8rem 1.5rem;
       border-radius: 10px;
       text-decoration: none;
       font-weight: 700;
       font-size: 0.9rem;
       transition: all 0.3s;
       border-color: none;
   }

   .btn-register:hover {
       transform: translateY(-2px);
       box-shadow: var(--shadow-sm);
   }

   /* ========= FAQ ========= */
   .faq-container {
       max-width: 800px;
       margin: 0 auto;
   }

   .faq-item {
       background: #fff;
       border-radius: 15px;
       margin-bottom: 1rem;
       border: 1px solid var(--border);
       overflow: hidden;
   }

   .faq-question {
       padding: 1.2rem 1.5rem;
       cursor: pointer;
       display: flex;
       justify-content: space-between;
       align-items: center;
       font-weight: 700;
       color: var(--dark);
   }

   .faq-icon {
       font-size: 1.3rem;
       color: var(--primary);
       transition: transform 0.3s;
   }

   .faq-item.active .faq-icon {
       transform: rotate(180deg);
   }

   .faq-answer {
       max-height: 0;
       overflow: hidden;
       transition: max-height 0.3s ease;
   }

   .faq-item.active .faq-answer {
       max-height: 300px;
   }

   .faq-answer-content {
       padding: 0 1.5rem 1.3rem;
       color: var(--text-light);
       line-height: 1.7;
   }

   /* ========= Contact blocks ========= */
   .contact-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 1.2rem;
   }

   .contact-item {
       display: flex;
       align-items: center;
       gap: 1rem;
       padding: 1.2rem 1.4rem;
       background: #fff;
       border-radius: 15px;
       border: 1px solid var(--border);
   }

   .contact-icon {
       width: 50px;
       height: 50px;
       background: linear-gradient(135deg, var(--primary), var(--accent));
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.5rem;
       color: #fff;
   }

   .contact-text h5 {
       font-weight: 700;
       color: var(--dark);
       margin-bottom: 0.2rem;
   }

   .contact-text p {
       color: var(--text-light);
       font-size: 0.95rem;
   }

   /* ========= CTA ========= */
   .cta-section {
       background: linear-gradient(135deg, var(--primary), var(--dark));
       border-radius: 30px;
       padding: 4rem 2rem;
       text-align: center;
       color: #fff;
       margin: 3rem 0;
       position: relative;
       overflow: hidden;
       isolation: isolate;
   }

   .cta-section::before {
       content: "";
       position: absolute;
       inset-inline-end: -120px;
       inset-block-start: -120px;
       width: 240px;
       height: 240px;
       border-radius: 50%;
       background: radial-gradient(circle at center, var(--accent), transparent 60%);
       opacity: 0.35;
       z-index: -1;
   }

   .cta-content h2 {
       font-size: clamp(2rem, 4vw, 3rem);
       font-weight: 900;
       margin-bottom: 1rem;
   }

   .cta-content p {
       font-size: clamp(1rem, 2vw, 1.2rem);
       margin-bottom: 2rem;
       opacity: 0.95;
   }

   .btn-white {
       background: #fff;
       color: var(--primary);
   }

   .btn-white:hover {
       transform: translateY(-3px);
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
   }

   /* ========= Footer ========= */
   footer {
       background: var(--bg-light);
       padding: 3rem 0 0;
       border-top: 1px solid var(--border);
   }

   .footer-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
       gap: 2rem;
       margin-bottom: 2rem;
   }

   .footer-brand h3 {
       font-size: 2rem;
       font-weight: 900;
       background: linear-gradient(135deg, var(--primary), var(--accent));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       margin-bottom: 1rem;
   }

   .footer-brand p {
       color: var(--text-light);
       line-height: 1.7;
       margin-bottom: 1rem;
   }

   .social-links-container {
       display: flex;
       flex-direction: column;
       gap: 0.8rem;
   }

   .social-links {
       display: flex;
       gap: 0.8rem;
   }

   .social-icon {
       width: 40px;
       height: 40px;
       background: #fff;
       border: 1px solid var(--border);
       border-radius: 10px;
       display: flex;
       align-items: center;
       justify-content: center;
       color: var(--primary);
       text-decoration: none;
       transition: all 0.2s ease;
   }

   .social-icon:hover {
       background: var(--primary);
       color: #fff;
       transform: translateY(-3px);
   }

   .footer-section h4 {
       font-weight: 900;
       color: var(--dark);
       margin-bottom: 1rem;
   }

   .footer-section ul {
       list-style: none;
   }

   .footer-section ul li {
       margin-bottom: 0.7rem;
   }

   .footer-section a {
       color: var(--text-light);
       text-decoration: none;
       transition: color 0.2s ease;
   }

   .footer-section a:hover {
       color: var(--primary);
   }

   .footer-bottom {
       padding: 10px 0;
   }

   .footer-info {
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       gap: 8px;
       text-align: center;
       line-height: 1.8;
   }

   /* ✅ لما تكون الشاشة كبيرة — العناصر تصير بجانب بعض */
   @media (min-width: 768px) {
       .footer-info {
           flex-direction: row;
           justify-content: space-between;
           text-align: right;
       }
   }

   .footer-bottom {
       text-align: center;
       border-top: 1px solid var(--border);
       color: var(--text-light);
   }

   .footer-info p {
       margin: 0.3rem 0;
       font-size: 0.9rem;
   }

   .footer-info a {
       color: var(--text-light);
       text-decoration: none;
   }

   .footer-info a:hover {
       text-decoration: underline;
   }

   /* ========= Utilities ========= */
   .sr {
       position: absolute !important;
       width: 1px !important;
       height: 1px !important;
       padding: 0 !important;
       margin: -1px !important;
       overflow: hidden !important;
       clip: rect(0, 0, 0, 0) !important;
       white-space: nowrap !important;
       border: 0 !important;
   }

   /* ========= Floating chat button ========= */
   .floating {
       position: fixed;
       inset-inline-end: 1.5rem;
       inset-block-end: 1.5rem;
       width: 58px;
       height: 58px;
       border-radius: 50%;
       background: linear-gradient(135deg, var(--primary), var(--accent));
       display: grid;
       place-items: center;
       color: #fff;
       box-shadow: var(--shadow);
       cursor: pointer;
       z-index: 1100;
   }

   .floating:hover {
       transform: translateY(-2px);
   }

   /* ========= Modal (إرسال رسالة) ========= */
   .modal-backdrop {
       position: fixed;
       inset: 0;
       background: rgba(0, 0, 0, 0.4);
       display: none;
       align-items: center;
       justify-content: center;
       z-index: 1200;
   }

   .modal-backdrop.active {
       display: flex;
   }

   .modal {
       width: min(92vw, 480px);
       background: #fff;
       border-radius: 16px;
       border: 1px solid var(--border);
       box-shadow: var(--shadow);
       overflow: hidden;
       animation: pop 0.2s ease;
   }

   @keyframes pop {
       from {
           transform: scale(0.97);
           opacity: 0;
       }

       to {
           transform: scale(1);
           opacity: 1;
       }
   }

   .modal-header {
       padding: 0.75rem 1rem;
       display: flex;
       align-items: center;
       justify-content: space-between;
       border-bottom: 1px solid var(--border);
       background: var(--bg-light);
   }

   .modal-title {
       font-weight: 800;
       font-size: 1rem;
       color: var(--dark);
   }

   .modal-close {
       border: none;
       background: transparent;
       font-size: 1.1rem;
       cursor: pointer;
       color: var(--text-light);
   }

   .modal-body {
       padding: 1rem;
   }

   /* ========= Form (مشترك) ========= */
   .form-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 0.75rem;
   }

   .form-group {
       margin-bottom: 0.75rem;
   }

   .form-group label {
       display: block;
       font-weight: 600;
       font-size: 0.85rem;
       margin-bottom: 0.3rem;
       color: var(--dark);
   }

   .input,
   .select,
   .textarea {
       width: 100%;
       padding: 0.65rem 0.75rem;
       border: 2px solid rgba(45, 153, 153, 0.15);
       border-radius: 8px;
       font-family: inherit;
       font-size: 0.9rem;
       transition: border-color 0.2s ease, box-shadow 0.2s ease;
       background: #fff;
   }

   .textarea {
       min-height: 130px;
       resize: vertical;
   }

   .input:focus,
   .select:focus,
   .textarea:focus {
       outline: none;
       border-color: var(--primary);
       box-shadow: 0 0 0 4px var(--ring);
   }

   .btn-submit {
       width: 100%;
       background: linear-gradient(135deg, var(--primary), var(--accent));
       color: #fff;
       padding: 1rem;
       border: none;
       border-radius: 10px;
       font-weight: 800;
       font-size: 1rem;
       cursor: pointer;
       transition: transform 0.2s ease, box-shadow 0.2s ease;
   }

   .btn-submit[disabled] {
       opacity: 0.7;
       cursor: not-allowed;
   }

   .btn-submit:hover:not([disabled]) {
       transform: translateY(-1px);
       box-shadow: var(--shadow-sm);
   }

   .form-hint {
       font-size: 0.9rem;
       color: var(--text-light);
   }

   .error-text {
       color: var(--error);
       font-size: 0.9rem;
       margin-top: 0.35rem;
   }

   .form-message {
       padding: 1rem;
       border-radius: 10px;
       text-align: center;
       font-weight: 600;
   }

   .form-message.success {
       background-color: rgba(22, 163, 74, 0.1);
       color: var(--success);
       border: 1px solid var(--success);
   }

   .form-message.error {
       background-color: rgba(239, 68, 68, 0.1);
       color: var(--error);
       border: 1px solid var(--error);
   }

   /* ========= Toast ========= */
   .toast {
       position: fixed;
       inset-inline-start: 50%;
       transform: translateX(-50%);
       inset-block-start: 1rem;
       background: #fff;
       border: 1px solid var(--border);
       box-shadow: var(--shadow);
       padding: 0.9rem 1rem;
       border-radius: 12px;
       display: none;
       gap: 0.6rem;
       align-items: center;
       z-index: 1300;
       min-width: 260px;
   }

   .toast.show {
       display: inline-flex;
   }

   .toast .dot {
       width: 10px;
       height: 10px;
       border-radius: 50%;
   }

   /* ========= Responsive ========= */
   @media (max-width: 968px) {
       .container {
           padding: 0 1rem;
       }

       .hero-grid {
           grid-template-columns: 1fr;
           gap: 2rem;
           text-align: center;
       }

       .hero-visual {
           order: -1;
       }

       .stats-container {
           grid-template-columns: repeat(2, 1fr);
           gap: 1rem;
       }

       .menu-toggle {
           display: block;
       }

       nav {
           position: absolute;
           top: 100%;
           inset-inline: 0;
           background: var(--header-bg);
           max-height: 0;
           overflow: hidden;
           transition: max-height 0.3s ease;
           box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
       }

       nav.active {
           max-height: 920px;
           padding-bottom: 1rem;
       }

       nav ul {
           flex-direction: column;
           padding: 1rem;
           gap: 0;
       }

       nav a {
           display: block;
           padding: 1rem;
           text-align: center;
       }

       /* Hide user icon and show profile links in mobile menu */

       .mobile-profile-links {
           display: block;

       }

       .user-dropdown {
           display: none;
       }

       .mobile-profile-links a {
           display: block;
           padding: 1rem;
           text-align: center;
           color: var(--text);
           text-decoration: none;
           border-radius: 10px;
           margin: 0.25rem 1rem;
       }

       .mobile-profile-links a:hover,
       .mobile-profile-links a.active {
           color: var(--primary);
           background: rgba(45, 153, 153, 0.05);
       }

       .cards-grid {
           grid-template-columns: 1fr;
           gap: 1.3rem;
           text-align: center;
       }

       .contact-grid {
           grid-template-columns: 1fr;
           gap: 1.1rem;
       }

       .footer-grid {
           grid-template-columns: 1fr;
           gap: 2rem;
       }

       .form-grid {
           grid-template-columns: 1fr;
       }
   }

   @media (max-width: 480px) {
       .container {
           padding: 0 0.8rem;
       }

       .hero {
           padding: 5rem 0 2rem;
       }

       .hero-content h2 {
           font-size: 1.7rem;
       }


       .section-title {
           font-size: 1.7rem;
       }

       .card-icon {
           width: 60px;
           height: 60px;
           font-size: 2rem;
       }

       .stat-number {
           font-size: 1.8rem;
       }
   }

   /* ========= Subtle reveal animations ========= */
   [data-reveal] {
       opacity: 0;
       transform: translateY(16px);
       transition: opacity .5s ease, transform .5s ease;
   }

   [data-reveal].shown {
       opacity: 1;
       transform: none;
   }

   :root[data-theme="dark"] {
       --bg: #0b1220;
       --bg-light: #0f172a;
       --text: #d0e3ff;
       --text-light: #9bb0c9;
       --dark: #e6f0ff;
       --border: rgba(148, 163, 184, 0.15);
       --ring: rgba(0, 217, 217, 0.2);
       --header-bg: rgba(15, 23, 42, 0.9);
   }

   :root[data-theme="dark"] .glass-card,
   :root[data-theme="dark"] .card,
   :root[data-theme="dark"] .contact-item,
   :root[data-theme="dark"] .faq-item,
   :root[data-theme="dark"] .media-tab,
   :root[data-theme="dark"] .infographic-card,
   :root[data-theme="dark"] .modal,
   :root[data-theme="dark"] .toast,
   :root[data-theme="dark"] .stat,
   :root[data-theme="dark"] .pagination-wrapper {
       background: #0f172a;
   }

   :root[data-theme="dark"] .card-icon {
       background: rgba(0, 217, 217, 0.08);
   }

   :root[data-theme="dark"] .social-icon {
       background: #0b1324;
   }

   :root[data-theme="dark"] .icon-sun {
       display: none;
   }

   :root[data-theme="dark"] .icon-moon {
       display: inline;
   }

   :root[data-theme="dark"] nav a:hover,
   :root[data-theme="dark"] nav a.active {
       background: rgba(0, 217, 217, 0.07);
   }

   :root[data-theme="dark"] footer {
       background: var(--bg-light);
   }

   .to-top {
       position: fixed;
       inset-inline-end: 1.2rem;
       inset-block-end: 1.2rem;
       width: 48px;
       height: 48px;
       border-radius: 50%;
       border: 1px solid var(--border);
       background: var(--bg);
       color: var(--primary);
       display: grid;
       place-items: center;
       box-shadow: var(--shadow);
       cursor: pointer;
       opacity: 0;
       pointer-events: none;
       transition: opacity 0.2s ease, transform 0.2s ease;
       z-index: 1100;
   }

   .to-top.show {
       opacity: 1;
       pointer-events: auto;
   }

   .to-top:hover {
       transform: translateY(-2px);
   }

   @media (prefers-reduced-motion: reduce) {
       * {
           transition: none !important;
           animation: none !important;
           scroll-behavior: auto !important;
       }
   }

   @keyframes pulse {

       0%,
       100% {
           transform: scale(1);
           opacity: 0.1;
       }

       50% {
           transform: scale(1.05);
           opacity: 0.15;
       }
   }

   /* ========= Responsive Design ========= */
   @media (max-width: 968px) {
       .stats-container {
           max-width: 100%;
           margin: 0 auto;
       }

       .hero-visual {
           padding: 0 1rem;
       }

       .hero-visual::before {
           inset: -5px;
       }
   }

   @media (max-width: 768px) {
       .stats-container {
           max-width: 90%;
           border-radius: 15px;
       }
   }

   @media (max-width: 480px) {
       .stats-container {
           max-width: 100%;
           border-radius: 12px;
           box-shadow: var(--shadow-sm);
       }

       .hero-visual::before {
           display: none;
       }

       .stats-container:hover {
           transform: translateY(-3px) scale(1.01);
       }
   }

   /* للشاشات الكبيرة جداً */
   @media (min-width: 1400px) {
       .stats-container {
           max-width: 550px;
       }
   }

   /* للشاشات الصغيرة جداً */
   @media (max-width: 360px) {
       .stats-container {
           border-radius: 10px;
       }
   }

   .stats-container {
       will-change: transform;
       backface-visibility: hidden;
       -webkit-backface-visibility: hidden;
   }

   /* ========= Chat Widget ========= */
   .chat-widget {
       position: fixed;
       bottom: 10px;
       inset-inline-end: 45px;
       width: 320px;
       max-width: calc(100vw - 30px);
       background: var(--bg);
       border-radius: 16px;
       box-shadow: var(--shadow);
       transform: translateY(calc(100% + 90px));
       opacity: 0;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       z-index: 999;
       overflow: hidden;
       border: 1px solid var(--border);
   }

   .chat-widget.active {
       transform: translateY(0);
       opacity: 1;
   }

   .chat-header {
       background: linear-gradient(135deg, var(--primary), #1a7070);
       color: white;
       padding: 1rem 1.2rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .chat-header h4 {
       margin: 0;
       font-size: 1rem;
       font-weight: 600;
   }

   .chat-header p {
       margin: 0.1rem 0 0 0;
       font-size: 0.75rem;
       opacity: 0.9;
   }

   .chat-close {
       background: rgba(255, 255, 255, 0.2);
       border: none;
       color: white;
       font-size: 1.2rem;
       width: 28px;
       height: 28px;
       border-radius: 50%;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.2s;
   }

   .chat-close:hover {
       background: rgba(255, 255, 255, 0.3);
       transform: rotate(90deg);
   }

   .chat-body {
       height: 350px;
       overflow-y: auto;
       padding: 1.2rem;
       background: var(--bg-light);
       scroll-behavior: smooth;
   }

   .chat-body::-webkit-scrollbar {
       width: 5px;
   }

   .chat-body::-webkit-scrollbar-track {
       background: var(--bg);
   }

   .chat-body::-webkit-scrollbar-thumb {
       background: var(--primary);
       border-radius: 3px;
   }

   .chat-welcome {
       background: var(--bg);
       padding: 1.2rem;
       border-radius: 12px;
       margin-bottom: 1.2rem;
       text-align: center;
       border: 1px solid var(--border);
   }

   .chat-welcome h5 {
       margin: 0 0 0.4rem 0;
       color: var(--dark);
       font-size: 1rem;
       font-weight: 600;
   }

   .chat-welcome p {
       margin: 0;
       color: var(--text-light);
       font-size: 0.85rem;
   }

   .faq-suggestions {
       display: flex;
       flex-direction: column;
       gap: 0.6rem;
   }

   .faq-chip {
       background: var(--bg);
       border: 1px solid var(--primary);
       color: var(--dark);
       padding: 0.8rem 1rem;
       border-radius: 10px;
       cursor: pointer;
       transition: all 0.2s;
       font-size: 0.85rem;
       text-align: right;
       font-weight: 500;
       box-shadow: 0 2px 6px rgba(45, 153, 153, 0.1);
   }

   .faq-chip:hover {
       background: var(--primary);
       color: white;
       transform: translateX(-3px);
       box-shadow: 0 3px 8px rgba(45, 153, 153, 0.2);
   }

   .chat-message {
       margin-bottom: 0.8rem;
       animation: slideIn 0.3s ease-out;
   }

   @keyframes slideIn {
       from {
           opacity: 0;
           transform: translateY(10px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   .message-bubble {
       padding: 0.8rem 1rem;
       border-radius: 12px;
       max-width: 85%;
       line-height: 1.5;
       font-size: 0.85rem;
   }

   .user-message .message-bubble {
       background: linear-gradient(135deg, var(--primary), #1a7070);
       color: white;
       margin-right: auto;
       margin-left: 15%;
       border-bottom-right-radius: 4px;
   }

   .bot-message .message-bubble {
       background: var(--bg);
       color: var(--dark);
       border: 1px solid var(--border);
       margin-left: auto;
       margin-right: 15%;
       border-bottom-left-radius: 4px;
   }

   .typing-indicator .message-bubble {
       background: var(--bg);
       border: 1px solid var(--border);
       padding: 0.8rem 1.2rem;
       display: flex;
       gap: 0.3rem;
       align-items: center;
       width: fit-content;
   }

   .typing-indicator span {
       width: 6px;
       height: 6px;
       background: var(--primary);
       border-radius: 50%;
       animation: bounce 1.4s infinite;
   }

   .typing-indicator span:nth-child(2) {
       animation-delay: 0.2s;
   }

   .typing-indicator span:nth-child(3) {
       animation-delay: 0.4s;
   }

   @keyframes bounce {

       0%,
       60%,
       100% {
           transform: translateY(0);
       }

       30% {
           transform: translateY(-5px);
       }
   }

   .chat-footer {
       padding: 0.8rem 1.2rem;
       background: var(--bg);
       border-top: 1px solid var(--border);
       display: flex;
       gap: 0.6rem;
       align-items: center;
   }

   #chatInput {
       flex: 1;
       border: 1px solid var(--border);
       border-radius: 20px;
       padding: 0.6rem 1rem;
       font-size: 0.85rem;
       outline: none;
       transition: all 0.2s;
       background: var(--bg);
       color: var(--dark);
   }

   #chatInput:focus {
       border-color: var(--primary);
       box-shadow: 0 0 0 3px var(--ring);
   }

   .chat-send {
       background: linear-gradient(135deg, var(--primary), #1a7070);
       border: none;
       color: white;
       width: 36px;
       height: 36px;
       border-radius: 50%;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1rem;
       transition: all 0.2s;
       box-shadow: 0 2px 6px rgba(45, 153, 153, 0.3);
   }

   .chat-send:hover {
       transform: scale(1.05);
       box-shadow: 0 3px 8px rgba(45, 153, 153, 0.4);
   }

   .chat-send:active {
       transform: scale(0.95);
   }

   /* Mobile Responsive */
   @media (max-width: 768px) {
       .chat-widget {
           width: calc(100vw - 20px);
           right: 10px;
           bottom: 70px;
       }

       .chat-body {
           height: 300px;
       }

       .message-bubble {
           max-width: 90%;
       }
   }

   /* Dark Theme Adjustments */
   :root[data-theme="dark"] .chat-widget {
       background: var(--bg-light);
       border: 1px solid var(--border);
   }

   :root[data-theme="dark"] .chat-body {
       background: var(--bg);
   }

   :root[data-theme="dark"] .chat-welcome {
       background: var(--bg-light);
       border: 1px solid var(--border);
   }

   :root[data-theme="dark"] .faq-chip {
       background: var(--bg-light);
       border: 1px solid var(--primary);
       color: var(--text);
   }

   :root[data-theme="dark"] .bot-message .message-bubble {
       background: var(--bg-light);
       color: var(--text);
       border: 1px solid var(--border);
   }

   :root[data-theme="dark"] .typing-indicator .message-bubble {
       background: var(--bg-light);
       border: 1px solid var(--border);
   }

   :root[data-theme="dark"] .chat-footer {
       background: var(--bg-light);
       border-top: 1px solid var(--border);
   }

   :root[data-theme="dark"] #chatInput {
       background: var(--bg-light);
       border: 1px solid var(--border);
       color: var(--text);
   }

   :root[data-theme="dark"] #chatInput:focus {
       border-color: var(--primary);
       box-shadow: 0 0 0 3px var(--ring);
   }

   /* Custom styles for index.blade.php */
   .section-margin-top {
       margin-top: 1rem;
   }

   .training-calendar-margin {
       margin-top: 3rem;
   }

   .training-calendar-title {
       text-align: center;
       color: var(--dark);
       margin-bottom: 2rem;
       font-weight: 900;
   }

   .glass-card-centered {
       max-width: 800px;
       margin: 0 auto;
   }

   .schedule-item {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 1rem;
       border-radius: 10px;
       border: 1px solid var(--border);
   }

   .schedule-course-title {
       font-weight: 700;
   }

   .schedule-location {
       color: var(--text-light);
       font-size: 0.9rem;
   }

   .schedule-date {
       font-weight: 700;
       color: var(--dark);
   }

   .schedule-seats {
       background: rgba(255, 193, 7, 0.2);
       color: #f57c00;
       padding: 0.3rem 0.8rem;
       border-radius: 20px;
       font-size: 0.85rem;
       font-weight: 600;
   }

   .awareness-section {
       background: var(--bg-light);
   }

   .articles-title {
       color: var(--dark);
       margin-bottom: 2rem;
       font-weight: 900;
       text-align: center;
   }

   .articles-margin {
       margin-bottom: 3rem;
   }

   .consulting-content {
       max-width: 900px;
       margin: 0 auto 3rem;
   }

   .consulting-text {
       color: var(--text-light);
       line-height: 1.8;
       margin-bottom: 2rem;
   }

   .consulting-services-title {
       color: var(--dark);
       margin-bottom: 2rem;
       font-weight: 900;
       text-align: center;
   }

   .consulting-service-list {
       list-style: none;
       padding: 0;
       color: var(--text-light);
       font-size: 0.9rem;
   }

   .consulting-service-item {
       margin-bottom: 0.5rem;
   }

   .faq-title {
       color: var(--dark);
       margin-bottom: 2rem;
       font-weight: 900;
       text-align: center;
   }

   .card-icon-colored {
       background: rgba(45, 153, 153, 0.1);
       color: var(--primary);
   }

   .card-icon-alt {
       background: rgba(102, 126, 234, 0.1);
       color: #667eea;
   }

   .card-icon-alt2 {
       background: rgba(245, 87, 108, 0.1);
       color: #f5576c;
   }

   /* Filter Modal */
   .filter-modal {
       display: none;
       position: fixed;
       inset: 0;
       background: rgba(0, 0, 0, 0.5);
       z-index: 1000;
       align-items: center;
       justify-content: center;
   }

   .filter-modal.active {
       display: flex;
   }

   .filter-modal-content {
       background: var(--bg);
       border-radius: 15px;
       width: 90%;
       max-width: 500px;
       max-height: 90vh;
       overflow-y: auto;
       box-shadow: var(--shadow);
       border: 1px solid var(--border);
   }

   .filter-modal-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 1rem 1.5rem;
       border-bottom: 1px solid var(--border);
   }

   .filter-modal-title {
       font-weight: 700;
       color: var(--dark);
       margin: 0;
   }

   .filter-modal-close {
       background: none;
       border: none;
       font-size: 1.5rem;
       cursor: pointer;
       color: var(--text-light);
   }

   .filter-modal-body {
       padding: 1.5rem;
   }

   .filter-modal-footer {
       padding: 1rem 1.5rem;
       border-top: 1px solid var(--border);
       display: flex;
       justify-content: flex-end;
       gap: 0.5rem;
   }

   .filter-toggle-btn {
       background: linear-gradient(135deg, var(--primary), var(--accent));
       color: #fff !important;
       box-shadow: var(--shadow-sm);
       font-family: "Tajawal", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
       text-decoration: none;
       font-weight: 600;
       font-size: 0.95rem;
       padding: 0.7rem 1.2rem;
       border-radius: 10px;
       position: relative;
       border: none;
       cursor: pointer;
       display: flex;
       align-items: center;
       gap: 0.5rem;
   }

   .filter-toggle-btn:hover {
       background: #258080;
   }

   /* Course Image */
   .course-image {
       width: 100%;
       height: 150px;
       object-fit: cover;
       border-radius: 10px;
       margin-bottom: 1rem;
   }

   .course-card-content {
       padding: 0 1rem 1rem;
   }

   /* Responsive Search and Filter Controls */
   .search-filter-container {
       display: grid;
       grid-template-columns: 1fr auto auto;
       gap: 1rem;
       margin-bottom: 1.5rem;
   }

   @media (max-width: 768px) {
       .search-filter-container {
           grid-template-columns: 1fr;
           gap: 0.5rem;
       }

       .search-filter-container>* {
           width: 100%;
       }

       .filter-toggle-btn {
           justify-content: center;
       }

       .btn-primary {
           justify-content: center;
       }
   }

   /*  - More Dropdown Menu Styles */
   .more-dropdown {
       position: relative;
   }

   .more-toggle {
       display: flex;
       align-items: center;
       gap: 0.25rem;
       background: transparent;
       border: none;
       cursor: pointer;
       font-family: inherit;
       color: var(--text);
       text-decoration: none;
       font-weight: 600;
       font-size: 0.95rem;
       padding: 0.7rem 1.2rem;
       border-radius: 10px;
       transition: all 0.25s ease;
   }

   .more-toggle:hover,
   .more-toggle[aria-expanded="true"],
   .more-toggle.active {
       color: var(--primary);
       background: rgba(45, 153, 153, 0.05);
   }

   /*  - Active indicator for more toggle */
   .more-toggle.active {
       position: relative;
   }

   .more-toggle.active::after {
       content: "";
       position: absolute;
       inset-inline-end: 12px;
       bottom: 6px;
       width: 6px;
       height: 6px;
       border-radius: 50%;
       background: var(--accent);
       box-shadow: 0 0 0 6px var(--ring);
   }

   .more-toggle .dropdown-arrow {
       transition: transform 0.3s ease;
   }

   .more-toggle[aria-expanded="true"] .dropdown-arrow {
       transform: rotate(180deg);
   }

   .more-menu {
       position: absolute;
       top: 100%;
       right: 0;
       min-width: 180px;
       background: var(--bg);
       border-radius: 12px;
       box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
       padding: 0.5rem 0;
       opacity: 0;
       visibility: hidden;
       transform: translateY(10px);
       transition: all 0.3s ease;
       z-index: 1000;
       list-style: none;
       display: flex;
       flex-direction: column;
   }

   .more-menu.show {
       opacity: 1;
       visibility: visible;
       transform: translateY(5px);
   }

   .more-menu li {
       list-style: none;
   }

   .more-menu a {
       display: flex;
       align-items: center;
       gap: 0.75rem;
       padding: 0.75rem 1.25rem;
       color: var(--text);
       text-decoration: none;
       font-weight: 500;
       transition: all 0.2s ease;
       white-space: nowrap;
   }

   .more-menu a:hover,
   .more-menu a.active {
       background: var(--primary-light);
       color: var(--primary);
   }

   /* Mobile Styles for More Dropdown */
   @media (max-width: 968px) {
       .more-dropdown {
           width: 100%;
       }

       .more-toggle {
           width: 100%;
           justify-content: center;
           padding: 0.75rem 1rem;
           border-radius: 8px;
           background: transparent;
       }

       .more-menu {
           position: static;
           width: 100%;
           box-shadow: none;
           border-radius: 8px;
           margin-top: 0.25rem;
           background: rgba(0, 0, 0, 0.02);
           padding: 0;
           max-height: 0;
           overflow: hidden;
           opacity: 1;
           visibility: visible;
           transform: none;
           display: flex;
           flex-direction: column;
       }

       .more-menu.show {
           max-height: 500px;
           padding: 0.5rem 0;
       }

       .more-menu a {
           padding: 0.6rem 1.5rem;
           font-size: 0.95rem;
       }

       .more-menu a:hover {
           background: rgba(var(--primary-rgb), 0.1);
       }
   }

   /* Dark mode for More Dropdown */
   :root[data-theme="dark"] .more-menu {
       /* background: #0f172a; */
       box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
   }

   :root[data-theme="dark"] .more-menu a:hover {
       background: rgba(255, 255, 255, 0.05);
   }

   @media (max-width: 968px) {
       :root[data-theme="dark"] .more-toggle {
           background: transparent;
       }

       :root[data-theme="dark"] .more-menu {
           background: rgba(255, 255, 255, 0.03);
       }
   }

   .user-dropdown {
       position: relative;
       /* display: inline-block; */
   }

   /* Hide mobile profile links by default (desktop view) */
   /* .mobile-profile-links {
       display: none;
   } */

   /* Ensure mobile profile links don't interfere with desktop layout */
   @media (min-width: 969px) {
       .mobile-profile-links {
           display: none !important;
       }
   }

   /* Pagination */
   .pagination-wrapper {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 1.25rem;
       border-radius: 15px;
       box-shadow: var(--shadow);
       flex-wrap: wrap;
       gap: 0.85rem;
       margin-top: 2rem;
   }

   .pagination-info {
       color: var(--text-light);
       font-size: 0.875rem;
       font-weight: 500;
   }

   .pagination {
       display: flex;
       gap: 0.4rem;
       list-style: none;
   }

   .pagination .page-item .page-link {
       display: flex;
       align-items: center;
       justify-content: center;
       min-width: 36px;
       height: 36px;
       padding: 0 0.65rem;
       border: 2px solid var(--border);
       border-radius: 9px;
       color: var(--text);
       text-decoration: none;
       font-weight: 600;
       transition: all 0.3s ease;
       background: white;
       font-size: 0.875rem;
   }

   .pagination .page-item .page-link:hover {
       background: rgba(45, 153, 153, 0.1);
       border-color: var(--primary);
       color: var(--primary);
       transform: translateY(-2px);
   }

   .pagination .page-item.active .page-link {
       background: var(--primary);
       border-color: var(--primary);
       color: white;
       box-shadow: var(--shadow);
   }

   .pagination .page-item.disabled .page-link {
       opacity: 0.4;
       cursor: not-allowed;
       pointer-events: none;
   }

   /* Responsive Pagination */
   @media (max-width: 768px) {
       .pagination-wrapper {
           flex-direction: column;
           text-align: center;
       }

       .pagination {
           justify-content: center;
           flex-wrap: wrap;
       }
   }

   .user-toggle {
       background: none;
       border: none;
       cursor: pointer;
       padding: 0.5rem;
       border-radius: 50%;
       transition: background-color 0.3s;
   }

   .user-toggle:hover {
       background-color: rgba(0, 0, 0, 0.1);
   }

   .user-icon {
       width: 24px;
       height: 24px;
       stroke: var(--text);
   }

   .dropdown-menu {
       position: absolute;
       top: 100%;
       left: 0;
       background: var(--card-bg);
       border: 1px solid var(--border);
       border-radius: 0.5rem;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       padding: 0.5rem 0;
       min-width: 160px;
       z-index: 1000;
       display: none;
   }

   .dropdown-menu.show {
       display: block;
   }

   .dropdown-menu li {
       list-style: none;
       margin: 0;
   }

   .dropdown-menu a {
       display: block;
       padding: 0.75rem 1rem;
       color: var(--text);
       text-decoration: none;
       transition: background-color 0.2s;
   }

   .dropdown-menu a:hover {
       background-color: var(--hover-bg);
   }

   /* Dark mode adjustments */
   .dark .user-toggle:hover {
       background-color: rgba(255, 255, 255, 0.1);
   }

   .dark .dropdown-menu {
       background: var(--dark-card-bg);
       border-color: var(--dark-border);
   }

   /* Infographic Section Styles */
   .infographic-section {
       padding: 2rem 0;
   }

   /* Filter Tabs */
   .media-filter-tabs {
       display: flex;
       justify-content: center;
       gap: 1rem;
       margin: 2rem 0;
       flex-wrap: wrap;
   }

   .media-tab {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       padding: 0.75rem 1.5rem;
       background: #fff;
       border: 2px solid var(--border, #e5e7eb);
       border-radius: 50px;
       font-size: 1rem;
       font-weight: 600;
       color: var(--text, #374151);
       cursor: pointer;
       transition: all 0.3s ease;
   }

   .media-tab:hover {
       border-color: var(--primary, #3b82f6);
       background: var(--primary-light, #eff6ff);
       transform: translateY(-2px);
   }

   .media-tab.active {
       background: var(--primary, #3b82f6);
       border-color: var(--primary, #3b82f6);
       color: white;
   }

   /* Infographic Grid */
   .infographic-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
       gap: 2rem;
       margin-top: 2rem;
   }

   @media (max-width: 768px) {
       .infographic-grid {
           grid-template-columns: 1fr;
           gap: 1.5rem;
       }
   }

   /* Infographic Card */
   .infographic-card {
       background: white;
       border-radius: 16px;
       overflow: hidden;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       position: relative;
   }

   .infographic-card:hover {
       transform: translateY(-8px);
       box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
   }

   /* Media Container */
   .infographic-media {
       position: relative;
       width: 100%;
       height: 280px;
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
       overflow: hidden;
   }

   .media-content {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.4s ease;
   }

   .infographic-card:hover .media-content {
       transform: scale(1.05);
   }

   /* Media Badge */
   .media-badge {
       position: absolute;
       top: 1rem;
       right: 1rem;
       display: flex;
       align-items: center;
       gap: 0.4rem;
       padding: 0.5rem 1rem;
       border-radius: 50px;
       font-size: 0.85rem;
       font-weight: 600;
       backdrop-filter: blur(10px);
       z-index: 2;
   }

   .video-badge {
       background: rgba(239, 68, 68, 0.9);
       color: white;
   }

   .image-badge {
       background: rgba(59, 130, 246, 0.9);
       color: white;
   }

   /* Video Overlay */
   .video-wrapper {
       position: relative;
       width: 100%;
       height: 100%;
   }

   .video-overlay {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       background: rgba(0, 0, 0, 0.3);
       opacity: 1;
       transition: opacity 0.3s ease;
   }

   .video-wrapper:hover .video-overlay {
       opacity: 0;
   }

   .video-wrapper.playing .video-overlay {
       opacity: 0;
       pointer-events: none;
   }

   .play-button {
       background: none;
       border: none;
       cursor: pointer;
       transition: transform 0.3s ease;
       z-index: 3;
   }

   .play-button:hover {
       transform: scale(1.1);
   }

   /* Image Overlay */
   .image-overlay {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.7);
       display: flex;
       align-items: center;
       justify-content: center;
       opacity: 0;
       transition: opacity 0.3s ease;
   }

   .infographic-card:hover .image-overlay {
       opacity: 1;
   }

   .zoom-button {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       padding: 0.75rem 1.5rem;
       background: white;
       border: none;
       border-radius: 50px;
       font-size: 0.95rem;
       font-weight: 600;
       color: #1a1a1a;
       cursor: pointer;
       transition: all 0.3s ease;
   }

   .zoom-button:hover {
       transform: scale(1.05);
       box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
   }

   /* Infographic Info */
   .infographic-info {
       padding: 1.5rem;
   }

   .infographic-title {
       font-size: 1.1rem;
       font-weight: 700;
       color: var(--dark, #1a1a1a);
       margin-bottom: 0.75rem;
       line-height: 1.4;
   }

   .infographic-meta {
       display: flex;
       gap: 1rem;
       flex-wrap: wrap;
   }

   .meta-item {
       display: flex;
       align-items: center;
       gap: 0.4rem;
       font-size: 0.85rem;
       color: var(--text-light, #6b7280);
   }

   /* Lightbox Styles */
   .lightbox {
       display: none;
       position: fixed;
       z-index: 9999;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.95);
       align-items: center;
       justify-content: center;
   }

   .lightbox.active {
       display: flex;
   }

   .lightbox-content {
       position: relative;
       max-width: 90%;
       max-height: 90%;
       text-align: center;
   }

   .lightbox-content img {
       max-width: 100%;
       max-height: 85vh;
       border-radius: 8px;
       box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
   }

   .lightbox-close {
       position: absolute;
       top: 2rem;
       right: 2rem;
       font-size: 3rem;
       color: white;
       cursor: pointer;
       z-index: 10000;
       transition: transform 0.3s ease;
   }

   .lightbox-close:hover {
       transform: scale(1.2) rotate(90deg);
   }

   #lightbox-caption {
       color: white;
       margin-top: 1rem;
       font-size: 1.1rem;
   }

   /* Responsive Design */
   @media (max-width: 768px) {
       .infographic-media {
           height: 220px;
       }

       .media-filter-tabs {
           gap: 0.5rem;
       }

       .media-tab {
           padding: 0.6rem 1rem;
           font-size: 0.9rem;
       }
   }

   .form-input-compact {
       font-family: "Tajawal", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
       font-weight: 600;
       width: 100%;
       padding: 0.75rem;
       border: 1px solid #ddd;
       border-radius: 8px;
       font-size: 0.9rem;
       background: white;
       transition: all 0.3s ease;
   }

   .form-input-compact:focus {
       outline: none;
       border-color: var(--primary);
       box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
   }

   .form-input-compact:disabled {
       background: #f5f5f5;
       cursor: not-allowed;
   }

   .error-message {
       color: #ef4444;
       font-size: 0.8rem;
       margin-top: 0.25rem;
       display: block;
   }

   label {
       display: block;
       margin-bottom: 0.5rem;
       font-weight: 600;
       color: var(--dark);
   }

   /* ========= Article Card Styles ========= */
   .article-card {
       padding: 0;
       overflow: hidden;
       background: #fff;
       border-radius: 20px;
       border: 1px solid var(--border);
       display: flex;
       flex-direction: column;
       width: 100%;
       max-width: 380px;
       transition: all 0.3s ease;
   }

   .article-card:hover {
       transform: translateY(-5px);
       box-shadow: 0 15px 40px rgba(45, 153, 153, 0.15);
   }

   .article-image {
       width: 100%;
       height: 200px;
       object-fit: cover;
       transition: transform 0.3s ease;
   }

   .article-card:hover .article-image {
       transform: scale(1.05);
   }

   .article-placeholder {
       width: 100%;
       height: 200px;
       background: linear-gradient(135deg, rgba(45, 153, 153, 0.1), rgba(0, 217, 217, 0.05));
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .article-placeholder i {
       font-size: 3rem;
       color: var(--primary);
       opacity: 0.3;
   }

   .article-content {
       padding: 1.2rem;
       display: flex;
       flex-direction: column;
       flex: 1;
       text-align: center;
   }

   .article-title {
       font-size: 1.2rem;
       font-weight: 700;
       color: var(--dark);
       margin-bottom: 0.8rem;
       line-height: 1.4;
       text-align: center;
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
   }

   .article-excerpt {
       font-size: 0.9rem;
       color: var(--text-light);
       line-height: 1.6;
       margin-bottom: 1rem;
       text-align: center;
       display: -webkit-box;
       -webkit-line-clamp: 3;
       -webkit-box-orient: vertical;
       overflow: hidden;
   }

   .article-meta {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 1rem;
       margin-bottom: 1rem;
       font-size: 0.85rem;
       color: var(--text-light);
   }

   .article-meta span {
       display: flex;
       align-items: center;
       gap: 0.3rem;
   }

   .article-meta i {
       font-size: 0.9rem;
       color: var(--primary);
   }

   /* :root[data-theme="dark"] .article-card {
       background: rgba(255, 255, 255, 0.05);
   } */

   :root[data-theme="dark"] .article-title {
       color: #f8f9fa;
   }

   :root[data-theme="dark"] .article-excerpt {
       color: rgba(255, 255, 255, 0.7);
   }

   /* ========= Consultation Simple Card Styles ========= */

/* رابط يغطي كارد الاستشارة بالكامل */
.consultation-card-horizontal-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s;
    border-radius: 16px;
}
.consultation-card-horizontal-link:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.consultation-card-horizontal-link:hover .consultation-card-horizontal,
.consultation-card-horizontal-link:focus .consultation-card-horizontal {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(45, 153, 153, 0.18);
}

/* زر وهمي داخل الكارد (لا يضغط) */
.btn-consultation-book.fake-btn {
    pointer-events: none;
    opacity: 0.85;
}
/*  */
/* Ustawienie przycisku rezerwacji konsultacji na dole karty */

   .consultation-simple {
       padding: 1.5rem;
       text-align: center;
       position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
   }

   .consult-image-wrapper {
       width: 100%;
       height: 180px;
       overflow: hidden;
       border-radius: 12px;
       margin-bottom: 1rem;
       background: linear-gradient(135deg, rgba(45, 153, 153, 0.08) 0%, rgba(0, 217, 217, 0.08) 100%);
   }

   .consult-image {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.4s ease;
   }

   .consultation-simple:hover .consult-image {
       transform: scale(1.1);
   }

   .consult-type-badge {
       position: absolute;
       top: 1rem;
       right: 1rem;
       padding: 0.35rem 0.8rem;
       background: linear-gradient(135deg, var(--primary), var(--accent));
       color: #fff;
       border-radius: 20px;
       font-size: 0.7rem;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.3px;
       z-index: 2;
   }

   .consult-icon {
       width: 60px;
       height: 60px;
       margin: 0 auto 1rem;
       background: linear-gradient(135deg, var(--primary), var(--accent));
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .consult-icon i {
       font-size: 1.8rem;
       color: #fff;
   }

   .consult-title {
       font-size: 1.1rem;
       font-weight: 700;
       color: var(--dark);
       margin-bottom: 0.6rem;
       line-height: 1.3;
   }

   .consult-desc {
       font-size: 0.85rem;
       color: var(--text-light);
       line-height: 1.5;
       margin-bottom: 1rem;
       min-height: 3.5rem;
   }

   .consult-info {
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
       margin-bottom: 1rem;
   }

   .info-item {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
       padding: 0.6rem;
       background: rgba(45, 153, 153, 0.05);
       border-radius: 8px;
       font-size: 0.85rem;
       font-weight: 600;
       color: var(--text);
   }

   .info-item i {
       font-size: 0.9rem;
       color: var(--primary);
   }

   .info-item.price {
       background: rgba(0, 217, 217, 0.08);
   }

   .info-item.price span {
       color: var(--primary);
       font-weight: 700;
   }

   .consult-availability {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
       margin-bottom: 1rem;
       flex-wrap: wrap;
   }

   .avail-badge {
       display: inline-flex;
       align-items: center;
       gap: 0.3rem;
       padding: 0.4rem 0.7rem;
       border-radius: 15px;
       font-size: 0.75rem;
       font-weight: 600;
   }

   .avail-badge.online {
       background: rgba(45, 153, 153, 0.1);
       color: var(--primary);
       border: 1px solid rgba(45, 153, 153, 0.2);
   }

   .avail-badge.in-person {
       background: rgba(0, 217, 217, 0.1);
       color: var(--accent);
       border: 1px solid rgba(0, 217, 217, 0.2);
   }

   .avail-badge i {
       font-size: 0.8rem;
   }

   .btn-consult {

       align-items: center;
       justify-content: center;
       gap: 0.5rem;
       padding: 0.8rem;
       background: linear-gradient(135deg, var(--primary), var(--accent));
       color: #fff;
       border-radius: 10px;
       text-decoration: none;
       font-weight: 700;
       font-size: 0.9rem;
       transition: all 0.3s ease;
           margin-top: auto;
    width: 100%;
    display: flex;

   }

   .btn-consult:hover {
       transform: translateY(-2px);
       box-shadow: 0 8px 20px rgba(45, 153, 153, 0.3);
   }

   .btn-consult i {
       transition: transform 0.3s ease;
   }

   .btn-consult:hover i {
       transform: translateX(-3px);
   }

   :root[data-theme="dark"] .consult-title {
       color: #f8f9fa;
   }

   :root[data-theme="dark"] .consult-desc {
       color: rgba(255, 255, 255, 0.7);
   }

   :root[data-theme="dark"] .info-item {
       background: rgba(45, 153, 153, 0.1);
       color: rgba(255, 255, 255, 0.9);
   }

   :root[data-theme="dark"] .info-item.price {
       background: rgba(0, 217, 217, 0.12);
   }

   /* ========= Course Card Styles ========= */
   .course-card {
       padding: 0;
       overflow: hidden;
       transition: all 0.3s ease;
       background: var(--bg);
       width: 100%;
       max-width: 380px;
       margin: 0 auto;
       display: flex;
       flex-direction: column;
   }

   .course-card:hover {
       transform: translateY(-8px);
       box-shadow: var(--shadow);
   }

   .course-image-wrapper {
       width: 100%;
       height: 200px;
       overflow: hidden;
       position: relative;
       background: rgba(45, 153, 153, 0.05);
   }

   .course-image {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
       transition: transform 0.4s ease;
   }

   .course-card:hover .course-image {
       transform: scale(1.08);
   }

   .course-image-placeholder {
       width: 100%;
       height: 100%;
       background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .course-image-placeholder i {
       font-size: 3.5rem;
       color: var(--bg);
       opacity: 0.9;
   }

   .course-content {
       padding: 1.25rem;
       text-align: center;
       display: flex;
       flex-direction: column;
       flex: 1;
   }

   .course-title {
       margin-bottom: 0.75rem;
       font-size: 1.125rem;
       font-weight: 900;
       color: var(--dark);
       line-height: 1.4;
       min-height: 3rem;
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
   }

   .course-instructor {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
       margin-bottom: 0.75rem;
       color: var(--text-light);
       font-size: 0.875rem;
       font-weight: 600;
   }

   .course-instructor i {
       font-size: 1rem;
       color: var(--primary);
   }

   .course-rating {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
       margin-bottom: 0.75rem;
   }

   .rating-stars {
       display: flex;
       align-items: center;
       gap: 0.25rem;
   }

   .rating-number {
       font-weight: 900;
       color: var(--dark);
       font-size: 1rem;
       margin-left: 0.25rem;
   }

   .rating-stars i {
       font-size: 0.875rem;
   }

   .star-filled {
       color: var(--warning);
   }

   .star-half {
       color: var(--warning);
       opacity: 0.5;
   }

   .star-empty {
       color: var(--text-light);
       opacity: 0.3;
   }

   .rating-count {
       color: var(--text-light);
       font-size: 0.875rem;
   }

   .course-meta {
       display: flex;
       justify-content: center;
       gap: 1rem;
       margin-bottom: 1rem;
       padding-bottom: 1rem;
       border-bottom: 1px solid var(--border);
       font-size: 0.8rem;
       color: var(--text-light);
       flex-wrap: wrap;
   }

   .course-meta .meta-item {
       display: flex;
       align-items: center;
       gap: 0.4rem;
       font-weight: 600;
   }

   .course-meta .meta-item i {
       font-size: 1rem;
       color: var(--primary);
   }

   .course-price {
       margin-bottom: 1rem;
       display: flex;
       align-items: baseline;
       justify-content: center;
       gap: 0.75rem;
   }

   .price-current {
       color: var(--primary);
       font-weight: 900;
       font-size: 1.5rem;
       line-height: 1;
   }

   .price-old {
       text-decoration: line-through;
       color: var(--text-light);
       font-size: 1rem;
       opacity: 0.6;
       font-weight: 600;
   }

   .btn-full {
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
       padding: 0.875rem 1.25rem;
       font-size: 0.95rem;
       font-weight: 700;
       margin-top: auto;
   }

   /* Dark Theme Support */
   /* :root[data-theme="dark"] .course-card {
       background: rgba(255, 255, 255, 0.05);
   } */

:root[data-theme="dark"] .course-title {
    color: #f8f9fa;
}   :root[data-theme="dark"] .course-instructor {
       color: var(--text-light);
   }

:root[data-theme="dark"] .rating-number {
    color: #f8f9fa;
}   /* Responsive */
   @media (max-width: 768px) {
       .course-card {
           max-width: 100%;
       }

       .course-image-wrapper {
           height: 180px;
       }

       .course-title {
           font-size: 1rem;
           min-height: 2.5rem;
       }

       .course-instructor {
           font-size: 0.8rem;
       }

       .rating-stars {
           gap: 0.2rem;
       }

       .rating-number {
           font-size: 0.9rem;
       }

       .rating-stars i {
           font-size: 0.8rem;
       }

       .course-meta {
           font-size: 0.75rem;
           gap: 0.75rem;
       }

       .price-current {
           font-size: 1.25rem;
       }

       .price-old {
           font-size: 0.9rem;
       }

       .course-content {
           padding: 1rem;
       }

       .btn-full {
           padding: 0.75rem 1rem;
           font-size: 0.9rem;
       }
   }

   @media (max-width: 480px) {
       .course-image-wrapper {
           height: 160px;
       }

       .course-title {
           font-size: 0.95rem;
       }

       .course-meta {
           font-size: 0.7rem;
       }

       .price-current {
           font-size: 1.15rem;
       }
   }

   /* ========= Additional Index Page Styles ========= */

   /* Article Card Styles */
   .article-card-enhanced {
       overflow: hidden;
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       background: var(--bg);
       display: flex;
       flex-direction: column;
       height: 100%;
   }

   .article-card-enhanced:hover {
       transform: translateY(-12px);
       box-shadow: 0 20px 40px rgba(45, 153, 153, 0.2);
   }

   .article-image-container {
       position: relative;
       width: 100%;
       height: 240px;
       overflow: hidden;
   }

   .article-card-enhanced .article-card-image {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.5s ease;
   }

   .article-card-enhanced:hover .article-card-image {
       transform: scale(1.1);
   }

   .article-category-badge {
       position: absolute;
       top: 1rem;
       right: 1rem;
       background: rgba(45, 153, 153, 0.95);
       backdrop-filter: blur(10px);
       color: white;
       padding: 0.5rem 1rem;
       border-radius: 50px;
       display: flex;
       align-items: center;
       gap: 0.5rem;
       font-size: 0.875rem;
       font-weight: 600;
       box-shadow: 0 4px 12px rgba(45, 153, 153, 0.3);
   }

   .article-category-badge i {
       font-size: 1rem;
   }

   .article-card-enhanced .article-card-placeholder {
       width: 100%;
       height: 100%;
       background: linear-gradient(135deg, #2D9999 0%, #00D9D9 100%);
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .article-card-enhanced .article-card-placeholder i {
       font-size: 4rem;
       color: white;
       opacity: 0.9;
   }

   .article-card-enhanced .article-card-content {
       padding: 1.75rem;
       display: flex;
       flex-direction: column;
       gap: 1rem;
       flex: 1;
   }

   .article-header {
       display: flex;
       flex-direction: column;
       gap: 0.75rem;
   }

   .article-card-enhanced .article-card-title {
       font-size: 1.25rem;
       font-weight: 800;
       color: var(--dark);
       line-height: 1.5;
       margin: 0;
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
       text-overflow: ellipsis;
       min-height: 3rem;
   }

   .article-author {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       color: var(--primary);
       font-size: 0.875rem;
       font-weight: 600;
   }

   .article-author i {
       font-size: 1rem;
   }

   .article-card-enhanced .article-card-excerpt {
       color: var(--text-light);
       line-height: 1.7;
       font-size: 0.95rem;
       display: -webkit-box;
       -webkit-line-clamp: 3;
       -webkit-box-orient: vertical;
       overflow: hidden;
       text-overflow: ellipsis;
       margin: 0;
   }

   .article-footer {
       margin-top: auto;
       display: flex;
       flex-direction: column;
       gap: 1rem;
       padding-top: 1rem;
       border-top: 1px solid var(--border);
   }

   .article-card-enhanced .article-card-meta {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 1rem;
       flex-wrap: wrap;
   }

   .article-card-meta span {
       display: flex;
       align-items: center;
       gap: 0.4rem;
       color: var(--text-light);
       font-size: 0.875rem;
       font-weight: 500;
   }

   .article-card-meta i {
       color: var(--primary);
       font-size: 1rem;
   }

   .meta-date,
   .meta-time,
   .meta-views {
       white-space: nowrap;
   }

   .article-read-more {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
       width: 100%;
       padding: 0.875rem 1.5rem;
       background: linear-gradient(135deg, var(--primary), var(--accent));
       color: white;
       border-radius: 12px;
       font-weight: 700;
       text-decoration: none;
       transition: all 0.3s ease;
       box-shadow: 0 4px 12px rgba(45, 153, 153, 0.3);
   }

   .article-read-more:hover {
       transform: translateY(-2px);
       box-shadow: 0 8px 20px rgba(45, 153, 153, 0.4);
   }

   .article-read-more i {
       transition: transform 0.3s ease;
   }

   .article-read-more:hover i {
       transform: translateX(-4px);
   }

   /* Dark Theme Support */
   :root[data-theme="dark"] .article-card-enhanced {
       background: rgba(255, 255, 255, 0.05);
   }

   :root[data-theme="dark"] .article-card-enhanced .article-card-title {
       color: #f8f9fa;
   }

   :root[data-theme="dark"] .article-category-badge {
       background: rgba(0, 217, 217, 0.95);
   }

   :root[data-theme="dark"] .article-footer {
       border-top-color: rgba(255, 255, 255, 0.1);
   }

/*  */
/* ========= Events Section ========= */
.event-section-bg {
    background: linear-gradient(135deg, rgba(45, 153, 153, 0.02) 0%, rgba(99, 102, 241, 0.02) 100%);
    border-radius: 24px;
    /* padding: 3rem 0; */
}

.event-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.75rem;
    margin-top: 2.5rem;
}

.event-card {
    backdrop-filter: blur(10px);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    position: relative;
    display: flex;
    flex-direction: column;
}

.event-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(45, 153, 153, 0.15);
    border-color: rgba(45, 153, 153, 0.2);
}

.event-card-media {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary), var(--accent));
}

.event-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.event-card:hover .event-card-image {
    transform: scale(1.08);
}

.event-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    font-size: 3.5rem;
    opacity: 0.9;
}

.event-chip {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    color: var(--primary);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.event-chip.sold-out {
    background: rgba(239, 68, 68, 0.95);
    color: white;
}

.event-chip.featured {
    background: rgba(251, 191, 36, 0.95);
    color: #78350f;
}

.event-card-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}

.event-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.event-card-description {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.event-card-details {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.event-card-details .meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.event-card-details .meta-item i {
    color: var(--primary);
    font-size: 1rem;
}

.event-card-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.seats {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    padding: 6px 12px;
    background: rgba(45, 153, 153, 0.08);
    border-radius: 8px;
}

.seats strong {
    color: var(--primary);
    font-weight: 700;
    font-size: 1rem;
}

.event-card-footer .btn {
    padding: 0.65rem 1.25rem;
    font-size: 0.875rem;
    border-radius: 10px;
    flex: 1;
    min-width: 120px;
    justify-content: center;
}

/* Responsive Events */
@media (max-width: 768px) {
    .event-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .event-card-media {
        height: 180px;
    }

    .event-card-content {
        padding: 1.25rem;
    }

    .event-card-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .event-card-footer .btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .event-card-title {
        font-size: 1.1rem;
    }

    .event-card-description {
        font-size: 0.85rem;
    }


}

/* Dark Theme for Events */
:root[data-theme="dark"] .event-section-bg {
    background: linear-gradient(135deg, rgba(45, 153, 153, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
}

:root[data-theme="dark"] .event-card {
    /* background: rgba(255, 255, 255, 0.04); */
    border-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .event-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(45, 153, 153, 0.3);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] .event-card-title {
    color: #f8f9fa;
}

:root[data-theme="dark"] .event-card-description {
    color: rgba(255, 255, 255, 0.65);
}

:root[data-theme="dark"] .event-card-details {
    border-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .event-card-details .meta-item {
    color: rgba(255, 255, 255, 0.65);
}

:root[data-theme="dark"] .seats {
    background: rgba(45, 153, 153, 0.15);
    color: rgba(255, 255, 255, 0.85);
}

:root[data-theme="dark"] .seats strong {
    color: var(--accent);
}

/* ========= Partners & Sponsors Section ========= */
/*  */
.partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.partner-card {
    backdrop-filter: blur(10px);
    border: 1px solid rgba(45, 153, 153, 0.15);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: all 0.3s ease;
}

.partner-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(45, 153, 153, 0.15);
    border-color: var(--primary);
}

.partner-logo-wrapper {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(45, 153, 153, 0.05) 0%, rgba(0, 217, 217, 0.05) 100%);
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid rgba(45, 153, 153, 0.1);
}

.partner-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(30%);
    transition: filter 0.3s ease;
}

.partner-card:hover .partner-logo {
    filter: grayscale(0%);
}

.partner-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

.partner-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: 1.4;
}

.partner-description {
    font-size: 0.875rem;
    color: var(--text-light);
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

.partner-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(45, 153, 153, 0.1);
}

.partner-link:hover {
    color: var(--accent);
    gap: 0.75rem;
}

.partner-link i {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.partner-link:hover i {
    transform: translateX(-3px);
}
  /*  - Partners Category Styles */
        .partners-category {
            margin-bottom: 4rem;
        }

        .category-title {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid var(--primary-light);
        }

        .category-title i {
            color: var(--primary);
        }

        @media (max-width: 768px) {
            .category-title {
                font-size: 1.25rem;
            }
        }
/*  - Remove blue underline from partner card links */
.partner-card-link {
    text-decoration: none;
    color: inherit;
}

.partner-card-link:hover,
.partner-card-link:focus,
.partner-card-link:active {
    text-decoration: none;
    color: inherit;
}

/* Responsive Partners */
@media (max-width: 768px) {
    .partner-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 1.25rem;
    }

    .partner-logo-wrapper {
        height: 100px;
    }
}

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

    .partner-card {
        padding: 1.25rem;
    }
}

/* Dark Theme for Partners */
:root[data-theme="dark"] .partner-card {

    border-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .partner-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(45, 153, 153, 0.3);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] .partner-logo-wrapper {
    background: linear-gradient(135deg, rgba(45, 153, 153, 0.1) 0%, rgba(0, 217, 217, 0.1) 100%);
    border-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .partner-name {
    color: #f8f9fa;
}

:root[data-theme="dark"] .partner-description {
    color: rgba(255, 255, 255, 0.65);
}

:root[data-theme="dark"] .partner-link {
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--accent);
}

:root[data-theme="dark"] .partner-link:hover {
    color: #00e5e5;
}

/*  - Related Articles Section */
.related-articles-section {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.related-articles-section .section-header {
    text-align: center;
    margin-bottom: 2rem;
}

.related-articles-section .section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(0, 102, 204, 0.1);
    border-radius: 2rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-color, #0066cc);
    margin-bottom: 1rem;
}

.related-articles-section .section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark, #1a1a1a);
    margin-bottom: 0.5rem;
}

.related-articles-section .cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* Dark Theme */
:root[data-theme="dark"] .related-articles-section .section-title {
    color: #f8f9fa;
}

:root[data-theme="dark"] .related-articles-section .section-badge {
    background: rgba(0, 102, 204, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
    .related-articles-section .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .related-articles-section .cards-grid {
        grid-template-columns: 1fr;
    }

    .related-articles-section .section-title {
        font-size: 1.5rem;
    }
}

/*  */
/* ========= Consultation Cards - Horizontal Layout ========= */
.consultation-cards-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
}

.consultation-card-horizontal {
    display: grid;
    grid-template-columns: 40% 60%;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
    min-height: 240px;
    max-height: 280px;
}

.consultation-card-horizontal:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(45, 153, 153, 0.15);
}

/* الجزء الأيسر: الصورة */
.consultation-image-side {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary), var(--accent));
}

.consultation-full-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.consultation-card-horizontal:hover .consultation-full-image {
    transform: scale(1.08);
}

.consultation-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(45, 153, 153, 0.1), rgba(115, 225, 214, 0.1));
}

.consultation-image-placeholder i {
    font-size: 4rem;
    color: var(--primary);
    opacity: 0.5;
}

/* الجزء الأيمن: التفاصيل */
.consultation-details-side {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.consultation-type-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: fit-content;
    margin-bottom: 0.75rem;
}

.consultation-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.consultation-description {
    font-size: 0.875rem;
    color: var(--text-light);
    line-height: 1.5;
    margin: 0 0 1rem 0;
    flex-grow: 1;
}

.consultation-meta {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.75rem 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.consultation-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    color: var(--text-light);
    font-weight: 500;
}

.consultation-meta .meta-item i {
    font-size: 1rem;
    color: var(--primary);
}

.consultation-meta .meta-price {
    color: var(--primary);
    font-weight: 700;
    font-size: 1rem;
}

.consultation-availability {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.availability-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(45, 153, 153, 0.1);
    color: var(--primary);
    border: 1px solid rgba(45, 153, 153, 0.2);
}

.availability-badge i {
    font-size: 0.85rem;
}

.availability-badge.online {
    background: rgba(45, 153, 153, 0.1);
    color: var(--primary);
}

.availability-badge.in-person {
    background: rgba(115, 225, 214, 0.1);
    color: var(--accent);
}

.btn-consultation-book {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(45, 153, 153, 0.2);
    width: 100%;
    text-align: center;
}

.btn-consultation-book:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(45, 153, 153, 0.3);
}

.btn-consultation-book i {
    transition: transform 0.3s ease;
}

.btn-consultation-book:hover i {
    transform: translateX(-3px);
}

/* Dark Theme */
:root[data-theme="dark"] .consultation-card-horizontal {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .consultation-name {
    color: #f8f9fa;
}

:root[data-theme="dark"] .consultation-description {
    color: rgba(255, 255, 255, 0.7);
}

:root[data-theme="dark"] .consultation-meta {
    border-color: rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .consultation-meta .meta-item {
    color: rgba(255, 255, 255, 0.7);
}

:root[data-theme="dark"] .consultation-image-placeholder {
    background: linear-gradient(135deg, rgba(45, 153, 153, 0.2), rgba(115, 225, 214, 0.15));
}

/* Responsive */
@media (max-width: 968px) {
    .consultation-card-horizontal {
        grid-template-columns: 1fr;
        min-height: auto;
        max-height: none;
    }

    .consultation-image-side {
        height: 200px;
    }

    .consultation-details-side {
        padding: 1.25rem;
    }

    .consultation-name {
        font-size: 1.15rem;
    }
}

@media (max-width: 480px) {
    .consultation-cards-container {
        gap: 1rem;
    }

    .consultation-card-horizontal {
        border-radius: 12px;
    }

    .consultation-image-side {
        height: 180px;
    }

    .consultation-details-side {
        padding: 1rem;
    }

    .consultation-name {
        font-size: 1.05rem;
    }

    .consultation-description {
        font-size: 0.8rem;
    }

    .consultation-meta {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .btn-consultation-book {
        padding: 0.65rem 1.25rem;
        font-size: 0.875rem;
    }
}

/* ========= About Page Styles ========= */
/*  */

.about-cover {
    margin-bottom: 3rem;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.about-cover-image {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
}

.about-description {
    margin-bottom: 3rem;
}

.about-content-box {
    background: var(--glass);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(45, 153, 153, 0.15);
    border-radius: 16px;
    padding: 2rem;
    color: var(--text);
}

/* عرض النصوص مع الفراغات الأصلية */
.about-text-content {
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.9;
    color: var(--text-light);
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
    background: transparent;
    border: none;
    padding: 0;
    overflow: visible;
}

/* ========= VMV Section: Vision, Mission, Values ========= */
.vmv-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 3rem;
}

.vmv-block {
    background: var(--glass);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.vmv-block:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 35px rgba(45, 153, 153, 0.12);
}

/* Vision Block */
.vision-block {
    border: 1px solid rgba(45, 153, 153, 0.2);
    border-top: 4px solid #2d9999;
}

/* Mission Block */
.mission-block {
    border: 1px solid rgba(0, 217, 217, 0.2);
    border-top: 4px solid #00d9d9;
}

/* Values Block */
.values-block {
    border: 1px solid rgba(255, 107, 107, 0.2);
    border-top: 4px solid #ff6b6b;
}

.vmv-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(45, 153, 153, 0.1);
}

.vmv-icon-wrapper {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vmv-icon-wrapper i {
    font-size: 1.5rem;
    color: #fff;
}

.vision-icon {
    background: linear-gradient(135deg, #2d9999 0%, #1a7a7a 100%);
}

.mission-icon {
    background: linear-gradient(135deg, #00d9d9 0%, #00b3b3 100%);
}

.values-icon {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
}

.vmv-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.vmv-body {
    padding: 2rem;
}

.vmv-text {
    font-family: inherit;
    font-size: 1.05rem;
    line-height: 2;
    color: var(--text-light);
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
    background: transparent;
    border: none;
    padding: 0;
    overflow: visible;
}

/* Contact Info */
.about-contact-info {
    background: var(--glass);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(45, 153, 153, 0.15);
    border-radius: 16px;
    padding: 2rem;
}

.about-contact-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1.5rem;
}

.about-contact-title i {
    color: var(--primary);
}

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.contact-info-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text);
}

.contact-info-item i {
    color: var(--primary);
    font-size: 1.25rem;
}

.contact-info-item a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-info-item a:hover {
    color: var(--accent);
}

/* Dark Theme */
:root[data-theme="dark"] .about-content-box,
:root[data-theme="dark"] .vmv-block,
:root[data-theme="dark"] .about-contact-info {
    background: rgba(255, 255, 255, 0.03);
}

:root[data-theme="dark"] .vision-block {
    border-color: rgba(45, 153, 153, 0.15);
    border-top-color: #2d9999;
}

:root[data-theme="dark"] .mission-block {
    border-color: rgba(0, 217, 217, 0.15);
    border-top-color: #00d9d9;
}

:root[data-theme="dark"] .values-block {
    border-color: rgba(255, 107, 107, 0.15);
    border-top-color: #ff6b6b;
}

:root[data-theme="dark"] .vmv-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Responsive */
@media (max-width: 768px) {
    .about-page {
        padding: 1.5rem 0 3rem;
    }

    .about-cover-image {
        max-height: 250px;
    }

    .about-content-box,
    .vmv-body,
    .about-contact-info {
        padding: 1.5rem;
    }

    .vmv-header {
        padding: 1.25rem 1.5rem;
    }

    .vmv-title {
        font-size: 1.15rem;
    }

    .vmv-text {
        font-size: 0.95rem;
        line-height: 1.8;
    }

    .about-text-content {
        font-size: 0.95rem;
    }
}

/*  */
/* ========= Achievements Page - Modern Design ========= */

/* Hero Section */
.achievements-hero {
    position: relative;
    padding: 5.5rem 0 2.5rem;
    overflow: hidden;
}

.achievements-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(45, 153, 153, 0.05) 0%, rgba(0, 217, 217, 0.03) 50%, transparent 100%);
    z-index: -1;
}

.achievements-hero-bg::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -15%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(45, 153, 153, 0.1) 0%, transparent 65%);
    border-radius: 50%;
}

.achievements-hero-bg::after {
    content: '';
    position: absolute;
    bottom: -25%;
    left: -8%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(0, 217, 217, 0.06) 0%, transparent 65%);
    border-radius: 50%;
}

.achievements-hero-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.achievements-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: #fff;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 1rem;
    box-shadow: 0 3px 12px rgba(45, 153, 153, 0.2);
}

.achievements-hero-badge i {
    font-size: 0.85rem;
}

.achievements-hero-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 0.6rem;
    line-height: 1.3;
    background: linear-gradient(135deg, var(--text) 30%, var(--primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.achievements-hero-subtitle {
    font-size: 0.95rem;
    color: var(--text-light);
    margin: 0;
    line-height: 1.6;
    max-width: 450px;
    margin: 0 auto;
}

/* Main Section */
.achievements-main-section {
    padding-top: 1.5rem;
}

/* Section Title Wrapper */
.section-title-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.section-title-wrapper.centered {
    justify-content: center;
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
}

.section-icon-badge {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.featured-badge { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); }
.stats-badge { background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%); }
.awards-badge { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); }
.milestones-badge { background: linear-gradient(135deg, #2d9999 0%, #00d9d9 100%); }
.recognitions-badge { background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%); }
.certifications-badge { background: linear-gradient(135deg, #10b981 0%, #34d399 100%); }

.section-title-modern {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

/* Featured Achievements */
.achievements-featured-section {
    margin-bottom: 4rem;
}

.featured-achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.75rem;
}

.featured-achievement-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(45, 153, 153, 0.12);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.featured-achievement-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(45, 153, 153, 0.18);
    border-color: rgba(45, 153, 153, 0.3);
}

.featured-card-glow {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(45, 153, 153, 0.08) 0%, transparent 45%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.featured-achievement-card:hover .featured-card-glow {
    opacity: 1;
}

.featured-card-content {
    position: relative;
    padding: 1.75rem;
    z-index: 1;
}

.featured-image-wrapper {
    position: relative;
    height: 160px;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.featured-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.featured-achievement-card:hover .featured-image-wrapper img {
    transform: scale(1.04);
}

.featured-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.25) 0%, transparent 45%);
}

.featured-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    margin-bottom: 1.25rem;
}

.featured-icon-circle {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: #fff;
    font-size: 2.25rem;
    z-index: 2;
    box-shadow: 0 12px 30px rgba(45, 153, 153, 0.28);
}

.featured-icon-rings {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.featured-icon-rings span {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(45, 153, 153, 0.2);
    animation: ring-pulse 2s ease-in-out infinite;
}

.featured-icon-rings span:nth-child(1) { width: 85px; height: 85px; animation-delay: 0s; }
.featured-icon-rings span:nth-child(2) { width: 105px; height: 105px; animation-delay: 0.3s; }
.featured-icon-rings span:nth-child(3) { width: 125px; height: 125px; animation-delay: 0.6s; }

@keyframes ring-pulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.05); }
}

.featured-info {
    text-align: center;
}

.achievement-badge {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border-radius: 15px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 0.6rem;
}

.achievement-badge-milestone { background: rgba(45, 153, 153, 0.15); color: #2d9999; }
.achievement-badge-award { background: rgba(245, 158, 11, 0.15); color: #d97706; }
.achievement-badge-recognition { background: rgba(139, 92, 246, 0.15); color: #7c3aed; }
.achievement-badge-statistics { background: rgba(59, 130, 246, 0.15); color: #2563eb; }
.achievement-badge-certification { background: rgba(16, 185, 129, 0.15); color: #059669; }

.featured-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.5rem;
    line-height: 1.4;
}

.featured-description {
    font-size: 0.8rem;
    color: var(--text-light);
    line-height: 1.6;
    margin: 0 0 0.85rem;
}

.featured-metric {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6rem 1.25rem;
    background: linear-gradient(135deg, rgba(45, 153, 153, 0.08) 0%, rgba(0, 217, 217, 0.04) 100%);
    border-radius: 10px;
    margin-bottom: 0.6rem;
}

.featured-metric-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}

.featured-metric-label {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 0.15rem;
}

.featured-date {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-light);
}

.featured-date i {
    color: var(--primary);
}

/* Statistics Section */
.achievements-stats-section {
    position: relative;
    padding: 4rem 0;
    margin: 3rem 0 5rem;
    border-radius: 32px;
    background: linear-gradient(135deg, rgba(45, 153, 153, 0.08) 0%, rgba(0, 217, 217, 0.05) 100%);
    overflow: hidden;
}

.stats-bg-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.5;
    background-image: radial-gradient(rgba(45, 153, 153, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}

.stats-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    position: relative;
    z-index: 1;
    padding: 0 2rem;
}

.stat-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.stat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(45, 153, 153, 0.15);
}

.stat-card-1 { border-top: 4px solid #2d9999; }
.stat-card-2 { border-top: 4px solid #f59e0b; }
.stat-card-3 { border-top: 4px solid #8b5cf6; }
.stat-card-4 { border-top: 4px solid #10b981; }

.stat-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 1.5rem;
    color: #fff;
}

.stat-card-1 .stat-card-icon { background: linear-gradient(135deg, #2d9999 0%, #00d9d9 100%); }
.stat-card-2 .stat-card-icon { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); }
.stat-card-3 .stat-card-icon { background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%); }
.stat-card-4 .stat-card-icon { background: linear-gradient(135deg, #10b981 0%, #34d399 100%); }

.stat-card-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.stat-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.25rem;
}

.stat-card-label {
    font-size: 0.85rem;
    color: var(--text-light);
    margin: 0;
}

/* Category Section */
.achievements-category-section {
    margin-bottom: 5rem;
}

/* Achievement Cards Grid */
.achievements-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.achievement-card-modern {
    position: relative;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid rgba(45, 153, 153, 0.1);
}

.achievement-card-modern:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(45, 153, 153, 0.15);
}

.card-ribbon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    color: #fff;
    font-size: 1rem;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.card-image-wrapper {
    height: 160px;
    overflow: hidden;
}

.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.achievement-card-modern:hover .card-image-wrapper img {
    transform: scale(1.08);
}

.card-icon-wrapper {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: #fff;
}

.award-icon-bg { background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(251, 191, 36, 0.1) 100%); color: #f59e0b; }
.recognition-icon-bg { background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(167, 139, 250, 0.1) 100%); color: #8b5cf6; }

.card-body {
    padding: 1.5rem;
}

.card-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.75rem;
    line-height: 1.4;
}

.card-description {
    font-size: 0.875rem;
    color: var(--text-light);
    line-height: 1.6;
    margin: 0 0 1rem;
}

.card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(45, 153, 153, 0.1);
}

.card-entity,
.card-date {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-light);
}

.card-entity i,
.card-date i {
    color: var(--primary);
    font-size: 0.9rem;
}

/* Milestones Timeline */
.milestones-timeline {
    position: relative;
    padding: 2rem 0;
}

.milestones-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    background: linear-gradient(to bottom, var(--primary), var(--accent));
    transform: translateX(-50%);
    border-radius: 3px;
}

.timeline-item {
    position: relative;
    width: 50%;
    padding: 1.5rem;
}

.timeline-item.left {
    padding-right: 3rem;
    text-align: right;
}

.timeline-item.right {
    margin-left: 50%;
    padding-left: 3rem;
}

.timeline-marker {
    position: absolute;
    top: 2rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: #fff;
    font-size: 1.25rem;
    z-index: 2;
    box-shadow: 0 4px 15px rgba(45, 153, 153, 0.3);
}

.timeline-item.left .timeline-marker {
    right: -25px;
}

.timeline-item.right .timeline-marker {
    left: -25px;
}

.timeline-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid rgba(45, 153, 153, 0.1);
    transition: all 0.3s ease;
}

.timeline-item:hover .timeline-card {
    box-shadow: 0 15px 35px rgba(45, 153, 153, 0.12);
    border-color: var(--primary);
}

.timeline-date {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: #fff;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.timeline-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.5rem;
}

.timeline-description {
    font-size: 0.875rem;
    color: var(--text-light);
    line-height: 1.6;
    margin: 0;
}

.timeline-metric {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background: rgba(45, 153, 153, 0.1);
    border-radius: 8px;
    font-size: 0.85rem;
}

.timeline-metric strong {
    color: var(--primary);
    font-weight: 700;
}

.timeline-metric span {
    color: var(--text-light);
}

/* Certifications */
.certifications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.certification-card {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid rgba(16, 185, 129, 0.15);
    transition: all 0.3s ease;
}

.certification-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(16, 185, 129, 0.15);
    border-color: #10b981;
}

.certification-seal {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    color: #fff;
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.25);
}

.certification-content {
    flex: 1;
}

.certification-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.5rem;
}

.certification-description {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.6;
    margin: 0 0 0.75rem;
}

.certification-issuer {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: #10b981;
    font-weight: 600;
}

.certification-issuer i {
    font-size: 0.9rem;
}

/* No Achievements */
.no-achievements-wrapper {
    text-align: center;
    padding: 5rem 2rem;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    border: 1px solid rgba(45, 153, 153, 0.1);
}

.no-achievements-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(45, 153, 153, 0.1) 0%, rgba(0, 217, 217, 0.1) 100%);
    margin: 0 auto 1.5rem;
    font-size: 2.5rem;
    color: var(--primary);
}

.no-achievements-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.75rem;
}

.no-achievements-text {
    font-size: 1rem;
    color: var(--text-light);
    margin: 0 0 1.5rem;
}

/* Dark Theme */
:root[data-theme="dark"] .achievements-hero-bg {
    background: linear-gradient(135deg, rgba(45, 153, 153, 0.15) 0%, rgba(0, 217, 217, 0.08) 50%, rgba(45, 153, 153, 0.05) 100%);
}

:root[data-theme="dark"] .achievements-hero-title {
    background: linear-gradient(135deg, #f8f9fa 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

:root[data-theme="dark"] .featured-achievement-card,
:root[data-theme="dark"] .achievement-card-modern,
:root[data-theme="dark"] .timeline-card,
:root[data-theme="dark"] .certification-card,
:root[data-theme="dark"] .stat-card {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .featured-achievement-card:hover,
:root[data-theme="dark"] .achievement-card-modern:hover,
:root[data-theme="dark"] .timeline-item:hover .timeline-card,
:root[data-theme="dark"] .certification-card:hover {
    border-color: var(--primary);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] .featured-title,
:root[data-theme="dark"] .card-title,
:root[data-theme="dark"] .timeline-title,
:root[data-theme="dark"] .certification-title,
:root[data-theme="dark"] .stat-card-title,
:root[data-theme="dark"] .section-title-modern {
    color: #f8f9fa;
}

:root[data-theme="dark"] .featured-description,
:root[data-theme="dark"] .card-description,
:root[data-theme="dark"] .timeline-description,
:root[data-theme="dark"] .certification-description,
:root[data-theme="dark"] .stat-card-label {
    color: rgba(255, 255, 255, 0.65);
}

:root[data-theme="dark"] .achievements-stats-section {
    background: linear-gradient(135deg, rgba(45, 153, 153, 0.15) 0%, rgba(0, 217, 217, 0.08) 100%);
}

:root[data-theme="dark"] .no-achievements-wrapper {
    background: rgba(30, 41, 59, 0.9);
}

:root[data-theme="dark"] .no-achievements-title {
    color: #f8f9fa;
}

/* Responsive */
@media (max-width: 992px) {
    .achievements-hero-title {
        font-size: 2.25rem;
    }

    .milestones-timeline::before {
        left: 25px;
    }

    .timeline-item {
        width: 100%;
        padding-left: 4rem;
        padding-right: 1rem;
        text-align: right;
    }

    .timeline-item.right {
        margin-left: 0;
    }

    .timeline-marker {
        left: 0 !important;
        right: auto !important;
    }
}

@media (max-width: 768px) {
    .achievements-hero {
        padding: 4rem 0 3rem;
    }

    .achievements-hero-title {
        font-size: 1.85rem;
    }

    .achievements-hero-subtitle {
        font-size: 1rem;
    }

    .featured-achievements-grid,
    .achievements-cards-grid,
    .certifications-grid {
        grid-template-columns: 1fr;
    }

    .stats-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 1rem;
    }

    .section-title-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .featured-icon-circle {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }

    .featured-icon-rings span:nth-child(1) { width: 100px; height: 100px; }
    .featured-icon-rings span:nth-child(2) { width: 125px; height: 125px; }
    .featured-icon-rings span:nth-child(3) { width: 150px; height: 150px; }
}

@media (max-width: 480px) {
    .achievements-hero-title {
        font-size: 1.5rem;
    }

    .stats-cards-grid {
        grid-template-columns: 1fr;
    }

    .stat-card-value {
        font-size: 2rem;
    }

    .certification-card {
        flex-direction: column;
        text-align: center;
    }

    .certification-seal {
        margin: 0 auto;
    }

    .featured-card-content {
        padding: 1.5rem;
    }

    .featured-metric {
        padding: 0.75rem 1.5rem;
    }

    .featured-metric-value {
        font-size: 1.75rem;
    }
}

/*  */
/* Achievement Card Links - Remove default link styles */
.featured-achievement-card-link,
.achievement-card-link,
.timeline-item-link,
.certification-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.featured-achievement-card-link:hover,
.featured-achievement-card-link:focus,
.featured-achievement-card-link:active,
.achievement-card-link:hover,
.achievement-card-link:focus,
.achievement-card-link:active,
.timeline-item-link:hover,
.timeline-item-link:focus,
.timeline-item-link:active,
.certification-card-link:hover,
.certification-card-link:focus,
.certification-card-link:active {
    text-decoration: none;
    color: inherit;
}

/* Timeline item link positioning */
.timeline-item-link {
    position: relative;
}

.timeline-item-link.left .timeline-item,
.timeline-item-link.right .timeline-item {
    position: relative;
}

/*  */
/* ========= Achievement Show Page - Modern Design ========= */

/* Hero Section */
.achievement-show-hero {
    position: relative;
    padding: 4rem 0 3rem;
    min-height: 320px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.achievement-show-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
}

.achievement-show-hero-bg .hero-bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.25;
}

.achievement-show-hero-bg .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(45, 153, 153, 0.9) 0%, rgba(0, 180, 180, 0.85) 100%);
}

.achievement-show-hero-content {
    position: relative;
    z-index: 1;
    color: #fff;
}

.btn-back-hero {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-back-hero:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    transform: translateX(5px);
}

[dir="rtl"] .btn-back-hero:hover {
    transform: translateX(-5px);
}

.achievement-show-badge {
    display: inline-block;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    backdrop-filter: blur(5px);
}

.achievement-show-title {
    font-size: 2.25rem;
    font-weight: 800;
    margin: 0 0 1.25rem;
    line-height: 1.3;
    max-width: 700px;
}

.achievement-show-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);
    border-radius: 50px;
    font-size: 0.875rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.meta-chip i {
    font-size: 1rem;
    opacity: 0.9;
}

/* Main Section */
.achievement-show-main {
    padding-top: 3rem;
}

.achievement-show-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
    align-items: start;
}

/* Content */
.achievement-show-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/*  */
/* صندوق الصورة الرئيسية */
.achievement-show-image-box {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(45, 153, 153, 0.1);
}

.achievement-main-image {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    display: block;
}

.achievement-show-icon-box {
    display: flex;
    justify-content: center;
    padding: 2rem;
    background: var(--glass);
    border-radius: 20px;
    border: 1px solid rgba(45, 153, 153, 0.1);
}

.show-icon-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: #fff;
    box-shadow: 0 15px 35px rgba(45, 153, 153, 0.3);
}

.achievement-icon-milestone { background: linear-gradient(135deg, #2d9999 0%, #00d9d9 100%); }
.achievement-icon-award { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); }
.achievement-icon-recognition { background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%); }

/*  - Reviews Section Styles */
/* ========= Reviews Page - Rating Stars ========= */
.rating-stars {
    display: flex;
    gap: 0.2rem;
    align-items: center;
}

.rating-stars i {
    /* color: #e5e7eb; */
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.rating-stars i.filled {
    color: #fbbf24;
}

/* Reviews Index Page */
.helpful-btn,
.unhelpful-btn {
    font-family: 'Tajawal', sans-serif;
    transition: all 0.3s ease;
}

.helpful-btn:hover {
    background: #10b981 !important;
    color: white !important;
}

.unhelpful-btn:hover {
    background: #ef4444 !important;
    color: white !important;
}

/* Reviews Show Page */
.helpful-btn:disabled,
.unhelpful-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Create Review Page - Star Rating */
.star-rating,
.star-rating-small {
    font-family: 'Tajawal', sans-serif;
}

.star-rating i,
.star-rating-small i {
    transition: color 0.2s ease;
    cursor: pointer;
}

.star-rating i:hover,
.star-rating-small i:hover {
    color: #fbbf24;
}

/* Review Form Elements */
#create-review form input,
#create-review form textarea,
#create-review form select {
    font-family: 'Tajawal', sans-serif;
}

/* Reviews Page - Average Ratings Section */
.reviews-avg-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    align-items: center;
}

.reviews-avg-overall {
    text-align: center;
}

.reviews-avg-score {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-color);
}

.reviews-avg-stars {
    justify-content: center;
    margin: 0.5rem 0;
}

.reviews-avg-count {
    color: var(--text-light);
    margin-top: 0.5rem;
}

.reviews-rating-dist {
    grid-column: span 2;
}

.reviews-rating-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.reviews-rating-label {
    min-width: 60px;
}

.reviews-rating-label i {
    color: #fbbf24;
    font-size: 0.9rem;
}

.reviews-bar-bg {
    flex: 1;
    height: 8px;
    background: rgba(0,0,0,0.1);
    border-radius: 4px;
    overflow: hidden;
}

.reviews-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    transition: width 0.3s;
}

.reviews-bar-percent {
    min-width: 50px;
    text-align: right;
    color: var(--text-light);
}



.reviews-detail-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.reviews-detail-value {
    font-weight: 600;
}

/* Reviews Search and Filter */
.reviews-search-input {
    padding: 0.8rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Tajawal', sans-serif !important;
    font-weight: 700;
}

.reviews-filter-select {
    padding: 0.8rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: 'Tajawal', sans-serif !important;
    font-weight: 700;
}

.reviews-filter-select option {
    font-family: 'Tajawal', sans-serif !important;
    font-weight: 700;
}

/* Review Card Styles */
.review-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.review-author-name {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: #1f2937;
}

.review-verified-icon {
    color: #10b981;
    font-size: 0.85rem;
}

.review-date {
    color: #6b7280;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.review-date i {
    font-size: 0.75rem;
    color: #9ca3af;
}

.review-text {
    margin-bottom: 0.75rem;
    line-height: 1.5;
    font-size: 0.9rem;
    color: #374151;
}

.review-aspects {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.review-aspect-positive {
    padding: 0.65rem;
    background: rgba(16, 185, 129, 0.06);
    border-radius: 8px;
    border-right: 2px solid #10b981;
}

.review-aspect-negative {
    padding: 0.65rem;
    background: rgba(239, 68, 68, 0.06);
    border-radius: 8px;
    border-right: 2px solid #ef4444;
}

.review-aspect-title {
    color: #059669;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.35rem;
}

.review-aspect-title i {
    font-size: 0.75rem;
}

.review-aspect-negative .review-aspect-title {
    color: #dc2626;
}

.review-aspect-text {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #4b5563;
}

.review-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    margin-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.review-actions {
    display: flex;
    gap: 0.5rem;
}

.review-action-btn {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.65rem;
    color: #6b7280;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

.review-action-btn:hover {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.15);
}

.review-action-btn i {
    font-size: 0.75rem;
}

.review-action-static {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.65rem;
    color: var(--text-light);
    font-size: 0.8rem;
}

.review-action-static i {
    font-size: 0.75rem;
}

.review-admin-reply {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: rgba(59, 130, 246, 0.06);
    border-radius: 8px;
    border-right: 2px solid #3b82f6;
}

.review-admin-title {
    color: #2563eb;
    font-weight: 600;
    font-size: 0.8rem;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.review-admin-title i {
    font-size: 0.75rem;
}

.review-admin-text {
    margin: 0 0 0.4rem 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #374151;
}

.review-admin-date {
    color: #6b7280;
    font-size: 0.75rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.review-admin-date i {
    font-size: 0.7rem;
}

/* Review Show Page */
.review-show-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--border);
}

.review-show-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.review-show-date {
    color: var(--text-light);
    font-size: 1rem;
}

.review-show-rating-section {
    text-align: center;
    padding: 2rem 0;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
    border-radius: 1rem;
}

.review-show-score {
    font-size: 4rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.review-show-stars {
    justify-content: center;
    margin-bottom: 0.5rem;
}

.review-show-stars i {
    font-size: 2rem;
}

.review-show-label {
    color: var(--text-light);
    font-size: 1.1rem;
}

.review-detailed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.review-detail-box {
    text-align: center;
    padding: 1rem;
    border-radius: 0.5rem;
}

.review-detail-score {
    font-size: 2rem;
    font-weight: 700;
}

.review-detail-label {
    margin-top: 0.5rem;
    font-weight: 600;
}

.review-content-box {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(0,0,0,0.02);
    border-radius: 0.5rem;
    border-right: 4px solid var(--primary-color);
}

.review-section-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.review-section-text {
    line-height: 1.8;
    font-size: 1.05rem;
}

.review-positive-box {
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 0.5rem;
    border-right: 4px solid #10b981;
}

.review-positive-title {
    color: #10b981;
}

.review-negative-box {
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 0.5rem;
    border-right: 4px solid #ef4444;
}

.review-negative-title {
    color: #ef4444;
}

.review-suggestions-box {
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 0.5rem;
    border-right: 4px solid #f59e0b;
}

.review-suggestions-title {
    color: #f59e0b;
}

.review-helpful-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.5rem;
    border-top: 2px solid var(--border);
    margin-top: 2rem;
}

.review-helpful-label {
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.review-helpful-buttons {
    display: flex;
    gap: 1rem;
}

.review-helpful-btn {
    padding: 0.75rem 1.5rem;
    background: rgba(16, 185, 129, 0.1);
    border: 2px solid #10b981;
    border-radius: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #10b981;
    transition: all 0.3s;
    font-family: 'Tajawal', sans-serif;
}

.review-unhelpful-btn {
    padding: 0.75rem 1.5rem;
    background: rgba(239, 68, 68, 0.1);
    border: 2px solid #ef4444;
    border-radius: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #ef4444;
    transition: all 0.3s;
    font-family: 'Tajawal', sans-serif;
}

.review-count-badge {
    background: #10b981;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
}

.review-unhelpful-btn .review-count-badge {
    background: #ef4444;
}

.review-static-helpful {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 0.5rem;
}

.review-static-helpful i {
    color: #10b981;
}

.review-static-helpful-text {
    font-weight: 600;
    color: #10b981;
}

.review-static-unhelpful {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 0.5rem;
}

.review-static-unhelpful i {
    color: #ef4444;
}

.review-static-unhelpful-text {
    font-weight: 600;
    color: #ef4444;
}

.review-show-date span {
    margin-right: 1rem;
}

.review-verified-icon {
    font-size: 1.2rem;
}

/* Dark Theme for Reviews */
:root[data-theme="dark"] .rating-stars i {
    color: #fbbf24;
}

:root[data-theme="dark"] .rating-stars i.filled {
    color: #fbbf24;
}

:root[data-theme="dark"] .reviews-bar-bg {
    background: rgba(255,255,255,0.1);
}

/*  - Additional Review Show Page Styles */
.review-show-back-section {
    margin-bottom: 2rem;
}

:root[data-theme="dark"] .review-author-name {
    color: #f3f4f6;
}

:root[data-theme="dark"] .review-date {
    color: #9ca3af;
}

:root[data-theme="dark"] .review-date i {
    color: #6b7280;
}

:root[data-theme="dark"] .review-text {
    color: #e5e7eb;
}

:root[data-theme="dark"] .review-aspect-positive {
    background: rgba(16, 185, 129, 0.15);
    border-right-color: #10b981;
}

:root[data-theme="dark"] .review-aspect-negative {
    background: rgba(239, 68, 68, 0.15);
    border-right-color: #ef4444;
}

:root[data-theme="dark"] .review-aspect-title {
    color: #10b981;
}

:root[data-theme="dark"] .review-aspect-negative .review-aspect-title {
    color: #f87171;
}

:root[data-theme="dark"] .review-aspect-text {
    color: #d1d5db;
}

:root[data-theme="dark"] .review-admin-reply {
    background: rgba(59, 130, 246, 0.15);
    border-right-color: #3b82f6;
}

:root[data-theme="dark"] .review-admin-title {
    color: #60a5fa;
}

:root[data-theme="dark"] .review-admin-text {
    color: #e5e7eb;
}

:root[data-theme="dark"] .review-admin-date {
    color: #9ca3af;
}

:root[data-theme="dark"] .review-action-btn {
    border-color: rgba(255,255,255,0.15);
    color: #9ca3af;
}

:root[data-theme="dark"] .review-action-btn:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.25);
}

:root[data-theme="dark"] .review-action-static {
    color: #9ca3af;
}
.review-show-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.review-detail-content {
    text-align: center;
    padding: 1rem;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 0.5rem;
}

.review-detail-content-score {
    font-size: 2rem;
    font-weight: 700;
    color: #10b981;
}

.review-detail-content-label {
    margin-top: 0.5rem;
    font-weight: 600;
}

.review-detail-support {
    text-align: center;
    padding: 1rem;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 0.5rem;
}

.review-detail-support-score {
    font-size: 2rem;
    font-weight: 700;
    color: #3b82f6;
}

.review-detail-support-label {
    margin-top: 0.5rem;
    font-weight: 600;
}

.review-detail-navigation {
    text-align: center;
    padding: 1rem;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 0.5rem;
}

.review-detail-navigation-score {
    font-size: 2rem;
    font-weight: 700;
    color: #f59e0b;
}

.review-detail-navigation-label {
    margin-top: 0.5rem;
    font-weight: 600;
}

.review-detail-performance {
    text-align: center;
    padding: 1rem;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 0.5rem;
}

.review-detail-performance-score {
    font-size: 2rem;
    font-weight: 700;
    color: #8b5cf6;
}

.review-detail-performance-label {
    margin-top: 0.5rem;
    font-weight: 600;
}

.review-admin-reply-box {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 0.5rem;
    border-right: 4px solid #3b82f6;
}

.review-admin-reply-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #3b82f6;
    margin-bottom: 1rem;
}

.review-admin-reply-text {
    line-height: 1.8;
    font-size: 1.05rem;
}

.review-admin-reply-date {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-top: 1rem;
}

/*  - Create Review Form Styles */
.review-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.review-form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.review-form-required {
    color: red;
}

.review-form-input {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: 'Tajawal', sans-serif;
}

.review-form-error {
    color: red;
    font-size: 0.875rem;
}

.review-rating-group {
    margin-bottom: 2rem;
}

.review-rating-label {
    display: block;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1.1rem;
}

.star-rating {
    display: flex;
    gap: 0.5rem;
    font-size: 2rem;
    cursor: pointer;
}

.star-rating i {
    color: #e5e7eb;
    transition: color 0.2s;
}

.review-detailed-ratings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.review-rating-small-group {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.star-rating-small {
    display: flex;
    gap: 0.25rem;
    cursor: pointer;
}

.star-rating-small i {
    color: #e5e7eb;
    font-size: 1.2rem;
}

.review-textarea-group {
    margin-bottom: 1.5rem;
}

.review-textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    resize: vertical;
    font-family: 'Tajawal', sans-serif;
}

.review-positive-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.review-positive-icon {
    color: #10b981;
}

.review-negative-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.review-negative-icon {
    color: #ef4444;
}

.review-suggestions-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.review-suggestions-icon {
    color: #f59e0b;
}

.review-form-buttons {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

/*  - Reviews Index Page Additional Styles */
.reviews-avg-card {
    margin-bottom: 2rem;
}

.reviews-search-card {
    margin-bottom: 2rem;
}

/* Review Cards Compact Style */
#reviews .event-grid .glass-card {
    padding: 1rem;
    transition: all 0.3s ease;
}

#reviews .event-grid .glass-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.reviews-write-btn-section {
    margin-top: 1rem;
    text-align: center;
}

.review-featured-badge {
    display: inline-block;
    margin-right: 0.5rem;
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
}

.review-read-more-btn {
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

.reviews-empty-state {
    text-align: center;
    padding: 3rem;
}

.reviews-empty-icon {
    font-size: 3rem;
    color: var(--text-light);
    margin-bottom: 1rem;
}

.reviews-empty-title {
    color: var(--dark);
    margin-bottom: 1rem;
}

.reviews-empty-text {
    color: var(--text-light);
    margin-bottom: 1.5rem;
}

.review-author-name {
    font-size: 1.2rem;
}

.review-verified-icon {
    font-size: 1rem;
}

/*  - Vote Button States and Loading */
/* Voted state - الأيقونة فقط تتغير لونها */
.review-helpful-btn.voted i,
.review-action-btn.helpful-btn.voted i {
    color: #10b981 !important;
}

.review-unhelpful-btn.voted i,
.review-action-btn.unhelpful-btn.voted i {
    color: #ef4444 !important;
}

/* Hover state - الأيقونة فقط تتغير لونها */
.review-helpful-btn:hover i {
    color: #10b981 !important;
}

.review-unhelpful-btn:hover i {
    color: #ef4444 !important;
}

.review-action-btn.loading,
.review-helpful-btn.loading,
.review-unhelpful-btn.loading {
    position: relative;
    pointer-events: none;
}

.review-action-btn.loading::after,
.review-helpful-btn.loading::after,
.review-unhelpful-btn.loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid #ffffff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: button-loading-spinner 0.6s linear infinite;
}

@keyframes button-loading-spinner {
    from {
        transform: rotate(0turn);
    }
    to {
        transform: rotate(1turn);
    }
}

/* Responsive Reviews */
@media (max-width: 768px) {
    .rating-stars {
        gap: 0.2rem;
    }

    .rating-stars i {
        font-size: 1rem;
    }

    .reviews-avg-container {
        grid-template-columns: 1fr;
    }

    .reviews-rating-dist {
        grid-column: span 1;
    }

    .review-card-header {
        flex-direction: column;
    }

    .review-footer {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .review-helpful-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}


.achievement-icon-statistics { background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%); }
.achievement-icon-certification { background: linear-gradient(135deg, #10b981 0%, #34d399 100%); }

/* Metric Card */
.achievement-show-metric-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, rgba(45, 153, 153, 0.1) 0%, rgba(0, 217, 217, 0.05) 100%);
    border-radius: 16px;
    border: 1px solid rgba(45, 153, 153, 0.15);
}

.metric-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: #fff;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.metric-info {
    display: flex;
    flex-direction: column;
}

.metric-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.2;
}

.metric-label {
    font-size: 0.95rem;
    color: var(--text-light);
    margin-top: 0.25rem;
}

/* Description Box */
.achievement-show-description-box {
    background: var(--glass);
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid rgba(45, 153, 153, 0.1);
}

.description-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(45, 153, 153, 0.1);
}

.description-title i {
    color: var(--primary);
}

.description-content {
    font-size: 1rem;
    line-height: 1.9;
    color: var(--text-light);
}

/* Sidebar */
.achievement-show-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 100px;
}

.sidebar-card {
    background: var(--glass);
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid rgba(45, 153, 153, 0.1);
}

.sidebar-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(45, 153, 153, 0.1);
}

.sidebar-title i {
    color: var(--primary);
    font-size: 1.1rem;
}

.sidebar-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sidebar-info-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.info-label {
    font-size: 0.875rem;
    color: var(--text-light);
}

.info-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    text-align: end;
}

.info-value.highlight {
    color: var(--primary);
    font-size: 1.1rem;
    font-weight: 700;
}

/* Share Card */
.share-card .share-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.share-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.share-btn:hover {
    transform: translateY(-3px);
    color: #fff;
}

.share-btn.twitter { background: #1da1f2; }
.share-btn.twitter:hover { background: #0d8ddb; box-shadow: 0 5px 15px rgba(29, 161, 242, 0.4); }

.share-btn.facebook { background: #1877f2; }
.share-btn.facebook:hover { background: #0d65d9; box-shadow: 0 5px 15px rgba(24, 119, 242, 0.4); }

.share-btn.linkedin { background: #0a66c2; }
.share-btn.linkedin:hover { background: #0855a3; box-shadow: 0 5px 15px rgba(10, 102, 194, 0.4); }

.share-btn.whatsapp { background: #25d366; }
.share-btn.whatsapp:hover { background: #1fb855; box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4); }

/* Related Achievements */
.achievement-show-related {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(45, 153, 153, 0.1);
}

/* Responsive */
@media (max-width: 992px) {
    .achievement-show-grid {
        grid-template-columns: 1fr;
    }

    .achievement-show-sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sidebar-card {
        flex: 1;
        min-width: 280px;
    }
}

@media (max-width: 768px) {
    .achievement-show-hero {
        padding: 3rem 0 2rem;
        min-height: 280px;
    }

    .achievement-show-title {
        font-size: 1.75rem;
    }

    .achievement-show-meta {
        flex-direction: column;
        gap: 0.75rem;
    }

    .meta-chip {
        width: fit-content;
    }

    .achievement-show-sidebar {
        flex-direction: column;
    }

    .sidebar-card {
        min-width: 100%;
    }

    .achievement-show-metric-card {
        flex-direction: column;
        text-align: center;
    }

    .metric-info {
        align-items: center;
    }
}

@media (max-width: 480px) {
    .achievement-show-title {
        font-size: 1.5rem;
    }

    .achievement-show-description-box {
        padding: 1.5rem;
    }

    .share-buttons {
        justify-content: center;
    }
}

/* Dark Theme */
:root[data-theme="dark"] .achievement-show-hero-bg .hero-overlay {
    background: linear-gradient(135deg, rgba(25, 85, 85, 0.95) 0%, rgba(0, 100, 100, 0.9) 100%);
}

:root[data-theme="dark"] .achievement-show-icon-box,
:root[data-theme="dark"] .achievement-show-description-box,
:root[data-theme="dark"] .sidebar-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .achievement-show-metric-card {
    background: linear-gradient(135deg, rgba(45, 153, 153, 0.15) 0%, rgba(0, 217, 217, 0.08) 100%);
    border-color: rgba(45, 153, 153, 0.2);
}

:root[data-theme="dark"] .description-title,
:root[data-theme="dark"] .sidebar-title {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .achievement-show-related {
    border-top-color: rgba(255, 255, 255, 0.08);
}

        /* Featured Badge -  */
        .featured-badge {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
            color: #000;
            padding: 0.5rem 0.75rem;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.3rem;
            box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
            z-index: 2;
        }

        .featured-badge i {
            font-size: 1rem;
        }

        .course-image-wrapper {
            position: relative;
        }

/* ========= Membership Pricing Cards ========= */
.membership-section {
    padding: 5rem 0;
    background: linear-gradient(180deg, #f8fffe 0%, #fff 50%, #f0fafa 100%);
    position: relative;
    overflow: hidden;
}

/* Alert Messages */
.membership-section .alert {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.membership-section .alert i {
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.membership-section .alert-content {
    flex: 1;
}

.membership-section .alert-content strong {
    display: block;
    margin-bottom: 0.25rem;
}

.membership-section .alert-content p {
    margin: 0.25rem 0;
    font-size: 0.875rem;
    opacity: 0.9;
}

.membership-section .alert-success {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
    border: 1px solid #34d399;
}

.membership-section .alert-error {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border: 1px solid #f87171;
}

.membership-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background:
        radial-gradient(circle at 20% 20%, rgba(45, 153, 153, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(45, 153, 153, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 3rem auto 0;
    padding: 0 1rem;
}

.pricing-card {
    background: #fff;
    border-radius: 24px;
    padding: 0;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(45, 153, 153, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pricing-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 50px rgba(45, 153, 153, 0.2);
}

.pricing-card.featured {
    border: 2px solid var(--primary);
    transform: scale(1.03);
    z-index: 2;
}

.pricing-card.featured:hover {
    transform: scale(1.03) translateY(-12px);
}

.pricing-card.current {
    border: 2px solid #10b981;
}

.pricing-ribbon {
    position: absolute;
    top: 20px;
    right: -35px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #1a1a2e;
    padding: 8px 40px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transform: rotate(45deg);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
    z-index: 3;
}

.pricing-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 2;
}

.pricing-badge.current {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.pricing-header {
    padding: 1.75rem 1.5rem 1.25rem;
    text-align: center;
    position: relative;
    background: linear-gradient(180deg, rgba(45, 153, 153, 0.06) 0%, transparent 100%);
}

.pricing-card.featured .pricing-header {
    background: linear-gradient(180deg, rgba(45, 153, 153, 0.12) 0%, transparent 100%);
}

.pricing-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    font-size: 1.5rem;
    color: #fff;
    position: relative;
    background: var(--card-color, linear-gradient(135deg, #2d9999 0%, #1a5252 100%));
    box-shadow: 0 8px 20px rgba(45, 153, 153, 0.25);
}

.pricing-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px dashed rgba(45, 153, 153, 0.3);
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.pricing-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 0.35rem;
}

.pricing-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.pricing-price {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.pricing-amount {
    font-size: 2.25rem;
    font-weight: 900;
    color: var(--primary);
    line-height: 1;
}

.pricing-currency {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.35rem;
}

.pricing-period {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.pricing-credit {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 0.75rem;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.2);
}

.pricing-body {
    padding: 1rem 1.5rem;
    flex: 1;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pricing-features li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: var(--text);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.pricing-features li:last-child {
    border-bottom: none;
}

.pricing-features li .feature-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    flex-shrink: 0;
    background: rgba(45, 153, 153, 0.1);
    color: var(--primary);
}

.pricing-features li.highlight {
    font-weight: 600;
}

.pricing-features li.highlight .feature-icon {
    background: var(--primary);
    color: white;
}

.pricing-footer {
    padding: 1rem 1.5rem 1.25rem;
}

.pricing-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1.25rem;
    border-radius: 14px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.pricing-btn.primary {
    background: linear-gradient(135deg, var(--primary) 0%, #1a5252 100%);
    color: #fff;
    box-shadow: 0 8px 24px rgba(45, 153, 153, 0.3);
}

.pricing-btn.primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(45, 153, 153, 0.4);
}

.pricing-btn.outline {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
}

.pricing-btn.outline:hover {
    background: var(--primary);
    color: #fff;
}

.pricing-btn.disabled {
    background: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
}

.pricing-btn.disabled:hover {
    transform: none;
}

.pricing-btn i {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.pricing-btn:not(.disabled):hover i {
    transform: translateX(-4px);
}

/* Membership Status Banner */
.membership-banner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.75rem 2rem;
    border-radius: 20px;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

.membership-banner.active {
    background: linear-gradient(135deg, var(--primary) 0%, #1a5252 100%);
    color: white;
}

.membership-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.membership-banner-icon {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    position: relative;
    z-index: 1;
}

.membership-banner-info {
    flex: 1;
    min-width: 220px;
    position: relative;
    z-index: 1;
}

.membership-banner-label {
    opacity: 0.85;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 0.25rem;
}

.membership-banner-name {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
}

.membership-banner-expiry {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    opacity: 0.9;
    margin-top: 0.35rem;
}

/* Login Prompt */
.login-prompt-card {
    text-align: center;
    padding: 3rem;
    border: 2px dashed rgba(45, 153, 153, 0.3);
    border-radius: 24px;
    margin-bottom: 2.5rem;
    background: linear-gradient(180deg, rgba(45, 153, 153, 0.03) 0%, #fff 100%);
    position: relative;
    overflow: hidden;
}

.login-prompt-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    border-radius: 2px;
}

.login-prompt-icon {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    color: white;
    font-size: 2rem;
    box-shadow: 0 12px 32px rgba(45, 153, 153, 0.3);
}

.login-prompt-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    color: var(--text);
}

.login-prompt-text {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    font-size: 1rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.login-prompt-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 992px) {
    .pricing-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .pricing-card.featured {
        transform: none;
    }

    .pricing-card.featured:hover {
        transform: translateY(-12px);
    }
}

@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        gap: 1.5rem;
    }

    .pricing-header {
        padding: 2rem 1.5rem 1.5rem;
    }

    .pricing-icon {
        width: 70px;
        height: 70px;
        font-size: 1.75rem;
    }

    .pricing-amount {
        font-size: 2.5rem;
    }

    .pricing-body,
    .pricing-footer {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .membership-banner {
        padding: 1.25rem 1.5rem;
        gap: 1rem;
    }

    .membership-banner-icon {
        width: 55px;
        height: 55px;
        font-size: 1.5rem;
    }

    .membership-banner-name {
        font-size: 1.25rem;
    }

    .login-prompt-card {
        padding: 2rem 1.5rem;
    }
}

/* Dark Theme */
:root[data-theme="dark"] .membership-section {
    background: linear-gradient(180deg, var(--bg-dark) 0%, #0d1117 100%);
}

:root[data-theme="dark"] .membership-section .alert-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(52, 211, 153, 0.15) 100%);
    color: #6ee7b7;
    border-color: rgba(52, 211, 153, 0.4);
}

:root[data-theme="dark"] .membership-section .alert-error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(248, 113, 113, 0.15) 100%);
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.4);
}

:root[data-theme="dark"] .pricing-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .pricing-card:hover {
    box-shadow: 0 20px 50px rgba(45, 153, 153, 0.15);
}

:root[data-theme="dark"] .pricing-header {
    background: linear-gradient(180deg, rgba(45, 153, 153, 0.1) 0%, transparent 100%);
}

:root[data-theme="dark"] .pricing-name {
    color: #f8f9fa;
}

:root[data-theme="dark"] .pricing-features li {
    color: #ced4da;
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

:root[data-theme="dark"] .pricing-btn.disabled {
    background: rgba(255, 255, 255, 0.1);
    color: #6b7280;
}

:root[data-theme="dark"] .login-prompt-card {
    background: linear-gradient(180deg, rgba(45, 153, 153, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-color: rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] .login-prompt-title {
    color: #f8f9fa;
}

:root[data-theme="dark"] .pricing-credit {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

/* Modal Membership Styles */
.modal-membership-name {
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
    color: var(--primary);
    padding: 0.5rem;
    background: rgba(45, 153, 153, 0.08);
    border-radius: 8px;
}

.card-details-section {
    display: none;
    animation: fadeIn 0.3s ease;
}

.card-details-section.visible {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.payment-summary-box {
    background: linear-gradient(135deg, var(--bg-light) 0%, rgba(45, 153, 153, 0.05) 100%);
    padding: 0.85rem 1rem;
    border-radius: 10px;
    margin: 1rem 0;
    border: 1px solid rgba(45, 153, 153, 0.1);
}

.payment-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    font-size: 0.85rem;
    color: var(--text);
}

.payment-summary-row.credit-row {
    display: none;
    color: #10b981;
    font-weight: 600;
}

.payment-summary-row.credit-row.visible {
    display: flex;
}

.payment-summary-row.total-row {
    font-weight: 700;
    font-size: 0.95rem;
    border-top: 2px solid var(--primary);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    color: var(--primary);
}

.btn-block {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spin {
    animation: spin 1s linear infinite;
}

:root[data-theme="dark"] .modal-membership-name {
    background: rgba(45, 153, 153, 0.15);
}

:root[data-theme="dark"] .payment-summary-box {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(45, 153, 153, 0.08) 100%);
    border-color: rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] .payment-summary-row {
    color: #e5e7eb;
}

/* ===== Memberships Section (Homepage) ===== */
.membership-section-bg {
    background: linear-gradient(135deg, #f8fcfd 0%, #e8f5f5 50%, #f0fafa 100%);
    position: relative;
}

.membership-section-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(45, 153, 153, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 80% 50%, rgba(0, 217, 217, 0.06) 0%, transparent 50%);
    pointer-events: none;
}

.membership-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 2.5rem auto 0;
}

.membership-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 0;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.membership-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--card-accent, #2d9999), var(--accent));
}

.membership-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(45, 153, 153, 0.15);
}

.membership-card-header {
    padding: 2rem 1.5rem 1.5rem;
    text-align: center;
    border-bottom: 1px solid rgba(45, 153, 153, 0.08);
}

.membership-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, var(--card-accent, #2d9999) 0%, var(--accent) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(45, 153, 153, 0.25);
}

.membership-icon i {
    font-size: 28px;
    color: #fff;
}

.membership-name {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 0.5rem;
}

.membership-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 0.75rem;
}

.membership-price .price-amount {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}

.membership-price .price-currency {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-light);
}

.membership-price .price-period {
    font-size: 0.9rem;
    color: var(--text-light);
}

.membership-card-body {
    padding: 1.5rem;
    flex: 1;
}

.membership-description {
    font-size: 0.9rem;
    color: var(--text-light);
    text-align: center;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.membership-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.membership-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0;
    font-size: 0.95rem;
    color: var(--text);
    border-bottom: 1px dashed rgba(45, 153, 153, 0.1);
}

.membership-features li:last-child {
    border-bottom: none;
}

.membership-features li i {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    flex-shrink: 0;
}

.membership-card-footer {
    padding: 1.25rem 1.5rem 1.75rem;
    text-align: center;
}

.btn-membership {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.9rem 1.5rem;
    background: linear-gradient(135deg, var(--card-accent, #2d9999) 0%, var(--accent) 100%);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(45, 153, 153, 0.25);
}

.btn-membership:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(45, 153, 153, 0.35);
    filter: brightness(1.05);
}

.btn-membership i {
    transition: transform 0.3s ease;
}

.btn-membership:hover i {
    transform: translateX(-4px);
}

@media (max-width: 768px) {
    .membership-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .membership-card-header {
        padding: 1.5rem 1rem 1rem;
    }

    .membership-price .price-amount {
        font-size: 2rem;
    }
}

/* Dark Theme - Memberships Section */
:root[data-theme="dark"] .membership-section-bg {
    background: transparent;
}

:root[data-theme="dark"] .membership-section-bg::before {
    background: radial-gradient(circle at 20% 50%, rgba(45, 153, 153, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 50%, rgba(0, 217, 217, 0.08) 0%, transparent 50%);
}

:root[data-theme="dark"] .membership-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

:root[data-theme="dark"] .membership-card:hover {
    box-shadow: 0 8px 30px rgba(45, 153, 153, 0.15);
}

:root[data-theme="dark"] .membership-card-header {
    border-bottom-color: rgba(45, 153, 153, 0.15);
}

:root[data-theme="dark"] .membership-name {
    color: #f1f5f9;
}

:root[data-theme="dark"] .membership-price .price-amount {
    color: var(--accent);
}

:root[data-theme="dark"] .membership-price .price-currency,
:root[data-theme="dark"] .membership-price .price-period {
    color: #94a3b8;
}

:root[data-theme="dark"] .membership-description {
    color: #94a3b8;
}

:root[data-theme="dark"] .membership-features li {
    color: #e2e8f0;
    border-bottom-color: rgba(45, 153, 153, 0.12);
}

:root[data-theme="dark"] .btn-membership {
    box-shadow: 0 4px 16px rgba(0, 217, 217, 0.2);
}

:root[data-theme="dark"] .btn-membership:hover {
    box-shadow: 0 8px 24px rgba(0, 217, 217, 0.3);
}

/* ========= Membership Exam Attempts Section ========= */
.membership-attempts-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 10px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: white;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.membership-attempts-badge i {
    font-size: 10px;
}

.membership-attempt-section {
    margin-top: 20px;
    padding: 15px;
    background: linear-gradient(135deg, rgba(45, 153, 153, 0.08) 0%, rgba(0, 217, 217, 0.08) 100%);
    border: 1px solid var(--primary);
    border-radius: 8px;
}

.membership-attempt-section.no-margin {
    margin-top: 0;
}

.membership-attempt-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.membership-attempt-header i {
    color: var(--primary);
    font-size: 20px;
}

.membership-attempt-header strong {
    color: var(--dark);
    font-size: 15px;
}

.membership-attempt-info {
    margin: 0 0 10px;
    color: var(--text);
    font-size: 14px;
}

.membership-attempt-info i {
    margin-left: 5px;
}

.btn-use-membership-attempt {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
}

.btn-use-membership-attempt:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.btn-use-membership-attempt i {
    font-size: 16px;
}

.membership-attempt-used-notice {
    margin-top: 15px;
    padding: 10px 15px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid var(--warning);
    border-radius: 8px;
}

.membership-attempt-used-notice p {
    margin: 0;
    color: #92400e;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Dark Theme */
:root[data-theme="dark"] .membership-attempts-badge {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
}

:root[data-theme="dark"] .membership-attempt-section {
    background: linear-gradient(135deg, rgba(45, 153, 153, 0.15) 0%, rgba(0, 217, 217, 0.1) 100%);
    border-color: var(--accent);
}

:root[data-theme="dark"] .membership-attempt-header strong {
    color: #f1f5f9;
}

:root[data-theme="dark"] .membership-attempt-info {
    color: #cbd5e1;
}

:root[data-theme="dark"] .membership-attempt-used-notice {
    background: rgba(245, 158, 11, 0.15);
}

:root[data-theme="dark"] .membership-attempt-used-notice p {
    color: #fbbf24;
}

/* ========= Modern Compact Booking Cards ========= */
.booking-card-modern {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.02) 0%, rgba(99, 102, 241, 0.02) 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.booking-card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary) 0%, rgba(99, 102, 241, 0.5) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.booking-card-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    border-color: rgba(59, 130, 246, 0.3);
}

.booking-card-modern:hover::before {
    opacity: 1;
}

/* Booking Header */
.booking-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--border);
}

.booking-id-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: rgba(59, 130, 246, 0.08);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text);
}

.booking-id-badge i {
    color: var(--primary);
    font-size: 0.875rem;
}

.booking-status-badge {
    padding: 0.375rem 0.875rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

/* Booking Info Grid */
.booking-info-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.booking-info-item-modern {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

.booking-info-item-modern:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: translateX(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.booking-info-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.875rem;
}

.booking-info-content {
    flex: 1;
    min-width: 0;
}

.booking-info-label {
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin-bottom: 0.125rem;
    font-weight: 500;
}

.booking-info-value {
    font-weight: 600;
    color: var(--text);
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Details Section */
.booking-details-modern {
    margin-top: 1rem;
    background: rgba(0, 0, 0, 0.01);
    border-radius: 10px;
    padding: 0.875rem;
    border: 1px dashed var(--border);
}

.booking-details-toggle {
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--primary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.booking-details-toggle:hover {
    background: rgba(59, 130, 246, 0.05);
}

.booking-details-toggle i {
    font-size: 0.875rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

details[open] .booking-details-toggle i {
    transform: rotate(180deg);
}

.booking-details-content {
    padding-top: 0.875rem;
    display: grid;
    gap: 0.75rem;
    animation: slideDownDetails 0.3s ease-out;
}

@keyframes slideDownDetails {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.booking-detail-box {
    padding: 0.75rem;
    border-radius: 8px;
    border-right: 2px solid;
    transition: all 0.2s ease;
}

.booking-detail-box:hover {
    transform: translateX(-3px);
}

.booking-detail-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.booking-detail-header i {
    font-size: 0.875rem;
}

.booking-detail-title {
    font-weight: 600;
    color: var(--text);
    font-size: 0.8125rem;
}

.booking-detail-text {
    font-size: 0.75rem;
    color: var(--text);
    line-height: 1.6;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 6px;
}

/* Actions Row */
.booking-actions-row {
    display: flex;
    gap: 0.625rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.booking-action-btn {
    flex: 1;
    min-width: 140px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid;
    transition: all 0.3s ease;
    cursor: pointer;
}

.booking-action-btn i {
    font-size: 0.875rem;
}

.booking-action-btn-primary {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.booking-action-btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.booking-action-btn-secondary {
    background: white;
    color: var(--primary);
    border-color: var(--primary);
}

.booking-action-btn-secondary:hover {
    background: rgba(59, 130, 246, 0.05);
    transform: translateY(-2px);
}

.booking-action-btn-gold {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: white;
    border-color: #fbbf24;
}

.booking-action-btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
}

/* Rating Stars Display */
.booking-rating-stars {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.375rem;
}

.booking-rating-stars .stars {
    color: #fbbf24;
    font-size: 0.875rem;
    letter-spacing: 1px;
}

.booking-rating-stars .count {
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin-left: 0.25rem;
}

/* Rating Form */
.booking-rating-form {
    padding: 1rem;
    background: rgba(251, 191, 36, 0.03);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 10px;
    margin-top: 0.75rem;
}

.booking-rating-form h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.booking-rating-form h4 i {
    color: #fbbf24;
}

.booking-rating-form .star-rating {
    display: flex;
    gap: 0.375rem;
    margin-bottom: 0.875rem;
    justify-content: center;
}

.booking-rating-form .star-label {
    font-size: 1.5rem;
    color: #d1d5db;
    cursor: pointer;
    transition: all 0.2s ease;
}

.booking-rating-form .star-label:hover,
.booking-rating-form .star-label.active {
    color: #fbbf24;
    transform: scale(1.15);
}

.booking-rating-form textarea {
    width: 100%;
    padding: 0.625rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.8125rem;
    font-family: inherit;
    resize: vertical;
    min-height: 70px;
    transition: border-color 0.3s ease;
}

.booking-rating-form textarea:focus {
    outline: none;
    border-color: #fbbf24;
}

.booking-rating-form button {
    width: 100%;
    margin-top: 0.625rem;
    padding: 0.625rem;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.booking-rating-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
}

/* Dark Theme Support */
:root[data-theme="dark"] .booking-card-modern {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
    border-color: rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] .booking-card-modern:hover {
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] .booking-info-item-modern {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.05);
}

:root[data-theme="dark"] .booking-info-item-modern:hover {
    background: rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .booking-details-modern {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] .booking-detail-text {
    background: rgba(255, 255, 255, 0.03);
}

:root[data-theme="dark"] .booking-action-btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--primary);
}

:root[data-theme="dark"] .booking-action-btn-secondary:hover {
    background: rgba(59, 130, 246, 0.1);
}

:root[data-theme="dark"] .booking-rating-form {
    background: rgba(251, 191, 36, 0.05);
    border-color: rgba(251, 191, 36, 0.15);
}

:root[data-theme="dark"] .booking-rating-form textarea {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text);
}

/* Responsive */
@media (max-width: 768px) {
    .booking-info-grid-modern {
        grid-template-columns: repeat(2, 1fr);
    }

    .booking-actions-row {
        flex-direction: column;
    }

    .booking-action-btn {
        min-width: 100%;
    }
}

@media (max-width: 480px) {
    .booking-card-modern {
        padding: 1rem;
    }

    .booking-info-grid-modern {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .booking-info-item-modern {
        padding: 0.625rem;
    }
}

/* ========= Interests Selection Modal ========= */
.interests-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
    animation: interestsFadeIn 0.3s ease;
}

@keyframes interestsFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.interests-modal-container {
    background: var(--bg-card, #fff);
    border-radius: 24px;
    max-width: 700px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: interestsSlideUp 0.4s ease;
}

@keyframes interestsSlideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.interests-modal-header {
    padding: 2rem 2rem 1.5rem;
    text-align: center;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.interests-modal-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary, #2d9999) 0%, var(--primary-dark, #1e6b6b) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: 0 10px 30px rgba(45, 153, 153, 0.3);
}

.interests-modal-icon i {
    font-size: 2rem;
    color: white;
}

.interests-modal-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark, #1f2937);
    margin-bottom: 0.5rem;
}

.interests-modal-header p {
    color: var(--text-light, #6b7280);
    font-size: 0.95rem;
    line-height: 1.6;
}

.interests-modal-body {
    padding: 1.5rem 2rem;
    overflow-y: auto;
    flex: 1;
}

.interests-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.interest-card {
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.interest-card .interest-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.interest-card-content {
    background: var(--bg-light, #f9fafb);
    border: 2px solid var(--border, #e5e7eb);
    border-radius: 16px;
    padding: 1.25rem 1rem;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.interest-card:hover .interest-card-content {
    border-color: var(--primary, #2d9999);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(45, 153, 153, 0.15);
}

.interest-card .interest-checkbox:checked + .interest-card-content {
    background: linear-gradient(135deg, rgba(45, 153, 153, 0.1) 0%, rgba(45, 153, 153, 0.05) 100%);
    border-color: var(--primary, #2d9999);
    box-shadow: 0 8px 20px rgba(45, 153, 153, 0.2);
}

.interest-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    transition: all 0.3s ease;
}

.interest-name {
    font-weight: 600;
    color: var(--dark, #1f2937);
    font-size: 0.9rem;
}

.interest-desc {
    font-size: 0.75rem;
    color: var(--text-light, #6b7280);
    line-height: 1.4;
}

.interest-check {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary, #2d9999);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s ease;
}

.interest-check i {
    color: white;
    font-size: 0.85rem;
}

.interest-card .interest-checkbox:checked ~ .interest-check {
    opacity: 1;
    transform: scale(1);
}

.interests-modal-footer {
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--border, #e5e7eb);
    display: flex;
    gap: 1rem;
    justify-content: center;
    background: var(--bg-light, #f9fafb);
}

.btn-interests-skip {
    padding: 0.875rem 1.5rem;
    border-radius: 12px;
    border: 2px solid var(--border, #e5e7eb);
    background: transparent;
    color: var(--text-light, #6b7280);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

.btn-interests-skip:hover {
    border-color: var(--text-light, #6b7280);
    color: var(--dark, #1f2937);
}

.btn-interests-save {
    padding: 0.875rem 2rem;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, var(--primary, #2d9999) 0%, var(--primary-dark, #1e6b6b) 100%);
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    box-shadow: 0 4px 15px rgba(45, 153, 153, 0.3);
}

.btn-interests-save:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-interests-save:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(45, 153, 153, 0.4);
}

.btn-interests-save .selected-count {
    font-weight: 400;
    opacity: 0.9;
}

.btn-interests-save.loading {
    pointer-events: none;
}

.btn-interests-save.loading i {
    animation: interestsSpin 1s linear infinite;
}

@keyframes interestsSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Dark Theme for Interests Modal */
:root[data-theme="dark"] .interests-modal-container {
    background: var(--bg-card-dark, #1f2937);
}

:root[data-theme="dark"] .interests-modal-header {
    border-bottom-color: var(--border-dark, #374151);
}

:root[data-theme="dark"] .interests-modal-header h2 {
    color: #f9fafb;
}

:root[data-theme="dark"] .interests-modal-header p {
    color: #9ca3af;
}

:root[data-theme="dark"] .interest-card-content {
    background: var(--bg-dark, #111827);
    border-color: var(--border-dark, #374151);
}

:root[data-theme="dark"] .interest-name {
    color: #f9fafb;
}

:root[data-theme="dark"] .interest-desc {
    color: #9ca3af;
}

:root[data-theme="dark"] .interests-modal-footer {
    background: var(--bg-dark, #111827);
    border-top-color: var(--border-dark, #374151);
}

:root[data-theme="dark"] .btn-interests-skip {
    border-color: var(--border-dark, #374151);
    color: #9ca3af;
}

:root[data-theme="dark"] .btn-interests-skip:hover {
    border-color: #9ca3af;
    color: #f9fafb;
}

/* Responsive Interests Modal */
@media (max-width: 640px) {
    .interests-modal-container {
        max-height: 95vh;
        border-radius: 20px 20px 0 0;
        margin-top: auto;
    }

    .interests-modal-header {
        padding: 1.5rem 1.5rem 1rem;
    }

    .interests-modal-header h2 {
        font-size: 1.25rem;
    }

    .interests-modal-body {
        padding: 1rem 1.5rem;
    }

    .interests-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .interest-card-content {
        padding: 1rem 0.75rem;
    }

    .interest-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .interests-modal-footer {
        padding: 1rem 1.5rem;
        flex-direction: column-reverse;
    }

    .btn-interests-skip,
    .btn-interests-save {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Favorite Button Styles
   ========================================================================== */
.favorite-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #dee2e6;
    border-radius: 50px;
    color: #6c757d;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.favorite-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.favorite-btn i,
.favorite-btn .favorite-text {
    position: relative;
    z-index: 1;
}

.favorite-btn i {
    font-size: 1.2rem;
    transition: transform 0.3s ease, color 0.3s ease;
}

.favorite-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
    border-color: #ff6b6b;
    color: #ff6b6b;
}

.favorite-btn:hover i {
    transform: scale(1.1);
}

.favorite-btn:active {
    transform: translateY(0);
}

/* Favorited State */
.favorite-btn.favorited {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
    border-color: #ff6b6b;
    color: #fff;
}

.favorite-btn.favorited::before {
    opacity: 0;
}

.favorite-btn.favorited:hover {
    background: linear-gradient(135deg, #ee5a5a 0%, #dc3545 100%);
    border-color: #dc3545;
}

.favorite-btn.favorited i {
    animation: heartBeat 0.3s ease-in-out;
}

/* Loading/Spinning State */
.favorite-btn.spinning {
    pointer-events: none;
    opacity: 0.7;
}

.favorite-btn.spinning i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes heartBeat {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.3);
    }
    50% {
        transform: scale(1);
    }
    75% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* Dark Theme Support */
[data-theme="dark"] .favorite-btn {
    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
    border-color: #4a5568;
    color: #a0aec0;
}

[data-theme="dark"] .favorite-btn:hover {
    border-color: #ff6b6b;
    color: #ff6b6b;
}

[data-theme="dark"] .favorite-btn.favorited {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
    border-color: #ff6b6b;
    color: #fff;
}

/* Responsive Adjustments */
@media (max-width: 576px) {
    .favorite-btn {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }

    .favorite-btn i {
        font-size: 1rem;
    }

    .favorite-btn .favorite-text {
        display: none;
    }

    .favorite-btn {
        padding: 0.6rem;
        border-radius: 50%;
    }
}

/* ========= Membership Verification Page ========= */
/* ========= Membership Verification - Modern Premium Design ========= */
.membership-verify-section {
    min-height: 100vh;
    padding: 6rem 0 3rem;
    background: #0f0f1a;
    position: relative;
    overflow: hidden;
}

.membership-verify-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 20% 20%, rgba(45, 153, 153, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(16, 185, 129, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.membership-verify-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

/* Main Verification Card */
.membership-verify-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border-radius: 1.75rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    overflow: hidden;
    max-width: 820px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Status Header - Compact Elegant Version */
.verify-status-header {
    padding: 1.25rem 1.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.verify-status-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.1;
    pointer-events: none;
}

.verify-status-header.status-valid {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.05) 100%);
}

.verify-status-header.status-valid::before {
    background: linear-gradient(90deg, #10b981, #059669);
}

.verify-status-header.status-expired {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.05) 100%);
}

.verify-status-header.status-expired::before {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.verify-status-header.status-invalid {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.05) 100%);
}

.verify-status-header.status-invalid::before {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.verify-status-icon {
    width: 50px;
    height: 50px;
    border-radius: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.status-valid .verify-status-icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 10px 40px rgba(16, 185, 129, 0.4);
}

.status-expired .verify-status-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 10px 40px rgba(245, 158, 11, 0.4);
}

.status-invalid .verify-status-icon {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 10px 40px rgba(239, 68, 68, 0.4);
}

.verify-status-icon i {
    font-size: 1.5rem;
    color: white;
}

.verify-status-content {
    flex: 1;
}

.verify-status-title {
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.verify-status-message {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    line-height: 1.4;
}

/* Premium Membership Card - Glass Morphism */
.membership-preview-wrapper {
    padding: 1.5rem;
    position: relative;
}

.membership-preview-card {
    border-radius: 1.25rem;
    padding: 0;
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 15px 50px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    min-height: 240px;
    display: flex;
    flex-direction: column;
}

.membership-preview-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 0% 0%, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 100%, rgba(0, 0, 0, 0.2) 0%, transparent 50%);
    pointer-events: none;
}

.membership-preview-card::after {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255, 255, 255, 0.02) 10px,
        rgba(255, 255, 255, 0.02) 20px
    );
    pointer-events: none;
    animation: card-shimmer 30s linear infinite;
}

@keyframes card-shimmer {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50%, 50%); }
}

.preview-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    position: relative;
    z-index: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.preview-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.preview-logo svg {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

.preview-logo-text {
    font-weight: 900;
    font-size: 1.1rem;
    letter-spacing: 2px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.preview-type-badge {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 0.4rem 1rem;
    border-radius: 2rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.preview-member-info {
    position: relative;
    z-index: 1;
    padding: 1rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.preview-member-name {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.3px;
}

.preview-member-company {
    opacity: 0.8;
    font-size: 0.85rem;
    font-weight: 500;
}

.preview-member-number {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    padding: 0.75rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.preview-number-label {
    font-size: 0.65rem;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.preview-number-value {
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 2px;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
}

.preview-dates-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    z-index: 1;
}

.preview-date-box {
    padding: 0.75rem 1.25rem;
    text-align: center;
    position: relative;
}

.preview-date-box:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.preview-date-box:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.preview-date-box:first-child::after {
    content: '';
    position: absolute;
    top: 20%;
    left: 100%;
    width: 1px;
    height: 60%;
    background: rgba(255, 255, 255, 0.1);
}

.preview-date-label {
    font-size: 0.6rem;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.preview-date-value {
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

/* Membership Info Section - Modern Grid */
.membership-info-section {
    padding: 1.25rem 1.5rem 1.5rem;
}

.membership-info-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.membership-info-title i {
    color: var(--primary);
    font-size: 0.875rem;
}

.membership-details-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.membership-detail-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0.875rem;
    padding: 1rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.membership-detail-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), #00d9d9);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.membership-detail-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(45, 153, 153, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.membership-detail-card:hover::before {
    opacity: 1;
}

.detail-card-icon {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, rgba(45, 153, 153, 0.2) 0%, rgba(0, 217, 217, 0.1) 100%);
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.625rem;
    border: 1px solid rgba(45, 153, 153, 0.2);
    transition: all 0.3s ease;
}

.membership-detail-card:hover .detail-card-icon {
    background: linear-gradient(135deg, var(--primary) 0%, #00d9d9 100%);
    box-shadow: 0 8px 25px rgba(45, 153, 153, 0.4);
}

.detail-card-icon i {
    font-size: 1rem;
    color: var(--primary);
    transition: color 0.3s ease;
}

.membership-detail-card:hover .detail-card-icon i {
    color: white;
}

.detail-card-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.detail-card-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
}

/* Status Badges - Premium Style */
.verify-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    border-radius: 1.5rem;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.verify-status-badge.badge-active {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.verify-status-badge.badge-expired {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.verify-status-badge.badge-cancelled {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.verify-status-badge.badge-pending {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

/* Footer - Clean Minimal */
.membership-verify-footer {
    padding: 1.25rem 1.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.verify-footer-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    flex: 1;
}

.verify-footer-note i {
    color: var(--primary);
    font-size: 0.95rem;
}

.verify-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    background: linear-gradient(135deg, var(--primary) 0%, #00b8b8 100%);
    color: white;
    border-radius: 0.625rem;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 6px 20px rgba(45, 153, 153, 0.35);
}

.verify-back-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(45, 153, 153, 0.45);
    color: white;
}

.verify-back-btn i {
    font-size: 0.9rem;
}

/* Error State - Dark Theme */
.membership-error-card {
    text-align: center;
    padding: 4rem 2.5rem;
}

.error-icon-wrapper {
    width: 120px;
    height: 120px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    position: relative;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.error-icon-wrapper::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 2.25rem;
    border: 2px dashed rgba(239, 68, 68, 0.2);
    animation: error-rotate 30s linear infinite;
}

@keyframes error-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.error-icon-wrapper i {
    font-size: 3.5rem;
    color: #f87171;
}

.error-title-text {
    font-size: 1.75rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 1rem;
}

.error-message-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.error-number-display {
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem 2rem;
    border-radius: 1rem;
    display: inline-block;
    font-family: 'SF Mono', 'Monaco', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: #f87171;
    margin-bottom: 2rem;
    border: 1px dashed rgba(239, 68, 68, 0.3);
}

.error-help-text {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

/* Light Theme Override */
:root:not([data-theme="dark"]) .membership-verify-section {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

:root:not([data-theme="dark"]) .membership-verify-section::before {
    background: 
        radial-gradient(ellipse at 20% 20%, rgba(45, 153, 153, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
}

:root:not([data-theme="dark"]) .membership-verify-section::after {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

:root:not([data-theme="dark"]) .membership-verify-card {
    background: white;
    border: none;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.08), 0 10px 30px rgba(45, 153, 153, 0.1);
}

:root:not([data-theme="dark"]) .verify-status-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

:root:not([data-theme="dark"]) .verify-status-title {
    color: var(--dark);
}

:root:not([data-theme="dark"]) .verify-status-message {
    color: var(--gray);
}

:root:not([data-theme="dark"]) .membership-preview-wrapper {
    background: linear-gradient(180deg, #f8fafc 0%, white 100%);
}

:root:not([data-theme="dark"]) .membership-info-title {
    color: var(--gray);
}

:root:not([data-theme="dark"]) .membership-detail-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-color: rgba(45, 153, 153, 0.1);
}

:root:not([data-theme="dark"]) .membership-detail-card:hover {
    background: white;
    border-color: rgba(45, 153, 153, 0.2);
    box-shadow: 0 15px 40px rgba(45, 153, 153, 0.15);
}

:root:not([data-theme="dark"]) .detail-card-label {
    color: var(--gray);
}

:root:not([data-theme="dark"]) .detail-card-value {
    color: var(--dark);
}

:root:not([data-theme="dark"]) .verify-status-badge.badge-active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.1) 100%);
    color: #059669;
    border: none;
}

:root:not([data-theme="dark"]) .verify-status-badge.badge-expired {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.1) 100%);
    color: #d97706;
    border: none;
}

:root:not([data-theme="dark"]) .verify-status-badge.badge-cancelled {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.1) 100%);
    color: #dc2626;
    border: none;
}

:root:not([data-theme="dark"]) .verify-status-badge.badge-pending {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.1) 100%);
    color: #2563eb;
    border: none;
}

:root:not([data-theme="dark"]) .membership-verify-footer {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-top: 1px solid rgba(45, 153, 153, 0.1);
}

:root:not([data-theme="dark"]) .verify-footer-note {
    color: var(--gray);
}

:root:not([data-theme="dark"]) .error-title-text {
    color: var(--dark);
}

:root:not([data-theme="dark"]) .error-message-text {
    color: var(--gray);
}

:root:not([data-theme="dark"]) .error-number-display {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    color: #ef4444;
}

:root:not([data-theme="dark"]) .error-help-text {
    color: var(--gray);
}

/* Dark Theme */
:root[data-theme="dark"] .membership-verify-section {
    background: #0f0f1a;
}

:root[data-theme="dark"] .membership-verify-card {
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.5);
}

:root[data-theme="dark"] .membership-preview-wrapper {
    background: transparent;
}

:root[data-theme="dark"] .membership-info-title {
    color: rgba(255, 255, 255, 0.5);
}

:root[data-theme="dark"] .membership-detail-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .detail-card-label {
    color: rgba(255, 255, 255, 0.5);
}

:root[data-theme="dark"] .detail-card-value {
    color: #ffffff;
}

:root[data-theme="dark"] .membership-verify-footer {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.05);
}

:root[data-theme="dark"] .verify-footer-note {
    color: rgba(255, 255, 255, 0.5);
}

:root[data-theme="dark"] .error-title-text {
    color: #ffffff;
}

:root[data-theme="dark"] .error-number-display {
    background: rgba(255, 255, 255, 0.05);
    color: #f87171;
}

/* Responsive */
@media (max-width: 992px) {
    .membership-details-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .membership-verify-section {
        padding: 6rem 1rem 3rem;
    }
    
    .membership-verify-card {
        border-radius: 1.5rem;
        margin: 0;
    }
    
    .verify-status-header {
        padding: 1.5rem;
        flex-direction: column;
        text-align: center;
    }
    
    .verify-status-icon {
        width: 60px;
        height: 60px;
    }
    
    .verify-status-icon i {
        font-size: 1.75rem;
    }
    
    .verify-status-title {
        font-size: 1.25rem;
    }
    
    .verify-status-message {
        font-size: 0.9rem;
    }
    
    .membership-preview-wrapper {
        padding: 1.5rem;
    }
    
    .membership-preview-card {
        min-height: auto;
    }
    
    .preview-card-header {
        padding: 1.25rem 1.5rem;
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .preview-member-info {
        padding: 1.25rem 1.5rem;
    }
    
    .preview-member-name {
        font-size: 1.5rem;
    }
    
    .preview-member-number {
        padding: 1rem 1.5rem;
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    
    .preview-dates-row {
        grid-template-columns: 1fr;
    }
    
    .preview-date-box:first-child::after {
        display: none;
    }
    
    .preview-date-box {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .preview-date-box:last-child {
        border-bottom: none;
    }
    
    .membership-info-section {
        padding: 1.5rem;
    }
    
    .membership-details-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .membership-detail-card {
        padding: 1.25rem 1rem;
    }
    
    .detail-card-icon {
        width: 42px;
        height: 42px;
    }
    
    .detail-card-icon i {
        font-size: 1.1rem;
    }
    
    .membership-verify-footer {
        padding: 1.5rem;
        flex-direction: column;
        text-align: center;
    }
    
    .verify-footer-note {
        justify-content: center;
    }
    
    .membership-error-card {
        padding: 3rem 1.5rem;
    }
    
    .error-icon-wrapper {
        width: 100px;
        height: 100px;
        border-radius: 1.5rem;
    }
    
    .error-icon-wrapper::before {
        border-radius: 1.75rem;
    }
    
    .error-icon-wrapper i {
        font-size: 2.5rem;
    }
    
    .error-title-text {
        font-size: 1.4rem;
    }
}

@media (max-width: 480px) {
    .membership-details-grid {
        grid-template-columns: 1fr;
    }
    
    .membership-detail-card {
        display: flex;
        align-items: center;
        gap: 1rem;
        text-align: right;
        padding: 1rem 1.25rem;
    }
    
    .detail-card-icon {
        margin: 0;
        flex-shrink: 0;
    }
    
    .membership-detail-card .detail-card-content {
        flex: 1;
    }
}