/**
 * Food Butik - Custom Cart / Mini-cart Redesign
 *
 * 1:1 port of the approved "Minicart" design (Manrope, QuinPizza style).
 * All selectors are scoped under `.fbcart` so the generic class names
 * (.card, .summary, .banner, .totals, .badge ...) never leak into the theme.
 * The stylesheet is only enqueued while the redesign is enabled, so the
 * Rey side-panel chrome overrides at the bottom are safe.
 */

.fbcart {
    /* ---- design tokens (from Minicart.html) ---- */
    --accent: #ED1B24;
    --accent-dark: #C8121A;
    --checkout: #16A93F;
    --checkout-dark: #138736;
    --ink: #111114;
    --muted: #9AA0A6;
    --line: #ECEDEF;
    --summary-bg: #F4F5F6;
    --pink: #FCE9EA;
    --radius: 18px;
    --fbcart-font: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* fill the Rey panel and allow internal scroll */
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    background: #fff;
    color: var(--ink);
}
.fbcart, .fbcart * {
    font-family: var(--fbcart-font) !important;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.fbcart .scroller {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 8px;
}
.fbcart .scroller::-webkit-scrollbar { width: 0; height: 0; }

/* ---------- header ---------- */
.fbcart .topbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--line);
}
.fbcart .back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ink);
    color: #fff;
    border: none;
    cursor: pointer;
    font-weight: 800;
    font-size: 15px;
    white-space: nowrap;
    padding: 13px 18px 13px 14px;
    border-radius: 999px;
    text-decoration: none;
}
.fbcart .back:hover { color: #fff; }
.fbcart .back:active { transform: scale(0.97); }
.fbcart .back svg { width: 22px; height: 22px; }
.fbcart .sepet {
    font-weight: 800;
    font-size: 21px;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-transform: uppercase;
}
.fbcart .badge {
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------- summary card (with collapsible basket) ---------- */
.fbcart .summary {
    margin: 16px 16px 4px;
    background: var(--summary-bg);
    border-radius: var(--radius);
    padding: 18px;
    cursor: pointer;
}
.fbcart .summary-head { display: flex; align-items: center; gap: 14px; }
.fbcart .cart-ic {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.fbcart .cart-ic svg { width: 26px; height: 26px; }
.fbcart .summary-txt { flex: 1; min-width: 0; }
.fbcart .st-1 { font-weight: 800; font-size: 17px; line-height: 1.2; }
.fbcart .st-2 { font-size: 15px; color: #6B7178; margin-top: 2px; font-weight: 600; white-space: nowrap; }
.fbcart .more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #E3E5E8;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    color: var(--ink);
    padding: 10px 12px;
    border-radius: 12px;
    white-space: nowrap;
    min-width: 116px;            /* equal width for "Visa detaljer" / "Dölj" so the
                                    summary text wraps the same in both states */
    justify-content: center;
}
.fbcart .more svg { width: 18px; height: 18px; transition: transform 0.25s; }
.fbcart .more.open svg { transform: rotate(180deg); }

.fbcart .basket { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s ease; }
.fbcart .basket.open { grid-template-rows: 1fr; }
.fbcart .basket-inner { overflow: hidden; }
.fbcart .basket.open .basket-inner { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #D7DADE; }
.fbcart .bitem { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; font-size: 15px; }
.fbcart .bitem .bn { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; line-height: 1.35; }
.fbcart .bitem .bn .bn-name { font-weight: 600; color: #2A2E33; }
.fbcart .bitem .bn .bopt { display: block; }
.fbcart .bitem .bn .bopt-line {
    display: block; font-size: 12px; color: var(--muted); font-weight: 500; line-height: 1.5;
    padding-left: 12px; position: relative;
}
.fbcart .bitem .bn .bopt-line::before {
    content: ""; position: absolute; left: 2px; top: 0.62em;
    width: 4px; height: 4px; border-radius: 50%; background: #C7CBD1;
}
.fbcart .bitem .bside { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.fbcart .bitem .bp { font-weight: 700; white-space: nowrap; line-height: 1.2; }
.fbcart .bitem .bx {
    flex: none; width: 22px; height: 22px; border-radius: 50%;
    border: none; background: #ECEEF0; color: var(--muted); cursor: pointer;
    font-size: 15px; line-height: 22px; text-align: center; display: block;
    text-decoration: none;
}
.fbcart .bitem .bx:hover { background: var(--pink); color: var(--accent); }

/* compact quantity stepper inside a basket row
   (.stepper.stepper--mini beats the carousel .stepper rules defined later) */
.fbcart .stepper.stepper--mini {
    height: 32px; padding: 0 2px; margin-top: 2px;
    background: #fff; border: 1px solid #E3E5E8; box-shadow: none;
    align-self: flex-start; animation: none;
}
.fbcart .stepper.stepper--mini button { width: 28px; height: 28px; background: transparent; color: var(--ink); box-shadow: none; }
.fbcart .stepper.stepper--mini button svg { width: 14px; height: 14px; }
.fbcart .stepper.stepper--mini button:active { background: #F1F2F4; }
.fbcart .stepper.stepper--mini .step-dec { color: var(--accent); }
.fbcart .stepper.stepper--mini .qty { min-width: 22px; font-size: 14px; color: var(--ink); }

/* ---------- section heading ---------- */
.fbcart .sec-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 18px 14px; }
.fbcart .sec-head h2 { margin: 0; font-size: 19px; font-weight: 800; white-space: nowrap; }
.fbcart .sec-head .emo { font-size: 18px; }
.fbcart .seeall {
    display: inline-flex; align-items: center; gap: 3px; background: none; border: none;
    cursor: pointer; font-weight: 700; font-size: 14px; color: var(--muted); white-space: nowrap; text-decoration: none;
}
.fbcart .seeall svg { width: 16px; height: 16px; }

/* ---------- carousel ---------- */
.fbcart .carousel-wrap { padding-bottom: 4px; min-width: 0; }
.fbcart .carousel {
    display: flex; gap: 12px; padding: 4px 16px; overflow-x: auto;
    scroll-snap-type: x mandatory; scroll-padding-left: 16px;
    cursor: grab; scroll-behavior: smooth; scrollbar-width: none;
}
.fbcart .carousel::-webkit-scrollbar { display: none; }
.fbcart .carousel.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.fbcart .carousel.is-dragging a, .fbcart .carousel.is-dragging .card { pointer-events: none; }
.fbcart .card {
    position: relative;
    /* exactly 3 cards fit the visible width (2 gaps of 12px) */
    flex: 0 0 calc((100% - 24px) / 3);
    min-width: 0; scroll-snap-align: start;
    background: #fff; border: 1px solid #EFEFF1; border-radius: var(--radius);
    padding: 16px 10px 14px; box-shadow: 0 6px 18px rgba(17,17,20,0.06);
    display: flex; flex-direction: column; align-items: center;
}
.fbcart .card-link { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; width: 100%; }
.fbcart .fav {
    position: absolute; top: 10px; right: 10px; width: 30px; height: 30px;
    border-radius: 50%; border: none; background: transparent; cursor: pointer;
    color: #C7CBD1; display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s, color 0.15s; z-index: 2;
}
.fbcart .fav svg { width: 20px; height: 20px; }
.fbcart .fav.on { color: var(--accent); animation: fbpop 0.3s ease; }
.fbcart .fav.on svg { fill: currentColor; }
@keyframes fbpop { 0%{transform:scale(1)} 40%{transform:scale(1.3)} 100%{transform:scale(1)} }
.fbcart .thumb { height: 110px; width: 100%; display: flex; align-items: center; justify-content: center; margin-top: 4px; }
.fbcart .thumb img { max-height: 110px; max-width: 100%; width: auto; object-fit: contain; }
.fbcart .pname { margin-top: 14px; font-size: 14px; font-weight: 600; text-align: center; color: #2A2E33; line-height: 1.25; min-height: 34px; display: flex; align-items: center; justify-content: center; }
.fbcart .pprice { font-size: 17px; font-weight: 800; margin: 6px 0 12px; white-space: nowrap; }
.fbcart .addzone { height: 48px; display: flex; align-items: center; justify-content: center; }
.fbcart .addbtn {
    width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 14px rgba(237,27,36,0.32); transition: transform 0.12s; font-size: 24px; text-decoration: none;
}
.fbcart .addbtn svg { width: 22px; height: 22px; }
.fbcart .addbtn:active { transform: scale(0.9); }
.fbcart .addbtn.is-loading { opacity: .6; pointer-events: none; }
.fbcart .stepper {
    display: flex; align-items: center; background: var(--accent); color: #fff;
    border-radius: 999px; height: 48px; padding: 0 4px; box-shadow: 0 6px 14px rgba(237,27,36,0.30);
    animation: fbgrow 0.2s ease;
}
@keyframes fbgrow { from { transform: scale(0.85); opacity: 0.4; } to { transform: scale(1); opacity: 1; } }
.fbcart .stepper button {
    width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,0.16);
    color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1;
}
.fbcart .stepper button svg { width: 18px; height: 18px; }
.fbcart .stepper button:active { background: rgba(255,255,255,0.34); }
.fbcart .stepper .qty { min-width: 26px; text-align: center; font-weight: 800; font-size: 17px; }

/* ---------- dots ---------- */
.fbcart .dots { display: flex; justify-content: center; gap: 7px; padding: 16px 0 4px; }
.fbcart .dot { width: 8px; height: 8px; border-radius: 999px; border: none; background: #D7DADE; cursor: pointer; padding: 0; transition: all 0.25s; }
.fbcart .dot.on { width: 22px; background: var(--accent); }

/* ---------- banner ---------- */
.fbcart .banner {
    margin: 16px 16px 4px; background: var(--pink); border-radius: var(--radius);
    padding: 16px 18px; display: flex; align-items: center; gap: 14px;
}
.fbcart .banner-ic {
    width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(237,27,36,0.28);
}
.fbcart .banner-ic svg { width: 22px; height: 22px; }
.fbcart .banner .b-1 { font-weight: 800; font-size: 16px; }
.fbcart .banner .b-2 { font-size: 14px; color: #8A6B6E; margin-top: 2px; font-weight: 500; }

/* ---------- totals (distinct card, dotted dividers) ---------- */
.fbcart .totals {
    margin: 16px 16px 14px;
    padding: 2px 16px;
    background: var(--summary-bg);
    border-radius: var(--radius);
}
.fbcart .trow {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 0; gap: 12px;
    border-bottom: 1px dotted #D2D6DB;
}
.fbcart .trow:last-child { border-bottom: none; }
.fbcart .tr-1 { font-weight: 800 !important; font-size: 16px !important; }
.fbcart .tr-1.big { font-size: 18px !important; }
.fbcart .tr-2 { font-size: 13px !important; color: var(--muted); margin-top: 2px; font-weight: 500 !important; }
.fbcart .tval { font-weight: 800 !important; font-size: 17px !important; white-space: nowrap; color: var(--ink); }
.fbcart .trow.discount .tval { color: var(--checkout); }
.fbcart .grand { padding-top: 14px; padding-bottom: 14px; }
.fbcart .gval { font-weight: 800 !important; font-size: 22px !important; color: var(--checkout); white-space: nowrap; }
.fbcart .lira { font-weight: 700; }
/* WooCommerce wraps prices in .woocommerce-Price-amount which the theme styles;
   force the value spans to inherit our size/weight/colour so the totals look
   like the design (esp. the big green grand total). */
.fbcart .tval *, .fbcart .gval * {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    background: none !important;
}
.fbcart .tval .woocommerce-Price-currencySymbol,
.fbcart .gval .woocommerce-Price-currencySymbol { font-size: 0.72em !important; font-weight: 700 !important; }

/* ---------- checkout ---------- */
.fbcart .checkout-bar { flex: 0 0 auto; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); }
.fbcart .checkout {
    width: 100%; border: none; cursor: pointer;
    background: var(--checkout); color: #fff; font-weight: 800; font-size: 19px; letter-spacing: 0.5px;
    height: 64px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; gap: 12px;
    box-shadow: 0 10px 22px rgba(22,169,63,0.30); transition: transform 0.12s, filter 0.15s; text-decoration: none; text-transform: uppercase;
}
.fbcart .checkout:hover { color: #fff; }
.fbcart .checkout:active { transform: scale(0.985); }
.fbcart .checkout svg { width: 26px; height: 26px; }

/* ---------- empty state ---------- */
.fbcart .empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 24px; gap: 14px; }
.fbcart .empty svg { width: 64px; height: 64px; color: #D7DADE; }
.fbcart .empty p { font-size: 16px; color: var(--muted); margin: 0; font-weight: 600; }
.fbcart .empty .empty-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff; border-radius: 999px; padding: 13px 22px; font-size: 15px; font-weight: 800; text-decoration: none; }

/* ============================================================
   STANDALONE CART PAGE (same look, framed)
   ============================================================ */
.fbcart--page {
    max-width: 460px;
    margin: 24px auto;
    height: auto;
    min-height: 70vh;
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.12);
    overflow: hidden;
}

/* ============================================================
   REY THEME CART PANEL INTEGRATION
   (only loads while redesign is enabled → safe to neutralise chrome)
   ============================================================ */
.rey-cartPanel,
.rey-cartPanel .__tab-content,
.rey-cartPanel .__tab-content.--active > *,
.rey-cartPanel .widget_shopping_cart,
.rey-cartPanel .widget_shopping_cart_content {
    min-height: 0 !important;
    min-width: 0 !important;
}
.rey-cartPanel { padding: 0 !important; }
.rey-cartPanel .widget_shopping_cart,
.rey-cartPanel .widget_shopping_cart_content { margin: 0 !important; }
.rey-cartPanel-wrapper .rey-cartPanel-header,
.rey-cartPanel-wrapper .rey-sidePanel-close { display: none !important; }
.rey-cartPanel .widget_shopping_cart_content > .fbcart { flex: 1 1 auto; height: 100%; min-height: 0; }

/* ============================================================
   FONT-SIZE ARMOUR
   The site injects `.rey-cartPanel-wrapper .rey-cartPanel * { font-size:11pt
   !important }`, which flattens every font size inside the panel. We can't
   touch that theme/customizer style, so re-assert our type scale with a higher
   specificity (doubled `.fbcart.fbcart` = 3 classes beats its 2-classes-+-* ).
   ============================================================ */
.fbcart.fbcart .back        { font-size: 15px !important; }
.fbcart.fbcart .sepet       { font-size: 21px !important; }
.fbcart.fbcart .badge       { font-size: 14px !important; }
.fbcart.fbcart .st-1        { font-size: 17px !important; }
.fbcart.fbcart .st-2        { font-size: 15px !important; }
.fbcart.fbcart .more        { font-size: 13px !important; }
.fbcart.fbcart .bitem,
.fbcart.fbcart .bq,
.fbcart.fbcart .bn-name,
.fbcart.fbcart .bp          { font-size: 15px !important; }
.fbcart.fbcart .bopt-line   { font-size: 12px !important; }
.fbcart.fbcart .sec-head h2 { font-size: 19px !important; }
.fbcart.fbcart .sec-head .emo { font-size: 18px !important; }
.fbcart.fbcart .seeall      { font-size: 14px !important; }
.fbcart.fbcart .pname       { font-size: 14px !important; }
.fbcart.fbcart .pprice      { font-size: 17px !important; }
.fbcart.fbcart .stepper .qty { font-size: 17px !important; }
.fbcart.fbcart .stepper--mini .qty { font-size: 14px !important; }
.fbcart.fbcart .b-1         { font-size: 16px !important; }
.fbcart.fbcart .b-2         { font-size: 14px !important; }
.fbcart.fbcart .tr-1        { font-size: 16px !important; }
.fbcart.fbcart .tr-1.big    { font-size: 18px !important; }
.fbcart.fbcart .tr-2        { font-size: 13px !important; }
.fbcart.fbcart .tval        { font-size: 17px !important; }
.fbcart.fbcart .gval        { font-size: 22px !important; }
.fbcart.fbcart .checkout    { font-size: 19px !important; }
.fbcart.fbcart .empty p     { font-size: 16px !important; }
.fbcart.fbcart .empty-btn   { font-size: 15px !important; }
/* value price spans inherit from their .tval/.gval parent */
.fbcart.fbcart .tval *, .fbcart.fbcart .gval * { font-size: inherit !important; }
.fbcart.fbcart .tval .woocommerce-Price-currencySymbol,
.fbcart.fbcart .gval .woocommerce-Price-currencySymbol { font-size: 0.72em !important; }

/* ============================================================
   MOBILE
   Rey's side panel uses a fixed width that overflows small phones (the cart
   "slides"/shifts). Make it full-width and tighten the spacing a touch.
   ============================================================ */
@media (max-width: 575.98px) {
    .rey-cartPanel-wrapper { width: 100vw !important; max-width: 100vw !important; }

    .fbcart .topbar { padding: 14px 14px 12px; }
    .fbcart .summary,
    .fbcart .banner,
    .fbcart .totals { margin-left: 12px; margin-right: 12px; }
    .fbcart .summary { padding: 14px; }
    .fbcart .scroller { padding-bottom: 6px; }
    .fbcart .sec-head { padding: 18px 14px 12px; }
    .fbcart .carousel { padding-left: 12px; padding-right: 12px; gap: 10px; }
    .fbcart .card { flex: 0 0 calc((100% - 20px) / 3); padding: 13px 8px 12px; }
    .fbcart .card .thumb { height: 90px; }
    .fbcart .card .thumb img { max-height: 90px; }
    .fbcart .addbtn { width: 42px; height: 42px; }
    .fbcart .fav { top: 7px; right: 7px; width: 26px; height: 26px; }
    .fbcart .checkout-bar { padding-left: 12px; padding-right: 12px; }
}