/* ── CANONICAL BUTTON SYSTEM ──
   Single source of truth for every button on the site — public pages, admin
   dashboard, and admin login all link this file directly, rather than each
   redefining its own button rules. One shape/font/weight/hover-pattern for
   every button; the only thing allowed to vary is size (padding/font-size
   via .btn-sm/.btn-lg).

   text-transform is uppercase everywhere — a pure CSS transform, so it
   applies regardless of how each label is actually cased in its HTML.

   Two color variants only, chosen by background context, not preference:
   - .btn-primary (default): navy fill, for buttons on light backgrounds.
   - .btn-inverse: white fill, for the two public-site CTAs that sit directly
     on a navy/dark background (hero section, travel-services banner) — a
     navy button there would be invisible. Kept to the same shape/weight/
     hover pattern so it still reads as "the same button" in a different
     context.
   Every variant hovers to the same brand gold — text color stays whatever
   it already was at rest, only the fill/border swaps, matching how gold
   hovers were already used elsewhere in this codebase before consolidation.
   Semantic Bootstrap variants (success/danger/warning/secondary, used for
   admin status actions like Approve/Reject/Delete) keep their own meaningful
   colors AND hover feedback — a Reject button turning gold on hover would
   lose exactly the warning cue it needs right before a click. Only their
   shape/font/weight/pill radius is unified here, not their color logic. */
.btn{
  border-radius:999px !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  text-transform:uppercase !important;
  border-width:2px !important;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease !important;
  padding:10px 22px;
  font-size:15px;
}
.btn-sm{padding:6px 16px !important;font-size:13px !important;}
.btn-lg{padding:13px 30px !important;font-size:16px !important;}
.btn-primary{background:#2B338C !important;border-color:#2B338C !important;color:#fff !important;}
.btn-primary:hover,.btn-primary:focus{background:#A38A3C !important;border-color:#A38A3C !important;color:#fff !important;}
.btn-outline-primary{background:transparent !important;color:#2B338C !important;border-color:#2B338C !important;}
.btn-outline-primary:hover{background:#A38A3C !important;border-color:#A38A3C !important;color:#fff !important;}
.btn-inverse{background:#fff !important;color:#2B338C !important;border-color:#fff !important;}
.btn-inverse:hover{background:#A38A3C !important;border-color:#A38A3C !important;color:#fff !important;}

/* Shared small "ghost" pill used for header actions on a navy admin card
   (Cancel/close links on a colored panel header) — replaces 3 near-identical
   hand-typed inline styles previously duplicated across admin pages. */
.btn-ghost-light{
  background:rgba(255,255,255,.15) !important;
  color:#fff !important;
  border-color:transparent !important;
}
.btn-ghost-light:hover{background:#A38A3C !important;border-color:#A38A3C !important;color:#fff !important;}

/* Shared filter/pagination pill — mirrors admin/dashboard/header.php's
   .adm-filter-tab so the agent portal's status filters and pagination use
   the same pattern instead of hand-typed inline styles per page. Selected
   state is a meaningful "which filter is active" signal, not decoration —
   kept as its own toggle rather than folded into .btn-primary. */
.filter-tab{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 16px;border-radius:999px;
  font-size:12.5px;font-weight:600;
  letter-spacing:0;text-transform:uppercase;
  text-decoration:none;color:#585C74;
  background:#fff;border:1.5px solid #e1e2ec;
  transition:all .2s;
}
.filter-tab:hover{border-color:#2B338C;color:#2B338C;}
.filter-tab.active{background:#2B338C;border-color:#2B338C;color:#fff;}

/* File inputs' native "Choose File" button — styled via ::file-selector-button
   (the modern standard pseudo-element; ::-webkit-file-upload-button covers
   older WebKit) so every upload field across the site (visa application,
   admin blog images, admin order attachments) matches the same button
   system instead of the browser's default grey control. */
.form-control[type="file"]::file-selector-button,
.form-control[type="file"]::-webkit-file-upload-button{
  -webkit-appearance:none;
  appearance:none;
  background:#2B338C !important;
  color:#fff !important;
  border:none !important;
  border-radius:999px !important;
  font-weight:700 !important;
  font-family:inherit;
  font-size:13px;
  letter-spacing:0;
  text-transform:uppercase;
  padding:7px 18px;
  margin-right:14px;
  cursor:pointer;
  transition:background-color .15s ease;
}
/* Bootstrap's own `.form-control:hover:not(:disabled):not([readonly])
   ::file-selector-button` rule is MORE specific than a plain `:hover` on the
   pseudo-element itself, so it silently wins and shows Bootstrap's grey
   instead of gold unless this is also !important — same escape hatch used
   everywhere else in this file to guarantee wins over Bootstrap defaults. */
.form-control[type="file"]:hover::file-selector-button,
.form-control[type="file"]::file-selector-button:hover,
.form-control[type="file"]:hover::-webkit-file-upload-button,
.form-control[type="file"]::-webkit-file-upload-button:hover{
  background:#A38A3C !important;
}