:root {
    --primary: #3C6E71;
    --primary-dark: #284B63;
    --secondary: #D9D9D9;
    --accent: #284B63;
    --cream: #FFFFFF;
    --ink: #353535;
    --muted: #3C6E71;
    --line: #D9D9D9;
    --sidebar: 270px;
    --shadow: 0 12px 35px rgba(40, 75, 99, .10);
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100%; font-family: "Tajawal", Arial, sans-serif; background: #f8f2df; color: var(--ink); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

.loading, .public-loading { min-height: 100vh; display: grid; place-items: center; color: var(--primary); font-weight: 800; }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 0 0 auto; width: var(--sidebar); padding: 22px 16px; display: flex; flex-direction: column; z-index: 30; color: #fff; background: linear-gradient(165deg, #284B63, #3C6E71 52%, #353535); box-shadow: -12px 0 32px rgba(61, 27, 18, .18); }
.brand { display: flex; align-items: center; gap: 12px; padding: 5px 5px 24px; border-bottom: 1px solid rgba(255,255,255,.18); }
.brand img { width: 54px; height: 54px; object-fit: contain; padding: 5px; border-radius: 15px; background: #fff; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 18px; }
.brand small { margin-top: 3px; color: #D9D9D9; }
.sidebar nav { display: grid; gap: 7px; margin-top: 22px; }
.sidebar nav a { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 12px; color: #FFFFFF; text-decoration: none; font-weight: 700; transition: .18s ease; }
.sidebar nav a span { width: 25px; text-align: center; font-size: 19px; }
.sidebar nav a.active, .sidebar nav a:hover { background: #fff; color: var(--primary); box-shadow: 0 8px 20px rgba(59, 19, 13, .22); transform: translateX(-2px); }
.sidebar-foot { margin-top: auto; padding: 16px 8px 5px; border-top: 1px solid rgba(255,255,255,.18); color: #D9D9D9; font-size: 14px; }
.status-dot { display: inline-block; width: 9px; height: 9px; margin-left: 7px; border-radius: 50%; background: #68d391; box-shadow: 0 0 0 4px rgba(123, 228, 149, .14); }
.content { min-height: 100vh; margin-right: var(--sidebar); }
.content > header { position: sticky; top: 0; z-index: 20; height: 74px; padding: 0 28px; display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }
.content > header b, .content > header small { display: block; }
.content > header small { margin-top: 2px; color: var(--muted); }
.avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--secondary); color: #284B63; font-weight: 800; }
.header-preview { margin-right: auto; padding: 9px 14px; border-radius: 10px; background: var(--cream); color: var(--primary); text-decoration: none; font-weight: 800; }
.menu-btn { display: none; border: 0; padding: 8px 11px; border-radius: 9px; background: var(--cream); color: var(--primary); font-size: 19px; cursor: pointer; }
.page-body { padding: 28px; }
.page-title { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.page-title h1 { margin: 0; font-size: 29px; }
.page-title p, .muted { margin: 5px 0 0; color: var(--muted); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 43px; padding: 10px 17px; border: 0; border-radius: 11px; text-decoration: none; cursor: pointer; font-weight: 800; transition: .18s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .58; cursor: not-allowed; transform: none; }
.primary { background: var(--primary); color: #fff; box-shadow: 0 8px 20px rgba(60,110,113,.20); }
.ghost { background: #FFFFFF; color: var(--ink); }
.whatsapp { background: #1e9d5a; color: #fff; }
.full { width: 100%; }
.panel, .stats article, .cards-list article, .product-card { background: #fff; border: 1px solid var(--line); border-radius: 17px; box-shadow: var(--shadow); }
.panel { padding: 21px; }
.panel h2 { margin: 0; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.stats article { min-height: 92px; padding: 18px; display: flex; align-items: center; gap: 13px; }
.stats small, .stats strong { display: block; }
.stats small { color: var(--muted); }
.stats strong { margin-top: 4px; font-size: 26px; }
.stat-icon { flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--cream); color: var(--primary); font-size: 21px; font-weight: 900; }
.grid-2 { display: grid; grid-template-columns: 1.25fr .9fr; gap: 18px; margin-top: 20px; }
.setup-steps { display: grid; gap: 10px; }
.setup-steps a { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid #D9D9D9; border-radius: 13px; background: #FFFFFF; text-decoration: none; transition: .18s ease; }
.setup-steps a:hover { border-color: #e3c84f; transform: translateX(-3px); }
.setup-steps a > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 900; }
.setup-steps b, .setup-steps small { display: block; }
.setup-steps small { margin-top: 3px; color: var(--muted); }
.service-card { position: relative; overflow: hidden; background: linear-gradient(145deg, #fff, #FFFFFF); }
.service-card::after { content: ""; position: absolute; width: 180px; height: 180px; left: -70px; bottom: -90px; border-radius: 50%; background: rgba(242, 203, 41, .18); }
.service-icon { width: 55px; height: 55px; display: grid; place-items: center; border-radius: 17px; background: var(--secondary); font-size: 26px; }
.service-card h2 { margin-top: 16px; }
.service-card p { color: var(--muted); line-height: 1.8; }
.service-features { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 15px; color: var(--accent); font-weight: 700; }
.subscription-note { display: inline-block; margin-top: 18px; padding: 7px 10px; border-radius: 9px; background: #fff; color: var(--muted); border: 1px solid var(--line); }
.alert { margin-bottom: 16px; padding: 13px 15px; border-radius: 11px; border: 1px solid transparent; font-weight: 600; }
.alert-success { color: #17653f; background: #e6f6ed; border-color: #bce6ce; }
.alert-error { color: #922f25; background: #fff0ed; border-color: #f1cbc4; }
.alert-info { color: #70531d; background: #FFFFFF; border-color: #efdea1; }
.alert a { font-weight: 800; }
.editor-panel { margin-bottom: 18px; border-top: 4px solid var(--secondary); }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.form-grid label, .color-grid label { display: grid; gap: 7px; color: #4a3c36; font-weight: 700; }
.form-grid input, .form-grid select, .form-grid textarea, .filter-bar input, .filter-bar select, .copy-box input, .color-grid input[type="text"], .slug-input input { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; outline: none; background: #fff; color: var(--ink); }
.form-grid textarea { resize: vertical; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus, .filter-bar input:focus, .filter-bar select:focus { border-color: #3C6E71; box-shadow: 0 0 0 3px rgba(60,110,113,.10); }
.category-form { grid-template-columns: 1.5fr .7fr .7fr 1fr; align-items: end; }
.item-form, .settings-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.span-two { grid-column: span 2; }
.switch-field { display: flex !important; align-items: center; gap: 10px !important; min-height: 43px; align-self: end; padding: 10px 12px; border-radius: 10px; background: #FFFFFF; border: 1px solid #D9D9D9; }
.switch-field input { width: 18px !important; height: 18px; accent-color: var(--primary); }
.form-actions { display: flex; gap: 10px; margin-top: 18px; }
.cards-list { display: grid; gap: 10px; }
.cards-list article { display: flex; align-items: center; gap: 14px; padding: 14px; }
.grow { flex: 1; }
.cards-list h3 { margin: 0 0 4px; }
.cards-list small { color: var(--muted); }
.category-icon { width: 49px; height: 49px; display: grid; place-items: center; border-radius: 14px; background: var(--cream); font-size: 23px; }
.badge { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.success { background: #e1f4e9; color: #18724a; }
.neutral { background: #f0ece9; color: #796961; }
.icon-btn { border: 0; padding: 8px 11px; border-radius: 9px; background: #D9D9D9; color: var(--primary); cursor: pointer; font-weight: 800; }
.danger-icon { background: #fff0ed; color: #a23429; }
.empty-state { grid-column: 1 / -1; min-height: 160px; padding: 30px; display: grid; place-items: center; text-align: center; color: var(--muted); border: 1px dashed #D9D9D9; border-radius: 15px; background: rgba(255,255,255,.65); }
.empty-state > span { font-size: 38px; }
.empty-state h3 { margin: 7px 0 0; color: var(--ink); }
.empty-state p { margin: 3px 0; }
.filter-bar { display: grid; grid-template-columns: 1fr 240px; gap: 12px; margin-bottom: 18px; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.product-card { overflow: hidden; }
.food-image { position: relative; height: 180px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg, #D9D9D9, #D9D9D9); font-size: 62px; }
.food-image img { width: 100%; height: 100%; object-fit: cover; }
.featured-ribbon { position: absolute; top: 12px; right: 12px; padding: 6px 10px; border-radius: 999px; background: var(--secondary); color: #4c2b16; font-size: 12px; }
.product-content { padding: 16px; }
.product-meta, .price-line, .card-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.product-meta small { color: var(--muted); }
.product-content h3 { margin: 13px 0 5px; }
.product-content p { min-height: 45px; margin: 0 0 13px; color: var(--muted); line-height: 1.6; }
.price-line strong { color: var(--primary); font-size: 18px; }
.price-line del { color: #3C6E71; }
.card-actions { justify-content: flex-start; margin-top: 15px; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.slug-input { display: flex; direction: ltr; align-items: stretch; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #FFFFFF; }
.slug-input span { padding: 11px; color: var(--muted); }
.slug-input input { border: 0; border-radius: 0; direction: ltr; }
.color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.color-grid label > div { display: grid; grid-template-columns: 48px 1fr; gap: 8px; }
.color-grid input[type="color"] { width: 48px; height: 43px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; }
.color-grid input:not([type="color"]) { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 9px; direction: ltr; }
.theme-preview { margin-top: 18px; border-radius: 15px; overflow: hidden; border: 1px solid var(--line); background: var(--preview-bg); }
.theme-cover { height: 85px; display: grid; place-items: center; background: linear-gradient(145deg, var(--preview-primary), color-mix(in srgb, var(--preview-primary), #000 25%)); color: #fff; }
.theme-cover span { padding: 8px 13px; border-radius: 50px; background: rgba(255,255,255,.16); }
.theme-body { padding: 15px; }
.theme-body b, .theme-body small { display: block; }
.theme-body small { color: #353535; }
.theme-body button { margin-top: 11px; padding: 8px 12px; border: 0; border-radius: 9px; background: var(--preview-accent); color: #fff; }
.share-grid { display: grid; grid-template-columns: 380px 1fr; gap: 20px; align-items: start; }
.qr-card { text-align: center; }
.qr-frame { width: 300px; height: 300px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 22px; background: #fff; border: 12px solid var(--cream); box-shadow: inset 0 0 0 1px var(--line); }
#menu-qr img, #menu-qr canvas { display: block; max-width: 260px; max-height: 260px; }
.qr-card h2 { margin-bottom: 5px; }
.qr-card p { color: var(--muted); }
.eyebrow { color: var(--primary); font-weight: 800; }
.share-details > h2 { margin: 7px 0; font-size: 27px; }
.copy-box { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 22px 0 10px; direction: ltr; }
.copy-box input { direction: ltr; background: #FFFFFF; }
.copy-box button { border: 0; padding: 0 18px; border-radius: 10px; background: var(--primary); color: #fff; font-weight: 800; cursor: pointer; }
.inline-message { color: var(--accent); font-weight: 700; }
.share-actions { display: flex; gap: 10px; margin-top: 18px; }
.share-details hr { margin: 25px 0; border: 0; border-top: 1px solid var(--line); }
.use-cases { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.use-cases span { padding: 12px; border-radius: 11px; background: var(--cream); font-weight: 700; }
.backdrop { display: none; }

/* Public menu */
.public-layout { min-height: 100vh; background: #D9D9D9; }
.public-store { --menu-primary: #3C6E71; --menu-secondary: #D9D9D9; --menu-accent: #284B63; --menu-bg: #FFFFFF; width: min(100%, 720px); min-height: 100vh; margin: 0 auto; background: var(--menu-bg); box-shadow: 0 0 45px rgba(48,35,31,.14); }
.menu-hero { position: relative; min-height: 315px; display: grid; place-items: end center; padding: 35px 22px; color: #fff; text-align: center; background: linear-gradient(145deg, var(--menu-primary), #284B63); background-size: cover; background-position: center; overflow: hidden; }
.menu-hero::before { content: ""; position: absolute; width: 230px; height: 230px; right: -90px; top: -90px; border-radius: 50%; background: rgba(255,255,255,.08); }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(33,18,14,.86), rgba(33,18,14,.2)); }
.hero-content { position: relative; z-index: 2; }
.public-logo { width: 84px; height: 84px; margin: 0 auto 12px; display: grid; place-items: center; overflow: hidden; border: 5px solid rgba(255,255,255,.85); border-radius: 50%; background: #fff; color: var(--menu-primary); font-size: 36px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.public-logo img { width: 100%; height: 100%; object-fit: cover; }
.hero-content h1 { margin: 0; font-size: 31px; }
.hero-content p { max-width: 520px; margin: 7px auto 13px; color: #D9D9D9; line-height: 1.7; }
.open-state { display: inline-flex; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; }
.open-state.is-open { color: #dff9e8; background: rgba(36, 125, 74, .82); }
.open-state.is-closed { color: #fff0ec; background: rgba(132,42,32,.75); }
.restaurant-info { padding: 15px 18px; background: #fff; border-bottom: 1px solid #D9D9D9; text-align: center; }
.restaurant-info > span { display: block; color: #353535; font-size: 14px; }
.contact-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.contact-links a { padding: 7px 13px; border: 1px solid color-mix(in srgb, var(--menu-primary), #fff 65%); border-radius: 999px; color: var(--menu-primary); text-decoration: none; font-weight: 800; font-size: 13px; }
.public-search { position: relative; margin: 15px 16px 10px; }
.public-search span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #3C6E71; font-size: 23px; }
.public-search input { width: 100%; padding: 13px 44px 13px 13px; border: 1px solid #D9D9D9; border-radius: 13px; background: #fff; outline: none; }
.category-tabs { position: sticky; top: 0; z-index: 8; display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px 13px; background: color-mix(in srgb, var(--menu-bg), #fff 50%); backdrop-filter: blur(10px); scrollbar-width: none; }
.category-tabs::-webkit-scrollbar { display: none; }
.category-tabs button { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 9px 14px; border: 1px solid #D9D9D9; border-radius: 999px; background: #fff; color: #353535; cursor: pointer; font-weight: 800; }
.category-tabs button.active { border-color: var(--menu-primary); background: var(--menu-primary); color: #fff; box-shadow: 0 7px 18px color-mix(in srgb, var(--menu-primary), transparent 75%); }
.public-products { padding: 5px 16px 28px; }
.menu-section { margin-top: 18px; }
.section-title { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.section-title > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--menu-secondary), #fff 60%); }
.section-title h2 { margin: 0; font-size: 21px; }
.menu-items-list { display: grid; gap: 11px; }
.public-product-card { display: grid; grid-template-columns: 128px 1fr; gap: 14px; padding: 10px; border: 1px solid #D9D9D9; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(66,42,31,.05); }
.public-product-image { position: relative; min-height: 122px; display: grid; place-items: center; overflow: hidden; border-radius: 13px; background: linear-gradient(145deg, #D9D9D9, #D9D9D9); font-size: 47px; }
.public-product-image img { width: 100%; height: 100%; object-fit: cover; }
.public-product-image b { position: absolute; top: 7px; right: 7px; padding: 4px 8px; border-radius: 999px; background: var(--menu-secondary); color: #353535; font-size: 11px; }
.public-product-content { padding: 4px 0 3px; }
.public-product-content h3 { margin: 0 0 5px; font-size: 18px; }
.public-product-content p { margin: 0 0 8px; color: #3C6E71; line-height: 1.55; font-size: 14px; }
.item-notes { display: flex; flex-wrap: wrap; gap: 6px; }
.item-notes small { padding: 4px 7px; border-radius: 7px; background: #FFFFFF; color: #3C6E71; }
.public-price { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.public-price strong { color: var(--menu-primary); font-size: 17px; }
.public-price del { color: #3C6E71; font-size: 13px; }
.menu-empty, .public-error { min-height: 65vh; display: grid; place-items: center; align-content: center; padding: 30px; text-align: center; color: #3C6E71; }
.menu-empty span, .public-error span { font-size: 52px; }
.menu-empty h3, .public-error h1 { margin: 10px 0 2px; color: #353535; }
.menu-empty p, .public-error p { margin: 0; }
.public-error { min-height: 100vh; background: #FFFFFF; }
.public-footer { padding: 25px 18px 32px; text-align: center; background: #fff; border-top: 1px solid #D9D9D9; }
.public-footer b, .public-footer span { display: block; }
.public-footer span { margin-top: 4px; color: #3C6E71; font-size: 13px; }

@media (max-width: 1120px) {
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .settings-grid { grid-template-columns: 1fr; }
}

@media (max-width: 850px) {
    :root { --sidebar: 280px; }
    .sidebar { transform: translateX(105%); transition: .25s ease; }
    .sidebar.open { transform: translateX(0); }
    .backdrop.show { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(0,0,0,.48); }
    .content { margin-right: 0; }
    .menu-btn { display: block; }
    .header-preview { display: none; }
    .content > header { padding: 0 15px; }
    .avatar { margin-right: auto; }
    .page-body { padding: 18px; }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-2, .share-grid { grid-template-columns: 1fr; }
    .qr-card { max-width: 440px; width: 100%; margin: auto; }
    .category-form { grid-template-columns: 1fr 1fr; }
    .category-form .switch-field { grid-column: span 2; }
}

@media (max-width: 620px) {
    .page-title { align-items: flex-start; }
    .page-title h1 { font-size: 24px; }
    .page-title .btn { min-height: 40px; padding: 9px 12px; white-space: nowrap; }
    .stats { gap: 10px; }
    .stats article { min-height: 82px; padding: 13px; }
    .stats strong { font-size: 22px; }
    .stat-icon { width: 42px; height: 42px; }
    .service-features, .use-cases { grid-template-columns: 1fr; }
    .form-grid, .item-form, .settings-form, .category-form, .color-grid { grid-template-columns: 1fr; }
    .span-two, .category-form .switch-field { grid-column: auto; }
    .product-grid { grid-template-columns: 1fr; }
    .filter-bar { grid-template-columns: 1fr; }
    .share-actions { flex-direction: column; }
    .qr-frame { width: 280px; height: 280px; }
    .public-store { width: 100%; box-shadow: none; }
    .menu-hero { min-height: 285px; }
    .hero-content h1 { font-size: 27px; }
    .public-product-card { grid-template-columns: 105px 1fr; gap: 11px; }
    .public-product-image { min-height: 108px; }
}

/* Authentication and system-owner area */
.signed-user { display: flex; align-items: center; gap: 9px; }
.signed-user > div { min-width: 0; }
.signed-user b, .signed-user small { display: block; }
.signed-user b { max-width: 165px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.signed-user small { margin-top: 2px; color: #D9D9D9; }
.logout-button { width: 100%; margin-top: 13px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.25); border-radius: 10px; background: rgba(255,255,255,.08); color: #fff; font-weight: 800; cursor: pointer; }
.logout-button:hover { background: var(--secondary); color: var(--primary-dark); border-color: var(--secondary); }

.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(470px, 1.15fr) minmax(420px, .85fr); background: #FFFFFF; }
.login-visual { position: relative; min-height: 100vh; padding: 38px 52px; display: flex; flex-direction: column; overflow: hidden; color: #fff; background: linear-gradient(150deg, #284B63 0%, #3C6E71 55%, #353535 100%); }
.login-visual::before { content: ""; position: absolute; inset: 0 0 auto; height: 165px; opacity: .2; background: radial-gradient(circle at 10px 15px, #D9D9D9 0 4px, transparent 5px) 0 0 / 44px 44px; }
.login-visual::after { content: ""; position: absolute; width: 560px; height: 220px; right: -80px; bottom: -80px; border-radius: 50%; background: #D9D9D9; transform: rotate(-9deg); }
.login-brand { position: relative; z-index: 2; display: flex; align-items: center; gap: 13px; }
.login-brand img { width: 68px; height: 68px; object-fit: contain; padding: 6px; border-radius: 18px; background: #fff; }
.login-brand strong, .login-brand span { display: block; }
.login-brand strong { font-size: 22px; }
.login-brand span { margin-top: 3px; color: #D9D9D9; }
.login-copy { position: relative; z-index: 2; max-width: 650px; margin: auto 0; padding: 60px 0 120px; }
.login-kicker { display: inline-flex; padding: 8px 15px; border: 1px solid rgba(217,217,217,.55); border-radius: 999px; background: rgba(217,217,217,.12); color: #D9D9D9; font-weight: 800; }
.login-copy h1 { max-width: 620px; margin: 20px 0 13px; font-size: clamp(36px, 5vw, 64px); line-height: 1.25; }
.login-copy p { max-width: 590px; margin: 0; color: #D9D9D9; font-size: 18px; line-height: 1.9; }
.login-features { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.login-features span { padding: 10px 13px; border-radius: 11px; background: rgba(255,255,255,.1); color: #FFFFFF; font-weight: 700; }
.food-shapes { position: absolute; z-index: 2; left: 40px; bottom: 30px; display: flex; align-items: end; gap: 6px; font-size: 58px; filter: drop-shadow(0 12px 18px rgba(0,0,0,.22)); }
.food-shapes span:nth-child(2) { font-size: 48px; transform: translateY(-18px); }
.food-shapes span:nth-child(3) { font-size: 72px; }
.food-shapes span:nth-child(4) { font-size: 65px; transform: translateY(-10px); }
.login-form-side { min-height: 100vh; padding: 30px; display: grid; place-items: center; background: linear-gradient(135deg, #FFFFFF, #D9D9D9); }
.login-card { width: min(100%, 470px); padding: 36px; border: 1px solid #D9D9D9; border-radius: 24px; background: rgba(255,255,255,.94); box-shadow: 0 25px 70px rgba(60,110,113,.14); }
.login-card-heading { text-align: center; }
.login-icon { width: 62px; height: 62px; margin: 0 auto 13px; display: grid; place-items: center; border-radius: 18px; background: var(--secondary); font-size: 27px; box-shadow: 0 10px 25px rgba(60,110,113,.18); }
.login-card-heading h2 { margin: 0; font-size: 29px; color: var(--primary); }
.login-card-heading p { margin: 7px 0 25px; color: var(--muted); }
.login-card form { display: grid; gap: 17px; }
.login-card label { display: grid; gap: 7px; color: #353535; font-weight: 800; }
.login-card input { width: 100%; padding: 13px 14px; border: 1px solid #D9D9D9; border-radius: 11px; background: #FFFFFF; outline: none; }
.login-card input:focus { border-color: var(--secondary); box-shadow: 0 0 0 4px rgba(60,110,113,.16); }
.login-submit { min-height: 50px; margin-top: 3px; font-size: 16px; background: linear-gradient(135deg, #3C6E71, #353535); }
.login-note { margin-top: 22px; padding: 13px 14px; border-radius: 12px; background: #FFFFFF; border: 1px solid #D9D9D9; }
.login-note b, .login-note span { display: block; }
.login-note b { color: var(--primary); }
.login-note span { margin-top: 3px; color: #353535; font-size: 13px; }
.full { width: 100%; }

.owner-title .eyebrow { display: block; margin-bottom: 6px; }
.secondary-action { background: var(--secondary); color: var(--primary-dark); box-shadow: 0 8px 22px rgba(60,110,113,.18); }
.owner-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.owner-stats article { min-height: 100px; padding: 18px; display: flex; align-items: center; gap: 13px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow); }
.owner-stats article > span { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; background: #D9D9D9; font-size: 24px; }
.owner-stats small, .owner-stats strong { display: block; }
.owner-stats small { color: var(--muted); }
.owner-stats strong { margin-top: 3px; color: var(--primary); font-size: 25px; }
.create-account-panel { margin-bottom: 20px; border-top: 4px solid var(--secondary); }
.account-form { display: grid; gap: 22px; }
.form-section-title { display: flex; align-items: center; gap: 11px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.form-section-title > span { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 11px; background: var(--primary); color: #fff; font-weight: 900; }
.form-section-title b, .form-section-title small { display: block; }
.form-section-title small { margin-top: 2px; color: var(--muted); }
.account-form em { color: #b82424; font-style: normal; }
.form-actions { display: flex; gap: 10px; }
.accounts-heading { gap: 18px; }
.account-search { width: min(100%, 340px); padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; outline: none; }
.account-search:focus { border-color: var(--secondary); box-shadow: 0 0 0 4px rgba(242,203,41,.16); }
.accounts-list { display: grid; gap: 12px; }
.account-card { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 15px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: #FFFFFF; transition: .18s ease; }
.account-card:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(60,110,113,.10); }
.disabled-account { opacity: .72; background: #D9D9D9; }
.account-logo { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(145deg, var(--primary), #284B63); color: var(--secondary); font-size: 25px; font-weight: 900; }
.account-name-row { display: flex; align-items: center; gap: 9px; }
.account-name-row h3 { margin: 0; font-size: 19px; }
.account-status { padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 900; }
.account-status.active { color: #166534; background: #dcfce7; }
.account-status.inactive { color: #8b1d1d; background: #fee2e2; }
.account-meta, .account-links { display: flex; flex-wrap: wrap; gap: 7px 15px; margin-top: 7px; color: var(--muted); font-size: 13px; }
.account-meta b { color: #353535; }
.account-links a { color: var(--primary); font-weight: 800; text-decoration: none; direction: ltr; }
.subscription { padding: 3px 7px; border-radius: 7px; font-weight: 700; }
.subscription-ok, .subscription-open { color: #166534; background: #ecfdf3; }
.subscription-soon { color: #7c5b00; background: #fff5c3; }
.subscription-expired { color: #991b1b; background: #fee2e2; }
.account-actions { display: flex; flex-direction: column; gap: 7px; min-width: 145px; }
.btn.small { min-height: 36px; padding: 7px 10px; border-radius: 9px; font-size: 12px; }
.danger-soft { color: #991b1b; background: #fee2e2; }
.success-soft { color: #166534; background: #dcfce7; }

@media (max-width: 1050px) {
    .login-page { grid-template-columns: 1fr 440px; }
    .login-visual { padding: 32px; }
    .owner-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .login-page { display: block; background: #D9D9D9; }
    .login-visual { min-height: 300px; padding: 24px; }
    .login-copy { padding: 38px 0 75px; }
    .login-copy h1 { font-size: 34px; }
    .login-copy p, .login-features { display: none; }
    .food-shapes { left: 18px; bottom: 10px; font-size: 40px; }
    .food-shapes span:nth-child(3), .food-shapes span:nth-child(4) { font-size: 47px; }
    .login-form-side { min-height: auto; padding: 18px; }
    .login-card { margin-top: -35px; position: relative; z-index: 4; padding: 25px; }
    .account-card { grid-template-columns: 52px 1fr; }
    .account-logo { width: 52px; height: 52px; }
    .account-actions { grid-column: 1 / -1; flex-direction: row; }
    .account-actions .btn { flex: 1; }
}

@media (max-width: 620px) {
    .owner-stats { grid-template-columns: 1fr 1fr; gap: 9px; }
    .owner-stats article { min-height: 85px; padding: 12px; }
    .owner-stats article > span { width: 42px; height: 42px; }
    .accounts-heading { display: block; }
    .account-search { width: 100%; margin-top: 12px; }
    .account-meta { display: grid; gap: 5px; }
    .form-actions { flex-direction: column; }
}

/* Language switch, self-registration and bidirectional layout */
.language-switch {
    min-width: 44px;
    min-height: 36px;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--primary);
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 5px 16px rgba(78,43,29,.07);
}
.language-switch:hover { background: var(--cream); }
.header-language-switch { margin-inline-start: auto; }
.header-preview { margin-inline-start: 0; margin-inline-end: 0; }
.login-language-switch { position: absolute; z-index: 20; top: 20px; inset-inline-end: 20px; border-color: rgba(255,255,255,.55); }
.login-page { position: relative; }
.register-card.is-register { width: min(100%, 680px); }
.registration-form { gap: 15px !important; }
.registration-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.registration-grid label { min-width: 0; }
.register-slug { display: flex; direction: ltr; border: 1px solid #D9D9D9; border-radius: 11px; overflow: hidden; background: #FFFFFF; }
.register-slug span { display: grid; place-items: center; padding: 0 11px; color: var(--muted); background: #f7f2e7; white-space: nowrap; }
.register-slug input { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.link-button { border: 0; padding: 8px 0 0; background: transparent; color: var(--primary); font-weight: 900; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-button.centered { display: block; margin: 4px auto 0; }
.registration-entry .link-button { margin-top: 7px; }
.otp-input { text-align: center; letter-spacing: 9px; font-size: 25px !important; font-weight: 900; }
.otp-expiry { margin: -3px 0 7px; text-align: center; color: var(--muted); font-size: 13px; }
.registration-success { margin: 22px 0; padding: 18px; border: 1px solid #bce6ce; border-radius: 13px; background: #ecfdf3; text-align: center; }
.registration-success strong, .registration-success span { display: block; }
.registration-success strong { color: #166534; font-size: 17px; }
.registration-success span { margin-top: 7px; color: #4f6f5c; line-height: 1.7; }
.account-status.pending { color: #7c5b00; background: #fff5c3; }
.self-register-badge { padding: 3px 7px; border-radius: 7px; color: #664d03; background: #fff3cd; font-weight: 800; }
.public-store-language-wrap { position: fixed; z-index: 50; top: 12px; left: 50%; width: min(100%, 720px); transform: translateX(-50%); pointer-events: none; padding: 0 12px; }
.public-language-switch { pointer-events: auto; float: inline-end; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); }

[dir="ltr"] { font-family: Arial, "Segoe UI", sans-serif; }
[dir="ltr"] .sidebar { inset: 0 auto 0 0; box-shadow: 12px 0 32px rgba(61,27,18,.18); }
[dir="ltr"] .content { margin-right: 0; margin-left: var(--sidebar); }
[dir="ltr"] .sidebar nav a.active,
[dir="ltr"] .sidebar nav a:hover { transform: translateX(2px); }
[dir="ltr"] .status-dot { margin-left: 0; margin-right: 7px; }
[dir="ltr"] .setup-steps a:hover { transform: translateX(3px); }
[dir="ltr"] .featured-ribbon,
[dir="ltr"] .public-product-image b { right: auto; left: 12px; }
[dir="ltr"] .public-product-image b { left: 7px; }
[dir="ltr"] .public-search span { right: auto; left: 14px; }
[dir="ltr"] .public-search input { padding: 13px 13px 13px 44px; }
[dir="ltr"] .menu-hero::before { right: auto; left: -90px; }

@media (min-width: 821px) {
    [dir="rtl"] .header-preview { margin-right: 0; }
    [dir="ltr"] .header-preview { margin-left: 0; }
}

@media (max-width: 850px) {
    [dir="ltr"] .sidebar { transform: translateX(-105%); }
    [dir="ltr"] .sidebar.open { transform: translateX(0); }
    [dir="ltr"] .content { margin-left: 0; }
    [dir="rtl"] .content { margin-right: 0; }
}

@media (max-width: 620px) {
    .registration-grid { grid-template-columns: 1fr; }
    .login-language-switch { top: 12px; inset-inline-end: 12px; }
}

/* GoodByte MultiStore additions */
.store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;padding:24px;max-width:1200px;margin:auto}
.store-product-card{display:flex;flex-direction:column;overflow:hidden}
.store-product-card .public-product-image{height:210px;width:100%}
.store-product-card .public-product-image img{width:100%;height:100%;object-fit:cover}
.add-cart-btn{width:100%;margin-top:14px}
.cart-floating{position:fixed;z-index:80;bottom:22px;inset-inline-end:22px;border:0;border-radius:999px;background:var(--menu-primary,#3C6E71);color:#fff;padding:14px 20px;font-weight:800;box-shadow:0 12px 35px rgba(0,0,0,.22);cursor:pointer}
.cart-drawer{position:fixed;z-index:90;top:0;bottom:0;inset-inline-end:0;width:min(430px,94vw);background:#fff;padding:22px;overflow:auto;box-shadow:0 0 45px rgba(0,0,0,.2);color:#1d2d35}
.cart-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e8eef0;padding-bottom:12px;margin-bottom:12px}.cart-head button{border:0;background:transparent;font-size:30px;cursor:pointer}
.cart-line{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 0;border-bottom:1px solid #edf1f2}.cart-line small{display:block;color:#68777e;margin-top:4px}.qty{display:flex;align-items:center;gap:9px}.qty button{width:30px;height:30px;border:1px solid #dbe3e6;background:#fff;border-radius:8px;cursor:pointer}.qty span{min-width:22px;text-align:center;font-weight:800}
.cart-total{display:flex;justify-content:space-between;font-size:18px;padding:18px 0}.checkout-form{display:grid;gap:10px}.checkout-form input,.checkout-form textarea{width:100%;border:1px solid #d8e1e4;border-radius:10px;padding:11px 12px;font:inherit}.checkout-form textarea{min-height:72px;resize:vertical}.status-pill{display:inline-block;padding:5px 9px;border-radius:999px;background:#eef6f7;font-weight:700;font-size:12px}
@media(max-width:640px){.store-grid{grid-template-columns:1fr;padding:14px}.cart-floating{bottom:12px;inset-inline-end:12px;inset-inline-start:12px}.cart-drawer{width:100%}}

/* MultiStore V2 storefront */
.public-store-v2{--shop-primary:#3C6E71;--shop-secondary:#284B63;--shop-accent:#D9D9D9;--shop-bg:#FFFFFF;min-height:100vh;background:var(--shop-bg);color:#353535;font-family:inherit}.shop-header{height:74px;padding:0 max(22px,calc((100vw - 1240px)/2));display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);border-bottom:1px solid #e7eef0;backdrop-filter:blur(14px)}.shop-brand,.shop-actions{display:flex;align-items:center;gap:11px}.shop-brand img,.shop-logo-fallback{width:46px;height:46px;border-radius:14px;object-fit:cover}.shop-logo-fallback{display:grid;place-items:center;background:var(--shop-primary);color:#fff;font-size:22px;font-weight:900}.shop-brand b,.shop-brand small{display:block}.shop-brand small{margin-top:2px;color:var(--shop-secondary);font-size:12px}.shop-cart-btn{position:relative;width:46px;height:46px;border:0;border-radius:14px;background:var(--shop-primary);color:#fff;font-size:20px;cursor:pointer}.shop-cart-btn span{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;display:grid;place-items:center;border-radius:999px;background:var(--shop-accent);color:#353535;font-size:11px;font-weight:900}.shop-hero{position:relative;min-height:350px;background-size:cover;background-position:center;display:grid;place-items:end center}.shop-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,27,31,.82),rgba(9,27,31,.34))}.shop-hero-content{position:relative;z-index:2;width:min(1240px,calc(100% - 44px));padding:58px 0;color:#fff}.shop-eyebrow{display:inline-flex;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.16);font-weight:800}.shop-hero h1{max-width:750px;margin:13px 0 8px;font-size:clamp(34px,6vw,68px);line-height:1.1}.shop-hero p{max-width:690px;margin:0;color:#D9D9D9;font-size:17px;line-height:1.8}.shop-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}.shop-meta span{padding:8px 11px;border-radius:10px;background:rgba(255,255,255,.12)}.shop-toolbar{width:min(1240px,calc(100% - 44px));margin:-27px auto 24px;position:relative;z-index:4;padding:18px;border:1px solid #e1eaec;border-radius:20px;background:#fff;box-shadow:0 18px 45px rgba(20,48,55,.1)}.shop-search{display:flex;align-items:center;gap:8px;padding:0 13px;border:1px solid #dfe8ea;border-radius:12px;background:#fbfdfd}.shop-search input{width:100%;padding:13px 0;border:0;outline:0;background:transparent}.shop-categories{display:flex;gap:8px;overflow:auto;margin-top:12px;padding-bottom:2px}.shop-categories button{flex:0 0 auto;padding:8px 14px;border:1px solid #dfe8ea;border-radius:999px;background:#fff;color:#353535;cursor:pointer}.shop-categories button.active{background:var(--shop-primary);border-color:var(--shop-primary);color:#fff}.shop-products-section{width:min(1240px,calc(100% - 44px));margin:auto;padding:7px 0 55px}.shop-section-title{display:flex;align-items:end;justify-content:space-between;margin-bottom:17px}.shop-section-title span{color:var(--shop-secondary);font-weight:900}.shop-section-title h2{margin:4px 0 0;font-size:29px}.shop-section-title small{color:#3C6E71}.shop-product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}.shop-product-card{overflow:hidden;border:1px solid #e0e9eb;border-radius:18px;background:#fff;box-shadow:0 8px 25px rgba(30,58,65,.05);transition:.2s}.shop-product-card:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(30,58,65,.1)}.shop-product-image{position:relative;width:100%;height:230px;padding:0;border:0;background:#eef4f5;cursor:pointer}.shop-product-image img{width:100%;height:100%;object-fit:cover}.shop-product-image>span{font-size:54px}.shop-product-image b{position:absolute;top:12px;left:12px;padding:6px 9px;border-radius:999px;background:var(--shop-accent);color:#353535;font-size:11px}.shop-product-body{padding:15px}.shop-product-body>small{color:var(--shop-secondary);font-weight:800}.shop-product-body h3{margin:5px 0 6px;font-size:19px}.shop-product-body p{height:43px;overflow:hidden;margin:0;color:#3C6E71;font-size:13px;line-height:1.6}.shop-price-row{display:flex;align-items:center;justify-content:space-between;margin-top:13px}.shop-price-row strong{display:block;color:var(--shop-primary);font-size:18px}.shop-price-row del{margin-inline-start:7px;color:#9aabad;font-size:12px}.shop-price-row button{width:38px;height:38px;border:0;border-radius:12px;background:var(--shop-primary);color:#fff;font-size:24px;cursor:pointer}.shop-modal-backdrop,.shop-cart-backdrop{position:fixed;inset:0;z-index:60;background:rgba(8,25,29,.57);backdrop-filter:blur(3px)}.shop-product-modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(950px,calc(100% - 28px));max-height:90vh;overflow:auto;display:grid;grid-template-columns:1fr 1fr;background:#fff;border-radius:24px;box-shadow:0 30px 90px rgba(0,0,0,.25)}.shop-modal-close{position:absolute;top:12px;right:12px;z-index:3;width:38px;height:38px;border:0;border-radius:999px;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.12);font-size:22px;cursor:pointer}.shop-gallery{padding:24px;background:#f1f6f7}.shop-main-image{height:420px;display:grid;place-items:center;border-radius:17px;overflow:hidden;background:#e5edef}.shop-main-image img{width:100%;height:100%;object-fit:cover}.shop-main-image span{font-size:70px}.shop-thumbs{display:flex;gap:8px;margin-top:10px;overflow:auto}.shop-thumbs button{width:70px;height:70px;padding:2px;border:2px solid transparent;border-radius:10px;background:#fff;overflow:hidden}.shop-thumbs button.active{border-color:var(--shop-primary)}.shop-thumbs img{width:100%;height:100%;object-fit:cover;border-radius:7px}.shop-product-detail{padding:42px 32px 30px}.shop-product-detail>small{color:var(--shop-secondary);font-weight:800}.shop-product-detail h2{margin:6px 0 10px;font-size:30px}.shop-product-detail p{color:#353535;line-height:1.8}.shop-option-label{display:block;margin:22px 0 8px;font-weight:900}.shop-variant-list{display:grid;gap:8px}.shop-variant-list button{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:12px;text-align:start;border:1px solid #dfe8ea;border-radius:12px;background:#fff;cursor:pointer}.shop-variant-list button.active{border-color:var(--shop-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--shop-primary) 20%,transparent)}.shop-variant-list button:disabled{opacity:.45}.shop-variant-list small{color:#3C6E71}.shop-variant-list span{grid-row:1/3;grid-column:2;align-self:center;color:var(--shop-primary);font-weight:900}.shop-detail-price{margin:22px 0 14px}.shop-detail-price strong{font-size:26px;color:var(--shop-primary)}.shop-cart-backdrop{z-index:70}.shop-cart-drawer{position:fixed;top:0;bottom:0;right:0;z-index:71;width:min(480px,100%);display:flex;flex-direction:column;background:#fff;box-shadow:-15px 0 50px rgba(0,0,0,.18)}[dir="rtl"] .shop-cart-drawer{right:auto;left:0}.shop-cart-head{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid #e4ecee}.shop-cart-head small{color:var(--shop-secondary);font-weight:800}.shop-cart-head h2{margin:3px 0 0}.shop-cart-head button{width:38px;height:38px;border:0;border-radius:10px;background:#eef4f5;font-size:22px}.shop-cart-lines{flex:1;overflow:auto;padding:10px 20px}.shop-cart-lines article{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid #edf2f3}.shop-cart-lines b,.shop-cart-lines small,.shop-cart-lines span{display:block}.shop-cart-lines small{margin:2px 0;color:#3C6E71}.shop-cart-lines span{color:var(--shop-primary);font-weight:800}.qty{display:flex;align-items:center;gap:8px}.qty button{width:30px;height:30px;border:1px solid #dbe5e7;border-radius:8px;background:#fff}.qty span{min-width:20px;text-align:center;color:#353535}.shop-empty-cart{padding:70px 20px;text-align:center;font-size:50px}.shop-empty-cart p{font-size:15px;color:#3C6E71}.shop-checkout{max-height:61vh;overflow:auto;padding:18px 20px 24px;border-top:1px solid #e4ecee;background:#fbfdfd}.shop-summary{display:grid;gap:7px;margin-bottom:13px}.shop-summary>div{display:flex;justify-content:space-between}.shop-summary .total{padding-top:9px;border-top:1px dashed #cfdadd;font-size:18px}.coupon-row{display:flex;gap:7px;margin:10px 0}.coupon-row input{flex:1}.coupon-row button{border:0;border-radius:10px;background:var(--shop-secondary);color:#fff;font-weight:800;padding:0 14px}.shop-checkout input,.shop-checkout textarea,.shop-checkout select{width:100%;margin-bottom:9px;padding:11px 12px;border:1px solid #d9e4e6;border-radius:10px;background:#fff;outline:0}.shop-checkout label{display:block;margin-bottom:8px;color:#353535;font-weight:800}.shop-footer{padding:30px;text-align:center;background:#284B63;color:#fff}.shop-footer b,.shop-footer span{display:block}.shop-footer span{margin-top:3px;color:#D9D9D9}.media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:16px}.media-tile{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#FFFFFF}.media-tile img{width:100%;height:120px;object-fit:cover}.media-tile small{display:block;padding:5px 8px}.media-tile button{position:absolute;top:5px;right:5px}.variant-list{display:grid;gap:8px;margin-top:16px}.variant-list article{display:flex;justify-content:space-between;align-items:center;padding:11px;border:1px solid var(--line);border-radius:11px}.variant-list small{display:block;margin-top:3px;color:var(--muted)}.table-sub{display:block;margin-top:3px;color:var(--muted)}
@media(max-width:1000px){.shop-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.shop-product-modal{grid-template-columns:1fr}.shop-main-image{height:340px}}
@media(max-width:760px){.shop-header{padding:0 14px}.shop-hero{min-height:300px}.shop-hero-content,.shop-toolbar,.shop-products-section{width:calc(100% - 24px)}.shop-toolbar{margin-top:-22px}.shop-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.shop-product-image{height:180px}.shop-product-body{padding:12px}.shop-product-body h3{font-size:16px}.shop-product-body p{display:none}.shop-price-row strong{font-size:15px}.shop-gallery{padding:14px}.shop-product-detail{padding:24px 18px}.shop-main-image{height:300px}.media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.shop-brand small{display:none}.shop-hero h1{font-size:37px}.shop-product-image{height:155px}.shop-product-body>small{font-size:11px}.shop-price-row button{width:34px;height:34px}.shop-section-title h2{font-size:23px}}

/* ===== GoodByte MultiStore V3: customer portal, tracking, invoice, Quantum ===== */
.customer-portal,.tracking-page,.invoice-page{min-height:100vh;background:#f5f7f8;padding:24px;color:#173b34}.portal-head,.tracking-page>header,.invoice-actions{max-width:1100px;margin:0 auto 18px;display:flex;align-items:center;justify-content:space-between}.portal-head a,.tracking-page a,.invoice-actions a{text-decoration:none;color:inherit}.portal-card,.tracking-card,.invoice-paper{max-width:980px;margin:auto;background:#fff;border:1px solid #e1e8e6;border-radius:22px;padding:28px;box-shadow:0 18px 50px rgba(0,0,0,.06)}.portal-card>label{display:block;margin:12px 0}.portal-card input{width:100%;padding:12px;border:1px solid #d6e0dd;border-radius:10px}.portal-tabs{display:flex;gap:8px;margin:18px 0}.portal-tabs button{flex:1;padding:11px;border:0;border-radius:10px;background:#edf2f1}.portal-tabs button.active{background:#173b34;color:#fff}.portal-welcome,.tracking-summary{display:flex;justify-content:space-between;gap:18px;align-items:center;flex-wrap:wrap}.portal-orders article{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid #edf1f0}.portal-orders em{font-style:normal}.address-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.address-list>div{padding:14px;border:1px solid #e2e8e6;border-radius:12px}.tracking-summary>div{padding:14px 18px;background:#f7faf9;border-radius:14px;min-width:180px}.tracking-summary small{display:block;color:#71817d}.status-track{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:30px 0}.status-track>div{text-align:center;color:#9aa6a3;position:relative}.status-track span{display:grid;place-items:center;width:34px;height:34px;margin:auto auto 7px;border-radius:50%;background:#e7ecea}.status-track .done{color:#173b34}.status-track .done span{background:#173b34;color:#fff}.invoice-line{display:grid;grid-template-columns:1fr auto auto;gap:16px;padding:12px 0;border-bottom:1px solid #edf1f0}.totals,.invoice-totals{margin-inline-start:auto;max-width:380px;margin-top:20px}.totals p,.invoice-totals p{display:flex;justify-content:space-between;padding:7px 0;margin:0}.totals .grand,.invoice-totals .grand{font-size:1.2rem;border-top:2px solid #173b34;margin-top:8px;padding-top:12px}.invoice-paper header{display:flex;justify-content:space-between;gap:24px;padding-bottom:24px;border-bottom:2px solid #173b34}.invoice-company{text-align:end}.invoice-company img{max-width:120px;max-height:70px;object-fit:contain}.invoice-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:24px 0}.invoice-meta p{margin:0;padding:10px;background:#f7faf9;border-radius:10px}.invoice-meta span{display:block;color:#71817d;font-size:.85rem}.invoice-row{display:grid;grid-template-columns:2fr .5fr .8fr .8fr;gap:12px;padding:11px;border-bottom:1px solid #e8eeec}.invoice-row.head{font-weight:700;background:#173b34;color:#fff;border-radius:8px}.sync-log{display:grid;grid-template-columns:auto 1fr auto;gap:8px 14px;padding:12px 0;border-bottom:1px solid #e6ecea}.sync-log small{grid-column:1/-1;white-space:pre-wrap;overflow-wrap:anywhere}.sync-log .success{color:#15803d}.sync-log .failed{color:#b91c1c}.btn-small{padding:5px 9px;font-size:.82rem}@media(max-width:700px){.portal-orders article{grid-template-columns:1fr 1fr}.status-track{grid-template-columns:1fr}.status-track>div{text-align:start;display:flex;align-items:center;gap:10px}.status-track span{margin:0}.invoice-paper{padding:16px}.invoice-paper header{display:block}.invoice-company{text-align:start;margin-top:18px}.invoice-meta{grid-template-columns:1fr}.invoice-row{grid-template-columns:1.4fr .5fr .7fr .7fr;font-size:.82rem}}
@media print{.invoice-actions{display:none!important}.invoice-page{padding:0;background:#fff}.invoice-paper{box-shadow:none;border:0;max-width:none}}
.shop-account-link{display:inline-flex;align-items:center;gap:5px;text-decoration:none;color:inherit;font-weight:700;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.7)}
.payment-choice{display:grid;grid-template-columns:1fr 1fr;gap:8px}.payment-choice label{display:flex!important;align-items:center;gap:8px;padding:10px;border:1px solid #dfe7e4;border-radius:10px}.payment-choice input{width:auto!important}@media(max-width:600px){.payment-choice{grid-template-columns:1fr}}
.address-add{display:grid;grid-template-columns:160px 1fr auto;gap:8px;margin-top:14px}.address-add input{padding:10px;border:1px solid #d6e0dd;border-radius:9px}@media(max-width:650px){.address-add{grid-template-columns:1fr}}

/* V4 ecommerce additions */
.wishlist-btn{position:absolute;z-index:3;inset-inline-end:12px;top:12px;width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 5px 18px rgba(0,0,0,.12);font-size:24px;cursor:pointer}.wishlist-btn.active{color:#b42318}.shop-product-card{position:relative}.product-rating{font-size:.84rem;margin:.25rem 0;color:#8a6410}.dashboard-bars{display:flex;align-items:flex-end;gap:10px;min-height:230px;overflow-x:auto;padding:15px 4px}.dashboard-bar{min-width:62px;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;text-align:center;background:#f5f8f8;border-radius:12px;padding:12px 8px}.dashboard-bar strong{font-size:1rem}.dashboard-bar small{font-size:.72rem;color:#64748b}.return-items{display:grid;gap:10px;margin-top:12px;padding:14px;border:1px solid #e5e7eb;border-radius:12px}


/* ===== Server image upload ===== */
.image-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}.image-upload-card{display:flex;gap:14px;align-items:center;padding:14px;border:1px solid #e3e9ec;border-radius:16px;background:#fbfdfd}.image-upload-preview{width:110px;height:92px;flex:0 0 110px;border-radius:14px;overflow:hidden;background:#eef4f5;display:grid;place-items:center;font-size:2rem;border:1px dashed #ccdadd}.image-upload-preview img{width:100%;height:100%;object-fit:cover}.logo-preview img{object-fit:contain;padding:8px;background:#fff}.cover-preview{width:150px;flex-basis:150px}.image-upload-content{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}.image-upload-content small,.product-main-upload small,.image-drop-zone small{color:#75818a;line-height:1.55}.image-picker{position:relative;overflow:hidden;cursor:pointer}.image-picker input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}.image-picker.disabled{opacity:.55;pointer-events:none}.btn-link{border:0;background:transparent;padding:0;cursor:pointer;font:inherit}.danger-text{color:#b42318}.theme-logo-image{max-width:80px;max-height:54px;object-fit:contain;background:#fff;border-radius:10px;padding:4px}.product-main-image-editor{display:flex;gap:16px;align-items:center;border:1px solid #e3e9ec;border-radius:16px;padding:14px;background:#fbfdfd}.product-main-preview{width:130px;height:110px;flex:0 0 130px;border-radius:14px;overflow:hidden;background:#eef4f5;display:grid;place-items:center;font-size:2rem}.product-main-preview img{width:100%;height:100%;object-fit:cover}.product-main-upload{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.image-drop-zone{position:relative;min-height:170px;border:2px dashed #bfd1d5;border-radius:18px;background:linear-gradient(180deg,#fbfefe,#f4f9fa);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:7px;padding:22px;margin-bottom:18px;transition:.2s}.image-drop-zone:hover{border-color:#284B63;background:#f0f9f8}.image-input-overlay{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.image-drop-icon{font-size:2rem}.enhanced-media-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr))}.enhanced-media-grid .media-tile{position:relative;overflow:hidden;border:1px solid #e3e9ec;border-radius:14px;background:#fff;padding:7px}.enhanced-media-grid .media-tile img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px}.primary-media{box-shadow:0 0 0 2px #284B63 inset}.primary-badge{position:absolute;top:12px;inset-inline-start:12px;background:#284B63;color:#fff;border-radius:999px;padding:4px 8px;font-size:.68rem;font-weight:700}.media-actions{display:flex;gap:6px;justify-content:center;margin-top:7px}.empty-state.compact{padding:22px}.badge.neutral{background:#eef2f3;color:#536069}
@media(max-width:760px){.image-settings-grid{grid-template-columns:1fr}.image-upload-card,.product-main-image-editor{align-items:flex-start}.cover-preview,.image-upload-preview,.product-main-preview{width:94px;flex-basis:94px;height:84px}.enhanced-media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.shipping-logo-editor{display:flex;align-items:center;gap:12px}.shipping-logo-preview{width:70px;height:60px;border-radius:12px;background:#f2f6f7;display:grid;place-items:center;overflow:hidden}.shipping-logo-preview img{width:100%;height:100%;object-fit:contain;padding:4px}

/* V1 - Product catalog stage 1 */
.catalog-setup-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; }
.catalog-setup-grid .panel { min-width:0; }
.mt-3 { margin-top:18px; }
@media (max-width: 980px) { .catalog-setup-grid { grid-template-columns:1fr; } }

/* Dynar official logo */
.sidebar-brand img{object-fit:contain;background:#fff;border-radius:12px;padding:4px}
.login-brand img{object-fit:contain;background:#fff;border-radius:16px;padding:6px}

/* ============================================================
   DYNAR V1 - Premium authentication / store registration
   ============================================================ */
.dynar-auth-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(520px, 1.08fr) minmax(500px, .92fr);
    background: #fff;
    color: #353535;
    overflow: hidden;
}
.dynar-auth-hero {
    position: relative;
    min-height: 100vh;
    padding: 42px clamp(38px, 5vw, 78px) 34px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 16% 16%, rgba(255,255,255,.13), transparent 24%),
        radial-gradient(circle at 82% 78%, rgba(60,110,113,.65), transparent 30%),
        linear-gradient(145deg, #284B63 0%, #24475f 32%, #3C6E71 68%, #353535 112%);
}
.dynar-auth-hero::before {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    inset-inline-end: -260px;
    top: -230px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 50%;
    box-shadow: 0 0 0 72px rgba(255,255,255,.025), 0 0 0 145px rgba(255,255,255,.018);
}
.dynar-auth-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .22;
    background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, #000, transparent 88%);
}
.dynar-auth-brand {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 15px;
}
.dynar-auth-brand img {
    width: 88px;
    height: 88px;
    padding: 7px;
    object-fit: contain;
    border-radius: 22px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 18px 45px rgba(0,0,0,.17);
}
.dynar-auth-brand strong,
.dynar-auth-brand span { display: block; }
.dynar-auth-brand strong { font-size: 24px; font-weight: 900; letter-spacing: -.3px; }
.dynar-auth-brand strong span { display: inline; font-size: 17px; opacity: .83; }
.dynar-auth-brand > div > span { margin-top: 4px; color: rgba(255,255,255,.72); font-size: 13px; }
.dynar-auth-copy {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: auto 0;
    padding: 58px 0 34px;
}
.dynar-auth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.075);
    color: rgba(255,255,255,.9);
    backdrop-filter: blur(10px);
    font-size: 13px;
    font-weight: 800;
}
.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 5px rgba(255,255,255,.1);
}
.dynar-auth-copy h1 {
    max-width: 690px;
    margin: 22px 0 15px;
    font-size: clamp(40px, 4.6vw, 67px);
    line-height: 1.18;
    letter-spacing: -1.5px;
}
.dynar-auth-copy p {
    max-width: 660px;
    margin: 0;
    color: rgba(255,255,255,.77);
    font-size: 17px;
    line-height: 1.95;
}
.dynar-auth-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
    margin-top: 30px;
}
.dynar-auth-benefits article {
    min-width: 0;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 15px;
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(10px);
}
.dynar-auth-benefits article > span {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(255,255,255,.12);
    font-size: 18px;
}
.dynar-auth-benefits b,
.dynar-auth-benefits small { display: block; }
.dynar-auth-benefits b { font-size: 13px; }
.dynar-auth-benefits small { margin-top: 3px; color: rgba(255,255,255,.63); font-size: 10.5px; line-height: 1.5; }
.dynar-auth-preview {
    position: relative;
    z-index: 2;
    height: 116px;
    margin: 8px 0 28px;
}
.preview-card {
    position: absolute;
    min-width: 190px;
    padding: 13px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 16px;
    background: rgba(255,255,255,.10);
    box-shadow: 0 18px 45px rgba(0,0,0,.12);
    backdrop-filter: blur(14px);
}
.preview-card small,
.preview-card strong { display: block; }
.preview-card small { color: rgba(255,255,255,.63); font-size: 10px; }
.preview-card strong { margin-top: 2px; font-size: 14px; }
.preview-icon {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255,255,255,.13);
}
.preview-card > b { margin-inline-start: auto; color: #bfe4df; }
.preview-orders { inset-inline-start: 0; top: 5px; }
.preview-sales { inset-inline-start: 185px; top: 63px; transform: scale(.94); }
.preview-stock { inset-inline-end: 0; top: 24px; transform: scale(.92); }
.online-dot { margin-inline-start: auto; width: 9px; height: 9px; border-radius: 50%; background: #83d1a6; box-shadow: 0 0 0 5px rgba(131,209,166,.12); }
.dynar-auth-trust {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 9px 18px;
    padding-top: 17px;
    border-top: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.65);
    font-size: 11px;
}
.dynar-auth-form-side {
    position: relative;
    min-height: 100vh;
    padding: 32px clamp(24px, 4vw, 62px);
    display: grid;
    place-items: center;
    overflow-y: auto;
    background:
        radial-gradient(circle at 90% 10%, rgba(60,110,113,.08), transparent 25%),
        linear-gradient(180deg, #fff 0%, #fbfcfc 100%);
}
.dynar-auth-form-wrap {
    width: min(100%, 510px);
    margin: auto;
    padding: 26px 0 12px;
}
.dynar-auth-form-wrap.register-mode { width: min(100%, 740px); }
.auth-mobile-brand { display: none; text-align: center; margin-bottom: 18px; }
.auth-mobile-brand img { width: 120px; max-height: 88px; object-fit: contain; }
.dynar-auth-language {
    position: fixed;
    z-index: 80;
    top: 20px;
    inset-inline-end: 22px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-color: #dbe2e4;
    box-shadow: 0 9px 26px rgba(40,75,99,.08);
}
.auth-mode-tabs {
    width: 100%;
    margin-bottom: 17px;
    padding: 5px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    border: 1px solid #e1e6e7;
    border-radius: 14px;
    background: #f4f6f6;
}
.auth-mode-tabs button {
    min-height: 45px;
    padding: 9px 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #667477;
    cursor: pointer;
    font-weight: 800;
    transition: .18s ease;
}
.auth-mode-tabs button.active {
    background: #fff;
    color: #284B63;
    box-shadow: 0 7px 20px rgba(40,75,99,.09);
}
.login-card.dynar-auth-card {
    width: 100%;
    padding: 34px;
    border: 1px solid #e3e8e9;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 28px 75px rgba(40,75,99,.10);
}
.login-card.dynar-auth-card.is-register { width: 100%; }
.auth-heading-start { text-align: start; }
.auth-heading-start h2 { color: #284B63; }
.auth-kicker {
    display: inline-block;
    margin-bottom: 7px;
    color: #3C6E71;
    font-size: 12px;
    font-weight: 900;
}
.dynar-auth-card .login-card-heading h2 { font-size: 27px; color: #284B63; line-height: 1.35; }
.dynar-auth-card .login-card-heading p { margin: 7px 0 22px; color: #6b7779; line-height: 1.7; font-size: 13px; }
.auth-field { display: grid !important; gap: 7px !important; }
.field-label { color: #353535; font-size: 13px; font-weight: 800; }
.field-label em { color: #b5443b; font-style: normal; }
.field-control {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 50px;
    border: 1px solid #dfe5e6;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    transition: .18s ease;
}
.field-control:focus-within {
    border-color: #3C6E71;
    box-shadow: 0 0 0 4px rgba(60,110,113,.09);
}
.dynar-auth-card .field-control input {
    min-width: 0;
    flex: 1;
    height: 48px;
    padding: 10px 12px;
    border: 0;
    border-radius: 0;
    box-shadow: none !important;
    background: transparent;
    color: #353535;
    outline: none;
}

/*
 * Keep credentials visually aligned with the page language while preserving
 * LTR character flow for usernames, email addresses and passwords.
 */
.dynar-auth-page[dir="rtl"] .field-control input[dir="ltr"] {
    direction: ltr;
    text-align: right !important;
}

.dynar-auth-page[dir="ltr"] .field-control input[dir="ltr"] {
    direction: ltr;
    text-align: left !important;
}

.field-icon {
    flex: 0 0 43px;
    width: 43px;
    height: 48px;
    display: grid;
    place-items: center;
    color: #3C6E71;
    font-size: 16px;
    background: #fff;
}

/* Subtle divider keeps all icons aligned consistently. */
.dynar-auth-page[dir="rtl"] .field-icon {
    border-left: 1px solid #eef1f2;
}

.dynar-auth-page[dir="ltr"] .field-icon {
    border-right: 1px solid #eef1f2;
}

.password-toggle {
    flex: 0 0 44px;
    width: 44px;
    height: 48px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: #fff;
    color: #718083;
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
}

.dynar-auth-page[dir="rtl"] .password-toggle {
    border-right: 1px solid #eef1f2;
}

.dynar-auth-page[dir="ltr"] .password-toggle {
    border-left: 1px solid #eef1f2;
}
.password-toggle:hover { color: #284B63; background: #f5f7f7; }
.auth-form-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: -3px;
    color: #748183;
    font-size: 11px;
}
.auth-form-meta span { display: inline-flex; align-items: center; gap: 6px; }
.secure-dot { width: 7px; height: 7px; border-radius: 50%; background: #49a878; }
.login-submit.dynar-submit {
    min-height: 52px;
    margin-top: 2px;
    border-radius: 12px;
    background: linear-gradient(135deg, #3C6E71, #284B63);
    box-shadow: 0 13px 28px rgba(40,75,99,.18);
    font-size: 14px;
}
.submit-arrow { margin-inline-start: auto; font-size: 18px; }
.button-spinner {
    width: 17px;
    height: 17px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: dynarSpin .7s linear infinite;
}
@keyframes dynarSpin { to { transform: rotate(360deg); } }
.auth-create-banner {
    margin-top: 20px;
    padding: 13px;
    display: grid;
    grid-template-columns: 38px 1fr auto;
    gap: 10px;
    align-items: center;
    border: 1px solid #dde5e6;
    border-radius: 14px;
    background: #f8faf9;
}
.create-banner-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(60,110,113,.11);
    color: #3C6E71;
    font-size: 20px;
    font-weight: 800;
}
.auth-create-banner b,
.auth-create-banner span { display: block; }
.auth-create-banner b { color: #284B63; font-size: 12px; }
.auth-create-banner span { margin-top: 2px; color: #788487; font-size: 10.5px; line-height: 1.45; }
.auth-create-banner button {
    min-height: 34px;
    padding: 7px 10px;
    border: 0;
    border-radius: 9px;
    background: #3C6E71;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 800;
}
.registration-step-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}
.step-counter {
    flex: 0 0 auto;
    padding: 6px 9px;
    border-radius: 999px;
    background: #f0f4f4;
    color: #607477;
    font-size: 10px;
    font-weight: 800;
}
.registration-progress {
    height: 4px;
    margin: -7px 0 23px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}
.registration-progress span,
.registration-progress i { display: block; border-radius: 999px; }
.registration-progress span { background: #3C6E71; }
.registration-progress i { background: #e6ebec; }
.registration-progress.complete-half i { background: #3C6E71; }
.registration-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.registration-section-title.section-spaced { margin-top: 4px; }
.registration-section-title > span {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #284B63;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
}
.registration-section-title b,
.registration-section-title small { display: block; }
.registration-section-title b { color: #284B63; font-size: 12px; }
.registration-section-title small { margin-top: 1px; color: #859093; font-size: 10px; }
.dynar-registration-form { gap: 13px !important; }
.dynar-registration-form .registration-grid { gap: 11px 13px; }
.dynar-register-slug {
    min-height: 50px;
    border-color: #dfe5e6;
    background: #fff;
}
.dynar-register-slug:focus-within { border-color: #3C6E71; box-shadow: 0 0 0 4px rgba(60,110,113,.09); }
.dynar-register-slug span { background: #f4f6f6; color: #708083; font-size: 12px; }
.dynar-register-slug input { min-width: 0; height: 48px; padding: 10px !important; }
.field-help { margin-top: -2px; color: #8b9698; font-size: 9.5px; font-weight: 500; }
.registration-security-note {
    padding: 11px 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid #dbe9e2;
    border-radius: 11px;
    background: #f4faf7;
}
.registration-security-note > span { font-size: 18px; }
.registration-security-note b,
.registration-security-note small { display: block; }
.registration-security-note b { color: #2d6c4c; font-size: 11px; }
.registration-security-note small { margin-top: 2px; color: #71877b; font-size: 9.5px; }
.otp-mail-icon,
.auth-success-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(60,110,113,.12), rgba(40,75,99,.09));
    color: #284B63;
    font-size: 27px;
}
.auth-success-icon { background: #e8f6ee; color: #26704a; font-size: 31px; }
.otp-step-head { text-align: start; }
.otp-email { display: block; margin-top: 4px; color: #284B63; }
.otp-form { gap: 14px !important; }
.otp-field { text-align: center; }
.dynar-auth-card .otp-input {
    height: 62px;
    padding: 10px 14px;
    border: 1px solid #d8e1e2;
    border-radius: 13px;
    background: #fafcfc;
    color: #284B63;
    text-align: center;
    letter-spacing: 12px;
    font-size: 28px !important;
    font-weight: 900;
}
.dynar-auth-card .otp-input:focus { border-color: #3C6E71; background: #fff; box-shadow: 0 0 0 4px rgba(60,110,113,.09); }
.dynar-otp-expiry {
    margin: -2px 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #7b888a;
}
.auth-secondary-button {
    min-height: 42px;
    border: 1px solid #dfe5e6;
    border-radius: 10px;
    background: #fff;
    color: #3C6E71;
    cursor: pointer;
    font-weight: 800;
}
.auth-secondary-button:hover { background: #f5f8f8; }
.dynar-registration-success { padding: 14px; border-color: #cfe7d9; background: #f3fbf6; text-align: start; }
.success-row { display: flex; align-items: flex-start; gap: 10px; }
.success-row > span { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #e2f3e9; }
.auth-footer-note {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #9aa3a5;
    font-size: 10px;
}

@media (max-width: 1160px) {
    .dynar-auth-page { grid-template-columns: minmax(450px, .9fr) minmax(500px, 1.1fr); }
    .dynar-auth-hero { padding-inline: 38px; }
    .dynar-auth-copy h1 { font-size: 46px; }
    .dynar-auth-benefits { grid-template-columns: 1fr; max-width: 430px; }
    .dynar-auth-benefits article:nth-child(3) { display: none; }
    .preview-stock { display: none; }
}

@media (max-width: 900px) {
    .dynar-auth-page { display: block; min-height: 100vh; background: #f8fafa; overflow: visible; }
    .dynar-auth-hero { display: none; }
    .dynar-auth-form-side { min-height: 100vh; padding: 72px 20px 26px; place-items: start center; overflow: visible; }
    .dynar-auth-form-wrap,
    .dynar-auth-form-wrap.register-mode { width: min(100%, 690px); padding-top: 0; }
    .auth-mobile-brand { display: block; }
    .dynar-auth-language { top: 14px; inset-inline-end: 14px; }
}

@media (max-width: 620px) {
    .dynar-auth-form-side { padding: 68px 12px 22px; }
    .auth-mobile-brand img { width: 105px; }
    .login-card.dynar-auth-card { padding: 24px 18px; border-radius: 18px; box-shadow: 0 16px 45px rgba(40,75,99,.08); }
    .dynar-auth-card .login-card-heading h2 { font-size: 23px; }
    .registration-grid { grid-template-columns: 1fr; }
    .auth-create-banner { grid-template-columns: 36px 1fr; }
    .auth-create-banner button { grid-column: 1 / -1; width: 100%; }
    .registration-step-head { align-items: center; }
    .step-counter { font-size: 9px; }
    .dynar-auth-card .otp-input { font-size: 24px !important; letter-spacing: 9px; }
}

@media (max-height: 760px) and (min-width: 901px) {
    .dynar-auth-hero { padding-top: 26px; padding-bottom: 22px; }
    .dynar-auth-brand img { width: 70px; height: 70px; }
    .dynar-auth-copy { padding: 30px 0 15px; }
    .dynar-auth-copy h1 { font-size: 42px; margin-top: 15px; }
    .dynar-auth-copy p { font-size: 14px; }
    .dynar-auth-benefits { margin-top: 18px; }
    .dynar-auth-preview { height: 90px; margin-bottom: 12px; transform: scale(.9); transform-origin: center right; }
    .dynar-auth-form-side { padding-top: 22px; padding-bottom: 22px; }
}


/* ===== Dynar dashboard & navigation refresh ===== */
body { background: #f6f9fb; }
.dynar-sidebar { width: 282px; padding: 18px 14px 14px; background: linear-gradient(180deg,#0f6570 0%,#124f5f 58%,#173f4b 100%); box-shadow: -10px 0 28px rgba(18,79,95,.14); }
.dynar-content { margin-right: 282px; }
.dynar-brand { min-height: 84px; padding: 4px 8px 17px; }
.dynar-brand img { width: 66px; height: 66px; padding: 4px; border-radius: 18px; }
.dynar-brand strong { font-size: 19px; }
.dynar-brand small { font-size: 11px; color: rgba(255,255,255,.72); }
.sidebar-menu-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 10px -4px 8px 0; padding: 0 4px 12px 0; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.34) transparent; }
.sidebar-menu-scroll::-webkit-scrollbar { width: 5px; }
.sidebar-menu-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 20px; }
.sidebar-menu-scroll nav { margin-top: 0; gap: 4px; }
.nav-group-label { padding: 15px 14px 6px; color: rgba(255,255,255,.48); font-size: 10px; font-weight: 900; letter-spacing: .04em; }
.dynar-sidebar nav a { min-height: 46px; padding: 10px 13px; gap: 11px; border-radius: 11px; color: rgba(255,255,255,.92); font-size: 13px; }
.dynar-sidebar nav a b { flex: 1; font-weight: 800; }
.dynar-sidebar nav a::after { content: "‹"; opacity: .7; font-size: 18px; }
[dir="ltr"] .dynar-sidebar nav a::after { content: "›"; }
.dynar-sidebar nav a.active, .dynar-sidebar nav a:hover { background: #fff; color: #176873; transform: none; box-shadow: 0 8px 22px rgba(4,50,57,.16); }
.nav-icon { width: 25px !important; color: inherit; filter: grayscale(.15); }
.dynar-sidebar-foot { flex: 0 0 auto; margin-top: 0; padding: 10px 4px 0; }
.support-card { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 11px 12px; border-radius: 12px; background: rgba(255,255,255,.09); }
.support-card > span { font-size: 23px; }
.support-card b,.support-card small { display:block; }
.support-card b { font-size: 13px; color:#fff; }.support-card small { margin-top:2px; color:rgba(255,255,255,.62); font-size:10px; }
.signed-user { padding: 7px 4px; }
.logout-button { margin-top: 7px; padding: 8px 10px; font-size: 12px; }

.dynar-topbar { height: 72px !important; padding: 0 24px !important; gap: 12px !important; background: rgba(255,255,255,.98) !important; border-bottom: 1px solid #e6edf1 !important; }
.topbar-user { display:flex; align-items:center; gap:9px; min-width:150px; }
.topbar-user b,.topbar-user small { display:block; }.topbar-user small { color:#7c9099; font-size:11px; }
.topbar-actions { display:flex; gap:4px; }
.topbar-icon { width:38px; height:38px; border:0; border-radius:10px; background:transparent; color:#234d5b; cursor:pointer; font-size:17px; }
.topbar-icon:hover { background:#eff7f8; }
.topbar-search { flex:1; max-width:610px; margin-inline:auto; position:relative; display:flex; align-items:center; border:1px solid #e7ecef; border-radius:10px; background:#f7f9fa; }
.topbar-search span { padding-inline-start:13px; color:#6a7e87; font-size:19px; }.topbar-search input { width:100%; height:40px; padding:0 10px; border:0; outline:0; background:transparent; color:#253c46; }
.header-language-switch { min-width:76px; height:40px; border:1px solid #e0e8eb !important; border-radius:10px !important; background:#fff !important; color:#244f5d !important; }
.header-preview { margin-right:0 !important; padding:10px 14px !important; border:1px solid #dce8e9; background:#fff !important; color:#14707b !important; }
.dynar-page-body { padding: 18px 20px 24px; }

.dashboard-welcome { position:relative; min-height:172px; display:flex; align-items:center; overflow:hidden; margin-bottom:18px; padding:25px 35px; border:1px solid #d9edef; border-radius:16px; background:linear-gradient(102deg,#e9f8f9,#f5fbfc 54%,#dff3f5); box-shadow:0 7px 22px rgba(41,91,103,.06); }
.dashboard-welcome::before { content:""; position:absolute; inset:auto -70px -90px auto; width:330px; height:220px; border-radius:50%; background:rgba(60,174,182,.11); }
.welcome-copy { position:relative; z-index:2; flex:1; }.welcome-kicker { color:#16808a; font-size:11px; font-weight:900; }.welcome-copy h1 { margin:7px 0 5px; color:#173f55; font-size:31px; }.welcome-copy p { margin:0; color:#385b68; font-size:16px; }.welcome-features { display:flex; flex-wrap:wrap; gap:22px; margin-top:19px; color:#315d66; font-size:12px; font-weight:700; }.welcome-features span::first-letter { color:#10968f; }
.welcome-art { position:relative; width:245px; height:145px; display:grid; place-items:center; }.shopping-bag { position:relative; z-index:2; width:100px; height:115px; display:grid; place-items:center; border-radius:7px 7px 16px 16px; background:linear-gradient(160deg,#275f6d,#133d4d); box-shadow:0 18px 30px rgba(21,73,85,.18); transform:rotate(-4deg); }.shopping-bag::before { content:""; position:absolute; top:-23px; width:48px; height:34px; border:5px solid #a9bfc5; border-bottom:0; border-radius:30px 30px 0 0; }.shopping-bag img { width:75px; height:75px; object-fit:contain; border-radius:8px; background:#fff; }.art-ring { position:absolute; border:1px solid rgba(34,148,157,.22); border-radius:50%; }.art-ring.one { width:185px;height:95px; }.art-ring.two { width:220px;height:120px; }
.dashboard-range { position:absolute; top:18px; left:18px; display:flex; align-items:center; gap:7px; padding:9px 12px; border:1px solid #d9e5e8; border-radius:10px; background:#fff; color:#294d5a; font-size:12px; font-weight:800; box-shadow:0 4px 13px rgba(37,82,93,.06); }
[dir="ltr"] .dashboard-range { left:auto; right:18px; }

.dashboard-kpis { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:13px; margin-bottom:18px; }.kpi-card { min-height:118px; display:flex; align-items:flex-start; gap:13px; padding:18px; border:1px solid #e1e9ec; border-radius:15px; background:#fff; box-shadow:0 7px 20px rgba(35,78,91,.045); }.kpi-icon { width:50px; height:50px; flex:0 0 50px; display:grid; place-items:center; border-radius:13px; font-size:22px; }.kpi-card small,.kpi-card strong,.kpi-card span { display:block; }.kpi-card small { color:#657e88; font-size:12px; }.kpi-card strong { margin-top:5px; color:#193f53; font-size:23px; }.kpi-card span { margin-top:7px; color:#81949c; font-size:10px; }.kpi-orders .kpi-icon{background:#e9efff;color:#4a77df}.kpi-sales .kpi-icon{background:#e4f8eb;color:#20a464}.kpi-month .kpi-icon{background:#e9f0ff;color:#527fe9}.kpi-stock .kpi-icon{background:#fff0e2;color:#e79433}.kpi-customers .kpi-icon{background:#f0e8ff;color:#7949bd}
.dashboard-main-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:16px; }.dashboard-main-grid .panel,.quick-actions-panel { border-color:#e3eaed; box-shadow:0 6px 19px rgba(37,75,87,.04); }.dashboard-panel-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:15px; }.dashboard-panel-head h2 { margin:0; color:#1d4052; font-size:18px; }.dashboard-panel-head p { margin:4px 0 0; color:#83959d; font-size:11px; }
.dashboard-chart-panel { min-height:330px; }.sales-chart { position:relative; height:245px; padding-top:20px; }.chart-grid-lines { position:absolute; inset:10px 0 35px; display:grid; grid-template-rows:repeat(4,1fr); }.chart-grid-lines i { border-top:1px solid #e9eef0; }.chart-columns { position:absolute; inset:10px 0 0; display:grid; grid-template-columns:repeat(14,minmax(24px,1fr)); gap:6px; align-items:end; }.chart-day { min-width:0; height:220px; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:5px; }.chart-bar { width:7px; height:150px; display:flex; align-items:flex-end; overflow:hidden; border-radius:8px; background:#eef4f5; }.chart-bar i { width:100%; display:block; border-radius:8px; background:linear-gradient(180deg,#36a4ad,#2c7d96); }.chart-day small { color:#758891; font-size:9px; white-space:nowrap; }.chart-value { color:#315d68; font-size:9px; opacity:0; transition:.15s; }.chart-day:hover .chart-value { opacity:1; }
.chart-empty,.dashboard-empty { min-height:225px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#82959d; }.chart-empty>span,.dashboard-empty>span { font-size:42px; opacity:.45; }.chart-empty b,.dashboard-empty b { margin-top:8px; color:#526c76; }.chart-empty small,.dashboard-empty small { margin-top:4px; font-size:11px; }
.top-products-table { border:1px solid #edf1f3; border-radius:10px; overflow:hidden; }.top-products-head,.top-product-row { display:grid; grid-template-columns:35px 1fr 90px 110px; gap:8px; align-items:center; padding:10px 12px; }.top-products-head { background:#f5f7f8; color:#506a74; font-size:11px; font-weight:800; }.top-product-row { border-top:1px solid #edf1f3; color:#566e77; font-size:12px; }.top-product-row b { color:#244a58; }.top-product-row strong { color:#147783; }
.quick-actions-panel { margin-top:16px; }.quick-actions-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }.quick-action { min-height:58px; display:flex; align-items:center; justify-content:center; gap:9px; border:1px solid transparent; border-radius:11px; text-decoration:none; font-size:12px; transition:.18s; }.quick-action:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(40,75,99,.08); }.quick-action span { font-size:18px; }.qa-green{background:#eaf9ef;color:#198754;border-color:#d9f0e0}.qa-blue{background:#eaf2ff;color:#326bd6;border-color:#dae7fb}.qa-orange{background:#fff1e4;color:#c56b23;border-color:#f4dfcc}.qa-purple{background:#f3edff;color:#7143b5;border-color:#e5dcf8}.qa-red{background:#fff0f3;color:#c83d57;border-color:#f7dce2}
.dashboard-loading { min-height:65vh; display:grid; place-items:center; }.dashboard-loader { width:44px;height:44px;border:4px solid #dcebed;border-top-color:#21808a;border-radius:50%;animation:dynarSpin .8s linear infinite; }@keyframes dynarSpin{to{transform:rotate(360deg)}}

@media (max-width: 1280px){.dashboard-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.quick-actions-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.topbar-search{max-width:420px}}
@media (max-width: 1050px){.dynar-content{margin-right:0}.dynar-sidebar{transform:translateX(110%)}[dir="ltr"] .dynar-sidebar{transform:translateX(-110%)}.dynar-sidebar.open{transform:translateX(0)}.menu-btn{display:block}.topbar-search{display:none}.dashboard-welcome{padding:22px}.welcome-art{width:180px}.dashboard-main-grid{grid-template-columns:1fr}.dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 700px){.dynar-page-body{padding:12px}.topbar-user>div{display:none}.topbar-user{min-width:auto}.dynar-topbar{padding:0 12px!important}.dashboard-welcome{min-height:230px;align-items:flex-start}.welcome-copy h1{font-size:25px}.welcome-features{display:none}.welcome-art{position:absolute;left:0;bottom:-15px;width:150px;opacity:.75}.dashboard-range{top:auto;bottom:12px;right:14px;left:auto}.dashboard-kpis{grid-template-columns:1fr}.quick-actions-grid{grid-template-columns:1fr 1fr}.chart-columns{overflow-x:auto;grid-template-columns:repeat(14,35px)}.top-products-table{overflow-x:auto}.top-products-head,.top-product-row{min-width:520px}.header-preview{padding:9px!important;font-size:0}.header-preview span{font-size:16px}.header-language-switch{min-width:54px}}
[dir="ltr"] .dynar-sidebar { right:auto; left:0; box-shadow:10px 0 28px rgba(18,79,95,.14); }
[dir="ltr"] .dynar-content { margin-right:0; margin-left:282px; }
@media (max-width:1050px){[dir="ltr"] .dynar-content{margin-left:0}}

/* Manual subscription renewal - System Owner */
.renew-action {
    color: #284B63;
    background: #f2cb29;
    border-color: #f2cb29;
    font-weight: 900;
}
.renew-action:hover { filter: brightness(.97); }
.renew-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(23, 35, 43, .58);
    backdrop-filter: blur(4px);
}
.renew-modal {
    width: min(100%, 680px);
    max-height: calc(100vh - 40px);
    overflow: auto;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(0,0,0,.24);
}
.renew-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
.renew-modal-header h2 { margin: 4px 0; color: var(--primary); }
.renew-modal-header p { margin: 0; color: var(--muted); }
.renew-close {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 0;
    border-radius: 12px;
    background: #f3f4f6;
    color: #374151;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}
.renew-summary {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    margin: 20px 0;
    padding: 16px;
    border-radius: 15px;
    background: #f8fafc;
    border: 1px solid var(--line);
}
.renew-summary div { display: grid; gap: 4px; }
.renew-summary small { color: var(--muted); }
.renew-summary strong { color: var(--primary); font-size: 17px; }
.renew-summary > span { font-size: 24px; color: var(--secondary); }
.renew-form { display: grid; gap: 16px; }
.renew-form > label:not(.renew-check) { display: grid; gap: 7px; font-weight: 800; }
.renew-form select,
.renew-form input[type="date"] {
    width: 100%;
    min-height: 44px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    outline: none;
}
.renew-form select:focus,
.renew-form input[type="date"]:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 4px rgba(242,203,41,.14);
}
.renew-form label small { color: var(--muted); font-weight: 500; line-height: 1.6; }
.renew-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 11px;
    background: #ecfdf3;
    color: #166534;
    font-weight: 800;
}
.renew-check input { width: 18px; height: 18px; accent-color: #166534; }
.renew-modal-actions { display: flex; gap: 10px; margin-top: 22px; padding-top: 17px; border-top: 1px solid var(--line); }
@media (max-width: 620px) {
    .renew-modal-backdrop { padding: 10px; align-items: end; }
    .renew-modal { width: 100%; max-height: 92vh; padding: 18px; border-radius: 18px 18px 8px 8px; }
    .renew-summary { grid-template-columns: 1fr; gap: 9px; }
    .renew-summary > span { transform: rotate(-90deg); justify-self: center; }
    .renew-modal-actions { flex-direction: column; }
}


/* Per-store currency management */
.currency-action {
    color: #fff;
    background: #284B63;
    border-color: #284B63;
    font-weight: 900;
}
.currency-action:hover { filter: brightness(1.07); }
.currency-modal { width: min(100%, 620px); }
.currency-form { margin-top: 20px; }
.currency-preview {
    display: grid;
    gap: 5px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fafc;
}
.currency-preview small { color: var(--muted); }
.currency-preview strong { color: var(--primary); font-size: 18px; }
.field-control select {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font: inherit;
}


.settings-form select {
    width: 100%;
    min-height: 44px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: inherit;
    outline: none;
}
.settings-form select:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 4px rgba(40,75,99,.10);
}

/* Dynar subscription page */
.subscription-page { max-width: 1180px; margin: 0 auto; }
.subscription-hero { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; padding:26px; border-radius:22px; background:linear-gradient(135deg,#284B63,#3C6E71); color:#fff; box-shadow:var(--shadow); }
.subscription-hero h1 { margin:5px 0 8px; font-size:31px; }
.subscription-hero p { max-width:760px; margin:0; line-height:1.8; color:rgba(255,255,255,.84); }
.subscription-lock { width:78px; height:78px; flex:0 0 78px; display:grid; place-items:center; border-radius:22px; background:rgba(255,255,255,.14); font-size:38px; }
.subscription-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:18px; }
.subscription-status-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.subscription-status-head h2 { margin:12px 0 0; }
.subscription-state { display:inline-flex; padding:7px 11px; border-radius:999px; font-size:12px; font-weight:900; }
.state-active { background:#e5f7ec; color:#18724a; }
.state-trial { background:#fff7d8; color:#7e6410; }
.state-expired { background:#fff0ed; color:#a23429; }
.state-pending { background:#edf3ff; color:#365fba; }
.state-suspended { background:#f0ece9; color:#695b55; }
.status-big-icon { width:58px; height:58px; display:grid; place-items:center; border-radius:17px; background:#f6f8f9; font-size:28px; }
.subscription-details { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px; }
.subscription-details div { padding:15px; border:1px solid var(--line); border-radius:14px; background:#fafcfc; }
.subscription-details small,.subscription-details strong { display:block; }
.subscription-details small { color:var(--muted); margin-bottom:6px; }
.subscription-details strong { color:var(--primary-dark); font-size:17px; }
.subscription-plan-card { position:relative; overflow:hidden; }
.subscription-plan-card::before { content:""; position:absolute; width:180px; height:180px; left:-75px; top:-85px; border-radius:50%; background:rgba(242,203,41,.16); }
.plan-kicker { position:relative; color:var(--primary); font-weight:900; font-size:12px; }
.subscription-plan-card h2 { position:relative; margin:8px 0 18px; }
.plan-price { position:relative; display:flex; align-items:flex-end; gap:10px; margin-bottom:9px; }
.plan-price strong { font-size:38px; line-height:1; color:var(--primary-dark); }
.plan-price span { padding-bottom:4px; color:var(--muted); font-weight:900; }
.subscription-plan-card > p { position:relative; color:var(--muted); line-height:1.8; }
.subscription-security-note { position:relative; display:flex; gap:12px; margin:20px 0; padding:14px; border-radius:14px; background:#f5faf8; border:1px solid #dcece5; }
.subscription-security-note > span { font-size:24px; }
.subscription-security-note b,.subscription-security-note small { display:block; }
.subscription-security-note small { margin-top:4px; color:#577169; line-height:1.6; }
.subscription-pay { margin-bottom:10px; }
.subscription-loading { min-height:260px; display:grid; place-items:center; align-content:center; gap:14px; }
.admin-password-control { position:relative; }
.admin-password-control input { padding-left:48px !important; }
[dir="ltr"] .admin-password-control input { padding-left:12px !important; padding-right:48px !important; }
.admin-password-toggle { position:absolute; top:50%; left:7px; transform:translateY(-50%); width:36px; height:36px; border:0; border-radius:9px; background:#f5f7f7; color:#284B63; cursor:pointer; font-size:17px; }
[dir="ltr"] .admin-password-toggle { left:auto; right:7px; }
.subscription-settings-panel { margin:18px 0; border-top:4px solid #f2cb29; }
.subscription-settings-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.subscription-settings-grid label { display:grid; gap:7px; font-weight:800; }
.subscription-settings-grid input,.subscription-settings-grid select { width:100%; min-height:44px; padding:9px 11px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.trial-presets { display:flex; gap:7px; flex-wrap:wrap; margin-top:7px; }
.trial-presets button { border:1px solid var(--line); border-radius:999px; padding:5px 10px; background:#fff; cursor:pointer; font-weight:800; }
.trial-presets button.active { background:var(--primary); border-color:var(--primary); color:#fff; }
@media (max-width:900px){.subscription-grid{grid-template-columns:1fr}.subscription-settings-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.subscription-hero{align-items:flex-start}.subscription-lock{width:58px;height:58px;flex-basis:58px;font-size:28px}.subscription-details,.subscription-settings-grid{grid-template-columns:1fr}.plan-price strong{font-size:32px}}

/* =========================================================
   Customers page - responsive RTL/LTR layout
   ========================================================= */
.customers-page {
    width: 100%;
    max-width: 1540px;
    margin-inline: auto;
    color: #243f4c;
}

.customers-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    text-align: start;
}

.customers-title-line {
    display: flex;
    align-items: center;
    gap: 10px;
}

.customers-title-line h1 {
    margin: 0;
    color: #193f53;
    font-size: 28px;
    line-height: 1.25;
}

.customers-title-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #f0e8ff;
    font-size: 20px;
}

.customers-count-badge {
    min-width: 31px;
    height: 27px;
    padding-inline: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #e8f3f4;
    color: #25737d;
    font-size: 12px;
    font-weight: 900;
}

.customers-page-head p {
    margin: 7px 52px 0 0;
    color: #6f858e;
    font-size: 13px;
    line-height: 1.8;
}

[dir="ltr"].customers-page .customers-page-head p {
    margin: 7px 0 0 52px;
}

.customers-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
    margin-bottom: 16px;
}

.customer-stat {
    min-width: 0;
    min-height: 94px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #e1e9ec;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(35, 78, 91, .045);
}

.customer-stat-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    font-size: 20px;
}

.stat-customers .customer-stat-icon { background: #f0e8ff; }
.stat-orders .customer-stat-icon { background: #eaf2ff; }
.stat-sales .customer-stat-icon { background: #eaf9ef; }
.stat-average .customer-stat-icon { background: #fff1e4; }

.customer-stat small,
.customer-stat strong {
    display: block;
}

.customer-stat small {
    margin-bottom: 4px;
    color: #70858e;
    font-size: 11px;
    font-weight: 700;
}

.customer-stat strong {
    overflow: hidden;
    color: #193f53;
    font-size: clamp(17px, 1.5vw, 22px);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customers-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.customers-search {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    border: 1px solid #dce6e9;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(38, 78, 91, .035);
    transition: .18s ease;
}

.customers-search:focus-within {
    border-color: #3C6E71;
    box-shadow: 0 0 0 3px rgba(60, 110, 113, .10);
}

.customers-search > span {
    width: 45px;
    flex: 0 0 45px;
    display: grid;
    place-items: center;
    color: #4d7881;
    font-size: 22px;
}

.customers-search input {
    width: 100%;
    height: 48px;
    padding: 0 4px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #263f49;
    text-align: start;
}

.customers-search input::placeholder {
    color: #8a9ba2;
}

.customers-clear-search {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    margin-inline: 5px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: #f2f5f6;
    color: #607983;
    cursor: pointer;
    font-size: 20px;
}

.customers-results-count {
    min-width: 115px;
    height: 48px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #dce6e9;
    border-radius: 13px;
    background: #fff;
    color: #70858e;
    font-size: 12px;
}

.customers-results-count b {
    color: #1f6873;
    font-size: 15px;
}

.customers-panel {
    padding: 0;
    overflow: hidden;
    border-color: #e0e8eb;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(37, 75, 87, .045);
}

.customers-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.customers-table {
    width: 100%;
    min-width: 780px;
    border-collapse: collapse;
    table-layout: fixed;
}

.customers-table .col-customer { width: 31%; }
.customers-table .col-mobile { width: 19%; }
.customers-table .col-orders { width: 12%; }
.customers-table .col-total { width: 20%; }
.customers-table .col-last-order { width: 18%; }

.customers-table th,
.customers-table td {
    padding: 15px 18px;
    text-align: start;
    vertical-align: middle;
}

.customers-table thead th {
    height: 48px;
    padding-block: 12px;
    border-bottom: 1px solid #dfe8eb;
    background: #f6f9fa;
    color: #55707a;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.customers-table tbody td {
    min-height: 68px;
    border-bottom: 1px solid #edf1f3;
    color: #415d67;
    font-size: 13px;
}

.customers-table tbody tr:last-child td {
    border-bottom: 0;
}

.customers-table tbody tr {
    transition: background .15s ease;
}

.customers-table tbody tr:hover {
    background: #fbfdfd;
}

.customers-table .number-column {
    text-align: center;
}

.customer-identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.customer-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(145deg, #e6f2f3, #f0e8ff);
    color: #285d68;
    font-size: 16px;
    font-weight: 900;
}

.customer-identity > div {
    min-width: 0;
}

.customer-identity b,
.customer-identity small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-identity b {
    margin-bottom: 4px;
    color: #213f4d;
    font-size: 13px;
}

.customer-identity small {
    max-width: 100%;
    color: #82949b;
    font-size: 10px;
}

.customer-phone {
    display: inline-block;
    color: #365c68;
    font-weight: 700;
    unicode-bidi: isolate;
}

.orders-pill {
    min-width: 35px;
    height: 29px;
    padding-inline: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #edf4ff;
    color: #3a68bd;
    font-size: 12px;
    font-weight: 900;
}

.customer-money {
    color: #167784 !important;
    font-weight: 900;
    direction: ltr;
    unicode-bidi: isolate;
}

.last-order-date b,
.last-order-date small {
    display: block;
}

.last-order-date b {
    color: #365966;
    font-size: 12px;
    font-weight: 800;
}

.last-order-date small {
    margin-top: 3px;
    color: #8a9ba2;
    font-size: 10px;
}

.no-last-order {
    color: #a7b3b8;
}

.customers-empty,
.customers-loading {
    min-height: 245px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    text-align: center;
}

.customers-empty > span {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: #f0e8ff;
    font-size: 28px;
}

.customers-empty h3 {
    margin: 4px 0 0;
    color: #294b59;
    font-size: 16px;
}

.customers-empty p,
.customers-loading b {
    margin: 0;
    color: #7a9098;
    font-size: 12px;
    font-weight: 600;
}

@media (max-width: 1150px) {
    .customers-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .customers-page-head {
        margin-bottom: 14px;
    }

    .customers-title-line h1 {
        font-size: 24px;
    }

    .customers-page-head p,
    [dir="ltr"].customers-page .customers-page-head p {
        margin: 7px 0 0;
    }

    .customers-title-icon {
        display: none;
    }

    .customers-stats {
        grid-template-columns: 1fr 1fr;
        gap: 9px;
    }

    .customer-stat {
        min-height: 82px;
        padding: 12px;
        gap: 9px;
    }

    .customer-stat-icon {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
        font-size: 17px;
    }

    .customer-stat strong {
        font-size: 16px;
    }

    .customers-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .customers-results-count {
        width: fit-content;
        min-width: 105px;
        height: 38px;
        align-self: flex-end;
    }

    .customers-panel {
        padding: 10px;
        overflow: visible;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .customers-table-wrap {
        overflow: visible;
    }

    .customers-table,
    .customers-table tbody,
    .customers-table tr,
    .customers-table td {
        display: block;
        width: 100%;
    }

    .customers-table {
        min-width: 0;
    }

    .customers-table colgroup,
    .customers-table thead {
        display: none;
    }

    .customers-table tbody {
        display: grid;
        gap: 10px;
    }

    .customers-table tbody tr {
        padding: 13px;
        border: 1px solid #e1e9ec;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 5px 16px rgba(35, 78, 91, .04);
    }

    .customers-table tbody td {
        min-height: 0;
        padding: 9px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        border-bottom: 1px dashed #e7edef;
        text-align: end !important;
    }

    .customers-table tbody td:last-child {
        border-bottom: 0;
    }

    .customers-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 108px;
        color: #71868e;
        text-align: start;
        font-size: 10px;
        font-weight: 800;
    }

    .customers-table tbody td:first-child {
        padding-top: 0;
        align-items: flex-start;
    }

    .customer-identity {
        flex: 1;
        justify-content: flex-end;
        text-align: start;
    }

    [dir="ltr"].customers-page .customer-identity {
        justify-content: flex-start;
    }

    .customer-money {
        direction: ltr;
    }
}

@media (max-width: 430px) {
    .customers-stats {
        grid-template-columns: 1fr;
    }

    .customer-stat {
        min-height: 72px;
    }

    .customers-table tbody td::before {
        flex-basis: 92px;
    }
}

/* =========================================================
   System owner - Trial / subscription service settings card
   Reference layout: compact service settings with live plan summary
   ========================================================= */
.subscription-service-card {
    position: relative;
    overflow: hidden;
    margin: 20px 0 24px;
    padding: 26px 22px 20px;
    border: 1px solid #e7d8a7;
    border-top: 4px solid #f2cb29;
    border-radius: 18px;
    background:
        radial-gradient(circle at 0 0, rgba(242, 203, 41, .10), transparent 260px),
        linear-gradient(145deg, #ffffff 0%, #fffdf7 100%);
    box-shadow: 0 14px 34px rgba(40, 75, 99, .08);
}

.subscription-service-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.subscription-service-copy {
    min-width: 0;
    flex: 1 1 auto;
    text-align: start;
}

.subscription-service-copy .eyebrow {
    display: inline-block;
    margin-bottom: 5px;
    color: var(--primary-dark);
    font-weight: 900;
}

.subscription-service-copy h2 {
    margin: 0;
    color: var(--ink);
    font-size: 25px;
    line-height: 1.35;
}

.subscription-service-copy p {
    max-width: 940px;
    margin: 7px 0 0;
    color: #6d7f85;
    line-height: 1.75;
}

.subscription-price-summary {
    flex: 0 0 auto;
    min-width: 118px;
    min-height: 78px;
    padding: 13px 16px;
    display: grid;
    place-content: center;
    text-align: center;
    border-radius: 15px;
    background: linear-gradient(145deg, var(--primary-dark), var(--primary));
    color: #fff;
    box-shadow: 0 10px 22px rgba(40, 75, 99, .20);
}

.subscription-price-summary strong,
.subscription-price-summary span {
    display: block;
    white-space: nowrap;
}

.subscription-price-summary strong {
    color: #f7d83d;
    font-size: 18px;
    font-weight: 900;
    direction: ltr;
    unicode-bidi: isolate;
}

.subscription-price-summary span {
    margin-top: 5px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.service-settings-grid {
    align-items: start;
    gap: 14px;
}

.service-settings-grid label {
    min-width: 0;
    color: #303b40;
    text-align: start;
}

.service-settings-grid label > span:first-child {
    min-height: 24px;
    display: flex;
    align-items: center;
    font-weight: 900;
}

.service-settings-grid input,
.service-settings-grid select {
    min-height: 62px;
    padding-inline: 15px;
    border-color: #e8d69d;
    border-radius: 11px;
    color: #263f4b;
    font-weight: 800;
    background: #fff;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.service-settings-grid input:focus,
.service-settings-grid select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(60, 110, 113, .10);
}

.service-number-input {
    direction: ltr;
    text-align: end;
}

.service-settings-grid small {
    min-height: 18px;
    color: #7b6953;
    font-size: 12px;
    font-weight: 600;
}

.service-settings-grid .trial-presets {
    margin-top: 0;
    gap: 6px;
}

.service-settings-grid .trial-presets button {
    min-width: 40px;
    padding: 4px 9px;
    border-color: #e7d8a7;
    color: var(--primary-dark);
    background: #fffdf7;
}

.service-settings-grid .trial-presets button.active {
    border-color: var(--primary-dark);
    background: var(--primary-dark);
    color: #fff;
}

.subscription-service-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 18px;
    padding-top: 2px;
}

.subscription-save-button {
    min-width: 245px;
    min-height: 45px;
    border-radius: 11px;
}

@media (max-width: 960px) {
    .subscription-service-head {
        gap: 16px;
    }

    .service-settings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .subscription-service-card {
        padding: 20px 15px 16px;
    }

    .subscription-service-head {
        flex-direction: column;
    }

    .subscription-price-summary {
        width: 100%;
        min-height: 68px;
    }

    .service-settings-grid {
        grid-template-columns: 1fr;
    }

    .subscription-service-actions,
    .subscription-save-button {
        width: 100%;
    }
}