/* =========================================================
   ASTI Courses Page — Final Merged Styles
   Scoped to #coursesPage and #courseModal
========================================================= */

:root{
  --courses-green:#0a2b21;
  --courses-green-2:#0d3b2e;
  --courses-green-3:#12513f;
  --courses-gold:#c9a04a;
  --courses-gold-light:#e6c878;
  --courses-bg:#faf8f3;
  --courses-card:#fff;
  --courses-text:#1f2a26;
  --courses-muted:#5c6b65;
  --courses-border:#eae5d8;
}

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

#coursesPage{
  background:var(--courses-bg);
  color:var(--courses-text);
 font-family:inherit;
 }

#courseModal{
 font-family:inherit;
 }

#coursesPage h1,
#coursesPage h2,
#coursesPage h3,
#coursesPage h4,
#coursesPage p,
#courseModal h3,
#courseModal h4,
#courseModal p{
  margin-top:0;
}

#coursesPage .course-card h3,
#courseModal .modal-header h3{
 font-family:inherit;  
}

/* Language */
#coursesPage .le,
#courseModal .le{
  display:none !important;
}

body.en-body #coursesPage .la,
body.en-body #courseModal .la,
html[lang="en"] #coursesPage .la,
html[lang="en"] #courseModal .la{
  display:none !important;
}

body.en-body #coursesPage .le,
body.en-body #courseModal .le,
html[lang="en"] #coursesPage .le,
html[lang="en"] #courseModal .le{
  display:inline !important;
}

body.en-body #coursesPage,
body.en-body #courseModal,
html[lang="en"] #coursesPage,
html[lang="en"] #courseModal{
  direction:ltr;
  text-align:left;
}

/* Hero */
#coursesPage .page-hero{
  position:relative;
  overflow:hidden;
  padding:64px 24px 74px;
  color:#fff;
  text-align:center;
  background:
    linear-gradient(135deg,rgba(13,59,46,.94),rgba(10,43,33,.94)),
    repeating-linear-gradient(45deg,rgba(201,160,74,.06) 0 12px,transparent 12px 24px);
}

#coursesPage .page-hero > *:not(.hero-particles){
  position:relative;
  z-index:1;
}

#coursesPage .hero-particles{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}

#coursesPage .hero-particles span{
  position:absolute;
  bottom:-20px;
  display:block;
  border-radius:50%;
  opacity:0;
  background:radial-gradient(circle,rgba(230,200,120,.9),rgba(201,160,74,.4) 60%,transparent 100%);
  animation:courseParticleFloat var(--duration,9s) ease-in var(--delay,0s) infinite;
}

@keyframes courseParticleFloat{
  0%{transform:translate(0,0);opacity:0;}
  12%{opacity:.85;}
  50%{transform:translate(var(--drift,10px),-160px);}
  88%{opacity:.45;}
  100%{transform:translate(calc(var(--drift,10px) * -1),-320px);opacity:0;}
}

#coursesPage .page-hero .eyebrow{
  display:inline-block;
  margin-bottom:18px;
  padding:6px 18px;
  color:var(--courses-gold-light);
  font-size:14px;
  font-weight:700;
  letter-spacing:.5px;
  border:1px solid rgba(230,200,120,.4);
  border-radius:30px;
}

#coursesPage .page-hero h1{
  margin-bottom:14px;
  color:#fff;
  font-size:38px;
  font-weight:900;
}

#coursesPage .page-hero p{
  max-width:640px;
  margin:0 auto;
  color:#fff;
  font-size:16px;
  line-height:1.9;
}

#coursesPage .hero-divider{
  width:80px;
  height:4px;
  margin:20px auto 0;
  background:var(--courses-gold);
  border-radius:2px;
}

@keyframes courseHeroFadeDown{
  from{opacity:0;transform:translateY(-24px);}
  to{opacity:1;transform:none;}
}

#coursesPage .page-hero h1,
#coursesPage .page-hero p,
#coursesPage .page-hero .hero-divider{
  opacity:0;
  animation:courseHeroFadeDown .75s ease both;
}

#coursesPage .page-hero h1{animation-delay:.1s;}
#coursesPage .page-hero p{animation-delay:.26s;}
#coursesPage .page-hero .hero-divider{animation-delay:.42s;}

/* Courses section */
#coursesPage .courses-section,
#coursesPage .surveys-section{
  max-width:1180px;
  margin:0 auto;
  padding-inline:24px;
}

#coursesPage .courses-section{
  padding-top:70px;
  padding-bottom:90px;
}

#coursesPage .section-head{
  margin-bottom:48px;
  text-align:center;
}

#coursesPage .section-head h2{
  margin-bottom:10px;
  color:var(--courses-green);
  font-size:28px;
  font-weight:800;
}

#coursesPage .section-head span,
#coursesPage .section-head p{
  color:var(--courses-muted);
  font-size:15px;
}

#coursesPage .section-head h2,
#coursesPage .section-head p,
#coursesPage .section-head > span{
  opacity:0;
  transform:translateX(50px);
  transition:opacity .6s ease,transform .6s ease;
}

#coursesPage .section-head.in-view h2,
#coursesPage .section-head.in-view p,
#coursesPage .section-head.in-view > span{
  opacity:1;
  transform:none;
}

#coursesPage .section-head.in-view p,
#coursesPage .section-head.in-view > span{
  transition-delay:.12s;
}

#coursesPage .courses-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;
}

/* Compact course cards */
#coursesPage .course-card{
  position:relative;
  overflow:hidden;
  padding:16px 18px 20px;
  background:var(--courses-card);
  border:1px solid var(--courses-border);
  border-radius:16px;
  box-shadow:0 4px 18px rgba(20,50,40,.05);
  opacity:0;
  transform:translateX(70px);
  transition:opacity .7s ease,transform .7s ease,box-shadow .3s ease,border-color .3s ease;
}

#coursesPage .course-card:nth-child(even){
  transform:translateX(-70px);
}

#coursesPage .course-card.in-view{
  opacity:1;
  transform:none;
}

#coursesPage .course-card::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:6px;
  height:100%;
  background:linear-gradient(180deg,var(--courses-gold),#6b4a2f);
}

body.en-body #coursesPage .course-card::before,
html[lang="en"] #coursesPage .course-card::before{
  right:auto;
  left:0;
}

#coursesPage .course-card:hover{
  transform:translateY(-6px);
  border-color:var(--courses-gold-light);
  box-shadow:0 14px 30px rgba(20,50,40,.13);
}

#coursesPage .course-image{
  position:relative;
  width:100%;
  height:120px;
  margin-bottom:12px;
  overflow:hidden;
  border-radius:12px;
}

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

#coursesPage .course-card:hover .course-image img{
  transform:scale(1.06);
}

#coursesPage .course-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(13,59,46,.55));
}

#coursesPage .course-card h3{
  margin-bottom:6px;
  color:var(--courses-text);
  font-size:16.5px;
  font-weight:700;
  line-height:1.4;
}

#coursesPage .course-card p{
  margin-bottom:12px;
  color:var(--courses-muted);
  font-size:13px;
  line-height:1.65;
}

#coursesPage .course-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}

#coursesPage .course-tags span{
  padding:5px 12px;
  color:#6b4a2f;
  font-size:11.5px;
  font-weight:700;
  background:#f4efe2;
  border-radius:20px;
  transition:transform .2s ease,background .2s ease;
}

#coursesPage .course-card:hover .course-tags span{
  transform:translateY(-2px);
}

#coursesPage .course-price-block{
  margin-bottom:10px;
  text-align:right;
}

body.en-body #coursesPage .course-price-block,
html[lang="en"] #coursesPage .course-price-block{
  text-align:left;
}

#coursesPage .price-final{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--courses-green);
  font-size:17px;
  font-weight:900;
  transition:transform .25s ease;
}

#coursesPage .course-card:hover .price-final{
  transform:scale(1.04);
}

#coursesPage .price-final .currency{
  color:var(--courses-gold);
  font-size:13px;
  font-weight:700;
}

#coursesPage .course-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}

#coursesPage .course-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding-bottom:3px;
  color:var(--courses-green);
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  border-bottom:2px solid var(--courses-gold);
}

#coursesPage .course-btn svg{
  width:14px;
  height:14px;
  fill:var(--courses-green);
  transform:scaleX(-1);
}

body.en-body #coursesPage .course-btn svg,
html[lang="en"] #coursesPage .course-btn svg{
  transform:scaleX(1);
}

#coursesPage .course-details-btn{
  padding:8px 16px;
  color:var(--courses-green);
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  background:transparent;
  border:1.5px solid var(--courses-green-3);
  border-radius:8px;
  transition:.25s ease;
}

#coursesPage .course-details-btn:hover{
  color:#fff;
  background:var(--courses-green);
  border-color:var(--courses-green);
}

/* Stagger content inside revealed cards */
#coursesPage .course-card h3,
#coursesPage .course-card p,
#coursesPage .course-card .course-tags,
#coursesPage .course-card .course-price-block,
#coursesPage .course-card .course-actions{
  opacity:0;
  transform:translateY(-16px);
  transition:opacity .55s ease,transform .55s ease;
}

#coursesPage .course-card.in-view h3,
#coursesPage .course-card.in-view p,
#coursesPage .course-card.in-view .course-tags,
#coursesPage .course-card.in-view .course-price-block,
#coursesPage .course-card.in-view .course-actions{
  opacity:1;
  transform:none;
}

#coursesPage .course-card.in-view h3{transition-delay:.12s;}
#coursesPage .course-card.in-view p{transition-delay:.2s;}
#coursesPage .course-card.in-view .course-tags{transition-delay:.28s;}
#coursesPage .course-card.in-view .course-price-block{transition-delay:.36s;}
#coursesPage .course-card.in-view .course-actions{transition-delay:.44s;}

/* Modal */
#courseModal.modal-overlay,
.modal-overlay#courseModal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  background:rgba(10,21,18,.6);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  transition:opacity .25s ease;
}

#courseModal.open{
  display:flex;
  opacity:1;
}

#courseModal .modal-box{
  position:relative;
  width:100%;
  max-width:640px;
  max-height:86vh;
  overflow-y:auto;
  background:#fff;
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  transform:translateY(18px);
  transition:transform .3s ease;
}

#courseModal.open .modal-box{
  transform:none;
}

#courseModal .modal-header{
  position:relative;
  padding:28px 28px 22px;
  color:#fff;
  background:linear-gradient(135deg,var(--courses-green-2),var(--courses-green));
  border-radius:18px 18px 0 0;
}

#courseModal .modal-header,
#courseModal .modal-header *{
  color:#fff;
}

#courseModal .modal-header .modal-eyebrow{
  display:block;
  margin-bottom:10px;
  color:var(--courses-gold-light);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.4px;
}

#courseModal .modal-header h3{
  margin:0;
  font-size:22px;
  font-weight:800;
  line-height:1.5;
}

#courseModal .modal-close{
  position:absolute;
  top:18px;
  left:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  color:#fff;
  font-size:18px;
  cursor:pointer;
  background:rgba(255,255,255,.15);
  border:0;
  border-radius:50%;
  transition:background .2s ease;
}

body.en-body #courseModal .modal-close,
html[lang="en"] #courseModal .modal-close{
  right:18px;
  left:auto;
}

#courseModal .modal-close:hover{
  background:rgba(255,255,255,.3);
}

#courseModal .modal-body{
  padding:26px 28px 30px;
}

#courseModal .modal-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:24px;
  padding-bottom:20px;
  border-bottom:1px solid #eee6d6;
}

#courseModal .modal-meta-item,
#courseModal .modal-meta span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  color:#6b4a2f;
  font-size:12.5px;
  font-weight:700;
  background:#f4efe2;
  border-radius:20px;
}

#courseModal .modal-section{
  margin-bottom:24px;
}

#courseModal .modal-section:last-of-type{
  margin-bottom:0;
}

#courseModal .modal-section h4{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  color:var(--courses-green);
  font-size:15.5px;
  font-weight:800;
}

#courseModal .modal-section h4::before{
  content:"";
  display:inline-block;
  width:5px;
  height:16px;
  background:var(--courses-gold);
  border-radius:3px;
}

#courseModal .modal-section p{
  color:var(--courses-muted);
  font-size:15px;
  line-height:2;
}

#courseModal .modal-section ul{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin:0;
  padding:0;
  list-style:none;
}

#courseModal .modal-section li{
  position:relative;
  padding-right:20px;
  color:var(--courses-text);
  font-size:14.5px;
  line-height:1.8;
}

#courseModal .modal-section li::before{
  content:"";
  position:absolute;
  top:8px;
  right:0;
  width:8px;
  height:8px;
  background:var(--courses-gold);
  border-radius:50%;
  box-shadow:0 0 0 3px rgba(201,160,74,.18);
}

body.en-body #courseModal .modal-section li,
html[lang="en"] #courseModal .modal-section li{
  padding-right:0;
  padding-left:20px;
}

body.en-body #courseModal .modal-section li::before,
html[lang="en"] #courseModal .modal-section li::before{
  right:auto;
  left:0;
}

#courseModal .modal-footer{
  display:flex;
  gap:12px;
  padding-top:14px;
  border-top:1px solid #eee6d6;
}

#courseModal .modal-register-btn{
  display:flex;
  flex:1;
  align-items:center;
  justify-content:center;
  padding:13px 20px;
  color:#fff;
  font-family:inherit;
  font-size:14.5px;
  font-weight:700;
  cursor:pointer;
  background:var(--courses-green);
  border:0;
  border-radius:10px;
  transition:background .2s ease;
}

#courseModal .modal-register-btn:hover{
  background:var(--courses-green-3);
}

@keyframes courseModalFadeDown{
  from{opacity:0;transform:translateY(-15px);}
  to{opacity:1;transform:none;}
}

#courseModal.open .modal-header h3,
#courseModal.open .modal-meta,
#courseModal.open .modal-section,
#courseModal.open .modal-footer{
  animation:courseModalFadeDown .45s ease both;
}

#courseModal.open .modal-meta{animation-delay:.08s;}
#courseModal.open .modal-section:nth-of-type(1){animation-delay:.14s;}
#courseModal.open .modal-section:nth-of-type(2){animation-delay:.2s;}
#courseModal.open .modal-section:nth-of-type(3){animation-delay:.26s;}
#courseModal.open .modal-section:nth-of-type(4){animation-delay:.32s;}
#courseModal.open .modal-footer{animation-delay:.38s;}

/* Surveys */
#coursesPage .surveys-section{
  padding-top:10px;
  padding-bottom:90px;
}

#coursesPage .surveys-card{
  position:relative;
  overflow:hidden;
  padding:44px 42px;
  background:#fff;
  border:1px solid var(--courses-border);
  border-radius:20px;
  box-shadow:0 10px 34px rgba(20,50,40,.06);
}

#coursesPage .surveys-card::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:6px;
  background:linear-gradient(90deg,var(--courses-green-2),var(--courses-gold),#6b4a2f);
}

#coursesPage .surveys-head{
  margin-bottom:34px;
  text-align:center;
}

#coursesPage .surveys-head h2{
  margin:12px 0 8px;
  color:var(--courses-green);
  font-size:26px;
  font-weight:800;
}

#coursesPage .surveys-head p{
  color:var(--courses-muted);
  font-size:14.5px;
}

#coursesPage .poll{
  margin-bottom:22px;
  padding:22px 24px;
  background:#fbfaf6;
  border:1px solid var(--courses-border);
  border-radius:14px;
}

#coursesPage .poll:last-of-type{margin-bottom:0;}

#coursesPage .poll h4{
  margin-bottom:16px;
  color:var(--courses-green);
  font-size:16px;
  font-weight:800;
}

#coursesPage .poll-options{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:16px;
}

#coursesPage .poll-option{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  color:var(--courses-text);
  font-size:14px;
  cursor:pointer;
  background:#fff;
  border:1.5px solid #e2ddd0;
  border-radius:10px;
  transition:border-color .2s ease;
}

#coursesPage .poll-option:hover{border-color:var(--courses-gold-light);}
#coursesPage .poll-option input{accent-color:var(--courses-green-3);}

#coursesPage .poll-submit-btn{
  padding:10px 22px;
  color:#fff;
  font-family:inherit;
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
  background:var(--courses-green);
  border:0;
  border-radius:10px;
}

#coursesPage .poll-submit-btn:hover{background:var(--courses-green-3);}

#coursesPage .poll-result{
  display:none;
  margin-top:12px;
  color:#1e6b46;
  font-size:13px;
  font-weight:700;
}

#coursesPage .poll-result.show{display:block;}

/* Dark mode */
body.dark-mode #coursesPage,
body.dark-mode #coursesPage .courses-section,
body.dark-mode #coursesPage .surveys-section{
  background:#101711;
  color:#f3f5f4;
}

body.dark-mode #coursesPage .course-card,
body.dark-mode #coursesPage .surveys-card,
body.dark-mode #coursesPage .poll,
body.dark-mode #coursesPage .poll-option,
body.dark-mode #courseModal .modal-box,
body.dark-mode #courseModal .modal-body{
  background:#172019;
  border-color:rgba(255,255,255,.12);
}

body.dark-mode #coursesPage h2,
body.dark-mode #coursesPage h3,
body.dark-mode #coursesPage h4,
body.dark-mode #coursesPage .price-final,
body.dark-mode #coursesPage .poll-option,
body.dark-mode #courseModal .modal-section h4,
body.dark-mode #courseModal .modal-section li{
  color:#f3f5f4;
}

body.dark-mode #coursesPage p,
body.dark-mode #coursesPage .section-head span,
body.dark-mode #coursesPage .section-head p,
body.dark-mode #coursesPage .surveys-head p,
body.dark-mode #courseModal .modal-section p{
  color:#cbd4ce;
}

body.dark-mode #coursesPage .course-tags span,
body.dark-mode #courseModal .modal-meta-item,
body.dark-mode #courseModal .modal-meta span{
  color:var(--courses-gold-light);
  background:rgba(230,200,120,.14);
}

body.dark-mode #coursesPage .course-btn{
  color:var(--courses-gold-light);
  border-bottom-color:var(--courses-gold-light);
}

body.dark-mode #coursesPage .course-btn svg{fill:var(--courses-gold-light);}

body.dark-mode #coursesPage .course-details-btn{
  color:#fff;
  background:transparent;
  border-color:#fff;
}

body.dark-mode #coursesPage .course-details-btn:hover{
  color:#fff;
  background:var(--courses-green);
  border-color:var(--courses-green);
}

body.dark-mode #coursesPage .poll-result{color:#8fd6ab;}
body.dark-mode #courseModal .modal-meta,
body.dark-mode #courseModal .modal-footer{border-color:#2a352f;}

/* Responsive */
@media(max-width:900px){
  #coursesPage .courses-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media(max-width:640px){
  #coursesPage .page-hero{padding:52px 20px 60px;}
  #coursesPage .page-hero h1{font-size:30px;}
  #coursesPage .courses-grid{grid-template-columns:1fr;}
  #coursesPage .course-card,
  #coursesPage .course-card:nth-child(even){transform:translateY(35px);}
  #coursesPage .course-card.in-view{transform:none;}
  #coursesPage .surveys-card{padding:30px 22px;}
  #courseModal .modal-header{padding:22px 20px;}
  #courseModal .modal-body{padding:22px 20px 26px;}
}

@media(prefers-reduced-motion:reduce){
  #coursesPage *,
  #courseModal *{
    animation:none !important;
    transition:none !important;
  }

  #coursesPage .course-card,
  #coursesPage .section-head h2,
  #coursesPage .section-head p,
  #coursesPage .section-head > span{
    opacity:1 !important;
    transform:none !important;
  }
}