/* GuideConnect — design tokens on top of Bootstrap 5.3 (UI-02) */
:root {
  --gc-ocean: #0e7c86;
  --gc-ocean-dark: #0a5c64;
  --gc-ocean-soft: #e3f4f5;
  --gc-savanna: #c97b1e;
  --gc-savanna-dark: #9b5c10;
  --gc-savanna-soft: #fbf0e1;
  --gc-ink: #17242a;
  --gc-muted: #5f6f76;
  --gc-sand: #f7f5f0;
  --gc-radius: 14px;

  --bs-primary: var(--gc-ocean);
  --bs-primary-rgb: 14, 124, 134;
  --bs-link-color: var(--gc-ocean-dark);
  --bs-link-hover-color: var(--gc-ocean);
  --bs-body-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-color: var(--gc-ink);
  --bs-border-radius: 10px;
}
body { background: var(--gc-sand); }
h1, h2, h3, .h1, .h2, .h3 { letter-spacing: -0.02em; font-weight: 800; }

.btn-primary { --bs-btn-bg: var(--gc-ocean); --bs-btn-border-color: var(--gc-ocean); --bs-btn-hover-bg: var(--gc-ocean-dark); --bs-btn-hover-border-color: var(--gc-ocean-dark); --bs-btn-active-bg: var(--gc-ocean-dark); --bs-btn-disabled-bg: var(--gc-ocean); --bs-btn-disabled-border-color: var(--gc-ocean); }
.btn-outline-primary { --bs-btn-color: var(--gc-ocean); --bs-btn-border-color: var(--gc-ocean); --bs-btn-hover-bg: var(--gc-ocean); --bs-btn-hover-border-color: var(--gc-ocean); --bs-btn-active-bg: var(--gc-ocean-dark); }
.btn-savanna { background: var(--gc-savanna); color: #fff; border-color: var(--gc-savanna); }
.btn-savanna:hover { background: var(--gc-savanna-dark); color: #fff; }
.text-ocean { color: var(--gc-ocean) !important; }
.text-savanna { color: var(--gc-savanna-dark) !important; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--gc-ocean); box-shadow: 0 0 0 .2rem rgba(14,124,134,.2); }
.form-check-input:checked { background-color: var(--gc-ocean); border-color: var(--gc-ocean); }
.page-link { color: var(--gc-ocean-dark); }
.active > .page-link { background: var(--gc-ocean); border-color: var(--gc-ocean); }

.site-nav .nav-link { font-weight: 500; }
.notif-dot { position: absolute; top: 2px; right: -2px; font-size: .62rem; }
.site-footer { background: #fff; border-top: 1px solid #e7e3da; }
.card { border: 1px solid #ebe7de; border-radius: var(--gc-radius); }
.shadow-soft { box-shadow: 0 6px 24px rgba(23,36,42,.06); }

/* ---------- Hero / home */
.hero { background: linear-gradient(135deg, #0a5c64 0%, #0e7c86 55%, #c97b1e 140%); color: #fff; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: auto -10% -60px -10%; height: 140px; background: var(--gc-sand); border-radius: 50% 50% 0 0; }
.hero .lead { color: rgba(255,255,255,.85); }
.choose-card { display: block; border-radius: 20px; padding: 2rem; color: var(--gc-ink); text-decoration: none; background: #fff; border: 2px solid transparent; transition: transform .15s, border-color .15s, box-shadow .15s; height: 100%; }
.choose-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(23,36,42,.1); color: var(--gc-ink); }
.choose-card .icon { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; font-size: 2rem; margin-bottom: 1rem; }
.choose-card.surf:hover { border-color: var(--gc-ocean); }
.choose-card.surf .icon { background: var(--gc-ocean-soft); color: var(--gc-ocean); }
.choose-card.safari:hover { border-color: var(--gc-savanna); }
.choose-card.safari .icon { background: var(--gc-savanna-soft); color: var(--gc-savanna-dark); }
.step-num { width: 36px; height: 36px; border-radius: 50%; background: var(--gc-ocean-soft); color: var(--gc-ocean-dark); display: grid; place-items: center; font-weight: 700; }

/* ---------- Badges */
.badge-cat { font-weight: 600; }
.badge-surfing { background: var(--gc-ocean-soft); color: var(--gc-ocean-dark); }
.badge-safari { background: var(--gc-savanna-soft); color: var(--gc-savanna-dark); }
.badge-verified { background: #e6f5ec; color: #17733f; font-weight: 600; }
.stars { color: #e7a200; white-space: nowrap; }
.stars-sm { font-size: .85rem; }

/* ---------- Guide cards & profile */
.guide-card { transition: box-shadow .15s, transform .15s; }
.guide-card:hover { box-shadow: 0 10px 28px rgba(23,36,42,.09); transform: translateY(-2px); }
.guide-card .avatar, .avatar { width: 72px; height: 72px; border-radius: 16px; object-fit: cover; background: #eee; flex-shrink: 0; }
.avatar-lg { width: 128px; height: 128px; border-radius: 24px; object-fit: cover; }
.avatar-sm { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.chip { display: inline-block; padding: .2rem .6rem; border-radius: 999px; background: #f1efe9; font-size: .8rem; margin: 0 .25rem .25rem 0; }
.chip-closed { background: #fde8e8; color: #a12020; }
.filter-panel { position: sticky; top: 80px; }
.gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; cursor: zoom-in; }
.rating-bar { height: 8px; background: #eee; border-radius: 4px; overflow: hidden; }
.rating-bar > div { height: 100%; background: #e7a200; }
.cal-month { font-size: .8rem; }
.cal-month td, .cal-month th { text-align: center; padding: .3rem; width: 14.28%; }
.cal-month td.blocked { background: #fde8e8; color: #a12020; border-radius: 6px; }
.cal-month td.booked { background: var(--gc-ocean-soft); color: var(--gc-ocean-dark); border-radius: 6px; font-weight: 600; }
.cal-month td.past { color: #bbb; }

/* ---------- Wizard (UI-01) */
.wizard-steps { display: flex; gap: .25rem; overflow-x: auto; padding-bottom: .25rem; }
.wizard-steps a { flex: 1 0 auto; text-align: center; font-size: .8rem; padding: .55rem .75rem; border-radius: 10px; background: #fff; border: 1px solid #ebe7de; color: var(--gc-muted); text-decoration: none; white-space: nowrap; }
.wizard-steps a.done { color: var(--gc-ocean-dark); border-color: var(--gc-ocean-soft); background: var(--gc-ocean-soft); }
.wizard-steps a.current { background: var(--gc-ocean); color: #fff; border-color: var(--gc-ocean); font-weight: 600; }

/* ---------- Chat */
.chat-box { max-height: 360px; overflow-y: auto; background: #faf9f6; border-radius: 12px; padding: 1rem; }
.chat-msg { max-width: 80%; padding: .5rem .8rem; border-radius: 14px; margin-bottom: .5rem; background: #fff; border: 1px solid #eee; }
.chat-msg.mine { margin-left: auto; background: var(--gc-ocean-soft); border-color: transparent; }
.chat-msg .meta { font-size: .7rem; color: var(--gc-muted); }

/* ---------- Timeline (request status) */
.status-track { display: flex; justify-content: space-between; position: relative; }
.status-track::before { content: ""; position: absolute; top: 14px; left: 8%; right: 8%; height: 2px; background: #e2ded4; }
.status-track .st { position: relative; text-align: center; flex: 1; font-size: .75rem; color: var(--gc-muted); }
.status-track .st .dot { width: 28px; height: 28px; border-radius: 50%; margin: 0 auto .25rem; background: #fff; border: 2px solid #e2ded4; display: grid; place-items: center; }
.status-track .st.on .dot { background: var(--gc-ocean); border-color: var(--gc-ocean); color: #fff; }
.status-track .st.on { color: var(--gc-ink); font-weight: 600; }

/* ---------- Star input */
.star-input { display: inline-flex; flex-direction: row-reverse; gap: .1rem; }
.star-input input { display: none; }
.star-input label { font-size: 1.6rem; color: #d6d2c8; cursor: pointer; line-height: 1; }
.star-input.sm label { font-size: 1.15rem; }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label { color: #e7a200; }

/* ---------- Admin */
.admin-body { background: #f3f5f6; }
.admin-sidebar { width: 250px; min-height: 100vh; background: #12262c; position: fixed; top: 0; left: 0; z-index: 1030; overflow-y: auto; }
.admin-sidebar .brand { color: #fff; font-weight: 800; padding: 1.1rem 1.25rem; display: flex; gap: .5rem; align-items: center; text-decoration: none; }
.admin-sidebar .nav-link { color: #b9c7cb; padding: .55rem 1.25rem; border-left: 3px solid transparent; font-size: .92rem; }
.admin-sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.04); }
.admin-sidebar .nav-link.active { color: #fff; background: rgba(14,124,134,.25); border-left-color: #2fb4bf; }
.admin-sidebar .nav-section { color: #6f8a91; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; padding: 1rem 1.25rem .35rem; }
.admin-main { margin-left: 250px; min-height: 100vh; }
.admin-topbar { background: #fff; border-bottom: 1px solid #e5e9eb; }
.stat-card .stat-value { font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.stat-card .stat-label { color: var(--gc-muted); font-size: .85rem; }
.stat-card .stat-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; }
.table > :not(caption) > * > * { vertical-align: middle; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gc-muted); font-weight: 600; }
.bar-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; font-size: .85rem; }
.bar-row .bar { flex: 1; height: 10px; background: #edf0f1; border-radius: 5px; overflow: hidden; }
.bar-row .bar > div { height: 100%; background: var(--gc-ocean); }
.bar-row .bar.safari > div { background: var(--gc-savanna); }
@media (max-width: 991.98px) {
  .admin-sidebar { transform: translateX(-100%); transition: transform .2s; }
  .admin-sidebar.show { transform: none; }
  .admin-main { margin-left: 0; }
  .filter-panel { position: static; }
}