/* ── HERO ── */
.hero { position:relative; height:420px; overflow:hidden; display:flex; align-items:flex-end; background:#2c2420; }
.hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.1) 60%,transparent 100%); z-index:1; }
.hero-content { position:relative; z-index:2; padding:32px 24px 56px; width:100%; max-width:720px; margin:0 auto; }
.hero-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.15); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.25); border-radius:20px; padding:5px 12px; font-size:12px; color:rgba(255,255,255,.9); margin-bottom:12px; font-weight:500; }
.hero h1 { font-family:'Playfair Display',serif; font-size:32px; font-weight:600; color:#fff; line-height:1.2; margin-bottom:14px; }
.hero-sub { color:rgba(255,255,255,.75); font-size:14px; display:flex; align-items:center; gap:6px; }
@media(min-width:640px){ .hero{height:500px;} .hero h1{font-size:42px;} }

/* ── HOST CARD ── */
.host-card { background:var(--white); margin:-28px 16px 0; border-radius:var(--radius); box-shadow:var(--shadow-md); padding:20px; display:flex; align-items:center; gap:16px; position:relative; z-index:10; }
.host-avatar { width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-dark)); display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-size:22px; color:#fff; flex-shrink:0; overflow:hidden; }
.host-avatar img { width:100%; height:100%; object-fit:cover; }
.host-info h3 { font-size:15px; font-weight:600; margin-bottom:2px; }
.host-info p { font-size:13px; color:var(--gray-600); }
.host-contact { margin-left:auto; width:40px; height:40px; border-radius:50%; background:var(--accent-light); display:flex; align-items:center; justify-content:center; flex-shrink:0; text-decoration:none; transition:background .2s; }
.host-contact:hover { background:var(--accent); }
@media(min-width:640px){ .host-card{margin:-36px 32px 0;} }

/* ── TABS ── */
.tabs-wrapper { position:sticky; top:0; z-index:100; background:var(--white); border-bottom:1px solid var(--gray-200); box-shadow:0 1px 8px rgba(0,0,0,.06); margin-top:24px; }
.tabs { display:flex; overflow-x:auto; padding:0 16px; max-width:720px; margin:0 auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab { flex-shrink:0; padding:14px 16px; font-size:13px; font-weight:500; color:var(--gray-600); cursor:pointer; border-bottom:2px solid transparent; transition:all .2s; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.tab:hover { color:var(--accent-dark); }
.tab.active { color:var(--accent-dark); border-bottom-color:var(--accent); }
@media(min-width:640px){ .tabs-wrapper{margin-top:32px;} .tabs{padding:0 32px;} }

/* ── MAIN ── */
.main { max-width:720px; margin:0 auto; padding:24px 16px; }
.section { display:none; }
.section.active { display:block; }
.section-title { font-family:'Playfair Display',serif; font-size:22px; font-weight:600; margin-bottom:6px; color:var(--gray-800); }
.section-desc { color:var(--gray-600); font-size:14px; margin-bottom:24px; }
@media(min-width:640px){ .main{padding:28px 32px;} }

/* ── CARD ── */
.card { background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; margin-bottom:16px; }
.card-header { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.card-icon { width:40px; height:40px; border-radius:10px; background:var(--accent-light); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.card-icon.green { background:#e8f5e9; }
.card-icon.blue { background:#e3f2fd; }
.card-icon.red { background:#fce4ec; }
.card-icon.purple { background:#f3e5f5; }
.card-title { font-size:15px; font-weight:600; }
.card-subtitle { font-size:12px; color:var(--gray-600); }

/* ── INFO ROW ── */
.info-row { display:flex; align-items:baseline; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--gray-100); gap:12px; }
.info-row.info-row-block { flex-direction:column; align-items:flex-start; gap:4px; }
.info-row:last-child { border-bottom:none; padding-bottom:0; }
.info-row:first-child { padding-top:0; }
.info-label { font-size:13px; color:var(--gray-600); display:flex; align-items:center; gap:8px; flex-shrink:0; }
.info-value { font-size:14px; font-weight:500; text-align:right; word-break:break-word; }
.info-row-block .info-value { text-align:left; font-weight:500; font-size:14px; line-height:1.6; margin-top:4px; }

/* ── COPY BTN ── */
.copy-btn { background:var(--accent-light); border:none; border-radius:8px; padding:6px 12px; font-size:12px; font-weight:500; color:var(--accent-dark); cursor:pointer; transition:all .2s; white-space:nowrap; }
.copy-btn:hover { background:var(--accent); color:#fff; }
.copy-btn.copied { background:#e8f5e9; color:#2e7d32; }

/* ── RULES ── */
.rule-item { display:flex; align-items:flex-start; gap:14px; padding:14px 0; border-bottom:1px solid var(--gray-100); }
.rule-item:last-child { border-bottom:none; }
.rule-num { width:28px; height:28px; border-radius:50%; background:var(--accent-light); color:var(--accent-dark); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }
.rule-text { font-size:14px; line-height:1.5; }

/* ── CHECKLIST ── */
.checklist-item { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--gray-100); cursor:pointer; user-select:none; }
.checklist-item:last-child { border-bottom:none; }
.check-box { width:22px; height:22px; border-radius:6px; border:2px solid var(--gray-200); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .2s; }
.check-box.checked { background:var(--accent); border-color:var(--accent); }
.check-box.checked::after { content:''; width:12px; height:7px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translateY(-2px); display:block; }
.checklist-item.done .check-label { text-decoration:line-through; color:var(--gray-400); }

/* ── PLACE CARD ── */
.place-card { background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; margin-bottom:14px; transition:transform .2s,box-shadow .2s; }
.place-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.place-card-photo { width:100%; height:180px; object-fit:cover; display:block; }
.place-card-body { padding:16px; }
.place-card-top { display:flex; align-items:flex-start; gap:12px; margin-bottom:10px; }
.place-emoji { font-size:28px; line-height:1; }
.place-info { flex:1; }
.place-name { font-size:15px; font-weight:600; margin-bottom:4px; }
.place-types { display:flex; flex-wrap:wrap; gap:4px; margin-top:2px; }
.place-type { display:inline-block; background:var(--accent-light); color:var(--accent-dark); font-size:11px; font-weight:600; padding:2px 8px; border-radius:10px; text-transform:uppercase; letter-spacing:.5px; }
.place-address { font-size:13px; color:var(--gray-600); margin-top:8px; }
.place-actions { display:flex; gap:8px; margin-top:12px; }
.place-btn { flex:1; padding:9px 12px; border-radius:8px; font-size:13px; font-weight:500; text-decoration:none; text-align:center; border:none; cursor:pointer; transition:all .2s; display:flex; align-items:center; justify-content:center; gap:6px; }
.place-btn-primary { background:var(--accent); color:#fff; }
.place-btn-primary:hover { background:var(--accent-dark); }
.place-btn-secondary { background:var(--gray-100); color:var(--gray-800); }
.place-btn-secondary:hover { background:var(--gray-200); }

/* ── CATEGORY FILTER ── */
.cat-filters { display:flex; gap:8px; overflow-x:auto; margin-bottom:20px; padding-bottom:4px; scrollbar-width:none; }
.cat-filters::-webkit-scrollbar { display:none; }
.cat-chip { flex-shrink:0; padding:6px 14px; border-radius:20px; border:1.5px solid var(--gray-200); background:var(--white); font-size:13px; font-weight:500; color:var(--gray-600); cursor:pointer; transition:all .2s; }
.cat-chip:hover { border-color:var(--accent); color:var(--accent-dark); }
.cat-chip.active { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ── LANG SWITCHER ── */
.lang-switcher { display:flex; gap:6px; margin-bottom:14px; }
.lang-btn { width:34px; height:24px; border-radius:6px; border:2px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1); backdrop-filter:blur(6px); cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; transition:all .2s; padding:0; line-height:1; }
.lang-btn:hover { border-color:rgba(255,255,255,.7); background:rgba(255,255,255,.2); }
.lang-btn.active { border-color:#fff; background:rgba(255,255,255,.3); box-shadow:0 0 0 1px rgba(255,255,255,.5); }

/* ── ADMIN LINK ── */
.admin-link { display:flex; align-items:center; justify-content:center; gap:8px; padding:14px; color:var(--gray-400); font-size:12px; text-decoration:none; transition:color .2s; }
.admin-link:hover { color:var(--accent-dark); }
.admin-footer { text-align:center; padding:8px 0 16px; }

/* ── BOTTOM NAV ── */
.bottom-nav { position:fixed; bottom:0; left:0; right:0; height:70px; background:var(--white); border-top:1px solid var(--gray-200); display:flex; z-index:200; box-shadow:0 -4px 20px rgba(0,0,0,.08); }
.bnav-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; cursor:pointer; transition:all .2s; color:var(--gray-400); font-size:10px; font-weight:500; padding:4px 4px 8px; position:relative; }
.bnav-item.active { color:var(--accent-dark); }
.bnav-item .bnav-icon { font-size:20px; }
.bnav-item.active::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:32px; height:2px; background:var(--accent); border-radius:0 0 4px 4px; }
.bottom-nav { display:none !important; }

/* ══════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS — guest fixes
══════════════════════════════════════════════════════ */

/* ── Prevent iOS input zoom (font < 16px triggers zoom) ── */
@media(max-width: 480px) {
  .form-input, .form-textarea, input, select, textarea { font-size: 16px !important; }
}

/* ── Hero: ensure h1 doesn't overflow on 375px ── */
@media(max-width: 400px) {
  .hero h1 { font-size: 26px; }
  .hero-content { padding: 24px 16px 48px; }
}

/* ── Host card: prevent overflow when host name is long ── */
@media(max-width: 480px) {
  .host-card { flex-wrap: wrap; gap: 10px; }
  .host-info { min-width: 0; flex: 1; }
  .host-info h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ── Main content area ── */
@media(max-width: 400px) {
  .main { padding: 16px 12px; }
}

/* ── Info row: prevent long values from overflowing ── */
.info-value { max-width: 55%; }
@media(max-width: 480px) {
  .info-value { max-width: 100%; }
  .info-row { flex-wrap: wrap; }
  .info-row > div[style*="display:flex"] { flex-wrap: wrap; gap: 6px; }
}

/* ── Place actions: ensure buttons wrap if needed ── */
.place-actions { flex-wrap: wrap; }

/* ── Transport link: allow wrapping instead of overflow ── */
.transport-link { white-space: normal; word-break: break-word; text-align: right; max-width: 120px; }
@media(max-width: 400px) {
  .transport-link { max-width: 80px; font-size: 12px; }
}

/* ── Bottom nav safe area for modern iOS ── */
@media(max-width: 480px) {
  .bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0); }
}

/* ── Lock screen input row: prevent overflow ── */
@media(max-width: 400px) {
  .lock-input-row { flex-wrap: wrap; justify-content: center; }
  .lock-input { width: 140px; }
}

/* ── Weather card: wrap on very small screens ── */
@media(max-width: 360px) {
  .weather-card { flex-wrap: wrap; gap: 10px; }
  .weather-details { text-align: left; }
}