/* Base */

/*
 * Palette taken from the Kwando Safaris site (kwando-safaris-child/style.css).
 * Primary CTAs there are a left-to-right gradient, not a flat fill.
 */
:root {
    --kwando-primary: #CA4B2A;
    --kwando-primary-dark: #A72319;
    --kwando-gradient: linear-gradient(90deg, #A72319 0%, #CA4B2A 100%);
    --kwando-gradient-hover: linear-gradient(90deg, #A72319 0%, #A72319 100%);
    --kwando-ink: #2D231B;
    --kwando-slate: #383B4D;
    --kwando-cream: #F1ECE5;
    --kwando-border: #DDD8D2;
    --kwando-muted: #D4C9BD;
    --kwando-grey: #707070;
}

body, html {
    /* font-family: 'Barlow-Regular', serif !important; */
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
}

h1,h2,h3,h4,h5,h6 {
    /* font-family: 'GildaDisplay-Regular', serif !important; */
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
}

p,
span,
input,
label {
    /* font-family: 'Barlow-Regular', serif !important; */
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
}

/* @font-face {
    font-family: 'Barlow-Regular';
    src: url('../fonts/Barlow-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GildaDisplay-Regular';
    src: url('../fonts/GildaDisplay-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
} */

 .primary-colour {
    color: var(--kwando-primary) !important;
}

.primary-colour-opacity {
    background-color: rgba(202, 75, 42, 0.06) !important;
}

.primary-colour-light {
    color: rgba(202, 75, 42, 0.3) !important;
}

.btn-primary {
    background: var(--kwando-gradient) !important;
    background-color: var(--kwando-primary) !important;
    color: white !important;
    border: 1px solid var(--kwando-primary-dark) !important;
    border-radius: 0 !important;
    box-shadow: 4px 6px 12px rgba(45, 35, 27, 0.15) !important;
}

.btn-primary:hover {
    background: var(--kwando-gradient-hover) !important;
    background-color: var(--kwando-primary-dark) !important;
    color: white !important;
    border: 1px solid var(--kwando-primary-dark) !important;
    box-shadow: 5px 8px 16px rgba(45, 35, 27, 0.25) !important;
}

.btn-secondary {
    background-color: var(--kwando-cream) !important;
    color: var(--kwando-ink) !important;
    border: 1px solid var(--kwando-border) !important;
    border-radius: 0 !important;
    box-shadow: 4px 6px 12px rgba(45, 35, 27, 0.12) !important;
}

.btn-secondary:hover {
    background-color: var(--kwando-border) !important;
    color: var(--kwando-ink) !important;
    border: 1px solid var(--kwando-muted) !important;
    box-shadow: 5px 8px 16px rgba(45, 35, 27, 0.2) !important;
}
/* END Base */


/* NavBar */
.navbar-top {
    background-color: rgb(255, 255, 255) !important;
}

.navbar-brand {
    height: 60px;
    width: auto;
}

.nav-list-item-text {
    /* font-family: 'GildaDisplay-Regular', serif !important; */
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
    color: var(--kwando-ink) !important;
    font-weight: bolder !important;
    background-color: rgba(255, 255, 255, 0) !important;
}

.nav-list-item-text:hover {
    color: var(--kwando-primary) !important;
    background-color: rgba(255, 255, 255, 0) !important;
}

.nav-link-list {
    color: var(--kwando-ink);
}

.nav-link-list span.MuiTouchRipple-root {
    text-transform: capitalize;
}

.drawer-toggler-wrapper,
.drawer-wrapper,
.drawer-header,
.drawer-social-form,
.drawer-divider,
.drawer-close-toggler-icon,
.drawer-menu-select-wrapper,
.navbar-logo-wrapper {
/*    */
}

div.nav-link-wrapper button svg,
button.share-icon-wrapper svg.share-icon-link,
button.auth-signin-icon-wrapper svg.auth-signin-icon,
button.drawer-toggler-icon svg,
div.drawer-social-wrapper button svg,
button.drawer-close-toggler svg {
    color: var(--kwando-ink);
}

.navbar-expiry-timer {
    color: var(--kwando-primary-dark);
}
/* END NavBar */


/******************************* Main *******************************/
/* STEPPER */
.stepper-step-icon {
    color: var(--kwando-border) !important;
}

.stepper-step-icon-active {
    color: var(--kwando-primary) !important;
}

.popup-content {
    background: white !important;
    color: var(--kwando-ink) !important;
}

.bookings-container,
.main-layout {
    filter: opacity(0.97);
    background-color: rgba(241, 236, 229, 0.85) !important;
}

.main-layout hr {
    background-color: var(--kwando-border);
}

.main-layout h1 {
    color: var(--kwando-ink) !important;
}

.main-layout .footer {
    background-color: var(--kwando-cream);
}

.main-layout .footer-inner {
    background-color: var(--kwando-cream);
    color: var(--kwando-ink);
}

.popup-content .btn-light {
    border: 1px solid var(--kwando-primary-dark) !important;
    color: white !important;
    background: var(--kwando-gradient) !important;
}

.slide-warning {
    color: var(--kwando-primary-dark);
}

.btn-view-cart {
    background-color: white !important;
    color: var(--kwando-ink) !important;
    border: 1px solid var(--kwando-border) !important;
    box-shadow: 4px 6px 12px rgba(45, 35, 27, 0.12) !important;
}

.btn-view-cart:hover,
.btn-floating-cart:hover,
.btn-floating-cart-expanded {
    background-color: var(--kwando-cream) !important;
    color: var(--kwando-ink) !important;
    border: 1px solid var(--kwando-muted) !important;
    box-shadow: 5px 8px 16px rgba(45, 35, 27, 0.2) !important;
}

.floating-cart-badge .MuiBadge-badge {
    background-color: var(--kwando-primary) !important;
    color: white !important;
    border: 1px solid var(--kwando-primary-dark) !important;
}

.stepper-step-icon {
    color: var(--kwando-border) !important;
}

.stepper-step-icon-active {
    color: var(--kwando-primary) !important;
}
/* END STEPPER */

/* STEP 1 */
.date-and-pax h1,
.date-and-pax h3,
.date-and-pax table,
.date-and-pax .checkinout,
.domesticCheckBox.Mui-checked {
    color: var(--kwando-ink) !important;
}

.react-calendar {
    background: #ffffff !important;
    color: var(--kwando-ink) !important;
    border: 1px solid var(--kwando-border) !important;
    box-shadow: 4px 4px 8px rgba(45, 35, 27, 0.12) !important;
}

.date-and-pax .pax,
.react-calendar__navigation button:enabled:hover,
.react-calendar__navigation button:enabled:focus,
.react-calendar__navigation button[disabled],
.rdrCalendarWrapper,
.react-calendar__tile:disabled,
.rdrDayToday span::after {
    background-color: #ffffff !important;
}

.rdrDay span {
    color: var(--kwando-ink) !important;
}

.rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span,
.rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span,
.rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span,
.rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span {
    color: white !important;
}

.rdrDayDisabled{
    background-color: transparent !important;
}

.rdrDayPassive span,
.rdrDayDisabled span {
    color: var(--kwando-muted) !important;
    font-weight: normal;
}

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

.step-item-active {
    background-color: rgba(202, 75, 42, 0.06) !important;
    border: 2px solid var(--kwando-primary) !important;
}

.step-icon-wrapper {
    background-color: var(--kwando-cream) !important;
}

.step-icon {
    color: var(--kwando-grey) !important;
}

.step-icon-active {
    color: var(--kwando-primary) !important;
}

.step-item-active .step-icon-wrapper {
    background-color: var(--kwando-primary) !important;
}

.step-item-active .step-icon {
    color: #fff !important;
}

.step-connector {
    background-color: var(--kwando-border) !important;
}

.step-connector::before {
    background-color: var(--kwando-primary) !important;
}

.step-connector-active {
    background-color: var(--kwando-primary) !important;
}

.edit-icon {
    color: var(--kwando-primary) !important;
}
/* END STEP 1 */

/* STEP 3 */
.category-image-box .MuiButtonBase-root{
    border:1px solid var(--kwando-primary);
}

.category-image-box .MuiButtonBase-root:hover {
    border:1px solid transparent;
    filter: invert(1);
    background-color: #fff;
}

.category-button-normal{
    color: white !important;
    background-color: var(--kwando-primary) !important;
}

.category-button-normal:hover{
    background-color: white !important;
    color: var(--kwando-primary) !important;
}

.category-button-normal:disabled {
    background-color: var(--kwando-muted) !important;
    color: var(--kwando-cream) !important;
}

.category-image-box .MuiButtonBase-root{
    border:1px solid var(--kwando-primary) !important;
    color: white !important;
}

.category-image-box .MuiButtonBase-root:hover {
    border:1px solid transparent;
    filter: none !important;
    background-color: var(--kwando-primary-dark) !important;
    color: white !important;
}
/* END STEP 3 */

/* STEP 4 */
.select-rate-button {
    background: var(--kwando-gradient) !important;
    border-radius: 0 !important;
}

.select-rate-button:hover {
    background: var(--kwando-gradient-hover) !important;
}

.select-rate-button svg {
    color: #ffffff !important;
}

.room-card-accordion-summary {
    background-color: var(--kwando-ink) !important;
    color: white !important;
}

.room-card-accordion-summary:hover {
    background-color: var(--kwando-slate) !important;
    color: white !important;
}

.view-rate-mobile-button {
    color: var(--kwando-primary) !important;
}

.view-rate-mobile-button:hover {
    color: var(--kwando-primary-dark) !important;
}

.room-card-room-description {
    text-align: left;
    color: var(--kwando-grey) !important;
}

.rooms-card-special-rate-description {
    color: var(--kwando-grey) !important;
}
/* END STEP 4 */

/* CART */
.cart-tc-text {
    color: var(--kwando-ink) !important;
}
/* END CART */
/******************************* END Main *******************************/


/* AUTH Components */
.auth-box-wrapper,
.loading-box-wrapper {
    background-color: white;
}

.auth-title {
    text-transform: uppercase;
}
/* END AUTH Components */


/* Room List Entries */
.roomlist-entries {
    background: rgb(255, 255, 255) !important;
    color: var(--kwando-ink) !important;
}
/* END Room List Entries */

/* Availability Grid */
.AvailabilityGrid h1 {
    color: var(--kwando-ink) !important;
}

.react-calendar__tile--active {
    color: rgb(255, 255, 255) !important;
    background-color: var(--kwando-primary) !important;
}
/* END Availability Grid */