/*
 * Daman white-label theme for the iframe journey (/daman).
 * Brand: Helvetica Neue, Navy #003478, Boysenberry #882345, plus black & white.
 * Loaded after style.css by layouts/sia-website/iframe.blade.php.
 * !important is needed where the shared views use inline colours.
 */
/*
 * Helvetica Neue web fonts (self-hosted in public/fonts/helvetica-neue, from cdnfonts "helvetica-neue-55").
 * Only the standard-width files are declared, under their own family name: the cdnfonts stylesheet mixes
 * Condensed / Extended / Outline files under the same weights and would render stretched or hollow text.
 */
@font-face { font-family: 'Helvetica Neue Daman'; font-style: normal; font-weight: 300; font-display: swap; src: url('../../fonts/helvetica-neue/HelveticaNeueLight.woff') format('woff'); }
@font-face { font-family: 'Helvetica Neue Daman'; font-style: normal; font-weight: 400; font-display: swap; src: url('../../fonts/helvetica-neue/HelveticaNeue-Roman.woff') format('woff'); }
@font-face { font-family: 'Helvetica Neue Daman'; font-style: italic; font-weight: 400; font-display: swap; src: url('../../fonts/helvetica-neue/HelveticaNeueItalic.woff') format('woff'); }
@font-face { font-family: 'Helvetica Neue Daman'; font-style: normal; font-weight: 500; font-display: swap; src: url('../../fonts/helvetica-neue/HelveticaNeueMedium.woff') format('woff'); }
@font-face { font-family: 'Helvetica Neue Daman'; font-style: normal; font-weight: 700; font-display: swap; src: url('../../fonts/helvetica-neue/HelveticaNeueBold.woff') format('woff'); }
@font-face { font-family: 'Helvetica Neue Daman'; font-style: italic; font-weight: 700; font-display: swap; src: url('../../fonts/helvetica-neue/HelveticaNeueBoldItalic.woff') format('woff'); }

:root {
    --daman-navy: #003478;
    --daman-navy-dark: #00285c;
    --daman-berry: #882345;
    --daman-font: "Helvetica Neue Daman", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-body-font-family: var(--daman-font);
    --bs-font-sans-serif: var(--daman-font);
    --bs-link-color: var(--daman-navy);
    --bs-link-hover-color: var(--daman-navy-dark);
}

/* Typography - whole journey */
body,
h1, h2, h3, h4, h5, h6,
p, label, small, a, span,
button, input, select, textarea,
.btn, .form-control,
.select2-container,
.select2-results,
.ui-datepicker,
.ui-datepicker select,
.intl-tel-input,
.modal {
    font-family: var(--daman-font) !important;
}
/* keep icon fonts intact */
.fa {
    font-family: FontAwesome !important;
}

/* Primary buttons: Get a Quote, Buy Plan, Complete Purchase, modal pay button */
.btn-submit,
.btn-alkhaleej,
.btn-success,
.btn-primary,
.pay-now,
.pay-button-modal {
    background-color: var(--daman-navy) !important;
    border-color: var(--daman-navy) !important;
    color: #fff !important;
}
.btn-submit:hover, .btn-submit:focus, .btn-submit:active,
.btn-alkhaleej:hover, .btn-alkhaleej:focus, .btn-alkhaleej:active,
.btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.pay-now:hover, .pay-now:focus, .pay-now:active {
    background-color: var(--daman-navy-dark) !important;
    border-color: var(--daman-navy-dark) !important;
    box-shadow: none !important;
}

/* Headings that were SIA orange (#fa8d29): plan name on personal info,
   ADULT TRAVELLER, success/error headings, "Get in touch" */
[style*="#fa8d29"],
[style*="#FA8D29"],
.theme-text-color {
    color: var(--daman-berry) !important;
}

/* Headings that were SIA dark blue (#0e253a): YOUR TRIP DETAILS, plan price */
[style*="#0e253a"] {
    color: var(--daman-navy) !important;
}

/* Plans page: plan title (e.g. Going Advanced) */
.picker-part .top,
.picker-part .top h4,
.picker-part .top h6 {
    color: var(--daman-berry) !important;
}
.picker-part .top h4 {
    border-color: var(--daman-berry) !important;
}

/* Plans page: LEARN MORE ABOUT THIS POLICY AND ITS BENEFITS */
.picker-part .bottom small.text-success,
.picker-part .bottom a small {
    color: var(--daman-navy) !important;
    font-weight: bold;
}

/* Trip details sidebar icons + timeline line */
.plan-details .media .fa {
    color: var(--daman-berry) !important;
}
.plan-details:before {
    background-color: var(--daman-berry) !important;
}

/* Other headings / subheadings */
h5,
.text-success,
.control-label {
    color: var(--daman-navy) !important;
}
h2.text-danger {
    color: var(--daman-berry) !important;
}

/* Form accents */
.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--daman-navy) !important;
    box-shadow: 0 0 0 .2rem rgba(0, 52, 120, .15) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--daman-navy) !important;
}
.form-check-input:checked {
    background-color: var(--daman-navy) !important;
    border-color: var(--daman-navy) !important;
}
.travellers-dropdown .btn-outline-default,
.travellers-dropdown .count {
    color: var(--daman-navy) !important;
}

/* Datepicker (was SIA orange) */
.ui-datepicker-header,
.ui-datepicker-header a.ui-datepicker-prev,
.ui-datepicker-header a.ui-datepicker-next,
.ui-datepicker-calendar th,
.ui-datepicker-calendar a {
    color: var(--daman-navy) !important;
}
.ui-datepicker-calendar a.ui-state-hover,
.ui-datepicker-calendar a.ui-state-active,
.selectedDate,
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td span.active {
    background-color: var(--daman-navy) !important;
    background-image: none !important;
    color: #fff !important;
}
.selectedHighlight,
.ui-datepicker-calendar .highlight {
    background-color: rgba(0, 52, 120, .12) !important;
}

/* Hero overlay boxes (plan title / total price): white panel so brand colours stay readable */
[style*="rgba(0,0,0,0.5)"] {
    background: rgba(255, 255, 255, .92) !important;
    color: var(--daman-navy) !important;
}
[style*="rgba(0,0,0,0.5)"] .text-white,
.text-white > [style*="rgba(0,0,0,0.5)"] {
    color: var(--daman-navy) !important;
}

/* Links */
a:not(.btn) {
    color: var(--daman-navy);
}

/* Notice box (was SIA orange #fbc592) */
[style*="#fbc592"] {
    background-color: rgba(136, 35, 69, .08) !important;
    border-left: 4px solid var(--daman-berry) !important;
    color: #000 !important;
}
[style*="#fbc592"] .fa,
[style*="#fbc592"] i {
    color: var(--daman-berry) !important;
}

/* Plan / price box (personal information, success, error): wider so "ALAMI WORLDWIDE - PLATINUM" and the price fit on one line */
[style*="width: 440px"],
[style*="max-width:440px"] {
    max-width: min(720px, 100%) !important;
    width: auto !important;
}
.totalprice {
    white-space: nowrap;
}
@media (min-width: 576px) {
    .totalprice { margin-left: 12px; }
}

/* Dropdown arrow on plain selects (e.g. Gender): Bootstrap's .form-control removes the native arrow */
select.form-control:not([multiple]):not(.select2-hidden-accessible) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23003478' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right .75rem center !important;
    background-size: 16px 12px !important;
    padding-right: 2.25rem !important;
}