/* Drift Lodge: guest area sign-in (LOGIN part of Guest-Portal.dc.html; phone: Guest-Portal-Mobile.dc.html). */

.dl:has(.gl) { font-size: 16px; line-height: 1.55; }
.gl { position: relative; min-height: 960px; color: #FFFFFF; display: flex; flex-direction: column; overflow: hidden; }
.gl-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.gl-shade { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(18, 22, 30, .62), rgba(18, 22, 30, .2) 60%, rgba(18, 22, 30, .35)); }

.gl-head {
  position: relative; z-index: 2; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 12px var(--gutter-wide);
  background: rgba(255, 255, 255, .12); border-bottom: 1px solid rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2);
}
.gl-logo img { height: 72px; width: auto; display: block; }
.gl-head-right { display: flex; align-items: center; gap: 12px; }
.dl .gl-back { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .45); color: #FFFFFF; text-decoration: none; font-weight: 600; font-size: 15px; }
.gl-back-short { display: none; }

.gl-body { position: relative; z-index: 1; flex: 1; max-width: 1280px; width: 100%; margin: 0 auto; padding: 60px var(--gutter); display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.gl-panel {
  flex: 1 1 420px; max-width: 480px; display: flex; flex-direction: column; gap: 18px; padding: 36px; border-radius: 32px;
  background: rgba(255, 255, 255, .9); border: 1px solid #FFFFFF; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  color: var(--night); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6);
}
.gl-title { display: flex; flex-direction: column; gap: 18px; }
.gl-only { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--terracotta); }
.gl h1 { font-size: 46px; line-height: 1; outline: none; }
.gl-form { display: flex; flex-direction: column; gap: 18px; }
.gl-lead { margin: 0; color: var(--muted); }
.fld-label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.fld { width: 100%; min-width: 0; border: 1px solid #DDD5C9; background: #FFFFFF; border-radius: 14px; padding: 12px 14px; font-size: 16px; outline: none; }
.fld:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14, 102, 112, .15); }
.fld[aria-invalid="true"] { border-color: #B4462B; box-shadow: 0 0 0 3px rgba(180, 70, 43, .12); }
.fld--ref { font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.gl-error { margin: 0; padding: 12px 14px; border-radius: 14px; background: #FBE9E2; color: #8C3B22; font-size: 14px; }
.gl-error.is-info { background: var(--sand); color: var(--muted); }
.gl-submit { min-height: 54px; border-radius: 999px; border: 0; background: var(--teal); color: #FFFFFF; font-weight: 700; font-size: 16px; }
.gl-help { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--card-line); font-size: 14px; color: var(--muted); }
.gl-help a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

.gl-teaser { flex: 1 1 360px; display: flex; flex-direction: column; gap: 14px; max-width: 460px; }
.gl-teaser-title { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; opacity: .9; }
.gl-tease { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 20px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.gl-tease-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.gl-tease b { font-weight: 600; }
.gl-tease span span { font-size: 14px; opacity: .85; }

/* Private footer */
.gfoot { background: var(--night); color: #C9D2D3; padding: 36px var(--gutter-wide) 28px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
.gfoot img { width: 110px; height: auto; display: block; }
.dl .gfoot a { display: flex; align-items: center; min-height: 44px; color: var(--sand); font-size: 14px; text-decoration: none; }
.dl .gfoot a:hover { color: var(--apricot); }

/* Phone */
@media (max-width: 960px) {
  .gl { min-height: 844px; }
  .gl-head { padding: 16px 16px 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .gl-logo img { height: 58px; }
  .gl-head-right { gap: 8px; }
  .gl-head-right .lang-item { min-height: 44px; }
  .dl .gl-back { padding: 0 14px; font-size: 14px; }
  .gl-back-long { display: none; }
  .gl-back-short { display: inline; }
  .gl-body { padding: 22px 16px 28px; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-end; gap: 22px; }
  .gl-panel { flex: none; max-width: none; padding: 0; gap: 22px; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #FFFFFF; }
  .gl-title { gap: 8px; }
  .gl-only { font-size: 11px; color: #FFFFFF; }
  .gl-only svg { display: none; }
  .gl h1 { font-size: 42px; }
  .gl-form { gap: 14px; padding: 22px; border-radius: 28px; background: rgba(255, 255, 255, .92); color: var(--night); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
  .gl-lead { font-size: 15px; }
  .gl-help { padding-top: 0; border-top: 0; font-size: 13px; gap: 4px; }
  .gl-teaser { display: none; }
}

/* ========== Private guest area (PORTAL part of Guest-Portal.dc.html; phone: Guest-Portal-Mobile.dc.html) ========== */
.dl:has(.gp) { font-size: 16px; line-height: 1.5; }
.gp { color: var(--night); }
.gp-noscroll { overflow: hidden; }
.gp h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 1; outline: none; }
.gp-h3 { margin: 24px 0 0; font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 1; }
.gp-h3--small { margin: 0; font-size: 32px; line-height: 1.1; }
.gp-serif { font-family: var(--serif); font-weight: 400; }
.gp-mono { font-family: var(--mono); font-weight: 500; }
.gp-teal { color: var(--teal); font-size: 12px; }
.gp-s { font-size: 14px; color: var(--muted); }
.gp-k { font-size: 13px; color: var(--grey); }
.gp-small { font-size: 13px; opacity: .8; }
.gp-dim { font-weight: 400; opacity: .75; }
.gp-fine { font-size: 13px; color: var(--grey); }
.gp-center { text-align: center; }
.gp-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--terracotta); }
.gp-eyebrow--apricot { color: var(--apricot); }
.gp em { font-style: italic; }

/* Buttons */
.gp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 999px; border: 0; font: inherit; font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; }
.dl .gp-btn--apricot { background: var(--apricot); color: var(--night); box-shadow: 0 10px 22px -14px rgba(242, 163, 94, .9); }
.dl .gp-btn--teal { background: var(--teal); color: #FFFFFF; }
.dl .gp-btn--white { background: #FFFFFF; color: var(--teal); }
.dl .gp-btn--ghostlight { background: transparent; color: #FFFFFF; border: 1px solid rgba(255, 255, 255, .4); font-weight: 600; }
.dl .gp-btn--outline { background: #FFFFFF; color: var(--night); border: 1px solid #D9D0C4; font-weight: 600; }
.dl .gp-btn--red { background: #B23A1E; color: #FFFFFF; }
.gp-btn--big { min-height: 58px; font-size: 17px; }
.gp-btn:disabled { opacity: .7; cursor: default; }
.gp-btnrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.gp-btnrow > .gp-btn { flex: 1 1 140px; }
.dl .gp-wa { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 16px; border-radius: 999px; background: var(--wa); color: #FFFFFF; text-decoration: none; font-weight: 600; flex: 1 1 120px; }
.dl .gp-wa:hover { background: var(--wa-hover); color: #FFFFFF; }

/* Hero */
.gp-hero { position: relative; overflow: hidden; color: #FFFFFF; }
.gp-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.gp-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 22, 30, .5), rgba(18, 22, 30, .2) 45%, rgba(18, 22, 30, .62)); }
.gp-head { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px var(--gutter-wide); background: rgba(255, 255, 255, .12); border-bottom: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2); }
.gp-head-left, .gp-head-right { display: flex; align-items: center; gap: 14px; }
.gp-logo img { height: 68px; width: auto; display: block; }
.gp-badge { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .2); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.gp-out { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .45); background: transparent; color: #FFFFFF; font: inherit; font-weight: 600; cursor: pointer; }
.gp-sos { display: none; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid #B23A1E; background: #B23A1E; color: #FFFFFF; font: inherit; font-size: 13px; font-weight: 700; box-shadow: 0 4px 14px rgba(178, 58, 30, .45); cursor: pointer; }
.gp-welcome { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 56px var(--gutter) 40px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px; }
.gp-welcome-text { display: flex; flex-direction: column; gap: 10px; }
.gp-count { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.gp h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(46px, 5.4vw, 74px); line-height: 1; outline: none; }
.gp-lead { margin: 0; opacity: .9; }
.gp-stayline { display: none; margin: 0; font-size: 14px; opacity: .9; }
.gp-chips { display: flex; gap: 8px; padding: 8px; border-radius: 26px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.gp-chip { display: flex; flex-direction: column; padding: 10px 16px; border-radius: 18px; background: rgba(255, 255, 255, .18); min-width: 120px; }
.gp-chip span { font-size: 12px; opacity: .8; }
.gp-chip b { font-weight: 600; white-space: nowrap; }
.gp-chip--light { background: #FFFFFF; color: var(--night); }

/* Layout and navigation */
.gp-layout { max-width: 1280px; margin: 0 auto; padding: 36px var(--gutter) 120px; display: flex; gap: 32px; align-items: flex-start; }
.gp-side { position: sticky; top: 20px; flex: 0 0 248px; display: flex; flex-direction: column; gap: 8px; }
.gp-navbtn { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 16px; border-radius: 18px; border: 1px solid var(--line); background: #FFFFFF; color: var(--night); font: inherit; font-weight: 700; font-size: 16px; text-align: left; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.gp-navbtn:hover { border-color: var(--night); }
.gp-navic { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 12px; background: var(--sand); color: var(--teal); }
.gp-navbtn[aria-current="page"] { background: var(--night); color: #FFFFFF; border-color: var(--night); }
.gp-navbtn[aria-current="page"] .gp-navic { background: var(--apricot); color: var(--night); }
.gp-navbtn--sos { background: #FFF1EC; color: #B23A1E; border-color: #F0BBA8; }
.gp-navbtn--sos .gp-navic { background: #B23A1E; color: #FFFFFF; }
.gp-navbtn--sos[aria-current="page"] { background: #B23A1E; border-color: #B23A1E; }
.gp-navbtn--sos[aria-current="page"] .gp-navic { background: #FFFFFF; color: #B23A1E; }
.gp-hostcard { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 24px; background: var(--plum); color: #FFFFFF; }
.gp-hostcard .gp-serif { font-size: 24px; line-height: 1.1; }
.gp-hostcard .gp-wa { flex: none; }
.gp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 28px; scroll-margin-top: 20px; }
.gp-toptabs { display: none; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.gp-toptabs::-webkit-scrollbar { display: none; }
.gp-toptab { flex: none; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: #FFFFFF; color: var(--night); font: inherit; font-weight: 700; white-space: nowrap; cursor: pointer; }
.gp-toptab[aria-current="page"] { background: var(--night); color: #FFFFFF; border-color: var(--night); }
.gp-toptab--sos { background: #FFF1EC; color: #B23A1E; border-color: #F0BBA8; }
.gp-toptab--sos[aria-current="page"] { background: #B23A1E; color: #FFFFFF; border-color: #B23A1E; }
.gp-bottom { display: none; }
.gp-tab { display: flex; flex-direction: column; gap: 18px; animation: gpIn .45s ease both; }
.gp-tab[hidden] { display: none; }
@keyframes gpIn { from { transform: translateY(10px); opacity: .4; } to { transform: none; opacity: 1; } }
.gp-tabhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.gp-tabhead--sub { flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 10px; }

/* Cards */
.gp-card { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 24px; background: #FFFFFF; min-width: 0; }
.gp-card--plum { background: var(--plum); color: #FFFFFF; gap: 8px; }
.gp-card--plum > b { font-size: 17px; }
.gp-card--plum > span { font-size: 14px; opacity: .88; }
.gp-card--line { border: 1px solid var(--card-line); gap: 8px; }
.gp-card--line > b { font-size: 17px; }
.gp-cardtitle { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.gp-pair { display: flex; flex-wrap: wrap; gap: 14px; }
.gp-pair > * { flex: 1 1 320px; }
.gp-staycards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.gp-staycard { gap: 6px; padding: 20px; }
.gp-staycard b { font-size: 19px; font-weight: 600; line-height: 1.25; }
.gp-here { flex-basis: 340px; }
.gp-here .gp-cardtitle svg { color: var(--teal); }
.gp-here b { font-weight: 600; color: var(--night); }
.gp-here .gp-btn--big { margin-top: auto; box-shadow: 0 14px 30px -16px rgba(242, 163, 94, .9); }
.gp-locked { margin: auto 0 0; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: var(--sand); font-size: 14px; color: var(--muted); }
.gp-locked svg { flex: none; margin-top: 2px; color: var(--teal); }
.gp-locked--onteal { background: rgba(255, 255, 255, .12); color: #FFFFFF; }
.gp-locked--onteal svg { color: #FFFFFF; }
.gp-wifi { flex-basis: 300px; background: var(--teal); color: #FFFFFF; }
.gp-onteal { color: #E3EFEF; margin: 0; }
.gp-wifi-row { display: flex; flex-direction: column; gap: 2px; }
.gp-wifi-row span { font-size: 13px; opacity: .75; }
.gp-wifi-row b { font-size: 18px; letter-spacing: .02em; word-break: break-all; }
.gp-wifi-btns { margin-top: auto; display: flex; gap: 8px; }
.gp-wifi-btns .gp-btn { flex: 1; }

.gp-tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.gp-tip { display: flex; gap: 12px; padding: 16px; border-radius: 20px; background: #FFFFFF; border: 1px solid var(--card-line); font-size: 14px; }
.gp-tip b { font-weight: 600; font-size: 15px; }
.gp-gk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gp-remotes { grid-column: span 2; display: flex; gap: 18px; align-items: center; padding: 18px; border-radius: 22px; background: #FFFFFF; border: 1px solid var(--card-line); }
.gp-remotes-pic { flex: 0 0 210px; display: flex; flex-direction: column; gap: 8px; }
.gp-remotes-img { border-radius: 16px; background: var(--sand); padding: 14px 10px 0; }
.gp-remotes-img img { width: 100%; height: auto; display: block; }
.gp-remotes-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 0 10px; }
.gp-remotes-nums > span { display: grid; place-items: center; }
.gp-num { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--apricot); color: var(--night); font-size: 12px; font-weight: 700; }
.gp-remotes-list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.gp-remotes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.gp-remote { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.4; }
.gp-remote b { font-weight: 600; font-size: 14px; }
.gp-plugs { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 22px; background: var(--night); color: var(--sand); }
.gp-plugs-top { display: flex; align-items: center; gap: 12px; }
.gp-plugs-top img { width: 72px; height: 72px; flex: none; border-radius: 50%; display: block; box-shadow: 0 0 0 4px rgba(255, 255, 255, .08); }
.gp-plugs-top > span { display: flex; flex-direction: column; gap: 2px; }
.gp-plugs-top .gp-serif { font-size: 20px; line-height: 1.1; }
.gp-plugs-text { font-size: 13px; line-height: 1.5; color: #C9D2D3; }

.gp-check { gap: 10px; margin-top: 6px; }
.gp-check-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 700; }
.gp-check-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 4px 20px; }
.gp-check-item { display: flex; gap: 10px; align-items: center; font-size: 14px; min-height: 44px; cursor: pointer; }
.gp-check-item.is-done span { color: var(--grey); text-decoration: line-through; }
.gp .chk { width: 22px; height: 22px; accent-color: var(--teal); flex: none; }

/* Review */
.gp-review { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 24px; background: var(--plum); color: #FFFFFF; margin-top: 6px; }
.gp-review-head { display: flex; flex-direction: column; gap: 4px; }
.gp-review-head .gp-serif { font-size: 30px; line-height: 1.1; }
.gp-review-head > span:last-child { font-size: 14px; opacity: .85; }
.gp-review-note { margin: 0; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .08); font-size: 14px; }
.gp-review-form { display: flex; flex-direction: column; gap: 14px; }
.gp-stars { display: flex; gap: 6px; }
.gp-stars button { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; border: 0; background: rgba(255, 255, 255, .08); cursor: pointer; }
.gp-stars svg { fill: none; }
.gp-stars button.is-lit svg { fill: var(--apricot); }
.gp-label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.gp-likes-list { display: flex; flex-wrap: wrap; gap: 8px; }
.gp-like { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: #FFFFFF; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.gp-like .gp-tick { display: none; }
.gp-like[aria-pressed="true"] { background: var(--apricot); border-color: var(--apricot); color: var(--night); }
.gp-like[aria-pressed="true"] .gp-tick { display: inline; }
.gp-review textarea, .gp-review input[type="text"] { width: 100%; min-width: 0; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #FFFFFF; border-radius: 14px; padding: 12px; font: inherit; font-size: 16px; resize: vertical; }
.gp-review textarea::placeholder { color: rgba(255, 255, 255, .6); }
.gp-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; }
.gp-consent input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--apricot); }
.gp-review-err { margin: 0; font-size: 14px; color: #FFC9B5; }
.gp-review-send { align-self: flex-start; min-height: 50px; padding: 0 24px; font-size: 15px; }
.gp-review-thanks { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, .08); outline: none; }
.gp-review-thanks b { font-size: 17px; }
.gp-review-thanks > span { font-size: 14px; opacity: .9; }

/* Rules */
.gp-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.gp-rule { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 20px; background: #FFFFFF; }
.gp-rule b { font-weight: 600; }
.gp-rule-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--sand); }

/* Top picks */
.gp-places { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.gp-place { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: #FFFFFF; transition: transform .25s ease, box-shadow .25s ease; }
.gp-place:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -24px rgba(27, 42, 48, .55); }
.gp-place-pic { position: relative; height: 220px; }
.gp-zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--card-line); cursor: zoom-in; }
.gp-zoom img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-tag { position: absolute; left: 12px; top: 12px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; pointer-events: none; }
.gp-zoomic { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .85); color: var(--night); pointer-events: none; }
.gp-place-body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.gp-place-body .gp-serif { font-size: 24px; line-height: 1.1; }
.gp-place-body .gp-btnrow { padding-top: 10px; }

/* Services */
.gp-req { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid #F1ECE4; font-size: 14px; }
.gp-req b { font-weight: 600; }
.gp-req-status { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.gp-req-status--wait { background: #FCEBD9; color: #8C4A12; }
.gp-req-status--ok { background: #E1F1EC; color: var(--teal); }
.gp-req-status--no { background: #F1ECE4; color: var(--muted); }
.gp-gride { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 22px; border-radius: 24px; background: var(--night); color: var(--sand); }
.gp-gride-id { display: flex; align-items: center; gap: 14px; flex: none; }
.gp-gride-id > span:last-child { display: flex; flex-direction: column; }
.gp-gride-id b { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.gp-gride-logo { display: grid; place-items: center; width: 76px; height: 76px; flex: none; border-radius: 18px; background: #FFFFFF; padding: 6px; }
.gp-gride-logo img { max-width: 100%; max-height: 100%; display: block; }
.gp-gride-text { flex: 1 1 260px; min-width: 0; font-size: 14px; line-height: 1.5; color: #C9D2D3; }
.gp-gride .gp-btnrow { flex: none; margin: 0; }
.gp-gride .gp-btn { min-height: 50px; padding: 0 22px; font-size: 15px; }
.gp-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.gp-service { gap: 8px; padding: 20px; }
.gp-service > b { font-size: 17px; }
.gp-service .gp-btn { margin-top: auto; min-height: 44px; font-weight: 600; }
.gp-service-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.gp-service-ic, .gp-deliv-ic { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 16px; background: var(--sand); }
.gp-deliv-ic { background: #E3EFEF; }
.gp-price { padding: 4px 10px; border-radius: 999px; background: var(--sand); font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.gp-delivery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.gp-deliv { gap: 10px; padding: 20px; }
.gp-deliv-head { display: flex; align-items: center; gap: 12px; }
.gp-deliv-head b { font-size: 17px; }

/* Contacts */
.gp-ctgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 14px; align-items: stretch; }
.gp-ct-host { padding: 18px 20px; gap: 10px; }
.gp-ct-host .gp-serif { font-size: 26px; line-height: 1.05; }
.gp-ct-host .gp-dim { font-size: 14px; }
.dl .gp-problem { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .1); color: #FFFFFF; text-decoration: none; font-size: 14px; }
.gp-problem b { font-weight: 600; }
.gp-sosbox { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 24px; background: #FFF7F4; border: 1px solid #F3D3C8; }
.gp-impbox { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 24px; background: #F2F8F7; border: 1px solid #D3E6E3; }
.gp-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.gp-pill--red { background: #FBE9E2; color: #B23A1E; }
.gp-pill--teal { background: #E1F1EC; color: var(--teal); }
.gp-sosgrid { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gp-impgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.gp-callcard { transition: transform .2s ease, box-shadow .2s ease; color: var(--night); text-decoration: none; }
.gp-callcard:hover, .gp-callcard:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(27, 42, 48, .12); }
.gp-callcard--sos { width: 100%; font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 14px; border-radius: 20px; background: #FFFFFF; border: 1px solid #FBE9E2; }
.dl .gp-callcard--imp { display: flex; gap: 12px; align-items: center; padding: 14px 14px 14px 16px; border-radius: 20px; background: #FFFFFF; border: 1px solid #E1F1EC; color: var(--night); }
.gp-callic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: #E1F1EC; color: var(--teal); }
.gp-callic--red { background: #FBE9E2; color: #B23A1E; }
.gp-callnum { font-weight: 700; font-size: 22px; line-height: 1; }
.gp-imptext { flex: 1; min-width: 0; }
.gp-imptext b { font-weight: 700; font-size: 17px; }
.gp-callbtn { flex: none; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--teal); color: #FFFFFF; font-weight: 700; font-size: 14px; }
.gp-callbtn--red { align-self: stretch; margin-top: auto; background: #B23A1E; }

/* Dialogs */
.gp-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(27, 42, 48, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.gp-modal[hidden], .gp-viewer[hidden] { display: none; }
.gp-dialog { width: 100%; max-width: 480px; max-height: calc(100vh - 32px); overflow: auto; display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 28px; background: #FFFFFF; color: var(--night); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); animation: gpIn .35s ease both; }
.gp-dialog--center { max-width: 400px; text-align: center; padding: 24px; }
.gp-dialog--center .gp-serif { font-size: 26px; line-height: 1.1; }
.gp-sos-ic { align-self: center; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #FBE9E2; color: #B23A1E; }
.gp-dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.gp-dialog-head h3 { margin: 0; font-size: 32px; line-height: 1.05; }
.gp-dialog-x { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid #DDD5C9; background: #FFFFFF; font-size: 18px; cursor: pointer; }
.gp-req-price { padding: 10px 14px; border-radius: 14px; background: var(--sand); font-size: 14px; color: var(--muted); }
.gp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gp-dialog textarea.fld { min-height: 84px; resize: vertical; }
.gp-req-err { margin: 0; padding: 10px 14px; border-radius: 14px; background: #FBE9E2; color: #8C3B22; font-size: 14px; }
.gp-viewer { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; background: rgba(14, 18, 22, .94); color: #FFFFFF; }
.gp-viewer-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; }
.gp-viewer-top .gp-serif { font-size: 24px; }
.gp-viewer-x { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: #FFFFFF; cursor: pointer; }
.gp-viewer-img { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 12px 24px; border: 0; background: transparent; cursor: zoom-out; }
.gp-viewer-img img { max-width: 100%; max-height: 100%; border-radius: 16px; display: block; object-fit: contain; }

/* Private footer line */
.gfoot span { font-size: 14px; }

@media (prefers-reduced-motion: reduce) { .gp-tab, .gp-dialog { animation: none; } .gp-place, .gp-callcard { transition: none; } }
@media (max-width: 1100px) {
  .gp-gk { grid-template-columns: minmax(0, 1fr); }
  .gp-remotes { grid-column: auto; flex-wrap: wrap; }
  .gp-ctgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  .gp-side { display: none; }
  .gp-toptabs { display: flex; }
}

/* Phone (Guest-Portal-Mobile.dc.html): short header with SOS, stay line instead of chips, bottom tab bar. */
@media (max-width: 600px) {
  .gp-head { padding: 10px 14px; gap: 8px; }
  .gp-logo img { height: 46px; }
  .gp-badge, .gp-head .lang { display: none; }
  .gp-head-right { gap: 8px; }
  .gp-sos { display: flex; }
  .gp-out { width: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  .gp-out span { display: none; }
  .gp-hero { min-height: 250px; display: flex; flex-direction: column; }
  .gp-hero-shade { background: linear-gradient(180deg, rgba(18, 22, 30, .5), rgba(18, 22, 30, .15) 45%, rgba(18, 22, 30, .7)); }
  .gp-welcome { margin-top: auto; padding: 18px 16px; width: 100%; }
  .gp-welcome-text { gap: 4px; }
  .gp-count { font-size: 11px; letter-spacing: .16em; }
  .gp h1 { font-size: 38px; }
  .gp-lead, .gp-chips { display: none; }
  .gp-stayline { display: block; }
  .gp-layout { padding: 22px 16px 40px; }
  .gp-toptabs { display: none; }
  .gp-main { gap: 16px; }
  .gp h2 { font-size: 32px; }
  .gp-h3 { font-size: 32px; margin-top: 14px; }
  .gp-tab { gap: 14px; }
  .gp-staycards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gp-staycard { padding: 14px; border-radius: 20px; gap: 4px; }
  .gp-staycard svg { display: none; }
  .gp-staycard b { font-size: 16px; }
  .gp-staycard .gp-s { font-size: 12px; }
  .gp-staycard--wide { grid-column: span 2; }
  .gp-pair { flex-direction: column; }
  .gp-pair > * { flex-basis: auto; }
  .gp-wifi { order: -1; padding: 18px; border-radius: 22px; }
  .gp-card { padding: 18px; border-radius: 22px; }
  .gp-remotes-pic { flex-basis: 100%; }
  .gp-remotes-grid { grid-template-columns: minmax(0, 1fr); }
  .gp-sosgrid { grid-template-columns: minmax(0, 1fr); }
  .gp-callcard--sos { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .gp-callbtn--red { align-self: auto; margin: 0 0 0 auto; }
  .gp-dialog { padding: 22px; }
  .gp-bottom { display: block; position: sticky; bottom: 0; z-index: 30; padding: 8px 10px 12px; }
  .gp-bottom-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 6px; border-radius: 26px; background: rgba(27, 42, 48, .82); border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .6); }
  .gp-bottab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 6px 2px; border: 0; border-radius: 20px; background: transparent; color: #FFFFFF; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
  .gp-bottab[aria-current="page"] { background: var(--apricot); color: var(--night); }
  .dl .gp-bottab--wa { margin-top: -14px; background: var(--wa); color: #FFFFFF; text-decoration: none; font-weight: 700; box-shadow: 0 10px 24px -10px rgba(31, 154, 98, .9), 0 0 0 3px rgba(27, 42, 48, .82); }
  .gfoot { padding-bottom: 28px; }
}

/* Host preview banner (admins only) */
.gp-preview { position: sticky; top: 0; z-index: 50; padding: 10px var(--gutter); background: #F2A35E; color: #1B2A30; font-size: 14px; text-align: center; }
.dl .gp-preview a { color: #1B2A30; font-weight: 700; margin-left: 8px; }
body.admin-bar .gp-preview { top: 32px; }
@media (max-width: 782px) { body.admin-bar .gp-preview { top: 46px; } }