/* I Know · css/guest.css — the guest app (everyone: visitors of the Red Sea and hotel guests): (11.5) the first start (language, signing
   in), Explore (places, events, a place's profile), Programme, My Stay (choose the hotel, connect the stay), My stuff, Account; booking,
   quiz, songs, celebrations. Large touch
   targets, readable text, words beside every icon, no sideways scrolling in the main flows. */

/* ---------- Home ---------- */
.hero{width:100%;max-height:260px;object-fit:cover;border-radius:var(--r-card);margin-bottom:.8rem}
.more-link{display:inline-block;margin-top:var(--sp-3);color:var(--primary);font-weight:var(--fw-medium)}
/* a heading with its "See all": the heading never squeezed under the link – with big text the link moves under it */
.sec-head:has(>.more-link){flex-wrap:wrap;row-gap:.2rem}
.sec-head:has(>.more-link) h2{flex:1 0 auto}
.sec-head>.more-link{margin-top:0}
.lead{font-size:1.08rem;max-width:62ch;line-height:1.6}
.g-hero .lead{margin:.2rem 0}
.g-hero .hello{margin:0 0 .3rem}
.g-hero .weather{border:0;padding:0;background:transparent;margin-top:.4rem;box-shadow:none}
.day-banner{display:flex;flex-direction:column;gap:.15rem;padding:.2rem 0 .6rem;margin-bottom:.4rem;border-bottom:1px solid var(--border)}
.day-banner small{font-size:var(--fs-small);color:var(--text-muted)}
.day-banner b{font:var(--fw-semibold) 1.5rem/1.15 var(--font-display)}
.day-banner span,.day-line span{display:inline-flex;align-items:center;gap:.35rem;color:var(--text-muted)}
.day-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;margin:.2rem 0 .6rem}
.day-line b{font:var(--fw-semibold) var(--fs-section)/1.2 var(--font-display)}

/* ---------- Programme, booking, my stay, quiz ---------- */
.q{font:var(--fw-semibold) var(--fs-section)/1.35 var(--font-display)}
.answers{display:flex;flex-direction:column;gap:.4rem}
.chips.cats{align-items:center}
.chips.cats>.ico{color:var(--primary)}
.chips.cats .chip-btn.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.book-box{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4);border-radius:var(--r-card);background:var(--primary-soft);border:1px solid color-mix(in srgb,var(--primary) 25%,transparent)}
.book-box .places{margin:0;display:flex;align-items:center;gap:.4rem;color:var(--text-muted)}
.winners ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.winners li{display:flex;align-items:center;gap:.7rem;padding:.5rem 0;border-bottom:1px solid var(--border-subtle)}
.winners li:last-child{border:0}
.winners img{width:3rem;height:3rem;border-radius:var(--r-ctl);object-fit:cover}
.winners small{display:block;color:var(--text-muted)}
.winners .tk-no{font:var(--fw-semibold) 1.1rem/1 var(--font-ui);color:var(--primary);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- 10.9 the guest's songs (YouTube's search) and celebrations ---------- */
.song-find .yt-find{flex-wrap:nowrap}
.song-find .yt-find input{flex:1;min-width:0}
.yt-res .li{display:flex;gap:.6rem;align-items:center;cursor:pointer}
.yt-res img{width:72px;height:54px;object-fit:cover;border-radius:var(--r-md);flex:none}
.yt-res .grow{display:grid;gap:.1rem;min-width:0;overflow-wrap:anywhere}
.yt-pick p{overflow-wrap:anywhere}
.yt-media{position:relative;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;background:var(--media-bg)}
.yt-media img,.yt-media iframe{width:100%;height:100%;object-fit:cover;border:0;display:block}
.yt-play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;border:0;background:color-mix(in srgb,var(--media-bg) 60%,transparent);color:var(--on-media);display:grid;place-items:center;cursor:pointer}
.yt-mini{width:48px;height:36px;object-fit:cover;border-radius:var(--r-sm);flex:none}
.chips.pick{flex-wrap:wrap;overflow:visible}
.cel-form h3{margin:var(--sp-4) 0 .35rem}
.cel-form .grid2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.cel-req{display:grid;gap:.3rem}
.cel-reply input{flex:1;min-width:0}

/* ---------- 11.2 ONE guest app for everyone: Home, Explore, My Stay, My stuff, Account ---------- */
.g-back{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;padding:0 .2rem;margin:0 0 var(--sp-2);color:var(--primary);font-weight:var(--fw-semibold);text-decoration:none}
.g-back .ico{width:1.3rem;height:1.3rem}
.g-sub{font-size:var(--fs-small);color:var(--text-muted);margin:var(--sp-3) 0 var(--sp-2)}
.g-step{font-size:1.15rem;margin:var(--sp-5) 0 var(--sp-1)}
/* big tiles: an icon and its words, two per row on a phone */
.g-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.6rem}
.g-tiles.one{grid-template-columns:1fr}
.g-tile{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;min-height:96px;padding:1rem;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-card);color:var(--text);text-decoration:none}
.g-tile>.ico{width:2.6rem;height:2.6rem;padding:.6rem;border-radius:var(--r-lg);background:var(--primary-soft);color:var(--primary);flex:none}
.g-tile b{font-weight:var(--fw-semibold);line-height:1.25}
.g-tile.wide{flex-direction:row;align-items:center;min-height:68px}
.g-tile.wide small{display:block;color:var(--text-muted);font-size:var(--fs-small);margin-top:.15rem}
.g-tile:hover,.acc-row:hover,.x-cat:hover,.tk-seller:hover{border-color:var(--border-strong)}
/* a call to act: the whole card is the button */
.g-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.85rem;margin:var(--sp-4) 0;text-decoration:none;color:var(--text)}
.g-cta>.grow{flex:1 1 0;min-width:0}
.g-cta>.btn{flex:1 1 100%}
.g-cta>.ico{width:2.6rem;height:2.6rem;padding:.6rem;border-radius:50%;background:var(--accent-soft);color:var(--text);flex:none}
.g-cta b{display:block;font:var(--fw-semibold) var(--fs-section)/1.25 var(--font-display)}
.g-cta small{display:block;color:var(--text-muted);margin-top:.2rem;line-height:1.4}
.g-wait{display:flex;align-items:center;gap:.8rem;margin:var(--sp-4) 0;text-decoration:none;color:var(--warning-text);background:var(--warning-soft);border-color:color-mix(in srgb,var(--warning) 35%,transparent)}
.g-wait b{display:block;font-size:1.05rem}
.g-wait small{display:block;color:var(--text-2)}
.g-note{display:flex;align-items:center;gap:.8rem;margin-top:var(--sp-5);text-decoration:none;color:var(--text)}
.g-note small{display:block;color:var(--text-muted)}
/* the hotel and signing in */
.g-signin h2{display:flex;align-items:center;gap:.5rem}
.g-steps-mini{display:flex;gap:.4rem;list-style:none;margin:var(--sp-3) 0;padding:0;counter-reset:st}
.g-steps-mini li{flex:1;counter-increment:st;font-size:var(--fs-small);color:var(--text-muted);border-top:3px solid var(--border);padding-top:.35rem}
.g-steps-mini li::before{content:counter(st) " · "}
.g-steps-mini li.now{border-color:var(--primary);color:var(--text);font-weight:var(--fw-semibold)}
.g-steps-mini li.done{border-color:var(--success);color:var(--success-text)}
.g-room-ok{align-items:center;gap:.5rem;padding:.5rem 0;border-bottom:1px solid var(--border-subtle);margin-bottom:var(--sp-3)}
.stay-room{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:4.5rem;padding:.4rem .6rem;border-radius:var(--r-lg);background:var(--primary-soft);color:var(--primary)}
.stay-room small{font-size:var(--fs-helper)}
.stay-room b{font:var(--fw-bold) 1.4rem/1.1 var(--font-ui)}
.stay-progress{--p:0%;display:flex;justify-content:space-between;gap:.5rem;margin:.8rem 0 0;font-size:var(--fs-small);color:var(--text-muted);position:relative;padding-bottom:.7rem}
.stay-progress i{position:absolute;left:0;right:0;bottom:0;height:6px;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--primary) var(--p),var(--bg-muted) var(--p))}
/* My stuff: four big tabs (two rows on a small phone, never sideways) */
.g-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;margin:0 0 var(--sp-4)}
.g-seg a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;min-height:64px;padding:.4rem .2rem;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-surface);color:var(--text-2);text-decoration:none;font-weight:var(--fw-medium);font-size:var(--fs-small);text-align:center}
.g-seg a.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.g-seg .badge{position:absolute;top:.3rem;inset-inline-end:.4rem}
.g-past{margin-top:var(--sp-4)}
.g-past summary{min-height:44px;display:flex;align-items:center;color:var(--text-muted);cursor:pointer}
.g-ask{color:var(--warning-text)}
/* Account: big rows */
.acc-rows{padding:0;overflow:hidden}
.acc-row{display:flex;align-items:center;gap:.85rem;width:100%;min-height:60px;padding:.7rem 1rem;background:var(--bg-surface);border:0;border-bottom:1px solid var(--border-subtle);color:var(--text);font:inherit;text-align:start;text-decoration:none;cursor:pointer}
.acc-rows .acc-row:last-child{border-bottom:0}
.acc-row>.ico{width:1.4rem;height:1.4rem;color:var(--primary);flex:none}
.acc-row small{display:block;color:var(--text-muted);font-size:var(--fs-small);margin-top:.1rem}
div.acc-row{cursor:default}
/* (11.6) Light / Dark / System: the one appearance choice a guest or an entertainer has */
.acc-scheme{flex-wrap:wrap}
.acc-scheme>.grow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem .8rem}
.scheme-seg{flex:0 1 auto}
.scheme-seg button{min-height:44px;padding:0 1rem}
/* confirming and done */
.g-confirm{display:flex;flex-direction:column;gap:.5rem;margin:var(--sp-4) 0}
.g-done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem}
.g-done>.ico{width:3.2rem;height:3.2rem;color:var(--success)}
.g-done h2{font-size:1.35rem;margin:0}
.g-done .tk-req{width:100%;text-align:start}
.tk-done-seller{display:flex;flex-direction:column;align-items:center;gap:.4rem;margin:.2rem 0}
.tk-done-seller b{font:var(--fw-semibold) 1.5rem/1.2 var(--font-display)}

/* ---------- 11.2 Explore the Red Sea ---------- */
.x-hero{padding:var(--sp-5);border-radius:var(--r-xl);background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 55%,var(--accent)));color:var(--on-primary);margin-bottom:var(--sp-4)}
.x-hero h2{color:inherit;font-size:1.65rem;margin:.15rem 0 .35rem}
.x-hero p{margin:0 0 var(--sp-4);opacity:.92;line-height:1.5}
.x-hero .x-kicker{color:inherit;opacity:.85}
.x-kicker{margin:0;font-size:var(--fs-small);font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.x-search{display:flex;gap:.5rem;margin:0}
.x-search .search-in{flex:1;min-width:0}
.x-search .btn{flex:none}
.search-in.big{min-height:52px;border-radius:var(--r-lg)}
.search-in.big input{min-height:50px;font-size:1.05rem}
.x-where{margin-bottom:var(--sp-4)}
.x-where-row{display:grid;grid-template-columns:1fr auto;gap:.5rem;margin:.4rem 0 var(--sp-4)}
.x-area-btn,.x-near-btn{font-weight:var(--fw-semibold);display:flex;align-items:center;gap:.6rem;min-height:56px;padding:.5rem .85rem;border:1px solid var(--border-strong);border-radius:var(--r-lg);background:var(--bg-surface);color:var(--text);font:inherit;text-align:start;text-decoration:none;cursor:pointer}
.x-area-btn small{display:block;color:var(--text-muted);font-size:var(--fs-helper)}
.x-area-btn b{font-size:1.05rem}
.x-area-btn>.ico,.x-near-btn>.ico{color:var(--primary);flex:none}
.x-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem;margin:0 0 var(--sp-2)}
.x-quick a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;min-height:76px;padding:.5rem .25rem;border-radius:var(--r-lg);background:var(--bg-surface);border:1px solid var(--border);color:var(--text);text-decoration:none;font-size:var(--fs-small);font-weight:var(--fw-medium);text-align:center;line-height:1.2}
.x-quick a .ico{width:1.5rem;height:1.5rem;color:var(--primary)}
.x-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.55rem}
.x-cat{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;min-height:92px;padding:.85rem;border-radius:var(--r-card);background:var(--bg-surface);border:1px solid var(--border);box-shadow:var(--shadow-card);color:var(--text);text-decoration:none}
.x-cat .ico{width:1.7rem;height:1.7rem;color:var(--primary)}
.x-cat b{line-height:1.2}
.x-cat small{color:var(--text-muted);font-size:var(--fs-helper)}
/* THE card of a place / an event: photo, name, what it is and where, open now, rating, distance – and Save */
.x-list{display:flex;flex-direction:column;gap:.6rem}
.x-card{position:relative;display:flex;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-card);overflow:hidden}
.x-card-main{display:flex;flex:1;min-width:0;gap:.85rem;padding:.6rem;padding-inline-end:4.2rem;color:var(--text);text-decoration:none}
.x-img{flex:none;width:96px;height:96px;border-radius:var(--r-img,var(--r-lg));overflow:hidden;background:var(--bg-muted);display:grid;place-items:center;color:var(--text-muted)}
.x-img img{width:100%;height:100%;object-fit:cover;display:block;filter:var(--img-filter,none)}
.x-img>.ico{width:2rem;height:2rem}
.x-date{display:flex;flex-direction:column;align-items:center;line-height:1;color:var(--primary)}
.x-date b{font:var(--fw-bold) 1.9rem/1 var(--font-ui)}
.x-date small{text-transform:uppercase;font-weight:var(--fw-semibold);margin-top:.2rem}
.x-body{display:flex;flex-direction:column;gap:.2rem;min-width:0;padding:.15rem 0}
.x-body b{font-size:1.05rem;line-height:1.25}
.x-body small{color:var(--text-muted);font-size:var(--fs-small)}
.x-facts{display:flex;flex-wrap:wrap;gap:.25rem .75rem;margin-top:.15rem;font-size:var(--fs-small);color:var(--text-2)}
.x-facts>span{display:inline-flex;align-items:center;gap:.25rem}
.x-facts .ico{width:.95rem;height:.95rem}
.x-facts.big{font-size:var(--fs-body);gap:.4rem 1rem;margin:.3rem 0 .8rem}
.x-rate{font-weight:var(--fw-semibold);color:var(--text)}
.x-rate .ico{color:var(--accent)}
.x-rate small{font-weight:var(--fw-regular);color:var(--text-muted)}
.x-open::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:currentColor;flex:none}
.x-open.on{color:var(--success-text);font-weight:var(--fw-semibold)}
.x-open.off{color:var(--text-muted)}
.x-heart{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;min-width:56px;min-height:56px;padding:.3rem;border:0;border-radius:var(--r-lg);background:transparent;color:var(--text-muted);font:var(--fw-medium) var(--fs-helper)/1.1 var(--font-ui);cursor:pointer}
.x-card>.x-heart{position:absolute;top:.4rem;inset-inline-end:.3rem}
.x-heart .ico{width:1.5rem;height:1.5rem}
.x-heart.on{color:var(--danger)}
.x-heart.on .ico{fill:currentColor}
/* filters: one button, the chosen ones as removable chips (they wrap – never sideways) */
.x-filterbar{display:flex;flex-wrap:wrap;gap:.5rem;margin:var(--sp-3) 0 .4rem}
.x-filterbar .btn{min-height:48px}
.x-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.3rem 0}
.x-chips .chip-btn{min-height:40px}
.x-filter-form{display:flex;flex-direction:column;gap:.7rem}
.x-switch{display:flex;align-items:center;gap:.7rem;min-height:52px;padding:.4rem .8rem;border:1px solid var(--border);border-radius:var(--r-lg);cursor:pointer}
.x-switch input{width:1.4rem;height:1.4rem;min-height:0;flex:none;margin:0}
.x-area-list{display:flex;flex-direction:column;gap:.45rem}
.x-area-it{display:flex;align-items:center;gap:.75rem;min-height:56px;padding:.5rem .85rem;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-surface);color:var(--text);font:inherit;text-align:start;cursor:pointer}
.x-area-it small{display:block;color:var(--text-muted);font-size:var(--fs-small)}
.x-area-it.on{border-color:var(--primary);background:var(--primary-soft)}
.x-area-it .ico{color:var(--primary);flex:none}
.x-when{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 var(--sp-3)}
.x-when .chip-btn{min-height:44px;font-size:var(--fs-body)}
.x-when label.chip-btn{gap:.4rem;padding-inline:.6rem}
.x-when input[type=date]{border:0;background:transparent;min-height:0;padding:0;width:auto;box-shadow:none}
.x-area-line{display:flex;align-items:center;gap:.4rem;color:var(--text-2);margin:0 0 var(--sp-3)}
/* a place's / an event's profile */
.x-gallery{display:grid;gap:.35rem;margin:0 0 var(--sp-3);border-radius:calc(var(--r-img,12px) + 4px);overflow:hidden}
.x-gallery img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;background:var(--bg-muted);filter:var(--img-filter,none)}
.x-gallery.n1 img{aspect-ratio:16/10}
.x-gallery.n2{grid-template-columns:2fr 1fr}
.x-gallery.n2 img{aspect-ratio:4/3}
.x-gallery.n3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
.x-gallery.n3 img:first-child{grid-row:span 2;aspect-ratio:auto;min-height:220px}
.x-gallery.n3 img:not(:first-child){aspect-ratio:4/3}
.x-gallery.n3 img:nth-child(n+4){display:none}
.x-head{margin-bottom:var(--sp-3)}
.x-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem;margin:0 0 .3rem;color:var(--text-2)}
.x-meta .ico{color:var(--primary)}
.x-actions{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.25rem,1fr));gap:.45rem}
.x-act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;min-height:68px;padding:.45rem .3rem;border:1px solid var(--border-strong);border-radius:var(--r-lg);background:var(--bg-surface);color:var(--text);font:var(--fw-medium) var(--fs-small)/1.15 var(--font-ui);text-decoration:none;cursor:pointer;text-align:center}
.x-act .ico{width:1.5rem;height:1.5rem;color:var(--primary)}
.x-actions .x-heart{min-height:68px;border:1px solid var(--border-strong);background:var(--bg-surface);color:var(--text);font-size:var(--fs-small)}
.x-actions .x-heart .ico{color:var(--danger)}
.x-tip{margin:0 0 var(--sp-3);background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 30%,transparent);color:var(--text)}
.x-tip p{margin:.2rem 0 0}
.x-details{display:flex;flex-direction:column;margin:var(--sp-3) 0}
.x-row{display:flex;align-items:flex-start;gap:.8rem;padding:.65rem 0;border-bottom:1px solid var(--border-subtle)}
.x-row:last-of-type{border-bottom:0}
.x-row>.ico{color:var(--primary);margin-top:.15rem;flex:none}
.x-row small{display:block;color:var(--text-muted);font-size:var(--fs-small)}
.x-row b{font-weight:var(--fw-medium);overflow-wrap:anywhere}
.x-tags{display:flex;flex-wrap:wrap;gap:.35rem;padding-top:.6rem}
.x-tags .chip{text-decoration:none;font-size:var(--fs-small);padding:.25rem .7rem;background:var(--bg-muted);color:var(--text-2)}
.x-hours{width:100%;border-collapse:collapse}
.x-hours th{padding:.5rem .2rem;border-bottom:1px solid var(--border-subtle);text-align:start;font-weight:var(--fw-regular)}
.x-hours td{padding:.5rem .2rem;border-bottom:1px solid var(--border-subtle);text-align:end;font-variant-numeric:tabular-nums}
.x-hours tr.on th,.x-hours tr.on td{font-weight:var(--fw-semibold);color:var(--primary)}
.x-cta{margin-top:0}
/* ---------- 11.3 ONE account: the welcome (Apple, Google, the phone), the Account page, staff activation ---------- */
.wl{display:flex;flex-direction:column;gap:var(--sp-4);padding-top:var(--sp-4)}
.wl-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.4rem}
.wl-head>.ico{width:3rem;height:3rem;padding:.7rem;border-radius:50%;background:var(--primary-soft);color:var(--primary)}
.wl-head h2{font-size:1.6rem;margin:0}
.wl-head p{margin:0;color:var(--text-2);line-height:1.5;max-width:28rem}
.wl-ways{display:flex;flex-direction:column;gap:.6rem}
.wl-way{justify-content:center;font-weight:var(--fw-semibold)}
.wl-apple{background:#000;border-color:#000;color:#fff}
.wl-apple:hover{background:#1d1d1f;border-color:#1d1d1f;color:#fff}
.wl-google{background:#fff;border:1px solid #747775;color:#1f1f1f}
.wl-google:hover{background:#f2f2f2;color:#1f1f1f}
.wl-form{display:flex;flex-direction:column;gap:.7rem}
.wl-form p{margin:0}
.wl-links{display:flex;justify-content:center;flex-wrap:wrap;gap:.3rem .6rem;margin:0;color:var(--text-muted)}
.wl-links.col{flex-direction:column;align-items:center;gap:.6rem}
.wl-links a,.wl-links .link-btn{min-height:44px;display:inline-flex;align-items:center}
/* (11.3) e-mail: Sign in · Create account (two halves), the form's title, "Show password", Check your e-mail */
.wl-seg{display:flex;width:100%}
.wl-seg a{flex:1 1 0;display:flex;align-items:center;justify-content:center;min-height:calc(var(--control-h) - 4px);border-radius:calc(var(--r-ctl) - 2px);text-decoration:none;color:var(--text-2);font-weight:var(--fw-semibold)}
.wl-seg a.on{background:var(--bg-surface);color:var(--text);box-shadow:var(--shadow-1),0 0 0 1px var(--border)}
.wl-form h2{font-size:1.3rem;margin:0}
.wl-show{align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;min-height:40px;color:var(--text-2)}
.wl-check{align-items:center;text-align:center}
.wl-check>.ico{width:3rem;height:3rem;padding:.7rem;border-radius:50%;background:var(--primary-soft);color:var(--primary)}
.acc-me{display:flex;align-items:center;gap:.85rem}
.acc-me small{display:block;color:var(--text-muted);font-size:var(--fs-small);overflow-wrap:anywhere}
.acc-me b{font-size:1.1rem}
.acc-empty{display:flex;flex-direction:column;gap:.5rem}
.acc-empty p{margin:0}
.acc-staff{display:flex;align-items:center;gap:.8rem;margin-bottom:.6rem}
.acc-staff small{display:block;color:var(--text-muted)}
.acc-staff small.bad{color:var(--danger-text);font-weight:var(--fw-medium)}
.act-form{display:flex;flex-direction:column;gap:.4rem}
.act-form [name=code]{font:var(--fw-semibold) 1.35rem/1.2 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase}
.g-acct-line{display:flex;align-items:center;gap:.4rem;margin:.2rem 0 .6rem;color:var(--text-2);font-size:var(--fs-small)}


/* ---------- (11.4) one activity: the picture with its status, the facts in big rows, one clear action ---------- */
.gi-cover{position:relative;border-radius:var(--r-img,var(--r-card));overflow:hidden;margin-bottom:var(--sp-3);background:var(--neutral-soft)}
.gi-cover .gi-hero{display:block;width:100%;height:clamp(190px,42vw,340px);object-fit:cover;border-radius:0;margin:0;cursor:zoom-in;filter:var(--img-filter,none)}
.gi-cover .cover-ph.gi-hero{display:flex;cursor:default}
.gi-cover .cover-ph.gi-hero .ico{width:4.5rem;height:4.5rem}
.gi-status{position:absolute;inset-inline-start:var(--sp-3);bottom:var(--sp-3)}
.gi-status .ps{font-size:var(--fs-body,1rem);padding:.35rem .85rem;box-shadow:0 2px 8px rgb(0 0 0 / .25)}
.gi-status .ps-done,.gi-status .ps-future,.gi-status .ps-soon{background:var(--bg-surface);color:var(--text);border-color:var(--border)}
.gi-cover.ps-done .gi-hero{filter:grayscale(.55)}
.gi-thumbs{display:flex;gap:var(--sp-2);overflow-x:auto;margin:0 0 var(--sp-3);padding-bottom:.2rem;scroll-snap-type:x mandatory}
.gi-thumbs img,.gi-thumbs .cover-ph{flex:none;width:96px;height:72px;min-height:0;object-fit:cover;border-radius:var(--r-img,8px);filter:var(--img-filter,none);cursor:zoom-in;scroll-snap-align:start}
.gi-thumbs .cover-ph .ico{width:1.6rem;height:1.6rem}
.gi-type{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin:0 0 var(--sp-3)}
.gi-facts{display:grid;gap:var(--sp-2);margin:0 0 var(--sp-4)}
.gi-facts>div{display:grid;grid-template-columns:1.6rem minmax(0,1fr);grid-template-areas:"i t" "i d";column-gap:var(--sp-3);align-items:center;padding:.55rem .75rem;border-radius:var(--r-sm,8px);background:var(--neutral-soft)}
.gi-facts .ico{grid-area:i;width:1.35rem;height:1.35rem;color:var(--primary)}
.gi-facts dt{grid-area:t;font-size:var(--fs-helper);color:var(--text-muted);margin:0}
.gi-facts dd{grid-area:d;margin:0;font-weight:var(--fw-semibold);font-size:1.05rem;font-variant-numeric:tabular-nums}
.gi-live{display:flex;align-items:center;gap:.5rem;padding:.6rem .8rem;border-radius:var(--r-sm,8px);background:color-mix(in srgb,var(--accent) 14%,var(--bg-surface));font-weight:var(--fw-semibold)}
.gi-over{padding:.6rem .8rem;border-radius:var(--r-sm,8px);background:var(--neutral-soft);color:var(--text-2)}
.gi-actions{flex-direction:column;align-items:stretch}
.gi-actions .book-box{min-width:0;box-sizing:border-box;width:100%}
.gi-actions .stepper{flex-wrap:wrap;min-width:0}
.gi-actions .btn{min-height:52px;font-size:1.05rem}
.gi-actions .btn[disabled]{opacity:1;background:var(--neutral-soft);color:var(--text-2);border-color:var(--border);cursor:not-allowed}
.gi-info ul{margin:0;padding-inline-start:1.2rem;display:flex;flex-direction:column;gap:.45rem}
.gi-info li{line-height:1.45}
/* ---------- (11.4) songs: search inside the app, Select, When?, a note for the DJ ---------- */
.yt-find{display:flex;gap:var(--sp-2)}
.yt-find input{flex:1;min-width:0;min-height:52px;font-size:1.05rem}
.yt-res{margin-top:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2)}
.yt-res .yt-row{display:grid;grid-template-columns:112px minmax(0,1fr);gap:var(--sp-2) var(--sp-3);align-items:start;padding:.75rem}
.yt-res .yt-row img,.yt-res .yt-row .cover-ph{width:112px;height:63px;min-height:0;object-fit:cover;border-radius:6px}
.yt-res .yt-row .cover-ph .ico{width:1.5rem;height:1.5rem}
.yt-res .yt-row .grow{min-width:0;display:flex;flex-direction:column;gap:.1rem}
.yt-res .yt-row b{overflow-wrap:anywhere;line-height:1.3}
.yt-res .yt-row small{color:var(--text-muted)}
.yt-res .yt-row .yt-len{display:inline-flex;align-items:center;gap:.25rem}
.yt-res .yt-row .btn{grid-column:1/-1;min-height:48px;width:100%;font-size:1.05rem}
.yt-pick-t{display:flex;flex-direction:column;gap:.15rem;margin:var(--sp-3) 0}
.yt-pick-t small{color:var(--text-muted)}
.song-when{border:0;padding:0;margin:var(--sp-2) 0 var(--sp-4);min-width:0}
.song-when legend{font-weight:var(--fw-semibold);font-size:1.05rem;padding:0;margin-bottom:var(--sp-2)}
.song-when .chips.big{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.song-when .chips.big .chip-btn{min-height:48px;font-size:1rem;padding:.35rem 1rem;white-space:normal;text-align:start;max-width:100%;line-height:1.25}
.song-when .chip-btn.on{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.song-other{margin:var(--sp-3) 0 0;text-align:center}
.actions.col{flex-direction:column;align-items:stretch}
/* ---------- (11.4) notifications on the phone: the explanation card ---------- */
.push-card{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);border-inline-start:4px solid var(--primary)}
.push-card>.ico{width:1.8rem;height:1.8rem;color:var(--primary);flex:none}
.push-card .grow{display:flex;flex-direction:column;gap:.2rem;min-width:12rem}
.push-card .actions{width:100%;margin:0}
.push-card .actions .btn.lg{flex:1}
.push-card.on{border-inline-start-color:var(--success)}
.push-card.on>.ico{color:var(--success)}
.push-card.off{border-inline-start-color:var(--warning)}
.push-prefs{border:1px solid var(--border);margin-top:var(--sp-3)}
.push-prefs legend{font-weight:var(--fw-semibold);padding:0 .3rem}
/* the e-mail check page: the address on its own line */
.wl-addr{font-weight:var(--fw-semibold);font-size:1.1rem;overflow-wrap:anywhere;padding:.5rem .75rem;border-radius:var(--r-sm,8px);background:var(--neutral-soft);margin:.2rem 0 .6rem}
.wl-check .btn{margin-top:var(--sp-2)}
/* Staff access (only through the hidden way) */
.se{display:flex;flex-direction:column;gap:var(--sp-3);text-align:center;align-items:center}
.se .se-ico{width:2.6rem;height:2.6rem;color:var(--primary)}
.se-ways{display:flex;flex-direction:column;gap:var(--sp-2);width:100%}

/* ---------- (11.5) THE FIRST START: one calm screen each – the language, signing in – no bars around them ---------- */
body.onboard #top,body.onboard #tabbar,body.onboard #ctx{display:none!important}
body.onboard #view{padding:0!important}
.bare-page{max-width:520px;margin-inline:auto}
.ob{min-height:100dvh;display:flex;flex-direction:column;gap:var(--sp-4);padding:max(var(--sp-6),env(safe-area-inset-top)) var(--sp-5) var(--sp-8);position:relative;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 18%,var(--bg-app)) 0,var(--bg-app) 42%)}
.ob h1{font:var(--fw-semibold) clamp(1.6rem,6vw,2rem)/1.2 var(--font-display);text-align:center;margin:var(--sp-2) 0 0}
.ob-sub{text-align:center;color:var(--text-muted);margin:-.4rem 0 var(--sp-2);font-size:1.05rem}
/* (12.2) THE FIRST-START SCREENS' PICTURE (the language, signing in, creating an account): Egypt, sharp – the start screen's last
   picture (the I Know loader's phone composition, 1080 px wide), so the app begins inside the same scene. Never shown more than 1.5× its
   own pixels (--art-max per screen density); the loader's night blue fills what is left; readability from a gradient (dark at the top for
   the status bar and the name, the page's own colour below), never from blur. Tall screens: across the top. Wide screens (tablet landscape, laptop, desktop, phone landscape): a panel
   beside the form, the form in the middle of the rest. */
:root{--art-max:1620px}
@media (min-resolution:1.5dppx){:root{--art-max:1080px}}
@media (min-resolution:2dppx){:root{--art-max:810px}}
@media (min-resolution:3dppx){:root{--art-max:540px}}
.ob.has-art{background:var(--bg-app);isolation:isolate}
.ob.has-art>:not(.ob-art):not(.ob-lang-btn){position:relative;z-index:1}
.ob.has-art>.ob-lang-btn{z-index:2}
.ob .ob-art{position:absolute;z-index:0;inset:0 0 auto;height:min(60vh,620px);overflow:hidden;pointer-events:none;
  background:#061824;animation:ob-art-in .7s ease-out both}
.ob .ob-art img{display:block;height:100%;width:min(100%,var(--art-max));margin-inline:auto;object-fit:cover;object-position:50% 5%}
/* (where a wide screen shows it narrower than the band: its sides fade into the night blue) */
@media (min-width:541px){.ob .ob-art img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}}
.ob .ob-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,24,34,.58) 0,rgba(6,24,34,.2) 24%,rgba(6,24,34,0) 42%,color-mix(in srgb,var(--bg-app) 55%,transparent) 76%,var(--bg-app) 100%)}
.ob.has-art>.ob-brand,.ob.has-art>h1,.ob.has-art>.ob-sub{color:#FBF4E8;text-shadow:0 1px 3px rgba(0,0,0,.5),0 2px 18px rgba(0,0,0,.35)}
.ob.has-art>.ob-brand small,.ob.has-art>.ob-sub{color:rgba(251,244,232,.88)}
@keyframes ob-art-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.ob .ob-art{animation:none}}
@media (orientation:landscape) and (min-width:640px){
  body.onboard .bare-page:has(.ob.has-art){max-width:none}
  .ob.has-art{--art-w:min(50vw,75vh,var(--art-max));--col:min(480px,100vw - var(--art-w) - 2 * var(--sp-6));
    padding-inline:calc(var(--art-w) + (100vw - var(--art-w) - var(--col)) / 2) calc((100vw - var(--art-w) - var(--col)) / 2)}
  .ob .ob-art{position:fixed;inset:0 auto 0 0;width:var(--art-w);height:auto;background:#061824}
  [dir=rtl] .ob .ob-art{inset:0 0 0 auto}
  .ob .ob-art img{width:100%;object-position:50% 26%;-webkit-mask-image:none;mask-image:none}
  .ob .ob-art::after{background:linear-gradient(90deg,rgba(6,24,34,0) 78%,rgba(6,24,34,.22) 100%)}
  [dir=rtl] .ob .ob-art::after{background:linear-gradient(270deg,rgba(6,24,34,0) 78%,rgba(6,24,34,.22) 100%)}
  .ob.has-art>.ob-brand,.ob.has-art>h1,.ob.has-art>.ob-sub{color:inherit;text-shadow:none}
  .ob.has-art>.ob-brand small,.ob.has-art>.ob-sub{color:var(--text-muted)}
}
.ob-brand{display:flex;flex-direction:column;align-items:center;gap:.25rem;text-align:center;margin-top:var(--sp-6)}
.ob-brand img{max-height:72px;max-width:180px;object-fit:contain}
/* The original transparent gold I: taller than hotel logos, proportional on every screen. */
.ob-brand img.ob-official-symbol{display:block;width:auto;height:92px;max-height:92px;max-width:52px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.20))}
@media (max-height:560px) and (orientation:landscape){.ob-brand img.ob-official-symbol{height:64px;max-height:64px;max-width:40px}}
.ob-mark{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:var(--on-primary)}
.ob-mark .ico{width:2.4rem;height:2.4rem}
.ob-brand b{font:var(--fw-semibold) 1.75rem/1.15 var(--font-display);letter-spacing:.01em}
.ob-brand small{color:var(--text-muted);font-size:1rem}
.ob-langs{display:flex;flex-direction:column;gap:var(--sp-2)}
.ob-lang{display:flex;align-items:center;gap:var(--sp-3);min-height:58px;padding:0 var(--sp-4);border:1px solid var(--border);border-radius:var(--r-card);background:var(--bg-surface);
  color:var(--text);font:inherit;font-size:1.1rem;cursor:pointer;text-align:start;box-shadow:0 1px 2px rgb(0 0 0 / .04)}
.ob-lang b{flex:1;font-weight:var(--fw-semibold)}
.ob-lang .flag{font-size:1.5rem;line-height:1;width:1.8rem;text-align:center}
.ob-lang .ico{width:1.2rem;height:1.2rem;color:var(--text-muted)}
.ob-lang.on{border:2px solid var(--primary);background:color-mix(in srgb,var(--primary) 7%,var(--bg-surface))}
.ob-lang.on .ico{color:var(--primary)}
.ob-go{position:sticky;bottom:var(--sp-4);box-shadow:0 6px 18px color-mix(in srgb,var(--primary) 30%,transparent)}
.ob-lang-btn{position:absolute;top:max(var(--sp-4),env(safe-area-inset-top));inset-inline-end:var(--sp-4);display:inline-flex;align-items:center;gap:.35rem;min-height:44px;padding:0 .9rem;
  border:1px solid var(--border);border-radius:var(--r-pill);background:var(--bg-surface);color:var(--text);font:inherit;cursor:pointer}
.ob-lang-btn .ico{width:1.1rem;height:1.1rem}
.ob .wl-form{display:flex;flex-direction:column;gap:var(--sp-2);background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-card);padding:var(--sp-5)}
.ob .wl-form input{min-height:52px;font-size:1.05rem}
.ob .btn.lg{min-height:54px;font-size:1.08rem}
.wl-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem}
.wl-row a{color:var(--primary);font-weight:var(--fw-medium)}
.wl-forgot{text-align:center}
.wl-forgot a{display:inline-flex;align-items:center;min-height:44px;color:var(--primary);font-weight:var(--fw-medium)}
.wl-explore{justify-content:space-between;font-weight:var(--fw-semibold)}
.wl-explore span{flex:1;text-align:start}
.ob-or{display:flex;align-items:center;gap:var(--sp-3);color:var(--text-muted)}
.ob-or::before,.ob-or::after{content:"";flex:1;height:1px;background:var(--border)}
.ob .wl-ways{display:flex;flex-direction:column;gap:var(--sp-2)}
.ob .wl-check{display:flex;flex-direction:column;gap:var(--sp-2);align-items:stretch;text-align:center}
.ob .wl-check>.ico{width:3rem;height:3rem;align-self:center;color:var(--primary)}
/* ---------- (12.1) the hotel-stay message on Explore: a message that can be closed, not a fixture ---------- */
.x-stay-ask{position:relative;display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-4) var(--sp-4) var(--sp-4);padding-inline-end:3rem;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,var(--bg-surface)),var(--bg-surface) 70%);overflow:hidden;
  transition:height .3s cubic-bezier(.4,0,.2,1),opacity .25s ease,margin .3s ease,padding .3s ease}
.x-stay-ask.out{opacity:0;margin-block:0;padding-block:0;border-width:0}
.x-stay-ask .x-stay-ic{flex:none;width:2.6rem;height:2.6rem;padding:.6rem;border-radius:50%;background:var(--accent-soft);color:var(--primary)}
.x-stay-ask h2{font:var(--fw-semibold) 1.15rem/1.3 var(--font-display);margin:0 0 .25rem}
.x-stay-ask p{margin:0 0 var(--sp-3);color:var(--text-2);line-height:1.45}
.x-stay-acts{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.x-stay-x{position:absolute;top:.35rem;inset-inline-end:.35rem}
@media (prefers-reduced-motion: reduce){.x-stay-ask{transition:none}}
/* ---------- (11.5) Choose your hotel – picture cards; Connect your stay; "Your stay is connected!" ---------- */
.hotel-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--sp-4);margin:var(--sp-3) 0 var(--sp-5)}
.hotel-card2{display:flex;flex-direction:column;padding:0;border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;background:var(--bg-surface);color:var(--text);font:inherit;cursor:pointer;text-align:start;box-shadow:0 2px 10px rgb(0 0 0 / .06)}
.hotel-card2:hover{border-color:var(--border-strong)}
.hotel-card2 .hc-pic{width:100%;height:150px;object-fit:cover;min-height:0;border-radius:0;filter:var(--img-filter,none)}
.hc-line{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);min-height:64px}
.hc-line b{display:block;font:var(--fw-semibold) 1.2rem/1.25 var(--font-display)}
.hc-line small{display:flex;align-items:center;gap:.25rem;color:var(--text-muted);margin-top:.15rem}
.hc-line small .ico{width:.95em;height:.95em}
.hc-line>.ico{width:1.4rem;height:1.4rem;color:var(--text-muted)}
.hotel-ph{--tc:var(--accent)}
.hotel-ph img{max-width:60%;max-height:60%;object-fit:contain}
.g-hotel2{display:flex;align-items:center;gap:var(--sp-3);margin:0 0 var(--sp-4)}
.g-hotel2 .gh-pic{width:72px;height:72px;min-height:0;border-radius:var(--r-card);object-fit:cover;flex:none}
.g-hotel2 .gh-pic .ico{width:2rem;height:2rem}
.g-hotel2 small{display:flex;align-items:center;gap:.25rem;color:var(--text-muted)}
.g-hotel2 b{display:block;font:var(--fw-semibold) 1.35rem/1.2 var(--font-display)}
.g-connect{display:flex;flex-direction:column;gap:var(--sp-2)}
.g-connect input[name=room]{min-height:56px;font-size:1.35rem;font-weight:var(--fw-semibold);letter-spacing:.04em}
.g-connect input[name=room]::placeholder{font-weight:var(--fw-regular,400);opacity:.45}
.g-connect .btn.lg{min-height:54px;font-size:1.08rem;margin-top:var(--sp-2)}
.g-ok{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--sp-3);padding:var(--sp-8) var(--sp-5);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 20%,var(--bg-app)) 0,var(--bg-app) 60%)}
.g-ok-ic{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:var(--success);color:#fff;box-shadow:0 8px 24px color-mix(in srgb,var(--success) 35%,transparent)}
.g-ok-ic .ico{width:3rem;height:3rem;stroke-width:2.6}
.g-ok h1{font:var(--fw-semibold) 1.75rem/1.2 var(--font-display);margin:var(--sp-3) 0 0}
.g-ok p{font-size:1.15rem;margin:0 0 var(--sp-5)}
.g-ok p b{display:block;font:var(--fw-semibold) 1.4rem/1.3 var(--font-display)}
.g-ok .btn{max-width:420px}
.stay-card2 .gi-facts{margin-bottom:var(--sp-3)}
.g-locked{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-3);padding:var(--sp-6) var(--sp-5)}
.g-locked .gl-ic{width:3.4rem;height:3.4rem;padding:.75rem;border-radius:50%;background:var(--accent-soft);color:var(--primary)}
.g-locked h2{font:var(--fw-semibold) 1.35rem/1.25 var(--font-display);margin:0}
/* ---------- (11.5) the Programme: the type chips, the cards (a small picture, Start – End, the name, type and place, the status) ---------- */
.g-types{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:.2rem}
.g-types .chip-btn{min-height:44px;font-size:.98rem;flex:none}
.g-types .chip-btn .ico{width:1.05em;height:1.05em}
.g-types .chip-btn.on{background:var(--secondary);border-color:var(--secondary);color:var(--on-secondary)}
/* ---------- (11.5) Account ---------- */
.acc-stay{display:flex;align-items:center;gap:var(--sp-3);text-decoration:none;color:var(--text)}
.acc-stay b{font:var(--fw-semibold) 1.2rem/1.25 var(--font-display)}
.acc-stay-facts{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);margin-top:.4rem}
.acc-stay-facts span{display:flex;flex-direction:column}
.acc-stay-facts small{color:var(--text-muted)}
.acc-stay-facts b{font:var(--fw-semibold) 1.05rem/1.2 var(--font-ui)}
.acc-push{margin-top:var(--sp-3)}
.acc-push h3{display:flex;align-items:center;gap:.4rem;font-size:1rem;margin:0 0 var(--sp-2)}
.x-hotel-cta{margin-top:0}
/* a small phone (and the larger text sizes): two per row, never sideways */
@media (max-width:380px){
  .g-seg,.x-quick{grid-template-columns:repeat(2,1fr)}
  .x-where-row{grid-template-columns:1fr}
  .x-img{width:80px;height:80px}
}