/* B2B Portal — shared styles */
.hidden { display: none !important; }

/* ── Override conflicting global rules from style.css / results.css ── */
body { padding-top: 0 !important; } /* results.css sets body { padding-top: 64px } */
.search-card { max-width: none !important; box-shadow: 0 4px 24px rgba(11,58,214,.1) !important; }

/* Compact search bar inside B2B panel */
.bsf-search-bar {
  margin: 0 0 16px;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  position: static !important; /* results.css makes .search-bar sticky — override */
  top: auto !important;
  z-index: auto !important;
}
.bsf-search-bar .sb-inner { max-width: none; }
/* Restore padding stripped by the global * { padding:0 } reset */
.bsf-search-bar .sb-fields {
  padding: 4px !important;
  background: #f8fafc !important;
  border: 1.5px solid var(--border);
}
.bsf-search-bar .sb-field  { padding: 8px 14px !important; }
/* Swap button — flat, no lift */
.bsf-search-bar .sb-swap   { background: #f0f4ff; box-shadow: none; }
/* Search button — flat 2D, no shadow, no lift */
.bsf-search-bar .sb-search-btn {
  box-shadow: none !important;
  background: var(--primary) !important;
}
.bsf-search-bar .sb-search-btn:hover {
  transform: none !important;
  background: var(--primary-dark) !important;
}
/* variables from style.css that differ from b2b.css */
:root { --text-secondary: #6b7280; --bg: #f0f4ff; --radius-sm: 8px; --accent-dark: #e55a28; }
:root {
  --primary: #0B3AD6;
  --primary-dark: #06248a;
  --primary-light: #3b82f6;
  --accent: #ff6b35;
  /* Light sidebar — travel-agent workspace look, not the old dark admin shell */
  --sidebar-bg: #ffffff;
  --sidebar-border: #e8edf5;
  --sidebar-text: #64748b;          /* default nav text on white */
  --sidebar-text-hover: #0f172a;
  --sidebar-section-label: #94a3b8; /* "QIDIRUV", "ISH" group labels */
  --sidebar-active: #ffffff;
  --sidebar-active-bg: linear-gradient(135deg, #0B3AD6 0%, #3b82f6 100%);
  --sidebar-hover-bg: #f1f5ff;
  --card-bg: #ffffff;
  --page-bg: #f5f7fb;
  --text: #1a1d2e;
  --text-muted: #6b7280;
  --border: #e2e8f0;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --radius: 12px;

  --tier-bronze: #cd7f32;
  --tier-silver: #94a3b8;
  --tier-gold: #f59e0b;
  --tier-platinum: #6366f1;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: var(--page-bg); color: var(--text); }

/* ── Auth pages ────────────────────────────────────────────────────────────── */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0B3AD6 0%, #06248a 100%);
  padding: 20px;
}

.auth-card {
  background: #fff;
  border-radius: 20px;
  padding: 40px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.auth-logo { text-align: center; margin-bottom: 24px; }
.auth-logo .logo-text { font-size: 28px; font-weight: 800; }
.auth-logo .logo-text span { color: var(--primary); }
.auth-logo .logo-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; letter-spacing: 1.5px; text-transform: uppercase; }

.auth-title { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.auth-subtitle { font-size: 14px; color: var(--text-muted); margin-bottom: 28px; }

.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--text); }
.form-group input {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px; font-size: 14px;
  transition: border-color .15s;
  outline: none;
}
.form-group input:focus { border-color: var(--primary); }

/* Password field with show/hide eye toggle */
.pw-field { position: relative; }
.pw-field input { padding-right: 42px; }
.pw-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  background: none; border: none; cursor: pointer;
  color: var(--muted, #94a3b8); border-radius: 6px;
}
.pw-toggle:hover { color: var(--primary); }
.pw-toggle svg { width: 20px; height: 20px; display: block; }
.pw-toggle .eye-off { display: none; }
.pw-toggle.is-visible .eye-on { display: none; }
.pw-toggle.is-visible .eye-off { display: block; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 8px; font-size: 14px; font-weight: 600;
  cursor: pointer; border: none; transition: all .15s; text-decoration: none;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-danger  { background: var(--danger); color: #fff; }
.btn-danger:hover { opacity: .9; }
.btn-ghost  { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); }
.btn-ghost:hover { background: #eff3ff; }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-full { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.auth-footer { margin-top: 20px; text-align: center; font-size: 13px; color: var(--text-muted); }
.auth-footer a { color: var(--primary); text-decoration: none; font-weight: 500; }

.alert { padding: 12px 16px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; }
.alert-error   { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.alert-info    { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }

/* ── Dashboard layout ──────────────────────────────────────────────────────── */
.dashboard {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 264px;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  z-index: 100;
  overflow-y: auto;
  border-right: 1px solid var(--sidebar-border);
}

.sidebar-logo {
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--sidebar-border);
}
.sidebar-logo .logo-text {
  font-size: 22px; font-weight: 800; color: #0f172a;
  letter-spacing: -.5px;
}
.sidebar-logo .logo-text span {
  background: linear-gradient(135deg, #0B3AD6, #3b82f6);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sidebar-logo .logo-tag {
  display: inline-block; margin-top: 6px;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  color: #1d4ed8;
  font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
  padding: 3px 9px; border-radius: 4px; text-transform: uppercase;
  border: 1px solid #dbeafe;
}

/* Balance card directly under the logo */
.sidebar-balance {
  margin: 14px 14px 4px;
  padding: 14px;
  background: linear-gradient(135deg, #f8faff 0%, #eef3ff 100%);
  border: 1px solid #dbeafe;
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.sidebar-balance .lbl {
  font-size: 10px; font-weight: 700; color: #64748b;
  letter-spacing: 1px; text-transform: uppercase;
}
.sidebar-balance .amt {
  font-size: 19px; font-weight: 800; color: #0f172a;
  letter-spacing: -.3px;
}
.sidebar-balance .meta {
  display: flex; align-items: center; gap: 6px; margin-top: 2px;
  font-size: 11px; color: #64748b;
}
.sidebar-balance .tier-pill {
  display: inline-block; padding: 2px 7px; border-radius: 4px;
  font-size: 9px; font-weight: 700; letter-spacing: .5px;
  background: #fffbeb; color: #b45309; border: 1px solid #fde68a;
  text-transform: uppercase;
}
.sidebar-balance .tier-pill.silver   { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.sidebar-balance .tier-pill.gold     { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.sidebar-balance .tier-pill.platinum { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
.sidebar-balance .tier-pill.starter  { background: #f1f5f9; color: #64748b; border-color: #cbd5e1; }

.sidebar-nav { padding: 10px 10px 14px; flex: 1; }

.sidebar-section {
  padding: 14px 12px 6px;
  font-size: 10px; font-weight: 700;
  color: var(--sidebar-section-label);
  letter-spacing: 1.3px; text-transform: uppercase;
}

.sidebar-nav a {
  display: flex; align-items: center; gap: 11px;
  margin: 2px 0;
  padding: 10px 12px;
  color: var(--sidebar-text);
  text-decoration: none; font-size: 14px; font-weight: 500;
  border-radius: 9px;
  transition: background .15s, color .15s, transform .15s;
}
.sidebar-nav a:hover {
  color: var(--sidebar-text-hover);
  background: var(--sidebar-hover-bg);
}
.sidebar-nav a.active {
  color: var(--sidebar-active);
  background: var(--sidebar-active-bg);
  box-shadow: 0 6px 16px rgba(11,58,214,.25);
  font-weight: 600;
}
.sidebar-nav a.active .nav-icon { stroke: #fff; }
.sidebar-nav a .nav-icon {
  width: 18px; height: 18px; flex-shrink: 0;
  stroke: currentColor;
}
.sidebar-nav a .nav-badge {
  margin-left: auto;
  font-size: 9px; font-weight: 700; letter-spacing: .5px;
  padding: 2px 7px; border-radius: 10px;
  background: #fef3c7; color: #b45309;
  text-transform: uppercase;
}
.sidebar-nav a.active .nav-badge {
  background: rgba(255,255,255,.22); color: #fff;
}

.sidebar-user {
  padding: 14px 18px 18px;
  border-top: 1px solid var(--sidebar-border);
  background: #fafbfd;
}
.sidebar-user .user-row {
  display: flex; align-items: center; gap: 10px;
}
.sidebar-user .user-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #0B3AD6, #3b82f6);
  color: #fff; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sidebar-user .user-info { min-width: 0; }
.sidebar-user .user-name {
  font-size: 13px; font-weight: 600; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-user .user-meta {
  font-size: 11px; color: #94a3b8; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-user #logoutBtn {
  display: flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 7px 10px;
  font-size: 12px; color: #ef4444; text-decoration: none;
  background: #fef2f2; border-radius: 7px;
  font-weight: 600;
  transition: background .15s;
}
.sidebar-user #logoutBtn:hover { background: #fee2e2; }

.main-content {
  margin-left: 264px;
  flex: 1;
  min-width: 0;
  max-width: calc(100vw - 264px);
  padding: 28px 32px;
  min-height: 100vh;
  overflow-x: hidden;
  box-sizing: border-box;
}
@media (max-width: 1280px) {
  .main-content { padding: 20px; }
}
@media (max-width: 1100px) {
  .main-content { padding: 18px; }
}

/* Universal: any wide block inside main-content should never exceed it */
.main-content > * { max-width: 100%; box-sizing: border-box; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 100%; }

.page-header { margin-bottom: 24px; }
.page-header h1 { font-size: 22px; font-weight: 700; }
.page-header p  { font-size: 14px; color: var(--text-muted); margin-top: 4px; }

/* ── Stat cards ─────────────────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.stat-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.stat-card .stat-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
.stat-card .stat-value { font-size: 26px; font-weight: 800; margin: 6px 0 2px; color: var(--text); }
.stat-card .stat-sub   { font-size: 12px; color: var(--text-muted); }

.stat-card.wallet { border-left: 4px solid var(--success); }
.stat-card.wallet .stat-value { color: var(--success); }
.stat-card.wallet.low { border-color: var(--danger); }
.stat-card.wallet.low .stat-value { color: var(--danger); }

/* ── Tier badge ─────────────────────────────────────────────────────────────── */
.tier-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: 20px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
}
.tier-badge.bronze  { background: #fef3e8; color: var(--tier-bronze); }
.tier-badge.silver  { background: #f1f5f9; color: var(--tier-silver); }
.tier-badge.gold    { background: #fffbeb; color: var(--tier-gold); }
.tier-badge.platinum { background: #eef2ff; color: var(--tier-platinum); }
/* New tier program (Starter / Professional / Master) */
.tier-badge.starter      { background: #f1f5f9; color: #64748b; }
.tier-badge.professional { background: #eef2ff; color: #4338ca; }
.tier-badge.master       { background: #ecfdf5; color: #047857; }

/* Tier progress bar */
.tier-progress { margin-top: 12px; }
.tier-progress-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.tier-progress-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.tier-progress-fill { height: 100%; border-radius: 3px; background: var(--primary); transition: width .3s; }

/* ── Card ───────────────────────────────────────────────────────────────────── */
.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  overflow: hidden;
  margin-bottom: 20px;
}
.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.card-header h3 { font-size: 15px; font-weight: 600; }
.card-body { padding: 20px; }

/* ── Table ───────────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th { padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); background: #f8fafc; border-bottom: 1px solid var(--border); }
tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #f8fafc; }

.badge {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600;
}
.badge-pending  { background: #eff6ff; color: #1d4ed8; }
.badge-paid     { background: #fef3c7; color: #92400e; }
.badge-confirmed{ background: #f0fdf4; color: #166534; }
.badge-cancelled{ background: #fef2f2; color: #b91c1c; }
.badge-active   { background: #f0fdf4; color: #166534; }
.badge-suspended{ background: #fef2f2; color: #b91c1c; }

/* Transaction amount */
.tx-debit  { color: var(--danger);  font-weight: 600; }
.tx-credit { color: var(--success); font-weight: 600; }

/* ── Filter bar ──────────────────────────────────────────────────────────────── */
.filter-bar {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
}
.filter-bar select, .filter-bar input {
  padding: 8px 12px; border: 1.5px solid var(--border);
  border-radius: 8px; font-size: 13px; outline: none; background: #fff;
}
.filter-bar select:focus, .filter-bar input:focus { border-color: var(--primary); }

/* ── Modal ───────────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; padding: 20px;
}
.modal-overlay.hidden { display: none; }
.modal {
  background: #fff; border-radius: 16px;
  width: 100%; max-width: 520px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
.modal-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-header h3 { font-size: 16px; font-weight: 700; }
.modal-close { background: none; border: none; cursor: pointer; font-size: 20px; color: var(--text-muted); line-height: 1; }
.modal-body { padding: 20px 24px; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }

/* ── Loading ─────────────────────────────────────────────────────────────────── */
.spinner {
  display: inline-block; width: 20px; height: 20px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff; border-radius: 50%;
  animation: spin .6s linear infinite;
}
.spinner.dark { border-color: rgba(0,0,0,.15); border-top-color: var(--primary); }
@keyframes spin { to { transform: rotate(360deg); } }

.loading-state { display: flex; align-items: center; gap: 10px; color: var(--text-muted); padding: 40px; justify-content: center; }

/* ── Responsive ──────────────────────────────────────────────────────────────── */
/* Mobile header + drawer overlay (hidden on desktop) */
.b2b-mobile-header { display: none; }
.b2b-sidebar-overlay { display: none; }
.b2b-mobile-filter-toggle { display: none; }
.b2b-filters-close { display: none; }

@media (max-width: 900px) {
  /* Mobile top header — sticky, light, with hamburger (matches new sidebar) */
  .b2b-mobile-header {
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 110;
    background: #fff; color: #0f172a;
    padding: 12px 14px;
    border-bottom: 1px solid var(--sidebar-border);
    box-shadow: 0 1px 4px rgba(15,23,42,.06);
  }
  .b2b-mobile-header .mh-burger {
    background: #f1f5ff; border: 1px solid #dbeafe; color: #0B3AD6;
    width: 40px; height: 40px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
  }
  .b2b-mobile-header .mh-burger:active { background: #dbeafe; }
  .b2b-mobile-header .mh-logo { font-size: 17px; font-weight: 800; flex: 1; color: #0f172a; letter-spacing: -.3px; }
  .b2b-mobile-header .mh-logo span {
    background: linear-gradient(135deg, #0B3AD6, #3b82f6);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .b2b-mobile-header .mh-tag {
    font-size: 9px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: #1d4ed8;
    padding: 3px 8px; border-radius: 4px; letter-spacing: 1.2px;
    font-weight: 700; text-transform: uppercase;
    border: 1px solid #dbeafe;
  }

  /* Sidebar becomes off-canvas drawer */
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh;
    width: 270px; max-width: 82vw;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 130;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow-y: auto;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 32px rgba(0,0,0,.35);
  }
  .sidebar-nav {
    display: block !important;
    flex-direction: column !important;
    overflow: visible !important;
    padding: 12px 0;
  }
  .sidebar-nav a { padding: 13px 20px; font-size: 14px; }

  /* Overlay backdrop */
  .b2b-sidebar-overlay {
    display: block;
    position: fixed; inset: 0; background: rgba(0,0,0,.55);
    z-index: 120; opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
  }
  .b2b-sidebar-overlay.open { opacity: 1; pointer-events: auto; }

  body.b2b-no-scroll { overflow: hidden; }

  /* Main content fills width */
  .main-content {
    margin-left: 0 !important;
    padding: 14px !important;
    min-width: 0 !important;
    max-width: 100vw;
    overflow-x: hidden;
  }
  .dashboard { min-width: 0; max-width: 100vw; overflow-x: hidden; }
  html, body { max-width: 100vw; overflow-x: hidden; }

  /* Page header */
  .page-header { margin-bottom: 16px; }
  .page-header h1 { font-size: 18px; }
  .page-header p { font-size: 12px; }

  /* Stats grid */
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 18px;
  }
  .stat-card { padding: 14px; }
  .stat-card .stat-value { font-size: 20px; }
  .stat-card .stat-label { font-size: 11px; }

  /* Card */
  .card { margin-bottom: 14px; border-radius: 10px; }
  .card-body { padding: 14px; }
  .card-header {
    padding: 12px 14px;
    flex-wrap: wrap; gap: 8px;
  }
  .card-header h3 { font-size: 14px; }

  /* Tables: smaller padding, allow horizontal scroll */
  table { font-size: 12px; }
  thead th { padding: 8px 10px; font-size: 10px; }
  tbody td { padding: 9px 10px; }

  /* Filter bar */
  .filter-bar { gap: 6px; width: 100%; }
  .filter-bar select, .filter-bar input {
    flex: 1; min-width: 0;
    font-size: 12px; padding: 8px 10px;
  }

  /* Wallet summary */
  .wallet-summary {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
  }
  .wallet-box { padding: 12px; }
  .wallet-box .wvalue { font-size: 16px; }

  /* Tier badge */
  .tier-badge { font-size: 10px; padding: 3px 9px; }

  /* Form rows */
  .form-row { grid-template-columns: 1fr; }
  .form-group input { font-size: 14px; padding: 11px 12px; }

  /* Modal — bottom sheet */
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .modal {
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
    width: 100%;
  }
  .modal-header { padding: 16px 18px 12px; }
  .modal-body { padding: 16px 18px; }
  .modal-footer { padding: 12px 18px; flex-wrap: wrap; }
  .modal-footer .btn { flex: 1; }

  /* Auth pages */
  .auth-card { padding: 28px 22px; border-radius: 16px; }

  /* TS tabs */
  .ts-tab { padding: 10px 14px; font-size: 12px; }
  .ts-iframe-wrap iframe { height: 560px; }

  /* Visa grid */
  .visa-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .visa-card { padding: 12px; }

  /* Task list */
  .task-item { flex-wrap: wrap; padding: 10px 12px; }
  .task-title-text { font-size: 12px; min-width: 100%; order: 3; margin-top: 4px; }
  .task-client, .task-date { font-size: 10px; }

  /* Inline B2B search */
  .bsf-card { padding: 14px; }
  .bsf-trip-tabs { gap: 4px; flex-wrap: wrap; }
  .bsf-trip-tab { font-size: 12px; padding: 6px 12px; }
  .bsf-row { gap: 8px; }
  .bsf-field { min-width: 100%; }
  .bsf-field--sm { flex: 1 1 100%; }
  .bsf-swap { align-self: center; }

  /* Booking step blocks */
  #bsfStep2, #bsfStep3, #bsfStep4 { max-width: none; }
  .bsf-flight-summary { padding: 14px; gap: 10px; }
  .bsf-sum-route { font-size: 15px; }
  .bsf-sum-price { font-size: 16px; }
  .bsf-pax-block, .bsf-contact-section { padding: 14px; }
  .bsf-pax-grid { grid-template-columns: 1fr; }
  .bsf-actions { justify-content: stretch; }
  .bsf-actions .btn { flex: 1; }
  .bsf-progress { gap: 4px; }
  .bsf-prog-step { font-size: 11px; padding: 5px 10px; }

  /* Quickfill list */
  .b2bqf-list { gap: 6px; }
  .b2bqf-card { min-width: 100%; }

  /* Result cards */
  .bsf-result-card { padding: 12px; gap: 8px; }
  .bsf-airline { min-width: 100%; }
  .bsf-times { font-size: 14px; }
  .bsf-price { font-size: 17px; }
  .bsf-book-btn { width: 100%; padding: 10px; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .wallet-summary { grid-template-columns: 1fr !important; }
  .visa-grid { grid-template-columns: 1fr; }
  .main-content { padding: 10px !important; }
  .b2b-mobile-header { padding: 10px 12px; }
  .b2b-mobile-header .mh-logo { font-size: 16px; }
}

/* Tablet zone (901–1100px) — sidebar still visible, but tighten widget grids */
@media (min-width: 901px) and (max-width: 1100px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wallet-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .visa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card { padding: 16px; }
  .stat-card .stat-value { font-size: 22px; }
}

.view { display: none; }
.view.active { display: block; }

/* ── Wallet section specifics ────────────────────────────────────────────────── */
.wallet-summary {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 20px;
}
.wallet-box {
  background: #f8fafc; border-radius: 10px; padding: 16px;
  border: 1px solid var(--border); text-align: center;
}
.wallet-box .wlabel { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; }
.wallet-box .wvalue { font-size: 20px; font-weight: 800; margin-top: 6px; color: var(--text); }
.wallet-box.available .wvalue { color: var(--success); }

/* ── Form row in modal ────────────────────────────────────────────────────────── */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.detail-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.detail-row:last-child { border-bottom: none; }
.detail-row .dlabel { color: var(--text-muted); }
.detail-row .dvalue { font-weight: 600; }

/* ══════════════════════════════════════════════════════════════
   TRAVELSTORE — service workspace tabs
══════════════════════════════════════════════════════════════ */
.ts-tab-bar {
  display: flex; overflow-x: auto; border-bottom: 2px solid var(--border);
  margin-bottom: 20px; scrollbar-width: none;
}
.ts-tab-bar::-webkit-scrollbar { display: none; }
.ts-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 18px; font-size: 13px; font-weight: 500;
  color: var(--text-muted); background: none; border: none;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  cursor: pointer; white-space: nowrap; transition: color .12s;
}
.ts-tab:hover { color: var(--text); }
.ts-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.ts-tab svg { width: 15px; height: 15px; flex-shrink: 0; }

.ts-panel { display: none; }
.ts-panel.active { display: block; }

.ts-iframe-wrap {
  border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; background: #f4f6fb;
}
.ts-iframe-wrap iframe { display: block; width: 100%; height: 700px; border: none; }

.ts-widget-wrap {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px; min-height: 200px;
}

/* Visa cards grid */
.visa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.visa-card {
  border: 1px solid var(--border); border-radius: 10px; padding: 16px;
  background: var(--card-bg); transition: box-shadow .15s;
}
.visa-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.visa-card-country { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.visa-card-type { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.visa-card-price { font-size: 20px; font-weight: 800; color: var(--primary); margin-bottom: 8px; }
.visa-card-row { display: flex; justify-content: space-between; padding: 4px 0; border-top: 1px solid #f0f2f8; font-size: 12px; color: var(--text-muted); }
.visa-card-row span:last-child { font-weight: 500; color: var(--text); }

/* ══════════════════════════════════════════════════════════════
   VAZIFALAR — daily task list
══════════════════════════════════════════════════════════════ */
.task-section-title {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .6px;
  margin: 18px 0 10px;
}
.task-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--card-bg); margin-bottom: 6px;
  transition: background .1s;
}
.task-item:hover { background: #f8fafc; }
.task-cb { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; }
.task-title-text { flex: 1; font-size: 13px; color: var(--text); }
.task-title-text.task-done { text-decoration: line-through; color: var(--text-muted); }
.task-client {
  font-size: 11px; color: var(--primary); background: #e8f0fe;
  padding: 2px 8px; border-radius: 10px; white-space: nowrap;
}
.task-date { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.task-date.task-overdue { color: var(--danger); font-weight: 600; }
.task-del {
  background: none; border: none; color: #d1d5db;
  cursor: pointer; font-size: 18px; line-height: 1; padding: 0 2px;
}
.task-del:hover { color: var(--danger); }
.task-empty { text-align: center; padding: 32px; color: var(--text-muted); font-size: 13px; }

/* Badge on nav link for overdue tasks */
.nav-badge {
  background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
  border-radius: 10px; padding: 1px 6px; margin-left: auto;
}

/* ── Inline B2B flight search form ── */
.bsf-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; }

/* Trip type tabs */
.bsf-trip-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.bsf-trip-tab {
  padding: 7px 16px; border-radius: 20px; border: 1.5px solid var(--border);
  background: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: 'Inter', sans-serif; color: var(--text-muted); transition: all .15s;
}
.bsf-trip-tab:hover  { border-color: var(--primary); color: var(--primary); }
.bsf-trip-tab.active { border-color: var(--primary); background: var(--primary); color: #fff; }

/* Multi-city legs */
.bsf-multi-leg { border-left: 3px solid var(--primary); padding-left: 14px; margin-bottom: 12px; }

/* dob-trigger in B2B search uses same class as booking.css — ensure it looks consistent */
.bsf-card .dob-trigger,
.bsf-pax-field .dob-trigger {
  padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 13px; background: #fff; cursor: pointer; min-height: 42px;
  display: flex; align-items: center; transition: border-color .15s;
}
.bsf-card .dob-trigger:hover,
.bsf-pax-field .dob-trigger:hover { border-color: var(--primary); }
.bsf-card .dob-trigger .placeholder,
.bsf-pax-field .dob-trigger .placeholder { color: #9ca3af; }
.bsf-row  { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.bsf-field { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 140px; }
.bsf-field--sm { flex: 0 0 160px; }
.bsf-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; }
.bsf-input { padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 13px; font-family: 'Inter', sans-serif; width: 100%; background: #fff; }
.bsf-input:focus { outline: none; border-color: var(--primary); }
.bsf-swap { background: none; border: 1.5px solid var(--border); border-radius: 8px; padding: 10px 12px; cursor: pointer; font-size: 16px; flex-shrink: 0; align-self: flex-end; }
.bsf-swap:hover { border-color: var(--primary); color: var(--primary); }

/* Airport autocomplete dropdown */
.bsf-ac-drop {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 500;
  background: #fff; border: 1.5px solid var(--border); border-top: none;
  border-radius: 0 0 10px 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
  max-height: 280px; overflow-y: auto;
}
.bsf-ac-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  cursor: pointer; font-size: 13px; transition: background .1s;
}
.bsf-ac-item:hover, .bsf-ac-item.focused { background: #f0f4ff; }
.bsf-ac-code { font-weight: 800; color: var(--primary); min-width: 36px; font-size: 13px; }
.bsf-ac-city { flex: 1; color: var(--text); }
.bsf-ac-flag { font-size: 16px; flex-shrink: 0; }

/* Flight result cards */
.bsf-result-card {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 18px; margin-bottom: 8px; transition: box-shadow .15s;
}
.bsf-result-card:hover { box-shadow: 0 4px 16px rgba(11,58,214,.08); border-color: #c7d7fb; }
.bsf-airline { font-size: 13px; font-weight: 600; color: var(--text); min-width: 120px; }
.bsf-times { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; }
.bsf-times-sep { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bsf-times-sep span { font-size: 10px; color: var(--text-muted); }
.bsf-times-line { width: 60px; height: 1px; background: var(--border); }
.bsf-duration { font-size: 12px; color: var(--text-muted); }
.bsf-price { font-size: 20px; font-weight: 800; color: var(--primary); white-space: nowrap; }
.bsf-book-btn { background: var(--primary); color: #fff; border: none; border-radius: 8px; padding: 10px 20px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.bsf-book-btn:hover { background: var(--primary-dark); }
.bsf-loading  { text-align: center; padding: 40px; color: var(--text-muted); }
.bsf-empty    { text-align: center; padding: 40px; color: var(--text-muted); font-size: 13px; }

/* ── Booking engine: step progress bar ── */
.bsf-progress { display: flex; align-items: center; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.bsf-prog-step {
  font-size: 12px; font-weight: 600; color: #9ca3af;
  padding: 6px 14px; border-radius: 20px; background: #f1f5f9; transition: all .2s;
}
.bsf-prog-step.active { background: var(--primary); color: #fff; }
.bsf-prog-step.done   { background: #dcfce7; color: #16a34a; }
.bsf-prog-sep { color: #d1d5db; font-size: 14px; }

/* ── Selected flight summary banner ── */
.bsf-flight-summary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff; border-radius: 12px; padding: 16px 20px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.bsf-sum-airline { font-size: 12px; opacity: .8; margin-bottom: 2px; }
.bsf-sum-route   { font-size: 18px; font-weight: 800; flex: 1; }
.bsf-sum-price   { font-size: 20px; font-weight: 800; white-space: nowrap; }
.bsf-sum-back {
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3);
  color: #fff; border-radius: 8px; padding: 7px 14px; font-size: 12px; cursor: pointer;
  font-family: 'Inter', sans-serif;
}
.bsf-sum-back:hover { background: rgba(255,255,255,.25); }

/* ── Passenger form blocks ── */
.bsf-pax-block {
  background: #fff; border: 1.5px solid var(--border); border-radius: 12px;
  padding: 18px; margin-bottom: 14px;
}
.bsf-pax-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.bsf-pax-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary); color: #fff;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.bsf-pax-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .bsf-pax-grid { grid-template-columns: 1fr; } }

.bsf-pax-field { display: flex; flex-direction: column; gap: 5px; }
.bsf-pax-field label { font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .3px; }
.bsf-pax-field input,
.bsf-pax-field select {
  padding: 9px 12px; border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 13px; font-family: 'Inter', sans-serif; width: 100%; background: #fff;
  transition: border-color .15s;
}
.bsf-pax-field input:focus,
.bsf-pax-field select:focus { outline: none; border-color: var(--primary); }
.bsf-field-err { font-size: 11px; color: #ef4444; min-height: 14px; }
.bsf-req { color: #ef4444; }

.bsf-gender-row { display: flex; gap: 8px; }
.bsf-gender-btn {
  flex: 1; padding: 9px; border: 1.5px solid var(--border); border-radius: 8px;
  background: #fff; font-size: 13px; cursor: pointer; font-family: 'Inter', sans-serif;
  transition: all .15s;
}
.bsf-gender-btn.active { border-color: var(--primary); background: #eff6ff; color: var(--primary); font-weight: 600; }

/* ── Contact section ── */
.bsf-contact-section {
  background: #fff; border: 1.5px solid var(--border); border-radius: 12px;
  padding: 18px; margin-bottom: 14px;
}
.bsf-section-title { font-size: 14px; font-weight: 700; margin-bottom: 14px; color: var(--text); }

/* ── Price box ── */
.bsf-price-box {
  background: #f8faff; border: 1px solid #c7d7fb; border-radius: 12px; padding: 14px 18px;
  margin-bottom: 16px;
}
.bsf-price-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; color: #6b7280; }
.bsf-price-total {
  display: flex; justify-content: space-between;
  font-size: 17px; font-weight: 800; color: var(--primary);
  padding-top: 10px; border-top: 2px solid #c7d7fb; margin-top: 8px;
}
.bsf-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }

/* ── Payment method cards ── */
.bsf-pay-method {
  border: 2px solid var(--border); border-radius: 12px; padding: 14px 18px;
  cursor: pointer; display: flex; align-items: center; gap: 14px; margin-bottom: 10px;
  transition: border-color .15s, background .15s; background: #fff;
}
.bsf-pay-method:hover:not(.bsf-pay-disabled) { border-color: var(--primary); background: #f0f4ff; }
.bsf-pay-method.selected { border-color: var(--primary); background: #eff6ff; }
.bsf-pay-method.bsf-pay-disabled { opacity: .5; cursor: not-allowed; }
.bsf-pay-icon  { font-size: 24px; flex-shrink: 0; }
.bsf-pay-info  { flex: 1; }
.bsf-pay-name  { font-weight: 700; font-size: 14px; color: var(--text); }
.bsf-pay-desc  { font-size: 12px; color: #6b7280; margin-top: 2px; }
.bsf-pay-radio { width: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }

/* ── Confirmation screen ── */
.bsf-confirm-box {
  text-align: center; padding: 40px 24px;
  background: #fff; border-radius: 14px; border: 1.5px solid var(--border);
}
.bsf-confirm-ref {
  font-size: 26px; font-weight: 900; color: var(--primary);
  letter-spacing: 2px; margin: 10px 0 6px;
}
.bsf-confirm-status {
  font-weight: 600; font-size: 13px; margin-bottom: 12px;
}
.bsf-confirm-note {
  font-size: 13px; color: #6b7280; max-width: 380px; margin: 0 auto 24px; line-height: 1.6;
}

/* Service booking strip below Tourvisor widgets */
.ts-book-strip {
  margin-top: 14px; background: #f0f4ff; border: 1px solid #c7d7fb;
  border-radius: 10px; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.ts-book-strip span { font-size: 13px; color: #374151; }

/* ── Booking form steps: centered, not full-width ── */
#bsfStep2, #bsfStep3, #bsfStep4 {
  max-width: 760px;
  margin: 0 auto;
}

/* ── Saved passengers quick-fill ── */
.b2b-quickfill { margin-bottom: 18px; }
.b2bqf-title {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px;
}
.b2bqf-list { display: flex; gap: 8px; flex-wrap: wrap; }
.b2bqf-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 10px;
  border: 1.5px solid var(--border); background: #fff;
  cursor: pointer; transition: border-color .15s, background .15s;
  min-width: 170px;
}
.b2bqf-card:hover { border-color: var(--primary); background: #f0f4ff; }
.b2bqf-card.b2bqf-selected { border-color: var(--primary); background: #eff6ff; }
.b2bqf-check {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border); background: #f1f5f9;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: transparent; transition: all .15s;
}
.b2bqf-card.b2bqf-selected .b2bqf-check {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.b2bqf-name { font-size: 13px; font-weight: 600; color: var(--text); }
.b2bqf-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ── Fare rule color fix (booking.css always colors first=green / last=red) ── */
.fs-fare-row span { color: var(--text-muted) !important; }
.fs-fare-row span.fsr-ok { color: #10b981 !important; }
.fs-fare-row span.fsr-no { color: #ef4444 !important; }