/* ==========================================================================
   Chemistry Code - shared stylesheet
   --------------------------------------------------------------------------
   The uploaded pages (pricing, contact, register, certificates,
   live-classroom) each carry most of their own CSS inline, but they all
   <link> this file for a set of shared components that was never supplied.
   Without it the pricing plans rendered as plain bullet lists and every form
   was unstyled.

   This file defines ONLY the classes those pages reference and do not define
   themselves. It intentionally reuses the same design tokens the pages
   already declare (--am-*), so it inherits their palette instead of fighting
   it. Nothing inside the uploaded HTML was modified.
   ========================================================================== */

:root{
  /* Re-declared defensively: privacy.html and any future page can link this
     stylesheet without shipping the token block. Pages that DO define these
     win, because their inline <style> comes after this file. */
  --am-navy:#070b14;
  --am-card:#0f172a;
  --am-card2:#111c31;
  --am-line:rgba(125,211,252,.24);
  --am-sky:#38bdf8;
  --am-violet:#a78bfa;
  --am-gold:#fbbf24;
  --am-green:#34d399;
  --am-red:#fb7185;
  --am-ink:#f8fafc;
  --am-muted:#a7b6ca;
  --am-radius:20px;
  --am-shadow:0 22px 50px rgba(0,0,0,.42);
}

/* ---------------------------------------------------------------- buttons */
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-orange{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:13px 26px;
  min-height:48px;              /* comfortable tap target on phones */
  border:0;
  border-radius:999px;
  font:inherit;
  font-weight:900;
  font-size:.95rem;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn-primary{
  background:linear-gradient(135deg,var(--am-sky),var(--am-violet));
  color:#06121f;
  box-shadow:0 14px 30px rgba(56,189,248,.28);
}
.btn-secondary{
  background:rgba(148,163,184,.14);
  color:var(--am-ink);
  border:1px solid var(--am-line);
}
.btn-outline{
  background:transparent;
  color:var(--am-sky);
  border:2px solid var(--am-sky);
}
.btn-orange{
  background:linear-gradient(135deg,var(--am-gold),#f97316);
  color:#2b1600;
  box-shadow:0 14px 30px rgba(251,191,36,.26);
}
.btn-primary:hover,
.btn-secondary:hover,
.btn-outline:hover,
.btn-orange:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.btn-primary:active,
.btn-secondary:active,
.btn-outline:active,
.btn-orange:active{ transform:translateY(0); }

.btn-small{
  padding:8px 15px;
  min-height:38px;
  font-size:.82rem;
  border-radius:999px;
}

/* a disabled plan/button must look and behave inert */
.disabled,
button.disabled,
a.disabled,
.btn-primary.disabled,
.btn-orange.disabled{
  opacity:.5;
  cursor:not-allowed;
  filter:grayscale(.45);
  pointer-events:none;
  box-shadow:none;
  transform:none;
}

/* ----------------------------------------------------------- page heading */
.page-header{
  max-width:1180px;
  margin:0 auto 26px;
  padding:26px 20px 0;
  text-align:center;
}
.page-header h1,
.page-header h2{
  margin:0 0 10px;
  font-size:clamp(1.7rem,4.4vw,2.9rem);
  font-weight:900;
  line-height:1.2;
  color:var(--am-ink);
}
.page-header p,
.page-header .subtitle{
  margin:0 auto;
  max-width:62ch;
  color:var(--am-muted);
  font-size:1.02rem;
  line-height:1.75;
}
.section-title{
  margin:34px 0 18px;
  font-size:clamp(1.25rem,3vw,1.75rem);
  font-weight:900;
  color:var(--am-ink);
  text-align:center;
}
.highlight{
  background:linear-gradient(90deg,var(--am-sky),var(--am-gold));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* -------------------------------------------------------------- pricing  */
.pricing{ padding:10px 16px 60px; }
.pricing-grid{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(285px,1fr));
  align-items:stretch;
}
.price-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:30px 24px;
  border:1px solid var(--am-line);
  border-radius:var(--am-radius);
  background:linear-gradient(180deg,rgba(17,28,49,.95),rgba(15,23,42,.95));
  box-shadow:var(--am-shadow);
  transition:transform .2s ease, border-color .2s ease;
}
.price-card:hover{ transform:translateY(-5px); border-color:rgba(125,211,252,.55); }

/* the recommended plan */
.price-card.featured{
  border:2px solid var(--am-gold);
  background:linear-gradient(180deg,rgba(43,32,10,.85),rgba(15,23,42,.96));
  box-shadow:0 26px 60px rgba(251,191,36,.2);
}
.popular-badge{
  position:absolute;
  top:-14px;
  inset-inline-start:50%;
  transform:translateX(-50%);
  padding:7px 18px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--am-gold),#f97316);
  color:#2b1600;
  font-size:.74rem;
  font-weight:1000;
  letter-spacing:.4px;
  white-space:nowrap;
  box-shadow:0 8px 20px rgba(251,191,36,.4);
}
/* translateX flips in RTL, so re-center from the other side */
[dir="rtl"] .popular-badge{ transform:translateX(50%); }

.plan-icon{
  width:60px;
  height:60px;
  display:grid;
  place-items:center;
  font-size:1.7rem;
  border-radius:18px;
  background:rgba(56,189,248,.14);
  border:1px solid var(--am-line);
}
.price-card h3{
  margin:0;
  font-size:1.35rem;
  font-weight:900;
  color:var(--am-ink);
}
.price{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
  font-size:2.5rem;
  font-weight:1000;
  color:var(--am-sky);
  line-height:1.1;
}
.price small,
.price span,
.price-note{
  font-size:.85rem;
  font-weight:700;
  color:var(--am-muted);
}
.price-note{ margin:0; line-height:1.6; }

.price-features{
  list-style:none;
  margin:6px 0 auto;
  padding:0;
  display:grid;
  gap:11px;
}
.price-features li{
  position:relative;
  padding-inline-start:28px;
  color:#cbd5e1;
  font-size:.94rem;
  font-weight:700;
  line-height:1.6;
}
.price-features li::before{
  content:"\2713";                 /* check mark */
  position:absolute;
  inset-inline-start:0;
  top:1px;
  width:19px;
  height:19px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(52,211,153,.18);
  color:var(--am-green);
  font-size:.72rem;
  font-weight:900;
}
.price-card .btn-primary,
.price-card .btn-orange,
.price-card .btn-outline{ width:100%; margin-top:6px; }

/* -------------------------------------------------------------- payments */
.payment-section{ padding:20px 16px 70px; }
.payment-container{
  max-width:960px;
  margin:0 auto;
  padding:28px 24px;
  border:1px solid var(--am-line);
  border-radius:var(--am-radius);
  background:rgba(15,23,42,.9);
  box-shadow:var(--am-shadow);
}
.payment-methods{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin-bottom:24px;
}
.payment-method{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  padding:18px 12px;
  border:2px solid var(--am-line);
  border-radius:16px;
  background:rgba(17,28,49,.75);
  color:var(--am-ink);
  font-weight:800;
  font-size:.9rem;
  text-align:center;
  cursor:pointer;
  transition:border-color .18s ease, transform .18s ease, background .18s ease;
}
.payment-method:hover{ transform:translateY(-3px); border-color:rgba(125,211,252,.6); }
/* pricing.html marks the chosen method with .selected - include it, or the
   user gets no feedback about which payment option is active. */
.payment-method.selected,
.payment-method.active,
.payment-method[aria-selected="true"]{
  border-color:var(--am-sky);
  background:rgba(56,189,248,.14);
  box-shadow:0 0 0 3px rgba(56,189,248,.16);
}
.pay-icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  font-size:1.35rem;
  border-radius:12px;
  background:rgba(56,189,248,.12);
}
.pay-icon img{ max-width:30px; max-height:30px; object-fit:contain; }

.payment-form{ display:grid; gap:16px; }
.payment-form[hidden]{ display:none; }

/* ------------------------------------------------------------ order box  */
.order-summary{
  display:grid;
  gap:11px;
  padding:20px;
  border:1px dashed var(--am-line);
  border-radius:16px;
  background:rgba(7,11,20,.55);
  margin-bottom:20px;
}
.order-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  color:var(--am-muted);
  font-size:.94rem;
  font-weight:700;
}
.order-row.total,
.order-summary .total{
  padding-top:12px;
  border-top:1px solid var(--am-line);
  color:var(--am-ink);
  font-size:1.2rem;
  font-weight:1000;
}
.order-row.total span:last-child,
.order-summary .total span:last-child{ color:var(--am-gold); }

/* ----------------------------------------------------------------- forms */
.form-group{ display:grid; gap:8px; margin-bottom:16px; }
.form-group label{
  font-size:.88rem;
  font-weight:800;
  color:var(--am-ink);
}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  box-sizing:border-box;
  padding:13px 15px;
  min-height:48px;
  border:1px solid var(--am-line);
  border-radius:12px;
  background:rgba(7,11,20,.72);
  color:var(--am-ink);
  font:inherit;
  font-size:.95rem;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.form-group textarea{ min-height:132px; resize:vertical; line-height:1.7; }
.form-group input::placeholder,
.form-group textarea::placeholder{ color:#64748b; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:none;
  border-color:var(--am-sky);
  box-shadow:0 0 0 3px rgba(56,189,248,.2);
}
/* register.html flags a bad field with .error on the .form-group (mismatched
   password, e-mail already registered). Without this the validation is
   completely invisible and the form just seems not to submit. */
.form-group.error input,
.form-group.error select,
.form-group.error textarea{
  /* full shorthand, not just border-color: the base .form-group rule uses the
     `border` shorthand, which would otherwise reset the colour back. */
  border:1px solid var(--am-red);
  background:rgba(251,113,133,.07);
}
.form-group.error input:focus,
.form-group.error select:focus,
.form-group.error textarea:focus{
  border-color:var(--am-red);
  box-shadow:0 0 0 3px rgba(251,113,133,.22);
}
.form-group.error label{ color:var(--am-red); }
.form-group select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--am-muted) 50%),
                   linear-gradient(135deg,var(--am-muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(1.35em),calc(100% - 14px) calc(1.35em);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-inline-end:38px;
}
[dir="rtl"] .form-group select{
  background-position:19px calc(1.35em),24px calc(1.35em);
}
.form-row{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
}
.form-error{
  display:block;
  min-height:1em;
  color:var(--am-red);
  font-size:.8rem;
  font-weight:800;
}
.form-error:empty{ min-height:0; }
.remember-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:18px;
  font-size:.87rem;
  color:var(--am-muted);
  font-weight:700;
}
.remember-row label{ display:flex; align-items:center; gap:8px; cursor:pointer; }
.remember-row input[type="checkbox"]{ width:17px; height:17px; accent-color:var(--am-sky); }
.remember-row a{ color:var(--am-sky); text-decoration:none; font-weight:800; }
.remember-row a:hover{ text-decoration:underline; }

/* --------------------------------------------------------------- contact */
.contact{ padding:10px 16px 60px; }
.contact-wrapper{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  gap:26px;
  grid-template-columns:minmax(0,1fr);
}
@media(min-width:900px){
  .contact-wrapper{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:start; }
}
.contact-info-grid{ display:grid; gap:16px; }
.contact-info-card{
  display:flex;
  align-items:flex-start;
  gap:15px;
  padding:20px;
  border:1px solid var(--am-line);
  border-radius:16px;
  background:rgba(17,28,49,.8);
  transition:transform .18s ease, border-color .18s ease;
}
.contact-info-card:hover{ transform:translateY(-3px); border-color:rgba(125,211,252,.5); }
.contact-info-card h3,
.contact-info-card h4{
  margin:0 0 5px;
  font-size:1rem;
  font-weight:900;
  color:var(--am-ink);
}
.contact-info-card p,
.contact-info-card a{
  margin:0;
  color:var(--am-muted);
  font-size:.92rem;
  line-height:1.7;
  font-weight:700;
  text-decoration:none;
  word-break:break-word;
}
.contact-info-card a:hover{ color:var(--am-sky); text-decoration:underline; }
.info-icon{
  flex:0 0 auto;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  font-size:1.4rem;
  border-radius:14px;
  background:rgba(56,189,248,.14);
  border:1px solid var(--am-line);
}

/* ------------------------------------------------------------ auth pages */
.auth-page{
  min-height:70vh;
  display:grid;
  place-items:center;
  padding:34px 16px 70px;
}
.auth-box{
  width:100%;
  max-width:520px;
  padding:34px 28px;
  border:1px solid var(--am-line);
  border-radius:24px;
  background:rgba(15,23,42,.92);
  box-shadow:var(--am-shadow);
}
.auth-logo{ text-align:center; margin-bottom:22px; }
.auth-logo img{ width:74px; height:74px; border-radius:18px; object-fit:contain; }
.logo-main{
  display:block;
  font-size:1.5rem;
  font-weight:1000;
  background:linear-gradient(90deg,var(--am-sky),var(--am-violet));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.logo-sub{
  display:block;
  margin-top:3px;
  font-size:.82rem;
  font-weight:700;
  color:var(--am-muted);
}
.auth-box .subtitle{
  margin:0 0 22px;
  text-align:center;
  color:var(--am-muted);
  font-size:.93rem;
  line-height:1.7;
}
.auth-box .btn-primary{ width:100%; }
.auth-footer{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--am-line);
  text-align:center;
  font-size:.9rem;
  color:var(--am-muted);
  font-weight:700;
}
.auth-footer a{ color:var(--am-sky); text-decoration:none; font-weight:900; }
.auth-footer a:hover{ text-decoration:underline; }

/* ---------------------------------------------------------------- modals */
/* Default state is CLOSED. The uploaded pages (certificates.html) open a
   modal with classList.add('active') and never set an inline style or a
   .hidden class - so an overlay that defaults to visible covers the whole
   page and swallows every click. Show only when .active is present. */
.modal-overlay{
  position:fixed;
  inset:0;
  z-index:9000;
  display:none;
  place-items:center;
  padding:20px;
  background:rgba(3,7,15,.78);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.modal-overlay.active,
.modal-overlay.open{ display:grid; }
.modal-overlay[hidden],
.modal-overlay.hidden{ display:none; }
.modal-box{
  position:relative;
  width:min(760px,100%);
  max-height:88vh;
  overflow:auto;
  padding:28px;
  border:1px solid var(--am-line);
  border-radius:22px;
  background:var(--am-card);
  box-shadow:0 30px 70px rgba(0,0,0,.6);
  -webkit-overflow-scrolling:touch;
}
.modal-close{
  position:absolute;
  top:12px;
  inset-inline-end:12px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid var(--am-line);
  border-radius:50%;
  background:rgba(148,163,184,.14);
  color:var(--am-ink);
  font-size:1.15rem;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  transition:background .16s ease, color .16s ease;
}
.modal-close:hover{ background:var(--am-red); color:#fff; }

/* ------------------------------------------------------- scroll-to-top   */
.scroll-top{
  position:fixed;
  bottom:22px;
  inset-inline-end:22px;
  z-index:900;
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border:1px solid var(--am-line);
  border-radius:50%;
  background:linear-gradient(135deg,var(--am-sky),var(--am-violet));
  color:#06121f;
  font-size:1.1rem;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(14px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
  box-shadow:0 12px 28px rgba(56,189,248,.32);
}
.scroll-top.visible,
.scroll-top.show,
.scroll-top.active{ opacity:1; visibility:visible; transform:translateY(0); }

/* ------------------------------------------------------------- responsive */
@media(max-width:640px){
  .price-card{ padding:26px 20px; }
  .price{ font-size:2.1rem; }
  .payment-container{ padding:22px 16px; }
  .auth-box{ padding:28px 20px; }
  .modal-box{ padding:22px 16px; border-radius:18px; }
  .scroll-top{ width:46px; height:46px; bottom:16px; inset-inline-end:16px; }
  .form-row{ grid-template-columns:1fr; }
}

/* Respect users who ask for less motion. */
@media(prefers-reduced-motion:reduce){
  .btn-primary,.btn-secondary,.btn-outline,.btn-orange,
  .price-card,.payment-method,.contact-info-card,.scroll-top{
    transition:none;
  }
  .btn-primary:hover,.btn-secondary:hover,.btn-outline:hover,.btn-orange:hover,
  .price-card:hover,.payment-method:hover,.contact-info-card:hover{ transform:none; }
}