/* Yebrax Rests UI — v0.4.x */ /* Theme system - Default: Light - Dark when: */ :root{ --font-ui:"Tajawal",system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif; /* brand */ --brand:#0ea5e9; --brand2:#22c55e; --danger:#ef4444; --ok:#22c55e; --warn:#f59e0b; /* light (more comfortable) */ --page_bg:#f4f6fb; --topbar_bg:rgba(255,255,255,.78); --card_bg:rgba(255,255,255,.94); --field_bg:rgba(255,255,255,.96); --btn_bg:rgba(255,255,255,.92); --overlay_bg:rgba(255,255,255,.74); --toast_bg:rgba(255,255,255,.94); --text:#0b1320; --muted:#586274; --border:rgba(15,23,42,.10); --shadow:0 22px 70px rgba(2,6,23,.09); } /* English UI: use system font stack (Tajawal makes Latin feel heavy) */ html[lang="en"]{ --font-ui: system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif; } html[data-theme='dark']{ --page_bg:#0b1220; /* Reduce excessive transparency for readability (menu/sidebar/cards) */ /* Make surfaces more solid (less glass) */ --topbar_bg:rgba(16,27,49,.94); --card_bg:rgba(16,27,49,.96); --field_bg:rgba(9,14,28,.86); --btn_bg:rgba(16,27,49,.88); --overlay_bg:rgba(16,27,49,.92); --toast_bg:rgba(16,27,49,.92); --text:#eaf1ff; --muted:#9db0d1; --border:rgba(255,255,255,.08); --shadow:0 20px 60px rgba(0,0,0,.30); } *{box-sizing:border-box} html,body{ font-family:var(--font-ui); text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } body{margin:0;font-weight:500;color:var(--text);background: var(--page_bg);} html[lang="en"] body{font-weight:400;} a{color:inherit} .container{max-width:1100px;margin:0 auto;padding:18px} .topbar{display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:14px 18px;border:1px solid var(--border);background:var(--topbar_bg);backdrop-filter: blur(10px);border-radius:18px;position:sticky;top:10px;z-index:20;box-shadow:var(--shadow)} .brand{display:flex;align-items:center;gap:10px;text-decoration:none} .brand img{width:36px;height:36px;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.18)} .brand b{font-size:15px;letter-spacing:.2px} .nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end} .nav a{text-decoration:none;color:var(--muted);position:relative} .nav a:hover{color:var(--text)} .card{border:1px solid var(--border);background:var(--card_bg);backdrop-filter: blur(10px);border-radius:18px;padding:16px;box-shadow:var(--shadow)} .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px} .col-1{grid-column:span 1} .col-2{grid-column:span 2} .col-3{grid-column:span 3} .col-4{grid-column:span 4} .col-5{grid-column:span 5} .col-6{grid-column:span 6} .col-7{grid-column:span 7} .col-8{grid-column:span 8} .col-9{grid-column:span 9} .col-10{grid-column:span 10} .col-11{grid-column:span 11} .col-12{grid-column:span 12} @media(max-width:900px){ .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11{grid-column:span 12} } /* Presets grid: keep 2 columns on tablets */ @media(max-width:900px){ .preset-grid .col-3{grid-column:span 6} } @media(max-width:520px){ .preset-grid .col-3{grid-column:span 12} } h1,h2,h3{margin:0 0 10px 0;font-weight:800} html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3{font-weight:700} p{margin:0 0 10px 0;color:var(--muted);line-height:1.55} button, input, select, textarea{font-family:inherit} input,select,textarea{width:100%;padding:11px 12px;border-radius:12px;border:1px solid var(--border);background:var(--field_bg);color:var(--text);outline:none} textarea{min-height:90px;resize:vertical} label{font-size:12px;color:var(--muted)} .row{display:flex;gap:12px;flex-wrap:wrap} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid var(--border);background:var(--btn_bg);color:var(--text);text-decoration:none;cursor:pointer;transition:transform .06s ease, opacity .2s ease} .btn:active{transform:translateY(1px)} .btn.primary{background:linear-gradient(90deg, var(--brand), var(--brand2));border:0;color:#fff} .btn.danger{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.32);color:rgba(239,68,68,.95)} .btn .ic{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 18px} .btn .ic svg{width:18px;height:18px;display:block} html[dir="rtl"] .ic.flip-rtl svg{transform:scaleX(-1)} .badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);color:var(--muted);font-size:12px} .badge.ok{color:rgba(34,197,94,.95);border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.10)} .badge.danger{color:rgba(239,68,68,.95);border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.10)} .badge.new{color:rgba(239,68,68,.95);border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.10);font-weight:800;letter-spacing:.3px} .badge.hot{color:rgba(234,88,12,.95);border-color:rgba(234,88,12,.35);background:rgba(234,88,12,.10)} .badge.veg{color:rgba(34,197,94,.95);border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.10)} .badge.gf{color:rgba(59,130,246,.95);border-color:rgba(59,130,246,.35);background:rgba(59,130,246,.10)} .badge.chef{color:rgba(245,158,11,.95);border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.10)} .badge.sm{padding:2px 7px;font-size:11px;line-height:1;border-radius:999px} /* Product badges container */ .product-badges{opacity:.78;margin-top:8px;display:flex;gap:8px;flex-wrap:wrap} .product-badges .badge-ico{display:inline-flex;align-items:center;justify-content:center;line-height:1} .product-badges .badge-text{white-space:nowrap} /* Icons-only badges for Grid/Compact layouts */ .menu-layout-grid .product-badges .badge-text, .menu-layout-compact .product-badges .badge-text{display:none} .menu-layout-grid .product-badges .badge, .menu-layout-compact .product-badges .badge{gap:0;padding:6px 9px} /* Hide meta badges (images/calories/allergens) in Grid/Compact to avoid clutter */ .menu-layout-grid .product-badges .badge-meta, .menu-layout-compact .product-badges .badge-meta{display:none} .table{width:100%;border-collapse:collapse;margin-top:8px} .table th,.table td{padding:10px 10px;border-bottom:1px solid var(--border);text-align:left;font-size:13px} .table th{color:var(--muted);font-weight:600} html[dir="rtl"] .table th,html[dir="rtl"] .table td{text-align:right} .hero{display:flex;align-items:center;justify-content:flex-start;gap:18px} .hero .title{font-size:20px} .notice{padding:12px 14px;border:1px dashed rgba(245,158,11,.45);background:rgba(245,158,11,.08);border-radius:14px;color:rgba(245,158,11,.95)} .notice.danger{border:1px dashed rgba(239,68,68,.45);background:rgba(239,68,68,.10);color:rgba(239,68,68,.95)} .notice.ok{border:1px dashed rgba(34,197,94,.45);background:rgba(34,197,94,.10);color:rgba(34,197,94,.95)} .banner{border-radius:18px;overflow:hidden;border:1px solid var(--border);position:relative;box-shadow:var(--shadow)} .banner img{width:100%;height:auto;display:block} .banner .overlay{position:absolute;left:14px;right:14px;bottom:14px;display:flex;align-items:flex-end;justify-content:flex-start;gap:10px} .banner .overlay .txt{background:var(--overlay_bg);border:1px solid var(--border);backdrop-filter: blur(8px);padding:10px 12px;border-radius:14px} .small{font-size:12px;color:var(--muted)} .muted{color:var(--muted)} /* toast */ .yr-toast{position:fixed;right:18px;bottom:18px;z-index:9999;display:flex;flex-direction:column;gap:10px;max-width:min(420px,92vw)} .yr-toast .t{padding:12px 14px;border-radius:16px;border:1px solid var(--border);background:var(--toast_bg);backdrop-filter: blur(10px);box-shadow:var(--shadow)} .yr-toast .t b{display:block;margin-bottom:4px} /* notifications badge */ .yr-badge{position:absolute;top:-6px;right:-10px;min-width:18px;height:18px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;line-height:18px;border-radius:999px;background:rgba(239,68,68,.95);color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.25)} .theme-toggle{padding:9px 12px} /* ================================ Panel Shell (Sidebar Layout) ================================ */ .panel-layout{display:flex;min-height:100vh;background:var(--page_bg)} /* RTL/LTR sidebar placement (Arabic: right, English: left) IMPORTANT: do NOT use row-reverse for RTL. With dir="rtl", flex row already starts from the right. */ .panel-layout.is-rtl{flex-direction:row;} .panel-layout.is-ltr{flex-direction:row;} .panel-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);z-index:40} .panel-sidebar{width:280px;flex:0 0 280px;background:var(--card_bg);border:1px solid var(--border);border-top:0;border-bottom:0;border-radius:0;margin:0;padding:14px;position:sticky;top:0;height:100vh;overflow:auto;z-index:50} html[dir="rtl"] .panel-sidebar{border-left:1px solid var(--border);border-right:0} .panel-layout[data-rtl="1"] .panel-sidebar{border-left:1px solid var(--border);border-right:0} html[dir="ltr"] .panel-sidebar{border-right:1px solid var(--border);border-left:0} .panel-sidebar__brand{display:flex;align-items:center;gap:10px;padding:8px 8px 12px;border-bottom:1px solid var(--border);margin-bottom:10px} .panel-sidebar__brand img{width:38px;height:38px;border-radius:12px;object-fit:contain;background:rgba(0,0,0,.03);border:1px solid var(--border)} .panel-sidebar__brand .title{font-weight:800;line-height:1.2} .panel-nav{display:flex;flex-direction:column;gap:6px;margin-top:10px} .panel-nav__item{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:12px;color:var(--text);text-decoration:none;border:1px solid transparent} .panel-nav__item:hover{background:rgba(0,0,0,.04);border-color:var(--border)} .panel-nav__item.active{background:rgba(15,120,255,.10);border-color:rgba(15,120,255,.25)} .panel-nav__item .ic{width:26px;display:inline-flex;justify-content:center} .panel-nav__item .lb{flex:1;font-weight:800} html[lang="en"] .panel-nav__item .lb{font-weight:700} .panel-page-title{font-weight:800} html[lang="en"] .panel-page-title{font-weight:800} .panel-sidebar__foot{margin-top:12px;padding-top:10px;border-top:1px solid var(--border)} .panel-main{flex:1;min-width:0;padding:18px} html[dir="rtl"] .panel-main{padding:18px} .panel-topbar{display:flex;align-items:center;justify-content:flex-start;gap:10px;background:var(--card_bg);border:1px solid var(--border);border-radius:16px;padding:10px 12px;margin-bottom:14px;position:sticky;top:12px;z-index:10} .panel-topbar__left{display:flex;align-items:center;gap:10px;min-width:0} .panel-topbar__title{min-width:0} .panel-topbar__right{display:flex;align-items:center;gap:8px} .panel-content{padding:0 0 24px} @media(max-width: 980px){ .panel-overlay.show{display:block} /* Mobile drawer */ .panel-sidebar{position:fixed;top:0;bottom:0;left:0;right:auto;height:auto;margin:0;border-radius:0;width:300px;max-width:min(86vw,320px);transform:translateX(-102%);transition:transform .2s ease;z-index:99999;will-change:transform} /* RTL mobile: slide from the right (works even if panel-layout class changes) */ html[dir="rtl"] .panel-sidebar{left:auto;right:0;transform:translateX(102%)} .panel-layout[data-rtl="1"] .panel-sidebar{left:auto;right:0;transform:translateX(102%)} .panel-layout.is-rtl .panel-sidebar{left:auto !important;right:0 !important} /* IMPORTANT: In RTL we set transform on a more-specific selector (.panel-layout[data-rtl] .panel-sidebar). Ensure 'open' always wins. */ .panel-sidebar.open{transform:translateX(0) !important} /* Stronger guard: if JS adds body.sb-open but class 'open' is lost/cached, still force the drawer to show on mobile. This fixes the "overlay only" issue. */ body.sb-open #yrPanelSidebar{transform:translateX(0) !important; display:block !important; visibility:visible !important} /* Overlay must stay behind sidebar */ .panel-overlay{z-index:99998} .panel-main{padding:12px} html[dir="rtl"] .panel-main{padding:12px} .panel-topbar{top:12px} } /* Theme page color inputs */ .color-row{display:flex;flex-direction:column;gap:8px} .color-inputs{display:flex;align-items:center;gap:10px} .color-inputs input[type="color"]{width:52px;height:42px;padding:0;border-radius:12px;border:1px solid var(--border);background:transparent} .color-inputs input[type="text"]{flex:1} /* Inset / sub-cards (cards inside cards) */ .card.subcard{ box-shadow:0 12px 28px rgba(2,6,23,.06); background:rgba(255,255,255,.88); } html[data-theme='dark'] .card.subcard{ box-shadow:0 12px 32px rgba(0,0,0,.25); background:rgba(16,27,49,.70); } /* ========================= Billing Plans (Plan cards) ========================= */ .plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} @media(max-width:700px){.plan-grid{grid-template-columns:1fr}} .plan-card{cursor:pointer;padding:14px;transition:transform .06s ease,border-color .2s ease,background .2s ease} .plan-card:hover{transform:translateY(-1px)} .plan-card.selected{border-color:rgba(14,165,233,.65);background:linear-gradient(180deg, rgba(14,165,233,.10), rgba(34,197,94,.06))} html[data-theme='dark'] .plan-card.selected{background:linear-gradient(180deg, rgba(14,165,233,.18), rgba(34,197,94,.08))} .plan-card__head{display:flex;align-items:flex-start;justify-content:flex-start;gap:10px} .plan-card__title{min-width:0} .plan-card__badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end} .plan-card__foot{display:flex;align-items:flex-end;justify-content:flex-start;gap:12px;margin-top:12px} .plan-card__amount{font-size:18px;font-weight:900;letter-spacing:.2px;color:var(--text)} html[lang="en"] .plan-card__amount{font-weight:800} .plan-card__price .small{opacity:.75} .plan-card__radio{width:auto;accent-color:var(--brand);transform:scale(1.08);margin:0} /* ========================= Theme Presets (Preset cards) ========================= */ .preset-card{cursor:pointer;padding:12px;display:flex;flex-direction:column;gap:12px;transition:transform .06s ease,border-color .2s ease,background .2s ease} .preset-card:hover{transform:translateY(-1px)} .preset-card.selected{border-color:rgba(14,165,233,.65);background:linear-gradient(180deg, rgba(14,165,233,.08), rgba(255,255,255,0))} html[data-theme='dark'] .preset-card.selected{background:linear-gradient(180deg, rgba(14,165,233,.16), rgba(16,27,49,0))} .preset-card__preview{border-radius:14px;border:1px solid var(--border);background:var(--b);overflow:hidden;height:78px;position:relative} .preset-card__bar{height:18px;background:var(--p)} .preset-card__content{position:absolute;inset:22px 10px 10px 10px;display:flex;align-items:flex-start;justify-content:flex-start;gap:10px} .preset-card__pill{width:44%;height:14px;border-radius:999px;background:var(--a);opacity:.92} .preset-card__mini{flex:1;height:40px;border-radius:12px;background:var(--c);border:1px solid rgba(0,0,0,.06)} html[data-theme='dark'] .preset-card__mini{border-color:rgba(255,255,255,.08)} .preset-card__meta{display:flex;flex-direction:column;gap:8px} .preset-card__top{display:flex;align-items:center;justify-content:flex-start;gap:10px} .preset-card__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .preset-card__swatches{display:flex;gap:6px;flex-wrap:wrap} .preset-card__swatches .sw{width:14px;height:14px;border-radius:999px;border:1px solid rgba(0,0,0,.08)} html[data-theme='dark'] .preset-card__swatches .sw{border-color:rgba(255,255,255,.10)} .preset-card__radio{accent-color:var(--brand);transform:scale(1.05);margin:0} .menu-scope{background:var(--page_bg);min-height:100vh} /* Prevent horizontal overflow in public menu */ .menu-scope{overflow-x:hidden} .menu-scope .container{width:100%} /* Public menu background: soft, restaurant-friendly */ .menu-scope{position:relative;isolation:isolate} .menu-scope::before, .menu-scope::after{content:'';position:absolute;inset:auto;z-index:-1;pointer-events:none;filter:blur(38px);opacity:.55} .menu-scope::before{width:520px;height:520px;top:-160px;left:-180px;background:color-mix(in srgb, var(--brand) 28%, transparent);border-radius:50%} .menu-scope::after{width:560px;height:560px;top:180px;right:-220px;background:color-mix(in srgb, var(--brand2) 24%, transparent);border-radius:50%} @supports not (background: color-mix(in srgb, #000 50%, #fff)){ .menu-scope::before{background:rgba(14,165,233,.18)} .menu-scope::after{background:rgba(34,197,94,.14)} } /* ========================= Menu hero header (premium) ========================= */ .menu-hero{padding:14px;border-radius:var(--radius,18px);overflow:hidden;position:relative} .menu-hero-bg{position:absolute;inset:0;z-index:0;background-image:var(--hero_img);background-size:cover;background-position:center;filter:saturate(1.05) contrast(1.02);transform:scale(1.06)} .menu-hero::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(120deg, rgba(0,0,0,.62), rgba(0,0,0,.22));} .menu-hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg, color-mix(in srgb, var(--brand) 72%, transparent), color-mix(in srgb, var(--brand2) 62%, transparent));opacity:.92} .menu-hero-top{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:flex-start;gap:12px} .menu-hero-brand{display:flex;align-items:flex-start;gap:12px;min-width:0} .menu-logo{width:54px;height:54px;border-radius:18px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);box-shadow:0 18px 45px rgba(0,0,0,.22)} .menu-hero-title{min-width:0} .menu-title{font-weight:900;font-size:20px;line-height:1.12;color:var(--hero_text, #fff);letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 18px rgba(0,0,0,.35)} .menu-chips{margin-top:6px;display:flex;flex-wrap:wrap;gap:8px} .menu-hero .badge{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.22);color:var(--hero_text, #fff)} .menu-hero .badge.ok{background:rgba(34,197,94,.22);border-color:rgba(34,197,94,.28)} .menu-hero .badge.danger{background:rgba(239,68,68,.22);border-color:rgba(239,68,68,.26)} .menu-subline{margin-top:8px;display:flex;align-items:center;gap:8px;color:var(--hero_muted, rgba(255,255,255,.92));font-size:13px;max-width:820px} .menu-hero-controls{position:relative;display:flex;justify-content:flex-end} .menu-ctrl-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end} .menu-ctrl-form select{width:auto;min-width:92px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.14);color:var(--hero_text, #fff);backdrop-filter:blur(10px)} .menu-ctrl-form .btn{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.14);color:var(--hero_text, #fff)} .menu-ctrl-form .btn:hover{background:rgba(255,255,255,.20)} .menu-hero-sub{position:relative;z-index:2;margin-top:12px;display:flex;flex-direction:column;gap:10px} .menu-actions{display:flex;gap:10px;flex-wrap:wrap} .act-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;text-decoration:none;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.16);color:var(--hero_text, #fff);backdrop-filter:blur(10px);transition:transform .12s ease, background .2s ease, border-color .2s ease} .act-pill:hover{transform:translateY(-1px);background:rgba(255,255,255,.20)} .act-pill.wa{background:rgba(34,197,94,.20);border-color:rgba(34,197,94,.28)} .act-pill .act-ic{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center} .act-pill svg{width:18px;height:18px;display:block} /* Search inside hero */ .menu-search--hero{border:1px solid rgba(255,255,255,.22) !important;background:rgba(255,255,255,.14) !important;backdrop-filter:blur(12px);box-shadow:none} .menu-search--hero .menu-search input{background:rgba(255,255,255,.18)} .menu-search--hero input{background:rgba(255,255,255,.18) !important;color:var(--hero_text, #fff);border-color:rgba(255,255,255,.22)} .menu-search--hero input::placeholder{color:rgba(255,255,255,.80)} .menu-search--hero .menu-search-clear{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.22);color:var(--hero_text, #fff)} .menu-search--hero .menu-search-ic{opacity:.95} @media(max-width:740px){ .menu-hero-top{flex-direction:column;align-items:stretch} .menu-hero-controls{justify-content:flex-start} .menu-ctrl-form{justify-content:flex-start} .menu-title{font-size:18px} .menu-logo{width:48px;height:48px;border-radius:16px} } /* Apply restaurant menu theme variables inside menu scope */ .menu-scope .card{background:var(--card_bg);border-radius:var(--radius,18px)} .menu-scope input,.menu-scope select,.menu-scope textarea{background:var(--card_bg)} .menu-scope .btn{background:var(--card_bg)} .menu-scope .menu-cat-tabs{background:rgba(255,255,255,.70)} /* Hero controls (currency / language / branch) must keep the same glass background as the hero */ .menu-scope .menu-hero .menu-ctrl-form select, .menu-scope .menu-hero .menu-ctrl-form .btn{ background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); color:var(--hero_text, #fff); backdrop-filter:blur(10px); } .menu-scope .menu-hero .menu-ctrl-form select{ border-radius:999px; } .menu-scope .menu-hero .menu-ctrl-form .btn:hover{ background:rgba(255,255,255,.20); } /* Make hero selects look exactly like pills (no native arrow, custom white chevron) */ .menu-scope .menu-hero .menu-ctrl-form select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; font-weight:800; line-height:1; padding-inline:14px 38px; /* room for custom arrow */ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-size:14px 14px; background-position:right 14px center; } html[dir="rtl"] .menu-scope .menu-hero .menu-ctrl-form select, html[lang="ar"] .menu-scope .menu-hero .menu-ctrl-form select{ padding-inline:38px 14px; background-position:left 14px center; } .menu-scope .menu-hero .menu-ctrl-form select::-ms-expand{display:none} .menu-scope .menu-hero .menu-ctrl-form select:hover{background-color:rgba(255,255,255,.20)} .menu-scope .menu-hero .menu-ctrl-form select:focus{ outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.22); } /* Menu product row (small cover next to name) */ .menu-scope .product-row{display:flex;gap:12px;align-items:center;min-width:0} .menu-scope .product-thumb{width:64px;height:64px;border-radius:16px;overflow:hidden;border:1px solid var(--border);flex:0 0 64px;background:rgba(0,0,0,.03);cursor:pointer} .menu-scope .product-thumb img{width:100%;height:100%;object-fit:cover;display:block} .menu-scope .product-info{min-width:0;flex:1} .menu-scope .product-info h4{margin:0;font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .menu-scope .product-desc{margin-top:6px} .menu-scope .product-meta{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-width:0} .menu-scope .product-price{font-weight:900;white-space:nowrap;display:flex;flex-direction:column;align-items:flex-end;gap:4px} html[dir="rtl"] .menu-scope .product-price{align-items:flex-start} .menu-scope .product-price .pp-main, .menu-scope .product-price .pp-sub{display:flex;gap:8px;align-items:baseline} .menu-scope .product-price .pp-sub{font-weight:900;opacity:.85;font-size:inherit} .menu-scope .product-price .pp-main, .menu-scope .product-price .pp-sub{line-height:1.15} /* SYP (Old/New) mini pair used in modal + cart */ .yr-syp-mini{display:inline-flex;flex-direction:column;gap:4px;align-items:flex-end;white-space:nowrap} html[dir="rtl"] .yr-syp-mini{align-items:flex-start} .yr-syp-line{display:flex;align-items:baseline;gap:6px} .yr-syp-line.sub{opacity:.85} .yr-syp-num{font-weight:900} .yr-syp-tag{font-size:11px;font-weight:900;padding:4px 8px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.70);color:var(--text)} html[data-theme='dark'] .yr-syp-tag{background:rgba(16,27,49,.70)} .yr-prod-price{display:flex;justify-content:flex-end} html[dir="rtl"] .yr-prod-price{justify-content:flex-start} .menu-scope .product-price .pp-tag{font-size:11px;font-weight:900;padding:4px 8px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.70);color:var(--text)} html[data-theme='dark'] .menu-scope .product-price .pp-tag{background:rgba(16,27,49,.70)} @media(max-width:420px){ .menu-scope .product-thumb{width:56px;height:56px;flex-basis:56px;border-radius:14px} .menu-scope .product-info h4{font-size:15px} } /* Performance: render large menus fast (Chrome/Edge) */ @supports (content-visibility:auto){ .menu-scope .cat-block{content-visibility:auto;contain-intrinsic-size: 900px;} } /* Respect reduced-motion users */ @media (prefers-reduced-motion: reduce){ .menu-scope .product-card, .menu-scope .menu-cat-index .cat-item, .menu-scope .menu-cat-tabs a{transition:none!important;transform:none!important;} .menu-scope .product-thumb.yr-img-loading::after{animation:none!important;} } /* Public menu layouts */ /* IMPORTANT: Prevent RTL + nowrap titles from forcing the grid wider than the container */ .menu-scope .products-grid{width:100%;max-width:100%;min-width:0} .menu-scope .product-card{min-width:0;max-width:100%;overflow:hidden;transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease} .menu-scope .product-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb, var(--brand) 26%, var(--border))} .menu-layout-grid .products-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} @media(min-width: 860px){.menu-layout-grid .products-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} .menu-layout-list .products-grid{display:flex;flex-direction:column;gap:10px} .menu-layout-list .product-card{display:flex;gap:12px;align-items:center} .menu-layout-list .product-card .product-media{width:92px;flex:0 0 92px} .menu-layout-compact .products-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} @media(min-width: 860px){.menu-layout-compact .products-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} .menu-layout-compact .product-card{padding:10px} .menu-layout-compact .product-card h4{font-size:14px} /* GRID mode: real card grid (vertical card) */ .menu-layout-grid .product-row{flex-direction:column;align-items:stretch;gap:10px} .menu-layout-grid .product-thumb{width:100%;height:170px;flex:0 0 auto;border-radius:16px} .menu-layout-grid .product-meta{flex-direction:column;align-items:flex-start;gap:6px} .menu-scope[dir="rtl"] .menu-layout-grid .product-meta{align-items:flex-end} .menu-layout-grid .product-info h4{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .menu-layout-grid .product-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* COMPACT mode: actually compact (hide desc + badges row, shrink thumb) */ .menu-layout-compact .product-thumb{width:46px;height:46px;flex:0 0 46px;border-radius:14px} .menu-layout-compact .product-meta{flex-wrap:wrap} .menu-layout-compact .product-info h4{font-size:13px} .menu-layout-compact .product-price{font-size:13px} .menu-layout-compact .product-desc{display:none} .menu-layout-compact .product-info > .small:not(.product-desc){display:none} /* Category selector wrapper (stays within container width) */ .menu-scope .menu-cat-wrap{position:sticky;top:12px;z-index:9;background:var(--tabs_bg);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);overflow:hidden} /* Tabs style (inside wrapper) */ .menu-cat-tabs{position:static;background:transparent;border:0;backdrop-filter:none} .menu-cat-tabs .tabs{display:flex;gap:8px;overflow:auto;padding:10px 12px;scrollbar-width:thin} .menu-cat-tabs a{white-space:nowrap;padding:8px 12px;border-radius:999px;text-decoration:none;color:var(--text);border:1px solid var(--border);background:var(--card_bg)} .menu-cat-tabs a.active{background:linear-gradient(90deg,var(--brand),var(--brand2));color:var(--on_brand, #fff);border-color:transparent} /* Simple product gallery modal */ .gallery-modal{position:fixed;inset:0;background:rgba(0,0,0,.75);display:none;align-items:center;justify-content:center;padding:16px;z-index:100} .gallery-modal.show{display:flex} .gallery-modal .box{max-width:860px;width:100%;background:#000;border-radius:16px;overflow:hidden;position:relative} .gallery-modal img{width:100%;height:auto;display:block} .gallery-modal .close{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.15);color:#fff;border:0;border-radius:12px;padding:8px 10px;cursor:pointer} .gallery-modal .nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);color:#fff;border:0;border-radius:12px;padding:10px 12px;cursor:pointer} .gallery-modal .prev{left:10px} .gallery-modal .next{right:10px} /* Public Menu: Category index (grid/list/compact) */ .menu-scope .menu-cat-index{display:flex;gap:10px;overflow:auto;padding:10px 12px} .menu-scope .menu-cat-index .cat-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;border:1px solid var(--border);background:var(--card_bg);color:var(--text);text-decoration:none;white-space:nowrap;flex:0 0 auto;min-width:0} .menu-scope .menu-cat-index .cat-item:hover{transform:translateY(-1px);} .menu-scope .menu-cat-index .cat-item.active{background:linear-gradient(90deg,var(--brand),var(--brand2));color:var(--on_brand, #fff);border-color:transparent} .menu-scope .menu-cat-index .cat-item.active .ct{opacity:.9;color:var(--on_brand, #fff)} .menu-scope .menu-cat-index .cat-item.active img{border-color:rgba(255,255,255,.25)} .menu-scope .menu-cat-index .cat-item img{width:34px;height:34px;border-radius:12px;object-fit:cover;border:1px solid var(--border)} .menu-scope .menu-cat-index .cat-item .lb{font-weight:700;max-width:170px;overflow:hidden;text-overflow:ellipsis;} .menu-scope .menu-cat-index .cat-item .ct{margin-inline-start:6px;opacity:.7;font-size:12px} /* Grid selector: real grid, no horizontal overflow */ .menu-scope .menu-cat-index.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;overflow:visible} .menu-scope .menu-cat-index.cat-grid .cat-item{width:100%;flex:unset} /* List selector */ .menu-scope .menu-cat-index.cat-list{display:flex;flex-direction:column;gap:10px;overflow:visible;align-items:stretch} .menu-scope .menu-cat-index.cat-list .cat-item{justify-content:flex-start;width:100%;flex:unset} /* Compact selector */ .menu-scope .menu-cat-index.cat-compact{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;overflow:visible} .menu-scope .menu-cat-index.cat-compact .cat-item{width:100%;flex:unset;padding:8px 10px;border-radius:999px} .menu-scope .menu-cat-index.cat-compact .cat-item img{width:28px;height:28px;border-radius:999px} /* Stack selector (chips) */ .menu-scope .menu-cat-index.cat-stack .cat-item{padding:8px 10px;border-radius:999px} .menu-scope .menu-cat-index.cat-stack .cat-item img{width:28px;height:28px;border-radius:999px} /* Make Arabic text less heavy inside public menu */ .menu-scope{font-weight:400;} .menu-scope h1,.menu-scope h2,.menu-scope h3,.menu-scope h4{font-weight:700;} .menu-scope .small{font-weight:400;} .is-en h1,.is-en h2,.is-en h3,.is-en h4,.is-en h5,.is-en h6{font-weight:700;} .menu-scope[dir="ltr"] h1,.menu-scope[dir="ltr"] h2,.menu-scope[dir="ltr"] h3,.menu-scope[dir="ltr"] h4{font-weight:700;} /* Public menu footer (contact + socials) */ .menu-footer{margin-top:14px} .menu-footer .footer-grid{display:flex;align-items:center;justify-content:flex-start;gap:12px;flex-wrap:wrap} .menu-footer .footer-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end} /* Public menu: search */ .menu-search{padding:10px 12px} .menu-search-row{display:flex;align-items:center;gap:10px} .menu-search-ic{opacity:.75} .menu-search input{flex:1;border:1px solid var(--border);border-radius:14px;padding:10px 12px;background:var(--field_bg);color:var(--text)} .menu-search-clear{border:1px solid var(--border);background:var(--btn_bg);color:var(--text);border-radius:12px;padding:8px 10px;cursor:pointer;opacity:.8} .menu-search-clear:hover{opacity:1} .menu-search-meta{margin-top:8px;opacity:.75} /* Category cards (Grid + open) */ .cat-open-header{display:flex;align-items:center;justify-content:flex-start;gap:10px;margin:8px 0} .cat-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:10px} @media(min-width: 860px){.cat-cards{grid-template-columns:repeat(4,1fr)}} .cat-card{display:flex;align-items:center;gap:12px;border:1px solid var(--border);background:var(--card_bg);border-radius:18px;padding:12px;cursor:pointer;min-height:74px;text-align:start} .cat-card:hover{transform:translateY(-1px)} .cat-card img{width:52px;height:52px;border-radius:16px;object-fit:cover;border:1px solid var(--border)} .cat-card-ph{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.05);border:1px solid var(--border)} .cat-card-title{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px} /* Category cards layouts */ .cat-cards--list{display:flex;flex-direction:column;gap:10px;margin-bottom:10px} .cat-cards--compact{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px} @media(min-width: 860px){.cat-cards--compact{grid-template-columns:repeat(6,1fr)}} .cat-cards--compact .cat-card{padding:10px;min-height:64px} .cat-cards--compact .cat-card img,.cat-cards--compact .cat-card-ph{width:44px;height:44px;border-radius:14px} .cat-cards--compact .cat-card-title{max-width:120px} .menu-footer .icon-btn .soc-ic{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;opacity:.9} .menu-footer .icon-btn .soc-ic svg{width:18px;height:18px;display:block} /* Sticky cart */ .sticky-cart{position:fixed;left:12px;right:12px;bottom:12px;z-index:90;display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:12px 14px;border-radius:18px;text-decoration:none;background:linear-gradient(90deg,var(--brand),var(--brand2));color:var(--on_brand, #fff);box-shadow:0 18px 40px rgba(0,0,0,.18)} .sticky-cart-badge{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:4px 8px;font-weight:800;min-width:26px;text-align:center} .sticky-cart-total{margin-inline-start:auto;opacity:.92;font-weight:900;font-size:13px;white-space:nowrap} /* WhatsApp order sticky (branch-only, checkout-free) */ .sticky-wa{position:fixed;left:12px;right:12px;bottom:12px;z-index:91;display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:12px 14px;border-radius:18px;text-decoration:none;background:linear-gradient(90deg,#16a34a,#22c55e);color:var(--on_brand, #fff);box-shadow:0 18px 40px rgba(0,0,0,.18);border:0;cursor:pointer} .sticky-wa .sticky-wa-ic{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center} .sticky-wa .sticky-wa-ic svg{width:22px;height:22px;display:block} .sticky-wa-badge{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:4px 8px;font-weight:800;min-width:26px;text-align:center} .sticky-wa-total{margin-inline-start:auto;opacity:.92;font-weight:900;font-size:13px;white-space:nowrap} .sticky-wa.disabled{opacity:.55;pointer-events:none} /* Pulse highlight (demo) */ .pulse{animation:pulseGlow 1.25s ease-in-out infinite} @keyframes pulseGlow{ 0%{transform:translateY(0); box-shadow:0 18px 40px rgba(0,0,0,.18), 0 0 0 0 rgba(34,197,94,.35)} 70%{transform:translateY(-1px); box-shadow:0 18px 40px rgba(0,0,0,.18), 0 0 0 14px rgba(34,197,94,0)} 100%{transform:translateY(0); box-shadow:0 18px 40px rgba(0,0,0,.18), 0 0 0 0 rgba(34,197,94,0)} } /* Product modal */ .pmodal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:flex-end;justify-content:center;z-index:120;padding:14px} .pmodal.show{display:flex} .pmodal .box{width:100%;max-width:860px;background:var(--card_bg);border:1px solid var(--border);border-radius:22px;overflow:hidden} .pmodal .head{display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border)} .pmodal .head .title{font-weight:800;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pmodal .head .x{border:1px solid var(--border);background:var(--btn_bg);color:var(--text);border-radius:12px;padding:8px 10px;cursor:pointer} .pmodal .body{padding:12px 14px} .pmodal .media{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:rgba(0,0,0,.05)} .pmodal .media img{width:100%;height:260px;object-fit:cover;display:block} @media(min-width: 720px){.pmodal .media img{height:360px}} .pmodal .nav{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(0,0,0,.35);color:#fff;border-radius:12px;padding:10px 12px;cursor:pointer} .pmodal .nav.prev{left:10px} .pmodal .nav.next{right:10px} .pmodal .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .pmodal .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;align-items:center;justify-content:space-between} .pmodal .qty{display:flex;align-items:center;gap:10px} .pmodal .qty button{border:1px solid var(--border);background:var(--btn_bg);color:var(--text);border-radius:12px;padding:8px 10px;cursor:pointer} .pmodal .qty .n{font-weight:800;min-width:28px;text-align:center} /* Prevent background scroll when panel sidebar is open on mobile */ body.sb-open{overflow:hidden} .pmodal .cta{display:flex;gap:10px;flex-wrap:wrap} .pmodal .cta .btn{white-space:nowrap} /* Small toast */ .mini-toast{position:fixed;bottom:84px;left:16px;right:auto;z-index:200;background:var(--toast_bg);border:1px solid var(--border);border-radius:16px;padding:10px 12px;box-shadow:0 18px 40px rgba(0,0,0,.18)} html[dir="rtl"] .mini-toast{left:auto;right:16px} .menu-footer .icon-btn{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;border:1px solid var(--border);background:var(--card_bg);color:var(--text);text-decoration:none;line-height:1} .menu-footer .icon-btn span{font-size:13px;opacity:.9} .menu-footer .icon-btn:hover{transform:translateY(-1px)} /* ---- Product Options (addons/modifiers) ---- */ .pmodal .opts{ border-top:1px solid var(--border); padding-top:12px; } .pmodal .optg{ margin-top:10px; padding:10px; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.02); } .pmodal .optg-h{ display:flex; align-items:flex-start; justify-content:flex-start; gap:10px; margin-bottom:8px; } .pmodal .optg-items{ display:flex; flex-direction:column; gap:8px; } .pmodal .opti{ display:flex; align-items:center; justify-content:flex-start; gap:10px; padding:10px; border-radius:12px; border:1px solid var(--border); cursor:pointer; user-select:none; } .pmodal .opti input{ width:18px; height:18px; } .pmodal .opti .nm{ flex:1; } .pmodal .opti:hover{ transform:translateY(-1px); } /* ---- Kitchen View ---- */ .kitchen-wrap{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } @media (max-width: 1100px){ .kitchen-wrap{ grid-template-columns:1fr; } } .kcol{ border:1px solid var(--border); border-radius:18px; background:var(--card_bg); padding:12px; } .kcol h3{ margin:0 0 8px 0; display:flex; align-items:center; justify-content:flex-start; } .korder{ border:1px solid var(--border); border-radius:16px; padding:12px; margin-top:10px; background:rgba(255,255,255,.02); } .korder.newflash{ outline:2px solid rgba(34,197,94,.55); } .korder .top{ display:flex; justify-content:flex-start; gap:10px; flex-wrap:wrap; } .korder .items{ margin-top:8px; } .korder .items .it{ display:flex; justify-content:flex-start; gap:10px; padding:6px 0; border-bottom:1px dashed var(--border); } .korder .items .it:last-child{ border-bottom:none; } .korder .acts{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; } .korder .acts .btn{ padding:10px 12px; } /* Kitchen Pro toolbar + compact mode */ .kitchen-toolbar .chip{cursor:pointer; user-select:none} .kitchen-toolbar .chip.active{background:linear-gradient(90deg,var(--brand),var(--brand2));color:var(--on_brand,#fff);border-color:transparent} .kitchen-toolbar .chip.ghost{background:transparent} body.kitchen-compact .korder{padding:10px} body.kitchen-compact .korder .items .it{padding:4px 0} body.kitchen-compact .korder .acts .btn{padding:8px 10px} /* Print: keep page clean when printing kitchen/order pages */ @media print{ .panel-sidebar, .panel-topbar, .panel-overlay, .btn, .panel-nav__item{ display:none !important; } .panel-main{ margin:0 !important; } .panel-content{ padding:0 !important; } body{ background:#fff !important; } } /* --------------------------------------------------------- Panel mobile RTL fix (table scrolling) --------------------------------------------------------- */ .table-scroll{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.03); } .table-scroll .table{ margin:0; min-width:860px; } html[dir="rtl"] .table-scroll{ direction:ltr; } html[dir="rtl"] .table-scroll .table{ direction:rtl; } @media (max-width: 900px){ .table-scroll .table{ min-width:760px; } } @media (max-width: 520px){ .table-scroll .table{ min-width:680px; } } /* --------------------------------------------------------- SaaS Landing (rests.yebrax.com) --------------------------------------------------------- */ /* Subtle reveal animations (more interactive landing) */ .reveal{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){ .reveal{transition:none;transform:none;opacity:1} } .landing{ min-height:100vh; background: radial-gradient(900px 480px at 20% 5%, rgba(14,165,233,.25), transparent 55%), radial-gradient(900px 480px at 90% 20%, rgba(34,197,94,.18), transparent 60%), radial-gradient(800px 420px at 50% 85%, rgba(245,158,11,.12), transparent 65%), var(--page_bg); } .landing .wrap{ max-width:1180px; margin:0 auto; padding:26px 18px 60px; } .landing-top{ position:sticky; top:0; z-index:30; backdrop-filter: blur(14px); background: linear-gradient(to bottom, rgba(2,6,23,.55), rgba(2,6,23,.18)); border-bottom:1px solid rgba(255,255,255,.06); } html[data-theme='light'] .landing-top{ background: linear-gradient(to bottom, rgba(255,255,255,.80), rgba(255,255,255,.40)); border-bottom:1px solid var(--border); } .landing-top .bar{ max-width:1180px; margin:0 auto; padding:14px 18px; display:flex; align-items:center; justify-content:flex-start; gap:14px; } .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); } .brand .logo{ width:38px; height:38px; border-radius:12px; background: radial-gradient(circle at 30% 30%, rgba(14,165,233,.95), rgba(34,197,94,.55)); box-shadow: 0 18px 60px rgba(2,6,23,.20); display:flex; align-items:center; justify-content:center; } .brand .logo img{ width:28px; height:28px; object-fit:contain; filter: drop-shadow(0 10px 20px rgba(0,0,0,.20)); } .brand .t{ display:flex; flex-direction:column; line-height:1.05; } .brand .t b{ font-size:14px; letter-spacing:.2px; } .brand .t span{ font-size:12px; color:var(--muted); } .lnav{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .lnav a{ text-decoration:none; color:var(--muted); font-size:13px; padding:7px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.14); } html[data-theme='light'] .lnav a{ border-color:var(--border); background:rgba(255,255,255,.70); } .lnav a:hover{ color:var(--text); transform: translateY(-1px); } .lnav .cta{ color:#fff; border:none; background: linear-gradient(135deg, var(--brand), var(--brand2)); box-shadow: 0 18px 55px rgba(14,165,233,.22); } .lnav .ghost{ background:transparent; border:1px solid rgba(255,255,255,.14); } .landing-hero{ padding:34px 0 10px; } .landing-hero .grid{ display:grid; grid-template-columns: 1.25fr .95fr; gap:22px; align-items:center; } @media (max-width: 980px){ .landing-hero .grid{ grid-template-columns:1fr; } } .kicker{ display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); color:var(--muted); font-size:12px; } html[data-theme='light'] .kicker{ border-color:var(--border); background:rgba(255,255,255,.65); } .h1{ font-size:42px; line-height:1.1; margin:14px 0 10px; letter-spacing:-.6px; } .landing-hero .h1{ font-size:clamp(34px, 4.8vw, 58px); line-height:1.12; } html[lang="en"] .landing-hero .h1{ letter-spacing:-.6px; } html[lang="ar"] .landing-hero .h1{ letter-spacing:0; line-height:1.2; font-weight:900; } .landing-hero .h1 .hero-qr{ display:inline-block; padding:0 10px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.08); font-weight:900; } html[data-theme='light'] .landing-hero .h1 .hero-qr{ border-color:var(--border); background:rgba(2,6,23,.06); } .landing-hero .h1 .hero-plus{ display:inline-block; padding:0 6px; font-weight:900; opacity:.92; } .landing-hero .h1 .hero-subline{ display:block; margin-top:10px; font-size:clamp(16px, 1.6vw, 22px); font-weight:800; opacity:.92; } html[lang="ar"] .landing-hero .h1{ letter-spacing:0; line-height:1.25; font-weight:900; } @media (max-width:520px){ .h1{ font-size:34px; } } .lead{ font-size:15px; color:var(--muted); line-height:1.85; margin:0 0 18px; } .btns{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; } .lbtn{ text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 14px; border-radius:14px; font-weight:800; font-size:13px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); color:var(--text); } html[data-theme='light'] .lbtn{ border-color:var(--border); background:rgba(255,255,255,.75); } .lbtn.primary{ color:#fff; border:none; background:linear-gradient(135deg,var(--brand),var(--brand2)); box-shadow: 0 18px 60px rgba(14,165,233,.18); } .lbtn:hover{ transform:translateY(-1px); } .trust{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; } .pill{ padding:7px 10px; font-size:12px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); color:var(--muted); } html[data-theme='light'] .pill{ border-color:var(--border); background:rgba(255,255,255,.60); } .mock{ border-radius:20px; border:1px solid rgba(255,255,255,.10); background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow: 0 30px 90px rgba(2,6,23,.35); overflow:hidden; } html[data-theme='light'] .mock{ box-shadow: 0 22px 70px rgba(2,6,23,.12); border-color:var(--border); } .mock .top{ display:flex; justify-content:flex-start; align-items:center; padding:14px 14px 10px; } .mock .dots{ display:flex; gap:6px; } .mock .dots i{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.25); display:inline-block; } .mock .screen{ padding:14px; display:grid; gap:10px; } .mock .cardx{ border-radius:16px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.05); padding:12px; } html[data-theme='light'] .mock .cardx{ border-color:var(--border); background:rgba(255,255,255,.70); } .mock .cardx b{ display:block; margin-bottom:6px; } .mock .row{ display:flex; align-items:center; justify-content:flex-start; gap:10px; color:var(--muted); font-size:12px; } .mock .qr{ width:92px; height:92px; border-radius:16px; border:1px dashed rgba(255,255,255,.20); background:rgba(255,255,255,.03); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:12px; } .section{ padding:28px 0 6px; } .section h2{ margin:0 0 8px; font-size:22px; } .section p{ margin:0 0 14px; color:var(--muted); line-height:1.9; font-size:13px; } .fgrid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; } @media (max-width: 980px){ .fgrid{ grid-template-columns:1fr 1fr; } } @media (max-width: 560px){ .fgrid{ grid-template-columns:1fr; } } .fcard{ border-radius:18px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); padding:14px; } html[data-theme='light'] .fcard{ border-color:var(--border); background:rgba(255,255,255,.75); } .fcard .ic{ width:40px;height:40px;border-radius:14px; background:linear-gradient(135deg, rgba(14,165,233,.28), rgba(34,197,94,.20)); display:flex;align-items:center;justify-content:center; margin-bottom:10px; border:1px solid rgba(255,255,255,.10); } .fcard b{ display:block; margin-bottom:6px; } .fcard span{ color:var(--muted); font-size:13px; line-height:1.85; } .pricing{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; } @media (max-width: 980px){ .pricing{ grid-template-columns:1fr; } } .plan{ border-radius:20px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); padding:16px; } html[data-theme='light'] .plan{ border-color:var(--border); background:rgba(255,255,255,.78); } .plan.featured{ border:1px solid rgba(14,165,233,.35); box-shadow: 0 26px 90px rgba(14,165,233,.16); } .plan h3{ margin:0 0 6px; } .plan .sub{ color:var(--muted); font-size:13px; line-height:1.85; margin-bottom:12px; } .plan ul{ margin:0; padding:0 18px; color:var(--muted); line-height:1.9; font-size:13px; } .plan .act{ margin-top:14px; } .footer-landing{ margin-top:28px; border-top:1px solid rgba(255,255,255,.08); padding-top:18px; color:var(--muted); font-size:12px; display:flex; justify-content:flex-start; gap:12px; flex-wrap:wrap; } /* ---- Landing V3 Additions (Pricing / FAQ / Testimonials) ---- */ .pricing-head{display:flex;align-items:flex-end;justify-content:flex-start;gap:14px;flex-wrap:wrap} .pricing-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .cur-picker{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04)} html[data-theme='light'] .cur-picker{border-color:var(--border);background:rgba(255,255,255,.75)} .cur-picker select{background:transparent;border:none;color:var(--text);font-weight:800;font-size:13px;outline:none} .cur-picker .cur-ic{opacity:.8} .rate-note{font-size:12px;color:var(--muted);padding:8px 10px;border-radius:12px;border:1px dashed rgba(255,255,255,.12);background:rgba(255,255,255,.03)} html[data-theme='light'] .rate-note{border-color:var(--border);background:rgba(255,255,255,.65)} .price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} @media (max-width:1100px){.price-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:620px){.price-grid{grid-template-columns:1fr}} .pcard{border-radius:22px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);padding:16px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden} html[data-theme='light'] .pcard{border-color:var(--border);background:rgba(255,255,255,.80)} .pcard:before{content:'';position:absolute;inset:-40px -40px auto auto;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(14,165,233,.35), rgba(34,197,94,.15));filter:blur(0);transform:translate(40px,-40px)} .pcard.featured{border:1px solid rgba(14,165,233,.40);box-shadow:0 30px 90px rgba(14,165,233,.18)} .pcard .ptop{display:flex;align-items:center;justify-content:flex-start;gap:10px} .pcard .save{font-size:12px;font-weight:800;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--muted)} html[data-theme='light'] .pcard .save{border-color:var(--border);background:rgba(255,255,255,.65)} .pcard .pprice{font-size:28px;font-weight:900;letter-spacing:-.6px} .pcard .pmeta{color:var(--muted);font-size:12px} .pcard ul{margin:0;padding:0 18px;color:var(--muted);line-height:1.9;font-size:13px} .pcard a.lbtn{margin-top:auto} .pcard .addon{margin-top:6px;padding:10px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03)} html[data-theme='light'] .pcard .addon{border-color:var(--border);background:rgba(255,255,255,.65)} .pcard input[type=checkbox]{transform:scale(1.1)} .price-summary{margin-top:14px} .sum-card{border-radius:22px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));padding:16px} html[data-theme='light'] .sum-card{border-color:var(--border);background:rgba(255,255,255,.85)} .sum-card .big{font-size:22px;font-weight:900} .tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} @media (max-width:980px){.tgrid{grid-template-columns:1fr}} .tcard{border-radius:20px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);padding:14px} html[data-theme='light'] .tcard{border-color:var(--border);background:rgba(255,255,255,.80)} .metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px} @media (max-width:980px){.metrics{grid-template-columns:1fr}} .mcard{border-radius:20px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);padding:14px;display:flex;align-items:center;justify-content:flex-start;gap:10px} html[data-theme='light'] .mcard{border-color:var(--border);background:rgba(255,255,255,.75)} .mcard b{font-size:22px} .mcard span{color:var(--muted);font-size:12px} .faq{display:grid;gap:10px} .faq-item{border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);overflow:hidden} html[data-theme='light'] .faq-item{border-color:var(--border);background:rgba(255,255,255,.80)} .faq-q{width:100%;text-align:start;background:transparent;border:none;color:var(--text);padding:14px 14px;display:flex;align-items:center;justify-content:flex-start;gap:12px;font-weight:900;cursor:pointer} .faq-q span{opacity:.7} .faq-a{display:none;padding:0 14px 14px;color:var(--muted);line-height:1.9;font-size:13px} .faq-item.open .faq-a{display:block} .faq-item.open .faq-q span{transform:rotate(45deg)} /* Make CTA in top nav more visible */ .lnav .cta{padding:9px 14px;box-shadow:0 22px 70px rgba(14,165,233,.28)} html[data-theme='light'] .lnav .cta{color:#fff} /* ---- Reviews / Stars ---- */ .stars{display:inline-flex;gap:2px;align-items:center} .stars .star{font-size:16px;opacity:.28;line-height:1} .stars .star.on{opacity:1} .rating{display:inline-flex;flex-direction:row-reverse;gap:6px;align-items:center} .rating input{display:none} .rating label{font-size:28px;cursor:pointer;opacity:.32;line-height:1;user-select:none} .rating input:checked ~ label{opacity:1} .rating label:hover, .rating label:hover ~ label{opacity:1} /* Service call floating buttons (dine-in) */ .service-fab{position:fixed;left:12px;bottom:84px;z-index:60;display:flex;gap:8px;flex-wrap:wrap} html[dir="ltr"] .service-fab{right:12px;left:auto} .service-fab .btn{backdrop-filter: blur(6px);} /* --------------------------------------------------------- Auth pages (Panel Login/Register) --------------------------------------------------------- */ .auth-page{min-height:100vh;background: radial-gradient(900px 520px at 20% 10%, rgba(14,165,233,.28), transparent 55%), radial-gradient(900px 520px at 90% 20%, rgba(34,197,94,.18), transparent 60%), radial-gradient(900px 520px at 50% 90%, rgba(245,158,11,.12), transparent 65%), var(--page_bg); } .auth-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:22px} .auth-card{width:min(980px, 100%);border-radius:24px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));box-shadow:0 40px 120px rgba(2,6,23,.40);overflow:hidden} html[data-theme='light'] .auth-card{border-color:var(--border);background:rgba(255,255,255,.92);box-shadow:0 24px 80px rgba(2,6,23,.12)} .auth-top{display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px)} html[data-theme='light'] .auth-top{border-bottom:1px solid var(--border)} .auth-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)} .auth-brand .logo{width:40px;height:40px;border-radius:14px;background:radial-gradient(circle at 30% 30%, rgba(14,165,233,.95), rgba(34,197,94,.55));display:flex;align-items:center;justify-content:center;box-shadow:0 18px 60px rgba(2,6,23,.20)} .auth-brand .logo img{width:28px;height:28px;object-fit:contain} .auth-brand .t{display:flex;flex-direction:column;line-height:1.05} .auth-brand .t b{font-size:14px} .auth-brand .t span{font-size:12px;color:var(--muted)} .auth-actions{display:flex;gap:10px;flex-wrap:wrap} .auth-grid{display:grid;grid-template-columns: 1.1fr .9fr;gap:0} @media (max-width: 980px){.auth-grid{grid-template-columns:1fr}} .auth-left{padding:18px 18px 18px 18px} @media (max-width: 980px){.auth-left{display:none}} .auth-right{padding:18px} .auth-form{padding:14px;border-radius:20px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04)} html[data-theme='light'] .auth-form{border-color:var(--border);background:rgba(255,255,255,.80)} .auth-bullets{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px} .auth-note{margin-top:14px;padding:12px 12px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);color:var(--muted);font-size:13px;line-height:1.9} html[data-theme='light'] .auth-note{border-color:var(--border);background:rgba(255,255,255,.65)} .auth-sep{display:flex;align-items:center;justify-content:center;margin:12px 0} .auth-sep span{font-size:12px;color:var(--muted);padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03)} html[data-theme='light'] .auth-sep span{border-color:var(--border);background:rgba(255,255,255,.65)} .btn.google{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04)} html[data-theme='light'] .btn.google{border-color:var(--border);background:rgba(255,255,255,.75)} /* ---- Landing Clients Showcase ---- */ .sec-head{display:flex;align-items:flex-end;justify-content:flex-start;gap:12px;flex-wrap:wrap} .client-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .client-search{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04)} html[data-theme='light'] .client-search{border-color:var(--border);background:rgba(255,255,255,.75)} .client-search input{background:transparent;border:none;outline:none;color:var(--text);font-weight:700;font-size:13px;min-width:220px} .client-search .s-ic{opacity:.8} .client-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px} @media (max-width:1100px){.client-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:620px){.client-grid{grid-template-columns:1fr}} @media (max-width:560px){ .client-grid{display:flex;overflow:auto;gap:10px;scroll-snap-type:x mandatory;padding-bottom:8px} .client-grid .rcard{min-width:260px;scroll-snap-align:start} } .rcard{position:relative;display:block;text-decoration:none;color:var(--text);border-radius:22px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);padding:14px;overflow:hidden;transition:transform .18s ease, box-shadow .18s ease} html[data-theme='light'] .rcard{border-color:var(--border);background:rgba(255,255,255,.80)} .rcard:hover{transform:translateY(-2px);box-shadow:0 24px 80px rgba(2,6,23,.22)} .rcard-bg{position:absolute;inset:-30px auto auto -20px;font-size:66px;opacity:.09;transform:rotate(-12deg)} .rcard-top{display:flex;align-items:flex-start;justify-content:flex-start;gap:10px} .rlogo{width:48px;height:48px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;overflow:hidden} html[data-theme='light'] .rlogo{border-color:var(--border);background:rgba(255,255,255,.75)} .rlogo img{width:100%;height:100%;object-fit:cover} .rlogo-fallback{font-size:22px} .rchips{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end} .chip{font-size:11px;font-weight:800;padding:5px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);color:var(--muted)} html[data-theme='light'] .chip{border-color:var(--border);background:rgba(255,255,255,.65)} .chip.ok{color:rgb(16,185,129);border-color:rgba(16,185,129,.25);background:rgba(16,185,129,.10)} .rname{font-weight:900;margin-top:10px;font-size:14px;letter-spacing:.1px} .rmeta{color:var(--muted);font-size:12px;margin-top:4px} .ropen{margin-top:10px;font-size:12px;font-weight:900;color:var(--brand)} .clients-hint{margin-top:10px;color:var(--muted);font-size:12px;display:flex;gap:8px;flex-wrap:wrap} /* ===================================================== Hotfix v3.1 — Mobile AppBar menu + Theme switch + CTA ===================================================== */ /* Fix: Light mode overrides were hiding CTA backgrounds */ html[data-theme='light'] .lnav a:not(.cta):not(.ghost):not(.lang-pill){ border-color: var(--border); background: rgba(255,255,255,.70); } html[data-theme='light'] .lnav a.cta{ background: linear-gradient(135deg, var(--brand), var(--brand2)) !important; color:#fff !important; border:0 !important; } html[data-theme='light'] .lnav a.ghost{ background: transparent !important; } html[data-theme='light'] .lbtn:not(.primary){ border-color: var(--border); background: rgba(255,255,255,.75); } html[data-theme='light'] .lbtn.primary{ background: linear-gradient(135deg, var(--brand), var(--brand2)) !important; color:#fff !important; border:0 !important; } /* Western theme toggle (no emoji) */ .theme-switch{ position:relative; width:46px; height:28px; border-radius:999px; border:1px solid var(--border); background: var(--btn_bg); cursor:pointer; overflow:hidden; direction:ltr; } .theme-switch:before{ content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:999px; background: linear-gradient(135deg, var(--brand), var(--brand2)); transition: transform .18s ease; } html[data-theme='light'] .theme-switch:before{ transform: translateX(18px); } /* Landing AppBar -> hamburger menu on mobile */ .lnav{ position:relative; flex-wrap:nowrap; } .lnav-burger{ display:none; width:40px;height:40px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: var(--text); align-items:center;justify-content:center; cursor:pointer; font-size:0; line-height:0; } .lnav-burger::before{content:"";width:18px;height:2px;background:currentColor;border-radius:2px;box-shadow:0 6px 0 currentColor,0 12px 0 currentColor;} html[data-theme='light'] .lnav-burger{ border-color:var(--border); background:rgba(255,255,255,.78); } .lnav-links{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } @media(max-width:760px){ .lnav{ gap:10px; } .lnav-burger{ display:inline-flex; } .lnav-links{ display:none; position:absolute; top:calc(100% + 10px); left:0; right:0; padding:12px; border-radius:18px; border:1px solid var(--border); /* More solid surface on mobile to avoid "washed" look */ background: var(--card_bg); backdrop-filter: blur(12px); box-shadow: var(--shadow); flex-direction:column; align-items:stretch; gap:8px; z-index:70; } .lnav.open .lnav-links{ display:flex; } .lnav-links a{ width:100%; justify-content:center; } .lnav-links .theme-switch{ margin:4px auto; } } /* Panel/Admin topbar nav -> hamburger on mobile */ .topbar .nav{ position:relative; flex-wrap:nowrap; } .nav-burger{ display:none; width:40px;height:40px; border-radius:14px; border:1px solid var(--border); background: var(--btn_bg); color: var(--text); align-items:center;justify-content:center; cursor:pointer; font-size:0; line-height:0; } .nav-burger::before{content:"";width:18px;height:2px;background:currentColor;border-radius:2px;box-shadow:0 6px 0 currentColor,0 12px 0 currentColor;} .nav-links{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end; } @media(max-width:760px){ .nav-burger{ display:inline-flex; } .nav-links{ display:none; position:absolute; top:calc(100% + 10px); left:0; right:0; padding:12px; border-radius:18px; border:1px solid var(--border); background: var(--topbar_bg); backdrop-filter: blur(12px); box-shadow: var(--shadow); flex-direction:column; align-items:stretch; gap:10px; z-index:70; } .nav.open .nav-links{ display:flex; } .nav-links a{ width:100%; justify-content:center; } .nav-links .theme-switch{ margin:4px auto; } } /* Currency picker: reduce height + icon size */ .cur-picker{ padding:8px 10px; border-radius:14px; } .cur-picker .cur-ic{ font-size:14px; line-height:1; } .cur-picker select{ font-weight:800; font-size:13px; } /* Domain add-on toggle: nicer */ .pcard .addon label.row{ background: rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.10); border-radius:14px; padding:10px 12px; } html[data-theme='light'] .pcard .addon label.row{ background: rgba(255,255,255,.70); border-color: var(--border); } #domainAddonToggle{ appearance:none; width:46px;height:28px; border-radius:999px; border:1px solid var(--border); background: rgba(255,255,255,.08); position:relative; cursor:pointer; } #domainAddonToggle:before{ content:""; position:absolute; top:3px; left:3px; width:22px;height:22px; border-radius:999px; background: rgba(255,255,255,.85); transition: transform .18s ease; } html[data-theme='light'] #domainAddonToggle{ background: rgba(15,23,42,.06); } #domainAddonToggle:checked{ background: rgba(34,197,94,.25); border-color: rgba(34,197,94,.35); } #domainAddonToggle:checked:before{ transform: translateX(18px); background:#fff; } html[dir="rtl"] #domainAddonToggle:checked:before{ transform: translateX(-18px); } /* --------------------------------------------------------- Fixes (2026-02-24) - Mobile burger dropdown width (Landing + Topbar) - RTL switch knob alignment (Domain add-on toggle) --------------------------------------------------------- */ /* On mobile, the nav container can be as small as the burger button. Using absolute positioning makes the dropdown extremely narrow. We force a fixed, full-width sheet for a reliable UX. */ @media(max-width:760px){ .lnav-links, .nav-links{ position:fixed !important; left:12px !important; right:12px !important; top:calc(env(safe-area-inset-top) + 72px) !important; width:auto !important; max-height:calc(100vh - 96px) !important; overflow:auto !important; } } /* Landing (dark): reduce "glass" transparency for better readability */ html[data-theme='dark'] .pill, html[data-theme='dark'] .pcard, html[data-theme='dark'] .mcard, html[data-theme='dark'] .tcard, html[data-theme='dark'] .faq-item, html[data-theme='dark'] .auth-form, html[data-theme='dark'] .auth-note, html[data-theme='dark'] .client-search, html[data-theme='dark'] .rcard, html[data-theme='dark'] .chip{ background: rgba(16,27,49,.74) !important; border-color: rgba(255,255,255,.10) !important; } html[data-theme='dark'] .sum-card, html[data-theme='dark'] .auth-card{ background: rgba(16,27,49,.78) !important; border-color: rgba(255,255,255,.10) !important; } /* RTL: move the toggle knob's anchor to the right, then translate left when checked (prevents the knob from exiting the track). */ html[dir="rtl"] #domainAddonToggle:before{ left:auto; right:3px; } /* Hero QR preview: show real QR with contrast */ .mock .qr{ border-style: solid; background: rgba(255,255,255,.92); color: rgba(2,6,23,.75); } .mock .qr img{ width:100%; height:100%; display:block; object-fit:contain; padding:8px; } /* Contact card */ .contact-card{ display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; margin-top:12px; } @media(max-width:720px){ .contact-card{ grid-template-columns: 1fr; } } .contact-item{ display:flex; align-items:center; justify-content:flex-start; gap:12px; padding:14px 14px; border-radius:18px; border:1px solid var(--border); background: var(--card_bg); text-decoration:none; } .contact-item:hover{ transform: translateY(-1px); } .contact-item .ci-ic{ font-weight:800; } .contact-item .ci-t{ color: var(--muted); font-size:13px; } /* WhatsApp floating button */ .wa-float{ position:fixed; right:16px; bottom:16px; width:56px; height:56px; border-radius:18px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg,#22c55e,#16a34a); box-shadow: 0 22px 70px rgba(2,6,23,.25); z-index:9997; } html[dir="rtl"] .wa-float{ right:auto; left:16px; } .wa-float img{ width:26px; height:26px; display:block; } /* Onboarding wizard */ .ob-steps{display:flex;gap:8px;flex-wrap:wrap} .ob-step{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border);border-radius:999px;background:var(--card_bg);text-decoration:none;color:var(--text);font-size:13px;transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease} .ob-step:hover{transform:translateY(-1px)} .ob-step .num{width:22px;height:22px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:800;background:rgba(14,165,233,.12)} .ob-step.done .num{background:rgba(34,197,94,.16)} .ob-step.active{border-color:rgba(14,165,233,.55);box-shadow:0 18px 55px rgba(14,165,233,.10)} .ob-progress{width:100%;height:10px;border-radius:999px;background:rgba(100,116,139,.18);overflow:hidden;margin-top:10px} .ob-progress>span{display:block;height:100%;width:var(--ob-pct, 0%);background:linear-gradient(90deg,var(--brand),var(--brand2))} /* Public menu responsive tweaks */ @media(max-width:560px){ .menu-head{flex-direction:column;align-items:stretch} .menu-head > div{width:100%} .menu-head form{width:100%} .menu-head form select{flex:1;min-width:0} .menu-layout-grid .products-grid{grid-template-columns:1fr} .menu-layout-grid .product-thumb{height:150px} .menu-layout-compact .products-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .menu-cat-tabs .tabs{padding:8px 10px} .menu-scope .menu-cat-wrap{top:10px;border-radius:16px} } @media(max-width:420px){ .menu-layout-grid .product-thumb{height:140px;border-radius:14px} .menu-layout-compact .product-thumb{width:44px;height:44px;flex-basis:44px} } /* ========================= Crypto Wallet (Manual) ========================= */ .crypto-wrap{margin-top:12px} .crypto-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} @media(max-width:800px){.crypto-grid{grid-template-columns:1fr}} .crypto-opt{border:1px solid rgba(15,23,42,.12);border-radius:14px;padding:12px;cursor:pointer;transition:transform .06s ease, border-color .2s ease, background .2s ease;background:#fff} .crypto-opt:hover{transform:translateY(-1px);border-color:rgba(59,130,246,.35);background:rgba(59,130,246,.04)} .crypto-opt.is-on{border-color:rgba(34,197,94,.55);background:rgba(34,197,94,.06)} .crypto-opt .t{font-weight:800} .crypto-opt .a{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;opacity:.85;word-break:break-all;margin-top:6px} .crypto-box{display:flex;gap:14px;align-items:flex-start;justify-content:flex-start;margin-top:12px;flex-wrap:wrap} .qr-box{background:#fff;border:1px solid rgba(15,23,42,.10);border-radius:16px;padding:12px;display:inline-flex;align-items:center;justify-content:center;min-width:170px} .qr-box img{width:160px;height:160px;display:block} .addr-box{flex:1;min-width:260px} .addr-line{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .addr-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;background:rgba(15,23,42,.04);border:1px solid rgba(15,23,42,.08);padding:10px 12px;border-radius:12px;word-break:break-all;flex:1} .btn.copy{padding:10px 12px;border-radius:12px;border:1px solid rgba(15,23,42,.12);background:#fff} .btn.copy:hover{border-color:rgba(59,130,246,.35);background:rgba(59,130,246,.04)} .crypto-form{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:10px} @media(max-width:800px){.crypto-form{grid-template-columns:1fr}} .crypto-form textarea{min-height:86px;resize:vertical} .crypto-hint{margin-top:8px;font-size:12px;opacity:.85} /* ====== Sheet Modal (Categories & Product) ====== */ @media(max-width:800px){.crypto-grid{grid-template-columns:1fr}} .crypto-opt{border:1px solid rgba(15,23,42,.12);border-radius:14px;padding:12px;cursor:pointer;transition:transform .06s ease, border-color .2s ease, background .2s ease;background:#fff} .crypto-opt:hover{transform:translateY(-1px);border-color:rgba(59,130,246,.35);background:rgba(59,130,246,.04)} .crypto-opt.is-on{border-color:rgba(34,197,94,.55);background:rgba(34,197,94,.06)} .crypto-opt .t{font-weight:800} .crypto-opt .a{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;opacity:.85;word-break:break-all;margin-top:6px} .crypto-box{display:flex;gap:14px;align-items:flex-start;justify-content:flex-start;margin-top:12px;flex-wrap:wrap} .qr-box{background:#fff;border:1px solid rgba(15,23,42,.10);border-radius:16px;padding:12px;display:inline-flex;align-items:center;justify-content:center;min-width:170px} .qr-box img{width:160px;height:160px;display:block} .addr-box{flex:1;min-width:260px} .addr-line{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .addr-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;background:rgba(15,23,42,.04);border:1px solid rgba(15,23,42,.08);padding:10px 12px;border-radius:12px;word-break:break-all;flex:1} .btn.copy{padding:10px 12px;border-radius:12px;border:1px solid rgba(15,23,42,.12);background:#fff} .btn.copy:hover{border-color:rgba(59,130,246,.35);background:rgba(59,130,246,.04)} .crypto-form{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:10px} @media(max-width:800px){.crypto-form{grid-template-columns:1fr}} .crypto-form textarea{min-height:86px;resize:vertical} .crypto-hint{margin-top:8px;font-size:12px;opacity:.85} /* ====== New Sheet Modal (Menu) ====== */ .yr-modal-open body{overflow:hidden !important} .yr-sheet-overlay{ position:fixed; inset:0; z-index:9998; display:flex; align-items:flex-end; justify-content:center; padding:12px; background:rgba(2,6,23,.62); backdrop-filter:blur(10px); } .yr-sheet{ width:min(980px, calc(100vw - 24px)); max-height:calc(100vh - 24px); background:var(--card_bg); border:1px solid var(--border); border-radius:24px; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; transform:translateY(0); animation:yrSheetIn .16s ease; } @keyframes yrSheetIn{from{transform:translateY(10px);opacity:.75}to{transform:translateY(0);opacity:1}} .yr-sheet-header{ display:flex; align-items:center; gap:10px; padding:10px 12px; position:sticky; top:0; z-index:2; background:linear-gradient(90deg, var(--brand), var(--brand2)); background:linear-gradient(90deg, color-mix(in srgb, var(--brand) 78%, #000 22%), color-mix(in srgb, var(--brand2) 78%, #000 22%)); color:#fff; } .yr-sheet-titlewrap{min-width:0;flex:1} .yr-sheet-title{font-weight:900;font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .yr-sheet-sub{font-size:12px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .yr-sheet-btn{ width:38px;height:38px; border-radius:999px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.14); color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .12s ease, background .2s ease; } .yr-sheet-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.20)} .yr-sheet-body{ padding:12px; overflow:auto; } /* Category view inside sheet */ .yr-cat-hero{ border-radius:20px; border:1px solid var(--border); overflow:hidden; min-height:120px; background:linear-gradient(120deg, var(--brand), var(--brand2)); background:linear-gradient(120deg, color-mix(in srgb, var(--brand) 70%, #000 30%), color-mix(in srgb, var(--brand2) 70%, #000 30%)); background-size:cover; background-position:center; position:relative; } .yr-cat-hero::before{ content:''; position:absolute; inset:0; background:linear-gradient(120deg, rgba(0,0,0,.55), rgba(0,0,0,.20)); } .yr-cat-hero-in{position:relative;z-index:1;padding:14px;color:#fff;display:flex;flex-direction:column;gap:6px} .yr-cat-hero-title{font-weight:950;font-size:18px;letter-spacing:.2px} .yr-cat-hero-meta{font-size:12px;opacity:.92} .yr-cat-products{margin-top:12px} /* Make product cards feel tappable in modal */ .yr-sheet .product-card{transition:transform .12s ease, box-shadow .2s ease} .yr-sheet .product-card:hover{transform:translateY(-2px)} /* Product view inside sheet */ .yr-prod-media{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--border);background:rgba(0,0,0,.04);margin-bottom:12px} .yr-prod-media>img{width:100%;height:260px;object-fit:cover;display:block} @media(min-width:720px){.yr-prod-media>img{height:340px}} .yr-prod-nav{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(0,0,0,.35);color:#fff;border-radius:14px;width:40px;height:40px;cursor:pointer} .yr-prod-nav.prev{left:10px} .yr-prod-nav.next{right:10px} .yr-prod-thumbs{display:flex;gap:8px;overflow:auto;padding:10px;background:rgba(0,0,0,.18);backdrop-filter:blur(8px);position:absolute;left:0;right:0;bottom:0} .yr-prod-thumb{border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.10);border-radius:12px;padding:0;overflow:hidden;flex:0 0 54px;height:44px;cursor:pointer} .yr-prod-thumb.active{border-color:#fff} .yr-prod-thumb img{width:100%;height:100%;object-fit:cover;display:block} .yr-prod-head{display:flex;justify-content:flex-start;align-items:flex-start;gap:10px;margin-bottom:10px} .yr-prod-title{min-width:0} .yr-prod-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px} .yr-prod-sec{margin-top:10px;border:1px solid var(--border);border-radius:16px;padding:10px;background:rgba(255,255,255,.02)} .yr-prod-sec summary{cursor:pointer;font-weight:800} .yr-prod-opts{margin-top:12px} .yr-prod-actions{display:flex;justify-content:flex-start;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px} .yr-prod-qty{display:flex;align-items:center;gap:8px} .yr-size-grid{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px} .yr-size-item{display:flex;align-items:center;gap:10px;border:1px solid var(--border);background:var(--btn_bg);padding:10px 12px;border-radius:16px;cursor:pointer;min-width:150px} .yr-size-item input{width:18px;height:18px} .yr-size-item .mid{display:flex;flex-direction:column;gap:2px} .yr-opt-list{display:flex;flex-direction:column;gap:8px;margin-top:10px} .yr-opti{display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:10px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.02);cursor:pointer} .yr-opti input{width:18px;height:18px} @media(max-width:740px){ .yr-sheet-overlay{padding:0;align-items:flex-end} .yr-sheet{width:100%;max-height:92vh;border-bottom-left-radius:0;border-bottom-right-radius:0} } /* ===== Panel Dashboard (Patch 06) ===== */ .dash-hero{padding:18px;position:relative;overflow:hidden} .dash-hero:before{content:"";position:absolute;inset:-60px -80px auto auto;width:240px;height:240px;background:radial-gradient(circle at 30% 30%, rgba(14,165,233,.35), rgba(34,197,94,.06) 60%, transparent 70%);filter: blur(2px);pointer-events:none} .dash-hero:after{content:"";position:absolute;inset:auto auto -80px -80px;width:260px;height:260px;background:radial-gradient(circle at 30% 30%, rgba(34,197,94,.22), rgba(14,165,233,.05) 55%, transparent 70%);filter: blur(2px);pointer-events:none} .dash-hero-top{display:flex;justify-content:flex-start;gap:14px;align-items:flex-start;flex-wrap:wrap;position:relative} .dash-title{font-size:22px;font-weight:900;letter-spacing:.2px} .dash-sub{margin-top:6px;color:var(--muted);max-width:820px} .dash-hero-meta{display:flex;flex-direction:column;gap:6px;align-items:flex-end} html[dir="rtl"] .dash-hero-meta{align-items:flex-start} .dash-meta-line{font-size:13px;color:var(--muted)} .dash-meta-line b{color:var(--text)} .dash-updated{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted);margin-top:2px} .dash-updated .dot{width:8px;height:8px;border-radius:999px;background:rgba(16,185,129,.85);box-shadow:0 0 0 rgba(16,185,129,.35)} .dash-updated.pulse .dot{animation:dashPulse 1.2s ease-out 1} @keyframes dashPulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.35)}100%{box-shadow:0 0 0 16px rgba(16,185,129,0)}} .dash-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;position:relative;margin-top:14px} .dash-pills{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .dash-kpis{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:12px} @media (max-width: 980px){ .dash-kpis{grid-template-columns:repeat(2, minmax(0, 1fr))} .dash-hero-meta{align-items:flex-start} } @media (max-width: 520px){ .dash-kpis{grid-template-columns:repeat(1, minmax(0, 1fr))} } .dash-kpi{border:1px solid var(--border);background:linear-gradient(135deg, rgba(14,165,233,.10), rgba(34,197,94,.06));border-radius:18px;padding:14px;box-shadow:var(--shadow)} html[data-theme='dark'] .dash-kpi{background:linear-gradient(135deg, rgba(14,165,233,.16), rgba(34,197,94,.07))} .kpi-top{display:flex;gap:10px;align-items:center} .kpi-ico{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:14px;background:rgba(255,255,255,.70);border:1px solid var(--border)} html[data-theme='dark'] .kpi-ico{background:rgba(16,27,49,.65)} .kpi-label{font-weight:800;color:var(--text)} .kpi-val{margin-top:10px;font-size:26px;font-weight:900;letter-spacing:.2px} .kpi-cur{font-size:14px;color:var(--muted);font-weight:800} .kpi-sub{margin-top:6px;font-size:12px;color:var(--muted)} .kpi-sub .link{color:var(--text);text-decoration:none;border-bottom:1px dashed rgba(14,165,233,.35)} .kpi-sub .link:hover{border-bottom-color:rgba(14,165,233,.8)} .dash-card-head{display:flex;justify-content:flex-start;align-items:flex-start;gap:12px;flex-wrap:wrap} .dash-card-title{font-weight:900} .dash-card-sub{margin-top:4px;color:var(--muted);font-size:12px} .dash-mini{display:flex;gap:8px;align-items:center} .dash-spark{height:92px;display:flex;gap:6px;align-items:flex-end;margin-top:12px;padding:6px 4px;border-radius:16px;border:1px solid var(--border);background:rgba(255,255,255,.55)} html[data-theme='dark'] .dash-spark{background:rgba(16,27,49,.45)} .dash-spark .bar{flex:1;min-width:8px;border-radius:12px 12px 6px 6px;background:linear-gradient(180deg, rgba(14,165,233,.92), rgba(34,197,94,.70));opacity:.92;box-shadow:0 10px 30px rgba(2,6,23,.12)} html[data-theme='dark'] .dash-spark .bar{box-shadow:0 16px 40px rgba(0,0,0,.25)} .dash-spark-labels{display:flex;gap:6px;margin-top:8px;color:var(--muted);font-size:11px;opacity:.9} .dash-spark-labels span{flex:1;min-width:8px;text-align:center} /* --- Panel Drag & Drop Sorting (Patch 07) --- */ .yr-drag-handle{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:10px; cursor:grab; user-select:none; background:rgba(2,132,199,0.10); border:1px solid rgba(2,132,199,0.18); color:rgba(2,132,199,0.95); font-weight:700; } .yr-drag-handle:active{ cursor:grabbing; } tr.yr-dragging{ opacity:0.75; } tr.yr-dragging td{ background:rgba(15,23,42,0.55) !important; } /* ---- Menu UX upgrades (filters, quick add, top button, skeleton, highlight, mode) ---- */ .menu-scope .yr-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px} .menu-scope .yr-filters .chip{border:1px solid var(--border);background:var(--card_bg);color:var(--text);border-radius:999px;padding:8px 10px;font-weight:800;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px} .menu-scope .yr-filters .chip:hover{transform:translateY(-1px)} .menu-scope .yr-filters .chip.active{background:linear-gradient(90deg,var(--brand),var(--brand2));color:var(--on_brand,#fff);border-color:transparent} .menu-scope .yr-filters .chip.ghost{background:transparent} .menu-scope .product-card{position:relative} .menu-scope .yr-quick-add{position:absolute;inset-inline-end:12px;top:12px;width:34px;height:34px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(15,23,42,.45);color:#fff;font-weight:900;display:none;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(8px);box-shadow:0 10px 22px rgba(0,0,0,.18);z-index:3} .menu-scope.menu-layout-grid .yr-quick-add{top:12px} .menu-scope .yr-quick-add:hover{transform:translateY(-1px);background:rgba(15,23,42,.62)} .menu-scope .yr-quick-add:active{transform:translateY(0px) scale(.98)} /* Unavailable / out-of-stock overlay */ .menu-scope .product-card.is-unavailable{opacity:.62;filter:saturate(.9)} .menu-scope .product-card.is-unavailable .yr-quick-add{display:none !important} .menu-scope .product-card.is-unavailable::after{ content: attr(data-unavail-label); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:10px; font-weight:900; font-size:14px; color:var(--text); background:rgba(2,6,23,.10); border-radius:inherit; pointer-events:none; } .menu-to-top{position:fixed;inset-inline-end:14px;bottom:84px;z-index:92;width:42px;height:42px;border-radius:999px;border:1px solid var(--border);background:var(--card_bg);color:var(--text);box-shadow:0 18px 40px rgba(0,0,0,.16);cursor:pointer} .menu-to-top:hover{transform:translateY(-1px)} .menu-scope mark.yr-hl{background:color-mix(in srgb, var(--brand2) 22%, transparent);color:inherit;border-radius:6px;padding:0 3px} .menu-scope .product-thumb.yr-img-loading{position:relative} .menu-scope .product-thumb.yr-img-loading::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg, rgba(148,163,184,.18) 0%, rgba(148,163,184,.10) 45%, rgba(148,163,184,.18) 90%);animation:yrShimmer 1.05s linear infinite} @keyframes yrShimmer{0%{transform:translateX(-30%)}100%{transform:translateX(30%)}} .menu-scope img.yr-img{opacity:0;transition:opacity .22s ease} .menu-scope img.yr-img.loaded{opacity:1} /* Force mode (optional) */ .menu-scope.menu-force-dark{--page_bg:#0b1220;--card_bg:#0f172a;--text:#f1f5f9;--muted:#cbd5e1;--border:rgba(255,255,255,.12);--tabs_bg:rgba(2,6,23,.70);--overlay_bg:rgba(2,6,23,.70)} .menu-scope.menu-force-light{--page_bg:#f7f9fc;--card_bg:#ffffff;--text:#0b1320;--muted:#475569;--border:rgba(15,23,42,.10);--tabs_bg:rgba(255,255,255,.70);--overlay_bg:rgba(255,255,255,.70)} /* Modal upsell */ .yr-prod-also{margin-top:12px} .yr-also-list{display:flex;gap:10px;overflow:auto;padding:8px 2px;scroll-snap-type:x mandatory} .yr-mini-card{min-width:140px;max-width:160px;scroll-snap-align:start;padding:10px;display:flex;flex-direction:column;gap:8px;cursor:pointer} .yr-mini-card img{width:100%;height:92px;border-radius:14px;object-fit:cover;border:1px solid var(--border)} .yr-mini-card .ph{width:100%;height:92px;border-radius:14px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;background:rgba(148,163,184,.10)} .yr-mini-card .nm{font-weight:900;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .yr-mini-card .pr{font-weight:900;font-size:12px;opacity:.9} .yr-prod-note textarea{width:100%;margin-top:8px;min-height:60px;border-radius:14px;border:1px solid var(--border);padding:10px 12px;resize:vertical} /* ---- Smart Menu blocks (Most ordered + Combos) ---- */ .yr-smart-wrap{display:block} .yr-smart-block{padding:14px} .yr-smart-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px} .yr-smart-title{font-weight:900;font-size:14px} .yr-smart-note{opacity:.7;white-space:nowrap} .yr-smart-list{display:flex;gap:10px;overflow:auto;padding:8px 2px;scroll-snap-type:x mandatory} .yr-mini-add{ position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:12px; border:1px solid rgba(255,255,255,0.18); background:rgba(15,23,42,0.65); backdrop-filter: blur(8px); color:#fff; font-weight:900; display:flex; align-items:center; justify-content:center; cursor:pointer; } html[dir="ltr"] .yr-mini-add{right:10px; left:auto;} html[dir="rtl"] .yr-mini-add{left:10px; right:auto;} /* Combo cards */ .yr-combo-card{min-width:220px;max-width:260px;scroll-snap-align:start;padding:12px;display:flex;flex-direction:column;gap:8px} .yr-combo-photos{display:flex;align-items:center;gap:0} .yr-combo-photos img, .yr-combo-photos .ph{width:86px;height:86px;border-radius:18px;object-fit:cover;border:1px solid var(--border);background:rgba(148,163,184,.10);display:flex;align-items:center;justify-content:center} .yr-combo-photos img.second, .yr-combo-photos .ph.second{margin-left:-18px} html[dir="rtl"] .yr-combo-photos img.second, html[dir="rtl"] .yr-combo-photos .ph.second{margin-left:0;margin-right:-18px} .yr-combo-name{font-weight:900;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .yr-combo-hint{opacity:.7} .yr-combo-add{ margin-top:4px; height:38px; border-radius:14px; border:1px solid rgba(255,255,255,0.14); background:rgba(14,165,233,0.18); color:var(--text); font-weight:900; cursor:pointer; } .yr-combo-add:hover{background:rgba(14,165,233,0.26)} /* Part-12: checkout upsell */ #yrUpsellMount .card{border:1px solid var(--border)} #yrUpsellMount .yr-mini-card .btn.primary{padding:8px 10px;border-radius:12px}