/* ── Schuck Booking — Public Styles ─────────────────────── */

/*
 * Every color below reads from a CSS custom property first, with the
 * original hardcoded value as fallback. Override any of these from a
 * parent theme, Additional CSS, or another plugin by setting the variable
 * on :root or on .sb-booking-wrap itself — no !important required (these
 * variables win naturally; the !important flags elsewhere in this file are
 * only there to block outside theme/WooCommerce styles from bleeding IN):
 *
  *   .sb-booking-wrap {
 *     --sb-accent: #CB1017;
 *     --sb-accent-hover: #9E0C11;
 *     --sb-border: #E8E1D5;
 *     --sb-bg: #FAF6EF;
 *     --sb-text: #333333;
 *     --sb-container-border: transparent;  (set a color to bring the outer box border back)
 *     --sb-container-radius: 10px;
 *   }
 *
 * All of the above are also editable from wp-admin without touching any
 * CSS at all: Booking → Style Settings.
 *
 * The persons stepper (+/-) is styled completely independently of the
 * above — it will never inherit "Book Now" button styling, and has its
 * own variables so you can theme it on its own:
 *
 *   .sb-booking-wrap {
 *     --sb-qty-wrap-bg: #ffffff;
 *     --sb-qty-wrap-border: #E8E1D5;
 *     --sb-qty-radius: 8px;
 *     --sb-qty-btn-bg: #F5F1EA;
 *     --sb-qty-btn-hover-bg: #E8E1D5;
 *     --sb-qty-btn-text: #333333;
 *     --sb-qty-btn-w: 42px;
 *     --sb-qty-btn-h: 44px;
 *     --sb-qty-input-bg: #ffffff;
 *     --sb-qty-input-text: #333333;
 *     --sb-qty-input-w: 56px;
 *   }
 */

.sb-booking-wrap {
    max-width: 480px;
    margin: 20px 0;
    padding: 20px;
    border: 1px solid var(--sb-container-border, transparent);
    border-radius: var(--sb-container-radius, 10px);
    background: var(--sb-bg, #fafafa);
}

/* ── Field groups ────────────────────────────────────────── */
.sb-field-group {
    margin-bottom: 16px;
}
.sb-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--sb-text, #333);
    margin-bottom: 6px;
}
.sb-required { color: #e53935; }

/* ── Date input ──────────────────────────────────────────── */
.sb-date-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.sb-date-input {
    width: 100%;
    padding: 10px 40px 10px 14px;
    border: 2px solid var(--sb-border, #ddd);
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    background: #fff;
    transition: border-color .15s;
}
.sb-date-input:focus {
    outline: none;
    border-color: var(--sb-accent, #2271b1);
}
.sb-cal-icon {
    position: absolute;
    right: 12px;
    color: #999;
    pointer-events: none;
}

/* ── Note text ───────────────────────────────────────────── */
.sb-field-note {
    margin: 6px 0 0;
    font-size: 13px;
    min-height: 18px;
}
.sb-note-success { color: #1b5e20; }
.sb-note-error   { color: #c62828; }

/* ── Qty stepper ─────────────────────────────────────────── */
/* Fully independent of the general --sb-accent / button styling —
   style the stepper on its own with these variables:
   --sb-qty-wrap-bg, --sb-qty-wrap-border, --sb-qty-radius,
   --sb-qty-btn-bg, --sb-qty-btn-hover-bg, --sb-qty-btn-text,
   --sb-qty-btn-w, --sb-qty-btn-h,
   --sb-qty-input-bg, --sb-qty-input-text, --sb-qty-input-w        */
.sb-qty-wrap {
    display: flex !important;
    align-items: center !important;
    border: 2px solid var(--sb-qty-wrap-border, var(--sb-border, #ddd)) !important;
    border-radius: var(--sb-qty-radius, 8px) !important;
    overflow: hidden;
    width: fit-content;
    background: var(--sb-qty-wrap-bg, transparent) !important;
}
/* Hard reset: theme/WooCommerce generic `button` styles are usually
   higher-specificity or !important, so every property here is forced
   to win and never bleed onto these +/- buttons. */
.sb-qty-wrap button.sb-qty-btn {
    appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important;
    background: var(--sb-qty-btn-bg, #f5f5f5) !important;
    background-image: none !important;
    border: none !important; box-shadow: none !important; outline: none !important;
    text-shadow: none !important; border-radius: 0 !important;
    padding: 0 !important; margin: 0 !important;
    width: var(--sb-qty-btn-w, 42px) !important;
    height: var(--sb-qty-btn-h, 44px) !important;
    font-size: 20px !important; font-weight: 700 !important; line-height: 1 !important;
    font-family: inherit !important; text-transform: none !important; letter-spacing: normal !important;
    cursor: pointer;
    color: var(--sb-qty-btn-text, #333) !important;
    transition: background .15s;
    display: flex !important; align-items: center !important; justify-content: center !important;
}
.sb-qty-wrap button.sb-qty-btn:hover {
    background: var(--sb-qty-btn-hover-bg, #e8e8e8) !important;
}
.sb-qty-input {
    width: var(--sb-qty-input-w, 56px) !important;
    height: var(--sb-qty-btn-h, 44px) !important;
    border: none !important;
    border-left: 2px solid var(--sb-qty-wrap-border, var(--sb-border, #ddd)) !important;
    border-right: 2px solid var(--sb-qty-wrap-border, var(--sb-border, #ddd)) !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--sb-qty-input-text, #333) !important;
    -moz-appearance: textfield;
    background: var(--sb-qty-input-bg, #fff) !important;
    box-shadow: none !important; outline: none !important;
}
.sb-qty-input::-webkit-outer-spin-button,
.sb-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Price box ───────────────────────────────────────────── */
.sb-price-box {
    margin-top: 16px;
    padding: 16px;
    border: 2px solid var(--sb-accent, #2271b1);
    border-radius: 10px;
    background: #fff;
}
.sb-price-breakdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sb-price-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #555;
}
.sb-price-line-persons {
    color: #666;
    font-size: 13px;
    padding-left: 8px;
}
.sb-price-total-line {
    border-top: 2px solid #eee;
    padding-top: 8px;
    margin-top: 4px;
    font-weight: 700;
    font-size: 16px;
    color: var(--sb-text, #333);
}
.sb-price-total {
    font-size: 22px;
    font-weight: 800;
    color: var(--sb-accent, #2271b1);
}

/* ── Blocked days in flatpickr ───────────────────────────── */
.flatpickr-day.sb-blocked-day,
.flatpickr-day.sb-blocked-day:hover {
    background: #f5f5f5 !important;
    color: #ccc !important;
    cursor: not-allowed !important;
    text-decoration: line-through !important;
    pointer-events: none;
}
.flatpickr-day.sb-available-day {
    color: #333;
    font-weight: 600;
}

/* ── Tooltip on blocked days ─────────────────────────────── */
.flatpickr-day.sb-blocked-day[data-sb-reason] { position: relative; }
.flatpickr-day.sb-blocked-day[data-sb-reason]::after {
    content: attr(data-sb-reason);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30,30,30,0.88);
    color: #fff;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 5px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
    z-index: 99999;
}
.flatpickr-day.sb-blocked-day[data-sb-reason]:hover::after { opacity: 1; }

/* ── Selected day ────────────────────────────────────────── */
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: #2271b1 !important;
    border-color: #2271b1 !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════
   Fix layout when used with Elementor Pro Add to Cart widget
   ═══════════════════════════════════════════════════════════ */

/* Hide WooCommerce's default quantity input — we use our own persons stepper */
.sb-booking-wrap ~ .quantity,
form.cart .quantity,
.elementor-widget-woocommerce-product-add-to-cart .quantity,
.elementor-add-to-cart .quantity {
    display: none !important;
}

/* Make the booking form full width and stack cleanly */
form.cart .sb-booking-wrap {
    display: block;
    width: 100%;
    float: none;
    margin-bottom: 16px;
}

/* Book Now button full width below the form, not floated beside it */
form.cart .single_add_to_cart_button,
.elementor-widget-woocommerce-product-add-to-cart .single_add_to_cart_button {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    align-self: stretch !important;
    margin: 8px 0 0 !important;
}

/* Clear WooCommerce's default float layout on the cart form */
form.cart {
    display: block !important;
}
form.cart::before,
form.cart::after {
    content: '';
    display: table;
    clear: both;
}

/* Persons stepper full width */
.sb-booking-wrap .sb-qty-wrap {
    width: 100%;
}
.sb-booking-wrap .sb-qty-input {
    flex: 1;
}