/* Souvenir's web face — the iOS app's design language, translated to CSS.
The tokens are the app's Theme; if a value here disagrees with the app,
the app is right and this file is wrong. */
/* Direction D — the aurora, chosen by Tariq 2026-08-24. The amber CTA is
the sunset's ember inside the night: the bridge to the app's logo, which
stays as it is by his word. */
:root{
/* حكم طارق 2026-08-28: «وحّد على قيم التطبيق» — الأرضية والحبر والكهرمان
والأخضر من Theme.swift حرفيًا. أبطال الليل والشفق تأليف ويب معتمد يبقى. */
--bg:#F6F0E3; --card:#FEFCF8; --text:#28241E; --muted:#676055;
--accent:#E0A458; --accent-ink:#28241E; --deep:#B4622E; --line:rgba(40,36,30,.12);
--brand:#B4622E; /* تراكوتا كتاب العلامة — لون «سوفينير» في تطبيق أبل */
--band1:#0E2B44; --band2:#35C493;
--aurora:linear-gradient(135deg,#0E2B44 0%,#14556A 45%,#1F8F7C 78%,#35C493 100%);
--night:linear-gradient(165deg,#0A1626 0%,#0E2B44 38%,#14556A 62%,#1F8F7C 82%,#35C493 100%);
--cold:#5B84A8; --mild:#678B51; --warm:#C98A3B; --hot:#B15331;
--visited:#678B51; --drop:#4D94EB; --sun:#E0A458;
/* منحنيات المرجع التصميمي — تُسمّى هنا فلا تُخترع بدائل في كل موضع. */
--ease-out:cubic-bezier(0.23,1,0.32,1);
--ease-in-out:cubic-bezier(0.77,0,0.175,1);
}
*{box-sizing:border-box;margin:0}
html{height:100%}
body{min-height:100%;background:var(--bg);color:var(--text);
font-family:"Almarai",-apple-system,"SF Arabic",Tahoma,sans-serif;
font-size:16px;line-height:1.7;-webkit-text-size-adjust:100%}
a{color:var(--deep)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select{font:inherit;color:var(--text)}
#view{max-width:680px;margin:0 auto;padding:18px 16px 96px}
/* ── The standing bar: title right, quiet controls left ─────────────── */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 14px}
.top h1{font-size:24px;font-weight:800}
.top .sub{font-size:13px;color:var(--muted)}
.circle{width:38px;height:38px;border-radius:50%;background:var(--card);
border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center}
/* ── Cards ──────────────────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.section{margin:18px 0}
.section>h2{font-size:17px;font-weight:700;margin-bottom:8px}
.hero{display:block;width:100%;text-align:right;background:linear-gradient(135deg,#B4622E,#8A4520);
color:#fff;border-radius:18px;padding:16px 18px;text-decoration:none}
.hero .t{font-size:18px;font-weight:800}
.hero .s{font-size:13px;opacity:.9}
/* ── Chips (the finder's vocabulary) ────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.chip{border:1px solid var(--line);background:var(--card);border-radius:999px;
padding:6px 14px;font-size:14px;font-weight:600;white-space:nowrap}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.chip small{font-weight:400;opacity:.8}
.search{display:flex;align-items:center;gap:8px;background:var(--card);
border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin:10px 0}
.search input{flex:1;border:0;outline:0;background:none;font-size:16px}
/* ── Destination rows in the finder ─────────────────────────────────── */
.dest-row{display:flex;align-items:stretch;gap:0;background:var(--card);
border:1px solid var(--line);border-radius:16px;padding:0;margin-bottom:14px;
cursor:pointer;overflow:hidden;transition:box-shadow .15s}
.dest-row:hover{box-shadow:0 6px 22px rgba(59,47,33,.12)}
.dest-row .flag{font-size:26px}
.dest-row .names{flex:1;min-width:0}
.dest-row .names .n{font-weight:700}
.dest-row .names .c{font-size:13px;color:var(--muted)}
.dest-row .names .v{font-size:12.5px;color:var(--deep)}
.dest-row .temp{text-align:center;line-height:1.25}
.dest-row .temp .hi{font-size:20px;font-weight:800}
.dest-row .temp .lo{font-size:12px;color:var(--muted)}
.dest-row .temp .mo{font-size:11px;color:var(--muted)}
.heart{font-size:20px;color:var(--muted);opacity:.65}
.heart.on{color:var(--accent);opacity:1}
.heart .kept{display:block;font-size:10px;color:var(--accent);text-align:center}
/* ── Suggestion cards (Home) ────────────────────────────────────────── */
.ideas{display:grid;grid-auto-flow:column;grid-auto-columns:196px;gap:12px;
overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity}
.idea{background:var(--card);border:1px solid var(--line);border-radius:16px;
overflow:hidden;scroll-snap-align:start;cursor:pointer}
.idea .head{background:linear-gradient(120deg,var(--band1),var(--band2));
color:#fff;padding:10px 12px}
.idea .head .n{font-weight:800}
.idea .head .c{font-size:12px;opacity:.9}
.idea .body{padding:8px 12px 10px;font-size:12.5px;color:var(--muted)}
.idea .body div{display:flex;gap:6px;align-items:baseline}
/* ── Destination page ───────────────────────────────────────────────── */
.band{background:linear-gradient(120deg,var(--band1),var(--band2));color:#fff;
border-radius:18px;padding:18px 20px;margin-bottom:16px;position:relative}
.band h1{font-size:26px}
.band .c{opacity:.9;font-size:15px}
.band .heart{position:absolute;top:14px;left:14px;font-size:24px;color:#fff;opacity:.85}
.band .heart.on{color:#FFD98A;opacity:1}
.months{display:flex;gap:6px;overflow-x:auto;padding:4px 0}
.m{min-width:74px;text-align:center;background:var(--card);border:1px solid var(--line);
border-radius:12px;padding:8px 6px;flex:0 0 auto}
.m.sel{background:var(--accent);border-color:var(--accent);color:#fff}
.m.sel .mu{color:rgba(255,255,255,.85)}
.m .mo{font-size:12px}.m .hi{font-size:17px;font-weight:800}
.m .mu{font-size:11px;color:var(--muted)}
.m .rain{font-size:10px}
.rows .row{display:flex;justify-content:space-between;gap:10px;align-items:baseline;
padding:8px 0;border-bottom:1px solid var(--line)}
.rows .row:last-child{border-bottom:0}
.row .who{font-weight:600}.row .meta{font-size:13px;color:var(--muted)}
.tail{display:inline-block;width:20px;height:20px;border-radius:4px 10px 2px 2px;
background:var(--deep);color:#fff;font-size:11px;font-weight:800;text-align:center;
line-height:20px;margin-inline-start:4px}
a.book{display:block;text-align:center;background:var(--accent);color:#fff;font-weight:800;
text-decoration:none;border-radius:14px;padding:13px;margin-top:10px}
.disclose{font-size:12px;color:var(--muted);text-align:center;margin-top:6px}
.back{font-size:14px;margin-bottom:10px;display:inline-block}
/* ── Forms (papers, trips, prefs) ───────────────────────────────────── */
.frow{display:flex;gap:8px;margin:8px 0;flex-wrap:wrap}
.frow input,.frow select{background:var(--card);border:1px solid var(--line);
border-radius:10px;padding:8px 10px;flex:1;min-width:120px}
.btn{display:inline-block;background:var(--accent);color:#fff;font-weight:700;
border-radius:12px;padding:10px 18px;text-align:center;text-decoration:none}
.btn.ghost{background:var(--card);color:var(--deep);border:1px solid var(--line)}
.empty{color:var(--muted);font-size:14px;text-align:center;padding:18px 0}
/* ── Tab bar: the app's floating pill ───────────────────────────────── */
nav.tabs{position:fixed;bottom:14px;inset-inline:0;display:flex;justify-content:center;z-index:9}
nav.tabs .pill{display:flex;gap:6px;background:rgba(253,250,243,.92);border:1px solid var(--line);
border-radius:999px;padding:6px 10px;backdrop-filter:blur(12px);box-shadow:0 6px 24px rgba(59,47,33,.14)}
nav.tabs a{display:flex;flex-direction:column;align-items:center;gap:2px;
padding:6px 16px;border-radius:999px;text-decoration:none;color:var(--muted);font-size:11.5px;font-weight:700}
nav.tabs a.on{color:var(--deep)}
nav.tabs img{width:26px;height:26px;opacity:.55}
nav.tabs a.on img{opacity:1}
/* ── The filter, arranged like the app: labelled rows, menus where the app
opens menus ─────────────────────────────────────────────────────── */
.frows{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0}
.fbox{border:1px solid var(--line);border-radius:14px;padding:7px 10px;
background:var(--card);min-width:0;max-width:100%;display:flex;align-items:center;gap:10px}
.fbox.span{width:100%}
.ftitle{font-size:13px;font-weight:800;color:var(--brand);flex:0 0 auto}
.fcontrols{display:flex;align-items:center;gap:8px;min-width:0;overflow-x:auto}
select.menu{appearance:none;-webkit-appearance:none;
padding-inline-end:26px;
background-image:url('data:image/svg+xml;utf8,');
background-repeat:no-repeat;background-position:left 7px center;background-size:16px;background-color:var(--accent);color:#fff;font-weight:700;border:0;
border-radius:999px;padding:7px 14px;font-size:14px;max-width:46vw;
-webkit-appearance:none;appearance:none}
select.menu:disabled{background:var(--card);color:var(--muted)}
.fcontrols .chips{margin:0}
/* ── The map lens ───────────────────────────────────────────────────── */
.countbar{display:flex;align-items:center;justify-content:flex-end;margin:8px 0}
.lens{display:flex;gap:6px}
.findmap{height:56vh;border-radius:16px;border:1px solid var(--line);overflow:hidden}
.leaflet-container{font:inherit}
/* ── The Booking-grade pass: depth, covers, badges — in our colours ──── */
.dest-row{padding:0;overflow:hidden;box-shadow:0 2px 10px rgba(59,47,33,.06);
transition:box-shadow .15s, transform .15s}
.dest-row:hover{box-shadow:0 6px 22px rgba(59,47,33,.14);transform:translateY(-1px)}
.dest-row .cover{align-self:stretch;flex:0 0 clamp(110px,24vw,200px);min-height:140px;
display:flex;align-items:center;justify-content:center;font-size:42px;position:relative;
text-shadow:0 2px 8px rgba(0,0,0,.25)}
.dest-row .names{padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.dest-row .names .n{font-size:18.5px;font-weight:900;color:var(--deep)}
.dest-row .names .det{margin-top:auto;padding-top:8px;font-size:12.5px;color:var(--muted)}
.dest-row .temp{padding:0;text-align:end}
/* القلب عاريًا في الزاوية اليمنى العليا — بلا دائرة، وظله يفصله عن أي صورة */
.dest-row .heart{position:absolute;top:6px;right:8px;background:none;border:0;
font-size:23px;color:#fff;opacity:.95;cursor:pointer;line-height:1;padding:0;
filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}
.dest-row .heart.on{color:#FFD98A;opacity:1}
.dest-row .side{margin-inline-start:auto;display:flex;flex-direction:column;
justify-content:space-between;align-items:flex-end;padding:14px 16px;gap:10px}
.dest-row .view{background:var(--deep);color:#fff;font-weight:800;
font-size:13.5px;border-radius:10px;padding:8px 14px;white-space:nowrap}
@media (max-width:540px){ .dest-row .view{display:none}
.dest-row .cover{min-height:116px;font-size:34px} }
.badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.badge{font-size:11px;font-weight:700;border-radius:6px;padding:2px 7px;
background:var(--bg);border:1px solid var(--line);color:var(--muted)}
.badge.good{background:#E8F2E9;border-color:#BFDCC4;color:#2F6B4F}
.badge.w-mild{color:var(--mild)}.badge.w-warm{color:var(--warm)}
.badge.w-hot{color:var(--hot)}.badge.w-cold{color:var(--cold)}
.idea{box-shadow:0 2px 10px rgba(59,47,33,.06)}
.idea .head{min-height:64px;display:flex;flex-direction:column;justify-content:flex-end;
text-shadow:0 1px 4px rgba(0,0,0,.25)}
.section>h2{font-size:19px}
.search{box-shadow:0 0 0 3px rgba(224,164,88,.28);border-color:var(--accent)}
.card{box-shadow:0 2px 10px rgba(59,47,33,.05)}
a.book{box-shadow:0 4px 14px rgba(224,164,88,.4);font-size:16px}
.top h1{font-size:26px}
/* ── The integrated page: brand bar, hero, the unified search strip ──── */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:22px;
background:var(--card);border-bottom:1px solid var(--line);
/* محتوى الهيدر على عمود الصفحة نفسه الذي تحت البطل */
padding:12px max(clamp(16px,5vw,48px),calc(50vw - 530px + clamp(16px,5vw,48px)))}
/* كلمة سوفينير كما في شاشة بداية التطبيق: Tajawal Medium بحبر #28241E */
.topbar .brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:500;color:#28241E;text-decoration:none}
.topbar .brand img{width:30px;height:30px;border-radius:8px}
.topbar .links{display:flex;gap:4px}
.topbar .links a{padding:7px 14px;border-radius:999px;text-decoration:none;
color:var(--muted);font-size:14.5px;font-weight:700}
.topbar .links a.on{background:var(--bg);color:var(--deep)}
#view{max-width:1060px;padding-top:0}
.wide{margin:0 -16px}
.hero2{background:linear-gradient(120deg,var(--band1),var(--band2));color:#fff;
position:relative;
/* من الطرف إلى الطرف كما في بوكينج: الشريط يملأ الشاشة والمحتوى يبقى في العمود */
margin-inline:calc(50% - 50vw);
padding-block:clamp(28px,6vw,64px) 72px;
padding-inline:max(clamp(16px,5vw,48px),calc(50vw - 530px + clamp(16px,5vw,48px)))}
html{overflow-x:clip}
.hero2 h1{font-size:clamp(26px,4.5vw,44px);font-weight:900;line-height:1.25}
.hero2 p{opacity:.92;margin-top:6px;font-size:clamp(14px,1.8vw,18px)}
.strip{display:flex;gap:0;background:var(--accent);border-radius:14px;padding:4px;
margin-top:22px;box-shadow:0 10px 30px rgba(0,0,0,.18);flex-wrap:wrap}
.strip .f{display:flex;align-items:center;gap:8px;background:#fff;color:var(--text);
padding:12px 14px;border-inline-end:4px solid var(--accent);min-width:150px}
.strip .f:first-child{border-start-start-radius:10px;border-end-start-radius:10px}
.strip .f.grow{flex:2 1 220px}
.strip .f input,.strip .f select{border:0;outline:0;background:none;font:inherit;
width:100%;color:var(--text)}
.strip .go{flex:0 0 auto;background:var(--accent);color:var(--accent-ink);font-weight:900;
font-size:17px;border-radius:10px;padding:12px 30px;margin-inline-start:4px}
.strip.compact{margin:12px 16px 0;box-shadow:0 4px 14px rgba(59,47,33,.12)}
.hero2 .strip{position:relative}
.wide .section{padding:0 clamp(16px,5vw,48px);margin:26px 0}
.hcards{display:grid;grid-auto-flow:column;grid-auto-columns:225px;gap:14px;
overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x proximity}
.hcard{background:var(--card);border:1px solid var(--line);border-radius:14px;
overflow:hidden;cursor:pointer;scroll-snap-align:start;
box-shadow:0 2px 10px rgba(59,47,33,.06);transition:box-shadow .15s,transform .15s}
.hcard:hover{box-shadow:0 8px 24px rgba(59,47,33,.16);transform:translateY(-2px)}
.hcard .cover{height:118px;display:flex;align-items:center;justify-content:center;
font-size:44px;text-shadow:0 2px 10px rgba(0,0,0,.3)}
.hcard .body{padding:10px 12px}
.hcard .n{font-weight:800;font-size:15.5px}
.hcard .c{font-size:12.5px;color:var(--muted)}
.hcard .t{font-size:12.5px;margin-top:3px}
.hcard .v{font-size:12px;color:#2F6B4F;font-weight:700}
.nudge{padding:0 clamp(16px,5vw,48px);font-size:14px}
.adv{margin:10px 0}
@media (min-width:760px){ nav.tabs{display:none} }
@media (max-width:759px){ .topbar .links{display:none} }
@media (max-width:759px){
.strip{flex-direction:column}
.strip .f,.strip .f.grow{border-inline-end:0;border-bottom:4px solid var(--accent);border-radius:10px;min-width:0;flex:0 0 auto}
.strip .f:last-of-type{border-bottom:0}
.strip .go{width:100%;margin:0}
}
.attrib{max-width:1060px;margin:0 auto;padding:10px 16px 110px;font-size:12px;color:var(--muted);text-align:center}
/* ── Aurora dressing ───────────────────────────────────────────────── */
h1,h2,h3,.top h1,.topbar .brand,.strip .go,a.book,.btn,nav.tabs a{
font-family:"Tajawal","Almarai",Tahoma,sans-serif}
.hero2{background:var(--night);position:relative;overflow:hidden}
.hero2::before{content:"";position:absolute;inset:0;pointer-events:none;background:
radial-gradient(1px 1px at 12% 22%,rgba(255,255,255,.9) 50%,transparent 51%),
radial-gradient(1px 1px at 28% 12%,rgba(255,255,255,.7) 50%,transparent 51%),
radial-gradient(1.5px 1.5px at 44% 26%,rgba(255,255,255,.8) 50%,transparent 51%),
radial-gradient(1px 1px at 62% 10%,rgba(255,255,255,.65) 50%,transparent 51%),
radial-gradient(1px 1px at 78% 20%,rgba(255,255,255,.8) 50%,transparent 51%),
radial-gradient(1.5px 1.5px at 90% 14%,rgba(255,255,255,.6) 50%,transparent 51%)}
.hero2::after{content:"";position:absolute;left:-6%;top:-18%;width:58%;height:130%;
pointer-events:none;filter:blur(16px);transform:rotate(-12deg);background:
linear-gradient(200deg,rgba(53,196,147,0) 20%,rgba(53,196,147,.32) 55%,rgba(31,143,124,0) 85%)}
.hero2 h1,.hero2 p{position:relative;z-index:1}
.hero2 .strip{position:relative;z-index:1}
.strip .go{color:var(--accent-ink)}
a.book{color:var(--accent-ink);box-shadow:0 4px 14px rgba(224,164,88,.4)}
.chip.on{color:var(--accent-ink)}
.m.sel{color:var(--accent-ink)}
.m.sel .mu{color:rgba(16,35,31,.6)}
select.menu{color:var(--accent-ink)}
.idea .head,.dest .head,.band,.hcard .cover{background:var(--aurora)}
.hero{background:var(--night)}
/* ── الترويسة الجديدة: البروفايل في أقصى اليمين، والإعدادات لوحة ── */
.topbar .avatar{width:34px;height:34px;border-radius:50%;background:var(--aurora);
border:0;cursor:pointer;position:relative;flex:0 0 auto;padding:0;
margin-inline-start:auto}
.topbar .avatar::before{content:"";position:absolute;top:6px;left:50%;
transform:translateX(-50%);width:11px;height:11px;border-radius:50%;background:#fff}
.topbar .avatar::after{content:"";position:absolute;bottom:4px;left:50%;
transform:translateX(-50%);width:19px;height:9px;border-radius:10px 10px 0 0;background:#fff}
.sheetback{position:fixed;inset:0;background:rgba(6,22,38,.45);z-index:40}
/* اللوحة تنبثق من جهة صورة البروفايل — أقصى اليسار في ترتيبنا العربي */
.sheet{position:fixed;top:0;bottom:0;left:0;width:min(430px,94vw);background:var(--bg);
z-index:41;overflow-y:auto;padding:16px 18px 28px;box-shadow:8px 0 30px rgba(6,22,38,.25)}
.sheethead{display:flex;align-items:center;justify-content:space-between}
.sheethead h2{margin:0}
.sheethead .x{background:var(--card);border:1px solid var(--line);width:32px;height:32px;
border-radius:50%;cursor:pointer;font-size:14px;color:var(--text)}
.chip .x{font-size:10px;margin-inline-start:5px;opacity:.8}
.dest-row .keptpill{position:absolute;top:10px;right:38px;background:rgba(255,255,255,.92);
color:var(--accent-ink);font-size:11.5px;font-weight:800;border-radius:999px;padding:3px 9px}
/* ── الحساب: زر جوجل، بطاقة من دخل، والصورة الحقيقية في الترويسة ── */
.topbar .avatar.real{background:none}
.topbar .avatar.real::before,.topbar .avatar.real::after{display:none}
.topbar .avatar.real img{width:34px;height:34px;border-radius:50%;display:block;object-fit:cover}
.gsign{display:flex;align-items:center;gap:10px;width:100%;margin:12px 0;padding:11px 14px;
background:var(--card);border:1px solid var(--line);border-radius:12px;cursor:pointer;
font:inherit;font-weight:700;color:var(--text);text-align:start}
.gsign .g{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:#fff;
border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
font-weight:900;color:#4285F4}
.account{display:flex;align-items:center;gap:12px;margin:12px 0;padding:11px 14px;
background:var(--card);border:1px solid var(--line);border-radius:12px}
.account img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.account .who{flex:1;min-width:0}
.account .who .n{font-weight:800}
.account .who .e{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.account .out{background:none;border:1px solid var(--line);border-radius:10px;
padding:7px 14px;cursor:pointer;font:inherit;font-weight:700;color:var(--brand)}
.planrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.planrow input[type=date]{border:1px solid var(--line);border-radius:10px;padding:8px 10px;
font:inherit;background:var(--card);color:var(--text)}
/* ── بوابة الحساب واقتراحاته ── */
.gate{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:41;
width:min(400px,92vw);background:var(--bg);border-radius:18px;padding:22px 20px;
box-shadow:0 18px 60px rgba(6,22,38,.35);text-align:center}
.gate h3{margin:0 0 6px;color:var(--deep)}
.gate p{margin:0 0 14px;color:var(--muted);font-size:14.5px}
.gate .gsign{justify-content:center}
.later{background:none;border:0;cursor:pointer;font:inherit;color:var(--muted);
padding:8px;font-size:13.5px}
.gsign.apple{margin-top:8px}
.gsign.apple .g{background:#000;color:#fff;border-color:#000;font-size:14px}
.gate .gsign{width:100%}
.erase{background:none;border:1px solid var(--hot);color:var(--hot);border-radius:10px;
padding:9px 16px;cursor:pointer;font:inherit;font-weight:700}
.topbar .avatar.letter{background:var(--aurora);color:#fff;font-weight:900;font-size:16px;
display:flex;align-items:center;justify-content:center}
.topbar .avatar.letter::before,.topbar .avatar.letter::after{display:none}
.account .letter{width:40px;height:40px;border-radius:50%;background:var(--aurora);color:#fff;
font-weight:900;font-size:17px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.linkacct{display:block;width:100%;margin:0 0 12px;padding:9px 14px;background:var(--card);
border:1px dashed var(--line);border-radius:12px;cursor:pointer;font:inherit;
font-weight:700;color:var(--deep);text-align:center}
.topbar .signin{background:var(--accent);color:var(--accent-ink);border:0;cursor:pointer;
font:inherit;font-weight:800;font-size:13.5px;border-radius:999px;padding:8px 16px;
margin-inline-start:auto;white-space:nowrap}
/* ── ذاكرة الرحلات في الويب ── */
.memstats{display:flex;gap:10px;margin:14px 0}
.memstats .stat{flex:1;position:relative;background:var(--card);
border:1px solid var(--line);border-radius:14px;padding:26px 12px 14px;
text-align:center}
.memstats .n{font-size:42px;font-weight:900;line-height:1;color:var(--deep)}
.memstats .l{position:absolute;top:9px;right:12px;font-size:12.5px;
color:var(--muted)}
/* سطر بطل الصفحة الداخلية: العنوان وزره وجهًا لوجه */
.herorow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.herorow h1{margin:0}
/* المدن تحت اسم الدولة — «شلادمينغ + فيينا» سطرٌ ثانٍ لا عنوانٌ ثانٍ */
.herocities{margin-top:6px;font-size:19px;font-weight:800;opacity:.9}
.year-h{font-size:17px;font-weight:900;color:var(--brand);margin:16px 0 8px}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.ccell{background:var(--card);border:1px solid var(--line);border-radius:14px;
padding:14px;text-align:center}
.ccell .f{font-size:30px}
.ccell .n{font-weight:800;margin-top:4px}
.ccell .c{font-size:12px;color:var(--muted)}
.comp-row{display:flex;align-items:center;gap:12px;background:var(--card);
border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin-bottom:8px}
.comp-row .who{flex:1;min-width:0}
.comp-row .who .n{font-weight:800}
.comp-row .who .e{font-size:12.5px;color:var(--muted)}
.avatarletter{width:38px;height:38px;border-radius:50%;background:var(--aurora);
color:#fff;font-weight:900;font-size:16px;display:flex;align-items:center;
justify-content:center;flex:0 0 auto}
.planrow input:not([type=date]){flex:1;border:1px solid var(--line);border-radius:10px;
padding:8px 10px;font:inherit;background:var(--card);color:var(--text);min-width:120px}
/* أيقونات البنود — تركب لون نصها أينما كانت */
.ficon{display:inline-flex;align-items:center}
.ficon svg{width:16px;height:16px}
.ftitle{display:inline-flex;align-items:center;gap:6px}
button.chip .ficon{margin-inline-end:5px}
button.chip .ficon svg{width:14px;height:14px}
/* البطل الثانوي: للصفحات الشخصية (أوراقي، بياناتي، المفضلة) — نفس
الامتداد من الطرف للطرف، لكن بصوت أخفض: رملٌ فاتح وحبرٌ داكن وارتفاع أقل. */
.hero3{background:linear-gradient(120deg,#EFE9DC,#F8F4EC);
border-bottom:1px solid var(--line);position:relative;
margin-inline:calc(50% - 50vw);
padding-block:clamp(18px,3vw,30px) clamp(18px,3vw,28px);
padding-inline:max(clamp(16px,5vw,48px),calc(50vw - 530px + clamp(16px,5vw,48px)))}
.hero3 h1{font-size:clamp(21px,3vw,28px);font-weight:900;color:var(--text);margin:0}
.hero3 p{color:var(--muted);margin-top:4px;font-size:clamp(13px,1.5vw,15.5px)}
/* طابع الغلاف المرسوم: الحرف الأول علامة مائية ضخمة خلف العلم */
.dest-row .cover .stamp{position:absolute;inset-inline-start:6px;bottom:-14px;
font-family:"Tajawal",sans-serif;font-size:96px;font-weight:900;line-height:1;
color:rgba(255,255,255,.16);pointer-events:none;user-select:none}
/* شاشة الافتتاح — كما يقدم تطبيق iOS نفسه: العلامة والاسم، لا نص انتظار */
.splash{min-height:70vh;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:18px}
.splash img{width:104px;height:104px;border-radius:24px;
box-shadow:0 10px 30px rgba(59,47,33,.18)}
.splash .w{font-family:"Tajawal",sans-serif;font-weight:500;font-size:30px;
color:#28241E}
/* بقية القوائم — سهم العائلة نفسه بحبر النص بدل سهم النظام */
select:not(.menu){appearance:none;-webkit-appearance:none;
background-image:url('data:image/svg+xml;utf8,');
background-repeat:no-repeat;background-position:left 6px center;
background-size:16px;padding-inline-end:24px}
/* لوحة الإعدادات: صفوف أزرار كقائمة التطبيق */
.sheetrows{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.srow{display:flex;align-items:center;justify-content:space-between;gap:10px;
background:var(--card);border:1px solid var(--line);border-radius:14px;
padding:11px 14px;text-decoration:none;color:var(--text)}
.srow .t{font-weight:800;font-size:15px}
.srow .s{font-size:12.5px;color:var(--muted)}
.srow .ch{color:var(--muted);font-size:18px}
/* عناوين رفوف الاقتراحات: شريط رملي يميزها بين البطاقات */
.section>h2.shelfhead{background:linear-gradient(120deg,#EFE9DC,#F8F4EC);
border:1px solid var(--line);border-radius:12px;padding:10px 14px;
margin-bottom:12px}
/* أبرز المعالم — بطاقات تجربة باريس */
.attr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.attr-card{background:var(--card);border:1px solid var(--line);border-radius:16px;
overflow:hidden;display:flex;flex-direction:column}
.attr-card img{width:100%;aspect-ratio:10/7;object-fit:cover;display:block}
.attr-card .b{padding:10px 12px;display:flex;flex-direction:column;gap:5px;flex:1}
.attr-card .n{font-weight:800;font-size:15.5px}
.attr-card .d{font-size:12.5px;color:var(--muted);line-height:1.55}
.attr-card .h{font-size:12.5px;color:var(--text);display:flex;align-items:baseline;gap:5px}
.attr-card .h .ficon{align-self:center}
.attr-card .links{margin-top:auto;padding-top:8px;display:flex;gap:8px;align-items:center}
.attr-card .tik{background:var(--accent);color:#fff;font-weight:800;font-size:13px;
border-radius:10px;padding:7px 12px;text-decoration:none}
.attr-card .off{font-size:12.5px;color:var(--deep)}
.attr-card .disc{font-size:10.5px;color:var(--muted);margin-top:6px}
/* ── الوجه الإنجليزي: مرآة المواضع الفيزيائية المتعمدة وخط اللاتينية ── */
[dir="ltr"] body{font-family:"DM Sans","Almarai",-apple-system,Tahoma,sans-serif;line-height:1.55}
[dir="ltr"] h1,[dir="ltr"] h2,[dir="ltr"] .brand b,[dir="ltr"] button,
[dir="ltr"] .tabs{font-family:"DM Sans","Tajawal",Tahoma,sans-serif}
[dir="ltr"] .hero{text-align:left}
[dir="ltr"] .sheet{left:auto;right:0;border-inline-start:1px solid var(--line)}
[dir="ltr"] .dest-row .heart{right:auto;left:8px}
[dir="ltr"] .band .heart{left:auto;right:14px}
[dir="ltr"] .keptpill{right:auto;left:38px}
[dir="ltr"] .memstats .stat b{right:auto;left:12px}
[dir="ltr"] select.menu,[dir="ltr"] .frow select{background-position:right 7px center}
/* زر اللغة: حبة صغيرة هادئة بجوار وجه الحساب */
.langpill{font-family:"Tajawal","DM Sans",Tahoma,sans-serif;font-weight:700;font-size:13px;
min-width:34px;height:34px;border-radius:999px;border:1px solid var(--line);
background:var(--card);color:var(--muted);margin-inline-start:auto;margin-inline-end:8px}
.topbar .langpill ~ .avatar, .topbar .langpill ~ .signin{margin-inline-start:0}
.langpill:hover{color:var(--text);border-color:var(--muted)}
/* فعالية بلا صورة بعد: تلبس الشفق وحرفها — كالأغلفة الاحتياطية */
.attr-card .aramp{aspect-ratio:10/7;display:flex;align-items:center;justify-content:center;
background:var(--aurora);color:rgba(255,255,255,.85);
font-family:"Tajawal","DM Sans",Tahoma,sans-serif;font-weight:900;font-size:64px}
/* دبوس المخطط: دائرة ذهبية برقم اليوم — لا صور، والتوزيع يُرى بنظرة */
.pmark-wrap { background: none; border: none; }
.pmark { width: 26px; height: 26px; border-radius: 50%;
background: var(--accent, #b8863b); color: #fff; font-weight: 700;
display: flex; align-items: center; justify-content: center;
font-size: 12px; border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,.35); }
/* اسم المكان مكتوبٌ تحت دبوسه — الخريطة تُقرأ بلا مرور مؤشر ولا ضغطة */
.pmark-wrap { overflow: visible; cursor: pointer; }
.pmark-wrap .plabel { position: absolute; top: 28px; left: 50%;
transform: translateX(-50%); pointer-events: none;
max-width: 132px; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; font-size: 11px; font-weight: 800; line-height: 1.5;
padding: 1px 6px; border-radius: 7px; color: #22303A;
background: rgba(255,255,255,.88); box-shadow: 0 1px 3px rgba(0,0,0,.22); }
/* رقعةٌ واسعة: أسماء المقترحات وحدها تُطوى — وأماكن رحلتك تبقى مسمّاة */
.findmap.nolabels .regpin .plabel { display: none; }
/* المقترح دبوسه أخفت من مكانٍ في جدولك */
.regpin .plabel { background: rgba(255,255,255,.78); font-weight: 700; }
/* بطاقات الانتقاء في المخطط: صورة تُقنع أسرع من اسم، وعدّاد صادق يرشد */
.pickrow { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { display: flex; align-items: center; gap: 8px;
border: 2px solid var(--line, #e5ddcf); border-radius: 12px;
background: var(--card, #fff); padding: 3px 12px 3px 5px;
cursor: pointer; font-family: inherit; text-align: start; }
.pick img { width: 36px; height: 36px; border-radius: 9px; object-fit: cover;
display: block; flex: 0 0 36px; }
.pick .aramp.sm { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 9px;
display: flex; align-items: center; justify-content: center; font-size: 17px;
background: var(--aurora); color: rgba(255,255,255,.85);
font-family: "Tajawal","DM Sans",Tahoma,sans-serif; font-weight: 900; }
.pick .pn { font-size: 15px; font-weight: 400; line-height: 1.3; }
.pick .pc { font-size: 12px; color: var(--accent, #b8863b);
font-weight: 700; }
.pick .pc.wait { display: flex; align-items: center; gap: 5px;
color: var(--muted); }
.detwait { margin-top: 12px; display: flex; align-items: center; gap: 8px;
font-size: 12px; font-weight: 700; color: var(--muted);
background: var(--card, #fff); border: 1px solid var(--line, #e5ddcf);
border-radius: 10px; padding: 9px 11px; }
/* ما في سجلنا يُعرَف من نتيجة الخريطة بنظرة */
.srow .inreg { font-size: 10px; font-weight: 800; margin-inline-start: 7px;
color: #1F8F7C; background: #E8F4F1; border-radius: 999px; padding: 2px 7px;
vertical-align: middle; }
/* جدول اليوم — شكل جدول طارق الأصلي: اليوم | الفترة | الفعاليات */
.daytbl { width: 100%; border-collapse: collapse; margin-bottom: 12px;
background: var(--card, #fff); border-radius: 12px; overflow: hidden; }
.daytbl td { border: 1px solid var(--line, #e5ddcf); padding: 7px 10px;
vertical-align: middle; }
.dt-day { width: 116px; text-align: center; }
.dt-day .dd { font-size: 14px; font-weight: 800; }
.dt-day .dm { font-size: 10.5px; color: var(--muted); margin-top: 4px; }
/* مدينة اليوم: أصغر من تاريخه وأظهر من ملاحظة الطيران تحته — فهي جوابُ
«أين أنا اليوم؟» لا حاشية. */
.dt-day .dcity { font-size: 12px; font-weight: 700; margin-top: 3px; }
.dt-day a { display: inline-block; margin-top: 6px; }
.dt-acts { min-width: 0; }
/* البطاقة المختارة: إطار سميك بأخضر الشفق وعلامة صح — ستُوزَّع عند الضغط */
.pick { position: relative; }
.pick.sel { border-color: #1F8F7C; }
.pick.sel::after { content: none;
box-shadow: 0 1px 3px rgba(0,0,0,.3); }
/* دبوس دخل الجدول: أخضر الشفق برقم يومه — والبرتقالي متاح للاختيار */
.pmark.grn { background: #1F8F7C; }
/* صورة المكان في صف الجدول — الجدول يُقرأ بالعين لا بالاسم وحده */
.rowthumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover;
flex: 0 0 44px; }
.rowthumb.ar { display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,.85); font-weight: 800; font-size: 18px;
background: var(--aurora); }
/* دبوس السكن على الخريطة */
.pmark.stay { background: #fff; color: #222; font-size: 13px;
border: 2px solid #1F8F7C; }
/* عرض جنبًا إلى جنب: الجدول يمينًا والخريطة يسارًا تلازم النظر */
.plansplit { display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
align-items: start; }
.plansplit .mapside { position: sticky; top: 72px; }
.plansplit .mapside .findmap { height: min(72vh, 560px); }
@media (max-width: 860px){
.plansplit { grid-template-columns: 1fr; }
.plansplit .mapside { position: static; }
.plansplit .mapside .findmap { height: 300px; }
}
.mapsec .findmap { height: 300px; }
.plansplit .mapside .mapsec .findmap { height: min(72vh, 560px); }
/* بيانات رحلتك: المحتوى يلزم اليمين — لا توزيع على العرض */
.factrows .row { justify-content: flex-start; }
/* الخريطة على طول الجدول — عمودان متساويا القامة */
.plansplit { align-items: stretch; }
.plansplit .mapside { position: static; }
.plansplit .mapside .mapsec { height: 100%; margin: 0; display: flex; }
.plansplit .mapside .mapsec .findmap { height: auto; min-height: 300px; flex: 1; }
/* لون اليوم خلفيةً: خلية اليوم مصبوغة به، وبقية صفوفه مغسولة بظله */
.daytbl .dt-day { background: var(--dc); color: #fff; }
.daytbl .dt-day .dd { color: #fff; }
.daytbl .dt-day .dm { color: rgba(255,255,255,.85); }
.daytbl .dt-day .dcity { color: rgba(255,255,255,.95); }
.daytbl .dt-day a { color: #fff; text-decoration: underline; }
.daytbl .dt-acts {
background: color-mix(in srgb, var(--dc) 6%, transparent); }
/* بطاقة مختارة لم تدخل الجدول بعد: إطار ذهبي — تنتظر ضمّها */
.pick.sel.pend { border-color: var(--accent, #E0A458); }
.pick.sel.pend::after { content: none; }
/* الجوال المثبت كتطبيق: الصفحة تمتد تحت شريط الحالة — الهيدر يفسح له،
والشريط السفلي يفسح لخط البيت. بدونها الشعار والصورة تحت الساعة. */
.topbar { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
nav.tabs { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
/* لوحة الإعدادات في وضع التطبيق: زر الإغلاق ينزل تحت شريط الحالة */
.sheet { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
/* رقم اليوم فوق تاريخه */
.dt-day .dn { font-size: 12px; font-weight: 800; opacity: .9; }
/* الخريطة تلازم النظر: عمودها بطول الجدول، وهي لاصقة بارتفاع الشاشة
داخله — فالدبابيس أمامك أينما بلغت من الجدول */
.plansplit .mapside .mapsec { position: sticky; top: 80px;
height: calc(100vh - 100px); }
.plansplit .mapside .mapsec .findmap { height: 100%; }
/* زر ملء الشاشة وحالته */
.mapsec { position: relative; }
.mapfullbtn { position: absolute; top: 14px; inset-inline-end: 14px; z-index: 61;
width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line);
background: rgba(253,250,243,.95); font-size: 17px; cursor: pointer;
box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.mapsec.mapfull { position: fixed; inset: 0; z-index: 60; height: 100vh;
margin: 0; background: var(--bg); }
.mapsec.mapfull .findmap { height: 100vh; margin: 0; border-radius: 0; }
/* ملء الشاشة يغلب اللصق — محدد بنفس الوزن وأثقل */
.plansplit .mapside .mapsec.mapfull, .mapsec.mapfull {
position: fixed; inset: 0; z-index: 60; height: 100vh; margin: 0;
background: var(--bg); }
.plansplit .mapside .mapsec.mapfull .findmap, .mapsec.mapfull .findmap {
height: 100vh; margin: 0; border-radius: 0; }
/* زر إرجاع الخريطة — فوق يمين (ملء الشاشة على الجهة الأخرى) */
.maphome { inset-inline-end: auto; right: 14px; left: auto; }
.pickrow { padding: 9px 9px 2px; }
/* صف حدث الفندق: شارة بيضاء بإطار الشفق كدبوس السكن على الخريطة */
.rowthumb.stayth { background: #fff; border: 2px solid #1F8F7C;
display: flex; align-items: center; justify-content: center; font-size: 18px; }
/* أزرار الخريطة فوق كل طبقات Leaflet (تصل 800) */
.mapfullbtn { z-index: 1001; }
/* الزران متجاوران فوق يمين: التوسيط ثم التكبير/الإغلاق بجواره */
.mapexp { inset-inline-end: auto; left: auto; right: 58px; }
/* المختار يلبس خلفية خضراء فاتحة — يُفرز عن غير المختار بلمحة */
.pick.sel { background: #E6F4EF; }
.pick.sel.pend { background: #FBF1DF; }
/* مفتاح ألوان الاقتراحات */
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11.5px;
color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend .sw { width: 13px; height: 13px; border-radius: 4px; display: block;
border: 2px solid var(--line, #e5ddcf); background: var(--card, #fff); }
.legend .sw-pend { border-color: var(--accent, #E0A458); background: #FBF1DF; }
.legend .sw-sel { border-color: #1F8F7C; background: #E6F4EF; }
/* سطر فكرة اليوم: أرقام سوفينير الحقيقية تحت جدوله */
.daywhy { font-size: 11.5px; color: var(--muted); background: var(--card);
border: 1px solid var(--line); border-radius: 0 0 10px 10px;
padding: 6px 10px; margin: -12px 0 12px; }
/* الجوال: العمودان الجانبيان يتقلصان ليتنفس عمود الفعاليات — كان 158px من 375 */
@media (max-width: 520px){
.daytbl td { padding: 6px 6px; }
.dt-day { width: 74px; }
.dt-day .dd { font-size: 12px; }
.dt-day .dn { font-size: 11px; }
.dt-day .dm { font-size: 9.5px; }
.dt-day .dcity { font-size: 11px; }
.rowthumb { width: 34px; height: 34px; flex: 0 0 34px; }
.dt-acts .t { font-size: 13px !important; }
.pickwrap { flex: 1 1 100%; }
.pick { width: 100%; }
}
/* صف اليوم: عمود وقت ضيق يسبق كل بند — يُملأ فقط لما له وقت حقيقي */
.trow { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.tstamp { width: 42px; flex: 0 0 42px; font-size: 11.5px; font-weight: 700;
color: var(--muted); font-variant-numeric: tabular-nums; text-align: center;
min-height: 1px; } /* الفارغ يحجز عرضه فتصطف الأيقونات كلها */
.dt-acts > div:not(.trow) { padding-inline-start: 50px; }
@media (max-width: 520px){
.tstamp { width: 36px; flex: 0 0 36px; font-size: 11px; }
.dt-acts > div:not(.trow) { padding-inline-start: 44px; }
}
/* مربع نوع المكان في الجدول — كصف الفندق تمامًا */
.rowthumb.kindth { background: #fff; border: 2px solid var(--line, #e5ddcf);
display: flex; align-items: center; justify-content: center; font-size: 18px; }
/* مربعات الأيقونات على خط واحد: صف المكان صار كصف الحدث تمامًا */
.trow.prow { padding: 6px 0; }
.dt-acts > div:not(.trow) { padding-inline-start: 0; }
/* مربع أبيض بإطار خفيف — يُرى ولا يثقل */
.rowthumb.evth, .rowthumb.kindth, .rowthumb.stayth {
background: #fff; border: 1px solid var(--line, #e5ddcf);
display: flex; align-items: center; justify-content: center; }
/* أحداث اليوم (الفندق والطيران والتوجه للمطار) مقلوبة: خلفية داكنة
وأيقونة بيضاء — فتُفرز عن الفعاليات بنظرة واحدة. */
.rowthumb.evth, .rowthumb.stayth { background: #1F8F7C; border-color: #1F8F7C;
color: #fff; }
.rowthumb.kindth { color: var(--deep, #B4622E); }
/* أيقونة بطاقة الاقتراح — نفس المربع بمقاس البطاقة */
.pickicon { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 9px;
background: #fff; border: 1px solid var(--line, #e5ddcf);
display: flex; align-items: center; justify-content: center;
color: var(--deep, #B4622E); }
/* كل يوم جدول مستقل، فبلا تثبيت يحسب كلٌّ عرض عموده بمحتواه وتتعرج
المربعات. التثبيت يجعل الأيام على شبكة واحدة. */
.daytbl { table-layout: fixed; }
.dt-day { width: 116px; }
@media (max-width: 520px){ .dt-day { width: 74px; } }
/* «أضف مدينة أخرى» بجوار عنوان الخطة */
/* اسم مدينة المرحلة فوق اقتراحاتها */
/* التاريخ بجوار المدينة: أخفّ وأصغر — هو ظرفٌ للاسم لا شريكٌ له. */
.legdates { font-size: 15px; font-weight: 400; opacity: .8; }
.legname { font-size: 17px; font-weight: 800; color: var(--deep, #B4622E);
margin: 12px 2px 4px; }
/* بطاقات مدن الرحلة داخل الخريطة، بجوار زر التوسيط */
.mapcities { position: absolute; top: 14px; right: 102px; z-index: 1001;
display: flex; gap: 6px; flex-wrap: wrap;
max-width: calc(100% - 120px); }
.mapcity { height: 38px; padding: 0 13px; border-radius: 999px;
border: 1px solid var(--line); background: rgba(253,250,243,.95);
font: inherit; font-size: 13px; font-weight: 700; color: var(--ink, #2C2A26);
cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.18); white-space: nowrap; }
.mapcity:hover { background: #fff; }
.mapcity.on { background: #1F8F7C; border-color: #1F8F7C; color: #fff; }
@media (max-width: 560px){
.mapcities { right: 8px; top: 58px; max-width: calc(100% - 16px); }
.mapcity { height: 32px; font-size: 12px; padding: 0 10px; }
}
/* البطاقة ومعها زر الضم المختصر: الجسد يفتح التفاصيل، والزاوية تضم فورًا */
.pickwrap { position: relative; display: inline-flex; }
.pickadd { position: absolute; top: -8px; inset-inline-start: -8px;
width: 22px; height: 22px; border-radius: 50%; z-index: 2;
border: 1.5px solid var(--line, #e5ddcf); background: var(--card, #fff);
color: var(--accent, #b8863b); font: inherit; font-size: 14px; font-weight: 800;
line-height: 1; display: flex; align-items: center; justify-content: center;
cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.12); padding: 0; }
.pickadd:hover { background: #F3F7F5; }
.pickadd.on { background: #1F8F7C; border-color: #1F8F7C; color: #fff; font-size: 12px; }
.pickwrap.pend .pickadd.on { background: var(--accent, #E0A458);
border-color: var(--accent, #E0A458); }
/* نافذة تفاصيل الفعالية — تُرى قبل أن تُضم */
.detback { position: fixed; inset: 0; background: rgba(6,22,38,.45); z-index: 70; }
.detcard { position: fixed; z-index: 71; top: 50%; left: 50%;
transform: translate(-50%,-50%); width: min(460px, 94vw);
max-height: 88vh; overflow: auto; background: var(--bg, #FDFAF3);
border-radius: 16px; padding: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.dethead { display: flex; align-items: flex-start; gap: 10px; }
.dethead h3 { margin: 0; font-size: 17px; }
.dethead .den { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.dethead .x { background: var(--card); border: 1px solid var(--line);
width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.detimg { width: 100%; height: 190px; object-fit: cover; border-radius: 12px;
margin-top: 12px; display: block; }
.detmeta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px;
font-size: 11.5px; font-weight: 700; }
.detmeta .kind { color: var(--muted); }
.detmeta .cnt { color: var(--accent, #b8863b); }
.detblurb { margin: 10px 0 0; font-size: 13px; line-height: 1.65; }
.detrows { margin-top: 12px; display: grid; gap: 6px; }
.detrow { display: flex; gap: 8px; font-size: 12.5px; }
.detrow .k { flex: 0 0 68px; color: var(--muted); font-weight: 700; }
.detrow .v { flex: 1; min-width: 0; }
.detlinks { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px;
font-size: 12.5px; font-weight: 700; }
.detdisc { margin-top: 8px; font-size: 10.5px; color: var(--muted); }
/* اليوم والفترة داخل نافذة المكان — لا أدوات تتمدد تحت صف الجدول */
.detctl { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.detctl label { display: flex; align-items: center; gap: 6px; font-size: 12px;
font-weight: 700; color: var(--muted); }
.detctl select { font: inherit; font-size: 12.5px; padding: 6px 8px;
border-radius: 9px; border: 1px solid var(--line, #e5ddcf);
background: var(--card, #fff); color: var(--text); }
.detbtns { display: flex; gap: 8px; margin-top: 16px;
/* القرار لا يُبحث عنه بالتمرير: الزران ملتصقان بأسفل النافذة دائمًا */
position: sticky; bottom: -16px; padding: 12px 0; background: var(--bg, #FDFAF3);
border-top: 1px solid var(--line, #e5ddcf); }
.detadd { flex: 1; padding: 11px; border-radius: 12px; border: 0;
background: #1F8F7C; color: #fff; font: inherit; font-weight: 800;
font-size: 14px; cursor: pointer; }
/* الإزالة فعلٌ معاكس فلها لونها: برتقالي الشفق لا أخضره */
.detrm { flex: 1; padding: 11px; border-radius: 12px; border: 0;
background: var(--accent, #E0A458); color: #3B2A16; font: inherit;
font-weight: 800; font-size: 14px; cursor: pointer; }
.detrm:hover { background: #D6963F; }
/* سهما التنقل بين فعاليات المجموعة */
.detnav { width: 40px; padding: 11px 0; border-radius: 12px; font: inherit;
font-size: 17px; font-weight: 800; line-height: 1; cursor: pointer;
border: 1px solid var(--line); background: var(--card); color: var(--text); }
.detnav:hover { background: #F3EFE6; }
/* المدينة تحت الاسم مباشرة — أين أنت قبل كل تفصيل */
.dethead .detcity { font-size: 12px; font-weight: 800; margin-top: 3px;
color: var(--deep, #B4622E); }
.detno { padding: 11px 18px; border-radius: 12px; font: inherit; font-weight: 700;
border: 1px solid var(--line); background: var(--card); cursor: pointer; }
/* إغلاق أسبوعي وقع في يومه — تنبيه يُرى، لا سطر رمادي يُتخطى */
.shut { margin-top: 3px; font-size: 11px; font-weight: 700; color: #A6412C;
background: #FBECE8; border: 1px solid #F0CFC6; border-radius: 8px;
padding: 2px 8px; display: inline-block; }
/* «كامل الرحلة» عنوانٌ رئيسي والمدن تحته فروع — تقولها الإزاحة وحدها بلا
كلمة. والخط الرأسي يربط الفروع بأصلها فتُقرأ مجموعةً لا سطورًا متجاورة. */
.legrow { position: relative; padding-inline-start: 22px; font-size: 14px; }
/* سطور المدن أصغر من «كامل الرحلة» بنقطتين — الفرع دون أصله في الصوت
كما هو دونه في الإزاحة. والحقول ترث الحجم فلا تشذّ عن سطرها. */
.legrow input { font-size: 14px; font-family: inherit; }
.legrow::before { content: ""; position: absolute; inset-block: 0;
inset-inline-start: 7px; width: 2px; border-radius: 2px;
background: var(--line, #e5ddcf); }
.legmoves { display: inline-flex; gap: 2px; }
.legmove { border: 1px solid var(--line, #e5ddcf); background: var(--card, #fff);
color: var(--deep, #B4622E); border-radius: 8px; width: 26px; height: 26px;
cursor: pointer; font-size: 14px; line-height: 1; font-family: inherit; }
.legmove:disabled { opacity: .3; cursor: default; }
.legmove:not(:disabled):hover { background: rgba(40,36,30,.06); }
/* موضع المكان البعيد ومسافته — تحذيرٌ هادئ على البطاقة نفسها. ومن اقترح
مكانًا في دولةٍ أخرى يجب أن يعرف ذلك قبل أن يوزّعه على يومٍ لا يسعه. */
.pcfar { font-size: 12px; font-weight: 700; line-height: 1.4; margin-top: 2px;
color: var(--deep, #B4622E); }
.farnote { font-size: 13px; line-height: 1.7; margin: 2px 2px 8px;
color: var(--text, #28241E); opacity: .75; }
/* معالج بدء الرحلة: أربع نقاط تقول أين أنت من الطريق — الممتلئة خلفك
والمجوّفة أمامك — فلا يسأل «كم بقي؟». */
.wizsteps { display: flex; gap: 6px; justify-content: center; margin-bottom: 10px; }
.wizsteps i { width: 7px; height: 7px; border-radius: 50%; display: block;
background: var(--line, #e5ddcf); }
.wizsteps i.on { background: var(--accent, #b8863b); transform: scale(1.35); }
.wizsteps i.done { background: var(--deep, #B4622E); }
.wizchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.wizchip { display: inline-flex; align-items: center; gap: 6px; font-size: 14px;
font-weight: 700; background: rgba(40,36,30,.06); border-radius: 999px;
padding: 5px 12px; }
.wizchip button { border: none; background: none; cursor: pointer;
color: var(--deep, #B4622E); font-size: 13px; padding: 0; }
.wizrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin: 4px 0 10px; }
.wizrow input { font: inherit; font-size: 15px; padding: 8px 10px;
border-radius: 10px; border: 1.5px solid var(--line, #e5ddcf);
background: var(--card, #fff); color: var(--text, #28241E); }
.wiznav { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
/* «أضف مكانًا»: صندوقٌ يُرى ويقول ما هو. كان حقلًا عاريًا بكلمةٍ بجانبه،
فلا يعرف القارئ أن الإضافة من حقّه — والدعوة نصف الميزة. */
.addown { margin-top: 18px; padding: 14px; border-radius: 14px;
background: rgba(40,36,30,.04); border: 1px dashed var(--line, #e5ddcf); }
.addown h3 { margin: 0; font-size: 16px; font-weight: 800;
color: var(--text, #28241E); }
.addown p { margin: 4px 0 10px; font-size: 13px; line-height: 1.6;
color: var(--text, #28241E); opacity: .72; }
.addowninput { width: 100%; box-sizing: border-box; font-family: inherit;
font-size: 15px; padding: 12px 14px; border-radius: 11px;
border: 1.5px solid var(--line, #e5ddcf); background: var(--card, #fff);
color: var(--text, #28241E); }
.addowninput:focus { outline: none; border-color: var(--accent, #b8863b); }
/* أماكن قريبة من مكان الإقامة — قسم تحت اقتراحات المراحل */
.nearhead { margin: 18px 2px 4px; font-size: 19px; font-weight: 800;
color: var(--text, #28241E); border-top: 1px solid var(--line, #e5ddcf);
padding-top: 12px; }
/* بيانات رحلتك — تبويبات بدل أقسام متتابعة */
.tabbar { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 8px;
border-bottom: 1px solid var(--line, #e5ddcf); margin-bottom: 10px;
scrollbar-width: none; }
.tabbar::-webkit-scrollbar { display: none; }
.tabbtn { flex: 0 0 auto; padding: 7px 13px; border-radius: 999px;
border: 1px solid transparent; background: transparent; cursor: pointer;
font: inherit; font-size: 12.5px; font-weight: 800; color: var(--muted);
white-space: nowrap; }
.tabbtn:hover { background: rgba(40,36,30,.05); color: var(--text); }
.tabbtn.on { background: var(--deep, #B4622E); color: #fff; }
.tabpane { display: grid; gap: 8px; }
/* رأيك يهمّنا: نصٌّ حرّ في بوابة الحساب نفسها — نفس اللوحة، بابٌ آخر. */
.gate.fb{text-align:start}
.gate.fb h3,.gate.fb p{text-align:center}
.gate.fb .later{display:block;margin:0 auto}
.fbtext{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid var(--line);
border-radius:12px;background:var(--card);color:var(--deep);font:inherit;font-size:14.5px;
resize:vertical;min-height:110px}
.gate.fb .btn{width:100%;margin-top:10px}
.fbnote{margin:8px 0 0;text-align:center;color:var(--muted);font-size:13px;min-height:18px}
/* لوحة الإدارة: صفوف تُقرأ سريعًا — من، ومتى، وماذا قال. */
.admincount{color:var(--muted);font-size:13px;margin-bottom:8px}
.adminrow{padding:10px 0;border-top:1px solid var(--line)}
.adminrow:first-child{border-top:0}
.adminrow .t{font-weight:700;color:var(--deep)}
.adminrow .s{color:var(--muted);font-size:12.5px;margin-top:2px}
.fbbody{white-space:pre-wrap;margin:6px 0 2px;font-size:14.5px;color:var(--deep)}
.muted{color:var(--muted);font-size:13.5px}
/* ── البوابة حين تحمل قائمة أو تأكيدًا ──
نافذة وسطى، فأصلها مركزها (المرجع §7)، ودخولها من 0.96 لا من العدم.
وتحت «تقليل الحركة» يبقى التلاشي ويسقط الانتقال المكاني وحده. */
@keyframes gatein{from{opacity:0;transform:translate(-50%,-50%) scale(.96)}
to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes backin{from{opacity:0}to{opacity:1}}
.gate{animation:gatein 200ms var(--ease-out) both;transform-origin:center}
.sheetback{animation:backin 200ms var(--ease-out) both}
@media (prefers-reduced-motion: reduce){
.gate{animation:backin 200ms var(--ease-out) both}
}
.gate .btn{display:block;width:100%;margin-top:10px}
.gate .btn:active{transform:scale(.97)}
.btn.danger{background:var(--card);color:var(--hot);border:1px solid var(--hot)}
/* صفوف القائمة داخل البوابة: رحلاتك القادمة، أو مدن الرحلة ودولها. */
.gatelist{text-align:start;margin:2px 0 4px;max-height:46vh;overflow-y:auto}
.gatelist h4{display:flex;align-items:center;gap:6px;
font-size:13px;font-weight:800;color:var(--brand);margin:10px 0 6px}
.gatelist h4:first-child{margin-top:0}
.gatelist .addhead{margin:14px 0 6px}
.gatelist .grow{display:flex;align-items:center;gap:8px;width:100%;text-align:start;
padding:10px 12px;margin-bottom:6px;background:var(--card);
border:1px solid var(--line);border-radius:14px}
.gatelist button.grow{cursor:pointer}
.gatelist .grow .t{font-weight:700;font-size:14.5px}
.gatelist .grow .d{margin-inline-start:auto;font-size:12px;color:var(--muted)}
.gatelist .x{margin-inline-start:auto;color:var(--hot);font-size:15px;
width:30px;height:30px;border-radius:50%;flex:0 0 30px;cursor:pointer}
@media (hover:hover) and (pointer:fine){
.gatelist button.grow:hover{border-color:var(--accent)}
.gatelist .x:hover{background:rgba(177,83,49,.10)}
}
.gatelist .x:active{transform:scale(.97)}
.gateinput{width:100%;padding:10px 12px;border:1px solid var(--line);
border-radius:14px;background:var(--card);margin-top:4px}
/* «تعديل» بجوار مدن الرحلة في رأس الخطة — رابط هادئ لا زر ينافس العنوان. */
.editplaces{margin-inline-start:8px;font-weight:800;font-size:12.5px;
color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.editplaces:active{transform:scale(.97)}
/* صندوق إضافة المدينة داخل «تعديل» — القائمة تحته لا تزاحم القائمة فوقه. */
.gate .gateinput+.gatelist{margin-top:8px;max-height:30vh}
/* تبويبات اللوحة: ثلاثة أبواب في سطر، المفتوح منها بلون العلامة. */
.admintabs{display:flex;gap:8px;margin:0 0 14px;flex-wrap:wrap}
.admintabs button{padding:8px 16px;border:1px solid var(--line);background:var(--card);
color:var(--muted);border-radius:999px;cursor:pointer;font:inherit;font-weight:700;font-size:14px}
.admintabs button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.agteam{padding:12px 0;border-top:1px solid var(--line)}
.agteam:first-child{border-top:0}
.agteam>.t{font-weight:900;color:var(--deep);font-size:15.5px}
.agteam>.s{color:var(--muted);font-size:13px;margin-top:2px}
.agrow{margin:10px 0 0;padding-inline-start:12px;border-inline-start:2px solid var(--line)}
.agrow .t{font-weight:700;color:var(--deep);font-size:14px}
.agmission{color:var(--muted);font-size:13px;line-height:1.65;margin-top:2px}
/* ── داخل غلاف التطبيق: شريط واحد لا شريطان ──────────────────────────
الغلاف يضع sv-wrapper على قبل أي تحميل. رأس الويب وشريطه
العائم يختفيان — فالهوية يمسكها التطبيق، والملاحة لشريطه الأصلي
(وفيه «رحلاتك»، التوثيق الأصلي)، ولسان Web يهبط على «خطط» مباشرة. */
html.sv-wrapper .topbar{display:none}
html.sv-wrapper nav.tabs{display:none}
/* غلاف Android بلا مسار أبل أصيل — يُخفى الزر (جوجل أصيل يعمل). iOS له الآن
ملحق Sign in with Apple أصيل ومزوّد أبل مفعّل في Firebase، فالزر ظاهر. */
html.sv-android .gsign.apple{display:none}