/* Modam v1.0 — Naser Khadem, Font Iran (fontiran.com).
   Copyright: Commercial/Proprietary Software.
   Purchased font supplied by the project owner; font binaries are unchanged. */
@font-face {
    font-family: "Modam";
    src: url("../fonts/modam/ModamWeb-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Modam";
    src: url("../fonts/modam/ModamWeb-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Modam";
    src: url("../fonts/modam/ModamWeb-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Modam";
    src: url("../fonts/modam/ModamWeb-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Modam";
    src: url("../fonts/modam/ModamWeb-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

:root {
    font-synthesis: none;
}

/* B2C mobile verification and delivery address, using the existing light palette. */
.consumer-checkout { min-height:calc(100dvh - 74px); padding:24px 18px 100px; background:#fff; color:#35231b; }
.checkout-stage { margin:0 0 30px; text-align:center; font-size:.7rem; line-height:2; color:#756860; }
.checkout-stage span { color:#935b38; font-weight:700; }
.consumer-card { padding:24px; border:1px solid #eee2da; border-radius:20px; background:#fff; box-shadow:0 8px 24px #59351f09; }
.phone-card { margin-top:36px; text-align:center; }
.checkout-illustration { width:56px; height:56px; padding:11px; margin-bottom:12px; border-radius:16px; background:#fcf2e9; fill:none; stroke:#9b6240; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.consumer-card h1,.checkout-heading h1 { margin:0 0 10px; font-size:1.35rem; }
.phone-card > p,.checkout-heading p { color:#6f625a; font-size:.85rem; line-height:2; }
.consumer-card form { display:grid; gap:12px; margin-top:26px; }
.consumer-card label:not(.new-address-heading) { text-align:right; font-size:.85rem; font-weight:700; }
.consumer-card input:not([type=radio]),.consumer-card textarea { width:100%; min-height:50px; padding:12px 14px; border:1px solid #dfd2c7; border-radius:11px; background:#fffdfb; color:#35231b; font:inherit; }
.consumer-card textarea { resize:vertical; line-height:1.9; }
.consumer-card input:focus-visible,.consumer-card textarea:focus-visible,.consumer-checkout button:focus-visible { outline:2px solid #9c6545; outline-offset:3px; }
.consumer-primary { min-height:50px; width:100%; border:0; border-radius:11px; background:#ba855f; color:#fff; font:inherit; font-weight:700; }
.consumer-primary:disabled,.consumer-checkout button:disabled { opacity:.55; }
.consumer-link { min-height:40px; padding:8px; border:0; background:none; color:#965f3d; font:inherit; font-size:.8rem; }
.phone-card > .consumer-link { display:block; margin:12px auto 0; }
.consumer-card .checkout-code { height:58px; text-align:center; font-size:1.5rem; letter-spacing:.5em; padding-inline:12px 0; font-variant-numeric:tabular-nums; }
.checkout-error { padding:12px; border:1px solid #f2d2c9; border-radius:10px; background:#fff5f2; color:#9b3728; font-size:.82rem; line-height:1.9; }
.checkout-assurance,.checkout-hint { color:#74675f; font-size:.73rem; line-height:1.9; }
.checkout-assurance { margin-top:24px; text-align:center; }
.checkout-heading { margin-bottom:22px; }
.checkout-address-list { display:grid; gap:12px; border:0; padding:0; margin:0 0 18px; min-width:0; }
.address-choice { display:flex; gap:12px; align-items:flex-start; cursor:pointer; padding:18px; }
.address-choice.selected { border-color:#b88059; background:#fff8f1; box-shadow:0 0 0 1px #b8805933; }
.consumer-checkout input[type=radio] { width:19px; height:19px; margin:3px 0; flex-shrink:0; accent-color:#ac7149; }
.address-choice strong { display:block; margin-bottom:8px; font-size:.93rem; }
.address-choice .address-details { display:block; font-size:.81rem; font-weight:400; line-height:1.9; color:#65594f; overflow-wrap:anywhere; }
.address-choice small { display:block; margin-top:8px; color:#74675f; font-weight:400; }
.new-address-card { display:grid; gap:10px; }
.new-address-heading { display:flex; align-items:center; gap:12px; margin-bottom:8px; cursor:pointer; }
.checkout-empty { margin:0 0 20px; color:#6f625a; font-size:.85rem; line-height:2; }
.checkout-success { margin-top:18px; padding:18px; border-radius:14px; background:#eff6ec; color:#39633e; font-size:.88rem; line-height:1.9; }
.checkout-success p { margin:8px 0 0; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media (max-width:360px) { .consumer-checkout { padding-inline:12px; } .consumer-card { padding:18px; } .checkout-stage { font-size:.65rem; } }

:root {
    --ink: #20272b;
    --line: #30383c;
    --surface: #f7f7f7;
    --muted: #929292;
    --salmon: #e99b8b;
    --salmon-dark: #de8675;
    --green: #9acb71;
}

* { box-sizing: border-box; }

html, body, #app { min-height: 100%; }

body {
    margin: 0;
    direction: rtl;
    font-family: "Modam", Tahoma, Arial, sans-serif;
    background: #e9ecee;
    color: var(--ink);
}

button, input, select, textarea { font: inherit; }
.ui-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
button { cursor: pointer; }
button:disabled { cursor: default; }

.mobile-shell {
    position: relative;
    width: min(100%, 480px);
    min-height: 100dvh;
    margin: 0 auto;
    overflow: hidden;
    background: var(--surface);
    border-inline: 2px solid var(--line);
    box-shadow: 0 0 24px #00000018;
    border-radius: 14px;
}

.brand-bar {
    position: sticky;
    z-index: 40;
    top: 0;
    display: grid;
    grid-template-columns: 52px 1fr 52px;
    align-items: center;
    height: 74px;
    padding: 6px 8px;
    background: #fff;
    border-top: 0;
    border-bottom: 0;
}

.brand-logo {
    direction: rtl;
    display: inline-flex;
    align-items: center;
    justify-self: center;
    gap: 10px;
    height: 54px;
    color: #4b2a1c;
    text-decoration: none;
    white-space: nowrap;
}

.brand-logo img {
    width: 32px;
    height: 46px;
    object-fit: contain;
}

.brand-logo strong {
    font-size: 1.25rem;
    font-weight: 800;
}

.menu-toggle {
    display: grid;
    gap: 5px;
    justify-self: start;
    width: 42px;
    padding: 7px;
    border: 0;
    background: transparent;
}

.menu-toggle span { height: 5px; background: #111; border-radius: 1px; }

.brand-spacer { width: 42px; }
.layout-content { min-height: calc(100dvh - 74px); }

.drawer-backdrop {
    position: fixed;
    z-index: 60;
    inset: 0;
    width: 100%;
    border: 0;
    background: #0007;
}

.side-drawer {
    position: fixed;
    z-index: 70;
    top: 0;
    right: max(0px, calc((100vw - 480px) / 2));
    display: grid;
    align-content: start;
    gap: 12px;
    width: min(78vw, 310px);
    height: 100dvh;
    padding: 28px 20px;
    background: #fff;
    box-shadow: -10px 0 30px #0003;
}

.side-drawer strong { margin-bottom: 16px; font-size: 1.25rem; }
.side-drawer a, .side-drawer button {
    padding: 13px;
    border: 0;
    border-radius: 8px;
    background: #f0f1f1;
    color: var(--ink);
    text-align: right;
    text-decoration: none;
}

.menu-page { min-height: calc(100dvh - 74px); padding-bottom: 78px; background: #f4f4f4; }

.category-tabs {
    position: sticky;
    z-index: 30;
    top: 74px;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    background: #fff;
    border-bottom: 2px solid var(--line);
}

.category-tabs::-webkit-scrollbar { display: none; }

.category-tab {
    position: relative;
    flex: 1 0 105px;
    min-height: 58px;
    padding: 12px 10px;
    border: 0;
    background: #fff;
    color: #111;
    font-weight: 700;
    white-space: nowrap;
}

.category-tab::after {
    position: absolute;
    right: 18px;
    bottom: 0;
    left: 18px;
    height: 4px;
    border-radius: 4px 4px 0 0;
    background: transparent;
    content: "";
}

.category-tab.active::after { background: #111; }

.product-list { background: #efefef; }

.product-row {
    display: grid;
    grid-template-columns: 106px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 146px;
    padding: 14px 18px;
    background: #fff;
    border-bottom: 1.5px solid #747474;
}

.product-image {
    width: 106px;
    height: 106px;
    object-fit: cover;
    background: #919191;
    border-radius: 16px;
}

.product-details { min-width: 0; }
.product-details h2 { margin: 0 0 8px; overflow: hidden; font-size: .98rem; text-overflow: ellipsis; white-space: nowrap; }
.latin-name { margin: 0 0 7px; overflow: hidden; color: #777; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.product-price { margin: 0 0 8px; color: var(--salmon); font-size: .9rem; font-weight: 700; }
.product-code { margin: 0; color: var(--green); font-size: .82rem; font-weight: 700; }

.quantity-control {
    direction: ltr;
    display: grid;
    grid-template-columns: 34px 30px 34px;
    align-items: center;
    align-self: end;
    margin-bottom: 15px;
}

.quantity-control button, .quantity-control span {
    display: grid;
    place-items: center;
    height: 34px;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
}

.quantity-control button { border: 0; background: var(--salmon); }
.quantity-control button:first-child { border-radius: 6px 0 0 6px; }
.quantity-control button:last-child { border-radius: 0 6px 6px 0; }
.quantity-control span { background: #edaa9c; font-size: .95rem; border-inline: 1px solid #fff8; }

.order-bar {
    position: fixed;
    z-index: 45;
    right: max(2px, calc((100vw - 480px) / 2 + 2px));
    bottom: 0;
    left: max(2px, calc((100vw - 480px) / 2 + 2px));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 58px;
    padding: 8px 18px;
    background: #d9dcde;
    border-top: 1.5px solid #777;
    border-bottom: 3px solid var(--line);
}

.submit-order {
    min-width: 136px;
    padding: 9px 20px;
    border: 0;
    border-radius: 6px;
    background: var(--salmon-dark);
    color: #fff;
    font-weight: 700;
}

.submit-order:disabled { opacity: .55; }
.order-bar strong { font-size: .82rem; }
.order-message { margin: 14px; padding: 12px; border-radius: 8px; background: #eef7e8; color: #47712d; }
.menu-state { display: grid; place-items: center; gap: 12px; min-height: 240px; padding: 24px; text-align: center; }

.menu-state button, .login-container button {
    padding: 10px 18px;
    border: 0;
    border-radius: 7px;
    background: var(--salmon-dark);
    color: #fff;
}

.error { color: #8a1111; }

.branch-page {
    display: grid;
    align-content: center;
    gap: 42px;
    width: min(100%, 480px);
    min-height: 100dvh;
    margin: auto;
    padding: 34px 44px;
    background: #f4f4f4;
    border: 3px solid var(--line);
}
.branch-panel { overflow: hidden; background: #fff; border: 1px solid #555; box-shadow: 0 4px 0 #777; }
.branch-logo { display: block; width: 150px; height: 140px; margin: 8px auto 0; object-fit: contain; }
.branch-panel > p { margin: 0; padding: 0 18px 8px; color: #777; line-height: 1.7; }
.branch-list { display: grid; }
.branch-card {
    display: grid;
    grid-template-columns: 130px 1fr;
    align-items: center;
    gap: 18px;
    min-height: 96px;
    padding: 10px;
    border: 0;
    border-top: 2px solid #555;
    background: #fff;
    text-align: right;
}
.branch-card img { width: 130px; height: 72px; border-radius: 10px; object-fit: cover; background: #999; }
.branch-card span { display: grid; gap: 8px; }
.branch-card small { color: #777; }
.branch-state { padding: 28px 16px; border-top: 2px solid #555; text-align: center; }
.b2b-entry { min-height: 58px; border: 0; border-radius: 10px; background: var(--salmon); color: #fff; font-size: 1rem; font-weight: 700; }
.customer-strip { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; background: #fff4ef; color: #6a3e2b; font-size: .83rem; }

.login-container {
    max-width: 420px;
    margin: 64px auto;
    padding: 24px;
    background: white;
    border-radius: 14px;
    box-shadow: 0 3px 12px #00000012;
}

.login-container form { display: grid; gap: 10px; }
.login-container input { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 8px; }

@media (max-width: 390px) {
    .branch-page { padding: 24px 24px; }
    .branch-card { grid-template-columns: 105px 1fr; }
    .branch-card img { width: 105px; }
    .product-row { grid-template-columns: 88px minmax(0, 1fr); gap: 11px; padding: 12px; }
    .product-image { width: 88px; height: 88px; }
    .quantity-control { grid-column: 2; justify-self: end; margin: -4px 0 0; }
}

@media (min-width: 481px) {
    .mobile-shell { border-right-width: 3px; border-left-width: 3px; }
}

/* B2C menu — card design */
.b2c-menu { padding: 16px 12px 86px; background: #fff; }
.b2c-menu .menu-hero {
    position: relative;
    min-height: 188px;
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: 22px;
    background: #4b210d url("../images/menu-banner.webp") center/cover no-repeat;
    box-shadow: 0 8px 24px #5e2d171c;
}
.b2c-menu .hero-copy {
    position: absolute;
    top: 54px;
    right: 28px;
    display: grid;
    gap: 7px;
    color: #fff;
    text-shadow: 0 2px 7px #0008;
}
.b2c-menu .hero-copy strong { font-size: 1.65rem; }
.b2c-menu .hero-copy span { font-size: .92rem; }
.b2c-menu .category-tabs {
    position: static;
    gap: 12px;
    padding: 4px 0 16px;
    border: 0;
    background: #fff;
}
.b2c-menu .category-tab {
    flex: 0 0 76px;
    display: grid;
    justify-items: center;
    gap: 8px;
    min-height: 92px;
    padding: 0;
    color: #312a26;
    font-size: .68rem;
    font-weight: 400;
    white-space: normal;
}
.b2c-menu .category-image {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    overflow: hidden;
    border: 1px solid #eee5df;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 5px 16px #5c321512;
}
.b2c-menu .category-image img { width: 46px; height: 46px; object-fit: contain; }
.b2c-menu .category-tab::after { right: 10px; left: 10px; height: 3px; background: transparent; }
.b2c-menu .category-tab.active { color: #a96c48; }
.b2c-menu .category-tab.active::after { background: #b87d59; }
.b2c-menu .product-list { display: grid; gap: 14px; background: #fff; }
.b2c-menu .product-row {
    grid-template-columns: minmax(0, 1fr) 180px;
    align-items: stretch;
    gap: 14px;
    min-height: 190px;
    padding: 22px 14px 16px;
    border: 1px solid #eee7e2;
    border-radius: 20px;
    box-shadow: 0 8px 22px #59351f0c;
}
.b2c-menu .product-details { display: flex; flex-direction: column; min-width: 0; }
.b2c-menu .product-details h2 { margin: 0 0 4px; font-size: 1.08rem; }
.b2c-menu .product-latin-name {
    direction: ltr;
    margin: 0 0 10px;
    padding-bottom: 10px;
    overflow: hidden;
    border-bottom: 1px dotted #ddd2ca;
    color: #625b57;
    font-family: inherit;
    font-size: .78rem;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.b2c-menu .product-code { flex: 1; color: #77716d; font-size: .72rem; font-weight: 400; line-height: 1.7; }
.b2c-menu .product-description {
    flex: 1;
    display: -webkit-box;
    overflow: hidden;
    margin: 0 0 10px;
    color: #77716d;
    font-size: .72rem;
    line-height: 1.8;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.b2c-menu .price-line { direction: rtl; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.b2c-menu .price-line strong { font-size: .82rem; }
.b2c-menu .price-line span { color: #b77750; font-size: .96rem; font-weight: 700; }
.b2c-menu .price-line small { font-size: .68rem; }
.b2c-menu .product-action { direction: rtl; display: grid; align-content: start; gap: 10px; }
.b2c-menu .product-image { width: 100%; height: 106px; border-radius: 8px; background: #f1eee9; }
.b2c-menu .add-product {
    width: 120px;
    min-height: 36px;
    margin: 0 auto;
    border: 0;
    border-radius: 10px;
    background: #c78f68;
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    box-shadow: 0 5px 10px #9c623229;
}
.b2c-menu .add-product b { margin-right: 8px; font-size: 1rem; }
.b2c-menu .add-product.unavailable { background: #b9aaa2; box-shadow: none; opacity: .75; }
.b2c-menu .quantity-control { grid-template-columns: 36px 42px 36px; justify-content: center; margin: 0; }
.b2c-menu .quantity-control button, .b2c-menu .quantity-control span { height: 36px; background: #c78f68; }
.b2c-menu .order-bar { border: 0; background: #fff; }
.b2c-menu .submit-order { width: 100%; min-height: 46px; border-radius: 9px; background: #c8926c; }
.b2c-menu .submit-order { display: flex; align-items: center; justify-content: center; gap: 8px; }
.b2c-menu .cart-icon { width: 20px; height: 20px; margin: 0; }

@media (max-width: 420px) {
    .b2c-menu .menu-hero { min-height: 165px; }
    .b2c-menu .hero-copy { top: 45px; right: 18px; }
    .b2c-menu .product-row { grid-template-columns: minmax(0, 1fr) 142px; padding: 16px 12px; }
    .b2c-menu .product-image { height: 100px; }
    .b2c-menu .add-product { width: 112px; }
}

/* B2C order details */
.b2c-checkout { min-height: calc(100dvh - 74px); padding: 14px 12px 82px; background: #fff; }
.checkout-lines { display: grid; gap: 12px; }
.checkout-line { direction: rtl; display: grid; grid-template-columns: minmax(0,1fr) 180px; align-items:stretch; gap:14px; min-height:190px; padding:22px 14px 16px; border:1px solid #eee7e2; border-radius:20px; box-shadow:0 8px 22px #59351f0c; }
.checkout-product-details { display:flex; flex-direction:column; min-width:0; text-align:right; }
.checkout-product-action { direction:rtl; display:grid; align-content:start; gap:10px; }
.checkout-product-action > img { width:100%; height:106px; border-radius:8px; object-fit:cover; background:#f1eee9; }
.checkout-line h2 { margin: 0 0 3px; font-size: .98rem; }
.checkout-latin { direction:ltr; margin:0 0 10px; padding-bottom:10px; border-bottom:1px dotted #ddd2ca; color:#625b57; font:.78rem Arial,sans-serif; text-align:right; }
.checkout-description { flex:1; display:-webkit-box; overflow:hidden; margin:0 0 10px; color:#77716d; font-size:.72rem; line-height:1.8; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.checkout-price { direction:rtl; display:flex; align-items:baseline; justify-content:space-between; gap:8px; font-size:.78rem; }
.checkout-price strong { color:#bd774f; font-size:.95rem; white-space:nowrap; }
.checkout-price small { font-size:.68rem; }
.checkout-stepper { direction: ltr; display:grid; grid-template-columns:36px 42px 36px; justify-content:center; overflow:hidden; margin:0 auto; border-radius:9px; }
.checkout-stepper button,.checkout-stepper b { display:grid; place-items:center; height:34px; border:0; background:#cc9169; color:#fff; }
.checkout-total { display:flex; justify-content:space-between; margin-top:14px; padding:16px; border-radius:14px; background:#fff4ef; color:#b96f4b; }
.checkout-notes { display:grid; gap:10px; margin-top:18px; color:#35231b; font-weight:700; }
.checkout-notes textarea { resize:vertical; width:100%; padding:12px; border:1px solid #e1d6cf; border-radius:12px; font:inherit; outline:none; }
.takeaway-option { margin-top:18px; overflow:hidden; border:1px solid #e8ddd5; border-radius:14px; }
.takeaway-option label,.takeaway-option div { display:flex; align-items:center; justify-content:space-between; padding:14px; }
.takeaway-option input { width:42px; height:22px; accent-color:#34ad8b; }
.mobile-switch { position:relative; display:inline-block; width:48px; height:27px; }
.mobile-switch input { position:absolute; width:1px; height:1px; opacity:0; }
.switch-track { position:absolute; inset:0; border-radius:999px; background:#c8c8c8; transition:.2s ease; }
.switch-thumb { position:absolute; top:3px; right:3px; width:21px; height:21px; border-radius:50%; background:#fff; box-shadow:0 2px 6px #0003; transition:.2s ease; }
.mobile-switch input:checked + .switch-track { background:#35ad8c; }
.mobile-switch input:checked + .switch-track .switch-thumb { transform:translateX(-21px); }
.mobile-switch input:focus-visible + .switch-track { outline:3px solid #35ad8c38; outline-offset:2px; }
.takeaway-option div { border-top:1px solid #eee5df; color:#8b817b; font-size:.78rem; }
.table-number { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:18px; font-weight:700; }
.table-number input { width:120px; padding:10px; border:1px solid #d7ccc5; border-radius:9px; }
.checkout-actions { position:fixed; z-index:45; right:max(2px,calc((100vw - 480px)/2 + 2px)); bottom:0; left:max(2px,calc((100vw - 480px)/2 + 2px)); display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:10px 12px; border-top:1px solid #eee2da; background:#fff; }
.checkout-actions button { min-height:46px; border-radius:9px; font-weight:700; }
.back-button { border:1px solid #8e837d; background:#fff; color:#35231b; }
.continue-button { border:0; background:#c8926c; color:#fff; }
.continue-button:disabled { opacity:.5; }

@media (max-width:420px) {
    .checkout-line { grid-template-columns:minmax(0,1fr) 142px; min-height:170px; padding:16px 12px; }
    .checkout-product-action > img { height:100px; }
}

/* Approved branch selection */
.branch-page {
    display: grid;
    align-content: start;
    gap: 18px;
    width: auto;
    min-height: calc(100dvh - 74px);
    padding: 16px 12px 84px;
    background: #fff;
    border: 0;
}
.branch-hero, .login-hero {
    position: relative;
    min-height: 178px;
    overflow: hidden;
    border-radius: 22px;
    background: #4b210d url("../images/menu-hero.svg") center/cover no-repeat;
    box-shadow: 0 8px 24px #5e2d171c;
}
.branch-hero::after, .login-hero::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #2e120bb8 0%, #3f1b075c 42%, transparent 72%);
    content: "";
}
.branch-hero > div, .login-hero > div {
    position: absolute;
    z-index: 1;
    top: 48px;
    right: 25px;
    display: grid;
    gap: 8px;
    color: #fff;
    text-shadow: 0 2px 8px #0008;
}
.branch-hero strong, .login-hero strong { font-size: 2rem; }
.branch-panel { overflow: visible; border: 0; background: transparent; box-shadow: none; }
.branch-list { gap: 12px; }
.branch-card {
    direction: ltr;
    grid-template-columns: 145px minmax(0, 1fr) 18px;
    gap: 16px;
    min-height: 132px;
    padding: 14px;
    border: 1px solid #eee7e2;
    border-radius: 20px;
    box-shadow: 0 8px 22px #59351f0c;
}
.branch-card img { width: 145px; height: 104px; border-radius: 12px; background: #f1eee9; }
.branch-info { direction: rtl; align-content: center; gap: 14px !important; }
.branch-info strong { color: #35231b; font-size: 1rem; }
.branch-info small { direction: rtl; display: flex; align-items: flex-start; gap: 7px; color: #776d67; line-height: 1.7; text-align: right; }
.location-icon { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 2px; color: #c8926c; }
.branch-chevron { align-self: center; width: 22px; height: 22px; color: #c8926c; stroke-width: 2.5; }
.branch-state { border: 0; border-radius: 16px; background: #faf7f3; }
.b2b-entry {
    position: fixed;
    z-index: 45;
    right: max(14px, calc((100vw - 480px) / 2 + 14px));
    bottom: 12px;
    left: max(14px, calc((100vw - 480px) / 2 + 14px));
    min-height: 52px;
    border-radius: 10px;
    background: #c8926c;
    box-shadow: 0 7px 18px #8b52322b;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}
.b2b-entry .ui-icon { width: 21px; height: 21px; }

/* Approved organization login */
.organization-login { display: grid; gap: 20px; min-height: calc(100dvh - 74px); padding: 16px 12px 30px; background: #fff; }
.login-hero { min-height: 170px; }
.login-card {
    display: grid;
    gap: 12px;
    align-self: start;
    padding: 28px 24px;
    border: 1px solid #eee7e2;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 24px #59351f0e;
}
.login-card h1 { margin: 0; color: #35231b; font-size: 1.5rem; }
.login-subtitle { margin: 0 0 14px; color: #716761; font-size: .84rem; line-height: 1.8; }
.login-card > label:not(.remember-field) { color: #35231b; font-size: .88rem; font-weight: 700; }
.login-field { position: relative; display: flex; align-items: center; }
.login-field input {
    width: 100%;
    min-height: 54px;
    padding: 11px 43px 11px 46px;
    border: 1px solid #e1d6cf;
    border-radius: 12px;
    outline: none;
    background: #fffdfb;
}
.login-field input:focus { border-color: #c8926c; box-shadow: 0 0 0 3px #c8926c1c; }
.field-icon { position: absolute; z-index: 1; right: 15px; width: 21px; height: 21px; color: #c08a65; }
.show-password { position: absolute; left: 8px; display: grid; place-items: center; padding: 8px !important; border: 0; background: transparent !important; color: #a97959 !important; }
.show-password .ui-icon { width: 21px; height: 21px; }
.remember-field { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; color: #514640; font-size: .82rem; }
.remember-field input { width: 18px; height: 18px; accent-color: #c8926c; }
.login-submit { min-height: 50px; border-radius: 10px !important; background: #c8926c !important; font-weight: 700; }
.back-to-branches { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 9px; color: #a96f4c; font-size: .86rem; font-weight: 700; text-align: center; text-decoration: none; }
.back-to-branches .ui-icon { width: 18px; height: 18px; }

@media (max-width: 390px) {
    .branch-page { padding: 12px 10px 78px; }
    .branch-hero, .login-hero { min-height: 150px; }
    .branch-card { grid-template-columns: 112px minmax(0, 1fr) 14px; min-height: 112px; padding: 10px; gap: 10px; }
    .branch-card img { width: 112px; height: 90px; }
    .organization-login { padding: 12px 10px 24px; }
    .login-card { padding: 22px 18px; }
}

/* B2B compact product menu */
.b2b-menu-v2, .order-review-page { min-height: calc(100dvh - 74px); padding: 14px 12px 84px; background: #fff; }
.b2b-customer-card, .review-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 82px;
    padding: 14px 18px;
    border-radius: 18px;
    background: #faf7f3;
}
.b2b-customer-card > .ui-icon, .review-heading > .ui-icon { width: 42px; height: 42px; padding: 8px; border-radius: 50%; background: #f2e9e2; color: #85583e; }
.b2b-customer-card div, .review-heading div { display: grid; gap: 4px; }
.b2b-customer-card strong { color: #35231b; font-size: 1.05rem; }
.b2b-customer-card span { color: #81756e; font-size: .78rem; }
.b2b-category-tabs { direction: rtl; display: flex; gap: 12px; overflow-x: auto; padding: 18px 0 16px; scrollbar-width: none; }
.b2b-category-tabs::-webkit-scrollbar { display: none; }
.b2b-category { position: relative; flex: 0 0 76px; display: grid; justify-items: center; gap: 7px; padding: 0 0 10px; border: 0; background: transparent; color: #352e2a; }
.b2b-category > span { display: grid; place-items: center; width: 58px; height: 58px; overflow: hidden; border: 1px solid #eee5df; border-radius: 50%; box-shadow: 0 5px 14px #5c321510; }
.b2b-category img { width: 48px; height: 48px; object-fit: cover; border-radius: 50%; }
.b2b-category b { font-size: .68rem; font-weight: 400; }
.b2b-category.active { color: #b5734e; }
.b2b-category.active::after { position: absolute; right: 8px; bottom: 0; left: 8px; height: 3px; border-radius: 3px; background: #c58b65; content: ""; }
.b2b-product-list { display: grid; gap: 12px; }
.b2b-product-card {
    direction: rtl;
    display: grid;
    grid-template-columns: 128px minmax(105px, 1fr) 138px;
    align-items: center;
    gap: 12px;
    min-height: 152px;
    padding: 11px;
    border: 1px solid #eee7e2;
    border-radius: 18px;
    box-shadow: 0 7px 19px #59351f0b;
}
.b2b-product-image { width: 128px; height: 128px; border-radius: 11px; object-fit: cover; background: #f1eee9; }
.b2b-product-info { align-self: center; display: grid; gap: 8px; min-width: 0; text-align: right; }
.b2b-product-info h2 { margin: 0; overflow: hidden; color: #22262a; font-size: .98rem; text-overflow: ellipsis; white-space: nowrap; }
.b2b-product-info p { direction: rtl; margin: 0; color: #bd774f; font-size: .7rem; white-space: nowrap; }
.b2b-product-info p strong { font-size: 1.02rem; }
.b2b-stock-control { direction: rtl; display: grid; justify-items: center; gap: 7px; }
.b2b-stock-control > span { font-size: .86rem; font-weight: 700; }
.in-stock { color: #69a343; }
.out-of-stock { color: #ae7770; }
.b2b-stepper { direction: ltr; display: grid; grid-template-columns: 42px 42px 42px; overflow: hidden; border-radius: 9px; }
.b2b-stepper button, .b2b-stepper b { display: grid; place-items: center; height: 40px; border: 0; border-inline-end: 1px solid #fff8; background: #cc9169; color: #fff; font-size: 1.15rem; }
.b2b-stepper button:disabled { opacity: .45; }
.b2b-stepper b { font-size: .88rem; }
.b2b-order-bar, .review-action-bar { position: fixed; z-index: 45; right: max(2px, calc((100vw - 480px) / 2 + 2px)); bottom: 0; left: max(2px, calc((100vw - 480px) / 2 + 2px)); padding: 10px 12px; border-top: 1px solid #eee2da; background: #fff; }
.b2b-order-bar button, .review-action-bar button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; border: 0; border-radius: 10px; background: #c8926c; color: #fff; font-weight: 700; }
.b2b-order-bar button:disabled, .review-action-bar button:disabled { opacity: .5; }

/* B2B order review */
.review-heading { margin-bottom: 16px; }
.review-heading h1 { margin: 0; color: #47291e; font-size: 1.25rem; }
.review-heading p { margin: 0; color: #7c7470; font-size: .78rem; }
.review-lines { display: grid; gap: 12px; }
.review-line { direction: rtl; display: grid; grid-template-columns: 126px minmax(0, 1fr) 50px; align-items: center; gap: 14px; min-height: 150px; padding: 11px; border: 1px solid #eee7e2; border-radius: 18px; box-shadow: 0 7px 19px #59351f0b; }
.review-line > img { width: 126px; height: 126px; border-radius: 11px; object-fit: cover; background: #f1eee9; }
.review-product-info { display: grid; gap: 7px; min-width: 0; text-align: right; }
.review-product-info h2 { margin: 0; overflow: hidden; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.review-product-info p { direction: rtl; margin: 0; color: #bd774f; font-size: .7rem; }
.review-product-info p strong { font-size: 1rem; }
.review-product-info > span { color: #69a343; font-size: .8rem; }
.review-product-info > span b { margin-right: 7px; color: #25282b; font-size: .95rem; }
.remove-line { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff0e9; color: #8a4d35; }
.order-summary { display: grid; gap: 12px; margin-top: 16px; padding: 18px; border: 1px solid #edddcf; border-radius: 18px; background: #fffaf5; }
.order-summary div { display: flex; justify-content: space-between; align-items: center; color: #756b66; }
.order-summary div + div { padding-top: 12px; border-top: 1px solid #eadfd7; color: #49291d; font-size: 1.05rem; }
.order-summary strong { direction: rtl; color: #a9522f; }
.empty-order { display: grid; justify-items: center; gap: 12px; padding: 50px 16px; text-align: center; }
.empty-order button { padding: 10px 18px; border: 0; border-radius: 9px; background: #c8926c; color: #fff; }
.order-confirmation { margin-top: 14px; padding: 12px; border-radius: 10px; background: #eef7e8; color: #47712d; text-align: center; }

@media (max-width: 420px) {
    .b2b-product-card { grid-template-columns: 98px minmax(82px, 1fr) 112px; gap: 8px; min-height: 120px; padding: 9px; }
    .b2b-product-image { width: 98px; height: 98px; }
    .b2b-product-info h2 { font-size: .82rem; }
    .b2b-stepper { grid-template-columns: 34px 34px 34px; }
    .b2b-stepper button, .b2b-stepper b { height: 35px; }
    .review-line { grid-template-columns: 94px minmax(0, 1fr) 42px; gap: 9px; min-height: 114px; padding: 9px; }
    .review-line > img { width: 94px; height: 94px; }
    .remove-line { width: 38px; height: 38px; }
}


/* Confirmed B2B order loaded from Rahkaran */
.confirmed-order-page { min-height: calc(100dvh - 74px); padding: 14px 12px 92px; background: #fff; }
.confirmed-order-heading { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid #dfead8; border-radius: 18px; background: #f5fbf1; }
.success-mark { display: grid; place-items: center; flex: 0 0 50px; width: 50px; height: 50px; border-radius: 50%; background: #78a95b; color: #fff; }
.success-mark .ui-icon { width: 30px; height: 30px; }
.confirmed-order-heading h1 { margin: 0 0 5px; color: #315121; font-size: 1.18rem; }
.confirmed-order-heading p { margin: 0; color: #6d8062; font-size: .76rem; }
.confirmed-order-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin-top: 14px; border: 1px solid #eadfd7; border-radius: 16px; background: #eadfd7; }
.confirmed-order-meta div { display: grid; gap: 5px; min-height: 70px; padding: 13px 15px; background: #fffaf6; }
.confirmed-order-meta span { color: #8b7d75; font-size: .7rem; }
.confirmed-order-meta strong { overflow: hidden; color: #432a20; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.confirmed-order-lines { margin-top: 18px; }
.confirmed-order-lines > h2 { margin: 0 2px 11px; color: #47291e; font-size: 1.05rem; }
.confirmed-order-line { direction: rtl; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 92px; margin-bottom: 10px; padding: 12px; border: 1px solid #eee7e2; border-radius: 16px; box-shadow: 0 6px 17px #59351f0a; }
.confirmed-row-number { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #f3e8df; color: #a05f3d; font-weight: 800; }
.confirmed-product { display: grid; gap: 11px; min-width: 0; text-align: right; }
.confirmed-product h3 { margin: 0; overflow: hidden; color: #25282b; font-size: .96rem; text-overflow: ellipsis; white-space: nowrap; }
.confirmed-line-values { display: flex; flex-wrap: wrap; gap: 9px 18px; color: #81756e; font-size: .7rem; }
.confirmed-line-values b { margin-right: 4px; color: #bd774f; font-size: .82rem; }
.confirmed-order-total { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 17px; border: 1px solid #edddcf; border-radius: 16px; background: #fff8f2; color: #5a4034; }
.confirmed-order-total strong { direction: rtl; color: #a9522f; font-size: 1.05rem; }
.confirmed-order-actions { position: fixed; z-index: 45; right: max(2px, calc((100vw - 480px) / 2 + 2px)); bottom: 0; left: max(2px, calc((100vw - 480px) / 2 + 2px)); padding: 10px 12px; border-top: 1px solid #eee2da; background: #fff; }
.confirmed-order-actions button, .confirmed-order-state button { width: 100%; min-height: 50px; border: 0; border-radius: 10px; background: #c8926c; color: #fff; font-weight: 700; }
.confirmed-order-state { display: grid; justify-items: center; gap: 12px; padding: 70px 18px; color: #756b66; text-align: center; }
.confirmed-order-state.error { margin-top: 18px; padding: 28px 18px; border: 1px solid #f0d4cc; border-radius: 16px; background: #fff5f2; color: #8b4532; }
.confirmed-order-state.error button { max-width: 220px; }
.confirmed-empty-lines { padding: 24px; border: 1px dashed #ddcec4; border-radius: 14px; color: #81756e; text-align: center; }
.loading-ring { width: 36px; height: 36px; border: 4px solid #eadfd7; border-top-color: #c8926c; border-radius: 50%; animation: confirmed-order-spin .8s linear infinite; }
.order-confirmation.error { background: #fff0ed; color: #934734; }

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

@media (max-width: 390px) {
    .confirmed-order-meta { grid-template-columns: 1fr; }
    .confirmed-order-meta div { min-height: 62px; }
    .confirmed-line-values { gap: 8px 12px; }
}


/* B2B customer order history */
.my-orders-page {
    min-height: calc(100dvh - 74px);
    padding: 14px 12px 26px;
    background: #fffaf7;
}

.my-orders-heading {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    padding: 21px 20px;
    border-radius: 20px;
    background: linear-gradient(135deg, #bd774f, #c8926c);
    color: #fff;
    text-align: right;
}

.my-orders-heading::after {
    position: absolute;
    top: -46px;
    left: -28px;
    width: 120px;
    height: 120px;
    border: 2px solid #ffffff1f;
    border-radius: 50%;
    content: "";
}

.my-orders-heading h1 {
    position: relative;
    z-index: 1;
    margin: 0 0 4px;
    color: #fff;
    font-size: 1.45rem;
    font-weight: 800;
}

.my-orders-heading p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #ffffffe0;
    font-size: .78rem;
}

.my-orders-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 2px 11px;
}

.my-orders-summary strong {
    color: #351d14;
    font-size: 1rem;
    font-weight: 800;
}

.my-orders-summary span {
    color: #7a6a62;
    font-size: .72rem;
}

.my-orders-list {
    display: grid;
    gap: 11px;
}

.my-order-card {
    direction: rtl;
    display: block;
    width: 100%;
    padding: 14px 15px;
    border: 1px solid #eadfd9;
    border-radius: 18px;
    background: #fffdfa;
    box-shadow: 0 7px 20px #6d3d2714;
    color: #35231b;
    text-align: right;
}

.my-order-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.my-order-number {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.my-order-number > div {
    min-width: 0;
}

.my-order-icon {
    flex: 0 0 38px;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid #eadfd9;
    border-radius: 11px;
    background: #fbf5f1;
    color: #b9784f;
}

.my-order-icon .ui-icon {
    width: 19px;
    height: 19px;
}

.my-order-label {
    display: block;
    margin-bottom: 1px;
    color: #786b65;
    font-size: .66rem;
    font-weight: 500;
}

.my-order-number strong {
    display: block;
    overflow: hidden;
    color: #351d14;
    font-size: 1.05rem;
    font-weight: 800;
    opacity: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.my-order-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border-radius: 999px;
    background: #f4e9e1;
    color: #9b5c3b;
    font-size: .66rem;
    white-space: nowrap;
}

.my-order-status::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.my-order-status.status-success {
    background: #eaf6ef;
    color: #347b5e;
}

.my-order-status.status-pending {
    background: #fff4e3;
    color: #9b611d;
}

.my-order-status.status-rejected {
    background: #fbeceb;
    color: #a54844;
}

.my-order-divider {
    height: 1px;
    margin: 12px 0 10px;
    background: #eadfd9;
}

.my-order-card-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 20px;
    align-items: end;
    gap: 10px;
}

.my-order-value {
    display: block;
    overflow: hidden;
    color: #4c342a;
    font-size: .75rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.my-order-price .my-order-value {
    color: #8f5133;
}

.my-order-card-arrow {
    display: grid;
    width: 20px;
    height: 30px;
    place-items: center;
    color: #b9784f;
    font-size: 1.35rem;
    line-height: 1;
}

.my-orders-empty {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 46px 18px;
    border: 1px dashed #ddcec4;
    border-radius: 16px;
    color: #81756e;
    text-align: center;
}

.my-orders-pager {
    display: grid;
    grid-template-columns: 1fr 42px 1fr;
    gap: 8px;
    margin-top: 17px;
}

.my-orders-pager button {
    min-height: 42px;
    border: 1px solid #eadfd9;
    border-radius: 11px;
    background: #fff;
    color: #704029;
    font-weight: 700;
}

.my-orders-pager button:disabled {
    opacity: .42;
}

.my-orders-pager span {
    display: grid;
    height: 42px;
    place-items: center;
    border-radius: 11px;
    background: #b9784f;
    color: #fff;
    font-size: .8rem;
    font-weight: 800;
}

@media (max-width: 360px) {
    .my-orders-page {
        padding-inline: 9px;
    }

    .my-order-card {
        padding-inline: 12px;
    }

    .my-order-card-bottom {
        gap: 6px;
    }

    .my-order-value {
        font-size: .7rem;
    }
}