/*! Guide demo — extra styles not in the shared assets/demo.css. Loaded after it. */

/* lucide-style inline icon sizing (replaces unicode glyph icons) */
.lucide { width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.15em; }

.thumb-sm { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; vertical-align: middle; margin-right: .5rem; display: inline-block; }
.row-actions { white-space: nowrap; }

/* ---------- Reviews ---------- */
.reply-box { background: var(--primary-50); border-left: 3px solid var(--primary-400); padding: .6rem .8rem; border-radius: var(--radius-sm); margin-top: .5rem; }
.stars .star.filled, .star.filled { color: var(--accent-500); }
.stars .star.empty, .star.empty { color: var(--ink-300); }

/* ---------- Domain screen ---------- */
.active-domain-box { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--primary-50); border-radius: var(--radius-md); padding: .8rem 1rem; margin-bottom: 1rem; flex-wrap: wrap; }

/* ---------- Stats bar chart (plain CSS bars, no canvas/libs; heights set via el.style.height,
   CSSOM — allowed under the demo CSP, see assets/tour.js's position() comment) ---------- */
.bar-chart { display: flex; align-items: flex-end; gap: 3px; height: 120px; overflow-x: auto; padding-top: .5rem; }
.bar-col { flex: 1 1 0; min-width: 6px; height: 100%; display: flex; align-items: flex-end; }
.bar-col .bar { width: 100%; background: var(--primary-400); border-radius: 2px 2px 0 0; height: 0; transition: height .4s ease; }
.bar-col .bar:hover { background: var(--primary-600); }

.status-grid, .field-row.mb-1 .status-item { }
.status-item { display: flex; align-items: center; gap: .4rem; font-size: .88rem; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.pending-dot { background: var(--warn-700); }
.confirmed-dot { background: var(--success-500); }
.completed-dot { background: var(--ink-300); }
.canceled-dot { background: var(--danger-500); }

/* ---------- Public site (fake browser frame content) ---------- */
.browser-body { padding: 0; }
/* The /site/book form screen keeps the same storefront header/footer chrome as the other two
   site screens, but its own content is a plain card form rather than another full section. */
.site-book-page { padding: 1.75rem 1.25rem; width: min(560px, 100%); margin: 0 auto; }
.site-book-page h1 { margin: 0 0 .3rem; }

/* ---------- Chip inputs (profile languages/specialties) ---------- */
.chip-input { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; border: 1px solid var(--ink-200); border-radius: var(--radius-sm); padding: .4rem .5rem; }
.chip { display: inline-flex; align-items: center; gap: .3rem; background: var(--primary-50); color: var(--primary-700); border-radius: 999px; padding: .15rem .5rem .15rem .7rem; font-size: .85rem; }
.chip-remove { border: 0; background: none; cursor: pointer; font-size: 1rem; line-height: 1; color: inherit; padding: 0 .1rem; }
.chip-text { border: 0; outline: none; flex: 1 1 100px; min-width: 100px; font: inherit; padding: .2rem; }

/* ---------- Excursion form: schedule days, trail map placeholder, image picker, availability ---------- */
.day-checkboxes { display: flex; flex-wrap: wrap; gap: .4rem; }
.day-checkbox { border: 1px solid var(--ink-200); border-radius: var(--radius-sm); padding: .3rem .6rem; font-size: .85rem; cursor: pointer; }
.day-checkbox.selected { background: var(--primary-500); color: #fff; border-color: var(--primary-500); }
.trail-map-placeholder { border: 1px dashed var(--ink-300); border-radius: var(--radius-md); padding: 1.5rem; text-align: center; color: var(--ink-500); background: var(--primary-50); }
.img-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; }
.img-picker-item { position: relative; border: 2px solid transparent; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; padding: 0; background: none; display: block; }
.img-picker-item img { width: 100%; height: 64px; object-fit: cover; display: block; }
.img-picker-item.selected { border-color: var(--primary-500); }
.img-picker-item .cover-badge { position: absolute; top: 2px; left: 2px; background: var(--primary-600); color: #fff; font-size: .65rem; padding: .05rem .35rem; border-radius: var(--radius-sm); }
.avail-row { display: flex; align-items: center; gap: .75rem; padding: .4rem 0; border-bottom: 1px solid var(--ink-100); flex-wrap: wrap; }
.avail-row.blocked { opacity: .55; }
.avail-add-row { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.video-thumb-link { display: inline-flex; align-items: center; gap: .5rem; position: relative; }
.video-thumb-link img { width: 120px; height: 68px; object-fit: cover; border-radius: var(--radius-sm); }
.video-thumb-link .play-badge { position: absolute; left: 44px; top: 18px; font-size: 1.6rem; color: #fff; text-shadow: 0 0 4px rgba(0,0,0,.6); }

/* ========================================================================
   Public site (fake browser frame content) — a plain-HTML/CSS port of the real
   tenant storefront: src/app/shared/components/header (platform-strip +
   confident-header), src/app/features/excursions/guide-profile.component
   (hero/adventures/story/reviews/final-cta), excursion-detail.component
   (gallery/content/booking-panel) and shared/components/footer. Class names
   and literal hex colours are copied from those components' own .scss so
   this reads as a port, not a guess; --gs-* custom properties hold the
   literal palette (forest/sun/clay/cream/paper) scoped to .guide-storefront
   so they never collide with the dashboard's --primary-* tokens. ======= */
.guide-storefront {
  --gs-forest: #0f766e; --gs-forest-deep: #134e4a; --gs-moss: #0d9488; --gs-sun: #f59e0b;
  --gs-clay: #b45309; --gs-cream: #f3eee4; --gs-paper: #fbf8f2; --gs-ink: #0b1a19;
  --gs-muted: #4b5b58; --gs-line: #e9e2d4;
  background: var(--gs-paper);
  background-image: url('/assets/brand/topo-lines.svg');
  background-size: 480px; background-repeat: repeat;
  color: var(--gs-ink);
  /* ponytail: the real guide-storefront sets overflow:hidden to clip decorative bleed (its
     sections already clip their own), but here it is nested inside .browser-body's own
     overflow-y:auto scroll container. A hidden-overflow ancestor still counts as a scroll
     container for Element.scrollIntoView() purposes even though it can never actually scroll
     (height is auto, so scrollHeight === clientHeight) — it was swallowing the tour's
     scrollIntoView calls before they ever reached .browser-body, leaving targets off-screen. */
}

/* ---- platform strip + confident header (shared/components/header) ---- */
.platform-strip { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; padding: .4rem 1rem; background: var(--gs-cream); border-bottom: 1px solid var(--gs-cream); font-size: .76rem; line-height: 1.4; }
.platform-strip__where { color: #5b6b80; }
.platform-strip__out { display: inline-block; color: var(--gs-forest); font-weight: 700; text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.platform-strip__out::after { content: ' \2197'; font-weight: 400; }
@media (max-width: 480px) { .platform-strip__where { display: none; } }

.confident-header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--gs-line); }
.confident-header .header-content { display: flex; align-items: center; gap: 1rem; padding: .55rem 1.1rem; }
.confident-header .logo-section { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: inherit; flex-shrink: 0; }
.confident-header .logo-icon { width: 34px; height: 34px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--gs-line); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); flex-shrink: 0; }
.confident-header .logo-icon img { width: 22px; height: 22px; object-fit: contain; }
.confident-header .logo-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.confident-header .brand-name { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; color: var(--gs-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.confident-header .role-badge { font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gs-forest); }
.confident-header .api-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #4caf50; box-shadow: 0 0 4px rgba(76,175,80,.6); flex-shrink: 0; margin-left: -.2rem; }
.confident-header .desktop-nav { flex: 1; display: flex; align-items: center; justify-content: center; gap: .4rem; }
.confident-header .nav-link { display: inline-flex; align-items: center; gap: .3rem; padding: .4rem .55rem; border-radius: var(--radius-md); color: var(--gs-muted); font-weight: 650; font-size: .82rem; text-decoration: none; background: none; border: 0; cursor: pointer; white-space: nowrap; }
.confident-header .nav-link:hover { background: var(--gs-cream); color: var(--gs-clay); }
.confident-header .auth-section { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.confident-header .login-btn { background: none; border: 0; color: var(--gs-muted); font-weight: 650; font-size: .82rem; padding: .45rem .55rem; border-radius: var(--radius-md); cursor: pointer; white-space: nowrap; }
.confident-header .login-btn:hover { background: var(--gs-cream); }
.confident-header .register-btn { background: var(--gs-forest); color: #fff; border: 0; font-weight: 700; font-size: .82rem; padding: .5rem .85rem; border-radius: var(--radius-md); cursor: pointer; white-space: nowrap; }
.confident-header .register-btn:hover { background: var(--gs-forest-deep); }
@media (max-width: 560px) { .confident-header .desktop-nav, .confident-header .login-btn { display: none; } }
@media (max-width: 420px) { .confident-header .role-badge { display: none; } }

/* ---- secondary trail-nav (sticky scroll-spy row under the hero) ---- */
.trail-nav { position: sticky; top: 0; z-index: 19; border-bottom: 1px solid var(--gs-line); background: rgba(251,248,242,.95); }
.trail-nav-inner { display: flex; align-items: center; gap: 1.5rem; padding: .7rem 1.1rem; overflow-x: auto; }
.trail-nav-inner a, .trail-nav-inner button { padding: .3rem 0; color: #46534c; border: 0; background: none; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; }
.trail-nav-inner a:hover, .trail-nav-inner button:hover { color: var(--gs-clay); }
.trail-nav-inner .share-link { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; }

/* ---- hero (mirrors guide-profile.component .expedition-hero; colours are the real
   component's literal hex values, not the dashboard's --primary-* tokens) ---- */
.expedition-hero { position: relative; min-height: 420px; display: grid; align-items: end; overflow: hidden; background: var(--gs-forest-deep); color: #fff; }
.expedition-hero .hero-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.expedition-hero .hero-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(4,25,20,.9) 0%, rgba(4,25,20,.6) 55%, rgba(4,25,20,.2) 100%), linear-gradient(0deg, rgba(4,23,18,.92) 0%, transparent 55%); }
.expedition-hero .hero-fallback { position: absolute; inset: 0; z-index: 0; background: #1c4b3d; }
.expedition-hero .hero-landscape { position: absolute; left: 50%; bottom: 0; width: min(1200px, 100%); transform: translateX(-50%); opacity: .9; }
.expedition-hero .topography { position: absolute; inset: 0; z-index: 1; opacity: .14; background-image: repeating-radial-gradient(ellipse at 78% 54%, transparent 0 18px, rgba(255,255,255,.6) 19px 20px, transparent 21px 34px); transform: scale(1.2); }
.expedition-hero .hero-inner { position: relative; z-index: 2; width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 3rem 0 2.5rem; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2.5rem; }
.expedition-hero .hero-copy { max-width: 640px; }
.expedition-hero .hero-eyebrow { display: flex; align-items: center; gap: .7rem; margin: 0 0 1rem; color: var(--gs-sun); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.expedition-hero .hero-eyebrow span { width: 30px; height: 1px; background: currentColor; }
.expedition-hero .guide-avatar { width: 68px; height: 68px; margin-bottom: 1rem; display: grid; place-items: center; border: 3px solid rgba(255,255,255,.9); border-radius: 50%; background: var(--gs-forest); color: #fff; font-weight: 800; font-size: 1.35rem; box-shadow: 0 14px 34px rgba(0,0,0,.25); }
.expedition-hero h1 { margin: 0; font-size: clamp(2.1rem, 6vw, 4.2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; }
.expedition-hero .hero-subtitle { max-width: 560px; margin: 1.1rem 0 0; color: rgba(255,255,255,.85); font-size: 1rem; line-height: 1.65; }
.expedition-hero .hero-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.expedition-hero .hero-meta span { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .75rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(8,31,25,.32); font-size: .78rem; font-weight: 650; }
.expedition-hero .hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.expedition-hero .hero-stats { display: flex; gap: 1.5rem; position: relative; z-index: 2; border-left: 1px solid rgba(255,255,255,.25); padding-left: 0; min-width: 190px; }
.expedition-hero .hero-stats div { padding: .3rem 0 .3rem 1.5rem; display: flex; flex-direction: column; }
.expedition-hero .hero-stats strong { font-size: 1.8rem; font-weight: 800; }
.expedition-hero .hero-stats span { margin-top: .25rem; color: rgba(255,255,255,.65); font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* Guides without a cover photo: same light "no cover" treatment as the real page. */
.expedition-hero:not(.has-cover) { background: transparent; min-height: 0; color: var(--gs-ink); }
.expedition-hero:not(.has-cover) .hero-shade { display: none; }
.expedition-hero:not(.has-cover) .hero-inner { padding: 2.75rem 0 4.5rem; }
.expedition-hero:not(.has-cover) .hero-subtitle { color: var(--gs-muted); }
.expedition-hero:not(.has-cover) .hero-meta span { color: var(--gs-ink); border-color: var(--gs-line); background: #fff; }
.expedition-hero:not(.has-cover) .hero-stats { color: var(--gs-ink); border-left-color: var(--gs-line); }
.expedition-hero:not(.has-cover) .hero-stats span { color: var(--gs-muted); }
.expedition-hero:not(.has-cover) .btn-glass { color: var(--gs-forest); border-color: var(--gs-forest); background: transparent; }

@media (max-width: 780px) {
  .expedition-hero .hero-inner { display: block; padding: 2.4rem 0 1.75rem; }
  .expedition-hero .hero-stats { margin-top: 1.75rem; width: 100%; display: grid; grid-template-columns: repeat(3,1fr); border-left: 0; border-top: 1px solid rgba(255,255,255,.22); padding-top: .4rem; }
  .expedition-hero .hero-stats div { padding: .6rem .3rem 0 0; }
  .expedition-hero:not(.has-cover) .hero-stats { border-top-color: var(--gs-line); }
}
@media (max-width: 420px) {
  .expedition-hero .hero-actions .gs-btn { width: 100%; justify-content: center; }
}

/* ---- adventures / "elige tu ruta" section ---- */
.gs-section { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 3.25rem 0; }
.gs-section-heading { margin-bottom: 1.75rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; }
.gs-eyebrow { margin: 0 0 .5rem; color: var(--gs-clay); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.gs-eyebrow.light { color: var(--gs-sun); }
.gs-section-heading h2 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; max-width: 36rem; }
.gs-section-heading > p { margin: 0; max-width: 26rem; color: var(--gs-muted); font-size: .92rem; line-height: 1.7; }

.adventure-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }
.adventure-card { min-width: 0; overflow: hidden; color: inherit; border: 1px solid var(--gs-line); border-radius: var(--radius-lg); background: #fff; text-decoration: none; box-shadow: 0 15px 40px rgba(22,40,32,.06); display: block; }
.adventure-card:hover { box-shadow: 0 20px 50px rgba(22,40,32,.12); }
.adventure-image { position: relative; height: 190px; overflow: hidden; background: #dce3da; }
.adventure-image img { width: 100%; height: 100%; object-fit: cover; }
.adventure-image .image-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,27,21,.55), transparent 55%); }
.adventure-image .difficulty, .adventure-image .card-price { position: absolute; z-index: 1; top: 12px; padding: .35rem .55rem; border-radius: 3px; font-size: .64rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.adventure-image .difficulty { left: 12px; color: var(--gs-forest-deep); background: var(--gs-sun); }
.adventure-image .difficulty[data-level='MODERATE'] { background: #f1a65f; }
.adventure-image .difficulty[data-level='HARD'] { color: #fff; background: var(--gs-clay); }
.adventure-image .card-price { right: 12px; color: #fff; background: rgba(8,27,21,.72); }
.adventure-body { padding: 1.1rem 1.15rem 1.25rem; }
.adventure-body .category { margin-bottom: .4rem; color: var(--gs-clay); font-size: .64rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.adventure-body h3 { margin: 0; font-size: 1.14rem; font-weight: 650; line-height: 1.2; }
.adventure-body > p { margin: .55rem 0 .85rem; color: var(--gs-muted); font-size: .84rem; line-height: 1.55; }
.adventure-facts { padding: .7rem 0; display: flex; flex-wrap: wrap; gap: .5rem .85rem; border-top: 1px solid #e9ece6; border-bottom: 1px solid #e9ece6; }
.adventure-facts span { display: inline-flex; align-items: center; gap: .3rem; color: #536058; font-size: .71rem; font-weight: 650; }
.adventure-card .card-cta { margin-top: .8rem; display: inline-flex; align-items: center; gap: .4rem; color: var(--gs-forest); font-size: .76rem; font-weight: 850; }
.adventure-card:hover .card-cta { color: var(--gs-clay); }
@media (max-width: 480px) { .adventure-grid { grid-template-columns: 1fr; } }

/* ---- story / about section ---- */
.story-section { position: relative; background: var(--gs-cream); overflow: hidden; }
.story-inner { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 3.25rem 0; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(280px,.8fr); gap: 3rem; }
.story-copy h2 { max-width: 34rem; margin: 0; font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.story-bio { max-width: 34rem; margin: 1.2rem 0 0; color: var(--gs-muted); font-size: .96rem; line-height: 1.8; white-space: pre-line; }
.social-links { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.social-links a { padding: .45rem .6rem; display: inline-flex; align-items: center; gap: .35rem; color: var(--gs-ink); border: 1px solid var(--gs-line); border-radius: 4px; font-size: .74rem; font-weight: 700; text-decoration: none; background: #fff; }
.field-notes { display: flex; flex-direction: column; justify-content: center; }
.field-note { padding: 1.2rem 0; display: grid; grid-template-columns: 38px 1fr; gap: .9rem; border-bottom: 1px solid var(--gs-line); }
.field-note:first-child { border-top: 1px solid var(--gs-line); }
.field-note .note-icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--gs-forest); border-radius: 50%; background: #fff; font-size: 1.1rem; }
.field-note h3 { margin: 2px 0 .55rem; color: var(--gs-ink); font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.field-note p { margin: 0; color: var(--gs-muted); font-size: .82rem; line-height: 1.6; }
.field-note .tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.field-note .tags span { padding: .3rem .5rem; color: var(--gs-ink); border-radius: 3px; background: #fff; border: 1px solid var(--gs-line); font-size: .7rem; font-weight: 650; }
@media (max-width: 780px) { .story-inner { grid-template-columns: 1fr; gap: 2rem; } }

/* ---- reviews section ---- */
.reviews-section { background: var(--gs-paper); }
.gs-section-heading.reviews-heading { align-items: center; }
.rating-summary { display: flex; align-items: center; gap: .9rem; }
.rating-summary strong { font-size: 2.3rem; font-weight: 800; }
.rating-summary .stars { color: var(--gs-sun); font-size: .85rem; letter-spacing: .07em; display: block; }
.rating-summary > span { display: flex; flex-direction: column; color: var(--gs-muted); font-size: .72rem; font-weight: 650; }
.review-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.1rem; }
.review-card { position: relative; padding: 1.5rem; border: 1px solid var(--gs-line); border-radius: var(--radius-lg); background: #fff; }
.review-card .quote-mark { position: absolute; right: 1.4rem; top: 1.3rem; color: rgba(180,83,9,.2); font-size: 1.8rem; font-weight: 800; }
.review-stars { display: flex; color: var(--gs-sun); font-size: .82rem; letter-spacing: .07em; }
.review-comment { min-height: 48px; margin: 1rem 0 1.25rem; color: #3e4a43; font-size: 1.02rem; line-height: 1.6; }
.reviewer { display: flex; align-items: center; gap: .65rem; }
.reviewer .reviewer-avatar { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--gs-moss); font-weight: 800; flex-shrink: 0; }
.reviewer div { display: flex; flex-direction: column; }
.reviewer strong { font-size: .82rem; }
.reviewer div span { color: var(--gs-muted); font-size: .72rem; }
.guide-reply { margin-top: 1.1rem; padding: .75rem .9rem; border-left: 3px solid var(--gs-sun); background: var(--gs-cream); }
.guide-reply strong { font-size: .74rem; }
.guide-reply p { margin: .3rem 0 0; color: var(--gs-muted); font-size: .8rem; line-height: 1.55; }
.reviews-empty { min-height: 160px; display: grid; place-items: center; gap: .6rem; color: var(--gs-muted); border: 1px dashed #cbd2c7; border-radius: var(--radius-lg); background: var(--gs-cream); text-align: center; padding: 1.5rem; }
@media (max-width: 780px) { .review-grid { grid-template-columns: 1fr; } .rating-summary { justify-self: start; } }

/* ---- final CTA band ---- */
.final-cta { position: relative; isolation: isolate; width: min(1180px, calc(100% - 48px)); margin: 0 auto 2.5rem; padding: 2.4rem 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.75rem; color: var(--gs-ink); border: 1px solid var(--gs-line); border-radius: var(--radius-xl); background: #fff; overflow: hidden; }
.final-cta .topography { position: absolute; inset: 0; opacity: .1; background-image: repeating-radial-gradient(ellipse at 78% 54%, transparent 0 18px, rgba(15,118,110,.9) 19px 20px, transparent 21px 34px); }
.final-cta > div:not(.final-actions) { position: relative; z-index: 1; max-width: 34rem; }
.final-cta h2 { margin: 0; color: var(--gs-ink); font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.final-cta p:not(.gs-eyebrow) { margin: .8rem 0 0; color: var(--gs-muted); }
.final-actions { position: relative; z-index: 1; flex-shrink: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
@media (max-width: 640px) { .final-cta { flex-direction: column; align-items: flex-start; padding: 1.75rem 1.4rem; } .final-actions .gs-btn { width: 100%; justify-content: center; } }

/* ---- shared button shape + colour variants used across hero / cta band (mirrors .button in
   guide-profile.scss); scoped to .guide-storefront so "sun/glass/outline" never collide with
   any other .btn-* variant in the shared dashboard CSS. ---- */
.guide-storefront .gs-btn { min-height: 46px; padding: 0 1.1rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 5px; border: 1px solid transparent; font-weight: 800; font-size: .86rem; text-decoration: none; cursor: pointer; background: none; }
.guide-storefront .btn-sun { color: var(--gs-forest-deep); background: var(--gs-sun); border-color: var(--gs-sun); }
.guide-storefront .btn-sun:hover { background: #fbbf24; }
.guide-storefront .btn-glass { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.1); }
.guide-storefront .btn-glass:hover { background: rgba(255,255,255,.18); }
.guide-storefront .btn-outline { color: var(--gs-forest); border-color: var(--gs-forest); background: transparent; }
.guide-storefront .btn-outline:hover { background: rgba(15,118,110,.06); }

/* ---- footer (mirrors shared/components/footer) ---- */
.footer { position: relative; background: var(--gs-forest); color: #fff; padding: 1rem 1.5rem; margin-top: clamp(50px, 8vw, 90px); }
.footer-landscape { position: absolute; left: 50%; bottom: calc(100% - 4px); width: min(1180px, 100%); height: auto; transform: translateX(-50%); pointer-events: none; }
.footer-content { max-width: 1180px; margin: 0 auto; text-align: center; }
.footer-content p { margin: 0; font-size: .85rem; opacity: .85; }

/* ---- chip used inline for languages/specialties on the "about" copy block ---- */
.chip-static { display: inline-flex; background: var(--primary-50); color: var(--primary-700); border-radius: 999px; padding: .15rem .65rem; font-size: .8rem; margin: 0 .3rem .3rem 0; }

/* ---- excursion detail page (mirrors excursion-detail.component) ---- */
.excursion-detail-page { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 1.5rem 0 3rem; }
.gs-back-link { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--gs-forest); text-decoration: none; margin-bottom: 1.1rem; font-weight: 650; }
.detail-layout { display: grid; grid-template-columns: 1fr 360px; gap: 2rem; align-items: start; }
.gallery { margin-bottom: 1.6rem; border-radius: var(--radius-lg); overflow: hidden; }
.gallery-main { height: 340px; background: #dce3da; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumbs { display: flex; gap: .5rem; padding: .5rem 0 0; flex-wrap: wrap; }
.gallery-thumbs .thumb-button { display: flex; padding: 0; border: 0; background: none; border-radius: var(--radius-sm); cursor: pointer; }
.gallery-thumbs img { width: 76px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); opacity: .65; border: 2px solid transparent; }
.gallery-thumbs img.active, .gallery-thumbs img:hover { opacity: 1; border-color: var(--gs-forest); }
.detail-content-section { padding: 1.3rem 0; border-bottom: 1px solid var(--gs-line); }
.detail-content-section:last-child { border-bottom: none; }
.detail-content-section h2 { font-size: 1.15rem; font-weight: 700; margin: 0 0 .6rem; }
.detail-title-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .9rem; }
.detail-title-row > div { min-width: 0; }
.detail-title-row h1 { font-size: 1.6rem; font-weight: 700; margin: .2rem 0 0; }
.detail-category-tag { font-size: .7rem; font-weight: 650; color: var(--gs-forest); background: #f0fdfa; padding: .2rem .6rem; border-radius: 100px; display: inline-block; margin-bottom: .4rem; }
.detail-difficulty-badge { padding: .35rem .8rem; border-radius: 100px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.detail-difficulty-badge.badge-easy { background: #dcfce7; color: #166534; }
.detail-difficulty-badge.badge-moderate { background: #fef9c3; color: #854d0e; }
.detail-difficulty-badge.badge-hard { background: #fee2e2; color: #991b1b; }
.detail-meta-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .9rem; }
.detail-meta-row span { display: flex; align-items: center; gap: .35rem; font-size: .84rem; color: var(--gs-muted); }
.detail-description-text { font-size: .92rem; color: var(--gs-muted); line-height: 1.7; margin: 0; }
.guide-teaser { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; background: var(--gs-cream); border-radius: var(--radius-lg); text-decoration: none; color: inherit; }
.guide-teaser:hover { background: #ece5d5; }
.guide-teaser .guide-label { font-weight: 650; color: var(--gs-ink); margin: 0 0 .2rem; }
.guide-teaser .guide-link { font-size: .82rem; color: var(--gs-forest); font-weight: 650; }
.booking-panel { background: #fff; border: 1px solid var(--gs-line); border-radius: var(--radius-xl); padding: 1.5rem; box-shadow: 0 4px 16px rgba(0,0,0,.08); position: sticky; top: 76px; }
.booking-panel .price-display { margin-bottom: 1rem; }
.booking-panel .price-amount { font-size: 1.7rem; font-weight: 700; }
.booking-panel .price-per { font-size: .84rem; color: var(--gs-muted); }
.booking-panel .no-charge-note { text-align: center; font-size: .72rem; color: var(--gs-muted); margin: .7rem 0 0; }
.booking-panel-cta { width: 100%; text-align: center; display: block; }
@media (max-width: 900px) { .detail-layout { grid-template-columns: 1fr; } .booking-panel { position: static; } }