/* ── Foodi360 Connector — Checkout, orders, tracking ──────
 *  Woodmart styles the WooCommerce markup used here (woocommerce-checkout,
 *  checkout-order-review, shop_table, payment_methods, #place_order,
 *  woocommerce-orders-table, order_details). This file adds the parts it has
 *  no equivalent for: delivery/pickup switch, address cards and form, status
 *  badges and timeline, driver tracking, confirmation check mark.
 *  Tokens: foodi360-public.css. Logical properties keep RTL correct.
 * ───────────────────────────────────────────────────────── */

.foodi360-order-notice { margin-block: 30px; text-align: center; }
.foodi360-order-notice .button { margin-inline-start: 10px; }

/* ── Status badges ───────────────────────────────────────── */
.foodi360-badge[class*="foodi360-badge--"] { --foodi360-badge: var(--foodi360-muted); }
.foodi360-badge--yellow { --foodi360-badge: var(--foodi360-warning); }
.foodi360-badge--blue   { --foodi360-badge: var(--foodi360-info); }
.foodi360-badge--orange { --foodi360-badge: color-mix(in srgb, var(--foodi360-warning) 55%, var(--foodi360-danger)); }
.foodi360-badge--green  { --foodi360-badge: var(--foodi360-success); }
.foodi360-badge--red    { --foodi360-badge: var(--foodi360-danger); }
.foodi360-badge:is(.foodi360-badge--yellow, .foodi360-badge--blue, .foodi360-badge--orange, .foodi360-badge--green, .foodi360-badge--red, .foodi360-badge--grey) {
    background-color: color-mix(in srgb, var(--foodi360-badge) 16%, transparent);
    color: color-mix(in srgb, var(--foodi360-badge) 75%, #000);
}

/* ── Checkout (Woodmart two columns; its rule targets form.woocommerce-checkout) ── */
.foodi360-checkout { margin-block-end: 40px; }
.foodi360-checkout__title { margin-block: 0 30px; }
.foodi360-checkout__layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 30px;
}
.foodi360-checkout__layout > .customer-details,
.foodi360-checkout__layout > .checkout-order-review {
    flex: 1 0 0;
    min-width: 0;
    max-width: 50%;
}
.foodi360-checkout__step { margin-block-end: 30px; }
.foodi360-checkout__step > h3 { margin-block-end: 20px; text-transform: uppercase; }
.foodi360-checkout__address .wd-notice { margin-block-end: 20px; }
.foodi360-checkout__pickup,
.foodi360-checkout__branch { margin-block: 15px; color: var(--foodi360-muted); }
.foodi360-checkout__fee-info { margin-block-start: 10px; color: var(--foodi360-muted); font-size: 0.9em; }
.foodi360-checkout__fee-info .wd-notice { margin-block: 10px 0; }
.foodi360-checkout__area { margin-block-start: 20px; }

/* Review column: Woodmart paints .checkout-order-review (zig-zag edges) — fallback here */
:where(.foodi360-checkout__summary) { padding: 30px; background-color: var(--foodi360-bg-muted); }
.foodi360-checkout__summary .foodi360-summary-item__row { align-items: center; }
.foodi360-checkout__summary tfoot .order-total td { font-size: 1.1em; }
.foodi360-checkout__summary [data-foodi360-total] { color: var(--foodi360-primary); }

.foodi360-coupon { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 20px 5px; }
.foodi360-coupon__input { flex: 1 1 160px; min-width: 0; text-transform: uppercase; }
.foodi360-coupon__input[readonly] { background-color: var(--foodi360-bg-soft); }
.foodi360-coupon__message { margin-block: 5px 0; color: var(--foodi360-muted); font-size: 0.9em; }

.foodi360-checkout .woocommerce-checkout-payment { margin-block-start: 25px; }
.foodi360-payment-options { margin: 0 0 20px; padding: 0; list-style: none; }
.foodi360-payment-option > label { font-weight: 600; color: var(--foodi360-strong); }
.foodi360-checkout .place-order .foodi360-cart-note { margin-block-start: 0; }
.foodi360-checkout__place { width: 100%; }
.foodi360-checkout__place .foodi360-spinner { margin-inline-end: 6px; }

/* Delivery / pickup switch: two Woodmart-style buttons */
.foodi360-segmented { display: flex; flex-wrap: wrap; gap: 10px; }
.foodi360-segmented__option {
    flex: 1 1 140px;
    min-height: var(--foodi360-form-height);
    border: var(--wd-form-brd-width, 1px) solid var(--foodi360-form-border);
    border-radius: var(--foodi360-form-radius);
    background-color: var(--foodi360-bg);
    box-shadow: none;
    color: var(--foodi360-strong);
    font-weight: 600;
    text-transform: none;
}
.foodi360-segmented__option:hover { border-color: var(--foodi360-strong); background-color: var(--foodi360-bg); color: var(--foodi360-strong); }
.foodi360-segmented__option.is-active,
.foodi360-segmented__option.is-active:hover {
    border-color: var(--foodi360-primary);
    background-color: var(--foodi360-primary);
    color: #fff;
}

/* Shared: summary rows with a thumbnail (checkout review + order details tables) */
.foodi360-summary-item__row { display: flex; gap: 12px; align-items: flex-start; }
.foodi360-summary-item__thumb {
    flex: none;
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: calc(var(--foodi360-radius) / 1.5);
}
.foodi360-summary-item__body { min-width: 0; }
.foodi360-summary-item__name { color: var(--wd-entities-title-color, var(--foodi360-title)); font-weight: 600; }
.foodi360-summary-item__body .variation,
.foodi360-summary-item__body .wc-item-meta { margin: 5px 0 0; padding: 0; list-style: none; font-size: 0.9em; }
.foodi360-price-table__row--discount td { color: var(--foodi360-success); }

/* ── Address cards + form ────────────────────────────────── */
.foodi360-address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 15px;
    margin-block-end: 15px;
}
.foodi360-address-card {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0;
    padding-block: 15px;
    padding-inline: 15px 40px;
    border: 1px solid var(--foodi360-border);
    border-radius: var(--foodi360-radius);
    background-color: var(--foodi360-bg);
    color: var(--foodi360-text);
    font-weight: 400;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
label.foodi360-address-card { cursor: pointer; }
label.foodi360-address-card:hover { border-color: var(--foodi360-light); }
.foodi360-address-card.is-selected { border-color: var(--foodi360-primary); box-shadow: inset 0 0 0 1px var(--foodi360-primary); }
.foodi360-address-card__radio { flex: none; margin-block-start: 4px; accent-color: var(--foodi360-primary); }
.foodi360-address-card__icon { font-size: 1.2em; line-height: 1.3; }
.foodi360-address-card__body { display: grid; gap: 3px; min-width: 0; font-size: 0.9em; }
.foodi360-address-card__type { color: var(--foodi360-title); font-weight: 600; text-transform: uppercase; }
.foodi360-address-card__default {
    margin-inline-start: 6px;
    padding: 1px 6px;
    border-radius: var(--foodi360-radius);
    background-color: var(--foodi360-bg-muted);
    color: var(--foodi360-muted);
    font-size: 11px;
}
.foodi360-address-card__text { overflow-wrap: anywhere; color: var(--foodi360-strong); }
.foodi360-address-card__contact,
.foodi360-address-card__extra { color: var(--foodi360-muted); }
.foodi360-address-card__delete {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    width: 26px;
    height: 26px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    color: var(--foodi360-muted);
    font-size: 18px;
    line-height: 1;
}
.foodi360-address-card__delete:hover { background: var(--foodi360-bg-soft); color: var(--foodi360-danger); }
.foodi360-address-list__empty { color: var(--foodi360-muted); }

.foodi360-address-form {
    margin-block: 15px;
    padding: 25px;
    border: 2px dashed var(--foodi360-border);
    border-radius: var(--foodi360-radius);
}
.foodi360-address-form__title { margin-block: 0 20px; }
.foodi360-address-form__types { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; border: 0; }
.foodi360-address-form__types legend { width: 100%; margin-block-end: 5px; }
.foodi360-address-form__details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 15px; }
.foodi360-address-form__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.foodi360-address-book__add { margin-block-end: 10px; }
.foodi360-chip { display: inline-flex; margin: 0; font-weight: 400; cursor: pointer; }
.foodi360-chip input { position: absolute; opacity: 0; pointer-events: none; }
.foodi360-chip span {
    padding: 8px 16px;
    border: var(--wd-form-brd-width, 1px) solid var(--foodi360-form-border);
    border-radius: var(--foodi360-form-radius);
    color: var(--foodi360-strong);
}
.foodi360-chip input:checked + span { border-color: var(--foodi360-primary); box-shadow: inset 0 0 0 1px var(--foodi360-primary); }
.foodi360-chip input:focus-visible + span { outline: 2px solid var(--foodi360-primary); outline-offset: 2px; }
.foodi360-location-picker { margin-block-end: 20px; }

.foodi360-map {
    width: 100%;
    height: 260px;
    overflow: hidden;
    border-radius: var(--foodi360-radius);
    background-color: var(--foodi360-bg-muted);
}
.foodi360-map iframe { width: 100%; height: 100%; border: 0; }

/* ── Orders table (Woodmart woocommerce-orders-table) ───── */
.foodi360-order-card__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.foodi360-order-card__actions :is(.button, .btn) { min-height: 36px; padding: 5px 14px; font-size: 12px; }
.foodi360-orders__more-wrap { margin-block-start: 20px; text-align: center; }
.foodi360-orders__empty .button { margin-inline-start: 10px; }

/* ── Order page / status timeline ────────────────────────── */
.foodi360-order-page,
.foodi360-track { margin-block-end: 40px; }
.foodi360-order-page__back { margin-block-end: 10px; font-size: 0.9em; }
.foodi360-order-page__title { margin: 0; }
.foodi360-order-page__date { margin-block: 5px 25px; color: var(--foodi360-muted); font-weight: 400; }
.foodi360-order-page__date mark { background: none; color: var(--foodi360-strong); font-weight: 600; }
.foodi360-order-page__grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 30px;
    margin-block-start: 30px;
}
.foodi360-order-section__title { margin-block: 0 15px; text-transform: uppercase; font-size: 18px; }
.foodi360-order-address { margin-block-end: 20px; font-style: normal; }
.foodi360-order-info th { width: 40%; }

.foodi360-order-status {
    padding: 25px;
    border: 3px solid var(--foodi360-border-soft);
    border-radius: var(--foodi360-radius);
}
.foodi360-order-status__head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.foodi360-order-status__live { color: var(--foodi360-muted); font-size: 0.85em; }

.foodi360-timeline {
    --foodi360-step-size: 30px;
    display: flex;
    margin: 25px 0 5px;
    padding: 0;
    list-style: none;
}
.foodi360-timeline__step {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--foodi360-light);
    font-size: 0.85em;
    text-align: center;
}
/* Line from the previous step (inline-end: 50% flips with RTL) */
.foodi360-timeline__step + .foodi360-timeline__step::before {
    content: "";
    position: absolute;
    top: calc(var(--foodi360-step-size) / 2 - 1.5px);
    inset-inline-end: 50%;
    z-index: 0;
    width: 100%;
    height: 3px;
    background-color: var(--foodi360-border);
}
.foodi360-timeline__dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: var(--foodi360-step-size);
    height: var(--foodi360-step-size);
    border: 3px solid var(--foodi360-border);
    border-radius: 50%;
    background-color: var(--foodi360-bg);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}
.foodi360-timeline__step.is-done { color: var(--foodi360-strong); }
.foodi360-timeline__step.is-done .foodi360-timeline__dot { border-color: var(--foodi360-success); background-color: var(--foodi360-success); }
.foodi360-timeline__step:is(.is-done, .is-current, .is-stopped)::before { background-color: var(--foodi360-success); }
.foodi360-timeline__step.is-current { color: var(--foodi360-primary); font-weight: 600; }
.foodi360-timeline__step.is-current .foodi360-timeline__dot {
    border-color: var(--foodi360-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--foodi360-primary) 20%, transparent);
    animation: foodi360-pulse 1.6s ease-in-out infinite;
}
.foodi360-timeline__step.is-stopped { color: var(--foodi360-danger); font-weight: 600; }
.foodi360-timeline__step.is-stopped .foodi360-timeline__dot { border-color: var(--foodi360-danger); background-color: var(--foodi360-danger); }
.foodi360-timeline__step.is-stopped::before { background-color: var(--foodi360-danger); }
@keyframes foodi360-pulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--foodi360-primary) 8%, transparent); } }

/* Driver */
.foodi360-driver-card {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-block-start: 20px;
    padding: 15px;
    border-radius: var(--foodi360-radius);
    background-color: var(--foodi360-bg-soft);
}
.foodi360-driver-card__avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.foodi360-driver-card__avatar--empty { display: grid; place-items: center; background-color: var(--foodi360-bg-muted); font-size: 1.4em; }
.foodi360-driver-card__body { display: grid; flex: 1; gap: 2px; min-width: 140px; }
.foodi360-driver-card__label { color: var(--foodi360-muted); font-size: 0.85em; }
.foodi360-driver-card__rating { color: var(--wd-star-color, #eabe12); font-size: 0.9em; }
.foodi360-driver-track { margin-block-start: 20px; }
.foodi360-driver-track__text { margin-block: 10px 0; font-weight: 600; color: var(--foodi360-strong); }
.foodi360-driver-track__updated { margin: 2px 0 0; color: var(--foodi360-muted); font-size: 0.85em; }

.foodi360-order-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 20px; }
.foodi360-button--danger:hover { --btn-color-hover: var(--foodi360-danger); --btn-default-color-hover: var(--foodi360-danger); }

/* ── Tracking page ───────────────────────────────────────── */
.foodi360-track__title { margin-block: 0 25px; }
.foodi360-track__active { display: grid; gap: 10px; margin-block-end: 20px; }
.foodi360-track__choice {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    min-height: 0;
    padding: 15px 20px;
    border: 1px solid var(--foodi360-border);
    border-radius: var(--foodi360-radius);
    background-color: var(--foodi360-bg);
    box-shadow: none;
    color: var(--foodi360-strong);
    font-weight: 600;
    text-align: start;
    text-transform: none;
}
.foodi360-track__choice:hover { border-color: var(--foodi360-light); background-color: var(--foodi360-bg); color: var(--foodi360-strong); }
.foodi360-track__choice.is-active { border-color: var(--foodi360-primary); box-shadow: inset 0 0 0 1px var(--foodi360-primary); }
.foodi360-track__choice-date { margin-inline-start: auto; color: var(--foodi360-muted); font-size: 0.85em; font-weight: 400; }
.foodi360-track__other { margin-block: 15px 20px; }
.foodi360-track__other summary { margin-block-end: 15px; color: var(--wd-link-color, var(--foodi360-primary)); cursor: pointer; }
.foodi360-track__form { max-width: 560px; }
.foodi360-track__result { margin-block-start: 30px; }
.foodi360-track__order { display: grid; gap: 20px; }
.foodi360-track__order .foodi360-order-page__date { margin: 0 0 0 10px; font-size: 0.8em; text-transform: none; }

/* ── Confirmation ────────────────────────────────────────── */
.foodi360-confirmation { max-width: 600px; margin: 0 auto 40px; text-align: center; }
.foodi360-confirmation__icon { width: 88px; height: 88px; margin: 0 auto 15px; }
.foodi360-confirmation__icon svg { width: 100%; height: 100%; }
.foodi360-confirmation__circle {
    stroke: var(--foodi360-success);
    stroke-width: 3;
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
    animation: foodi360-draw 0.6s ease-out forwards;
}
.foodi360-confirmation__check {
    stroke: var(--foodi360-success);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 36;
    stroke-dashoffset: 36;
    animation: foodi360-draw 0.35s 0.55s ease-out forwards;
}
@keyframes foodi360-draw { to { stroke-dashoffset: 0; } }
.foodi360-confirmation__title { margin-block: 0 10px; }
.foodi360-confirmation__id { margin-block: 0 15px; font-size: 1.1em; }
.foodi360-confirmation__id strong { margin-inline-start: 6px; color: var(--foodi360-title); font-size: 1.4em; }
.foodi360-confirmation__status { display: flex; justify-content: center; align-items: center; gap: 10px; color: var(--foodi360-muted); }
.foodi360-confirmation__summary { margin-block: 25px; text-align: start; }
.foodi360-confirmation__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-block-start: 25px; }

@media (prefers-reduced-motion: reduce) {
    .foodi360-timeline__step.is-current .foodi360-timeline__dot,
    .foodi360-confirmation__circle,
    .foodi360-confirmation__check { animation: none; stroke-dashoffset: 0; }
}

/* ── Responsive (Woodmart breakpoints: 1024 / 768 / 576) ─── */
@media (min-width: 769px) and (max-width: 1024px) {
    .foodi360-checkout__layout > .checkout-order-review { flex-grow: 1.2; max-width: 60%; }
}
@media (max-width: 1024px) {
    .foodi360-order-page__grid { grid-template-columns: 1fr; }
}
@media (max-width: 768.98px) {
    .foodi360-checkout__layout > .customer-details,
    .foodi360-checkout__layout > .checkout-order-review { flex-basis: 100%; max-width: 100%; }
    .foodi360-order-card__actions { justify-content: flex-start; }
}
@media (max-width: 576px) {
    :where(.foodi360-checkout__summary),
    .foodi360-order-status,
    .foodi360-address-form { padding: 20px; }
    .foodi360-address-form__details { grid-template-columns: 1fr; }
    .foodi360-timeline { --foodi360-step-size: 24px; }
    .foodi360-timeline__label { font-size: 11px; }
}