/* ============================================================
   AAPA Portal Version 2 — Pure White Minimalist Clinical Theme
   ============================================================
   Inspired by Apple Health, One Medical, and Stripe Light.
   Ultra-clean whitespace, crisp hairline borders, pure white
   surfaces, and Apple Clinical Blue typography.
   ============================================================ */

/* ── Design Tokens Overrides for V2 ───────────────────────── */
:root {
  --v2-primary:         #0066CC;
  --v2-primary-hover:   #0052A3;
  --v2-primary-subtle:  #F0F6FF;

  --v2-secondary:       #00A3E0;
  --v2-accent:          #30B0C7;
  --v2-accent-subtle:   #E8F8FA;

  --v2-bg:              #FBFBFD;
  --v2-surface:         #FFFFFF;
  --v2-surface-alt:     #F5F5F7;
  --v2-border:          #E5E5EA;
  --v2-border-light:    #F2F2F7;

  --v2-text:            #1D1D1F;
  --v2-text-muted:      #86868B;
  --v2-text-light:      #A1A1A6;

  --v2-shadow-sm:       0 2px 8px rgba(0, 0, 0, 0.03);
  --v2-shadow-md:       0 6px 20px rgba(0, 0, 0, 0.04);
  --v2-shadow-lg:       0 12px 36px rgba(0, 0, 0, 0.06);
  --v2-shadow-glow:     0 0 24px rgba(0, 102, 204, 0.12);

  --v2-radius-sm:       8px;
  --v2-radius-md:       12px;
  --v2-radius-lg:       16px;
  --v2-radius-xl:       24px;
  --v2-radius-pill:     999px;
}

/* ── Base Override ────────────────────────────────────────── */
body.v2-theme {
  background-color: var(--v2-bg);
  color: var(--v2-text);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Top Bar V2 ───────────────────────────────────────────── */
.v2-top-bar {
  background-color: var(--v2-surface-alt);
  color: var(--v2-text);
  border-bottom: 1px solid var(--v2-border);
  padding-block: 8px;
  font-size: 0.8125rem;
}

.v2-top-bar a {
  color: var(--v2-text-muted);
}

.v2-top-bar a:hover {
  color: var(--v2-primary);
}

.v2-top-bar .top-bar__badge {
  background-color: var(--v2-primary-subtle);
  color: var(--v2-primary);
  border: 1px solid rgba(0, 102, 204, 0.15);
}

/* ── Navbar V2 ────────────────────────────────────────────── */
.v2-navbar {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--v2-border);
}

.v2-navbar .navbar__brand-name {
  color: var(--v2-text);
  font-weight: 800;
}

.v2-navbar .navbar__brand-icon {
  background: var(--v2-primary);
}

.v2-navbar .navbar__link {
  color: var(--v2-text);
}

.v2-navbar .navbar__link:hover,
.v2-navbar .navbar__link--active {
  color: var(--v2-primary);
}

.v2-navbar .navbar__link::after {
  background: var(--v2-primary);
}

.v2-navbar .navbar__dropdown-menu {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--v2-border);
  box-shadow: var(--v2-shadow-lg);
}

/* ── Version Switcher Button ──────────────────────────────── */
.v2-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--v2-radius-pill);
  background: var(--v2-surface-alt);
  color: var(--v2-text);
  border: 1px solid var(--v2-border);
  text-decoration: none;
  transition: all 0.2s ease;
}

.v2-switcher-btn:hover {
  background: var(--v2-primary);
  color: #ffffff;
  border-color: var(--v2-primary);
}

/* ── Buttons V2 ───────────────────────────────────────────── */
.v2-btn-primary {
  background: var(--v2-primary);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 14px rgba(0, 102, 204, 0.25);
  border-radius: var(--v2-radius-pill);
  padding: 0.75rem 1.75rem;
  font-weight: 700;
  transition: all 0.2s ease;
}

.v2-btn-primary:hover {
  background: var(--v2-primary-hover);
  box-shadow: 0 6px 20px rgba(0, 102, 204, 0.35);
  transform: translateY(-2px);
  color: #ffffff;
}

.v2-btn-secondary {
  background: var(--v2-surface);
  color: var(--v2-text);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-pill);
  padding: 0.75rem 1.75rem;
  font-weight: 700;
  transition: all 0.2s ease;
}

.v2-btn-secondary:hover {
  background: var(--v2-surface-alt);
  border-color: var(--v2-text-muted);
  transform: translateY(-2px);
  color: var(--v2-text);
}

/* ── Minimal Hero V2 ──────────────────────────────────────── */
.v2-hero {
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F7 100%);
  padding-block: clamp(3rem, 6vw, 6rem);
  border-bottom: 1px solid var(--v2-border);
  position: relative;
  overflow: hidden;
}

.v2-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background-color: var(--v2-primary-subtle);
  color: var(--v2-primary);
  border: 1px solid rgba(0, 102, 204, 0.15);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--v2-radius-pill);
  margin-bottom: 1.25rem;
}

.v2-hero__title {
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--v2-text);
  margin-bottom: 1.25rem;
}

.v2-hero__title span {
  color: var(--v2-primary);
}

.v2-hero__subtitle {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--v2-text-muted);
  line-height: 1.6;
  margin-bottom: 2rem;
  max-width: 580px;
}

.v2-hero__image-frame {
  position: relative;
  border-radius: var(--v2-radius-2xl, 32px);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--v2-border);
  background: #ffffff;
}

.v2-hero__image {
  width: 100%;
  height: 480px;
  object-fit: cover;
}

@media (max-width: 767px) {
  .v2-hero__image {
    height: 320px;
  }
}

/* ── Minimal Cards V2 ─────────────────────────────────────── */
.v2-card {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-xl);
  box-shadow: var(--v2-shadow-sm);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.v2-card:hover {
  border-color: rgba(0, 102, 204, 0.3);
  box-shadow: var(--v2-shadow-md), var(--v2-shadow-glow);
  transform: translateY(-4px);
}

.v2-card__badge {
  background: var(--v2-primary-subtle);
  color: var(--v2-primary);
  border: 1px solid rgba(0, 102, 204, 0.12);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--v2-radius-pill);
}

/* ── Ticker V2 ────────────────────────────────────────────── */
.v2-ticker {
  background-color: var(--v2-surface-alt);
  color: var(--v2-text);
  border-bottom: 1px solid var(--v2-border);
}

.v2-ticker .ticker__badge {
  background-color: var(--v2-primary);
  color: #ffffff;
}

.v2-ticker .ticker__highlight {
  color: var(--v2-primary);
  font-weight: 700;
}

/* ── Pricing V2 ───────────────────────────────────────────── */
.v2-card--featured {
  background: #ffffff;
  border: 2px solid var(--v2-primary);
  box-shadow: var(--v2-shadow-lg), var(--v2-shadow-glow);
}

.v2-card--featured .card__price {
  color: var(--v2-primary);
}

.v2-card--featured .card__popular-tag {
  background: var(--v2-primary);
  color: #ffffff;
}

/* ── Footer V2 ────────────────────────────────────────────── */
.v2-footer {
  background: var(--v2-surface-alt);
  color: var(--v2-text);
  border-top: 1px solid var(--v2-border);
}

.v2-footer .footer__brand-name {
  color: var(--v2-text);
}

.v2-footer .footer__heading {
  color: var(--v2-text);
}

.v2-footer .footer__description,
.v2-footer .footer__link,
.v2-footer .footer__contact-item {
  color: var(--v2-text-muted);
}

.v2-footer .footer__link:hover {
  color: var(--v2-primary);
}

.v2-footer .footer__social-link {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  color: var(--v2-text-muted);
}

.v2-footer .footer__social-link:hover {
  background: var(--v2-primary);
  color: #ffffff;
  border-color: var(--v2-primary);
}

.v2-footer .footer__bottom {
  border-top-color: var(--v2-border);
  color: var(--v2-text-light);
}

.v2-footer .footer__wave {
  color: var(--v2-bg);
}