/*
 * Rihla brand palette
 *
 * Logo colours: red #c1272d, green #006233 and navy #162a44.
 * White-tinted red/green surfaces keep the brand colours restrained.
 */

:root {
  --rihla-ink: #162a44;
  --rihla-ink-deep: #102033;
  --rihla-red-hover: #a51f25;
  --rihla-red-soft: #f9e5e6;
  --rihla-red-wash: #fdf4f5;
  --rihla-border: #f0cbcd;
  --rihla-muted: #5e6c7e;
  --rihla-red: #c1272d;
  --rihla-green: #006233;
  --rihla-green-soft: #e6efeb;

  /* GoTrip's semantic tokens power buttons, links, tabs and pagination. */
  --color-dark-1: var(--rihla-ink);
  --color-dark-2: #203b5b;
  --color-dark-3: #162a44;
  --color-dark-4: #30475f;
  --color-light-1: var(--rihla-muted);
  --color-light-2: var(--rihla-red-wash);
  --color-light-3: var(--rihla-red-wash);
  --color-border: var(--rihla-border);
  --color-blue-1: var(--rihla-red);
  --color-blue-2: var(--rihla-red-soft);
  --color-green-1: var(--rihla-green-soft);
  --color-green-2: var(--rihla-green);
  --color-red-1: var(--rihla-red);
  --color-red-2: var(--rihla-red-hover);
  --color-red-3: var(--rihla-red-soft);

  /* Bootstrap-powered forms and legacy components. */
  --bs-primary: var(--rihla-red);
  --bs-primary-rgb: 193, 39, 45;
  --bs-link-color: var(--rihla-red-hover);
  --bs-link-hover-color: #89191f;
}

/* Override the admin-configured legacy "main colour" stylesheet. */
.text-blue-1,
.header .header-menu .menu .subnav > li > a:hover,
.bravo_wrap .footer .menu-footer .menu__nav li .subnav > li > a:hover,
.desktopMenu .menu a:hover,
.desktopMenu .menu .subnav__backBtn a,
.hotel_rooms_form .nav-enquiry .enquiry-item.active span,
.bravo_single_book .nav-enquiry .enquiry-item.active span,
.pricing-table .title {
  color: var(--rihla-red) !important;
}

.bg-blue-1,
.button.-blue-1:hover,
.button.-outline-blue-1:hover,
.pagination.-dots .pagination__item.is-active,
.pricing-tabs .tab-btns::before,
.tabs.-underline-2 .tabs__controls .tabs__button::after,
.tabs.-pills-2 .tabs__controls .tabs__button.is-tab-el-active,
.tourTypeCard.-type-1:hover,
.noUi-connect,
.accordion.-map .accordion__item.is-active .accordion__icon {
  background-color: var(--rihla-red) !important;
}

.border-blue-1,
.button.-blue-1:hover,
.button.-outline-blue-1,
.noUi-handle,
.hotel_rooms_form .nav-enquiry .enquiry-item.active span,
.bravo_single_book .nav-enquiry .enquiry-item.active span,
.pricing-table .inner-box:hover,
.pricing-table.tagged .inner-box {
  border-color: var(--rihla-red) !important;
}

.form-checkbox:hover input ~ .form-checkbox__mark,
.form-checkbox input:checked ~ .form-checkbox__mark {
  background-color: var(--rihla-green) !important;
  border-color: var(--rihla-green) !important;
}

/* Legacy Bootstrap components that use compiled, non-token colours. */
.btn-primary,
.btn.btn-primary {
  background-color: var(--rihla-red);
  border-color: var(--rihla-red);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:hover,
.btn.btn-primary:focus {
  background-color: var(--rihla-red-hover);
  border-color: var(--rihla-red-hover);
  color: #fff;
}

.badge-primary,
.dropdown-item.active,
.dropdown-item:active,
.page-item.active .page-link {
  background-color: var(--rihla-red);
  border-color: var(--rihla-red);
  color: #fff;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--rihla-red);
  box-shadow: 0 0 0 .2rem rgba(193, 39, 45, .2);
}

/* Older frontend bundles predate the GoTrip tokens. */
.input-number-group i,
.frontend-page .modal.login .modal-content .modal-body .st-link,
.bravo_wrap .bravo_filter .btn-more-item,
.bravo_wrap .bravo_filter .btn-apply-price-range,
.bravo_wrap .service-review .rate,
.bravo_wrap .service-review-pc .text-rating,
.hotel_rooms_form .form-search-rooms .form-search-row > div .form-group .render,
.rihla-checkout-login a,
.rihla-terms-link {
  color: var(--rihla-red) !important;
}

.frontend-page .modal.login .modal-content .modal-body .form-submit,
.map-loading .st-loader,
.bravo_wrap .g-button-submit button,
.bravo_wrap .sale_info,
.bravo_wrap .service-review-pc .score,
.bravo_wrap .bravo_user_profile .form-add-service .nav-tabs {
  background: var(--rihla-red) !important;
}

.hotel_rooms_form .form-search-rooms {
  border-bottom-color: var(--rihla-red);
}

.bravo_wrap .bravo_filter .filter-title::before {
  background: var(--rihla-green) !important;
}

.bravo_wrap .service-review-pc .score::after {
  border-bottom-color: var(--rihla-red) !important;
}

.bravo-filter-price .irs--flat .irs-from,
.bravo-filter-price .irs--flat .irs-to,
.bravo-filter-price .irs--flat .irs-single,
.bravo-filter-price .irs--flat .irs-bar,
.bravo-filter-price .irs--flat .irs-handle > i:first-child {
  background-color: var(--rihla-red) !important;
}

.bravo-filter-price .irs--flat .irs-from::before,
.bravo-filter-price .irs--flat .irs-to::before,
.bravo-filter-price .irs--flat .irs-single::before {
  border-top-color: var(--rihla-red) !important;
}

body .daterangepicker.loading::after {
  color: var(--rihla-red);
}

body .daterangepicker .drp-calendar .calendar-table tbody tr td.start-date,
body .daterangepicker .drp-calendar .calendar-table tbody tr td.end-date,
body .daterangepicker .table-condensed .td-date.start-date,
body .daterangepicker .table-condensed .td-date.in-range,
body .daterangepicker .table-condensed .td-date.end-date,
body .daterangepicker .table-condensed .td-date:hover {
  background: rgba(193, 39, 45, .16);
}

body .daterangepicker .drp-calendar .calendar-table tbody tr td.start-date {
  border-left-color: var(--rihla-red);
}

body .daterangepicker .drp-calendar .calendar-table tbody tr td.end-date {
  border-right-color: var(--rihla-red);
}

body .daterangepicker .table-condensed .td-date.start-date:not(.end-date) {
  box-shadow: -3px 0 0 var(--rihla-red);
}

body .daterangepicker .table-condensed .td-date.end-date:not(.start-date) {
  box-shadow: 3px 0 0 var(--rihla-red);
}

.rihla-checkout-form .form-input input:focus,
.rihla-checkout-form .form-input select:focus,
.rihla-checkout-form .form-input textarea:focus {
  border-color: var(--rihla-red);
  box-shadow: 0 0 0 3px rgba(193, 39, 45, .12);
}

.rihla-gateway-option:has(input:checked) {
  border-color: var(--rihla-red);
  box-shadow: 0 10px 24px rgba(193, 39, 45, .12);
}

.rihla-gateway-button input:checked + .rihla-gateway-radio {
  background: var(--rihla-green);
  border-color: var(--rihla-green);
}

.rihla-gateway-icon {
  background: var(--rihla-red-soft);
  color: var(--rihla-red);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--rihla-green);
}

/* Wishlists carry the restrained red brand accent. */
.service-wishlist.active .button,
.rd-card__wish .service-wishlist.active .button {
  background-color: var(--rihla-red) !important;
  border-color: var(--rihla-red) !important;
  color: #fff !important;
}

/* Homepage: pale red surfaces, red actions and green supporting details. */
.rd-home {
  --rd-navy: var(--rihla-ink);
  --rd-navy-deep: var(--rihla-ink-deep);
  --rd-blue: var(--rihla-red);
  --rd-blue-hover: var(--rihla-red-hover);
  --rd-blue-light: var(--rihla-red);
  --rd-blue-pale: var(--rihla-red-soft);
  --rd-green: var(--rihla-green);
  --rd-red: var(--rihla-red);
  --rd-surface: var(--rihla-red-wash);
  --rd-surface-2: var(--rihla-red-soft);
  --rd-border: var(--rihla-border);
  --rd-text: var(--rihla-ink);
  --rd-muted: var(--rihla-muted);
  --rd-shadow-sm: 0 1px 4px rgba(22, 42, 68, .07);
  --rd-shadow-md: 0 4px 20px rgba(22, 42, 68, .11);
  --rd-shadow-lg: 0 8px 40px rgba(22, 42, 68, .15);
}

body.rd-home-page .footer {
  background: var(--rihla-green-soft);
  color: var(--rihla-ink);
}

/* Solid navigation uses a light red wash and the existing dark logo. */
body.header-normal .bravo_header,
body.header-normal_white .bravo_header {
  background: var(--rihla-red-wash) !important;
  border-bottom: 1px solid var(--rihla-border);
}

body:is(.header-normal, .header-normal_white) .bravo_header .menu__nav,
body:is(.header-normal, .header-normal_white) .bravo_header [data-x="header-mobile-icons"] {
  color: var(--rihla-ink) !important;
}

body:is(.header-normal, .header-normal_white) .bravo_header .header-logo:has(.logo-dark) .logo-light {
  display: none;
}

body:is(.header-normal, .header-normal_white) .bravo_header .header-logo .logo-dark {
  display: block;
  position: static;
  opacity: 1;
}

body:is(.header-normal, .header-normal_white) .bravo_header .header-logo:not(:has(.logo-dark)) img {
  filter: brightness(0);
}

body:is(.header-normal, .header-normal_white) .bravo_header .button {
  background: #fff !important;
  border-color: var(--rihla-red);
  color: var(--rihla-red) !important;
}

body:is(.header-normal, .header-normal_white) .bravo_header .button:hover {
  background: var(--rihla-red) !important;
  color: #fff !important;
}

body.rd-home-page .footer :is(h5, a, .text-light-1, .text-white) {
  color: var(--rihla-ink);
}

body.rd-home-page .footer .footer_middle_area {
  border-color: #bfd8cc;
}

body.rd-home-page .footer a:hover {
  color: var(--rihla-green);
}

.rd-sec__title,
.rd-search__panel .gotrip_form_search h4,
.rd-property-group__head h3,
.rd-card__rating b,
.rd-destination-group__head h3 {
  color: var(--rihla-ink);
}

.rd-hero__scrim {
  background: rgba(16, 32, 51, .38);
}

.rd-search {
  box-shadow: 0 22px 50px rgba(16, 32, 51, .25);
}

.rd-search__panel .gotrip_form_search .field-items .row > [class*="col-"] {
  background: var(--rihla-red-wash);
}

.rd-sec__link {
  border-color: #f0cbcd;
  color: var(--rihla-red-hover);
}

.rd-property-group__head h3 svg,
.rd-property-group__head a,
.rd-tile__cta {
  color: var(--rihla-red);
}

.rd-card {
  border-color: var(--rihla-border);
  box-shadow: 0 3px 14px rgba(22, 42, 68, .06);
}

.rd-card__loc,
.rd-card__rating,
.rd-card__no-photo,
.rd-sec__sub {
  color: var(--rihla-muted);
}

.rd-search__panel .gotrip_form_search .render {
  color: var(--rihla-muted) !important;
}

#rd-destinations,
.rd-panel--reviews,
.rd-news,
.rd-trust,
.rd-esim {
  background: var(--rihla-red-wash);
}

.rd-trust,
.rd-card {
  border-color: var(--rihla-border);
}

.rd-trust,
.rd-esim {
  background: var(--rihla-green-soft);
  border-color: #bfd8cc;
}

.rd-trust__icon,
.rd-card__type,
.rd-esim :is(.rd-esim__title, .rd-esim__text, .rd-esim__list li, .rd-esim__list svg) {
  color: var(--rihla-green);
}

.rd-card__type { background: var(--rihla-green-soft); }
.rd-card__type--space { background: var(--rihla-red-soft); color: var(--rihla-red-hover); }
.rd-esim .rd-btn { background: var(--rihla-green); color: #fff; }
.rd-esim .rd-btn:hover { background: #004d28; color: #fff; }

.rd-search__panel .gotrip_form_search .button-item .button:hover,
.rd-btn--primary:hover {
  background: var(--rihla-red-hover) !important;
  color: #fff;
}

.rd-builder {
  background: linear-gradient(135deg, var(--rihla-ink) 0%, #162a44 100%);
}

.rd-builder::before {
  background: radial-gradient(circle, rgba(193, 39, 45, .2) 0%, rgba(193, 39, 45, 0) 70%);
}

.rd-home :is(a, button, input, select):focus-visible,
.rd-destination-more__link:focus-visible {
  outline-color: var(--rihla-green);
}

body.rd-home-page .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--rihla-red-hover);
}

/* A quiet logo-colour detail, used only on the homepage search surface. */
.rd-search {
  border-top-color: rgba(193, 39, 45, .58);
}

.rd-search__tab.is-active {
  box-shadow: inset 0 -2px 0 var(--rihla-green);
}

/* ---------------------------------------------------------------------------
   Auth pages — login and register share one full-height, brand-led shell.
   The form rules also reach the header login/register modal, which includes
   the same partials.
   --------------------------------------------------------------------------- */

.rd-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 56px 20px;
  background:
    radial-gradient(58rem 38rem at 10% -12%, rgba(193, 39, 45, .11), transparent 62%),
    radial-gradient(46rem 32rem at 94% 112%, rgba(0, 98, 51, .10), transparent 64%),
    var(--rihla-red-wash);
}

.rd-auth__inner {
  width: 100%;
  max-width: 460px;
}

.rd-auth__brand {
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}

/* The uploaded logo is a square lockup with generous transparent padding, so
   it needs more height than a wordmark would. */
.rd-auth__brand img {
  max-height: 104px;
  max-width: 220px;
  width: auto;
}

.rd-auth__brand-text {
  color: var(--rihla-ink);
  font-size: 22px;
  font-weight: 600;
}

.rd-auth__card {
  padding: 40px;
  background: #fff;
  border: 1px solid var(--rihla-border);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(22, 42, 68, .10);
}

.rd-auth__back {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
  color: var(--rihla-muted);
  font-size: 14px;
}

.rd-auth__back:hover {
  color: var(--rihla-red);
}

.rd-auth__back-arrow {
  transition: transform .2s ease;
}

.rd-auth__back:hover .rd-auth__back-arrow {
  transform: translateX(-3px);
}

/* The card already supplies the padding, so grid gutters only misalign it. */
.rd-auth__card .row {
  --bs-gutter-x: 0;
  margin-left: 0;
  margin-right: 0;
}

.rd-auth__form > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

/* An empty error slot must not leave a gap in the y-gap rhythm. */
.rd-auth__form > .message-error:empty {
  display: none;
  padding: 0;
}

.rd-auth__form > .message-error:not(:empty) {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--rihla-red-soft);
  color: var(--rihla-red-hover);
  font-size: 14px;
}

.rd-auth__title {
  margin-bottom: 6px;
  color: var(--rihla-ink);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
}

.rd-auth__subtitle {
  margin: 0;
  color: var(--rihla-muted);
  font-size: 15px;
}

.rd-auth__subtitle a {
  color: var(--rihla-red);
  font-weight: 500;
}

.rd-auth__subtitle a:hover {
  color: var(--rihla-red-hover);
  text-decoration: underline;
}

.rd-auth .form-input input,
.rd-auth .form-input textarea {
  width: 100%;
  min-height: 64px;
  padding: 26px 16px 10px;
  border: 1px solid var(--rihla-border);
  border-radius: 10px;
  background: #fff;
  color: var(--rihla-ink);
  font-size: 15px;
}

/* The markup carries .text-14, whose font-size is !important. */
.rd-auth .form-input label {
  top: 22px;
  padding: 0 16px;
  color: var(--rihla-muted) !important;
  font-size: 15px !important;
  transform-origin: left top;
}

/* GoTrip only floats the label on focus, so a filled or autofilled field
   collided with its own label. */
.rd-auth .form-input input:focus ~ label,
.rd-auth .form-input input:not(:placeholder-shown) ~ label,
.rd-auth .form-input input:-webkit-autofill ~ label,
.rd-auth .form-input textarea:focus ~ label {
  transform: translateY(-11px);
  font-size: 12px !important;
  letter-spacing: .02em;
}

.rd-auth .form-input input:focus,
.rd-auth .form-input textarea:focus {
  border: 1px solid var(--rihla-red) !important;
  box-shadow: 0 0 0 3px rgba(193, 39, 45, .13);
  outline: none;
}

/* Chrome paints autofilled fields pale blue, which fought the brand palette. */
.rd-auth input:-webkit-autofill,
.rd-auth input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--rihla-ink);
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  box-shadow: 0 0 0 1000px #fff inset;
  caret-color: var(--rihla-ink);
}

.rd-auth input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset, 0 0 0 3px rgba(193, 39, 45, .13);
  box-shadow: 0 0 0 1000px #fff inset, 0 0 0 3px rgba(193, 39, 45, .13);
}

.rd-auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.rd-auth__remember {
  display: flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
}

.rd-auth__remember span {
  color: var(--rihla-muted);
}

.rd-auth__link {
  color: var(--rihla-red);
  font-size: 14px;
  font-weight: 500;
}

.rd-auth__link:hover {
  color: var(--rihla-red-hover);
  text-decoration: underline;
}

.rd-auth__submit {
  border-radius: 10px;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(193, 39, 45, .22);
  transition: background .2s ease, box-shadow .2s ease, transform .15s ease;
}

.rd-auth__submit:hover {
  background: var(--rihla-red-hover) !important;
  box-shadow: 0 10px 26px rgba(193, 39, 45, .28);
}

.rd-auth__submit:active {
  transform: translateY(1px);
}

.rd-auth__divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 6px;
  color: var(--rihla-muted);
  font-size: 14px;
}

.rd-auth__divider::before,
.rd-auth__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rihla-border);
}

.rd-auth__fineprint {
  margin: 0;
  color: var(--rihla-muted);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

.rd-auth .invalid-feedback {
  color: var(--rihla-red);
  font-size: 13px;
}

@media (max-width: 575px) {
  .rd-auth {
    padding: 32px 16px;
  }

  .rd-auth__card {
    padding: 28px 22px;
    border-radius: 14px;
  }

  .rd-auth__title {
    font-size: 23px;
  }
}