/* =========================================================
   portal.css — Guest portal (pages/account.html)
   Зүүн талд цэс (уулын зурагтай), гол хэсэг 2 багана: үндсэн картууд + баруун талын widget.
   Гарчиг serif (Source Serif 4), текст Noto Sans. Утсан дээр цэс дээд талд хэвтээ.
   ========================================================= */
.portal-body {
  --gp-bg: #f6f5f0;
  --gp-side: #f2f1ea;
  --gp-line: #e7e5dc;
  --gp-muted: #6b716c;
  --gp-ink: #1f2a25;
  --gp-green: #1d4b3a;
  --gp-green-soft: #e6efe9;
  --gp-sand: #fbefdc;
  --gp-sand-ink: #7a4f12;
  --gp-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-family: "Noto Sans", "Montserrat", sans-serif;
  background: var(--gp-bg); color: var(--gp-ink); min-height: 100vh; font-size: 0.97rem;
}
.portal-body [hidden] { display: none !important; }
.portal-body :where(section) { padding: 0; }
.portal-body h1, .portal-body h2 { font-family: var(--gp-serif); color: var(--gp-ink); letter-spacing: -0.01em; font-weight: 600; }
.portal-body h2 { font-size: 1.32rem; margin: 0; line-height: 1.2; }
.gp svg, .gp-dialog svg, .gp-auth-page svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.gp svg .f { fill: currentColor; stroke: none; }
.gp svg .w { stroke: #fff; stroke-width: 2; }
.portal-body .btn { font-family: inherit; font-weight: 600; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.portal-body .btn-primary { background: var(--gp-green); }
.portal-body .btn-primary:hover { background: #163b2d; }
.portal-body .btn-outline { border-color: #cfd3cc; color: var(--gp-ink); background: #fff; }
.portal-body .btn-outline:hover { border-color: var(--gp-green); color: var(--gp-green); }
.btn-soft { background: #f0efe9; border: 1px solid var(--gp-line); color: var(--gp-ink); padding: 10px 22px; cursor: pointer; }
.btn-soft:hover { background: #e9e7df; }

.gp-loading { padding: 80px 16px; text-align: center; color: var(--gp-muted); }

/* Нэвтрэх хуудас */
.gp-auth-page { min-height: 100vh; padding: 0 16px 48px; background: radial-gradient(circle at 10% 0%, rgba(140, 191, 122, 0.22), transparent 40%), var(--gp-bg); }
.gp-auth-top { display: flex; justify-content: space-between; align-items: center; max-width: 920px; margin: 0 auto; padding: 20px 0 28px; }
.gp-auth-logo img { width: 150px; height: auto; display: block; }
.gp-back { color: var(--gp-green); font-weight: 700; text-decoration: none; font-size: 0.92rem; }

/* ---------- Ерөнхий бүтэц, зүүн цэс ---------- */
.gp { display: grid; grid-template-columns: 262px 1fr; min-height: 100vh; }
.gp-side {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 22px;
  padding: 28px 16px 18px; background: var(--gp-side); border-right: 1px solid var(--gp-line); overflow: hidden;
}
.gp-brand { display: grid; justify-items: center; gap: 8px; text-decoration: none; color: var(--gp-muted); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; position: relative; z-index: 1; }
.gp-brand img { width: 168px; height: auto; }
.gp-nav { display: grid; gap: 6px; position: relative; z-index: 1; }
.gp-nav a {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 10px;
  color: var(--gp-ink); text-decoration: none; font-weight: 500; font-size: 1rem;
}
.gp-nav a:hover { background: rgba(29, 75, 58, 0.07); }
.gp-nav a.is-active { background: var(--gp-green); color: #fff; box-shadow: 0 6px 16px rgba(29, 75, 58, 0.22); }
.gp-count { margin-left: auto; min-width: 24px; height: 24px; display: grid; place-items: center; padding: 0 7px; border-radius: 99px; background: #f2b84b; color: #3b2a07; font-size: 0.78rem; font-style: normal; }
.gp-side-art {
  flex: 1; min-height: 120px; margin: 0 -16px;
  background: url("../../images/portal/side-landscape.svg") bottom center / 100% auto no-repeat;
}
.gp-side-foot {
  display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid rgba(31, 42, 37, 0.12);
  position: relative; z-index: 1;
}
.gp-side-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--gp-ink); font: inherit; font-size: 0.94rem; text-decoration: none; cursor: pointer; text-align: left; }
.gp-side-link:hover { background: rgba(255, 255, 255, 0.7); }
.gp-me { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; color: inherit; text-decoration: none; }
.gp-me:hover { background: rgba(255, 255, 255, 0.7); }
.gp-me-name { display: grid; min-width: 0; flex: 1; font-size: 0.95rem; line-height: 1.3; }
.gp-me-name strong { font-weight: 600; }
.gp-me-name small { color: var(--gp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.78rem; }
.gp-avatar {
  display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
  background: var(--gp-green); color: #fff; font-weight: 600; font-size: 0.92rem;
}
.gp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gp-avatar-md { width: 64px; height: 64px; font-size: 1.4rem; }

.gp-main { padding: 18px clamp(16px, 2.6vw, 36px) 0; min-width: 0; display: flex; flex-direction: column; }
.gp-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.gp-crumbs { display: flex; align-items: center; gap: 10px; color: var(--gp-muted); font-size: 0.92rem; }
.gp-crumbs a { color: var(--gp-ink); display: flex; }
.gp-crumbs strong { color: var(--gp-ink); font-weight: 500; }
.gp-crumbs strong::after { content: "›"; margin-left: 10px; color: var(--gp-muted); }
.gp-top-actions { display: flex; align-items: center; gap: 6px; }
.gp-bell { position: relative; display: grid; place-items: center; width: 42px; height: 42px; color: var(--gp-ink); border-right: 1px solid var(--gp-line); padding-right: 8px; }
.gp-bell i { position: absolute; top: 9px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: #d9534f; }
.gp-help { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--gp-ink); font-weight: 500; font-size: 0.95rem; text-decoration: none; border-radius: 8px; }
.gp-help:hover { background: #fff; color: var(--gp-green); }

#gp-view { flex: 1; }
.gp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.gp-head h1 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.1; color: var(--gp-green); }
.gp-head p { color: var(--gp-muted); font-size: 1.15rem; margin-top: 6px; }
.gp-pill-lg { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: 12px; background: var(--gp-green-soft); font-weight: 500; }
.gp-switch { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 12px; background: var(--gp-green-soft); max-width: 100%; }
.gp-switch span { display: flex; color: var(--gp-green); }
.gp-switch select { min-width: 0; max-width: 360px; padding: 6px 8px; border: 0; background: transparent; font: inherit; font-weight: 500; color: var(--gp-ink); cursor: pointer; }

/* Үндсэн + баруун багана */
.gp-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.58fr); gap: 20px; align-items: start; padding-bottom: 28px; }
.gp-col { display: grid; gap: 20px; min-width: 0; }
.gp-aside { position: sticky; top: 18px; }
.gp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px; align-items: start; padding-bottom: 28px; }

/* Картууд */
.gp-card { display: grid; gap: 16px; padding: 22px 24px; border-radius: 14px; background: #fff; border: 1px solid var(--gp-line); box-shadow: 0 1px 2px rgba(31, 42, 37, 0.03); min-width: 0; }
.gp-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.gp-card-head p { margin-top: 4px; }
.gp-span-2 { grid-column: 1 / -1; }
.gp-muted { color: var(--gp-muted); font-size: 0.93rem; }
.gp-small { color: var(--gp-muted); font-size: 0.84rem; }
.gp-pad { padding: 0 6px; margin-top: -8px; }
.gp-sub { font-size: 1rem; font-weight: 600; margin: 0; }
.gp-hr { border: 0; border-top: 1px solid var(--gp-line); margin: 2px 0; }
.gp-link { background: none; border: 0; padding: 0; color: var(--gp-green); font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.gp-link:hover { text-decoration: underline; }
.gp-link-u { color: var(--gp-green); text-decoration: underline; text-underline-offset: 3px; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 8px; }
.gp-wide { width: 100%; }
.gp-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.gp-actions .btn { padding: 12px 24px; }
.gp-empty { justify-items: start; }

.gp-pill { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 99px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.gp-pill.is-ok, .gp-tag.is-ok { background: #e3f1e6; color: #1c6a3e; }
.gp-pill.is-warn, .gp-tag.is-warn { background: var(--gp-sand); color: var(--gp-sand-ink); }
.gp-pill.is-info, .gp-tag.is-info { background: #e5eefb; color: #1d4f91; }
.gp-pill.is-bad { background: #fde6e4; color: #a3271d; }
.gp-pill.is-muted { background: #eeeeea; color: var(--gp-muted); }
.gp-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 8px; font-size: 0.82rem; font-weight: 500; font-style: normal; white-space: nowrap; }
.gp-tag svg { width: 18px; height: 18px; }
.gp-tag.is-warn svg { color: #f0a92e; }

/* ---------- Аялал / машины карт ---------- */
.gp-trip { padding: 14px 14px 22px; gap: 18px; }
.gp-trip-img { position: relative; border-radius: 10px; overflow: hidden; background: var(--gp-green-soft); aspect-ratio: 16 / 6.2; }
.gp-trip-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-over { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 99px; background: #fff; font-weight: 600; font-size: 0.88rem; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); }
.gp-over svg { color: #1c8a4a; }
.gp-over.is-warn { background: var(--gp-sand); color: var(--gp-sand-ink); }
.gp-over.is-info { background: #e5eefb; color: #1d4f91; }
.gp-trip-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px 28px; align-items: start; padding: 0 8px; }
.gp-trip-title h2 { font-size: 1.75rem; display: flex; align-items: center; gap: 10px; }
.gp-trip-title h2 a { color: var(--gp-ink); display: flex; }
.gp-trip-title h2 svg { width: 24px; height: 24px; }
.gp-ref { display: grid; line-height: 1.35; }
.gp-ref small { color: var(--gp-muted); font-size: 0.85rem; }
.gp-ref strong { font-weight: 600; letter-spacing: 0.04em; }
.gp-chips-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.gp-chip-s { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 99px; background: #f1f0ea; font-size: 0.88rem; white-space: nowrap; }
.gp-chip-s.is-green { background: var(--gp-green-soft); }
.gp-chip-s svg { width: 18px; height: 18px; }
.gp-facts-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 8px; padding-top: 16px; border-top: 1px solid var(--gp-line); }
.gp-fact { display: flex; gap: 12px; padding: 0 18px; border-left: 1px solid var(--gp-line); }
.gp-fact:first-child { padding-left: 0; border-left: 0; }
.gp-fact > svg { color: var(--gp-muted); margin-top: 2px; }
.gp-fact div { display: grid; line-height: 1.3; min-width: 0; }
.gp-fact small { color: var(--gp-muted); font-size: 0.88rem; }
.gp-fact strong { font-size: 1.12rem; font-weight: 600; }
.gp-fact span { color: var(--gp-muted); font-size: 0.82rem; margin-top: 2px; overflow-wrap: anywhere; }
.gp-pickup { display: flex; align-items: center; gap: 10px; padding: 0 8px; color: #48514b; font-size: 0.93rem; }
.gp-pickup svg { width: 18px; height: 18px; color: var(--gp-muted); }
.gp-trip .gp-actions { padding: 0 8px; }

/* Аялалын өмнө хийх зүйлс */
.gp-progress { display: flex; align-items: center; gap: 14px; color: var(--gp-muted); font-size: 0.9rem; }
.gp-progress .gp-bar { width: 160px; }
.gp-bar { height: 8px; border-radius: 99px; background: #e9e8e2; overflow: hidden; }
.gp-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2f7a55, #4c9a6d); }
.gp-todo { list-style: none; padding: 0; display: grid; }
.gp-todo li { display: flex; align-items: center; gap: 16px; padding: 12px 6px; border-top: 1px solid var(--gp-line); }
.gp-todo li:first-child { border-top: 0; }
.gp-todo li > div { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.gp-todo strong { font-weight: 600; }
.gp-todo small { color: var(--gp-muted); font-size: 0.86rem; }
.gp-todo-ico { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; color: #fff; }
.gp-todo-ico svg { width: 16px; height: 16px; stroke-width: 2.6; }
.gp-todo-ico.is-ok { background: #2c8a52; }
.gp-todo-ico.is-warn { background: #f2b84b; color: #fff; }
.gp-todo-ico.is-warn svg { width: 28px; height: 28px; stroke-width: 2; }
.gp-view-link { display: inline-flex; align-items: center; gap: 6px; color: var(--gp-ink); text-decoration: none; font-size: 0.93rem; white-space: nowrap; }
.gp-view-link svg { width: 16px; height: 16px; }
.gp-view-link:hover { color: var(--gp-green); }

.gp-note-card { gap: 12px; }
.gp-note-row { display: flex; gap: 12px; align-items: stretch; }
.gp-note-row textarea { flex: 1; min-height: 52px; padding: 10px 14px; border: 1px solid var(--gp-line); border-radius: 8px; font: inherit; font-size: 0.92rem; resize: vertical; }
.gp-note-row textarea:focus { outline: none; border-color: var(--gp-green); box-shadow: 0 0 0 3px rgba(29, 75, 58, 0.12); }

/* ---------- Төлбөрийн хураангуй ---------- */
.gp-summary-card { gap: 14px; }
.gp-sum-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #48514b; }
.gp-sum-row strong { font-weight: 600; font-size: 1.15rem; color: var(--gp-ink); }
.gp-sum-row.is-big strong { font-size: 1.5rem; }
.gp-sum-row span { display: inline-flex; align-items: center; gap: 8px; }
.gp-ok-dot { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #2c8a52; color: #fff; }
.gp-ok-dot svg { width: 13px; height: 13px; stroke-width: 3; }
.gp-sum-row + .gp-balance { margin-top: 4px; }
.gp-balance { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 16px; border-radius: 10px; background: var(--gp-sand); border-top: 1px solid var(--gp-line); }
.gp-balance div { display: grid; gap: 8px; }
.gp-balance strong { font-weight: 600; font-size: 1.05rem; }
.gp-balance span { display: inline-flex; align-items: center; gap: 8px; color: var(--gp-sand-ink); font-size: 0.92rem; }
.gp-balance span svg { width: 18px; height: 18px; }
.gp-balance b { font-family: var(--gp-serif); font-size: 2rem; font-weight: 600; }
.gp-balance.is-done { background: #e3f1e6; }
.gp-balance.is-done span { color: #1c6a3e; }
.gp-summary-card .btn { padding: 13px 18px; font-size: 1rem; }

/* Аяллын баг, тусламж */
.gp-team { list-style: none; padding: 0; display: grid; gap: 14px; }
.gp-team li { display: flex; align-items: center; gap: 12px; }
.gp-team li > div { flex: 1; display: grid; line-height: 1.3; min-width: 0; }
.gp-team .gp-avatar-md { width: 54px; height: 54px; }
.gp-team strong { font-weight: 600; font-size: 1.05rem; }
.gp-team small { color: var(--gp-muted); }
.gp-contact { padding: 9px 12px; font-size: 0.9rem; white-space: nowrap; }
.gp-support { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.gp-support p { color: var(--gp-muted); font-size: 0.86rem; }
.gp-support .gp-link { text-decoration: underline; color: var(--gp-ink); font-weight: 500; }
.gp-logo-dot { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--gp-green); overflow: hidden; }
.gp-logo-dot svg { width: 34px; height: 34px; }
.gp-support-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gp-support-links .btn { padding: 10px 12px; font-size: 0.92rem; }

/* ---------- Аялагчдын мэдээлэл ---------- */
.gp-tabsbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 18px; }
.gp-ttabs { display: flex; gap: 6px; overflow-x: auto; min-width: 0; }
.gp-ttabs button {
  display: inline-flex; align-items: center; gap: 10px; flex: none; padding: 12px 20px; border: 0; border-bottom: 3px solid transparent;
  border-radius: 8px 8px 0 0; background: none; font: inherit; font-size: 0.98rem; color: #48514b; cursor: pointer;
}
.gp-ttabs button:hover { color: var(--gp-ink); }
.gp-ttabs button.is-active { background: var(--gp-green-soft); border-bottom-color: var(--gp-green); color: var(--gp-ink); font-weight: 600; }
.gp-add-tab { color: var(--gp-green) !important; font-weight: 600 !important; }
.gp-tcount { display: inline-flex; align-items: center; gap: 10px; padding-left: 18px; border-left: 1px solid var(--gp-line); color: #48514b; white-space: nowrap; }

.gp-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.gp-field { display: block; font-size: 0.92rem; color: #48514b; }
.gp-field > input, .gp-field > select, .gp-field > textarea, .gp-field > .gp-input-ico { display: block; margin-top: 7px; }
.gp-field.gp-span { grid-column: 1 / -1; }
.gp-req { color: #c0392b; font-style: normal; margin-left: 2px; }
.gp-field input, .gp-field select, .gp-field textarea, .gp-row input, .gp-row textarea {
  width: 100%; height: 46px; padding: 10px 14px; border: 1px solid #d9dbd4; border-radius: 8px; background: #fff;
  font: inherit; font-size: 1rem; color: var(--gp-ink); transition: border-color 0.15s, box-shadow 0.15s;
}
.gp-field textarea, .gp-row textarea { height: auto; min-height: 52px; resize: vertical; }
.gp-field select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2a25' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat; padding-right: 40px; }
.gp-field input[readonly] { background: #f6f6f2; color: var(--gp-muted); }
.gp-field input:hover, .gp-field select:hover { border-color: #bfc4bb; }
.gp-field input:focus, .gp-field select:focus, .gp-field textarea:focus, .gp-row input:focus, .gp-row textarea:focus { outline: none; border-color: var(--gp-green); box-shadow: 0 0 0 3px rgba(29, 75, 58, 0.12); }
.gp-input-ico { position: relative; display: block; }
.gp-input-ico > svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #1c8a4a; width: 22px; height: 22px; }
.gp-input-ico > input { padding-left: 46px; }
.gp-input-ico.is-right > input { padding-left: 14px; padding-right: 48px; }
.gp-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; border: 0; background: none; color: var(--gp-ink); cursor: pointer; border-radius: 6px; }
.gp-eye.is-on { color: var(--gp-green); background: var(--gp-green-soft); }
.is-masked { -webkit-text-security: disc; text-security: disc; letter-spacing: 0.08em; }
.gp-photo-btn { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 0.9rem; font-weight: 600; color: var(--gp-green); }
.gp-photo-btn .gp-avatar { width: 48px; height: 48px; font-size: 1.1rem; }

.gp-diets { display: flex; flex-wrap: wrap; gap: 10px; }
.gp-diet input { position: absolute; opacity: 0; pointer-events: none; }
.gp-diet span { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border: 1px solid #d9dbd4; border-radius: 10px; background: #fff; font-size: 0.97rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.gp-diet span:hover { border-color: #aab3a8; }
.gp-diet svg:nth-of-type(2) { display: none; color: #2c8a52; width: 22px; height: 22px; }
.gp-diet input:checked + span { border-color: var(--gp-green); background: var(--gp-green-soft); font-weight: 600; box-shadow: inset 0 0 0 1px var(--gp-green); }
.gp-diet input:checked + span svg:first-of-type { display: none; }
.gp-diet input:checked + span svg:nth-of-type(2) { display: block; }
.gp-diet input:focus-visible + span { outline: 2px solid var(--gp-green); outline-offset: 2px; }
.gp-rows { display: grid; gap: 14px; }
.gp-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; align-items: start; color: #48514b; font-size: 0.92rem; }
.gp-row > span:first-child { padding-top: 12px; }
.gp-row > span:last-child { display: grid; gap: 6px; }
.gp-row small { color: var(--gp-muted); font-size: 0.82rem; }

.gp-savebar {
  position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 calc(-1 * clamp(16px, 2.6vw, 36px)); padding: 14px clamp(16px, 2.6vw, 36px);
  background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--gp-line); backdrop-filter: blur(6px);
}
.gp-savebar > span { flex: 1; min-width: 180px; color: #48514b; }
.gp-savebar .gp-msg { flex-basis: 100%; order: 5; min-height: 0; }
.gp-savebar .gp-msg:empty { display: none; }
.gp-savebar .btn { padding: 12px 28px; }

/* Паспортын widget */
.gp-passport { gap: 14px; }
.gp-pname { font-size: 1.1rem; font-weight: 600; }
.gp-drop {
  display: grid; justify-items: center; gap: 6px; padding: 30px 18px; border: 2px dashed #cfd5cd; border-radius: 12px;
  background: #fafaf7; text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.gp-drop svg { width: 40px; height: 40px; stroke-width: 1.4; margin-bottom: 6px; }
.gp-drop strong { font-family: var(--gp-serif); font-size: 1.2rem; font-weight: 600; }
.gp-drop span { color: #48514b; }
.gp-drop small { color: var(--gp-muted); font-size: 0.85rem; }
.gp-drop:hover, .gp-drop.is-over { border-color: var(--gp-green); background: var(--gp-green-soft); }
.gp-drop.has-file svg { color: #2c8a52; }
.gp-drop.is-busy { opacity: 0.6; pointer-events: none; }
.gp-drop.is-busy strong::after { content: " …"; }
.gp-lock { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 10px; background: #eef3ef; font-size: 0.9rem; color: #2f3a34; }
.gp-lock svg { color: #1c6a3e; width: 22px; height: 22px; }
.gp-files { list-style: none; padding: 0; display: grid; }
.gp-files li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--gp-line); }
.gp-files li:first-child { border-top: 0; }
.gp-files em { font-style: normal; font-size: 0.85rem; }
.gp-ready { display: inline-flex; align-items: center; gap: 6px; color: #1c6a3e; }
.gp-ready svg { width: 20px; height: 20px; color: #2c8a52; }
.gp-dl { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--gp-ink); cursor: pointer; }
.gp-dl:hover { background: var(--gp-green-soft); }
.gp-dl:disabled { opacity: 0.35; cursor: default; }
.gp-why { grid-template-columns: auto 1fr; gap: 14px; background: #eef3ef; border-color: #dfe8e1; }
.gp-why-ico svg { width: 28px; height: 28px; }
.gp-why div { display: grid; gap: 8px; }
.gp-why p { color: #48514b; font-size: 0.93rem; }

/* ---------- Жагсаалт, хүснэгт, тусламж (Documents, Payments, Support) ---------- */
.gp-list { list-style: none; padding: 0; display: grid; }
.gp-list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--gp-line); }
.gp-list li:last-child { border-bottom: 0; }
.gp-list li > div { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.gp-list small { color: var(--gp-muted); font-size: 0.84rem; }
.gp-list p { margin-top: 6px; font-size: 0.92rem; white-space: pre-wrap; }
.gp-list-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--gp-green-soft); color: var(--gp-green); }
.gp-help-links { display: grid; gap: 8px; }
.gp-help-links a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: #f4f3ee; color: var(--gp-ink); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.gp-help-links a:hover { background: var(--gp-green-soft); color: var(--gp-green); }
.gp-help-links.is-big a { padding: 14px; }
.gp-help-links.is-big span { display: grid; line-height: 1.3; }
.gp-help-links.is-big small { font-weight: 400; color: var(--gp-muted); }
.gp-table-wrap { overflow-x: auto; }
.gp-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.gp-table th { text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gp-muted); padding: 8px 10px; border-bottom: 1px solid var(--gp-line); font-weight: 600; }
.gp-table td { padding: 12px 10px; border-bottom: 1px solid var(--gp-line); vertical-align: middle; }
.gp-table td small { display: block; color: var(--gp-muted); }
.gp-num { text-align: right !important; white-space: nowrap; font-weight: 600; }
.gp-form { gap: 16px; }
.gp-msg { font-size: 0.92rem; min-height: 1.3em; }
.gp-msg[data-kind="error"] { color: #b3261e; }
.gp-msg[data-kind="info"] { color: var(--gp-green); }
.gp-msg[data-kind="ok"] { color: #1c6a3e; font-weight: 600; }
.gp-danger { color: #a3271d !important; }

/* ---------- Цонх (dialog) ---------- */
.gp-dialog { width: min(560px, calc(100% - 24px)); max-height: calc(100vh - 24px); margin: auto; padding: 0; border: 0; border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25); font-family: "Noto Sans", sans-serif; }
.gp-dialog::backdrop { background: rgba(20, 30, 24, 0.5); }
.gp-dialog form { display: grid; }
.gp-dialog h2 { font-family: "Source Serif 4", Georgia, serif; font-weight: 600; font-size: 1.35rem; margin: 0; color: #1f2a25; }
.gp-dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid #e7e5dc; }
.gp-x { border: 0; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: #6b716c; }
.gp-dialog-body { display: grid; gap: 14px; padding: 18px 22px; }
.gp-dialog .gp-msg { padding: 0 22px; }
.gp-dialog-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px 20px; }
.gp-dialog .gp-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gp-dialog .gp-field input { height: 44px; }
.gp-pay-sum { display: grid; gap: 2px; padding: 14px 16px; border-radius: 12px; background: #fbefdc; }
.gp-pay-sum span { color: #6b716c; font-size: 0.9rem; }
.gp-pay-sum strong { font-family: "Source Serif 4", Georgia, serif; font-size: 1.8rem; color: #1f2a25; }
.gp-pay-sum small { color: #7a4f12; }
.gp-method { display: block; cursor: pointer; }
.gp-method input { position: absolute; opacity: 0; }
.gp-method > span { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 12px; padding: 12px 14px; border: 1px solid #e7e5dc; border-radius: 12px; }
.gp-method small { color: #6b716c; grid-column: 2; }
.gp-method svg { grid-row: span 2; color: #1d4b3a; }
.gp-method input:checked + span { border-color: #1d4b3a; box-shadow: inset 0 0 0 1px #1d4b3a; background: #f3f8f4; }
.gp-method.is-soon { cursor: not-allowed; opacity: 0.6; }
.gp-method.is-soon small { font-weight: 700; color: #8a5a12; }
.gp-bank { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: #fafaf7; border: 1px solid #e7e5dc; font-size: 0.88rem; }
.gp-bank div { display: flex; justify-content: space-between; gap: 12px; }
.gp-bank dt { color: #6b716c; }
.gp-bank dd { font-weight: 600; text-align: right; overflow-wrap: anywhere; user-select: all; }

/* ---------- Таблет, утас ---------- */
@media (max-width: 1180px) {
  .gp-layout { grid-template-columns: 1fr; }
  .gp-aside { position: static; }
  .gp-trip-head { grid-template-columns: minmax(0, 1fr) auto; }
  .gp-chips-row { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 900px) {
  .gp { grid-template-columns: 1fr; }
  .gp-side {
    position: sticky; top: 0; z-index: 10; height: auto; flex-direction: row; align-items: center; gap: 10px;
    padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--gp-line); overflow-x: auto;
  }
  .gp-brand span, .gp-side-art, .gp-side-foot .gp-side-link:first-child { display: none; }
  .gp-brand img { width: 92px; }
  .gp-nav { display: flex; gap: 4px; }
  .gp-nav a { padding: 8px 12px; font-size: 0.86rem; white-space: nowrap; gap: 8px; }
  .gp-nav svg { width: 18px; height: 18px; }
  .gp-side-foot { display: flex; border-top: 0; padding-top: 0; margin: 0 0 0 auto; background: none; }
  .gp-me-name, .gp-me > svg { display: none; }
  .gp-me { padding: 2px; }
  .gp-avatar { width: 34px; height: 34px; }
  #gp-signout { padding: 8px; font-size: 0; gap: 0; }
}
@media (max-width: 640px) {
  .gp-main { padding: 12px 14px 0; }
  .gp-brand { display: none; }
  .gp-nav a { flex-direction: column; font-size: 0.72rem; gap: 2px; padding: 6px 8px; }
  .gp-nav .gp-count { position: absolute; margin: -4px 0 0 18px; min-width: 18px; height: 18px; font-size: 0.68rem; }
  .gp-nav a { position: relative; }
  .gp-head p { font-size: 1rem; }
  .gp-card { padding: 18px; }
  .gp-trip { padding: 10px 10px 18px; }
  .gp-trip-img { aspect-ratio: 16 / 9; }
  .gp-trip-head, .gp-facts-row { grid-template-columns: 1fr; }
  .gp-fact { padding: 10px 0; border-left: 0; border-top: 1px solid var(--gp-line); }
  .gp-fact:first-child { border-top: 0; }
  .gp-actions .btn { flex: 1; }
  .gp-todo li { flex-wrap: wrap; gap: 10px 14px; }
  .gp-todo li > div { flex-basis: calc(100% - 50px); }
  .gp-todo .gp-tag { margin-left: 42px; }
  .gp-note-row { flex-direction: column; }
  .gp-fields, .gp-dialog .gp-fields { grid-template-columns: 1fr; }
  .gp-row { grid-template-columns: 1fr; gap: 6px; }
  .gp-row > span:first-child { padding-top: 0; }
  .gp-tabsbar { flex-direction: column; align-items: stretch; padding: 8px; }
  .gp-tcount { border-left: 0; padding: 0 10px 6px; }
  .gp-support { grid-template-columns: auto 1fr; }
  .gp-support .gp-link { grid-column: 1 / -1; }
  .gp-savebar { padding: 10px 14px; gap: 8px; margin: 0 -14px; }
  .gp-savebar > span { display: none; }
  .gp-savebar .btn { flex: 1; padding: 11px 12px; }
  .gp-dialog-foot .btn { flex: 1; justify-content: center; }
  .gp-top .gp-help { padding: 7px 8px; }
}
.gp-note-card .gp-msg:empty { display: none; }

/* ---------- Chat with your guide ---------- */
.gp-chat { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 14px; min-height: 520px; }
.gp-chat-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--gp-line); }
.gp-chat-head > svg { width: 38px; height: 38px; padding: 9px; border-radius: 50%; background: var(--gp-green-soft); color: var(--gp-green); }
.gp-chat-head div { display: grid; }
.gp-chat-head small { color: var(--gp-muted); }
.gp-chat-note { background: var(--gp-sand); color: var(--gp-sand-ink); border-radius: 10px; padding: 10px 14px; font-size: 0.9rem; }
.gp-chat-log { display: flex; flex-direction: column; gap: 10px; max-height: 56vh; min-height: 300px; overflow-y: auto; padding: 4px 2px; }
.gp-chat-empty { margin: auto; text-align: center; }
.gp-bubble { max-width: 78%; align-self: flex-start; display: grid; gap: 3px; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: #f3f2ec; border: 1px solid var(--gp-line); }
.gp-bubble.is-me { align-self: flex-end; background: var(--gp-green); border-color: var(--gp-green); color: #fff; border-radius: 16px 16px 4px 16px; }
.gp-bubble.is-admin:not(.is-me) { background: var(--gp-sand); border-color: #f0dcb8; }
.gp-bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.gp-bubble span, .gp-bubble time { font-size: 0.74rem; opacity: 0.75; }
.gp-bubble time { justify-self: end; }
.gp-chat-form { display: flex; gap: 10px; align-items: flex-end; border-top: 1px solid var(--gp-line); padding-top: 14px; }
.gp-chat-form textarea { flex: 1; resize: none; border: 1px solid #d9dbd3; border-radius: 12px; padding: 10px 12px; font: inherit; }
.gp-chat-form textarea:focus { outline: 2px solid var(--gp-green); outline-offset: 0; }
@media (max-width: 640px) {
  .gp-chat { min-height: 0; }
  .gp-bubble { max-width: 90%; }
}