/* Inter and Manrope are loaded from the page head, not with an @import here:
   an @import blocks the stylesheet until the font CSS has arrived. */
:root {
  --primary: #2A9D8F;
  --primary-two: #1f2437;
  --secondary: #192024;
  --success: #22c55e;
  --info: #16C7F9;
  --warning: #f97316;
  --danger: #F81F58;
  --light: #e2e8f0c4;
  --extra-light: #e2e8f08a;
  --muted: #8094ae;
  --dark: #2c323f;
  --white: #ffffff;
  --bg-white: #fff;
  --body-bg: #f6fbfa;
  --surface-bg: #fff;
  --sidebar-bg: #fff;
  --display-color: #30374f;
  --body-color: #30374f;
  --input-bg: #fff;
  --input-border: #e5e5e5;
  --placeholder-color: #858484;
  --border-color: #e5e5e5;
  --display-font: "Manrope", "Segoe UI", system-ui, sans-serif;
  --body-font: "Inter", "Segoe UI", system-ui, sans-serif;
  /* One rhythm for every section on the site. Change it here and the whole
     page breathes together instead of section by section. */
  --section-space: 70px;
  --section-gap: 40px;
  --font-2xxl: 2rem;
  --font-2xl: 1.75rem;
  --font-xxl: 1.5rem;
  --font-xl: 1.25rem;
  --font-lg: 1.125rem;
  --font-md: 1rem;
  --font-sm: 0.875rem;
  --font-xs: 0.75rem;
  --font-xxs: 0.625rem;
  --display-1: 4.625rem; /* 74px */
  --display-2: 3.625rem; /* 58px */
  --display-3: 1.875rem; /* 30px */
  --display-4: 1.5rem; /* 24px */
  --display-5: 1.25rem; /* 20px */
  --display-6: 1.125rem; /* 18px */
}

@media (min-width: 992px) {
  :root {
    --section-space: 70px;
    --section-gap: 52px;
  }
}

@media (min-width: 1400px) {
  :root {
    --section-space: 140px;
    --section-gap: 64px;
  }
}

@media (max-width: 1199px) {
  :root {
    --display-1: 3.375rem; /* 24px */
    --display-2: 2.625rem; /* 22px */
    --display-3: 1.625rem; /* 20px */
    --display-4: 1.25rem; /* 18px */
    --display-5: 1.125rem; /* 18px */
    --display-6: 1rem; /* 16px */
  }
}
@media (max-width: 575px) {
  :root {
    --display-1: 1.5rem; /* 24px */
    --display-2: 1.375rem; /* 22px */
    --display-3: 1.25rem; /* 20px */
    --display-4: 1.125rem; /* 18px */
    --display-5: 1.125rem; /* 18px */
    --display-6: 1rem; /* 16px */
  }
}
/* === reset css start === */
/* === reset css start === */
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}

:where([hidden]) {
  display: none;
}

:where([contenteditable]:not([contenteditable=false])) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
  -webkit-user-select: auto;
}

:where([draggable=true]) {
  -webkit-user-drag: element;
}

:where(dialog:modal) {
  all: revert;
}

*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--body-bg);
  color: var(--body-color);
  font-family: var(--body-font);
  font-size: 1rem;
  padding: 0;
  margin: 0;
  font-weight: 400;
  position: relative;
  line-height: 1.7;
  overflow-x: hidden;
}

@media (min-width: 576px) {
  body {
    font-size: 1rem;
  }
}
img {
  max-width: 100%;
  height: auto;
  user-select: none;
}

select {
  cursor: pointer;
}

dt {
  margin-left: 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border-top-width: 1px;
  clear: both;
  color: inherit;
  opacity: 0.15;
}

pre {
  font-family: monospace, monospace;
  font-size: inherit;
  font-size: 0.875rem;
}

pre::before, pre::after {
  box-shadow: none !important;
}

pre code {
  max-height: 400px !important;
  overflow-y: auto;
}

pre[class*=language-] > code {
  border-left-color: var(--primary);
  box-shadow: -1px 0 0 0 var(--primary), 0 0 0 1px var(--border-color);
}

address {
  font-style: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  cursor: pointer;
}

*:focus {
  outline: none;
}

button {
  border: none;
}

button:focus {
  outline: none;
}

a {
  text-decoration: none;
  display: inline-block;
  background-color: transparent;
  color: inherit;
}

a, button {
  cursor: revert;
}

a:hover {
  text-decoration: none;
}

strong {
  font-weight: 700;
}

a:hover {
  color: var(--primary);
}

abbr[title] {
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: inherit;
}

code {
  color: var(--danger);
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.2em;
}

svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit;
}

button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
  -webkit-appearance: button;
}

button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
  cursor: default;
}

:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

option {
  padding: 0;
}

fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

[type=number] {
  -moz-appearance: textfield;
}

label[for] {
  cursor: pointer;
}

details {
  display: block;
}

summary {
  display: list-item;
}

[contenteditable]:focus {
  outline: auto;
}

table {
  border-color: inherit;
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

/* === reset css end === */
.top-action-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--primary);
  z-index: 2;
  display: flex;
  flex-flow: column;
  align-items: center;
  color: #fff;
  padding: 10px 6px;
  font-size: 14px;
  border-radius: 99px;
  border: 2px solid #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.top-action-btn i {
  font-size: 18px;
}

/* === reset css end === */
/* === flex css start === */
.item-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* === flex css end === */
/* === color css start === */
.text-hover-primary:hover {
  color: var(--primary) !important;
}

.text-hover-primary-two:hover {
  color: var(--primary-two) !important;
}

.text-hover-secondary:hover {
  color: var(--secondary) !important;
}

.text-hover-success:hover {
  color: var(--success) !important;
}

.text-hover-info:hover {
  color: var(--info) !important;
}

.text-hover-warning:hover {
  color: var(--warning) !important;
}

.text-hover-danger:hover {
  color: var(--danger) !important;
}

.text-hover-light:hover {
  color: var(--light) !important;
}

.text-hover-extra-light:hover {
  color: var(--extra-light) !important;
}

.text-hover-muted:hover {
  color: var(--muted) !important;
}

.text-hover-dark:hover {
  color: var(--dark) !important;
}

.text-hover-white:hover {
  color: var(--white) !important;
}

.display-color {
  color: var(--display-color) !important;
}

.body-color {
  color: var(--body-color) !important;
}

.text-main,
.text-primary {
  color: var(--primary) !important;
}

.text-main-two {
  color: var(--primary-two) !important;
}

.text-dark {
  color: var(--secondary) !important;
}

/* === color css end === */
/* === bg css start === */
.bg-light-primary {
  background-color: rgba(42, 157, 143, 0.1254901961) !important;
}

.bg-light-primary-two {
  background-color: rgba(31, 36, 55, 0.1254901961) !important;
}

.bg-light-secondary {
  background-color: rgba(25, 32, 36, 0.1254901961) !important;
}

.bg-light-success {
  background-color: rgba(34, 197, 94, 0.1254901961) !important;
}

.bg-light-info {
  background-color: rgba(22, 199, 249, 0.1254901961) !important;
}

.bg-light-warning {
  background-color: rgba(249, 115, 22, 0.1254901961) !important;
}

.bg-light-danger {
  background-color: rgba(248, 31, 88, 0.1254901961) !important;
}

.bg-light-light {
  background-color: #e2e8f01f20 !important;
}

.bg-light-extra-light {
  background-color: #e2e8f08a20 !important;
}

.bg-light-muted {
  background-color: rgba(128, 148, 174, 0.1254901961) !important;
}

.bg-light-dark {
  background-color: rgba(44, 50, 63, 0.1254901961) !important;
}

.bg-light-white {
  background-color: rgba(255, 255, 255, 0.1254901961) !important;
}

.bg-primary {
  background-color: var(--primary) !important;
}

.bg-primary-two {
  background-color: var(--primary-two) !important;
}

.bg-secondary {
  background-color: var(--secondary) !important;
}

.bg-success {
  background-color: var(--success) !important;
}

.bg-info {
  background-color: var(--info) !important;
}

.bg-warning {
  background-color: var(--warning) !important;
}

.bg-danger {
  background-color: var(--danger) !important;
}

.bg-light {
  background-color: var(--light) !important;
}

.bg-extra-light {
  background-color: var(--extra-light) !important;
}

.bg-muted {
  background-color: var(--muted) !important;
}

.bg-dark {
  background-color: var(--dark) !important;
}

.bg-white {
  background-color: var(--white) !important;
}

.surface-bg {
  background-color: var(--surface-bg);
}

.body-bg {
  background-color: var(--body-bg);
}

/* === bg css end === */
/* === shadow css start === */
/* === shadow css end === */
/* === size css start === */
/* === size css end === */
/* === spacing css start === */
.pt-50 {
  padding-block-start: 3.125rem;
}

.pb-50 {
  padding-block-end: 3.125rem;
}

.py-50 {
  padding-block: 3.125rem;
}

/* The page builder puts this on every section it drops in */
.py-100 {
  padding-block: var(--section-space);
}
/* === spacing css end === */

/* === typography css start === */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  color: var(--display-color);
  font-weight: 700;
  font-family: var(--display-font);
  line-height: 1.3;
  /* Manrope sets wide by default; pulling it in slightly is what makes a
     heading read as one shape rather than a row of letters */
  letter-spacing: -0.02em;
}

/* Small headings are already tight, so they need less of it */
h5, .h5,
h6, .h6 {
  letter-spacing: -0.01em;
}

h1, .h1 {
  font-size: var(--display-1);
}

h2, .h2 {
  font-size: var(--display-2);
}

h3, .h3 {
  font-size: var(--display-3);
}

h4, .h4 {
  font-size: var(--display-4);
}

h5, .h5 {
  font-size: var(--display-5);
}

h6, .h6 {
  font-size: var(--display-6);
}

h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
  color: var(--primary);
}

.text-2xxl {
  font-size: var(--font-2xxl) !important;
}

.text-2xl {
  font-size: var(--font-2xl) !important;
}

.text-xxl {
  font-size: var(--font-xxl) !important;
}

.text-xl {
  font-size: var(--font-xl) !important;
}

.text-lg {
  font-size: var(--font-lg) !important;
}

.text-md {
  font-size: var(--font-md) !important;
}

.text-sm {
  font-size: var(--font-sm) !important;
}

.text-xs {
  font-size: var(--font-xs) !important;
}

.text-xxs {
  font-size: var(--font-xxs) !important;
}

.line-height-1 {
  line-height: 1 !important;
}

.text-line-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-line-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-line-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === typography css end === */
/* === text-align css start === */
.text-start {
  text-align: start !important;
}

.text-end {
  text-align: end !important;
}

/* === text-align css end === */
/* === border css start === */
.border {
  border-color: var(--border-color) !important;
}

.border-start {
  border-inline-start: 1px solid var(--border-color) !important;
}

.border-end {
  border-inline-end: 1px solid var(--border-color) !important;
}

.border-bottom {
  border-bottom: 1px solid var(--border-color) !important;
}

@media (min-width: 992px) {
  .border-lg-end {
    border-inline-end: 1px solid var(--border-color) !important;
  }
}
/* === border css end === */
/* === hover css start === */
/* === hover css end === */
/* === overlay css start === */
/* Overlay Css Start */
.gradient-overlay {
  position: relative;
  z-index: 1;
}

.gradient-overlay.top-0::before {
  transform: rotate(180deg);
}

.gradient-overlay::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 50%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 22%, rgba(0, 0, 0, 0.69) 57.92%, rgba(0, 0, 0, 0.7) 100%);
  left: inherit;
  bottom: inherit;
}

/* Overlay Css End */
/* === overlay css end === */
/* === position css start === */
.z-index-1 {
  z-index: 1;
}

.z-index--1 {
  z-index: -1;
}

.opacity-15 {
  opacity: 0.15;
}

.start-10 {
  inset-inline-start: 0.625rem;
}

.top-middle {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* === position css end === */
/* === section header css start === */
.section-header {
  margin-bottom: 2.8125rem;
}

.section-caption {
  position: relative;
  color: var(--primary);
  padding: 6px 16px;
  z-index: 0;
}

.section-caption::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary);
  border-radius: 99px;
  z-index: -1;
  opacity: 0.1;
}

.section-title {
  font-size: 1.625rem;
  font-weight: 700;
}

@media (min-width: 576px) {
  .section-title {
    font-size: 1.75rem;
  }
}
@media (min-width: 1200px) {
  .section-title {
    font-size: 2rem;
  }
}
@media (min-width: 1200px) {
  .section-title {
    font-size: 2.625rem;
  }
}
@media (min-width: 1400px) {
  .section-title {
    font-size: 3rem;
  }
}
/* === section header css end === */
/* === preloader css start === */
.rt-preloader {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--secondary);
  z-index: 99999;
}

.rt-cube-grid {
  width: 60px;
  height: 60px;
}

.rt-cube-grid .rt-cube {
  width: 33%;
  height: 33%;
  background-color: var(--primary);
  float: left;
  -webkit-animation: rt-cubeGridScaleDelay 1.3s infinite ease-in-out;
  animation: rt-cubeGridScaleDelay 1.3s infinite ease-in-out;
}

.rt-cube-grid .rt-cube1 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.rt-cube-grid .rt-cube2 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.rt-cube-grid .rt-cube3 {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.rt-cube-grid .rt-cube4 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.rt-cube-grid .rt-cube5 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.rt-cube-grid .rt-cube6 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.rt-cube-grid .rt-cube7 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.rt-cube-grid .rt-cube8 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.rt-cube-grid .rt-cube9 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

@-webkit-keyframes rt-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}
@keyframes rt-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}
/* === preloader css end === */
/* === buttons css start === */
.btn {
  font-size: 1rem;
  padding: 0.625rem 1.25rem;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  /* A button is a decision, so it carries more weight than the text
     around it without shouting */
  font-family: var(--body-font);
  font-weight: 600;
}

@media (min-width: 1400px) {
  .btn {
    padding: -0.125rem 1.875rem;
  }
}
.btn.btn-lg {
  font-size: 1rem;
  padding: 0.75rem 1.5625rem;
}

@media (min-width: 1400px) {
  .btn.btn-lg {
    font-size: 1.125rem;
    padding: 0.875rem 2.1875rem;
  }
}
.btn.btn-md {
  padding: 0.5rem 1.125rem;
}

@media (min-width: 1400px) {
  .btn.btn-md {
    padding: 0.625rem 1.25rem;
  }
}
.btn.btn-sm {
  font-size: 0.8125rem;
  padding: 0.375rem 0.75rem;
}

.btn-primary {
  background-color: var(--primary) !important;
  color: #fff;
  border-color: var(--primary);
}

.btn-primary:hover {
  background-color: rgba(42, 157, 143, 0.831372549) !important;
  color: #fff;
  border-color: rgba(42, 157, 143, 0.831372549);
}

.btn-primary:active, .btn-primary:focus {
  background-color: var(--primary) !important;
  color: #fff;
  border-color: var(--primary);
}

.btn-primary.has-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-primary .btn-badge {
  width: 18px;
  height: 18px;
  background-color: #fff;
  color: var(--primary);
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 500;
}

.btn-primary-two {
  background-color: #1f2437 !important;
  color: #fff;
  border-color: #1f2437;
}

.btn-primary-two:hover {
  background-color: rgba(31, 36, 55, 0.831372549) !important;
  color: #fff;
  border-color: rgba(31, 36, 55, 0.831372549);
}

.btn-primary-two:active, .btn-primary-two:focus {
  background-color: #1f2437 !important;
  color: #fff;
  border-color: #1f2437;
}

.btn-primary-two.has-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-primary-two .btn-badge {
  width: 18px;
  height: 18px;
  background-color: #fff;
  color: #1f2437;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 500;
}

.btn-secondary {
  background-color: #192024 !important;
  color: #fff;
  border-color: #192024;
}

.btn-secondary:hover {
  background-color: rgba(25, 32, 36, 0.831372549) !important;
  color: #fff;
  border-color: rgba(25, 32, 36, 0.831372549);
}

.btn-secondary:active, .btn-secondary:focus {
  background-color: #192024 !important;
  color: #fff;
  border-color: #192024;
}

.btn-secondary.has-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-secondary .btn-badge {
  width: 18px;
  height: 18px;
  background-color: #fff;
  color: #192024;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 500;
}

.btn-success {
  background-color: #22c55e !important;
  color: #fff;
  border-color: #22c55e;
}

.btn-success:hover {
  background-color: rgba(34, 197, 94, 0.831372549) !important;
  color: #fff;
  border-color: rgba(34, 197, 94, 0.831372549);
}

.btn-success:active, .btn-success:focus {
  background-color: #22c55e !important;
  color: #fff;
  border-color: #22c55e;
}

.btn-success.has-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-success .btn-badge {
  width: 18px;
  height: 18px;
  background-color: #fff;
  color: #22c55e;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 500;
}

.btn-info {
  background-color: #16C7F9 !important;
  color: #fff;
  border-color: #16C7F9;
}

.btn-info:hover {
  background-color: rgba(22, 199, 249, 0.831372549) !important;
  color: #fff;
  border-color: rgba(22, 199, 249, 0.831372549);
}

.btn-info:active, .btn-info:focus {
  background-color: #16C7F9 !important;
  color: #fff;
  border-color: #16C7F9;
}

.btn-info.has-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-info .btn-badge {
  width: 18px;
  height: 18px;
  background-color: #fff;
  color: #16C7F9;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 500;
}

.btn-warning {
  background-color: #f97316 !important;
  color: #fff;
  border-color: #f97316;
}

.btn-warning:hover {
  background-color: rgba(249, 115, 22, 0.831372549) !important;
  color: #fff;
  border-color: rgba(249, 115, 22, 0.831372549);
}

.btn-warning:active, .btn-warning:focus {
  background-color: #f97316 !important;
  color: #fff;
  border-color: #f97316;
}

.btn-warning.has-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-warning .btn-badge {
  width: 18px;
  height: 18px;
  background-color: #fff;
  color: #f97316;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 500;
}

.btn-danger {
  background-color: #F81F58 !important;
  color: #fff;
  border-color: #F81F58;
}

.btn-danger:hover {
  background-color: rgba(248, 31, 88, 0.831372549) !important;
  color: #fff;
  border-color: rgba(248, 31, 88, 0.831372549);
}

.btn-danger:active, .btn-danger:focus {
  background-color: #F81F58 !important;
  color: #fff;
  border-color: #F81F58;
}

.btn-danger.has-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-danger .btn-badge {
  width: 18px;
  height: 18px;
  background-color: #fff;
  color: #F81F58;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 500;
}

.btn-light {
  background-color: rgba(226, 232, 240, 0.1215686275) !important;
  color: #fff;
  border-color: rgba(226, 232, 240, 0.1215686275);
}

/* Was #e2e8f01fd4 — ten hex digits is not a colour, so the browser dropped both
   declarations and the ghost button had no hover state at all */
.btn-light:hover {
  background-color: rgba(226, 232, 240, 0.2196078431) !important;
  color: #fff;
  border-color: rgba(226, 232, 240, 0.2196078431);
}

.btn-light:active, .btn-light:focus {
  background-color: rgba(226, 232, 240, 0.1215686275) !important;
  color: #fff;
  border-color: rgba(226, 232, 240, 0.1215686275);
}

.btn-light.has-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-light .btn-badge {
  width: 18px;
  height: 18px;
  background-color: #fff;
  color: rgba(226, 232, 240, 0.1215686275);
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 500;
}

.btn-extra-light {
  background-color: rgba(226, 232, 240, 0.5411764706) !important;
  color: #fff;
  border-color: rgba(226, 232, 240, 0.5411764706);
}

.btn-extra-light:hover {
  background-color: #e2e8f08ad4 !important;
  color: #fff;
  border-color: #e2e8f08ad4;
}

.btn-extra-light:active, .btn-extra-light:focus {
  background-color: rgba(226, 232, 240, 0.5411764706) !important;
  color: #fff;
  border-color: rgba(226, 232, 240, 0.5411764706);
}

.btn-extra-light.has-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-extra-light .btn-badge {
  width: 18px;
  height: 18px;
  background-color: #fff;
  color: rgba(226, 232, 240, 0.5411764706);
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 500;
}

.btn-muted {
  background-color: #8094ae !important;
  color: #fff;
  border-color: #8094ae;
}

.btn-muted:hover {
  background-color: rgba(128, 148, 174, 0.831372549) !important;
  color: #fff;
  border-color: rgba(128, 148, 174, 0.831372549);
}

.btn-muted:active, .btn-muted:focus {
  background-color: #8094ae !important;
  color: #fff;
  border-color: #8094ae;
}

.btn-muted.has-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-muted .btn-badge {
  width: 18px;
  height: 18px;
  background-color: #fff;
  color: #8094ae;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 500;
}

.btn-dark {
  background-color: #2c323f !important;
  color: #fff;
  border-color: #2c323f;
}

.btn-dark:hover {
  background-color: rgba(44, 50, 63, 0.831372549) !important;
  color: #fff;
  border-color: rgba(44, 50, 63, 0.831372549);
}

.btn-dark:active, .btn-dark:focus {
  background-color: #2c323f !important;
  color: #fff;
  border-color: #2c323f;
}

.btn-dark.has-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-dark .btn-badge {
  width: 18px;
  height: 18px;
  background-color: #fff;
  color: #2c323f;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 500;
}

.btn-white {
  background-color: #ffffff !important;
  color: #fff;
  border-color: #ffffff;
}

.btn-white:hover {
  background-color: rgba(255, 255, 255, 0.831372549) !important;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.831372549);
}

.btn-white:active, .btn-white:focus {
  background-color: #ffffff !important;
  color: #fff;
  border-color: #ffffff;
}

.btn-white.has-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-white .btn-badge {
  width: 18px;
  height: 18px;
  background-color: #fff;
  color: #ffffff;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 500;
}

.btn-light-primary {
  border: 1px solid rgba(42, 157, 143, 0);
  color: var(--primary);
  background-color: rgba(42, 157, 143, 0.1254901961);
}

.btn-light-primary:hover {
  color: #fff;
  background-color: var(--primary);
}

.btn-light-primary-two {
  border: 1px solid rgba(31, 36, 55, 0);
  color: #1f2437;
  background-color: rgba(31, 36, 55, 0.1254901961);
}

.btn-light-primary-two:hover {
  color: #fff;
  background-color: #1f2437;
}

.btn-light-secondary {
  border: 1px solid rgba(25, 32, 36, 0);
  color: #192024;
  background-color: rgba(25, 32, 36, 0.1254901961);
}

.btn-light-secondary:hover {
  color: #fff;
  background-color: #192024;
}

.btn-light-success {
  border: 1px solid rgba(34, 197, 94, 0);
  color: #22c55e;
  background-color: rgba(34, 197, 94, 0.1254901961);
}

.btn-light-success:hover {
  color: #fff;
  background-color: #22c55e;
}

.btn-light-info {
  border: 1px solid rgba(22, 199, 249, 0);
  color: #16C7F9;
  background-color: rgba(22, 199, 249, 0.1254901961);
}

.btn-light-info:hover {
  color: #fff;
  background-color: #16C7F9;
}

.btn-light-warning {
  border: 1px solid rgba(249, 115, 22, 0);
  color: #f97316;
  background-color: rgba(249, 115, 22, 0.1254901961);
}

.btn-light-warning:hover {
  color: #fff;
  background-color: #f97316;
}

.btn-light-danger {
  border: 1px solid rgba(248, 31, 88, 0);
  color: #F81F58;
  background-color: rgba(248, 31, 88, 0.1254901961);
}

.btn-light-danger:hover {
  color: #fff;
  background-color: #F81F58;
}

.btn-light-light {
  border: 1px solid #e2e8f01f00;
  color: rgba(226, 232, 240, 0.1215686275);
  background-color: #e2e8f01f20;
}

.btn-light-light:hover {
  color: #fff;
  background-color: rgba(226, 232, 240, 0.1215686275);
}

.btn-light-extra-light {
  border: 1px solid #e2e8f08a00;
  color: rgba(226, 232, 240, 0.5411764706);
  background-color: #e2e8f08a20;
}

.btn-light-extra-light:hover {
  color: #fff;
  background-color: rgba(226, 232, 240, 0.5411764706);
}

.btn-light-muted {
  border: 1px solid rgba(128, 148, 174, 0);
  color: #8094ae;
  background-color: rgba(128, 148, 174, 0.1254901961);
}

.btn-light-muted:hover {
  color: #fff;
  background-color: #8094ae;
}

.btn-light-dark {
  border: 1px solid rgba(44, 50, 63, 0);
  color: #2c323f;
  background-color: rgba(44, 50, 63, 0.1254901961);
}

.btn-light-dark:hover {
  color: #fff;
  background-color: #2c323f;
}

.btn-light-white {
  border: 1px solid rgba(255, 255, 255, 0);
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1254901961);
}

.btn-light-white:hover {
  color: #fff;
  background-color: #ffffff;
}

.btn-icon {
  width: 32px;
  height: 32px;
  padding: 0.3125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

@-webkit-keyframes line {
  from {
    margin-top: -60px;
    margin-left: -90px;
  }
  to {
    margin-top: -60px;
    margin-left: 250px;
  }
}
/* === buttons css end === */
/* === alert css start === */
.alert {
  padding: 0.625rem 0.9375rem;
}

.alert-primary {
  color: var(--primary) !important;
  border: none;
  position: relative;
  background-color: transparent;
  overflow: hidden;
  z-index: 1;
  border-radius: 6px;
}

.alert-primary::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: var(--primary);
  border: 1px solid var(--primary);
  opacity: 0.15;
  border-radius: 6px;
}

.alert-primary::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  border: 1px solid var(--primary);
  opacity: 0.35;
  border-radius: 6px;
}

.alert-primary.border-0::after {
  display: none;
}

.alert-primary-two {
  color: var(--primary-two) !important;
  border: none;
  position: relative;
  background-color: transparent;
  overflow: hidden;
  z-index: 1;
  border-radius: 6px;
}

.alert-primary-two::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: var(--primary-two);
  border: 1px solid var(--primary-two);
  opacity: 0.15;
  border-radius: 6px;
}

.alert-primary-two::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  border: 1px solid var(--primary-two);
  opacity: 0.35;
  border-radius: 6px;
}

.alert-primary-two.border-0::after {
  display: none;
}

.alert-secondary {
  color: var(--secondary) !important;
  border: none;
  position: relative;
  background-color: transparent;
  overflow: hidden;
  z-index: 1;
  border-radius: 6px;
}

.alert-secondary::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: var(--secondary);
  border: 1px solid var(--secondary);
  opacity: 0.15;
  border-radius: 6px;
}

.alert-secondary::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  border: 1px solid var(--secondary);
  opacity: 0.35;
  border-radius: 6px;
}

.alert-secondary.border-0::after {
  display: none;
}

.alert-success {
  color: var(--success) !important;
  border: none;
  position: relative;
  background-color: transparent;
  overflow: hidden;
  z-index: 1;
  border-radius: 6px;
}

.alert-success::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: var(--success);
  border: 1px solid var(--success);
  opacity: 0.15;
  border-radius: 6px;
}

.alert-success::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  border: 1px solid var(--success);
  opacity: 0.35;
  border-radius: 6px;
}

.alert-success.border-0::after {
  display: none;
}

.alert-info {
  color: var(--info) !important;
  border: none;
  position: relative;
  background-color: transparent;
  overflow: hidden;
  z-index: 1;
  border-radius: 6px;
}

.alert-info::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: var(--info);
  border: 1px solid var(--info);
  opacity: 0.15;
  border-radius: 6px;
}

.alert-info::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  border: 1px solid var(--info);
  opacity: 0.35;
  border-radius: 6px;
}

.alert-info.border-0::after {
  display: none;
}

.alert-warning {
  color: var(--warning) !important;
  border: none;
  position: relative;
  background-color: transparent;
  overflow: hidden;
  z-index: 1;
  border-radius: 6px;
}

.alert-warning::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: var(--warning);
  border: 1px solid var(--warning);
  opacity: 0.15;
  border-radius: 6px;
}

.alert-warning::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  border: 1px solid var(--warning);
  opacity: 0.35;
  border-radius: 6px;
}

.alert-warning.border-0::after {
  display: none;
}

.alert-danger {
  color: var(--danger) !important;
  border: none;
  position: relative;
  background-color: transparent;
  overflow: hidden;
  z-index: 1;
  border-radius: 6px;
}

.alert-danger::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: var(--danger);
  border: 1px solid var(--danger);
  opacity: 0.15;
  border-radius: 6px;
}

.alert-danger::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  border: 1px solid var(--danger);
  opacity: 0.35;
  border-radius: 6px;
}

.alert-danger.border-0::after {
  display: none;
}

.alert-light {
  color: var(--light) !important;
  border: none;
  position: relative;
  background-color: transparent;
  overflow: hidden;
  z-index: 1;
  border-radius: 6px;
}

.alert-light::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: var(--light);
  border: 1px solid var(--light);
  opacity: 0.15;
  border-radius: 6px;
}

.alert-light::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  border: 1px solid var(--light);
  opacity: 0.35;
  border-radius: 6px;
}

.alert-light.border-0::after {
  display: none;
}

.alert-extra-light {
  color: var(--extra-light) !important;
  border: none;
  position: relative;
  background-color: transparent;
  overflow: hidden;
  z-index: 1;
  border-radius: 6px;
}

.alert-extra-light::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: var(--extra-light);
  border: 1px solid var(--extra-light);
  opacity: 0.15;
  border-radius: 6px;
}

.alert-extra-light::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  border: 1px solid var(--extra-light);
  opacity: 0.35;
  border-radius: 6px;
}

.alert-extra-light.border-0::after {
  display: none;
}

.alert-muted {
  color: var(--muted) !important;
  border: none;
  position: relative;
  background-color: transparent;
  overflow: hidden;
  z-index: 1;
  border-radius: 6px;
}

.alert-muted::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: var(--muted);
  border: 1px solid var(--muted);
  opacity: 0.15;
  border-radius: 6px;
}

.alert-muted::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  border: 1px solid var(--muted);
  opacity: 0.35;
  border-radius: 6px;
}

.alert-muted.border-0::after {
  display: none;
}

.alert-dark {
  color: var(--dark) !important;
  border: none;
  position: relative;
  background-color: transparent;
  overflow: hidden;
  z-index: 1;
  border-radius: 6px;
}

.alert-dark::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: var(--dark);
  border: 1px solid var(--dark);
  opacity: 0.15;
  border-radius: 6px;
}

.alert-dark::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  border: 1px solid var(--dark);
  opacity: 0.35;
  border-radius: 6px;
}

.alert-dark.border-0::after {
  display: none;
}

.alert-white {
  color: var(--white) !important;
  border: none;
  position: relative;
  background-color: transparent;
  overflow: hidden;
  z-index: 1;
  border-radius: 6px;
}

.alert-white::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: var(--white);
  border: 1px solid var(--white);
  opacity: 0.15;
  border-radius: 6px;
}

.alert-white::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  border: 1px solid var(--white);
  opacity: 0.35;
  border-radius: 6px;
}

.alert-white.border-0::after {
  display: none;
}

.alert-light {
  color: var(--display-color) !important;
}

.alert-dismissible .btn-close {
  width: 10px;
  height: 7px;
  background-size: 10px;
}

.alert-dismissible .btn-close:focus {
  box-shadow: none;
}

/* === alert css end === */
/* === badge css start === */
.badge {
  font-weight: 500;
  font-size: 0.75rem;
}

.badge-primary {
  background-color: var(--primary) !important;
  color: #fff !important;
}

.badge-primary-two {
  background-color: #1f2437 !important;
  color: #fff !important;
}

.badge-secondary {
  background-color: #192024 !important;
  color: #fff !important;
}

.badge-success {
  background-color: #22c55e !important;
  color: #fff !important;
}

.badge-info {
  background-color: #16C7F9 !important;
  color: #fff !important;
}

.badge-warning {
  background-color: #f97316 !important;
  color: #fff !important;
}

.badge-danger {
  background-color: #F81F58 !important;
  color: #fff !important;
}

.badge-light {
  background-color: rgba(226, 232, 240, 0.1215686275) !important;
  color: #fff !important;
}

.badge-extra-light {
  background-color: rgba(226, 232, 240, 0.5411764706) !important;
  color: #fff !important;
}

.badge-muted {
  background-color: #8094ae !important;
  color: #fff !important;
}

.badge-dark {
  background-color: #2c323f !important;
  color: #fff !important;
}

.badge-white {
  background-color: #ffffff !important;
  color: #fff !important;
}

.badge-light-primary {
  background-color: rgba(42, 157, 143, 0.1254901961) !important;
  color: var(--primary) !important;
}

.badge-light-primary-two {
  background-color: rgba(31, 36, 55, 0.1254901961) !important;
  color: #1f2437 !important;
}

.badge-light-secondary {
  background-color: rgba(25, 32, 36, 0.1254901961) !important;
  color: #192024 !important;
}

.badge-light-success {
  background-color: rgba(34, 197, 94, 0.1254901961) !important;
  color: #22c55e !important;
}

.badge-light-info {
  background-color: rgba(22, 199, 249, 0.1254901961) !important;
  color: #16C7F9 !important;
}

.badge-light-warning {
  background-color: rgba(249, 115, 22, 0.1254901961) !important;
  color: #f97316 !important;
}

.badge-light-danger {
  background-color: rgba(248, 31, 88, 0.1254901961) !important;
  color: #F81F58 !important;
}

.badge-light-light {
  background-color: #e2e8f01f20 !important;
  color: rgba(226, 232, 240, 0.1215686275) !important;
}

.badge-light-extra-light {
  background-color: #e2e8f08a20 !important;
  color: rgba(226, 232, 240, 0.5411764706) !important;
}

.badge-light-muted {
  background-color: rgba(128, 148, 174, 0.1254901961) !important;
  color: #8094ae !important;
}

.badge-light-dark {
  background-color: rgba(44, 50, 63, 0.1254901961) !important;
  color: #2c323f !important;
}

.badge-light-white {
  background-color: rgba(255, 255, 255, 0.1254901961) !important;
  color: #ffffff !important;
}

.badge-light {
  color: var(--display-color) !important;
}

/* === badge css end === */
/* === table css start === */
.table thead th {
  font-size: 0.875rem;
  color: var(--display-color);
  padding: 0.5rem 1.5rem;
  font-weight: 600;
}

@media (min-width: 992px) {
  .table thead th:last-child {
    text-align: right;
  }
}
.table tbody td {
  font-size: 1rem;
  vertical-align: middle;
  color: var(--body-color);
  padding: 0.875rem 1.5rem;
}

@media (min-width: 992px) {
  .table tbody td:last-child {
    text-align: right;
  }
  .table tbody td:last-child .d-flex {
    justify-content: flex-end;
  }
}
.table.head-light-bg thead th {
  background-color: var(--light);
}

.table.head-rounded thead th {
  border: none;
}

.table.head-rounded thead th:first-child {
  border-radius: 8px 0 0 8px;
}

.table.head-rounded thead th:last-child {
  border-radius: 0 8px 8px 0;
}

.table.head-primary-bg thead th {
  background-color: var(--primary);
  color: #fff;
}

.default-table thead th {
  border-color: var(--border-color);
}

.default-table tbody tr:last-child td {
  border: none;
}

.default-table tbody tr:last-child td:first-child {
  border-radius: 0 0 0 8px;
  -webkit-border-radius: 0 0 0 8px;
  -moz-border-radius: 0 0 0 8px;
  -ms-border-radius: 0 0 0 8px;
  -o-border-radius: 0 0 0 8px;
}

.default-table tbody tr:last-child td:last-child {
  border-radius: 0 0 8px 0;
  -webkit-border-radius: 0 0 8px 0;
  -moz-border-radius: 0 0 8px 0;
  -ms-border-radius: 0 0 8px 0;
  -o-border-radius: 0 0 8px 0;
}

.default-table tbody td {
  border-color: var(--border-color);
  background-color: transparent;
}

.bordered-table thead th {
  border: 1px solid var(--border-color);
}

.bordered-table tbody td {
  border: 1px solid var(--border-color);
}

.borderless-table thead th {
  border: none;
}

.borderless-table tbody td {
  border: none;
}

/* === table css end === */
/* === table responsive css start === */
/*
 * jQuery Basic Table
 * Author: Jerry Low
 */
@media (max-width: 991px) {
  .responsive-table tbody tr td {
    padding: 0;
    border: 1px solid var(--border-color) !important;
    border-bottom: none !important;
  }
  .responsive-table tbody tr td:last-child {
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-color) !important;
  }
  .responsive-table tbody tr td::before {
    background-color: var(--light);
    padding: 10px;
    color: var(--display-color);
    font-weight: 600 !important;
  }
  .responsive-table tbody tr td .bt-content {
    padding: 7px 15px;
  }
}
table.bt thead,
table.bt tbody th {
  display: none;
}

table.bt tfoot th,
table.bt tfoot td,
table.bt tbody td {
  border: none;
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  vertical-align: top;
  /* IE 9 */
  float: left\9 ;
  width: 100% \9 ;
}

table.bt tfoot th::before,
table.bt tfoot td::before,
table.bt tbody td::before {
  content: attr(data-th) ": ";
  display: inline-block;
  -webkit-flex-shrink: 0;
  -ms-flex-shrink: 0;
  flex-shrink: 0;
  font-weight: bold;
  width: 6.5em;
}

table.bt tfoot th.bt-hide,
table.bt tfoot td.bt-hide,
table.bt tbody td.bt-hide {
  display: none;
}

table.bt tfoot th .bt-content,
table.bt tfoot td .bt-content,
table.bt tbody td .bt-content {
  vertical-align: top;
}

.bt-wrapper.active {
  max-height: 310px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

table.bt.bt--no-header tfoot td::before,
table.bt.bt--no-header tbody td::before {
  display: none;
}

/* === table responsive css end === */
/* === form css start === */
.form-select, .form-control, textarea {
  border: 1px solid var(--border-color);
  color: var(--display-color) !important;
  background-color: #fff;
  padding: 0.75rem 0.9375rem;
  font-size: 0.9375rem;
}

.form-select::placeholder, .form-control::placeholder, textarea::placeholder {
  color: var(--placeholder-color);
}

.form-select:focus, .form-select:active, .form-control:focus, .form-control:active, textarea:focus, textarea:active {
  box-shadow: none;
  border-color: var(--primary) !important;
  background-color: transparent;
}

.form-select {
  padding: 0.75rem 1.875rem 0.75rem 0.9375rem;
  background-position-x: right;
  background-size: 26px 12px;
}

.form-select.form-select-lg {
  height: 56px;
  font-size: 1.125rem;
}

.form-select.form-select-sm {
  height: 33.5px;
  font-size: 0.8125rem;
  padding: 0.375rem 1.875rem 0.375rem 0.9375rem;
}

.form-select, .form-control:not(textarea) {
  height: 3rem;
}

.form-control[type=file] {
  line-height: 1.5;
}

.form-control[readonly] {
  background-color: var(--light);
}

.form-control.form-control-lg {
  height: 56px;
  font-size: 1.125rem;
}

.form-control.form-control-lg[type=file] {
  line-height: 2.1;
}

.form-control.form-control-sm {
  height: 33.5px;
  font-size: 0.8125rem;
}

.form-control.form-control-sm[type=file] {
  line-height: 1.1;
}

.form-label {
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  color: var(--display-color);
  font-weight: 600;
}

.input-group-text {
  color: var(--body-color);
}

.form-control.is-invalid, .was-validated .form-control:invalid {
  border-color: var(--danger);
}

.invalid-feedback {
  color: var(--danger);
}

/* icon field css start */
.icon-field {
  position: relative;
}

.icon-field .icon {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 40px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.125rem;
  color: var(--placeholder-color);
}

.icon-field .form-control {
  padding-inline-start: 2.5rem;
}

.icon-field .form-control.form-control-lg ~ .icon {
  top: 18px;
}

.icon-field .form-control.form-control-sm ~ .icon {
  top: 10px;
}

/* icon field css end */
/* input Radio Css Start */
.form-check-input {
  cursor: pointer;
}

.form-check-input:checked {
  background-color: var(--primary);
}

.form-check {
  margin-bottom: 0;
  padding-left: 0;
  gap: 12px;
  display: inline-flex;
}

.form-check.style-check .form-check-input::before {
  width: calc(100% + 1px);
  height: calc(100% + 1px);
  transform: translate(-50%, -50%) scale(1);
  transition: 0.2s linear;
}

.form-check.style-check .form-check-input::after {
  position: absolute;
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: inline-block;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  color: #fff;
  visibility: hidden;
  opacity: 0;
  transition: 0.2s linear;
  border-radius: inherit !important;
}

.form-check.style-check .form-check-input:checked {
  border-color: var(--primary) !important;
}

.form-check.style-check .form-check-input:checked::after {
  visibility: visible;
  opacity: 1;
}

.form-check .form-check-input {
  border: 1px solid var(--border-color);
  background: transparent;
  width: 18px;
  height: 18px;
  position: relative;
  flex-shrink: 0;
  margin-left: 0;
  margin-top: 6px;
  cursor: pointer;
}

.form-check .form-check-input:checked[type=radio] {
  background-image: none;
  border-color: var(--primary);
}

.form-check .form-check-input:checked::before {
  transform: translate(-50%, -50%) scale(1);
  visibility: visible;
  opacity: 1;
}

.form-check .form-check-input:checked ~ label {
  color: var(--body-color) !important;
}

.form-check .form-check-input::before {
  position: absolute;
  content: "";
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  background-color: var(--primary);
  border-radius: inherit;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  visibility: hidden;
  opacity: 0;
  transition: 0.2s linear;
}

.form-check .form-check-input:focus {
  box-shadow: none;
}

.badge[class*=-primary] .form-check-input {
  border-color: var(--primary) !important;
}

.badge[class*=-success] .form-check-input {
  border-color: var(--success) !important;
}

.badge[class*=-info] .form-check-input {
  border-color: var(--info) !important;
}

.badge[class*=-warning] .form-check-input {
  border-color: var(--warning) !important;
}

.badge[class*=-danger] .form-check-input {
  border-color: var(--danger) !important;
}

.badge[class*=-secondary] .form-check-input {
  border-color: var(--secondaryf) !important;
}

.badge[class*=-dark] .form-check-input {
  border-color: var(--dark) !important;
}

/* input Radio Css End */
/* Switch Css Start */
.form-switch {
  padding-inline-start: 0;
}

.form-switch .form-check-input {
  box-shadow: none !important;
  margin: 0;
  position: relative;
  background-color: var(--light);
  border: 0;
  background-image: none !important;
  width: 36px;
  height: 20px;
}

.form-switch .form-check-input:checked {
  background-color: var(--primary);
}

.form-switch .form-check-input:checked::before {
  left: calc(100% - 18px);
  transition: 0.2s linear;
}

.form-switch .form-check-input:checked ~ .form-check-label {
  color: var(--body-color) !important;
}

.form-switch .form-check-input::before {
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  left: 2px;
  transition: 0.2s linear;
}

.form-switch.form-switch-sm .form-check-input {
  width: 30px;
  height: 18px;
}

.form-switch.form-switch-sm .form-check-input:checked {
  background-color: var(--primary);
}

.form-switch.form-switch-sm .form-check-input:checked::before {
  left: calc(100% - 16px);
}

.form-switch.form-switch-sm .form-check-input::before {
  width: 12px;
  height: 12px;
  left: 3px;
}

/* Switch Css End */
/* Switch different Color Css start */
.switch-primary .form-check-input:checked {
  background-color: var(--primary) !important;
}

.switch-primary .form-check-input:checked ~ .form-check-label {
  color: var(--primary) !important;
}

.switch-info .form-check-input:checked {
  background-color: var(--info) !important;
}

.switch-info .form-check-input:checked ~ .form-check-label {
  color: var(--info) !important;
}

.switch-success .form-check-input:checked {
  background-color: var(--success) !important;
}

.switch-success .form-check-input:checked ~ .form-check-label {
  color: var(--success) !important;
}

.switch-danger .form-check-input:checked {
  background-color: var(--danger) !important;
}

.switch-danger .form-check-input:checked ~ .form-check-label {
  color: var(--danger) !important;
}

.switch-warning .form-check-input:checked {
  background-color: var(--warning) !important;
}

.switch-warning .form-check-input:checked ~ .form-check-label {
  color: var(--warning) !important;
}

.switch-dark .form-check-input:checked {
  background-color: var(--dark) !important;
}

.switch-dark .form-check-input:checked ~ .form-check-label {
  color: var(--dark) !important;
}

.switch-purple .form-check-input:checked {
  background-color: var(--lilac) !important;
}

.switch-purple .form-check-input:checked ~ .form-check-label {
  color: var(--lilac) !important;
}

/* Switch different Color Css End */
/* input Group Checkbox Css Start */
.btn-check:checked + .btn {
  color: #fff !important;
}

.btn-check:checked + .btn-outline-warning {
  background-color: var(--warning) !important;
  border-color: var(--warning) !important;
}

.btn-check:checked + .btn-outline-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.btn-check:checked + .btn-outline-danger {
  background-color: var(--danger) !important;
  border-color: var(--danger) !important;
}

.btn-check:checked + .btn-outline-success {
  background-color: var(--success) !important;
  border-color: var(--success) !important;
}

.btn-check:checked + .btn-outline-warning {
  background-color: var(--warning) !important;
  border-color: var(--warning) !important;
}

.btn-check:checked + .btn-outline-info {
  background-color: var(--info) !important;
  border-color: var(--info) !important;
}

.btn-check:checked + .btn-outline-lilac {
  background-color: var(--lilac) !important;
  border-color: var(--lilac) !important;
}

/* input Group Checkbox Css End */
/* custom form fields css start */
.form-mobile-field {
  position: relative;
}

.form-mobile-field .form-select {
  width: auto;
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  border: 0;
  background-color: transparent;
}

.form-mobile-field .form-control {
  padding-inline-start: 4.375rem;
}

select option {
  background-color: var(--bg-white);
}

.was-validated .form-mobile-field .form-control {
  padding-inline-start: 5.9375rem;
}

/* custom form fields css end */
/* === form css end === */
/* === form select two css start === */
.form-select-two ~ .select2-container {
  display: block;
  width: 100% !important;
}

.form-select-two ~ .select2-container .selection {
  display: block;
}

.form-select-two ~ .select2-container .select2-selection--single {
  min-height: 44px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

.form-select-two ~ .select2-container .select2-selection--single .select2-selection__rendered {
  color: var(--display-color);
  line-height: 42px;
  padding: 0 0.9375rem;
  font-size: 0.875rem;
}

.form-select-two ~ .select2-container .select2-selection--single .select2-selection__arrow b {
  margin-left: -12px;
  margin-top: 5px;
}

.form-select-two ~ .select2-container .select2-selection--multiple {
  min-height: 44px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding-inline: 1rem;
}

.form-select-two ~ .select2-container .select2-selection--multiple .select2-search--inline .select2-search__field {
  height: 28px;
  margin-top: 10px;
  font-size: 0.875rem;
}

.form-select-two ~ .select2-container .select2-selection--multiple .select2-selection__choice {
  background-color: var(--light);
  border: 1px solid var(--border-color);
}

.form-select-two ~ .select2-container .select2-selection--multiple .select2-selection__choice:first-child {
  margin-left: 0;
}

.form-select-two ~ .select2-container .select2-selection--multiple .select2-selection__choice__remove {
  border-right: 1px solid var(--border-color);
}

.form-select-two ~ .select2-container .select2-selection--multiple .select2-selection__choice__display {
  font-size: 0.875rem;
}

.select-two-templating ~ .select2-container .select2-selection--single .select2-selection__rendered > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.select2-dropdown {
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

.select2-dropdown .select2-search__field {
  border: 1px solid var(--border-color) !important;
  border-radius: 4px;
  padding: 0 1rem;
  font-size: 0.875rem;
}

.select2-dropdown .select2-results__option {
  font-size: 0.875rem;
  padding: 0.375rem 1rem;
}

.select2-dropdown .select2-results__option--selected {
  background-color: var(--light) !important;
}

.select2-dropdown .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--primary) !important;
}

.select2-container {
  transition: all 0s;
  z-index: 9999;
}

/* === form select two css end === */
/* === card css start === */
.card {
  background-color: var(--surface-bg);
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border: none;
  position: initial;
  color: var(--body-color);
}

.card .card-header {
  background-color: var(--surface-bg);
  padding: 0.875rem 1rem;
  border-color: var(--border-color);
  color: var(--body-color);
}

@media (min-width: 768px) {
  .card .card-header {
    padding: 0.875rem 1.5rem;
  }
}
.card .card-title {
  font-size: 1.125rem !important;
  color: var(--display-color);
}

.card .card-body {
  padding: 0.875rem 1rem;
  color: var(--body-color);
}

@media (min-width: 768px) {
  .card .card-body {
    padding: 0.875rem 1.5rem;
  }
}
.card .card-footer {
  background-color: var(--surface-bg);
  border-color: var(--border-color);
  padding: 0.875rem 1rem;
}

@media (min-width: 768px) {
  .card .card-footer {
    padding: 0.875rem 1.5rem;
  }
}
/* === card css end === */
/* === modal css start === */
.modal-header .btn-close {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

.modal-title {
  font-size: 1.125rem;
}

/* === modal css end === */
/* === accordion css start === */
.accordion-style-dafault .accordion-item {
  border: none !important;
  border-bottom: 1px solid var(--border-color) !important;
  background-color: var(--bg-white) !important;
  border-radius: 0;
  overflow: hidden;
  padding: 20px 0;
  margin-bottom: 10px;
}

@media (min-width: 992px) {
  .accordion-style-dafault .accordion-item {
    margin-bottom: 20px;
  }
}
.accordion-style-dafault .accordion-item:last-child {
  margin-bottom: 0;
}

.accordion-style-dafault .accordion-body {
  background-color: transparent;
  padding: 0;
  padding-top: 1rem;
  color: var(--body-color);
}

.accordion-style-dafault .accordion-button {
  padding: 0;
  background: transparent;
  padding-inline-end: 68px;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

@media (min-width: 576px) {
  .accordion-style-dafault .accordion-button {
    font-size: 1.125rem;
  }
}
@media (min-width: 992px) {
  .accordion-style-dafault .accordion-button {
    font-size: 1.25rem;
  }
}
.accordion-style-dafault .accordion-button::after {
  background-image: none;
}

.accordion-style-dafault .accordion-button:focus,
.accordion-button:focus {
  box-shadow: none;
}

.accordion-style-dafault .accordion-button:not(.collapsed) {
  box-shadow: none;
  color: var(--primary);
}

.accordion-style-dafault .accordion-button:not(.collapsed)::after {
  background-image: none;
  color: var(--primary);
}

.accordion-style-dafault .accordion-button[aria-expanded=true]::after, .accordion-style-dafault .accordion-button[aria-expanded=false]::after {
  content: "\f1af";
  font-family: remixicon;
  display: inline-block;
  position: absolute;
  inset-inline-end: 0;
  height: 20px;
  width: 20px;
  border: 2px solid var(--primary);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  border-radius: 50%;
  line-height: 1;
  color: var(--primary);
}

@media (min-width: 992px) {
  .accordion-style-dafault .accordion-button[aria-expanded=true]::after, .accordion-style-dafault .accordion-button[aria-expanded=false]::after {
    height: 24px;
    width: 24px;
  }
}
.accordion-style-dafault .accordion-button[aria-expanded=false]::after {
  content: "\ea13";
}

.accordion-noarrow .accordion-button::after {
  display: none;
}

.border-accordion {
  border-color: var(--border-color) !important;
}

.border-accordion .accordion-button {
  border-color: var(--border-color) !important;
}

.border-accordion .accordion-button:not(.collapsed) {
  background-color: #fff;
}

.border-accordion .accordion-button:focus {
  box-shadow: none;
}

.step-number {
  color: var(--primary);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}

@media (min-width: 992px) {
  .step-number {
    font-size: 1.5rem;
  }
}
/* === accordion css end === */
/* === nav-tabs css start === */
.nav-tabs.bordered-tab {
  border-color: var(--border-color);
}

.nav-tabs.bordered-tab .nav-item .nav-link {
  border: none;
  position: relative;
  color: var(--body-color);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.nav-tabs.bordered-tab .nav-item .nav-link::after {
  position: absolute;
  content: "";
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--primary);
  opacity: 0;
}

.nav-tabs.bordered-tab .nav-item .nav-link.active {
  margin-bottom: 0;
  color: var(--primary);
}

.nav-tabs.bordered-tab .nav-item .nav-link.active::after {
  opacity: 1;
}

.nav-tabs.bordered-tab .nav-item .nav-link.active .nav-tabs-badge {
  background-color: var(--primary);
}

.nav-tabs.bordered-tab .nav-item .nav-link .nav-tabs-badge {
  width: 18px;
  height: 18px;
  background-color: var(--body-color);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 500;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.nav-tabs.pill-tab {
  border: none;
}

.nav-tabs.pill-tab .nav-item .nav-link {
  border: none;
  position: relative;
  color: var(--body-color);
  border-radius: 6px !important;
  padding: 0.375rem 0.9375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-tabs.pill-tab .nav-item .nav-link.active {
  margin-bottom: 0;
  background-color: var(--primary);
  color: #fff;
}

.nav-tabs.pill-tab .nav-item .nav-link.active .nav-tabs-badge {
  background-color: #fff;
  color: var(--primary);
}

.nav-tabs.pill-tab .nav-item .nav-link .nav-tabs-badge {
  width: 18px;
  height: 18px;
  background-color: var(--body-color);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 500;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.nav-tabs.pill-light-tab {
  border: none;
}

.nav-tabs.pill-light-tab .nav-item .nav-link {
  border: none;
  position: relative;
  color: var(--body-color);
  border-radius: 6px !important;
  padding: 0.375rem 0.9375rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-tabs.pill-light-tab .nav-item .nav-link::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary);
  opacity: 0;
  z-index: -1;
  border-radius: 6px !important;
}

.nav-tabs.pill-light-tab .nav-item .nav-link.active {
  margin-bottom: 0;
  color: var(--primary);
}

.nav-tabs.pill-light-tab .nav-item .nav-link.active::before {
  opacity: 0.25;
}

.nav-tabs.pill-light-tab .nav-item .nav-link.active .nav-tabs-badge {
  background-color: var(--primary);
  color: #fff;
}

.nav-tabs.pill-light-tab .nav-item .nav-link .nav-tabs-badge {
  width: 18px;
  height: 18px;
  background-color: var(--body-color);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 500;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.nav-tabs.light-bg-tab {
  background-color: #f1f5f9;
  border-bottom: none;
  padding: 5px;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
}

.nav-tabs.light-bg-tab .nav-item .nav-link {
  border: none;
  position: relative;
  color: var(--body-color);
  border-radius: 6px !important;
  padding: 0.375rem 0.9375rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
}

.nav-tabs.light-bg-tab .nav-item .nav-link.active {
  margin-bottom: 0;
  color: var(--display-color);
  background-color: #fff;
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.05);
}

.nav-tabs.light-bg-tab .nav-item .nav-link.active .nav-tabs-badge {
  background-color: var(--primary);
  color: #fff;
}

.nav-tabs.light-bg-tab .nav-item .nav-link .nav-tabs-badge {
  width: 18px;
  height: 18px;
  background-color: rgba(0, 0, 0, 0.1);
  color: var(--body-color);
  font-size: 0.625rem;
  font-weight: 500;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}

.nav-tabs.nav-tabs-sm .nav-item .nav-link {
  font-size: 0.8125rem;
  padding: 0.25rem 0.5rem;
}

.nav-tabs.nav-tabs-gap-0 .nav-item {
  padding-inline: 0.375rem;
}

@media (min-width: 1400px) {
  .nav-tabs.nav-tabs-gap-0 .nav-item {
    padding-inline: 0.75rem;
  }
}
.nav-tabs.nav-tabs-gap-0 .nav-item .nav-link {
  padding-inline: 0;
  padding-block: 0.75rem;
  font-size: 0.875rem;
}

.tab-content {
  margin-top: 1rem;
}

/* === nav-tabs css end === */
/* === pagination css start === */
.pagination .page-item.active .page-link {
  background-color: var(--primary);
  color: #fff;
}

.pagination .page-item .page-link {
  color: var(--body-color);
}

.pagination .page-item .page-link:focus {
  box-shadow: none;
  background-color: var(--light);
  color: var(--display-color);
}

.pagination-style-one .pagination {
  gap: 0.625rem;
}

.pagination-style-one .pagination .page-item.active .page-link {
  background-color: var(--primary);
  color: #fff;
}

.pagination-style-one .pagination .page-item .page-link {
  color: var(--body-color);
  border-radius: 0.25rem !important;
  width: 35px;
  height: 35px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination-style-one .pagination .page-item .page-link:focus {
  box-shadow: none;
  background-color: var(--light);
  color: var(--display-color);
}

.pagination-style-two .pagination {
  gap: 0.625rem;
}

.pagination-style-two .pagination .page-item.active .page-link {
  background-color: var(--primary);
  color: #fff;
}

.pagination-style-two .pagination .page-item .page-link {
  color: var(--body-color);
  border-radius: 0.25rem !important;
  width: 35px;
  height: 35px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.pagination-style-two .pagination .page-item .page-link:focus {
  box-shadow: none;
  background-color: var(--light);
  color: var(--display-color);
}

/* === pagination css end === */
/* === list-style css start === */
.list-group-item {
  border-color: var(--border-color);
}

.list-group-item.active {
  background-color: var(--primary);
}

/* === list-style css end === */
/* === Dropdown css start === */
/* Dropdown Css Start */
.dropdown-toggle::after {
  content: "\ea4e";
  border: none;
  font-family: remixicon !important;
  font-style: normal;
  vertical-align: 0;
}

.dropdown.dropend .dropdown-toggle::after {
  content: "\ea6e";
  border: none;
  font-family: remixicon !important;
  font-style: normal;
  vertical-align: 0;
}

.dropdown.dropup .dropdown-toggle::after {
  content: "\ea78";
  border: none;
  font-family: remixicon !important;
  font-style: normal;
  vertical-align: 0;
}

.dropdown.dropstart .dropdown-toggle::after {
  content: "\ea64";
  border: none;
  font-family: remixicon !important;
  font-style: normal;
  vertical-align: 0;
}

.dropdown-menu {
  background-color: var(--bg-white);
  border-color: var(--border-color);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  transition: all 0s;
}

.dropdown-item {
  color: var(--body-color);
  font-size: 0.875rem;
  padding: 0.375rem 0.9375rem;
}

.dropdown-item.active, .dropdown-item:active {
  background-color: var(--light);
  color: var(--display-color);
}

.dropdown-item:focus {
  background-color: var(--light) !important;
  color: var(--display-color);
}

.dropdown-menu.language-dropdown-menu .dropdown-item::after {
  content: "\eb79";
  font-family: remixicon !important;
  font-style: normal;
  opacity: 0;
  margin-left: auto;
}

.dropdown-menu.language-dropdown-menu .dropdown-item.active {
  background-color: var(--light);
  color: var(--display-color);
}

.dropdown-menu.language-dropdown-menu .dropdown-item.active::after {
  opacity: 1;
}

.dropdown-menu .dropdown-divider {
  border-color: var(--border-color);
}

.dropdown-menu-lg {
  width: 295px;
}

@media (min-width: 576px) {
  .dropdown-menu-lg {
    width: 380px;
  }
}
.max-h-300 {
  max-height: 300px;
  overflow-y: auto;
}

.max-h-300::-webkit-scrollbar {
  width: 6px;
  background-color: #fff;
}

.max-h-300::-webkit-scrollbar-thumb {
  background-color: var(--light);
}

/* Dropdown Css End */
/* === Dropdown css end === */
/* === tooltip css start === */
/* Tooltip css start */
.tooltip {
  font-size: 0.75rem;
  --bs-tooltip-color: #fff;
}

.tooltip-primary {
  --bs-tooltip-bg: var(--primary);
}

.tooltip-secondary {
  --bs-tooltip-bg: var(--secondary);
}

.tooltip-success {
  --bs-tooltip-bg: var(--success);
}

.tooltip-info {
  --bs-tooltip-bg: var(--info);
}

.tooltip-warning {
  --bs-tooltip-bg: var(--warning);
}

.tooltip-danger {
  --bs-tooltip-bg: var(--danger);
}

.tooltip-dark {
  --bs-tooltip-bg: var(--dark);
}

.tooltip-light {
  --bs-tooltip-bg: var(--light);
  --bs-tooltip-color: var(--display-color);
}

/* Tooltip css End */
/* === tooltip css end === */
/* === image upload css start === */
.image-upload {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}

.image-upload .image-edit-btn input {
  display: none;
}

.image-upload .image-edit-btn input + label {
  display: inline-block;
  padding-inline: 0.75rem;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  font-size: 0.75rem;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  background: var(--primary);
  color: #fff;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-weight: 500;
}

.image-upload .image-edit-btn input + label:hover {
  background: var(--primary);
  color: #fff;
}

.image-upload .image-edit-btn input + label:before {
  content: "\f603";
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: 400 !important;
  margin-right: 6px;
}

.image-upload .image-edit-btn input + label:after {
  content: attr(data-text);
}

.image-upload .image-preview {
  width: 200px;
  height: 200px;
  position: relative;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  box-shadow: 0px 0 4px 0px rgba(0, 0, 0, 0.15);
}

.image-upload .image-preview > div {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid #fff;
}

.image-upload.image-upload-sm .image-preview {
  width: 100px;
  height: 100px;
}

.bg-size-contain {
  background-size: contain !important;
}

.mutiple-img-preview-style-one .img-div + .img-div {
  margin-top: 1rem;
}

.mutiple-img-preview-style-one .img-div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
}

.mutiple-img-preview-style-one .img-div img {
  max-height: 40px;
}

.mutiple-img-preview-style-two {
  display: flex;
  flex-wrap: wrap;
}

.mutiple-img-preview-style-two .img-div {
  position: relative;
  width: calc(33.3333333333% - 20px);
  padding: 10px !important;
  margin: 10px;
}

.mutiple-img-preview-style-two .img-div-thumb {
  height: 200px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.mutiple-img-preview-style-two .img-div-thumb img {
  max-height: 200px;
}

.mutiple-img-preview-style-two .img-div-content {
  text-align: center;
  margin-top: 1rem;
}

.mutiple-img-preview-style-two .img-div .btn {
  position: absolute;
  top: 15px;
  right: 15px;
  border: none !important;
}

/* === image upload css end === */
/* === date picker css start === */
.ui-datepicker {
  transition: all 0s;
  background-color: var(--bg-white);
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  padding: 0.375rem;
}

.ui-datepicker .ui-datepicker-header {
  background-color: #fff;
  color: var(--display-color);
  border: none;
}

.ui-datepicker .ui-datepicker-title {
  font-size: 0.9375rem;
}

.ui-datepicker .ui-datepicker-title .ui-datepicker-year {
  color: var(--body-color);
}

.ui-datepicker .ui-datepicker-title select {
  border: 1px solid var(--border-color);
  border-radius: 4px;
  margin: 3px;
  margin-top: -4px;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  width: 24px;
  height: 24px;
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 50%;
}

.ui-datepicker .ui-datepicker-prev::after,
.ui-datepicker .ui-datepicker-next::after {
  position: absolute;
  top: 55%;
  transform: translate(-50%, -50%);
  font-family: remixicon !important;
  font-style: normal;
  font-size: 14px;
  color: var(--display-color);
}

.ui-datepicker .ui-datepicker-prev.ui-state-hover,
.ui-datepicker .ui-datepicker-next.ui-state-hover {
  color: var(--display-color);
  font-weight: inherit;
}

.ui-datepicker .ui-datepicker-prev.ui-state-hover {
  left: 2px !important;
  top: 2px !important;
}

.ui-datepicker .ui-datepicker-prev::after {
  content: "\ea64";
  left: 46%;
}

.ui-datepicker .ui-datepicker-next.ui-state-hover {
  right: 2px !important;
  top: 2px !important;
}

.ui-datepicker .ui-datepicker-next::after {
  content: "\ea6e";
  left: 56%;
}

.ui-datepicker .ui-datepicker-calendar th {
  font-size: 0.75rem;
  color: #7c7c7c;
  font-weight: 600;
}

.ui-datepicker .ui-datepicker-calendar td {
  padding: 2px;
}

.ui-datepicker .ui-datepicker-calendar td .ui-state-default {
  background-color: var(--light);
  width: 1.875rem;
  height: 1.875rem;
  border: 1px solid var(--border-color);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 600;
}

.ui-datepicker .ui-datepicker-calendar td .ui-state-default.ui-state-highlight {
  background-color: var(--primary);
  color: #fff;
  font-weight: 600;
}

.ui-datepicker .ui-datepicker-calendar td .ui-state-default.ui-state-active {
  border-color: var(--primary);
  color: var(--primary);
}

.ui-datepicker-trigger {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 0;
  width: 20px;
}

.ui-datepicker-trigger::after {
  position: absolute;
  content: "\eb27";
  top: 0;
  left: 0;
  font-family: remixicon !important;
  font-style: normal;
  font-size: 18px;
}

.form-control-sm ~ .ui-datepicker-trigger {
  top: 2px;
  right: 10px;
}

/* === date picker css end === */
/* === time picker css start === */
.ti_tx,
.mi_tx,
.mer_tx {
  width: 100%;
  text-align: center;
  margin: 10px 0;
}

.time,
.mins,
.meridian {
  width: 33.3333333333%;
  float: left;
  font-size: 20px;
  color: #2d2e2e;
  font-family: "arial";
  font-weight: 700;
}

.time input,
.mins input,
.meridian input {
  width: 100%;
}

.meridian {
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--light);
}

.timepicker_wrap .prev,
.timepicker_wrap .next {
  cursor: pointer;
  padding: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timepicker_wrap .prev::after,
.timepicker_wrap .next::after {
  color: #777;
  font-family: remixicon !important;
  font-style: normal;
  font-size: 0.875rem;
}

.timepicker_wrap .prev {
  background-position: 50% -50%;
}

.timepicker_wrap .prev::after {
  content: "\ea78";
}

.timepicker_wrap .next {
  background-position: 50% 150%;
}

.timepicker_wrap .next::after {
  content: "\ea4e";
}

.time_pick {
  position: relative;
}

/*input{ float:left;}*/
.timepicker_wrap {
  padding: 10px;
  border-radius: 5px;
  z-index: 2;
  display: none;
  width: 240px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  float: left;
  position: absolute;
  top: 27px;
  left: 0px;
  transition: all 0s;
}

.arrow_top {
  position: absolute;
  top: -10px;
  left: 20px;
  background: url(../images/top_arr.png) no-repeat;
  width: 18px;
  height: 10px;
  z-index: 3;
}

/* === time picker css end === */
/* === transfer money css start === */
.rt-transfer-box {
  padding: 2.5rem;
  background-color: #fff;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

@media (max-width: 575px) {
  .rt-transfer-box.style-inner {
    padding: 1.25rem 0;
  }
}
@media (max-width: 575px) {
  .rt-transfer-box.rt-banner-transfer-box {
    padding: 1.25rem;
  }
}
@media (min-width: 1400px) {
  .rt-transfer-box.rt-banner-transfer-box {
    margin-inline-start: 1.875rem;
  }
}
@media (min-width: 1200px) {
  .rt-transfer-box.rt-banner-transfer-box .rt-single-transfer > input {
    width: 170px;
  }
}
.rt-single-transfer {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
}

@media (min-width: 576px) {
  .rt-single-transfer {
    padding: 0.75rem 1rem;
  }
}
.rt-single-transfer > input {
  flex-grow: 1;
  font-size: 1rem;
  font-weight: 600;
  color: var(--display-color);
  width: 100px;
}

@media (min-width: 576px) {
  .rt-single-transfer > input {
    width: 240px;
    font-size: 1.375rem;
  }
}
.rt-single-transfer > button {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  position: relative;
  width: 75px;
  padding-inline-end: 0.625rem;
}

@media (min-width: 576px) {
  .rt-single-transfer > button {
    width: 120px;
    padding-inline-end: 1.5625rem;
  }
}
.rt-single-transfer > button.active::after {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.rt-single-transfer > button::after {
  position: absolute;
  top: 2px;
  inset-inline-end: 0;
  content: "\ea4e";
  font-family: remixicon !important;
  font-style: normal;
  color: var(--display-color);
  font-size: 0.875rem;
  font-weight: 600;
}

@media (min-width: 576px) {
  .rt-single-transfer > button::after {
    font-size: 1.25rem;
  }
}
.rt-single-transfer > button img {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  object-fit: cover;
  -o-object-fit: cover;
}

@media (min-width: 576px) {
  .rt-single-transfer > button img {
    width: 25px;
    height: 25px;
  }
}
.rt-single-transfer > button span {
  font-size: 1rem;
  font-weight: 600;
  color: var(--display-color);
}

@media (min-width: 576px) {
  .rt-single-transfer > button span {
    font-size: 1.375rem;
  }
}
.rt-single-transfer .rt-single-transfer-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: 0;
  width: 100%;
  display: none;
  z-index: 9;
}

.rt-single-transfer .rt-single-transfer-dropdown.active {
  display: block;
}

.rt-single-transfer-dropdown {
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.rt-single-transfer-dropdown .form-control {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 12px 12px 0 0;
  -webkit-border-radius: 12px 12px 0 0;
  -moz-border-radius: 12px 12px 0 0;
  -ms-border-radius: 12px 12px 0 0;
  -o-border-radius: 12px 12px 0 0;
}

.rt-single-transfer-dropdown .form-control:focus {
  border-color: var(--border-color) !important;
}

.rt-single-transfer-dropdown .rt-currency-list {
  max-height: 200px;
  overflow-y: auto;
}

@media (min-width: 576px) {
  .rt-single-transfer-dropdown .rt-currency-list {
    max-height: 300px;
  }
}
.rt-single-transfer-dropdown .rt-currency-list::-webkit-scrollbar {
  width: 6px;
  background-color: #F5F5F5;
}

.rt-single-transfer-dropdown .rt-currency-list::-webkit-scrollbar-thumb {
  background-color: #c4c4c4;
  border-radius: 99px;
  -webkit-border-radius: 99px;
  -moz-border-radius: 99px;
  -ms-border-radius: 99px;
  -o-border-radius: 99px;
}

.rt-single-transfer-dropdown .rt-currency-list::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5;
}

.rt-single-transfer-dropdown .rt-currency-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  cursor: pointer;
  font-size: 0.875rem;
}

@media (min-width: 992px) {
  .rt-single-transfer-dropdown .rt-currency-list li {
    font-size: 1rem;
    gap: 1rem;
  }
}
.rt-single-transfer-dropdown .rt-currency-list li:hover {
  background-color: #f1f5f9;
}

.rt-single-transfer-dropdown .rt-currency-list li .currency-code {
  font-weight: 600;
  margin-inline-start: auto;
}

.rt-single-transfer-dropdown .rt-currency-list li img {
  height: 15px;
  height: 15px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  object-fit: cover;
  -o-object-fit: cover;
}

@media (min-width: 992px) {
  .rt-single-transfer-dropdown .rt-currency-list li img {
    height: 25px;
    height: 25px;
  }
}
.rt-single-transfer-dropdown .rt-currency-list .no-data {
  display: none;
  padding: 1rem;
}

.rt-transfer-info-list {
  margin-top: 1.875rem;
}

.rt-transfer-info-list li + li {
  margin-top: 0.5rem;
}

.rt-transfer-info-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
}

.rt-transfer-info-list li span:first-child {
  font-weight: 400;
}

.rt-transfer-info-list li span:last-child {
  font-weight: 600;
  color: var(--display-color);
}

.rt-transfer-info-list li .form-select {
  width: auto;
  padding: 0.125rem 1.25rem 0.125rem 0.625rem;
  height: auto;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  background-size: 20px 10px;
  border: 1px solid var(--border-color);
  font-weight: 500;
}

.rt-transfer-info-list li .form-select:focus {
  border-color: var(--border-color);
}

/* === transfer money css end === */
/* === faq css start === */
/* Faq Css Start */
.responsive-padding-40-150 {
  padding-inline-start: clamp(2rem, -27.4754rem + 39.3333vw, 9.375rem) !important;
  padding-inline-end: clamp(2rem, -27.4754rem + 39.3333vw, 9.375rem) !important;
  padding-block-start: 40px !important;
  padding-block-end: 40px !important;
}

/* Faq Css End */
/* === faq css end === */
/* === referral css start === */
.referral-tree .sub-referral-tree {
  padding-inline-start: 3.125rem;
  padding-top: 8px;
  display: none;
  transition: all 0s;
}

.referral-tree .sub-referral-tree.active {
  display: block;
}

.referral-tree .sub-referral-tree li {
  padding: 0.4375rem 0;
}

.referral-tree .sub-referral-tree li.has-referral::before {
  height: calc(100% - 69px);
}

.referral-tree .sub-referral-tree .single-referral {
  position: relative;
}

.referral-tree .sub-referral-tree .single-referral::before {
  position: absolute;
  content: "";
  top: 50%;
  left: -31px;
  width: 20px;
  height: 1px;
  background-color: var(--border-color);
}

.referral-tree .sub-referral-tree .single-referral::after {
  position: absolute;
  content: "";
  top: 50%;
  left: -13px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background-color: var(--border-color);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.referral-tree .has-referral {
  position: relative;
}

.referral-tree .has-referral::before {
  position: absolute;
  content: "";
  top: 25px;
  left: 20px;
  width: 1px;
  height: calc(100% - 62px);
  background-color: var(--border-color);
}

.referral-tree .has-referral .single-referral {
  padding-left: 1.25rem;
}

.single-referral {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 0.9375rem;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  background-color: #fff;
  border: 1px solid var(--border-color);
}

.single-referral:hover {
  border-color: var(--primary);
}

.single-referral .amount {
  text-align: right;
}

.single-referral .expand-btn {
  position: absolute;
  left: 10px;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.single-referral .expand-btn.active::after {
  content: "\ea13";
}

.single-referral .expand-btn::after {
  position: absolute;
  content: "\f1af";
  font-family: remixicon !important;
  font-style: normal;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  transition: all 0.3s;
}

/* === referral css end === */
/* === toggle-btn css start === */
.toggle-handle {
  background-color: #fff;
}

.btn.toggle.btn-xs {
  height: 30px !important;
  padding: 0;
}

.btn .toggle-group .btn-xs {
  padding: 4px 10px;
  padding-left: 5px;
  font-size: 13px !important;
}

.btn .toggle-group .btn-xs.toggle-off {
  padding-left: 12px;
}

/* === toggle-btn css end === */
/* === payment gateway css start === */
.gateway-img {
  max-height: 40px;
  width: 100px;
}

/* === payment gateway css end === */
/* === drop zone css start === */
.drop-zone {
  min-height: 300px;
  position: relative;
}

.drop-zone.drop-zone-sm {
  min-height: 200px;
}

.drop-zone .drop-zone-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.drop-zone .drop-zone-thumb:hover .overlay {
  opacity: 1;
}

.drop-zone .drop-zone-thumb .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25);
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  opacity: 0;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.drop-zone .drop-zone-thumb .overlay button {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 0.25rem 0.625rem;
  background-color: #fff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  color: var(--danger);
  font-size: 0.625rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* === drop zone css end === */
/* === support ticket css start === */
.all-reply-body {
  max-height: 400px;
  overflow-y: auto;
  padding-inline-end: 0.75rem;
}

.all-reply-body::-webkit-scrollbar {
  width: 6px;
}

.all-reply-body::-webkit-scrollbar-thumb {
  background-color: var(--primary);
  border-radius: 20px;
}

.all-reply-body::-webkit-scrollbar-track {
  background-color: var(--light);
  border-radius: 20px;
}

/* === support ticket css end === */
/* === icon list css start === */
.icon-list li + li {
  margin-top: 1.25rem;
}

.icon-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.icon-list-icon {
  width: 12px;
  height: 12px;
  position: relative;
  margin-inline-start: 6px;
  margin-block-start: 8px;
  flex-shrink: 0;
}

.icon-list-icon::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.icon-list-icon::after {
  position: absolute;
  content: "";
  top: -6px;
  left: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  background-color: var(--primary);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  opacity: 0.35;
}

.icon-list-content {
  width: 100%;
  margin-top: 1.25rem;
}

@media (min-width: 576px) {
  .icon-list-content {
    width: calc(100% - 40px);
    margin-top: 0;
  }
}
/* === icon list css end === */
/* === social media css start === */
.social-media-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
}

.social-media-links li a {
  width: 36px;
  height: 36px;
  background-color: var(--secondary);
  color: #fff;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.social-media-links li a:hover {
  background-color: var(--primary);
  color: #fff;
}

/* === social media css end === */
/* === avatar css start === */
*[class*=avatar-] {
  object-fit: cover;
  -o-object-fit: cover;
}

*[class*=avatar-].has-circle::before {
  content: "/";
}

.avatar-6xl {
  width: 6.25rem;
  height: 6.25rem;
}

.avatar-5xl {
  width: 5rem;
  height: 5rem;
}

.avatar-4xl {
  width: 4.375rem;
  height: 4.375rem;
}

.avatar-3xl {
  width: 3.75rem;
  height: 3.75rem;
}

.avatar-2xl {
  width: 3.125rem;
  height: 3.125rem;
}

.avatar-xl {
  width: 2.75rem;
  height: 2.75rem;
}

.avatar-lg {
  width: 2.5rem;
  height: 2.5rem;
}

.avatar-md {
  width: 2rem;
  height: 2rem;
}

.avatar-sm {
  width: 1.5rem;
  height: 1.5rem;
}

.avatar-xs {
  width: 1.25rem;
  height: 1.25rem;
}

.avatar-chain-list {
  display: flex;
  align-items: center;
}

.avatar-chain-list li + li {
  margin-left: -0.625rem;
}

/* === avatar css end === */
/* === progressbar css start === */
/* Progress bar css start */
.max-w-66 {
  max-width: 66px;
}

.max-w-112 {
  max-width: 112px;
}

.progress {
  background-color: #efefef;
}

.progress-xs {
  height: 4px;
}

.progress-sm {
  height: 8px;
}

.progress-md {
  height: 12px;
}

.progress-lg {
  height: 12px;
}

/* Progress bar css End */
/* === progressbar css end === */
/* === scroll css start === */
.scroll-y {
  overflow-y: auto;
}

.scroll-y::-webkit-scrollbar {
  width: 6px;
  background-color: #F5F5F5;
  border-radius: 99px;
  -webkit-border-radius: 99px;
  -moz-border-radius: 99px;
  -ms-border-radius: 99px;
  -o-border-radius: 99px;
}

.scroll-y::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 99px;
  -webkit-border-radius: 99px;
  -moz-border-radius: 99px;
  -ms-border-radius: 99px;
  -o-border-radius: 99px;
}

.scroll-y ::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5;
}

/* === scroll css end === */
/* === divider css start === */
.or-divider {
  text-align: center;
  position: relative;
  z-index: 1;
}

.or-divider::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--border-color);
  z-index: -1;
}

.or-divider span {
  background-color: #fff;
  padding: 0 0.9375rem;
  font-weight: 500;
}

/* === divider css end === */
/* === header css start === */
.header-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9;
}

.header-section.header-fixed {
    position: fixed;
    background-color: var(--primary-two);
}

.header-section.header-fixed .header-top-part {
    display: none;
}

.header-section .header-inner {
  display: flex;
}

.header-section .logo-part img {
  max-height: 55px;
}

.header-section .main-part {
  width: calc(100% - 150px);
  padding-left: 30px;
}

@media (max-width: 575px) {
  .header-section .main-part {
    width: calc(100% - 90px);
    padding-left: 10px;
  }
  
  .header-section .logo-part img {
      max-height: 45px;
  }
}
.header-main-part-wrapper {
  padding-block: 0.75rem;
  box-shadow: -2px 12px 5px -4px rgba(0,0,0,0.75);
}

.header-info-part {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-info-list {
  display: none;
}

@media (min-width: 992px) {
  .header-info-list {
    display: flex;
    gap: 16px;
  }
}
.header-info-list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  padding-right: 16px;
}

.header-info-list li:last-child {
  padding-right: 0;
}

.header-info-list li:last-child::after {
  display: none;
}

.header-info-list li::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 0;
  width: 1px;
  height: 20px;
  background-color: #fff;
  transform: translateY(-50%);
  opacity: 0.15;
}

.header-info-list li i {
  font-size: 18px;
  color: var(--primary);
}

.header-info-list li span, .header-info-list li a {
  color: #f1f1f1;
}

.header-top-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

@media (max-width: 991px) {
  .header-top-right {
    width: 100%;
    justify-content: space-between;
  }
}
.header-social-links {
  position: relative;
  gap: 16px;
  padding-right: 16px;
}

@media (max-with: 991px) {
  .header-social-links {
    padding-right: 0;
  }
}
.header-social-links::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 0;
  width: 1px;
  height: 20px;
  background-color: #fff;
  transform: translateY(-50%);
  opacity: 0.15;
}

@media (max-width: 991px) {
  .header-social-links::after {
    display: none;
  }
}
.header-social-links li a {
  font-size: 14px;
  color: #f1f1f1;
}

.header-social-links li a:hover {
  color: var(--primary);
}

.lang-btn {
  color: #f1f1f1;
  font-size: 14px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding-right: 16px;
  position: relative;
}

.lang-btn::before {
  position: absolute;
  content: "\f282";
  top: 3px;
  right: 0;
  color: #fff;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: 400 !important;
  font-size: 12px;
}

.header-main-part {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 991px) {
  .header-main-part {
    padding-block: 8px;
  }
}
.header-menu-list-wrapper {
  transition: all 0.3s;
}

.header-menu-list-wrapper.active {
  left: 0;
}

@media (max-width: 991px) {
  .header-menu-list-wrapper {
    padding-top: 20px;
    position: fixed;
    top: 0;
    left: -105%;
    width: min(330px, 88vw);
    height: 100vh;
    background-color: #fff;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .header-menu-list-wrapper .header-menu-list {
    display: block;
  }
  .header-menu-list-wrapper .header-menu-list > li > a {
    color: var(--display-color);
    padding: 8px 20px !important;
    /* Every top level row is a 44px target too, and the chevron sits at the
       far end so tapping anywhere along the row opens the group */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
  }

  /* The drawer scrolls, and on iOS it needs room below the last item or the
     home indicator sits on top of it */
  .header-menu-list-wrapper {
    padding-bottom: 40px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}
.header-menu-list-wrapper .mobile-menu-close-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 18px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

@media (min-width: 992px) {
  .header-menu-list-wrapper .mobile-menu-close-btn {
    display: none;
  }
}

/* The circle stays 32px because that is the design; the target around it does
   not have to be, so the hit area is grown outwards instead */
@media (max-width: 991px) {
  .header-menu-list-wrapper .mobile-menu-close-btn::after {
    content: "";
    position: absolute;
    inset: -6px;
  }
}
/* The icon is 28px wide but the button around it was not, leaving a 28px target
   in the corner of the screen. The box is padded out to 44px without moving the
   icon, so nothing shifts and the tap lands. */
.mobile-menu-open-btn {
  font-size: 28px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
}

@media (min-width: 992px) {
  .mobile-menu-open-btn {
    display: none;
  }
}
.header-menu-list {
  display: flex;
  align-items: center;
}

/* Scoped to the direct nav link so the white uppercase treatment does not
   leak into links nested inside a dropdown panel */
.header-menu-list > li:first-child > a {
  padding-left: 0;
}

.header-menu-list > li > a {
  text-transform: uppercase;
  font-weight: 500;
  color: #fff;
  padding: 19px 16px;
}

.header-menu-list > li > a:hover {
  color: var(--primary);
}

.lang-btn ~ .dropdown-menu .dropdown-item {
    padding-left: 32px;
    position: relative;
}

.lang-btn ~ .dropdown-menu .dropdown-item::before {
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    content: "\f26f";
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: 700 !important;
    color: var(--primary);
    opacity: 0;
    line-height: 1;
    font-size: 18px;
}

.lang-btn ~ .dropdown-menu .dropdown-item.active::before {
    opacity: 1;
}

/* === header css end === */
/* === footer css start === */
.footer-section {
  background-color: var(--primary-two);
  position: relative;
  z-index: 0;
  overflow: hidden;
}

/* Whatever block ends up last takes the gap that keeps the footer off it.
   The theme leaves that to .cp-section-last, and a section that only renders
   when it has something to show makes that easy to miss — the hotel, flight
   and home pages all ended flush against the dark footer. Margin, not padding,
   so a section with its own background does not grow a coloured strip. */
body > *:has(+ .footer-section):not(.cp-section-last) {
  margin-bottom: var(--section-space);
}

.footer-section::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(var(--primary) 30%, transparent 65%);
  z-index: -1;
  opacity: 0.05;
}

@media (min-width: 576px) {
  .footer-section::before {
    width: 450px;
    height: 450px;
  }
}
@media (min-width: 992px) {
  .footer-section::before {
    width: 650px;
    height: 650px;
  }
}
.footer-section::after {
  position: absolute;
  content: "";
  bottom: 0;
  right: 0;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(var(--primary) 30%, transparent 65%);
  z-index: -1;
  opacity: 0.05;
}

@media (min-width: 576px) {
  .footer-section::after {
    width: 450px;
    height: 450px;
  }
}
@media (min-width: 992px) {
  .footer-section::after {
    width: 650px;
    height: 650px;
  }
}
.footer-section .footer-top .container {
  padding-block: 3.125rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-section .footer-middle {
  padding: 6.25rem 0;
}

@media (max-width: 1199px) {
  .footer-section .footer-middle {
    padding: 4.25rem 0;
  }
}

@media (max-width: 575px) {
  .footer-section .footer-middle {
    padding: 3.25rem 0;
  }
}

.subscribe-wrapper .title {
  font-size: 42px;
  color: #fff;
}

@media (max-width: 1199px) {
  .subscribe-wrapper .title {
    font-size: 1.75rem;
  }
}

.subscribe-form {
  display: flex;
  position: relative;
  gap: 16px;
}

.subscribe-form input {
  height: 54px;
  background-color: #fff;
  border-radius: 6px;
  flex-grow: 1;
  padding: 8px 20px 8px 48px;
}

.subscribe-form i {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  color: var(--body-color) !important;
  font-size: 20px;
}

.subscribe-form button {
  background-color: var(--primary);
  color: #fff;
  border: none;
  padding: 12px 30px;
  border-radius: 6px;
  text-align: center;
}

@media (max-width: 575px) {
  .subscribe-form {
    flex-wrap: wrap;
  }

  .subscribe-form input,
  .subscribe-form button {
    width: 100%;
  }

  .subscribe-form i {
    top: 11px;
    transform: translateY(0);
  }
}

.nir-footer-logo {
  max-height: 65px;
}

.nir-footer-item .nir-footer-item-title {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  margin-bottom: 1.875rem;
  color: #fff;
}

.nir-footer-item .nir-footer-item-title::before {
  position: absolute;
  content: "";
  bottom: -2px;
  left: 0;
  width: 30px;
  height: 3px;
  background-color: var(--primary);
}

.nir-footer-list li + li {
  margin-top: 0.5rem;
}

.footer-bottom .container {
  padding-block: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-section p,
.footer-section a,
.footer-section span,
.footer-section i {
  color: #e4e4e4;
}

/* ---- developer credit ----
   Sits beside the copyright on one line, and drops under it on a phone rather
   than squeezing both into a cramped row. */
.footer-copyright {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 14px;
}

.dev-credit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.85;
}

.footer-bottom .dev-credit a,
.main-footer .dev-credit a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.18s ease, opacity 0.18s ease;
}

.footer-bottom .dev-credit a:hover,
.main-footer .dev-credit a:hover {
  color: #25d366; /* WhatsApp green, so the icon and label read as one thing */
  opacity: 1;
}

.dev-credit-name {
  font-weight: 600;
}

.dev-credit-links {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dev-credit-mark {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
}

/* Each channel keeps its own colour, so the two marks are told apart at a
   glance rather than reading as one button. */
.dev-credit .dev-credit-wa {
  color: #25d366;
}

.dev-credit .dev-credit-tg {
  color: #29a9eb;
}

/* The plane fills its box corner to corner while the WhatsApp mark sits inside
   a circle with its own padding, so at the same em size the plane reads bigger.
   Trimmed until the pair look equal rather than measure equal. */
.dev-credit-tg .dev-credit-mark {
  width: 0.92em;
  height: 0.92em;
}

.dev-credit-links a:hover {
  filter: brightness(1.25);
}

@media (max-width: 575px) {
  .footer-copyright {
    flex-direction: column;
    gap: 4px;
  }
}
/* === footer css end === */

/* === banner css start === */
.banner-section {
  position: relative;
  padding-top: 160px;
  padding-bottom: 165px;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
}

@media (min-width: 576px) {
  .banner-section {
    padding-top: 180px;
    padding-bottom: 140px;
  }
}
@media (min-width: 1200px) {
  .banner-section {
    padding-bottom: 180px;
  }
}
@media (min-width: 1400px) {
  .banner-section {
    padding-top: 260px;
    padding-bottom: 240px;
  }
}
.banner-section::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(12, 21, 55, 0.95), rgba(31, 36, 55, 0.15));
  z-index: -1;
}

.banner-section .banner-title {
  color: #fff;
  margin-bottom: 20px;
  font-size: 32px;
}

@media (min-width: 576px) {
  .banner-section .banner-title {
    font-size: 48px;
  }
}
@media (min-width: 1400px) {
  .banner-section .banner-title {
    font-size: 62px;
  }
}
.banner-section .banner-subtitle {
  color: #fff;
}

@media (min-width: 1200px) {
  .banner-section .banner-subtitle {
    font-size: 1.125rem;
  }
}

.breadcrumbs {
  position: relative;
  padding-top: 200px;
  padding-bottom: 50px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

.breadcrumbs::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(12, 21, 55, 0.95), rgba(31, 36, 55, 0.15));
  z-index: -1;
}

.breadcrumbs .title,
.breadcrumbs h2 {
  font-size: 42px;
  color: #fff;
}

.breadcrumbs ol,
.breadcrumbs ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.breadcrumbs ol li,
.breadcrumbs ul li {
  color: #fff;
}

.breadcrumbs ol li::after,
.breadcrumbs ul li::after {
  content: '/';
  padding-inline: 12px;
}

.breadcrumbs ol li:last-child::after,
.breadcrumbs ul li:last-child::after {
  display: none;
}

.breadcrumbs ol li a,
.breadcrumbs ul li a {
  color: #fff;
  opacity: 0.75;
}

@media (max-width: 1399px) {
  .breadcrumbs .title, .breadcrumbs h2 {
    font-size: 36px;
  }
}
@media (max-width: 991px) {
  .breadcrumbs .title, .breadcrumbs h2 {
    font-size: 32px;
  }
}
@media (max-width: 575px) {
  .breadcrumbs .title, .breadcrumbs h2 {
    font-size: 28px;
  }
}

/* === banner css end === */
/* === visa css start === */
.visa-section {
  position: relative;
  margin-top: -90px;
  padding-bottom: 100px;
}

.visa-form-wrapper {
  padding: 12px;
  background-color: #fff;
  box-shadow: 0 10px 60px rgba(22, 34, 35, 0.1215686275);
  border-radius: 8px;
  display: flex;
  align-items: center;
}

@media (max-width: 991px) {
  .visa-form-wrapper {
    flex-wrap: wrap;
  }
}
.visa-form-wrapper .visa-find-btn {
  width: 140px;
  background-color: var(--primary);
  color: #fff;
  font-weight: 600;
  padding: 12px 10px;
  text-align: center;
  border-radius: 4px;
  flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

@media (max-width: 1199px) {
  .visa-form-wrapper .visa-find-btn {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .visa-form-wrapper .visa-find-btn {
    margin-top: 0;
  }
}
.single-find-field {
  width: calc(50% - 60px);
  display: flex;
  align-items: center;
}

@media (max-width: 1199px) {
    .visa-form-wrapper {
        flex-wrap: wrap;
    }
  .single-find-field {
    width: calc(50% - 10px);
    margin-bottom: 16px;
  }
}
@media (max-width: 767px) {
  .single-find-field {
    width: 100%;
    margin-bottom: 16px;
  }
  
  .visa-find-btn {
      width: 100%;
  }
}

.single-find-field .icon {
  width: 46px;
  height: 56px;
  position: relative;
  color: var(--primary);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.single-find-field .icon::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary);
  opacity: 0.1;
  border-radius: 4px;
}

.single-find-field .visa-field {
  width: calc(100% - 46px);
  padding-left: 14px;
  padding-right: 14px;
  position: relative;
  transform: translateY(-3px);
}

.single-find-field .arrow-icon {
    position: absolute;
    content: "\f282";
    top: 53%;
    right: 14px;
    font-size: 14px;
    transition: all 0.3s;
}

.single-find-field .visa-field input:focus ~ .arrow-icon {
    transform: rotate(180deg);
}

.single-find-field input:focus .arrow-icon {
    transform: rotate(180deg);
}

.single-find-field .visa-field span {
  color: #999999;
    font-size: 14px;
}

.single-find-field .visa-field input {
  width: 100%;
  border-bottom: 1px solid var(--border-color);
  font-size: 16px;
  font-weight: 500;
  padding: 0;
}

#bookingTabsContent {
    position: relative;
    z-index: 1;
}

.visa-field {
  position: relative;
}

.visa-field .visa-country-list {
  position: absolute;
  top: 150%;
  left: 0;
  width: 100%;
  max-height: 250px;
  background-color: #fff;
  z-index: 1;
  padding: 12px 0;
  border-radius: 12px;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
}

.visa-field .visa-country-list.active {
  top: 135%;
  opacity: 1;
  visibility: visible;
}

.visa-field .visa-country-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.visa-field .visa-country-list li.active {
  background-color: #f1f1f1;
}

.visa-field .visa-country-list li.no-result {
  display: none;
  text-align: center;
}

.visa-field .visa-country-list li.no-result .icon {
  font-size: 32px;
  display: inline-flex;
}

.visa-field .visa-country-list li.no-result .icon::before {
  display: none;
}

.visa-field .visa-country-list li:hover {
  background-color: #f1f1f1;
}

.visa-field .visa-country-list li img {
  width: 35px;
  height: 35px;
  object-fit: cover;
  -o-object-fit: cover;
  border-radius: 50%;
}

@media (max-width: 991px) {
  .visa-field .visa-country-list li img {
    width: 30px;
    height: 30px;
  }
}
.visa-field .visa-country-list li span {
  font-size: 18px;
  font-weight: 600;
  color: var(--display-color) !important;
}

@media (max-width: 991px) {
  .visa-field .visa-country-list li span {
    font-size: 16px;
  }
}
.visa-package-wrapper {
  padding-top: var(--section-space);
  position: relative;
  z-index: 0;
}

.visa-package-wrapper::before {
  position: absolute;
  content: "";
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(var(--primary) 30%, transparent 65%);
  z-index: -1;
  opacity: 0.1;
}

@media (min-width: 576px) {
  .visa-package-wrapper::before {
    width: 450px;
    height: 450px;
  }
}
@media (min-width: 992px) {
  .visa-package-wrapper::before {
    width: 650px;
    height: 650px;
  }
}

.visa-form-wrapper.flex-wrap {
    justify-content: space-between;
}


.visa-form-wrapper.flex-wrap .single-find-field {
    width: 50%;
    margin-bottom: 24px;
}

.visa-form-wrapper.flex-wrap .visa-find-btn {
    width: 100%;
}

@media (max-width: 767px) {
  .visa-form-wrapper.flex-wrap .single-find-field {
      width: 100%;
  }  
}

#servicesTab {
    box-shadow: 0 5px 10px #0000000d;
    border: 1px solid #ededed;
}

#visaTab, #servicesTab {
  border-bottom: none;
  display: inline-flex;
  padding: 6px;
  background-color: #fff;
  border-radius: 99px;
}

#servicesTab .nav-item .nav-link,
#visaTab .nav-item .nav-link {
  background-color: #fff;
  border-radius: 99px;
  color: var(--display-color);
  font-weight: 500;
  padding: 0.5rem 1.25rem;
  border: none;
}

#servicesTab .nav-item .nav-link.active,
#visaTab .nav-item .nav-link.active {
  background-color: var(--primary);
  color: #fff;
}

.booking-tabs {
    display: inline-flex;
    background: #fff;
    border-radius: 99px;
    padding: 10px;
    border: none;
}

.booking-tabs .nav-link {
    color: #615c5c;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 99px;
}

.booking-tabs .nav-link i {
    font-size: 18px;
}

.booking-tabs .nav-link.active {
    background-color: var(--primary);
    color: #fff;
}

.visa-package {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 30px 80px #00000017, 0 0 60px rgba(99, 160, 255, 0.06);
    animation: floatIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
    transform: translateY(30px);
    /* A row of cards with titles of different lengths still lines its
       buttons up along the bottom */
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  @keyframes floatIn {
    to { opacity: 1; transform: translateY(0); }
  }

  /* Top image area */
 .visa-package .thumb {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
  }

    .visa-package .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7) saturate(0.85);
    transform: scale(1.05);
    transition: transform 7s ease;
  }

  .visa-package:hover .thumb img {
    transform: scale(1.0);
  }

  /* Gradient overlay on image */
  .visa-package .thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(11, 15, 26, 0.0) 30%,
      rgba(11, 15, 26, 0.5) 70%,
      rgba(14, 19, 34, 1) 100%
    );
  }

  /* Recommended badge */
  .visa-package .badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    background: #2a9d8f47;
    border: 1px solid var(--primary);
    backdrop-filter: blur(8px);
    color: #fff;
    font-family: 'Barlow', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 30px;
    animation: fadeSlideDown 0.6s 0.5s cubic-bezier(0.16,1,0.3,1) both;
  }

  /* A discount is worth more attention than a popular flag, so it takes the
     solid brand colour rather than the translucent one */
  .visa-package .badge.is-offer {
    background: var(--primary);
    border-color: var(--primary);
    letter-spacing: 1.5px;
  }

  /* Only rendered when there is a discount to strike through */
  .visa-package .price-was {
    margin-left: 8px;
    color: var(--muted);
    font-size: 14px;
    text-decoration: line-through;
  }

  @keyframes fadeSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Stamp icon in image corner */
  .stamp-icon {
    position: absolute;
    bottom: 28px;
    right: 20px;
    z-index: 2;
    width: 52px;
    height: 52px;
    border: 2px dashed rgba(255,255,255,0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: spinSlow 20s linear infinite;
  }

  .stamp-icon svg {
    width: 26px;
    height: 26px;
    opacity: 0.6;
  }

  @keyframes spinSlow {
    to { transform: rotate(360deg); }
  }

  /* Card body */
  .visa-package .content {
    padding: 24px 28px 30px;
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  /* Destination panel for a package with no photo of its own */
  .visa-package .thumb.is-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--primary) 90%, #000) 0%,
        color-mix(in srgb, var(--primary) 55%, #1f2437) 100%);
  }

  .visa-package .thumb-place {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    padding: 0 20px;
  }

  /* Scoped past `.visa-package .thumb img`, which stretches a photo to fill
     the panel and would turn this emblem into an ellipse */
  .visa-package .thumb .thumb-flag {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    filter: none;
    transform: none;
    border: 2px solid rgba(255, 255, 255, 0.7);
  }

  /* Decorative line */
  .visa-package .content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 28px;
    right: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99, 160, 255, 0.3), rgba(200, 160, 90, 0.3), transparent);
  }

  .visa-package .title {
    letter-spacing: 0.5px;
    line-height: 1.1;
    animation: fadeUp 0.6s 0.3s cubic-bezier(0.16,1,0.3,1) both;
  }

  .visa-package .title.mb-0 { margin-bottom: 0; }

  .visa-package .subtitle {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #6a80b0;
    margin-top: 6px;
    animation: fadeUp 0.6s 0.4s cubic-bezier(0.16,1,0.3,1) both;
  }

  /* Price block */
  .visa-package .price-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 20px 0 6px;
    animation: fadeUp 0.6s 0.5s cubic-bezier(0.16,1,0.3,1) both;
  }

  .visa-package .price {
    font-family: 'Cormorant Garamond', serif;
    font-size: 44px;
    font-weight: 600;
    color: var(--primary);
    letter-spacing: -1px;
    line-height: 1;
  }

  .visa-package .price-currency {
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #7a8aaa;
    letter-spacing: 1px;
    align-self: flex-start;
    padding-top: 10px;
  }

  .visa-package .processing-info {
    font-size: 12px;
    color: #5a6a8a;
    letter-spacing: 0.3px;
    line-height: 1.5;
    margin-bottom: 24px;
    animation: fadeUp 0.6s 0.6s cubic-bezier(0.16,1,0.3,1) both;
  }

  .processing-info span {
    color: #4db87a;
    font-weight: 500;
  }

  /* Feature tags */
  .visa-package .feature-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    animation: fadeUp 0.6s 0.65s cubic-bezier(0.16,1,0.3,1) both;
    /* Pushes the button to the foot of the card whatever is above it */
    margin-top: auto;
  }

  .visa-package .tag {
    background: rgba(99, 160, 255, 0.07);
    border: 1px solid rgba(99, 160, 255, 0.15);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #6a9fd8;
  }

  /* CTA button */
  .visa-package .package-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 22px;
    background: #2a9d8f17;
    border: 1px solid var(--primary);
    border-radius: 12px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    animation: fadeUp 0.6s 0.7s cubic-bezier(0.16,1,0.3,1) both;
  }

  .visa-package .package-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(99,160,255,0.12) 0%, rgba(200,160,90,0.06) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .visa-package .package-btn:hover {
    border-color: var(--primary);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.05), 0 0 0 1px rgba(99,160,255,0.1);
    background: var(--primary);
  }

  .visa-package .package-btn:hover::before { opacity: 1; }

  .visa-package .package-btn:active { transform: translateY(0); }

  .visa-package .btn-arrow {
    width: 28px;
    height: 28px;
    background: var(--primary);
    border: 1px solid rgba(200,160,90,0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background 0.3s ease;
    flex-shrink: 0;
  }

  .visa-package .package-btn:hover .btn-arrow {
    background: #fff;
    transform: translateX(3px);
  }

  .visa-package .btn-arrow svg { width: 12px; height: 12px; color: #fff; }
  
  .visa-package .package-btn:hover .btn-arrow svg {
      color: var(--primary);
  }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Hover glow effect on whole card */
  .visa-package::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0);
    transition: box-shadow 0.4s ease;
    pointer-events: none;
  }

  .visa-package:hover::after {
    box-shadow: inset 0 0 0 1px rgba(99, 160, 255, 0.08);
  }





.visa-modal-item {
  text-align: center;
  padding: 16px 12px;
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  height: 100%;
}

.visa-modal-item img {
  height: 45px;
  max-width: 45px;
}

.visa-modal-item .title {
  font-size: 14px;
  margin-top: 8px;
  margin-bottom: 0;
}

.visa-modal-item .line {
  height: 2px;
  width: 60%;
  display: inline-block;
  background-color: var(--primary);
}

.visa-modal-item p {
  font-size: 12px;
  margin-bottom: 0;
  margin-top: 10px;
}

.application-slide {
  position: fixed;
  top: 0;
  right: -105%;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 9;
  background-color: rgba(0, 0, 0, 0.35);
  transition: all 0.3s;
}

.application-slide.active {
  right: 0;
}

.application-slide-dialog {
    width: auto;
    max-width: 1400px;
    margin: 1.75rem;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    min-height: calc(100% - 1.75rem * 2);
    pointer-events: none;
}

.application-slide-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: var(--body-bg);
    background-clip: padding-box;
    border-radius: var(--bs-modal-border-radius);
    outline: 0;
    border-radius: 12px;
}

.application-slide-body {
    padding: 30px;
}

@media (max-width: 1399px) {
    .application-slide-dialog {
        margin: 12px;
    }
}

@media (max-width: 575px) {
    .application-slide-body {
        padding: 16px;
    }
    
    .application-slide .btn {
        padding-inline: 12px !important;
        font-size: 14px !important;
    }
    
    .visa-package .title {
        font-size: 20px;
    }
    
    .visa-package .price {
        font-size: 30px;
    }
}

.visa-progress-area {
  display: flex;
  justify-content: space-between;
  margin-inline: 100px;
  position: relative;
  z-index: 0;
}

.visa-progress-area::after {
  position: absolute;
  content: "";
  top: 32%;
  left: 30px;
  width: calc(100% - 50px);
  height: 1px;
  background-color: #ddd;
  z-index: -1;
}

.visa-progress-area .single-progress {
  text-align: center;
}

.visa-progress-area .single-progress.active .circle {
  border-color: var(--success);
}

.visa-progress-area .single-progress.complete .circle {
  border-color: var(--success);
  background-color: var(--success);
}

.visa-progress-area .single-progress.complete .circle i {
  opacity: 1;
  color: #fff;
  font-size: 32px;
}

.visa-progress-area .single-progress .circle {
  width: 60px;
  height: 60px;
  border: 2px solid #ddd;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: var(--body-bg);
}

.visa-progress-area .single-progress .circle i {
  opacity: 0;
}

.visa-progress-area .single-progress p {
  font-weight: 600;
  text-transform: uppercase;
  color: #777;
  margin-top: 8px;
}

.breadcrumbs ~ .pagebuilder-content .visa-section {
    margin-top: -28px;
}

.breadcrumbs ~ .pagebuilder-content .visa-section .booking-tabs {
    box-shadow: 0 5px 10px #00000012;
}

.upload-system-item,
.photo-upload-item {
  position: relative;
  padding: 16px;
  background-color: #fff;
  height: 100%;
  text-align: center;
}

@media (max-width: 575px) {
    .upload-system-item,
    .photo-upload-item {
        padding: 12px;
    }
}

.upload-system-item .upload-system-item-img,
.photo-upload-item .upload-system-item-img {
  height: 50px;
}

.upload-system-item .upload-system-item-img[style="display: none;"] ~ p {
    margin-top: 0;
}

.upload-system-item input,
.photo-upload-item input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.upload-system-item p,
.photo-upload-item p {
  font-size: 14px;
  margin-top: 12px;
  margin-bottom: 12px;
}

.upload-system-item .file-item,
.photo-upload-item .file-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  margin-bottom: 8px;
}

.upload-system-item .file-item span,
.photo-upload-item .file-item span {
    font-size: 12px;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upload-system-item .file-item button,
.photo-upload-item .file-item button {
  color: #fff;
  padding: 0;
  background-color: transparent;
  font-size: 16px;
  width: 30px;
  height: 30px;
  padding: 2px !important;
}

@media (max-width: 575px) {
    .upload-system-item .file-item button,
    .photo-upload-item .file-item button {
        width: 24px;
        height: 24px;
        font-size: 12px !important;
    }
}

.upload-system-item #img-show img,
.photo-upload-item #img-show img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  -o-object-fit: cover;
}

.upload-system-item #img-show button,
.photo-upload-item #img-show button {
  color: var(--primary);
  padding: 0;
  background-color: transparent;
  font-size: 14px;
}

.upload-system-item .file-item img {
    max-height: 70px !important;
    object-fit: cover;
    -o-object-fit: cover;
}

.visa-icon-field {
  position: relative;
}

.visa-icon-field i {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  font-size: 22px;
  color: var(--primary);
}

.visa-icon-field input {
  width: 100%;
  height: 56px;
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 10px 20px 10px 50px;
  background-color: #fff;
}

.visa-icon-field input:focus {
  border-color: var(--primary);
}

.visa-extra-check {
  position: relative;
}

.visa-extra-check input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.visa-extra-check label {
  display: block;
  padding: 12px;
  background-color: #fff;
  border-radius: 8px;
}

.visa-extra-check label h6 {
  margin-top: 12px;
}

.visa-extra-check input:checked ~ label {
  background-color: var(--primary);
  color: #fff;
}

.visa-extra-check input:checked ~ label h6 {
  color: #fff;
}

@media (max-width: 767px) {
  .visa-progress-area .single-progress .circle {
    width: 20px;
    height: 20px;
  }

  .visa-progress-area .single-progress p {
    font-size: 12px;
  }
  
  .visa-progress-area::after {
    top: 26%;
    width: calc(100% - 60px);
  }

  .visa-progress-area {
    margin-inline: 0;
  }

  .application-slide .application-slide-inner {
    padding: 20px 16px;
  }
}

/* === visa css end === */
/* === about css start === */
.about-section {
  background-color: var(--surface-bg);
  position: relative;
  z-index: 0;
}

.about-section::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(var(--primary) 30%, transparent 65%);
  z-index: -1;
  opacity: 0.1;
}

@media (min-width: 576px) {
  .about-section::before {
    width: 450px;
    height: 450px;
  }
}
@media (min-width: 992px) {
  .about-section::before {
    width: 650px;
    height: 650px;
  }
}
.about-section .about-img {
  max-height: 738px;
}

@media (max-width: 575px) {
    #documents-wrapper .text-xl,
    #review-wrapper .text-xl,
    #details-wrapper .text-xl {
        font-size: 16px !important;
    }
}

/* === about css end === */
/* === destination css start === */
.destination-section {
  position: relative;
  z-index: 0;
}

.destination-section::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(var(--primary) 30%, transparent 65%);
  z-index: -1;
  opacity: 0.15;
}

@media (min-width: 576px) {
  .destination-section::before {
    width: 450px;
    height: 450px;
  }
}
@media (min-width: 992px) {
  .destination-section::before {
    width: 650px;
    height: 650px;
  }
}
.destination-section .left-el {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0.15;
}

.location-slider .single-slide {
  padding: 8px;
}

.location-item {
  padding: 12px;
  background-color: #fff;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.location-item img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  object-fit: cover;
  -o-object-fit: cover;
  display: inline-block;
}

.location-item .title {
  font-weight: 600;
  margin-top: 20px;
  font-size: 16px;
}

/* === destination css end === */
/* === how-work css start === */
.how-work-section {
  background-color: var(--surface-bg);
  position: relative;
  z-index: 0;
}

.how-work-section::before {
  position: absolute;
  content: "";
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(var(--primary) 30%, transparent 65%);
  z-index: -1;
  opacity: 0.1;
}

@media (min-width: 576px) {
  .how-work-section::before {
    width: 450px;
    height: 450px;
  }
}
@media (min-width: 992px) {
  .how-work-section::before {
    width: 650px;
    height: 650px;
  }
}
.how-work-item .thumb {
  height: 275px;
  overflow: hidden;
  border-radius: 16px;
}

.how-work-item .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -o-object-fit: cover;
}

.how-work-item .content {
  text-align: center;
  padding-inline: 16px;
}

.how-work-item .work-number {
  width: 80px;
  height: 80px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: var(--display-color);
  font-weight: 600;
  background-color: #fff;
  position: relative;
  z-index: 0;
  border-radius: 50%;
  margin-top: -24px;
  transform: translateY(-15px);
}

.how-work-item .work-number::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(to right, var(--primary), rgba(42, 157, 144, 0.3294117647));
  opacity: 0.7;
  z-index: -2;
}

.how-work-item .work-number::after {
  position: absolute;
  content: "";
  top: 8px;
  left: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  border: 2px dotted #fff;
  border-radius: 50%;
  background: transparent;
  opacity: 0.85;
  z-index: -1;
}

/* === how-work css end === */
/* === airline css start === */
.airline-section {
  padding-block: var(--section-space);
  position: relative;
  z-index: 0;
}

.airline-section::before {
  position: absolute;
  content: "";
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(var(--primary) 30%, transparent 65%);
  z-index: -1;
  opacity: 0.1;
}

@media (min-width: 576px) {
  .airline-section::before {
    width: 450px;
    height: 450px;
  }
}
@media (min-width: 992px) {
  .airline-section::before {
    width: 650px;
    height: 650px;
  }
}
.airline-section .right-el {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}

.airline-item img {
  max-height: 130px;
}

.airline-slider-two {
  margin-top: 24px;
}

.airline-slider-wrapper {
  padding-left: 40px;
  position: relative;
}

.airline-slider-wrapper::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 20%;
  height: 100%;
  background: linear-gradient(to right, #f6fbfa, rgba(246, 251, 250, 0.15));
  z-index: 1;
}

.airline-slider-wrapper::after {
  position: absolute;
  content: "";
  right: -16px;
  top: 0;
  width: 20%;
  height: 100%;
  background: linear-gradient(to left, #f6fbfa, rgba(246, 251, 250, 0.15));
  z-index: 1;
}

.airline-slider-one .slick-list,
.airline-slider-two .slick-list {
  margin: 0 -12px;
}

.airline-slider-one .single-slide,
.airline-slider-two .single-slide {
  padding: 0 12px;
}

.airline-slider-two {
  transform: rotate(180deg);
}

.airline-slider-two .single-slide {
  transform: rotate(180deg);
}

/* === airline css end === */
/* === choose css start === */
.choose-section {
  padding-block: var(--section-space);
  background-color: var(--surface-bg);
  position: relative;
  z-index: 0;
}

.choose-section::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(var(--primary) 30%, transparent 65%);
  z-index: -1;
  opacity: 0.1;
}

@media (min-width: 576px) {
  .choose-section::before {
    width: 450px;
    height: 450px;
  }
}
@media (min-width: 992px) {
  .choose-section::before {
    width: 650px;
    height: 650px;
  }
}
.choose-item img {
  max-height: 45px;
}

.choose-item .title {
  margin-top: 16px;
}

.choose-item p {
  margin-bottom: 0;
}

/* === choose css end === */
/* === cta css start === */
.cta-section {
  position: relative;
  padding-block: var(--section-space);
  z-index: 0;
  overflow: hidden;
}

.cta-section .cta-img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

.cta-section .cta-left-el {
  position: absolute;
  top: 20px;
  left: 20px;
  max-height: 200px;
  z-index: -1;
}

@media (max-width: 1750px) {
  .cta-section .cta-left-el {
    max-height: 135px;
    top: -50px;
  }
}
@media (max-width: 575px) {
  .cta-section .cta-left-el {
    display: none;
  }
}
.cta-content p {
  font-size: 22px;
  color: var(--primary);
}

/* === cta css end === */
/* === featured-on css start === */
.featured-on-section {
  padding-block: var(--section-space);
  background-color: var(--surface-bg);
  position: relative;
  z-index: 0;
}

.featured-on-section::before {
  position: absolute;
  content: "";
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(var(--primary) 30%, transparent 65%);
  z-index: -1;
  opacity: 0.1;
}

@media (min-width: 576px) {
  .featured-on-section::before {
    width: 450px;
    height: 450px;
  }
}
@media (min-width: 992px) {
  .featured-on-section::before {
    width: 650px;
    height: 650px;
  }
}
.featured-on-item {
  padding: 20px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
}

.featured-on-item img {
  max-height: 60px;
}

.featured-on-item .title {
  font-weight: 500;
  font-size: 18px;
  margin-top: 24px;
}

/* === featured-on css end === */
/* === authorized css start === */
.authorized-section {
  position: relative;
  z-index: 0;
}

.authorized-section .authorized-right-el {
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: 280px;
}

.authorized-item {
  background-color: #fff;
}

/* === authorized css end === */
/* === testimonial css start === */
.testimonial-section {
  background-color: var(--surface-bg);
  position: relative;
  z-index: 0;
}

.testimonial-section::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(var(--primary) 30%, transparent 65%);
  z-index: -1;
  opacity: 0.1;
}

@media (min-width: 576px) {
  .testimonial-section::before {
    width: 450px;
    height: 450px;
  }
}
@media (min-width: 992px) {
  .testimonial-section::before {
    width: 650px;
    height: 650px;
  }
}
.testimonial-section::after {
  position: absolute;
  content: "";
  bottom: 0;
  right: 0;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(var(--primary) 30%, transparent 65%);
  z-index: -1;
  opacity: 0.1;
}

@media (min-width: 576px) {
  .testimonial-section::after {
    width: 450px;
    height: 450px;
  }
}
@media (min-width: 992px) {
  .testimonial-section::after {
    width: 650px;
    height: 650px;
  }
}
.testimonial-item {
  padding: 24px;
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(22, 34, 35, 0.05);
}

.testimonial-item .icon {
  width: 45px;
  height: 45px;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #999999;
  font-size: 28px;
  margin-bottom: 20px;
}

.testimonial-item .testimonial-details {
  font-size: 18px;
}

.testimonial-item .ratings {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: goldenrod;
}

.testimonial-item .client {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--border-color);
}

.testimonial-item .client .thumb {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  -o-object-fit: cover;
}

.testimonial-item .client .content {
  width: calc(100% - 60px);
  padding-left: 16px;
}

.testimonial-item .client .content .name {
  font-size: 18px;
  margin-bottom: 4px;
}

.testimonial-slider .slick-list {
  margin: -12px;
}

.testimonial-slider .testimonial-slide {
  padding: 12px;
}

.testimonial-slider .slick-arrow {
  position: absolute;
  z-index: 1;
  top: 50%;
  margin-top: -22px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  font-size: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.testimonial-slider .slick-arrow:hover {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.testimonial-slider .slick-arrow.testi-prev {
  left: -28px;
}

.testimonial-slider .slick-arrow.testi-next {
  right: -28px;
}

.testimonial-slider .slick-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  gap: 6px;
}

.testimonial-slider .slick-dots li button {
  font-size: 0;
  width: 12px;
  height: 12px;
  background-color: var(--border-color);
  border-radius: 50%;
  padding: 0;
  transition: all 0.3s;
}

.testimonial-slider .slick-dots li.slick-active button {
  width: 30px;
  border-radius: 99px;
  background-color: var(--primary);
}

/* === testimonial css end === */


/* === track css end === */
.track-section h3 {
  font-size: 42px;
}

@media (max-width: 991px) {
  .track-section h3 {
    font-size: 32px;
  }
}

@media (max-width: 575px) {
  .track-section h3 {
    font-size: 28px;
  }
}

.track-section .card h6 {
  font-size: 17px;
}

.track-section .input-group .form-control {
    height: 54px;
}

@media (max-width: 575px) {
    .track-section .card h6 {
        font-size: 16px;
    }
}
/* === track css end === */

/* === contact css end === */
.conact-section {
  padding-block: var(--section-space);
}

.contact-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.map-area {
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
  margin-top: 50px;
}

.map-area iframe {
  height: 550px;
  width: 100%;
}

@media (max-width: 991px) {

  .map-area,
  .contact-area {
      width: 100%;
      padding: 0;
  }

  .map-area iframe {
      height: 450px;
  }

  .contact-area {
      margin-top: 40px;
  }
}


@media (max-width: 575px) {
  .map-area iframe {
      height: 300px;
  }
}

.contact-item {
  padding: 24px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.contact-item .title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.contact-item .title i {
  color: var(--primary);
}
/* === contact css end === */

/* blog section css start */
.blog-section {
  padding-block: var(--section-space);
}

.blog-box {
  background-color: #fff;
  border-radius: 16px;
  height: 100%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.085);
  padding: 12px;
  transition: all 0.3s;
}

.blog-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.085);
}

.section-bg .blog-box {
  background-color: var(--body-bg);
}

.blog-box-thumb {
  overflow: hidden;
  height: 280px;
  border-radius: 12px;
}

.blog-box-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -o-object-fit: cover;
  transition: all 0.5s;
}

.blog-box:hover .blog-box-thumb img {
  transform: scale(1.1, 1.1);
}

.blog-box-content {
  padding: 20px 12px 16px 12px;
}

.blog-box-content .title {
  font-size: 22px;
}

.blog-box-content .title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: -3px -15px;
}

.blog-meta li {
  padding: 3px 15px;
  display: flex;
  align-items: center;
  font-size: 15px;
}

.blog-meta li i {
  margin-right: 5px;
}

.blog-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--body-color);
  margin-top: 16px;
  padding-top: 16px;
  margin-top: 24px;
  border-top: 1px solid #e5e5e5;
}

.blog-btn span {
  font-weight: 600;
}

.blog-btn i {
  width: 44px;
  height: 44px;
  background-color: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 18px;
  transition: all 0.3s;
}

.blog-btn:hover i {
  background-color: var(--primary);
}

.side-blog {
  display: flex;
  flex-wrap: wrap;
}

.side-blog+.side-blog {
  margin-top: 20px;
}

.side-blog-thumb {
  width: 70px;
  height: 60px;
  overflow: hidden;
}

.side-blog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -o-object-fit: cover;
}

.side-blog-content {
  width: calc(100% - 70px);
  padding-left: 20px;
}

.side-blog-content h6 {
  font-size: 16px;
}

.side-blog-content h6 a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-share-part {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 15px 20px 20px;
}

.blog-share-part .caption {
  margin: 0 15px 0 0;
}

.blog-share-list {
  margin-bottom: 0;
}

.blog-share-list ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

}

.blog-share-list li {
  padding: 5px 10px;
}

.blog-share-list li a {
  color: var(--body-color);
}

.blog-share-list li a:hover {
  color: var(--primary);
}

.blog-details-thumb {
  height: 450px;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}

@media (max-width: 991px) {
  .blog-details-thumb {
    height: 300px;
  }
}

@media (max-width: 575px) {
  .blog-details-thumb {
    height: 250px;
  }
}

.blog-details-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -o-object-fit: cover;
}

/* blog section css end */

/* === blog details css start === */
.nir-blog-details {
  padding-block: 2.5rem;
}

.nir-blog-details-title {
  font-size: 2.25rem;
}

.nir-blog-details-img {
  height: 450px;
}

.nir-blog-post-navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.5rem;
}

.nir-blog-post-navigation a {
  width: 45%;
  display: flex;
  align-items: center;
  color: var(--display-color);
  font-size: 1.125rem;
  font-weight: 600;
}

.nir-blog-post-navigation a:hover {
  color: var(--primary);
}

.nir-blog-post-navigation a:first-child span {
  padding-inline-start: 1rem;
}

.nir-blog-post-navigation a:last-child i {
  order: 2;
}

.nir-blog-post-navigation a:last-child span {
  order: 1;
  text-align: end;
  padding-inline-end: 1rem;
}

.nir-blog-post-navigation a i {
  width: 25px;
}

.nir-blog-post-navigation a span {
  width: calc(100% - 25px);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.single-comment + .single-comment {
    margin-top: 20px;
}

.single-comment {
    padding: 20px;
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
}

.single-comment .thumb {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    overflow: hidden;
}

.single-comment .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
}

.single-comment .content {
    width: calc(100% - 55px);
    padding-left: 20px;
}

@media (max-width: 575px) {
    .single-comment {
        padding: 12px;
    }

    .single-comment .thumb {
        width: 35px;
        height: 35px;
    }

    .single-comment .content {
        width: calc(100% - 35px);
    }

    .single-comment .content h6 {
        font-size: 16px;
    }
}
/* === blog details css end === */


/* === user dashboard css start === */
.nir-user-dashboard {
  padding-block: 5rem;
  border-bottom: 2px solid rgba(226, 226, 226, 0.8980392157);
}

.nir-user-sidebar {
  padding: 1.5rem 1.25rem;
  background-color: var(--surface-bg);
  border-radius: 0.75rem;
  border: 2px solid var(--primary);
}

.nir-user-menu {
  margin-top: 1.25rem;
}

.nir-user-menu li + li {
  margin-top: 0.5rem;
}

.nir-user-menu li a {
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
}

.nir-user-menu li a.active {
  background-color: var(--primary);
  color: #fff;
}

.nir-user-menu li a i {
  font-size: 1.125rem;
}

.nir-user-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px 16px;
  background-color: var(--surface-bg);
  border-radius: 12px;
  border: 1px solid var(--primary);
}

.nir-user-card .icon {
  font-size: 1.5rem;
  color: var(--primary);
  width: 55px;
  height: 55px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  z-index: 0;
}

.nir-user-card .icon::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary);
  opacity: 0.1;
  border-radius: 8px;
  z-index: -1;
}

.nir-user-card .content {
  width: calc(100% - 55px);
  padding-left: 16px;
}

.nir-user-card.style-complete .icon {
  color: var(--success);
}

.nir-user-card.style-complete .icon::before {
  background-color: var(--success);
}

.nir-user-card.style-pending .icon {
  color: var(--warning);
}

.nir-user-card.style-pending .icon::before {
  background-color: var(--warning);
}


@media (max-width: 767px) {
  .nir-user-card {
    padding: 8px 12px;
  }

  .nir-user-card .icon {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
  .nir-user-card .content {
    width: calc(100% - 44px);
  }

  .nir-user-card .content p {
    font-size: 14px;
  }

  .nir-user-card .content h3 {
    font-size: 22px; 
  }

  .nir-user-dashboard {
    padding-block: 70px;
  }
}

@media (max-width: 575px) {
  .nir-user-dashboard {
    padding-block: 50px;
  }

  .nir-user-card {
    padding: 12px 12px;
    text-align: center;
    justify-content: center;
  }
  .nir-user-card .content {
    width: 100%;
    padding-left: 0;
    margin-top: 16px;
  }

  .nir-user-card .content h3 {
    font-size: 20px;
  }
}

.payment-box {
  padding: 10px;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}

.payment-box-thumb img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  -o-object-fit: cover;
}

.payment-box-content {
  padding: 20px 10px 10px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: none;
  border-radius: 0 0 8px 8px;
  -webkit-border-radius: 0 0 8px 8px;
  -moz-border-radius: 0 0 8px 8px;
  -ms-border-radius: 0 0 8px 8px;
  -o-border-radius: 0 0 8px 8px;
}

.single-reply {
  padding: 20px;
  background-color: #fff;
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.tab-btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.tab-btn-group .tab-btn {
  padding: 6px 12px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tab-btn-group .tab-btn.active {
  background-color: var(--primary);
  color: #fff;
}

.tab-btn-group .tab-btn .num {
  font-weight: 600;
}

.tab-btn-group .tab-btn .num::before {
  content: '(';
}
.tab-btn-group .tab-btn .num::after {
  content: ')';
}

.divider-or {
  position: relative;
  z-index: 1;
  text-align: center;
}

.divider-or::before {
  position: absolute;
  content: '';
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #fff;
  opacity: 0.1;
  z-index: -1;
}

.divider-or span {
  padding: 2px 10px;
  background-color: var(--surface-bg);
}



.gateway-option input[type="radio"] {
  display: none;
}

.gateway-card {
  padding: 12px;
  background-color: #fff;
  border: 3px solid #e0e0e0;
  border-radius: 8px;
  transition: border-color 0.3s, box-shadow 0.3s;
  display: flex;
  flex-wrap: wrap;
  cursor: pointer;
}

.gateway-card img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  -o-object-fit: cover;
}

.gateway-card .gateway-content {
  width: calc(100% - 50px);
  padding-left: 12px;
}

.gateway-card .gateway-content .title {
  font-size: 16px;
  margin-bottom: 4px;
}

.gateway-card .gateway-content .subtitle {
  font-size: 14px;
  margin-bottom: 0;
}

.gateway-option input[type="radio"]:checked+.gateway-card {
  border-color: var(--primary);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  background-color: #fff;
}


#authTab {
  gap: 12px;
}

#authTab .nav-item .nav-link {
  border: none;
  background-color: #eee;
  color: var(--display-color);
  border-radius: 8px !important;
}

#authTab .nav-item .nav-link.active {
  background-color: var(--primary);
  color: #fff;
}


.cookie-modal {
    position: fixed;
    z-index: 9999;
    bottom: 20px;
    left: 20px;
    background: #1e2339;
    padding: 30px;
    border-radius: 16px;
    width: 560px;
}

.cookies-card__icon {
    width: 60px;
    height: 60px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    margin-bottom: 24px;
}

.cookie-consent__message {
    margin-bottom: 24px;
}

.cookie-consent__message a {
    color: var(--primary);
    font-weight: 600;
}

.cookie-modal .js-cookie-consent-agree:first-child {
    background: var(--primary);
}

@media (max-width: 991px) {
    .cookie-modal {
        left: 10px;
        width: calc(100% - 20px);
        padding: 20px;
    }
    
    .cookie-consent__message-text {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.before-track-search {
  padding: 50px 40px;
  background-color: #fff;
  border-radius: 16px;
}

.before-track-search img {
  max-height: 300px;
  height: auto !important;
  width: auto !important;
}

@media (max-width: 575px) {
  .before-track-search {
      padding: 30px 20px;
  }
}
/* === user dashboard css end === */


.faq-section {
  padding-block: var(--section-space);
}

.pbcontainer {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-left: 12px;
    padding-right: 12px;
}

@media (min-width: 576px) {
    .pbcontainer {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .pbcontainer {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .pbcontainer {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .pbcontainer {
        max-width: 1140px;
    }
}


@media (min-width: 1400px) {
    .pbcontainer {
        max-width: 1320px;
    }
}

/* ==== service section css start ===== */
.our-services-section {
    padding-block: var(--section-space);
}
/* ==== service section css end ==== */

.application-steps {
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 36px;
  display: flex;
  flex-wrap: wrap;
}

.single-step {
  position: relative;
  width: 33.3333333333%;
  padding: 16px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  border-right: 1px solid var(--border-color);
  justify-content: center;
}

@media (min-width: 768px) {
  .single-step {
    padding: 16px 24px;
  }
}
@media (min-width: 992px) {
  .single-step {
    justify-content: flex-start;
  }
}
.single-step.active::before {
  opacity: 1;
}

.single-step.active .single-step-number {
  border-color: var(--primary);
  color: var(--primary);
}

.single-step::before {
  position: absolute;
  content: "";
  bottom: 0;
  left: 2px;
  width: calc(100% - 2px);
  height: 2px;
  background-color: var(--primary);
  opacity: 0;
}

.single-step::after {
  position: absolute;
  content: "";
  top: 50%;
  right: -6px;
  width: 12px;
  height: 12px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--border-color) var(--border-color) transparent transparent;
  background-color: #fff;
  transform: rotate(45deg);
  margin-top: -6px;
}

.single-step:last-child {
  border-right: none;
}

.single-step:last-child::after {
  display: none;
}

.single-step-number {
  width: 32px;
  height: 32px;
  border: 2px solid var(--border-color);
  border-radius: 50%;
  color: var(--display-color);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.single-step-text {
  font-weight: 500;
  color: var(--display-color);
  width: 100%;
  text-align: center;
  font-size: 14px;
}

@media (min-width: 992px) {
  .single-step-text {
    width: auto;
    text-align: left;
    font-size: 16px;
  }
}

.icon-item {
  display: flex;
  flex-wrap: wrap;
}

.icon-item .icon {
  width: 45px;
  height: 45px;
  border: 1px solid #d0d0d0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 22px;
}

.icon-item .content {
  width: calc(100% - 45px);
  padding-left: 16px;
}

.shadow-md {
    box-shadow: 0 6px 16px #00000017;
}



/* ==========================================================
   ADDON SECTION CARDS — User Dashboard
   ========================================================== */
.addon-section-card {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    background: #fff;
    transition: box-shadow .25s;
}
.addon-section-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.11); }
.addon-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    color: #fff;
}
.addon-section-icon {
    width: 38px; height: 38px;
    background: rgba(255,255,255,.22);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.addon-section-header h5 { font-size: 15px; font-weight: 600; color: #fff; margin: 0; }
.addon-section-header small { font-size: 11px; }
.addon-section-body { padding: 18px; }
.addon-header-blue   { background: linear-gradient(135deg,#0d6efd,#0093ff); }
.addon-header-amber  { background: linear-gradient(135deg,#f59e0b,#f97316); }
.addon-header-green  { background: linear-gradient(135deg,#22c55e,#16a34a); }
.addon-header-teal   { background: linear-gradient(135deg,#0891b2,#2A9D8F); }
.addon-header-red    { background: linear-gradient(135deg,#ef4444,#dc2626); }
.addon-header-purple { background: linear-gradient(135deg,#7c3aed,#6d28d9); }
.addon-badge-pill {
    background: rgba(255,255,255,.25); color: #fff;
    padding: 4px 12px; border-radius: 20px;
    font-size: 11px; font-weight: 600; white-space: nowrap; flex-shrink: 0;
}
.addon-loading { display: flex; align-items: center; padding: 16px 0; color: #64748b; font-size: 14px; }
.addon-empty { text-align: center; padding: 32px 16px; color: #94a3b8; font-size: 14px; }
.addon-result-box {
    background: #f0f9ff; border: 1px solid #bae6fd;
    border-radius: 8px; padding: 12px 16px; color: #0c4a6e; margin-top: 12px;
}
@media (max-width: 575px) {
    .addon-section-header { padding: 12px 14px; flex-wrap: wrap; gap: 8px; }
    .addon-section-body   { padding: 14px; }
    .addon-badge-pill     { font-size: 10px; padding: 3px 10px; }
}

/* ==========================================================
   AI CHAT BUBBLE
   ========================================================== */
@keyframes ai-pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:.5; transform:scale(1.4); }
}

/* ==========================================================
   BOOKING FORMS — Air Ticket / Hotel / Tour
   ========================================================== */
.booking-section .card { border-radius: 12px; }
.booking-section .card-body { padding: 28px; }
.booking-section .form-label { font-weight: 500; font-size: 14px; color: var(--display-color); }
.booking-section .form-control,
.booking-section .form-select {
    border-radius: 8px; border-color: var(--input-border);
    padding: 10px 14px; font-size: 14px;
}
.booking-section .form-control:focus,
.booking-section .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(42,157,143,.15);
}
.booking-section .btn-primary { border-radius: 8px; padding: 10px 28px; font-weight: 600; }

/* ==========================================================
   SERVICE TABS — Visa / Tour / Air Ticket / Hotel
   ========================================================== */
#servicesTab .nav-link {
    border-radius: 50px; padding: 10px 22px;
    font-weight: 500; font-size: 14px;
    color: var(--body-color); border: 1.5px solid var(--border-color);
    margin: 0 4px; transition: all .25s;
}
#servicesTab .nav-link.active,
#servicesTab .nav-link:hover {
    background: var(--primary); border-color: var(--primary);
    color: #fff; box-shadow: 0 4px 14px rgba(42,157,143,.3);
}
#servicesTab .nav-link i { margin-right: 6px; }


/* ==========================================================
   AI VISA ASSISTANT — Floating Chat Bubble
   Uses CSS classes to survive the all:unset CSS reset
   ========================================================== */

/* Floating button wrapper */
.ai-fab-wrap {
    position: fixed !important;
    /* Stacked above the scroll-to-top button rather than on it. Both used to
       sit at bottom:20-28px right:20-28px, and because this one carries a far
       higher z-index it covered the other completely. */
    bottom: 112px !important;
    right: 24px !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Online indicator dot */
.ai-fab-dot {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 14px !important;
    height: 14px !important;
    background: #22c55e !important;
    border-radius: 50% !important;
    border: 2px solid #fff !important;
    animation: ai-dot-pulse 2s infinite !important;
    z-index: 1 !important;
}

@keyframes ai-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .65; transform: scale(1.3); }
}

/* Main FAB button */
.ai-fab-btn {
    width: 58px !important;
    height: 58px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #0d6efd, #0a58ca) !important;
    border: none !important;
    color: #fff !important;
    font-size: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 4px 20px rgba(13, 110, 253, .45) !important;
    transition: transform .2s, box-shadow .2s !important;
    outline: none !important;
}

.ai-fab-btn:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 6px 28px rgba(13, 110, 253, .6) !important;
}

.ai-fab-btn i {
    color: #fff !important;
    font-size: 24px !important;
    line-height: 1 !important;
}

/* Chat panel */
.ai-chat-panel {
    display: none;
    position: fixed !important;
    bottom: 100px !important;
    right: 28px !important;
    width: 340px !important;
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,.18) !important;
    z-index: 99998 !important;
    overflow: hidden !important;
    border: 1px solid #e0e7ff !important;
    flex-direction: column !important;
}

/* Chat header */
.ai-chat-head {
    background: linear-gradient(135deg, #0d6efd, #0a58ca) !important;
    padding: 14px 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.ai-chat-head-info {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.ai-chat-avatar {
    width: 36px !important;
    height: 36px !important;
    background: rgba(255,255,255,.2) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
}

.ai-chat-avatar i {
    color: #fff !important;
    font-size: 16px !important;
}

.ai-chat-head strong {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: block !important;
}

.ai-chat-online {
    color: #a7f3d0 !important;
    font-size: 11px !important;
    display: block !important;
}

.ai-chat-close {
    background: rgba(255,255,255,.15) !important;
    border: none !important;
    color: #fff !important;
    font-size: 20px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    line-height: 1 !important;
    transition: background .2s !important;
    flex-shrink: 0 !important;
}

.ai-chat-close:hover {
    background: rgba(255,255,255,.3) !important;
}

/* Messages area */
.ai-chat-msgs {
    height: 270px !important;
    overflow-y: auto !important;
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    background: #f8f9ff !important;
}

/* Message bubbles */
.ai-msg {
    padding: 10px 14px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    max-width: 88% !important;
}

.ai-msg-bot {
    background: #fff !important;
    color: #333 !important;
    border: 1px solid #e9ecef !important;
    border-radius: 12px 12px 12px 2px !important;
    align-self: flex-start !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.07) !important;
}

.ai-msg-bot i {
    color: #0d6efd !important;
    margin-right: 6px !important;
}

.ai-msg-user {
    background: linear-gradient(135deg, #0d6efd, #0a58ca) !important;
    color: #fff !important;
    border-radius: 12px 12px 2px 12px !important;
    align-self: flex-end !important;
    margin-left: auto !important;
}

.ai-msg-typing {
    background: #fff !important;
    color: #888 !important;
    border: 1px solid #e9ecef !important;
    border-radius: 12px 12px 12px 2px !important;
    align-self: flex-start !important;
    font-size: 20px !important;
    letter-spacing: 4px !important;
    padding: 6px 14px !important;
    animation: ai-blink 1.2s infinite !important;
}

@keyframes ai-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: .4; }
}

/* Input row */
.ai-chat-input-row {
    display: flex !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    background: #fff !important;
    border-top: 1px solid #e9ecef !important;
    align-items: center !important;
}

.ai-chat-input {
    flex: 1 !important;
    height: 38px !important;
    border: 1.5px solid #e0e7ff !important;
    border-radius: 20px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    background: #f8f9ff !important;
    color: #333 !important;
    outline: none !important;
    transition: border-color .2s !important;
}

.ai-chat-input:focus {
    border-color: #0d6efd !important;
    background: #fff !important;
}

.ai-chat-input::placeholder {
    color: #94a3b8 !important;
}

.ai-chat-send {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #0d6efd !important;
    border: none !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: background .2s, transform .15s !important;
}

.ai-chat-send:hover {
    background: #0a58ca !important;
    transform: scale(1.08) !important;
}

.ai-chat-send i {
    color: #fff !important;
    font-size: 15px !important;
}

/* Mobile */
@media (max-width: 480px) {
    .ai-chat-panel {
        width: calc(100vw - 24px) !important;
        right: 12px !important;
        bottom: 90px !important;
    }
    .ai-fab-wrap {
        bottom: 108px !important;
        right: 16px !important;
    }
}


/*=============================================
=            Countries mega menu              =
=============================================*/
/* Colour, radius and font all come from the :root tokens at the top of this
   file, so a primary colour change in the admin panel flows through here too.
   Shared pieces (.mega-country, .mega-flag, .mega-link-all, .mega-col-title)
   are declared once and reused by every column. */

.has-mega-menu {
  position: static;
}

.header-menu-list li.has-mega-menu > .mega-menu-toggle i {
  font-size: 12px;
  margin-left: 2px;
  transition: transform 0.25s;
}

.has-mega-menu.open > .mega-menu-toggle {
  color: var(--primary);
}

.has-mega-menu.open > .mega-menu-toggle i {
  transform: rotate(180deg);
}

.mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: min(1600px, calc(100vw - 40px));
  background-color: var(--bg-white);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
  overflow: hidden auto;
  max-height: calc(100vh - 150px);
  z-index: 20;
  text-align: left;
}

.has-mega-menu.open .mega-menu {
  display: block;
}

.mega-menu-body {
  display: grid;
  grid-template-columns: 220px 340px minmax(0, 1fr);
}

.mega-col {
  padding: 22px 20px;
  min-width: 0;
}

.mega-col + .mega-col {
  border-left: 1px solid var(--border-color);
}

.mega-col-title {
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

/*----------  shared country row  ----------*/

.mega-country-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mega-country {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--body-color);
  font-size: var(--font-sm);
  text-align: left;
  transition: background-color 0.2s, color 0.2s;
}

.mega-country:hover,
.mega-country.active {
  background-color: #eef6f5;
  background-color: color-mix(in srgb, var(--primary) 10%, #fff);
  color: var(--primary);
}

.mega-country-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mega-flag {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.mega-flag-lg {
  width: 30px;
  height: 30px;
}

.mega-count {
  min-width: 22px;
  height: 22px;
  padding-inline: 6px;
  border-radius: 999px;
  background-color: var(--light);
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mega-country.active .mega-count {
  background-color: var(--primary);
  color: var(--white);
}

.mega-visa-arrow {
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
}

/*----------  shared view-all link  ----------*/

.mega-link-all,
.mega-view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  font-size: var(--font-sm);
  font-weight: 500;
}

.mega-view {
  font-size: var(--font-xs);
}

.mega-link-all {
  margin-top: 12px;
}

.mega-link-all:hover,
.mega-view:hover {
  text-decoration: underline;
}

/*----------  column 2 : visa types  ----------*/

.mega-detail {
  display: none;
}

.mega-detail.active {
  display: block;
}

.mega-detail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}

.mega-detail-title {
  font-size: var(--font-lg);
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
}

.mega-badge {
  padding: 3px 10px;
  border-radius: 999px;
  background-color: #eef6f5;
  background-color: color-mix(in srgb, var(--primary) 12%, #fff);
  color: var(--primary);
  font-size: var(--font-xs);
  font-weight: 600;
}

.mega-close {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
}

.mega-visa-list > li + li {
  border-top: 1px solid var(--border-color);
}

.mega-visa {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  border-radius: 10px;
  color: var(--body-color);
  transition: background-color 0.2s;
}

.mega-visa:hover {
  background-color: #f6fbfa;
  background-color: color-mix(in srgb, var(--primary) 6%, #fff);
}

.mega-visa-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  background-color: #eef6f5;
  background-color: color-mix(in srgb, var(--primary) 12%, #fff);
  color: var(--primary);
  flex-shrink: 0;
}

.mega-visa-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mega-visa-text strong {
  font-size: var(--font-sm);
  font-weight: 600;
}

.mega-visa-text small {
  font-size: var(--font-xs);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mega-empty {
  padding: 16px 8px;
  font-size: var(--font-sm);
  color: var(--muted);
}

/*----------  column 3 : regions and search  ----------*/

.mega-region-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 4px 6px;
}

.mega-region + .mega-region {
  border-left: 1px solid var(--border-color);
  padding-left: 12px;
}

.mega-region-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.mega-region-head .mega-col-title {
  margin-bottom: 0;
  /* six regions now share the row, so keep each heading on one line */
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.mega-country-list-sm .mega-country {
  padding: 6px 8px;
  gap: 8px;
}

.mega-search-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.mega-search {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.mega-search-input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: var(--font-sm);
  color: var(--body-color);
}

.mega-search-input::placeholder {
  color: var(--placeholder-color);
}

.mega-search-row .mega-link-all {
  margin-top: 0;
  white-space: nowrap;
}

.mega-country.is-hidden {
  display: none;
}

.mega-region.is-hidden {
  display: none;
}


/*----------  feature strip  ----------*/

.mega-feature-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--border-color);
  background-color: var(--body-bg);
}

.mega-feature-strip li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  font-size: var(--font-sm);
}

.mega-feature-strip li + li {
  border-left: 1px solid var(--border-color);
}

.mega-feature-strip i {
  font-size: 20px;
  color: var(--primary);
}

.mega-feature-strip span {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  color: var(--muted);
}

.mega-feature-strip strong {
  font-weight: 600;
  color: var(--body-color);
}

/*----------  responsive  ----------*/

/*----------  price badge inside the panel  ----------*/

.mega-visa-price {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}

/* Swapping the panel over the network shows a brief dimmed state */
.mega-detail.is-loading {
  opacity: 0.45;
  pointer-events: none;
}

/*----------  responsive  ----------*/

@media (max-width: 1399px) {
  .mega-menu-body {
    grid-template-columns: 190px 290px minmax(0, 1fr);
  }

}

@media (max-width: 1199px) {
  .mega-menu-body {
    grid-template-columns: 180px 260px minmax(0, 1fr);
  }
  .mega-col {
    padding: 18px 14px;
  }
  .mega-feature-strip {
    grid-template-columns: repeat(3, 1fr);
  }
  .mega-feature-strip li:nth-child(n + 4) {
    border-top: 1px solid var(--border-color);
  }
}

@media (max-width: 991px) {
  /* Inside the mobile drawer the panel becomes a plain stacked list */
  .mega-menu {
    position: static;
    transform: none;
    width: 100%;
    box-shadow: none;
    border-radius: 0;
    max-height: none;
    overflow: visible;
  }
  .mega-menu-body {
    grid-template-columns: 1fr;
  }
  .mega-col {
    padding: 12px 4px;
  }
  .mega-col + .mega-col {
    border-left: 0;
    border-top: 1px solid var(--border-color);
  }
  .mega-country-list {
    max-height: 260px;
    overflow-y: auto;
  }
  .mega-region-grid {
    grid-template-columns: 1fr;
  }
  .mega-region + .mega-region {
    border-left: 0;
    padding-left: 0;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
  }
  .mega-search-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .mega-detail-title {
    font-size: var(--font-md);
  }
  .mega-feature-strip {
    grid-template-columns: 1fr;
  }
  .mega-feature-strip li + li {
    border-left: 0;
    border-top: 1px solid var(--border-color);
  }
}

/*=============================================
=            Country visa page                =
=============================================*/
/* Every colour, radius and font size below resolves to a :root token, so the
   admin colour picker restyles this page too. Shared pieces (.cp-flag,
   .cp-link, .cp-section-title, .cp-note, .cp-tick-list, .cp-muted) are
   declared once and reused by every section. */

.cp-section {
  padding-block: var(--section-space) 0;
}

.cp-section-last {
  padding-bottom: var(--section-space);
}

.cp-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Derived from the section rhythm, so a heading never sits closer to its
     content than the sections sit to each other */
  margin-bottom: calc(var(--section-gap) * 0.62);
}

.cp-section-title {
  font-size: var(--display-3);
  font-weight: 700;
  margin: 0;
  position: relative;
  padding-bottom: 12px;
}

.cp-section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 3px;
  border-radius: 3px;
  background-color: var(--primary);
}

.cp-section-title.text-center::after {
  left: 50%;
  transform: translateX(-50%);
}

.cp-block-title {
  font-size: var(--font-xl);
  font-weight: 600;
  margin-bottom: 12px;
}

.cp-muted {
  color: var(--muted);
  font-size: var(--font-sm);
  margin: 0;
}

.cp-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--primary);
  font-size: var(--font-sm);
  font-weight: 500;
  margin-top:25px;
}

.cp-link:hover {
  color: var(--primary);
  text-decoration: underline;
}

.cp-flag {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.cp-flag-lg {
  width: 38px;
  height: 38px;
  box-shadow: 0 0 0 3px var(--bg-white);
}

.cp-flag-xl {
  width: 64px;
  height: 64px;
  box-shadow: 0 0 0 4px var(--bg-white);
}

/*----------  hero  ----------*/

/* The banner photo the admin sets under Frontend Manager > Breadcrumb, washed
   in the brand colour so the headline stays readable whatever is uploaded.
   Falls back to the flat colour when no photo is set. */
.cp-hero {
  position: relative;
  padding-block: 150px 60px;
  background-color: var(--primary-two);
  background-image: var(--banner-image, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--white);
  overflow: hidden;
}

/* One flat wash, not a gradient. Whatever photo the owner uploads, white text
   still reads against it. */
.cp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--primary-two) 82%, transparent);
  pointer-events: none;
}

.cp-hero > * {
  position: relative;
  z-index: 1;
}

.cp-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 30px;
}

.cp-hero-title {
  font-size: var(--display-2);
  font-weight: 600;
  color: var(--white);
  margin-bottom: 14px;
  margin-top:25px;
}

.cp-hero-sub {
  max-width: 460px;
  margin-bottom: 24px;
  color: var(--light);
}

.cp-hero-search {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 460px;
  padding: 8px 8px 8px 16px;
  border-radius: 10px;
  background-color: var(--bg-white);
  color: var(--muted);
}

.cp-hero-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--body-color);
  font-size: var(--font-sm);
}

.cp-hero-search input::placeholder {
  color: var(--placeholder-color);
}

.cp-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 26px;
}

.cp-hero-stats li,
.cp-note {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cp-hero-stats i {
  font-size: 20px;
  color: var(--primary);
}

.cp-hero-stats span,
.cp-note span {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  font-size: var(--font-sm);
}

.cp-hero-stats strong {
  font-weight: 600;
}

.cp-hero-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 230px;
}

.cp-hero-globe {
  font-size: 190px;
  line-height: 1;
  color: var(--primary);
  opacity: 0.9;
}

.cp-hero-plane {
  position: absolute;
  top: 12%;
  right: 12%;
  font-size: 54px;
  color: var(--white);
  transform: rotate(-18deg);
}

/*----------  popular destinations  ----------*/

/* Every country fits here, so the row wraps instead of scrolling sideways */
.cp-destinations {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 22px;
}

.cp-destination {
  display: block;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  overflow: hidden;
  background-color: var(--surface-bg);
  color: var(--body-color);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.cp-destination:hover,
.cp-destination.active {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
  color: var(--body-color);
}

.cp-destination-media {
  display: block;
  height: 130px;
  overflow: hidden;
}

.cp-destination-media img:not(.cp-flag) {
  transition: transform 0.45s;
}

/* Countries with no destination photo get a brand-tinted plate with the flag
   as a medallion, which reads far calmer in a grid than a stretched flag */
.cp-destination-media.is-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--primary) 10%, #fff);
}

.cp-destination-media.is-blank::after {
  content: none;
}

.cp-destination-media.is-blank .cp-flag {
  width: 58px;
  height: 58px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
  transition: transform 0.35s;
}

.cp-destination:hover .cp-destination-media.is-blank .cp-flag {
  transform: scale(1.08);
}

/* The medallion already shows the flag, so the badge below would repeat it */
.cp-destination.is-flagcard .cp-destination-body .cp-flag {
  display: none;
}

.cp-destination.is-flagcard .cp-destination-body {
  padding-top: 14px;
}

.cp-destination:hover .cp-destination-media img:not(.cp-flag) {
  transform: scale(1.06);
}

/* How many visa types the country has, read straight off the photo */
.cp-destination-tag {
  position: absolute;
  z-index: 1;
  top: 10px;
  right: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--primary) 90%, transparent);
  color: var(--white);
  font-size: var(--font-xs);
  font-weight: 600;
}

/* The card is one big link, so this is a span dressed as a button: a tinted
   pill at rest that fills with the brand colour as soon as the card is
   hovered, which tells the whole card is clickable, not just the words. */
.cp-destination-go {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 8px 8px 14px;
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--primary) 8%, #fff);
  color: var(--primary);
  font-size: var(--font-sm);
  font-weight: 600;
  transition: background-color 0.25s, color 0.25s, box-shadow 0.25s;
}

.cp-destination-go i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--primary) 15%, #fff);
  font-size: 12px;
  transition: transform 0.25s, background-color 0.25s;
}

.cp-destination:hover .cp-destination-go,
.cp-destination.active .cp-destination-go {
  background-color: var(--primary);
  color: var(--white);
  box-shadow: 0 12px 22px -14px color-mix(in srgb, var(--primary) 85%, transparent);
}

.cp-destination:hover .cp-destination-go i,
.cp-destination.active .cp-destination-go i {
  background-color: rgba(255, 255, 255, 0.22);
}

.cp-destination:hover .cp-destination-go i {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .cp-destination-go,
  .cp-destination-go i {
    transition: none;
  }
}

.cp-section-heading {
  display: grid;
  gap: 6px;
}

.cp-toggle-count {
  padding: 2px 9px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--primary) 12%, #fff);
  font-weight: 600;
}

/*----------  destination directory  ----------*/

.cp-dir-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: var(--section-gap);
  padding: 16px 18px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background-color: var(--surface-bg);
}

.cp-dir-search {
  flex: 1;
  min-width: 240px;
  max-width: 380px;
  margin: 0;
}

.cp-dir-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cp-dir-chips a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  color: var(--body-color);
  font-size: var(--font-sm);
  font-weight: 500;
  transition: border-color 0.25s, color 0.25s, background-color 0.25s;
}

.cp-dir-chips a:hover {
  border-color: var(--primary);
  background-color: color-mix(in srgb, var(--primary) 8%, #fff);
  color: var(--primary);
}

.cp-dir-chips span {
  padding: 1px 8px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--primary) 12%, #fff);
  color: var(--primary);
  font-size: var(--font-xs);
  font-weight: 600;
}

.cp-dir-region + .cp-dir-region {
  margin-top: var(--section-gap);
}

/* Anchor jumps land below the fixed header instead of under it */
.cp-dir-region {
  scroll-margin-top: 110px;
}

/* Both flip on while the search box has a term */
.cp-dir-region.is-hidden,
.cp-destination.is-hidden,
.cp-dir-empty {
  display: none;
}

.cp-dir-empty.is-shown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 60px 20px;
  border: 1px dashed var(--border-color);
  border-radius: 14px;
  color: var(--muted);
}

/* Only the banner image stretches, the flag badge sitting on top keeps its
   own size */
.cp-destination-media img:not(.cp-flag),
.cp-overview-media img:not(.cp-flag) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Countries seeded without a destination photo fall back to their flag,
   softened so the card still reads as a banner rather than a raw flag */
.cp-flag-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.92);
}

.cp-destination-media,
.cp-overview-media {
  position: relative;
  background-color: var(--body-bg);
}

.cp-destination-media::after,
.cp-overview-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, rgba(15, 23, 42, 0.45), rgba(15, 23, 42, 0));
  pointer-events: none;
}

.cp-destination-body {
  display: block;
  position: relative;
  padding: 22px 14px 14px;
}

.cp-destination-body .cp-flag {
  position: absolute;
  top: -19px;
  left: 14px;
}

.cp-destination-body strong {
  display: block;
  font-weight: 600;
}

.cp-destination-body small {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: var(--font-xs);
}

/*----------  country picker and visa grid  ----------*/

.cp-panel {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 24px;
  padding: 22px;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background-color: var(--surface-bg);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.05);
}

/* A tinted rail keeps the picker visually separate from the cards it filters.
   The rail matches the card column's height and the View All button is pushed
   to its bottom edge, so the panel reads as one block instead of trailing off */
.cp-country-side {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: 14px;
  background-color: color-mix(in srgb, var(--primary) 4%, #fff);
}

.cp-side-title {
  margin-bottom: 12px;
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cp-side-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background-color: var(--bg-white);
  color: var(--muted);
  margin-bottom: 12px;
}

.cp-side-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: var(--font-sm);
  color: var(--body-color);
}

/* flex-basis 0 keeps the list out of the rail's own height calculation, so it
   simply fills whatever height the card column sets and its scrollbar runs all
   the way down to the View All button */
.cp-country-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 0;
  min-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--primary) 35%, #fff) transparent;
}

.cp-country-list::-webkit-scrollbar {
  width: 4px;
}

.cp-country-list::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: color-mix(in srgb, var(--primary) 35%, #fff);
}

.cp-country {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 12px;
  border-radius: 10px;
  color: var(--body-color);
  font-size: var(--font-sm);
  transition: background-color 0.2s, color 0.2s;
}

.cp-country:hover,
.cp-country.active {
  background-color: var(--bg-white);
  color: var(--primary);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.cp-country.active {
  font-weight: 600;
}

/* A brand tick down the left edge marks the country being viewed */
.cp-country.active::before {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background-color: var(--primary);
}

/* The long tail of countries stays hidden until View All is pressed */
.cp-extra,
.cp-country-list li.is-hidden {
  display: none;
}

.cp-country-list.show-all .cp-extra {
  display: block;
}

.cp-country-list.show-all li.is-hidden {
  display: none;
}

/* auto pins it to the bottom of the rail; the padding keeps a gap from the
   list when there is no spare height to push into (mobile, short columns) */
.cp-show-all {
  margin-top: auto;
  padding-top: 12px;
}

.cp-country-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}

.cp-country-head-text {
  flex: 1;
  min-width: 0;
}

.cp-country-name {
  font-size: var(--display-5);
  font-weight: 600;
  margin: 0;
}

.cp-country-count {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--primary) 10%, #fff);
  color: var(--primary);
  font-size: var(--font-xs);
  font-weight: 500;
  white-space: nowrap;
}

.cp-country-count strong {
  font-size: var(--font-md);
  font-weight: 700;
}

.cp-visa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

/* The price block grows to fill whatever room the description leaves, so the
   View Details row lines up across the row however long the copy runs */
.cp-visa-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 16px 0;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background-color: var(--surface-bg);
  text-align: center;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.cp-visa-card:hover {
  transform: translateY(-3px);
}

.cp-visa-card:hover,
.cp-visa-card.active {
  border-color: var(--primary);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.09);
}

/* Corner tick on the card whose guide is open below */
.cp-visa-mark {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  width: 42px;
  height: 42px;
  padding: 4px 6px 0 0;
  color: var(--white);
  font-size: 13px;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  background-color: var(--primary);
  opacity: 0;
  transition: opacity 0.2s;
}

.cp-visa-card.active .cp-visa-mark {
  opacity: 1;
}

.cp-visa-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  border-radius: 14px;
  font-size: 22px;
  background-color: color-mix(in srgb, var(--primary) 10%, #fff);
  color: var(--primary);
  transition: background-color 0.2s;
}

.cp-visa-card.active .cp-visa-icon {
  background-color: var(--primary);
  color: var(--white);
}

.cp-visa-title {
  font-size: var(--font-md);
  font-weight: 600;
  margin-bottom: 6px;
}

/* Two lines are reserved whether the copy needs them or not, so every price in
   the row sits on the same line */
.cp-visa-desc {
  min-height: 2.9em;
  font-size: var(--font-xs);
  color: var(--muted);
  margin-bottom: 14px;
}

.cp-visa-cost {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  width: 100%;
  padding-bottom: 16px;
}

.cp-visa-price {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0;
}

/* The line under each amount: what it is, and when it is taken */
.cp-visa-when {
  display: block;
  color: var(--muted);
  font-size: var(--font-xs);
  line-height: 1.5;
}

.cp-visa-when strong {
  display: block;
  color: var(--body-color);
  font-weight: 600;
}

.cp-visa-when + .cp-visa-full {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-color);
}

/* Full width foot, so the whole strip lights up rather than a thin text link */
.cp-visa-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: calc(100% + 32px);
  margin: 0 -16px;
  padding: 13px 10px;
  border-top: 1px solid var(--border-color);
  color: var(--primary);
  font-size: var(--font-sm);
  font-weight: 600;
  transition: background-color 0.2s, color 0.2s;
}

.cp-visa-more i {
  transition: transform 0.2s;
}

.cp-visa-more:hover,
.cp-visa-card.active .cp-visa-more {
  background-color: var(--primary);
  color: var(--white);
}

.cp-visa-more:hover i {
  transform: translateX(4px);
}

.cp-empty {
  grid-column: 1 / -1;
  padding: 24px;
  text-align: center;
}

/*----------  what the two prices mean  ----------*/

.cp-fee-guide {
  margin-top: 22px;
  padding: 20px 22px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border-color));
  border-radius: 14px;
  background-color: color-mix(in srgb, var(--primary) 5%, #fff);
}

.cp-fee-guide-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--body-color);
  font-size: var(--font-md);
  font-weight: 600;
}

.cp-fee-guide-head i {
  color: var(--primary);
}

.cp-fee-guide-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.cp-fee-guide-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cp-fee-step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--primary);
  color: var(--white);
  font-size: var(--font-xs);
  font-weight: 700;
}

.cp-fee-step-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cp-fee-step-body strong {
  font-size: var(--font-sm);
  font-weight: 600;
}

.cp-fee-step-body small {
  color: var(--muted);
  font-size: var(--font-xs);
  line-height: 1.6;
}

.cp-fee-guide-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px dashed color-mix(in srgb, var(--primary) 25%, #fff);
  color: var(--muted);
  font-size: var(--font-xs);
}

.cp-fee-guide-note i {
  color: var(--success);
  font-size: 15px;
}

/*----------  the issued visa  ----------*/

/* Two states, one shape: the visa is either yours to download or waiting on
   the visa amount. Green for released, brand tint for locked. */
.vs-issued {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
}

.vs-issued-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 22px;
  flex-shrink: 0;
}

.vs-issued-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 200px;
}

.vs-issued-text strong {
  font-size: var(--font-md);
  font-weight: 600;
}

.vs-issued-text span {
  color: var(--muted);
  font-size: var(--font-sm);
}

.vs-issued-open {
  border-color: color-mix(in srgb, var(--success) 40%, #fff);
  background-color: color-mix(in srgb, var(--success) 8%, #fff);
}

.vs-issued-open .vs-issued-icon {
  background-color: color-mix(in srgb, var(--success) 16%, #fff);
  color: var(--success);
}

.vs-issued-locked {
  border-color: color-mix(in srgb, var(--primary) 30%, #fff);
  background-color: color-mix(in srgb, var(--primary) 7%, #fff);
}

.vs-issued-locked .vs-issued-icon {
  background-color: color-mix(in srgb, var(--primary) 14%, #fff);
  color: var(--primary);
}

/*----------  eligibility strip  ----------*/

.cp-eligibility {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 16px 20px;
  border-radius: 12px;
  background-color: #eef6f5;
  background-color: color-mix(in srgb, var(--primary) 8%, #fff);
}

.cp-eligibility i {
  font-size: 22px;
  color: var(--primary);
}

.cp-eligibility p {
  flex: 1;
  margin: 0;
  font-size: var(--font-sm);
}

/*----------  guide loading state  ----------*/

.cp-dossier-wrap {
  position: relative;
}

/* The guide stays on screen and dims while the next one arrives, so the page
   keeps its height and nothing jumps under the reader */
.cp-dossier-wrap.is-loading .cp-dossier-slot {
  opacity: 0.32;
  filter: saturate(0.5);
  pointer-events: none;
}

.cp-dossier-slot {
  transition: opacity 0.2s;
}

.cp-loader {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  border-radius: 14px;
  background-color: color-mix(in srgb, var(--surface-bg) 55%, transparent);
  overflow: hidden;
}

.cp-dossier-wrap.is-loading .cp-loader {
  display: block;
}

/* Indeterminate sweep across the top edge */
.cp-loader-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 38%;
  height: 3px;
  border-radius: 3px;
  background-color: var(--primary);
  animation: cpLoaderSweep 1.1s ease-in-out infinite;
}

/* Pinned near the top edge, which is exactly where the page lands after the
   scroll — centring it would put the pill off screen on a long guide */
.cp-loader-body {
  position: absolute;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-radius: 999px;
  background-color: var(--surface-bg);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14);
  color: var(--muted);
  font-size: var(--font-sm);
  font-weight: 500;
}

.cp-loader-ring {
  width: 20px;
  height: 20px;
  border: 2px solid color-mix(in srgb, var(--primary) 22%, #fff);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: cpLoaderSpin 0.7s linear infinite;
}

@keyframes cpLoaderSweep {
  0% {
    left: -38%;
  }
  100% {
    left: 100%;
  }
}

@keyframes cpLoaderSpin {
  to {
    transform: rotate(360deg);
  }
}

/*----------  detail tabs  ----------*/

.cp-details {
  padding: 24px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background-color: var(--surface-bg);
}

.cp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 22px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
}

.cp-tab {
  flex: 1;
  min-width: 110px;
  padding: 11px 10px;
  border: 0;
  background-color: var(--surface-bg);
  color: var(--body-color);
  font-size: var(--font-sm);
  font-weight: 500;
  transition: background-color 0.2s, color 0.2s;
}

.cp-tab:hover {
  background-color: var(--body-bg);
}

.cp-tab.active {
  background-color: var(--primary);
  color: var(--white);
}

.cp-tab-panel {
  display: none;
}

.cp-tab-panel.active {
  display: block;
}

/*----------  visa dossier  ----------*/
/* The visa guide reads as a document: a stamped header carrying the country,
   the fee and the wait, a rail of numbered chapters down the side and one
   chapter open at a time beside it. Colours, radii and type sizes all resolve
   to :root tokens, so the admin colour picker restyles it with the page. */

.cp-dossier {
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 26px 60px -44px rgba(15, 23, 42, 0.55);
}

/*..........  stamped header  ..........*/

.cp-dossier-head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px;
  padding: 30px 32px;
  color: var(--white);
  background-color: var(--primary-two);
  /* A wash of the brand colour over a fine diagonal weave, the way security
     paper is printed. Both layers are tokens, so it recolours with the theme. */
  background-image: radial-gradient(
      120% 150% at 100% 0%,
      color-mix(in srgb, var(--primary) 62%, transparent) 0%,
      transparent 62%
    ),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 10px);
  overflow: hidden;
}

/* The stamp ring, kept behind the text and out of the accessibility tree */
.cp-dossier-head::after {
  content: "";
  position: absolute;
  top: -70px;
  right: -50px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.16);
  pointer-events: none;
}

.cp-dossier-id {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.cp-dossier-id .cp-flag-xl {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14);
}

.cp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--white);
  font-size: var(--font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cp-dossier-head .cp-section-title {
  color: var(--white);
  font-size: var(--display-3);
  padding-bottom: 0;
  margin: 0;
}

/* The accent underline belongs to headings on the light sections */
.cp-dossier-head .cp-section-title::after {
  display: none;
}

.cp-dossier-sub {
  max-width: 460px;
  margin: 8px 0 0;
  color: var(--light);
  font-size: var(--font-sm);
}

.cp-dossier-meta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.cp-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cp-fact {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.08);
}

.cp-fact i {
  font-size: 18px;
  color: var(--white);
  opacity: 0.8;
}

.cp-fact span {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.cp-fact small {
  color: var(--light);
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cp-fact strong {
  color: var(--white);
  font-family: var(--display-font);
  font-size: var(--font-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/*..........  chapter rail  ..........*/

.cp-dossier-body {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
}

.cp-rail {
  border-right: 1px solid var(--border-color);
  background-color: var(--body-bg);
}

/* The rail reuses .cp-tabs so the tab script keeps working, and undoes the
   segmented look the horizontal bar on the package pages relies on */
.cp-tabs-rail {
  position: sticky;
  top: 96px;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 18px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.cp-tabs-rail .cp-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background-color: transparent;
  text-align: left;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.cp-tabs-rail .cp-tab i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 8px;
  font-size: 14px;
  background-color: color-mix(in srgb, var(--primary) 10%, #fff);
  color: var(--primary);
  transition: background-color 0.2s, color 0.2s;
}

.cp-tab-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-tab-count {
  padding: 1px 7px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--primary) 12%, #fff);
  color: var(--primary);
  font-size: var(--font-xxs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cp-tabs-rail .cp-tab:hover {
  background-color: var(--surface-bg);
  color: var(--primary);
}

.cp-tabs-rail .cp-tab.active {
  background-color: var(--primary);
  color: var(--white);
  box-shadow: 0 12px 22px -14px color-mix(in srgb, var(--primary) 80%, transparent);
}

.cp-tabs-rail .cp-tab.active i,
.cp-tabs-rail .cp-tab.active .cp-tab-count {
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--white);
}

/*..........  open chapter  ..........*/

.cp-dossier-main {
  min-width: 0;
  padding: 28px 32px 32px;
}

/* Switching chapters should feel like turning a page, not a jump cut */
.cp-dossier-main .cp-tab-panel.active {
  animation: cpPaneIn 0.35s ease both;
}

@keyframes cpPaneIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp-dossier-main .cp-tab-panel.active {
    animation: none;
  }
}

.cp-pane-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border-color);
}

.cp-pane-head > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  font-size: 19px;
  background-color: color-mix(in srgb, var(--primary) 10%, #fff);
  color: var(--primary);
}

.cp-pane-head .cp-block-title {
  margin-bottom: 2px;
}

.cp-lead {
  margin: 0;
  font-size: var(--font-md);
}

.cp-overview {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-top: 4px;
}

.cp-overview-media {
  position: relative;
  height: 290px;
  border-radius: 14px;
  overflow: hidden;
}

.cp-overview-media .cp-flag-xl {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 1;
}

.cp-media-caption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  color: var(--white);
}

.cp-media-caption strong {
  font-family: var(--display-font);
  font-size: var(--font-lg);
  font-weight: 700;
}

.cp-media-caption small {
  font-size: var(--font-xs);
  opacity: 0.85;
}

/* Bullets pair up once there is room, so a long list stays scannable */
.cp-tick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px 22px;
}

/*..........  numbered point lists  ..........*/

.cp-points {
  display: grid;
  gap: 10px;
  counter-reset: cp-point;
}

.cp-point {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background-color: var(--surface-bg);
  font-size: var(--font-sm);
  transition: border-color 0.2s, transform 0.2s;
}

.cp-point::before {
  counter-increment: cp-point;
  content: counter(cp-point, decimal-leading-zero);
  flex-shrink: 0;
  color: var(--primary);
  font-family: var(--display-font);
  font-size: var(--font-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.7;
}

.cp-point:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border-color));
  transform: translateX(3px);
}

/*..........  document cards  ..........*/

.cp-doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.cp-doc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background-color: var(--surface-bg);
  font-size: var(--font-sm);
  font-weight: 500;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.cp-doc i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  font-size: 16px;
  background-color: color-mix(in srgb, var(--primary) 10%, #fff);
  color: var(--primary);
}

.cp-doc:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border-color));
  box-shadow: 0 14px 30px -26px rgba(15, 23, 42, 0.8);
}

/*..........  processing  ..........*/

.cp-time-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border-color));
  border-radius: 14px;
  background-image: linear-gradient(
    120deg,
    color-mix(in srgb, var(--primary) 10%, #fff) 0%,
    color-mix(in srgb, var(--primary) 3%, #fff) 100%
  );
}

.cp-time-figure {
  color: var(--primary);
  font-family: var(--display-font);
  font-size: var(--display-4);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.cp-time-text {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
  border-left: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border-color));
  padding-left: 20px;
  font-size: var(--font-sm);
}

.cp-time-text strong {
  font-weight: 600;
}

.cp-time-text small {
  color: var(--muted);
  font-size: var(--font-xs);
}

.cp-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin-top: 26px;
  counter-reset: cp-stage;
}

.cp-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 46px;
  font-size: var(--font-sm);
}

.cp-stage::before {
  counter-increment: cp-stage;
  content: counter(cp-stage);
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--primary);
  color: var(--white);
  font-family: var(--display-font);
  font-size: var(--font-sm);
  font-weight: 700;
}

/* The rule joining one stage to the next, dropped after the last one */
.cp-stage::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 42px;
  right: -20px;
  height: 1px;
  background-image: linear-gradient(
    to right,
    color-mix(in srgb, var(--primary) 45%, transparent) 0 6px,
    transparent 6px 12px
  );
  background-size: 12px 1px;
}

.cp-stage:last-child::after {
  display: none;
}

.cp-stage strong {
  font-weight: 600;
}

.cp-stage small {
  color: var(--muted);
  font-size: var(--font-xs);
}

.cp-tick-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-block: 14px;
  font-size: var(--font-sm);
}

.cp-tick-list i {
  color: var(--primary);
  margin-right: 6px;
}

.cp-note {
  padding: 14px 16px;
  border-radius: 10px;
  background-color: #eef6f5;
  background-color: color-mix(in srgb, var(--primary) 8%, #fff);
}

.cp-note i {
  font-size: 20px;
  color: var(--primary);
}

.cp-note small {
  color: var(--muted);
}

/*----------  fees table  ----------*/

.cp-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: 14px;
}

.cp-fee-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-sm);
}

/* nowrap used to be on every cell, so the two explanatory sub-labels in the fee
   column - "Visa Apply Fee, pay now" and "Visa Price, only if approved" - each
   demanded a full line of width and pushed the Apply column past the right edge
   of the panel. Prose wraps; only the values that would read wrong broken in
   half are held on one line. */
.cp-fee-table th,
.cp-fee-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  white-space: normal;
}

.cp-fee-table .cp-fee-second,
.cp-fee-table td:last-child {
  white-space: nowrap;
}

/* The table can still outgrow a narrow panel, and the one thing that must never
   be the part scrolled out of sight is the button. Pinned to the right edge,
   carrying the row's own tint so it does not read as a column bolted on. */
.cp-fee-table th:last-child,
.cp-fee-table td:last-child {
  position: sticky;
  right: 0;
  background-color: #fff;
}

.cp-fee-table th:last-child {
  background-color: var(--body-bg);
}

.cp-fee-table tr.active td:last-child {
  background-color: color-mix(in srgb, var(--primary) 7%, #fff);
}

.cp-fee-table tbody tr:hover td:last-child {
  background-color: color-mix(in srgb, var(--primary) 4%, #fff);
}

.cp-fee-table th {
  background-color: var(--body-bg);
  color: var(--muted);
  font-weight: 600;
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cp-fee-table tbody tr:last-child td {
  border-bottom: 0;
}

.cp-fee-table tbody tr:hover {
  background-color: color-mix(in srgb, var(--primary) 4%, #fff);
}

.cp-fee-table tr.active {
  background-color: #eef6f5;
  background-color: color-mix(in srgb, var(--primary) 7%, #fff);
}

/* An accent bar marks the row the guide above is describing */
.cp-fee-table tr.active td:first-child {
  box-shadow: inset 3px 0 0 var(--primary);
}

.cp-fee-plan {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
}

.cp-fee-plan > i {
  color: var(--primary);
  font-size: 15px;
}

.cp-fee-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--primary) 12%, #fff);
  color: var(--primary);
  font-size: var(--font-xxs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cp-fee-table .cp-visa-price {
  font-size: var(--font-md);
  margin: 0;
}

.cp-fee-note {
  margin-top: 12px;
}

/*----------  faq  ----------*/

.cp-faq {
  display: grid;
  gap: 10px;
}

.cp-faq li {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background-color: var(--surface-bg);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.cp-faq li.open {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border-color));
  box-shadow: 0 16px 34px -28px rgba(15, 23, 42, 0.85);
}

.cp-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  border: 0;
  background: transparent;
  color: var(--body-color);
  font-size: var(--font-sm);
  font-weight: 600;
  text-align: left;
  transition: color 0.2s;
}

.cp-faq-q:hover,
.cp-faq li.open .cp-faq-q {
  color: var(--primary);
}

.cp-faq-q i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--primary) 10%, #fff);
  color: var(--primary);
  font-size: 13px;
  transition: transform 0.25s, background-color 0.2s, color 0.2s;
}

.cp-faq li.open .cp-faq-q i {
  transform: rotate(180deg);
  background-color: var(--primary);
  color: var(--white);
}

/* The answer opens on its own height rather than snapping into place. The
   padding lives on the paragraph so it is clipped away when closed. */
/* The 0fr row collapses the answer, but that leans on the grid track sizing
   alone: anything that gives the row a floor leaves one clipped line of the
   answer showing under every question, which is what the closed accordion
   looked like. visibility settles it independently of how the track resolves,
   and it also keeps a closed answer out of the accessibility tree. It is held
   until the open transition ends, so the text does not blink out mid-collapse. */
.cp-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  visibility: hidden;
  font-size: var(--font-sm);
  color: var(--muted);
  transition: grid-template-rows 0.3s ease, visibility 0s linear 0.3s;
}

.cp-faq li.open .cp-faq-a {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.3s ease, visibility 0s;
}

.cp-faq-a > p {
  min-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0 18px 16px;
}

@media (prefers-reduced-motion: reduce) {
  .cp-faq-a {
    transition: none;
  }
}

/*----------  how it works  ----------*/

.cp-hiw-lead {
  max-width: 560px;
  margin: 14px auto 0;
  text-align: center;
}

.cp-hiw {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 24px;
  margin-top: calc(var(--section-gap) * 0.6);
}

.cp-hiw-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 20px 26px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background-color: var(--surface-bg);
  text-align: center;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.cp-hiw-step:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.1);
}

/* The step number rides the top edge, ringed in the page background so the
   card border appears to run behind it */
.cp-hiw-num {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--primary);
  color: var(--white);
  font-size: var(--font-xs);
  font-weight: 700;
  box-shadow: 0 0 0 5px var(--body-bg);
}

.cp-hiw-art-wrap {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--primary) 7%, #fff);
  transition: background-color 0.25s;
}

.cp-hiw-step:hover .cp-hiw-art-wrap {
  background-color: color-mix(in srgb, var(--primary) 13%, #fff);
}

.cp-hiw-art {
  width: 60px;
  height: 60px;
}

.cp-hiw-title {
  font-size: var(--font-md);
  font-weight: 600;
}

.cp-hiw-text {
  color: var(--muted);
  font-size: var(--font-xs);
  line-height: 1.65;
}

/* Illustration palette. Every shape reads the brand colour, so the admin's
   picker repaints all five drawings. */
.cp-hiw-fill {
  fill: color-mix(in srgb, var(--primary) 13%, #fff);
  stroke: var(--primary);
  stroke-width: 2;
  stroke-linejoin: round;
}

.cp-hiw-line {
  fill: none;
  stroke: var(--primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cp-hiw-glass {
  fill: var(--bg-white);
  stroke: var(--primary);
  stroke-width: 2;
}

.cp-hiw-accent {
  fill: var(--primary);
}

.cp-hiw-invert {
  fill: none;
  stroke: var(--white);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cp-hiw-check {
  fill: none;
  stroke: var(--primary);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cp-hiw-thick {
  fill: none;
  stroke: var(--primary);
  stroke-width: 4;
  stroke-linecap: round;
}

.cp-hiw-dash {
  fill: none;
  stroke: color-mix(in srgb, var(--primary) 45%, #fff);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1 7;
}

/* One row means the cards can be joined up. Below this they wrap, and a
   connector would point at empty space. */
@media (min-width: 1200px) {
  .cp-hiw {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }

  .cp-hiw-step::after {
    content: "";
    position: absolute;
    top: 78px;
    left: calc(100% + 2px);
    width: 20px;
    border-top: 2px dashed color-mix(in srgb, var(--primary) 40%, #fff);
  }

  .cp-hiw-step:last-child::after {
    content: none;
  }
}

/*----------  call to action  ----------*/

.cp-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 30px 34px;
  border-radius: 14px;
  background-color: var(--primary-two);
  color: var(--white);
}

.cp-cta-title {
  font-size: var(--display-5);
  font-weight: 600;
  color: var(--white);
  margin-bottom: 6px;
}

.cp-cta p {
  margin: 0;
  color: var(--light);
  font-size: var(--font-sm);
}

/*----------  responsive  ----------*/

@media (max-width: 1199px) {
  .cp-dossier-body {
    grid-template-columns: 200px minmax(0, 1fr);
  }
  .cp-dossier-head,
  .cp-dossier-main {
    padding-inline: 24px;
  }
}

@media (max-width: 991px) {
  .cp-hero {
    padding-block: 120px 40px;
  }
  .cp-hero-inner,
  .cp-overview {
    grid-template-columns: 1fr;
  }
  .cp-hero-art {
    display: none;
  }
  .cp-panel {
    grid-template-columns: 1fr;
  }
  /* Stacked, there is no card column to fill, so the list sizes itself again */
  .cp-country-list {
    flex: 0 1 auto;
    min-height: 0;
    max-height: 260px;
  }
  .cp-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  /* The rail lies down into a swipeable strip above the open chapter */
  .cp-dossier-body {
    grid-template-columns: 1fr;
  }
  .cp-rail {
    border-right: 0;
    border-bottom: 1px solid var(--border-color);
  }
  .cp-tabs-rail {
    position: static;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .cp-tabs-rail::-webkit-scrollbar {
    display: none;
  }
  .cp-tabs-rail .cp-tab {
    width: auto;
    scroll-snap-align: start;
  }
  .cp-tab-label {
    white-space: nowrap;
  }
  .cp-overview-media {
    height: 220px;
  }
}

@media (max-width: 575px) {
  .cp-section {
    padding-block: 40px 0;
  }
  .cp-section-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .cp-eligibility {
    flex-direction: column;
    align-items: flex-start;
  }
  .cp-details {
    padding: 16px;
  }
  .cp-tab {
    /* two per row, allowing for the 2px grid gap between them */
    min-width: calc(50% - 1px);
    padding: 10px 6px;
    font-size: var(--font-xs);
  }
  /* The dossier keeps its single swipeable row instead */
  .cp-dossier {
    padding: 0;
    border-radius: 14px;
  }
  .cp-tabs-rail .cp-tab {
    min-width: 0;
    padding: 9px 11px;
    font-size: var(--font-sm);
  }
  .cp-dossier-head,
  .cp-dossier-main {
    padding-inline: 18px;
  }
  .cp-dossier-head {
    padding-block: 24px;
  }
  .cp-dossier-main {
    padding-block: 22px 26px;
  }
  .cp-dossier-id {
    gap: 12px;
  }
  .cp-dossier-meta {
    width: 100%;
  }
  .cp-facts {
    width: 100%;
  }
  .cp-fact {
    flex: 1 1 130px;
  }
  .cp-time-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .cp-time-text {
    border-left: 0;
    padding-left: 0;
  }
  .cp-stage::after {
    display: none;
  }
  .cp-visa-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
  .cp-hero-stats {
    gap: 10px 18px;
  }
  .cp-hiw {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 18px;
  }
  .cp-hiw-art-wrap {
    width: 74px;
    height: 74px;
  }
  .cp-hiw-art {
    width: 48px;
    height: 48px;
  }
}

/*----------  header nav breathing room  ----------*/
/* Nine top level items plus the login button run out of room before the
   mobile drawer takes over, so the links tighten up first */
@media (min-width: 992px) and (max-width: 1299px) {
  .header-menu-list > li > a {
    padding: 19px 9px;
    font-size: var(--font-sm);
  }
  .header-menu-list {
    flex-wrap: nowrap;
  }
  .header-menu-list > li > a {
    white-space: nowrap;
  }
}

/*----------  simple header dropdown  ----------*/
/* Used by the Company group. Colours and radius come from the same tokens as
   the mega menu, so both dropdowns stay in step with the admin colour setting. */

.has-sub-menu {
  position: relative;
}

.header-menu-list li.has-sub-menu > .sub-menu-toggle i {
  font-size: 12px;
  margin-left: 2px;
  transition: transform 0.25s;
}

.has-sub-menu.open > .sub-menu-toggle {
  color: var(--primary);
}

.has-sub-menu.open > .sub-menu-toggle i {
  transform: rotate(180deg);
}

.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  padding: 8px;
  border-radius: 12px;
  background-color: var(--bg-white);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
  z-index: 20;
}

.has-sub-menu.open .sub-menu {
  display: block;
}

/* A row, not a block. Some items carry an icon, and <iconify-icon> upgrades to
   a block level custom element once its script runs — which dropped every label
   onto the line below its own icon. Laying the link out as a flex row keeps the
   two side by side whether the icon renders, fails, or has not loaded yet. */
.sub-menu li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--body-color);
  font-size: var(--font-sm);
  line-height: 1.35;
  transition: background-color 0.2s, color 0.2s;
}

/* Sized here rather than left to the icon set, so a missing icon leaves a gap
   the same width as one that loaded and the labels stay in a straight line */
.sub-menu li a > iconify-icon,
.sub-menu li a > i {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: .75;
}

.sub-menu li a:hover {
  background-color: #eef6f5;
  background-color: color-mix(in srgb, var(--primary) 10%, #fff);
  color: var(--primary);
}

.sub-menu li a:hover > iconify-icon,
.sub-menu li a:hover > i {
  opacity: 1;
}

/* A divider between the tiers and the catch-all link below them */
.sub-menu-divider {
  height: 1px;
  margin: 6px 12px;
  background: var(--border-color);
}

.sub-menu-caption {
  padding: 8px 12px 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/*----------  package listing cards  ----------*/

.cp-package-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.cp-package-card .cp-destination-media {
  height: 150px;
  margin-bottom: 14px;
}

.cp-package-card .cp-visa-title,
.cp-package-card .cp-visa-desc,
.cp-package-card .cp-visa-price {
  padding-inline: 16px;
}

.cp-package-card .btn {
  margin: auto 16px 16px;
}

.cp-package-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 0;
  font-size: 34px;
}

@media (max-width: 991px) {
  /* Inside the mobile drawer the group opens inline instead of floating */
  .sub-menu {
    position: static;
    box-shadow: none;
    border-radius: 0;
    padding: 0 0 0 12px;
    min-width: 0;
  }

  /* 44px is the smallest target a thumb hits reliably. A dropdown of nine
     tiers is a list somebody scrolls and taps at speed, so the rows have to
     be worth aiming at rather than merely visible. */
  .sub-menu li a {
    min-height: 44px;
    padding-block: 10px;
  }

  /* An indented rule reads as belonging to the group above it */
  .sub-menu-divider {
    margin-inline: 12px 0;
  }
}

/*=============================================
=     Module pages: tour, hotel, flight       =
=============================================*/
/* The md- prefix is module-agnostic on purpose: the same hero, card row, city
   row, review block and info grid serve all three landing pages. Colours come
   from the :root tokens, so the admin colour picker restyles them too. */

/*----------  breadcrumb  ----------*/

.md-crumb {
  padding-top: 110px;
  font-size: var(--font-sm);
  color: var(--muted);
}

.md-crumb .container {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-block: 14px;
}

.md-crumb a {
  color: var(--muted);
}

.md-crumb a:hover {
  color: var(--primary);
}

.md-crumb i {
  font-size: 10px;
}

.md-crumb .current {
  color: var(--body-color);
  font-weight: 500;
}

/*----------  hero with a search card  ----------*/

.md-hero {
  position: relative;
  padding-block: 60px 70px;
  color: var(--white);
  overflow: hidden;
}

.md-hero-bg {
  position: absolute;
  inset: 0;
}

.md-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.md-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(100deg, rgba(15, 23, 42, 0.88) 0%, rgba(15, 23, 42, 0.62) 55%, rgba(15, 23, 42, 0.3) 100%);
}

.md-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: center;
  gap: 34px;
}

.md-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}

.md-hero-title {
  font-size: var(--display-2);
  font-weight: 600;
  color: var(--white);
  margin-bottom: 12px;
}

.md-hero-sub {
  max-width: 560px;
  color: var(--light);
  margin-bottom: 20px;
}

.md-usp {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: var(--font-sm);
}

.md-usp li,
.md-note-bar span,
.md-cta-usp li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.md-usp i {
  color: var(--primary);
}

/*----------  search card, shared by all three modules  ----------*/

.md-search-card {
  padding: 22px 20px;
  border-radius: 14px;
  background-color: var(--bg-white);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
  color: var(--body-color);
}

.md-card-title {
  font-size: var(--font-xl);
  font-weight: 600;
  margin-bottom: 16px;
}

.md-field {
  display: block;
  margin-bottom: 14px;
}

/* A field whose label has to be a real <label> (because something else in
   the field is also labelled) uses .md-label and reads identically */
.md-field > span,
.md-field > .md-label {
  display: block;
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--body-color);
  margin-bottom: 8px;
}

/* Text-entry controls only. A checkbox in one of these fields is a checkbox,
   not a 100% wide box with a 13px padding. */
.md-field input:not([type="checkbox"]):not([type="radio"]),
.md-field select,
.md-field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--input-border);
  border-radius: 10px;
  background-color: var(--input-bg);
  color: var(--body-color);
  font-family: var(--body-font);
  font-size: var(--font-sm);
  outline: 0;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.md-field input::placeholder,
.md-field textarea::placeholder {
  color: var(--placeholder-color);
}

.md-field input:not([type="checkbox"]):hover,
.md-field select:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--input-border));
}

/* A focus ring rather than a bare border change, so the active field is
   obvious on a page with eighteen of them */
.md-field input:not([type="checkbox"]):focus,
.md-field select:focus,
.md-field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

/* A filled-in-from-the-passport field, so the applicant can see what was read */
.md-field.is-filled input,
.md-field.is-filled select {
  border-color: color-mix(in srgb, var(--success) 55%, #fff);
  background-color: color-mix(in srgb, var(--success) 4%, #fff);
}

.md-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/*----------  why travel strip  ----------*/

.md-why {
  margin-top: -34px;
  position: relative;
  padding: 22px 24px;
  border-radius: 14px;
  background-color: var(--bg-white);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
}

.md-why-title {
  font-size: var(--font-xl);
  font-weight: 600;
  margin-bottom: 16px;
}

.md-why-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.md-why-list li,
.md-include-list li,
.md-info-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-sm);
}

.md-why-icon,
.md-include-icon,
.md-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  font-size: 17px;
  background-color: #eef6f5;
  background-color: color-mix(in srgb, var(--primary) 12%, #fff);
  color: var(--primary);
}

/*----------  card row, used for packages and hotels  ----------*/

.md-card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.md-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  overflow: hidden;
  background-color: var(--surface-bg);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.md-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12);
}

.md-card-media {
  position: relative;
  display: block;
  height: 165px;
  overflow: hidden;
}

.md-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.md-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background-color: var(--primary);
  color: var(--white);
  font-size: var(--font-xs);
  font-weight: 600;
}

.md-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  flex: 1;
}

.md-card-title-sm {
  font-size: var(--font-md);
  font-weight: 600;
  margin: 0;
}

.md-card-title-sm a {
  color: var(--body-color);
}

.md-card-title-sm a:hover {
  color: var(--primary);
}

.md-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: var(--font-xs);
  color: var(--muted);
}

.md-stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--font-xs);
  color: var(--muted);
}

.md-stars i {
  color: #f5a623;
  font-size: 11px;
}

.md-stars strong {
  margin-left: 4px;
  color: var(--body-color);
}

.md-card-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.md-price {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.md-price small {
  font-size: var(--font-xs);
  color: var(--muted);
}

.md-price strong {
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--primary);
}

.md-note-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: 12px;
  background-color: var(--body-bg);
  font-size: var(--font-xs);
  color: var(--muted);
}

.md-note-bar i,
.md-cta-usp i {
  color: var(--primary);
}

/*----------  city row  ----------*/

.md-city-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
}

.md-city {
  display: block;
  color: var(--body-color);
}

.md-city-media {
  display: block;
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 8px;
}

.md-city-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.md-city strong {
  display: block;
  font-weight: 600;
}

.md-city small {
  color: var(--muted);
  font-size: var(--font-xs);
}

/*----------  two column split  ----------*/

.md-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.md-box {
  padding: 22px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background-color: var(--surface-bg);
}

.md-include-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.md-include-list span > strong,
.md-info-list span > strong {
  display: block;
  font-weight: 600;
}

.md-include-list small,
.md-info-list small {
  color: var(--muted);
  font-size: var(--font-xs);
}

.md-addon-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.md-addon-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: var(--font-sm);
}

.md-addon-main strong {
  display: block;
  font-weight: 600;
}

.md-addon-main small {
  color: var(--muted);
  font-size: var(--font-xs);
}

.md-addon-price {
  text-align: right;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}

.md-addon-price small {
  display: block;
  font-weight: 400;
  font-size: var(--font-xs);
  color: var(--muted);
}

/*----------  travel information  ----------*/

.md-info {
  padding: 22px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background-color: var(--surface-bg);
}

.md-info-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
}

/*----------  reviews  ----------*/

.md-reviews {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 20px;
}

.md-review-summary {
  padding: 22px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  text-align: center;
  background-color: var(--surface-bg);
}

.md-review-score {
  display: block;
  font-size: var(--display-2);
  font-weight: 600;
  line-height: 1;
  color: var(--primary);
}

.md-review-label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.md-review-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-block: 14px;
}

.md-review-bars li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
  font-size: var(--font-xs);
  color: var(--muted);
}

.md-review-star i {
  color: #f5a623;
  font-size: 10px;
}

.md-review-bar {
  display: block;
  height: 6px;
  border-radius: 999px;
  background-color: var(--light);
  overflow: hidden;
}

.md-review-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background-color: #f5a623;
}

.md-review-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.md-review {
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background-color: var(--surface-bg);
  font-size: var(--font-sm);
}

.md-review header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.md-review-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--light);
  color: var(--muted);
  flex-shrink: 0;
}

.md-review-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.md-review header strong {
  display: block;
  font-weight: 600;
}

.md-review header small {
  color: var(--muted);
  font-size: var(--font-xs);
}

.md-review-rating {
  margin-left: auto;
  font-weight: 600;
  color: var(--primary);
}

.md-review p {
  margin-bottom: 8px;
  color: var(--body-color);
}

/*----------  call to action  ----------*/

.md-cta {
  position: relative;
  padding: 34px;
}

.md-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.md-cta-usp {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 18px;
  font-size: var(--font-sm);
  color: var(--light);
}

/* The global .btn-light is a translucent ghost button and sets its background
   with !important, so this rule changed the text colour but not the plate
   underneath it: dark text on a barely-lightened dark CTA, about 1.4:1. The CTA
   needs a solid button here - the outline button beside it is already the quiet
   one - so the background is forced back, !important against !important being
   the only thing that reaches it. */
.btn.btn-light {
  background-color: var(--white) !important;
  border-color: var(--white) !important;
  color: var(--primary-two);
}

.btn.btn-light:hover,
.btn.btn-light:focus,
.btn.btn-light:active {
  background-color: color-mix(in srgb, var(--white) 88%, var(--primary-two)) !important;
  border-color: color-mix(in srgb, var(--white) 88%, var(--primary-two)) !important;
  color: var(--primary-two);
}

.btn.btn-outline-light {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: var(--white);
}

/*----------  responsive  ----------*/

@media (max-width: 991px) {
  .md-hero-inner {
    grid-template-columns: 1fr;
  }
  .md-why {
    margin-top: 0;
  }
  .md-reviews {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  .md-crumb {
    padding-top: 95px;
  }
  .md-hero {
    padding-block: 30px 40px;
  }
  .md-card-row,
  .md-city-row {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
  .md-card-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .md-field-row {
    grid-template-columns: 1fr;
  }
}

/*----------  package detail page  ----------*/

.pk-top {
  padding-top: 24px;
}

.pk-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 22px;
  align-items: start;
}

.pk-hero {
  position: relative;
  height: 320px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
}

.pk-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pk-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0) 60%);
}

.pk-hero-caption {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  z-index: 1;
  color: var(--white);
}

.pk-title {
  font-size: var(--display-3);
  font-weight: 600;
  color: var(--white);
  margin-bottom: 8px;
}

.pk-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: var(--font-sm);
}

.pk-facts li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pk-facts .md-stars {
  color: var(--light);
}

.pk-facts .md-stars strong {
  color: var(--white);
}

.pk-feature-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 4px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background-color: var(--surface-bg);
  text-align: center;
}

.pk-feature-strip li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: var(--font-xs);
  color: var(--muted);
}

.pk-feature-strip i {
  font-size: 20px;
  color: var(--primary);
}

/* The package page reads straight down rather than hiding six of its seven
   parts behind a tab. This is the chrome that keeps a long page legible. */

.pk-jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background-color: var(--surface-bg);
}

.pk-jump-label {
  margin-right: 4px;
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pk-jump a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background-color: var(--bg-white);
  color: var(--body-color);
  font-size: var(--font-xs);
  font-weight: 500;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

.pk-jump a i {
  color: var(--primary);
  font-size: 0.95em;
}

.pk-jump a:hover {
  border-color: var(--primary);
  background-color: color-mix(in srgb, var(--primary) 8%, #fff);
  color: var(--primary);
}

.pk-sec {
  margin-bottom: 34px;
  /* Cleared by the fixed header when jumped to from the list above */
  scroll-margin-top: 110px;
}

.pk-sec:last-child {
  margin-bottom: 0;
}

.pk-sec-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 14px;
}

.pk-sec-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background-color: color-mix(in srgb, var(--primary) 10%, #fff);
  color: var(--primary);
  font-size: 1.15rem;
}

.pk-sec-title {
  margin: 0;
  font-size: var(--font-xl);
  font-weight: 600;
  line-height: 1.3;
}

.pk-sec-head small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--font-sm);
}

@media (max-width: 575px) {
  .pk-jump {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .pk-jump::-webkit-scrollbar {
    display: none;
  }

  .pk-jump a,
  .pk-jump-label {
    white-space: nowrap;
  }

  .pk-sec-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
}

.pk-quick-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.pk-quick-facts li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-sm);
}

.pk-quick-facts strong {
  display: block;
  font-weight: 600;
}

.pk-quick-facts small {
  color: var(--muted);
  font-size: var(--font-xs);
}

.pk-exclude i {
  color: var(--danger);
}

/*----------  itinerary timeline  ----------*/

.pk-day {
  display: grid;
  grid-template-columns: 76px 70px minmax(0, 1fr) 110px;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
}

.pk-day:last-child {
  border-bottom: 0;
}

.pk-day-media {
  display: block;
  height: 58px;
  border-radius: 10px;
  overflow: hidden;
}

.pk-day-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A day the agency has not photographed yet */
.pk-day-media.is-plain {
  display: grid;
  place-items: center;
  border: 1px solid var(--border-color);
  background-color: color-mix(in srgb, var(--primary) 6%, #fff);
  color: var(--primary);
  font-size: 1.25rem;
}

.pk-day-no {
  font-weight: 600;
  color: var(--primary);
  font-size: var(--font-sm);
}

.pk-day-body strong,
.pk-day-side strong {
  display: block;
  font-weight: 600;
  font-size: var(--font-sm);
}

.pk-day-body small,
.pk-day-side small {
  color: var(--muted);
  font-size: var(--font-xs);
}

.pk-day-side {
  text-align: right;
}

/*----------  booking sidebar  ----------*/

.pk-side {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pk-book {
  padding: 20px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background-color: var(--surface-bg);
}

/*----------  departures, extras and the offer  ----------*/
/* Flat colour only: one tint, one border, no gradients. */

.pk-offer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -6px 0 12px;
}

.pk-offer-was {
  color: var(--muted);
  font-size: var(--font-sm);
  text-decoration: line-through;
}

.pk-offer-tag {
  padding: 3px 10px;
  border-radius: 999px;
  background-color: var(--primary);
  color: var(--white);
  font-size: var(--font-xs);
  font-weight: 700;
}

/* Section label inside the booking box */
.pk-side-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 18px 0 10px;
  font-size: var(--font-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pk-side-label em {
  color: var(--muted);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* One departure. The agency sets these; a traveller picks between them. */
.pk-depart {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  margin-bottom: 8px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.18s, background-color 0.18s;
}

.pk-depart:hover {
  border-color: var(--primary);
}

.pk-depart:has(input:checked) {
  border-color: var(--primary);
  background-color: color-mix(in srgb, var(--primary) 6%, #fff);
}

/* Nothing left to book, so it reads as unavailable rather than clickable */
.pk-depart.is-full {
  opacity: 0.55;
  cursor: not-allowed;
}

.pk-depart.is-full:hover {
  border-color: var(--border-color);
}

.pk-depart input {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--primary);
}

.pk-depart-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.pk-depart-body strong {
  font-size: var(--font-sm);
  font-weight: 600;
}

.pk-depart-body small {
  color: var(--muted);
  font-size: var(--font-xs);
}

.pk-depart-seats {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--success) 12%, #fff);
  color: var(--success);
  font-size: var(--font-xs);
  font-weight: 600;
}

.pk-depart-seats.is-low {
  background-color: color-mix(in srgb, var(--warning) 16%, #fff);
  color: #9a6700;
}

.pk-depart-seats.is-none {
  background-color: color-mix(in srgb, var(--danger) 12%, #fff);
  color: var(--danger);
}

/* Extra services, each with its own price */
.pk-extra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  margin-bottom: 8px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.18s, background-color 0.18s;
}

.pk-extra:hover,
.pk-extra:has(input:checked) {
  border-color: var(--primary);
}

.pk-extra:has(input:checked) {
  background-color: color-mix(in srgb, var(--primary) 6%, #fff);
}

.pk-extra input {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--primary);
}

.pk-extra-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.pk-extra-body strong {
  font-size: var(--font-sm);
  font-weight: 600;
}

.pk-extra-body small {
  color: var(--muted);
  font-size: var(--font-xs);
}

.pk-extra-price {
  flex-shrink: 0;
  color: var(--primary);
  font-size: var(--font-sm);
  font-weight: 700;
}

/* What happens after payment, said before payment */
.pk-pending-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 0;
  padding: 11px 13px;
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--primary) 6%, #fff);
  color: var(--muted);
  font-size: var(--font-xs);
  line-height: 1.6;
}

.pk-pending-note i {
  color: var(--primary);
  margin-top: 2px;
}

.pk-from {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  margin-bottom: 4px;
}

.pk-from small {
  font-size: var(--font-xs);
  color: var(--muted);
}

.pk-from strong {
  font-size: var(--display-4);
  font-weight: 600;
  color: var(--primary);
}

.pk-free {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-block: 12px;
  font-size: var(--font-sm);
  color: var(--success);
}

.pk-counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: var(--font-sm);
}

.pk-counter small {
  color: var(--muted);
  font-size: var(--font-xs);
}

.pk-counter-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pk-counter-controls button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: var(--bg-white);
  color: var(--body-color);
  font-size: 16px;
  line-height: 1;
}

.pk-counter-controls button:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.pk-counter-controls input {
  width: 44px;
  height: 30px;
  text-align: center;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: var(--input-bg);
  color: var(--body-color);
  font-size: var(--font-sm);
  -moz-appearance: textfield;
}

.pk-counter-controls input::-webkit-outer-spin-button,
.pk-counter-controls input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pk-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-block: 16px;
  font-size: var(--font-sm);
}

.pk-summary li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
}

.pk-summary li span:last-child {
  color: var(--body-color);
}

.pk-summary .pk-total {
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--body-color);
}

.pk-summary .pk-total span:last-child {
  color: var(--primary);
}

.pk-trust {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background-color: var(--surface-bg);
  font-size: var(--font-sm);
}

.pk-trust li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pk-trust i {
  color: var(--primary);
}

@media (max-width: 1199px) {
  /* minmax(0, 1fr), not 1fr. A bare 1fr is minmax(auto, 1fr), so the column
     refuses to shrink below the widest thing inside it — and one wide child
     was stretching the whole page to 1067px on a 360px phone. */
  .pk-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .pk-side {
    position: static;
  }

  /* Grid and flex children default to min-width:auto, which is what let the
     overflow through in the first place */
  .pk-layout > .pk-main,
  .pk-layout > .pk-side {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .pk-hero {
    height: 220px;
  }
  .pk-day {
    grid-template-columns: 60px minmax(0, 1fr);
    row-gap: 6px;
  }
  .pk-day-no {
    grid-column: 2;
  }
  .pk-day-body,
  .pk-day-side {
    grid-column: 2;
    text-align: left;
  }
}

/*----------  solid header for module pages  ----------*/
/* The stock header floats over a dark hero. Module pages open on a light
   breadcrumb bar instead, so they opt into a solid header and drop the offset
   the floating version needs. */

/* Sticky, not relative. The scroll handler adds .header-fixed to switch the
   header to position: fixed, but this rule out-specifies that one, so on every
   module page the header simply scrolled away and never came back. Sticky
   fixes it without the jump fixed would cause: the header sits in the flow
   here, so pulling it out would yank the page up by its own height. */
body.has-solid-header .header-section {
  position: sticky;
  top: 0;
  z-index: 12;
  background-color: var(--primary-two);
}

/* The header is in the flow here, so when the contact bar collapses the page
   gets shorter and scroll anchoring pulls the scroll position up to match —
   which is what set the header oscillating between its two states. The collapse
   is a deliberate, animated change, so the browser is told to leave the scroll
   position where the reader put it. */
body.has-solid-header {
  overflow-anchor: none;
}

/* The contact bar still gets out of the way once you start reading, but it
   collapses rather than vanishing, so nothing snaps */
body.has-solid-header .header-top-part {
  overflow: hidden;
  max-height: 80px;
  transition: max-height 0.3s ease, opacity 0.25s ease;
}

/* overflow:hidden is what lets the bar collapse, but it was also slicing the
   language and currency menus down to the height of the bar. The bar only has
   to clip while it is collapsing, so it opens up while a menu inside it is
   showing.

   Two selectors for one job: the class is set by JS and always works, :has()
   covers the frame before the event fires. */
body.has-solid-header .header-top-part.has-open-switcher,
body.has-solid-header .header-top-part:has(.switcher .dropdown-menu.show) {
  overflow: visible;
}

body.has-solid-header .header-section.header-fixed .header-top-part {
  display: block;
  max-height: 0;
  opacity: 0;
}

/* fadeInDown slides the header down from above; on a sticky header that reads
   as a glitch, since it never left */
body.has-solid-header .header-section.animated {
  animation: none;
}

body.has-solid-header .md-crumb {
  padding-top: 0;
}

/* Media wells get the same soft gradient as the destination cards, so a flag
   fallback reads as a banner rather than a raw flag */
.md-card-media,
.md-city-media,
.md-hero-bg {
  background-color: var(--body-bg);
}

.md-card-media::after,
.md-city-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, rgba(15, 23, 42, 0.5), rgba(15, 23, 42, 0));
  pointer-events: none;
}

.md-city-media {
  position: relative;
}

/*----------  flight search and results  ----------*/

.fl-hero-inner {
  grid-template-columns: minmax(0, 1fr) 420px;
}

/* The flight search used to be a dark panel floating on a hero. It is now the
   same white card the hotel page uses (.md-searchbar), so only the pieces that
   are still on screen — the trip pills and the swap button — are styled, and
   they live with the search bar rules further down. */

.fl-route {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  align-items: end;
  gap: 6px;
}

.fl-swap {
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  margin-inline: auto;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background-color: var(--bg-white);
  color: var(--primary);
}

.fl-swap:hover {
  border-color: var(--primary);
}

/*----------  trust strip  ----------*/

.fl-trust,
.fl-save-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background-color: var(--surface-bg);
}

.fl-trust li,
.fl-save-row li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-sm);
}

.fl-trust strong,
.fl-save-row strong {
  display: block;
  font-weight: 600;
}

.fl-trust small,
.fl-save-row small {
  color: var(--muted);
  font-size: var(--font-xs);
}

/*----------  result header  ----------*/

.fl-result-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}

.fl-sort {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--font-sm);
}

.fl-sort select {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background-color: var(--input-bg);
  color: var(--body-color);
  font-size: var(--font-sm);
}

/*----------  layout  ----------*/

.fl-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.fl-filters {
  position: sticky;
  top: 96px;
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background-color: var(--surface-bg);
}

.fl-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.fl-filter-group {
  padding-block: 14px;
  border-top: 1px solid var(--border-color);
}

.fl-filter-title {
  font-size: var(--font-sm);
  font-weight: 600;
  margin-bottom: 10px;
}

.fl-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-block: 5px;
  font-size: var(--font-sm);
  cursor: pointer;
}

.fl-check span {
  flex: 1;
}

.fl-check em {
  font-style: normal;
  color: var(--muted);
  font-size: var(--font-xs);
}

/* The global form reset strips appearance from every input, which leaves a
   checkbox as a 0x0 nothing — the filters looked like a list of labels with no
   way to see what was ticked. These get their box back. */
.fl-check input[type="checkbox"],
.fl-check input[type="radio"],
.hr-check input[type="checkbox"],
.hr-check input[type="radio"] {
  -webkit-appearance: auto;
  appearance: auto;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: var(--primary);
}

.fl-range {
  width: 100%;
  accent-color: var(--primary);
}

.fl-range-value {
  display: block;
  text-align: right;
  font-size: var(--font-xs);
  color: var(--muted);
}

/* Destinations on the catalogue-wide list. Links rather than checkboxes: each
   country has a page of its own worth landing on. */
.fl-destination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-block: 6px;
  color: var(--body-color);
  font-size: var(--font-sm);
}

.fl-destination:hover {
  color: var(--primary);
}

.fl-destination em {
  font-style: normal;
  color: var(--muted);
  font-size: var(--font-xs);
}

.fl-pagination {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}

.fl-pagination .pagination {
  margin-bottom: 0;
}

/* Typed rather than dragged. A slider always submits a number, so a filter
   submit silently hid everything above wherever the handle happened to sit;
   an empty box means "any price" and hides nothing. */
.fl-price-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--input-border);
  border-radius: 10px;
  background-color: var(--bg-white);
  color: var(--body-color);
  font-family: var(--body-font);
  font-size: var(--font-sm);
  outline: 0;
}

.fl-price-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

/*----------  flight cards  ----------*/

.fl-results {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fl-card {
  border: 1px solid var(--border-color);
  border-radius: 14px;
  overflow: hidden;
  background-color: var(--surface-bg);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.fl-card:hover,
.fl-card.is-featured {
  border-color: var(--primary);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.fl-card-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 16px;
  background-color: #eef6f5;
  background-color: color-mix(in srgb, var(--primary) 10%, #fff);
  font-size: var(--font-xs);
  color: var(--muted);
}

.fl-card-badge span {
  padding: 3px 9px;
  border-radius: 999px;
  background-color: var(--primary);
  color: var(--white);
  font-weight: 600;
}

.fl-card-body {
  display: grid;
  grid-template-columns: 165px minmax(0, 1fr) 150px 170px;
  align-items: center;
  gap: 14px;
  padding: 16px;
}

.fl-airline {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fl-airline img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.fl-airline-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #eef6f5;
  background-color: color-mix(in srgb, var(--primary) 12%, #fff);
  color: var(--primary);
  flex-shrink: 0;
}

.fl-airline strong {
  display: block;
  font-size: var(--font-sm);
  font-weight: 600;
}

.fl-airline small,
.fl-path small,
.fl-time small {
  color: var(--muted);
  font-size: var(--font-xs);
}

.fl-leg {
  display: flex;
  align-items: center;
  gap: 14px;
}

.fl-time {
  text-align: center;
}

.fl-time strong {
  display: block;
  font-size: var(--font-lg);
  font-weight: 600;
}

.fl-path {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.fl-line {
  position: relative;
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--border-color);
}

.fl-line::before,
.fl-line::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--primary);
}

.fl-line::before {
  left: 0;
}

.fl-line::after {
  right: 0;
}

.fl-bags {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: var(--font-xs);
  color: var(--body-color);
}

.fl-bags i {
  color: var(--muted);
  margin-right: 4px;
}

.fl-bags small {
  color: var(--muted);
}

.fl-refund {
  color: var(--success);
}

.fl-refund i {
  color: var(--success);
}

.fl-price {
  text-align: right;
}

.fl-price strong {
  display: block;
  font-size: var(--display-5);
  font-weight: 600;
  color: var(--primary);
}

.fl-price small {
  display: block;
  color: var(--muted);
  font-size: var(--font-xs);
}

.fl-price .fl-total {
  margin-bottom: 8px;
}

.fl-return-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0 0;
  font-size: var(--font-sm);
  color: var(--warning, #b76e00);
}

/* What the second leg of a round trip costs, said on the card rather than
   discovered at checkout */
.fl-price .fl-return-leg {
  margin-bottom: 4px;
  color: var(--muted);
  line-height: 1.5;
}

.fl-price .fl-return-leg.is-missing {
  color: var(--warning, #b76e00);
}

/*----------  airline row  ----------*/

.fl-airline-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.fl-airline-row li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background-color: var(--surface-bg);
  font-size: var(--font-sm);
}

.fl-airline-row img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/*----------  responsive  ----------*/

@media (max-width: 1199px) {
  .fl-hero-inner {
    grid-template-columns: 1fr;
  }
  .fl-layout {
    grid-template-columns: 1fr;
  }
  .fl-filters {
    position: static;
  }
  .fl-card-body {
    grid-template-columns: 150px minmax(0, 1fr) 150px;
  }
  .fl-price {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    text-align: right;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
  }
  .fl-price .fl-total {
    margin-bottom: 0;
  }
}

@media (max-width: 767px) {
  .fl-card-body {
    grid-template-columns: 1fr;
  }
  .fl-bags {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
  }
  .fl-result-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .fl-route {
    grid-template-columns: 1fr;
  }
  .fl-swap {
    margin: 0 0 12px auto;
  }
}

/*----------  hotel country search bar  ----------*/

/*==========  Module banner  ==========
  The shared .breadcrumbs strip, dressed for the pages that open on a search:
  taller, lit from one side, and ending in a fade so the white card below
  looks like it is resting on the photograph rather than cutting it off.    */

.bc-hero {
  padding-top: 190px;
  padding-bottom: 104px;
  background-position: center 35%;
  overflow: hidden;
}

/* Diagonal rather than straight down, so the headline sits in the dark half
   and the photograph still reads on the other side */
.bc-hero::before {
  background: linear-gradient(100deg,
      rgba(9, 16, 43, 0.94) 0%,
      rgba(9, 16, 43, 0.78) 38%,
      rgba(9, 16, 43, 0.32) 72%,
      rgba(9, 16, 43, 0.12) 100%);
}

/* The fade the search card lands on */
.bc-hero::after {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  bottom: 0;
  height: 190px;
  background: linear-gradient(to bottom, rgba(9, 16, 43, 0) 0%, rgba(9, 16, 43, 0.55) 100%);
  z-index: -1;
  pointer-events: none;
}

.bc-hero-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 30px;
}

.bc-hero-text {
  max-width: 640px;
}

/* Small badge above the headline */
.bc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: var(--font-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.bc-eyebrow i {
  color: var(--primary);
}

.bc-hero .bc-title {
  margin-bottom: 10px;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
}

.bc-sub {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--font-md);
  line-height: 1.6;
}

/* Three facts about the page, in the banner rather than buried in the list */
.bc-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.bc-stats li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: var(--font-xs);
}

.bc-stats strong {
  font-size: var(--font-sm);
  font-weight: 700;
}

/* The banner's list styling puts a slash after every <li>, which belongs to the
   crumbs and to nothing else in here */
.bc-hero .bc-stats li::after {
  content: none;
}

.bc-stats i {
  color: var(--primary);
  font-size: 15px;
}

/* Crumbs as one quiet pill, so they never compete with the headline */
.bc-hero .bc-crumb {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background-color: rgba(9, 16, 43, 0.35);
  backdrop-filter: blur(6px);
  font-size: var(--font-xs);
}

.bc-hero .bc-crumb li {
  color: rgba(255, 255, 255, 0.72);
}

.bc-hero .bc-crumb li:last-child {
  color: #fff;
  font-weight: 600;
}

.bc-hero .bc-crumb a {
  color: rgba(255, 255, 255, 0.72);
}

.bc-hero .bc-crumb a:hover {
  color: #fff;
}

.bc-hero .bc-crumb li::after {
  padding-inline: 8px;
  opacity: 0.5;
}

@media (max-width: 991px) {
  .bc-hero {
    padding-top: 150px;
    padding-bottom: 86px;
  }
  .bc-hero-inner {
    align-items: flex-start;
  }
}

@media (max-width: 575px) {
  .bc-stats li {
    flex: 1 1 100%;
  }
}

/* One card, lifted so it straddles the banner and the list below it. The
   search sits between the two rather than filling a screen of its own, which
   is what puts the hotels themselves directly under the breadcrumb. */
.md-searchbar {
  position: relative;
  z-index: 2;
  margin-top: -58px;
  padding: 22px 26px 26px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  background-color: var(--bg-white);
  box-shadow: 0 24px 60px -20px rgba(9, 16, 43, 0.45), 0 2px 10px rgba(15, 23, 42, 0.06);
}

/* A hairline of brand colour along the top edge */
.md-searchbar::before {
  position: absolute;
  content: "";
  top: 0;
  left: 26px;
  right: 26px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 35%, transparent));
}

/* The hotels start right under the search, so the usual section gap would only
   push the first card off the fold */
.md-searchbar-wrap + .cp-section {
  padding-top: 30px;
}

.md-searchbar-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  margin-bottom: 18px;
}

.md-searchbar-head h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: var(--font-lg);
}

/* The heading gets a mark beside it, so the card reads as part of the banner
   rather than a form that happens to be there. A real element rather than a
   CSS codepoint, so the icon set stays the single source of the glyph. */
.md-searchbar-head h3 .md-searchbar-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 11px;
  background-color: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  font-size: 18px;
}

.md-searchbar-usp {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: var(--font-xs);
}

.md-searchbar-usp li {
  display: inline-flex;
  align-items: center;
}

.md-searchbar-usp i {
  margin-right: 6px;
  color: var(--success, #2e9c48);
}

/* Field labels a shade quieter and the inputs a shade taller, so the row of
   them reads as one search bar rather than five separate boxes */
.md-searchbar .hr-field > span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.md-searchbar .hr-field input,
.md-searchbar .hr-field select {
  height: 46px;
  border-radius: 12px;
  background-color: var(--surface-bg-soft, #f8fafc);
}

.md-searchbar .hr-field input:focus,
.md-searchbar .hr-field select:focus {
  background-color: var(--bg-white);
}

.md-searchbar-fields .btn {
  border-radius: 12px;
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--primary) 70%, transparent);
}

/* Destination gets the room it needs; the rest share what is left, and the
   button keeps the height of the inputs it sits beside */
.md-searchbar-fields {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 0.9fr 0.9fr auto;
  align-items: end;
  gap: 12px;
}

.md-searchbar-fields .hr-field {
  flex: none;
}

.md-searchbar-fields .btn {
  height: 46px;
  padding-inline: 26px;
  white-space: nowrap;
}

/* Flights carry one field more than hotels, and the swap button sits between
   the two airports rather than in a column of its own */
.fl-searchbar-fields {
  grid-template-columns: 1.3fr 38px 1.3fr 1fr 1fr 0.9fr 1fr auto;
  gap: 10px;
}

.fl-searchbar-fields .fl-swap {
  margin: 0 0 3px;
}

/* One way asks for no return date, and the column it held goes with it */
.fl-search.is-oneway [data-role="return-field"] {
  display: none;
}

.fl-search.is-oneway .fl-searchbar-fields {
  grid-template-columns: 1.4fr 38px 1.4fr 1.1fr 1fr 1.1fr auto;
}

/* Two pills rather than two dark bars, because the card is white now */
.md-searchbar .fl-trip-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background-color: var(--surface-bg-two, rgba(15, 23, 42, 0.05));
}

.md-searchbar .fl-trip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background-color: transparent;
  color: var(--muted);
  font-size: var(--font-sm);
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.md-searchbar .fl-trip.active {
  background-color: var(--primary);
  color: #fff;
}

@media (max-width: 1399px) {
  .fl-searchbar-fields,
  .fl-search.is-oneway .fl-searchbar-fields {
    grid-template-columns: 1fr 38px 1fr 1fr 1fr;
  }
  .fl-searchbar-fields .btn {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .fl-searchbar-fields,
  .fl-search.is-oneway .fl-searchbar-fields {
    grid-template-columns: 1fr 38px 1fr;
  }
  .fl-searchbar-fields > .hr-field:nth-child(n + 4) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1199px) {
  .md-searchbar-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md-searchbar-fields .btn {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .md-searchbar {
    margin-top: -30px;
    padding: 18px;
  }
  .md-searchbar-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md-searchbar-fields .hr-field:first-child {
    grid-column: 1 / -1;
  }
}

/*----------  hotel list and property  ----------*/

.ht-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.14);
  font-size: var(--font-xs);
  font-weight: 600;
}

.ht-offer {
  margin-top: 22px;
  flex-wrap: wrap;
}

.ht-offer-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-sm);
  color: var(--muted);
}

.ht-offer-note i {
  color: var(--success);
}

/* Card layout: photo, details, and the score/price rail */
.ht-card {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 190px;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background-color: var(--surface-bg);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ht-card:hover {
  border-color: var(--primary);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.ht-card-media {
  position: relative;
  display: block;
  height: 165px;
  border-radius: 12px;
  overflow: hidden;
}

.ht-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ht-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ht-stars i {
  color: #f5a623;
  font-size: 11px;
}

.ht-amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.ht-amenities li,
.ht-amenities em {
  padding: 3px 9px;
  border-radius: 999px;
  background-color: var(--body-bg);
  color: var(--muted);
  font-size: var(--font-xs);
  font-style: normal;
}

.ht-free {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  font-size: var(--font-xs);
  color: var(--success);
}

.ht-card-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding-left: 16px;
  border-left: 1px solid var(--border-color);
  text-align: right;
}

.ht-score strong {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 8px;
  background-color: var(--primary);
  color: var(--white);
  font-weight: 600;
}

.ht-score small {
  display: block;
  font-size: var(--font-xs);
}

.ht-price strong {
  display: block;
  font-size: var(--display-5);
  font-weight: 600;
  color: var(--primary);
}

.ht-price small {
  display: block;
  color: var(--muted);
  font-size: var(--font-xs);
}

/*----------  room rows  ----------*/

.ht-room {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
}

.ht-room:last-child {
  border-bottom: 0;
}

.ht-room-main strong {
  display: block;
  font-weight: 600;
}

.ht-room-main small {
  display: block;
  color: var(--muted);
  font-size: var(--font-xs);
  margin-bottom: 6px;
}

.ht-room-price {
  text-align: right;
  white-space: nowrap;
}

.ht-room-price strong {
  display: block;
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--primary);
}

.ht-room-price small {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: var(--font-xs);
}

@media (max-width: 991px) {
  .ht-card {
    grid-template-columns: 190px minmax(0, 1fr);
  }
  .ht-card-side {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-left: 0;
    padding-top: 12px;
    border-left: 0;
    border-top: 1px solid var(--border-color);
  }
}

@media (max-width: 575px) {
  .ht-card {
    grid-template-columns: 1fr;
  }
  .ht-room {
    flex-direction: column;
    align-items: flex-start;
  }
  .ht-room-price {
    text-align: left;
  }
}

/*=============================================
=   Apply flow, shared by all four modules    =
=============================================*/
/* One layout serves visa, tour, flight and hotel. Only the fields inside it
   change, which is why the classes are module agnostic. */

.ap-page {
  padding-top: 22px;
}

/*----------  stepper  ----------*/

.ap-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding: 14px 18px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background-color: var(--surface-bg);
  font-size: var(--font-sm);
  color: var(--muted);
}

.ap-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ap-steps li + li::before {
  content: "";
  width: 26px;
  height: 1px;
  margin-right: 10px;
  background-color: var(--border-color);
}

.ap-steps span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--light);
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 600;
}

.ap-steps .is-current {
  color: var(--body-color);
  font-weight: 600;
}

.ap-steps .is-current span {
  background-color: var(--primary);
  color: var(--white);
}

.ap-steps .is-done span {
  background-color: var(--success);
  color: var(--white);
}

/*----------  layout  ----------*/

.ap-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 20px;
  align-items: start;
}

.ap-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ap-box {
  padding: 22px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background-color: var(--surface-bg);
}

.ap-box-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-xl);
  font-weight: 600;
  margin-bottom: 16px;
}

.ap-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #eef6f5;
  background-color: color-mix(in srgb, var(--primary) 12%, #fff);
  color: var(--primary);
  font-size: var(--font-sm);
  font-weight: 600;
}

.ap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px 22px;
}

.ap-grid .md-field {
  margin-bottom: 0;
}

.ap-span-2 {
  grid-column: span 2;
}

.ap-hint {
  margin-top: 4px;
  font-size: var(--font-xs);
  color: var(--muted);
}

.ap-req,
.ap-opt {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  vertical-align: 1px;
}

.ap-req {
  background-color: #fdecef;
  background-color: color-mix(in srgb, var(--danger) 10%, #fff);
  color: var(--danger);
}

.ap-opt {
  background-color: var(--light);
  color: var(--muted);
}

/*----------  document upload  ----------*/

.ap-doc {
  padding: 16px;
  margin-bottom: 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

/* The passport drives the whole form, so it reads as the primary action */
.ap-doc.is-primary {
  border-color: var(--primary);
  background-color: #f7fbfb;
  background-color: color-mix(in srgb, var(--primary) 4%, #fff);
}

.ap-doc-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.ap-doc-icon,
.ap-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  font-size: 19px;
  background-color: #eef6f5;
  background-color: color-mix(in srgb, var(--primary) 12%, #fff);
  color: var(--primary);
}

.ap-doc-text strong {
  display: block;
  font-weight: 600;
}

.ap-doc-text small,
.ap-item small {
  display: block;
  color: var(--muted);
  font-size: var(--font-xs);
}

.ap-spec {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background-color: var(--body-bg);
  font-size: var(--font-xs);
  color: var(--muted);
}

.ap-spec li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ap-spec i {
  color: var(--primary);
}

.ap-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 22px 16px;
  border: 1px dashed var(--border-color);
  border-radius: 12px;
  background-color: var(--bg-white);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.ap-drop:hover,
.ap-drop:focus,
.ap-drop.is-over {
  border-color: var(--primary);
  background-color: #f6fbfa;
  background-color: color-mix(in srgb, var(--primary) 6%, #fff);
}

.ap-drop i {
  font-size: 26px;
  color: var(--primary);
}

.ap-drop-title {
  font-size: var(--font-sm);
  font-weight: 600;
}

.ap-drop-hint {
  font-size: var(--font-xs);
  color: var(--muted);
}

.ap-file {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  padding: 9px 12px;
  border-radius: 10px;
  background-color: var(--body-bg);
  font-size: var(--font-sm);
}

.ap-file span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ap-file-clear {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
}

.ap-file-clear:hover {
  color: var(--danger);
}

/*----------  scan feedback  ----------*/

.ap-scan-status,
.ap-scan-ok,
.ap-scan-warn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: var(--font-sm);
}

.ap-scan-status {
  background-color: var(--body-bg);
  color: var(--muted);
}

.ap-scan-ok {
  background-color: #eaf7ef;
  background-color: color-mix(in srgb, var(--success) 12%, #fff);
  color: var(--success);
}

.ap-scan-warn {
  background-color: #fff6e6;
  background-color: color-mix(in srgb, var(--warning) 14%, #fff);
  color: #9a6100;
}

.ds-spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid var(--border-color);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: ds-spin 0.7s linear infinite;
}

@keyframes ds-spin {
  to {
    transform: rotate(360deg);
  }
}

/* A field filled by the scanner is highlighted briefly so the customer sees
   what changed, and any field whose check digit failed stays flagged */
.md-field.is-filled input,
.md-field.is-filled select {
  border-color: var(--success);
  background-color: #f4fbf6;
  background-color: color-mix(in srgb, var(--success) 6%, #fff);
}

.md-field.is-unverified input {
  border-color: var(--warning);
  background-color: #fffaf0;
}

/* The passport answered this one. Tinted so the applicant can see which
   values were read for them, but still an ordinary editable box, because an
   OCR misread has to be correctable. */
.md-field.is-fromdoc input,
.md-field.is-fromdoc select {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border-color));
  background-color: color-mix(in srgb, var(--primary) 5%, #fff);
}

.ap-fromdoc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--primary) 12%, #fff);
  color: var(--primary);
  font-size: var(--font-xs);
  font-style: normal;
  font-weight: 600;
}

/* Waiting on the visa types for a newly picked destination */
.md-field.is-busy {
  opacity: 0.55;
  pointer-events: none;
}

.md-field.is-invalid input {
  border-color: var(--danger);
}

.ap-field-note {
  margin-top: 4px;
  font-size: var(--font-xs);
  color: #9a6100;
}

/*----------  guest or account  ----------*/

.ap-choice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.ap-choice-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.ap-choice-card.is-active {
  border-color: var(--primary);
  background-color: #f7fbfb;
  background-color: color-mix(in srgb, var(--primary) 5%, #fff);
}

.ap-choice-card i {
  font-size: 22px;
  color: var(--primary);
}

.ap-choice-card small {
  color: var(--muted);
  font-size: var(--font-xs);
}

.ap-choice-card .btn {
  align-self: flex-start;
  margin-top: 6px;
}

/*----------  summary  ----------*/

.ap-side {
  position: sticky;
  top: 96px;
}

.ap-summary {
  padding: 20px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background-color: var(--surface-bg);
}

.ap-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}

.ap-item strong {
  display: block;
  font-weight: 600;
}

.ap-country {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  font-size: var(--font-sm);
}

.ap-lines {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-block: 16px;
  font-size: var(--font-sm);
}

.ap-lines li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
}

.ap-lines li span:last-child {
  color: var(--body-color);
}

.ap-lines .ap-total {
  padding-top: 11px;
  border-top: 1px solid var(--border-color);
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--body-color);
}

.ap-lines .ap-total span:last-child {
  color: var(--primary);
}

.ap-note {
  margin-bottom: 14px;
  font-size: var(--font-xs);
  color: var(--muted);
}

.ap-trust {
  margin-top: 14px;
  border: 0;
  padding: 0;
  font-size: var(--font-xs);
}

/*----------  gateways  ----------*/

.ap-gateways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.ap-gateway input {
  position: absolute;
  opacity: 0;
}

.ap-gateway-body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ap-gateway input:checked + .ap-gateway-body {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}

.ap-gateway-body img {
  width: 46px;
  height: 34px;
  object-fit: contain;
}

.ap-gateway-body strong {
  display: block;
  font-weight: 600;
  font-size: var(--font-sm);
}

.ap-gateway-body small {
  color: var(--muted);
  font-size: var(--font-xs);
}

/*----------  reference and confirmation  ----------*/

.ap-track {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background-color: var(--body-bg);
}

.ap-track small {
  font-size: var(--font-xs);
  color: var(--muted);
}

.ap-track strong {
  font-size: var(--font-lg);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--primary);
}

.ap-track-lg {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-inline: auto;
  padding: 14px 22px;
}

.ap-track-lg strong {
  font-size: var(--display-4);
}

.ap-done {
  max-width: 620px;
  margin-inline: auto;
  padding: 34px 26px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background-color: var(--surface-bg);
  text-align: center;
}

.ap-done h1 {
  font-size: var(--display-4);
  font-weight: 600;
  margin-block: 14px 6px;
}

.ap-done-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  font-size: 30px;
  background-color: #eaf7ef;
  background-color: color-mix(in srgb, var(--success) 14%, #fff);
  color: var(--success);
}

.ap-track-icon {
  background-color: #eef6f5;
  background-color: color-mix(in srgb, var(--primary) 12%, #fff);
  color: var(--primary);
}

.ap-done-facts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-block: 22px;
  text-align: left;
  font-size: var(--font-sm);
}

.ap-done-facts li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border-color);
}

.ap-done-facts span {
  color: var(--muted);
}

.ap-done-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.ap-done-note {
  margin-top: 16px;
  font-size: var(--font-xs);
}

.btn.btn-outline-primary {
  background-color: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
}

/*----------  tracking  ----------*/

.ap-track-panel {
  max-width: 560px;
  margin-inline: auto;
  padding: 30px 24px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background-color: var(--surface-bg);
  text-align: center;
}

.ap-track-panel h1 {
  font-size: var(--display-4);
  font-weight: 600;
  margin-block: 14px 6px;
}

.ap-track-form {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.ap-track-form input {
  flex: 1;
  padding: 11px 14px;
  border: 1px solid var(--input-border);
  border-radius: 10px;
  background-color: var(--input-bg);
  color: var(--body-color);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  outline: 0;
}

.ap-track-form input:focus {
  border-color: var(--primary);
}

.ap-track-result {
  max-width: 560px;
  margin: 18px auto 0;
}

.ap-track-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}

.ap-track-status strong {
  display: block;
  font-weight: 600;
}

.ap-track-status small {
  color: var(--muted);
  font-size: var(--font-xs);
}

.ap-track-ref {
  margin-left: auto;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--primary);
}

/*----------  responsive  ----------*/

@media (max-width: 1199px) {
  .ap-layout {
    grid-template-columns: 1fr;
  }
  .ap-side {
    position: static;
  }
}

@media (max-width: 575px) {
  .ap-span-2 {
    grid-column: span 1;
  }
  .ap-box {
    padding: 16px;
  }
  .ap-steps {
    font-size: var(--font-xs);
  }
  .ap-steps li + li::before {
    width: 12px;
    margin-right: 4px;
  }
  .ap-track-form {
    flex-direction: column;
  }
}

/*----------  module specific apply blocks  ----------*/

.ap-inline-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 0;
  padding: 11px 14px;
  border-radius: 10px;
  background-color: var(--body-bg);
  font-size: var(--font-sm);
  color: var(--muted);
}

.ap-inline-note i {
  color: var(--primary);
  margin-top: 2px;
}

.ap-inline-note.ap-warn {
  margin: 0;
  background-color: #fff6e6;
  background-color: color-mix(in srgb, var(--warning) 14%, #fff);
  color: #9a6100;
}

.ap-inline-note.ap-warn i {
  color: var(--warning);
}

/*----------  tour: departure picker  ----------*/

.ap-date-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.ap-date input {
  position: absolute;
  opacity: 0;
}

.ap-date > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ap-date input:checked + span {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}

.ap-date strong {
  font-weight: 600;
}

.ap-date small {
  color: var(--muted);
  font-size: var(--font-xs);
}

.ap-date em {
  font-style: normal;
  font-size: var(--font-xs);
  color: var(--success);
}

/*----------  tour: add-ons  ----------*/

.ap-addons {
  display: flex;
  flex-direction: column;
}

.ap-addon {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
}

.ap-addons li:last-child .ap-addon {
  border-bottom: 0;
}

.ap-addon input {
  accent-color: var(--primary);
  width: 17px;
  height: 17px;
}

.ap-addon-body {
  flex: 1;
}

.ap-addon-body strong {
  display: block;
  font-weight: 600;
  font-size: var(--font-sm);
}

.ap-addon-body small {
  color: var(--muted);
  font-size: var(--font-xs);
}

.ap-addon-price {
  text-align: right;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}

.ap-addon-price small {
  display: block;
  font-weight: 400;
  font-size: var(--font-xs);
  color: var(--muted);
}

/*----------  flight: itinerary banner  ----------*/

.ap-flight {
  grid-template-columns: 165px minmax(0, 1fr) 150px;
  padding: 14px;
  margin-bottom: 16px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background-color: var(--body-bg);
}

/*----------  hotel: stay header  ----------*/

.ap-hotel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}

.ap-hotel-head strong {
  display: block;
  font-weight: 600;
}

.ap-hotel-head small {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: var(--font-xs);
}

.ap-stay-facts {
  margin-top: 14px;
  margin-bottom: 0;
}

@media (max-width: 991px) {
  .ap-flight {
    grid-template-columns: 1fr;
  }
}

/*=============================================
=   Apply wizard: banner, step rail, docs     =
=============================================*/

/*----------  destination banner  ----------*/

.aw-hero {
  position: relative;
  padding-block: 34px;
  color: var(--white);
  overflow: hidden;
}

.aw-hero-bg {
  position: absolute;
  inset: 0;
}

.aw-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aw-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(95deg, var(--primary-two) 30%, rgba(15, 23, 42, 0.75) 100%);
}

.aw-hero-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.aw-hero-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--display-4);
  font-weight: 600;
  color: var(--white);
  margin-bottom: 8px;
}

.aw-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--font-sm);
  color: var(--light);
}

.aw-crumb a {
  color: var(--light);
}

.aw-crumb a:hover {
  color: var(--white);
}

.aw-crumb i {
  font-size: 10px;
  opacity: 0.7;
}

.aw-crumb .current {
  color: var(--white);
  font-weight: 500;
}

.aw-ref {
  min-width: 210px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background-color: rgba(15, 23, 42, 0.45);
}

.aw-ref p {
  margin: 0;
}

.aw-ref p + p {
  margin-top: 10px;
}

.aw-ref small {
  display: block;
  font-size: var(--font-xs);
  color: var(--light);
}

.aw-ref strong {
  font-weight: 600;
  letter-spacing: 0.04em;
}

.aw-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--font-sm);
}

.aw-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--warning);
}

/*----------  three column layout  ----------*/

.aw-page {
  padding-top: 24px;
}

.aw-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 260px;
  gap: 20px;
  align-items: start;
}

.aw-rail,
.aw-guide {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.aw-rail-card,
.aw-help,
.aw-guide-card,
.aw-panel {
  padding: 26px 28px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background-color: var(--surface-bg);
  /* A card should sit on the page, not be drawn on it */
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px rgba(16, 24, 40, 0.05);
}

.aw-guide-card {
  padding: 20px 22px;
}

.aw-rail-title {
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border-color);
  font-family: var(--display-font);
  font-size: var(--font-md);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/*----------  step rail  ----------*/

.aw-steps {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.aw-steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  transition: background-color 0.2s ease;
}

/* The connector line between the numbered dots. It fills in behind the
   steps already finished, so progress reads at a glance. */
.aw-steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 31px;
  top: 46px;
  bottom: -4px;
  width: 2px;
  border-radius: 2px;
  background-color: var(--border-color);
}

.aw-steps .is-done:not(:last-child)::before {
  background-color: var(--success);
}

.aw-steps .is-current {
  background-color: #eef6f5;
  background-color: color-mix(in srgb, var(--primary) 9%, #fff);
  box-shadow: inset 3px 0 0 var(--primary);
}

.aw-step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--bg-white);
  border: 2px solid var(--border-color);
  color: var(--muted);
  font-family: var(--display-font);
  font-size: var(--font-sm);
  font-weight: 700;
  z-index: 1;
}

.aw-steps .is-done .aw-step-dot {
  background-color: var(--success);
  border-color: var(--success);
  color: var(--white);
  font-size: var(--font-md);
}

.aw-steps .is-current .aw-step-dot {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  /* A soft halo marks where the applicant actually is */
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 16%, #fff);
}

.aw-step-text strong {
  display: block;
  font-size: var(--font-sm);
  font-weight: 600;
  line-height: 1.35;
}

.aw-step-text small {
  font-size: var(--font-xs);
  color: var(--muted);
}

.aw-steps .is-done .aw-step-text small {
  color: var(--success);
  font-weight: 500;
}

.aw-steps .is-current .aw-step-text strong {
  color: var(--primary);
}

.aw-steps .is-current .aw-step-text small {
  color: var(--primary);
  font-weight: 500;
}

/*----------  help card  ----------*/

.aw-help {
  position: relative;
  overflow: hidden;
  text-align: center;
  border-color: color-mix(in srgb, var(--primary) 22%, #fff);
  background-color: #eef6f5;
  background-image: linear-gradient(
    160deg,
    color-mix(in srgb, var(--primary) 13%, #fff) 0%,
    color-mix(in srgb, var(--primary) 4%, #fff) 100%
  );
}

/* A soft ring behind the icon, so the card has some depth to it */
.aw-help::before {
  content: "";
  position: absolute;
  top: -46px;
  right: -46px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--primary) 10%, transparent);
}

.aw-help-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 12px;
  border-radius: 50%;
  font-size: 26px;
  background-color: var(--bg-white);
  color: var(--primary);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 22%, transparent);
}

.aw-help strong {
  position: relative;
  display: block;
  margin-bottom: 4px;
  font-family: var(--display-font);
  font-size: var(--font-md);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.aw-help small {
  position: relative;
  display: block;
  margin-bottom: 16px;
  font-size: var(--font-xs);
  line-height: 1.6;
  color: var(--muted);
}

.aw-help .btn {
  position: relative;
}

/*----------  main panels  ----------*/

.aw-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.aw-panel-title {
  font-family: var(--display-font);
  font-size: var(--display-4);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.aw-panel-sub {
  margin-bottom: 24px;
  font-size: var(--font-sm);
  line-height: 1.6;
  color: var(--muted);
}

/* When a panel opens with a heading and a figure beside it, the pair gets a
   rule under it so the form below reads as its own block */
.aw-panel-head {
  padding-bottom: 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-color);
}

.aw-panel-head .aw-panel-sub {
  margin-bottom: 0;
}

/*----------  document cards  ----------*/

.aw-doc {
  position: relative;
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.aw-doc:hover {
  border-color: var(--primary);
}

.aw-doc-flag {
  position: absolute;
  top: -9px;
  left: 14px;
  padding: 2px 9px;
  border-radius: 999px;
  background-color: var(--light);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.aw-doc-flag.is-required {
  background-color: #eef6f5;
  background-color: color-mix(in srgb, var(--primary) 14%, #fff);
  color: var(--primary);
}

.aw-doc-body {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 150px;
  align-items: start;
  gap: 14px;
}

.aw-doc.is-compact .aw-doc-body {
  grid-template-columns: 44px minmax(0, 1fr) 210px;
  align-items: center;
}

.aw-doc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 12px;
  font-size: 26px;
  background-color: #eef6f5;
  background-color: color-mix(in srgb, var(--primary) 11%, #fff);
  color: var(--primary);
}

.aw-doc-icon.is-soft {
  width: 44px;
  height: 44px;
  font-size: 18px;
}

.aw-doc-text h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--font-md);
  font-weight: 600;
  margin-bottom: 6px;
}

.aw-doc-text h3 i {
  font-size: 12px;
  color: var(--muted);
}

.aw-doc-text > small {
  color: var(--muted);
  font-size: var(--font-xs);
}

.aw-doc-rules {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: var(--font-xs);
  color: var(--muted);
}

.aw-doc-rules li::before {
  content: "•";
  margin-right: 7px;
  color: var(--primary);
}

.aw-doc-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  font-size: var(--font-xs);
}

.aw-doc-note.is-good {
  color: var(--success);
}

/*----------  upload target  ----------*/

.aw-doc-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 108px;
  border: 1px dashed var(--border-color);
  border-radius: 10px;
  background-color: var(--body-bg);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s, background-color 0.2s;
}

.aw-doc-drop:hover,
.aw-doc-drop:focus,
.aw-doc-drop.is-over {
  border-color: var(--primary);
  background-color: #f6fbfa;
  background-color: color-mix(in srgb, var(--primary) 6%, #fff);
}

.aw-doc-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 22px;
  color: var(--primary);
  overflow: hidden;
  border-radius: 10px;
}

/* Once a file is chosen the thumbnail fills the tile and the tick appears */
.aw-doc-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aw-doc-drop-text {
  position: absolute;
  bottom: 8px;
  font-size: var(--font-xs);
  color: var(--muted);
}

.aw-doc-drop.has-file .aw-doc-drop-text {
  display: none;
}

.aw-doc-tick {
  position: absolute;
  top: -8px;
  right: -8px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--success);
  color: var(--white);
  font-size: 13px;
}

.aw-doc-drop.has-file .aw-doc-tick {
  display: flex;
}

.aw-doc-drop.has-file {
  border-style: solid;
  border-color: var(--success);
}

/* Optional rows use a wide inline button instead of a tile */
.aw-doc-drop.is-inline {
  flex-direction: row;
  gap: 10px;
  height: auto;
  padding: 12px 14px;
}

.aw-doc-drop.is-inline i {
  font-size: 18px;
  color: var(--primary);
}

.aw-doc-drop.is-inline span {
  text-align: left;
}

.aw-doc-drop.is-inline strong {
  display: block;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--body-color);
}

.aw-doc-drop.is-inline small {
  font-size: var(--font-xs);
  color: var(--muted);
}

/*----------  passport fields block  ----------*/

.aw-doc.is-fields {
  border-style: dashed;
}

.aw-fields-title {
  font-size: var(--font-md);
  font-weight: 600;
  margin-bottom: 12px;
}

/*----------  guidance column  ----------*/

.aw-guide-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.aw-guide-head small {
  display: block;
  font-size: var(--font-xs);
  color: var(--muted);
}

.aw-guide-head strong {
  font-size: var(--font-sm);
  font-weight: 600;
}

.aw-guide-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--font-sm);
  font-weight: 600;
  margin-bottom: 8px;
}

.aw-guide-card p:last-child,
.aw-guide-card ul {
  margin: 0;
  font-size: var(--font-xs);
  color: var(--muted);
}

.aw-guide-card ul {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.aw-guide-card ul li::before {
  content: "•";
  margin-right: 7px;
}

.aw-guide-card.is-info {
  border-color: color-mix(in srgb, var(--info) 30%, var(--border-color));
  background-color: color-mix(in srgb, var(--info) 7%, #fff);
}

.aw-guide-card.is-info .aw-guide-title {
  color: var(--info);
}

.aw-guide-card.is-safe {
  border-color: color-mix(in srgb, var(--success) 30%, var(--border-color));
  background-color: color-mix(in srgb, var(--success) 7%, #fff);
}

.aw-guide-card.is-safe .aw-guide-title {
  color: var(--success);
}

.aw-guide-card.is-warn {
  border-color: color-mix(in srgb, var(--warning) 34%, var(--border-color));
  background-color: color-mix(in srgb, var(--warning) 9%, #fff);
}

.aw-guide-card.is-warn .aw-guide-title {
  color: #9a6100;
}

/*----------  cost and actions  ----------*/

.aw-cost .ap-lines {
  margin: 0;
}

.aw-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/*----------  responsive  ----------*/

@media (max-width: 1399px) {
  .aw-layout {
    grid-template-columns: 210px minmax(0, 1fr);
  }
  .aw-guide {
    grid-column: 1 / -1;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .aw-guide-card {
    flex: 1 1 240px;
  }
}

@media (max-width: 991px) {
  .aw-layout {
    grid-template-columns: 1fr;
  }
  .aw-rail {
    position: static;
  }
  .aw-steps {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .aw-steps li:not(:last-child)::before {
    display: none;
  }
  .aw-doc-body {
    grid-template-columns: 52px minmax(0, 1fr);
  }
  .aw-doc-drop {
    grid-column: 1 / -1;
    height: 92px;
  }
}

@media (max-width: 575px) {
  .aw-hero-title {
    font-size: var(--display-5);
  }
  .aw-ref {
    width: 100%;
  }
  .aw-actions {
    flex-direction: column-reverse;
  }
  .aw-actions .btn {
    width: 100%;
  }
}

/*==========  apply wizard — banner extras, traveller rows, national ID  ==========*/

.aw-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--white);
  font-size: var(--font-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.aw-hero-sub {
  max-width: 520px;
  margin-bottom: 10px;
  color: var(--light);
  font-size: var(--font-sm);
}

/*----------  booking summary card  ----------*/

.aw-ref {
  max-width: 320px;
}

.aw-ref-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--white);
  font-weight: 600;
}

.aw-ref-title i {
  font-size: var(--font-xs);
  opacity: 0.7;
}

.aw-ref-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.aw-ref-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-size: var(--font-xs);
}

.aw-ref-list span {
  color: var(--light);
  white-space: nowrap;
}

.aw-ref-list strong {
  color: var(--white);
  font-weight: 500;
  text-align: right;
}

.aw-ref-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--light);
  font-size: var(--font-xs);
}

.aw-ref-total strong {
  color: var(--white);
  font-size: var(--font-lg);
  font-weight: 700;
}

/*----------  headline document card  ----------*/

.aw-doc-body.is-headline {
  grid-template-columns: 62px minmax(0, 1fr);
}

.aw-doc-text h3 em {
  color: var(--muted);
  font-size: var(--font-sm);
  font-style: normal;
  font-weight: 400;
}

/*----------  one row per traveller  ----------*/

.aw-trav {
  position: relative;
  margin-bottom: 10px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
}

.aw-trav.is-open {
  border-color: var(--primary);
}

.aw-trav-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px 34px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background-color: color-mix(in srgb, var(--primary) 4%, #fff);
}

.aw-trav-head > strong {
  font-size: var(--font-sm);
  font-weight: 600;
}

.aw-trav-upload {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border: 1px dashed var(--primary);
  border-radius: 9px;
  background-color: var(--bg-white);
  cursor: pointer;
  transition: all 0.2s ease;
}

.aw-trav-upload:hover,
.aw-trav-upload.is-over {
  background-color: color-mix(in srgb, var(--primary) 8%, #fff);
}

.aw-trav-upload > i {
  color: var(--primary);
  font-size: var(--font-lg);
}

.aw-trav-upload strong {
  display: block;
  font-size: var(--font-xs);
  font-weight: 600;
}

.aw-trav-upload small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.aw-trav-upload.has-file {
  border-style: solid;
  border-color: var(--success);
}

.aw-trav-upload.has-file .aw-doc-tick {
  display: inline-flex;
}

.aw-trav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background-color: var(--bg-white);
  color: var(--muted);
  transition: all 0.2s ease;
}

.aw-trav-toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.aw-trav-toggle i {
  display: inline-block;
  transition: transform 0.2s ease;
}

.aw-trav.is-open .aw-trav-toggle {
  border-color: var(--primary);
  color: var(--primary);
}

/* The plus turns into a close cross once the row is open */
.aw-trav.is-open .aw-trav-toggle i {
  transform: rotate(45deg);
}

.aw-trav-body {
  display: none;
  padding: 14px;
  border-top: 1px solid var(--border-color);
}

.aw-trav.is-open .aw-trav-body {
  display: block;
}

/*----------  optional documents  ----------*/

.aw-optional {
  position: relative;
}

.aw-opt-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 240px;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
}

.aw-opt-row + .aw-opt-row {
  border-top: 1px solid var(--border-color);
}

.aw-opt-text strong {
  display: block;
  font-size: var(--font-sm);
  font-weight: 600;
}

.aw-opt-text small {
  display: block;
  color: var(--muted);
  font-size: var(--font-xs);
}

/*----------  primary guest block  ----------*/

.aw-guest {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}

.aw-guest-title {
  margin-bottom: 12px;
  font-size: var(--font-sm);
  font-weight: 600;
}

.aw-guest-title small {
  color: var(--success);
  font-weight: 400;
}

.aw-guest-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 16px;
  align-items: start;
}

.aw-guest-upload-title {
  margin-bottom: 8px;
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--muted);
}

.aw-doc-drop.is-tall {
  flex-direction: column;
  justify-content: center;
  height: 128px;
  text-align: center;
}

.aw-doc-drop.is-tall > i {
  font-size: 24px;
}

.aw-doc-drop.is-tall strong,
.aw-doc-drop.is-tall small {
  display: block;
}

.aw-doc-drop.is-tall small {
  color: var(--muted);
  font-size: var(--font-xs);
}

.aw-guest-extra {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-color);
}

/*----------  national ID instead of passport  ----------*/

.aw-nid-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--success);
}

.aw-nid-text {
  margin-bottom: 12px;
  color: var(--muted);
  font-size: var(--font-xs);
}

.aw-nid-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.aw-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-sm);
  font-weight: 500;
  cursor: pointer;
}

.aw-switch input {
  display: none;
}

.aw-switch i {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background-color: var(--border-color);
  transition: background-color 0.2s ease;
}

.aw-switch i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--white);
  transition: transform 0.2s ease;
}

.aw-switch input:checked + i {
  background-color: var(--success);
}

.aw-switch input:checked + i::after {
  transform: translateX(18px);
}

.aw-nid-equals {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.aw-nid-equals em {
  color: var(--muted);
  font-style: normal;
}

.aw-nid-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--success) 14%, #fff);
  color: var(--success);
  font-size: var(--font-xs);
  font-weight: 500;
}

.aw-nid-chip.is-alt {
  background-color: color-mix(in srgb, var(--primary) 12%, #fff);
  color: var(--primary);
}

.aw-nid-upload {
  margin-top: 12px;
}

/*----------  guidance ticks and the note bar  ----------*/

.aw-check-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: var(--font-xs);
  color: var(--muted);
}

.aw-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.aw-check-list li::before {
  content: none;
}

.aw-check-list i {
  margin-top: 2px;
  color: var(--success);
}

.aw-note-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  margin-bottom: 14px;
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--warning) 9%, #fff);
  color: var(--dark);
  font-size: var(--font-xs);
}

.aw-note-bar i {
  color: var(--warning);
  font-size: var(--font-md);
}

/*----------  responsive  ----------*/

@media (max-width: 1199px) {
  .aw-guest-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .aw-trav-head,
  .aw-opt-row {
    grid-template-columns: 1fr;
  }
  .aw-trav-toggle {
    position: absolute;
    top: 10px;
    right: 12px;
  }
  .aw-doc-body.is-headline {
    grid-template-columns: 1fr;
  }
  .aw-nid-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 575px) {
  .aw-ref {
    max-width: none;
  }
}

/*==========  guest checkout sidebar on the gateway pages  ==========*/

.aw-pay-title {
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
  font-size: var(--font-md);
  font-weight: 600;
}

.aw-pay-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 12px;
}

.aw-pay-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--font-xs);
}

.aw-pay-list span {
  color: var(--muted);
  white-space: nowrap;
}

.aw-pay-list strong {
  font-weight: 500;
  text-align: right;
  word-break: break-word;
}

.aw-pay-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 11px;
  margin-bottom: 14px;
  border-top: 1px solid var(--border-color);
  color: var(--muted);
  font-size: var(--font-xs);
}

.aw-pay-total strong {
  color: var(--primary);
  font-size: var(--font-lg);
  font-weight: 700;
}

/*==========  typography — prices and figures  ==========*/

/* Money is what a visitor scans for, so it is set in the display face at the
   heaviest weight and with the tabular figures that keep a column aligned. */
.cp-visa-price,
.cp-fee-table td:last-child,
.md-price,
.md-price strong,
.md-addon-price,
.pk-total,
.pk-total strong,
.fl-price,
.fl-price strong,
.fl-total,
.fl-total strong,
.ht-price,
.ht-price strong,
.ht-room-price,
.ap-addon-price,
.ap-total span,
.aw-cost .ap-total span,
.aw-ref-total strong,
.aw-pay-total strong {
  font-family: var(--display-font);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* Any list of amounts lines up on the decimal point */
.ap-lines,
.aw-ref-list,
.cp-fee-table {
  font-variant-numeric: tabular-nums;
}

/* Section and card titles inherit the heading rules, but a few places use a
   paragraph tag for what is really a title */
.aw-panel-title,
.aw-rail-title,
.aw-guide-title,
.aw-ref-title,
.aw-pay-title,
.aw-guest-title,
.md-section-title,
.cp-section-title {
  font-family: var(--display-font);
  letter-spacing: -0.01em;
}

/* Body copy: the measure the eye tracks most comfortably */
p,
li,
td,
label,
input,
select,
textarea,
.md-field span,
.aw-doc-rules,
.aw-check-list {
  font-family: var(--body-font);
}

p {
  line-height: 1.65;
}

/* Inter's default figures wander in tables; tabular keeps them in step */
table {
  font-variant-numeric: tabular-nums;
}

/*==========  apply wizard — route summary, specimen, validity  ==========*/

/* Where you are flying, read as a pair rather than a labelled value */
.aw-ref-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding-bottom: 11px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.aw-ref-route span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.aw-ref-route span.is-end {
  text-align: right;
  align-items: flex-end;
}

.aw-ref-route small {
  color: var(--light);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.aw-ref-route strong {
  color: var(--white);
  font-size: var(--font-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.aw-ref-route > i {
  color: var(--white);
  opacity: 0.7;
}

/* Which page of the passport to photograph */
.aw-doc-body.has-specimen {
  grid-template-columns: 62px minmax(0, 1fr) 150px;
}

.aw-doc-specimen {
  margin: 0;
  text-align: center;
}

.aw-doc-specimen img {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.aw-doc-specimen figcaption {
  margin-top: 6px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Traveller fields, three across like the passport prints them */
.aw-trav-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.aw-trav-grid .md-field span em {
  color: var(--muted);
  font-style: normal;
  font-weight: 400;
}

.aw-trav-upload-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.aw-trav-upload-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Is this passport still valid long enough for the trip? */
.aw-valid {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 10px 0 0;
  font-size: var(--font-xs);
}

.aw-valid.is-good {
  color: var(--success);
}

.aw-valid.is-warn {
  color: var(--warning);
}

/* Closing note before the actions */
.aw-info-box {
  border-left: 3px solid var(--primary);
  background-color: color-mix(in srgb, var(--primary) 5%, #fff);
}

.aw-info-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--primary);
}

.aw-info-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--font-xs);
  color: var(--muted);
}

.aw-info-list li::before {
  content: "•";
  margin-right: 8px;
  color: var(--primary);
}

/*----------  responsive  ----------*/

@media (max-width: 1399px) {
  .aw-trav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .aw-doc-body.has-specimen {
    grid-template-columns: 52px minmax(0, 1fr);
  }
  .aw-doc-specimen {
    grid-column: 1 / -1;
    max-width: 240px;
  }
}

@media (max-width: 575px) {
  .aw-trav-grid {
    grid-template-columns: 1fr;
  }
  .aw-ref-route {
    grid-template-columns: 1fr auto 1fr;
    gap: 6px;
  }
}

/*==========  visa application — reference, requirements, optional rows  ==========*/

.aw-hero-flag {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: -8px;
  margin-right: 10px;
  border: 2px solid rgba(255, 255, 255, 0.6);
}

/* The reference and status block in the banner */
.aw-ref-label {
  margin: 0;
  color: var(--light);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.aw-ref-id {
  margin: 2px 0 12px !important;
  color: var(--white);
  font-family: var(--display-font);
  font-size: var(--font-md);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.aw-ref .aw-status {
  margin: 2px 0 0;
  color: var(--white);
  font-weight: 500;
}

/* Fee shown beside the panel heading */
.aw-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.aw-fee {
  margin: 0;
  text-align: right;
}

.aw-fee small {
  display: block;
  color: var(--muted);
  font-size: var(--font-xs);
}

.aw-fee strong {
  font-family: var(--display-font);
  font-size: var(--font-xl);
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

/* Which destination these requirements belong to */
.aw-req-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.aw-req-flag {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 4px;
  border: 1px solid var(--border-color);
}

.aw-req-label {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-xs);
}

.aw-req-name {
  margin: 0;
  font-family: var(--display-font);
  font-size: var(--font-md);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Guidance bullets, plain dots rather than ticks */
.aw-guide-bullets {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: var(--font-xs);
  color: var(--muted);
}

.aw-guide-bullets li::before {
  content: "•";
  margin-right: 8px;
  color: var(--primary);
}

/* A softer note than the green tick, for rules that are advisory */
.aw-doc-note.is-soft {
  color: var(--warning);
}

/* The optional list on the visa page carries its own numbered label */
.aw-opt-text .aw-doc-flag.is-inline {
  position: static;
  display: inline-block;
  margin-bottom: 4px;
}

/*----------  responsive  ----------*/

@media (max-width: 575px) {
  .aw-hero-flag {
    width: 30px;
    height: 30px;
    vertical-align: -5px;
  }
  .aw-panel-head {
    flex-direction: column;
  }
  .aw-fee {
    text-align: left;
  }
}

/*==========  national ID alternative — three placements  ==========*/

/* Shared look: a soft green panel, since it removes a requirement rather
   than adding one */
.aw-nid {
  border: 1px solid color-mix(in srgb, var(--success) 35%, #fff);
  border-radius: 12px;
  background-color: color-mix(in srgb, var(--success) 6%, #fff);
  padding: 14px 16px;
}

.aw-nid .aw-nid-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--success);
}

.aw-nid .aw-nid-text {
  margin-bottom: 12px;
  color: var(--muted);
  font-size: var(--font-xs);
}

.aw-nid .aw-nid-upload {
  margin-top: 12px;
}

/* Rail: narrow, so the chips stack */
.aw-nid--rail .aw-nid-equals,
.aw-nid--guide .aw-nid-equals {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0 0 12px;
}

.aw-nid--rail .aw-nid-chip,
.aw-nid--guide .aw-nid-chip {
  width: 100%;
  justify-content: center;
}

.aw-nid--rail .aw-switch,
.aw-nid--guide .aw-switch {
  align-items: flex-start;
  font-size: var(--font-xs);
}

/* Main: full width inside the form, chips sit beside the switch */
.aw-nid--main {
  padding: 18px 20px;
}

.aw-nid--main .aw-nid-title {
  font-size: var(--font-md);
}

.aw-nid--main .aw-switch {
  display: inline-flex;
  padding: 10px 16px;
  border: 1px solid color-mix(in srgb, var(--success) 30%, #fff);
  border-radius: 10px;
  background-color: var(--bg-white);
}

.aw-nid--main .aw-nid-equals {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 0 16px;
  vertical-align: middle;
}

.aw-nid--main .aw-nid-chip {
  padding: 10px 16px;
  border-radius: 10px;
  font-size: var(--font-sm);
}

@media (max-width: 767px) {
  .aw-nid--main .aw-nid-equals {
    display: flex;
    margin: 12px 0 0;
  }
}

/* Advisory line under a panel */
.aw-note-line {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  background-color: color-mix(in srgb, var(--success) 7%, #fff);
  color: var(--muted);
  font-size: var(--font-xs);
}

.aw-note-standalone {
  margin: 0 0 20px;
}

/*==========  apply wizard: groups, account, review cards  ==========*/
/* Flat colour throughout: one tint, one border, no gradients. */

/* A numbered heading inside a step, so one long screen reads as two short
   ones instead of a wall of inputs */
.aw-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 16px;
  padding-top: 22px;
  border-top: 1px solid var(--border-color);
}

.aw-group:first-of-type {
  margin-top: 24px;
}

.aw-group-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--primary);
  color: var(--white);
  font-size: var(--font-xs);
  font-weight: 700;
}

.aw-group-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.aw-group-text strong {
  font-size: var(--font-md);
  font-weight: 600;
}

.aw-group-text small {
  color: var(--muted);
  font-size: var(--font-xs);
}

/* The account opened as the application is filled in */
.aw-account {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px 16px;
  margin-top: 26px;
  padding: 20px 22px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border-color));
  border-radius: 12px;
  background-color: color-mix(in srgb, var(--primary) 5%, #fff);
}

.aw-account.is-ready {
  align-items: center;
  border-color: color-mix(in srgb, var(--success) 35%, var(--border-color));
  background-color: color-mix(in srgb, var(--success) 6%, #fff);
}

.aw-account-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--primary);
  color: var(--white);
  font-size: 20px;
}

.aw-account.is-ready .aw-account-icon {
  background-color: var(--success);
}

.aw-account-text strong,
.aw-account.is-ready strong {
  display: block;
  font-size: var(--font-md);
  font-weight: 600;
}

.aw-account-text small,
.aw-account.is-ready small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--font-xs);
  line-height: 1.6;
}

.aw-account-field {
  grid-column: 2;
  max-width: 380px;
  margin: 4px 0 0;
}

/* Password box with the reveal button sitting inside it */
.ap-password {
  position: relative;
  display: block;
}

.ap-password input {
  width: 100%;
  padding-right: 44px;
}

.ap-password-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
}

.ap-password-eye:hover {
  color: var(--primary);
}

/* "Same as my phone number" and friends */
.ap-check {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 400;
  cursor: pointer;
}

/* The theme strips every control's native appearance, so accent-color has
   nothing to paint on. The box is drawn here instead. */
.ap-check input {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  background-color: var(--bg-white);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.ap-check input:checked {
  border-color: var(--primary);
  background-color: var(--primary);
}

.ap-check input:checked::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 5px;
  width: 5px;
  height: 10px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Review: one card per screen, each with its own way back */
.aw-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.aw-card {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background-color: var(--bg-white);
  overflow: hidden;
}

.aw-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  background-color: color-mix(in srgb, var(--primary) 5%, #fff);
}

.aw-card-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-sm);
  font-weight: 600;
}

.aw-card-title i {
  color: var(--primary);
}

.aw-card-edit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border: 1px solid var(--primary);
  border-radius: 999px;
  color: var(--primary);
  font-size: var(--font-xs);
  font-weight: 600;
  transition: background-color 0.2s, color 0.2s;
}

.aw-card-edit:hover {
  background-color: var(--primary);
  color: var(--white);
}

.aw-card-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 8px 14px;
  margin: 0;
  padding: 16px;
}

.aw-card-rows dt {
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 400;
}

.aw-card-rows dd {
  margin: 0;
  font-size: var(--font-sm);
  font-weight: 500;
  word-break: break-word;
}

.aw-card .aw-review-docs {
  padding: 16px;
}

/*==========  about this destination  ==========*/
/* Flat colour, one border, no gradients. */

.ca-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
  padding: 28px 30px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background-color: var(--surface-bg);
}

.ca-intro {
  margin: 0;
  color: var(--body-color);
  line-height: 1.75;
}

.ca-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 16px 0 0;
  padding: 12px 15px;
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--primary) 6%, #fff);
  color: var(--muted);
  font-size: var(--font-sm);
  line-height: 1.6;
}

.ca-note i {
  color: var(--primary);
  margin-top: 2px;
}

.ca-label {
  margin: 22px 0 10px;
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ca-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ca-tags li {
  padding: 7px 14px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-size: var(--font-sm);
}

/* The quick facts sit in their own tinted column */
.ca-facts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  border-radius: 14px;
  background-color: color-mix(in srgb, var(--primary) 5%, #fff);
  align-self: start;
}

.ca-fact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}

.ca-fact + .ca-fact {
  border-top: 1px solid color-mix(in srgb, var(--primary) 12%, #fff);
}

.ca-fact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--bg-white);
  color: var(--primary);
  font-size: 16px;
}

.ca-fact-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ca-fact-text small {
  color: var(--muted);
  font-size: var(--font-xs);
}

.ca-fact-text strong {
  font-size: var(--font-sm);
  font-weight: 600;
}

@media (max-width: 991px) {
  .ca-panel {
    grid-template-columns: minmax(0, 1fr);
    padding: 22px;
  }
}

/*==========  uploaded documents  ==========*/
/* Every tile names what it holds, and opens full size when clicked. */

.vd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.vd-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background-color: var(--bg-white);
  color: var(--body-color);
  transition: border-color 0.2s, transform 0.2s;
}

.vd-item:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  color: var(--body-color);
}

.vd-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130px;
  border-radius: 8px;
  background-color: color-mix(in srgb, var(--primary) 5%, #fff);
  overflow: hidden;
}

.vd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vd-thumb > i {
  font-size: 40px;
  color: var(--primary);
}

/* Sits over the thumbnail on hover, so the tile reads as openable */
.vd-open {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: color-mix(in srgb, var(--primary) 85%, transparent);
  color: var(--white);
  font-size: var(--font-xs);
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.2s;
}

.vd-item:hover .vd-open {
  opacity: 1;
}

.vd-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-sm);
  font-weight: 600;
  line-height: 1.35;
}

.vd-name i {
  color: var(--primary);
  flex-shrink: 0;
}

.vd-type {
  color: var(--muted);
  font-size: var(--font-xs);
  letter-spacing: 0.04em;
}

/*==========  invoice  ==========*/

.inv-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.inv-sheet {
  max-width: 860px;
  margin: 0 auto;
  padding: 44px 48px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background-color: var(--bg-white);
}

/* ---- the booking confirmation reuses the sheet above, and adds these ---- */

.inv-meta {
  text-align: right;
}

.inv-muted {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--font-sm);
}

.inv-status.is-paid {
  background-color: color-mix(in srgb, var(--success) 14%, #fff);
  color: var(--success);
}

.inv-parties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
  margin: 24px 0;
  padding: 20px 0;
  border-block: 1px solid var(--border-color);
}

.inv-party-strong {
  margin: 0;
  font-size: var(--font-sm);
  font-weight: 600;
}

/* The theme's h2 is a page heading; on a sheet someone prints it shouts */
.inv-subhead {
  margin: 26px 0 10px;
  font-size: var(--font-sm);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.inv-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 12px 15px;
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--warning) 12%, #fff);
  font-size: var(--font-sm);
  line-height: 1.6;
}

.inv-note i {
  margin-top: 3px;
  color: #9a6700;
}

.inv-table .inv-total td {
  border-bottom: 0;
  padding-top: 14px;
  font-size: var(--font-md);
  font-weight: 700;
}

/* Only the sheet goes on paper */
@media print {
  .inv-toolbar,
  .header-section,
  .footer-section,
  .top-action-btn,
  .js-cookie-consent {
    display: none !important;
  }

  .inv-sheet {
    max-width: none;
    border: 0;
    padding: 0;
  }
}

.inv-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--border-color);
}

.inv-brand img {
  max-height: 46px;
  margin-bottom: 10px;
}

.inv-brand-meta {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-xs);
  line-height: 1.6;
}

.inv-title {
  margin: 0 0 10px;
  font-size: var(--display-4);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: right;
}

.inv-meta-table {
  margin-left: auto;
  font-size: var(--font-xs);
  font-variant-numeric: tabular-nums;
}

.inv-meta-table td {
  padding: 2px 0 2px 16px;
  text-align: right;
}

.inv-meta-table td:first-child {
  padding-left: 0;
  color: var(--muted);
}

.inv-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--warning) 14%, #fff);
  color: var(--warning);
  font-weight: 600;
}

.inv-status.is-paid {
  background-color: color-mix(in srgb, var(--success) 14%, #fff);
  color: var(--success);
}

.inv-parties {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 28px;
}

.inv-label {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.inv-party {
  margin: 0;
  font-size: var(--font-sm);
  line-height: 1.7;
}

.inv-table {
  width: 100%;
  margin-bottom: 26px;
  border-collapse: collapse;
  font-size: var(--font-sm);
  font-variant-numeric: tabular-nums;
}

.inv-table th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 600;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.inv-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border-color);
}

.inv-table th:first-child,
.inv-table td:first-child {
  padding-left: 0;
}

.inv-table th:last-child,
.inv-table td:last-child {
  padding-right: 0;
}

.inv-num {
  text-align: right;
}

.inv-table tfoot td {
  border-bottom: none;
  padding-top: 8px;
  padding-bottom: 4px;
}

.inv-table .inv-total td {
  padding-top: 12px;
  border-top: 2px solid var(--border-color);
  font-family: var(--display-font);
  font-size: var(--font-lg);
  font-weight: 700;
  color: var(--primary);
}

.inv-table.is-compact {
  font-size: var(--font-xs);
}

.inv-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 30px;
  padding: 18px 0;
  margin-bottom: 22px;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.inv-detail-grid p {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  font-size: var(--font-xs);
}

.inv-detail-grid span {
  color: var(--muted);
}

.inv-foot {
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
  color: var(--muted);
  font-size: var(--font-xs);
}

.inv-foot p {
  margin: 0 0 4px;
}

.inv-foot-meta {
  color: var(--muted);
  opacity: 0.8;
}

/*----------  print: just the invoice on the paper  ----------*/

@media print {
  body {
    background: #fff;
  }

  header,
  footer,
  .header-section,
  .footer-section,
  .inv-toolbar,
  .scroll-to-top,
  .cookie-consent,
  #cookieConsent {
    display: none !important;
  }

  .inv-page,
  .cp-section {
    padding: 0 !important;
  }

  .inv-sheet {
    max-width: none;
    padding: 0;
    border: none;
    border-radius: 0;
  }

  .inv-table .inv-total td {
    color: #000;
  }
}

@media (max-width: 767px) {
  .inv-sheet {
    padding: 24px 20px;
  }
  .inv-head,
  .inv-parties,
  .inv-detail-grid {
    grid-template-columns: 1fr;
    flex-direction: column;
  }
  .inv-title,
  .inv-meta-table td {
    text-align: left;
  }
  .inv-meta-table {
    margin-left: 0;
  }
}

/*==========  customer bookings list  ==========*/

.ub-head {
  margin-bottom: 20px;
}

.ub-head p {
  color: var(--muted);
  font-size: var(--font-sm);
}

.ub-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.ub-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  color: var(--body-color);
  font-size: var(--font-sm);
  font-weight: 500;
  transition: all 0.2s ease;
}

.ub-tabs a:hover,
.ub-tabs a.is-active {
  border-color: var(--primary);
  background-color: color-mix(in srgb, var(--primary) 10%, #fff);
  color: var(--primary);
}

.ub-tabs span {
  padding: 1px 7px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--primary) 12%, #fff);
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
}

.ub-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ub-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 20px;
  padding: 20px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background-color: var(--bg-white);
  transition: border-color 0.2s ease;
}

.ub-item:hover {
  border-color: var(--primary);
}

.ub-item-service {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  color: var(--primary);
  font-size: var(--font-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ub-item-title {
  margin-bottom: 8px;
  font-size: var(--font-lg);
}

.ub-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  color: var(--muted);
  font-size: var(--font-xs);
}

.ub-item-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ub-item-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  text-align: right;
}

.ub-item-amount {
  margin: 0;
  font-family: var(--display-font);
  font-size: var(--font-xl);
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.ub-item-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
}

.ub-badge {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.ub-badge.is-paid {
  background-color: color-mix(in srgb, var(--success) 14%, #fff);
  color: var(--success);
}

.ub-badge.is-wait {
  background-color: color-mix(in srgb, var(--warning) 14%, #fff);
  color: var(--warning);
}

.ub-badge.is-bad {
  background-color: color-mix(in srgb, var(--danger) 12%, #fff);
  color: var(--danger);
}

.ub-badge.is-plain {
  background-color: var(--light);
  color: var(--muted);
}

.ub-item-actions {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}

/* ---- one booking, in full ---- */

.ub-back {
  margin-bottom: 16px;
  font-size: var(--font-sm);
}

.ub-back a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}

.ub-back a:hover {
  color: var(--primary);
}

.ub-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 15px 18px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background-color: var(--surface-bg);
}

.ub-status p {
  width: 100%;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--font-sm);
  line-height: 1.6;
}

.ub-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
}

.ub-card {
  margin-bottom: 18px;
  padding: 20px 22px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background-color: var(--bg-white);
}

.ub-card h5 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: var(--font-md);
  font-weight: 600;
}

.ub-card h5 i {
  color: var(--primary);
}

.ub-card dl {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 60%);
  gap: 9px 14px;
  margin: 0;
  font-size: var(--font-sm);
}

.ub-card dt {
  color: var(--muted);
  font-weight: 400;
}

.ub-card dd {
  margin: 0;
  font-weight: 500;
}

.ub-lines {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-sm);
}

.ub-lines li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-color);
}

.ub-lines li:last-child {
  border-bottom: 0;
}

.ub-line-total {
  font-size: var(--font-md);
  font-weight: 700;
}

.ub-muted {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: var(--font-xs);
}

.ub-table {
  width: 100%;
  font-size: var(--font-sm);
}

.ub-table th {
  padding: 0 12px 9px 0;
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ub-table td {
  padding: 11px 12px 11px 0;
  border-top: 1px solid var(--border-color);
}

.ub-docs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.ub-docs a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--body-color);
  font-size: var(--font-sm);
  transition: border-color 0.18s ease, color 0.18s ease;
}

.ub-docs a:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.ub-docs i {
  color: var(--primary);
  font-size: 1.1rem;
}

.ub-docs small {
  display: block;
  color: var(--muted);
}


/* A ticket that has been promised but not yet issued */
.ub-doc-wait {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px dashed var(--border-color);
  border-radius: 10px;
  color: var(--muted);
  font-size: var(--font-sm);
}

.ub-doc-wait i {
  color: var(--warning);
  font-size: 1.1rem;
}

.ub-doc-wait small {
  display: block;
}

.ub-actions-row {
  flex-wrap: wrap;
  margin-top: 4px;
}

.ub-empty {
  padding: 60px 20px;
  border: 1px dashed var(--border-color);
  border-radius: 14px;
  text-align: center;
  color: var(--muted);
}

.ub-empty i {
  display: block;
  margin-bottom: 12px;
  font-size: 36px;
  color: var(--primary);
  opacity: 0.5;
}

@media (max-width: 767px) {
  .ub-item {
    grid-template-columns: 1fr;
  }
  .ub-item-side {
    align-items: flex-start;
    text-align: left;
  }
  .ub-item-badges {
    justify-content: flex-start;
  }
}

.inv-brand-name {
  display: block;
  margin-bottom: 10px;
  font-family: var(--display-font);
  font-size: var(--font-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/*==========  visa wizard — two column layout and the review table  ==========*/

/* No guidance column on this flow, so the form gets the room */
.aw-layout.is-two-column {
  grid-template-columns: 260px minmax(0, 1fr);
}

@media (max-width: 991px) {
  .aw-layout.is-two-column {
    grid-template-columns: 1fr;
  }
}

/* A finished step links back to itself */
.aw-steps .is-done .aw-step-text a {
  color: inherit;
}

.aw-steps .is-done .aw-step-text a:hover strong {
  color: var(--primary);
  text-decoration: underline;
}

/* Everything entered, before it goes to the cart */
.aw-review {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-sm);
}

.aw-review td {
  padding: 11px 0;
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
}

.aw-review td:first-child {
  width: 42%;
  color: var(--muted);
  padding-right: 16px;
}

.aw-review td:last-child {
  font-weight: 500;
}

.aw-review tr:last-child td {
  border-bottom: none;
}

.aw-review-docs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.aw-review-doc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-size: var(--font-xs);
  font-weight: 500;
  transition: all 0.2s ease;
}

.aw-review-doc:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.aw-review-doc i {
  color: var(--success);
  font-size: var(--font-md);
}

/*==========  visa pricing — the second amount  ==========*/

/* The visa itself, charged after approval. Quieter than the fee, because the
   fee is what the applicant pays today. */
/* The second amount is real money too, so it reads as an amount rather than
   as a footnote to the first one */
.cp-visa-full {
  margin: 0;
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--body-color);
}

/* "on approval" qualifies the amount, so it stays quieter than the label */
.cp-fact small em {
  font-style: normal;
  opacity: 0.75;
}

/* Fee table: same two lines, in the width one cell allows */
.cp-fee-second {
  display: block;
  margin-top: 8px;
  font-weight: 600;
  color: var(--body-color);
}

.cp-fee-when {
  display: block;
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 400;
  line-height: 1.5;
}

.cp-visa-price small {
  font-size: var(--font-xs);
  font-weight: 400;
  color: var(--muted);
}

.aw-fee-later {
  display: block;
  margin-top: 2px;
  font-size: var(--font-xs);
  font-weight: 400;
  color: var(--muted);
}

/*=============================================
=   Package detail: premium card treatment    =
=============================================*/
/* The page sells a holiday, so it is dressed accordingly: bigger cards with
   real air inside them, one mint accent taken from the brand teal, and text
   dark enough to read at a glance. Everything is scoped to .pk-page so the
   shared .md-* components keep their plainer look on the listing pages. */

.pk-page {
  --pk-ink: #12293b;
  --pk-body: #46596c;
  --pk-soft: #6d8296;
  --pk-line: #e7eff0;
  --pk-tint: #f4fbfa;
  --pk-tint-2: #e9f6f3;
  --pk-radius: 20px;
  --pk-pad: 30px;
  --pk-shadow: 0 1px 2px rgba(18, 41, 59, 0.04), 0 18px 40px -26px rgba(18, 41, 59, 0.32);
  --pk-shadow-lift: 0 2px 8px rgba(18, 41, 59, 0.07), 0 28px 54px -28px rgba(18, 41, 59, 0.4);

  background-color: #f3f9f8;
}

/* Body copy only, so the dark footer keeps its own palette */
.pk-page .pk-main,
.pk-page .pk-side {
  color: var(--pk-body);
}

/* A soft mint wash behind the top of the page, so the white cards read as
   floating rather than as boxes drawn on a flat sheet */
.pk-page .pk-top {
  position: relative;
  padding-top: 30px;
}

.pk-page .pk-top::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 420px;
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--primary) 9%, #fff) 0%, rgba(243, 249, 248, 0) 100%);
  pointer-events: none;
}

/* The wash and the dot grid are generated content, so the column has to be
   lifted over them explicitly or ::after paints on top of the page */
.pk-page .pk-top > .container {
  position: relative;
  z-index: 1;
}

/* has-solid-header zeroes the crumb's top padding; this page is on both
   classes, so it has to out-specify that rule to get its air back */
body.pk-page .md-crumb {
  padding-block: 20px 0;
  color: var(--pk-soft);
}

.pk-page .md-crumb a {
  color: var(--pk-soft);
}

.pk-page .md-crumb a:hover {
  color: var(--primary);
}

.pk-page .md-crumb .current {
  color: var(--pk-ink);
  font-weight: 600;
}

/*----------  headings and body copy  ----------*/

.pk-page .pk-sec-title,
.pk-page .cp-block-title,
.pk-page .cp-section-title,
.pk-page .md-card-title-sm {
  font-family: var(--display-font);
  color: var(--pk-ink);
  letter-spacing: -0.015em;
  font-weight: 700;
}

.pk-page .pk-sec-title {
  font-size: 1.375rem;
}

.pk-page .cp-block-title {
  font-size: var(--font-lg);
  margin-bottom: 16px;
}

.pk-page .pk-sec-head {
  gap: 15px;
  margin-bottom: 18px;
}

.pk-page .pk-sec-head small,
.pk-page .cp-muted {
  color: var(--pk-soft);
}

.pk-page .pk-sec {
  margin-bottom: 44px;
  /* Clears the sticky header and the sticky jump list stacked under it, for
     anchors followed straight from the address bar rather than by the script */
  scroll-margin-top: 152px;
}

/* The icon tile carries the only strong colour in the heading row */
.pk-page .pk-sec-icon {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background-image: linear-gradient(140deg, color-mix(in srgb, var(--primary) 18%, #fff), color-mix(in srgb, var(--primary) 7%, #fff));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 18%, #fff);
  font-size: 1.25rem;
}

.pk-page .md-box p,
.pk-page .md-box li {
  color: var(--pk-body);
}

.pk-page .md-box p {
  line-height: 1.75;
}

/*----------  the cards themselves  ----------*/

/* Not flat white: every card fades from white at the top into a breath of
   mint at the bottom. It is a few percent of colour, but it is what stops a
   long page of boxes looking like a spreadsheet. */
.pk-page .md-box,
.pk-page .pk-book,
.pk-page .pk-trust,
.pk-page .pk-feature-strip,
.pk-page .pk-jump {
  border: 1px solid var(--pk-line);
  border-radius: var(--pk-radius);
  background-color: #fff;
  background-image: linear-gradient(170deg, #fff 0%, #fff 45%, var(--pk-tint) 100%);
  box-shadow: var(--pk-shadow);
}

.pk-page .md-box {
  position: relative;
  padding: var(--pk-pad);
}

/*----------  cards that carry their own meaning carry their own colour  ----------*/

/* What the price covers reads green, what it does not reads rose, and the
   two policy cards take the calm blue and amber. One glance sorts them. */
.pk-page #pk-inclusions .md-box:first-child {
  border-color: color-mix(in srgb, var(--success) 22%, #fff);
  background-image: linear-gradient(170deg, #fff 0%, #fff 40%, color-mix(in srgb, var(--success) 9%, #fff) 100%);
}

.pk-page #pk-inclusions .md-box:last-child {
  border-color: color-mix(in srgb, var(--danger) 16%, #fff);
  background-image: linear-gradient(170deg, #fff 0%, #fff 40%, color-mix(in srgb, var(--danger) 6%, #fff) 100%);
}

.pk-page #pk-info .md-box:first-child {
  border-color: color-mix(in srgb, var(--info) 22%, #fff);
  background-image: linear-gradient(170deg, #fff 0%, #fff 40%, color-mix(in srgb, var(--info) 8%, #fff) 100%);
}

.pk-page #pk-info .md-box:last-child {
  border-color: color-mix(in srgb, var(--warning) 20%, #fff);
  background-image: linear-gradient(170deg, #fff 0%, #fff 40%, color-mix(in srgb, var(--warning) 8%, #fff) 100%);
}

/* A hairline of the card's own colour along the top edge, so the meaning is
   visible before a word is read */
.pk-page #pk-inclusions .md-box::before,
.pk-page #pk-info .md-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background-image: linear-gradient(90deg, var(--success), color-mix(in srgb, var(--success) 25%, #fff));
}

.pk-page #pk-inclusions .md-box:last-child::before {
  background-image: linear-gradient(90deg, var(--danger), color-mix(in srgb, var(--danger) 25%, #fff));
}

.pk-page #pk-info .md-box:first-child::before {
  background-image: linear-gradient(90deg, var(--info), color-mix(in srgb, var(--info) 25%, #fff));
}

.pk-page #pk-info .md-box:last-child::before {
  background-image: linear-gradient(90deg, var(--warning), color-mix(in srgb, var(--warning) 25%, #fff));
}

.pk-page #pk-inclusions .cp-block-title,
.pk-page #pk-info .cp-block-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pk-page .md-split {
  gap: 24px;
}

/*----------  hero  ----------*/

.pk-page .pk-hero {
  height: 400px;
  border-radius: 24px;
  margin-bottom: 22px;
  box-shadow: var(--pk-shadow-lift);
}

.pk-page .pk-hero::after {
  background-image: linear-gradient(to top, rgba(9, 26, 38, 0.9) 0%, rgba(9, 26, 38, 0.35) 45%, rgba(9, 26, 38, 0) 75%);
}

.pk-page .pk-hero-caption {
  left: 34px;
  right: 34px;
  bottom: 30px;
}

.pk-page .pk-title {
  font-family: var(--display-font);
  font-size: clamp(1.75rem, 3vw, 2.375rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

/* Each fact gets its own glass chip instead of floating loose on the photo */
.pk-page .pk-facts {
  gap: 8px;
}

.pk-page .pk-facts li {
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background-color: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: var(--font-xs);
  font-weight: 500;
}

.pk-page .md-badge {
  padding: 7px 15px;
  border-radius: 999px;
  font-size: var(--font-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.6);
}

/*----------  what is included at a glance  ----------*/

.pk-page .pk-feature-strip {
  gap: 6px;
  padding: 20px 16px;
  margin-bottom: 22px;
}

.pk-page .pk-feature-strip li {
  gap: 9px;
  padding: 12px 6px;
  border-radius: 14px;
  color: var(--pk-body);
  font-size: var(--font-xs);
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.pk-page .pk-feature-strip li:hover {
  background-color: var(--pk-tint);
}

.pk-page .pk-feature-strip i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--pk-tint-2);
  font-size: 18px;
}

/*----------  on this page  ----------*/

/* It follows the reader down, because on a page this long the section list is
   worth more halfway through than it is at the top */
.pk-page .pk-jump {
  position: sticky;
  top: 84px;
  z-index: 6;
  gap: 7px;
  padding: 12px 16px;
  margin-bottom: 34px;
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
}

.pk-page .pk-jump-label {
  color: var(--pk-soft);
}

.pk-page .pk-jump a {
  padding: 9px 15px;
  border-color: var(--pk-line);
  background-color: var(--pk-tint);
  color: var(--pk-body);
  font-weight: 600;
}

.pk-page .pk-jump a:hover {
  border-color: transparent;
  background-color: var(--primary);
  color: #fff;
  box-shadow: 0 10px 18px -10px color-mix(in srgb, var(--primary) 90%, #000);
}

.pk-page .pk-jump a:hover i {
  color: #fff;
}

/*----------  lists inside the cards  ----------*/

.pk-page .cp-tick-list {
  gap: 12px;
  margin-block: 16px 0;
  font-size: var(--font-sm);
}

.pk-page .cp-tick-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.6;
}

.pk-page .cp-tick-list i {
  margin-top: 2px;
  color: var(--primary);
}

.pk-page .pk-exclude i {
  color: var(--danger);
}

.pk-page .pk-quick-facts {
  gap: 14px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--pk-line);
}

.pk-page .pk-quick-facts li {
  padding: 14px;
  border-radius: 16px;
  background-color: var(--pk-tint);
}

.pk-page .pk-quick-facts strong {
  color: var(--pk-ink);
}

.pk-page .md-include-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background-color: #fff;
  color: var(--primary);
  box-shadow: 0 4px 10px -6px rgba(18, 41, 59, 0.4);
}

/*----------  itinerary  ----------*/

.pk-page .pk-day {
  gap: 16px;
  padding: 16px 14px;
  margin-inline: -14px;
  border-bottom: 1px solid var(--pk-line);
  border-radius: 16px;
  transition: background-color 0.2s ease;
}

.pk-page .pk-day:hover {
  background-color: var(--pk-tint);
}

.pk-page .pk-day-media {
  height: 66px;
  border-radius: 14px;
}

.pk-page .pk-day-media.is-plain {
  border-color: transparent;
  background-color: var(--pk-tint-2);
}

.pk-page .pk-day-no {
  align-self: center;
  padding: 5px 11px;
  border-radius: 999px;
  background-color: var(--pk-tint-2);
  color: var(--primary);
  font-size: var(--font-xs);
  font-weight: 700;
  text-align: center;
}

.pk-page .pk-day-body strong,
.pk-page .pk-day-side strong {
  color: var(--pk-ink);
  font-size: var(--font-md);
}

.pk-page .pk-day-body small {
  line-height: 1.6;
  color: var(--pk-soft);
}

/*----------  extra services listed in the page  ----------*/

.pk-page .md-addon-list li {
  padding: 16px;
  border-radius: 16px;
  border-bottom: 0;
  background-color: var(--pk-tint);
}

.pk-page .md-addon-price {
  color: var(--primary);
  font-weight: 700;
}

/*----------  faq  ----------*/

.pk-page .cp-faq li {
  border-radius: 16px;
  border: 1px solid var(--pk-line);
  margin-bottom: 12px;
  overflow: hidden;
}

.pk-page .cp-faq li.open {
  border-color: color-mix(in srgb, var(--primary) 35%, #fff);
  background-color: var(--pk-tint);
}

.pk-page .cp-faq-q {
  padding: 17px 20px;
  color: var(--pk-ink);
  font-weight: 600;
}

/*=============================================
=   Booking panel                             =
=============================================*/

.pk-page .pk-side {
  gap: 18px;
  top: 100px;
}

.pk-page .pk-book {
  padding: 22px;
}

/* The number people came for, on a full brand-teal panel. It is the one
   place on the page that is allowed to shout. */
.pk-page .pk-price-head {
  position: relative;
  overflow: hidden;
  padding: 22px;
  margin-bottom: 18px;
  border-radius: 16px;
  background-image: linear-gradient(145deg, color-mix(in srgb, var(--primary) 92%, #fff) 0%, var(--primary) 45%, #1c7d72 100%);
  box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--primary) 90%, #000);
  color: #fff;
}

/* A soft light spilling in from the top right keeps the panel from reading
   as a flat block of paint */
.pk-page .pk-price-head::after {
  content: "";
  position: absolute;
  top: -60px;
  right: -40px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

.pk-page .pk-price-head > * {
  position: relative;
}

.pk-page .pk-from strong {
  font-size: 2.125rem;
  font-weight: 700;
  font-family: var(--display-font);
  letter-spacing: -0.02em;
  color: #fff;
}

.pk-page .pk-from small {
  color: rgba(255, 255, 255, 0.78);
}

.pk-page .pk-offer {
  margin: 10px 0 0;
}

.pk-page .pk-offer-was {
  color: rgba(255, 255, 255, 0.7);
}

/* Reversed out of the teal, so the discount stays the brightest thing here */
.pk-page .pk-offer-tag {
  background-color: #fff;
  color: var(--primary);
}

.pk-page .pk-free {
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: var(--font-sm);
  font-weight: 600;
}

.pk-page .pk-free i {
  color: #b8f0e4;
}

.pk-page .pk-side-label {
  margin: 22px 0 12px;
  color: var(--pk-ink);
}

.pk-page .pk-depart,
.pk-page .pk-extra {
  padding: 14px;
  margin-bottom: 10px;
  border-color: var(--pk-line);
  border-radius: 14px;
  background-color: var(--pk-tint);
}

.pk-page .pk-depart:hover,
.pk-page .pk-extra:hover {
  background-color: #fff;
  border-color: color-mix(in srgb, var(--primary) 45%, #fff);
}

/* The chosen departure is ringed rather than merely tinted, so it survives a
   glance down a list of eight dates */
.pk-page .pk-depart:has(input:checked),
.pk-page .pk-extra:has(input:checked) {
  border-color: var(--primary);
  background-color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, #fff);
}

.pk-page .pk-depart-body strong,
.pk-page .pk-extra-body strong {
  color: var(--pk-ink);
}

.pk-page .pk-counter {
  padding: 13px 0;
  border-bottom-color: var(--pk-line);
  color: var(--pk-ink);
  font-weight: 500;
}

.pk-page .pk-counter-controls button {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background-color: var(--pk-tint);
  border-color: var(--pk-line);
  font-weight: 600;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.pk-page .pk-counter-controls button:hover {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.pk-page .pk-counter-controls input {
  width: 48px;
  height: 34px;
  border-radius: 10px;
  border-color: var(--pk-line);
  font-weight: 600;
}

.pk-page .pk-summary {
  gap: 10px;
  margin: 20px 0;
  padding: 18px;
  border-radius: 16px;
  background-color: var(--pk-tint);
}

.pk-page .pk-summary li span:last-child,
.pk-page .pk-summary .pk-total {
  color: var(--pk-ink);
}

.pk-page .pk-summary .pk-total {
  margin-top: 4px;
  padding-top: 14px;
  border-top-color: color-mix(in srgb, var(--primary) 22%, #fff);
  font-size: var(--font-xl);
  font-weight: 700;
}

.pk-page .pk-pending-note {
  padding: 14px;
  border-radius: 14px;
  background-color: color-mix(in srgb, var(--info) 8%, #fff);
  color: var(--pk-body);
}

.pk-page .pk-pending-note i {
  color: var(--info);
}

.pk-page .pk-trust {
  padding: 22px;
  gap: 14px;
  color: var(--pk-body);
  font-weight: 500;
}

.pk-page .pk-trust i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--pk-tint-2);
  font-size: 15px;
}

/*----------  buttons  ----------*/

/* .btn-primary sets its background with !important, so the lift has to be
   claimed back the same way */
.pk-page .btn-primary {
  border: 0;
  border-radius: 12px;
  background-image: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 78%, #0b3b36)) !important;
  box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--primary) 90%, #000);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.pk-page .btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 18px 30px -14px color-mix(in srgb, var(--primary) 90%, #000);
}

.pk-page .pk-book .btn-primary {
  height: 54px;
  margin-top: 4px;
  font-size: var(--font-md);
  letter-spacing: 0.01em;
}

/*----------  you may also like  ----------*/

.pk-page .cp-section-head {
  margin-bottom: 24px;
}

.pk-page .md-card {
  border-radius: 18px;
  border-color: var(--pk-line);
  box-shadow: var(--pk-shadow);
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.pk-page .md-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pk-shadow-lift);
}

.pk-page .md-card-media img {
  transition: transform 0.4s ease;
}

.pk-page .md-card:hover .md-card-media img {
  transform: scale(1.06);
}

.pk-page .md-price strong {
  color: var(--primary);
  font-weight: 700;
}

/*----------  responsive  ----------*/

@media (max-width: 1199px) {
  .pk-page {
    --pk-pad: 24px;
  }

  .pk-page .pk-jump {
    position: static;
  }

  .pk-page .pk-side {
    top: auto;
  }
}

@media (max-width: 767px) {
  .pk-page {
    --pk-pad: 20px;
    --pk-radius: 16px;
  }

  .pk-page .pk-hero {
    height: 260px;
    border-radius: 18px;
  }

  .pk-page .pk-hero-caption {
    left: 18px;
    right: 18px;
    bottom: 18px;
  }

  .pk-page .pk-sec {
    margin-bottom: 32px;
  }
}

/*=============================================
=   Package detail: drawn art and clean chrome =
=============================================*/

/*----------  itinerary day scenes  ----------*/
/* Six inline scenes stand in for a photo the agency has not taken. They are
   built from the brand teal so they read as part of the page rather than as
   borrowed clipart. */

.pk-page .pk-day-media.is-plain {
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, #fff);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--primary) 7%, #fff), color-mix(in srgb, var(--primary) 16%, #fff));
  overflow: hidden;
}

.pk-art {
  width: 100%;
  height: 100%;
  display: block;
}

.pk-art-sky {
  fill: transparent;
}

.pk-art-sun {
  fill: color-mix(in srgb, var(--warning) 55%, #fff);
}

.pk-art-solid {
  fill: color-mix(in srgb, var(--primary) 78%, #0b3b36);
}

.pk-art-accent {
  fill: color-mix(in srgb, var(--primary) 45%, #fff);
}

.pk-art-ground {
  fill: color-mix(in srgb, var(--primary) 26%, #fff);
}

.pk-art-window,
.pk-art-snow,
.pk-art-star {
  fill: rgba(255, 255, 255, 0.85);
}

.pk-art-wave {
  fill: none;
  stroke: rgba(255, 255, 255, 0.65);
  stroke-width: 1.4;
  stroke-linecap: round;
}

.pk-art-dash {
  fill: none;
  stroke: color-mix(in srgb, var(--primary) 55%, #fff);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 3 3;
}

/*----------  a drawn texture, not a flat wash  ----------*/

/* A dot grid under the top of the page. Inline SVG in the URL, so it costs
   no request and scales with the zoom. */
.pk-page .pk-top::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 420px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='2' cy='2' r='1.1' fill='%232A9D8F' fill-opacity='0.18'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  pointer-events: none;
}

/* The same idea inside the price panel, drawn in white on the teal */
.pk-page .pk-price-head {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23ffffff' fill-opacity='0.16'/%3E%3C/svg%3E"),
    linear-gradient(145deg, color-mix(in srgb, var(--primary) 92%, #fff) 0%, var(--primary) 45%, #1c7d72 100%);
}

/*----------  buttons: fresher, cleaner, quieter  ----------*/

.pk-page .btn {
  padding: 0.7rem 1.4rem;
  border-radius: 12px;
  letter-spacing: 0.005em;
}

/* One clean fill, a single soft shadow in the button's own colour, and a
   short lift on hover. No borders, no second gradient stop fighting it. */
.pk-page .btn-primary {
  border: 0;
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--primary) 96%, #fff), #1f8175) !important;
  box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--primary) 95%, #000);
}

.pk-page .btn-primary:hover,
.pk-page .btn-primary:focus-visible {
  transform: translateY(-2px);
  filter: none;
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--primary) 88%, #fff), #1a7268) !important;
  box-shadow: 0 16px 28px -14px color-mix(in srgb, var(--primary) 95%, #000);
}

.pk-page .btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px -10px color-mix(in srgb, var(--primary) 95%, #000);
}

.pk-page .pk-book .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 56px;
  border-radius: 14px;
  font-size: var(--font-md);
}

/* The arrow belongs to the action, so it is drawn by the button itself */
.pk-page .pk-book .btn-primary::after {
  content: "";
  width: 17px;
  height: 17px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s ease;
}

.pk-page .pk-book .btn-primary:hover::after {
  transform: translateX(3px);
}

/*----------  the rest of the boxes  ----------*/

/* Cards lift a little when the cursor is on them, which is all the feedback a
   reading surface needs */
.pk-page .md-box {
  transition: box-shadow 0.22s ease, border-color 0.22s ease;
}

.pk-page .md-box:hover {
  border-color: color-mix(in srgb, var(--primary) 24%, #fff);
  box-shadow: var(--pk-shadow-lift);
}

/* Every block gets its own hue rather than one mint repeated nine times.
   The hues are the palette the site already ships with, so the page stays
   one family: teal for what is included, sky for the plan, violet for the
   optional extras, amber for the questions, green for the promises. */

/* What you get on the trip */
.pk-page .pk-feature-strip {
  border-color: color-mix(in srgb, var(--primary) 20%, #fff);
  background-image: linear-gradient(170deg, #fff 0%, #fff 30%, color-mix(in srgb, var(--primary) 10%, #fff) 100%);
}

/* Why you can book with confidence */
.pk-page .pk-trust {
  border-color: color-mix(in srgb, var(--success) 24%, #fff);
  background-image: linear-gradient(165deg, #fff 0%, color-mix(in srgb, var(--success) 11%, #fff) 100%);
}

.pk-page .pk-trust i {
  background-color: color-mix(in srgb, var(--success) 15%, #fff);
  color: var(--success);
}

/* About this tour */
.pk-page #pk-overview .md-box {
  border-color: color-mix(in srgb, var(--primary) 20%, #fff);
  background-image: linear-gradient(170deg, #fff 0%, #fff 40%, color-mix(in srgb, var(--primary) 9%, #fff) 100%);
}

/* The day by day plan */
.pk-page #pk-itinerary .md-box {
  border-color: color-mix(in srgb, var(--info) 22%, #fff);
  background-image: linear-gradient(170deg, #fff 0%, #fff 40%, color-mix(in srgb, var(--info) 8%, #fff) 100%);
}

.pk-page #pk-itinerary .pk-day:hover {
  background-color: color-mix(in srgb, var(--info) 7%, #fff);
}

/* Optional add ons, in the one hue not used anywhere else on the page */
.pk-page #pk-addons .md-box {
  border-color: #d9d2f2;
  background-image: linear-gradient(170deg, #fff 0%, #fff 40%, #f3f0fc 100%);
}

.pk-page #pk-addons .md-addon-list li {
  background-color: #f6f4fd;
}

.pk-page #pk-addons .md-addon-price {
  color: #6a4fbf;
}

/* Reviews */
.pk-page #pk-reviews .md-box {
  border-color: color-mix(in srgb, var(--warning) 20%, #fff);
  background-image: linear-gradient(170deg, #fff 0%, #fff 40%, color-mix(in srgb, var(--warning) 7%, #fff) 100%);
}

/* Questions */
.pk-page #pk-faq .md-box {
  border-color: color-mix(in srgb, var(--warning) 22%, #fff);
  background-image: linear-gradient(170deg, #fff 0%, #fff 40%, color-mix(in srgb, var(--warning) 8%, #fff) 100%);
}

.pk-page #pk-faq .cp-faq li.open {
  border-color: color-mix(in srgb, var(--warning) 40%, #fff);
  background-color: color-mix(in srgb, var(--warning) 9%, #fff);
}

/* The heading tile of each section takes its own section's colour, so the
   icon, the border and the wash all agree */
.pk-page #pk-itinerary .pk-sec-icon {
  background-image: linear-gradient(140deg, color-mix(in srgb, var(--info) 22%, #fff), color-mix(in srgb, var(--info) 8%, #fff));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info) 22%, #fff);
  color: var(--info);
}

.pk-page #pk-inclusions .pk-sec-icon {
  background-image: linear-gradient(140deg, color-mix(in srgb, var(--success) 22%, #fff), color-mix(in srgb, var(--success) 8%, #fff));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 22%, #fff);
  color: var(--success);
}

.pk-page #pk-addons .pk-sec-icon {
  background-image: linear-gradient(140deg, #e6e0f8, #f4f1fd);
  box-shadow: inset 0 0 0 1px #ddd5f5;
  color: #6a4fbf;
}

.pk-page #pk-info .pk-sec-icon,
.pk-page #pk-faq .pk-sec-icon,
.pk-page #pk-reviews .pk-sec-icon {
  background-image: linear-gradient(140deg, color-mix(in srgb, var(--warning) 24%, #fff), color-mix(in srgb, var(--warning) 8%, #fff));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 24%, #fff);
  color: #b06d00;
}

/* A card lifts into its own colour rather than into teal */
.pk-page #pk-itinerary .md-box:hover { border-color: color-mix(in srgb, var(--info) 45%, #fff); }
.pk-page #pk-addons .md-box:hover { border-color: #c5b8ec; }
.pk-page #pk-reviews .md-box:hover,
.pk-page #pk-faq .md-box:hover { border-color: color-mix(in srgb, var(--warning) 45%, #fff); }

.pk-page .pk-book {
  background-image: linear-gradient(180deg, #fff 0%, #fff 70%, var(--pk-tint) 100%);
}

.pk-page .md-card {
  background-image: linear-gradient(180deg, #fff 0%, var(--pk-tint) 100%);
}

/* Related cards keep a hairline of teal under the photo, tying the row to the
   rest of the page */
.pk-page .md-card-media {
  border-bottom: 2px solid color-mix(in srgb, var(--primary) 30%, #fff);
}

.pk-page .pk-jump {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 251, 250, 0.92));
}

/* An empty column of text in a coloured card needs the card's colour on its
   heading too, or the tint reads as an accident */
.pk-page #pk-inclusions .md-box:first-child .cp-block-title::before,
.pk-page #pk-inclusions .md-box:last-child .cp-block-title::before,
.pk-page #pk-info .md-box:first-child .cp-block-title::before,
.pk-page #pk-info .md-box:last-child .cp-block-title::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.pk-page #pk-inclusions .md-box:first-child .cp-block-title::before {
  background-color: var(--success);
}

.pk-page #pk-inclusions .md-box:last-child .cp-block-title::before {
  background-color: var(--danger);
}

.pk-page #pk-info .md-box:first-child .cp-block-title::before {
  background-color: var(--info);
}

.pk-page #pk-info .md-box:last-child .cp-block-title::before {
  background-color: var(--warning);
}

/*=============================================
=   Package detail: flat                      =
=============================================*/
/* Three colours run the whole page: one background, one border, one text.
   The brand teal is kept for the things you click and nothing else.
   This block is last on purpose, so it overrides the tinted treatment above
   rather than that treatment being cut out of it. */

.pk-page {
  --pk-surface: #ffffff;
  --pk-ground: #f4f7f7;
  --pk-line: #e3e9e9;
  --pk-text: #33454b;

  /* The tinted tokens above collapse onto the same three values, so anything
     still reaching for them lands on the flat palette too */
  --pk-ink: var(--pk-text);
  --pk-body: var(--pk-text);
  --pk-soft: var(--pk-text);
  --pk-tint: var(--pk-surface);
  --pk-tint-2: var(--pk-surface);
  --pk-shadow: none;
  --pk-shadow-lift: none;

  background-color: var(--pk-ground);
}

/*----------  no gradients, anywhere  ----------*/

.pk-page .md-box,
.pk-page .pk-book,
.pk-page .pk-trust,
.pk-page .pk-feature-strip,
.pk-page .pk-jump,
.pk-page .pk-price-head,
.pk-page .pk-sec-icon,
.pk-page .pk-day-media.is-plain,
.pk-page .md-card,
.pk-page #pk-overview .md-box,
.pk-page #pk-itinerary .md-box,
.pk-page #pk-inclusions .md-box,
.pk-page #pk-addons .md-box,
.pk-page #pk-info .md-box,
.pk-page #pk-reviews .md-box,
.pk-page #pk-faq .md-box,
.pk-page #pk-itinerary .pk-sec-icon,
.pk-page #pk-inclusions .pk-sec-icon,
.pk-page #pk-addons .pk-sec-icon,
.pk-page #pk-info .pk-sec-icon,
.pk-page #pk-faq .pk-sec-icon,
.pk-page #pk-reviews .pk-sec-icon {
  background-image: none;
  background-color: var(--pk-surface);
  border-color: var(--pk-line);
  box-shadow: none;
}

/* The page wash and the dot texture both go */
.pk-page .pk-top::before,
.pk-page .pk-top::after,
.pk-page .pk-price-head::after,
.pk-page #pk-inclusions .md-box::before,
.pk-page #pk-info .md-box::before,
.pk-page #pk-inclusions .cp-block-title::before,
.pk-page #pk-info .cp-block-title::before {
  display: none;
}

.pk-page .md-card-media {
  border-bottom: 0;
}

/*----------  one text colour  ----------*/

.pk-page .pk-main,
.pk-page .pk-side,
.pk-page .md-crumb,
.pk-page .md-crumb a,
.pk-page .md-crumb .current,
.pk-page .pk-sec-title,
.pk-page .cp-block-title,
.pk-page .cp-section-title,
.pk-page .md-card-title-sm,
.pk-page .md-card-title-sm a,
.pk-page .pk-sec-head small,
.pk-page .cp-muted,
.pk-page .md-box p,
.pk-page .md-box li,
.pk-page .pk-day-body strong,
.pk-page .pk-day-body small,
.pk-page .pk-day-side strong,
.pk-page .pk-day-side small,
.pk-page .pk-day-no,
.pk-page .pk-quick-facts strong,
.pk-page .pk-quick-facts small,
.pk-page .pk-feature-strip li,
.pk-page .pk-jump-label,
.pk-page .pk-jump a,
.pk-page .pk-side-label,
.pk-page .pk-side-label em,
.pk-page .pk-from small,
.pk-page .pk-from strong,
.pk-page .pk-free,
.pk-page .pk-offer-was,
.pk-page .pk-depart-body strong,
.pk-page .pk-depart-body small,
.pk-page .pk-extra-body strong,
.pk-page .pk-extra-body small,
.pk-page .pk-extra-price,
.pk-page .pk-counter,
.pk-page .pk-counter small,
.pk-page .pk-counter-controls input,
.pk-page .pk-summary li,
.pk-page .pk-summary li span:last-child,
.pk-page .pk-summary .pk-total,
.pk-page .pk-summary .pk-total span:last-child,
.pk-page .pk-pending-note,
.pk-page .pk-trust,
.pk-page .md-addon-main strong,
.pk-page .md-addon-main small,
.pk-page .md-addon-price,
.pk-page .cp-faq-q,
.pk-page .cp-faq-a p,
.pk-page .md-meta,
.pk-page .md-price small,
.pk-page .md-price strong {
  color: var(--pk-text);
}

/*----------  one border colour  ----------*/

.pk-page .pk-depart,
.pk-page .pk-extra,
.pk-page .pk-quick-facts li,
.pk-page .md-addon-list li,
.pk-page .pk-summary,
.pk-page .pk-pending-note,
.pk-page .cp-faq li,
.pk-page .cp-faq li.open,
.pk-page .pk-counter-controls button,
.pk-page .pk-counter-controls input,
.pk-page .md-include-icon,
.pk-page .pk-day,
.pk-page .pk-counter,
.pk-page .pk-quick-facts {
  background-color: var(--pk-surface);
  background-image: none;
  border: 1px solid var(--pk-line);
  box-shadow: none;
}

/* Rows keep a single dividing rule instead of a box each */
.pk-page .pk-day,
.pk-page .pk-counter {
  border: 0;
  border-bottom: 1px solid var(--pk-line);
  border-radius: 0;
  margin-inline: 0;
  padding-inline: 0;
}

.pk-page .pk-day:last-child,
.pk-page .pk-counter:last-of-type {
  border-bottom: 0;
}

.pk-page .pk-quick-facts {
  border: 0;
  border-top: 1px solid var(--pk-line);
  border-radius: 0;
}

.pk-page .pk-day:hover,
.pk-page .md-box:hover,
.pk-page #pk-itinerary .md-box:hover,
.pk-page #pk-addons .md-box:hover,
.pk-page #pk-reviews .md-box:hover,
.pk-page #pk-faq .md-box:hover,
.pk-page .pk-feature-strip li:hover,
.pk-page .md-card:hover {
  background-color: var(--pk-surface);
  border-color: var(--pk-line);
  box-shadow: none;
  transform: none;
}

/*----------  the accent, kept only for what you click  ----------*/

.pk-page .pk-sec-icon,
.pk-page .cp-tick-list i,
.pk-page .pk-exclude i,
.pk-page .pk-trust i,
.pk-page .pk-feature-strip i,
.pk-page .md-include-icon,
.pk-page .pk-jump a i,
.pk-page .pk-free i,
.pk-page .pk-pending-note i {
  color: var(--primary);
  background-color: transparent;
  box-shadow: none;
}

.pk-page .md-crumb a:hover,
.pk-page .md-card-title-sm a:hover {
  color: var(--primary);
}

.pk-page .pk-jump a:hover,
.pk-page .pk-counter-controls button:hover {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: none;
}

.pk-page .pk-jump a:hover i {
  color: #fff;
}

/* A picked departure or extra is marked by its border, not by a fill */
.pk-page .pk-depart:hover,
.pk-page .pk-extra:hover,
.pk-page .pk-depart:has(input:checked),
.pk-page .pk-extra:has(input:checked) {
  background-color: var(--pk-surface);
  border-color: var(--primary);
  box-shadow: none;
}

/* Seats left still has to read as a warning, so it keeps its word and drops
   its colour: the text says sold out, the fill no longer has to */
.pk-page .pk-depart-seats,
.pk-page .pk-depart-seats.is-low,
.pk-page .pk-depart-seats.is-none {
  background-color: transparent;
  border: 1px solid var(--pk-line);
  color: var(--pk-text);
}

.pk-page .pk-offer-tag,
.pk-page .md-badge {
  background-color: var(--primary);
  background-image: none;
  color: #fff;
  box-shadow: none;
}

/*----------  one flat button  ----------*/

.pk-page .btn-primary,
.pk-page .btn-primary:hover,
.pk-page .btn-primary:focus-visible,
.pk-page .btn-primary:active {
  background-image: none !important;
  background-color: var(--primary) !important;
  border: 0;
  box-shadow: none;
  transform: none;
  filter: none;
}

.pk-page .btn-primary:hover {
  background-color: color-mix(in srgb, var(--primary) 85%, #000) !important;
}

/*----------  the drawn scenes, in the one accent  ----------*/

.pk-page .pk-day-media.is-plain {
  border: 1px solid var(--pk-line);
}

.pk-page .pk-art-sun,
.pk-page .pk-art-ground {
  fill: color-mix(in srgb, var(--primary) 22%, #fff);
}

.pk-page .pk-art-solid {
  fill: var(--primary);
}

.pk-page .pk-art-accent {
  fill: color-mix(in srgb, var(--primary) 45%, #fff);
}

.pk-page .pk-art-dash {
  stroke: color-mix(in srgb, var(--primary) 45%, #fff);
}

/*----------  hero: one overlay, no colour  ----------*/

.pk-page .pk-hero {
  box-shadow: none;
}

.pk-page .pk-hero::after {
  background-image: linear-gradient(to top, rgba(20, 30, 34, 0.72), rgba(20, 30, 34, 0.1));
}

.pk-page .pk-facts li {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: transparent;
  backdrop-filter: none;
}

.pk-page .pk-title {
  text-shadow: none;
}

/*----------  you may also like  ----------*/
/* Same three colours as the rest of the page. What makes these read as cards
   is the alignment, not colour: one image ratio, a title clamped to two lines
   so every card is the same height, and the price sitting on the same
   baseline across the row. */

.pk-page .cp-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 26px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--pk-line);
}

.pk-page .cp-section-head .cp-muted {
  margin-top: 4px;
  font-size: var(--font-sm);
}

.pk-page .cp-section-head .cp-link {
  color: var(--primary);
  font-size: var(--font-sm);
  font-weight: 600;
  white-space: nowrap;
}

.pk-page .md-card-row {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.pk-page .md-card {
  border-radius: 14px;
  border: 1px solid var(--pk-line);
  background-color: var(--pk-surface);
  transition: border-color 0.2s ease;
}

.pk-page .md-card:hover {
  border-color: var(--primary);
}

/* One ratio for every thumbnail, so a portrait photo cannot break the row */
.pk-page .md-card-media {
  height: auto;
  aspect-ratio: 4 / 3;
  background-color: var(--pk-ground);
}

.pk-page .md-card-media img {
  transition: transform 0.45s ease;
}

.pk-page .md-card:hover .md-card-media img {
  transform: scale(1.05);
}

.pk-page .md-card-media::after {
  display: none;
}

.pk-page .md-badge {
  top: 10px;
  left: 10px;
  padding: 4px 11px;
  font-size: var(--font-xs);
  font-weight: 600;
}

.pk-page .md-card-body {
  gap: 10px;
  padding: 16px 18px 18px;
}

/* Two lines, always: a one line title and a three line title would otherwise
   push the prices out of alignment down the row */
.pk-page .md-card-title-sm {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.pk-page .md-card-facts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: var(--font-xs);
}

/* A hairline between the two facts instead of a bullet or a slash */
.pk-page .md-card-facts .md-stars {
  padding-left: 10px;
  border-left: 1px solid var(--pk-line);
}

.pk-page .md-card-facts .md-stars i {
  color: var(--primary);
  font-size: 10px;
}

.pk-page .md-card-facts .md-stars strong {
  margin-left: 3px;
  font-weight: 600;
}

.pk-page .md-card-foot {
  align-items: center;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--pk-line);
}

.pk-page .md-price small {
  font-size: var(--font-xs);
}

/* The price carries by size, not by a second colour */
.pk-page .md-price strong {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.pk-page .md-card-go {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--pk-line);
  color: var(--pk-text);
  font-size: 15px;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pk-page .md-card:hover .md-card-go,
.pk-page .md-card-go:hover,
.pk-page .md-card-go:focus-visible {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

@media (max-width: 575px) {
  .pk-page .md-card-row {
    grid-template-columns: 1fr;
  }

  .pk-page .md-card-title-sm {
    min-height: 0;
  }
}

/*==========  Flight results  ==========
  The search bar, the filters and the fare cards. Built from the same tokens
  as the rest of the site: no colour that is not already in the palette.      */

.fr-bar {
  padding: 22px 0;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--surface-bg);
}

.fr-search {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.fr-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 150px;
  margin: 0;
}

.fr-field > span {
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--muted);
}

.fr-field select,
.fr-field input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--input-border);
  border-radius: 10px;
  background-color: var(--bg-white);
  color: var(--body-color);
  font-family: var(--body-font);
  font-size: var(--font-sm);
  outline: 0;
}

.fr-field select:focus,
.fr-field input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

.fr-swap {
  padding-bottom: 12px;
  color: var(--primary);
}

.fr-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

/* ---- filters ---- */

.fr-filters {
  position: sticky;
  top: 100px;
  padding: 18px 20px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background-color: var(--bg-white);
}

.fr-filter-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-color);
}

.fr-filter-head a {
  color: var(--primary);
  font-size: var(--font-xs);
}

.fr-filter-group {
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
}

.fr-filter-group:last-of-type {
  border-bottom: 0;
}

.fr-filter-group > p {
  margin-bottom: 9px;
  font-size: var(--font-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.fr-check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 7px;
  font-size: var(--font-sm);
  cursor: pointer;
}

.fr-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  flex: 0 0 auto;
}

.fr-price-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--input-border);
  border-radius: 9px;
  font-size: var(--font-sm);
}

/* ---- results ---- */

.fr-results-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 18px;
}

.fr-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  font-size: var(--font-2xl);
  font-weight: 600;
}

.fr-title i {
  color: var(--primary);
  font-size: 0.8em;
}

.fr-results-head p {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-sm);
}

.fr-sort {
  display: flex;
  gap: 6px;
}

.fr-sort a {
  padding: 7px 14px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  color: var(--body-color);
  font-size: var(--font-xs);
  font-weight: 500;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

.fr-sort a:hover,
.fr-sort a.is-active {
  border-color: var(--primary);
  background-color: color-mix(in srgb, var(--primary) 8%, #fff);
  color: var(--primary);
}

/* ---- one fare ---- */

.fr-card {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 190px;
  gap: 10px 20px;
  align-items: center;
  margin-bottom: 14px;
  padding: 18px 22px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background-color: var(--bg-white);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.fr-card:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border-color));
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.06);
}

/* Spanning both rows keeps the cell under the logo from standing empty */
.fr-card-airline {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  text-align: center;
}

.fr-card-airline img {
  max-width: 74px;
  max-height: 34px;
  object-fit: contain;
  margin: 0 auto 4px;
}

.fr-card-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0 auto 4px;
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--primary) 10%, #fff);
  color: var(--primary);
  font-weight: 700;
}

.fr-card-airline small {
  font-size: var(--font-xs);
  color: var(--muted);
}

.fr-card-number {
  font-weight: 600;
  color: var(--body-color) !important;
}

.fr-card-leg {
  display: flex;
  align-items: center;
  gap: 16px;
}

.fr-time {
  display: flex;
  flex-direction: column;
  min-width: 62px;
}

.fr-time.is-end {
  text-align: right;
}

.fr-time strong {
  font-size: var(--font-lg);
  font-weight: 600;
  line-height: 1.2;
}

.fr-time small {
  color: var(--muted);
  font-size: var(--font-xs);
}

.fr-path {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
}

.fr-path small {
  color: var(--muted);
  font-size: var(--font-xs);
}

.fr-path small.is-direct {
  color: var(--success);
  font-weight: 600;
}

.fr-line {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: var(--border-color);
  position: relative;
}

.fr-line::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--primary);
}

.fr-card-facts {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 0;
  font-size: var(--font-xs);
  color: var(--muted);
}

.fr-card-facts span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.fr-card-facts .is-good {
  color: var(--success);
}

.fr-card-facts .is-low {
  color: var(--warning);
  font-weight: 600;
}

.fr-card-buy {
  grid-row: span 2;
  grid-column: 3;
  text-align: right;
}

.fr-price {
  margin-bottom: 10px;
}

.fr-price strong {
  display: block;
  font-size: var(--font-xl);
  font-weight: 700;
  color: var(--primary);
}

.fr-price small {
  color: var(--muted);
  font-size: var(--font-xs);
}

.fr-empty {
  padding: 60px 24px;
  border: 1px dashed var(--border-color);
  border-radius: 14px;
  text-align: center;
}

.fr-empty i {
  display: block;
  margin-bottom: 12px;
  font-size: 40px;
  color: var(--primary);
}

.fr-empty p {
  margin-bottom: 16px;
  color: var(--muted);
}

.fr-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 18px 0 0;
  padding: 13px 16px;
  border-radius: 10px;
  background-color: var(--surface-bg);
  color: var(--muted);
  font-size: var(--font-sm);
  line-height: 1.6;
}

.fr-note i {
  margin-top: 3px;
  color: var(--primary);
}

@media (max-width: 991px) {
  .fr-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .fr-filters {
    position: static;
  }

  .fr-card {
    grid-template-columns: 100px minmax(0, 1fr);
  }

  .fr-card-buy {
    grid-row: auto;
    grid-column: span 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
    text-align: left;
  }

  .fr-price {
    margin-bottom: 0;
  }
}

@media (max-width: 575px) {
  .fr-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .fr-card-airline {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    text-align: left;
  }

  .fr-card-airline img,
  .fr-card-mark {
    margin: 0;
  }

  .fr-card-facts,
  .fr-card-buy {
    grid-column: 1;
  }
}

/* ---- the flight being booked, shown on every wizard screen ---- */

.fl-trip {
  display: grid;
  gap: 14px;
}

.fl-trip-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fl-trip-head img {
  max-width: 64px;
  max-height: 30px;
  object-fit: contain;
}

.fl-trip-head strong {
  display: block;
  font-size: var(--font-md);
  font-weight: 600;
}

.fl-trip-head small {
  color: var(--muted);
  font-size: var(--font-sm);
}

.fl-trip-leg {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-block: 1px solid var(--border-color);
}

.fl-trip-leg > span {
  display: flex;
  flex-direction: column;
}

.fl-trip-leg > span.is-end {
  text-align: right;
}

.fl-trip-leg strong {
  font-size: var(--font-lg);
  font-weight: 600;
  line-height: 1.2;
}

.fl-trip-leg small {
  color: var(--muted);
  font-size: var(--font-xs);
}

.fl-trip-mid {
  flex: 1 1 auto;
  align-items: center;
  gap: 4px;
}

.fl-trip-mid i {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: var(--border-color);
}

.fl-trip-date {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: var(--font-sm);
}

.fl-trip-date i {
  color: var(--primary);
}

/* The call-back card on a country page */

.md-card-note {
  margin: -6px 0 16px;
  color: var(--muted);
  font-size: var(--font-sm);
  line-height: 1.6;
}

.md-field-hint {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: var(--font-xs);
}

.md-card-foot-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: var(--font-xs);
  text-align: center;
}

/*==========  Hotel results  ==========
  Search bar, filters with the map beside them, and the property cards.
  Same tokens as the rest of the site.                                       */

.hr-bar {
  padding: 22px 0;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--surface-bg);
}

.hr-search {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.hr-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 140px;
  margin: 0;
}

.hr-field-wide {
  flex: 1 1 220px;
}

.hr-field > span {
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--muted);
}

.hr-field select,
.hr-field input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--input-border);
  border-radius: 10px;
  background-color: var(--bg-white);
  color: var(--body-color);
  font-family: var(--body-font);
  font-size: var(--font-sm);
  outline: 0;
}

.hr-field select:focus,
.hr-field input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

.hr-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

/* ---- filters and the map ---- */

.hr-filters {
  position: sticky;
  top: 100px;
}

.hr-filters > form {
  padding: 18px 20px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background-color: var(--bg-white);
}

.hr-filter-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.hr-filter-head a {
  color: var(--primary);
  font-size: var(--font-xs);
}

.hr-filter-group {
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
}

.hr-filter-group:last-of-type {
  border-bottom: 0;
}

.hr-filter-group > p {
  margin-bottom: 9px;
  font-size: var(--font-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.hr-check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 7px;
  font-size: var(--font-sm);
  cursor: pointer;
}

.hr-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  flex: 0 0 auto;
}

.hr-price-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--input-border);
  border-radius: 9px;
  font-size: var(--font-sm);
}

.hr-map {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background-color: var(--bg-white);
}

.hr-map-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  font-size: var(--font-sm);
  font-weight: 600;
}

.hr-map-title i {
  color: var(--primary);
}

.hr-map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--surface-bg);
}

.hr-map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.hr-map-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: var(--font-xs);
}

/* ---- results ---- */

.hr-results-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 18px;
}

.hr-title {
  margin: 0 0 4px;
  font-size: var(--font-2xl);
  font-weight: 600;
}

.hr-results-head p {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-sm);
}

.hr-sort {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hr-sort a {
  padding: 7px 14px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  color: var(--body-color);
  font-size: var(--font-xs);
  font-weight: 500;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

.hr-sort a:hover,
.hr-sort a.is-active {
  border-color: var(--primary);
  background-color: color-mix(in srgb, var(--primary) 8%, #fff);
  color: var(--primary);
}

/* ---- one property ---- */

.hr-card {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 190px;
  gap: 18px;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background-color: var(--bg-white);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.hr-card:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border-color));
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.06);
}

.hr-card-media {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--surface-bg);
}

.hr-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hr-card-noimg {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--primary);
  font-size: 30px;
}

.hr-card-title {
  margin: 0 0 4px;
  font-size: var(--font-lg);
  font-weight: 600;
}

.hr-card-stars {
  margin-bottom: 6px;
  color: #f5a623;
  font-size: var(--font-sm);
}

.hr-card-stars span {
  margin-left: 6px;
  color: var(--muted);
}

.hr-card-where {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: var(--font-sm);
}

.hr-card-where i {
  color: var(--primary);
}

.hr-card-where strong {
  color: var(--body-color);
}

.hr-card-map {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: var(--primary);
  font-size: var(--font-xs);
  font-weight: 500;
}

.hr-card-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  color: var(--muted);
  font-size: var(--font-xs);
}

.hr-card-facts span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.hr-card-facts .is-good {
  color: var(--success);
}

.hr-card-buy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  text-align: right;
}

.hr-score {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: auto;
}

.hr-score strong {
  display: grid;
  place-items: center;
  min-width: 40px;
  padding: 6px 8px;
  border-radius: 9px 9px 9px 2px;
  background-color: var(--primary);
  color: #fff;
  font-size: var(--font-sm);
}

.hr-score small {
  color: var(--muted);
  font-size: var(--font-xs);
}

.hr-price {
  margin: 12px 0 10px;
}

.hr-price strong {
  display: block;
  font-size: var(--font-xl);
  font-weight: 700;
  color: var(--primary);
}

.hr-price small {
  display: block;
  color: var(--muted);
  font-size: var(--font-xs);
}

.hr-empty {
  padding: 60px 24px;
  border: 1px dashed var(--border-color);
  border-radius: 14px;
  text-align: center;
}

.hr-empty i {
  display: block;
  margin-bottom: 12px;
  font-size: 40px;
  color: var(--primary);
}

.hr-empty p {
  margin-bottom: 16px;
  color: var(--muted);
}

.hr-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 18px 0 0;
  padding: 13px 16px;
  border-radius: 10px;
  background-color: var(--surface-bg);
  color: var(--muted);
  font-size: var(--font-sm);
  line-height: 1.6;
}

.hr-note i {
  margin-top: 3px;
  color: var(--primary);
}

@media (max-width: 991px) {
  .hr-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .hr-filters {
    position: static;
  }

  .hr-card {
    grid-template-columns: 160px minmax(0, 1fr);
  }

  .hr-card-buy {
    grid-column: span 2;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
    text-align: left;
  }

  .hr-price {
    margin: 0;
  }

  .hr-score {
    margin-bottom: 0;
  }
}

@media (max-width: 575px) {
  .hr-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .hr-card-buy {
    grid-column: 1;
    flex-wrap: wrap;
    gap: 10px;
  }
}

/* ---- the property page ---- */

.hp-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 22px;
  border-radius: 14px;
  overflow: hidden;
}

.hp-gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.hp-gallery > *:first-child {
  grid-row: span 2;
}

.hp-gallery > *:first-child img {
  aspect-ratio: 16 / 11;
}

.hp-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 20px;
}

.hp-title {
  margin: 0 0 6px;
  font-size: var(--font-2xl);
  font-weight: 600;
}

.hp-stars {
  color: #f5a623;
  margin-bottom: 6px;
}

.hp-where {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: var(--font-sm);
}

.hp-where i {
  color: var(--primary);
}

.hp-map-link {
  color: var(--primary);
  font-weight: 500;
}

.hp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 26px;
  align-items: start;
}

.hp-sec {
  margin-bottom: 30px;
  scroll-margin-top: 110px;
}

.hp-sec-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 14px;
}

.hp-sec-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background-color: color-mix(in srgb, var(--primary) 10%, #fff);
  color: var(--primary);
  font-size: 1.15rem;
}

.hp-sec-title {
  margin: 0;
  font-size: var(--font-xl);
  font-weight: 600;
}

.hp-sec-head small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--font-sm);
}

.hp-map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--surface-bg);
}

.hp-map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.hp-nearby {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.hp-nearby li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 13px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  font-size: var(--font-sm);
}

.hp-nearby strong {
  color: var(--primary);
  white-space: nowrap;
}

.hp-room {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 18px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-color);
}

.hp-room:last-child {
  border-bottom: 0;
}

.hp-room-name {
  margin: 0 0 6px;
  font-size: var(--font-md);
  font-weight: 600;
}

.hp-room-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: var(--font-sm);
}

.hp-room-facts span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.hp-room-facts .is-good {
  color: var(--success);
}

.hp-room-buy {
  text-align: right;
}

.hp-room-price {
  margin-bottom: 8px;
}

.hp-room-price strong {
  display: block;
  font-size: var(--font-lg);
  font-weight: 700;
  color: var(--primary);
}

.hp-room-price small {
  display: block;
  color: var(--muted);
  font-size: var(--font-xs);
}

.hp-side {
  position: sticky;
  top: 100px;
  padding: 20px 22px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background-color: var(--bg-white);
}

.hp-side-dates {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}

.hp-side-note {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background-color: var(--surface-bg);
  color: var(--muted);
  font-size: var(--font-xs);
  line-height: 1.6;
}

@media (max-width: 991px) {
  .hp-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .hp-side {
    position: static;
  }

  .hp-gallery {
    grid-template-columns: 1fr 1fr;
  }

  .hp-room {
    grid-template-columns: minmax(0, 1fr);
  }

  .hp-room-buy {
    text-align: left;
  }
}

/*==========  Banner search bar  ==========
  One card, four tabs, one row of fields.

  The layout changes shape three times on the way down rather than being left
  to flex-wrap. Wrapping decided where the button went, and between roughly
  1000px and 1150px it put the button alone on a second line, hanging off the
  left — the one thing on the page that has to look deliberate looking like a
  mistake. Each width below is laid out on purpose instead.                   */

.hs-wrap {
  --hs-control: 48px;
  position: relative;
  z-index: 3;
  max-width: 1140px;
  margin: 34px auto 0;
}

/* The box and everything structural inside it are written as descendant
   selectors on purpose. The reset at the top of this file is
   `*:where(…) { all: unset }`, which carries no specificity of its own — but a
   single class only clears it by one step, and any later single-class rule in
   the theme (or a stale copy of this file still sitting in a browser cache)
   lands on the same rung and can flatten the padding that holds this card
   open. Two classes puts the layout out of reach of both. */
.hs-wrap .hs-box {
  border-radius: 16px;
  background-color: var(--bg-white);
  box-shadow: 0 18px 44px rgba(16, 24, 40, 0.14);
  overflow: hidden;
}

/* ---- tabs ---- */

.hs-box .hs-tabs {
  display: flex;
  /* Centred under the banner heading, which is centred too. The tabs are
     narrower than the box, so left-aligning them left a wide empty gap on
     the right.

     `safe center` centres while the strip has room and falls back to start
     alignment the moment it overflows -- a plain `center` overflows equally
     both ways, and the part that spills off the left cannot be scrolled back
     to, which would put the first tab out of reach. The plain value is kept
     first for browsers that do not understand `safe`; they are handled at
     the narrow widths by the @supports block further down. */
  justify-content: center;
  justify-content: safe center;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--border-color);
  background-color: color-mix(in srgb, var(--muted) 7%, var(--bg-white));
}

.hs-box .hs-tabs::-webkit-scrollbar {
  display: none;
}

/* Browsers too old for `safe` keep the plain `center` above, which is right on
   a wide screen and wrong on a narrow one. They get start alignment at the
   widths where the strip scrolls, so the first tab stays reachable. */
@supports not (justify-content: safe center) {
  @media (max-width: 767px) {
    .hs-box .hs-tabs {
      justify-content: flex-start;
    }
  }
}

.hs-box .hs-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 15px 24px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--muted);
  font-family: var(--body-font);
  font-size: var(--font-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.hs-box .hs-tab i {
  font-size: 1.05rem;
  line-height: 1;
}

.hs-box .hs-tab:hover {
  color: var(--primary);
  background-color: color-mix(in srgb, var(--primary) 5%, transparent);
}

.hs-box .hs-tab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -3px;
}

.hs-box .hs-tab.is-active {
  border-bottom-color: var(--primary);
  background-color: var(--bg-white);
  color: var(--primary);
}

/* ---- panels ---- */

.hs-box .hs-panel {
  display: none;
  padding: 20px 22px;
}

/* Every width lays the fields out on a grid. The button is a grid item like
   any other, so when it does take a row of its own it fills that row and
   reads as the call to action rather than as something left over. */
.hs-box .hs-panel.is-active {
  display: grid;
  align-items: end;
  gap: 16px 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* The token the form carries is a flex/grid item like any other once the
   panel becomes a container, and a reset that revives hidden inputs would
   open a phantom first column. Nothing but the fields lays out here. */
.hs-box .hs-panel > input[type="hidden"] {
  display: none;
}

.hs-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  min-width: 0;
}

.hs-field > span {
  font-size: var(--font-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
}

.hs-field select,
.hs-field input {
  width: 100%;
  height: var(--hs-control);
  padding: 0 14px;
  border: 1px solid var(--input-border);
  border-radius: 10px;
  background-color: var(--bg-white);
  color: var(--body-color);
  font-family: var(--body-font);
  font-size: var(--font-sm);
  outline: 0;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* The global reset strips appearance from every control, which left these
   selects looking exactly like text boxes — nothing said they could be
   opened. The chevron is drawn back on. */
.hs-field select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238094ae' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 15px 15px;
  text-overflow: ellipsis;
}

/* The chosen value reads from the middle of the field rather than hugging the
   left edge. Centring is measured inside the padding box, so the space
   reserved on the right for the chevron has to be mirrored on the left --
   without that the text sits noticeably left of true centre. */
.hs-field select,
.hs-field input,
.hs-field > span {
  text-align: left;
}

.hs-field select {
  padding-left: 36px;
  /* Once appearance is stripped, Chrome lays the selected value out at the top
     of the control rather than centring it -- the text sat about 10px high
     while the date input beside it looked right. Giving the line box the full
     inner height (the control minus its two 1px borders) makes top alignment
     and centred alignment the same thing. */
  line-height: calc(var(--hs-control) - 2px);
}

.hs-field input[type="date"] {
  padding-right: 10px;
  padding-left: 10px;
}

.hs-field input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.55;
}

.hs-field select:hover,
.hs-field input:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--input-border));
}

.hs-field select:focus,
.hs-field input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

.hs-go {
  height: var(--hs-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  padding-left: 18px;
  padding-right: 18px;
}

/* ---- 1200px and up: everything on one line ----
   The fields share what is left after the button, so nothing wraps and the
   two number fields stay narrow. */
@media (min-width: 1200px) {
  .hs-box .hs-panel.is-active {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
  }

  .hs-field {
    flex: 1 1 0;
  }

  .hs-field-wide {
    flex: 1.5 1 0;
  }

  .hs-field-small {
    flex: 0 0 96px;
  }

  .hs-go {
    flex: 0 0 auto;
  }
}

/* ---- 992-1199px: three across, button on its own full-width row ---- */
@media (min-width: 992px) and (max-width: 1199px) {
  .hs-box .hs-panel.is-active {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hs-field-wide {
    grid-column: span 2;
  }

  .hs-go {
    grid-column: 1 / -1;
  }
}

/* ---- 768-991px: two across ---- */
@media (min-width: 768px) and (max-width: 991px) {
  .hs-box .hs-panel.is-active {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hs-field-wide {
    grid-column: 1 / -1;
  }

  .hs-go {
    grid-column: 1 / -1;
  }
}

/* ---- below 768px ----
   One field per row, except the pairs that belong together — nights, rooms
   and guests read as a pair and stacking them makes the card needlessly
   long. A 16px control font is not a style choice: anything smaller and iOS
   Safari zooms the whole page the moment a field is tapped. */
@media (max-width: 767px) {
  .hs-wrap {
    --hs-control: 50px;
    margin-top: 26px;
  }

  .hs-wrap .hs-box {
    border-radius: 14px;
  }

  /* Five services do not fit on one line on a phone. Scrolling the strip
     leaves the last one sliced in half at the edge, which reads as a broken
     layout rather than an invitation to swipe -- and a tab nobody notices is
     a service nobody buys. Wrapping keeps all five visible and tappable, and
     each row fills the width evenly instead of trailing off. */
  .hs-box .hs-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  /* A basis of roughly a third puts three on the first row and lets the
     remaining two share the second. Left to pack themselves the tabs came out
     four-then-one, with the last one stranded alone across the full width,
     which looks like a mistake rather than a layout. */
  .hs-box .hs-tab {
    flex: 1 1 30%;
    justify-content: center;
    padding: 13px 14px;
    font-size: var(--font-xs);
  }

  .hs-box .hs-panel {
    padding: 18px 16px;
  }

  .hs-box .hs-panel.is-active {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
  }

  .hs-field,
  .hs-field-wide,
  .hs-go {
    grid-column: 1 / -1;
  }

  /* The two halves of a pair — the dates, the room and guest counts — sit
     side by side. Left to stack they turn a five-field form into a column
     tall enough to hide the button below the fold. */
  .hs-field-small,
  .hs-field-half {
    grid-column: span 1;
  }

  .hs-field select,
  .hs-field input {
    font-size: 1rem;
  }
}

/* ---- narrow phones ----
   The icons used to be hidden here so the tabs could be squeezed onto one
   line. Now that the strip wraps they have room again, and they are worth
   keeping: at this size the labels are small and the icon is what the eye
   picks up first. Only the spacing tightens. */
@media (max-width: 420px) {
  .hs-box .hs-tab {
    gap: 6px;
    padding: 12px 10px;
  }
}

/* ==========================================================================
   Language and currency switchers
   ==========================================================================
   With every language and currency enabled these menus run to dozens of
   rows, so each one carries a search box pinned above a scrolling list. The
   box sits outside .switcher-list because .max-h-300 scrolls its own
   contents — inside the list the field would scroll away mid-search. */

.switcher-flag {
  width: 20px;
  height: 15px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
  /* Flags with a white field (Japan, Poland) would otherwise dissolve into
     the menu background */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.switcher .lang-btn .switcher-flag {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.switcher-menu {
  padding: 0;
  min-width: 265px;
  overflow: hidden;
}

.switcher-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
}

.switcher-search i {
  color: var(--body-color);
  opacity: 0.5;
  font-size: 0.875rem;
  line-height: 1;
}

.switcher-search input {
  border: 0;
  outline: 0;
  width: 100%;
  padding: 0;
  background: transparent;
  color: var(--body-color);
  font-size: 0.875rem;
}

/* WebKit draws its own clear button on type=search, and it lands on top of
   the rounded corner */
.switcher-search input::-webkit-search-cancel-button {
  cursor: pointer;
}

.switcher-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}

.switcher-list .dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.switcher-label {
  white-space: nowrap;
}

/* The currency name is the searchable part, not something to read at a
   glance, so it gives way before the code or the symbol do */
.switcher-note {
  color: var(--body-color);
  opacity: 0.55;
  font-size: 0.8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* A flex child will not shrink below its content width without this, and
     the ellipsis never gets a chance to appear */
  min-width: 0;
}

/* Sits straight after the code rather than pushed out to the right edge —
   with the currency name gone there is nothing in between to justify the gap */
.switcher-symbol {
  opacity: 0.75;
}

.switcher-empty {
  padding: 10px 15px;
  font-size: 0.875rem;
  color: var(--body-color);
  opacity: 0.6;
}

/* ---- phones and tablets ----
   iOS Safari zooms the page in whenever a focused field is under 16px and
   never zooms back out, which leaves the visitor stranded mid-page. The rows
   grow to a thumb-sized target at the same time: 36px is comfortable under a
   mouse and easy to miss with a finger in a list this long. */
@media (max-width: 991px) {
  .switcher-search {
    padding: 4px 12px;
  }

  .switcher-search input {
    font-size: 16px;
    padding-block: 10px;
  }

  .switcher-list .dropdown-item {
    padding-block: 10px;
  }
}

/*=============================================
=          Hajj & Umrah module                =
=============================================*/
/* Built on the shared .pk-* and .md-* components so a pilgrimage page and a
   tour page are recognisably the same product. Only the parts a pilgrimage
   decides on differently — distance from the mosque, and price by room — get
   styling of their own. */

/*----------  distance from the two mosques  ----------*/
/* The number a pilgrim chooses on. It sits above every other section for that
   reason, and it is the one place on the page that shouts. */

.hajj-haram-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 20px 0 4px;
}

.hajj-haram-card {
  padding: 20px 22px;
  border: 1px solid var(--border-color);
  border-radius: var(--pk-radius, 16px);
  background: var(--bg-white);
}

.hajj-haram-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.hajj-haram-city {
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}

.hajj-haram-stars {
  color: #e8a33d;
  font-size: 13px;
  font-weight: 600;
}

.hajj-haram-card > strong {
  display: block;
  margin-bottom: 12px;
  font-size: 18px;
  line-height: 1.3;
  color: var(--display-color);
}

.hajj-haram-distance,
.hajj-haram-nights {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 6px;
  font-size: var(--font-sm);
  color: var(--body-color);
}

.hajj-haram-distance i,
.hajj-haram-nights i {
  flex: none;
  color: var(--primary);
}

/* The distance itself is the headline of the card, so it is the only figure
   given weight */
.hajj-haram-distance b {
  font-size: 17px;
  color: var(--display-color);
}

/*----------  rooms and prices  ----------*/
/* A price list, not a table: the bed count leads, because that is what a
   pilgrim is actually choosing between. */

.hajj-room-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.hajj-room-list > li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  transition: border-color .2s, background-color .2s;
}

.hajj-room-list > li:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border-color));
  background: color-mix(in srgb, var(--primary) 3%, transparent);
}

.hajj-room-list > li.is-full {
  opacity: .55;
}

.hajj-room-list > li.is-full:hover {
  border-color: var(--border-color);
  background: none;
}

/* The bed count as a numeral, so four rows can be compared at a glance */
.hajj-room-beds {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 56px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--primary);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.hajj-room-beds small {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .8;
}

.hajj-room-main strong {
  display: block;
  font-size: 16px;
  color: var(--display-color);
}

.hajj-room-main small {
  display: block;
  margin-top: 2px;
  font-size: var(--font-sm);
  color: var(--muted);
}

.hajj-room-main em {
  font-style: normal;
  font-weight: 600;
}

.hajj-room-cost {
  text-align: right;
  white-space: nowrap;
}

.hajj-room-cost strong {
  display: block;
  font-size: 19px;
  color: var(--primary);
}

.hajj-room-cost small {
  display: block;
  font-size: 12px;
  color: var(--muted);
}

.hajj-room-main .is-low,
.hajj-room-seats .is-low { color: #b8860b; }

.hajj-room-main .is-none,
.hajj-room-seats .is-none { color: #c0392b; }

.hajj-room-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  font-size: var(--font-sm);
  color: var(--body-color);
}

.hajj-room-note i {
  flex: none;
  margin-top: 2px;
  color: var(--primary);
}

/*----------  the rules nobody may skip  ----------*/
/* Vaccination and passport validity turn a pilgrim away at the border, so they
   are stated by the page rather than left to the admin's free text */

.hajj-rules {
  border-left: 3px solid var(--primary);
}

.hajj-rules .cp-tick-list li i {
  color: var(--primary);
}

/*----------  booking sidebar  ----------*/

.hajj-rooms .pk-depart-seats,
.hajj-groups .pk-depart-seats {
  white-space: nowrap;
}

.hajj-groups .pk-depart-body small {
  display: block;
}

.pk-summary .pk-deposit {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-color);
  font-weight: 600;
  color: var(--primary);
}

/*----------  listing pages  ----------*/

.hajj-type-tabs a.is-active {
  background: var(--primary);
  color: #fff;
}

.hajj-type-tabs a.is-active span {
  background: rgba(255, 255, 255, .25);
  color: #fff;
}

/* A package that cannot be booked keeps its button, greyed out, so the card
   holds its shape in the grid */
.package-btn.is-disabled {
  pointer-events: none;
  opacity: .5;
}

/*----------  the callback form  ----------*/
/* Sits at the foot of every Hajj page. A pilgrimage is rarely bought on a first
   visit, so this is the page's real conversion point — it earns a dark panel
   rather than another white box below a white box. */

.hajj-enquiry-section {
  padding-block: 70px;
}

.hajj-enquiry {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 48px;
  align-items: center;
  padding: 46px 48px;
  border-radius: 22px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary) 92%, #05221c),
    color-mix(in srgb, var(--primary) 55%, #04170f));
  color: #fff;
  overflow: hidden;
  position: relative;
}

/* A soft light behind the copy, so the panel is not a flat rectangle */
.hajj-enquiry::before {
  content: "";
  position: absolute;
  top: -120px;
  left: -80px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: #fff;
  opacity: .06;
  pointer-events: none;
}

.hajj-enquiry-text {
  position: relative;
}

.hajj-enquiry-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  font-size: 13px;
  font-weight: 600;
}

.hajj-enquiry-text h2 {
  margin-bottom: 12px;
  color: #fff;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.2;
}

.hajj-enquiry-text > p {
  margin-bottom: 22px;
  color: rgba(255, 255, 255, .82);
  font-size: var(--font-md);
  line-height: 1.6;
}

.hajj-enquiry-text > p strong {
  color: #fff;
}

.hajj-enquiry-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.hajj-enquiry-points li {
  display: flex;
  align-items: center;
  gap: 11px;
  color: rgba(255, 255, 255, .9);
  font-size: var(--font-sm);
}

.hajj-enquiry-points i {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .14);
  font-size: 14px;
}

/* Which package they were reading when they asked */
.hajj-enquiry-about {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 22px 0 0;
  padding: 12px 15px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .1);
  font-size: var(--font-sm);
  color: rgba(255, 255, 255, .92);
}

.hajj-enquiry-about i {
  flex: none;
}

/*----------  the form card  ----------*/

.hajj-enquiry-form {
  position: relative;
  padding: 28px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(4, 23, 15, .22);
}

.hajj-enquiry-form .form-label {
  margin-bottom: 6px;
  color: var(--display-color);
  font-size: 13px;
  font-weight: 600;
}

.hajj-enquiry-form .form-control {
  min-height: 46px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--section-bg-2, #f7f8fc);
  font-size: var(--font-sm);
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}

.hajj-enquiry-form textarea.form-control {
  min-height: 74px;
  resize: vertical;
}

.hajj-enquiry-form .form-control:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}

.hajj-enquiry-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 4px;
  min-height: 50px;
  font-weight: 600;
}

.hajj-enquiry-submit i {
  font-size: 18px;
}

.hajj-enquiry-privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
}

/*----------  narrow screens  ----------*/

@media (max-width: 991px) {
  .hajj-enquiry {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 34px 30px;
  }
}

@media (max-width: 575px) {
  .hajj-enquiry-section {
    padding-block: 44px;
  }

  .hajj-enquiry {
    padding: 26px 20px;
    border-radius: 18px;
  }

  .hajj-enquiry-form {
    padding: 20px 18px;
  }

  /* 16px stops iOS zooming the page when a field takes focus */
  .hajj-enquiry-form .form-control {
    font-size: 16px;
  }
}

/*----------  apply flow  ----------*/

/* Destination is shown, never asked. Styled as a fact about the trip rather
   than a field somebody forgot to fill in. */
.aw-locked-field {
  padding: 12px 14px;
  border: 1px dashed var(--border-color);
  border-radius: 10px;
  background: var(--section-bg-2, #f7f8fc);
}

.aw-locked-value {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.aw-locked-value i {
  color: var(--primary);
}

.aw-locked-note {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  opacity: .7;
}

/* Vaccination, pulled out of the document list because it is the one thing
   Saudi turns a pilgrim away for */
.aw-vaccine-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.aw-vaccine-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.aw-vaccine {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  cursor: pointer;
}

.aw-vaccine-body strong { display: block; }
.aw-vaccine-body small { display: block; font-size: 12px; opacity: .7; }

.aw-vaccine-upload {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px;
  border: 1px dashed var(--border-color);
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;
}

.aw-vaccine-upload.has-file {
  border-style: solid;
  border-color: #2e9e5b;
  color: #2e9e5b;
}

.aw-mahram {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-color);
}

.md-field-note {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  opacity: .7;
}

/*----------  phones  ----------*/

@media (max-width: 767px) {
  .hajj-enquiry {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px;
  }

  /* The price drops under the name rather than squeezing three columns into
     360px, and the bed numeral stays as the anchor on the left */
  .hajj-room-list > li {
    grid-template-columns: 48px minmax(0, 1fr);
    row-gap: 6px;
    padding: 14px;
  }

  .hajj-room-beds {
    height: 48px;
    font-size: 19px;
  }

  .hajj-room-cost {
    grid-column: 2;
    text-align: left;
  }

  .hajj-room-cost strong {
    font-size: 17px;
  }

  .hajj-haram-card {
    padding: 16px 18px;
  }

  /* 44px rows on a phone, matching the rest of the site */
  .aw-vaccine-list > li {
    padding-block: 14px;
  }
}

/* Pilgrims on the customer's own booking page. Each row says who they are and
   what is still blocking them from flying. */
.ub-pilgrims {
    display: grid;
    gap: 10px;
}

.ub-pilgrim {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border-color, #e6e8ef);
    border-radius: 10px;
}

.ub-pilgrim strong { display: block; }
.ub-pilgrim small { display: block; font-size: 12px; opacity: .7; }

.ub-pilgrim-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/*----------  hero artwork  ----------*/
/* Fills the hero when a package has no photograph. Colours come from the brand
   token, so the admin's colour picker restyles it along with everything else. */

.hajj-hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hajj-art-sky-top    { stop-color: color-mix(in srgb, var(--primary) 82%, #05221c); }
.hajj-art-sky-bottom { stop-color: color-mix(in srgb, var(--primary) 42%, #04170f); }

.hajj-art-moon   { fill: #fff; opacity: .16; }
.hajj-art-far    { fill: #fff; opacity: .18; }
.hajj-art-near   { fill: #fff; opacity: .30; }
.hajj-art-arch   { fill: #04170f; opacity: .22; }
.hajj-art-ground { fill: #04170f; opacity: .30; }

/*----------  package card  ----------*/
/* Pilgrimage names run long — "Ziyarah — Makkah & Madinah Historic Sites 6
   Nights" — and a row of cards whose titles wrap to five lines reads as a
   broken grid rather than a set of choices.

   Only from the breakpoint where cards sit side by side. On a phone each card
   is its own row, nothing has to line up with anything, and there is no reason
   to hide half a package's name. */

@media (min-width: 576px) {
  /* The clamp goes on the link, not the heading. .content is a flex container,
     and a flex item's display is blockified, so -webkit-box on the heading is
     silently discarded and the clamp never applies. The <a> inside is an
     ordinary inline child, where it works. */
  .hajj-package-card .title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Reserves the second line so a one-line name still lines up with its
     neighbours */
  .hajj-package-card .title {
    min-height: 2.2em;
  }

  /* The category line is a label, not a sentence. nowrap rather than a clamp,
     for the same flex-item reason. */
  .hajj-package-card .subtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Tags are a glance, not a list. A card that grows a third row of them stops
     lining up with the rest. */
  .hajj-package-card .feature-tags {
    max-height: 4.4em;
    overflow: hidden;
  }
}

/*----------  search bar inside the banner  ----------*/
/* The bar is dropped into the banner's own container from the page builder, so
   it inherits the hero's width but none of its spacing. This gives it room to
   breathe under the headline without the banner growing taller than it needs. */

.hs-in-banner {
  margin-top: 40px;
}

@media (max-width: 991px) {
  .hs-in-banner {
    margin-top: 28px;
  }
}

/*==================================================================
  popular destinations, split by region
  ------------------------------------------------------------------
  The home page offers every destination we process, but ninety cards
  in one grid is a wall rather than a choice. The regions become tabs
  over a single grid, so the page stays one screen tall whatever the
  catalogue grows to.
==================================================================*/

.pd-intro {
  margin-bottom: calc(var(--section-gap) * 0.45);
}

.pd-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-bottom: calc(var(--section-gap) * 0.5);
  border-bottom: 1px solid var(--border-color);
}

.pd-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* The active tab is joined to the grid below it by its own underline, which is
   why the strip carries a border and the button overlaps it by a pixel */
.pd-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-family: var(--body-font);
  font-size: var(--font-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.pd-tab:hover {
  color: var(--body-color);
}

.pd-tab.is-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.pd-tab > span {
  padding: 1px 7px;
  border-radius: 999px;
  background-color: var(--body-bg);
  color: var(--muted);
  font-size: var(--font-xxs);
  font-weight: 700;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.pd-tab.is-active > span {
  background-color: color-mix(in srgb, var(--primary) 12%, #fff);
  color: var(--primary);
}

.pd-all {
  white-space: nowrap;
}

.pd-panel {
  display: none;
}

.pd-panel.is-active {
  display: block;
  animation: pdPanelIn 0.3s ease both;
}

@keyframes pdPanelIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pd-panel.is-active {
    animation: none;
  }
}

.pd-more {
  margin-top: 20px;
  text-align: center;
}

/* Below 576px the tab strip scrolls sideways rather than stacking into four
   rows and pushing the cards off the first screen */
@media (max-width: 575px) {
  .pd-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .pd-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .pd-tabs::-webkit-scrollbar {
    display: none;
  }

  .pd-all {
    padding-bottom: 12px;
  }
}

/*==================================================================
  maintenance mode — the admin's reminder bar
  ------------------------------------------------------------------
  While the mode is on, an admin is the only person who reaches the
  real site, and it looks entirely normal to them. That is how a site
  gets left closed to customers overnight, so the bar sits above
  everything and stays there.
==================================================================*/

.mt-live-bar {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 9px 16px;
  background-color: #b45309;
  color: #fff;
  font-size: var(--font-sm);
  font-weight: 500;
  text-align: center;
}

.mt-live-bar i {
  font-size: 16px;
}

.mt-live-bar a {
  padding: 3px 12px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}

.mt-live-bar a:hover {
  background-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

/* =========================================================
   VISA DOSSIER - MOBILE RESPONSIVE PATCH
   Keeps existing desktop/tablet design intact.
   ========================================================= */
@media (max-width: 575px) {
  .cp-dossier,
  .cp-dossier-head,
  .cp-dossier-body,
  .cp-dossier-main,
  .cp-rail { max-width: 100%; min-width: 0; }

  .cp-dossier-head {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 20px 16px;
  }

  .cp-dossier-id { width: 100%; min-width: 0; gap: 10px; }
  .cp-dossier-id .cp-flag-xl { flex: 0 0 42px; width: 42px; height: 42px; }
  .cp-dossier-titles { min-width: 0; width: 100%; }
  .cp-dossier-head .cp-section-title {
    font-size: 20px;
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .cp-dossier-sub { max-width: 100%; font-size: 12px; line-height: 1.55; }

  .cp-dossier-meta { width: 100%; min-width: 0; }
  .cp-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
  }
  .cp-fact {
    min-width: 0;
    width: 100%;
    padding: 9px 10px;
    gap: 8px;
  }
  .cp-fact span { min-width: 0; width: 100%; }
  .cp-fact small { font-size: 9px; line-height: 1.3; white-space: normal; }
  .cp-fact strong {
    display: block;
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .cp-dossier-meta > .btn { width: 100%; justify-content: center; }

  .cp-tabs-rail {
    width: 100%;
    min-width: 0;
    gap: 6px;
    padding: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .cp-tabs-rail .cp-tab {
    flex: 0 0 auto;
    width: auto;
    min-width: max-content;
    padding: 8px 10px;
    font-size: 12px;
  }

  .cp-dossier-main { width: 100%; padding: 20px 14px 24px; }
  .cp-pane-head { gap: 10px; padding-bottom: 12px; margin-bottom: 18px; }
  .cp-pane-head > i { width: 38px; height: 38px; flex: 0 0 38px; }

  .cp-overview {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 18px;
  }
  .cp-overview-media { width: 100%; height: 210px; }
  .cp-overview > * { min-width: 0; }
  .cp-tick-grid { grid-template-columns: 1fr; }

  .cp-point { min-width: 0; padding: 12px; gap: 10px; line-height: 1.6; }
  .cp-doc-grid { grid-template-columns: 1fr; }

  .cp-time-card { width: 100%; padding: 16px; }
  .cp-time-text { width: 100%; min-width: 0; }
  .cp-timeline { grid-template-columns: 1fr; gap: 14px; }
  .cp-stage::after { display: none; }

  .cp-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cp-fee-table { min-width: 650px; }

  .cp-faq-q { padding: 13px 14px; line-height: 1.5; }
  .cp-faq-a > p { padding: 0 14px 14px; line-height: 1.65; }
}

@media (max-width: 360px) {
  .cp-facts { grid-template-columns: 1fr; }
  .cp-dossier-head { padding-inline: 14px; }
  .cp-dossier-main { padding-inline: 12px; }
}