/* Carrega a camada de polish existente (asf-enhancements.css), que estava órfã */
@import url("asf-enhancements.css");

/* Subscriber Section Styles */
.subscriber-header {
  text-align: center;
  margin-bottom: 24px;
}

.subscriber-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--secondary);
  margin-bottom: 8px;
}

.subscriber-subtitle {
  color: var(--gray-600);
  font-size: 15px;
}

.subscriber-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 8px;
}

.subscriber-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid transparent;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.subscriber-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-light);
}

.subscriber-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.subscriber-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.subscriber-card-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--secondary);
  margin: 0;
}

.subscriber-card-description {
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.5;
  margin: 0;
}

.subscriber-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #D4AF37, #B8860B);
  color: #1a1a1a;
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.subscriber-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.4);
}

.subscriber-btn.premium {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
}

.subscriber-btn.premium:hover {
  box-shadow: 0 6px 16px rgba(0, 168, 204, 0.4);
}

[data-theme="dark"] .subscriber-card {
  background: var(--gray-100);
}

[data-theme="dark"] .subscriber-card-title {
  color: var(--secondary-light);
}

.subscriber-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

/* ===== ASF Layout & Navigation Redesign ===== */
/* Modern glassmorphism nav, safe-area support, fixed FAB stack,
   keyboard focus states and responsive polish. */

/* Bottom Navigation: modern glass bar */
.bottom-nav {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 -4px 24px rgba(14, 36, 57, 0.10);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    height: auto;
    min-height: 64px;
    gap: 2px;
    scrollbar-width: none;
}
.bottom-nav .nav-item {
    min-width: 56px;
    flex: 0 1 72px;
    border-radius: 14px;
    padding: 6px 4px;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}
.bottom-nav .nav-item .label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1px;
}
.bottom-nav .nav-item.active {
    color: var(--primary-dark, #0088A8);
    background: linear-gradient(135deg, rgba(0,168,204,0.14), rgba(0,168,204,0.06));
}
.bottom-nav .nav-item.active::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: var(--primary, #00A8CC);
}
.bottom-nav .nav-item:active { transform: scale(0.94); }

/* Keep body padding in sync with taller safe-area nav */
body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }

/* Menu overflow sheet */
.asf-nav-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(14, 36, 57, 0.45);
    backdrop-filter: blur(2px);
    z-index: 1001;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.asf-nav-sheet-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}
.asf-nav-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1002;
    background: var(--white, #fff);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.18);
    padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateY(105%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    max-width: 640px;
    margin: 0 auto;
}
.asf-nav-sheet.open { transform: translateY(0); }
.asf-nav-sheet .sheet-handle {
    width: 40px;
    height: 4px;
    border-radius: 4px;
    background: var(--gray-300, #d4d4d4);
    margin: 0 auto 14px;
}
.asf-nav-sheet .sheet-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--gray-400, #9a9a9a);
    margin-bottom: 12px;
    padding: 0 4px;
}
.asf-nav-sheet .sheet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.asf-nav-sheet .sheet-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border: 1px solid var(--gray-200, #e5e5e5);
    border-radius: 16px;
    background: var(--light, #f8f9fa);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--secondary, #0E2439);
    transition: all 0.2s ease;
}
.asf-nav-sheet .sheet-item:hover {
    border-color: var(--primary, #00A8CC);
    background: rgba(0, 168, 204, 0.07);
    transform: translateY(-2px);
}
.asf-nav-sheet .sheet-item .icon { font-size: 22px; }

/* Sticky header polish */
header {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 16px rgba(14, 36, 57, 0.18);
}

/* Accessibility: visible keyboard focus */
.nav-item:focus-visible,
.sheet-item:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--primary, #00A8CC);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Dark theme support */
[data-theme="dark"] .bottom-nav {
    background: rgba(20, 24, 32, 0.88);
    border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .asf-nav-sheet { background: #1E2128; }
[data-theme="dark"] .asf-nav-sheet .sheet-item {
    background: #262B36;
    border-color: #333A47;
    color: #E8ECF0;
}

/* Desktop / wide screens: centered app nav */
@media (min-width: 900px) {
    .bottom-nav {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        bottom: 16px;
        border-radius: 22px;
        border: 1px solid rgba(0, 0, 0, 0.08);
        padding: 8px 12px;
        min-width: 480px;
        justify-content: center;
    }
    .bottom-nav .nav-item.active::before { display: none; }
    body { padding-bottom: 110px; }
}

@media (prefers-reduced-motion: reduce) {
    .asf-nav-sheet, .asf-nav-sheet-backdrop { transition: none; }
}

/* FABs: previously unstyled, now proper floating buttons */
.fab {
    position: fixed;
    bottom: 88px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--primary, #00A8CC), var(--primary-dark, #0088A8));
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    z-index: 998;
    box-shadow: 0 6px 20px rgba(0, 168, 204, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 26px rgba(0,168,204,0.5); }
.fab:active { transform: scale(0.95); }
.fab-share {
    position: fixed;
    bottom: 156px;
    right: 26px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--white, #fff);
    color: var(--secondary, #0E2439);
    font-size: 18px;
    cursor: pointer;
    z-index: 998;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
    transition: transform 0.2s ease;
}
.fab-share:hover { transform: translateY(-2px); }
.fab-share:active { transform: scale(0.94); }
#back-to-top { right: 28px !important; bottom: 212px !important; }

/* Sheet drag feedback: disable slide transition while dragging */
.asf-nav-sheet[style*="translateY"] { transition: none; }

/* ===== Header responsive fix ===== */
/* Prevent the 6-button action row from overflowing on phones */
.header-content {
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
}
.logo { flex-shrink: 0; }
.header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
    padding: 2px;
}
.header-actions::-webkit-scrollbar { display: none; }
.header-actions .icon-btn { flex-shrink: 0; }

@media (max-width: 600px) {
    header { padding: 10px 12px; }
    .logo-icon { width: 30px; height: 30px; }
    .logo-icon svg { width: 28px; height: 28px; }
    .header-actions { gap: 4px; }
    .header-actions .icon-btn {
        width: 38px !important;
        height: 38px !important;
        font-size: 17px !important;
        border-radius: 10px;
    }
}

@media (max-width: 380px) {
    .header-actions .icon-btn {
        width: 34px !important;
        height: 34px !important;
        font-size: 15px !important;
    }
}

/* ===== Global overflow & cookie banner fixes ===== */
/* Kill horizontal page scroll from oversized inline content (tables, fixed-width rows).
   'clip' (not 'hidden') so sticky header keeps working. */
html, body { overflow-x: clip; }

/* Wide tables scroll internally instead of breaking the page */
.content table, .section table, main table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Any media inside content can never exceed viewport */
img, video, svg, iframe { max-width: 100%; }

/* Cookie banner must not cover the bottom nav */
#cookie-consent-banner {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: 560px;
    margin: 0 auto;
    border-radius: 16px;
    z-index: 997 !important;
}
@media (min-width: 900px) {
    #cookie-consent-banner { bottom: 100px !important; }
}

/* Bottom nav: prevent 28px overflow on narrow phones */
@media (max-width: 480px) {
    .bottom-nav { padding-left: 4px; padding-right: 4px; gap: 0; }
    .bottom-nav .nav-item { min-width: 46px; flex: 1 1 0; }
    .bottom-nav .nav-item .label { font-size: 10px; }
}

/* Very narrow phones (<=360px): shrink nav items further */
@media (max-width: 360px) {
    .bottom-nav .nav-item { min-width: 40px; padding: 6px 1px; }
    .bottom-nav .nav-item .label { font-size: 9px; }
    .bottom-nav .nav-item .icon { font-size: 17px; }
}

/* ===== ASF Visual Design Pass 2 — hierarchy, rhythm & readability ===== */
/* Complementa a camada de navegação: tipografia, espaçamento de seções,
   alvos de toque e consistência visual. Não altera cores da marca. */

/* Seleção de texto com a cor da marca */
::selection { background: rgba(0, 168, 204, 0.25); }

/* Ritmo tipográfico: h2 consistentes em todas as seções */
h2, .section-title {
  color: var(--secondary, #0E2439);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
h2 { font-size: clamp(20px, 4.5vw, 26px); margin: 0 0 12px; }

/* Respiração vertical consistente entre seções */
section, .section { margin-bottom: 28px; }
section > p, .section > p { max-width: 65ch; }

/* Leitura confortável em desktop: conteúdo centralizado com largura máxima */
@media (min-width: 1024px) {
  main, .content { max-width: 1100px; margin-left: auto; margin-right: auto; }
  section, .section { margin-bottom: 40px; }
}

/* Alvos de toque mínimos de 44px (WCAG) sem quebrar botões pequenos existentes */
@media (pointer: coarse) {
  button, .btn, [role="button"] { min-height: 44px; }
}

/* Links de conteúdo: affordance clara */
.content a, .section a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.content a:hover, .section a:hover { color: var(--primary-dark, #0088A8); }

/* Cards: canto alinhado aos tokens do app */
.card { border-radius: 16px; }

/* Scroll suave respeitando movimento reduzido (reforço global) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Dark theme: títulos legíveis */
[data-theme="dark"] h2, [data-theme="dark"] .section-title { color: #E8ECF0; }

/* ===== ASF Visual Design Pass 3 — forms, buttons, media & motion ===== */

/* Transição suave entre tema claro/escuro */
body, .card, .subscriber-card, header, .bottom-nav {
  transition: background-color 0.25s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Botões: aparência consistente e feedback de toque */
button, .btn, [role="button"] {
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
button:active, .btn:active { transform: scale(0.97); }

/* Campos de formulário: foco claro e cantos alinhados */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  font-family: inherit;
  border-radius: 10px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--primary, #00A8CC);
  outline-offset: 1px;
  border-color: var(--primary, #00A8CC);
}
::placeholder { color: var(--gray-400, #9A9A9A); opacity: 1; }

/* Imagens: renderização suave */
img { height: auto; border-radius: 8px; }

/* Scrollbar discreta (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(0,168,204,0.35); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,168,204,0.55); }
::-webkit-scrollbar-track { background: transparent; }

/* Tabelas de conteúdo: legibilidade */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 10px; text-align: left; }
thead th { border-bottom: 2px solid var(--gray-200, #E5E5E5); }

/* h3/h4: ritmo secundário */
h3 { font-size: clamp(17px, 3.5vg, 20px); font-weight: 600; color: var(--secondary, #0E2439); }
h4 { font-size: 15px; font-weight: 600; color: var(--secondary, #0E2439); }
[data-theme="dark"] h3, [data-theme="dark"] h4 { color: #E8ECF0; }

/* Respeito a movimento reduzido (cobertura total) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Apps Dropdown: menu de apps compacto ─── */
.tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.tabs > .tab{flex:0 0 auto;}
.apps-dropdown{position:relative;display:inline-block;}
.apps-dropdown-toggle{white-space:nowrap;}
.apps-dropdown-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;z-index:2000;background:var(--white,#fff);border-radius:14px;box-shadow:0 12px 32px rgba(14,36,57,.22);padding:8px;min-width:230px;max-height:65vh;overflow-y:auto;border:1px solid rgba(14,36,57,.08);}
.apps-dropdown-menu.open{display:block;}
.apps-dropdown-menu .tab{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;margin:0;border:none;background:transparent;border-radius:10px;font-size:14px;font-weight:500;color:var(--secondary,#0E2439);cursor:pointer;text-align:left;white-space:nowrap;box-shadow:none;}
.apps-dropdown-menu .tab:hover,.apps-dropdown-menu .tab:focus{background:rgba(0,168,204,.1);color:var(--primary,#00A8CC);outline:none;}
[data-theme="dark"] .apps-dropdown-menu{background:#1E2128;border-color:#333A47;}
[data-theme="dark"] .apps-dropdown-menu .tab{color:#E8ECF0;}
@media(max-width:480px){.apps-dropdown-menu{position:fixed;left:12px;right:12px;top:120px;min-width:0;max-height:60vh;}}

/* ===== ASF: substituir logo SVG do header pela logo oficial PNG ===== */
.logo-icon svg { display: none; }
.logo-icon {
  background-image: url("assets/asf-logo-512.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 40px;
  height: 40px;
}