/* F7 Brasil — tema Loja pronta: quente, marca F7, ambiente convidativo para cadastro */
:root {
  --f7-red: #ff2800;
  --f7-red-light: #ff4d26;
  --f7-red-dark: #cc1f00;
  --f7-red-deep: #8b1200;
  --f7-wine: #6b1d2a;
  --f7-wine-deep: #3d0810;
  --f7-blue: #2563eb;
  --f7-blue-light: #3b82f6;
  --f7-blue-dark: #1d4ed8;
  --f7-navy: #521018;
  --f7-ink: #141414;
  --f7-ink-mid: #262626;
  --f7-charcoal: #525252;

  --hero-mesh:
    radial-gradient(ellipse 75% 60% at 85% 8%, rgba(255, 223, 0, 0.24), transparent 58%),
    radial-gradient(ellipse 60% 50% at 6% 92%, rgba(0, 156, 59, 0.38), transparent 52%),
    radial-gradient(ellipse 90% 70% at 12% -12%, rgba(160, 45, 65, 0.42), transparent 55%),
    radial-gradient(ellipse 55% 45% at 88% 5%, rgba(255, 40, 0, 0.14), transparent 50%),
    linear-gradient(168deg, #0a2210 0%, #145022 24%, #521018 50%, #6b1d2a 70%, #2a1208 100%);

  --page-bg: linear-gradient(180deg, #fafafa 0%, #fff8f6 35%, #ffede8 100%);
  --form-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 248, 246, 0.98) 55%, rgba(255, 240, 236, 0.94) 100%);
  --field-bg: rgba(255, 255, 255, 0.96);
  --field-bg-focus: #ffffff;
  --field-border: rgba(255, 40, 0, 0.38);
  --field-border-hover: rgba(255, 40, 0, 0.52);
  --field-border-focus: rgba(255, 40, 0, 0.72);
  --field-shadow: 0 1px 2px rgba(61, 8, 16, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --field-shadow-focus: 0 0 0 3px rgba(255, 40, 0, 0.14), 0 2px 6px rgba(61, 8, 16, 0.08);
  --text-main: #141414;
  --text-muted: #525252;
  --text-soft: #737373;
  --card-ring: rgba(255, 40, 0, 0.32);
  --section-divider: rgba(255, 40, 0, 0.14);
  --submit-area: rgba(255, 237, 232, 0.65);
  --step-badge: linear-gradient(135deg, var(--f7-red-light) 0%, var(--f7-red) 45%, var(--f7-red-dark) 100%);
  --accent: var(--f7-red);
  --plate-bg: rgba(255, 237, 232, 0.55);
  --plate-border: rgba(255, 77, 38, 0.45);

  --gradient-brand: linear-gradient(135deg, var(--f7-red-light) 0%, var(--f7-red) 45%, var(--f7-red-dark) 100%);
  --gradient-brand-hover: linear-gradient(135deg, #ff6b4a 0%, var(--f7-red-light) 50%, var(--f7-red) 100%);
  --gradient-text: linear-gradient(90deg, #ffb199, #ff2800, #ff5533, #ff2800);
  --shadow-brand: 0 14px 40px -10px rgba(255, 40, 0, 0.5), 0 6px 20px -8px rgba(61, 8, 16, 0.15);
}

html.reading-mode {
  --page-bg: linear-gradient(180deg, #d4ccc0 0%, #e3dcd2 35%, #ebe4da 100%);
  --form-bg: linear-gradient(180deg, #f7f2ea 0%, #f0e9df 100%);
  --field-bg: rgba(252, 249, 244, 0.96);
  --field-border: rgba(140, 120, 95, 0.55);
  --field-border-hover: rgba(120, 100, 75, 0.68);
  --field-border-focus: rgba(180, 120, 60, 0.85);
  --field-shadow: 0 1px 2px rgba(61, 50, 35, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --field-shadow-focus: 0 0 0 3px rgba(180, 120, 60, 0.16), 0 2px 6px rgba(61, 50, 35, 0.1);
  --section-divider: rgba(140, 120, 95, 0.22);
  --text-main: #3d3830;
  --text-muted: #5c554c;
  --text-soft: #7a7268;
  --card-ring: rgba(180, 162, 138, 0.35);
  --hero-mesh:
    radial-gradient(ellipse 70% 55% at 15% 0%, rgba(180, 120, 90, 0.22), transparent 55%),
    linear-gradient(165deg, #3a3530 0%, #4a433c 50%, #3a3530 100%);
  --step-badge: linear-gradient(135deg, #b45309, #92400e);
  --accent: #b45309;
}

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

.page-bg {
  background: var(--page-bg);
}

/* Fundo Copa + mesh — home, portal, consultas, pagamento, etc. */
body.f7-site-bg,
.hero-mesh,
.f7-site-shell {
  position: relative;
  overflow-x: hidden;
  background: var(--hero-mesh);
  isolation: isolate;
  min-height: 100vh;
}

body.f7-site-bg::after,
.hero-mesh::after,
.f7-site-shell::after {
  content: "";
  position: fixed;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.22;
  background-image: url("/br-copa-pattern.svg?v=202606101400");
  background-size: 260px 195px;
  background-repeat: repeat;
  transform: rotate(-7deg);
  transform-origin: center;
}

body.f7-site-bg::before,
.hero-mesh::before,
.f7-site-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body.f7-site-bg > *,
.hero-mesh > *,
.f7-site-shell > * {
  position: relative;
  z-index: 1;
}

/* Evita padrão duplicado quando hero-mesh está dentro do body.f7-site-bg */
body.f7-site-bg .hero-mesh,
body.f7-site-bg .f7-site-shell,
body.f7-site-bg .home-shell {
  background: transparent;
  isolation: auto;
  min-height: unset;
}

body.f7-site-bg .hero-mesh::before,
body.f7-site-bg .hero-mesh::after,
body.f7-site-bg .f7-site-shell::before,
body.f7-site-bg .f7-site-shell::after,
body.f7-site-bg .home-shell::before,
body.f7-site-bg .home-shell::after {
  content: none;
  display: none;
}

.form-card,
.panel-card {
  background: var(--form-bg);
}

.memory-line,
.f7-gradient-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.f7-kicker {
  color: rgba(255, 140, 110, 0.95);
  letter-spacing: 0.35em;
}

.f7-accent-line {
  color: #ffb199;
}

.f7-brand-badge {
  background: linear-gradient(145deg, rgba(255, 40, 0, 0.38), rgba(204, 31, 0, 0.22));
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 24px -8px rgba(255, 40, 0, 0.45);
}

.f7-logo-img {
  display: block;
  height: 2.65rem;
  width: auto;
  max-width: 100%;
}

.f7-logo-img--wide {
  height: 2.15rem;
}

.f7-mark-img {
  display: block;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
}

.f7-btn-primary {
  background: var(--gradient-brand);
  box-shadow: var(--shadow-brand);
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.f7-btn-primary:hover {
  background: var(--gradient-brand-hover);
  transform: translateY(-1px);
}

.f7-chip-red {
  background: #fff5f3;
  color: var(--f7-red-dark);
  border: 1.5px solid rgba(255, 77, 38, 0.4);
}

.f7-chip-dark {
  background: rgba(20, 20, 20, 0.04);
  color: var(--text-main);
  border: 1.5px solid rgba(20, 20, 20, 0.1);
}

.f7-glass-btn {
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: background 0.15s, border-color 0.15s;
}

.f7-glass-btn:hover {
  background: rgba(255, 40, 0, 0.22);
  border-color: rgba(255, 140, 110, 0.45);
}

.f7-btn-primary-sm {
  background: var(--gradient-brand);
  box-shadow: 0 6px 18px -4px rgba(255, 40, 0, 0.45);
  transition: background 0.2s, transform 0.15s;
}

.f7-btn-primary-sm:hover {
  background: var(--gradient-brand-hover);
}

.login-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.99) 0%, rgba(255, 248, 246, 0.98) 100%);
  border: 1.5px solid rgba(255, 40, 0, 0.18);
  box-shadow:
    0 24px 50px -20px rgba(255, 40, 0, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

.icon-tile-ferrari {
  background: linear-gradient(145deg, var(--f7-red-light) 0%, var(--f7-red) 55%, var(--f7-red-dark) 100%);
  box-shadow: 0 10px 28px -8px rgba(255, 40, 0, 0.55);
}

.icon-tile-ferrari-alt {
  background: linear-gradient(145deg, var(--f7-red-light) 0%, var(--f7-red-dark) 100%);
  box-shadow: 0 10px 28px -8px rgba(255, 40, 0, 0.4);
}

.icon-tile-facebook {
  background: linear-gradient(145deg, #42a5ff 0%, #1877f2 55%, #0c63d4 100%);
  box-shadow: 0 10px 28px -8px rgba(24, 119, 242, 0.55);
}

.icon-tile-glass {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Tema 2 — Azul confiança: formulário. Laterais = Copa (.f7-cadastro-sides-bg). */
body.theme-azul-confianca {
  --page-bg: linear-gradient(180deg, #f0f4ff 0%, #e8eefc 100%);
  --form-bg: #ffffff;
  --field-bg: #ffffff;
  --field-bg-focus: #ffffff;
  --field-border: #cbd5e1;
  --field-border-hover: #94a3b8;
  --field-border-focus: rgba(37, 99, 235, 0.65);
  --field-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --field-shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.14), 0 2px 6px rgba(15, 23, 42, 0.08);
  --text-main: #0f172a;
  --text-muted: #475569;
  --text-soft: #64748b;
  --card-ring: rgba(37, 99, 235, 0.22);
  --section-divider: rgba(37, 99, 235, 0.12);
  --submit-area: #eff6ff;
  --step-badge: linear-gradient(135deg, #3b82f6, #2563eb, #1d4ed8);
  --step-badge-shadow: rgba(37, 99, 235, 0.35);
  --accent: #2563eb;
  --plate-bg: #eff6ff;
  --plate-border: rgba(37, 99, 235, 0.35);
  --gradient-brand: linear-gradient(135deg, #ff4d26, #ff2800, #cc1f00);
  --gradient-brand-hover: linear-gradient(135deg, #ff6b4a, #ff4d26, #ff2800);
  --gradient-text: linear-gradient(90deg, #93c5fd, #dbeafe, #93c5fd);
  --shadow-brand: 0 12px 32px -10px rgba(255, 40, 0, 0.4);
  --lookup-f7-border: rgba(255, 40, 0, 0.4);
  --lookup-f7-text: #cc1f00;
  --lookup-f7-bg: #fff5f3;
  --lookup-f7-bg-hover: #ffe8e3;
  --lookup-f7-border-hover: rgba(255, 40, 0, 0.55);
  --lookup-fipe-border: rgba(37, 99, 235, 0.35);
  --lookup-fipe-text: #1d4ed8;
  --lookup-fipe-bg: #eff6ff;
  --lookup-fipe-bg-hover: #dbeafe;
  --lookup-fipe-border-hover: rgba(37, 99, 235, 0.5);
  --cadastro-welcome-bg: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, #eff6ff 100%);
  --cadastro-welcome-border: rgba(37, 99, 235, 0.18);
  --cadastro-welcome-shadow: 0 8px 24px -16px rgba(37, 99, 235, 0.28);
  --cadastro-welcome-kicker: #2563eb;
  --cadastro-welcome-accent: #2563eb;
}

body.theme-azul-confianca .f7-legal-banner--cadastro {
  background: rgba(240, 244, 255, 0.96);
  border-bottom-color: var(--card-ring);
}

body.theme-azul-confianca .cadastro-welcome {
  background: var(--cadastro-welcome-bg);
  border-color: var(--cadastro-welcome-border);
  box-shadow: var(--cadastro-welcome-shadow);
}

body.theme-azul-confianca .cadastro-welcome-kicker {
  color: var(--cadastro-welcome-kicker);
}

body.theme-azul-confianca .cadastro-welcome-title span {
  color: var(--cadastro-welcome-accent);
}

body.theme-azul-confianca #panel-cadastro .vehicle-data-card h3 {
  color: #1d4ed8;
}

/* Cadastro: faixa central clara + laterais com fundo Copa (mesh + bandeiras) */
.f7-cadastro-sides-bg {
  position: relative;
  overflow-x: hidden;
  background: var(--hero-mesh);
  isolation: isolate;
  min-height: 100vh;
}

.f7-cadastro-sides-bg::after {
  content: "";
  position: fixed;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.22;
  background-image: url("/br-copa-pattern.svg?v=202606101400");
  background-size: 260px 195px;
  background-repeat: repeat;
  transform: rotate(-7deg);
  transform-origin: center;
}

.f7-cadastro-sides-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.f7-cadastro-sides-bg > * {
  position: relative;
  z-index: 1;
}

.cadastro-center-lane {
  max-width: 56rem;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--page-bg);
  box-shadow:
    -24px 0 56px -36px rgba(15, 23, 42, 0.2),
    24px 0 56px -36px rgba(15, 23, 42, 0.2);
}

@media (max-width: 639px) {
  .cadastro-center-lane {
    box-shadow: none;
  }
}

body.theme-azul-confianca .cadastro-center-lane .signup-brand-tag {
  color: var(--text-muted);
}