@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Hind+Siliguri:wght@300;400;500;600;700&family=Noto+Sans+Bengali:wght@300;400;500;600;700;800&display=swap');

/* ============================================================
   FlyGate — Global font system + mobile responsive hardening
   Loaded AFTER app.css / admin.css so it wins over template CSS.
   ============================================================ */

:root{
  --fg-font: 'Inter', 'Hind Siliguri', 'Noto Sans Bengali', 'SolaimanLipi', 'Kalpurush',
             'Segoe UI', Tahoma, Geneva, Verdana, system-ui, -apple-system, Roboto, sans-serif;
  --fg-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --- 1. ONE font stack everywhere, including inline style="font-family:..." --- */
html, body, *:not(i):not(.fa):not([class*="fa-"]):not([class*="icon"]):not(code):not(pre):not(kbd):not(samp){
  font-family: var(--fg-font) !important;
}
code, pre, kbd, samp, .mono{ font-family: var(--fg-mono) !important; }
html{ font-size: 100%; }
body{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga" 1, "clig" 1, "kern" 1;
  line-height: 1.65;
  overflow-x: hidden;
}

/* Bangla needs generous line-height / no letter-spacing tricks */
h1,h2,h3,h4,h5,h6{ line-height:1.35; letter-spacing:0; }
p, li, td, th, label, span, a, div{ letter-spacing:0; }

/* --- 2. Never break words mid-glyph (this is what "ফন্ট ভেঙে যাচ্ছে" looks like) --- */
*, *::before, *::after{
  word-break: normal !important;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: none !important;
  -webkit-hyphens: none;
}

/* --- 3. Nothing may overflow the viewport --- */
img, video, svg, iframe, canvas, table{ max-width:100%; }
img, video{ height:auto; }
pre, code{ white-space: pre-wrap; overflow-wrap:anywhere; }

/* --- 4. Flex/grid children must be allowed to shrink --- */
.card, .card-body, .card-small, .feature, .offer, .stat, .summary,
.itineraries, .itin, .cp-topbar .who, .price-col, .sw-field{
  min-width: 0;
}

/* --- 5. Cards on mobile --- */
@media (max-width: 768px){
  .card, .card-small, .feature, .stat, .summary, .offer{
    padding: 14px !important;
    border-radius: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
  }
  .card *, .card-small *, .feature *, .stat *, .summary *, .offer *{
    max-width: 100%;
  }
  /* Truncated single-line text hurts Bangla — let it wrap instead */
  .card [style*="nowrap"], .card-body [style*="nowrap"],
  .card .card-name, .card-name, .card-meta,
  .cp-topbar .who b, .cp-topbar .who span{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .card-name{ line-height:1.45; }
  .card-img, .card img{ width:100%; height:auto; object-fit:cover; }

  /* Fluid, never-too-small type */
  h1{ font-size: clamp(1.25rem, 5.2vw, 1.8rem) !important; line-height:1.3 !important; }
  h2{ font-size: clamp(1.1rem, 4.6vw, 1.5rem) !important; line-height:1.35 !important; }
  h3{ font-size: clamp(1rem, 4.2vw, 1.25rem) !important; line-height:1.4 !important; }
  body, p, li, td, th, label, .card, .card-body{ font-size: 15px !important; }
  small, .card-meta, .badge{ font-size: 12.5px !important; }
  input, select, textarea{ font-size: 16px !important; } /* stops iOS zoom */
}

/* --- 6. Card grids collapse cleanly --- */
@media (max-width: 900px){
  .cards, .card-grid, .features, .product-grid{
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  }
}
@media (max-width: 520px){
  .cards, .card-grid, .product-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
  }
  .features{ grid-template-columns: 1fr !important; }
  .card-footer{ flex-wrap: wrap; gap:8px; }
  .card-footer .btn{ width:100%; }
}

/* --- 7. Wide tables scroll instead of squashing text --- */
@media (max-width: 768px){
  .table-wrap, .table-responsive{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
}


/* --- 8. Form controls, buttons and tables must inherit the same stack --- */
input, select, textarea, button, optgroup, option,
.btn, .a-btn, .sp-btn, .bp-btn, .cp-btn, table, th, td, legend, fieldset{
  font-family: var(--fg-font) !important;
}
/* Bangla digits/symbols (৳) and currency glyphs render from the Bengali face */
.currency-btn, .currency-menu a, .price, .amount, .cp-stat .v, .sp-stat .v, .bp-stat .v,
.a-badge, .badge{ font-family: var(--fg-font) !important; font-variant-numeric: tabular-nums; }
/* Avoid faux-bold/italic distortion of Bangla glyphs */
*{ font-synthesis: none; }
b, strong{ font-weight: 700; }

/* --- 9. No horizontal overflow on phones --- */
html, body{ max-width:100%; overflow-x:hidden; }
img, video, iframe, canvas, svg{ max-width:100%; height:auto; }
@media (max-width: 640px){
  input, select, textarea{ max-width:100%; min-width:0; }
  form input[type="date"], form input[type="text"], form input[type="email"],
  form input[type="password"], form input[type="number"], form input[type="search"]{ width:100%; }
  pre, code{ white-space:pre-wrap; word-break:break-word; }
  table{ width:100%; }
}
/* --- 10. Emoji glyphs must not fall back to a missing face --- */
:root{ --fg-font:'Inter','Hind Siliguri','Noto Sans Bengali','SolaimanLipi','Kalpurush','Segoe UI',Tahoma,system-ui,-apple-system,Roboto,Arial,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; }

/* ==========================================================================
   Panel polish — Admin / Customer / Seller / Blogger
   মোবাইলে টাচ-ফ্রেন্ডলি, ডেস্কটপে অপরিবর্তিত ও মানানসই।
   ========================================================================== */

/* Payment options (checkout) */
.pay-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-top:8px}
.pay-option{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1.5px solid #e2e8f0;
  border-radius:12px;padding:12px 14px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.pay-option:has(input:checked){border-color:#009BB4;box-shadow:0 0 0 3px rgba(0,155,180,.12)}
.pay-option input{margin-top:3px;width:18px;height:18px;accent-color:#009BB4;flex-shrink:0}
.pay-option strong{display:block;font-size:.95rem;color:#0f172a}
.pay-option small{display:block;margin-top:3px;font-size:.75rem;color:#64748b;line-height:1.45}

/* Bill QR block */
.bill-qr{display:flex;gap:18px;align-items:flex-start;border:1.5px dashed #009BB4;border-radius:14px;
  padding:16px;margin:18px 0;background:#f0fdff}
.bill-qr img{width:150px;height:150px;flex-shrink:0;background:#fff;border-radius:10px;padding:6px}
.bill-qr h4{margin:0 0 6px;font-size:1rem;color:#0f172a}
.bill-qr .rows{font-size:.85rem;color:#334155;line-height:1.7}
.bill-qr .rows b{color:#0f172a}
.bill-qr .note{margin-top:8px;font-size:.78rem;color:#64748b;line-height:1.55}

@media (max-width:640px){
  .bill-qr{flex-direction:column;align-items:center;text-align:center;padding:14px}
  .bill-qr img{width:190px;height:190px}
  .pay-options{grid-template-columns:1fr}
}
@media print{
  .bill-qr{background:#fff;border-color:#94a3b8;break-inside:avoid}
}

/* --- Shared panel rules (admin/customer/seller/blogger) --- */
@media (max-width:820px){
  .sp-wrap,.bp-wrap{margin:14px auto 28px;padding:0 12px}
  .sp-head h1,.bp-head h1{font-size:1.2rem}
  .sp-nav,.bp-nav{overflow-x:auto;flex-wrap:nowrap;gap:6px;padding-bottom:6px;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .sp-nav::-webkit-scrollbar,.bp-nav::-webkit-scrollbar{display:none}
  .sp-nav a,.bp-nav a{white-space:nowrap;font-size:.82rem;padding:9px 12px}
  .sp-nav a.out,.bp-nav a.out{margin-left:0}
  .sp-stat,.bp-stat{padding:12px}
  .sp-stat .v,.bp-stat .v{font-size:1.15rem}

  /* যেকোনো প্যানেলের টেবিল মোবাইলে স্ক্রল করবে, ভাঙবে না */
  .sp-wrap table,.bp-wrap table,.cp-wrap table,.adm-wrap table{min-width:560px}
  .sp-wrap .tablewrap,.bp-wrap .tablewrap,.cp-wrap .tablewrap,.adm-wrap .tablewrap,
  .sp-card,.bp-card{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* ফর্ম ইনপুট — iOS zoom ঠেকাতে 16px */
  .sp-wrap input,.sp-wrap select,.sp-wrap textarea,
  .bp-wrap input,.bp-wrap select,.bp-wrap textarea,
  .cp-wrap input,.cp-wrap select,.cp-wrap textarea{font-size:16px}

  /* বাটন টাচ টার্গেট */
  .sp-wrap button,.bp-wrap button,.cp-wrap button,
  .sp-wrap .btn,.bp-wrap .btn,.cp-wrap .btn{min-height:44px}

  /* দুই কলামের গ্রিড মোবাইলে এক কলাম */
  .cp-wrap form[style*="grid-template-columns:1fr 1fr"],
  form[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important}
}

@media (max-width:420px){
  .sp-grid,.bp-grid{grid-template-columns:1fr !important}
}

/* ============================================================
   9. Tablet / small-laptop hardening — 1024px breakpoint
   পুরো সাইট (public + customer + admin + blogger) 1024px ও
   মোবাইল ভিউতে যাতে কোথাও ভাঙে না বা horizontal scroll না আসে।
   ============================================================ */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe, canvas, svg { max-width: 100%; height: auto; }
table { max-width: 100%; }

@media (max-width: 1024px) {
  .container, .a-wrap, .a-main, .wrap, .page, main { max-width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; }
  [style*="grid-template-columns:repeat(4"], [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  [style*="grid-template-columns:repeat(5"], [style*="grid-template-columns: repeat(5"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  [style*="grid-template-columns:1fr 1fr 1fr 1fr"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  [style*="grid-template-columns:2fr 1fr"], [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns:1fr 2fr"], [style*="grid-template-columns:320px"],
  [style*="grid-template-columns:300px"], [style*="grid-template-columns:280px"] { grid-template-columns: 1fr !important; }
  .a-table-wrap, .table-wrap, .cpv-sec, .fg-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  h1 { font-size: clamp(1.5rem, 3.4vw, 2.2rem) !important; }
  h2 { font-size: clamp(1.25rem, 2.8vw, 1.7rem) !important; }
  .hero, .fg-hero { padding: 40px 16px !important; }
}

@media (max-width: 768px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="display:flex"] { flex-wrap: wrap !important; }
  .a-btn, .btn, button, input, select, textarea { max-width: 100%; }
  td, th { white-space: normal !important; }
}

@media (max-width: 480px) {
  body { font-size: 15px; }
  .a-btn.sm, .btn.sm { padding: 6px 10px !important; font-size: .78rem !important; }
  .cpv-head { flex-direction: column; align-items: flex-start !important; }
}

/* ---- Mobile UX polish (touch targets, no iOS zoom, tap feedback) ---- */
@media (max-width: 767px) {
  input, select, textarea { font-size: 16px !important; }
  .a-btn, .btn, button[type="submit"], .modern-sw-submit { min-height: 44px; }
  a, button { -webkit-tap-highlight-color: rgba(0,155,180,.15); }
  .modern-sw-tab:active { transform: scale(.97); }
  .service-card, .airline-badge { padding: 14px 12px; }
  .services-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .services-grid .service-card p { display: none; }
  .services-title { font-size: 1.15rem; }
}

/* ---- Mobile: hide homepage search box (forms). Tabs act as links to pages ---- */
@media (max-width: 767px) {
  .modern-sw-panel,
  .modern-sw-panel.active,
  .modern-search-widget form,
  .modern-trip-type { display: none !important; }
  .modern-sw-tabs { margin-bottom: 10px !important; }
}