/* =========================================================
   Flygate BD — "flynas style" bold frontend theme
   Loaded AFTER app.css so it overrides the base look.
   Frontend only (public pages), admin panel untouched.
   ========================================================= */

:root{
  --fn-teal:#009BB4;
  --fn-teal-dark:#007A8E;
  --fn-navy:#00263D;
  --fn-navy-soft:#0A3D5C;
  --fn-orange:#FF6B1A;
  --fn-ink:#0B1A2B;
  --fn-muted:#5B6B7F;
  --fn-line:#E3EAF1;
  --fn-bg:#F4F7FA;
  --fn-radius:18px;
  --fn-shadow:0 18px 40px rgba(0,38,61,.12);
}

body{
  background:var(--fn-bg);
  color:var(--fn-ink);
  font-weight:500;
  letter-spacing:.1px;
}

/* ---------- BOLD typography ---------- */
h1,h2,h3,h4,h5,.logo,.price,.stat h3{
  font-weight:900;
  letter-spacing:-.5px;
  color:var(--fn-navy);
  line-height:1.15;
}
h1{font-size:clamp(28px,5vw,46px)}
h2{font-size:clamp(22px,3.4vw,32px)}
h3{font-size:clamp(18px,2.4vw,24px)}
p{line-height:1.7}
strong,b,th,label{font-weight:800}
.section-title,
main.container > h2:first-of-type{position:relative}

/* Big flynas-like uppercase eyebrow badges */
.badge{
  background:var(--fn-teal);
  color:#fff;
  font-weight:900;
  letter-spacing:1.2px;
  padding:6px 14px;
  border-radius:999px;
  font-size:11px;
}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(1200px 400px at 85% -10%, rgba(0,155,180,.55), transparent 60%),
    linear-gradient(120deg,var(--fn-navy) 0%, var(--fn-navy-soft) 55%, var(--fn-teal) 130%);
  color:#fff;
  border-radius:var(--fn-radius);
  padding:64px 40px;
  box-shadow:var(--fn-shadow);
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute;inset:auto -10% -60% 55%;
  height:280px;
  background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(255,255,255,0));
  transform:rotate(-8deg);
  pointer-events:none;
}
.hero h1{color:#fff;font-weight:900;text-transform:none}
.hero p{color:rgba(255,255,255,.88);font-weight:600;font-size:1.05rem}

/* ---------- Buttons: chunky pills ---------- */
.btn,
.sw-submit,
button[type="submit"]{
  font-weight:900;
  letter-spacing:.4px;
  border-radius:999px;
  padding:14px 26px;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn{background:#fff;color:var(--fn-navy);border:2px solid var(--fn-line)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,38,61,.14)}
.btn.primary,
.sw-submit,
button[type="submit"]{
  background:var(--fn-teal);
  color:#fff;
  border:0;
  box-shadow:0 10px 24px rgba(0,155,180,.35);
}
.btn.primary:hover,
.sw-submit:hover,
button[type="submit"]:hover{background:var(--fn-teal-dark);transform:translateY(-2px)}
.btn.orange,.btn.accent{background:var(--fn-orange);color:#fff;border:0}

/* ---------- Search widget ---------- */
.search-widget,
.search-form{
  border-radius:22px;
  box-shadow:var(--fn-shadow);
  border:1px solid rgba(255,255,255,.6);
  padding:22px;
}
.sw-tabs{border-bottom:2px solid var(--fn-line);gap:6px}
.sw-tab{
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.6px;
  font-size:13px;
  border-radius:12px 12px 0 0;
  color:var(--fn-muted);
}
.sw-tab.active{color:var(--fn-navy);border-bottom-color:var(--fn-teal);background:rgba(0,155,180,.08)}
.sw-field label,
.search-form label,
.pax-form label{
  text-transform:uppercase;
  letter-spacing:.7px;
  font-size:11px;
  font-weight:900;
  color:var(--fn-muted);
}
.sw-field input,.sw-field select,
.search-form input,.search-form select,
.pax-form input,.pax-form select,
.auth-form input{
  border:2px solid var(--fn-line);
  border-radius:12px;
  padding:13px 14px;
  font-weight:700;
  background:#fff;
  color:var(--fn-ink);
}
.sw-field input:focus,.sw-field select:focus,
.search-form input:focus,.search-form select:focus,
.pax-form input:focus,.auth-form input:focus{
  outline:none;border-color:var(--fn-teal);
  box-shadow:0 0 0 4px rgba(0,155,180,.15);
}

/* ---------- Cards / offers / features ---------- */
.feature,.offer,.stat,.summary,.auth-form,.pax-form fieldset{
  border-radius:var(--fn-radius);
  border:1px solid var(--fn-line);
  box-shadow:0 10px 26px rgba(0,38,61,.07);
}
.feature{padding:26px;transition:transform .18s ease,box-shadow .18s ease}
.feature:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(0,38,61,.12)}
.feature h3{margin-top:0}
.offer{padding:20px;transition:transform .18s ease,box-shadow .18s ease;border-left:6px solid var(--fn-teal)}
.offer:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(0,38,61,.12)}
.price{font-size:26px;font-weight:900;color:var(--fn-teal)}
.stat h3{font-size:34px;color:var(--fn-teal)}
.stat p{font-weight:700;color:var(--fn-muted)}

/* ---------- Tables ---------- */
.table{border-radius:16px;box-shadow:0 10px 26px rgba(0,38,61,.07)}
.table th{
  background:var(--fn-navy);color:#fff;
  text-transform:uppercase;letter-spacing:.7px;font-size:12px;font-weight:900;
}
.table td{font-weight:600}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--fn-navy);
  color:rgba(255,255,255,.75);
  font-weight:600;
  padding:34px 0;
}
.site-footer a{color:#fff;font-weight:800;text-decoration:none}
.site-footer a:hover{color:var(--fn-teal)}

/* ---------- Header polish (keeps existing structure) ---------- */
.site-header .logo{font-weight:900;letter-spacing:-.4px}
.site-header .brand-subtitle{font-weight:900}
.currency-btn,.three-dot-btn{font-weight:900;border-radius:14px}

/* ---------- Alerts ---------- */
.fg-alert{font-weight:700;border-radius:14px}

/* ---------- Mobile ---------- */
@media (max-width:900px){
  .hero{padding:40px 22px}
  .search-widget,.search-form{padding:16px;border-radius:18px}
}
@media (max-width:520px){
  .hero{padding:30px 18px;border-radius:16px}
  .btn,.sw-submit,button[type="submit"]{padding:13px 20px}
  .price{font-size:22px}
}