/* Date Picker Custom Styles */
:host {
    /* Primary Colours */
    --DOC-green-100: #47665e;
    --DOC-green-500: #194036;
    --DOC-green-dark: #133029;
    --DOC-gold: #ffc51d;
    --DOC-gold-dark: #BE8D00;
    --maui-600: #384246;
    --maui-300: #e6e7e8;
    --white: #fff;
    --black: #000;
    --button-disabled: #adb8b5;
    /* Caution */
    --DOC-red: #e11836;
    /* Accent Colours */
    --ranginui-500: #1579b7;
    --ranginui-700: #186696;
    --papatuanuku-500: #507f39;
    --papatuanuku-800: #3ef72b;
    --ata-whenua-500: #4c3657;
    --ata-whenua-800: #392940;
    --weta-500: #80331a;
    --weta-800: #602514;
    --tuatua: #e0dcce;
    --tara-iti: #f5f4f2;
    --placeholder-text: #7b7b7b;
    /* Links */
    --DOC-link-500: #0066a4;
    --DOC-link-700: #004b7a;

    --day-width: 40px;
    --day-height: 35px;

    --color-fg-primary: #194036;
    --color-bg-inrange: #214d42;

    --color-btn-primary-bg: var(--DOC-green-500);
    --color-btn-primary-border: var(--DOC-green-500);
    --color-btn-primary-fg: var(--white);

    --color-btn-primary-hover-bg: var(--DOC-green-100);
    --color-btn-primary-hover-border: var(--DOC-green-100);
    --color-btn-primary-hover-fg: var(--white);

    --color-btn-primary-focus-bg: var(--DOC-green-500);
    --color-btn-primary-focus-border: var(--white);
    --color-btn-primary-focus-fg: var(--white);
    --color-btn-primary-focus-shadow: 0 0 0 2px var(--DOC-green-100);

    --color-btn-primary-disabled-bg: var(--maui-300);
    --color-btn-primary-disabled-border: var(--maui-300);
    --color-btn-primary-disabled-fg: var(--maui-600);
    
    --color-btn-secondary-bg: var(--tuatua);
    --color-btn-secondary-border: var(--maui-600);
    --color-btn-secondary-fg: var(--maui-600);

    --color-btn-secondary-hover-bg: var(--DOC-green-500);
    --color-btn-secondary-hover-border: var(--DOC-green-500);
    --color-btn-secondary-hover-fg: var(--white);

    --color-btn-secondary-focus-bg: var(--tuatua);
    --color-btn-secondary-focus-border: var(--white);
    --color-btn-secondary-focus-fg: var(--maui-600);
    --color-btn-secondary-focus-shadow: 0 0 0 2px var(--DOC-green-100); 
}

.calendars .calendar{
    padding: 0 10px 10px 10px;
}

.container.show{
    border: 1px solid var(--placeholder-text);
    margin-top: -1px;
    border-radius: 0;
}

.container>header{
    background-color: #D9D9D9 !important;
}

.container>footer{
    background-color: #fff !important;
}

#datepicker-header-container{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 0;
}

#datepicker-header-container p{
    margin: 0 15px 0 5px;
}

.calendar>.daynames-row>.dayname{
    color: var(--maui-600);
}

.calendar>.daynames-row>.day,
.calendar>.daynames-row>.dayname,
.calendar>.days-grid>.day,
.calendar>.days-grid>.dayname{
    font-weight: 500;
}

.container.lock-plugin .calendar>.days-grid>.day.locked:not(.start):not(.end) {
    /*background-image: repeating-linear-gradient(135deg, transparent, #253f37 1px, transparent 2px, transparent 6px);*/
    background-image: none;
    background-color: #E1183633;
}

.container.range-plugin .calendar>.days-grid>.day.in-range {
    color: #fff;
}

.container>footer .footer-buttons>button{
    border-radius: 0;
    padding: 1em 1.5em;
}

.container>footer .footer-buttons>button.cancel-button{
    padding: 1em 1.5em;
}

.container>footer .footer-buttons>button.cancel-button:focus,
.container>footer .footer-buttons>button.cancel-button:focus-visible {
    background-color: var(--color-btn-secondary-focus-bg);
    border-color: var(--color-btn-secondary-focus-border);
    color: var(--color-btn-secondary-focus-fg);
    box-shadow: var(--color-btn-secondary-focus-shadow);
    outline: none;
}

.container>footer .footer-buttons>button.apply-button:focus,
.container>footer .footer-buttons>button.apply-button:focus-visible {
    background-color: var(--color-btn-primary-focus-bg);
    border-color: var(--color-btn-primary-focus-border);
    color: var(--color-btn-primary-focus-fg);
    box-shadow: var(--color-btn-primary-focus-shadow);
    outline: none;
}

.datepicker-container{
    position: relative;
}

.datepicker-container span{
    position: absolute;
    top: 15% !important;
    right: 3px !important;
    left: auto !important;
}

.easepick-wrapper{
    position: relative;
    z-index: 9999;
}

.calendar>.days-grid>.day{
    border-radius: 0;
}

.container.lock-plugin .calendar>.days-grid>.day.locked{
    border: 1px solid transparent;
}

.footer-buttons .doc-button{
    background-color: var(--DOC-gold);
    color: var(--maui-600);
    padding: 1em 1.5em;
    text-decoration: none;
    display: flex;
    gap: .5em;
}

.footer-buttons .doc-button:hover,
.footer-buttons .doc-button:focus{
    background-color: var(--DOC-gold-dark);
}

.footer-buttons .doc-button.disabled{
    background-color: var(--maui-300);
}

/* Date-picker: hide the Apply button only when a Book button is also present */
.footer-buttons .picker-book-btn ~ .apply-button {
  display: none !important;
}

.footer-buttons{
    justify-content: flex-start !important;
    column-gap: .5em !important;
}

/* When .footer-buttons does NOT contain a Book button */
.footer-buttons:not(:has(.picker-book-btn)) {
  flex-direction: row-reverse;
  justify-content: flex-end !important;
}

.footer-buttons .picker-clear-btn{
    margin-left: auto;
}


/* === Contain Easepick to the viewport when highly zoomed in === */
@media (max-height: 415px) {
    .container.amp-plugin.lock-plugin.range-plugin.kbd-plugin.show {
        overflow: auto;
        height: 100vh;
    }
}