/* WooCommerce Collection Timeslots - Frontend Styles */
/* Minimal custom styling - inherit from theme wherever possible      */
/* Colour/radius values are set via CSS custom properties injected    */
/* by PHP (wc-collection-timeslots.php) from the admin style settings */

/* ── Custom property defaults (overridden by inline PHP styles) ──── */
.wc-collection-timeslots-wrapper {
    --wct-primary:        #2c3e50;
    --wct-primary-text:   #ffffff;
    --wct-primary-dark:   #1a252f;
    --wct-primary-shadow: rgba(44, 62, 80, 0.3);
    --wct-primary-focus:  rgba(44, 62, 80, 0.1);
    --wct-toggle:         #2c5f2d;
    --wct-toggle-text:    #ffffff;
    --wct-toggle-shadow:  rgba(44, 95, 45, 0.3);
    --wct-radius:         8px;

    /* Allow the Flatpickr calendar (absolutely positioned) to overflow
       without being clipped by parent containers */
    overflow: visible;
}

/* ── Field validation tooltip ─────────────────────────────────────── */
/* Styled to match the browser's native required-field validation bubble
   (the one shown for WAPF's own required select fields) so our required
   fields look consistent, even though this one is JS-rendered rather than
   the real Constraint Validation API bubble (see frontend.js for why). */
.wct-field-tooltip {
    position: absolute;
    background: #ffffff;
    color: #232323;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1.4;
    max-width: 280px;
    z-index: 100000;
}

.wct-field-tooltip::before,
.wct-field-tooltip::after {
    content: '';
    position: absolute;
    top: -7px;
    left: 16px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
}

.wct-field-tooltip::before {
    border-bottom: 7px solid #ccc;
}

.wct-field-tooltip::after {
    top: -6px;
    border-bottom: 6px solid #ffffff;
}

/* Full width variant (no padding/border) */
.wc-collection-timeslots-wrapper.wc-timeslots-fullwidth {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.wc-collection-timeslots-wrapper h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    color: inherit;
}

/* ── Fulfillment Mode Selector (Collection / Delivery Toggle) ─────── */
.fulfillment-mode-selector {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.fulfillment-mode-label {
    flex: 1;
    margin: 0;
    cursor: pointer;
}

.fulfillment-mode-label input[type="radio"] {
    display: none;
}

.fulfillment-mode-label .mode-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    background: #fff;
    border: 2px solid #ddd;
    border-radius: var(--wct-radius);
    transition: all 0.3s ease;
    font-weight: 600;
    color: #666;
}

.fulfillment-mode-label .mode-icon {
    font-size: 20px;
}

.fulfillment-mode-label .mode-text {
    font-size: 15px;
}

.fulfillment-mode-label input[type="radio"]:checked + .mode-option {
    background: var(--wct-toggle);
    border-color: var(--wct-toggle);
    color: var(--wct-toggle-text);
    box-shadow: 0 3px 8px var(--wct-toggle-shadow);
}

.fulfillment-mode-label:hover .mode-option {
    border-color: #999;
}

.fulfillment-mode-label input[type="radio"]:checked + .mode-option:hover {
    border-color: var(--wct-toggle);
}

/* ── Fulfillment Sections ─────────────────────────────────────────── */
.fulfillment-section {
    margin-top: 20px;
}

.timeslot-field {
    margin-bottom: 20px;
    overflow: visible;
}

.timeslot-field label {
    display: block;
    margin-bottom: 0;
    font-weight: inherit;
    font-size: inherit;
    font-family: inherit;
    color: inherit;
}

.timeslot-field .required {
    color: inherit;
    margin-left: 3px;
}

.timeslot-field .description {
    margin-top: 5px;
    font-size: inherit;
    color: inherit;
    font-style: italic;
}

/* All text inputs - inherit everything from theme's input styling */
.timeslot-field input[type="text"].collection-date-picker,
.timeslot-field input[type="text"].delivery-date-picker,
input.delivery-address-input {
    width: 100% !important;
    max-width: 100% !important;
    display: block;
    box-sizing: border-box;
}

/* ── Google Autocomplete ─────────────────────────────────────────── */
.pac-container {
    border-radius: 6px;
    border-top: 1px solid #ddd;
    margin-top: 5px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    font-family: inherit;
}

.pac-item {
    padding: 10px;
    border-top: 1px solid #eee;
    cursor: pointer;
}

.pac-item:hover {
    background: #f5f5f5;
}

/* ── Delivery Calculation Results ────────────────────────────────── */
.delivery-calculation {
    margin-top: 20px;
}

.delivery-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background: #f0f8ff;
    border: 1px solid #b8d4e8;
    border-radius: 6px;
    color: #0066cc;
    font-size: inherit;
}

.delivery-loading .spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #0066cc;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.delivery-result {
    padding: 10px 15px;
    background: #f0fdf4;
    border: 2px solid #86efac;
    border-radius: var(--wct-radius);
}

.delivery-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    font-size: 12px;
    color: inherit;
}

.delivery-distance,
.delivery-cost {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: inherit;
    white-space: nowrap;
}

.delivery-distance strong,
.delivery-cost strong {
    color: inherit;
    font-weight: normal;
}

.delivery-info > span {
    color: inherit;
    margin: 0 4px;
}

.delivery-cost-highlight {
    font-size: 12px;
    font-weight: 700;
    color: inherit;
}

.delivery-error {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 15px;
    background: #fef2f2;
    border: 2px solid #fca5a5;
    border-radius: 6px;
    color: #dc2626;
    font-size: inherit;
}

.delivery-error .error-icon {
    font-size: 18px;
    flex-shrink: 0;
}

/* ── Date Picker Focus ───────────────────────────────────────────── */
.timeslot-field input.collection-date-picker:focus {
    outline: none;
    border-color: var(--wct-primary);
    box-shadow: 0 0 0 3px var(--wct-primary-focus);
}

/* ── Flatpickr Calendar ─────────────────────────────────────────── */

/* Prevent known ancestor containers from clipping the absolutely-positioned calendar */
.wapf-field-description,
.wapf-field-description > div,
.wapf-field-description > p {
    overflow: visible !important;
}

.flatpickr-calendar {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 8px;
    border: none;
}

/* WAPF (Advanced Product Fields) bundles its own Flatpickr build and applies
   `.flatpickr-innerContainer { padding: 13px; }` globally. Flatpickr's own
   .flatpickr-days/.flatpickr-weekdays are a fixed width matching the outer
   calendar, so that extra padding pushes the day grid past the calendar's
   right edge, and .flatpickr-innerContainer's overflow:hidden clips it
   (visible as the last day-of-week column being cut off). Reset padding to
   flatpickr's real default (0) for our namespaced instance only. */
.wct-flatpickr .flatpickr-innerContainer {
    padding: 0 !important;
}

/* Selected day — overridden by PHP inline styles with the saved colour */
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--wct-primary);
    border-color: var(--wct-primary);
    color: var(--wct-primary-text);
}

.flatpickr-day:hover {
    background: #e8e8e8;
    border-color: #e8e8e8;
}

/* ── Timeslot Buttons ────────────────────────────────────────────── */
.timeslot-buttons-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.timeslot-button {
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    background: #f9f9f9;
    border: 2px solid #e0e0e0;
    border-radius: var(--wct-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    white-space: nowrap;
}

.timeslot-button:hover {
    background: #f0f0f0;
    border-color: #999;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.timeslot-button:active {
    transform: translateY(0);
}

.timeslot-button.active {
    background: var(--wct-primary);
    color: var(--wct-primary-text);
    border-color: var(--wct-primary);
    box-shadow: 0 4px 12px var(--wct-primary-shadow);
}

.timeslot-button.active:hover {
    background: var(--wct-primary-dark);
    border-color: var(--wct-primary-dark);
}

/* ── Loading State ───────────────────────────────────────────────── */
.timeslot-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding: 12px 16px;
    background: #f0f8ff;
    border-left: 4px solid var(--wct-primary);
    color: #555;
    font-size: 14px;
    border-radius: 4px;
}

.timeslot-loading .spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 3px solid var(--wct-primary-focus);
    border-top-color: var(--wct-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ── Error State ─────────────────────────────────────────────────── */
.timeslot-error {
    margin-top: 15px;
    padding: 12px 16px;
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    color: #856404;
    font-size: 14px;
    border-radius: 4px;
}

/* ── Cart & Checkout Display ─────────────────────────────────────── */
.wc-item-meta li {
    list-style: none;
}

.wc-item-meta li strong {
    display: inline-block;
    margin-right: 5px;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .wc-collection-timeslots-wrapper {
        padding: 20px 15px;
    }

    .timeslot-field input.collection-date-picker {
        max-width: 100%;
    }

    .timeslot-buttons-container {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
    }

    .timeslot-button {
        padding: 12px 16px;
        font-size: 13px;
    }

    /* "Estimated Distance: X km / Estimated Delivery Cost: RXX,XX" is too
       wide to fit on one line on a phone screen and was overflowing the
       green box — stack the two onto separate lines instead. */
    .delivery-info {
        flex-direction: column;
        align-items: flex-start;
    }

    .delivery-info > span {
        display: none;
    }

    .delivery-result {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 480px) {
    .timeslot-buttons-container {
        grid-template-columns: 1fr 1fr;
    }

    .wc-collection-timeslots-wrapper h3 {
        font-size: 18px;
    }
}

/* ── Checkout Page Messages ──────────────────────────────────────── */
.wc-timeslots-checkout-message {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    margin-bottom: 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
}

.wc-timeslots-loading {
    background: #f0f8ff;
    border: 2px solid #b8d4e8;
    color: #0066cc;
}

.wc-timeslots-loading .spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #0066cc;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.wc-timeslots-success {
    background: #f0fdf4;
    border: 2px solid #86efac;
    color: var(--wct-toggle);
}

.wc-timeslots-success .icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: var(--wct-toggle);
    color: var(--wct-toggle-text);
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    font-weight: bold;
}

.wc-timeslots-error {
    background: #fef2f2;
    border: 2px solid #fca5a5;
    color: #dc2626;
}

.wc-timeslots-error .icon {
    font-size: 18px;
}

/* ── Cart Totals - Delivery TBC Row ──────────────────────────────── */
.delivery-tbc th,
.delivery-tbc td {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    line-height: inherit;
}

.delivery-tbc th {
    font-weight: bold !important;
    text-align: left !important;
}

.delivery-tbc td {
    font-weight: normal !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
}

/* ── Order Details Page ─────────────────────────────────────────── */
.wc-item-meta {
    list-style: none !important;
    padding: 0 !important;
    margin: 10px 0 0 !important;
}

.wc-item-meta li {
    margin: 4px 0 !important;
    font-size: inherit !important;
}

.wc-item-meta-label {
    display: inline !important;
    font-weight: inherit !important;
}

.wc-item-meta p {
    display: inline !important;
    margin: 0 !important;
    font-weight: inherit !important;
}

/* ── Checkout: Delivery Address heading ─────────────────────────── */
.wct-delivery-address-heading {
    margin: 0 0 15px;
    font-size: 1.1em;
    font-weight: 700;
}

/* ── Checkout: Country/Province selects (theme only widens text inputs) ── */
#billing_country_field select,
#billing_state_field select,
#shipping_country_field select,
#shipping_state_field select {
    width: 100%;
}

/* ── Thank-you page: Billing/Shipping address phone placement ──────── */
/* The theme deliberately renders .customer_details <td> as a flex
   container (its responsive stacked-table layout), which turns the
   address text and the phone paragraph into side-by-side flex items
   that only wrap onto their own line if the viewport happens to be
   narrow enough. flex-basis: 100% forces the phone onto its own line
   unconditionally, without undoing the theme's flex layout. */
.customer_details td .woocommerce-customer-details--phone {
    flex-basis: 100%;
    margin: 0;
}