/* ═══════════════════════════════════════════════
   ALPAX FINANCIAL LAB v2.1 — Mobile-first Accordion
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Playfair+Display:wght@700&display=swap');

:root {
  --afl-gold:     #b08d57;
  --afl-gold-l:   #d4b87c;
  --afl-gold-xl:  rgba(176,141,87,.07);
  --afl-ink:      #1a1a2e;
  --afl-slate:    #3d3d56;
  --afl-muted:    #888899;
  --afl-border:   #e8e8ef;
  --afl-bg:       #f5f4f1;
  --afl-card:     #ffffff;
  --afl-r:        14px;
  --afl-font:     'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --afl-display:  'Playfair Display', Georgia, serif;
  --afl-ease:     .3s cubic-bezier(.4,0,.2,1);
}

/* ── Reset & Container ── */
.afl { width:100%; max-width:720px; margin:24px auto; font-family:var(--afl-font); color:var(--afl-ink); -webkit-font-smoothing:antialiased; }
.afl *, .afl *::before, .afl *::after { box-sizing:border-box; }
.afl button { font-family:inherit; }

/* ── Header ── */
.afl-header {
  background: linear-gradient(135deg, #1a1a2e 0%, #272742 100%);
  border-radius: var(--afl-r) var(--afl-r) 0 0;
  padding: 24px 20px 16px;
  position: relative;
  overflow: hidden;
}
.afl-header::after {
  content:''; position:absolute; top:-40px; right:-40px;
  width:160px; height:160px; border-radius:50%;
  background: radial-gradient(circle, rgba(176,141,87,.12) 0%, transparent 70%);
  pointer-events:none;
}
.afl-brand { display:flex; align-items:center; gap:14px; position:relative; z-index:1; }
.afl-logo {
  width:46px; height:46px; border-radius:11px;
  object-fit:contain; background:#fff; padding:3px;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.afl-title {
  font-family:var(--afl-display); font-size:1.2rem; font-weight:700;
  color:#fff; margin:0; line-height:1.2; letter-spacing:-.01em;
}
.afl-sub { font-size:.78rem; color:var(--afl-gold-l); margin:3px 0 0; }

/* ── Search ── */
.afl-search-wrap {
  position:relative; margin-top:14px; z-index:1;
}
.afl-search-icon {
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:rgba(255,255,255,.4); pointer-events:none;
}
.afl-search {
  width:100%; padding:11px 14px 11px 40px;
  border:1px solid rgba(255,255,255,.12); border-radius:10px;
  background:rgba(255,255,255,.08); backdrop-filter:blur(4px);
  font-family:var(--afl-font); font-size:.88rem; color:#fff;
  transition:all var(--afl-ease); outline:none;
}
.afl-search::placeholder { color:rgba(255,255,255,.35); }
.afl-search:focus {
  background:rgba(255,255,255,.14);
  border-color:var(--afl-gold);
  box-shadow:0 0 0 3px rgba(176,141,87,.2);
}

/* ── Sections (accordion) ── */
.afl-sections {
  background:var(--afl-bg);
  border-left:1px solid var(--afl-border);
  border-right:1px solid var(--afl-border);
}
.afl-section { border-bottom:1px solid var(--afl-border); }
.afl-section:last-child { border-bottom:none; }

.afl-section-header {
  appearance:none; border:none; background:var(--afl-card);
  width:100%; display:flex; align-items:center; gap:14px;
  padding:16px 18px; cursor:pointer;
  transition:background var(--afl-ease);
  text-align:left;
}
.afl-section-header:hover { background:var(--afl-bg); }
.afl-section-header:active { background:#eeedf0; }

.afl-section-icon { font-size:1.5rem; flex-shrink:0; width:36px; text-align:center; }
.afl-section-info { flex:1; min-width:0; }
.afl-section-label { display:block; font-weight:600; font-size:.95rem; color:var(--afl-ink); }
.afl-section-desc { display:block; font-size:.78rem; color:var(--afl-muted); margin-top:2px; }

.afl-section-count {
  flex-shrink:0; background:var(--afl-bg); border-radius:999px;
  width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:600; color:var(--afl-muted);
}

.afl-chevron {
  width:18px; height:18px; flex-shrink:0; color:var(--afl-muted);
  transition:transform var(--afl-ease);
}
.afl-section.is-open .afl-chevron { transform:rotate(180deg); }
.afl-section.is-open .afl-section-header {
  background:var(--afl-gold-xl);
  border-bottom:1px solid var(--afl-border);
}
.afl-section.is-open .afl-section-count {
  background:var(--afl-gold); color:#fff;
}

/* ── Section body (collapsible) ── */
.afl-section-body {
  max-height:0; overflow:hidden;
  transition:max-height .35s cubic-bezier(.4,0,.2,1);
}
.afl-section.is-open .afl-section-body {
  max-height:600px;
}

/* ── Calculator items ── */
.afl-items { padding:4px 10px 8px; }

.afl-item {
  appearance:none; border:none;
  background:var(--afl-card); border:1px solid var(--afl-border);
  border-radius:10px; width:100%;
  display:flex; align-items:center; gap:12px;
  padding:14px 14px; margin:4px 0;
  cursor:pointer; text-align:left;
  transition:all var(--afl-ease);
}
.afl-item:hover {
  border-color:var(--afl-gold);
  box-shadow:0 2px 12px rgba(176,141,87,.12);
  transform:translateX(3px);
}
.afl-item:active {
  transform:scale(.98);
  background:var(--afl-gold-xl);
}
.afl-item.is-active {
  border-color:var(--afl-gold);
  background:var(--afl-gold-xl);
  box-shadow:inset 3px 0 0 var(--afl-gold);
}

.afl-item-icon { font-size:1.15rem; flex-shrink:0; width:28px; text-align:center; }
.afl-item-info { flex:1; min-width:0; }
.afl-item-label { display:block; font-weight:600; font-size:.88rem; color:var(--afl-ink); line-height:1.3; }
.afl-item-desc { display:block; font-size:.74rem; color:var(--afl-muted); margin-top:1px; }

.afl-arrow {
  width:18px; height:18px; flex-shrink:0; color:var(--afl-muted);
  opacity:0; transform:translateX(-4px);
  transition:all var(--afl-ease);
}
.afl-item:hover .afl-arrow { opacity:1; transform:translateX(0); color:var(--afl-gold); }

/* ── Search results ── */
.afl-search-results {
  background:var(--afl-bg);
  border-left:1px solid var(--afl-border);
  border-right:1px solid var(--afl-border);
  padding:8px 10px;
}
.afl-search-results[hidden] { display:none; }
.afl-search-item.is-hidden { display:none; }

.afl-no-results {
  text-align:center; padding:32px 16px;
  color:var(--afl-muted); font-size:.9rem;
}
.afl-no-results[hidden] { display:none; }

/* ── PTZ Notice ── */
.afl-notice {
  padding:12px 20px; font-size:.8rem; color:#92620e;
  background:#fffbeb; line-height:1.5;
  border-left:1px solid var(--afl-border);
  border-right:1px solid var(--afl-border);
}
.afl-notice[hidden] { display:none; }
.afl-notice a { color:#7c530b; text-decoration:underline; font-weight:600; }

/* ── Viewer ── */
.afl-viewer {
  background:var(--afl-card);
  border:1px solid var(--afl-border);
  border-top:3px solid var(--afl-gold);
  border-radius:0 0 var(--afl-r) var(--afl-r);
  overflow:hidden;
  animation:afl-slideUp .3s ease;
}
.afl-viewer[hidden] { display:none; }

@keyframes afl-slideUp {
  from { opacity:0; transform:translateY(12px); }
  to { opacity:1; transform:translateY(0); }
}

.afl-viewer-bar {
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--afl-border);
  background:var(--afl-bg);
}

.afl-back {
  appearance:none; border:1px solid var(--afl-border);
  background:var(--afl-card); border-radius:8px;
  padding:7px 14px 7px 10px;
  display:flex; align-items:center; gap:4px;
  font-size:.82rem; font-weight:600; color:var(--afl-slate);
  cursor:pointer; transition:all var(--afl-ease);
  white-space:nowrap;
}
.afl-back svg { width:16px; height:16px; }
.afl-back:hover { border-color:var(--afl-gold); color:var(--afl-gold); }

.afl-viewer-label {
  font-weight:600; font-size:.9rem; color:var(--afl-ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ── Iframe ── */
.afl-iframe-wrap { position:relative; min-height:300px; }

.afl-iframe {
  width:100%; border:0; display:block;
  min-height:600px;
  transition:opacity .3s;
}
.afl-iframe.is-loading { opacity:.15; }

.afl-loader {
  position:absolute; top:100px; left:50%; transform:translateX(-50%);
  z-index:2; pointer-events:none;
  opacity:0; transition:opacity .3s;
}
.afl-loader.is-visible { opacity:1; }
.afl-spinner {
  width:30px; height:30px;
  border:3px solid var(--afl-border);
  border-top-color:var(--afl-gold);
  border-radius:50%;
  animation:afl-spin .7s linear infinite;
}
@keyframes afl-spin { to{transform:rotate(360deg)} }

/* ── Bottom rounding when no viewer ── */
.afl-sections:last-child,
.afl-search-results:last-child { border-radius:0 0 var(--afl-r) var(--afl-r); }
.afl-section:last-child .afl-section-header { border-radius:0 0 var(--afl-r) var(--afl-r); }
.afl-section:last-child.is-open .afl-section-header { border-radius:0; }

/* ── Desktop: wider cards in 2 columns ── */
@media (min-width:640px) {
  .afl { max-width:800px; }
  .afl-header { padding:28px 28px 18px; }
  .afl-title { font-size:1.35rem; }
  .afl-items { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:8px 14px 12px; }
  .afl-item { margin:0; }
  .afl-section-header { padding:18px 24px; }
  .afl-search-results { padding:8px 14px; }
  .afl-search-results .afl-items { grid-template-columns:1fr 1fr; }
}

@media (min-width:1024px) {
  .afl { max-width:960px; }
  .afl-items { grid-template-columns:1fr 1fr 1fr; }
  .afl-search-results .afl-items { grid-template-columns:1fr 1fr 1fr; }
}