/* ═══════════════════════════════════════════════════════════════
   Cluck Brothers — Upsell Modal  ·  Frontend Styles
   Dark theme · Gold accents · Slide-up drawer
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS Variables — scoped to plugin elements ────────────────── */

.cluck-overlay,
.cluck-cart-bar {
    --cluck-bg:          #151C2F;
    --cluck-bg-light:    #1C2438;
    --cluck-bg-card:     #162544;
    --cluck-border:      rgba(255,255,255,0.1);
    --cluck-gold:        #FFCB1A;
    --cluck-gold-hover:  #FFD84D;
    --cluck-gold-dim:    rgba(255,203,26,0.12);
    --cluck-text:        #EEF3FF;
    --cluck-text-dim:    rgba(255,255,255,0.45);
    --cluck-text-dark:   #111827;
    --cluck-success:     #4caf50;
    --cluck-danger:      #e74c3c;
    --cluck-radius:      12px;
    --cluck-radius-sm:   8px;
    --cluck-shadow:      0 -4px 30px rgba(0, 0, 0, 0.6);
    --cluck-transition:  0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Override Elementor button styles inside plugin ────────────── */
/* Using double-class selectors for higher specificity than Elementor */

/* ── Overlay ───────────────────────────────────────────────────── */

.cluck-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, 0);
    transition: background var(--cluck-transition);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.cluck-overlay.cluck-active {
    background: rgba(0, 0, 0, 0.65);
}

/* ── Modal ──────────────────────────────────────────────────────── */

.cluck-modal {
    width: 100%;
    max-width: 520px;
    /* vh fallback for older iOS; dvh accounts for the dynamic Safari
       address bar so the modal bottom doesn't slide under it. */
    max-height: 85vh;
    max-height: 85dvh;
    background: var(--cluck-bg);
    border-radius: var(--cluck-radius) var(--cluck-radius) 0 0;
    box-shadow: var(--cluck-shadow);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform var(--cluck-transition);
    overflow: hidden;
    color: var(--cluck-text) !important;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    /* Respect the iPhone home-bar inset so the Done link / Skip slot
       isn't sat under the indicator. Falls back to 0 on devices that
       don't ship safe-area-inset (most non-iOS browsers). */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.cluck-overlay.cluck-active .cluck-modal {
    transform: translateY(0);
}

/* ── Header ────────────────────────────────────────────────────── */

.cluck-modal-header {
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--cluck-border);
    position: relative;
    flex-shrink: 0;
    text-align: center;
}

.cluck-overlay .cluck-modal .cluck-modal-close {
    position: absolute;
    top: 14px;
    left: 16px;
    background: #162544 !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: #EEF3FF !important;
    font-size: 22px;
    width: 36px;
    height: 36px;
    border-radius: 50% !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    line-height: 1;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.cluck-overlay .cluck-modal .cluck-modal-close:hover {
    background: rgba(255,203,26,0.12) !important;
    border-color: #FFCB1A !important;
    color: #FFCB1A !important;
}

.cluck-modal-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0.04em;
    margin: 0;
    color: var(--cluck-text) !important;
    line-height: 1.3;
}

.cluck-modal-base-price {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    color: var(--cluck-gold) !important;
    font-weight: 600;
    margin-top: 2px;
}

/* ── Dietary badges (inside modal header) ──────────────────
 *
 * The badge styling itself lives with the site-wide
 * [cluck_diet_tags] shortcode CSS — we reuse the same
 * .cluck-diet-badges / .cluck-diet-badge class names so there's
 * one source of truth. All we add here is positioning: center the
 * badge row under the title and give it a bit of breathing room.
 *
 * The shortcode CSS uses --cb-primary and --cb-font-display as
 * its variables. Those are defined at the body/root scope on the
 * site, but we can't guarantee they cascade into an element like
 * this modal that might get re-parented or live in a shadow-ish
 * context. Fall them back to our own values so the badges always
 * look right here, even if the globals aren't reachable.
 */

.cluck-modal-header .cluck-diet-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    padding: 0 4px;

    /* Alias site-wide badge vars to modal-local values as a
       fallback. If the site has already defined them higher up
       the cascade, those win. */
    --cb-primary: var(--cluck-gold, #FFCB1A);
    --cb-font-display: 'Bebas Neue', sans-serif;
}

.cluck-modal-header .cluck-diet-badges:empty {
    display: none;
}

/* ── Shake animation for required-but-empty groups ─────────── */

@keyframes cluck-shake {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-4px); }
    40%  { transform: translateX(4px); }
    60%  { transform: translateX(-3px); }
    80%  { transform: translateX(2px); }
    100% { transform: translateX(0); }
}

.cluck-modal-group.cluck-shake {
    animation: cluck-shake 0.42s ease-in-out;
}

/* ── Paid extras: separator between products and ad-hoc ──── */

.cluck-extra-separator {
    height: 1px;
    background: var(--cluck-border);
    margin: 10px 16px;
    opacity: 0.5;
}

/* ── Submit button: briefly paled-out when validation blocks ── */

.cluck-modal-submit.cluck-blocked {
    opacity: 0.55;
    transition: opacity 0.2s ease-in-out;
}

/* ── Body / Scroll Area ────────────────────────────────────────── */

.cluck-modal-body {
    flex: 1;
    /* min-height: 0 is the fix for a famous flex+overflow bug:
       a flex child with `flex: 1` defaults to `min-height: auto`,
       which means it refuses to shrink below its content size.
       That makes overflow-y: auto silently inert when the body is
       tall enough to push past the modal's 85vh. With min-height: 0
       the body actually constrains to the available flex space and
       its overflow-y kicks in.
       Without this, post-success the taller footer caused the body
       to grow past the modal bounds and the user could no longer
       scroll back up to the title. */
    min-height: 0;
    overflow-y: auto;
    /* Prevent rubber-band scroll from chaining to the page (iOS).
       Combined with the html.cluck-modal-open lock below this keeps
       the modal feeling self-contained on touch. */
    overscroll-behavior: contain;
    padding: 8px 0;
    -webkit-overflow-scrolling: touch;
}

.cluck-modal-body::-webkit-scrollbar {
    width: 5px;
}
.cluck-modal-body::-webkit-scrollbar-track {
    background: transparent;
}
.cluck-modal-body::-webkit-scrollbar-thumb {
    background: var(--cluck-border);
    border-radius: 3px;
}

/* ── Loading ───────────────────────────────────────────────────── */

.cluck-modal-loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--cluck-text-dim);
    font-size: 14px;
}

.cluck-modal-loading::before {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    border: 3px solid var(--cluck-border);
    border-top-color: var(--cluck-gold);
    border-radius: 50%;
    animation: cluck-spin 0.8s linear infinite;
    margin: 0 auto 12px;
}

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

/* ── Group ─────────────────────────────────────────────────────── */

.cluck-modal-group {
    padding: 14px 20px;
}

.cluck-modal-group + .cluck-modal-group {
    border-top: 1px solid var(--cluck-border);
}

.cluck-group-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cluck-gold) !important;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cluck-group-label .cluck-required-badge {
    font-size: 9px;
    background: var(--cluck-gold-dim);
    color: var(--cluck-gold);
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* ── Visible Single-Choice List (replaces old dropdown UI) ──────
 *
 * Renders select / product_select groups as a flat vertical stack
 * of clickable rows — same fast "tap, tap, tap" affordance as the
 * paid-extras tick-box list, just single-choice (radio) semantics.
 * The currently-selected option carries .cluck-selected; all read
 * paths (updateTotal, validate, gatherSelections) target that.
 */

.cluck-visible-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.cluck-visible-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--cluck-bg-card);
    border: 1px solid var(--cluck-border);
    border-radius: var(--cluck-radius-sm);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
    color: var(--cluck-text);
    font-size: 14px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.cluck-visible-option:hover {
    border-color: rgba(255,203,26,0.5);
    background: var(--cluck-bg-light);
}

.cluck-visible-option:active {
    transform: scale(0.99);
}

.cluck-visible-option.cluck-selected {
    border-color: var(--cluck-gold);
    background: rgba(255,203,26,0.10);
    color: var(--cluck-gold);
    font-weight: 600;
}

/* Radio indicator on the left — circle that fills with gold when
   the option is selected. Uses a pseudo-element for the inner dot
   so we don't ship an SVG. */
.cluck-visible-option .cluck-opt-radio {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.25);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.15s, background 0.15s;
}

.cluck-visible-option.cluck-selected .cluck-opt-radio {
    border-color: var(--cluck-gold);
}

.cluck-visible-option.cluck-selected .cluck-opt-radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: var(--cluck-gold);
    border-radius: 50%;
}

/* Product thumbnails (only present in product_select groups). */
.cluck-visible-option .cluck-opt-thumb {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--cluck-bg);
}

.cluck-visible-option .cluck-opt-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cluck-visible-option .cluck-opt-supplement {
    color: var(--cluck-gold);
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

/* "Included" badge — used on product_select rows that don't have a
   supplement. Kept subtle so the upsell rows draw the eye instead. */
.cluck-visible-option .cluck-opt-supplement.cluck-opt-included {
    color: var(--cluck-success);
    font-size: 12px;
    font-weight: 500;
}

/* ── Single-Choice Group: Dropdown variant (required groups) ────
 *
 * Compact, original UI used when a group is REQUIRED — keeps long
 * forced lists (e.g. 8 sauces) collapsed so the dietary toggles and
 * paid upsells around them stay visible. Optional groups render as
 * the .cluck-visible-options list above. The two share the same
 * read path through getSingleChoiceSelection().
 */

.cluck-custom-select {
    position: relative;
    width: 100%;
}

.cluck-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--cluck-bg-card);
    border: 1px solid var(--cluck-border);
    border-radius: var(--cluck-radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    color: var(--cluck-text);
    user-select: none;
}

.cluck-select-trigger:hover,
.cluck-select-trigger.cluck-open {
    border-color: var(--cluck-gold);
    background: var(--cluck-bg-light);
}

.cluck-select-trigger .cluck-select-arrow {
    font-size: 10px;
    color: var(--cluck-text-dim);
    transition: transform 0.2s;
}

.cluck-select-trigger.cluck-open .cluck-select-arrow {
    transform: rotate(180deg);
}

.cluck-select-trigger .cluck-select-supplement {
    color: var(--cluck-gold);
    font-size: 13px;
    margin-left: auto;
    margin-right: 8px;
    font-weight: 600;
}

.cluck-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    background: var(--cluck-bg-card);
    border: 1px solid var(--cluck-gold);
    border-top: none;
    border-radius: 0 0 var(--cluck-radius-sm) var(--cluck-radius-sm);
    max-height: 240px;
    overflow-y: auto;
    display: none;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

.cluck-select-dropdown.cluck-open {
    display: block;
}

.cluck-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.15s;
    color: var(--cluck-text);
    border-bottom: 1px solid var(--cluck-border);
}

.cluck-select-option:last-child {
    border-bottom: none;
}

.cluck-select-option:hover,
.cluck-select-option.cluck-selected {
    background: var(--cluck-gold-dim);
}

.cluck-select-option.cluck-selected {
    color: var(--cluck-gold);
    font-weight: 600;
}

.cluck-select-option .cluck-opt-supplement {
    color: var(--cluck-gold);
    font-size: 13px;
    font-weight: 600;
}

/* ── Paid Extras ───────────────────────────────────────────────── */

.cluck-extra-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

.cluck-extra-item + .cluck-extra-item {
    border-top: 1px solid var(--cluck-border);
}

.cluck-extra-thumb {
    width: 50px;
    height: 50px;
    border-radius: var(--cluck-radius-sm);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--cluck-bg-card);
}

.cluck-extra-info {
    flex: 1;
    min-width: 0;
}

.cluck-extra-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--cluck-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cluck-extra-price {
    font-size: 13px;
    color: var(--cluck-gold);
    font-weight: 600;
    margin-top: 1px;
}

.cluck-extra-out-of-stock {
    font-size: 12px;
    color: var(--cluck-danger);
    font-style: italic;
}

/* ── Paid Extras: tick-box variant ─────────────────────────────
   Used when a paid_extras group has max_per_item = 1 (the default
   for new groups). Each row gets a checkbox; tap-to-add, tap-to-remove,
   no stepper. Whole row is clickable for fat-finger friendliness. */

.cluck-extra-tick {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 4px;
    margin: 0;
}

/* Hide the native checkbox but keep it accessible (focusable / keyboard
   togglable). The visible "box" is the styled span next to it. */
.cluck-extra-tick-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.cluck-extra-tick-box {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: var(--cluck-bg-card);
    border: 1.5px solid rgba(255,255,255,0.25);
    border-radius: 6px;
    transition: background 0.15s, border-color 0.15s, transform 0.12s;
    position: relative;
    box-sizing: border-box;
}

.cluck-extra-tick-input:focus-visible + .cluck-extra-tick-box {
    outline: 2px solid var(--cluck-gold);
    outline-offset: 2px;
}

/* Checked state — gold fill with a tick mark. Drawn with two pseudo
   strokes so we don't have to ship an SVG. */
.cluck-extra-tick-input:checked + .cluck-extra-tick-box {
    background: var(--cluck-gold) !important;
    border-color: var(--cluck-gold) !important;
}

.cluck-extra-tick-input:checked + .cluck-extra-tick-box::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 11px;
    border: solid #111827;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

/* Subtle row-level highlight when an extra is selected so the customer
   gets a clear "yep, that one's in" cue without having to look at the
   tick. */
.cluck-extra-item--checked {
    background: rgba(255,203,26,0.06);
    border-radius: var(--cluck-radius-sm);
}

.cluck-extra-item {
    /* ensure padding so the checked highlight has room to breathe */
    padding-left: 4px;
    padding-right: 4px;
    transition: background 0.15s;
}

/* ── Quantity Stepper ──────────────────────────────────────────── */

.cluck-qty-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    background: #162544;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    overflow: hidden;
}

.cluck-overlay .cluck-modal .cluck-qty-btn {
    width: 36px !important;
    height: 36px !important;
    background: transparent !important;
    border: none !important;
    color: #FFCB1A !important;
    font-size: 18px !important;
    font-weight: 700;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.cluck-overlay .cluck-modal .cluck-qty-btn:hover:not(:disabled) {
    background: rgba(255,203,26,0.12) !important;
    color: #FFCB1A !important;
}

.cluck-qty-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.cluck-qty-value {
    width: 32px;
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #EEF3FF !important;
    border-left: 1px solid rgba(255,255,255,0.1);
    border-right: 1px solid rgba(255,255,255,0.1);
    line-height: 36px;
}

.cluck-qty-value.cluck-has-qty {
    color: #FFCB1A !important;
}

/* ── Toggle ────────────────────────────────────────────────────── */

.cluck-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
}

.cluck-toggle-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--cluck-text);
}

.cluck-toggle-desc {
    font-size: 12px;
    color: var(--cluck-text-dim);
    margin-top: 2px;
}

/* Toggle Switch */
.cluck-switch {
    position: relative;
    width: 48px;
    height: 28px;
    flex-shrink: 0;
}

.cluck-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.cluck-switch-track {
    position: absolute;
    inset: 0;
    background: #162544;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.25s;
}

.cluck-switch-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: rgba(255,255,255,0.45);
    border-radius: 50%;
    transition: all 0.25s;
}

.cluck-switch input:checked + .cluck-switch-track {
    background: #FFCB1A !important;
    border-color: #FFCB1A !important;
}

.cluck-switch input:checked + .cluck-switch-track::after {
    transform: translateX(20px);
    background: #111827;
}

/* ── Footer / Total Bar ────────────────────────────────────────── */

.cluck-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    background: #1C2438;
    flex-shrink: 0;
}

.cluck-modal-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.cluck-total-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: #EEF3FF !important;
}

.cluck-total-amount {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: #FFCB1A !important;
}

.cluck-overlay .cluck-modal .cluck-modal-submit {
    width: 100% !important;
    padding: 14px 20px !important;
    background: #FFCB1A !important;
    color: #111827 !important;
    border: none !important;
    border-radius: 8px !important;
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    margin: 0 !important;
    box-shadow: none !important;
}

.cluck-overlay .cluck-modal .cluck-modal-submit:hover {
    background: #FFD84D !important;
    color: #111827 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 203, 26, 0.3) !important;
}

.cluck-modal-submit:active {
    transform: translateY(0);
}

.cluck-modal-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none !important;
}

.cluck-modal-submit.cluck-adding {
    pointer-events: none;
    opacity: 0.7;
}

.cluck-overlay .cluck-modal .cluck-modal-skip {
    display: block;
    width: 100% !important;
    background: none !important;
    border: none !important;
    color: rgba(255,255,255,0.45) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px;
    text-align: center;
    padding: 10px !important;
    cursor: pointer;
    transition: color 0.2s;
    text-decoration: underline;
    text-underline-offset: 2px;
    margin: 0 !important;
    box-shadow: none !important;
}

.cluck-overlay .cluck-modal .cluck-modal-skip:hover {
    color: #EEF3FF !important;
}

/* ── Validation Error ──────────────────────────────────────────── */

/* When a required single-choice group hasn't been answered, ring
   the trigger / each visible option / the toggle track in red so
   the customer's eye lands on what they need to fix. The error
   message line below the group is also revealed. */
.cluck-modal-group.cluck-error .cluck-select-trigger,
.cluck-modal-group.cluck-error .cluck-visible-option,
.cluck-modal-group.cluck-error .cluck-switch-track {
    border-color: var(--cluck-danger) !important;
    box-shadow: 0 0 0 1px var(--cluck-danger);
}

.cluck-group-error-msg {
    font-size: 12px;
    color: var(--cluck-danger);
    margin-top: 6px;
    display: none;
}

.cluck-modal-group.cluck-error .cluck-group-error-msg {
    display: block;
}

/* ── Success Flash ─────────────────────────────────────────────── */

.cluck-modal-submit.cluck-success {
    background: var(--cluck-success);
    color: #fff;
}

/* Post-success "+ Add another like this" repurposing of the submit
   button. Keeps the gold accent (so it still reads as the primary
   call-to-action) but adds a tick mark and a subtle ring to signal
   "this is a follow-up, not a fresh add". The .cluck-success
   background above is cleared by the more-specific selector below. */
.cluck-overlay .cluck-modal .cluck-modal-submit.cluck-add-another {
    background: var(--cluck-gold) !important;
    color: #111827 !important;
    box-shadow: 0 0 0 2px rgba(255,203,26,0.25), 0 4px 12px rgba(255,203,26,0.18) !important;
    font-size: 16px !important; /* slightly smaller — longer label */
}

.cluck-overlay .cluck-modal .cluck-modal-submit.cluck-add-another:hover {
    background: var(--cluck-gold-hover) !important;
    box-shadow: 0 0 0 2px rgba(255,203,26,0.4), 0 6px 16px rgba(255,203,26,0.3) !important;
}

/* ── Post-Success Footer Layout ─────────────────────────────────
 *
 * Default footer: TOTAL line, gold "Add to Basket" submit, small
 * underlined "Skip extras" link. Done button hidden.
 *
 * After a successful add the JS adds .cluck-state-success to the
 * footer. That switch:
 *
 *   • Reveals an "or" divider between the gold submit (now
 *     "Add another like this") and the skip slot (now "Add another
 *     with different options").
 *   • Promotes the skip slot from a tiny underlined link into a
 *     prominent ghost-button so the two add-another paths read
 *     as comparable options, not primary + afterthought.
 *   • Reveals the "Done — back to menu" button as a tertiary
 *     escape hatch — small, low-emphasis, but always visible so
 *     the customer never feels trapped in the success loop.
 */

/* The "or" divider — hidden by default, only renders inside the
   success-state footer. Two thin lines flanking a centred "or"
   label, all in modal-dim grey so it doesn't compete with the
   gold buttons. */
.cluck-modal-or-divider {
    display: none;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    color: rgba(255,255,255,0.4);
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    user-select: none;
}
.cluck-modal-or-divider::before,
.cluck-modal-or-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.15);
}

.cluck-modal-footer.cluck-state-success .cluck-modal-or-divider {
    display: flex;
}

/* The "Done — back to menu" tertiary button. Hidden by default,
   shown only in the success state. Looks like a small grey link
   so it doesn't compete with the two add-another options above. */
.cluck-overlay .cluck-modal .cluck-modal-done {
    display: none;
    width: 100% !important;
    background: none !important;
    border: none !important;
    color: rgba(255,255,255,0.55) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    text-align: center !important;
    padding: 10px !important;
    margin-top: 6px !important;
    cursor: pointer;
    transition: color 0.2s;
    box-shadow: none !important;
}
.cluck-overlay .cluck-modal .cluck-modal-done:hover {
    color: #EEF3FF !important;
}
.cluck-modal-footer.cluck-state-success .cluck-modal-done {
    display: block !important;
}

/* In the success state, promote the skip slot from the tiny
   underlined link to a full ghost-button. Border + padding + bigger
   text + no underline. The text content itself is set by JS
   (setSkipMode('add_another') → "+ Add another with different options"). */
.cluck-modal-footer.cluck-state-success .cluck-modal-skip {
    display: block !important;
    width: 100% !important;
    background: rgba(255,203,26,0.06) !important;
    border: 1.5px solid rgba(255,203,26,0.55) !important;
    color: var(--cluck-gold) !important;
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 16px !important;
    letter-spacing: 0.04em !important;
    text-decoration: none !important;
    text-align: center !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.cluck-modal-footer.cluck-state-success .cluck-modal-skip:hover {
    background: rgba(255,203,26,0.12) !important;
    border-color: var(--cluck-gold) !important;
    color: var(--cluck-gold) !important;
}
.cluck-modal-footer.cluck-state-success .cluck-modal-skip:active {
    transform: scale(0.99);
}

/* ── Desktop ───────────────────────────────────────────────────── */

@media (min-width: 768px) {
    .cluck-overlay {
        align-items: center;
    }

    .cluck-modal {
        max-height: 80vh;
        max-height: 80dvh;
        border-radius: var(--cluck-radius);
        margin: 20px;
        /* No safe-area inset on desktop — modal is centred, not pinned */
        padding-bottom: 0;
    }
}

/* ── Mobile (most modern phones — 360–480 wide) ────────────────
 *
 * Bumped from the previous 400px ceiling because most current phones
 * (iPhone 13/14 = 390, Pixel 7 = 412, Galaxy S22 = 360, iPhone Pro Max
 * = 430) sit in the 360–430 band. At those widths the desktop footer
 * spacing was eating too much vertical room, especially in the
 * post-success state which adds ~230px of footer.
 */
@media (max-width: 480px) {
    .cluck-modal-header { padding: 14px 16px 10px; }
    .cluck-modal-group  { padding: 12px 16px; }
    .cluck-modal-footer { padding: 12px 16px; }
    .cluck-modal-title  { font-size: 16px; }

    /* Tighten the success-state footer specifically. Each compressed
       a couple of pixels — together they pull ~30px out of the
       footer total, which the body recovers. */
    .cluck-modal-or-divider {
        margin: 6px 0;
        font-size: 11px;
    }
    .cluck-modal-footer.cluck-state-success .cluck-modal-skip {
        padding: 10px 14px !important;
        font-size: 15px !important;
    }
    .cluck-overlay .cluck-modal .cluck-modal-done {
        padding: 8px !important;
        margin-top: 2px !important;
        font-size: 12px !important;
    }
}

/* ── Short viewports (landscape phones, low-height devices) ────
 *
 * When the modal has < 600px of vertical room, the post-success
 * footer's "or" divider becomes a luxury we can't afford. Hiding
 * it lets the two add-another buttons stack adjacent — still
 * clearly two options, just without the breathing room. */
@media (max-height: 600px) {
    .cluck-modal {
        max-height: 92dvh;
    }
    .cluck-modal-footer.cluck-state-success .cluck-modal-or-divider {
        display: none;
    }
    .cluck-modal-footer.cluck-state-success .cluck-modal-skip {
        margin-top: 8px !important;
    }
}

/* ── Body scroll lock when modal open ──────────────────────────── */

html.cluck-modal-open,
body.cluck-modal-open {
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   Bottom Cart Bar
   ═══════════════════════════════════════════════════════════════ */

.cluck-cart-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999998;
    background: var(--cluck-gold);
    color: var(--cluck-text-dark);
    font-family: 'Bebas Neue', -apple-system, BlinkMacSystemFont, sans-serif;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 64px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.cluck-cart-bar.cluck-cart-bar--visible {
    transform: translateY(0);
}

.cluck-cart-bar__info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cluck-cart-bar .cluck-cart-bar__count {
    background: #111827 !important;
    color: #FFCB1A !important;
    font-size: 15px;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: 4px;
    line-height: 1;
}

.cluck-cart-bar .cluck-cart-bar__total {
    font-size: 22px;
    letter-spacing: 0.04em;
    color: #111827 !important;
}

.cluck-cart-bar .cluck-cart-bar__btn {
    background: #111827 !important;
    color: #FFCB1A !important;
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 17px !important;
    letter-spacing: 0.08em;
    border: none !important;
    padding: 10px 24px !important;
    border-radius: 6px !important;
    cursor: pointer;
    transition: opacity 0.2s;
    -webkit-tap-highlight-color: transparent;
    margin: 0 !important;
    box-shadow: none !important;
}

.cluck-cart-bar .cluck-cart-bar__btn:hover {
    opacity: 0.85;
}

body.cluck-cart-bar-active .elementor-location-footer,
body.cluck-cart-bar-active footer,
body.cluck-cart-bar-active div[data-elementor-type="wp-page"] > .e-con.e-parent:last-child {
    padding-bottom: 72px !important;
}