/* Customer picker, checkout block and outlet list. Classes start with
   fct-fr-. Colors come from custom properties a theme can set on :root or
   any ancestor: --fct-fr-accent, --fct-fr-accent-text, --fct-fr-muted,
   --fct-fr-border, --fct-fr-surface and --fct-fr-success. Filled buttons
   and selected states read --fct-fr-button-bg and --fct-fr-button-text,
   which fall back to the accent pair. The plugin sets none of them, so
   each var() uses its fallback until a theme sets one. Sizes are px,
   because a theme can set the root font size to 62.5%.

   A theme rule on a plugin class wins. The plugin prints its stylesheets
   before the theme's, and each base rule has the weight of one class.
   A parent class that only gives context sits in :where(). A state rule
   has the weight of two classes, the element class plus one state class
   or pseudo-class, so it beats a theme's button:hover or button:disabled
   and a theme rule on the base class. A theme rule with the same selector
   ties and wins by source order. More weight stays on the [hidden] and
   :empty rules, the rules on core FluentCart markup, and the checkout
   buttons, which must beat core's .fct_checkout button rules. */
.fct-fr-method-hidden { display: none !important; }

.fct-fr-picker__button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.9em;
    cursor: pointer;
}
.fct-fr-picker__icon { flex: none; }

/* Outlet picker panel. core.js appends it to body and sets its position,
   top, left, width and max-height from the element it hangs under. Under a
   header it spans the header. Under any other trigger it is a box. With
   no visible trigger it sits fixed at the top of the viewport. Below
   768px it is a full-width sheet with stacked cards. */
.fct-fr-panel {
    position: absolute;
    z-index: 100000;
    box-sizing: border-box;
    overflow-y: auto;
    padding: 20px 24px 24px;
    border-top: 1px solid var(--fct-fr-border, #e2e8f0);
    border-bottom: 1px solid var(--fct-fr-border, #e2e8f0);
    background: var(--fct-fr-surface, #fff);
    color: var(--fct-fr-accent, #1e293b);
    font-size: 16px;
    line-height: 1.4;
    text-align: left;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18);
}
.fct-fr-panel[hidden] { display: none; }
.fct-fr-panel:focus { outline: none; }
.fct-fr-panel.is-boxed { border: 1px solid var(--fct-fr-border, #e2e8f0); border-radius: 12px; }
.fct-fr-panel.is-sheet { padding: 16px; }
/* No visible trigger on the page: fixed to the top of the viewport. */
.fct-fr-panel.is-top { border-top: 0; }
.fct-fr-panel__inner { max-width: 1200px; margin: 0 auto; }
.fct-fr-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.fct-fr-panel__title { margin: 0; color: inherit; font-size: 20px; line-height: 1.3; }
.fct-fr-panel__close { flex: none; padding: 0 4px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 26px; line-height: 1; cursor: pointer; }
.fct-fr-panel__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
:where(.fct-fr-panel).is-sheet .fct-fr-panel__body { grid-template-columns: 1fr; gap: 12px; }
:where(.fct-fr-panel__body) > .fct-fr-empty { grid-column: 1 / -1; margin: 0; }

.fct-fr-card { padding: 14px; margin-bottom: 10px; border: 1px solid var(--fct-fr-border, #e2e8f0); border-radius: 10px; }
.fct-fr-card__name { margin: 0 0 4px; font-size: 16px; }
.fct-fr-card__line { margin: 0 0 4px; color: var(--fct-fr-muted, #475569); font-size: 14px; }
.fct-fr-card__types { margin: 0 0 10px; color: var(--fct-fr-success, #047857); font-size: 13px; font-weight: 600; }
.fct-fr-choice {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--fct-fr-accent, #1e293b);
    border-radius: 8px;
    background: var(--fct-fr-surface, #fff);
    color: var(--fct-fr-accent, #1e293b);
    font: inherit;
    text-align: center;
    cursor: pointer;
}
.fct-fr-choice:hover:where(:not(:disabled)) { background: #f1f5f9; }
.fct-fr-choice.is-current { border-color: var(--fct-fr-button-bg, var(--fct-fr-accent, #1e293b)); background: var(--fct-fr-button-bg, var(--fct-fr-accent, #1e293b)); color: var(--fct-fr-button-text, var(--fct-fr-accent-text, #fff)); }
/* Cards in the panel. These come after the .fct-fr-card rules, which
   have the same weight. */
:where(.fct-fr-panel) .fct-fr-card { display: flex; flex-direction: column; margin: 0; }
:where(.fct-fr-panel) .fct-fr-choice { margin-top: auto; }
.fct-fr-empty { color: var(--fct-fr-muted, #64748b); }
.fct-fr-message { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: #fef2f2; color: #b91c1c; }
.fct-fr-message[hidden] { display: none; }

/* Outlet change confirm. core.js puts it in place of the outlet cards,
   in the panel or in an inline list, while the cart has items. Both
   buttons read the button properties: "Change to" is filled, and Keep
   is outlined. */
.fct-fr-panel__confirm { padding: 4px 0; }
.fct-fr-panel__confirm:focus { outline: none; }
.fct-fr-panel__confirm-text { margin: 0 0 14px; color: inherit; font-size: 16px; line-height: 1.5; }
.fct-fr-panel__confirm-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.fct-fr-panel__confirm-change,
.fct-fr-panel__confirm-keep { padding: 10px 16px; border: 1px solid var(--fct-fr-button-bg, var(--fct-fr-accent, #1e293b)); border-radius: 8px; font: inherit; font-size: 15px; line-height: 1.3; text-align: center; cursor: pointer; }
.fct-fr-panel__confirm-change { background: var(--fct-fr-button-bg, var(--fct-fr-accent, #1e293b)); color: var(--fct-fr-button-text, var(--fct-fr-accent-text, #fff)); }
.fct-fr-panel__confirm-keep { background: var(--fct-fr-surface, #fff); color: var(--fct-fr-button-bg, var(--fct-fr-accent, #1e293b)); }
.fct-fr-panel__confirm-change:disabled,
.fct-fr-panel__confirm-keep:disabled { opacity: 0.6; cursor: default; }
:where(.fct-fr-panel.is-sheet) .fct-fr-panel__confirm-actions { flex-direction: column; }

/* The checkout data holder stays hidden. The visible part is one line in
   the order summary. */
.fct-fr-checkout-data[hidden] { display: none !important; }
.fct-fr-summary-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--fct-fr-border, #e2e8f0); border-radius: 10px; background: var(--fct-fr-surface, #fff); color: var(--fct-fr-accent, #1e293b); font-size: 14px; font-weight: 600; line-height: 1.4; }
/* Shown only when the page has no visible picker trigger. Core styles
   every button inside .fct_checkout, so the selectors carry two classes,
   plus :hover to beat .fct_checkout button:hover. The :focus rule sets
   only the background, which .fct_checkout button:focus changes. A theme
   rule needs the same selector. */
.fct-fr-summary-line .fct-fr-summary-line__change,
.fct-fr-summary-line .fct-fr-summary-line__change:hover { flex: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: inherit; font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.fct-fr-summary-line .fct-fr-summary-line__change:focus { background: transparent; }
.fct-fr-delivery-note { margin: 10px 0 0; padding: 10px 12px; border: 1px solid #fcd34d; border-radius: 8px; background-color: #fffbeb; color: #92400e; font-size: 14px; line-height: 1.4; }
.fct-fr-card__hours { margin: 0 0 4px; color: var(--fct-fr-muted, #475569); font-size: 13px; }

/* Compact time picker after the shipping list. Core styles every button inside
   .fct_checkout, so the chip selectors carry two classes, plus :hover.
   The :focus rule sets only the background, which .fct_checkout
   button:focus changes, and comes before .is-selected so a focused
   selected chip stays filled. A theme rule needs the same selector. */
.fct-fr-slots { box-sizing: border-box; min-width: 0; max-width: 100%; margin: 16px 0 0; padding: 16px 16px 10px; border: 1px solid var(--fct-checkout-border-color, #d6d9df); border-radius: var(--fct-container-radius, 8px); background: var(--fct-checkout-shipping-methods-bg, #fff); }
.fct-fr-slots__title { margin: 0 0 12px; color: var(--fct-fr-accent, #1e293b); font-size: 14px; font-weight: 600; line-height: 1.4; }
.fct-fr-slots__row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.fct-fr-slots .fct-fr-chip,
.fct-fr-slots .fct-fr-chip:hover { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; min-width: 64px; min-height: 44px; margin: 0; padding: 8px 12px; border: 1px solid var(--fct-fr-border, #cbd5e1); border-radius: 8px; background: var(--fct-fr-surface, #fff); color: var(--fct-fr-accent, #1e293b); font: inherit; font-size: 14px; line-height: 1.3; box-shadow: none; cursor: pointer; }
.fct-fr-slots .fct-fr-chip:focus { background: var(--fct-fr-surface, #fff); }
.fct-fr-slots .fct-fr-chip.is-selected { border-color: var(--fct-fr-button-bg, var(--fct-fr-accent, #1e293b)); background: var(--fct-fr-button-bg, var(--fct-fr-accent, #1e293b)); color: var(--fct-fr-button-text, var(--fct-fr-accent-text, #fff)); }
.fct-fr-slots .fct-fr-chip:disabled { opacity: 0.45; cursor: not-allowed; }
.fct-fr-chip__note { font-size: 11px; }
.fct-fr-slots__fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 12px; }
.fct-fr-slots__field { min-width: 0; margin: 0; }
.fct-fr-slots .fct-fr-slots__label { display: block; margin: 0 0 6px; color: var(--fct-fr-muted, #475569); font-size: 13px; font-weight: 500; line-height: 1.4; }
.fct-fr-slots .fct-fr-slots__select { display: block; box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; height: 46px; min-height: 46px; margin: 0; padding: 10px 36px 10px 12px; border: 1px solid var(--fct-checkout-input-border-color, var(--fct-fr-border, #cbd5e1)); border-radius: 7px; background-color: var(--fct-select-input-bg, var(--fct-fr-surface, #fff)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position: right 12px center; background-repeat: no-repeat; background-size: 16px; color: var(--fct-select-input-text-color, var(--fct-fr-accent, #1e293b)); font: inherit; font-size: 16px; line-height: 1.4; box-shadow: none; -webkit-appearance: none; appearance: none; }
.fct-fr-slots .fct-fr-slots__select:focus { border-color: var(--fct-select-input-text-color, var(--fct-fr-accent, #1e293b)); box-shadow: none; }
/* Keep labels on one baseline while availability is checked. Core applies
   transition-all to checkout buttons; these fields must not animate size. */
.fct-fr-slots .fct-fr-slots__select { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: none; }
.fct-fr-slots__time-control { position: relative; min-width: 0; }
.fct-fr-slots .fct-fr-slots__time-trigger,
.fct-fr-slots .fct-fr-slots__time-trigger:hover,
.fct-fr-slots .fct-fr-slots__time-trigger:focus { text-align: start; text-transform: none; letter-spacing: normal; font-weight: 400; background-color: var(--fct-select-input-bg, var(--fct-fr-surface, #fff)); color: var(--fct-select-input-text-color, var(--fct-fr-accent, #1e293b)); box-shadow: none; cursor: pointer; }
.fct-fr-slots .fct-fr-slots__time-trigger:disabled { cursor: not-allowed; }
.fct-fr-slots__time-list { position: absolute; z-index: 30; top: calc(100% + 6px); inset-inline: 0; box-sizing: border-box; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 4px; list-style: none; border: 1px solid var(--fct-checkout-input-border-color, var(--fct-fr-border, #cbd5e1)); border-radius: var(--fct-popup-radius, 9px); background: var(--fct-select-input-bg, var(--fct-fr-surface, #fff)); color: var(--fct-select-input-text-color, var(--fct-fr-accent, #1e293b)); box-shadow: 0 8px 24px rgb(15 23 42 / 14%); }
.fct-fr-slots__time-list[hidden] { display: none !important; }
.fct-fr-slots__time-list.is-above { top: auto; bottom: calc(100% + 6px); }
.fct-fr-slots__time-option { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 10px; box-sizing: border-box; min-height: 44px; margin: 0; padding: 10px 30px 10px 10px; border-radius: 5px; font-size: 14px; line-height: 1.4; cursor: pointer; }
.fct-fr-slots__time-option.is-active,
.fct-fr-slots__time-option:not([aria-disabled="true"]):hover { background: #f1f5f9; color: var(--fct-select-input-text-color, var(--fct-fr-accent, #1e293b)); }
.fct-fr-slots__time-option.is-selected { font-weight: 600; }
.fct-fr-slots__time-option.is-selected::after { position: absolute; inset-inline-end: 12px; width: 6px; height: 10px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); content: ''; }
.fct-fr-slots__time-option[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.fct-fr-slots__time-option-note { color: var(--fct-fr-muted, #475569); font-size: 12px; font-weight: 400; }
@media (max-width: 480px) { .fct-fr-slots__fields { grid-template-columns: minmax(0, 1fr); } }

.fct-fr-slots .fct-fr-slots__select:disabled { opacity: 0.6; cursor: not-allowed; }
.fct-fr-slots .fct-fr-slots__select[aria-invalid="true"] { border-color: #b91c1c; }
.fct-fr-slots .fct-fr-slots__retry,
.fct-fr-slots .fct-fr-slots__retry:hover { min-height: 44px; margin: 4px 0 0; padding: 8px 12px; border: 1px solid var(--fct-fr-border, #cbd5e1); border-radius: 8px; background: var(--fct-fr-surface, #fff); color: var(--fct-fr-accent, #1e293b); font: inherit; font-size: 14px; box-shadow: none; cursor: pointer; }
.fct-fr-slots .fct-fr-chip:focus-visible,
.fct-fr-slots .fct-fr-slots__select:focus-visible,
.fct-fr-slots .fct-fr-slots__retry:focus-visible { outline: 2px solid var(--fct-fr-accent, #1e293b); outline-offset: 2px; }
.fct-fr-slots .fct-fr-slots__msg { min-height: 20px; margin: 6px 0 0; color: var(--fct-fr-muted, #475569); font-size: 13px; line-height: 20px; }
.fct-fr-slots .fct-fr-slots__msg.is-error { color: #b91c1c; }

/* Stock note in place of the buy buttons on core shop and product pages,
   and the low stock hint under them. Core lays the buttons out in a grid,
   so the note spans every column. */
.fct-fr-stock-note {
    grid-column: 1 / -1;
    margin: 8px 0 0;
    font-size: 14px;
    font-weight: 500;
    color: #b45309;
}
.fct-product-card.fct-fr-out-of-stock .fct-product-card-image img { opacity: .55; }

/* [fct_franchise_outlets] list. */
.fct-fr-outlets { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; font-size: 16px; }
.fct-fr-outlets__item { display: flex; flex-direction: column; padding: 16px; border: 1px solid var(--fct-fr-border, #e2e8f0); border-radius: 10px; background: var(--fct-fr-surface, #fff); color: var(--fct-fr-accent, #1e293b); }
.fct-fr-outlets__name { margin: 0 0 6px; font-size: 18px; }
.fct-fr-outlets__line { margin: 0 0 4px; color: var(--fct-fr-muted, #475569); font-size: 14px; }
.fct-fr-outlets__line a { color: inherit; }
.fct-fr-outlets__hours { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 10px 0 0; font-size: 14px; }
.fct-fr-outlets__hours dt { font-weight: 600; }
.fct-fr-outlets__hours dd { margin: 0; color: var(--fct-fr-muted, #475569); }
/* The order button sits at the foot of each card, so buttons line up across a row. */
.fct-fr-outlets__actions { margin-top: auto; padding-top: 14px; }
.fct-fr-card__phone { color: inherit; }
.fct-fr-card__hours.is-open { color: var(--fct-fr-success, #047857); }

/* The line under the Delivery row: the address prompt, then the minimum
   order note. */
.fct-fr-delivery-line { margin: 4px 0 8px; padding: 8px 12px; border-radius: 8px; background-color: #fffbeb; color: #92400e; font-size: 14px; line-height: 1.4; }

/* The cart change notice after an outlet switch. */
.fct-fr-changes { position: fixed; right: 16px; bottom: 16px; z-index: 100001; max-width: min(420px, calc(100vw - 32px)); box-sizing: border-box; padding: 14px 44px 14px 16px; border: 1px solid #fcd34d; border-radius: 10px; background: #fffbeb; color: #92400e; font-size: 15px; line-height: 1.4; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.2); }
.fct-fr-changes__line { margin: 0 0 4px; }
.fct-fr-changes__line:last-of-type { margin-bottom: 0; }
.fct-fr-changes__close { position: absolute; top: 8px; right: 8px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 22px; line-height: 1; cursor: pointer; }