:root {
  /* Brand palette sourced from the CRESTMAS HUB logo */
  --brand: #6D1FCB;        /* primary violet — cap, book, emblem */
  --brand-dark: #4B0F9E;   /* deep violet — hover / pressed states */
  --brand-soft: #F3ECFE;   /* light violet tint — surfaces, hovers */
  --gold: #F2A900;         /* accent gold — star, "HUB" wordmark */
  --gold-dark: #C97F00;
  --ink: #0A0F3D;          /* navy — "CRESTMAS" wordmark */
}

body { color: var(--ink); }

/*
 * Single canonical logo size used everywhere the brand mark appears
 * (top nav, auth cards, form builder, public form pages, footer credit,
 * error pages). One size, no per-page overrides — if the logo needs to
 * look bigger somewhere, that's a design decision to revisit deliberately,
 * not something that should drift page-to-page by accident.
 */
.brand-logo { height: 36px; width: auto; max-width: 100%; display: block; object-fit: contain; }

/* Auth cards (login/register/forgot/reset) sit alone on an otherwise empty
   card, so a slightly larger mark reads better there than the compact nav
   size — still one deliberate, consistent size for that one context, not
   page-by-page drift. */
.auth-logo-lg { height: 46px; }

/* Accessible skip-to-content link: hidden off-screen until keyboard-focused */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--brand);
  color: #fff;
  padding: 0.65rem 1rem;
  border-radius: 0 0 0.5rem 0;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

.navbar-brand { font-weight: 700; letter-spacing: -0.02em; }

.btn-primary {
  background-color: var(--brand);
  border-color: var(--brand);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--brand-dark);
  border-color: var(--brand-dark);
}
.text-brand { color: var(--brand); }

.auth-card {
  max-width: 420px;
  margin: 4rem auto;
  overflow: hidden; /* defensive: nothing (incl. the logo) can visually spill outside the card */
}

@media (max-width: 576px) {
  .auth-card { margin: 2rem auto; }
}

/* ------------------------------------------------------------------ */
/* Responsive: form builder toolbar (Preview/Responses/Settings/etc.) */
/* ------------------------------------------------------------------ */
/* Bootstrap's navbar component sets justify-content: space-between on
   this container by default — fine on a narrow/medium screen, but on a
   wide monitor it stretches the title and the action-buttons group to
   the far opposite edges with a huge, awkward gap between them, and
   leaves the buttons flush against the browser's edge with no breathing
   room. Two changes fix both at once:
     1. justify-content: flex-start — stop Bootstrap distributing space
        between EVERY item; instead, everything packs together
        left-to-right by default...
     2. ...except the status badge (Live/Closed/etc.), which gets a
        single, deliberate ms-auto margin (see the badge markup) — that's
        the ONE place extra space collects, pushing just that badge and
        everything after it (Settings, Take a tour, etc.) over to the
        right as one cohesive group, not spread out individually.
   Capping max-width and centering the whole bar keeps it from stretching
   edge-to-edge on a very wide monitor in the first place, which is most
   of why the gap looked so extreme — px-3 already handles the small
   screen case since max-width simply has no effect once the viewport is
   narrower than it. */
.builder-toolbar-nav .container-fluid {
  justify-content: flex-start;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  /* Extra breathing room on the right specifically (left side — logo,
     back arrow, title — was already fine) — px-3 alone (1rem) left the
     badge/icon/button group sitting almost flush against the edge of
     this now-capped container. !important because Bootstrap's own px-3
     utility is itself !important, so a plain override here would lose. */
  padding-right: 2rem !important;
}

/* This toolbar intentionally uses Bootstrap's plain "navbar-expand"
   (never collapses to a hamburger, unlike the main app nav) because it's
   a row of direct-access tools, not primary site navigation — hiding
   them behind a menu on every phone would make the builder harder to
   use, not easier. Below "lg" there isn't room for all of them on one
   line though, so let the row wrap onto a second line instead of
   silently running off-screen with no way to reach the rest. */
@media (max-width: 991.98px) {
  .builder-toolbar-nav .container-fluid {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }
}
@media (max-width: 575.98px) {
  .js-builder-title-input { max-width: 140px !important; }
}

/* The button count here changes depending on form state (publishing adds
   "Published Link" and splits one "Publish" button into "Unpublish" +
   "Close") — without this, the flex row's default flex-shrink:1 would
   compress every button slightly whenever more of them need to fit,
   making them visibly different sizes before vs. after publishing. This
   group itself is still allowed to shrink (yielding space to the title
   input first), but flex-shrink:0 on each BUTTON inside it means the
   buttons themselves never compress — once they collectively no longer
   fit, this group scrolls horizontally instead. Desktop-only ("lg" and
   up) since this group is d-none below that anyway. */
@media (min-width: 992px) {
  .builder-toolbar-actions {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    max-width: 100%;
    min-width: 0; /* flexbox default (min-width:auto) would otherwise keep this at its full content width and overflow the navbar instead of scrolling internally */
  }
  .builder-toolbar-actions > .btn,
  .builder-toolbar-actions > form {
    flex-shrink: 0;
  }
}

/* Icon-only toolbar buttons (Preview, Published Link, Responses, Comments,
   Analytics) — same .btn-outline-* look, just square instead of a wide
   rectangle with an icon awkwardly centered in leftover padding. The
   label isn't gone, just moved to a hover tooltip (title attribute) and
   aria-label, so this is still fully labeled for anyone not using a
   mouse. This, combined with removing the old me-auto flush-right push
   above, is what actually gets the toolbar's total width back under the
   navbar's available space on a typical laptop screen instead of relying
   on the internal horizontal-scroll fallback above. */
.btn-icon-only {
  width: 2.125rem;
  padding-left: 0;
  padding-right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------------------------ */
/* Responsive: very large / TV-class displays                          */
/* ------------------------------------------------------------------ */
/* .container-fluid is used for both the app shell (sidebar + main
   content) and the various top toolbars. Left to stretch to 100% of
   the viewport on a large monitor or a smart TV browser, both line
   lengths and empty gaps between controls get uncomfortably large.
   Give it breathing room on the sides past a normal desktop width
   instead of stretching indefinitely. */
@media (min-width: 1600px) {
  .container-fluid {
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
  }
}


.stat-card {
  border: 1px solid #eceafd;
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  background: #fff;
}
.stat-card .stat-value { font-size: 1.9rem; font-weight: 700; }
.stat-card .stat-label { color: #6b7280; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }

.sidebar {
  min-height: calc(100vh - 56px);
  background: #fff;
  border-right: 1px solid #eceafd;
}
.sidebar .nav-link {
  color: var(--ink);
  border-radius: 0.5rem;
  padding: 0.55rem 0.85rem;
}
.sidebar .nav-link.active, .sidebar .nav-link:hover {
  background: var(--brand-soft);
  color: var(--brand-dark);
}

.form-card {
  border: 1px solid #eceafd;
  border-radius: 0.75rem;
  background: #fff;
}

/* Template gallery cards (create-form page) — same footprint as .form-card
   but built around a full-bleed gradient "cover" banner instead of a small
   corner icon, closer to how Notion/Linear-style template galleries read.
   A dedicated class rather than extending .form-card itself: .form-card is
   used all over the app (admin, billing, public forms...) and several of
   those places rely on content overflowing it (dropdowns, tooltips) — this
   card intentionally clips its cover's corners, which would be an unsafe
   default to apply everywhere .form-card is used. */
.template-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid #eceafd;
  border-radius: 0.75rem;
  background: #fff;
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.template-card:hover, .template-card:focus-visible {
  box-shadow: 0 8px 24px rgba(109, 31, 203, 0.12);
  transform: translateY(-2px);
}
.template-card-cover {
  position: relative;
  height: 108px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.template-card-cover-icon {
  font-size: 2.75rem;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.template-card-badge {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
}

.question-card { cursor: default; transition: opacity 0.15s ease; }
.question-card .drag-handle { cursor: grab; }
.question-card .drag-handle:active { cursor: grabbing; }
.question-card.opacity-50 { opacity: 0.5; }

/*
 * "Active section" — whichever section (or the ungrouped area) new
 * questions from the left palette get added to. Set by clicking a
 * section's header, clicking any question inside a section, or dragging
 * a question into one. See builder.js setActiveSection().
 */
.section-header-card.is-active-target {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
#questionsCanvas.is-active-target {
  outline: 2px dashed var(--brand);
  outline-offset: 6px;
  border-radius: 0.75rem;
}

/* A section with no questions yet still needs a real drop target, not a
   zero-height div — this also doubles as the "drag here" affordance. */
.js-section-questions { min-height: 12px; }
.section-empty-hint {
  border: 1px dashed #d8d3f5;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  color: #9a94b8;
  font-size: 0.875rem;
}
.js-section-questions.drag-over .section-empty-hint,
#questionsCanvas.drag-over {
  border-color: var(--brand);
  background: var(--brand-soft);
}

/* ------------------------------------------------------------------ */
/* Analytics charts — explicit sizing so Chart.js can't blow a pie/    */
/* doughnut/radar chart up to the full width of a wide card. Paired    */
/* with maintainAspectRatio:false in analytics-charts.js, which makes  */
/* Chart.js fill exactly this box instead of computing its own size.   */
/* ------------------------------------------------------------------ */
.chart-canvas-wrap {
  position: relative;
  width: 100%;
}
.chart-canvas-wrap--wide {
  height: 260px;
}
.chart-canvas-wrap--sliced {
  height: 240px;
  max-width: 320px;
  margin: 0 auto;
}

.timer-bar {
  background: var(--brand);
  color: #fff;
  font-variant-numeric: tabular-nums;
  z-index: 1030;
}
.timer-bar.timer-warning { background: #b45309; }
.timer-bar.timer-critical { background: #b91c1c; }

.proctoring-warning {
  background: #b91c1c;
  color: #fff;
  z-index: 1030;
}

.lock-mode-banner {
  background: #111827;
  color: #fff;
  z-index: 1031;
}
.lock-mode-banner .btn-light {
  background: #fff;
  color: #111827;
}

.camera-active-badge {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 1040;
  background: rgba(17, 24, 39, 0.92);
  color: #fff;
  border-radius: 0.75rem;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.camera-active-badge video {
  width: 54px;
  height: 40px;
  object-fit: cover;
  border-radius: 0.4rem;
  background: #000;
}
.camera-active-badge .bi-record-circle-fill {
  color: #ef4444;
  animation: camera-badge-pulse 1.4s ease-in-out infinite;
}
@keyframes camera-badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Persistent reminder shown the whole time a locked quiz is actually in
   fullscreen (NOT the same element as .lock-mode-banner, which only
   appears before fullscreen starts or right after a violation) — see
   requestLockFullscreen()/the fullscreenchange handler in public-form.js
   for when this toggles. Deliberately small/quiet, bottom-left so it
   never collides with the camera badge (bottom-right) or the timer/
   proctoring banners (sticky-top). */
.lock-mode-persistent-note {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 1040;
  background: rgba(17, 24, 39, 0.92);
  color: #fff;
  border-radius: 0.75rem;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.lock-mode-persistent-note .bi-lock-fill {
  color: #f59e0b;
}
/* Extra breathing room at the bottom of the page whenever the fixed
   camera/lock badges are on screen (see the has-fixed-proctor-badges
   class on the page container in views/public/form.php) — otherwise, on
   a short mobile viewport, the Submit button sits right where these two
   fixed-position badges live and gets covered by them. This just adds
   enough scroll room for the button to land clear of both, without
   changing anything about the badges themselves. */
.has-fixed-proctor-badges {
  padding-bottom: 76px;
}
@media (max-width: 575.98px) {
  .has-fixed-proctor-badges { padding-bottom: 108px; }
}

@media (max-width: 575.98px) {
  /* Icon-only on mobile — the full "Closing this window will end your
     attempt" text and the camera badge were competing for the same
     narrow strip of screen and overlapping each other, not just Submit.
     A tap/long-press still works the same either way; the timer bar and
     the one-time warning banner (shown right after an actual violation)
     already say this in full, so the persistent reminder doesn't need
     to repeat the whole sentence to still do its job. */
  .lock-mode-persistent-note { bottom: 8px; left: 8px; padding: 8px; font-size: 0.7rem; }
  .lock-mode-persistent-note span { display: none; }
}
@media (max-width: 575.98px) {
  .camera-active-badge { bottom: 8px; right: 8px; padding: 6px 8px; font-size: 0.7rem; }
  .camera-active-badge video { width: 42px; height: 32px; }
}

/* Modern popup treatment for the quiz submit-confirmation and camera
   consent modals — rounded card, centered icon badge, soft shadow, and a
   gentle scale-up entrance instead of Bootstrap's plain default. */
.modern-modal {
  border: none;
  border-radius: 1.25rem;
  box-shadow: 0 20px 60px rgba(17, 24, 39, 0.25);
  overflow: hidden;
}
.modal.fade .modern-modal {
  transform: scale(0.92) translateY(10px);
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
  opacity: 0;
}
.modal.show .modern-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.modal-backdrop.show {
  backdrop-filter: blur(2px);
  opacity: 0.6;
}
.modern-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
}
.modern-modal-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  font-size: 1.75rem;
}
.modern-modal-icon--brand {
  background: var(--brand-soft, #F3ECFE);
  color: var(--brand, #6D1FCB);
}
.modern-modal-footer {
  border-top: none;
  padding: 0 2rem 2rem;
  justify-content: center;
  gap: 0.6rem;
}
.modern-modal-footer .btn {
  border-radius: 2rem;
  padding: 0.55rem 1.4rem;
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .modal.fade .modern-modal,
  .modal.show .modern-modal {
    transition: none;
    transform: none;
  }
}

.cover-image-wrap {
  width: 100%;
  max-height: 320px;
  overflow: hidden;
}
.cover-image {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
}
@media (max-width: 576px) {
  .cover-image-wrap, .cover-image { max-height: 180px; height: 180px; }
}

.js-theme-swatch {
  border: 2px solid #fff;
  outline: 1px solid #dcdcf5;
  cursor: pointer;
  padding: 0;
}
.js-theme-swatch:hover { outline-color: var(--brand); }

.text-gold { color: var(--gold); }
.bg-brand-soft { background: var(--brand-soft); }

/* ------------------------------------------------------------------ */
/* Button text contrast: any solid/coloured primary-action button must */
/* always show white text, in every state, regardless of inherited or  */
/* theme link-color rules. Outline/light/subtle variants are untouched */
/* since their light backgrounds already pair correctly with coloured  */
/* text. This is a safety net on top of Bootstrap's own defaults.      */
/* ------------------------------------------------------------------ */
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-dark,
.btn-lp-primary,
.btn-home {
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:disabled, .btn-primary.disabled,
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary:disabled, .btn-secondary.disabled,
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success:disabled, .btn-success.disabled,
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger:disabled, .btn-danger.disabled,
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning:disabled, .btn-warning.disabled,
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info:disabled, .btn-info.disabled,
.btn-dark:hover, .btn-dark:focus, .btn-dark:active, .btn-dark:disabled, .btn-dark.disabled,
.btn-home:hover, .btn-home:focus, .btn-home:active, .btn-home:disabled, .btn-home.disabled {
  color: #fff !important;
}
/* btn-lp-cta and btn-lp-outline intentionally use light backgrounds with
   coloured text — excluded above, kept legible via their own rules. */

.btn-home {
  background: var(--brand);
  border-color: var(--brand);
}
.btn-home:hover, .btn-home:focus {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

/* ------------------------------------------------------------------ */
/* "Take a tour" — same button, same look, on every page it appears.   */
/* ------------------------------------------------------------------ */
.btn-tour {
  background: linear-gradient(135deg, var(--brand) 0%, #9B5DE5 100%);
  border: none;
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(109, 31, 203, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-tour:hover, .btn-tour:focus {
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(109, 31, 203, 0.35);
}
.btn-tour:active { transform: translateY(0); }
.btn-tour i { animation: tour-compass-spin 6s linear infinite paused; }
.btn-tour:hover i { animation-play-state: running; }
@keyframes tour-compass-spin { to { transform: rotate(360deg); } }

/* Logout — deliberately muted until hovered, then reads clearly as a
   "leave" action, without competing with primary actions on the page. */
.btn-logout {
  background: transparent;
  border: 1px solid #e3d9f7;
  color: #6b5b8a !important;
  font-weight: 500;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-logout:hover, .btn-logout:focus {
  background: #fdecec;
  border-color: #f3b6b6;
  color: #b3261e !important;
}

/* ------------------------------------------------------------------ */
/* Fixed sidebar / independently-scrolling main content.               */
/* The sidebar sticks in place under the sticky top navbar and never   */
/* scrolls with the page; only #main-content scrolls. The navbar's     */
/* rendered height is measured at runtime (layout.js) into --navbar-h  */
/* so this works regardless of how tall the navbar actually renders.   */
/* ------------------------------------------------------------------ */
:root { --navbar-h: 64px; }
.navbar.sticky-top { min-height: var(--navbar-h); }
.sidebar {
  position: sticky;
  top: var(--navbar-h);
  align-self: flex-start;
  height: calc(100vh - var(--navbar-h));
  overflow-y: auto;
}
#main-content.scroll-main {
  height: calc(100vh - var(--navbar-h));
  overflow-y: auto;
}
/* The page itself never scrolls on these layouts — only .sidebar and
   #main-content.scroll-main do. See layout.js's lockPageScrollForShellLayout()
   for why: this is what guarantees exactly two scrollable regions instead
   of three, regardless of any stray extra height elsewhere on the page.
   Added via JS (not applied globally here) so ordinary full-page-scroll
   pages are unaffected. */
html.has-scroll-shell, body.has-scroll-shell {
  height: 100%;
  overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Floating "back to top" button                                       */
/* ------------------------------------------------------------------ */
.back-to-top-btn {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: #fff !important;
  border: none;
  box-shadow: 0 4px 14px rgba(10, 15, 61, 0.25);
  z-index: 1080;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.back-to-top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top-btn:hover, .back-to-top-btn:focus {
  background: var(--brand-dark);
  color: #fff !important;
}
.back-to-top-btn i { font-size: 1.15rem; }

/* ------------------------------------------------------------------ */
/* Onboarding tour — real modal overlay with a click-through spotlight  */
/* hole over the current target, plus a pointer arrow on the tooltip.   */
/* ------------------------------------------------------------------ */
.tour-overlay-panel {
  position: fixed;
  z-index: 2000;
  background: rgba(10, 15, 61, 0.6);
}
.tour-spotlight-ring {
  position: fixed;
  z-index: 2001;
  border-radius: 0.6rem;
  border: 3px solid var(--brand);
  box-shadow: 0 0 0 4px rgba(109, 31, 203, 0.25);
  pointer-events: none;
  animation: tour-pulse 1.6s ease-in-out infinite;
}
@keyframes tour-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(109, 31, 203, 0.25); }
  50% { box-shadow: 0 0 0 9px rgba(109, 31, 203, 0.12); }
}
.tour-tooltip {
  position: fixed;
  z-index: 2002;
  max-width: 320px;
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 12px 32px rgba(10, 15, 61, 0.35);
  padding: 1rem 1.1rem;
  --tour-arrow-left: 24px;
}
.tour-tooltip::before {
  content: "";
  position: absolute;
  left: var(--tour-arrow-left);
  width: 14px;
  height: 14px;
  background: #fff;
  transform: translateX(-50%) rotate(45deg);
}
.tour-tooltip--arrow-bottom::before { top: -6px; box-shadow: -3px -3px 4px rgba(10, 15, 61, 0.05); }
.tour-tooltip--arrow-top::before { bottom: -6px; box-shadow: 3px 3px 4px rgba(10, 15, 61, 0.05); }
.tour-tooltip .tour-step-count {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #8b86a8;
  font-weight: 600;
}
.tour-tooltip h3 { font-size: 1rem; font-weight: 700; margin: .25rem 0 .4rem; color: var(--ink); }
.tour-tooltip p { font-size: .875rem; color: #4b5563; margin-bottom: .85rem; }
.tour-tooltip .tour-dots { display: flex; gap: 5px; align-items: center; }
.tour-tooltip .tour-dots span {
  width: 6px; height: 6px; border-radius: 50%; background: #e3ddfb; display: inline-block;
}
.tour-tooltip .tour-dots span.is-active { background: var(--brand); width: 16px; border-radius: 3px; }
.tour-exit-btn {
  position: fixed;
  top: 1.1rem;
  right: 1.1rem;
  z-index: 2003;
}
.tour-course-card {
  border: 1px solid #eceafd;
  border-radius: 0.75rem;
  padding: 1rem 1.1rem;
  cursor: pointer;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
  width: 100%;
}
.tour-course-card:hover, .tour-course-card:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.tour-course-card .tour-course-icon {
  width: 40px; height: 40px; border-radius: 0.6rem;
  background: var(--brand-soft); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}

/* ------------------------------------------------------------------ */
/* Collapsible builder sections                                        */
/* ------------------------------------------------------------------ */
.section-card.is-collapsed .js-section-collapsible { display: none; }
.section-card .js-section-toggle i { transition: transform .15s ease; }
.section-card.is-collapsed .js-section-toggle i { transform: rotate(180deg); }
.section-card .js-section-count { display: none; }
.section-card.is-collapsed .js-section-count { display: inline; }

/* ------------------------------------------------------------------ */
/* Password field show/hide toggle                                     */
/* ------------------------------------------------------------------ */
.password-field { position: relative; }
.password-field .form-control { padding-right: 2.75rem; }
.password-toggle-btn {
  position: absolute; top: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; border: 0; background: transparent;
  color: #6b7280; padding: 0;
}
.password-toggle-btn:hover, .password-toggle-btn:focus { color: var(--ink, #0A0F3D); }
.password-toggle-btn:focus-visible { outline: 2px solid var(--brand, #6D1FCB); outline-offset: -2px; border-radius: .375rem; }