/* ============================================================================
   ActWithShivani — layout & component styles. Loaded after theme.css.
   ============================================================================ */

.section { padding-top: 96px; padding-bottom: 96px; }
.section-sm { padding-top: 56px; padding-bottom: 56px; }
@media (max-width: 991.98px) { .section { padding-top: 72px; padding-bottom: 72px; } }
@media (max-width: 575.98px) { .section { padding-top: 56px; padding-bottom: 56px; } .section-sm { padding-top: 40px; padding-bottom: 40px; } }

.container-aws { max-width: var(--container-max); }
.bg-sand { background-color: var(--sand); }
.bg-warm-white { background-color: var(--warm-white); }
.text-accent { color: var(--accent-dark); }
.text-muted-aws { color: var(--muted); }
.fw-semi { font-weight: 600; }

/* ---- Navbar ------------------------------------------------------------ */
.navbar-aws {
  background: rgba(250, 248, 244, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .2s var(--ease-cinematic);
  z-index: 1030;
}
.navbar-aws.scrolled { box-shadow: 0 2px 12px rgba(23,23,23,.06); }
.navbar-aws .navbar-brand img { height: 42px; width: auto; }
.navbar-aws .nav-link { font-weight: 600; color: var(--graphite); padding: .5rem .85rem !important; }
.navbar-aws .nav-link.active, .navbar-aws .nav-link:hover { color: var(--accent-dark); }
.navbar-aws .btn { white-space: nowrap; }

/* ---- Hero ------------------------------------------------------------ */
.hero {
  position: relative;
  background: var(--brand-black);
  color: #fff;
  overflow: hidden;
  padding: 96px 0 88px;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 20% 0%, rgba(180,95,77,.28), transparent 55%),
              radial-gradient(90% 90% at 90% 100%, rgba(216,169,64,.14), transparent 60%);
  pointer-events: none;
}
.hero .hero-inner { position: relative; z-index: 1; }
.hero h1 { font-size: 3.4rem; color: #fff; }
.hero p.lead { color: rgba(255,255,255,.78); font-size: 1.15rem; }
@media (max-width: 575.98px) { .hero h1 { font-size: 2.3rem; } .hero { padding: 64px 0 56px; } }

.hero-media-frame {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, #241a16, #000);
  border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: flex-end; justify-content: center;
  position: relative; overflow: hidden;
}
.hero-media-frame .frame-caption { position: relative; z-index: 1; color: rgba(255,255,255,.5); font-size: .8rem; text-align: center; padding: 1.25rem; }
.hero-media-frame::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px); }

/* Generic media placeholder frame — used wherever real photography would go */
.media-frame {
  background: linear-gradient(155deg, var(--sand), #E3DCD0);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; color: var(--muted);
}
.media-frame .frame-caption { font-size: .75rem; text-align: center; padding: 1rem; position: relative; z-index: 1; }
.media-frame::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(23,23,23,.03) 0 2px, transparent 2px 14px); }
.media-frame.has-image::after { display: none; }
.media-frame.has-image { background: none; }
.ratio-3x2 { aspect-ratio: 3 / 2; }
.ratio-4x3 { aspect-ratio: 4 / 3; }
.ratio-4x5 { aspect-ratio: 4 / 5; }
.ratio-16x9-frame { aspect-ratio: 16 / 9; }

/* ---- Program / webinar / trainer cards --------------------------------- */
.program-card { border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; background: #fff; height: 100%; display: flex; flex-direction: column; transition: transform .22s var(--ease-cinematic), box-shadow .22s var(--ease-cinematic); }
.program-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.program-card .program-card-body { padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.program-card .program-meta { font-size: .8125rem; color: var(--muted); }
.program-card h3 { font-size: 1.4rem; margin-bottom: 0; }

.trainer-card { text-align: center; }
.trainer-card .media-frame { border-radius: var(--radius-card); margin-bottom: 1rem; }
.trainer-card h3 { font-size: 1.3rem; margin-bottom: .1rem; }

.testimonial-block { border-left: 2px solid var(--accent); padding-left: 1.25rem; }
.testimonial-block blockquote { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; line-height: 1.35; color: var(--ink); }
.testimonial-block figcaption { color: var(--muted); font-size: .875rem; margin-top: .75rem; }

/* ---- CTA band ---------------------------------------------------------- */
.cta-band { background: var(--brand-black); color: #fff; border-radius: var(--radius-lg); padding: 72px 48px; text-align: center; }
.cta-band h2 { color: #fff; }
@media (max-width: 575.98px) { .cta-band { padding: 48px 24px; border-radius: var(--radius-card); } }

/* ---- Footer ------------------------------------------------------------ */
.site-footer { background: var(--brand-black); color: rgba(255,255,255,.66); padding: 64px 0 32px; }
.site-footer h6 { color: #fff; font-weight: 700; font-size: .875rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1rem; }
.site-footer a { color: rgba(255,255,255,.66); text-decoration: none; }
.site-footer a:hover { color: var(--brand-gold); }
.site-footer .footer-logo img { height: 46px; width: auto; margin-bottom: 1rem; }
.site-footer .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; margin-right: .5rem; }
.site-footer .social-links a:hover { border-color: var(--brand-gold); }
.site-footer hr { border-color: rgba(255,255,255,.12); }

/* ---- Booking / checkout ------------------------------------------------- */
.booking-summary-card { position: sticky; top: 96px; border: 1px solid var(--border); border-radius: var(--radius-card); background: #fff; padding: 1.5rem; }
.session-option { border: 1px solid var(--border); border-radius: var(--radius-fn-card); padding: .85rem 1rem; cursor: pointer; transition: border-color .15s, background-color .15s; }
.session-option:hover { background: var(--surface-hover, rgba(23,23,23,.035)); }
.session-option.selected { border-color: var(--accent); background: var(--accent-soft); }
.session-option input { accent-color: var(--accent); }
.sticky-mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--border); padding: .75rem 1rem; box-shadow: 0 -6px 20px rgba(23,23,23,.08); z-index: 1040; }

.line-item { display: flex; justify-content: space-between; padding: .4rem 0; font-size: .9375rem; }
.line-item.total { font-weight: 700; font-size: 1.05rem; border-top: 1px solid var(--border); margin-top: .5rem; padding-top: .75rem; }

/* ---- Empty / skeleton states -------------------------------------------- */
.empty-state { text-align: center; padding: 3rem 1.5rem; }
.empty-state i { font-size: 2.5rem; color: var(--muted); margin-bottom: 1rem; display: inline-block; }
.skeleton { background: linear-gradient(90deg, var(--sand) 25%, #e6e0d4 37%, var(--sand) 63%); background-size: 400% 100%; animation: skeleton-loading 1.4s ease infinite; border-radius: var(--radius-fn-card); }
@keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---- Portal shells (dashboard / trainer / admin) ------------------------ */
.portal-shell { min-height: 100vh; background: var(--warm-white); }
.portal-rail { background: var(--brand-black); color: rgba(255,255,255,.8); min-height: 100vh; padding: 1.5rem 1rem; }
.portal-rail .rail-brand img { height: 34px; margin-bottom: 2rem; }
.portal-rail .nav-link { color: rgba(255,255,255,.66); font-weight: 600; border-radius: var(--radius-fn-card); padding: .6rem .85rem; margin-bottom: .15rem; display: flex; align-items: center; gap: .6rem; }
.portal-rail .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.portal-rail .nav-link.active { background: rgba(255,255,255,.1); color: var(--brand-gold); }
.portal-topbar { background: #fff; border-bottom: 1px solid var(--border); padding: .85rem 1.5rem; }
.portal-main { padding: 1.75rem; }
@media (max-width: 991.98px) { .portal-main { padding: 1.25rem; } }

.kpi-card { border: 1px solid var(--border); border-radius: var(--radius-fn-card); background: #fff; padding: 1.25rem; }
.kpi-card .kpi-value { font-family: var(--font-display); font-size: 2rem; font-weight: 600; }
.kpi-card .kpi-label { font-size: .8125rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }

.filter-bar { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-fn-card); padding: 1rem; }

/* ---- Certificates / confirmation ---------------------------------------- */
.confirmation-card { max-width: 560px; margin: 0 auto; }

/* ---- Utility ------------------------------------------------------------ */
.min-vh-70 { min-height: 70vh; }
.object-fit-cover { object-fit: cover; }
.password-toggle { cursor: pointer; }
.rounded-aws-lg { border-radius: var(--radius-lg); }