/* ───────────────────────────────────────────────────────────────────── hospitality_view.css — shared styles for accommodation/activity/ restaurant detail pages. Pairs with app_includes/hospitality_view.php. All colours use Aurora design tokens defined in tratok_aurora.css. ───────────────────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;} .hv-wrap *{font-family:'DM Sans', 'Noto Naskh Arabic', 'Noto Sans Devanagari', 'Noto Sans Thai', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans',-apple-system,sans-serif;} .hv-wrap{max-width:1180px;margin:0 auto;padding:32px 20px 120px;position:relative;color:var(--ink-200);} /* NOTE: the glow used to bleed left/right:-40px past the wrap. On phones that 40px right overhang widened the layout viewport (430 → 470), so iOS zoomed out to fit and the whole content column rendered left-biased with a dead right gutter, while the fixed topbar/CTA/bottom-nav sized to the wider layout. The blur is 50px so clamping to the wrap edges is visually free. */ .hv-wrap::before{ content:'';position:absolute;top:0;left:0;right:0;height:380px; background:radial-gradient(ellipse at 30% 20%,var(--brand-soft) 0%,transparent 60%); z-index:-1;pointer-events:none;filter:blur(50px); } /* overflow-x:clip (NOT hidden — hidden makes a scroll container and would detach the sticky tab-nav/sidebar from viewport scroll) guarantees no future decorative overhang can widen the mobile layout viewport again. */ .t-app-main.hv-main{padding-top:0;overflow-x:clip;} .hv-wrap h1{font-family:'Playfair Display',Georgia,serif;font-size:2.4rem;color:var(--ink-100);margin:0 0 6px;letter-spacing:-0.018em;line-height:1.1;font-weight:700;} .hv-wrap h2{font-family:'Playfair Display',Georgia,serif;font-size:1.4rem;color:var(--ink-100);margin:0 0 16px;letter-spacing:-0.012em;font-weight:700;} .hv-sub{color:var(--ink-400);font-size:1rem;margin-bottom:18px;} .hv-crumbs{font-size:.78rem;color:var(--ink-400);margin-bottom:18px;letter-spacing:.02em;} .hv-crumbs a{color:var(--ink-400);text-decoration:none;transition:color .15s;} .hv-crumbs a:hover{color:var(--aurora-1);} .hv-crumbs .sep{margin:0 8px;opacity:.5;} .hv-help{color:var(--ink-400);font-size:.86rem;margin-bottom:14px;} .hv-empty{padding:18px;text-align:center;color:var(--ink-400);font-size:.92rem;} .hv-meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;color:var(--ink-400);font-size:.92rem;margin-bottom:18px;} .hv-meta .star{color:var(--aurora-5);display:inline-flex;align-items:center;gap:6px;font-weight:700;} .hv-meta .star i{font-size:14px;} .hv-meta .star .count{color:var(--ink-400);font-weight:500;} .hv-meta .loc{display:inline-flex;align-items:center;gap:6px;} .hv-meta .actions{margin-left:auto;display:flex;gap:8px;} .icon-btn{background:var(--glass-1);border:1px solid var(--glass-border);color:var(--ink-200);width:38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s;} .icon-btn:hover{background:var(--brand-soft);color:var(--brand);} .icon-btn.saved{color:var(--aurora-2);background:rgba(255,61,127,0.10);border-color:rgba(255,61,127,0.30);} /* The heart (.wishlist-btn) — js/tratok-wishlist.js INJECTS its own generic look (36px dark circle) as a