/* ================================================
   ONLINE SERVICES – Professional Redesign
   Palette: Navy #002855 | Gold #ffd700
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --navy:        #002855;
    --navy-dark:   #001c3d;
    --navy-light:  #003575; 
    --gold:        #ffd700;
    --gold-dark:   #e6c200;
    --bg:          #f0f4f8;
    --card-bg:     #ffffff;
    --text-main:   #1a2332;
    --text-muted:  #5a6a7a;
    --border:      #e2e8f0;
    --shadow-sm:   0 1px 3px rgba(0,40,85,.08), 0 1px 2px rgba(0,0,0,.06);
    --shadow-lg:   0 10px 20px rgba(0,40,85,.12), 0 4px 6px rgba(0,0,0,.05);
    --radius:      10px;
}

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

body {
    margin: 0; padding: 0;
    background: #ede5d8;
    background-image:
        repeating-linear-gradient(0deg, rgba(194,106,61,.025) 0, rgba(194,106,61,.025) 1px, transparent 1px, transparent 28px);
    font-family: 'Inter', 'Segoe UI', sans-serif;
    color: var(--ink);
    line-height: 1.6;
    overflow-x: hidden;
}

/* ── HERO HEADER ─────────────────────────────── */
.page-hero {
    background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 60%, var(--navy-light) 100%);
    position: relative;
    overflow: hidden;
    padding: 64px 24px 56px;
    text-align: center;
}
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
.page-hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gold), var(--gold-dark), var(--gold));
}

.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: .78rem;
    color: rgba(255,255,255,.55);
    margin-bottom: 22px;
    position: relative;
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.breadcrumb a           { color: rgba(255,255,255,.55); text-decoration: none; transition: color .2s; }
.breadcrumb a:hover      { color: var(--gold); }
.breadcrumb-sep          { color: rgba(255,255,255,.25); font-size: .72rem; }
.breadcrumb-current      { color: var(--gold); }

.hero-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    background: rgba(255,215,0,.12);
    border: 1.5px solid rgba(255,215,0,.35);
    border-radius: 16px;
    margin: 0 auto 20px;
    position: relative;
    z-index: 1;
}
.hero-icon svg { width: 30px; height: 30px; fill: var(--gold); }

.page-hero h1 {
    color: #fff;
    margin: 0 0 12px;
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: .5px;
    position: relative;
    z-index: 1;
}
.page-hero .hero-subtitle {
    color: rgba(255,255,255,.68);
    font-size: .98rem;
    max-width: 520px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* provider badge */
.provider-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,215,0,.15);
    border: 1px solid rgba(255,215,0,.35);
    color: var(--gold);
    font-size: .75rem;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px;
    margin-top: 16px;
    position: relative;
    z-index: 1;
    letter-spacing: .3px;
}
.provider-badge svg { width: 13px; height: 13px; fill: var(--gold); }

/* ── MAIN CONTENT ────────────────────────────── */
.os-page {
    max-width: 1180px;
    margin: 48px auto 80px;
    padding: 0 24px;
}

/* ── FALLBACK NOTICE ──────────────────────────── */
.os-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius);
    padding: 14px 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
    font-size: .875rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    gap: 8px;
}
.os-notice svg    { width: 18px; height: 18px; fill: var(--gold-dark); flex-shrink: 0; }
.os-notice a      { color: var(--navy); font-weight: 600; word-break: break-all; text-decoration: none; }
.os-notice a:hover { text-decoration: underline; }

/* ── EMBED PANEL ─────────────────────────────── */
.os-embed {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.embed-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(to right, rgba(0,40,85,.03), transparent);
    flex-wrap: wrap;
}
.embed-toolbar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    font-weight: 700;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: .4px;
}
.embed-toolbar-title svg { width: 16px; height: 16px; fill: var(--navy); }

.embed-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--navy);
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background .2s;
}
.embed-open-btn svg   { width: 12px; height: 12px; fill: #fff; }
.embed-open-btn:hover { background: var(--navy-light); }

.os-frame {
    width: 100%;
    height: min(82vh, 900px);
    min-height: 620px;
    border: 0;
    display: block;
    background: #fff;
}

/* ── RESPONSIVE ──────────────────────────────── */
@media (max-width: 640px) {
    .page-hero  { padding: 48px 16px 40px; }
    .os-page    { margin-top: 32px; padding: 0 16px; }
    .os-frame   { height: 78vh; min-height: 520px; }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* font-family: "Trebuchet MS", "Gill Sans", Arial, sans-serif; */
  color: var(--os-text);
  background:
    radial-gradient(circle at top, rgba(var(--brand-blue-rgb), 0.06) 0%, rgba(var(--brand-blue-rgb), 0) 26%),
    linear-gradient(180deg, #ffffff 0%, var(--os-bg) 100%);
  overflow-x: hidden;
}

.os-page {
  width: min(1180px, calc(100% - 44px));
  margin: 0 auto;
  padding: 30px 0 78px;
}

.os-header {
  background: var(--os-panel);
  border: 1px solid var(--os-border);
  border-radius: 22px;
  padding: 22px 22px 18px;
  box-shadow: var(--os-shadow-soft);
  position: relative;
  overflow: hidden;
}

.os-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, var(--brand-gold) 0%, rgba(var(--brand-gold-rgb), 0.25) 100%);
}

.os-header h1 {
  margin: 2px 0 8px;
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  letter-spacing: 0.2px;
}

.os-header p {
  margin: 0;
  line-height: 1.7;
  color: var(--os-muted);
  font-size: 0.98rem;
}

.os-header a {
  color: var(--brand-blue);
  font-weight: 800;
  text-decoration: none;
  word-break: break-word;
}

.os-header a:hover {
  text-decoration: underline;
}

.os-embed {
  margin-top: 18px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--os-border);
  background: #ffffff;
  box-shadow: var(--os-shadow);
}

.os-frame {
  width: 100%;
  height: min(82vh, 900px);
  min-height: 620px;
  border: 0;
  display: block;
  background: #ffffff;
}

@media (max-width: 720px) {
  .os-page {
    width: min(1180px, calc(100% - 28px));
    padding: 22px 0 62px;
  }

  .os-header {
    border-radius: 18px;
    padding: 18px 16px 14px;
  }

  .os-embed {
    border-radius: 18px;
  }

  .os-frame {
    height: 78vh;
    min-height: 560px;
  }
}