/*
 * Shared base + icons stylesheet, loaded by both the Vue SPA shell
 * (spa.dtl) and Django-rendered HTML pages (landing.dtl, hotel.dtl,
 * directory pages, etc.).
 *
 * Source of truth: this file. The previous frontend/src/css/base.css
 * and frontend/src/css/icons.css have been removed; if you change
 * anything here it affects every page.
 *
 * URL refs use paths relative to /static/css/. The HRAIcons.ttf font
 * is also kept here un-hashed so this stylesheet stays stable across
 * webpack builds (the hashed copy in /static/fonts/HRAIcons.<hash>.ttf
 * remains for any code path that imports the .ttf directly).
 */

:root {
    --main-font-stack: "Titillium Web", sans-serif;
    --green-2: #6ac46a;
    --green-3: #63bd63;
    --darkened-green: #4c984c;
    --primary-green: #5cb95c;
    --bright-green: #2eff78;
    --light-green: #bfd9cc;
    --primary-red: #e44f42;
    --darkened-red: #d52d1e;
    --desaturated-red: #ce6158;
    --lightened-info-color: #91e391;
    --info-color: #57b057;
    --darkened-info-color: #346510;
    --warning-color: #e2c84d;
    --darkened-warning-color: #4a4425;
    --muted-text: #999;
    --grey-1: #222;
    --grey-2: #404040;
    --grey-3: #8b8b8b;
    --grey-4: #999;
    --grey-5: #2f2f2f;
    --button-color: var(--primary-red);
    --darkened-button-color: var(--darkened-red);
    --desaturated-button-color: var(--desaturated-red);
    --btn-glass-radius: 5px;

    --invalid-color: #ffcfcf;
    --invalid-bg-color: #533a3a;
    --invalid-border-color: #6c2020;

    --header-height: 78px;
    --nav-font-size: 1.2em;
    --nav-height: calc(2 * var(--nav-padding) + var(--nav-font-size));
    --button-bar-padding: 5px;
    --button-bar-font-size: 1em;
    --button-bar-height: calc(
        2 * var(--button-bar-padding) + var(--button-bar-font-size)
    );
    --input-padding: 7px;

    --flash-z: 400;
    --modal-z: 500;
    --tooltip-z: 350;
    --nav-dd-z: 300;
    --error-box-z: 250;
    --search-results-z: 200;
    --filter-popup-z: 100;
    --book-add-dd-z: 90;

    --error-box-color: #f8d7da;
    --error-border-color: #f5c6cb;
    --error-text-color: #721c24;
}

html {
    box-sizing: border-box;
}

.container {
    margin: 0 auto;
    padding: 0 15px;
}

.big-row {
    margin-bottom: 2em;
}

.row {
    margin-bottom: 1em;
}

.diaper {
    padding: 0 2em;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 210ms;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
}

h2 {
    font-size: 2.2rem;
}

.col3 {
    display: inline-block;
    vertical-align: top;
    /* 33.33% caused overflowing to next line in recent versions... */
    width: calc(33% - 30px);
    padding: 15px;
    margin: 15px;
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (max-width: 576px) {
    .diaper {
        padding: 0 0;
    }
    .col3 {
        width: calc(100% - 30px);
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 1.2em;
    }
    h2 {
        font-size: 1.1em;
    }
    h3 {
        font-size: 1em;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (max-width: 992px) {
    .hor-nav {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    background-color: black;
    color: #ddd;
    font-family: var(--main-font-stack);
    font-size: 18px;
    overflow-x: hidden;
}

a {
    color: var(--primary-green);
    cursor: pointer;
}

a:hover {
    color: var(--bright-green);
}

.mute {
    color: var(--muted-text);
}

.loud {
    color: white;
}

.narrow {
    max-width: 700px;
}

.button {
    background: none;
    border: none;
    color: var(--primary-green);
    cursor: pointer;
    font-size: 1.5em;
}

.middle-cell {
    display: table-cell;
    vertical-align: middle;
}

/* Enter and leave animations can use different */
/* durations and timing functions.              */
.slide-fade-enter-active {
    transition: all 0.3s ease;
}

.slide-fade-leave-active {
    transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active below version 2.1.8 */ {
    transform: translateX(10px);
    opacity: 0;
}

input::placeholder {
    color: #888;
}
input {
    font-family: "Titillium Web", sans-serif;
}
input[readonly],
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"] {
    padding: var(--input-padding);
    width: 100%;
    font-size: 1.1em;
    color: white;
    border: 1px solid var(--grey-3);
    background-color: var(--grey-5);
}
input[type="text"]:not(:placeholder-shown):invalid,
input[type="email"]:not(:placeholder-shown):invalid,
input[type="tel"]:not(:placeholder-shown):invalid {
    background-color: var(--invalid-bg-color);
    color: var(--invalid-color);
    border: 1px solid var(--invalid-border-color);
    transition: all 0.5s;
}

.invalid {
    background-color: var(--invalid-bg-color) !important;
    color: var(--invalid-color) !important;
    border: 1px solid var(--invalid-border-color) !important;
    transition: all 0.5s;
}

button.reset {
    background: transparent;
    border: none;
    cursor: pointer;
}

.btn-glass.red {
    background-color: var(--button-color);
    background: linear-gradient(
        to top,
        var(--darkened-button-color),
        var(--button-color)
    );
}

.btn-glass.green {
    background-color: var(--primary-green);
    background: linear-gradient(
        to top,
        var(--darkened-green),
        var(--primary-green)
    );
}

.btn-glass.active {
    background: linear-gradient(to top, var(--green-2), var(--green-3));
    background-color: var(--green-2);
}

.btn-glass:hover {
    text-decoration: none;
    color: #fff;
    text-shadow: rgba(#000, 0.7) 0 1px 1px, rgba(#fff, 0.5) 0px 1px 2px;
}

.btn-glass:disabled {
    color: #ccc;
    background-color: #9e9e9e;
    background: linear-gradient(to top, #8f8f8f, #9e9e9e);
}

.btn-glass {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all, 0.2s, ease-in-out, 0s;
    border: none;
    border-radius: var(--btn-glass-radius);
    padding: 7px 14px;
    font-weight: normal;
    font-size: 11pt;
    white-space: nowrap;
    line-height: 1em;
    cursor: pointer;
    /* for when it's used as an anchor*/
    text-decoration: none;
    /* default to black */
    background-color: #222;
    background: linear-gradient(to top, #333, #666);
}

.btn-glass.big {
    padding: 14px 28px;
    font-size: 15pt;
}

.btn-glass.w-icon {
    padding-left: 10px;
}

.btn-glass > i.left {
    transform: translateX(-0.3em);
}

.property-line {
    display: flex;
    flex-direction: row;
    padding: 4px;
}
.property-key {
    color: var(--grey-3);
    min-width: 180px;
}
.property-val {
    margin-left: 2em;
}
.dollar {
    font-size: 0.6em;
    position: relative;
    top: -0.4em;
}
.adj-label > div:first-child {
    color: var(--grey-3);
}
.adj-label > div:nth-child(2) {
    font-size: 1.2rem;
}
/* HACK: takes care of images that are now missing */
.thumbnail::before {
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
    background: url(../img/no-image-250.png) center/cover no-repeat;
}
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}

.tag {
    border-radius: 50px;
    background-color: var(--grey-3);
    color: white;
    font-size: 0.8em;
    display: inline-block;
    padding: 1px 10px;
}

.tag.success {
    background: var(--darkened-green);
}
.tag.warning {
    background: var(--warning-color);
    color: var(--darkened-warning-color);
}
.tag.warning a {
    color: var(--darkened-warning-color) !important;
}
.close-btn {
    display: block;
    text-align: right;
    text-decoration: none;
    color: var(--primary-green) !important;
}
.right {
    text-align: right !important;
}

/* === icons === */

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

.icon {
    color: white;
    vertical-align: baseline;
    font-family: "HRAIcons", sans-serif;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    font-weight: normal;
    font-style: normal;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
}

.icon.hotel::before { content: '\e800'; }
.icon.airplane::before { content: '\e81e'; }
.icon.city::before { content: '\e802'; }
.icon.search::before { content: '\e803'; }
.icon.calendar::before { content: '\e804'; }
.icon.target::before { content: '\e805'; }
.icon.location-search::before { content: '\e806'; }
.icon.my-location::before { content: '\e807'; }
.icon.location-on::before { content: '\e808'; }
.icon.add-shopping-cart::before { content: '\e809'; }
.icon.add::before { content: '\e80a'; }
.icon.add-circle::before { content: '\e80b'; }
.icon.phone::before { content: '\e80c'; }
.icon.sms::before { content: '\e80d'; }
.icon.email::before { content: '\e80e'; }
.icon.pin::before { content: '\e80f'; }
.icon.notifications::before { content: '\e810'; }
.icon.phone-link::before { content: '\e811'; }
.icon.smartphone::before { content: '\e812'; }
.icon.check-circle::before { content: '\e813'; }
.icon.check::before { content: '\e814'; }
.icon.attention::before { content: '\e815'; }
.icon.warning-empty::before { content: '\e816'; }
.icon.error::before { content: '\e817'; }
.icon.direction::before { content: '\f124'; }
.icon.dollar::before { content: '\f155'; }
.icon.sort::before { content: '\f161'; }
.icon.twitter::before { content: '\f304'; }
.icon.fb::before { content: '\f230'; }
.icon.down-arrow::before { content: '\f161'; }
.icon.next::before { content: '\e81d'; }
.icon.up::before { content: '\e81c'; }
.icon.down::before { content: '\e81b'; }
.icon.remove::before { content: '\e81a'; }
.icon.remove-circle::before { content: '\e819'; }
.icon.trash::before { content: '\e818'; }
.icon.close::before { content: '\e801'; }
.icon.quote::before { content: '\e81f'; }
.icon.user::before { content: '\e820'; }
.icon.key::before { content: '\e821'; }
.icon.upgrade::before { content: '\e822'; }
.icon.building::before { content: '\e827'; }