/**
 * Harvest Bakery pickup form UI v0.2.9
 * One real Gravity Forms date input + one real in-field calendar button.
 */

/* ----------------------------- Pickup date ----------------------------- */
.hbd-pickup-date-field {
    --hbd-date-width: 178px;
    --gf-field-date-width: 178px;
}

.hbd-pickup-date-field .hbd-pickup-date-container,
.hbd-pickup-date-field .ginput_container_date {
    box-sizing: border-box !important;
    position: relative !important;
    display: block !important;
    width: var(--hbd-date-width) !important;
    max-width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Real GF input remains the actual date control. */
.hbd-pickup-date-field .ginput_container_date input,
.hbd-pickup-date-field input.gform-datepicker,
.hbd-pickup-date-field input.datepicker {
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: var(--hbd-date-width) !important;
    max-width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 8px 38px 8px 11px !important;
    border: 1px solid #8c8f94 !important;
    border-radius: 3px !important;
    background: #fff !important;
    color: #5d6770 !important;
    caret-color: #1d2327 !important;
    opacity: 1 !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.hbd-pickup-date-field .ginput_container_date input:focus,
.hbd-pickup-date-field input.gform-datepicker:focus,
.hbd-pickup-date-field input.datepicker:focus {
    border-color: #007c89 !important;
    outline: 1px solid #007c89 !important;
    outline-offset: 0 !important;
}

/* When populated, GF keeps the machine value while we show a friendly label. */
.hbd-pickup-date-field.hbd-has-readable-date .ginput_container_date input,
.hbd-pickup-date-field.hbd-has-readable-date input.gform-datepicker,
.hbd-pickup-date-field.hbd-has-readable-date input.datepicker {
    color: transparent !important;
    caret-color: transparent !important;
}

.hbd-pickup-date-readable {
    box-sizing: border-box !important;
    position: absolute !important;
    z-index: 2 !important;
    top: 50% !important;
    left: 12px !important;
    right: 40px !important;
    display: block !important;
    overflow: hidden !important;
    transform: translateY(-50%) !important;
    color: #1d2327 !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    pointer-events: none !important;
}

/*
 * Kill every Gravity Forms/legacy calendar icon for this field.
 * GF 3.x Orbital renders the default icon with a pseudo-element; older GF
 * versions can output an img/button. We replace all of them with one button.
 */
.hbd-pickup-date-field::before,
.hbd-pickup-date-field::after,
.hbd-pickup-date-field.gfield--datepicker-default-icon::before,
.hbd-pickup-date-field.gfield--datepicker-default-icon::after,
.hbd-pickup-date-field.gfield--datepicker-custom-icon::before,
.hbd-pickup-date-field.gfield--datepicker-custom-icon::after,
.hbd-pickup-date-field .ginput_container_date::before,
.hbd-pickup-date-field .ginput_container_date::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

.hbd-pickup-date-field .gfield_input_datepicker_icon,
.hbd-pickup-date-field img.ui-datepicker-trigger,
.hbd-pickup-date-field button.ui-datepicker-trigger,
.hbd-pickup-date-field .ui-datepicker-trigger,
.hbd-pickup-date-field [class*="datepicker_icon"],
.hbd-pickup-date-field [class*="datepicker-icon"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* The only calendar icon/button we intentionally show. */
.hbd-pickup-date-field .hbd-pickup-calendar-button {
    box-sizing: border-box !important;
    position: absolute !important;
    z-index: 4 !important;
    top: 6px !important;
    right: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 5px !important;
    border: 0 !important;
    border-radius: 3px !important;
    background: transparent !important;
    color: #007c89 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.hbd-pickup-date-field .hbd-pickup-calendar-button:hover,
.hbd-pickup-date-field .hbd-pickup-calendar-button:focus-visible {
    background: rgba(0, 124, 137, 0.08) !important;
    outline: none !important;
}

.hbd-pickup-date-field .hbd-pickup-calendar-button svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    pointer-events: none !important;
}

/* Remove leftovers from earlier compatibility builds. */
.hbd-pickup-date-display,
.hbd-pickup-date-button {
    display: none !important;
}

@media (max-width: 480px) {
    .hbd-pickup-date-field {
        --hbd-date-width: 170px;
        --gf-field-date-width: 170px;
    }
}

/* ----------------------------- Pickup time ----------------------------- */
.hbd-pickup-time-field .ginput_container.ginput_complex,
.hbd-pickup-time-field .ginput_container.ginput_complex.gform-grid-row,
.hbd-pickup-time-field .ginput_complex.gform-grid-row,
.hbd-pickup-time-field .ginput_container_time {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hbd-pickup-time-field .gfield_time_hour,
.hbd-pickup-time-field .gfield_time_minute,
.hbd-pickup-time-field .gfield_time_ampm,
.hbd-pickup-time-field .ginput_container_time.gform-grid-col,
.hbd-pickup-time-field .gform-grid-col {
    position: relative !important;
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hbd-pickup-time-field input,
.hbd-pickup-time-field select,
.hbd-pickup-time-field .gfield_time_hour input,
.hbd-pickup-time-field .gfield_time_minute input,
.hbd-pickup-time-field .gfield_time_ampm select {
    box-sizing: border-box !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    border: 1px solid #8c8f94 !important;
    border-radius: 3px !important;
    background: #fff !important;
    color: #1d2327 !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    font-variant-numeric: tabular-nums !important;
    box-shadow: none !important;
}

.hbd-pickup-time-field .gfield_time_hour input,
.hbd-pickup-time-field .gfield_time_minute input,
.hbd-pickup-time-field input[id$="_1"],
.hbd-pickup-time-field input[id$="_2"] {
    width: 62px !important;
    min-width: 62px !important;
    padding: 7px 9px !important;
    text-align: center !important;
}

.hbd-pickup-time-field .gfield_time_ampm select,
.hbd-pickup-time-field select[id$="_3"] {
    width: 78px !important;
    min-width: 78px !important;
    padding: 7px 24px 7px 10px !important;
}

.hbd-pickup-time-field .hour_minute_colon,
.hbd-pickup-time-field .ginput_container_time i {
    position: static !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: 6px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #1d2327 !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 42px !important;
    transform: none !important;
}

.hbd-pickup-time-field .gfield_time_hour > label,
.hbd-pickup-time-field .gfield_time_minute > label,
.hbd-pickup-time-field .gfield_time_ampm > label,
.hbd-pickup-time-field .gform-field-label--type-sub {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}

.hbd-pickup-time-note {
    display: block !important;
    clear: both !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    color: #5d6770 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
}

@media (max-width: 480px) {
    .hbd-pickup-time-field .ginput_container.ginput_complex,
    .hbd-pickup-time-field .ginput_container.ginput_complex.gform-grid-row,
    .hbd-pickup-time-field .ginput_complex.gform-grid-row,
    .hbd-pickup-time-field .ginput_container_time {
        gap: 4px !important;
    }

    .hbd-pickup-time-field .gfield_time_hour input,
    .hbd-pickup-time-field .gfield_time_minute input,
    .hbd-pickup-time-field input[id$="_1"],
    .hbd-pickup-time-field input[id$="_2"] {
        width: 56px !important;
        min-width: 56px !important;
    }

    .hbd-pickup-time-field .gfield_time_ampm select,
    .hbd-pickup-time-field select[id$="_3"] {
        width: 72px !important;
        min-width: 72px !important;
    }

    .hbd-pickup-time-note {
        white-space: normal !important;
    }
}


/* ------------------------- Frontend datepicker panel -------------------------
 * Harvest's child theme and product form have broad button/select/table styles.
 * Reset the jQuery UI popup so the calendar is opaque, isolated, and readable.
 */
body.single-product #ui-datepicker-div.ui-datepicker,
body.woocommerce #ui-datepicker-div.ui-datepicker,
#ui-datepicker-div.ui-datepicker {
    box-sizing: border-box !important;
    z-index: 1000000 !important;
    width: 316px !important;
    max-width: calc(100vw - 24px) !important;
    height: auto !important;
    margin: 6px 0 0 !important;
    padding: 12px !important;
    overflow: hidden !important;
    border: 1px solid #c8c8c8 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #1d2327 !important;
    opacity: 1 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.20) !important;
    font-family: inherit !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    text-shadow: none !important;
    isolation: isolate !important;
}

#ui-datepicker-div.ui-datepicker * {
    box-sizing: border-box !important;
}

#ui-datepicker-div.ui-datepicker .ui-datepicker-header {
    position: relative !important;
    min-height: 38px !important;
    margin: 0 0 8px !important;
    padding: 0 40px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #1d2327 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    line-height: normal !important;
}

#ui-datepicker-div.ui-datepicker .ui-datepicker-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #1d2327 !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: normal !important;
    text-align: center !important;
    text-shadow: none !important;
}

#ui-datepicker-div.ui-datepicker .ui-datepicker-title select,
#ui-datepicker-div.ui-datepicker select.ui-datepicker-month,
#ui-datepicker-div.ui-datepicker select.ui-datepicker-year {
    display: inline-block !important;
    width: auto !important;
    min-width: 94px !important;
    max-width: 130px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 4px 28px 4px 9px !important;
    border: 1px solid #b8bcc0 !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #1d2327 !important;
    opacity: 1 !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    text-shadow: none !important;
}

#ui-datepicker-div.ui-datepicker .ui-datepicker-title select:focus,
#ui-datepicker-div.ui-datepicker .ui-datepicker-title select:active {
    border-color: #007c89 !important;
    outline: 1px solid #007c89 !important;
    color: #1d2327 !important;
    background-color: #ffffff !important;
}

#ui-datepicker-div.ui-datepicker .ui-datepicker-prev,
#ui-datepicker-div.ui-datepicker .ui-datepicker-next {
    position: absolute !important;
    top: 3px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: #007c89 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    text-shadow: none !important;
    overflow: visible !important;
}

#ui-datepicker-div.ui-datepicker .ui-datepicker-prev { left: 0 !important; }
#ui-datepicker-div.ui-datepicker .ui-datepicker-next { right: 0 !important; }

#ui-datepicker-div.ui-datepicker .ui-datepicker-prev:hover,
#ui-datepicker-div.ui-datepicker .ui-datepicker-next:hover,
#ui-datepicker-div.ui-datepicker .ui-datepicker-prev:focus,
#ui-datepicker-div.ui-datepicker .ui-datepicker-next:focus {
    background: rgba(0, 124, 137, 0.09) !important;
    outline: none !important;
}

#ui-datepicker-div.ui-datepicker .ui-datepicker-prev span,
#ui-datepicker-div.ui-datepicker .ui-datepicker-next span {
    display: none !important;
}

#ui-datepicker-div.ui-datepicker .ui-datepicker-prev::before,
#ui-datepicker-div.ui-datepicker .ui-datepicker-next::after {
    display: block !important;
    padding: 0 !important;
    color: #007c89 !important;
    font-family: Arial, sans-serif !important;
    font-size: 25px !important;
    font-weight: 400 !important;
    line-height: 28px !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
}
#ui-datepicker-div.ui-datepicker .ui-datepicker-prev::before { content: "‹" !important; }
#ui-datepicker-div.ui-datepicker .ui-datepicker-next::after { content: "›" !important; }

#ui-datepicker-div.ui-datepicker table.ui-datepicker-calendar {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 2px !important;
    background: #ffffff !important;
    table-layout: fixed !important;
    box-shadow: none !important;
}

#ui-datepicker-div.ui-datepicker .ui-datepicker-calendar thead,
#ui-datepicker-div.ui-datepicker .ui-datepicker-calendar tbody,
#ui-datepicker-div.ui-datepicker .ui-datepicker-calendar tr,
#ui-datepicker-div.ui-datepicker .ui-datepicker-calendar th,
#ui-datepicker-div.ui-datepicker .ui-datepicker-calendar td {
    border: 0 !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

#ui-datepicker-div.ui-datepicker .ui-datepicker-calendar th {
    height: 30px !important;
    padding: 4px 1px !important;
    color: #4f5962 !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    text-align: center !important;
    text-transform: none !important;
}

#ui-datepicker-div.ui-datepicker .ui-datepicker-calendar td {
    width: 14.285% !important;
    height: 36px !important;
    padding: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

#ui-datepicker-div.ui-datepicker .ui-datepicker-calendar td > a,
#ui-datepicker-div.ui-datepicker .ui-datepicker-calendar td > span,
#ui-datepicker-div.ui-datepicker .ui-datepicker-calendar .ui-state-default {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #1d2327 !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 34px !important;
    text-align: center !important;
    text-decoration: none !important;
    text-shadow: none !important;
    filter: none !important;
}

#ui-datepicker-div.ui-datepicker .ui-datepicker-calendar td > a:hover,
#ui-datepicker-div.ui-datepicker .ui-datepicker-calendar .ui-state-hover {
    background: #edf7f6 !important;
    color: #006b70 !important;
}

#ui-datepicker-div.ui-datepicker .ui-datepicker-calendar .ui-datepicker-current-day > a,
#ui-datepicker-div.ui-datepicker .ui-datepicker-calendar .ui-state-active {
    background: #007c89 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

#ui-datepicker-div.ui-datepicker .ui-datepicker-calendar .ui-datepicker-today > a:not(.ui-state-active) {
    box-shadow: inset 0 0 0 1px #007c89 !important;
    color: #006b70 !important;
}

#ui-datepicker-div.ui-datepicker .ui-datepicker-calendar .ui-state-disabled,
#ui-datepicker-div.ui-datepicker .ui-datepicker-calendar .ui-state-disabled > span,
#ui-datepicker-div.ui-datepicker .ui-datepicker-calendar .ui-datepicker-unselectable .ui-state-default {
    background: #ffffff !important;
    color: #c5c9cd !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

#ui-datepicker-div.ui-datepicker .ui-datepicker-buttonpane {
    display: none !important;
}

@media (max-width: 420px) {
    #ui-datepicker-div.ui-datepicker {
        width: 292px !important;
        padding: 10px !important;
    }
    #ui-datepicker-div.ui-datepicker .ui-datepicker-title select,
    #ui-datepicker-div.ui-datepicker select.ui-datepicker-month,
    #ui-datepicker-div.ui-datepicker select.ui-datepicker-year {
        min-width: 86px !important;
        max-width: 112px !important;
        font-size: 14px !important;
    }
}


/* ---------------- Gravity Forms 3.x / WhatSock calendar ----------------
 * GF 3.0 no longer uses #ui-datepicker-div. Its accessible datepicker renders
 * a standalone div.calendar + table.calendar. Harvest's global form/button
 * styles leave that container transparent, allowing the Woo submit button to
 * show through. These rules target the actual GF3 calendar.
 */
body.single-product div.calendar.hbd-gf-datepicker-calendar,
body.woocommerce div.calendar.hbd-gf-datepicker-calendar,
div.calendar.hbd-gf-datepicker-calendar {
    box-sizing: border-box !important;
    position: absolute !important;
    z-index: 1000001 !important;
    width: 336px !important;
    max-width: calc(100vw - 24px) !important;
    height: auto !important;
    margin: 8px 0 0 !important;
    padding: 12px !important;
    overflow: hidden !important;
    border: 1px solid #c8ccd0 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #1d2327 !important;
    opacity: 1 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22) !important;
    font-family: inherit !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-shadow: none !important;
    isolation: isolate !important;
    filter: none !important;
}

/* Make the entire popup paint an opaque layer, even if a GF/WhatSock child
 * receives a transparent background from theme CSS. */
div.calendar.hbd-gf-datepicker-calendar::before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    inset: 0 !important;
    display: block !important;
    border-radius: inherit !important;
    background: #ffffff !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

div.calendar.hbd-gf-datepicker-calendar *,
div.calendar.hbd-gf-datepicker-calendar *::before,
div.calendar.hbd-gf-datepicker-calendar *::after {
    box-sizing: border-box !important;
    text-shadow: none !important;
}

div.calendar.hbd-gf-datepicker-calendar table.calendar {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 2px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #1d2327 !important;
    table-layout: fixed !important;
    box-shadow: none !important;
}

div.calendar.hbd-gf-datepicker-calendar table.calendar tr,
div.calendar.hbd-gf-datepicker-calendar table.calendar th,
div.calendar.hbd-gf-datepicker-calendar table.calendar td {
    border: 0 !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Year/month rows and navigation. */
div.calendar.hbd-gf-datepicker-calendar td.nav,
div.calendar.hbd-gf-datepicker-calendar td.year,
div.calendar.hbd-gf-datepicker-calendar td.month {
    height: 36px !important;
    padding: 2px !important;
    background: #ffffff !important;
    color: #1d2327 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    vertical-align: middle !important;
}

div.calendar.hbd-gf-datepicker-calendar td.nav.btn {
    width: 32px !important;
    min-width: 32px !important;
    border-radius: 4px !important;
    color: #007c89 !important;
    cursor: pointer !important;
}

div.calendar.hbd-gf-datepicker-calendar td.nav.btn:hover,
div.calendar.hbd-gf-datepicker-calendar td.nav.btn:focus,
div.calendar.hbd-gf-datepicker-calendar td.nav.btn.selected {
    background: #eef7f7 !important;
    color: #006b70 !important;
    outline: none !important;
}

div.calendar.hbd-gf-datepicker-calendar td.nav.btn.disabled,
div.calendar.hbd-gf-datepicker-calendar td.nav.btn[aria-disabled="true"] {
    background: #ffffff !important;
    color: #c5c9cd !important;
    cursor: default !important;
}

div.calendar.hbd-gf-datepicker-calendar select.nav.current.select.year,
div.calendar.hbd-gf-datepicker-calendar select.nav.current.select.month {
    display: inline-block !important;
    width: 100% !important;
    max-width: 216px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 auto !important;
    padding: 5px 28px 5px 10px !important;
    border: 1px solid #9ca3af !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    color: #1d2327 !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    transform: none !important;
}

/* Weekday labels. */
div.calendar.hbd-gf-datepicker-calendar th.week,
div.calendar.hbd-gf-datepicker-calendar th {
    height: 30px !important;
    padding: 4px 1px !important;
    background: #ffffff !important;
    color: #4f5962 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* Day cells are the actual WhatSock buttons (role=button on <td>). */
div.calendar.hbd-gf-datepicker-calendar td.day,
div.calendar.hbd-gf-datepicker-calendar td.empty {
    width: 14.285% !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    color: #1d2327 !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 38px !important;
    text-align: center !important;
    vertical-align: middle !important;
    transform: none !important;
}

div.calendar.hbd-gf-datepicker-calendar td.day:not(.disabled) {
    cursor: pointer !important;
}

div.calendar.hbd-gf-datepicker-calendar td.day:not(.disabled):hover,
div.calendar.hbd-gf-datepicker-calendar td.day:not(.disabled):focus,
div.calendar.hbd-gf-datepicker-calendar td.day.selected:not(.disabled) {
    background: #edf7f6 !important;
    color: #006b70 !important;
    outline: none !important;
}

div.calendar.hbd-gf-datepicker-calendar td.day.dayMarked:not(.disabled),
div.calendar.hbd-gf-datepicker-calendar td.day[aria-current="date"].selected:not(.disabled) {
    background: #007c89 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

div.calendar.hbd-gf-datepicker-calendar td.day[aria-current="date"]:not(.selected):not(.disabled) {
    box-shadow: inset 0 0 0 1px #007c89 !important;
    color: #006b70 !important;
}

div.calendar.hbd-gf-datepicker-calendar td.day.disabled,
div.calendar.hbd-gf-datepicker-calendar td.day[aria-disabled="true"],
div.calendar.hbd-gf-datepicker-calendar td.empty {
    background: #ffffff !important;
    color: #c7cbd0 !important;
    opacity: 1 !important;
    cursor: default !important;
    box-shadow: none !important;
}

div.calendar.hbd-gf-datepicker-calendar td.day span,
div.calendar.hbd-gf-datepicker-calendar td.nav span {
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
}

/* WhatSock's screen-reader help/message area should stay inside the opaque panel. */
div.calendar.hbd-gf-datepicker-calendar .monthMessage,
div.calendar.hbd-gf-datepicker-calendar [class*="message"],
div.calendar.hbd-gf-datepicker-calendar [class*="help"] {
    background: #ffffff !important;
    color: #59636d !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}

@media (max-width: 420px) {
    div.calendar.hbd-gf-datepicker-calendar {
        width: 300px !important;
        padding: 10px !important;
    }
    div.calendar.hbd-gf-datepicker-calendar td.day,
    div.calendar.hbd-gf-datepicker-calendar td.empty {
        height: 36px !important;
        min-height: 36px !important;
        font-size: 15px !important;
        line-height: 36px !important;
    }
}


/* Safety fallback: WhatSock always renders the calendar root as role=dialog.
 * Keep it opaque even if another GF script strips/overrides our custom class. */
body.single-product div.calendar[role="dialog"] {
    z-index: 1000001 !important;
    border: 1px solid #c8ccd0 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #1d2327 !important;
    opacity: 1 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22) !important;
    isolation: isolate !important;
}
body.single-product div.calendar[role="dialog"] table.calendar,
body.single-product div.calendar[role="dialog"] table.calendar tr,
body.single-product div.calendar[role="dialog"] table.calendar th,
body.single-product div.calendar[role="dialog"] table.calendar td {
    background-color: #ffffff !important;
    background-image: none !important;
}