/* ══════════════════════════════════════════════════════════════════
   FAMOUS RALLY — INTERFAȚĂ iOS
   Se încarcă după rebrand.css. Pe telefon site-ul se comportă ca o
   aplicație iPhone: bară de taburi jos, titluri mari care urcă în bară,
   liste grupate ca în Setări, controale segmentate, comutatoare, alerte
   și bannere de notificare, foi care urcă de jos.
   Culorile sunt culorile de sistem iOS; accentul rămâne galbenul Famous Rally.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. CULORI DE SISTEM iOS ─────────────────────────────────── */
:root,[data-theme="dark"]{
  --surface:#000000;            /* systemBackground */
  --surface-2:#000000;          /* systemGroupedBackground */
  --card:#1C1C1E;               /* secondarySystemGroupedBackground */
  --card-2:#2C2C2E;             /* tertiarySystemGroupedBackground */
  --line:rgba(84,84,88,.6);     /* separator */
  --line-soft:rgba(84,84,88,.35);
  --line-strong:rgba(84,84,88,.9);
  --text:#FFFFFF;               /* label */
  --text-2:rgba(235,235,245,.78);
  --text-3:rgba(235,235,245,.6);/* secondaryLabel */
  --tint-1:rgba(118,118,128,.12);
  --tint-2:rgba(118,118,128,.24);/* tertiarySystemFill */
  --tint-3:rgba(118,118,128,.36);
  --ios-fill:rgba(118,118,128,.24);
  --ios-material:rgba(30,30,30,.72);
  --ios-segment-on:#636366;
  --nav-bg:rgba(22,22,24,.78);
  --shadow:none;
  --danger:#FF453A; --success:#30D158; --warning:#FF9F0A; --info:#0A84FF;
}
[data-theme="light"]{
  --surface:#F2F2F7; --surface-2:#F2F2F7; --card:#FFFFFF; --card-2:#F2F2F7;
  --line:rgba(60,60,67,.29); --line-soft:rgba(60,60,67,.16); --line-strong:rgba(60,60,67,.45);
  --text:#000000; --text-2:rgba(60,60,67,.85); --text-3:rgba(60,60,67,.6);
  --tint-1:rgba(118,118,128,.08); --tint-2:rgba(118,118,128,.12); --tint-3:rgba(118,118,128,.2);
  --ios-fill:rgba(118,118,128,.12);
  --ios-material:rgba(249,249,249,.8);
  --ios-segment-on:#FFFFFF;
  --nav-bg:rgba(249,249,249,.8);
  --shadow:0 1px 3px rgba(0,0,0,.06);
  --danger:#FF3B30; --success:#34C759; --warning:#FF9500; --info:#007AFF;
}
:root{ --r-md:12px; --r-lg:20px; --r-xl:26px; --ios-tab-h:50px }

html{-webkit-tap-highlight-color:transparent}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a,button{touch-action:manipulation}

/* apăsare ca pe iPhone: elementul se „adâncește" puțin */
.btn:active,.btn-primary:active,.btn-line:active,.ios-tab:active,.car-tile:active,.sc-card:active,
.sub-tab:active,.event-tab:active,.side-nav-item:active,.crew-chip:active,.premium-slide-card:active{
  transform:scale(.97) !important;opacity:.85;transition:transform .1s,opacity .1s}

/* tranziție lină între pagini (Safari 18.2+, Chrome 126+); bara de taburi rămâne pe loc */
@media(max-width:760px){@view-transition{navigation:auto}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
.ios-tabbar{view-transition-name:ios-tabbar}
.navbar{view-transition-name:ios-navbar}

/* ── 2. CONTROL SEGMENTAT (în loc de taburi-pastilă) ─────────── */
.event-tabs,.sub-tabs,.probe-tabs-row,#app-tabs,#crew-tabs{
  display:inline-flex !important;flex-wrap:nowrap;gap:0 !important;padding:2px !important;
  border-radius:9px !important;background:var(--ios-fill) !important;border:0 !important;
  box-shadow:none !important;backdrop-filter:none !important;max-width:100%;overflow-x:auto;scrollbar-width:none}
.event-tabs::-webkit-scrollbar,.sub-tabs::-webkit-scrollbar,.probe-tabs-row::-webkit-scrollbar{display:none}
.event-tabs .event-tab,.sub-tabs .sub-tab,.probe-tabs-row .probe-tab-btn{
  flex:1 0 auto;min-height:32px !important;padding:0 14px !important;margin:0 !important;border-radius:7px !important;
  background:transparent !important;box-shadow:none !important;color:var(--text) !important;
  font-size:13px !important;font-weight:600 !important;letter-spacing:-.01em !important;white-space:nowrap;
  transition:background .2s,box-shadow .2s !important}
.event-tabs .event-tab.active,.sub-tabs .sub-tab.active,.probe-tabs-row .probe-tab-btn.active{
  background:var(--ios-segment-on) !important;color:var(--text) !important;
  box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04) !important}
.event-tabs .event-tab i,.sub-tabs .sub-tab i{display:none}
.event-tabs{position:static !important;margin-bottom:22px}

/* ── 3. COMUTATOARE iOS pentru acorduri ─────────────────────── */
.check-row input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;flex:0 0 51px;width:51px !important;height:31px !important;margin:0 !important;
  border-radius:31px;background:var(--tint-3);position:relative;cursor:pointer;transition:background .25s}
.check-row input[type="checkbox"]::after{content:'';position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;
  background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06);transition:transform .25s cubic-bezier(.3,.7,.4,1.2)}
.check-row input[type="checkbox"]:checked{background:var(--success)}
.check-row input[type="checkbox"]:checked::after{transform:translateX(20px)}
.check-row{align-items:center !important;gap:14px !important;padding:12px 16px;margin-top:10px !important;
  border-radius:12px;background:var(--card-2);flex-direction:row-reverse;justify-content:space-between}
.check-row span{font-size:15px;line-height:1.4;color:var(--text)}

/* ── 4. LISTE GRUPATE (ca în Setări) ─────────────────────────── */
.spec-list,.reg-summary dl,.reg-done-facts,.next-facts{
  display:block !important;margin:0;padding:0;border-radius:12px;overflow:hidden;background:var(--card-2)}
.spec-list > div,.reg-summary dl > div,.reg-done-facts > div,.next-facts > div{
  display:flex !important;align-items:center;justify-content:space-between;gap:16px;min-height:44px;
  padding:11px 16px;margin:0;border:0 !important;position:relative}
.spec-list > div + div::before,.reg-summary dl > div + div::before,.reg-done-facts > div + div::before,.next-facts > div + div::before{
  content:'';position:absolute;top:0;left:16px;right:0;height:.5px;background:var(--line)}
.spec-list dt,.reg-summary dt,.reg-done-facts dt,.next-facts dt{
  margin:0 !important;font-size:17px !important;font-weight:400 !important;letter-spacing:-.02em !important;
  text-transform:none !important;color:var(--text) !important;font-family:var(--font-body) !important}
.spec-list dd,.reg-summary dd,.reg-done-facts dd,.next-facts dd{
  margin:0;font-size:17px;font-weight:400;text-align:right;color:var(--text-3) !important}
.next-facts{max-width:520px}
.car-panel .spec-list{margin:0 -4px}
.reg-summary{background:transparent !important;box-shadow:none !important;padding:0 !important}

/* ── 5. CÂMPURI DE FORMULAR iOS ─────────────────────────────── */
.premium-input,.search-input,.date-input,.score-input{
  border-radius:10px !important;background:var(--card-2) !important;box-shadow:none !important;
  min-height:44px;font-size:17px !important;caret-color:var(--accent)}
.premium-input:focus,.search-input:focus{box-shadow:0 0 0 2px var(--accent) !important;background:var(--card-2) !important}
.input-group label{font-size:13px !important;text-transform:uppercase !important;letter-spacing:.02em !important;
  color:var(--text-3) !important;margin:0 0 6px 16px !important;font-weight:400 !important}
select.premium-input{background-position:right 14px center !important}

/* ── 6. ALERTE ȘI NOTIFICĂRI (SweetAlert în stil iOS) ────────── */
.swal2-container.swal2-backdrop-show{background:rgba(0,0,0,.4) !important}
.swal2-popup:not(.swal2-toast){
  width:min(300px,86vw) !important;padding:0 !important;border-radius:14px !important;overflow:hidden;
  background:var(--ios-material) !important;backdrop-filter:blur(30px) saturate(190%);-webkit-backdrop-filter:blur(30px) saturate(190%);
  box-shadow:none !important}
.swal2-popup:not(.swal2-toast) .swal2-icon{transform:scale(.55);margin:10px auto -14px !important}
.swal2-popup:not(.swal2-toast) .swal2-title{padding:18px 16px 2px !important;font-size:17px !important;font-weight:600 !important;
  letter-spacing:-.02em !important;line-height:1.3 !important;color:var(--text) !important}
.swal2-popup:not(.swal2-toast) .swal2-html-container{margin:2px 16px 16px !important;font-size:13px !important;line-height:1.4 !important;color:var(--text) !important}
.swal2-popup:not(.swal2-toast) .swal2-html-container p{font-size:13px !important;margin:0 0 8px !important;letter-spacing:0 !important;color:var(--text) !important}
.swal2-popup:not(.swal2-toast) .swal2-actions{margin:0 !important;width:100%;flex-wrap:nowrap;gap:0;border-top:.5px solid var(--line)}
.swal2-popup:not(.swal2-toast) .swal2-styled{
  flex:1;margin:0 !important;min-height:44px;border-radius:0 !important;background:transparent !important;box-shadow:none !important;
  font-size:17px !important;font-weight:400 !important;color:var(--accent-text) !important;letter-spacing:-.02em !important}
.swal2-popup:not(.swal2-toast) .swal2-styled.swal2-confirm{font-weight:600 !important;order:2}
.swal2-popup:not(.swal2-toast) .swal2-styled.swal2-cancel{order:1;border-right:.5px solid var(--line) !important;color:var(--text-2) !important}
.swal2-popup:not(.swal2-toast) .swal2-styled:hover{background:var(--tint-1) !important}
.swal2-popup:not(.swal2-toast) .swal2-input,.swal2-popup:not(.swal2-toast) .swal2-textarea,.swal2-popup:not(.swal2-toast) .swal2-select{
  width:calc(100% - 32px) !important;margin:0 16px 14px !important;font-size:15px !important;min-height:38px;
  border-radius:8px !important;border:.5px solid var(--line) !important;background:var(--card) !important;box-shadow:none !important}
.swal2-popup:not(.swal2-toast):has(.swal2-input:not([style*="display: none"])),
.swal2-popup:not(.swal2-toast):has(.swal2-textarea:not([style*="display: none"])),
.swal2-popup:not(.swal2-toast):has(#qr-box),.swal2-popup:not(.swal2-toast):has(.swal2-image){width:min(340px,90vw) !important}
.swal2-validation-message{background:transparent !important;color:var(--danger) !important;font-size:13px !important}
/* notificările: bannerul de sus al iPhone-ului */
.swal2-container.swal2-top-end,.swal2-container.swal2-top-right{left:50% !important;right:auto !important;transform:translateX(-50%);top:8px !important}
.swal2-popup.swal2-toast{
  width:min(380px,94vw) !important;padding:12px 16px !important;border-radius:22px !important;
  background:var(--ios-material) !important;backdrop-filter:blur(30px) saturate(190%);-webkit-backdrop-filter:blur(30px) saturate(190%);
  box-shadow:0 10px 40px -10px rgba(0,0,0,.5) !important}
.swal2-popup.swal2-toast .swal2-title{font-size:15px !important;font-weight:600 !important;color:var(--text) !important;margin:0 8px !important;letter-spacing:-.01em !important}
.swal2-popup.swal2-toast .swal2-icon{transform:scale(.8);margin:0 !important}

/* ── 7. FOI CARE URCĂ DE JOS (modale) ───────────────────────── */
@media(max-width:760px){
  .modal-overlay{align-items:flex-end !important;padding:0 !important;background:rgba(0,0,0,.4) !important;backdrop-filter:none !important}
  .modal-overlay .glass-panel{border-radius:12px 12px 0 0 !important;max-height:94vh;padding-top:28px !important;
    background:var(--card) !important;animation:iosSheet .38s cubic-bezier(.2,.9,.3,1) !important}
  .modal-overlay .glass-panel::before{content:'';position:absolute;top:7px;left:50%;width:36px;height:5px;margin-left:-18px;
    border-radius:3px;background:var(--tint-3)}
  @keyframes iosSheet{from{transform:translateY(100%)}to{transform:none}}
}

/* ── 8. BARA DE TABURI ──────────────────────────────────────── */
.ios-tabbar{display:none}
@media(max-width:760px){
  .ios-tabbar{
    display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:1004;
    height:calc(var(--ios-tab-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
    background:var(--nav-bg);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
    border-top:.5px solid var(--line)}
  .ios-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding-top:4px;
    color:var(--text-3);text-decoration:none;font-size:10px;font-weight:500;letter-spacing:.01em}
  .ios-tab svg{width:26px;height:26px}
  .ios-tab.is-active{color:var(--accent-text)}
  .ios-tab.is-active svg{fill:var(--accent-a16)}
  html.has-tabbar body{padding-bottom:calc(var(--ios-tab-h) + env(safe-area-inset-bottom)) !important}
  /* bara de taburi înlocuiește meniul lateral */
  html.has-tabbar .navbar .burger,html.has-tabbar .navbar .hamburger-btn{display:none !important}
  html.has-tabbar .navbar .nav-links{display:none !important}
  /* bara demo stă deasupra taburilor */
  html.has-tabbar #demo-bar{bottom:calc(var(--ios-tab-h) + env(safe-area-inset-bottom)) !important;padding-bottom:10px !important}
  html.has-tabbar body.has-demo-bar{padding-bottom:calc(var(--ios-tab-h) + 70px + env(safe-area-inset-bottom)) !important}
  html.has-tabbar .app-banner,html.has-tabbar .consent-banner{bottom:calc(var(--ios-tab-h) + 10px + env(safe-area-inset-bottom))}
}

/* ── 9. BARA DE SUS + TITLUL MARE (telefon) ─────────────────── */
.ios-nav-title{display:none}
@media(max-width:760px){
  .navbar,.nav{height:calc(48px + env(safe-area-inset-top)) !important;padding-top:env(safe-area-inset-top) !important;
    background:var(--nav-bg) !important;backdrop-filter:saturate(180%) blur(20px) !important;-webkit-backdrop-filter:saturate(180%) blur(20px) !important;
    border-bottom:.5px solid transparent !important;transition:border-color .2s}
  html.has-tabbar .navbar{backdrop-filter:saturate(180%) blur(20px) !important}
  .navbar.scrolled,.navbar.ios-titled{border-bottom-color:var(--line) !important}
  .ios-nav-title{display:block;position:absolute;left:64px;right:64px;bottom:12px;text-align:center;pointer-events:none;
    font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s}
  .navbar.ios-titled .ios-nav-title{opacity:1;transform:none}
  .navbar.ios-titled .fr-logo__word{opacity:0}

  /* Large Title: titlurile paginilor ca în aplicațiile iOS */
  .page-hero{padding:calc(64px + env(safe-area-inset-top)) 16px 18px !important;background:var(--surface) !important;border:0 !important}
  .page-hero::before{display:none}
  .page-hero .eyebrow{font-size:13px !important;margin:0 !important}
  .page-hero .page-title,.page-title{font-size:34px !important;line-height:1.12 !important;letter-spacing:-.02em !important;font-weight:700 !important;text-align:left}
  .page-hero .page-sub{font-size:15px !important;color:var(--text-3) !important}
  .hero-title{font-size:34px !important;line-height:1.1 !important;letter-spacing:-.02em !important}
  #car-title{font-size:34px !important;letter-spacing:-.02em !important}
  .car-page{padding-top:calc(64px + env(safe-area-inset-top)) !important;padding-inline:16px !important}

  /* conținut: margini de 16px și carduri iOS */
  .app-shell{padding:0 16px 32px !important;gap:20px !important}
  .panel,.side-card,.car-panel,.glass-panel:not(.modal-overlay .glass-panel){border-radius:12px !important}
  .panel-head{padding:14px 16px !important}
  .panel-body{padding:16px !important}
  .panel-title,.car-panel__title{font-size:20px !important}
  .side-card-label{font-size:13px !important;text-transform:uppercase !important;letter-spacing:.02em !important;color:var(--text-3) !important}

  /* secțiunile primei pagini: titluri de secțiune iOS (Title 1) */
  .sec-head h2,.numbers h2,.final-cta h2{font-size:28px !important;letter-spacing:-.02em !important}
  .sec-head{align-items:flex-start !important;text-align:left !important}
  .featured .sec-head,.home-gallery .sec-head,.editions .sec-head,#crew-block .sec-head,#sponsors-block .sec-head{align-items:flex-start !important;text-align:left}
  .featured .sec-head > div,.home-gallery .sec-head > div,.editions .sec-head > div,#crew-block .sec-head > div,#sponsors-block .sec-head > div{align-items:flex-start}
  .sec-head .side{text-align:left}
  .next,.featured,.home-gallery,.people,.editions,.numbers,.final-cta{padding-block:44px !important;padding-inline:16px !important}
  .wrap{max-width:none}
  .next-card,.number,.steps li,.crew-chip,.sponsor,.partner-cta,.car-tile,.premium-slide-card{border-radius:16px !important}
  .numbers .wrap,.numbers{align-items:flex-start;text-align:left}
  .numbers h2{margin-bottom:24px !important}

  /* hero-ul primei pagini, compact */
  .hero{padding-top:calc(76px + env(safe-area-inset-top)) !important}
  .hero h1{font-size:44px !important;letter-spacing:-.035em !important}
  .hero-desc{font-size:17px !important}
  .hero-shot{height:56vw !important;margin-top:32px !important}
  .hero-video{border-radius:16px !important}

  /* butoane iOS: 50px, colțuri de 14 */
  .btn,.btn-primary,.btn-line,.btn-glass,.btn-outline,.btn-dark{min-height:50px !important;font-size:17px !important;font-weight:600 !important;border-radius:14px !important}
  .nav-links .btn-dark{border-radius:14px !important}

  /* bara de trimitere a formularului */
  .reg-submit-bar{border-radius:0 !important;margin:0 -16px;background:var(--nav-bg) !important;
    backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-top:.5px solid var(--line) !important}

  /* subsolul nu mai e nevoie de logo mare */
  footer{padding-bottom:24px !important}
}

/* butonul de închidere al foilor: cerc gri, ca pe iPhone */
.close-btn{width:30px !important;height:30px !important;min-height:30px !important;padding:0 !important;border-radius:50% !important;
  background:var(--tint-2) !important;box-shadow:none !important;border:0 !important;color:var(--text-3) !important;font-size:17px !important}
.close-btn:hover{background:var(--tint-3) !important;color:var(--text) !important}

/* alertele: fără contur de focus pe butoane, ca pe iPhone */
.swal2-popup .swal2-styled:focus,.swal2-popup .swal2-styled:focus-visible{outline:none !important;box-shadow:none !important}

@media(max-width:760px){
  /* bare cu butoane în dreapta (înscriere, garaj): titlul stă între logo și butoane */
  .navbar:has(> div) .ios-nav-title{left:56px;right:150px;text-align:left}
  /* garaj: tabul paginii curente îl arată deja bara de jos */
  .navbar .nav-tab-btn.nav-tab-active{display:none !important}
  #delete-account-btn{width:36px;height:36px;min-height:36px !important;padding:0 !important;border-radius:50% !important}
  .navbar .btn-danger-outline{min-height:34px !important;border-radius:17px !important;font-size:14px !important}
}

/* ── 10. MODUL APLICAȚIE (deschis de pe ecranul de start) ────── */
html.is-standalone body{overscroll-behavior-y:none}
html.is-standalone footer{display:none}
html.is-standalone .theme-toggle{display:none}