@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@100..900&display=swap');

*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {all: unset; display: revert;}
*, *::before, *::after {box-sizing: border-box;}
html {-moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none;}
a, button {cursor: revert;}
ol, ul, menu, summary {list-style: none;}
img {max-inline-size: 100%; max-block-size: 100%;}
table {border-collapse: collapse;}
input, textarea {-webkit-user-select: auto;}
textarea {white-space: revert;}
/* Native feel on touch screens: no blue tap flash, no long-press menu / text selection on controls; a light press dim instead */
html {-webkit-tap-highlight-color: transparent;}
a, button, [role="button"], label, summary {-webkit-touch-callout: none;}
button, [role="button"], .cat-footer, .cat-nav-btn {-webkit-user-select: none; user-select: none;}
@media (hover: none) {
    a, button, [role="button"], summary {transition: opacity .12s ease;}
    a:active, button:active:not(:disabled), [role="button"]:active, summary:active {opacity: .6;}
}
meter {-webkit-appearance: revert; appearance: revert;}
:where(pre) {all: revert; box-sizing: border-box;}
::placeholder {color: unset;}
:where([hidden]) {display: none;}
[hidden] {display: none !important;}
button, input[type="submit"], input[type="button"] {text-align: center;}
:where([contenteditable]:not([contenteditable="false"])) {-moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto;}
:where([draggable="true"]) {-webkit-user-drag: element;}
:where(dialog:modal) {all: revert;box-sizing: border-box;}
::-webkit-details-marker {display: none;}


:root {
    --dark-gray: #333;
    --white: #fff;
    --light-gray: #fafafa;
    --pink: #DA7A8C;
}

html, body, form {height: 100%;}
body {background: #eee;font-family: "Noto Sans Hebrew", serif;direction: rtl;}

.carousel-container {position: relative; overflow: hidden; direction: rtl;}
.carousel {display: flex; will-change: transform; transition: transform 0.3s ease-in-out;touch-action: pan-y;}
.carousel-item {min-width: 100%; box-sizing: border-box;}
.carousel-controls { position: absolute; top: 20%;width: 100%;transform: translateY(-50%);pointer-events: none;}
.carousel-controls button {pointer-events: auto; width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,0.3); color: white; border: none; font-size: 24px; padding: 10px; cursor: pointer; border-radius: 50%; opacity: 0.3; transition: opacity 0.3s; position: absolute; top: 50%;transform: translateY(-50%);}
.carousel-controls button > span {font-size: 40px;position: relative;top: -4px;}
.carousel-controls .prev {left: 10px;}
.carousel-controls .next {right: 10px;}
.carousel-controls button:hover {opacity: 1;}
.carousel-controls button.hidden {display: none;}
.carousel-dots {text-align: center;margin-bottom: 20px;}
.carousel-dots span {display: inline-block; height: 12px; width: 12px; margin: 0 5px; background-color: #bbb; border-radius: 50%; cursor: pointer;}
.carousel-dots .active {background-color: #717171;}

.app {width: 420px; border: 5px solid var(--white); border-radius: 10px; background: #F0F1F3; height: 800px;}
header {background: var(--white); display: flex; align-items: center;padding: 20px;}
header .customer-info {display: flex; gap: 5px; align-items: center; font-size: 1rem; justify-content: space-between;}
header .customer-info .customer-name {font-weight: 700; color: var(--dark-gray);}
header .customer-info .customer-disconnected {font-weight: 300; text-decoration: underline; cursor: pointer;}
header .logo {flex: 1; text-align: left;}

.desktop-ui {display: flex; height: 100%; justify-content: center; align-items: center; margin: 0 auto;}
.item .machine-img {background: transparent;padding: 0 20px 20px;}
.item .machine-img > img {display: block; margin: 0 auto;max-width: 200px;}
.item .code {background: #F0F1F3; padding: 18px;}
.item .code-layout {display: flex; gap: 16px; flex-direction: column; width: 100%; justify-content: center;align-items: center;}
.item .code-layout .code-header {text-align: center;font-weight: 700;}
.item .code-layout .code-header > img {position: relative;top: 2px;}
.item .code-layout .code-number {background: var(--dark-gray); font-size: 1.25rem; border-radius: 30px; text-align: center; padding: 10px 20px;color: #fff;font-weight: 700;}
.item .code-layout .code-expired {border-bottom: 1px solid #D9D9D9; padding-bottom: 16px; width: 100%;text-align: center;}

.machine-info {background: var(--white); margin-top: 16px; justify-content: center; align-items: center; padding: 8px; border-radius: 8px; border: 1px solid #E6E6E6; display: flex; flex-direction: column; gap: 8px;}
.machine-info .machine-name {font-weight: 700;text-align: center;}
.machine-info .machine-name > span {color: var(--pink)}
.machine-info .machine-serial > img {position: relative;top: 2px;}

.alert-error {background: #ffdfdf; text-align: center; border: 1px solid var(--white); line-height: 24px; margin: 20px; border-radius: 8px; padding: 20px}
.error {color: #DF2C26 !important;}

.login-wrap {display: flex; justify-content: flex-start; padding-top: max(56px, 16vh); height: 100%; flex-direction: column; align-items: center; background: url('images/images.General/cover_background.png') no-repeat bottom; background-size: contain;}
.login-wrap .logo {display: flex; justify-content: center; align-items: center; margin-bottom: 24px;}
.login-wrap .logo img {display: block; width: 220px; max-width: 70vw; height: auto;}
.login-box {display: flex; flex-direction: column; gap: 16px; text-align: center; justify-content: center; align-items: center; color: var(--dark-gray);}
.login-box h3 {font-weight: 700;}
.login-box input[type="text"]:not(.lb-input) {border-radius: 50px; background: #fff; border: 1px solid #E6E6E6; height: 50px; margin: 0 20px; width: 250px; padding: 0 16px;}
.login-box input[type="text"]:not(.lb-input):focus {border: 1px solid #6d6d6d}
.login-box .btn {background: var(--dark-gray); font-weight: 700; color: #fff; display: inline-block; border-radius: 999px; height: 50px; width: 170px;cursor: pointer;border: none;}
.login-box .btn.btn-link {background: none; color: var(--dark-gray); font-weight: 500; font-size: 13px; height: auto; width: auto; padding: 8px 4px; border-radius: 0; text-decoration: underline; text-underline-offset: 3px}
.login-box .btn.btn-link:disabled, .login-box .btn.btn-link[disabled] {color: #aaa; text-decoration: none; cursor: default}
.login-box .lb-field {width: 280px; margin: 0;}

.otp-input-wrap {display: flex; gap: 10px; justify-content: center;direction: ltr;}
.otp-input {width: 50px !important; height: 50px; background: #fff; text-align: center;font-size: 20px; direction: ltr; border: 1px solid #ccc; border-radius: 50%;margin: 0 !important}



#btnVerifyOtp.disabled {
    background-color: #ccc !important;
    cursor: not-allowed;
    pointer-events: none;
}

.otp-loader{position:fixed;inset:0;background:rgba(255,255,255,.85);display:none;align-items:center;justify-content:center;z-index:9999;flex-direction:column}
.otp-loader .spinner{width:48px;height:48px;border:4px solid #cfcfcf;border-top-color:#333;border-radius:50%;animation:spin 1s linear infinite}
.otp-loader .loader-text{margin-top:12px;font-size:14px;color:#333}
@keyframes spin{to{transform:rotate(360deg)}}

@media screen and (max-width: 600px) {
body {background: #F0F1F3}
.desktop-ui {display: block;justify-content: unset;align-items: inherit;margin: unset;}
.app {width: 100%;border: none;border-radius: inherit;background: none; height: 100%; }

}


.menu-toggle {
    background: none;
    border: none;
    font-size: 28px;
    color: #333;
    cursor: pointer;
    margin-left: 10px;
}


/* Phosphor Icons - MIT license - https://phosphoricons.com/ */
@font-face {
    font-family: "Phosphor";
    src: url("fonts/phosphor/Phosphor.woff2") format("woff2"),
         url("fonts/phosphor/Phosphor.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
.ph {
    font-family: "Phosphor" !important;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    speak: never;
}
@font-face {
    font-family: "Phosphor-Fill";
    src: url("fonts/phosphor/Phosphor-Fill.woff2") format("woff2"),
         url("fonts/phosphor/Phosphor-Fill.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
.ph-fill {
    font-family: "Phosphor-Fill" !important;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    speak: never;
}
.ph-fill.ph-heart:before { content: "\e2a8"; }
.ph-fill.ph-shopping-cart:before { content: "\e41e"; }
.ph-fill.ph-bell:before { content: "\e0ce"; }
.ph-fill.ph-star:before { content: "\e46a"; }
.ph.ph-star:before { content: "\e46a"; }
.ph.ph-dots-three:before { content: "\e1fe"; }
.ph.ph-exclamation-mark:before { content: "\ee44"; }
.ph.ph-smiley:before { content: "\e436"; }

.ph.ph-bell:before { content: "\e0ce"; }
.ph.ph-caret-left:before { content: "\e138"; }
.ph.ph-caret-right:before { content: "\e13a"; }
.ph.ph-chat-circle:before { content: "\e168"; }
.ph.ph-chats:before { content: "\e17c"; }
.ph.ph-check:before { content: "\e182"; }
.ph.ph-copy:before { content: "\e1ca"; }
.ph.ph-clock:before { content: "\e19a"; }
.ph.ph-check-circle:before { content: "\e184"; }
.ph.ph-confetti:before { content: "\e81a"; }
.ph.ph-desktop:before { content: "\e560"; }
.ph.ph-file-pdf:before { content: "\e702"; }
.ph.ph-funnel:before { content: "\e266"; }
.ph.ph-navigation-arrow:before { content: "\eade"; }
.ph.ph-package:before { content: "\e390"; }
.ph.ph-smiley-x-eyes:before { content: "\e442"; }
.ph.ph-trash:before { content: "\e4a6"; }
.ph.ph-warning:before { content: "\e4e0"; }
.ph.ph-x:before { content: "\e4f6"; }
.ph.ph-x-circle:before { content: "\e4f8"; }
.ph.ph-squares-four:before { content: "\e464"; }
.ph.ph-rows:before { content: "\e5a2"; }
.ph.ph-device-mobile:before { content: "\e1e0"; }
.ph.ph-envelope:before { content: "\e214"; }
.ph.ph-facebook-logo:before { content: "\e226"; }
.ph.ph-gear:before { content: "\e270"; }
.ph.ph-graduation-cap:before { content: "\e62c"; }
.ph.ph-headset:before { content: "\e584"; }
.ph.ph-heart:before { content: "\e2a8"; }
.ph.ph-house:before { content: "\e2c2"; }
.ph.ph-identification-card:before { content: "\e2c8"; }
.ph.ph-instagram-logo:before { content: "\e2d0"; }
.ph.ph-list:before { content: "\e2f0"; }
.ph.ph-magnifying-glass:before { content: "\e30c"; }
.ph.ph-map-pin:before { content: "\e316"; }
.ph.ph-megaphone:before { content: "\e324"; }
.ph.ph-minus:before { content: "\e32a"; }
.ph.ph-paper-plane-right:before { content: "\e396"; }
.ph.ph-pencil-simple:before { content: "\e3b4"; }
.ph.ph-phone:before { content: "\e3b8"; }
.ph.ph-plus:before { content: "\e3d4"; }
.ph.ph-shopping-cart:before { content: "\e41e"; }
.ph.ph-lock:before { content: "\e2fa"; }
.ph.ph-sign-out:before { content: "\e42a"; }
.ph.ph-tag:before { content: "\e478"; }
.ph.ph-tiktok-logo:before { content: "\eaf2"; }
.ph.ph-user:before { content: "\e4c2"; }
.ph.ph-whatsapp-logo:before { content: "\e5d0"; }
.ph.ph-youtube-logo:before { content: "\e4fc"; }


.cat-header{background:#fff;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;padding:14px 16px;flex:0 0 auto;direction:rtl}
.cat-header{position:relative;z-index:10;transition:box-shadow .2s ease}
.cat-header.is-scrolled{box-shadow:0 4px 12px rgba(0,0,0,.09)}
@media (prefers-reduced-motion:reduce){.cat-header{transition:none}}
.cat-header-left{min-width:0;display:flex;align-items:center;gap:10px;justify-content:flex-end}
.cat-header-right{min-width:0;display:flex;align-items:center;justify-content:flex-start}
.cat-avatar-btn,.cat-bell-btn,.cat-menu-toggle{background:none;border:0;padding:0;cursor:pointer;color:var(--dark-gray);width:30px;height:30px;display:flex;align-items:center;justify-content:center;position:relative}
.cat-avatar-btn svg{width:30px;height:30px;display:block}
.cat-avatar-photo{width:30px;height:30px;border-radius:50%;object-fit:cover;display:block}
.cat-avatar-btn{width:38px;height:38px;flex-shrink:0;border:3px solid #fff;border-radius:50%;background:#fff;box-shadow:0 3px 9px rgba(0,0,0,.16)}
.cat-avatar-btn svg,.cat-avatar-btn .cat-avatar-photo{width:100%;height:100%;border-radius:50%}
.cat-avatar-btn > span{width:100%;height:100%;display:block}
.cat-bell-btn .ph,.cat-menu-toggle .ph{font-size:26px}
.has-unread-notifications .ph-bell{position:relative}
.has-unread-notifications .ph-bell::after{content:"";position:absolute;top:0;left:-2px;width:9px;height:9px;border-radius:50%;background:#e32636;border:2px solid #fff;box-sizing:content-box;pointer-events:none}
.cat-logo{display:flex;align-items:center;justify-content:center;justify-self:center;width:116px;height:40px;line-height:0}
.cat-logo img{width:100%;height:100%;object-fit:contain;display:block}

.pm-menu{position:fixed;top:0;right:-88%;width:88%;max-width:360px;height:100%;background:#fff;color:var(--dark-gray);z-index:1001;transition:right .3s ease;box-shadow:-8px 0 24px rgba(0,0,0,.18);overflow-y:auto;padding:24px 20px}
.pm-menu.open{right:0}
.pm-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;display:none}
.pm-backdrop.open{display:block}
.pm-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;text-decoration:none;color:inherit;cursor:pointer}
.pm-avatar{width:52px;height:52px;flex:0 0 auto}
.pm-avatar svg{width:100%;height:100%;display:block}
.pm-avatar-photo{width:52px;height:52px;border-radius:50%;object-fit:cover;display:block}
.pm-name{font-weight:700;font-size:16px;color:var(--dark-gray)}
.pm-role{font-size:12px;color:#8a8a8a;margin-top:2px}
.pm-links{display:flex;flex-direction:column;gap:4px}
.pm-links li a{display:flex;align-items:center;gap:12px;padding:12px 10px;border-radius:12px;color:var(--dark-gray);font-size:15px;font-weight:500;position:relative}
.pm-ico{width:22px;height:22px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:19px;color:#8a8a8a}
.pm-active > a{background:#f4eef0;font-weight:700}
.pm-active .pm-ico{color:var(--pink)}
.pm-bizcard a{justify-content:flex-start}
.pm-ribbon{margin-inline-start:auto;background:var(--pink);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap}
.pm-divider{height:1px;background:#eee;margin:14px 0}
.pm-links-bottom a{color:#8a8a8a}


.catalog-app{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden}
.catalog-body{flex:1 1 auto;overflow-y:auto;padding:0 16px 16px;-webkit-overflow-scrolling:touch}
.cat-search-box{display:flex;align-items:center; margin-top: 16px; background:#fff;border-radius:999px;padding:4px 6px 4px 6px;box-shadow:0 1px 4px rgba(0,0,0,.06);margin-bottom:16px}
.cat-search-box input{flex:1;border:0;background:none;padding:10px 14px 10px 6px;font-size:14px;font-family:inherit;color:var(--dark-gray)}
.cat-search-btn{background:var(--pink);border:0;border-radius:50%;width:38px;height:38px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;cursor:pointer}
.cat-search-btn .ph{font-size:18px;color:#fff}
/* search boxes: clear (X) button, shown once something is typed (search-clear.js) */
.cat-search-box input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
.search-clear-btn{display:none;flex:0 0 auto;align-items:center;justify-content:center;width:32px;height:32px;margin-inline-end:6px;padding:0;border:0;border-radius:50%;background:#e6e6eb;color:#111;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cat-search-box .search-clear-btn{-webkit-appearance:none;appearance:none;color:#111}
.cat-search-box .search-clear-btn .ph{font-size:16px;font-weight:bold;color:#111}
.search-clear-btn:active{background:#dcdce3}
.search-clear-btn:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.cat-search-box.has-value .search-clear-btn{display:inline-flex}
.cat-header-search .search-clear-btn{width:28px;height:28px;margin-inline-end:4px;background:#e2e2e8}

.cat-results-heading{font-size:16px;font-weight:700;color:var(--dark-gray);margin-bottom:12px}
.cat-results-heading b{color:var(--pink)}

.cat-heading-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.cat-heading-row .cat-results-heading{margin-bottom:0}
.cat-count{font-size:12px;color:#9a9a9a;margin:-4px 0 10px}
.cat-filter-btn{flex:0 0 auto;display:flex;align-items:center;gap:6px;background:#fff;border:0;border-radius:999px;padding:8px 14px;font-size:12px;color:var(--dark-gray);box-shadow:0 1px 3px rgba(0,0,0,.06);cursor:pointer}
.cat-filter-btn .ph{font-size:14px;color:var(--pink)}

.filter-overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:200;display:none;align-items:flex-end}
.filter-overlay.open{display:flex}
.filter-sheet{background:#fff;border-radius:20px 20px 0 0;width:100%;padding:18px 18px 22px;transform:translateY(100%);transition:transform .3s ease;max-height:82%;overflow-y:auto}
.filter-overlay.open .filter-sheet{transform:translateY(0)}

.filter-sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.filter-close-btn{background:#f4f4f4;border:0;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#888}
.filter-sheet-title{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:700;color:var(--dark-gray)}
.filter-sheet-title .ph{color:var(--pink)}
.filter-reset-btn{background:#f4f4f4;border:0;border-radius:999px;padding:7px 14px;font-size:12.5px;color:var(--dark-gray);cursor:pointer}

.filter-section{margin-bottom:24px}
.filter-section-title{display:block;font-size:13.5px;font-weight:700;color:var(--dark-gray);margin-bottom:10px}
.filter-price-row .filter-section-title{margin-bottom:0}
.filter-chips{display:flex;gap:8px}
.filter-chip{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:44px;border:1px solid #e2e2e2;border-radius:999px;background:#fff;color:var(--dark-gray);font-size:13px;font-weight:500;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.filter-chip .ph{display:none;font-size:14px}
.filter-chip.active{background:var(--dark-gray);border-color:var(--dark-gray);color:#fff;font-weight:700}
.filter-chip.active .ph{display:inline-block}

.filter-price-row{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--dark-gray);font-weight:700}
#filterPriceLabel{color:#888;font-weight:400}

.filter-range{position:relative;height:26px;margin-top:16px}
.filter-range-track{position:absolute;top:50%;left:0;right:0;height:4px;background:#eee;border-radius:2px;transform:translateY(-50%)}
.filter-range-fill{position:absolute;top:50%;height:4px;background:var(--pink);border-radius:2px;transform:translateY(-50%)}
.filter-range-input{position:absolute;top:0;left:0;width:100%;height:26px;margin:0;background:none;direction:rtl;-webkit-appearance:none;appearance:none;pointer-events:none}
.filter-range-input.on-top{z-index:2}
.filter-range-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--pink);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.filter-range-input::-moz-range-thumb{pointer-events:auto;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--pink);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.filter-range-input::-webkit-slider-runnable-track{background:transparent}
.filter-range-input::-moz-range-track{background:transparent}

.filter-apply-btn{width:100%;background:var(--dark-gray);color:#fff;border:0;border-radius:999px;padding:14px;font-size:14px;font-weight:700;cursor:pointer;margin-top:4px}

.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cat-card{position:relative;background:#fff;border-radius:8px;overflow:hidden;padding:10px;display:flex;flex-direction:column;box-shadow:0 1px 4px rgba(0,0,0,.06);transition:opacity .25s ease, transform .25s ease}
.cat-card.cat-hidden{display:none}
.cat-card.cat-just-added{animation:catPop .35s ease}
@keyframes catPop{0%{transform:scale(1)}40%{transform:scale(1.03)}100%{transform:scale(1)}}

.cat-fav-btn{position:absolute;top:6px;right:6px;z-index:2;background:none;border:0;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.cat-fav-btn i{font-size:22px;color:#a8a8a8;filter:drop-shadow(0 0 2px rgba(255,255,255,.9))}
.cat-fav-btn.active i{color:var(--pink)}

.cat-toast{position:absolute;top:8px;left:8px;right:auto;z-index:2;background:var(--pink);color:#fff;font-size:10px;font-weight:700;border-radius:999px;padding:4px 10px;opacity:0;pointer-events:none;transition:opacity .25s ease}
.cat-toast.show{opacity:1}

.cat-img-wrap{position:relative;cursor:pointer;background:var(--light-gray);overflow:hidden;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;margin:-10px -10px 10px}
.cat-quick-btn{position:absolute;bottom:8px;right:8px;z-index:1;width:46px;height:46px;border-radius:50%;background:#fff;border:0;display:flex;align-items:center;justify-content:center;color:var(--dark-gray);box-shadow:0 1px 4px rgba(0,0,0,.15);cursor:pointer}
.cat-quick-btn .ph{font-size:20px}
.cat-discount-badge{position:absolute;top:8px;left:8px;z-index:1;background:var(--pink);color:#fff;font-size:11px;font-weight:700;border-radius:2px;padding:3px 7px;line-height:1.3}
.cat-discount-badge:empty{display:none}
.cat-card.in-cart::after{content:"";position:absolute;inset:0;z-index:3;border:1.5px solid var(--pink);border-radius:inherit;pointer-events:none}
.cat-card.in-cart .cat-quick-btn{background:var(--pink);color:#fff}
.cat-img-wrap img{width:100%;height:100%;object-fit:contain}

.cat-name{font-size:13.5px;font-weight:500;color:var(--dark-gray);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em;margin-bottom:4px}
.cat-desc{font-size:11px;color:#999;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:6px}
.cat-price-row{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.cat-price{font-size:15px;font-weight:800;color:var(--dark-gray)}
.cat-price-quote{font-size:12px;font-weight:700;color:var(--pink)}
.cat-strike{font-size:11.5px;color:#b3b3b3;text-decoration:line-through}
.cat-info-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:4px}
.cat-info-row .cat-name{flex:1 1 auto;min-width:0;min-height:0;margin-bottom:0}
.cat-info-row .cat-price-row{flex:0 0 auto;flex-direction:column;align-items:flex-end;gap:0;margin-bottom:0;white-space:nowrap}
.cat-info-row + .cat-desc{margin-top:2px}


.cat-stepper{display:flex;align-items:center;justify-content:space-between;background:#fdf1f3;border:1.5px solid var(--pink);border-radius:999px;padding:4px}
.cat-stepper button{width:26px;height:26px;border-radius:50%;border:0;background:#fff;color:var(--pink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.cat-stepper button .ph{font-size:13px}
.cat-stepper .cat-qty{font-weight:700;font-size:13px;color:var(--dark-gray)}

.cat-loading{display:flex;align-items:center;justify-content:center;padding:18px 0}
.cat-spinner{width:30px;height:30px;border:3px solid #e6c6cc;border-top-color:var(--pink);border-radius:50%;animation:catSpin 0.8s linear infinite}
@keyframes catSpin{to{transform:rotate(360deg)}}

.cat-empty{text-align:center;color:#999;padding:40px 10px;font-size:13px}

.cat-subheader{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin:0 0 12px}
.cat-subheader-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%}
.cat-back-link{display:flex;width:100%;align-items:center;gap:4px;height:44px;line-height:1;margin-top:0;margin-bottom:10px;border-bottom:1px solid #e2e2e2;color:var(--pink);font-size:13px;font-weight:700;text-decoration:none}
.cat-back-link:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:4px}
.page-back-link{margin-bottom:10px}
.pd-body > .page-back-link{width:auto;margin:0 16px 10px}
.profile-body > .page-back-link{width:auto;margin:0 20px}
.page-back-link + .pf-wrap{padding-top:10px}
.devices-body > .page-back-link:first-child,.contact-body > .page-back-link:first-child{margin-top:-16px}
.cat-back-link .ph{font-size:15px}
.cat-subheader-title{font-size:16px;font-weight:400;color:var(--dark-gray)}
.cat-subheader-title b{font-weight:800}

.cat-empty-block{display:flex;flex-direction:column;align-items:center;text-align:center;padding:50px 20px 20px}
.cat-empty-icon{width:120px;height:120px;border-radius:50%;background:#f6eef1;display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.cat-empty-icon i{font-size:52px}
.cat-empty-icon-fav i{color:var(--pink)}
.cat-empty-icon-search i{color:#e0435c}
.cat-empty-title{font-size:15px;font-weight:700;color:var(--dark-gray);margin-bottom:10px}
.cat-empty-text{font-size:12.5px;color:#999;line-height:1.7;max-width:280px;margin-bottom:20px}
.cat-empty-cta{background:var(--dark-gray);color:#fff;border:0;border-radius:999px;padding:13px 32px;font-size:13.5px;font-weight:700;cursor:pointer;display:inline-block;text-decoration:none}

.cat-footer{flex:0 0 auto;display:flex;background:#fff;border-top:1px solid #eee;padding:8px 6px calc(env(safe-area-inset-bottom,0px) + 8px)}
.has-bottom-nav > .catalog-body,.has-bottom-nav > .dashboard-body,.has-bottom-nav > .profile-body,.has-bottom-nav > .devices-body,.has-bottom-nav > .contact-body,.has-bottom-nav > .tr-body,.pd-app > .pd-body{min-height:0}
/* With the bottom nav under it, the bar above it no longer touches the screen edge */
.has-bottom-nav > .cart-bar{padding-bottom:16px}
.marketing-app.has-bottom-nav > .mk-body{padding-bottom:16px}
@media screen and (max-width:600px){
    html:has(.has-bottom-nav),html:has(.has-bottom-nav) body,html:has(.pd-app),html:has(.pd-app) body{overflow:hidden}
    /* Pinned to the visible screen: survives the address bar resizing and back/forward page restores */
    .desktop-ui > .app.has-bottom-nav,.desktop-ui > .app.pd-app{position:fixed;inset:0;height:auto}
    .has-bottom-nav > .cat-footer{padding-left:max(6px,env(safe-area-inset-left,0px));padding-right:max(6px,env(safe-area-inset-right,0px))}
}
@media screen and (min-width:601px){
    .desktop-ui > .app.has-bottom-nav{height:min(800px,100vh);height:min(800px,100dvh)}
}
.cat-nav-btn{flex:1;min-width:0;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;color:#b3b3b3;font-size:10.5px;padding:6px 2px;cursor:pointer;position:relative}
.cat-nav-btn .ph{font-size:22px}
.cat-nav-btn.active{color:#111;font-weight:700}
.cat-nav-btn.has-items{color:#111}
.cat-cart-badge,.cat-fav-badge{position:absolute;top:0;left:50%;margin-left:-20px;background:#e23a4e;color:#fff;font-size:10px;line-height:16px;font-weight:700;font-variant-numeric:tabular-nums;border-radius:999px;min-width:16px;height:16px;display:block;text-align:center;padding:0 4px;box-sizing:border-box}
.cat-fav-badge{background:#111}
.nav-badge-pop{animation:navBadgePop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes navBadgePop{0%{transform:scale(1)}35%{transform:scale(1.7)}100%{transform:scale(1)}}

@media (min-width:561px){ .app.catalog-app{height:800px} }
@media (max-width:560px){ .app.catalog-app{height:100%} .cat-grid{gap:10px} }


.profile-app{display:flex;flex-direction:column;height:100%;overflow:hidden}
.profile-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch}

.pf-wrap{padding:20px 20px 32px;direction:rtl}

.pf-avatar-row{display:flex;justify-content:center;margin-bottom:24px}
.pf-avatar{position:relative;width:120px;height:120px}
.pf-avatar svg{width:100%;height:100%;display:block;border-radius:50%}
.pf-avatar-photo{width:120px;height:120px;border-radius:50%;object-fit:cover;display:block}
.pf-avatar-edit{position:absolute;bottom:2px;left:2px;width:32px;height:32px;border-radius:50%;background:var(--pink);border:3px solid #fff;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer}
.pf-avatar-edit .ph{font-size:15px}

.pf-section-title{font-size:17px;color:var(--dark-gray);font-weight:400;margin:0 0 16px}
.pf-section-title b{font-weight:800}


.pf-consent{display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:4px 4px 20px}
.pf-consent-text{font-size:12.5px;color:#6f6f6f;line-height:1.5}
.pf-consent-mark{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--pink);display:flex;align-items:center;justify-content:center;color:#fff}
.pf-consent-mark .ph{font-size:12px}

.pf-note{font-size:11px;color:#bbb;margin-top:-8px}
.pf-email-field{margin-bottom:6px}
.pf-email-field .lb-input{text-align:left;padding-left:16px}
.pf-email-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 4px 18px;min-height:30px}
.pf-email-row.is-empty{min-height:0;margin-bottom:12px}
.pf-email-hint[hidden],.pf-email-saved[hidden]{display:none}
.pf-email-saved{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:20px;background:#e6f4ea;color:#1f8a4c;font-size:12.5px;font-weight:700;animation:pfSavedIn .25s ease-out}
@keyframes pfSavedIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.pf-email-hint{font-size:11.5px;color:#9a9a9a}
.pf-email-save{display:none;margin-inline-start:auto;border:0;border-radius:50px;background:var(--pink);color:#fff;font-family:inherit;font-size:13px;font-weight:700;padding:7px 20px;cursor:pointer}
.pf-email-save:disabled{opacity:.7;cursor:default}
.pf-email-save.is-visible{display:inline-block}
.pf-note a{color:var(--pink);font-weight:700;text-decoration:underline;cursor:pointer}

@media (min-width:561px){ .app.profile-app{height:800px} }
@media (max-width:560px){ .app.profile-app{height:100%} }

.crop-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:2000;display:none;align-items:center;justify-content:center;padding:20px}
.crop-modal.open{display:flex}
.crop-modal-inner{background:#fff;border-radius:16px;padding:18px;width:100%;max-width:360px;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.crop-modal-inner h3{font-size:15px;font-weight:700;color:var(--dark-gray);margin:0 0 12px;text-align:center}
.crop-canvas-wrap{width:100%;height:280px;background:#222;border-radius:10px;overflow:hidden}
.crop-canvas-wrap img{display:block;max-width:100%}
.crop-actions{display:flex;gap:10px;margin-top:16px}
.crop-btn{flex:1;border:0;border-radius:999px;padding:11px;font-size:13.5px;font-weight:700;cursor:pointer}
.crop-btn-cancel{background:#f0f0f0;color:#666}
.crop-btn-save{background:var(--pink);color:#fff}


.devices-app{display:flex;flex-direction:column;height:100%;overflow:hidden}
.devices-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px}

@media (min-width:561px){ .app.devices-app{height:800px} }
@media (max-width:560px){ .app.devices-app{height:100%} }


.contact-app{display:flex;flex-direction:column;height:100%;overflow:hidden}
.contact-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px}

.ct-title{font-size:16px;font-weight:400;color:var(--dark-gray);margin:2px 0 16px}
.ct-title b{font-weight:800}

.ct-row{display:flex;align-items:center;gap:10px;background:#fff;border-radius:18px;padding:14px 16px;margin-bottom:12px;box-shadow:0 1px 4px rgba(0,0,0,.06);text-decoration:none;color:inherit;cursor:pointer;border:0;width:100%;font:inherit;text-align:right}
.ct-ico{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}
.ct-ico .ph{font-size:20px}
.ct-ico-fb{background:#3b5998}
.ct-ico-wa{background:#25d366}
.ct-ico-ig{background:linear-gradient(45deg,#f9ce34,#ee2a7b 45%,#6228d7 100%)}
.ct-ico-nav{background:#2ea3f2}
.ct-ico-email{background:#2e2e2e}
.ct-ico-phone{background:#20b2aa}
.ct-ico-yt{background:#ff0000}
.ct-ico-tt{background:#000}
.ct-label{flex:1;text-align:center;font-size:14px;font-weight:500;color:var(--dark-gray)}
.ct-chevron{flex:0 0 auto;font-size:16px;color:#c9c9c9;display:flex}

.ct-divider{display:flex;align-items:center;gap:12px;margin:22px 0 18px}
.ct-divider .line{flex:1;height:1px;background:#e2e2e2}
.ct-divider span{font-size:12px;color:#9a9a9a;white-space:nowrap}


.ct-msg{display:block;text-align:center;font-size:13px;margin:14px 0 0}

.ct-send-row{display:flex;justify-content:center;margin-top:20px}
.ct-send-btn{width:56px;height:56px;border-radius:50%;background:#2b2b2b;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.2);color:#fff}
.ct-send-btn .ph{font-size:22px;transform:scaleX(-1)}

@media (min-width:561px){ .app.contact-app{height:800px} }
@media (max-width:560px){ .app.contact-app{height:100%} }


.splash-wrap .splash-logo{opacity:0;animation:splashIn .7s ease-out .1s forwards}
.splash-wrap .splash-spinner{margin-top:32px;opacity:0;animation:splashIn .5s ease-out .6s forwards}
@keyframes splashIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.splash-spinner{position:relative;width:44px;height:44px}
.splash-spinner .dot{position:absolute;top:0;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#ab9a63;transform-origin:3px 22px;animation:splashFade 1s linear infinite}
.splash-spinner .dot:nth-child(1){transform:rotate(0deg);animation-delay:-0.875s}
.splash-spinner .dot:nth-child(2){transform:rotate(45deg);animation-delay:-0.75s}
.splash-spinner .dot:nth-child(3){transform:rotate(90deg);animation-delay:-0.625s}
.splash-spinner .dot:nth-child(4){transform:rotate(135deg);animation-delay:-0.5s}
.splash-spinner .dot:nth-child(5){transform:rotate(180deg);animation-delay:-0.375s}
.splash-spinner .dot:nth-child(6){transform:rotate(225deg);animation-delay:-0.25s}
.splash-spinner .dot:nth-child(7){transform:rotate(270deg);animation-delay:-0.125s}
.splash-spinner .dot:nth-child(8){transform:rotate(315deg);animation-delay:0s}
@keyframes splashFade{0%{opacity:1}100%{opacity:.15}}


.dashboard-app{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden}
.dashboard-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 16px 16px}

.dash-greeting{padding:16px 0 0px}
.dash-greeting h1{font-size:19px;font-weight:400;color:var(--dark-gray);margin:0 0 4px}
.dash-greeting h1 b{font-weight:800}
.dash-greeting p{font-size:12.5px;color:#9a9a9a}

.dash-tiles{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(158px,auto) 84px minmax(158px,auto);grid-template-areas:"deals devices" "store devices" "store support";gap:12px;margin:16px 0 20px}
.dash-tile{position:relative;display:flex;flex-direction:column;overflow:hidden;border:2px solid #fff;border-radius:22px;box-shadow:0 6px 18px rgba(0,0,0,.07);padding:14px 14px 0;text-decoration:none;color:var(--dark-gray);min-width:0}
.dash-tile-kicker{font-size:12.5px;color:#5c5c5c;line-height:1.3}
.dash-tile-title{font-size:19px;font-weight:800;color:var(--dark-gray);line-height:1.2}
.dash-tile-img{display:block;width:calc(100% + 28px);max-width:none;max-inline-size:none;margin:6px -14px 0;flex:1 1 auto;min-height:0;object-fit:contain;object-position:center bottom}

.dash-tile-deals{grid-area:deals;background:#FAEEE7}
.dash-tile-store{grid-area:store;background:#E6E9ED}
.dash-tile-devices{grid-area:devices;background:#C8D7DC}
.dash-tile-devices .dash-tile-img{object-fit:cover;object-position:center top}

.dash-tile-support{grid-area:support;background:linear-gradient(180deg,#EBD5DA 0%,#F0F0F2 100%);padding-bottom:12px}
.dash-tile-support .dash-tile-kicker,.dash-tile-support .dash-tile-title,.dash-tile-support .dash-tile-chip{position:relative;z-index:1}
.dash-tile-support .dash-tile-img{position:absolute;left:0;bottom:0;width:auto;height:92%;margin:0}
.dash-tile-chip{align-self:flex-start;flex-shrink:0;margin-top:auto;width:44px;height:44px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--dark-gray);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.dash-tile-chip .ph{font-size:20px;color:var(--pink)}

.dash-tile-img{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%);mask-image:linear-gradient(to bottom,transparent 0,#000 16%)}
.dash-tile-support .dash-tile-img{-webkit-mask-image:linear-gradient(to left,transparent 0,#000 30%);mask-image:linear-gradient(to left,transparent 0,#000 30%)}

.dash-section-head{display:flex;align-items:center;justify-content:space-between;margin:22px 0 12px}
.dash-section-head h2{font-size:15px;font-weight:700;color:var(--dark-gray)}
.dash-arrows{display:flex;gap:8px}
.dash-all-link{display:flex;align-items:center;gap:2px;font-size:15px;font-weight:700;color:var(--pink);text-decoration:none;cursor:pointer}
.dash-all-link .ph{font-size:14px}
.dash-arrow{width:28px;height:28px;border-radius:50%;border:1px solid #e6e6e6;background:#fff;color:#9a9a9a;display:flex;align-items:center;justify-content:center;cursor:pointer}
.dash-arrow .ph{font-size:13px}

.dash-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.dash-row::-webkit-scrollbar{display:none}
.dash-product-card{flex:0 0 auto;width:150px;scroll-snap-align:start}

.dash-cat-card{flex:0 0 auto;width:100px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:inherit;text-align:center}
.dash-cat-ico{width:78px;height:78px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;background:#dde5ea;color:#4a6070;border:3px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.dash-cat-photo{overflow:hidden;background:#fff}
.dash-cat-photo img{width:100%;height:100%;object-fit:cover;display:block}
.dash-cat-card:nth-child(4n+2) .dash-cat-ico{background:#f7e6d6;color:#8a5a2b}
.dash-cat-card:nth-child(4n+3) .dash-cat-ico{background:#dcece2;color:#3f7a58}
.dash-cat-card:nth-child(4n+4) .dash-cat-ico{background:#f6dde3;color:var(--pink)}
.dash-cat-name{font-size:11.5px;color:var(--dark-gray);line-height:1.3}
.dash-cat-row{gap:4px;padding:6px 4px 14px}
.dashboard-body .dash-row,.dashboard-body .skel-row{margin-left:-16px;padding-left:0}
.devices-body .carousel-container{margin-left:-16px}


.dash-banner{display:block;position:relative;margin:18px 0;border-radius:16px;padding:22px 18px;background:linear-gradient(135deg,#555 0%,#2c2c2c 100%);text-decoration:none;min-height:90px}
.dash-banner-title{display:block;color:#fff;font-size:16px;font-weight:700;margin-bottom:8px}
.dash-banner-cta{display:inline-flex;align-items:center;gap:6px;color:#fff;font-size:12.5px;background:rgba(255,255,255,.18);border-radius:999px;padding:5px 12px}
.dash-banner-tech{display:flex;align-items:center;justify-content:flex-end;min-height:150px;padding:20px 16px;overflow:hidden;background:#403732 url('Images/Images.Home/technology-faces-banner.png') center center / cover no-repeat;border:1px solid rgba(255,255,255,.65);box-shadow:0 5px 16px rgba(55,39,32,.12)}
.dash-banner-copy{position:relative;width:42%;text-align:right;transform:translateX(-10px)}
.dash-banner-tech .dash-banner-title{font-size:clamp(21px,5vw,28px);line-height:1.15;font-weight:800;margin-bottom:14px;text-shadow:0 1px 8px rgba(0,0,0,.25)}
.dash-banner-tech .dash-banner-cta{gap:8px;padding:0;background:none;font-size:12px;font-weight:700}
.dash-banner-tech .dash-banner-cta .ph{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--pink);font-size:19px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.dash-banner-tech:focus-visible{outline:3px solid var(--pink);outline-offset:3px}

.dash-best-rating{font-size:11px;color:#e0a53f;letter-spacing:1px}
.dash-best-rating span{color:#9a9a9a;margin-inline-start:4px;letter-spacing:normal}
.cat-recommend-count{font-size:11px;color:#9a9a9a}
.dash-best-avatars{display:flex;align-items:center}
.dash-avatar{display:block;flex:0 0 auto;width:28px;height:28px;object-fit:cover;object-position:center;border-radius:50%;background:#e0c9ce;border:2px solid #fff;margin-inline-start:-8px}
.dash-best-avatars .dash-avatar:first-child{margin-inline-start:0}
.dash-avatar-more{margin-inline-start:6px;font-size:10.5px;color:#9a9a9a}
.cat-recommend{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:6px;padding-bottom:4px}

.dash-faq{margin-top:4px}
.dash-faq-item{background:#fff;border-radius:14px;box-shadow:0 1px 4px rgba(0,0,0,.06);margin-bottom:10px;overflow:hidden}
.dash-faq-q{width:100%;display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;font-size:13px;font-weight:500;color:var(--dark-gray);text-align:right}
.dash-faq-q .ph{font-size:16px;color:var(--pink);flex:0 0 auto}
.dash-faq-a{max-height:0;overflow:hidden;padding:0 16px;font-size:12.5px;color:#777;line-height:1.6;transition:max-height .25s ease, padding .25s ease}
.dash-faq-item.open .dash-faq-a{max-height:300px;padding:0 16px 16px}
.dash-faq-a b{color:var(--dark-gray);font-weight:700}
.dash-faq-a a{color:var(--pink);font-weight:700;text-decoration:underline;cursor:pointer}

@media (min-width:561px){ .app.dashboard-app{height:800px} }

.trainings-app{display:flex;flex-direction:column;height:100%;overflow:hidden}
@media (min-width:561px){ .app.trainings-app{height:800px} }
.tr-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 16px 16px}

.tr-tabs{display:flex;margin:0 -16px 16px;border-bottom:1px solid #e2e2e2;background:#F0F1F3;position:sticky;top:0;z-index:2}
.tr-tab-btn{flex:1;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;padding:14px 6px 12px;font-size:14px;color:var(--dark-gray);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.tr-tab-btn b{font-weight:800}
.tr-tab-btn.active{border-bottom-color:var(--pink)}
.tr-tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:4px;background:#e4e4e6;color:#8a8a8a;font-size:11.5px;font-weight:700}
.tr-tab-btn:not(.active) .tr-tab-count{color:var(--pink)}

.tr-panel{display:flex;flex-direction:column;gap:14px}

.tr-card{background:#fff;border-radius:16px;box-shadow:0 2px 8px rgba(0,0,0,.06);overflow:hidden}
.tr-card-head{display:flex;align-items:center;gap:12px;padding:14px 16px}
.tr-cap-icon{flex:0 0 auto;width:52px;height:52px;border-radius:50%;background:#fce8ec;color:var(--pink);display:flex;align-items:center;justify-content:center;font-size:24px}
.tr-head-text{flex:1;min-width:0}
.tr-title{font-size:14.5px;font-weight:800;color:var(--dark-gray);line-height:1.35}
.tr-address{font-size:12.5px;color:#6f6f6f;margin-top:2px}
.tr-waze-btn{flex:0 0 auto;width:36px;height:36px;border-radius:10px;background:#dff3fb;color:#1ba9e1;display:flex;align-items:center;justify-content:center;font-size:18px;text-decoration:none}

.tr-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px 14px;border-top:1px solid #efefef}
.tr-meta-text{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.tr-guide,.tr-datetime{font-size:12.5px;color:#555}
.tr-datetime b{color:var(--dark-gray);font-weight:800}

.tr-cancel-btn{flex:0 0 auto;background:#efefef;color:#555;border:0;border-radius:999px;padding:8px 14px;font-size:12.5px;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.tr-cancel-btn .ph{font-size:14px;color:#df2c26}

.tr-more-btn{flex:0 0 auto;width:36px;height:36px;border:0;border-radius:10px;background:#e6f0f7;color:#556;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer}
.tr-card-done.certs-open .tr-more-btn{background:#e4e4e6}

.tr-cert-row{display:flex;flex-wrap:wrap;gap:6px 22px;padding:12px 16px 14px;border-top:1px solid #efefef}
.tr-cert-link{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--dark-gray);text-decoration:none}
.tr-cert-link .ph{font-size:20px;color:#df2c26}
.tr-cert-link.tr-cert-disabled{opacity:.4;pointer-events:none}
.tr-emps-line{display:flex;align-items:center;gap:8px;padding:10px 16px 12px;border-top:1px solid #efefef;font-size:12.5px;color:#555}
.tr-emps-line .ph{font-size:18px;color:#8a6cc0;flex-shrink:0}
.tr-emps-line b{color:var(--dark-gray)}
.tr-emps{flex-basis:100%;display:flex;flex-direction:column;gap:8px;margin-top:6px;padding-top:12px;border-top:1px dashed #e6e6e6}
.tr-emps-title{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:bold;color:#555}
.tr-emps-title .ph{font-size:18px;color:#8a6cc0}
.tr-emp{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;padding:8px 10px;border-radius:10px;background:#faf8fd}
.tr-emp-name{font-size:13px;font-weight:bold;color:var(--dark-gray)}
.tr-emp-files{display:flex;flex-wrap:wrap;gap:4px 16px}
.tr-modal-text.tr-modal-emps{margin-top:8px;font-weight:bold;color:#b42318}

.tr-modal-inner{max-width:340px;padding:22px 18px 18px}
.tr-modal-icon{width:60px;height:60px;border-radius:50%;background:#fdeceb;color:#df2c26;display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 14px}
.tr-modal-title{font-size:18px;font-weight:700;text-align:center;color:var(--dark-gray);margin-bottom:8px}
.tr-modal-text{font-size:13.5px;color:#555;text-align:center;line-height:1.7;margin-bottom:18px}
.tr-modal-actions{display:flex;gap:10px}
.tr-modal-actions .tr-modal-btn{flex:1}
.tr-modal-icon-alert{background:var(--pink);color:#fff;font-size:30px}
.tr-modal-btn{border:0;border-radius:999px;padding:13px;font-size:14px;font-weight:700;cursor:pointer}
.tr-modal-btn-confirm{background:var(--dark-gray);color:#fff}
.tr-modal-btn-back{background:#f0f0f0;color:#666}

.deal-hero{position:relative;margin:0 -16px 12px;padding:0 20px 12px}
.deals-app .catalog-body{position:relative;isolation:isolate;background:linear-gradient(#fff 0,#f0f1f3 240px)}
.deals-app .catalog-body > .page-back-link{position:relative;flex-shrink:0}
.deals-app .catalog-body > .page-back-link::after{content:"";position:absolute;top:calc(100% + 1px);left:-16px;width:calc(100% + 32px);height:240px;z-index:-1;pointer-events:none;background:url('Images/Images.Home/deals-confetti.svg') center -46px / 100% 260px no-repeat;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 20%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 20%,transparent 100%)}
.deal-title{font-size:clamp(17px,3.5vw,20px);font-weight:400;color:var(--dark-gray);text-align:center;margin:0 0 16px}
.deal-title b{font-weight:800}

.deal-countdown{text-align:center}
.deals-waiting-body{display:flex;flex-direction:column}
.deal-opening{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:24px 0 68px}
.deal-opening .deal-countdown-pill{flex:0 0 auto}
.deal-countdown-pill{width:72%;max-width:360px;margin:0 auto;background:#222;color:#fff;border:3px solid var(--pink);border-radius:999px;padding:10px 12px 12px;box-shadow:0 4px 6px rgba(0,0,0,.14)}
.deal-countdown-time{font-size:clamp(22px,4vw,26px);font-weight:800;line-height:1.1;direction:ltr;font-variant-numeric:tabular-nums}
.deal-countdown-sub{font-size:clamp(14px,2.8vw,16px);font-weight:700;line-height:1.2;margin-top:2px;color:#fff}
.deal-countdown-range{display:flex;align-items:center;justify-content:center;gap:9px;font-size:clamp(19px,4vw,27px);color:#333;margin-top:12px}
.deal-countdown-range .deal-clock{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#fff;box-shadow:0 3px 5px rgba(0,0,0,.13);font-size:25px}

.deal-continue{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);background:var(--pink);color:#fff;border-radius:999px;padding:12px 22px;display:flex;align-items:center;gap:6px;font-size:12.5px;box-shadow:0 4px 14px rgba(0,0,0,.2);cursor:pointer;z-index:50}
.deal-continue b{font-weight:800}
.deal-continue span:first-child{background:rgba(255,255,255,.25);border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-weight:700}

.pd-app{display:flex;flex-direction:column;height:100%;overflow:hidden}
@media (min-width:561px){ .app.pd-app{height:800px} }
@media (max-width:560px){ .app.pd-app{height:100%} }
.pd-body{flex:1 1 auto;overflow-y:auto;padding:0 0 16px;background:#fff;-webkit-overflow-scrolling:touch}
.pd-back-btn{position:absolute;top:12px;right:12px;z-index:2;background:#fff;border:0;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.pd-back-btn .ph{font-size:18px;color:var(--dark-gray)}
.pd-fav-btn{top:12px;left:12px;right:auto;width:36px;height:36px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.pd-fav-btn i{filter:none}
.pd-price{display:flex;align-items:baseline;gap:8px;margin-top:4px}
.pd-price-value{font-size:17px;font-weight:800;color:var(--dark-gray)}
.pd-thanks{display:flex;align-items:center;gap:10px;padding:6px 2px 2px;font-size:13.5px;color:#555;line-height:1.5}
.pd-thanks b{color:var(--dark-gray)}
.pd-thanks-icon{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:var(--pink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px}

.pd-desc{font-size:13px;color:#888;line-height:1.7}
.pd-desc p{margin:0 0 10px}
.pd-desc b{color:var(--dark-gray);font-weight:700}
.pd-desc .pd-lead{font-size:14.5px;font-weight:700;color:var(--dark-gray)}
.pd-desc h4{font-size:14px;font-weight:700;color:var(--dark-gray);margin:16px 0 8px}
.pd-desc ul{margin:0 0 12px;padding-inline-start:18px;list-style:disc}
.pd-desc li{margin-bottom:4px}
.pd-desc .pd-tagline{margin-top:14px;padding:10px 14px;background:#fdf1f3;border-radius:8px;color:var(--dark-gray)}
.pd-desc .pd-tagline b{color:var(--pink)}
.pd-desc .pd-datasheet a{display:inline-flex;align-items:center;gap:6px;color:var(--pink);font-weight:700;text-decoration:underline;cursor:pointer}


.cart-item{background:#fff;border-radius:8px;padding:12px;box-shadow:0 1px 4px rgba(0,0,0,.06);margin-bottom:12px}
.cart-item-top{display:flex;gap:12px;align-items:flex-start}
.cart-item-img{flex:0 0 auto;width:88px;aspect-ratio:1/1;border-radius:4px;background:var(--light-gray);display:flex;align-items:center;justify-content:center;overflow:hidden}
.cart-item-img img{width:100%;height:100%;object-fit:contain}
.cart-item-info{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.cart-item-name{font-size:13.5px;font-weight:500;color:var(--dark-gray);line-height:1.4}
.cart-item-badge{background:var(--pink);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px}
.cart-item-actions{flex:0 0 auto;display:flex;flex-direction:column;gap:4px}
.cart-act{width:32px;height:32px;border:0;border-radius:50%;background:none;color:var(--dark-gray);display:flex;align-items:center;justify-content:center;cursor:pointer}
.cart-act .ph,.cart-act .ph-fill{font-size:19px}
.cart-act-fav{color:#a8a8a8}
.cart-act-fav.active{color:var(--pink)}
.cart-item-bottom{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid #f0f0f0}
.cart-item-quote{font-size:12px;font-weight:700;color:var(--pink)}
.cart-item-line{min-width:64px;text-align:left;font-size:15px;font-weight:800;color:var(--dark-gray)}

.cart-summary{background:#fff;border-radius:8px;padding:16px;box-shadow:0 1px 4px rgba(0,0,0,.06);margin:4px 0 16px}
.cart-summary-title{font-size:17px;font-weight:700;color:var(--dark-gray);padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid #eee}
.cart-shipping-note{text-align:center;background:#fdf1e8;color:#b8720a;font-size:12px;font-weight:700;border-radius:999px;padding:8px 12px;margin-bottom:12px}
.cart-shipping-note-free{background:#e8f8ee;color:#2f9e5b}
.cart-sum-row{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:#6f6f6f;padding:6px 0}
.cart-sum-discount{color:var(--pink)}
.cart-sum-total{margin-top:6px;padding-top:12px;border-top:1px dashed #ddd;font-size:15px;font-weight:800;color:var(--dark-gray)}
.cart-submit-btn{width:100%;margin-top:16px;background:var(--dark-gray);color:#fff;border:0;border-radius:999px;padding:14px;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.cart-continue-link{display:block;margin-top:12px;text-align:center;font-size:13px;color:var(--dark-gray);text-decoration:underline;cursor:pointer}
.cart-submit-btn .ph-paper-plane-right,.cart-bar-btn .ph-paper-plane-right{transform:scaleX(-1)}

.cart-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--dark-gray);color:#fff;padding:18px 16px calc(env(safe-area-inset-bottom,0px) + 18px)}
.cart-bar-totals{display:flex;flex-direction:column;gap:2px;min-width:0}
.cart-bar-total{font-size:13px}
.cart-bar-total b{font-size:18px;font-weight:800}
.cart-bar-saved{font-size:11.5px;color:#e8c9cf}
.cart-bar-btn{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:6px;height:44px;padding:0 22px;border:0;border-radius:999px;background:var(--pink);color:#fff;font-size:14px;font-weight:700;cursor:pointer}
.cart-bar-btn:disabled{cursor:progress;opacity:.9}
.btn-spinner{flex:0 0 auto;width:16px;height:16px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}

.order-card{background:#fff;border-radius:14px;box-shadow:0 1px 4px rgba(0,0,0,.06);margin-bottom:12px;overflow:hidden}
.order-card-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;cursor:pointer;text-align:right}
.order-card-head-main{display:flex;flex-direction:column;gap:4px}
.order-number{font-size:13.5px;font-weight:700;color:var(--dark-gray)}
.order-date{font-size:11px;color:#999}
.order-card-head-side{display:flex;align-items:center;gap:10px}
.order-total{font-size:13px;font-weight:700;color:var(--dark-gray)}
.order-caret{font-size:14px;color:#999;transition:transform .2s ease}
.order-card.open .order-caret{transform:rotate(-90deg)}

.order-status{font-size:10.5px;font-weight:700;border-radius:999px;padding:4px 10px;white-space:nowrap}
.order-status-received{background:#eaf3ff;color:#2b6cb0}
.order-status-picking{background:#fff3e0;color:#b8720a}
.order-status-shipped{background:#f3ecff;color:#7c4dcc}
.order-status-delivered{background:#e8f8ee;color:#2f9e5b}

.order-card-body{max-height:0;overflow:hidden;transition:max-height .25s ease}
.order-card.open .order-card-body{max-height:600px}
.order-item-row{display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid #f2f2f2;font-size:12.5px}
.order-item-name{flex:1;color:var(--dark-gray)}
.order-item-note{display:block;margin-top:3px;font-size:11.5px;color:var(--pink)}
.order-customer-note{display:flex;align-items:flex-start;gap:8px;margin:4px 16px 12px;padding:10px 12px;background:#fdf3f5;border-radius:12px;font-size:13px;color:var(--dark-gray);text-align:right}
.order-customer-note .ph{flex:0 0 auto;font-size:17px;color:var(--pink);margin-top:1px}
.order-customer-note b{display:block;font-size:12px;color:#9b3550;margin-bottom:2px}
.order-customer-note span{display:block;white-space:pre-wrap;word-break:break-word}
.order-item-qty{color:#999}
.order-item-price{font-weight:700;color:var(--dark-gray)}

.skel{background:linear-gradient(90deg,#eceff1 25%,#f6f7f8 37%,#eceff1 63%);background-size:400% 100%;animation:skel-shimmer 1.4s ease infinite;border-radius:8px;display:block}
@keyframes skel-shimmer{0%{background-position:100% 50%}100%{background-position:0% 50%}}

.skel-content{opacity:0;transition:opacity .3s ease}
.skel-content.skel-show{opacity:1}

.skel-card{background:#fff;border-radius:14px;padding:12px;box-shadow:0 1px 4px rgba(0,0,0,.06);display:flex;flex-direction:column;gap:8px}
.skel-line{height:11px}
.skel-img{width:100%;aspect-ratio:1/1;border-radius:10px}

.skel-cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}

.skel-tr-card{background:#fff;border-radius:14px;padding:14px 16px;box-shadow:0 1px 4px rgba(0,0,0,.06);margin-bottom:14px}
.skel-tr-card .skel-line{margin-bottom:10px}

.skel-dv-card{background:#fff;border-radius:14px;padding:16px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.skel-dv-card .skel-img{max-width:200px;margin:0 auto 14px;aspect-ratio:4/3}

.skel-row{display:flex;gap:12px;overflow:hidden}
.skel-row .skel-card{flex:0 0 auto;width:150px}
@media (max-width:560px){ .app.dashboard-app{height:100%} }


.lb-field{position:relative;width:100%;margin-bottom:18px;text-align:right;direction:rtl}
.lb-input{display:block;width:100%;height:56px;background:#fff;border:1px solid #e2e2e2;border-radius:10px;padding:20px 16px 4px 48px;font-family:inherit;font-size:15px;color:var(--dark-gray);text-align:right;transition:border-color .15s ease}
textarea.lb-input{height:auto;min-height:130px;padding:28px 16px 12px 48px;resize:vertical;line-height:1.5}
.lb-input:focus{border-color:#8a8a8a;outline:none}
.lb-label{position:absolute;right:16px;top:28px;transform:translateY(-50%);padding:0;background:transparent;font-size:15px;color:#8a8a8a;pointer-events:none;transition:top .15s ease,font-size .15s ease,color .15s ease;white-space:nowrap}
.lb-input:focus + .lb-label,
.lb-input:not(:placeholder-shown) + .lb-label,
.lb-field.is-filled .lb-label{top:15px;font-size:11.5px}
.lb-input:focus + .lb-label{color:var(--dark-gray)}
textarea.lb-input:focus + .lb-label,textarea.lb-input:not(:placeholder-shown) + .lb-label{top:14px}
.lb-clear{position:absolute;left:12px;top:28px;transform:translateY(-50%);width:28px;height:28px;display:none;align-items:center;justify-content:center;background:none;border:0;padding:0;color:var(--dark-gray);font-size:22px;cursor:pointer}
.lb-field.is-filled .lb-clear{display:flex}
.lb-error{display:block;min-height:0;margin:6px 14px 0 0;font-size:12.5px;color:#DF2C26;text-align:right}
.lb-error:empty{display:none}
.lb-field.has-error .lb-input{border:2px solid #DF2C26}
.lb-field.has-error .lb-label{color:#DF2C26}

.lb-field.is-readonly .lb-input{line-height:20px;padding-top:26px;padding-bottom:0;border-color:#d6d6d6;padding-left:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-field.is-readonly .lb-label{top:15px;font-size:11.5px;color:#8a8a8a}
.lb-field.is-readonly .lb-input.is-muted{color:#9a9a9a}


.cat-view-toggle{flex:0 0 auto;display:flex;background:#fff;border-radius:999px;padding:3px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.cat-view-btn{width:30px;height:28px;border:0;background:none;border-radius:999px;display:flex;align-items:center;justify-content:center;color:#b3b3b3;cursor:pointer}
.cat-view-btn .ph{font-size:16px}
.cat-view-btn.active{background:var(--dark-gray);color:#fff}
.cat-heading-tools{display:flex;align-items:center;gap:8px}
.cat-view-row{display:flex;justify-content:flex-end;margin-bottom:12px}
.cat-grid.is-list{grid-template-columns:1fr}
.cat-grid.is-list .cat-name{font-size:15px;min-height:0}
.cat-grid.is-list .cat-price{font-size:17px}


.qa-overlay{position:absolute;inset:0;z-index:300;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .3s}
.qa-overlay.open{opacity:1;visibility:visible;transition:opacity .25s ease}
body > .qa-overlay{position:fixed}
.qa-sheet{width:100%;max-height:80%;max-height:min(80%,80dvh);display:flex;flex-direction:column;overflow:hidden;background:#fff;border-radius:16px 16px 0 0;transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.qa-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:16px}
.qa-overlay.open .qa-sheet{transform:translateY(0)}
.qa-sheet.dragging{transition:none}
.qa-handle{flex:0 0 auto;display:flex;justify-content:center;padding:10px 0 12px;cursor:grab;touch-action:none}
.qa-handle span{width:38px;height:4px;border-radius:2px;background:#d4d4d4}

.qa-gallery-wrap{position:relative}
.qa-gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.qa-gallery::-webkit-scrollbar{display:none}
.qa-gallery img{flex:0 0 100%;width:100%;height:260px;height:min(260px,32dvh);object-fit:contain;background:var(--light-gray);scroll-snap-align:start}
.qa-dots{position:absolute;right:0;left:0;bottom:16px;display:flex;justify-content:center;gap:6px;pointer-events:none}
.qa-dots span{width:6px;height:6px;border-radius:50%;background:rgba(0,0,0,.2);transition:background .2s ease}
.qa-dots span.active{background:var(--dark-gray)}
.qa-product-link{position:absolute;z-index:1;left:12px;bottom:12px;display:flex;align-items:center;gap:4px;background:#fff;color:var(--dark-gray);font-size:12.5px;font-weight:500;padding:7px 10px;border-radius:999px;box-shadow:0 1px 4px rgba(0,0,0,.12);cursor:pointer}
.qa-product-link .ph{font-size:13px}

.qa-section{padding:16px;border-top:1px solid #eee;margin-top:16px}
.qa-section + .qa-section{margin-top:0}
.qa-name{font-size:15px;font-weight:700;color:var(--dark-gray);line-height:1.4}
.qa-price{font-size:18px;font-weight:800;color:var(--dark-gray);margin-top:4px;text-align:right}
.qa-label{font-size:13px;color:#6f6f6f;margin-bottom:10px}
.qa-qty-section{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.qa-qty-section .qa-label,.cart-qty-label{margin:0;font-size:14px;font-weight:700;color:var(--dark-gray)}
.qa-stepper{display:inline-flex;flex:0 0 auto;align-items:center;gap:0;padding:3px;border:1px solid #dedee1;border-radius:999px;background:#fff;direction:rtl;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.qa-stepper button{width:44px;height:44px;flex:0 0 44px;border:0;border-radius:50%;background:#eeeef0;color:var(--dark-gray);display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation}
.qa-stepper button .ph{font-size:16px}
.qa-stepper button:hover:not(:disabled){background:#e1e1e5}
.qa-stepper button:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.qa-stepper button:active:not(:disabled){background:#f4dce3}
.qa-stepper button:disabled{color:#aaa;background:#f7f7f8;cursor:default}
.qa-qty{min-width:40px;height:44px;padding:0 3px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:var(--dark-gray);font-variant-numeric:tabular-nums;direction:ltr}
.cart-qty-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.qa-footer{flex:0 0 auto;background:#fff;border-top:1px solid #eee;padding:12px 16px calc(env(safe-area-inset-bottom,0px) + 14px)}

.qa-desc{display:none}
.qa-sheet.is-lead .qa-desc{display:block}
.qa-sheet.is-lead .qa-price,.qa-sheet.is-lead .qa-qty-section,.qa-sheet.is-lead .qa-product-link,.qa-sheet.is-lead .qa-remove-btn,.qa-sheet.is-lead .qa-add-total{display:none}

.qa-thanks{display:none}
.qa-sheet.is-thanks > :not(.qa-thanks):not(.qa-handle){display:none}
.qa-sheet.is-thanks .qa-thanks{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 24px calc(env(safe-area-inset-bottom,0px) + 24px);text-align:center}
.qa-thanks-icon{width:60px;height:60px;border-radius:50%;background:var(--pink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:6px;animation:splashIn .4s ease-out}
.qa-thanks-title{font-size:19px;font-weight:800;color:var(--dark-gray)}
.qa-thanks-text{font-size:14px;color:#6f6f6f;line-height:1.6}
.qa-thanks-text b{color:var(--dark-gray);font-weight:700}
.qa-add-btn{width:100%;height:50px;border:0;border-radius:999px;background:var(--pink);color:#fff;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.qa-add-label{font-weight:400}
.qa-add-total{font-weight:800}
.qa-add-btn.is-remove{background:#DF2C26}
.qa-add-check{display:none;font-size:18px}
.qa-add-btn.is-added .qa-add-check{display:inline-block}
.qa-add-btn.is-added{cursor:default}
.qa-remove-btn{width:100%;height:44px;margin-top:8px;border:0;border-radius:999px;background:none;color:#DF2C26;font-size:13.5px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer}
.qa-remove-btn .ph{font-size:16px}


.survey-inner{max-width:360px;padding:22px 18px 18px}
.survey-icon{background:var(--pink);color:#fff}
.survey-title{font-size:18px}
.survey-text{color:#6f6f6f;margin-bottom:14px}
.survey-rows{border-top:1px solid #eee;border-bottom:1px solid #eee;padding:6px 0;margin-bottom:16px}
.survey-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0}
.survey-q{font-size:13.5px;color:var(--dark-gray)}
.survey-stars{flex:0 0 auto;display:flex;gap:2px}
.survey-star{width:28px;height:28px;border:0;background:none;padding:0;color:#e0a53f;display:flex;align-items:center;justify-content:center;font-size:21px;cursor:pointer;transition:transform .12s ease}
.survey-star:active{transform:scale(1.2)}
.survey-actions{display:flex;gap:10px}
.survey-actions .tr-modal-btn{flex:1}
.survey-send:disabled{opacity:.35;cursor:default}
.survey-thanks{display:none;text-align:center;padding:8px 0}
.survey-modal.is-thanks .survey-form{display:none}
.survey-modal.is-thanks .survey-thanks{display:block}

.lb-field-sm{margin-bottom:0}
.lb-field-sm .lb-input{height:46px;font-size:14px;padding:17px 14px 2px 44px}
.lb-field-sm .lb-label{top:23px;font-size:13.5px;color:#8a8a8a}
.lb-field-sm .lb-input:focus + .lb-label,.lb-field-sm .lb-input:not(:placeholder-shown) + .lb-label,.lb-field-sm.is-filled .lb-label{top:11px;font-size:10.5px;color:#8a8a8a}
.lb-field-sm .lb-input:focus + .lb-label{color:var(--dark-gray)}
.lb-field-sm .lb-clear{top:23px;font-size:20px}
.cart-item-note{margin-top:12px}

.dash-cat-ico{transition:box-shadow .15s ease,border-color .15s ease}
.dash-cat-card .dash-cat-ico.dash-cat-all{background:#fff;color:var(--dark-gray)}
.dash-cat-card.is-active .dash-cat-ico{border-color:var(--pink);box-shadow:0 0 0 2px var(--pink),0 4px 12px rgba(218,122,140,.3)}
.dash-cat-card.is-active .dash-cat-name{color:var(--pink);font-weight:700}
.dash-cat-row-compact{margin:0 -16px 6px 0;padding:4px 2px 10px 0;scroll-padding-inline:16px}
.dash-cat-row-compact .dash-cat-card{width:76px}
.dash-cat-row-compact .dash-cat-ico{width:58px;height:58px;font-size:22px;border-width:2px}
.dash-cat-row-compact .dash-cat-name{font-size:11px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qa-sku,.cart-item-sku,.order-item-sku{display:block;margin-top:2px;font-size:12px;font-weight:400;color:#8a8a8a;letter-spacing:.2px}
.qa-sku span,.cart-item-sku span,.order-item-sku span{font-variant-numeric:tabular-nums}
.cat-locked-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:14px;background:#f1f1f2;color:#222;font-size:12px;font-weight:700;line-height:1.2}
.cat-locked-chip .ph{font-size:13px}
.qa-sheet.is-locked .qa-desc{display:block}
.qa-sheet.is-locked .qa-qty-section,.qa-sheet.is-locked .qa-remove-btn,.qa-sheet.is-locked .qa-add-total{display:none}
.qa-locked-note{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:12px;background:#f4f4f5;border:1px solid #e7e7e9}
.qa-locked-note b{display:block;font-size:14px;color:#111;margin-bottom:4px}
.qa-locked-note p{margin:0;font-size:13px;line-height:1.6;color:#333}
.qa-locked-icon{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:#222;color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px}
.cart-locked-note{display:flex;align-items:flex-start;gap:8px;margin:0 16px 12px;padding:12px 14px;border-radius:12px;background:#f4f4f5;border:1px solid #e7e7e9;color:#222;font-size:13px;line-height:1.5}
.cart-locked-note[hidden]{display:none}
.cart-locked-note .ph{font-size:16px;margin-top:1px;color:#222}
.item .code-layout button.code-number{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;border:0;font-family:inherit;line-height:1.2;cursor:pointer;transition:background .2s ease;-webkit-tap-highlight-color:transparent}
.item .code-layout button.code-number .code-value{letter-spacing:1px}
.item .code-layout .code-copy-hint{display:inline-flex;align-items:center;gap:4px;font-size:.7rem;font-weight:400;opacity:.75}
.item .code-layout button.code-number.is-copied{background:#1f8a4c}
.item .code-layout button.code-number.is-copied .code-copy-hint{opacity:1}
.dash-cat-visual{position:relative;display:inline-flex}
.dash-cat-count{position:absolute;top:-3px;left:-3px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--pink);color:#fff;border:2px solid #fff;font-size:11px;font-weight:700;line-height:16px;text-align:center;box-sizing:border-box;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.dash-cat-count[hidden]{display:none}
.dash-cat-card.no-matches .dash-cat-ico{opacity:.45}
.dash-cat-card.no-matches .dash-cat-name{color:#aaa}
.cat-card-category{display:inline-block;align-self:flex-start;margin-bottom:4px;padding:2px 8px;border-radius:10px;background:#f1f1f2;color:#555;font-size:10.5px;font-weight:700;line-height:1.4}
.cat-other{margin:18px 0 8px}
.cat-other[hidden]{display:none}
.cat-other-head{display:flex;align-items:flex-start;gap:10px;margin:0 0 12px;padding:12px 14px;border-radius:12px;background:#f4f4f5;border:1px solid #e7e7e9}
.cat-other-icon{flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:#222;color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px}
.cat-other-title{font-size:14px;font-weight:800;color:#222}
.cat-other-sub{font-size:12.5px;color:#555;margin-top:2px}
.item .code-layout.code-missing{gap:8px;padding:6px 4px 16px;border-bottom:1px solid #D9D9D9}
.code-missing-icon{width:44px;height:44px;border-radius:50%;background:#f1f1f2;color:#333;display:flex;align-items:center;justify-content:center;font-size:22px}
.code-missing-title{font-weight:800;font-size:1rem;color:var(--dark-gray);text-align:center}
.code-missing-text{font-size:.85rem;color:#6f6f6f;text-align:center;line-height:1.55;max-width:260px}
.code-missing-link{margin-top:2px;padding:7px 18px;border-radius:30px;border:1px solid var(--dark-gray);color:var(--dark-gray);font-size:.85rem;font-weight:700;text-decoration:none}
img.img-skel-pending,.img-skel-host{background-image:linear-gradient(90deg,#eceff1 25%,#f6f7f8 37%,#eceff1 63%) !important;background-size:400% 100% !important;animation:skel-shimmer 1.4s ease infinite}
.img-skel-host > img.img-skel-pending{opacity:0;background:none !important;animation:none}
.machine-img.img-skel-host{min-height:150px;border-radius:14px}
img.img-skel-in{animation:imgSkelIn .35s ease-out}
@keyframes imgSkelIn{from{opacity:0}to{opacity:1}}
.skel-cart{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.skel-cart-item{display:flex;gap:12px;background:#fff;border-radius:14px;padding:12px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.skel-cart-img{flex:0 0 auto;width:88px;height:88px;border-radius:6px}
.skel-cart-lines{flex:1;display:flex;flex-direction:column;gap:8px;padding-top:4px}
.skel-profile{padding-top:4px}
.skel-pf-avatar{width:120px;height:120px;border-radius:50%;margin:0 auto 24px}
.skel-pf-field{height:56px;border-radius:10px;margin-bottom:18px}
.ph.ph-eye:before { content: "\e220"; }
.ph.ph-download-simple:before { content: "\e20c"; }
.ph.ph-play:before { content: "\e3d0"; }
.ph-fill.ph-play:before { content: "\e3d0"; }
.ph.ph-video:before { content: "\e740"; }
.ph.ph-caret-down:before { content: "\e136"; }
.marketing-app{display:flex;flex-direction:column;overflow:hidden}
.marketing-app > .cat-header{flex-shrink:0}
.marketing-app > .mk-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
@media(min-width:601px){.app.marketing-app{height:min(800px,100vh);height:min(800px,100dvh)}}
@media(max-width:600px){.app.marketing-app{height:100vh;height:100dvh}}
.mk-body > .page-back-link:first-child{margin-top:0}
.mk-intro{margin:4px 0 14px}
.mk-title{font-size:1.35rem;font-weight:400;color:var(--dark-gray);margin:0 0 4px}
.mk-title b{font-weight:800}
.mk-sub{margin:0;font-size:.85rem;color:#6f6f6f;line-height:1.55}
.mk-search{margin-bottom:16px}
.skel-mk-brand{height:58px;border-radius:14px;margin-bottom:10px}
.mk-accordion{display:flex;flex-direction:column;gap:10px}
.mk-brand{background:#fff;border-radius:14px;box-shadow:0 1px 4px rgba(0,0,0,.06);overflow:hidden}
.mk-brand[hidden]{display:none}
.mk-brand-head{width:100%;display:flex;align-items:center;gap:10px;padding:16px;background:none;border:0;font-family:inherit;text-align:right;cursor:pointer;color:var(--dark-gray);-webkit-tap-highlight-color:transparent}
.mk-brand-name{flex:1;min-width:0;font-size:.92rem;font-weight:600;text-align:right}
.mk-brand-count{min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:#f1f1f2;color:#555;font-size:.75rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
.mk-brand-caret{font-size:18px;color:#888;transition:transform .2s ease}
.mk-brand.is-open .mk-brand-caret{transform:rotate(180deg)}
.mk-brand.is-open .mk-brand-count{background:var(--dark-gray);color:#fff}
.mk-brand-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.mk-brand.is-open .mk-brand-body{grid-template-rows:1fr}
.mk-items{overflow:hidden;display:flex;flex-direction:column}
.mk-brand.is-open .mk-items{border-top:1px solid #f0f0f0}
.mk-item{display:grid;grid-template-columns:140px minmax(0,1fr);align-items:start;gap:14px;padding:16px;border-bottom:1px solid #f0f0f0;direction:rtl}
.mk-item:last-child{border-bottom:0}
.mk-item[hidden]{display:none}
.mk-cover{position:relative;flex:0 0 auto;width:140px;aspect-ratio:25/16;border-radius:10px;overflow:hidden;background:var(--light-gray);display:flex;align-items:center;justify-content:center;border:1px solid #eee;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.mk-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.mk-cover:hover img{transform:scale(1.04)}
.mk-cover-ico{font-size:28px;color:#b0b0b0}
.mk-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.42);pointer-events:none;transition:background .18s ease}
.mk-play-disc{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.85);border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 2px 12px rgba(0,0,0,.22);transition:transform .18s ease}
.mk-play-disc svg{width:22px;height:22px;fill:#252525}
.mk-cover.is-video:hover .mk-play,.mk-cover.is-video:focus-visible .mk-play{background:rgba(0,0,0,.52)}
.mk-cover.is-video:hover .mk-play-disc{transform:scale(1.08)}
.mk-info{min-width:0;display:flex;flex-direction:column;gap:8px;text-align:right}
.mk-item-title{margin:0;font-size:.82rem;font-weight:600;color:var(--dark-gray);line-height:1.5;overflow-wrap:anywhere;text-align:right}
.mk-item-title a{color:inherit;text-decoration:none;display:block}
.mk-item-title a:hover{text-decoration:underline;text-underline-offset:3px}
.mk-meta{display:flex;flex-wrap:wrap;align-items:center;gap:5px;direction:rtl}
.mk-tag{display:inline-flex;align-items:center;min-height:21px;padding:1px 7px;box-sizing:border-box;border:1px solid #ededee;border-radius:6px;background:#f8f8f9;color:#666;font-size:.66rem;font-weight:500;line-height:1.4}
.mk-tag-video{color:#476780;background:#f5f8fa;border-color:#e6edf2}
.mk-actions{grid-column:1 / -1;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;margin-top:0;direction:rtl}
.mk-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:0;padding:7px 8px;box-sizing:border-box;border:1px solid #e9eaeb;background:#fafafa;color:#626262;font-family:inherit;font-size:13px;font-weight:600;text-decoration:none;cursor:pointer;line-height:1.4;border-radius:999px}
.mk-btn .ph{font-size:16px}
.mk-btn-wa{color:#287249;background:#f4f9f5}
.mk-btn-video{color:#1a5fa8}
.mk-btn:hover{background:#f0f1f2}
.mk-btn-wa:hover{background:#eaf4ed}
.mk-cover:focus-visible,.mk-item-title a:focus-visible,.mk-btn:focus-visible,.mk-brand-head:focus-visible,.mk-video-close:focus-visible{outline:2px solid #1a5fa8;outline-offset:2px}
@media(max-width:360px){.mk-item{grid-template-columns:116px minmax(0,1fr);gap:10px;padding:12px}.mk-cover{width:116px}}
@media(prefers-reduced-motion:reduce){.mk-brand-body,.mk-brand-caret,.mk-play,.mk-play-disc,.mk-cover img{transition:none}.mk-cover:hover img{transform:none}}
.mk-video-overlay{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#080808;color:#fff;box-sizing:border-box;overscroll-behavior:contain}
.mk-video-overlay:not([open]){display:none}
.mk-video-overlay::backdrop{background:#080808}
.mk-video-box{width:100%;height:100%;display:flex;flex-direction:column;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);box-sizing:border-box}
.mk-video-header{display:flex;align-items:center;gap:16px;flex-shrink:0;min-height:64px;padding:8px 16px;box-sizing:border-box;border-bottom:1px solid #272727;direction:rtl}
.mk-video-frame{position:relative;flex:1;min-height:0;width:100%;background:#000;overflow:hidden}
.mk-video-frame iframe,.mk-video-frame video{position:absolute;inset:0;width:100%;height:100%;border:0}
.mk-video-title{flex:1;min-width:0;color:#e6e6e6;font-size:.85rem;font-weight:500;line-height:1.4;text-align:right;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mk-video-close{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:44px;min-height:44px;padding:0 12px;border-radius:9px;border:1px solid #454545;background:#242424;color:#fff;font:inherit;font-size:.8rem;cursor:pointer}
.mk-video-close:hover{background:#363636}
.mk-video-close .ph{font-size:18px}
.ph.ph-user-switch:before { content: "\e756"; }
.ph.ph-users:before { content: "\e4d6"; }
.ph.ph-clipboard-text:before { content: "\e198"; }
.agent-bar{display:flex;align-items:center;gap:8px;padding:9px 16px;background:#fff4e0;border-top:1px solid #f5d48a;border-bottom:1px solid #f5d48a;color:#6b4a00;font-size:13px;flex:0 0 auto;direction:rtl}
.agent-bar-ico{display:flex;font-size:17px;color:#b26a00}
.agent-bar-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agent-bar-text b{color:#4a3300}
.agent-bar-num{font-size:11.5px;opacity:.8}
.agent-bar-switch{flex:0 0 auto;padding:5px 12px;border-radius:999px;background:#fff;border:1px solid #f0c46a;color:#6b4a00;font-weight:700;font-size:12px;text-decoration:none}
.pm-agent-who{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--dark-gray);margin-bottom:8px}
.pm-agent-badge{padding:2px 9px;border-radius:999px;background:#fff4e0;color:#8a5a00;font-size:11px;font-weight:800}
.order-by-agent{display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:2px 9px;border-radius:999px;background:#fff4e0;color:#8a5a00;font-size:11px;font-weight:700;width:fit-content}
.ag-body > .page-back-link:first-child{margin-top:0}
.ag-hello{margin:6px 0 14px}
.ag-hello-kicker{font-size:.85rem;color:#8a8a8a;margin-bottom:2px}
.ag-title{font-size:1.35rem;font-weight:400;color:var(--dark-gray);margin:0 0 4px}
.ag-title b{font-weight:800}
.ag-sub{margin:0;font-size:.85rem;color:#6f6f6f;line-height:1.55}
.ag-current{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:12px 14px;margin-bottom:14px;border-radius:14px;background:#fff4e0;border:1px solid #f5d48a;color:#6b4a00;text-decoration:none}
.ag-current-label{font-size:.75rem;opacity:.85}
.ag-current-name{grid-row:2;font-weight:800;color:#4a3300}
.ag-current-go{grid-row:1 / span 2;grid-column:2;display:inline-flex;align-items:center;gap:4px;font-size:.8rem;font-weight:700}
.ag-search{margin-bottom:10px}
.ag-list-head{font-size:.78rem;font-weight:700;color:#8a8a8a;margin:4px 2px 8px;min-height:1em}
.ag-list,.ag-orders{display:flex;flex-direction:column;gap:8px;transition:opacity .15s ease}
.ag-list.is-loading,.ag-orders.is-loading{opacity:.5}
.skel-ag-row{height:72px;border-radius:14px;margin-bottom:8px}
.ag-customer{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:0;border-radius:14px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.06);font-family:inherit;text-align:right;cursor:pointer;color:var(--dark-gray);-webkit-tap-highlight-color:transparent;transition:box-shadow .15s ease,transform .15s ease}
.ag-customer:hover{box-shadow:0 3px 10px rgba(0,0,0,.1)}
.ag-customer:active{transform:scale(.99)}
.ag-customer.is-busy{opacity:.7;pointer-events:none}
.ag-avatar{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:#f6dde3;color:#9a4d5c;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:16px}
.ag-customer-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ag-customer-name{font-weight:800;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-customer-meta{font-size:.75rem;color:#8a8a8a}
.ag-customer-tags{display:flex;flex-wrap:wrap;gap:4px}
.ag-tag{padding:1px 8px;border-radius:999px;background:#f6dde3;color:#9a4d5c;font-size:.68rem;font-weight:700}
.ag-tag-soft{background:#f1f1f2;color:#666}
.ag-go{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;padding:7px 12px;border-radius:999px;background:var(--dark-gray);color:#fff;font-size:.78rem;font-weight:700}
.ag-order{background:#fff;border-radius:14px;box-shadow:0 1px 4px rgba(0,0,0,.06);overflow:hidden}
.ag-order-head{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;width:100%;padding:12px 14px;border:0;background:none;font-family:inherit;text-align:right;cursor:pointer;color:var(--dark-gray)}
.ag-order-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.ag-order-customer{font-weight:800;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-order-total{font-weight:800;white-space:nowrap}
.ag-order-meta{grid-row:2;font-size:.75rem;color:#8a8a8a}
.ag-order-caret{grid-row:1 / span 2;grid-column:2;font-size:16px;color:#999;transition:transform .2s ease}
.ag-order.is-open .ag-order-caret{transform:rotate(180deg)}
.ag-order-body{padding:0 14px 14px;border-top:1px solid #f3f3f3}
.ag-lines{display:flex;flex-direction:column;padding-top:8px}
.ag-lines .skel-line{margin:6px 0}
.ag-line{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid #f6f6f6;font-size:.85rem}
.ag-line:last-child{border-bottom:0}
.ag-line-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ag-line-name{font-weight:600}
.ag-line-sku,.ag-line-note{font-size:.72rem;color:#8a8a8a}
.ag-line-qty{color:#666;white-space:nowrap}
.ag-line-sum{font-weight:700;white-space:nowrap;min-width:56px;text-align:left}
.ag-line-empty{padding:10px 0;color:#999;font-size:.85rem}
.ag-reorder{margin-top:10px;display:inline-flex;align-items:center;gap:5px;padding:8px 14px;border-radius:999px;border:1px solid #e2e2e2;background:#fff;font-family:inherit;font-size:.8rem;font-weight:700;color:var(--dark-gray);cursor:pointer}
.ag-reorder:disabled{opacity:.6}
.login-choice{display:flex;flex-direction:column;gap:10px;width:290px;max-width:100%}
.login-choice-btn{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid #e6e6e6;border-radius:16px;background:#fff;color:var(--dark-gray);text-decoration:none;text-align:right;box-shadow:0 1px 4px rgba(0,0,0,.06);transition:border-color .15s ease,box-shadow .15s ease}
.login-choice-btn:hover{border-color:#bbb;box-shadow:0 3px 10px rgba(0,0,0,.08)}
.login-choice-btn:focus-visible{outline:2px solid var(--dark-gray);outline-offset:2px}
.login-choice-ico{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:#f1f1f2;display:flex;align-items:center;justify-content:center;font-size:20px}
.login-choice-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.login-choice-text b{font-size:15px}
.login-choice-text small{font-size:12px;color:#8a8a8a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.login-choice-go{color:#999;font-size:16px}
.sp{width:360px;max-width:calc(100vw - 32px);display:flex;flex-direction:column;gap:12px;text-align:right}
.sp-customer,.sp-row{display:flex;align-items:center;gap:12px;color:var(--dark-gray);text-decoration:none;-webkit-tap-highlight-color:transparent}
.sp-customer{padding:12px 14px;background:#fff;border:1px solid #ececec;border-radius:18px;box-shadow:0 1px 4px rgba(0,0,0,.05);transition:border-color .15s ease,box-shadow .15s ease}
.sp-customer:hover{border-color:#cfcfcf;box-shadow:0 3px 10px rgba(0,0,0,.08)}
.sp-section{background:#fff;border:1px solid #ececec;border-radius:18px;padding:12px 12px 6px;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.sp-section-head{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;color:#8a8a8a;padding:0 4px 10px}
.sp-count{min-width:22px;height:22px;padding:0 7px;box-sizing:border-box;border-radius:11px;background:#f1f1f2;color:#666;font-size:12px;display:inline-flex;align-items:center;justify-content:center}
.sp-search{position:relative}
.sp-search .ph{position:absolute;right:13px;top:50%;transform:translateY(-50%);color:#9a9a9a;font-size:17px;pointer-events:none}
.sp-search input{width:100%;box-sizing:border-box;height:42px;border:1px solid transparent;border-radius:12px;background:#f4f4f5;padding:0 38px 0 12px;font:inherit;font-size:14px;color:var(--dark-gray);-webkit-appearance:none;appearance:none}
.sp-search input:focus{outline:0;background:#fff;border-color:#cfcfcf}
.sp-list{max-height:44vh;overflow-y:auto;margin-top:6px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sp-row{padding:10px 4px;border-top:1px solid #f1f1f1;transition:background .15s ease,opacity .15s ease}
.sp-row:first-child{border-top:0}
.sp-row:hover{background:#fafafa}
.sp-row[hidden]{display:none}
.sp-avatar{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:#f1f1f2;color:var(--dark-gray);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.sp-avatar .ph{font-size:20px}
.sp-row.is-mine .sp-avatar{background:var(--dark-gray);color:#fff}
.sp-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sp-text b{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-text small{font-size:12px;color:#8a8a8a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-go{color:#b5b5b5;font-size:16px;flex:0 0 auto}
.sp-list.is-busy .sp-row:not(.is-busy){opacity:.45;pointer-events:none}
.sp-row.is-busy .sp-go{width:16px;height:16px;border:2px solid #ddd;border-top-color:var(--dark-gray);border-radius:50%;animation:spSpin .7s linear infinite}
.sp-row.is-busy .sp-go:before{content:none}
@keyframes spSpin{to{transform:rotate(360deg)}}
.sp-empty{text-align:center;color:#9a9a9a;font-size:13px;padding:18px 0}
.sp-empty[hidden]{display:none}
.sp-customer:focus-visible,.sp-row:focus-visible{outline:2px solid var(--dark-gray);outline-offset:-2px;border-radius:12px}
@media (prefers-reduced-motion:reduce){.sp-row.is-busy .sp-go{animation:none}}
.cart-agent-note{margin:14px 0 0;padding:14px 16px;background:#fff;border:1px dashed #e0c48f;border-radius:16px}
.cart-agent-note[hidden]{display:none}
.cart-agent-note-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.cart-agent-note-head label{display:flex;align-items:center;gap:6px;font-weight:700;font-size:15px;color:var(--dark-gray)}
.cart-agent-note-head label .ph{font-size:18px;color:#b26a00}
.cart-agent-note-badge{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:#8a5200;background:#fff4e0;border-radius:999px;padding:3px 9px;white-space:nowrap}
.cart-agent-note textarea{text-align:right;direction:rtl;display:block;width:100%;box-sizing:border-box;min-height:84px;resize:vertical;border:1px solid #e6e6e6;border-radius:12px;background:#fafafa;padding:10px 12px;font:inherit;font-size:14px;line-height:1.5;color:var(--dark-gray)}
.cart-agent-note textarea:focus{outline:0;background:#fff;border-color:#b9b9b9}
.cart-agent-note-foot{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font-size:11.5px;color:#8a8a8a}
.cart-agent-note-foot b{font-weight:600}
.cart-agent-note.is-customer{border:1px solid #f1d3da;background:#fff}
.cart-agent-note.is-customer .cart-agent-note-head label .ph{color:var(--pink)}
.cart-agent-note-optional{font-size:11.5px;font-weight:600;color:#9a9a9a}
.ph.ph-warning-circle:before { content: "\e4e2"; }
.ph.ph-truck:before { content: "\e4b4"; }
.ph.ph-wifi-slash:before { content: "\e4f2"; }
.ph.ph-note-pencil:before { content: "\e34c"; }
.ph.ph-lock-simple:before { content: "\e308"; }

.cat-info-row{flex-wrap:wrap}
.cat-info-row .cat-card-category-row{flex:0 0 100%;display:flex}

/* agent ordering */
.cat-header-compact{display:flex;align-items:center;gap:10px;padding:8px 12px}
.cat-header-compact .cat-menu-toggle{flex:0 0 auto;width:36px;height:36px;font-size:22px}
.cat-header-search{flex:1;min-width:0;margin:0;background:#f3f3f5;box-shadow:none}
.cat-header-search input{padding:8px 10px;font-size:15px;min-width:0}
.cat-header-search .cat-search-btn{width:34px;height:34px}

.agent-catalog .agent-bar{padding:6px 12px}
.agent-catalog .cat-view-toggle{display:none}
.agent-catalog .cat-results-heading{margin-bottom:8px}
.agent-catalog .cat-grid{grid-template-columns:1fr;gap:6px}

.cat-code{display:block;font-size:11px;color:#8a8a8a;line-height:1.3}
.cat-card-agent .cat-agent-qty{margin-top:auto}
.agent-catalog .cat-card-agent{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px;border-radius:12px}
.agent-catalog .cat-card-agent .cat-img-wrap{grid-column:1;grid-row:1;margin:0;width:56px;height:56px;border-radius:8px}
.agent-catalog .cat-card-agent .cat-info-row{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;margin:0;min-width:0}
.agent-catalog .cat-card-agent .cat-name{font-size:13.5px;line-height:1.3;min-height:0;margin:0}
.agent-catalog .cat-card-agent .cat-price-row{flex-direction:row;align-items:baseline;gap:6px}
.agent-catalog .cat-card-agent .cat-price{font-size:14.5px}
.agent-catalog .cat-card-agent .cat-strike{font-size:11px}
.agent-catalog .cat-card-agent .cat-discount-badge{top:2px;left:2px;font-size:9px;padding:1px 4px}
.agent-catalog .cat-card-agent .cat-card-category-row{margin-bottom:1px}
.agent-catalog .cat-card-agent .cat-agent-qty{grid-column:3;grid-row:1;margin:0}
.cat-card-agent.in-cart{background:#fdf3f5}

.cat-agent-qty{display:flex;align-items:center;justify-content:space-between;gap:2px;padding:3px;border:1px solid #e6dadd;border-radius:999px;background:#fff;direction:rtl}
.cat-agent-qty button{width:38px;height:38px;flex:0 0 38px;border:0;border-radius:50%;background:#f1f1f2;color:var(--dark-gray);display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.cat-agent-qty .cat-qty-plus{background:var(--pink);color:#fff}
.cat-agent-qty button:active{transform:scale(.92)}
.cat-qty-input{width:34px;height:38px;border:0;background:none;padding:0;text-align:center;font-family:inherit;font-size:15px;font-weight:800;color:var(--dark-gray);font-variant-numeric:tabular-nums;direction:ltr;-moz-appearance:textfield}
.cat-qty-input:focus{outline:2px solid var(--pink);outline-offset:-2px;border-radius:8px}
.cat-agent-qty.is-zero{border-color:transparent;background:none;padding:0}
.cat-agent-qty.is-zero .cat-qty-input,.cat-agent-qty.is-zero .cat-qty-minus{display:none}
.cat-agent-qty.is-zero .cat-qty-plus{width:44px;height:44px;flex-basis:44px;font-size:18px;box-shadow:0 2px 6px rgba(218,122,140,.35)}

.agent-footer{align-items:center;gap:2px}
.agent-footer .cat-nav-btn{flex:0 0 62px}
.agent-cart-pill{flex:1;min-width:0;height:50px;margin:0 6px 0 4px;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;background:var(--dark-gray);color:#fff;text-decoration:none;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.agent-cart-pill.has-items{background:var(--pink)}
.agent-cart-ico{position:relative;display:flex;font-size:22px}
.agent-cart-ico .cat-cart-badge{top:-7px;left:auto;right:-11px;margin:0;background:#fff;color:var(--dark-gray);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.agent-cart-text{display:flex;align-items:baseline;gap:8px;line-height:1.1;white-space:nowrap}
.agent-cart-label{font-size:14px}
.agent-cart-total{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.agent-cart-total:empty{display:none}

.agp-overlay{position:absolute;inset:0;z-index:1100;border-radius:inherit;overflow:hidden;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .3s}
.agp-overlay.open{opacity:1;visibility:visible;transition:opacity .25s ease}
.agp-sheet{width:100%;height:92%;display:flex;flex-direction:column;background:#F0F1F3;border-radius:18px 18px 0 0;padding:14px 16px 0;transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);direction:rtl}
.agp-overlay.open .agp-sheet{transform:none}
.agp-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.agp-title{margin:0;font-size:1.2rem;font-weight:400;color:var(--dark-gray)}
.agp-title b{font-weight:800}
.agp-close{width:38px;height:38px;flex:0 0 auto;border:0;border-radius:50%;background:#fff;color:var(--dark-gray);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.agp-search{margin:12px 0 6px}
.agp-search input{font-size:16px}
.agp-list-head{font-size:.78rem;font-weight:700;color:#8a8a8a;margin:4px 2px 8px;min-height:1em}
.agp-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px)}
.agp-body .skel-ag-row{height:66px;border-radius:14px;margin-bottom:8px}

.agh-body{display:flex;flex-direction:column}
.agh-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 8px 24px}
.agh-pick{margin-top:22px;width:176px;height:176px;border:0;border-radius:50%;background:var(--pink);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:17px;font-weight:800;cursor:pointer;box-shadow:0 0 0 10px rgba(218,122,140,.14),0 12px 28px rgba(218,122,140,.42);transition:transform .15s ease;-webkit-tap-highlight-color:transparent}
.agh-pick:active{transform:scale(.96)}
.agh-pick:focus-visible{outline:3px solid var(--dark-gray);outline-offset:6px}
.agh-pick-ico{display:flex;font-size:46px}
.agh-hint{margin-top:16px}
.agh-section-head{display:flex;align-items:center;justify-content:space-between;margin:6px 2px 8px;font-size:.78rem;font-weight:700;color:#8a8a8a}
.agh-section-head a{display:inline-flex;align-items:center;gap:2px;color:var(--pink);text-decoration:none}

.ag-tag-draft{display:inline-flex;align-items:center;gap:3px;background:#fff4e0;color:#8a5a00}
.ag-avatar-draft{background:#fff4e0;color:#b26a00;font-size:20px}
.ag-draft-badge{display:inline-block;margin-inline-end:4px;padding:1px 8px;border-radius:999px;background:#fff4e0;color:#8a5a00;font-size:.68rem;font-weight:700}
.ag-order.is-draft{box-shadow:0 1px 4px rgba(0,0,0,.06),inset 0 0 0 1px #f3d58f}
.ag-draft-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.ag-draft-actions .ag-reorder{margin-top:0}
.ag-draft-go{display:inline-flex;align-items:center;gap:4px;padding:9px 16px;border:0;border-radius:999px;background:var(--pink);color:#fff;font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.ag-draft-go.is-busy,.ag-reorder.is-busy{opacity:.6;pointer-events:none}
.ag-draft-delete{margin-inline-start:auto;width:38px;height:38px;border:1px solid #eee;border-radius:50%;background:#fff;color:#c0392b;display:flex;align-items:center;justify-content:center;font-size:17px;cursor:pointer}
.ag-list-head-gap{margin-top:18px}
.ph.ph-user-plus:before { content: "\e4d0"; }
.agent-app{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden}
@media (min-width:561px){ .app.agent-app{height:800px} }
.order-card-head-main{min-width:0}
.order-card-head-side{flex:0 0 auto}
.order-total{white-space:nowrap}
.order-by-agent{max-width:100%;box-sizing:border-box}
.order-by-agent-text{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.order-by-agent .ph{flex:0 0 auto}
.ag-order-meta .order-status{display:inline-block;margin-inline-end:4px;padding:1px 8px;font-size:.68rem;vertical-align:1px}
.cat-card-agent{cursor:pointer;-webkit-tap-highlight-color:transparent}
.cat-card-agent .cat-img-wrap{cursor:pointer}
.cat-card-agent.cat-just-added{animation:agentPulse .35s ease}
@keyframes agentPulse{0%{transform:scale(1)}50%{transform:scale(.985)}100%{transform:scale(1)}}
.app{position:relative}
.ph.ph-seal-percent:before { content: "\e60a"; }
.sales-hero{display:flex;align-items:center;gap:12px;margin:4px 0 14px;padding:14px 16px;border-radius:16px;background:linear-gradient(135deg,#fdeef1,#fff)}
.sales-hero-ico{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:var(--pink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px}
.sales-title{margin:0;font-size:1.25rem;font-weight:400;color:var(--dark-gray)}
.sales-title b{font-weight:800;color:var(--pink)}
.sales-sub{margin:2px 0 0;font-size:.82rem;color:#6f6f6f}

/* agent ordering - round 2 */
.ph.ph-clock-counter-clockwise:before { content: "\e1a0"; }
.agent-bar-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.agent-bar-main .agent-bar-text{flex:none}
.agent-bar-meta{display:flex;align-items:center;gap:6px;min-width:0;font-size:11px;color:#8a6a2a;white-space:nowrap;overflow:hidden}
.agent-bar-tag{padding:0 7px;border-radius:999px;background:#fbe3c2;color:#7a4b00;font-weight:700;font-size:10.5px;line-height:16px}
.agent-bar-save{display:inline-flex;align-items:center;gap:3px;font-weight:700}
.agent-bar-save:empty{display:none}
.agent-bar-save.is-saving{color:#8a8a8a}
.agent-bar-save.is-saved{color:#2f9e5b}
.agent-bar-save.is-error{color:#c0392b}
.agp-recent{margin:2px 0 6px}
.agp-recent[hidden]{display:none}
.agp-recent-row{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none}
.agp-recent-row::-webkit-scrollbar{display:none}
.agp-chip{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;width:68px;padding:0;border:0;background:none;font-family:inherit;cursor:pointer;color:var(--dark-gray)}
.agp-chip .ag-avatar{width:46px;height:46px;font-size:18px;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.agp-chip-name{font-size:11px;line-height:1.25;text-align:center;max-width:68px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.agp-chip.is-busy{opacity:.6}
.agent-toast{position:absolute;left:16px;right:16px;bottom:92px;z-index:1200;margin:0 auto;max-width:360px;padding:11px 16px;border-radius:14px;background:#2f2f2f;color:#fff;font-size:13.5px;font-weight:700;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.agent-toast.show{opacity:1;transform:none}
.agent-toast[hidden]{display:none}
.cat-incart-btn b{min-width:18px;padding:0 5px;border-radius:999px;background:#f1f1f2;font-size:11px;line-height:18px;text-align:center}
.cat-incart-btn.is-on{background:var(--pink);color:#fff}
.cat-incart-btn.is-on .ph{color:#fff}
.cat-incart-btn.is-on b{background:#fff;color:var(--pink)}
.cat-reorder-bar{display:flex;align-items:center;gap:8px;width:100%;margin:-4px 0 12px;padding:11px 14px;border:0;border-radius:14px;background:var(--pink);color:#fff;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 4px 12px rgba(218,122,140,.3)}
.cat-reorder-bar .ag-go-text{flex:1;text-align:right}
.cat-reorder-bar.is-busy{opacity:.7;pointer-events:none}
.dash-cat-bought .dash-cat-ico{background:#fdeef1;color:var(--pink)}
.agent-again-btn{display:flex;align-items:center;justify-content:center}

.order-status-partial{background:#fff3df;color:#b26a00}

/* Driver app: same building blocks as the customer app (header, greeting, cards, pills, bottom nav) */
.ph.ph-calendar-blank:before { content: "\e10a"; }
.dr-body{background:#eee}
.dr-avatar{width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:3px solid #fff;border-radius:50%;box-sizing:border-box;background:#e9c7cd;color:#fff;font-weight:800;font-size:16px;box-shadow:0 3px 9px rgba(0,0,0,.16)}
.dr-app .dash-greeting{padding-bottom:12px}
.dr-daybar{display:flex;align-items:center;gap:10px;margin:2px 0 10px}
.dr-daytitle{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;line-height:1.25}
.dr-daytitle b{font-size:1.15rem;font-weight:800;color:var(--dark-gray)}
.dr-daytitle span{font-size:.78rem;color:#9a9a9a}
.dr-arrow{width:40px;height:40px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:#fff;color:var(--dark-gray);font-size:18px;box-shadow:0 1px 4px rgba(0,0,0,.08);cursor:pointer;-webkit-tap-highlight-color:transparent}
.dr-arrow:active{transform:scale(.94)}
.dr-back{display:inline-flex;align-items:center;gap:2px;margin:0 2px 10px;padding:0;border:0;background:none;color:var(--pink);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.dr-back[hidden]{display:none}
.dr-summary{background:#fff;border-radius:14px;box-shadow:0 1px 4px rgba(0,0,0,.06);padding:12px 14px;margin-bottom:12px}
.dr-summary[hidden]{display:none}
.dr-summary-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.88rem;color:#6f6f6f}
.dr-summary-row b{font-size:1.05rem;color:var(--dark-gray)}
.dr-bar{display:flex;height:6px;margin-top:10px;border-radius:999px;background:#f1f1f2;overflow:hidden}
.dr-bar i{display:block;height:100%;transition:width .4s ease}
.dr-bar .is-done{background:#2f9e5b}
.dr-bar .is-partial{background:#e8a13a}
.dr-list{display:flex;flex-direction:column;gap:10px;padding-bottom:8px}
.dr-card{display:block;width:100%;box-sizing:border-box;background:#fff;border:0;border-radius:14px;box-shadow:0 1px 4px rgba(0,0,0,.06);overflow:hidden;font:inherit;color:var(--dark-gray);text-align:right}
.dr-card.is-next{box-shadow:0 1px 4px rgba(0,0,0,.06),inset 0 0 0 2px var(--pink)}
.dr-card.is-done .dr-card-main b,.dr-card.is-done .dr-card-time{color:#9a9a9a}
.dr-card-head,.dr-week-day{width:100%;display:flex;align-items:center;gap:12px;padding:14px;border:0;background:none;font:inherit;color:inherit;text-align:right;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dr-week-day{background:#fff}
.dr-card-time{flex:0 0 auto;min-width:48px;font-size:1.05rem;font-weight:800;font-variant-numeric:tabular-nums}
.dr-card-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.dr-card-main b{font-size:.98rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-card-address{font-size:.86rem;color:var(--dark-gray);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-card-main small{font-size:.78rem;color:#9a9a9a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.dr-card-side{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.dr-caret{color:#b3b3b3;font-size:16px;transition:transform .2s ease}
.dr-card.is-open .dr-caret{transform:rotate(-90deg)}
.dr-pill{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;border-radius:999px;padding:4px 10px;white-space:nowrap}
.dr-pill.is-open{background:#eaf3ff;color:#2b6cb0}
.dr-pill.is-next{background:#fdeef1;color:var(--pink)}
.dr-pill.is-done{background:#e8f8ee;color:#2f9e5b}
.dr-pill.is-partial{background:#fff3df;color:#b26a00}
.dr-card-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px;border-top:1px solid #f2f2f3}
.dr-actions{display:flex;gap:8px}
.dr-actions .dr-btn{flex:1}
.dr-btn{display:flex;align-items:center;justify-content:center;gap:6px;height:46px;padding:0 16px;border-radius:999px;border:0;font:inherit;font-size:.95rem;font-weight:700;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;box-sizing:border-box}
.dr-btn .ph{font-size:18px}
.dr-btn:active{transform:scale(.98)}
.dr-btn:disabled{opacity:.45;cursor:default}
.dr-btn-dark{background:var(--dark-gray);color:#fff}
.dr-btn-outline{background:#fff;color:var(--dark-gray);box-shadow:inset 0 0 0 1px #e3e3e5}
.dr-btn-primary{width:100%;background:var(--pink);color:#fff;box-shadow:0 3px 10px rgba(218,122,140,.35)}
.dr-btn-ghost{width:100%;background:none;color:#6f6f6f;height:42px}
.dr-note{padding:10px 12px;border-radius:12px;background:#fff7e8;color:#6b4a10;font-size:.88rem}
.dr-note b{display:flex;align-items:center;gap:5px;font-size:.8rem;margin-bottom:3px}
.dr-note p{margin:0;white-space:pre-wrap}
.dr-note.is-partial{background:#fff3df}
.dr-items{border-radius:12px;background:#f6f6f7;padding:10px 12px;font-size:.88rem}
.dr-items summary{display:flex;align-items:center;gap:6px;font-weight:700;cursor:pointer;list-style:none}
.dr-items summary::-webkit-details-marker{display:none}
.dr-items ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.dr-items li{display:flex;gap:8px}
.dr-items li b{flex:0 0 auto;min-width:26px;color:var(--pink)}
.dr-items li span{display:flex;flex-direction:column;gap:1px}
.dr-items small{color:#8a8a8a;font-size:.75rem}
.dr-close{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.dr-done-line{display:flex;align-items:center;justify-content:center;gap:6px;font-weight:700;color:#2f9e5b}
.dr-week-date{flex:0 0 auto;width:44px;height:44px;border-radius:12px;background:#f6f6f7;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05}
.dr-week-date b{font-size:1.05rem;font-weight:800}
.dr-week-date small{font-size:.65rem;color:#9a9a9a}
.dr-week-day.is-today .dr-week-date{background:var(--pink);color:#fff}
.dr-week-day.is-today .dr-week-date small{color:#fff}
.dr-week-day.is-empty{opacity:.65}
.dr-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:36px 10px;color:#8a8a8a;text-align:center}
.dr-empty-ico{width:64px;height:64px;border-radius:50%;background:#fdeef1;color:var(--pink);display:flex;align-items:center;justify-content:center;font-size:30px}
.dr-skel{height:72px;border-radius:14px;background:linear-gradient(90deg,#f4f4f5 25%,#fafafa 50%,#f4f4f5 75%);background-size:200% 100%;animation:drShimmer 1.2s ease-in-out infinite;margin-bottom:10px}
@keyframes drShimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
.dr-sheet-wrap{position:absolute;inset:0;z-index:1100;border-radius:inherit;overflow:hidden;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;opacity:0;transition:opacity .2s ease}
.dr-sheet-wrap.show{opacity:1}
.dr-sheet-wrap[hidden]{display:none}
.dr-sheet{width:100%;box-sizing:border-box;background:#fff;border-radius:22px 22px 0 0;padding:10px 18px calc(env(safe-area-inset-bottom,0px) + 16px);text-align:center;transform:translateY(24px);transition:transform .2s ease}
.dr-sheet-wrap.show .dr-sheet{transform:none}
.dr-sheet-handle{display:block;width:40px;height:4px;border-radius:999px;background:#e3e3e5;margin:0 auto 12px}
.dr-sheet-ico{width:56px;height:56px;margin:0 auto 8px;border-radius:50%;background:#fdeef1;color:var(--pink);display:flex;align-items:center;justify-content:center;font-size:28px}
.dr-sheet-ico.is-partial{background:#fff3df;color:#b26a00}
.dr-sheet h3{margin:0 0 4px;font-size:1.15rem;font-weight:800;color:var(--dark-gray)}
.dr-sheet p{margin:0 0 14px;color:#8a8a8a;font-size:.9rem}
.dr-sheet-label{display:block;margin:0 0 6px;font-weight:700;text-align:right;font-size:.9rem}
.dr-sheet-label span{font-weight:400;color:#c0392b}
.dr-sheet-note{display:block;width:100%;box-sizing:border-box;margin-bottom:12px;padding:12px;border:1px solid #e3e3e5;border-radius:14px;font:inherit;font-size:.95rem;resize:vertical}
.dr-sheet-note:focus{outline:0;border-color:var(--pink);box-shadow:0 0 0 3px rgba(218,122,140,.2)}
@media (prefers-reduced-motion:reduce){.dr-skel{animation:none}.dr-sheet,.dr-sheet-wrap,.dr-caret,.dr-bar i{transition:none}}
.dr-card.is-fresh{animation:drFresh 3s ease-out both}
@keyframes drFresh{0%{opacity:0;transform:translateY(-8px);background:#fdf0f2;box-shadow:0 0 0 3px rgba(218,122,140,.6)}20%{opacity:1;transform:none;background:#fdf0f2}100%{box-shadow:0 0 0 0 rgba(218,122,140,0)}}
@media (prefers-reduced-motion:reduce){.dr-card.is-fresh{animation:none;box-shadow:0 0 0 2px var(--pink)}}
/* Driver delivery statuses (same palette as the office calendars) */
.dr-pill.is-open{background:#dbeafe;color:#1e3a8a}
.dr-pill.is-todo{background:#fdba74;color:#431407}
.dr-pill.is-done{background:#bbf7d0;color:#14532d}
.dr-pill.is-partial{background:repeating-linear-gradient(135deg,#bbf7d0 0,#bbf7d0 6px,#86efac 6px,#86efac 12px);color:#14532d}
.dr-pill.is-cancelled{background:#fecaca;color:#7f1d1d}
.dr-card.is-cancelled{background:#fff7f7;box-shadow:inset 0 0 0 1px #fecaca}
.dr-card.is-cancelled .dr-card-main b,.dr-card.is-cancelled .dr-card-time{color:#8a5a5a;text-decoration:line-through}
.dr-note.is-cancelled{background:#fef2f2;border-color:#fecaca;color:#7f1d1d}
/* Order statuses = delivery statuses (same palette as the office calendars) */
.order-status-scheduled{background:#dbeafe;color:#1e3a8a}
.order-status-todo{background:#fdba74;color:#431407}
.order-status-delivered{background:#bbf7d0;color:#14532d}
.order-status-partial{background:repeating-linear-gradient(135deg,#bbf7d0 0,#bbf7d0 6px,#86efac 6px,#86efac 12px);color:#14532d}
.order-status-cancelled{background:#fecaca;color:#7f1d1d}
/* PWA: install / permissions invitation (bottom sheet on phones, centered card on wide screens; sizes in multiples of 4) */
.pwa-wrap{position:fixed;inset:0;z-index:3000;display:flex;align-items:flex-end;justify-content:center;background:rgba(20,20,20,0);transition:background .2s ease}
.pwa-wrap.is-open{background:rgba(20,20,20,.48)}
.pwa-sheet{position:relative;width:100%;max-width:440px;box-sizing:border-box;background:#fff;border-radius:24px 24px 0 0;padding:32px 24px calc(24px + env(safe-area-inset-bottom));text-align:center;color:var(--dark-gray);transform:translateY(100%);transition:transform .24s ease;box-shadow:0 -8px 32px rgba(0,0,0,.16)}
.pwa-wrap.is-open .pwa-sheet{transform:none}
.pwa-x{position:absolute;top:12px;left:12px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;background:#f4f4f4;color:#555;font-size:20px;line-height:1;cursor:pointer}
.pwa-x i{display:block;line-height:1}
.pwa-icon{display:block;width:64px;height:64px;margin:0 auto 16px;border-radius:16px;box-shadow:0 4px 16px rgba(0,0,0,.12)}
.pwa-sheet h2{margin:0 0 8px;font-size:20px;line-height:28px;font-weight:700}
.pwa-sheet p{margin:0 0 16px;font-size:16px;line-height:24px;color:#555}
.pwa-steps,.pwa-perms{list-style:none;margin:0 0 24px;padding:0;text-align:right}
.pwa-steps{counter-reset:pwa}
.pwa-steps li,.pwa-perms li{display:flex;align-items:center;gap:12px;padding:12px 16px;margin-bottom:8px;border-radius:12px;background:#fafafa;font-size:16px;line-height:24px}
.pwa-steps li{counter-increment:pwa;justify-content:space-between}
.pwa-steps li span::before{content:counter(pwa) ". ";font-weight:700;color:var(--pink)}
.pwa-steps li i,.pwa-perms li i{flex:0 0 auto;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fdf0f2;color:var(--pink);font-size:24px;line-height:1}
.pwa-perms li span{display:flex;flex-direction:column;font-size:14px;line-height:20px;color:#666}
.pwa-perms li b{font-size:16px;line-height:24px;color:var(--dark-gray)}
.pwa-actions{display:flex;flex-direction:column;gap:8px}
.pwa-actions button{height:48px;border-radius:12px;font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.pwa-primary{border:0;background:var(--pink);color:#fff}
.pwa-secondary{border:1px solid #ddd;background:#fff;color:#555}
.pwa-sheet button:focus-visible{outline:3px solid rgba(218,122,140,.5);outline-offset:2px}
@media (min-width:600px){.pwa-wrap{align-items:center}.pwa-sheet{border-radius:24px;padding-bottom:24px;transform:translateY(16px);opacity:0;transition:transform .2s ease,opacity .2s ease}.pwa-wrap.is-open .pwa-sheet{opacity:1}}
@media (prefers-reduced-motion:reduce){.pwa-wrap,.pwa-sheet{transition:none}}
.pwa-glyph svg{display:block}
/* Privacy policy page (public: plain header when signed out) */
.pp-header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;background:#fff;border-bottom:1px solid #eee}
.pp-header-back{display:inline-flex;align-items:center;gap:4px;color:var(--dark-gray);font-size:14px;text-decoration:none}
.pp-header-logo{height:24px;width:auto}
.pp-body{min-height:0}
.pp-doc{max-width:720px;margin:0 auto 16px;padding:24px 20px;background:#fff;border-radius:16px;color:var(--dark-gray);font-size:15px;line-height:1.7}
.pp-doc h1{margin:0 0 4px;font-size:22px;line-height:32px;font-weight:800}
.pp-updated{margin:0 0 16px;font-size:13px;color:#888}
.pp-doc h2{margin:24px 0 8px;font-size:17px;line-height:24px;font-weight:700}
.pp-doc p{margin:0 0 12px}
.pp-doc ul{margin:0 0 12px;padding:0 20px 0 0;list-style:disc}
.pp-doc li{margin-bottom:6px}
.pp-doc a{color:#b4506a;text-decoration:underline}
.pp-public .pp-body{padding-top:16px}
/* Driver close actions: partial and cancel are two equal quiet buttons side by side; the confirm of a cancel is red inside its sheet */
.dr-close-alt{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dr-btn-alt{height:40px;padding:0 8px;background:#fff;color:#555;font-size:.85rem;font-weight:600;box-shadow:inset 0 0 0 1px #e3e3e5}
.dr-btn-alt .ph{font-size:16px;color:#8a8a8a}
.dr-btn-alt:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.dr-btn-danger{width:100%;background:#c0392b;color:#fff}
.dr-btn-danger:disabled,.dr-btn-primary:disabled{opacity:.45}
.dr-sheet-ico.is-cancel{background:#fde8e8;color:#b42318}
/* Driver: the customer's agent with a call button, under the navigate / call row */
.dr-agent{display:flex;align-items:center;gap:12px;margin-top:12px;padding:8px 12px;border-radius:12px;background:#f7f7f8}
.dr-agent-ico{flex:0 0 auto;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;color:#666;font-size:18px}
.dr-agent-text{flex:1;min-width:0;display:flex;flex-direction:column}
.dr-agent-text small{font-size:.75rem;color:#8a8a8a}
.dr-agent-text b{font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-sheet-note::placeholder{color:#b8b8b8;opacity:1}
a.dr-agent{text-decoration:none;color:inherit}
.dr-agent.is-call .dr-agent-ico{background:var(--pink);color:#fff}
.dr-agent.is-call:active{background:#f0f0f2}
.dr-agent.is-call:focus-visible{outline:2px solid var(--pink);outline-offset:2px}