/* Sign In (Index.html) */
.form_box {
  max-width: 600px;
  display: grid;
  place-items: center;
  height: 100vh;
}

/* Sign In Ends */


/* Hide scrollbar but keep scrolling */
html, body { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }

/* General */
body {
  background: #D9D9D9;
}

.colored {
  color: #1983C6;
}

.make_small {
  font-size: 14px;
}

/* General Ends */


/* Dashboard Section */
.navbar,
.second_nav {
  background: #1983C6;
}

.navbar ul li {
  padding: 0px 10px;
  margin: 0px 5px;
}

.navbar ul li:hover {
  background: #d9d9d97e;
  border-radius: 50px;
}

.toggler {
  background: #d9d9d97e;
  border-radius: 50px;
}

.navbar ul li a {
  font-size: 0.85rem !important;
}

.cover {
  margin-top: 0px !important;
}

.travel_search {
  max-width: 300px;
}

/* Dashboard Ends */


/* Uploaded Document */
.span {
  font-size: 10px;
}

.control {
  top: 60px;
}

.upload_input,
.upload_input:focus {
  border: none !important;
  outline: none !important;
}

.select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
}

/* ── Global select style ───────────────────────────────────────────────────
   Applies to every <select> and Bootstrap .form-select across all templates.
   Exceptions: add class "select-raw" to opt a specific select out.
─────────────────────────────────────────────────────────────────────────── */
select:not(.select-raw),
.form-select:not(.select-raw) {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  display: block;
  width: 100%;
  height: auto;

  padding: 0.55rem 2.6rem 0.55rem 0.9rem !important;
  font-size: 0.88rem !important;
  font-weight: 500;
  line-height: 1.5;
  color: #1E293B !important;
  background-color: #ffffff !important;

  /* Custom chevron arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230D1B3E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.85rem center !important;
  background-size: 14px 14px !important;

  border: 1.5px solid #D1D5DB !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer;

  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

select:not(.select-raw):hover,
.form-select:not(.select-raw):hover {
  border-color: #94A3B8 !important;
}

select:not(.select-raw):focus,
.form-select:not(.select-raw):focus {
  border-color: #94A3B8 !important;
  box-shadow: none !important;
  outline: none !important;
}

select:not(.select-raw):disabled,
.form-select:not(.select-raw):disabled {
  background-color: #F8FAFC !important;
  color: #94A3B8 !important;
  border-color: #E2E8F0 !important;
  cursor: not-allowed;
}

/* lg variant — match form-select-lg sizing */
.form-select-lg:not(.select-raw),
select.form-select-lg:not(.select-raw) {
  padding: 0.7rem 2.8rem 0.7rem 1rem !important;
  font-size: 0.95rem !important;
  border-radius: 8px !important;
}

.active-edit,
.active-edit:focus {
  border: 2px solid #007bff3a !important;
  outline: 2px solid #007bff3a !important;
  border-radius: 10px;
}

/* Uploaded Document Ends */


/* Profile Document */

.team_pics_cover {
  position: relative;
  display: grid;
  place-items: center;
}

.team_pic_edit {
  background: #00000073;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  max-width: 200px;
  display: grid;
  place-items: center;
  font-size: 30px;
  border-radius: 50%;
  color: white;
  display: none;
}

.team_pics_cover:hover .team_pic_edit {
  display: grid;
}

.assigned_search {
  max-width: 220px;
}

.agency_num {
  font-size: 15px;
}


/* ── Global form element styles ────────────────────────────────────────────
   Applies to all text inputs, textareas, checkboxes, radios across templates.
   Exceptions: add class "input-raw" to opt a specific element out.
─────────────────────────────────────────────────────────────────────────── */

/* Text inputs & textarea */
input[type="text"]:not(.input-raw),
input[type="email"]:not(.input-raw),
input[type="password"]:not(.input-raw),
input[type="date"]:not(.input-raw),
input[type="datetime-local"]:not(.input-raw),
input[type="time"]:not(.input-raw),
input[type="number"]:not(.input-raw),
input[type="tel"]:not(.input-raw),
input[type="search"]:not(.input-raw),
input[type="url"]:not(.input-raw),
textarea:not(.input-raw),
.form-control:not(.input-raw) {
  display: block;
  width: 100%;
  padding: 0.55rem 0.9rem !important;
  font-size: 0.88rem !important;
  font-weight: 500;
  line-height: 1.5;
  color: #1E293B !important;
  background-color: #ffffff !important;
  border: 1.5px solid #D1D5DB !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="text"]:not(.input-raw):hover,
input[type="email"]:not(.input-raw):hover,
input[type="password"]:not(.input-raw):hover,
input[type="date"]:not(.input-raw):hover,
input[type="datetime-local"]:not(.input-raw):hover,
input[type="time"]:not(.input-raw):hover,
input[type="number"]:not(.input-raw):hover,
input[type="tel"]:not(.input-raw):hover,
input[type="search"]:not(.input-raw):hover,
input[type="url"]:not(.input-raw):hover,
textarea:not(.input-raw):hover,
.form-control:not(.input-raw):hover {
  border-color: #94A3B8 !important;
}

input[type="text"]:not(.input-raw):focus,
input[type="email"]:not(.input-raw):focus,
input[type="password"]:not(.input-raw):focus,
input[type="date"]:not(.input-raw):focus,
input[type="datetime-local"]:not(.input-raw):focus,
input[type="time"]:not(.input-raw):focus,
input[type="number"]:not(.input-raw):focus,
input[type="tel"]:not(.input-raw):focus,
input[type="search"]:not(.input-raw):focus,
input[type="url"]:not(.input-raw):focus,
textarea:not(.input-raw):focus,
.form-control:not(.input-raw):focus {
  border-color: #94A3B8 !important;
  box-shadow: none !important;
  outline: none !important;
}

input[type="text"]:not(.input-raw):disabled,
input[type="email"]:not(.input-raw):disabled,
input[type="password"]:not(.input-raw):disabled,
input[type="date"]:not(.input-raw):disabled,
input[type="datetime-local"]:not(.input-raw):disabled,
input[type="time"]:not(.input-raw):disabled,
input[type="number"]:not(.input-raw):disabled,
input[type="tel"]:not(.input-raw):disabled,
input[type="search"]:not(.input-raw):disabled,
input[type="url"]:not(.input-raw):disabled,
textarea:not(.input-raw):disabled,
.form-control:not(.input-raw):disabled {
  background-color: #F8FAFC !important;
  color: #94A3B8 !important;
  border-color: #E2E8F0 !important;
  cursor: not-allowed;
}

textarea:not(.input-raw) {
  resize: vertical;
  min-height: 90px;
}

/* lg variant */
.form-control-lg:not(.input-raw) {
  padding: 0.7rem 1rem !important;
  font-size: 0.95rem !important;
  border-radius: 8px !important;
}

/* sm variant */
.form-control-sm:not(.input-raw) {
  padding: 0.35rem 0.7rem !important;
  font-size: 0.8rem !important;
  border-radius: 6px !important;
}

/* Placeholder color */
input:not(.input-raw)::placeholder,
textarea:not(.input-raw)::placeholder,
.form-control:not(.input-raw)::placeholder {
  color: #94A3B8 !important;
  opacity: 1;
}


/* ── Checkbox & Radio ──────────────────────────────────────────────────── */
input[type="checkbox"]:not(.input-raw),
input[type="radio"]:not(.input-raw),
.form-check-input:not(.input-raw) {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 17px !important;
  height: 17px !important;
  min-width: 17px;
  border: 2px solid #D1D5DB !important;
  background-color: #ffffff !important;
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
}

input[type="checkbox"]:not(.input-raw),
.form-check-input[type="checkbox"]:not(.input-raw) {
  border-radius: 5px !important;
}

input[type="radio"]:not(.input-raw),
.form-check-input[type="radio"]:not(.input-raw) {
  border-radius: 50% !important;
}

input[type="checkbox"]:not(.input-raw):hover,
input[type="radio"]:not(.input-raw):hover,
.form-check-input:not(.input-raw):hover {
  border-color: #F97316 !important;
}

input[type="checkbox"]:not(.input-raw):checked,
.form-check-input[type="checkbox"]:not(.input-raw):checked {
  background-color: #F97316 !important;
  border-color: #F97316 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8l3.5 3.5L13 4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 11px 11px !important;
}

input[type="radio"]:not(.input-raw):checked,
.form-check-input[type="radio"]:not(.input-raw):checked {
  background-color: #F97316 !important;
  border-color: #F97316 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.5' fill='%23ffffff'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
}

input[type="checkbox"]:not(.input-raw):focus,
input[type="radio"]:not(.input-raw):focus,
.form-check-input:not(.input-raw):focus {
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15) !important;
  outline: none !important;
  border-color: #F97316 !important;
}


/* ── Form labels ───────────────────────────────────────────────────────── */
.form-label,
label.form-label {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 0.3rem !important;
  letter-spacing: 0.01em;
}


/* ── Input group addons ────────────────────────────────────────────────── */
.input-group-text {
  background-color: #F8FAFC !important;
  border: 1.5px solid #D1D5DB !important;
  color: #64748B !important;
  font-size: 0.88rem !important;
  border-radius: 8px !important;
}


/* ── Phone group: constrain dial-code select2 container width ─────────────
   Ensures the dial code select never expands to full flex width, keeping
   the phone number input visible beside it.
─────────────────────────────────────────────────────────────────────────── */
.su-phone-group .select2-container,
.su-phone-group .select2-container--default,
.tm-phone-group .select2-container,
.tm-phone-group .select2-container--default,
.mb-phone-group .select2-container,
.mb-phone-group .select2-container--default {
    flex: 0 0 190px !important;
    width: 190px !important;
    max-width: 190px !important;
    min-width: 0;
}

/* ── Select2 global skin ───────────────────────────────────────────────────
   Matches the clean pax-field style from flight_booking — applied sitewide.
─────────────────────────────────────────────────────────────────────────── */
.select2-container--default .select2-selection--single {
  height: 42px !important;
  border: 1.5px solid #D1D5DB !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 12px !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: #F97316 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.12) !important;
  outline: none !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  font-size: 0.88rem !important;
  font-weight: 500;
  color: #1E293B !important;
  line-height: 42px !important;
  padding: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #94A3B8 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px !important;
  right: 10px !important;
  width: 20px !important;
  top: 0 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #64748B transparent transparent transparent !important;
  border-width: 5px 4px 0 4px !important;
  top: 50% !important;
  margin-top: -2px !important;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #F97316 transparent !important;
  border-width: 0 4px 5px 4px !important;
}
.select2-dropdown {
  border: 1.5px solid #D1D5DB !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(13,27,62,0.12) !important;
  overflow: hidden;
  margin-top: 2px;
  z-index: 99999 !important;
}
.select2-container--default .select2-search--dropdown {
  padding: 8px !important;
  border-bottom: 1px solid #F1F5F9 !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1.5px solid #D1D5DB !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
  font-size: 0.85rem !important;
  color: #1E293B !important;
  background: #F8FAFC !important;
  width: 100% !important;
  outline: none !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: #F97316 !important;
  background: #fff !important;
}
.select2-results__options {
  max-height: 220px !important;
  overflow-y: auto !important;
  padding: 4px 0 !important;
}
.select2-container--default .select2-results__option {
  font-size: 0.85rem !important;
  padding: 8px 14px !important;
  color: #374151 !important;
  background: #fff !important;
  transition: background 0.1s;
}
.select2-container--default .select2-results__option--highlighted {
  background: #FFF7ED !important;
  color: #C2410C !important;
}
.select2-container--default .select2-results__option--selected {
  background: #FFF7ED !important;
  color: #C2410C !important;
  font-weight: 600 !important;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selected {
  background: #FFEDD5 !important;
}
.select2-container { width: 100% !important; }

/* ── Rate type pill badges (Negotiated / Promotional / Corporate) ── */
.rate-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.4;
}
.rate-badge--negotiated {
  background: #FFF7ED;
  color: #C2410C;
  border: 1px solid #FED7AA;
}
.rate-badge--promotional {
  background: #F0FDF4;
  color: #15803D;
  border: 1px solid #BBF7D0;
}
.rate-badge--corporate {
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
}

/* ── Always center button content (covers full-width flex buttons on mobile) ── */
.btn {
  justify-content: center;
  text-align: center;
}

/* ── Multi-city flight "Remove" button ───────────────────────────── */
button.remove-flight {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  background: #FEE2E2;
  color: #DC2626;
  border: 1px solid #FECACA;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
button.remove-flight:hover {
  background: #FECACA;
  border-color: #EF4444;
  color: #B91C1C;
}

/* ── Unified pagination — windowed numbered, use .tk-pagination everywhere ── */
.tk-pagination { display:flex; align-items:center; justify-content:center; gap:8px; padding:16px 20px; flex-wrap:wrap; }
.tk-pag-btn { min-width:40px; height:40px; padding:0 10px; border-radius:12px; border:1.5px solid #e2e8f0; background:#fff; color:#0D1B3E; display:inline-flex; align-items:center; justify-content:center; font-size:.9rem; font-weight:700; line-height:1; text-decoration:none; transition:all .15s; cursor:pointer; }
.tk-pag-btn:hover { border-color:#F97316; color:#F97316; }
.tk-pag-btn.active { background:#F97316; border-color:#F97316; color:#fff; box-shadow:0 4px 12px -2px rgba(249,115,22,.45); }
.tk-pag-btn.active:hover { color:#fff; }
.tk-pag-btn.disabled, button.tk-pag-btn:disabled, .tk-pag-btn[disabled] { opacity:.4; cursor:not-allowed; pointer-events:none; }
.tk-pag-ellipsis { min-width:24px; text-align:center; color:#94a3b8; font-weight:700; user-select:none; }

/* ═══ Global modal standard — always centered, scroll body only when tall ═══
   Replicates .modal-dialog-centered + .modal-dialog-scrollable for EVERY modal
   (so all ~229 modals are consistent) without touching per-modal markup and
   without clipping decorative overflow on .modal-content.
   Fullscreen variants excluded: modal-fullscreen, modal-fullscreen-sm-down
   (the only two found in this codebase via grep). ════════════════════════════ */

/* 1. Always vertically centre the dialog */
.modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]) {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem);
}
@media (min-width: 576px) {
  .modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]) {
    min-height: calc(100% - 3.5rem);
  }
}

/* 2. Cap modal-content height so it never overflows the viewport.
   No overflow property here — preserves floating icon badges on
   #messageModal (.tyktt-alert-icon-wrap) and #tykConfirmModal
   (.tyk-confirm-icon-wrap) which are absolutely positioned above
   .modal-content and must not be clipped. */
.modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]) > .modal-content {
  width: 100%;
  max-height: calc(100vh - 1rem);
}
@media (min-width: 576px) {
  .modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]) > .modal-content {
    max-height: calc(100vh - 3.5rem);
  }
}

/* 3. Scroll lives on .modal-body only — header and footer stay fixed.
   min-height:0 lets the flex child shrink below its content size so the
   cap on .modal-content can actually take effect.
   Short modals: body never hits the cap → no scrollbar, no forced height.
   Tall modals: body grows until cap → scrollbar appears, header/footer fixed.
   Helper modals (#messageModal, #tykConfirmModal, #tykPromptModal) have no
   .modal-body element, so this rule is a harmless no-op for them. */
.modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]) > .modal-content > .modal-body {
  overflow-y: auto;
  min-height: 0;
}

/* 4. Modals that have NO standard .modal-body (custom body wrapper, or content
   straight in .modal-content): scroll the content itself when it's capped,
   so long content is reachable. Excludes the short decorative cards whose
   icon badges intentionally overflow (they never need to scroll).
   !important is required to override per-modal `overflow:hidden` declarations
   (including Bootstrap's `.overflow-hidden` utility which uses `!important`,
   and ID-scoped card rules such as `#frequentFlyer .pmd-content`); only the
   vertical axis is overridden so `overflow-x` (horizontal clipping, rounded
   corners) is preserved as-is from each modal's own rules. */
.modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]) > .modal-content:not(:has(> .modal-body)):not(.tyktt-alert-card):not(.tyk-confirm-card) {
  overflow-y: auto !important;
}

@media (max-width:640px){ .tk-pagination{ gap:6px; padding:12px; } .tk-pag-btn{ min-width:36px; height:36px; font-size:.82rem; } }


/* ═══════════════════════════════════════════════════════════════════════════
   PROJECT BUTTON STANDARD  (.tk-btn / .tk-btn-primary / .tk-btn-ghost /
   .tk-btn-danger / .tk-btn-sm)                                   2026-09-20
   ---------------------------------------------------------------------------
   Palette : navy #0D1B3E · orange #F97316 (hover #ea6d0b) · line #E2E8F0 ·
             soft #F1F5F9 · danger #EF4444 (hover #DC2626)
   Primary : filled orange, white text, 600 weight, radius 10px, no uppercase,
             no MDB drop-shadow, hover = darker orange + soft orange glow.
   Ghost   : white bg, navy text, 1.5px #E2E8F0 border, hover #F1F5F9.
   Danger  : filled #EF4444, white text, hover #DC2626.
   Size    : min-height 40px (default) / 34px (.btn-sm, .tk-btn-sm).
   Disabled: opacity .5 + not-allowed cursor.  Focus-visible: 3px orange ring.

   TWO WAYS TO GET IT
   1) Explicit  -> <button class="btn tk-btn tk-btn-primary">  (or -ghost / -danger,
      add tk-btn-sm for the compact size). Works anywhere.
   2) Automatic -> RAW Bootstrap/MDB classes (.btn-primary, .btn-success,
      .btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-dark,
      .btn-danger) placed INSIDE A .modal-footer are re-skinned to the standard
      (so modals that still use stock MDB blue/grey buttons are on-brand).
      Scope EXCLUDES #tykConfirmModal, #tykPromptModal, #messageModal and
      #preloader_all (own designed buttons), and any button that also carries
      .tk-btn. Buttons with project custom classes (pa-btn, cc-btn-*, rd-agency-*,
      st-btn-* ...) never carry the raw variant classes so they are untouched.
      Outside .modal-footer nothing changes.
   NOTE: base2.html has a global `button.btn-primary{...!important}` (MDB blue);
   every declaration below that must beat it carries !important and a higher
   specificity.
   ═══════════════════════════════════════════════════════════════════════════ */

/* -- 1. Variant tokens (custom properties consumed by the shape rules) -- */
.tk-btn, .tk-btn-primary,
.modal:not([id="tykConfirmModal"],[id="tykPromptModal"],[id="messageModal"],[id="preloader_all"]) .modal-footer .btn:is(.btn-primary,.btn-success):not(.tk-btn) {
  --tkb-bg: #F97316; --tkb-fg: #fff; --tkb-bd: #F97316;
  --tkb-bg-h: #ea6d0b; --tkb-fg-h: #fff; --tkb-bd-h: #ea6d0b;
  --tkb-sh-h: 0 3px 10px rgba(249,115,22,.35);
  --tkb-ring: rgba(249,115,22,.40);
}
.tk-btn-ghost,
.modal:not([id="tykConfirmModal"],[id="tykPromptModal"],[id="messageModal"],[id="preloader_all"]) .modal-footer .btn:is(.btn-secondary,.btn-light,.btn-outline-secondary,.btn-outline-dark):not(.tk-btn) {
  --tkb-bg: #fff; --tkb-fg: #0D1B3E; --tkb-bd: #E2E8F0;
  --tkb-bg-h: #F1F5F9; --tkb-fg-h: #0D1B3E; --tkb-bd-h: #E2E8F0;
  --tkb-sh-h: none;
  --tkb-ring: rgba(13,27,62,.20);
}
.tk-btn-danger,
.modal:not([id="tykConfirmModal"],[id="tykPromptModal"],[id="messageModal"],[id="preloader_all"]) .modal-footer .btn:is(.btn-danger):not(.tk-btn) {
  --tkb-bg: #EF4444; --tkb-fg: #fff; --tkb-bd: #EF4444;
  --tkb-bg-h: #DC2626; --tkb-fg-h: #fff; --tkb-bd-h: #DC2626;
  --tkb-sh-h: 0 3px 10px rgba(239,68,68,.35);
  --tkb-ring: rgba(239,68,68,.40);
}

/* -- 2. Shape + colour (rest state) -- */
.tk-btn.tk-btn,
.modal:not([id="tykConfirmModal"],[id="tykPromptModal"],[id="messageModal"],[id="preloader_all"]) .modal-footer .btn:is(.btn-primary,.btn-success,.btn-secondary,.btn-light,.btn-outline-secondary,.btn-outline-dark,.btn-danger):not(.tk-btn) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  box-sizing: border-box;
  min-height: 40px;
  padding: 8px 20px !important;
  margin-top: 0;
  margin-bottom: 0;
  border: 1.5px solid var(--tkb-bd) !important;
  border-radius: 10px !important;
  background: var(--tkb-bg) !important;
  background-color: var(--tkb-bg) !important;
  color: var(--tkb-fg) !important;
  font-size: .85rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}

/* -- 3. Compact size -- */
.tk-btn.tk-btn.tk-btn-sm,
.modal:not([id="tykConfirmModal"],[id="tykPromptModal"],[id="messageModal"],[id="preloader_all"]) .modal-footer .btn.btn-sm:is(.btn-primary,.btn-success,.btn-secondary,.btn-light,.btn-outline-secondary,.btn-outline-dark,.btn-danger):not(.tk-btn) {
  min-height: 34px;
  padding: 6px 14px !important;
  font-size: .8rem !important;
  border-radius: 10px !important;
}

/* -- 4. Hover / active -- */
.tk-btn.tk-btn:hover, .tk-btn.tk-btn:active,
.modal:not([id="tykConfirmModal"],[id="tykPromptModal"],[id="messageModal"],[id="preloader_all"]) .modal-footer .btn:is(.btn-primary,.btn-success,.btn-secondary,.btn-light,.btn-outline-secondary,.btn-outline-dark,.btn-danger):not(.tk-btn):hover,
.modal:not([id="tykConfirmModal"],[id="tykPromptModal"],[id="messageModal"],[id="preloader_all"]) .modal-footer .btn:is(.btn-primary,.btn-success,.btn-secondary,.btn-light,.btn-outline-secondary,.btn-outline-dark,.btn-danger):not(.tk-btn):active {
  background: var(--tkb-bg-h) !important;
  background-color: var(--tkb-bg-h) !important;
  border-color: var(--tkb-bd-h) !important;
  color: var(--tkb-fg-h) !important;
  box-shadow: var(--tkb-sh-h) !important;
  opacity: 1;
}

/* -- 5. Keyboard focus ring (also replaces MDB's focus glow) -- */
.tk-btn.tk-btn:focus, .tk-btn.tk-btn:focus-visible,
.modal:not([id="tykConfirmModal"],[id="tykPromptModal"],[id="messageModal"],[id="preloader_all"]) .modal-footer .btn:is(.btn-primary,.btn-success,.btn-secondary,.btn-light,.btn-outline-secondary,.btn-outline-dark,.btn-danger):not(.tk-btn):focus,
.modal:not([id="tykConfirmModal"],[id="tykPromptModal"],[id="messageModal"],[id="preloader_all"]) .modal-footer .btn:is(.btn-primary,.btn-success,.btn-secondary,.btn-light,.btn-outline-secondary,.btn-outline-dark,.btn-danger):not(.tk-btn):focus-visible {
  outline: 0 !important;
  background-color: var(--tkb-bg) !important;
  color: var(--tkb-fg) !important;
  box-shadow: none !important;
}
.tk-btn.tk-btn:focus-visible,
.modal:not([id="tykConfirmModal"],[id="tykPromptModal"],[id="messageModal"],[id="preloader_all"]) .modal-footer .btn:is(.btn-primary,.btn-success,.btn-secondary,.btn-light,.btn-outline-secondary,.btn-outline-dark,.btn-danger):not(.tk-btn):focus-visible {
  box-shadow: 0 0 0 3px var(--tkb-ring) !important;
}
/* keep hover colours while focused with the mouse */
.tk-btn.tk-btn:hover:focus,
.modal:not([id="tykConfirmModal"],[id="tykPromptModal"],[id="messageModal"],[id="preloader_all"]) .modal-footer .btn:is(.btn-primary,.btn-success,.btn-secondary,.btn-light,.btn-outline-secondary,.btn-outline-dark,.btn-danger):not(.tk-btn):hover:focus {
  background-color: var(--tkb-bg-h) !important;
  color: var(--tkb-fg-h) !important;
  box-shadow: var(--tkb-sh-h) !important;
}

/* -- 6. Disabled -- */
.tk-btn.tk-btn:disabled, .tk-btn.tk-btn.disabled, .tk-btn.tk-btn[aria-disabled="true"],
.modal:not([id="tykConfirmModal"],[id="tykPromptModal"],[id="messageModal"],[id="preloader_all"]) .modal-footer .btn:is(.btn-primary,.btn-success,.btn-secondary,.btn-light,.btn-outline-secondary,.btn-outline-dark,.btn-danger):not(.tk-btn):disabled,
.modal:not([id="tykConfirmModal"],[id="tykPromptModal"],[id="messageModal"],[id="preloader_all"]) .modal-footer .btn:is(.btn-primary,.btn-success,.btn-secondary,.btn-light,.btn-outline-secondary,.btn-outline-dark,.btn-danger):not(.tk-btn).disabled {
  opacity: .5 !important;
  cursor: not-allowed !important;
  background-color: var(--tkb-bg) !important;
  border-color: var(--tkb-bd) !important;
  color: var(--tkb-fg) !important;
  box-shadow: none !important;
}
/* real <button disabled> keeps pointer events so the not-allowed cursor shows
   (the browser still blocks the click); anchors with .disabled stay inert */
.tk-btn.tk-btn:disabled,
.modal:not([id="tykConfirmModal"],[id="tykPromptModal"],[id="messageModal"],[id="preloader_all"]) .modal-footer .btn:is(.btn-primary,.btn-success,.btn-secondary,.btn-light,.btn-outline-secondary,.btn-outline-dark,.btn-danger):not(.tk-btn):disabled {
  pointer-events: auto !important;
}

/* -- 7. Icons inside standard buttons -- */
.tk-btn > i, .tk-btn > svg,
.modal:not([id="tykConfirmModal"],[id="tykPromptModal"],[id="messageModal"],[id="preloader_all"]) .modal-footer .btn:is(.btn-primary,.btn-success,.btn-secondary,.btn-light,.btn-outline-secondary,.btn-outline-dark,.btn-danger):not(.tk-btn) > i {
  flex-shrink: 0;
  margin: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .tk-btn.tk-btn { transition: none; }
}