:root{
  
  --color-primary: #0B93A6;         
  --color-primary-dark: #086E7D;    
  --color-primary-light: #4CC6D6;   
  --color-secondary: #5A5FDA;       
  --color-accent: #6C5FDE;         

  --color-primary-tint: #E3F5F7;
  --color-secondary-tint: #ECEDFB;

  --color-bg-dark: #071b2f;         
  --color-bg-dark-2: #0F1C3F;
  --color-bg-dark-3: #071b2f;
  --color-white: #FFFFFF;
  --color-surface: #FAFBFF;

  /* ---- Text ---- */
  --color-text: #0F1C3F;
  --color-muted: #64748B;
  --color-muted-light: #A9B4C9;

  --color-border: #E2E8F0;
  --color-border-dark: rgba(255,255,255,.12);

  
  --color-success: #16A34A;
  --color-warning: #D97706;
  --color-error: #DC2626;

  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --container-w: 1200px;
  --shadow-card: 0 10px 30px rgba(10,19,48,.08);
  font-size: 16px;


}

*,*::before,*::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.7;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:100dvh;
}


main{ display:flex; flex-direction:column; flex:1; }

img{ max-width:100%; display:block; }

a{ text-decoration:none; color:inherit; }

ul, ol{ list-style:none; margin:0; padding:0; }

h1,h2,h3,h4{ margin:0; font-weight:800; }

.container{
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}

.muted{ color: var(--color-muted); font-size:.95rem; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 13px 26px;
  border-radius: var(--radius-sm);
  font-weight:700;
  font-size:.95rem;
  border: 2px solid transparent;
  cursor:pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: var(--color-primary); color:#fff; }
.btn-primary:hover{ background: var(--color-primary-dark); }
.btn-white{ background:#fff; color: var(--color-primary-dark); }
.btn-white:hover{ background: var(--color-primary-tint); }
.btn-outline{ border-color: rgba(255,255,255,.5); color:#fff; background:transparent; }
.btn-outline:hover{ border-color:#fff; background: rgba(255,255,255,.08); }
.btn-outline-light{ border-color: rgba(255,255,255,.35); color:#fff; background:transparent; }
.btn-outline-light:hover{ background: rgba(255,255,255,.08); }
.btn-outline-dark{ border-color: var(--color-border); color: var(--color-text); background:#fff; white-space:nowrap; }
.btn-outline-dark:hover{ border-color: var(--color-primary); color: var(--color-primary); }
.btn-sm{ padding: 9px 18px; font-size:.85rem; }
.btn-block{ width:100%; }
.btn-block-panel{ display:flex; width:100%; margin-top:28px; }

/* ---------- Placeholder images ---------- */
.placeholder-img{
  position:relative;
  background: repeating-linear-gradient(135deg, #0F1C3F, #0F1C3F 10px, #182552 10px, #182552 20px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.placeholder-img::before{
  content: attr(data-label);
  display:block;
  width:100%;
  padding:6px 10px;
  font-size:.7rem;
  color: rgba(255,255,255,.75);
  background: rgba(0,0,0,.35);
  text-align:center;
}

/* 
   HEADER
   */
.site-header{
  position: sticky;
  top:0;
  z-index: 100;
  background: var(--color-bg-dark);
  border-bottom: 1px solid var(--color-border-dark);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  height:76px;
}
.logo{ display:flex; align-items:center; gap:10px; }
.logo-text{ display:flex; flex-direction:column; line-height:1.15; }
.logo-text strong{ color:#fff; font-size:1.05rem; letter-spacing:.5px; }
.logo-text small{ color: var(--color-muted-light); font-size:.55rem; letter-spacing:.5px; }

.main-nav ul{ display:flex; align-items:center; gap:28px; }
.main-nav a{
  color: var(--color-muted-light);
  font-size:.95rem;
  font-weight:500;
  padding:6px 2px;
  border-bottom:2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.main-nav a:hover,
.main-nav a.active{ color:#fff; border-color: var(--color-primary); }

.header-actions{ display:flex; align-items:center; gap:16px; }

.lang-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--color-border-dark);
  background:transparent;
  color: var(--color-muted-light);
  font-family:inherit;
  font-size:.8rem;
  font-weight:700;
  cursor:pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.lang-toggle:hover{ color:#fff; border-color: var(--color-primary); background: rgba(255,255,255,.06); }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:34px; height:34px;
  background:transparent;
  border:1px solid var(--color-border-dark);
  border-radius:8px;
  cursor:pointer;
}
.nav-toggle span{ display:block; height:2px; width:18px; margin:0 auto; background:#fff; }

/*
   HERO
    */
.hero{
  position:relative;
  background: linear-gradient(180deg, var(--color-bg-dark) 0%, #0c1638 100%);
  padding-top:72px;
  overflow:hidden;
}
.hero-bg{
  position:absolute;
  inset:0;
  background-image:
  radial-gradient(circle at 12% 30%, rgba(90,95,218,.18), transparent 45%);
  background-size: cover, 220px 220px, 260px 260px, 190px 190px, 240px 240px, 210px 210px;
}
.hero-inner{ position:relative; padding-top: 90px; padding-bottom: 60px; }
.hero-content{ max-width: 640px; }
.hero-content h1{ color:#fff; font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom:20px; }
.hero-content .accent{ color: var(--color-primary-light); }
.hero-content p{ color: var(--color-muted-light); font-size:1.05rem; margin-bottom:32px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

.stats-bar{
  position:relative;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:16px;
  margin-top: 48px;
  padding-bottom: 48px;
}
.stat-card{
  background: var(--color-bg-dark-2);
  border:1px solid var(--color-border-dark);
  border-radius: var(--radius-md);
  padding: 22px 12px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.stat-num{ color:#fff; font-size:1.5rem; font-weight:800; }
.stat-label{ color: var(--color-muted-light); font-size:.85rem; }

/* 
   SECTIONS 
   */
.section{ padding: 110px 0 80px; }
.section-dark{ background: var(--color-bg-dark); }
.section-dark + .section-dark{ padding-top: 80px; }

.section-title{
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 40px;
}
.section-dark .section-title{ color:#fff; }
.section-title.center{ text-align:center; }

.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:32px;
}
.section-head .section-title{ margin-bottom:0; }

.link-more{
  color: var(--color-primary);
  font-weight:700;
  font-size:.9rem;
}
.link-more:hover{ text-decoration:underline; }
.link-more.sm{ font-size:.85rem; }

/* 
   ABOUT
    */
.about-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
}
.about-card{
  border:1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-card);
}
.about-card h3{ margin-bottom:16px; font-size:1.15rem; }
.about-card ul li{
  position:relative;
  padding-inline-start: 18px;
  margin-bottom:10px;
  font-size:.92rem;
  color: var(--color-muted);
}
.about-card ul li::before{
  content:'';
  position:absolute;
  inset-inline-start:0;
  top:9px;
  width:5px; height:5px;
  border-radius:50%;
  background: var(--color-primary);
}
.about-card p{ color: var(--color-muted); font-size:.95rem; }

/* 
   EVENTS
   */
.events-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
}
.event-card{
  background: var(--color-bg-dark-2);
  border:1px solid var(--color-border-dark);
  border-radius: var(--radius-lg);
  overflow:hidden;
}
.event-media{ height:170px; }
.event-body{ padding:20px; color:#fff; }
.event-body h3{ font-size:1.05rem; margin-bottom:4px; }
.event-body .muted{ color: var(--color-muted-light); margin-bottom:14px; }
.event-meta{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.event-meta li{ font-size:.85rem; color: var(--color-muted-light); }
.event-footer{ display:flex; align-items:center; gap:12px; }
.event-footer .capacity{ font-size:.8rem; color: var(--color-muted-light); white-space:nowrap; }

.badge{
  display:inline-block;
  padding:5px 12px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
  color:#fff;
}

.event-media .badge,
.news-media .badge,
.event-gallery-main .badge{
  position:absolute;
  top:12px; inset-inline-start:12px;
}
.badge-green{ background: rgba(22,163,74,.92); }
.badge-amber{ background: rgba(217,119,6,.92); }
.badge-blue{ background: var(--color-primary); }
.badge-purple{ background: var(--color-accent); }

/*
   NEWS
   */
.news-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
}
.news-card{
  background: var(--color-bg-dark-2);
  border:1px solid var(--color-border-dark);
  border-radius: var(--radius-lg);
  overflow:hidden;
}
.news-media{ height:150px; }
.news-body{ padding:18px; color:#fff; }
.news-body h3{ font-size:1rem; margin-bottom:8px; }
.news-body p{ margin-bottom:16px; }
.news-footer{ display:flex; align-items:center; justify-content:space-between; }
.news-footer .date{ font-size:.8rem; color: var(--color-muted-light); }

/*
   WHY JOIN
    */
.why-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
}
.why-card{
  background:#fff;
  color: var(--color-text);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align:center;
  box-shadow: var(--shadow-card);
}
.why-icon{ font-size:1.8rem; display:block; margin-bottom:14px; }
.why-card h3{ font-size:1.1rem; margin-bottom:10px; }
.why-card p{ color: var(--color-muted); font-size:.9rem; }

/* 
   PARTNERS
    */
.partners-banner{
  background: var(--color-primary);
  padding: 20px 0;
  text-align:center;
}
.partners-banner h2{ color:#fff; font-size:1.25rem; }
.partners{ padding-top:40px; padding-bottom:100px; }
.partners-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:20px;
}
.partner-logo{
  height:100px;
  border:1px dashed var(--color-border-dark);
  border-radius: var(--radius-md);
  background:transparent;
}
.partner-logo::before{ background:transparent; color: var(--color-muted-light); }

/* 
   GALLERY
   */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px;
}
.gallery-item{
  height:180px;
  border-radius: var(--radius-md);
  margin:0;
}
.gallery-item figcaption{
  position:relative;
  z-index:1;
  color:#fff;
  font-weight:700;
  font-size:.9rem;
  padding:14px;
}

/* 
   MEMBERSHIP STEPS
   */
.steps-panel{
  background:#fff;
  color: var(--color-text);
  border-radius: var(--radius-lg);
  overflow:hidden;
  margin: 20px 0 100px;
}
.steps-banner{
  background: var(--color-bg-dark-2);
  color:#fff;
  text-align:center;
  padding:18px;
  font-weight:700;
}
.steps-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:20px;
  padding: 32px;
}
.step-card{
  border:1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px 16px;
  text-align:center;
}
.step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px; height:28px;
  border-radius:50%;
  background: var(--color-primary);
  color:#fff;
  font-weight:700;
  font-size:.85rem;
  margin-bottom:12px;
}
.step-card p{ font-size:.9rem; font-weight:500; }
.btn-block-panel{ margin: 0 32px 32px; width:calc(100% - 64px); }
.event-register-bar.btn-outline-primary{
  background: #fff;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  padding: 14px 20px;
  font-size: .95rem;
  margin-inline: 16px;           
  width: calc(100% - 32px);     
}
.event-register-bar.btn-outline-primary:hover{
  background: var(--color-primary-tint);
}
/* 
   TESTIMONIALS
    */
.testimonials-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
}
.testimonial-card{
  border:1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align:center;
  box-shadow: var(--shadow-card);
}
.avatar{
  width:64px; height:64px;
  border-radius:50%;
  margin: 0 auto 16px;
}
.avatar::before{ display:none; }
.quote{ font-size:.95rem; color: var(--color-muted); margin-bottom:16px; }
.testimonial-card h4{ font-size:1rem; margin-bottom:4px; }

/* 
   AUTH PAGES (login / register / forgot password)
    */
.auth-section{
  background: linear-gradient(180deg, var(--color-bg-dark) 0%, #0c1638 100%);
  padding: 64px 0 80px;
  min-height: calc(100vh - 76px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.auth-section .container{ width:100%; }
.auth-heading{ text-align:center; margin-bottom:32px; }
.auth-heading h1{ color:#fff; font-size:1.85rem; margin-bottom:10px; }
.auth-heading p{ color: var(--color-muted-light); font-size:.95rem; }

.auth-card{
  background:#fff;
  border-radius: var(--radius-lg);
  padding: 48px 56px;
  max-width: 620px;
  width:100%;
  margin: 0 auto;
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
.auth-card .form-field input{ padding: 14px 16px; font-size:1rem; }
.form-field{ margin-bottom: 20px; }
.form-field label{
  display:block;
  font-size:.9rem;
  font-weight:700;
  margin-bottom:8px;
  color: var(--color-text);
}
.form-field .req{ color: var(--color-error); }
.form-field input{
  width:100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border:1px solid var(--color-border);
  font-family: inherit;
  font-size:.95rem;
  color: var(--color-text);
}
.form-field input:focus{ outline:2px solid var(--color-primary); outline-offset:1px; }
.form-field input::placeholder{ color:#A3ABB8; }

.form-row-between{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:24px;
  font-size:.88rem;
}
.checkbox{ display:flex; align-items:center; gap:8px; color: var(--color-muted); cursor:pointer; }
.checkbox input{ width:16px; height:16px; accent-color: var(--color-primary); }
.link-inline{ color: var(--color-primary); font-weight:600; }
.link-inline:hover{ text-decoration:underline; }

.auth-switch{
  text-align:center;
  margin-top:24px;
  color: var(--color-muted-light);
  font-size:.9rem;
}
.auth-switch a{ color: var(--color-primary); font-weight:700; }
.auth-switch a:hover{ text-decoration:underline; }

@media (max-width: 640px){
  .auth-card{ padding: 28px 22px; }
}

/* 
   MEMBER PORTAL
    */
.btn-portal-active{ background:#E7EBF2; color: var(--color-text); }
.btn-portal-active:hover{ background:#dbe0ea; }

.portal-main{
  background: var(--color-bg-dark);
  padding: 48px 0 80px;
}
.portal-layout{
  display:grid;
  grid-template-columns: 300px 1fr;
  background:#fff;
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: 0 25px 60px rgba(0,0,0,.35);
  align-items:stretch;
}
.portal-sidebar{
  background: var(--color-bg-dark-2);
  color:#fff;
  padding: 40px 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.portal-avatar{
  width:96px; height:96px;
  border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #D6D8F6, #A6AAEA);
  margin-bottom:18px;
  position:relative;
}
.profile-card-avatar{
  width:76px; height:76px;
  border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #D6D8F6, #A6AAEA);
  flex-shrink:0;
  position:relative;
}
.avatar-circle,
.portal-avatar,
.profile-card-avatar{ position:relative; }
.avatar-circle::after,
.portal-avatar::after,
.profile-card-avatar::after{
  content:'';
  position:absolute;
  inset:26%;
  background-color: rgba(255,255,255,.9);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
}
.portal-sidebar h2{ font-size:1.15rem; margin-bottom:4px; }
.portal-sidebar .email{ font-size:.85rem; color: var(--color-muted-light); margin-bottom:32px; word-break:break-all; }

.portal-nav{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:auto;
}
.portal-nav a{
  display:block;
  width:100%;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  color: var(--color-muted-light);
  font-weight:500;
  font-size:.95rem;
  text-align:center;
}
.portal-nav a:hover{ background: rgba(255,255,255,.06); color:#fff; }
.portal-nav a.active{ background: var(--color-primary); color:#fff; font-weight:700; }

.portal-logout{
  margin-top:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#fff;
  font-weight:600;
  font-size:.95rem;
}
.portal-logout:hover{ color: var(--color-muted-light); }

.portal-content{ padding: 48px; }
.portal-content h1{ font-size:1.7rem; margin-bottom:8px; }
.portal-content > .portal-subtitle{ color: var(--color-muted); font-size:.95rem; margin-bottom:32px; }

.portal-card{
  border:1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 28px;
  margin-bottom:24px;
  background: var(--color-surface);
}
.portal-card h3{ font-size:1.1rem; margin-bottom:18px; }

.profile-info-card{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.profile-info-card .info-body{ text-align:right; flex:1; min-width:220px; }
.profile-info-card .info-body p{ margin:0 0 10px; font-size:.92rem; color: var(--color-text); }
.profile-info-card .info-body p:last-child{ margin-bottom:0; }
.profile-info-card .info-body .label{ color: var(--color-muted); }

.info-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding: 10px 0;
  font-size:.92rem;
}
.info-row .label{ color: var(--color-muted); }
.info-row .value{ font-weight:600; color: var(--color-text); }
.info-row + .info-row{ border-top:1px solid var(--color-border); }

.lang-select{
  font-family: inherit;
  font-size:.9rem;
  font-weight:600;
  color: var(--color-text);
  border:1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  background:#fff;
}

.membership-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.membership-card .brand{ font-size:1.5rem; font-weight:800; }
.membership-card .body{ flex:1; min-width:220px; }
.membership-card h4{ font-size:1.1rem; margin-bottom:8px; }
.membership-card p{ color: var(--color-muted); font-size:.9rem; margin-bottom:14px; }

.membership-cta{
  background: var(--color-secondary-tint);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  text-align:center;
}
.membership-cta h4{ font-size:1.1rem; margin-bottom:8px; }
.membership-cta p{ color: var(--color-muted); font-size:.9rem; margin-bottom:16px; }

.notif-tabs{ display:flex; gap:10px; margin-bottom:28px; font-size:.9rem; }
.notif-tabs button{
  background:none; border:none; cursor:pointer;
  font-family:inherit; font-size:inherit;
  color: var(--color-muted); padding:4px 0;
  border-bottom:2px solid transparent;
}
.notif-tabs button.active{ color: var(--color-text); font-weight:700; border-color: var(--color-primary); }
.notif-tabs .divider{ color: var(--color-border); }

.notif-item{
  border:1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  margin-bottom:16px;
  font-weight:600;
  font-size:.95rem;
}
.notif-item.unread{ background: var(--color-secondary-tint); border-color:#DBDDF6; }

.cert-card{
  border:1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  margin-bottom:20px;
}
.cert-card h3{ margin-bottom:8px; }
.cert-card .date{ color: var(--color-muted); font-size:.88rem; margin-bottom:12px; }
.cert-card .dl-link{ color: var(--color-primary); font-weight:700; font-size:.9rem; }
.cert-card .dl-link:hover{ text-decoration:underline; }
.cert-card .pending-link{ color: var(--color-muted); font-weight:700; font-size:.9rem; }

.settings-action{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 0;
  font-size:.92rem;
  font-weight:600;
  color: var(--color-text);
}
.settings-action:hover{ color: var(--color-primary); }

.toggle-switch{
  position:relative;
  display:inline-block;
  width:42px; height:24px;
  flex-shrink:0;
}
.toggle-switch input{ opacity:0; width:0; height:0; }
.toggle-switch .slider{
  position:absolute; inset:0;
  background:#CBD5E1;
  border-radius:999px;
  transition:.2s;
  cursor:pointer;
}
.toggle-switch .slider::before{
  content:'';
  position:absolute;
  width:18px; height:18px;
  left:3px; top:3px;
  background:#fff;
  border-radius:50%;
  transition:.2s;
}
.toggle-switch input:checked + .slider{ background: var(--color-primary); }
.toggle-switch input:checked + .slider::before{ transform: translateX(18px); }

@media (max-width: 900px){
  .portal-layout{ grid-template-columns: 1fr; }
  .portal-sidebar{ padding: 32px 24px; }
  .portal-nav{ flex-direction:row; flex-wrap:wrap; justify-content:center; }
  .portal-nav a{ width:auto; }
}
@media (max-width: 640px){
  .portal-content{ padding: 28px 20px; }
  .portal-card{ padding: 20px; }
  .membership-card{ flex-direction:column; align-items:flex-start; }
  .info-row{ flex-direction:column; gap:2px; }
}

/* 
   EVENTS & TICKETS 
   */
.page-hero{
  background: linear-gradient(180deg, var(--color-bg-dark) 0%, #0c1638 100%);
  padding: 56px 0 64px;
  flex: 1;
}
.page-hero .breadcrumb{
  color: var(--color-muted-light);
  font-size:.9rem;
  margin-bottom:10px;
}
.page-hero .breadcrumb a:hover{ color:#fff; text-decoration:underline; }
.page-hero h1{ color:#fff; font-size:1.9rem; margin-bottom:10px; }
.page-hero p{ color: var(--color-muted-light); }
.page-hero .section-title{ color:#fff; font-size:1.3rem; margin:40px 0 24px; }

/* ---- Events listing ---- */
.events-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  background: var(--color-bg-dark-2);
  border:1px solid var(--color-border-dark);
  border-radius: var(--radius-md);
  padding: 18px 24px;
  margin-top:32px;
}
.events-toolbar input{
  flex:1;
  min-width:200px;
  background:transparent;
  border:none;
  color:#fff;
  font-family:inherit;
  font-size:.95rem;
}
.events-toolbar input::placeholder{ color: var(--color-muted-light); }
.events-toolbar .toolbar-tabs{ display:flex; gap:18px; font-size:.9rem; color: var(--color-muted-light); white-space:nowrap; }
.events-toolbar .toolbar-tabs a.active,
.events-toolbar .toolbar-tabs button.active{ color:#fff; font-weight:700; }
.events-toolbar .toolbar-tabs button{ background:none; border:none; font:inherit; cursor:pointer; color:inherit; padding:0; }

.events-list{ margin-top:24px; display:flex; flex-direction:column; gap:20px; }
.event-list-card{
  border:1px solid var(--color-border-dark);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  color:#fff;
  text-align:right;
}
.event-list-card h3{ font-size:1.2rem; margin-bottom:14px; }
.event-list-card .meta{ color: var(--color-muted-light); font-size:.9rem; margin-bottom:14px; }
.event-list-card .meta span + span::before{ content:'•'; margin:0 8px; }
.event-list-card .row{ display:flex; align-items:center; justify-content:flex-end; gap:16px; font-size:.9rem; }
.event-list-card .status{ color: var(--color-muted-light); }
.event-list-card .status.limited{ color: var(--color-warning); }
.event-list-card a.details-link{ color: var(--color-primary); font-weight:700; }
.event-list-card a.details-link:hover{ text-decoration:underline; }

.empty-state{
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-lg);
  padding: 64px 40px;
  text-align:center;
  margin-top:24px;
}
.empty-state h2{ font-size:1.4rem; margin-bottom:14px; }
.empty-state p{ color: var(--color-muted); }

/* ---- Event detail ---- */
.event-detail-top{
  display:flex;
  gap:40px;
  flex-wrap:wrap;
  margin-bottom:32px;
}
.event-detail-top .info{ flex:1; min-width:260px; color:#fff; }
.event-detail-top .info h2{ font-size:1.7rem; margin-bottom:20px; }
.event-meta-list{ display:flex; flex-direction:column; gap:16px; list-style:none; padding:0; margin:0; }
.event-meta-list li{ display:flex; align-items:center; gap:10px; color: var(--color-muted-light); font-size:.95rem; }

.event-detail-media{ flex:1.3; min-width:320px; }
.event-gallery-main{
  height:280px;
  border-radius: var(--radius-md);
  position:relative;
}
.event-gallery-thumbs{ display:flex; gap:12px; margin-top:14px; }
.event-gallery-thumb{
  width:70px; height:70px;
  border:2px solid var(--color-primary);
  border-radius: var(--radius-sm);
}

.event-detail-desc{
  text-align:center;
  color: var(--color-muted-light);
  max-width:800px;
  margin: 0 auto 32px;
  padding-bottom:32px;
  border-bottom:1px solid var(--color-border-dark);
}
.event-detail-info-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:32px;
  text-align:center;
  margin-bottom:40px;
}
.event-detail-info-grid > div{ border-inline-start:1px solid var(--color-border-dark); padding-inline-start:32px; }
.event-detail-info-grid > div:first-child{ border-inline-start:none; padding-inline-start:0; }
.event-detail-info-grid h4{ color:#fff; font-size:1.05rem; margin-bottom:10px; }
.event-detail-info-grid p{ color: var(--color-muted-light); font-size:.9rem; }

.event-register-bar{
  display:block;
  background: var(--color-primary);
  color:#fff;
  text-align:center;
  padding:20px;
  border-radius: var(--radius-md);
  font-weight:700;
  font-size:1.05rem;
}
.event-register-bar:hover{ background: var(--color-primary-dark); }

/* ---- Booking / payment / ticket cards ---- */
.flow-card{
  background:#fff;
  border-radius: var(--radius-lg);
  padding: 40px;
  max-width: 560px;
  margin: 32px auto 0;
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
.flow-card h3{ font-size:1.2rem; margin-bottom:20px; }
.flow-card .attendee-info p{ font-size:.92rem; margin:0 0 6px; color: var(--color-text); }
.flow-card .attendee-info .label{ color: var(--color-muted); }

.qty-field{ margin: 24px 0; }
.qty-field > label{ display:block; font-weight:700; font-size:.95rem; margin-bottom:12px; }
.qty-stepper{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  background: var(--color-primary-tint);
  border-radius: var(--radius-sm);
  padding:16px;
}
.qty-stepper button{
  width:32px; height:32px;
  border-radius:50%;
  border:none;
  background:#fff;
  color: var(--color-primary);
  font-size:1.2rem;
  font-weight:700;
  cursor:pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.qty-stepper .qty-value{ font-size:1.3rem; font-weight:800; color: var(--color-primary); min-width:24px; text-align:center; }
.qty-help{ color: var(--color-muted); font-size:.85rem; text-align:center; margin-bottom:24px; }

.order-summary h3{ margin-bottom:18px; }
.order-summary .event-name{ font-weight:700; margin-bottom:4px; }
.order-summary .line{ color: var(--color-muted); font-size:.92rem; margin-bottom:20px; }
.order-summary .total{ font-size:1.3rem; font-weight:800; color: var(--color-primary); margin-bottom:20px; }
.order-summary .pay-label{ font-weight:700; font-size:.92rem; margin-bottom:4px; }
.order-summary .pay-method{ color: var(--color-muted); font-size:.9rem; margin-bottom:16px; }
.order-summary .pay-note{ color: var(--color-muted); font-size:.85rem; margin-bottom:20px; }

.result-state{ text-align:center; padding: 20px 0; }
.result-state .icon{
  width:64px; height:64px;
  border-radius:50%;
  border:2px solid var(--color-success);
  color: var(--color-success);
  font-size:1.6rem;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px;
}
.result-state.error .icon{ border-color: var(--color-error); color: var(--color-error); }
.result-state h3{ font-size:1.2rem; margin-bottom:10px; }
.result-state p{ color: var(--color-muted); font-size:.92rem; margin-bottom:24px; }

/* ---- Ticket ---- */
.ticket-panel{
  background:#fff;
  border-radius: var(--radius-lg);
  padding: 40px;
  max-width: 820px;
  margin: 32px auto 0;
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
  text-align:center;
}
.ticket-panel .icon{
  width:64px; height:64px;
  border-radius:50%;
  border:2px solid var(--color-success);
  color: var(--color-success);
  font-size:1.6rem;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px;
}
.ticket-panel h2{ font-size:1.3rem; margin-bottom:8px; }
.ticket-panel > p{ color: var(--color-muted); font-size:.92rem; margin-bottom:28px; }

.ticket-grid{
  display:grid;
  grid-template-columns: 1fr 260px;
  gap:20px;
  text-align:right;
  margin-bottom:16px;
}
.ticket-event-card{
  border:1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:24px;
}
.ticket-event-card h4{ font-size:1.05rem; margin-bottom:16px; }
.ticket-event-card .event-meta-list li{ color: var(--color-muted); }

.ticket-qr-card{
  border:1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.ticket-qr{
  width:160px; height:160px;
  background-image: repeating-linear-gradient(45deg,#0F1C3F 0 6px, #fff 6px 12px),
                     repeating-linear-gradient(-45deg,#0F1C3F 0 6px, transparent 6px 12px);
  background-blend-mode:multiply;
  border:1px solid var(--color-border);
}
.ticket-panel .reg-number{ text-align:right; color: var(--color-muted); font-size:.88rem; margin-bottom:16px; }
.ticket-panel .note{ font-size:.85rem; color: var(--color-muted); margin-top:20px; }

.ticket-panel.used .icon{ border-color: var(--color-muted); color: var(--color-muted); }
.ticket-panel.used .ticket-qr{ opacity:.25; }
.ticket-panel.used .btn-primary{ background: var(--color-muted); pointer-events:none; }

@media (max-width: 900px){
  .ticket-grid{ grid-template-columns: 1fr; }
  .event-detail-info-grid{ grid-template-columns: 1fr; }
  .event-detail-info-grid > div{ border-inline-start:none; padding-inline-start:0; border-top:1px solid var(--color-border-dark); padding-top:24px; }
  .event-detail-info-grid > div:first-child{ border-top:none; padding-top:0; }
}
@media (max-width: 640px){
  .flow-card, .ticket-panel{ padding:24px; }
  .events-toolbar{ flex-direction:column; align-items:stretch; }
  .events-toolbar .toolbar-tabs{ justify-content:center; }
  .event-list-card{ padding:20px; }
}

/* 
   news, magazine, gallery, achievements
    */
.badge-outline{ background:transparent; border:1px solid var(--color-text); color:var(--color-text); }

/* ---- News listing ---- */
.content-hero-banner{
  position:relative;
  border-radius: var(--radius-lg);
  overflow:hidden;
  min-height:320px;
  margin-top:40px;
  display:flex;
  align-items:flex-end;
}
.content-hero-banner::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(10,19,48,.92) 30%, rgba(10,19,48,.55) 100%);
}
.content-hero-content{
  position:relative;
  z-index:1;
  padding:40px 48px;
  color:#fff;
  width:100%;
}
.content-hero-content h1{ font-size:2rem; margin-bottom:12px; }
.content-hero-content p{ color: var(--color-muted-light); margin-bottom:14px; }
.content-hero-content .breadcrumb{ color: var(--color-muted-light); font-size:.9rem; margin:0; }
.content-hero-content .breadcrumb a:hover{ color:#fff; }

.news-filters{ display:flex; gap:16px; flex-wrap:wrap; margin:32px 0; }
.news-filters .search-field{
  flex:1; min-width:220px;
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:12px 18px;
}
.news-filters .search-field input{ border:none; outline:none; flex:1; font-family:inherit; font-size:.95rem; }
.news-filters select{
  border:1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:12px 18px;
  font-family:inherit;
  font-size:.95rem;
  color: var(--color-text);
  background:#fff;
}
.news-filters .icon-btn{
  border:1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:12px 16px;
  background:#fff;
  cursor:pointer;
}

.news-grid-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.news-list-card{
  display:flex;
  flex-direction:row-reverse;
  border:1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow:hidden;
}
.news-list-card .body{ flex:1; padding:22px; text-align:right; min-width:0; }
.news-list-card .body h3{ font-size:1.05rem; margin:12px 0 10px; }
.news-list-card .body p{ color: var(--color-muted); font-size:.88rem; margin-bottom:14px; }
.news-list-card .body .read-time{ color: var(--color-muted); font-size:.82rem; }
.news-list-card .media{ width:180px; flex-shrink:0; }

.pagination{ display:flex; gap:8px; justify-content:center; margin:40px 0 64px; }
.pagination button{
  min-width:40px; height:40px;
  border:1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background:#fff;
  font-family:inherit;
  font-weight:600;
  cursor:pointer;
}
.pagination button.active{ background: var(--color-primary); color:#fff; border-color: var(--color-primary); }

/* ---- News detail ---- */
.news-detail-badge{ margin-bottom:16px; display:inline-block; }
.news-detail-columns{ display:flex; gap:32px; flex-wrap:wrap; margin-top:32px; margin-bottom:32px; }
.news-detail-main{ flex:2; min-width:320px; }
.news-detail-sidebar{ flex:1; min-width:260px; display:flex; flex-direction:column; gap:20px; }
.news-detail-media{ height:300px; border-radius: var(--radius-md); }

.info-card-white{
  background:#fff;
  border-radius: var(--radius-md);
  padding:24px;
}
.info-card-white h3{ font-size:1.05rem; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--color-border); }
.info-card-white .info-item{ display:flex; align-items:center; justify-content:flex-start; gap:10px; padding:10px; color: var(--color-text); font-size:.92rem; }
.share-icons{ display:flex; gap:14px; }
.share-icons a{
  width:40px; height:40px;
  border:1px solid var(--color-border);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
}

.news-detail-body{ color: var(--color-muted-light); line-height:1.9; margin-bottom:32px; padding-bottom:32px; border-bottom:1px solid var(--color-border-dark); }

.related-news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.related-news-card{ display:flex; border:1px solid var(--color-border-dark); border-radius: var(--radius-md); overflow:hidden; color:#fff; }
.related-news-card .body{ flex:1; padding:16px; text-align:right; }
.related-news-card .body .date{ color: var(--color-muted-light); font-size:.82rem; margin:8px 0; display:block; }
.related-news-card .body h4{ font-size:.92rem; }
.related-news-card .media{ width:100px; flex-shrink:0; }

/* ---- Magazine ---- */
.magazine-feature{
  background: var(--color-primary);
  border-radius: var(--radius-lg);
  padding:40px 48px;
  color:#fff;
  margin:32px 0 48px;
}
.magazine-feature h2{ font-size:1.5rem; margin-bottom:14px; }
.magazine-feature p{ margin-bottom:18px; opacity:.9; }
.magazine-feature .links a{ color:#fff; font-weight:700; margin-inline-end:24px; }
.magazine-feature .links a:hover{ text-decoration:underline; }

.magazine-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:48px; }
.magazine-card{
  background: var(--color-bg-dark-2);
  border:1px solid var(--color-border-dark);
  border-radius: var(--radius-md);
  padding:28px;
  color:#fff;
  text-align:center;
}
.magazine-card h3{ font-size:1.15rem; margin-bottom:14px; }
.magazine-card p{ color: var(--color-muted-light); font-size:.9rem; margin-bottom:14px; }
.magazine-card a{ color: var(--color-primary); font-weight:700; }
.magazine-card a:hover{ text-decoration:underline; }

/* ---- Gallery ---- */
.gallery-filter-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin:20px 0 32px; font-size:.95rem; }
.gallery-filter-tabs button{
  background:none; border:none; font:inherit; cursor:pointer;
  color: var(--color-muted-light); padding:4px 8px;
}
.gallery-filter-tabs button.active{ color:#fff; font-weight:700; }
.gallery-filter-tabs .divider{ color: var(--color-border-dark); }

.gallery-full-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.gallery-full-item{ background: var(--color-bg-dark-2); border-radius: var(--radius-md); overflow:hidden; }
.gallery-full-item .thumb{
  height:180px;
  background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
  margin:16px;
  border-radius: var(--radius-sm);
}
.gallery-full-item figcaption{ padding:0 16px 16px; font-weight:700; text-align:center; color:#fff; }

/* ---- Achievements ---- */
.achievements-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:32px 0 48px; }
.achievements-stats .stat{
  background: var(--color-bg-dark-2);
  border:1px solid var(--color-border-dark);
  border-radius: var(--radius-md);
  padding:28px 16px;
  text-align:center;
}
.achievements-stats .stat .num{ color: var(--color-primary); font-size:1.7rem; font-weight:800; display:block; margin-bottom:8px; }
.achievements-stats .stat:nth-child(even) .num{ color: var(--color-secondary); }
.achievements-stats .stat .label{ color: var(--color-muted-light); font-size:.9rem; }

.achievements-timeline{ display:flex; flex-direction:column; gap:20px; padding-bottom:48px; }
.achievement-item{
  border:1px solid var(--color-border-dark);
  border-radius: var(--radius-md);
  padding:24px 28px;
  text-align:right;
}
.achievement-item h3{ color:#fff; font-size:1.05rem; margin-bottom:10px; }
.achievement-item p{ color: var(--color-muted-light); font-size:.9rem; }

@media (max-width: 900px){
  .news-grid-list, .magazine-grid, .gallery-full-grid{ grid-template-columns:1fr; }
  .related-news-grid{ grid-template-columns:1fr; }
  .achievements-stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px){
  .content-hero-content{ padding:28px 24px; }
  .content-hero-content h1{ font-size:1.5rem; }
  .news-list-card{ flex-direction:column-reverse; }
  .news-list-card .media{ width:100%; height:160px; }
  .magazine-feature{ padding:28px; }
  .achievements-stats{ grid-template-columns:1fr 1fr; }
}

/* 
   ABOUT & TEAM
    */
.intro-banner{
  background: var(--color-bg-dark);
  border-inline-start: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 40px 48px;
  color:#fff;
  margin: 40px 0 56px;
}
.intro-banner h1{ font-size:1.9rem; margin-bottom:14px; }
.intro-banner p{ color: var(--color-muted-light); margin-bottom:6px; }
.intro-banner .breadcrumb{ font-size:.9rem; margin-top:14px; color: var(--color-muted-light); }
.intro-banner .breadcrumb a:hover{ color:#fff; }

.about-block{ text-align:center; max-width:820px; margin:0 auto 40px; }
.about-block h2{ margin-bottom:16px; }
.about-block p{ color: var(--color-muted); }

.section-heading{ margin-bottom:24px; }
.section-heading .sub{ color: var(--color-muted); font-size:.95rem; margin-top:6px; }

.accent-heading{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  margin-bottom:14px;
  font-size:1.1rem;

}
.accent-heading::before{ content:''; width:3px; height:20px; background: var(--color-primary); border-radius:2px; flex-shrink:0; }

.accent-card-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-bottom:48px;}
.accent-card{ border:1px solid var(--color-border); border-radius: var(--radius-md); padding:28px; text-align:right; }
.accent-card p{ color: var(--color-muted); font-size:.92rem; }

.numbers-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:48px; }
.numbers-grid .stat{ border:1px solid var(--color-border); border-radius: var(--radius-md); padding:28px 16px; text-align:center; }
.numbers-grid .num{ color: var(--color-primary); font-size:1.5rem; font-weight:800; display:block; margin-bottom:8px; }
.numbers-grid .stat:nth-child(even) .num{ color: var(--color-secondary); }
.numbers-grid .label{ color: var(--color-muted); font-size:.9rem; }

.values-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:48px; }
.value-card{ background: var(--color-secondary-tint); border-radius: var(--radius-md); padding:28px 16px; text-align:center; }
.value-card h4{ margin-bottom:10px; font-size:1.05rem; }
.value-card p{ color: var(--color-muted); font-size:.88rem; }

.join-cta-bar{
  background: var(--color-bg-dark);
  border-radius: var(--radius-md);
  padding:24px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap-reverse;
  color:#fff;
  margin-bottom:56px;
}
.join-cta-bar p{ font-size:1.05rem; font-weight:700; margin:0; }

.avatar-circle{
  width:76px; height:76px;
  border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #D6D8F6, #A6AAEA);
  margin:0 auto 16px;
}
.leadership-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:56px; }
.leader-card{ border:1px solid var(--color-border); border-radius: var(--radius-md); padding:28px; text-align:center; }
.leader-card h4{ font-size:1.05rem; margin-bottom:4px; }
.leader-card .role{ color: var(--color-muted); font-size:.9rem; }
.leader-card hr{ border:none; border-top:1px solid var(--color-border); margin:18px 0; }
.leader-card a{ color: var(--color-primary); font-weight:700; font-size:.9rem; }
.leader-card a:hover{ text-decoration:underline; }

.committees-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:56px; }

.dev-team-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; margin-bottom:56px; }
.dev-card{ background: var(--color-primary-tint); border-radius: var(--radius-md); padding:24px 16px; text-align:center; }
.dev-card .avatar-circle{ width:60px; height:60px; background: radial-gradient(circle at 35% 30%, #BEE7EC, #7DCBD6); }
.dev-card h4{ font-size:.95rem; margin-bottom:6px; }
.dev-card p{ color: var(--color-muted); font-size:.82rem; }
.dev-card a{ color: var(--color-primary); font-weight:700; font-size:.9rem; }
@media (max-width: 900px){
  .accent-card-grid, .values-grid, .leadership-grid, .committees-grid{ grid-template-columns:repeat(2,1fr); }
  .numbers-grid{ grid-template-columns:repeat(2,1fr); }
  .dev-team-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 640px){
  .intro-banner{ padding:28px 24px; }
  .accent-card-grid, .values-grid, .leadership-grid, .committees-grid, .numbers-grid{ grid-template-columns:1fr; }
  .dev-team-grid{ grid-template-columns:repeat(2,1fr); }
  .join-cta-bar{ flex-direction:column; align-items:stretch; text-align:center; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background: var(--color-bg-dark-3); color: var(--color-muted-light); }
.footer-top{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap:32px;
  padding: 60px 24px 40px;
}
.footer-brand p{ margin-top:16px; font-size:.9rem; }
.footer-col h4{ color:#fff; font-size:1rem; margin-bottom:18px; }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a{ font-size:.9rem; }
.footer-col a:hover{ color:#fff; }

.newsletter-form{ display:flex; gap:8px; margin-bottom:18px; }
.newsletter-form input{
  flex:1;
  min-width:0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border:1px solid var(--color-border-dark);
  background: rgba(255,255,255,.05);
  color:#fff;
  font-family: inherit;
}
.newsletter-form input::placeholder{ color: var(--color-muted-light); }

.social-icons{ display:flex; gap:12px; }
.social-icons a{
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--color-border-dark);
  border-radius:50%;
  font-size:.9rem;
}
.social-icons a:hover{ background: rgba(255,255,255,.08); }

.footer-bottom{
  border-top:1px solid var(--color-border-dark);
  padding: 18px 24px;
  text-align:center;
  font-size:.85rem;
}

/* =========================================================
   BACK TO TOP
   ========================================================= */
.back-to-top{
  position:fixed;
  bottom:24px;
  inset-inline-start:24px;
  width:44px; height:44px;
  border-radius:50%;
  border:none;
  background: var(--color-primary);
  color:#fff;
  font-size:1.1rem;
  cursor:pointer;
  box-shadow: 0 8px 20px rgba(11,147,166,.4);
  opacity:0;
  visibility:hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  z-index: 90;
}
.back-to-top.visible{ opacity:1; visibility:visible; transform:none; }

/* =========================================================
   RESPONSIVE — TABLET (<=1024px)
   ========================================================= */
@media (max-width: 1024px){
  .about-grid,
  .events-grid,
  .news-grid,
  .why-grid,
  .gallery-grid,
  .testimonials-grid{ grid-template-columns: repeat(2, 1fr); }

  .stats-bar{ grid-template-columns: repeat(3, 1fr); }
  .partners-grid{ grid-template-columns: repeat(2, 1fr); }
  .steps-grid{ grid-template-columns: repeat(2, 1fr); }

  .footer-top{ grid-template-columns: 1fr 1fr; }

  .main-nav{
    position:fixed;
    inset-inline-end:0;
    top:76px;
    width:280px;
    height:calc(100vh - 76px);
    background: var(--color-bg-dark);
    border-inline-start:1px solid var(--color-border-dark);
    padding:24px;
    transform: translateX(110%);
    transition: transform .25s ease;
  }
  [dir="rtl"] .main-nav{ transform: translateX(-110%); }
  .main-nav.open{ transform: translateX(0); }
  .main-nav ul{ flex-direction:column; align-items:flex-start; gap:8px; }
  .main-nav a{ display:block; width:100%; padding:12px 8px; }

  .nav-toggle{ display:flex; }
}

/* =========================================================
   RESPONSIVE — MOBILE (<=640px)
   ========================================================= */
@media (max-width: 640px){
  .section{ padding: 60px 0; }

  .about-grid,
  .events-grid,
  .news-grid,
  .why-grid,
  .gallery-grid,
  .testimonials-grid,
  .partners-grid,
  .steps-grid{ grid-template-columns: 1fr; }

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

  .footer-top{ grid-template-columns: repeat(2, 1fr); text-align:right; }
  .footer-brand, .footer-col.newsletter{ grid-column: 1 / -1; }
  .footer-brand{ text-align:center; }

  .footer-brand .logo{ justify-content:center; }
  .newsletter-form{ flex-direction:column; }
  .social-icons{ justify-content:center; }

  .header-actions .btn-sm{ display:none; }
  .lang-toggle span{ display:none; }
  .lang-toggle{ padding:8px; }
  .btn-block-panel{ margin: 0 20px 24px; width:calc(100% - 40px); }
  .steps-grid{ padding: 24px; }
}

/* =========================================================
   PAGE-SPECIFIC HOOKS (replace one-off inline styles so
   markup stays free of style="" attributes)
   ========================================================= */
.events-list-section{ padding-top:0; padding-bottom:80px; }
#qrCaption{ font-size:.85rem; color:var(--color-muted); text-align:center; }
.ticket-grid--actions{ grid-template-columns: 1fr 1fr; }
.demo-note{ text-align:center; margin-top:20px; }
.checkin-toggle-note{ margin-top:24px; }
#myEventsTabs{ margin-bottom:24px; }
.membership-section-title{ margin-bottom:16px; }

/* =========================================================
   ICONS — line/outline SVG icons (sprite defined once per
   page, referenced with <svg class="icon"><use ...></svg>),
   replacing the emoji placeholders used previously.
   ========================================================= */
.svg-icon{
  width:1em;
  height:1em;
  display:inline-block;
  vertical-align:-0.125em;
  flex-shrink:0;
}
.svg-icon-lg{ width:28px; height:28px; flex-shrink:0; }

.event-meta li{ display:flex; align-items:center; gap:8px; }

.event-share-btn{
  position:absolute;
  top:12px; inset-inline-end:12px;
  width:30px; height:30px;
  border:none;
  border-radius:50%;
  background: rgba(7,27,47,.55);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: background .2s ease;
}
.event-share-btn:hover{ background: rgba(7,27,47,.8); }
.event-share-btn .svg-icon{ width:15px; height:15px; }

/* =========================================================
   MOTION — subtle entrance animation for the hero and a
   count-up effect for stat numbers. Both are skipped entirely
   for users who asked the OS for reduced motion.
   ========================================================= */
@keyframes fadeSlideUp{
  from{ opacity:0; transform: translateY(16px); }
  to{ opacity:1; transform: translateY(0); }
}
.hero-content,
.hero-actions{
  animation: fadeSlideUp 1.2s ease both;
}
.hero-actions{ animation-delay: .2s; }
.stats-bar .stat-card{
  animation: fadeSlideUp 1.0s ease both;
}
.stats-bar .stat-card:nth-child(1){ animation-delay:.05; }
.stats-bar .stat-card:nth-child(2){ animation-delay:.15s; }
.stats-bar .stat-card:nth-child(3){ animation-delay:.25s; }
.stats-bar .stat-card:nth-child(4){ animation-delay:.35s; }
.stats-bar .stat-card:nth-child(5){ animation-delay:.45s; }

@media (prefers-reduced-motion: reduce){
  .hero-content,
  .hero-actions,
  .stats-bar .stat-card{
    animation:none;
  }
}

/* =========================================================
   MODAL — generic reusable popup (backdrop + box + close),
   opened via [data-modal-open="<id>"], matching the site's
   card styling (radius, shadow, colors).
   ========================================================= */
.modal-overlay{
  position:fixed;
  inset:0;
  background: rgba(7,27,47,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:300;
}
.modal-overlay[hidden]{ display:none; }
.modal-box{
  position:relative;
  background:#fff;
  border-radius: var(--radius-lg);
  padding:40px;
  max-width:480px;
  width:100%;
  max-height:85vh;
  overflow-y:auto;
  box-shadow: 0 25px 60px rgba(0,0,0,.35);
  animation: fadeSlideUp .25s ease both;
}
.modal-box h3{ font-size:1.2rem; margin-bottom:14px; padding-inline-end:32px; }
.modal-box p{ color: var(--color-muted); font-size:.92rem; line-height:1.8; margin-bottom:14px; }
.modal-box p:last-of-type{ margin-bottom:24px; }
.modal-close{
  position:absolute;
  top:16px;
  inset-inline-end:16px;
  width:32px; height:32px;
  border:none;
  border-radius:50%;
  background: var(--color-surface);
  color: var(--color-text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: background .2s ease;
}
.modal-close:hover{ background: var(--color-border); }
@media (prefers-reduced-motion: reduce){
  .modal-box{ animation:none; }
}
/* ---- سطر معلومات داخل غلاف الصفحة (تاريخ / وقت القراءة / القسم) ---- */
.content-hero-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  gap:20px;
  margin-top:14px;
  color: var(--color-muted-light);
  font-size:.9rem;
}
.content-hero-meta span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
@media (max-width: 640px){
  .content-hero-meta{ gap:12px; font-size:.85rem; }
}

.info-card-white .info-item.info-item-inline{
  justify-content: flex-start;
  gap: 10px;
}