@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=IBM+Plex+Sans+Arabic:wght@400;600;700&display=swap');
*{box-sizing:border-box;border-color:#e7e1d9}
html{scroll-behavior:smooth}
body{margin:0;background:#fbf8f3;color:#14213d;font-family:'Cairo','IBM Plex Sans Arabic',sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,a,[role=button]{cursor:pointer}
button,input,select,textarea{font:inherit}
.container{width:100%;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}
@media(min-width:640px){.container{padding-left:1.5rem;padding-right:1.5rem}}
@media(min-width:1024px){.container{padding-left:2rem;padding-right:2rem;max-width:1280px}}
:root { --primary: #14213d; --primary-foreground: #fff; --radius: .75rem; --background: #fbf8f3; --foreground: #14213d; --card: #fff; --card-foreground: #14213d; --popover: #fff; --popover-foreground: #14213d; --secondary: #f5eee6; --secondary-foreground: #14213d; --muted: #f2ece5; --muted-foreground: #77726b; --accent: #f5eee6; --accent-foreground: #14213d; --destructive: #b94d4d; --destructive-foreground: #fff; --border: #e7e1d9; --input: #e0d8ce; --ring: #e76f51; --sidebar: #14213d; --sidebar-foreground: #fff; --sidebar-primary: #f4a261; --sidebar-primary-foreground: #14213d; --sidebar-accent: #233457; --sidebar-accent-foreground: #fff; --sidebar-border: #314365; --sidebar-ring: #f4a261; }
.dark { --background: #111a2d; --foreground: #f7f1ea; --card: #192540; --card-foreground: #f7f1ea; --popover: #192540; --popover-foreground: #f7f1ea; --secondary: #253250; --secondary-foreground: #f7f1ea; --muted: #253250; --muted-foreground: #b8bfce; --accent: #253250; --accent-foreground: #f7f1ea; --border: #344363; --input: #344363; --ring: #f4a261; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
.brand-mark { display:flex; align-items:center; justify-content:center; height:40px; width:40px; border-radius:14px 14px 14px 5px; background:#e76f51; color:white; box-shadow:5px 5px 0 #f4a261; }
.nav-link { position:relative; transition:color .2s ease; } .nav-link:hover { color:#e76f51; } .nav-link::after { content:""; position:absolute; right:0; bottom:-8px; height:2px; width:0; border-radius:999px; background:#e76f51; transition:width .2s ease; } .nav-link:hover::after { width:24px; }
.cart-badge { display:flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:#e76f51; color:white; font-size:10px; }
.hero-section { position:relative; background:radial-gradient(circle at 85% 20%, rgba(244,162,97,.14), transparent 22%), radial-gradient(circle at 10% 30%, rgba(42,157,143,.07), transparent 24%), #fbf8f3; } .hero-section::before { content:""; position:absolute; inset:0; opacity:.35; background-image:radial-gradient(#dcd2c4 .7px, transparent .7px); background-size:18px 18px; mask-image:linear-gradient(90deg, black, transparent 78%); }
.eyebrow { display:inline-flex; align-items:center; gap:7px; color:#e76f51; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } .eyebrow::before { content:""; height:7px; width:7px; border-radius:999px; background:#f4a261; }
.hero-visual { perspective:1200px; } .hero-sun { position:absolute; right:16%; top:3%; height:350px; width:350px; border-radius:50%; background:#f4a261; opacity:.22; filter:blur(1px); } .hero-sun::after { content:""; position:absolute; inset:26px; border:1px dashed rgba(20,33,61,.23); border-radius:50%; }
.hero-book { position:absolute; height:340px; width:235px; border-radius:5px 15px 15px 5px; box-shadow:16px 22px 35px rgba(20,33,61,.22); transform-style:preserve-3d; } .hero-book-back { right:19%; top:7%; transform:rotate(9deg) translateZ(-20px); opacity:.9; } .hero-book-front { right:38%; top:18%; transform:rotate(-9deg) translateZ(30px); } .hero-doodle { position:absolute; bottom:4%; right:5%; display:flex; height:72px; width:72px; align-items:center; justify-content:center; border:2px solid #14213d; border-radius:50%; color:#14213d; font-family:serif; font-size:40px; transform:rotate(15deg); }
.book-cover { position:relative; isolation:isolate; height:235px; overflow:hidden; border-radius:5px 13px 13px 5px; background:#14213d; box-shadow:inset 7px 0 0 rgba(0,0,0,.12); } .book-cover-large { height:100%; } .book-cover-grid { position:absolute; inset:0; opacity:.2; background:linear-gradient(135deg, transparent 0 35%, rgba(255,255,255,.6) 35% 36%, transparent 36% 60%, rgba(255,255,255,.35) 60% 61%, transparent 61%); } .book-cover-coral { background:linear-gradient(145deg, #b9383e, #e76f51); } .book-cover-teal { background:linear-gradient(145deg, #1c6d72, #2a9d8f); } .book-cover-navy { background:linear-gradient(145deg, #14213d, #31578f); }
.stage-card { min-height:180px; border:1px solid #e7e1d9; border-radius:24px; background:white; padding:24px; box-shadow:0 10px 25px rgba(20,33,61,.04); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .stage-card:hover, .stage-card-active { transform:translateY(-4px); border-color:#f1b09d; box-shadow:0 18px 30px rgba(20,33,61,.08); } .stage-icon { display:flex; height:48px; width:48px; align-items:center; justify-content:center; border-radius:16px; } .stage-icon.coral { background:#fff0e6; color:#e76f51; } .stage-icon.teal { background:#e6f4f0; color:#2a9d8f; } .stage-icon.navy { background:#edf1fa; color:#31578f; }
.book-card { transition:transform .25s ease, box-shadow .25s ease; } .book-card:hover { transform:translateY(-5px); box-shadow:0 20px 35px rgba(20,33,61,.1); } .book-card:hover .book-cover { transform:rotate(-1deg) scale(1.015); } .book-cover { transition:transform .25s ease; }
.process-card { min-height:230px; position:relative; border-radius:22px; background:#fff; padding:23px; box-shadow:0 8px 22px rgba(20,33,61,.04); } .process-number { position:absolute; left:20px; top:18px; color:#e7e1d9; font-size:26px; font-weight:800; }
.floating-note { position:absolute; z-index:4; display:flex; align-items:center; gap:8px; border-radius:999px; background:#fff; padding:11px 16px; color:#14213d; font-size:12px; font-weight:800; box-shadow:0 12px 24px rgba(20,33,61,.13); } .note-one { left:1%; top:16%; } .note-two { bottom:13%; left:2%; }
@media (max-width:640px){ .hero-section .container { min-height:760px; } .hero-visual { margin-top:-10px; transform:scale(.82); transform-origin:center top; } .hero-book-front { right:29%; } .hero-book-back { right:8%; } .floating-note { transform:scale(.9); } }
@media (prefers-reduced-motion:no-preference){ .hero-book-front { animation:floatBook 5s ease-in-out infinite; } .hero-book-back { animation:floatBookBack 6s ease-in-out infinite; } @keyframes floatBook { 0%,100%{transform:rotate(-9deg) translateY(0) translateZ(30px)} 50%{transform:rotate(-7deg) translateY(-8px) translateZ(30px)} } @keyframes floatBookBack { 0%,100%{transform:rotate(9deg) translateY(0) translateZ(-20px)} 50%{transform:rotate(11deg) translateY(-6px) translateZ(-20px)} } }

/* Admin workspace */
.admin-shell { min-height:100vh; display:flex; background:#f7f6f4; color:#17233f; font-family:'Cairo','IBM Plex Sans Arabic',sans-serif; }
.admin-nav { width:272px; flex:0 0 272px; min-height:100vh; padding:24px 16px 18px; background:#fff; border-left:1px solid #ebe9e6; display:flex; flex-direction:column; }
.admin-nav-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 10px 22px; border-bottom:1px solid #f0eeeb; }
.admin-nav-brand { display:flex; align-items:center; gap:10px; }
.admin-logo { display:flex; height:38px; width:38px; align-items:center; justify-content:center; border-radius:12px 12px 12px 4px; background:#e76f51; color:white; box-shadow:4px 4px 0 #f4a261; }
.admin-live { display:flex; align-items:center; gap:5px; border-radius:999px; background:#eef8f7; padding:5px 8px; color:#247c73; font-size:9px; font-weight:800; }
.admin-live span { width:5px; height:5px; border-radius:50%; background:#2a9d8f; }
.admin-nav-items { display:flex; flex-direction:column; gap:5px; padding-top:22px; }
.admin-nav-item { display:flex; align-items:center; gap:10px; width:100%; padding:11px 10px; border-radius:14px; color:#77787e; text-align:right; transition:background .2s ease,color .2s ease,transform .2s ease; }
.admin-nav-item:hover { background:#faf8f6; color:#17233f; transform:translateX(-2px); }
.admin-nav-item.active { background:#17233f; color:#fff; box-shadow:0 10px 18px rgba(23,35,63,.14); }
.admin-nav-item.active .text-\[\#9b9a9b\] { color:rgba(255,255,255,.52); }
.admin-nav-icon { display:flex; height:34px; width:34px; flex:none; align-items:center; justify-content:center; border-radius:10px; background:#f7f5f3; color:#72747e; }
.admin-nav-item.active .admin-nav-icon { background:rgba(255,255,255,.1); color:#f4a261; }
.admin-nav-count { display:flex; min-width:20px; height:20px; align-items:center; justify-content:center; border-radius:999px; background:#fff0e6; color:#c85738; font-size:10px; font-weight:800; }
.admin-nav-item.active .admin-nav-count { background:#f4a261; color:#17233f; }
.admin-help { display:flex; align-items:center; gap:10px; margin-top:auto; border:1px solid #f0eeeb; border-radius:16px; padding:12px 10px; background:#fcfbfa; }
.admin-main { min-width:0; flex:1; padding:28px clamp(18px,3.5vw,48px) 48px; }
.admin-topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:26px; }
.admin-stat-card, .admin-panel { border:1px solid #ebe9e6; background:#fff; border-radius:18px; box-shadow:0 7px 20px rgba(23,35,63,.035); }
.admin-stat-card { transition:transform .2s ease,box-shadow .2s ease; }
.admin-stat-card:hover { transform:translateY(-3px); box-shadow:0 14px 26px rgba(23,35,63,.08); }
.admin-stat-icon { display:flex; height:42px; width:42px; align-items:center; justify-content:center; border-radius:13px; }
.admin-stat-icon.coral, .quick-action-icon.coral { background:#fff0e6; color:#e76f51; }
.admin-stat-icon.blue, .quick-action-icon.blue { background:#edf3fb; color:#536a9a; }
.admin-stat-icon.purple, .quick-action-icon.purple { background:#f3edfc; color:#7650a6; }
.admin-stat-icon.gold { background:#fff5e7; color:#d88a3b; }
.admin-stat-icon.teal, .quick-action-icon.teal { background:#e7f5f2; color:#247c73; }
.pipeline-card { border:1px solid #efedeb; border-radius:14px; padding:13px; background:#fff; }
.pipeline-card.coral { background:#fffaf7; border-color:#f8e5dc; }.pipeline-card.blue { background:#fbfcff; border-color:#e7edf8; }.pipeline-card.purple { background:#fdfbff; border-color:#eee7f7; }.pipeline-card.teal { background:#f9fdfc; border-color:#e2f1ee; }
.pipeline-icon { display:flex; height:28px; width:28px; align-items:center; justify-content:center; border-radius:9px; background:#fff; color:#e76f51; box-shadow:0 3px 8px rgba(23,35,63,.05); }.pipeline-card.blue .pipeline-icon{color:#536a9a}.pipeline-card.purple .pipeline-icon{color:#7650a6}.pipeline-card.teal .pipeline-icon{color:#247c73}
.quick-action { display:flex; align-items:center; gap:10px; border-radius:13px; padding:11px; text-align:right; transition:background .2s ease,transform .2s ease; }.quick-action:hover { background:#faf8f6; transform:translateX(-2px); }.quick-action-icon { display:flex; height:36px; width:36px; flex:none; align-items:center; justify-content:center; border-radius:11px; }
@media (max-width:900px){ .admin-nav { width:218px; flex-basis:218px; } .admin-nav-item { padding:10px 8px; } .admin-main { padding:22px 18px 36px; } }
@media (max-width:640px){ .admin-shell { display:block; } .admin-nav { width:100%; min-height:0; padding:13px 8px 10px; border-left:0; border-bottom:1px solid #ebe9e6; } .admin-nav-heading { padding:2px 4px 12px; } .admin-nav-items { flex-direction:row; overflow:visible; gap:3px; padding-top:12px; } .admin-nav-item { min-width:0; flex:1; justify-content:center; gap:4px; padding:7px 3px; } .admin-nav-item > span:nth-child(2) { display:block; } .admin-nav-item > span:nth-child(2) span:first-child { font-size:10px; } .admin-nav-item > span:nth-child(2) span:last-child { display:none; } .admin-nav-item > .admin-nav-count { display:none; } .admin-nav-item > .h-4 { display:none; } .admin-nav-item .admin-nav-icon { height:28px; width:28px; } .admin-help { display:none; } .admin-main { padding:18px 12px 32px; } .admin-topbar { align-items:center; margin-bottom:18px; } .admin-stat-card { border-radius:15px; } }

@keyframes admin-loader { 0% { transform: translateX(340%); } 100% { transform: translateX(-140%); } }
.book-cover-compact { height: 96px !important; width: 100%; }

[dir="ltr"] .rtl-flip-x { transform: scaleX(-1); }

/* layout helpers matching the live site */
.flex{display:flex;min-width:0;min-height:0}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.block{display:block}
.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-12{gap:3rem}
.min-h-screen{min-height:100vh}.w-full{width:100%}.relative{position:relative}.absolute{position:absolute}.sticky{position:sticky}.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}
.text-right{text-align:right}.text-center{text-align:center}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.leading-tight{line-height:1.15}.leading-8{line-height:2}.leading-9{line-height:2.25}
.rounded-full{border-radius:999px}.rounded-xl{border-radius:.75rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}
.border{border:1px solid #e7e1d9}.bg-white{background:#fff}.shadow-sm{box-shadow:0 8px 20px rgba(20,33,61,.05)}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;font-weight:800}
.btn-coral{background:#e76f51;color:#fff}.btn-coral:hover{background:#d55e40}
.btn-navy{background:#14213d;color:#fff}.btn-navy:hover{background:#20345e}
.btn-light{background:#fff;color:#14213d;border:1px solid #ded6cb}
.input,.select,.textarea{width:100%;border:1px solid #e0d8ce;border-radius:.75rem;padding:.7rem .9rem;background:#fff}
.label{display:block;margin:0 0 .4rem;font-size:.85rem;font-weight:700}
.pill{display:inline-flex;align-items:center;border-radius:999px;padding:.2rem .6rem;font-size:11px;font-weight:800}
.alert{max-width:1180px;margin:12px auto;padding:12px 16px;border-radius:12px;background:#fff0e6}
.loader{display:none;position:fixed;inset:0;background:#17233f44;z-index:50;align-items:center;justify-content:center}
.loader.show{display:flex}.spinner{width:44px;height:44px;border:4px solid #fff6;border-top-color:#e76f51;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.cart-drawer{position:fixed;inset:0;z-index:60;display:none}.cart-drawer.open{display:block}
.cart-backdrop{position:absolute;inset:0;background:#14213d55}
.cart-panel{position:absolute;top:0;bottom:0;width:min(460px,100%);background:#fbf8f3;overflow:auto;box-shadow:-20px 0 60px rgba(20,33,61,.18)}
[dir=rtl] .cart-panel{left:0;right:auto}[dir=ltr] .cart-panel{right:0;left:auto}
@media(min-width:768px){.md-flex{display:flex}.md-grid-3{grid-template-columns:repeat(3,1fr)}.md-hidden{display:none}}
@media(min-width:1024px){.lg-grid-2{grid-template-columns:1.02fr .98fr}.lg-grid-4{grid-template-columns:repeat(4,1fr)}.lg-grid-books{grid-template-columns:repeat(4,1fr)}}
@media(max-width:767px){.sm-hide{display:none}}
.book-grid{display:grid;gap:1.5rem}
@media(min-width:640px){.book-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.book-grid{grid-template-columns:repeat(4,1fr)}}
.stage-grid{display:grid;gap:1rem}
@media(min-width:768px){.stage-grid{grid-template-columns:repeat(3,1fr)}}
.stats-grid{display:grid;gap:1rem}
@media(min-width:640px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.table{width:100%;border-collapse:collapse}.table th,.table td{padding:14px;border-bottom:1px solid #eee;text-align:start;font-size:13px}
.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:#f7f6f4;position:relative;overflow:hidden}
.login-card{position:relative;display:grid;width:100%;max-width:56rem;overflow:hidden;border-radius:32px;background:#fff;box-shadow:0 24px 80px rgba(20,33,61,.12)}
@media(min-width:768px){.login-card{grid-template-columns:.9fr 1.1fr}.login-aside{display:flex}}
.login-aside{display:none;flex-direction:column;justify-content:space-between;background:#17233f;color:#fff;padding:40px}

.grid.cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card,.admin-panel{background:#fff;border:1px solid #ebe9e6;border-radius:18px;padding:22px;box-shadow:0 7px 20px rgba(23,35,63,.035)}
.admin-stat-card{background:#fff}

/* Admin content: forms, buttons, tables and pagination rendered from plain tags */
.admin-main .card h2{font-size:18px;font-weight:800;margin:0 0 18px}
.admin-main .grid.cards .card h2{margin:10px 0 0;font-size:26px}
.admin-main .card h3{font-size:16px;font-weight:800;margin:0 0 6px}
.admin-main .card p{margin:6px 0;color:#5f6270;font-size:14px}
.admin-main .card small{color:#8e8e92;font-size:12px}
.admin-main .grid{gap:14px 16px}
.admin-main form label{display:block;margin:0 0 6px;font-size:13px;font-weight:700;color:#3a4257}
.admin-main form > label{margin-top:14px}
.admin-main input,.admin-main select,.admin-main textarea{width:100%;height:44px;border:1px solid #e0d8ce;border-radius:12px;padding:0 14px;background:#fff;color:#17233f;font-size:14px;outline:none;transition:border-color .15s ease,box-shadow .15s ease}
.admin-main textarea{height:auto;min-height:96px;padding:10px 14px;resize:vertical;display:block}
.admin-main select{cursor:pointer}
.admin-main input:focus,.admin-main select:focus,.admin-main textarea:focus{border-color:#e76f51;box-shadow:0 0 0 3px rgba(231,111,81,.15)}
.admin-main input::placeholder,.admin-main textarea::placeholder{color:#b0aaa2}
.admin-main .btn{height:42px;padding:0 20px;border-radius:12px;background:#17233f;color:#fff;font-size:14px;gap:6px;transition:background .15s ease}
.admin-main .btn:hover{background:#20345e}
.admin-main .btn.light{height:34px;padding:0 14px;font-size:12px;background:#fff;color:#17233f;border:1px solid #e0d8ce}
.admin-main .btn.light:hover{background:#faf8f6}
.admin-main .btn.danger{height:34px;padding:0 14px;font-size:12px;background:#fff5f2;color:#c0492c;border:1px solid #f3d3c8}
.admin-main .btn.danger:hover{background:#ffe9e2}
.admin-main .btn-light{background:#fff;color:#14213d;border:1px solid #ded6cb}
.admin-main .actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.admin-main .table th{color:#8e8e92;font-size:12px;font-weight:800;background:#faf9f7;white-space:nowrap}
.admin-main .table td{vertical-align:middle;color:#17233f}
.admin-main .table tr:last-child td{border-bottom:0}
.admin-main .table td small{display:block;margin-top:2px}
.admin-main .table select{height:36px;min-width:140px;font-size:13px}
.admin-main .empty{text-align:center;color:#8e8e92;padding:28px 14px}
.admin-main .pill{background:#f2efeb;color:#5f6270}
.admin-main .pill.ok{background:#eef8f7;color:#247c73}
.admin-main .pill.warn{background:#fff0e6;color:#c85738}
.admin-main .pill.muted{background:#f1f1f3;color:#8e8e92}
.admin-main nav[role=navigation]{margin-top:16px}
.admin-main .pagination{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:16px 0 0;padding:0}
.admin-main .pagination li > *{display:inline-flex;min-width:36px;height:36px;align-items:center;justify-content:center;padding:0 10px;border:1px solid #e0d8ce;border-radius:10px;background:#fff;font-size:13px;font-weight:700;color:#17233f}
.admin-main .pagination li.active > *{background:#17233f;border-color:#17233f;color:#fff}
.admin-main .pagination li.disabled > *{color:#b0aaa2}
.admin-main .invoice-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:8px;margin-top:10px;align-items:center}
@media (max-width:640px){.admin-main .invoice-row{grid-template-columns:1fr 1fr}.admin-main .invoice-row select{grid-column:1/-1}}

/* Storefront pieces moved out of inline styles */
.site-header{position:sticky;top:0;z-index:40;border-bottom:1px solid rgba(231,225,217,.8);background:rgba(251,248,243,.9);backdrop-filter:blur(16px)}
.site-header-inner{display:flex;height:76px;align-items:center;justify-content:space-between;gap:16px}
.hero-title{margin:24px 0 0;max-width:42rem;font-size:clamp(2.6rem,6vw,5.5rem);font-weight:800;line-height:1.12;letter-spacing:-.055em}
[dir=ltr] .hero-title{letter-spacing:-.03em}
.avatar-stack{display:flex}
.avatar-stack div{display:flex;height:36px;width:36px;align-items:center;justify-content:center;border:2px solid #fbf8f3;border-radius:999px;background:#f4a261;font-size:12px;font-weight:800;margin-inline-start:-8px}
.avatar-stack div:first-child{margin-inline-start:0}
.filter-pill{padding:8px 16px;background:#fff;color:#14213d;border:1px solid #ded6cb}
.filter-pill.is-active{background:#14213d;color:#fff;border-color:#14213d}
.filter-pill.filter-coral.is-active{background:#e76f51;border-color:#e76f51}
.filter-pill.filter-teal.is-active{background:#e5f3f1;color:#2a9d8f;border-color:#bfe3de}
.filter-pill.filter-navy.is-active{background:#e8edf5;color:#14213d;border-color:#c9d3e3}
.book-badge{position:absolute;inset-inline-end:20px;top:20px;background:rgba(255,255,255,.9);color:#14213d}
.book-badge.is-out{background:#f9eded;color:#aa5353}
.contact-lines{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:10px}
.contact-lines li{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:#77726b}
.contact-lines a,.contact-lines strong{color:#14213d;font-weight:800}
.contact-form{border-radius:28px;background:#14213d;padding:28px;color:#fff;box-shadow:0 20px 40px rgba(20,33,61,.1)}
.contact-form .label{color:rgba(255,255,255,.8)}
.contact-form .input,.contact-form .textarea{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.15);color:#fff}
.contact-form .input::placeholder,.contact-form .textarea::placeholder{color:rgba(255,255,255,.45)}
.contact-form .textarea{min-height:110px}
.input + .label,.select + .label,.textarea + .label,div + .label{margin-top:12px}
.input,.select,.textarea{font-size:14px;color:#14213d}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:#e76f51;box-shadow:0 0 0 3px rgba(231,111,81,.15)}
.textarea{display:block;min-height:90px;resize:vertical}

/* LTR-typed values (phones, emails, codes) keep LTR text but align with the page */
[dir=rtl] input[dir=ltr]:is([type=tel],[type=email],[type=password],.align-page){text-align:right}

.lang-switch{display:inline-flex;border:1px solid #ded6cb;border-radius:999px;background:#fff;padding:3px;gap:2px}
.lang-switch a{padding:6px 11px;border-radius:999px;font-size:12px;font-weight:800;color:#77726b;line-height:1.2}
.lang-switch a.active{background:#14213d;color:#fff}
.lang-switch a:not(.active):hover{color:#14213d}

.cart-close{border:1px solid #e5ded5;background:#fff;border-radius:999px;width:36px;height:36px;flex:none;color:#77726b}
.cart-line{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:12px;margin-bottom:8px}
.qty-control{display:flex;align-items:center;gap:6px;flex:none}
.qty-control button{width:30px;height:30px;border-radius:999px;border:1px solid #e0d8ce;background:#fbf8f3;font-weight:800;color:#14213d}
.qty-control button:disabled{opacity:.4;cursor:not-allowed}
.qty-control span{min-width:20px;text-align:center;font-weight:800}

.alert{position:fixed;top:16px;inset-inline:16px;z-index:70;max-width:560px;margin:0 auto;padding:12px 16px;border-radius:14px;font-size:14px;font-weight:700;box-shadow:0 12px 30px rgba(20,33,61,.15);animation:alertOut .4s ease 6s forwards}
.alert-success{background:#eef8f7;color:#1f6b63;border:1px solid #bfe3de}
.alert-error{background:#fff0ec;color:#a8432b;border:1px solid #f3cfc4}
@keyframes alertOut{to{opacity:0;visibility:hidden;transform:translateY(-10px)}}

/* Mirror the physical-direction rules for LTR (English) */
[dir=ltr] .nav-link::after{right:auto;left:0}
[dir=ltr] .admin-nav{border-left:0;border-right:1px solid #ebe9e6}
[dir=ltr] .admin-nav-item,[dir=ltr] .quick-action{text-align:left}
[dir=ltr] .admin-nav-item:hover,[dir=ltr] .quick-action:hover{transform:translateX(2px)}
[dir=ltr] .process-number{left:auto;right:20px}
[dir=ltr] .text-right{text-align:left}
@media (max-width:640px){[dir=ltr] .admin-nav{border-right:0}}

/* Admin additions */
.admin-topbar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.admin-main .field-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.admin-main .field-pair .lang-tag{display:inline-block;margin-inline-start:6px;font-size:10px;font-weight:800;color:#8e8e92;background:#f2efeb;border-radius:6px;padding:1px 6px}
.admin-main .check{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;margin-top:14px}
.admin-main .check input{width:18px;height:18px}
.admin-main details.edit-box{margin-top:12px;border-top:1px dashed #ebe9e6;padding-top:10px}
.admin-main details.edit-box summary{cursor:pointer;font-size:13px;font-weight:800;color:#536a9a;list-style:none}
.admin-main details.edit-box summary::-webkit-details-marker{display:none}
.admin-main .grade-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.admin-main .grade-list li{border:1px solid #efece8;border-radius:12px;padding:10px 12px;background:#fcfbfa}
.admin-main .muted-note{font-size:12px;color:#8e8e92;margin-top:6px}
.admin-main .color-dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle}
.admin-main .color-dot.coral{background:#e76f51}.admin-main .color-dot.teal{background:#2a9d8f}.admin-main .color-dot.navy{background:#14213d}
@media (max-width:640px){.admin-main .field-pair{grid-template-columns:1fr}}
@media (max-width:640px){
  .admin-main .admin-nav-items,.admin-nav-items{overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  .admin-nav-item{flex:0 0 auto;min-width:76px;flex-direction:column;text-align:center}
  .admin-topbar{flex-wrap:wrap}
}
@media(min-width:1024px){.how-grid{grid-template-columns:.8fr 1.2fr;align-items:center}}
.site-header-inner > a, .site-header nav a{white-space:nowrap}
@media (max-width:1023px){.site-header nav{display:none !important}}
@media (max-width:420px){.site-header-inner{gap:8px}.site-header-inner > a > div:last-child > div:last-child{display:none}.lang-switch a{padding:6px 8px}}