/* ==========================================================================
   Travelbizz theme — plain CSS on top of Bootstrap 5.
   Reskins Bootstrap's own CSS variables (no Sass build needed) and adds
   the handful of custom components (search widget, deal cards, hero)
   needed to match the Seven Zones-style layout.
   ========================================================================== */

:root {
  --tb-sky-950: #082f49;
  --tb-sky-900: #0c4a6e;
  --tb-sky-800: #075985;
  --tb-sky-700: #0369a1;
  --tb-sky-600: #0284c7;
  --tb-sky-500: #0ea5e9;
  --tb-sky-100: #e0f2fe;
  --tb-sky-50: #f0f9ff;
  --tb-amber-600: #dc6f06;
  --tb-amber-500: #f8900c;
  --tb-amber-400: #ffa920;
  --tb-amber-50: #fff8eb;

  --bs-primary: var(--tb-amber-500);
  --bs-primary-rgb: 248, 144, 12;
  --bs-link-color: var(--tb-amber-600);
  --bs-link-color-rgb: 220, 111, 6;
  --bs-link-hover-color: var(--tb-amber-500);
  --bs-body-font-family: 'Poppins', sans-serif;

  /* Flat, square-cornered look (matches the reference site) — zeroing
     Bootstrap's own radius variables flattens every component built on
     top of them (.card, .btn, .form-control, .dropdown-menu, .nav-pills
     .nav-link, .modal-content, .rounded-*, .rounded-pill, etc). */
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0;
  --bs-border-radius-2xl: 0;
  --bs-border-radius-pill: 0;
}

body {
  font-family: var(--bs-body-font-family);
  color: var(--tb-sky-800);
}

/* .rounded-circle isn't variable-driven in Bootstrap, so flatten it explicitly */
.rounded-circle { border-radius: 0 !important; }

/* required-field asterisk marker used inside bootbox validation alerts */
.clrred { color: #dc3545; }

.navbar-brand {
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  color: var(--tb-sky-900) !important;
}
.navbar-brand .brand-accent { color: var(--tb-amber-500); }

.bg-sky   { background-color: var(--tb-sky-950) !important; }
.bg-sky-800 { background-color: var(--tb-sky-800) !important; }
.text-sky { color: var(--tb-sky-900) !important; }
.text-sky-light { color: var(--tb-sky-100) !important; }
.text-amber { color: var(--tb-amber-500) !important; }

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--tb-amber-500);
  --bs-btn-border-color: var(--tb-amber-500);
  --bs-btn-hover-bg: var(--tb-amber-600);
  --bs-btn-hover-border-color: var(--tb-amber-600);
  --bs-btn-active-bg: var(--tb-amber-600);
  --bs-btn-active-border-color: var(--tb-amber-600);
  font-weight: 600;
}

/* ---------- Top bar + navbar ---------- */
.topbar {
  background: var(--tb-sky-950);
  color: #c9d2e8;
  font-size: 0.85rem;
}
.topbar a { color: #c9d2e8; text-decoration: none; }
.topbar a:hover { color: var(--tb-amber-400); }

.navbar-main {
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 22, 46, 0.08);
}
.navbar-main .navbar-nav {
  gap: 0.4rem;
}
.navbar-main .nav-link {
  font-weight: 500;
  color: var(--tb-sky-700);
  padding: 0.6rem 1rem;
  border-bottom: 3px solid transparent;
  transition: background-color .15s ease, color .15s ease;
}
.navbar-main .nav-link:hover {
  color: var(--tb-sky-900);
  background: var(--tb-sky-50);
}
.navbar-main .nav-link.active {
  color: var(--tb-sky-900);
  font-weight: 700;
  background: var(--tb-amber-50);
  border-bottom-color: var(--tb-amber-500);
}
.navbar-main .nav-link i {
  font-size: 0.85rem;
  color: var(--tb-amber-500);
}
@media (min-width: 1200px) {
  .navbar-main .nav-link { padding: 0.7rem 1rem; }
}
.btn-callback {
  background: var(--tb-amber-500);
  color: #fff;
  border-radius: 0;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.55rem 1.25rem;
  white-space: nowrap;
}
.btn-callback:hover { background: var(--tb-amber-600); color: #fff; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background-color: var(--tb-sky-950);
  background-image: linear-gradient(180deg, rgba(2, 132, 199, .82) 0%, rgba(8, 47, 73, .95) 100%),
    url('../images/headermap.jpg');
  background-size: cover;
  background-position: center;
  padding: 2rem 0 3rem;
}
.hero h1 { color: #fff; font-weight: 800; font-size: 2.15rem; }
.hero .lead { color: #c9d2e8; font-size: 1.05rem; }

/* ---------- Search widget ---------- */
.search-widget {
  background: #fff;
  border-radius: 0;
  box-shadow: 0 20px 45px -18px rgba(8, 47, 73, .45);
  padding: 1.1rem;
  margin-top: -3rem;
  position: relative;
  z-index: 5;
}
@media (min-width: 768px) {
  .search-widget { padding: 1.35rem 1.75rem; }
}

.search-tabs .nav-link {
  border: none;
  border-radius: 0;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--tb-sky-600);
  padding: 0.4rem 1.1rem;
}
.search-tabs .nav-link.active {
  background: var(--tb-amber-500);
  color: #fff;
}
.search-tabs {
  background: var(--tb-sky-50);
  border-radius: 0;
  padding: 0.2rem;
  display: inline-flex;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

.search-widget label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tb-sky-500);
  margin-bottom: 0.2rem;
  display: block;
}
.search-widget label .age { text-transform: none; font-weight: 400; color: #9aa5c3; }

.search-field { position: relative; margin-bottom: 0.65rem; }
.search-field .field-icon {
  position: absolute;
  left: 0.85rem;
  top: 1.9rem;
  color: #9aa5c3;
  pointer-events: none;
}
.search-field .form-control,
.search-field .form-select {
  padding-left: 2.25rem;
}

/* Twitter Typeahead wraps the input in a `.twitter-typeahead` span that
   defaults to inline-block sized to content — without this it renders
   much narrower than the column, leaving a dead gap beside it. */
.search-field .twitter-typeahead {
  display: block !important;
  width: 100%;
}
.search-field .twitter-typeahead .tt-hint,
.search-field .twitter-typeahead .tt-input {
  width: 100%;
}
.search-widget .form-control,
.search-widget .form-select {
  border-color: var(--tb-sky-100);
  background: #fbfbfe;
  font-size: 0.9rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}
.search-widget .form-control:focus,
.search-widget .form-select:focus {
  border-color: var(--tb-amber-500);
  box-shadow: 0 0 0 0.2rem rgba(248, 144, 12, .15);
}

.counter-group {
  display: flex;
  border: 1px solid var(--tb-sky-100);
  border-radius: 0;
  overflow: hidden;
}
.counter-group .btn {
  flex: 1;
  border: none;
  border-radius: 0;
  background: #fff;
  color: var(--tb-sky-600);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.3rem 0;
}
.counter-group .btn + .btn { border-left: 1px solid var(--tb-sky-100); }
.counter-group .btn.active { background: var(--tb-sky-800); color: #fff; }

.search-submit {
  width: 100%;
  background: var(--tb-amber-500);
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 0;
  padding: 0.6rem;
  margin-top: 0.5rem;
}
.search-submit:hover { background: var(--tb-amber-600); color: #fff; }

/* ---------- Trust strip ---------- */
.trust-strip { border-bottom: 1px solid var(--tb-sky-100); }
.trust-strip .trust-icon {
  width: 44px;
  height: 44px;
  border-radius: 0;
  background: var(--tb-amber-50);
  color: var(--tb-amber-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ---------- Feature / deal cards ---------- */
.feature-card, .deal-card, .cta-card {
  border: none;
  border-radius: 0;
  box-shadow: 0 10px 30px -16px rgba(15, 22, 46, 0.2);
}
.feature-card .feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 0;
  background: var(--tb-sky-900);
  color: var(--tb-amber-400);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

/* overlay-style destination/hotel card: image fills the whole card,
   text sits on a gradient scrim at the bottom instead of below it */
.deal-card {
  position: relative;
  display: block;
  height: 280px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease;
  border: none;
  background-color: var(--tb-sky-800);
}
.deal-card:hover { transform: translateY(-4px); color: inherit; }
.deal-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3,20,33,0) 38%, rgba(3,20,33,.55) 72%, rgba(3,20,33,.92) 100%);
  z-index: 2;
}
.deal-card .deal-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .35s ease;
  z-index: 1;
}
.deal-card:hover .deal-img { transform: scale(1.06); }
.deal-card .card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 1rem 1.1rem;
}
.deal-card .card-body h6 { color: #fff !important; }
.deal-card .card-body p { color: rgba(255,255,255,.82) !important; }
.deal-card .deal-price { color: var(--tb-amber-400); font-weight: 700; font-size: 1.15rem; }

.country-deals { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 0; }
.country-deals .deal-row { color: #c9d2e8; text-decoration: none; border-top: 1px solid rgba(255,255,255,.08); padding: .6rem 0; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.country-deals .deal-row:first-child { border-top: 0; }
.country-deals .deal-row:hover { color: var(--tb-amber-400); }

/* ---------- Promo banner ---------- */
.promo-banner {
  background: linear-gradient(120deg, var(--tb-sky-900), var(--tb-sky-800));
  border: 1px solid rgba(248, 144, 12, .3);
  border-radius: 0;
  text-decoration: none;
  color: #fff;
  display: block;
  transition: border-color .2s ease;
}
.promo-banner:hover { border-color: var(--tb-amber-500); color: #fff; }

/* ---------- Footer ---------- */
.site-footer { background: var(--tb-sky-950); color: #c9d2e8; }
.site-footer a { color: #c9d2e8; text-decoration: none; }
.site-footer a:hover { color: var(--tb-amber-400); }
.site-footer h6 {
  color: #fff;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}
.site-footer .icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 0;
  background: var(--tb-sky-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.footer-bottom { background: var(--tb-sky-950); border-top: 1px solid var(--tb-sky-900); font-size: 0.8rem; color: #8592b8; }

/* ---------- datepicker / typeahead polish ---------- */
.datepicker.dropdown-menu {
  border: 1px solid var(--tb-sky-100);
  border-radius: 0;
  box-shadow: 0 15px 35px -12px rgba(8, 47, 73, .35);
  padding: 1rem;
  font-family: var(--bs-body-font-family);
}
.datepicker table { width: 100%; border-collapse: separate; border-spacing: 2px; }

/* header: prev/next + month-year switch */
.datepicker table thead tr:first-child th {
  font-weight: 700;
  color: var(--tb-sky-900);
  padding: 0.4rem 0.2rem 0.75rem;
}
.datepicker table thead tr:first-child th.prev,
.datepicker table thead tr:first-child th.next {
  font-weight: 400;
  color: var(--tb-sky-500);
  font-size: 1.1rem;
  cursor: pointer;
}
/* the plugin renders these <th> completely empty — the chevron glyph is
   expected to come from the base bootstrap-datepicker stylesheet, which
   we don't load, so supply it directly via Font Awesome's icon font */
.datepicker table thead tr:first-child th.next:before,
.datepicker table thead tr:first-child th.prev:before {
  font-family: FontAwesome;
  content: '\f105';
  font-size: 18px;
}
.datepicker table thead tr:first-child th.prev:before {
  content: '\f104';
}
.datepicker table thead tr:first-child th.prev:hover,
.datepicker table thead tr:first-child th.next:hover,
.datepicker table thead tr:first-child th.datepicker-switch:hover {
  background: var(--tb-sky-50);
  color: var(--tb-sky-900);
}
.datepicker table thead tr:first-child th.datepicker-switch { cursor: pointer; }
.datepicker table thead tr:first-child th.dow {
  color: #9aa5c3;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--tb-sky-100);
}

/* day / month / year cells */
.datepicker table tr td,
.datepicker table tr th {
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--tb-sky-800);
  cursor: pointer;
}
.datepicker table tr td.old,
.datepicker table tr td.new {
  color: #c3cadd;
}
.datepicker table tr td.day:hover,
.datepicker table tr td.focused,
.datepicker table tr td.month:hover,
.datepicker table tr td.year:hover {
  background: var(--tb-sky-50);
  border-radius: 0;
}
.datepicker table tr td.active.active,
.datepicker table tr td.today,
.datepicker table tr td span.active {
  background: var(--tb-amber-500) !important;
  background-image: none !important;
  color: #fff !important;
  font-weight: 700;
  border-radius: 0;
}
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
  color: #dde2ee;
  cursor: not-allowed;
  background: none;
}
/* Month/year/decade/century pickers render each cell as a <span> (e.g.
   <span class="year">2024</span>) packed 4-per-row inside a single wide
   <td> — they're grid tiles, not full-width rows. */
.datepicker table tr td span {
  display: block;
  float: left;
  width: 23%;
  margin: 1%;
  height: 54px;
  line-height: 54px;
  text-align: center;
  border-radius: 0;
}
.datepicker table tr td span:hover { background: var(--tb-sky-50); }

/* the single wide <td> that wraps the month/year/decade/century span
   grid must not inherit the 34x34 day-cell box, or the floated spans
   above get squashed/overflow it */
.datepicker-months table tr td,
.datepicker-years table tr td,
.datepicker-decades table tr td,
.datepicker-centuries table tr td {
  width: auto;
  height: auto;
}

/* today / clear footer */
.datepicker table tfoot tr th {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tb-sky-600);
  padding-top: 0.6rem;
  border-top: 1px solid var(--tb-sky-100);
}
.datepicker table tfoot tr th:hover { color: var(--tb-amber-500); }
.tt-menu {
  background: #fff;
  border: 1px solid var(--tb-sky-100);
  border-radius: 0;
  box-shadow: 0 15px 35px -12px rgba(8, 47, 73, .35);
  margin-top: 0.25rem;
  padding: 0.35rem 0;
}
.tt-suggestion { padding: 0.5rem 1rem; font-size: 0.9rem; cursor: pointer; }
.tt-suggestion:hover, .tt-suggestion.tt-cursor { background: var(--tb-sky-50); }

/* ---------- mobile floating actions ---------- */
.floating-actions { position: fixed; right: 1rem; bottom: 1rem; z-index: 1040; }
.floating-actions .btn {
  width: 52px; height: 52px; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 25px -8px rgba(8,47,73,.5);
}

/* ---------- content / legal pages ---------- */
.page-hero {
  background: var(--tb-sky-950);
  background-image: linear-gradient(120deg, var(--tb-sky-900), var(--tb-sky-950));
  padding: 3rem 0;
}
.page-hero .back-link { color: #c9d2e8; text-decoration: none; font-size: 0.9rem; }
.page-hero .back-link:hover { color: var(--tb-amber-400); }

.content-card {
  background: #fff;
  box-shadow: 0 10px 30px -16px rgba(15, 22, 46, 0.2);
  padding: 2rem;
}
.content-card h4 { color: var(--tb-sky-900); font-weight: 700; margin-top: 1.75rem; margin-bottom: 0.75rem; font-size: 1.15rem; }
.content-card h4:first-child { margin-top: 0; }
.content-card p { color: #4b5875; line-height: 1.7; }
.content-card ul { color: #4b5875; line-height: 1.8; padding-left: 1.25rem; }
.content-card .lead-intro { font-size: 1.05rem; color: var(--tb-sky-800); font-weight: 500; }
.content-card address { color: #4b5875; font-style: normal; line-height: 1.7; }
.content-card .note { background: var(--tb-sky-50); padding: 0.85rem 1rem; font-size: 0.9rem; border-left: 3px solid var(--tb-amber-500); }
.content-card h4 .section-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: var(--tb-sky-900); color: #fff;
  font-size: 0.78rem; margin-right: 0.5rem;
}
.content-card hr { border-color: var(--tb-sky-100); margin: 1.75rem 0; }

.toc-card {
  background: var(--tb-sky-50);
  border: 1px solid var(--tb-sky-100);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.toc-card .toc-title { font-weight: 700; color: var(--tb-sky-900); margin-bottom: 1rem; }
.toc-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.toc-card a { color: var(--tb-sky-700); text-decoration: none; font-size: 0.88rem; display: flex; align-items: center; gap: 0.5rem; }
.toc-card a:hover { color: var(--tb-amber-500); }
.toc-card a span {
  width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid var(--tb-sky-100);
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; flex-shrink: 0;
}

.sidebar-call-card {
  background: var(--tb-sky-950);
  padding: 1.5rem;
}
.sidebar-call-card .call-btn { display: flex; align-items: center; gap: 0.9rem; text-decoration: none; color: #fff; margin-bottom: 1rem; }
.sidebar-call-card .call-icon {
  width: 44px; height: 44px; border-radius: 50%; background: var(--tb-amber-500);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sidebar-call-card .call-btn strong { display: block; font-size: 1.05rem; }
.sidebar-call-card .call-btn small { color: #8592b8; }
.sidebar-call-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.sidebar-call-card li { color: #c9d2e8; font-size: 0.85rem; display: flex; align-items: center; gap: 0.5rem; }
.sidebar-call-card li i { color: var(--tb-amber-400); }

.offer-sidebar-card {
  background: var(--tb-amber-50);
  border: 1px dashed var(--tb-amber-500);
  padding: 1.5rem;
  text-align: center;
}
.offer-sidebar-card .eyebrow { color: var(--tb-amber-600); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
.offer-sidebar-card h4 { color: var(--tb-sky-900); margin: 0.5rem 0; }
.offer-sidebar-card .deposit { color: #4b5875; margin-bottom: 1rem; }

/* ---------- flight search results ---------- */
.results-empty { background: #fff; box-shadow: 0 10px 30px -16px rgba(15, 22, 46, 0.2); padding: 3rem 2rem; text-align: center; }
.results-empty i { font-size: 2.5rem; color: var(--tb-sky-100); margin-bottom: 1rem; }
.results-empty h3 { color: var(--tb-sky-900); }
.results-empty p { color: #4b5875; }

.flight-card { background: #fff; box-shadow: 0 10px 30px -16px rgba(15, 22, 46, 0.2); margin-bottom: 1.25rem; overflow: hidden; }
.flight-leg { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; flex-wrap: wrap; }
.flight-leg + .flight-leg { border-top: 1px solid var(--tb-sky-100); }
.leg-badge {
  background: var(--tb-sky-900); color: #fff; font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 0.25rem 0.6rem; flex-shrink: 0;
}
.leg-airline { display: flex; align-items: center; gap: 0.6rem; min-width: 150px; flex-shrink: 0; }
.leg-airline img { width: 30px; height: 30px; object-fit: contain; }
.leg-airline span { font-size: 0.82rem; color: var(--tb-sky-800); font-weight: 500; }
.leg-route { display: flex; align-items: center; gap: 1.25rem; flex: 1; min-width: 260px; }
.leg-point { text-align: center; }
.leg-point strong { display: block; font-size: 1.05rem; color: var(--tb-sky-900); }
.leg-point .leg-date { display: block; font-size: 0.72rem; color: #9aa5c3; }
.leg-point .leg-airport { display: block; font-size: 0.78rem; color: #4b5875; }
.leg-path { flex: 1; text-align: center; min-width: 100px; }
.leg-path-duration { display: block; font-size: 0.72rem; color: #9aa5c3; margin-bottom: 0.15rem; }
.leg-path-line { display: block; color: var(--tb-sky-100); border-top: 1px solid var(--tb-sky-100); position: relative; margin: 0.35rem 0; }
.leg-path-line i { background: #fff; padding: 0 0.4rem; position: relative; top: -0.6rem; color: var(--tb-sky-500); }
.leg-path-stops { display: block; font-size: 0.72rem; color: var(--tb-sky-600); font-weight: 600; }
.leg-path-stops.has-stops { color: var(--tb-amber-600); }
.flight-result-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; background: var(--tb-sky-50); flex-wrap: wrap;
}
.fare-label { display: block; font-size: 0.72rem; color: #9aa5c3; }
.fare-amount { font-size: 1.4rem; font-weight: 700; color: var(--tb-amber-600); }
.fare-amount small { font-size: 0.7rem; font-weight: 400; color: #9aa5c3; }

/* ---------- booking / enquiry pages ---------- */
.flight-summary-header {
  display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--tb-sky-100); background: var(--tb-sky-50);
}
.flight-summary-header img { width: 40px; height: 40px; object-fit: contain; }
.flight-summary-header strong { color: var(--tb-sky-900); }
.flight-summary-total {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; background: var(--tb-sky-900); color: #fff;
}
.flight-summary-total span { color: var(--tb-amber-400); font-weight: 700; font-size: 1.3rem; }

.enquiry-section-title { color: var(--tb-sky-900); font-weight: 700; margin-bottom: 0.25rem; }
.enquiry-section-title small { display: block; color: #9aa5c3; font-weight: 400; font-size: 0.8rem; margin-top: 0.25rem; }
.important-note { background: var(--tb-sky-50); border-left: 3px solid var(--tb-amber-500); padding: 0.85rem 1rem; font-size: 0.85rem; color: #4b5875; }