/* =====================================================================
   Babifly UI — shared visual layer (Havashenasi app style)
   Loaded AFTER each page's own <style>. Appearance only: no markup,
   IDs, behaviour or icons are changed by this file.
   ===================================================================== */

:root{
  /* existing site tokens, retuned (pages keep using the same names) */
  --sky-deep:#0B2545;
  --sky-dusk:#10294B;
  --sky-dusk-2:#163560;
  --thermal:#FF9F1C;
  --thermal-dim:#FFB44D;
  --contour:#19CBE3;
  --cloud:#F7FAFC;
  --cloud-dim:rgba(247,250,252,.68);
  --ink:#071A33;
  --line:rgba(255,255,255,.14);
  --danger:#FF5A76;

  /* new tokens */
  --bf-teal:#19CBE3;
  --bf-faint:rgba(247,250,252,.46);
  --bf-card:rgba(255,255,255,.065);
  --bf-card-hover:rgba(255,255,255,.09);
  --bf-card-solid:#10294B;
  --bf-line:rgba(255,255,255,.13);
  --bf-line-soft:rgba(255,255,255,.07);
  --bf-shadow:0 18px 50px rgba(0,0,0,.28);
  --bf-r-card:26px;
  --bf-r-tile:18px;
  --bf-r-field:14px;
}

/* ---------- page backdrop: glows + drifting wind contours ---------- */
html{background:var(--sky-deep) !important;}
body{background:transparent !important;color:var(--cloud);font-family:'Vazirmatn',Tahoma,sans-serif;}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px 700px at 88% 6%,rgba(25,203,227,.18),transparent 70%),
    radial-gradient(800px 700px at 6% 96%,rgba(255,159,28,.10),transparent 70%),
    var(--sky-deep);
}
body::after{
  content:"";position:fixed;top:-10%;bottom:-10%;left:-20%;right:-20%;z-index:-1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 1000' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.045)' stroke-width='2'%3E%3Cpath d='M0 120 C 200 80, 380 170, 600 120 S 1000 60, 1400 130'/%3E%3Cpath d='M0 260 C 240 220, 420 310, 660 250 S 1060 200, 1400 270'/%3E%3Cpath d='M0 410 C 180 370, 400 460, 620 400 S 1020 350, 1400 420'/%3E%3Cpath d='M0 560 C 220 520, 440 610, 680 550 S 1080 500, 1400 575'/%3E%3Cpath d='M0 710 C 200 670, 420 760, 640 700 S 1040 650, 1400 720'/%3E%3Cpath d='M0 860 C 240 820, 460 910, 700 850 S 1100 800, 1400 870'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat;
  animation:bf-drift 38s linear infinite alternate;
}
@keyframes bf-drift{from{transform:translateX(0)}to{transform:translateX(-7%)}}
@media (prefers-reduced-motion:reduce){body::after{animation:none}}

::selection{background:rgba(25,203,227,.35);color:#fff;}
:focus-visible{outline:2px solid var(--bf-teal);outline-offset:2px;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:100px;border:2px solid transparent;background-clip:padding-box;}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28);background-clip:padding-box;}

/* ---------- typography ---------- */
h1,h2,h3,h4{color:var(--cloud);letter-spacing:-.2px;}
h1{font-weight:900;}
h2,h3{font-weight:800;}
main p, main li, .lead{color:var(--cloud-dim);}
main a:not([class]){color:var(--bf-teal);text-decoration:none;font-weight:700;}
main a:not([class]):hover{text-decoration:underline;}

/* ---------- surfaces ---------- */
.card, .form-card, .stat-box, .feature-item, .contact-box, .contact-direct,
.rank-table, .mobile-tools-grid, .cta-box{
  background:var(--bf-card) !important;
  border:1px solid var(--bf-line) !important;
  border-radius:var(--bf-r-card) !important;
  box-shadow:var(--bf-shadow);
}
.stat-box, .feature-item, .contact-direct{border-radius:var(--bf-r-tile) !important;}
.card{transition:transform .25s ease, background .2s ease, box-shadow .25s ease;}
.card:hover{transform:translateY(-3px);background:var(--bf-card-hover) !important;box-shadow:0 22px 56px rgba(0,0,0,.34);}

/* ---------- buttons ---------- */
.btn-primary, .btn-submit, .nav-cta, .ld-submit, .cta-box a{
  background:var(--thermal) !important;color:var(--sky-deep) !important;
  border:0 !important;border-radius:999px !important;font-weight:800 !important;
  box-shadow:0 8px 22px rgba(255,159,28,.28);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-primary:hover, .btn-submit:not(:disabled):hover, .nav-cta:hover, .ld-submit:hover, .cta-box a:hover{
  transform:translateY(-2px);box-shadow:0 12px 30px rgba(255,159,28,.4);filter:brightness(1.04);
}
.btn-submit:disabled{box-shadow:none;}
.btn-ghost{
  background:transparent !important;color:var(--cloud) !important;
  border:1px solid var(--bf-line) !important;border-radius:999px !important;font-weight:700 !important;
  transition:border-color .18s ease, background .18s ease;
}
.btn-ghost:hover{border-color:rgba(25,203,227,.6) !important;background:rgba(25,203,227,.08) !important;}

/* ---------- forms ---------- */
main input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
main textarea, main select{
  background:rgba(255,255,255,.06) !important;color:var(--cloud) !important;
  border:1px solid var(--bf-line) !important;border-radius:var(--bf-r-field) !important;
  padding:12px 14px !important;font-family:inherit !important;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
main input::placeholder, main textarea::placeholder{color:var(--bf-faint);}
main input:focus, main textarea:focus, main select:focus{
  outline:none !important;border-color:var(--bf-teal) !important;
  box-shadow:0 0 0 3px rgba(25,203,227,.18) !important;background:rgba(255,255,255,.08) !important;
}
main select option{background:var(--bf-card-solid);color:var(--cloud);}
main label{color:var(--cloud-dim);font-weight:700;}
input[type=checkbox], input[type=radio]{accent-color:var(--bf-teal);}

/* ---------- section headings (homepage panels & lists) ---------- */
.panel-head .tag{
  display:inline-flex !important;align-items:center;
  color:var(--bf-teal) !important;font-size:.74rem !important;letter-spacing:.5px !important;font-weight:800 !important;
  padding:4px 12px;border-radius:999px;border:1px solid rgba(25,203,227,.45);background:rgba(25,203,227,.08);
}
.panel-head .tag:empty{display:none !important;}
.panel-head h2{font-weight:900 !important;}
.panel-head-link:hover h2{color:var(--thermal) !important;}
.see-all{
  display:inline-flex;align-items:center;height:36px;padding:0 16px !important;
  border:1px solid var(--bf-line) !important;border-radius:999px;color:var(--cloud-dim) !important;
  font-size:.84rem !important;font-weight:700 !important;transition:all .18s ease;
}
.see-all:hover{color:var(--cloud) !important;border-color:rgba(25,203,227,.6) !important;background:rgba(25,203,227,.08);}

/* ---------- tables (rankings) ---------- */
.rank-table{overflow:hidden;}
.rank-row{border-bottom:1px solid var(--bf-line-soft) !important;}
.rank-row:last-child{border-bottom:0 !important;}
.rank-row.head{background:rgba(255,255,255,.03) !important;color:var(--bf-faint) !important;font-weight:700;}
.rank-row:not(.head):hover{background:rgba(255,255,255,.05) !important;}
.rank-row.top .rank-num{color:var(--thermal) !important;font-weight:900;}
.pilot-avatar{background-color:#163560;box-shadow:0 0 0 1px var(--bf-line);}
.pilot-sep{color:var(--bf-faint) !important;}
.bar-cell{background:var(--bf-line-soft) !important;border-radius:99px !important;}
.bar-fill{background:linear-gradient(90deg,var(--bf-teal),var(--thermal)) !important;border-radius:99px !important;}
.pts-cell, .stat-cell{color:var(--thermal) !important;font-weight:800 !important;}

/* ---------- cards: media & body ---------- */
.card-media{background-color:#163560;}
.card-media .badge{background:rgba(8,27,53,.78) !important;border:1px solid rgba(255,255,255,.14);font-weight:700;}
.card-body h3{font-weight:800;}
.card-body .date{color:var(--bf-faint) !important;}

/* ---------- notice boxes ---------- */
.warning-box{
  background:rgba(255,159,28,.12) !important;border:1px solid rgba(255,159,28,.42) !important;
  color:#FFD7A3 !important;border-radius:var(--bf-r-tile) !important;line-height:2;
}
.warning-box strong{color:#FFE6C4;}
.status-box{border-radius:var(--bf-r-field) !important;}

/* =====================================================================
   PAGE: homepage
   ===================================================================== */
.banner-hero img{border-radius:0 0 28px 28px;}
.hero{background:transparent !important;}
.hero .contour-lines{opacity:.16 !important;}
.eyebrow{border-radius:999px !important;background:rgba(255,159,28,.12) !important;border-color:rgba(255,159,28,.35) !important;}
.hero-main h1{letter-spacing:-.5px;}
.instrument-strip{
  margin:6px max(4vw, calc((100% - 1200px) / 2 + 4vw)) 0 !important;
  background:var(--bf-card) !important;border:1px solid var(--bf-line) !important;border-radius:var(--bf-r-card);
  overflow:hidden;box-shadow:var(--bf-shadow);
}
.instrument{border-left:1px solid var(--bf-line-soft) !important;}
.instrument:hover{background:rgba(25,203,227,.07) !important;}
.instrument .val{font-weight:900 !important;}
.instrument .label{color:var(--bf-faint) !important;}
.mobile-tools-head{font-weight:900 !important;}
.tool-cell{border-radius:var(--bf-r-tile) !important;}
.tool-cell:hover, .tool-cell:active{background:rgba(255,255,255,.07) !important;color:var(--cloud) !important;}
@media (max-width:820px){
  .hero-main{border-radius:var(--bf-r-card) !important;box-shadow:var(--bf-shadow);border:1px solid var(--bf-line);}
  .instrument-strip{margin:0 4vw !important;}
  /* season badge centred in the row, whatever the width of the account button beside it */
  #mobile-hero-footer-row{display:grid !important;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;}
  #mobile-hero-footer-row > :first-child{justify-self:start;min-width:0;}
  #mobile-hero-footer-row .eyebrow{grid-column:2;justify-self:center;text-align:center;}
  #mobile-hero-footer-row .eyebrow #hero-eyebrow{white-space:nowrap;}
}

/* =====================================================================
   PAGES: about / contact / privacy / terms
   ===================================================================== */
header.topbar{background:transparent !important;padding:4px 6vw !important;}
.updated{
  display:inline-flex;align-items:center;padding:4px 12px;border-radius:999px;
  border:1px solid rgba(25,203,227,.4);color:var(--bf-teal) !important;background:rgba(25,203,227,.07);font-size:.78rem !important;font-weight:700;
}
.stat-box{padding:18px 12px !important;}
.stat-box .num{color:var(--thermal) !important;font-weight:900 !important;font-size:1.7rem !important;}
.stat-box .lbl{color:var(--bf-faint) !important;}
.feature-item{transition:background .2s ease, border-color .2s ease;}
.feature-item:hover{background:var(--bf-card-hover) !important;border-color:rgba(25,203,227,.35) !important;}
.feature-item .title{font-weight:800 !important;}
.cta-box{padding:30px 24px !important;}
.cta-box p{color:var(--cloud) !important;font-weight:700;font-size:1.02rem;}
.cta-box a{padding:13px 32px !important;}
.contact-direct a{color:var(--bf-teal) !important;}
.contact-box strong{color:var(--cloud);}
.contact-box a{color:var(--bf-teal) !important;font-weight:700;text-decoration:none;}
.form-card{padding:26px 22px !important;}


/* =====================================================================
   BATCH 2 — every remaining page
   ===================================================================== */

/* ---------- more surfaces ---------- */
.step-body, .faq-item, .stat-card, .flights-table, .members-table, .submission-card,
.upload-box, #guest-block .box, .model-bar, .data-table, .final-cta{
  background:var(--bf-card) !important;
  border:1px solid var(--bf-line) !important;
  border-radius:var(--bf-r-card) !important;
  box-shadow:var(--bf-shadow);
}
.stat-card, .faq-item, .submission-card, .upload-box{border-radius:var(--bf-r-tile) !important;}
.data-table, .flights-table, .members-table{overflow:hidden;}
.upload-box{border-style:dashed !important;border-color:rgba(25,203,227,.45) !important;}
.upload-box:hover{background:rgba(25,203,227,.07) !important;}
.modal-box{
  background:var(--bf-card-solid) !important;border:1px solid var(--bf-line) !important;
  border-radius:28px !important;box-shadow:0 30px 80px rgba(0,0,0,.55) !important;
}
.stat-card .num, .stat-card .value, .stat-card .val{color:var(--thermal);font-weight:900;}
.step-num{
  background:var(--thermal) !important;color:var(--sky-deep) !important;border:0 !important;
  font-weight:900 !important;box-shadow:0 0 0 6px rgba(255,159,28,.15) !important;
}

/* ---------- tabs, chips & segmented controls: active = teal ---------- */
.tab-btn, .flight-type-tab, .metric-chip, .seg button, .side-nav button, .mode-btn, .model-opt, .model-opt-sm{
  border-radius:999px !important;border:1px solid var(--bf-line) !important;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.side-nav button{border-radius:var(--bf-r-tile) !important;}
.tab-btn:not(.active), .flight-type-tab:not(.active), .metric-chip:not(.active), .seg button:not(.active), .mode-btn:not(.active){
  background:transparent !important;color:var(--cloud-dim) !important;
}
.side-nav button:not(.active){background:var(--bf-card) !important;color:var(--cloud-dim) !important;}
.tab-btn:not(.active):hover, .flight-type-tab:not(.active):hover, .metric-chip:not(.active):hover,
.seg button:not(.active):hover, .side-nav button:not(.active):hover, .mode-btn:not(.active):hover{
  color:var(--cloud) !important;border-color:rgba(25,203,227,.5) !important;
}
.tab-btn.active, .flight-type-tab.active, .metric-chip.active, .seg button.active, .side-nav button.active,
.mode-btn.active, .model-opt:has(input:checked){
  background:var(--bf-teal) !important;border-color:var(--bf-teal) !important;color:var(--sky-deep) !important;font-weight:800 !important;
}
.switch input:checked + .slider, .toggle-switch.active{background:var(--bf-teal) !important;}
.gender-option label{border-radius:999px !important;border-color:var(--bf-line) !important;}
.gender-option input:checked + label{background:rgba(25,203,227,.14) !important;border-color:var(--bf-teal) !important;color:var(--bf-teal) !important;}

/* ---------- more buttons ---------- */
.btn-add, .btn-calculate, .btn-confirm-club, .modal-save, .btn-refined-save, .final-cta a, .download-btn{
  background:var(--thermal) !important;color:var(--sky-deep) !important;border:0 !important;
  border-radius:999px !important;font-weight:800 !important;box-shadow:0 8px 22px rgba(255,159,28,.26);
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn-add:hover, .btn-calculate:hover, .btn-confirm-club:hover, .modal-save:hover, .btn-refined-save:hover,
.final-cta a:hover, .download-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(255,159,28,.38);}
.modal-cancel{
  background:transparent !important;color:var(--cloud) !important;border:1px solid var(--bf-line) !important;border-radius:999px !important;
}
.modal-cancel:hover{border-color:rgba(25,203,227,.55) !important;background:rgba(25,203,227,.08) !important;}
.btn-delete-sub{border-radius:999px !important;}
.pw-toggle{border-radius:10px !important;}
.pw-toggle:hover{background:rgba(255,255,255,.08) !important;}

/* ---------- form fields outside <main> (tools, modals, admin) ---------- */
.form-card input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), .form-card select, .form-card textarea,
.modal-field input:not([type=checkbox]):not([type=radio]):not([type=file]), .modal-field select, .modal-field textarea,
.field-group input:not([type=checkbox]):not([type=radio]):not([type=file]), .field-group select, .field-group textarea,
.control-group input:not([type=checkbox]):not([type=radio]):not([type=range]), .control-group select,
.pw-wrap input, .filter-select, .search-box, .season-picker select, #season-select{
  background:rgba(255,255,255,.06) !important;color:var(--cloud) !important;
  border:1px solid var(--bf-line) !important;border-radius:var(--bf-r-field) !important;font-family:inherit !important;
}
.search-box input{background:transparent !important;border:0 !important;color:var(--cloud) !important;}
.form-card input:focus, .form-card select:focus, .form-card textarea:focus,
.modal-field input:focus, .modal-field select:focus, .modal-field textarea:focus,
.field-group input:focus, .field-group select:focus, .control-group input:focus, .control-group select:focus,
.pw-wrap input:focus, .filter-select:focus, .season-picker select:focus, #season-select:focus, .search-box:focus-within{
  outline:none !important;border-color:var(--bf-teal) !important;box-shadow:0 0 0 3px rgba(25,203,227,.18) !important;
}
select option{background:var(--bf-card-solid);color:var(--cloud);}
main input.invalid, main select.invalid, .modal-field input.invalid, .pw-wrap input.invalid, input.invalid{
  background:rgba(255,90,118,.1) !important;border-color:var(--danger) !important;
}
.field-error{color:#FF8FA3 !important;}

/* ---------- tables ---------- */
.data-table thead th, .flights-table .head, .members-table .head, .flight-row.head, .member-row.head{
  background:rgba(255,255,255,.04) !important;color:var(--bf-faint) !important;
}
.data-table tbody tr, .flight-row, .member-row{transition:background .12s ease;}
.data-table tbody tr:hover, .flight-row:not(.head):hover, .member-row:not(.head):hover{background:rgba(255,255,255,.04) !important;}
tbody td, .member-row, .flight-row{border-bottom-color:var(--bf-line-soft) !important;}

/* ---------- light patches fixed for the dark theme ---------- */
.otp-box{background:rgba(255,255,255,.05) !important;border:1px solid var(--bf-line) !important;border-radius:var(--bf-r-tile) !important;}
.new-club-box{background:rgba(255,159,28,.08) !important;border:1px solid rgba(255,159,28,.32) !important;border-radius:var(--bf-r-tile) !important;}
.photo-source-tag, .club-confirmed-tag{background:rgba(61,220,151,.14) !important;color:#7FEBBE !important;border-radius:999px !important;}
.photo-source-tag.custom{background:rgba(255,159,28,.14) !important;color:#FFC77A !important;}
.divider{background:var(--bf-line) !important;}
.avatar-preview{border-color:rgba(25,203,227,.55) !important;box-shadow:0 0 0 4px rgba(25,203,227,.12) !important;}
.avatar-lg{box-shadow:0 0 0 3px rgba(25,203,227,.45),0 10px 30px rgba(0,0,0,.35) !important;}
.status-badge{border-radius:999px !important;}

/* ---------- guides ---------- */
.faq-item{transition:border-color .2s ease, background .2s ease;}
.faq-item:hover{border-color:rgba(25,203,227,.35) !important;}
.final-cta{padding:30px 24px !important;}

/* ---------- map tools (weather dashboard, XC planner): keep maps & popups untouched ---------- */
.leaflet-container h1, .leaflet-container h2, .leaflet-container h3, .leaflet-container h4{color:inherit;}
.leaflet-popup-content-wrapper{border-radius:18px !important;box-shadow:0 18px 44px rgba(0,0,0,.35) !important;}
.leaflet-control-zoom a{border-radius:10px !important;}
#sidebar, #weatherView, #textView{scrollbar-width:thin;}

/* option cards built from <label><input type=radio> (e.g. password-recovery delivery method) */
.field-group label:has(> input[type=radio]){
  background:rgba(255,255,255,.05) !important;border:1px solid var(--bf-line) !important;
  border-radius:var(--bf-r-field) !important;color:var(--cloud-dim) !important;
}
.field-group label:has(> input[type=radio]:checked){
  background:rgba(25,203,227,.12) !important;border-color:var(--bf-teal) !important;color:var(--cloud) !important;
}
.field-group label:has(> input[type=radio]:disabled){opacity:.55;}
.field-group label > input[type=radio]{width:auto !important;accent-color:var(--bf-teal) !important;}

/* secondary action next to the main CTA (XC planner weather refresh) */
.btn-refresh{
  background:transparent !important;color:var(--bf-teal) !important;border:1px solid rgba(25,203,227,.55) !important;
  border-radius:999px !important;font-weight:800 !important;box-shadow:none !important;
}
.btn-refresh:hover{background:rgba(25,203,227,.1) !important;}