/* ============================================================
   MCR Availability Picker – front-end styles
   
   IMPORTANT: GF's theme system aggressively styles all <button>
   elements inside .gform_wrapper. We use high-specificity
   selectors + !important to guarantee our chip design wins.
   ============================================================ */

/* ---- Design tokens (fallbacks if theme vars aren't present) ---- */
:root {
    --mcr-ap-dark: var(--MCR-DarkBlue, #213350);
    --mcr-ap-light-blue: var(--MCR-LightBlue, #5BC6E9);
    --mcr-ap-ivory: var(--MCR-Ivory, #FDF9EA);
    --mcr-ap-yellow: var(--MCR-Yellow, #F8D45B);
    --mcr-ap-green: var(--MCR-Green, #B5E046);
    --mcr-ap-teal: var(--MCR-Teal, #2A6075);
    --mcr-ap-radius: 10px;
    --mcr-ap-transition: 0.2s ease;
}

/* ---- Global summary bar ---- */
.gform_wrapper .ginput_container_availability_picker .mcr-ap-summary {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 14px 20px !important;
    margin: 0 0 24px 0 !important;
    border-radius: var(--mcr-ap-radius) !important;
    background: var(--mcr-ap-dark) !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    border: none !important;
    box-shadow: 0 2px 12px rgba(33, 51, 80, 0.15) !important;
    line-height: 1.4 !important;
}

.gform_wrapper .ginput_container_availability_picker .mcr-ap-summary__icon {
    font-size: 20px !important;
    line-height: 1 !important;
}

.gform_wrapper .ginput_container_availability_picker .mcr-ap-summary__count {
    display: inline-block !important;
    min-width: 26px !important;
    text-align: center !important;
    padding: 2px 10px !important;
    border-radius: 20px !important;
    background: var(--mcr-ap-green) !important;
    color: var(--mcr-ap-dark) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    transition: transform var(--mcr-ap-transition) !important;
    border: none !important;
    line-height: 1.4 !important;
}

.gform_wrapper .ginput_container_availability_picker .mcr-ap-summary__min {
    opacity: 0.7 !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    transition: opacity var(--mcr-ap-transition) !important;
}

/* Warning state: user started selecting but hasn't reached the minimum */
.gform_wrapper .ginput_container_availability_picker .mcr-ap-summary--warning {
    background: #b8860b !important;
}

.gform_wrapper .ginput_container_availability_picker .mcr-ap-summary--warning .mcr-ap-summary__count {
    background: var(--mcr-ap-yellow) !important;
}

.gform_wrapper .ginput_container_availability_picker .mcr-ap-summary--warning .mcr-ap-summary__min {
    opacity: 1 !important;
    font-weight: 600 !important;
}

/* Valid state: minimum met */
.gform_wrapper .ginput_container_availability_picker .mcr-ap-summary--valid .mcr-ap-summary__min {
    opacity: 0 !important;
}


/* ---- Day card ---- */
.gform_wrapper .ginput_container_availability_picker .mcr-ap-day {
    background: var(--mcr-ap-ivory) !important;
    border: 1px solid rgba(33, 51, 80, 0.08) !important;
    border-radius: var(--mcr-ap-radius) !important;
    padding: 20px 22px 18px !important;
    margin: 0 0 16px 0 !important;
    box-shadow: 0 1px 4px rgba(33, 51, 80, 0.06) !important;
    transition: box-shadow var(--mcr-ap-transition) !important;
}

.gform_wrapper .ginput_container_availability_picker .mcr-ap-day:hover {
    box-shadow: 0 4px 16px rgba(33, 51, 80, 0.10) !important;
}

.gform_wrapper .ginput_container_availability_picker .mcr-ap-day__header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
}

.gform_wrapper .ginput_container_availability_picker .mcr-ap-day__name {
    font-weight: 700 !important;
    font-size: 16px !important;
    color: var(--mcr-ap-dark) !important;
    line-height: 1.3 !important;
}

.gform_wrapper .ginput_container_availability_picker .mcr-ap-day__badge {
    display: inline-block !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    background: transparent !important;
    color: var(--mcr-ap-dark) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    opacity: 0.45 !important;
    transition: all var(--mcr-ap-transition) !important;
    border: 1px solid rgba(33, 51, 80, 0.15) !important;
    line-height: 1.3 !important;
}

.gform_wrapper .ginput_container_availability_picker .mcr-ap-day__badge--active {
    background: var(--mcr-ap-yellow) !important;
    border-color: var(--mcr-ap-yellow) !important;
    opacity: 1 !important;
}


/* ---- Slot chips container ---- */
.gform_wrapper .ginput_container_availability_picker .mcr-ap-day__slots {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* ============================================================
   SLOT CHIPS
   Using <div role="button"> instead of <button> to avoid
   Gravity Forms' aggressive button styling/JS interception.
   ============================================================ */

.gform_wrapper .ginput_container_availability_picker .mcr-ap-slot {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    padding: 11px 16px !important;
    border: 2px solid var(--mcr-ap-dark) !important;
    border-radius: 28px !important;
    background: #fff !important;
    color: var(--mcr-ap-dark) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    transition: all var(--mcr-ap-transition) !important;
    text-align: center !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    position: relative !important;

    /* Uniform sizing: 5 chips per row (3 rows of 5 = 15 slots) */
    flex: 1 1 calc(20% - 10px) !important;
    width: calc(20% - 10px) !important;
}

/* Hover */
.gform_wrapper .ginput_container_availability_picker .mcr-ap-slot:hover {
    background: rgba(91, 198, 233, 0.10) !important;
    border-color: var(--mcr-ap-light-blue) !important;
    color: var(--mcr-ap-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 10px rgba(91, 198, 233, 0.20) !important;
}

/* Focus-visible */
.gform_wrapper .ginput_container_availability_picker .mcr-ap-slot:focus-visible {
    outline: 2px solid var(--mcr-ap-light-blue) !important;
    outline-offset: 2px !important;
}

/* ---- SELECTED state ---- */
.gform_wrapper .ginput_container_availability_picker .mcr-ap-slot[aria-pressed="true"],
.gform_wrapper .ginput_container_availability_picker .mcr-ap-slot.mcr-ap-slot--selected {
    background: var(--mcr-ap-light-blue) !important;
    border-color: var(--mcr-ap-light-blue) !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(91, 198, 233, 0.30) !important;
}

/* Selected + hover */
.gform_wrapper .ginput_container_availability_picker .mcr-ap-slot[aria-pressed="true"]:hover,
.gform_wrapper .ginput_container_availability_picker .mcr-ap-slot.mcr-ap-slot--selected:hover {
    background: var(--mcr-ap-teal) !important;
    border-color: var(--mcr-ap-teal) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}


/* ---- Responsive ---- */

/* Mobile: 3 chips per row (5 rows of 3) */
@media (max-width: 600px) {

    .gform_wrapper .ginput_container_availability_picker .mcr-ap-slot {
        flex: 1 1 calc(33.33% - 10px) !important;
        width: calc(33.33% - 10px) !important;
        min-height: 44px !important;
        font-size: 13px !important;
        padding: 8px 6px !important;
    }

    .gform_wrapper .ginput_container_availability_picker .mcr-ap-day {
        padding: 16px 14px 14px !important;
    }

    .gform_wrapper .ginput_container_availability_picker .mcr-ap-day__name {
        font-size: 15px !important;
    }
}



/* ---- Validation error state ---- */
.gform_wrapper .gfield_error .ginput_container_availability_picker .mcr-ap-summary {
    background: #c02b2b !important;
}


/* ---- Editor placeholder ---- */
.mcr-ap-editor-placeholder {
    font-family: inherit !important;
    padding: 24px !important;
    background: #f5f5f5 !important;
    border-radius: 8px !important;
    text-align: center !important;
    color: #666 !important;
}


/* ---- "No availability" section ---- */
.gform_wrapper .ginput_container_availability_picker .mcr-ap-no-avail {
    margin: 0 0 20px 0 !important;
    padding: 16px 20px !important;
    background: #fff !important;
    border: 2px solid rgba(33, 51, 80, 0.12) !important;
    border-radius: var(--mcr-ap-radius) !important;
}

.gform_wrapper .ginput_container_availability_picker .mcr-ap-no-avail__label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--mcr-ap-dark) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide native checkbox */
.gform_wrapper .ginput_container_availability_picker .mcr-ap-no-avail__checkbox {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* Custom checkbox visual */
.gform_wrapper .ginput_container_availability_picker .mcr-ap-no-avail__check-box {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    border: 2px solid var(--mcr-ap-dark) !important;
    border-radius: 5px !important;
    background: #fff !important;
    transition: all var(--mcr-ap-transition) !important;
}

.gform_wrapper .ginput_container_availability_picker .mcr-ap-no-avail__checkbox:checked+.mcr-ap-no-avail__check-box {
    background: var(--mcr-ap-dark) !important;
    border-color: var(--mcr-ap-dark) !important;
}

.gform_wrapper .ginput_container_availability_picker .mcr-ap-no-avail__checkbox:checked+.mcr-ap-no-avail__check-box::after {
    content: '✓' !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.gform_wrapper .ginput_container_availability_picker .mcr-ap-no-avail__checkbox:focus-visible+.mcr-ap-no-avail__check-box {
    outline: 2px solid var(--mcr-ap-light-blue) !important;
    outline-offset: 2px !important;
}

/* Reason field */
.gform_wrapper .ginput_container_availability_picker .mcr-ap-no-avail__reason-wrap {
    margin-top: 14px !important;
    padding: 0 !important;
}

.gform_wrapper .ginput_container_availability_picker .mcr-ap-no-avail__reason-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--mcr-ap-dark) !important;
    margin: 0 0 6px 0 !important;
}

.gform_wrapper .ginput_container_availability_picker .mcr-ap-no-avail__reason {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 2px solid rgba(33, 51, 80, 0.15) !important;
    border-radius: 8px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    color: var(--mcr-ap-dark) !important;
    resize: vertical !important;
    min-height: 70px !important;
    transition: border-color var(--mcr-ap-transition) !important;
    background: #fff !important;
}

.gform_wrapper .ginput_container_availability_picker .mcr-ap-no-avail__reason:focus {
    border-color: var(--mcr-ap-light-blue) !important;
    outline: none !important;
}


/* ---- Days wrapper (for fade-out when "no availability" is checked) ---- */
.gform_wrapper .ginput_container_availability_picker .mcr-ap-days-wrapper {
    transition: opacity 0.3s ease !important;
}