/*
 * User panel (front-end hotel operators).
 *
 * Loaded after build/css/app.min.css. The !important flags are what let these
 * rules win over app.min.css and are kept deliberately.
 *
 * Design tokens below are the ACTUAL values from the reference click-demo at
 * https://wd-dev.wd-testumgebung.de/9dots/css/style.css — read from its
 * stylesheet, not sampled from screenshots.
 */

:root {
  /* Brand */
  --9d-teal: #29B6B5;
  --9d-teal-deep: #1E9C9B;
  --9d-teal-soft: #DFF4F2;
  --9d-teal-icon: #4AC3AB;

  /* Accents */
  --9d-blue: #567FD7;
  --9d-green: #3FC478;
  --9d-red: #F85B5B;

  /* Surfaces & text */
  --9d-page: #EFF2F7;
  --9d-surface: #FFFFFF;
  --9d-ink: #343A3F;
  --9d-muted: #82888F;
  --9d-border: #E4E8EF;
  --9d-border-strong: #D5DAE2;
  --9d-zebra: #F7F7F7;

  /* Pastels — KPI tiles and auth heroes */
  --9d-band: #FEDEDE;
  --9d-mint: #DAF3EE;
  --9d-p-rose: #F0D9E0;
  --9d-p-rose-deep: #ECC2CC;
  --9d-p-mint: #D6F1EA;
  --9d-p-blue: #CDD9F4;
  --9d-p-red: #FEDEDE;

  --9d-shadow: 0 1px 3px rgba(52,58,63,.06), 0 10px 24px -14px rgba(52,58,63,.22);
  --9d-shadow-soft: 0 6px 18px -10px rgba(52,58,63,.18);
  --9d-radius: 14px;
  --9d-font: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Back-compat aliases: every rule written before the re-skin points at these,
     so retargeting them here shifts buttons, progress bars, focus rings and the
     ported admin overrides in one move. */
  --9d-brand: var(--9d-teal);
  --9d-brand-dark: var(--9d-teal-deep);
  --9d-danger: var(--9d-red);
  --9d-line: var(--9d-border);
}

/* ---------- Sora, self-hosted (no Google Fonts call) ----------
   Same two woff2 subsets the reference serves. */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/sora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/sora-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Scoped to the user panel + auth pages only, so the admin panel keeps
   app.min.css's Hind / Wix Madefor. */
.user-panel-shell,
.user-panel-shell .btn,
.user-panel-shell .form-control,
.user-panel-shell .form-select,
.user-auth-body,
.user-auth-body .btn,
.user-auth-body .form-control {
  font-family: var(--9d-font);
}
.user-panel-shell { color: var(--9d-ink); }

/* ---------- Brand overrides (ported from the admin layout) ---------- */
.mm-active > i { color: var(--9d-brand) !important; }

.page-link.active,
.active > .page-link,
.top-icon:hover,
.top-icon:active,
.btn-primary { background: var(--9d-brand) !important; }

.btn-primary { border-color: var(--9d-brand) !important; }

.btn-primary:hover,
.btn-primary:focus { background: var(--9d-brand-dark) !important; border-color: var(--9d-brand-dark) !important; }

.mm-active .active,
.mm-active .active i { color: var(--9d-brand) !important; }

.mm-active { color: var(--9d-brand) !important; }

.mm-active > a { border-color: var(--9d-brand) !important; color: var(--9d-brand) !important; }

.text-primary { color: var(--9d-brand) !important; }

.mm-active > a i { color: var(--9d-brand) !important; }

::selection { background-color: var(--9d-brand); }

a, a:hover, a:focus { color: var(--9d-brand); }

.btn-outline-primary {
  color: var(--9d-brand) !important;
  border-color: var(--9d-brand) !important;
}
.btn-outline-primary:hover {
  background: var(--9d-brand) !important;
  color: #fff !important;
}

/* ---------- Panel shell ----------
   Surface treatment from the reference: blue-grey page, borderless elevated
   cards, 14px radii. Tokens are inherited from :root — do NOT redeclare them
   here, or they shadow the reference values. */
.user-panel-shell {
  /* Nothing in the panel should scroll horizontally. */
  overflow-x: hidden;
  background: var(--9d-page);
}

/* The topbar now sits INSIDE .main-content in normal flow (see
   user/layouts/default.blade.php), so it no longer needs to be fixed and
   .page-content no longer reserves 60px for it. */
.user-panel-shell #page-topbar {
  position: static;
  left: auto;
  right: auto;
  top: auto;
  z-index: auto;
}
.user-panel-shell .page-content { padding-top: 1.5rem; }

/* ---------- Sidebar ----------
   Reference styling: flat white, grouped micro-labels, and an active item marked
   by a 3px teal left border plus a fading teal wash — not a filled pill. */
.user-panel-shell .sidebar-left {
  background: var(--9d-surface);
  border-right: 1px solid var(--9d-border);
  box-shadow: none;
  /* The theme pins this at top:60px to clear a viewport-wide topbar. That bar is
     now inside .main-content, so the sidebar runs the full height. */
  top: 0;
  height: 100vh;
}
.user-panel-shell #sidebar-menu { padding: .6rem 0; }
.user-panel-shell .left-menu > li > a {
  display: flex;
  align-items: center;
  gap: .7rem;
  border-radius: 0;
  margin-bottom: 0;
  padding: .6rem 1.3rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--9d-ink);
  border-left: 3px solid transparent;
  transition: background .12s, color .12s;
}
.user-panel-shell .left-menu > li > a i {
  color: #9AA0A7;
  font-size: 1rem;
  width: 1.15rem;
  text-align: center;
  transition: color .12s;
}
.user-panel-shell .left-menu > li > a:hover {
  background: transparent;
  color: var(--9d-teal) !important;
}
.user-panel-shell .left-menu > li > a:hover i { color: var(--9d-teal); }

.user-panel-shell .left-menu > li.mm-active > a {
  background: linear-gradient(90deg, rgba(41,182,181,.07), transparent 70%);
  color: var(--9d-teal) !important;
  border-left-color: var(--9d-teal) !important;
  box-shadow: none;
}
.user-panel-shell .left-menu > li.mm-active > a i { color: var(--9d-teal) !important; }

/* Group micro-labels ("Menü", "Analyse"). */
.user-panel-shell .left-menu .menu-title {
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #A2A8AF;
  font-weight: 700;
  padding: .9rem 1.3rem .3rem;
}

/* Logout pinned to the bottom, in red. */
.user-panel-shell .left-menu .side-foot {
  margin-top: auto;
  padding-top: .8rem;
  border-top: 1px solid var(--9d-border);
}
.user-panel-shell .left-menu .side-foot > a,
.user-panel-shell .left-menu .side-foot > a i { color: var(--9d-red) !important; }
.user-panel-shell .left-menu .side-foot > a:hover { background: rgba(248,91,91,.06); }
/* The menu is a flex column so `margin-top: auto` can push the footer down. */
.user-panel-shell #sidebar-menu,
.user-panel-shell .left-menu { display: flex; flex-direction: column; }
/* The brand block now sits above #sidebar-menu, so the menu height budget must
   account for it in order for `margin-top:auto` on .side-foot to still work. */
.user-panel-shell .left-menu { min-height: calc(100vh - 5.6rem); }
.user-panel-shell .left-menu > li { flex: none; }

/* Sidebar brand: the logo shown wide at its natural proportions, with the
   tagline beneath. No circle/tile — this asset is 414x266 landscape and already
   carries the "9dots" wordmark, so a square badge both squashes it and
   duplicates the label. (The reference can use a 46px circle because its own
   logo file is square.) */
.user-panel-shell .side-brand {
  display: block;
  padding: 1.15rem 1.3rem 1rem;
}
.user-panel-shell .side-brand .side-logo {
  display: block;
  width: fit-content;
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
.user-panel-shell .side-brand .side-logo img {
  display: block;
  width: 120px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}
.user-panel-shell .side-brand .side-tagline {
  display: block;
  margin-top: .45rem;
  font-size: .72rem;
  font-weight: 500;
  color: var(--9d-muted);
  letter-spacing: .01em;
}
.user-panel-shell #page-topbar #page-header-user-dropdown { max-width: 220px; }
.user-panel-shell #page-topbar #page-header-user-dropdown > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
}

/* The theme centres .navbar-header with `margin: 0 auto; max-width: 85%`, sized
   for a viewport-wide bar. Inside .main-content that constraint leaves the
   sidebar-toggle button stranded, so span the full column instead. */
.user-panel-shell #page-topbar .navbar-header {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: .6rem 1.6rem;
  height: auto;
  min-height: 60px;
  gap: 1rem;
}

/* The sidebar collapse toggle. app.min.css gives it
   `position: absolute; right: 15px; top: 50%` and then `right: -70px`, which
   parks it just outside the sidebar in the admin layout. Here the topbar sits
   inside .main-content, so that container is the full content column and -70px
   threw the button off the right edge of the page, floating at mid-height.
   Put it back in the header's flex flow, at the left where it belongs. */
.user-panel-shell #page-topbar #sidebar-btn {
  position: static;
  right: auto;
  top: auto;
  transform: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border-radius: 8px;
  color: var(--9d-muted);
  background: transparent;
  border: 0;
}
.user-panel-shell #page-topbar #sidebar-btn:hover {
  background: var(--9d-page);
  color: var(--9d-ink);
}

/* Topbar: hairline instead of a shadow. */
.user-panel-shell #page-topbar {
  background: var(--9d-surface);
  border-bottom: 1px solid var(--9d-line);
  box-shadow: none;
}

/* Topbar crumb ("Konto / Dashboard") and the teal initial avatar. */
.user-panel-shell #page-topbar .crumb { font-size: .92rem; font-weight: 700; color: var(--9d-ink); }
.user-panel-shell #page-topbar .crumb span { color: var(--9d-muted); font-weight: 500; }
.user-panel-shell .topbar-avatar {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--9d-teal);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  flex: none;
}
/* Locale <select> restyled as the reference's grey `.dd` chip. */
.user-panel-shell #page-topbar select {
  background: #EEEFF3;
  border: none;
  border-radius: 9px;
  padding: .5rem .8rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--9d-ink);
}
.user-panel-shell #page-topbar select:hover { background: #E4E6EC; }

/* Content column width, matching the reference. */
.user-panel-shell .page-content > .container-fluid {
  max-width: 1180px;
  margin: 0 auto;
  padding-left: 1.9rem;
  padding-right: 1.9rem;
}

/* Cards: no border, soft elevation, 14px radius. */
.user-panel-shell .card {
  border: none;
  border-radius: var(--9d-radius);
  box-shadow: var(--9d-shadow-soft);
}
.user-panel-shell .card-header {
  background: transparent;
  border-bottom: 1px solid var(--9d-border);
  padding: 1.1rem 1.25rem;
}
/* The theme's .card-title is inline with no margin, so a following <p> subtitle
   runs into the heading. */
.user-panel-shell .card-title {
  display: block;
  margin-bottom: .25rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.user-panel-shell .card-header p { font-size: .82rem; color: var(--9d-muted); }
.user-panel-shell .card-body { padding: 1.25rem; }

/* Page heading. */
.user-panel-shell .page-title-box { padding-bottom: 1.25rem; }
.user-panel-shell .page-title-box h4 {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -.02em;
  text-transform: none;
}
.user-panel-shell .breadcrumb-item,
.user-panel-shell .breadcrumb-item a { font-size: .82rem; color: var(--9d-muted); }

/* Tables: dark bold headers and zebra striping, per the reference. */
.user-panel-shell .table > thead th {
  border-bottom: 1px solid var(--9d-border);
  font-size: .78rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--9d-ink);
  font-weight: 800;
  padding: .8rem 1.1rem;
}
.user-panel-shell .table > tbody td {
  border-top: 1px solid var(--9d-border);
  border-bottom: none;
  padding: .85rem 1.1rem;
  font-size: .86rem;
  vertical-align: middle;
  color: var(--9d-ink);
}
.user-panel-shell .table > tbody tr:first-child td { border-top: none; }
.user-panel-shell .table > tbody tr:nth-child(even) td { background: var(--9d-zebra); }
/* Zebra replaces the hover tint — a hover wash on top of striping reads as noise. */
.user-panel-shell .table-hover > tbody > tr:hover > * { background-color: transparent; }
/* Hotel name in teal. */
.user-panel-shell .table .tname { color: var(--9d-teal); font-weight: 700; }

/* Status as coloured bold text, not pill badges. */
.user-panel-shell .status-done,
.user-panel-shell .status-prog,
.user-panel-shell .status-idle { font-weight: 700; font-size: .82rem; }
.user-panel-shell .status-done { color: var(--9d-teal); }
.user-panel-shell .status-prog { color: var(--9d-blue); }
.user-panel-shell .status-idle { color: var(--9d-muted); }

/* Progress bar. */
.user-panel-shell .progress {
  height: 8px;
  border-radius: 999px;
  background: #E6EAF0;
  overflow: hidden;
  min-width: 90px;
}
.user-panel-shell .progress-bar {
  border-radius: 999px;
  background-image: linear-gradient(90deg, var(--9d-teal), var(--9d-teal-icon));
}

/* Pill badges (kept for the plan badge on the profile header). */
.user-panel-shell .badge {
  border-radius: 999px;
  padding: .38rem .7rem;
  font-weight: 600;
  font-size: .72rem;
}

/* Buttons + inputs. */
.user-panel-shell .btn {
  border-radius: 10px;
  font-weight: 700;
  font-size: .84rem;
  padding: .6rem 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  justify-content: center;
  transition: filter .13s, transform .13s;
}
.user-panel-shell .btn:hover { filter: brightness(.96); transform: translateY(-1px); }
.user-panel-shell .btn-sm { border-radius: 9px; padding: .42rem .8rem; font-size: .76rem; }
.user-panel-shell .btn-outline-primary {
  background: #fff !important;
  color: var(--9d-teal-deep) !important;
  border: 1px solid var(--9d-teal) !important;
}
.user-panel-shell .btn-outline-primary:hover { background: var(--9d-teal-soft) !important; }

/* ---------- Welcome header ---------- */
.user-panel-shell .welcome {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.user-panel-shell .welcome h2 {
  font-size: 1.32rem;
  letter-spacing: .01em;
  margin: 0 0 .3rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--9d-ink);
}
.user-panel-shell .welcome h2 em { font-style: normal; color: var(--9d-teal); }
.user-panel-shell .welcome .sub { margin: 0; color: var(--9d-muted); font-size: .88rem; }

/* ---------- Hotel filter pills ---------- */
.user-panel-shell .pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.15rem; }
.user-panel-shell .pill {
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 700;
  padding: .42rem .85rem;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: all .12s;
  background: #fff;
  color: var(--9d-green);
  border: 1px solid var(--9d-green);
}
.user-panel-shell .pill:hover { background: #F1FBF5; color: var(--9d-green); }
.user-panel-shell .pill.active {
  background: var(--9d-teal);
  border-color: var(--9d-teal);
  color: #fff;
}

/* ---------- KPI tiles: pastel gradients with a bubble overlay ---------- */
.user-panel-shell .stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
  margin-bottom: 1.25rem;
}
.user-panel-shell .stat {
  position: relative;
  overflow: hidden;
  border-radius: var(--9d-radius);
  padding: 1.15rem 1.15rem 1.3rem;
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  box-shadow: var(--9d-shadow-soft);
}
.user-panel-shell .stat::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(95px 95px at 12% 128%, rgba(255,255,255,.5) 0 60%, transparent 61%),
    radial-gradient(140px 140px at 38% 150%, rgba(255,255,255,.38) 0 60%, transparent 61%),
    radial-gradient(120px 120px at 66% 132%, rgba(255,255,255,.45) 0 60%, transparent 61%),
    radial-gradient(150px 150px at 96% 145%, rgba(255,255,255,.4) 0 60%, transparent 61%);
}
.user-panel-shell .stat > * { position: relative; }
.user-panel-shell .stat-rose { background: linear-gradient(135deg, var(--9d-p-red) 0%, var(--9d-p-rose) 100%); }
.user-panel-shell .stat-mint { background: linear-gradient(135deg, var(--9d-p-mint) 0%, #CBEDE4 100%); }
.user-panel-shell .stat-blue { background: linear-gradient(135deg, var(--9d-p-blue) 0%, #D8E1F7 100%); }
.user-panel-shell .stat-ic {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; flex: none; font-size: 1.35rem;
}
.user-panel-shell .stat-ic-rose { background: rgba(248,91,91,.18); color: var(--9d-red); }
.user-panel-shell .stat-ic-mint { background: rgba(74,195,171,.2); color: var(--9d-teal-icon); }
.user-panel-shell .stat-ic-blue { background: rgba(86,127,215,.18); color: var(--9d-blue); }
.user-panel-shell .stat .lbl { font-size: .8rem; font-weight: 700; margin-bottom: .3rem; }
.user-panel-shell .stat-rose .lbl { color: var(--9d-red); }
.user-panel-shell .stat-mint .lbl { color: var(--9d-green); }
.user-panel-shell .stat-blue .lbl { color: var(--9d-blue); }
.user-panel-shell .stat .val {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--9d-ink);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 991px) {
  .user-panel-shell .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .user-panel-shell .stat-grid { grid-template-columns: 1fr; }
  .user-panel-shell .page-content > .container-fluid { padding-left: 1rem; padding-right: 1rem; }
}
.user-panel-shell .form-control,
.user-panel-shell .form-select {
  border-radius: 10px;
  border-color: var(--9d-border-strong);
  padding: .6rem .8rem;
}
.user-panel-shell .form-control:focus,
.user-panel-shell .form-select:focus {
  border-color: var(--9d-brand);
  box-shadow: 0 0 0 4px rgba(15, 181, 182, .14);
}
.user-panel-shell .form-label { font-size: .82rem; font-weight: 600; }
.user-panel-shell .alert { border: none; border-radius: 12px; }

.progress-bar { background-color: var(--9d-brand); }
.user-panel-shell .progress {
  background-color: #eef1f3;
  border-radius: 999px;
}
.user-panel-shell .progress-bar {
  border-radius: 999px;
  background-image: linear-gradient(90deg, var(--9d-brand), #2fd0c6);
}

/* Profile header band — pastel mint with the reference's bubble overlay and
   DARK text (the old treatment was white-on-teal). */
.user-hero {
  position: relative;
  overflow: hidden;
  border: none;
  color: var(--9d-ink);
  border-radius: var(--9d-radius);
  background: linear-gradient(150deg, var(--9d-p-mint), #C4EBE0);
  box-shadow: var(--9d-shadow-soft) !important;
}
.user-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(150px 150px at 10% 115%, rgba(255,255,255,.55) 0 60%, transparent 61%),
    radial-gradient(210px 210px at 45% 130%, rgba(255,255,255,.4) 0 60%, transparent 61%),
    radial-gradient(180px 180px at 85% 118%, rgba(255,255,255,.5) 0 60%, transparent 61%);
}
.user-hero .card-body { color: var(--9d-ink); position: relative; z-index: 1; padding: 1.5rem; }
.user-hero h4 { color: var(--9d-ink); font-weight: 800; letter-spacing: -.01em; }
.user-hero p, .user-hero .small { color: var(--9d-muted); }
.user-hero .badge {
  background: #fff;
  border: 1px solid rgba(52,58,63,.1);
  color: var(--9d-teal-deep);
}
.user-hero .btn-light {
  border-radius: 10px;
  font-weight: 700;
  color: var(--9d-teal-deep);
  border: none;
}
/* Avatar circle inside the pastel band needs a solid fill to stay legible. */
.user-hero .user-avatar {
  background: var(--9d-teal);
  border: none;
  color: #fff;
}

/* ---------- KPI tiles: flat surface, tinted icon, no background image ---------- */
.user-kpi {
  border: none;
  border-radius: var(--9d-radius, 16px);
  background: #fff !important;
  transition: transform .15s, box-shadow .15s;
}
.user-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 18px 34px -20px rgba(16, 24, 40, .28) !important;
}
.user-kpi .card-body { padding: 1.25rem; }
.user-kpi .user-kpi-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  font-size: 1.35rem;
}
.user-kpi .user-kpi-label {
  font-size: .78rem;
  font-weight: 500;
  color: var(--9d-muted);
  margin: 0 0 .2rem;
  letter-spacing: .01em;
}
.user-kpi .user-kpi-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--9d-ink);
  font-variant-numeric: tabular-nums;
}
.user-kpi-ic-teal   { background: rgba(15, 181, 182, .12); color: var(--9d-brand-dark); }
.user-kpi-ic-indigo { background: rgba(94, 114, 228, .12); color: #4a5bd0; }
.user-kpi-ic-green  { background: rgba(18, 165, 138, .12); color: #0f7355; }
.user-kpi-ic-amber  { background: rgba(224, 138, 0, .14);  color: #a86200; }

.user-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1.3rem;
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .4);
  color: #fff;
}

.user-progress-cell { min-width: 160px; }
.user-progress-cell .progress { height: 8px; }

/* The theme lays .card-header out as a flex row, so a heading followed by a
   <p> subtitle ends up side by side. Stack them, unless the markup opts into a
   row via d-flex (used for header + action-button rows). */
.card-header:not(.d-flex) {
  display: block;
}
.card-header:not(.d-flex) .card-title {
  display: block;
  margin-bottom: .3rem;
}

/* (KPI tile styling lives in the modern-panel block below.) */

/* ---------- Auth screens: split hero + form (per the prototype) ---------- */
.user-auth-body { background: var(--9d-page); margin: 0; color: var(--9d-ink); }

/* Reference layout: the auth screen is a centred rounded card floating on the
   page background, not a full-bleed edge-to-edge split. */
.user-auth-page {
  min-height: 100vh;
  padding: 3rem 1.25rem 3.5rem;
  display: grid;
  place-items: center;
}
.user-auth-shell {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--9d-shadow);
  background: var(--9d-surface);
}

/* Form column is slightly wider than the hero (1fr 1.1fr in the reference). */
.user-auth-split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  min-height: 540px;
  background: var(--9d-surface);
}

/* Left: branded gradient panel. */
/* Pastel hero. Note the reference inverts the text: DARK ink on a soft pastel,
   not white on teal. The tint class comes from each screen's @section. */
.user-auth-hero {
  position: relative;
  overflow: hidden;
  padding: 2.1rem;
  color: var(--9d-ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.user-auth-hero.hero-mint { background: linear-gradient(150deg, var(--9d-p-mint), #C4EBE0); }
.user-auth-hero.hero-blue { background: linear-gradient(150deg, var(--9d-p-blue), #DCE4F8); }
.user-auth-hero.hero-rose { background: linear-gradient(150deg, var(--9d-p-red), var(--9d-p-rose)); }

.user-auth-hero .user-auth-hero-body { margin-top: auto; margin-bottom: auto; padding-bottom: 0; }

/* Soft white bubbles rising from the bottom edge. */
.user-auth-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(150px 150px at 10% 115%, rgba(255,255,255,.55) 0 60%, transparent 61%),
    radial-gradient(210px 210px at 45% 130%, rgba(255,255,255,.4) 0 60%, transparent 61%),
    radial-gradient(180px 180px at 85% 118%, rgba(255,255,255,.5) 0 60%, transparent 61%),
    radial-gradient(130px 130px at 108% 55%, rgba(255,255,255,.35) 0 60%, transparent 61%);
}

.user-auth-hero-logo,
.user-auth-hero-body,
.user-auth-hero-foot { position: relative; z-index: 1; }

/* 64px, per the reference. The 150px badge used earlier was sized for a
   full-bleed hero; inside this smaller card it dominates the composition. */
.user-auth-hero-logo {
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 50%;
  height: 64px;
  width: 64px;
  padding: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  overflow: hidden;
  flex: none;
}
.user-auth-hero-logo img { width: 78%; height: 78%; object-fit: contain; }

.user-auth-hero-body h2 {
  color: var(--9d-ink);
  font-size: 1.45rem;
  line-height: 1.3;
  letter-spacing: -.01em;
  margin: 0 0 .5rem;
  text-wrap: balance;
}
.user-auth-hero-body p {
  color: var(--9d-muted);
  margin: 0;
  line-height: 1.6;
  max-width: 26rem;
}
.user-auth-points {
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.user-auth-points span {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .84rem;
  font-weight: 600;
  color: var(--9d-ink);
}
/* Icons sit in their own translucent chip rather than floating in the text. */
.user-auth-points i {
  flex: none;
  color: var(--9d-teal);
  font-size: 1.15rem;
}

.user-auth-hero-foot { color: var(--9d-muted); font-size: .72rem; }

/* Right: the form column. */
.user-auth-form {
  background: var(--9d-surface);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.4rem 2.6rem;
}
.user-auth-form-inner { width: 100%; }
.user-auth-form-inner h4 { font-size: 1.4rem; font-weight: 800; letter-spacing: -.01em; }

.user-auth-form-inner h4 { letter-spacing: -.025em; font-size: 1.5rem; }
.user-auth-form-inner .form-label { font-size: .82rem; font-weight: 600; margin-bottom: .35rem; }

/* Inputs: taller, softer, with a teal focus ring instead of the theme default. */
.user-auth-form-inner .form-control {
  padding: .7rem .9rem;
  border-radius: 11px;
  border-color: var(--9d-border-strong);
  background: #fbfcfd;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.user-auth-form-inner .form-control:focus {
  background: #fff;
  border-color: var(--9d-brand);
  box-shadow: 0 0 0 4px rgba(15, 181, 182, .14);
}
.user-auth-form-inner .form-control::placeholder { color: #adb5bd; }

/* Icon-prefixed field. */
.user-auth-field { position: relative; }
.user-auth-field > i {
  position: absolute;
  left: .95rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--9d-muted);
  font-size: 1.05rem;
  pointer-events: none;
  transition: color .15s;
}
.user-auth-field .form-control { padding-left: 2.7rem; }
.user-auth-field:focus-within > i { color: var(--9d-brand); }

/* Show/hide password. */
.user-auth-field .user-auth-eye {
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--9d-muted);
  padding: .35rem .5rem;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1;
}
.user-auth-field .user-auth-eye:hover { color: var(--9d-brand); background: rgba(15, 181, 182, .08); }
.user-auth-field.has-eye .form-control { padding-right: 2.75rem; }

.user-auth-form-inner .btn-primary {
  padding: .75rem 1rem;
  font-weight: 600;
  border-radius: 11px;
  box-shadow: 0 10px 22px -12px var(--9d-brand);
  transition: transform .12s, box-shadow .15s, background .15s;
}
.user-auth-form-inner .btn-primary:hover { transform: translateY(-1px); }
.user-auth-form-inner .btn-primary:active { transform: none; }

.user-auth-form-inner .form-check-input:checked {
  background-color: var(--9d-brand);
  border-color: var(--9d-brand);
}
.user-auth-form-inner .form-check-label,
.user-auth-form-inner .form-check + a,
.user-auth-form-inner a { font-size: .88rem; }

/* "or" divider above the alternate action. */
.user-auth-alt {
  position: relative;
  text-align: center;
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  font-size: .9rem;
  color: #6c757d;
  border-top: 1px solid #edf0f2;
}
.user-auth-alt a { font-weight: 600; }

.user-auth-mobile-logo { display: none; }

@media (max-width: 900px) {
  .user-auth-page { padding: 1.5rem 1rem 2rem; }
  .user-auth-split { grid-template-columns: 1fr; min-height: 0; }
  /* Collapse the hero and lift the logo above the form, as the reference does.
     The shell already supplies the card, so the inner box stays flat. */
  .user-auth-hero { display: none; }
  .user-auth-form { padding: 1.9rem 1.4rem; }
  .user-auth-mobile-logo { display: block; text-align: center; margin-bottom: 1.25rem; }
  .user-auth-mobile-logo img { max-height: 56px; }
}

/* Sticky footer.
   The theme pins .footer with position:absolute; bottom:0, which only reaches the
   bottom of the window when .main-content is at least viewport-tall. The remote
   quiz stylesheet additionally sets `footer { position: fixed; width: 100% }`,
   which spilled 255px past the right edge (the sidebar offset) and produced a
   horizontal scrollbar. Use a flex column instead: content grows, footer is
   pushed to the bottom on short pages and sits after the content on long ones. */
.user-panel-shell #layout-wrapper { min-height: 100vh; }
.user-panel-shell .main-content {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.user-panel-shell .main-content > .page-content { flex: 1 0 auto; }

.user-panel-body footer,
.user-panel-shell footer.footer {
  position: static !important;
  width: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  height: auto !important;
  flex: none;
  margin-top: auto;
  box-shadow: none !important;
  border-top: 1px solid var(--9d-line, var(--9d-border));
}

/* ---------- Quiz screens inside the panel shell ----------
   The remote quiz stylesheet (backend-ha.9dots.ai/build/css/style.css) styles bare
   element selectors for a standalone, centred page:
       body   { padding: 50px 0 100px }
       header { width: 30%; margin: 0 auto; display: flex; align-items: end }
   Those hijack the panel's own <header id="page-topbar"> and <body>. Reassert the
   shell's layout for the chrome only; everything inside .user-quiz-content is left
   to the quiz stylesheet, so the question markup keeps its intended look. */
body.user-panel-body { padding: 0 !important; }

#page-topbar {
    width: auto !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
    display: block !important;
    align-items: initial !important;
}
#page-topbar .navbar-header {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 !important;
    column-gap: 0 !important;
}

/* The quiz stylesheet also narrows .container; the panel uses .container-fluid,
   but nested quiz markup relies on .container for its own centring. */
.user-quiz-content { background: transparent; }
.user-quiz-content .container { max-width: 1148px; }

/* ---------- Category intro / section-complete screen ----------
   Rules are !important where they contend with the remote quiz stylesheet
   (backend-ha.9dots.ai/build/css/style.css), which styles these same classes
   for a standalone centred page. */
/* The remote stylesheet positions .screen-three for a standalone page (fixed
   widths, negative offsets). Neutralise that inside the panel. */
.qz-intro {
  position: static !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 1.75rem 0 2.5rem !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
}
.qz-intro-wrap {
  width: 100%;
  max-width: 640px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.qz-intro-card {
  position: relative;
  border: none !important;
  border-radius: var(--9d-radius) !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 20px 44px -24px rgba(16, 24, 40, .3) !important;
}
.qz-intro-card .card-body { padding: 1.9rem 1.9rem 1.6rem !important; }

/* Hotel + percentage strip. */
.qz-intro-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .5rem;
}
.qz-intro-hotel {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--9d-muted);
}
.qz-intro-hotel i { color: var(--9d-brand); font-size: 1rem; }
.qz-intro-pct {
  font-size: .78rem;
  font-weight: 700;
  color: var(--9d-brand-dark);
  background: rgba(15, 181, 182, .12);
  border-radius: 999px;
  padding: .2rem .6rem;
}
.qz-intro-bar { height: 6px !important; margin-bottom: 1.4rem; }

/* Category label + heading. */
.qz-intro .hotel-analyse {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  max-width: none !important;
}
/* Label + PREMIUM badge on one centred row, as in the reference. */
.qz-intro-labelrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin-bottom: .55rem;
  flex-wrap: wrap;
}
.qz-intro-label {
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--9d-blue) !important;
  margin: 0 !important;
}
.qz-intro-badge {
  padding: .18rem .55rem;
  border-radius: 999px;
  background: var(--9d-blue);
  color: #fff;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.5;
}
.qz-intro-heading {
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--9d-ink);
  text-align: center;
  text-wrap: balance;
}
/* The CMS supplies block HTML inside the heading; flatten its margins. */
.qz-intro-heading p { margin: 0 !important; font-size: inherit !important; line-height: inherit !important; color: inherit !important; font-weight: inherit !important; }
.qz-intro-heading p + p { margin-top: .4rem !important; }

/* Body copy. */
/* Outside the card, centred and muted — the reference puts the explanatory
   paragraph on the page background rather than inside the panel. */
.qz-intro .qz-intro-text {
  max-width: 34rem !important;
  margin: 1.5rem auto 0 !important;
  text-align: center !important;
  color: var(--9d-muted) !important;
  font-size: .95rem;
  line-height: 1.65;
}
.qz-intro .qz-intro-text p { color: inherit !important; margin: 0 0 .6rem !important; }
.qz-intro .qz-intro-text p:last-child { margin-bottom: 0 !important; }
.qz-intro .qz-intro-text ul,
.qz-intro .qz-intro-text ol { margin: .5rem 0 .6rem; padding-left: 1.15rem; }
.qz-intro .qz-intro-text li { margin-bottom: .3rem; }

/* Actions. */
.qz-intro .qz-intro-actions {
  margin: 1.75rem 0 0 !important;
  padding: 0 !important;
  border-top: 0;
  text-align: center !important;
}
.qz-intro .qz-intro-actions form { display: block; }
.qz-intro-btn {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  border: none;
  cursor: pointer;
  background: var(--9d-brand);
  color: #fff;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 600;
  padding: .8rem 1.6rem;
  border-radius: 12px;
  box-shadow: 0 12px 24px -14px var(--9d-brand);
  transition: transform .12s, background .15s;
}
.qz-intro-btn:hover { background: var(--9d-brand-dark); transform: translateY(-1px); color: #fff; }
.qz-intro-btn:active { transform: none; }
.qz-intro-btn svg { display: block; }

.qz-intro .qz-intro-exit { margin: 1rem 0 0 !important; text-align: center; }
.qz-intro .qz-intro-exit a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .85rem;
  color: var(--9d-muted) !important;
  text-decoration: none;
}
.qz-intro .qz-intro-exit a:hover { color: var(--9d-brand-dark) !important; text-decoration: underline; }

.qz-intro-dash { text-align: center; margin: 1.1rem 0 0; }
.qz-intro-dash a {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .85rem;
  color: var(--9d-muted) !important;
  text-decoration: none;
}
.qz-intro-dash a:hover { color: var(--9d-brand-dark) !important; }

@media (max-width: 575px) {
  .qz-intro-card .card-body { padding: 1.4rem 1.25rem 1.25rem !important; }
  .qz-intro-heading { font-size: 1.3rem; }
  .qz-intro-btn { width: 100%; justify-content: center; }
}

/* ---------- Question screen ----------
   Restyles the wrapper only: category switcher, question card, actions. The
   answer form (.step-checkbox) and all 8 question types keep the styling that
   question.blade.php's own inline CSS and the remote stylesheet give them. */
/* Full width of the content column, so the 660px container below centres
   against the column rather than against an inherited offset. */
.qz-q {
  padding: 1.5rem 0 2.5rem !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.qz-q > .container {
  max-width: 660px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Two columns: question flow on the left, section rail on the right. */
.qz-q .qz-q-row { margin: 0 !important; }
.qz-q .qz-q-main { width: 100% !important; padding: 0 !important; }

/* The remote stylesheet sizes .width-580 for a standalone page. */
.qz-q .width-580 { max-width: none !important; margin: 0 !important; }

/* Quiz progress bar (yielded into the layout above the content). The remote
   stylesheet renders it as a 2px red hairline at 80% width; make it a visible
   teal track aligned with the card. */
.user-quiz-content .progress-block {
  width: 100% !important;
  max-width: 660px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 1.1rem !important;
}
.user-quiz-content .progress-block .progress {
  height: 8px !important;
  background: #E6EAF0 !important;
  border-radius: 999px !important;
  overflow: hidden;
}
.user-quiz-content .progress-block .progress-bar {
  height: 8px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--9d-teal), var(--9d-teal-icon)) !important;
}

/* Category switcher, aligned with the card rather than the viewport edge. */
.qz-q .category-switcher-top-right {
  justify-content: flex-end !important;
  width: 100%;
  max-width: none !important;
  margin: 0 0 1rem !important;
  padding: 0 !important;
  justify-content: flex-start !important;
  display: block !important;
}
.qz-q .category-switcher-wrapper {
  display: flex !important;
  align-items: center;
  gap: .6rem;
  background: #fff;
  border-radius: 14px;
  padding: .7rem .85rem;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 24px -18px rgba(16, 24, 40, .22);
}
.qz-q-switch-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--9d-muted);
  margin: 0;
  white-space: nowrap;
}
.qz-q .category-switcher-select {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  padding-right: 2rem !important;
  text-overflow: ellipsis;
  border-radius: 10px !important;
  border-color: var(--9d-border-strong) !important;
  font-size: .86rem !important;
  padding: .45rem .7rem !important;
  color: var(--9d-ink);
}
.qz-q .category-switcher-select:focus {
  border-color: var(--9d-brand) !important;
  box-shadow: 0 0 0 4px rgba(15, 181, 182, .14) !important;
}
.qz-q .category-status-badge {
  border-radius: 999px !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  padding: .3rem .65rem !important;
  white-space: nowrap;
}
.qz-q .category-status-badge.status-in-progress {
  background: rgba(15, 181, 182, .13) !important;
  color: var(--9d-brand-dark) !important;
}

/* Question card. */
.qz-q .main-screen { text-align: left !important; }
.qz-q .main-screen .hotel-analyse,
.qz-q .width-580 .hotel-analyse {
  max-width: none !important;
  margin: 0 !important;
  padding: 1.6rem 1.7rem !important;
  border-radius: var(--9d-radius) !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 18px 40px -24px rgba(16, 24, 40, .28) !important;
}

.qz-q-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .9rem;
  margin-bottom: 1rem;
}
/* Plain text lines, as in the reference ("Hotel: Lakeview Suites"), rather
   than pill chips. Markup is unchanged — only the presentation. */
.qz-q-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .86rem;
  font-weight: 600;
  color: var(--9d-ink);
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.qz-q-chip i { color: var(--9d-teal); font-size: .95rem; }
.qz-q-chip-cat { background: transparent; color: var(--9d-muted); font-weight: 600; }
.qz-q-count {
  margin-left: auto;
  font-size: .76rem;
  font-weight: 700;
  color: var(--9d-muted);
  font-variant-numeric: tabular-nums;
}

.qz-q-text {
  font-size: 1.2rem;
  line-height: 1.42;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--9d-ink);
  text-wrap: balance;
}
.qz-q-text p { margin: 0 !important; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: inherit !important; }
.qz-q-text p + p { margin-top: .4rem !important; }

/* The type label ("Single choice") sits under the question. */
.qz-q .hotel-analyse h5 {
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--9d-danger) !important;
  margin: .7rem 0 0 !important;
}

.qz-q .hotel-analyse .alert { border-radius: 12px; font-size: .88rem; }

/* Answer area: the remote stylesheet centres .step-checkbox at max-width 580px,
   which would leave the options narrower than the question card. Match the card. */
.qz-q .step-checkbox,
.qz-q form.single-choice {
  max-width: none !important;
  margin: 1.1rem 0 0 !important;
}

/* Action row. */
.qz-q .btn-row {
  margin-top: 1.75rem !important;
  text-align: center !important;
}
.qz-q .btn-row button {
  border-radius: 12px !important;
  padding: .8rem 1.6rem !important;
  font-size: .92rem !important;
  font-weight: 600;
  box-shadow: 0 12px 24px -14px var(--9d-brand);
  transition: transform .12s, background .15s;
}
.qz-q .btn-row button:hover { transform: translateY(-1px); }
.qz-q .btn-row a { font-size: .85rem; color: var(--9d-muted) !important; }
.qz-q .btn-row a:hover { color: var(--9d-brand-dark) !important; }

@media (max-width: 575px) {
  .qz-q .main-screen .hotel-analyse,
  .qz-q .width-580 .hotel-analyse { padding: 1.25rem !important; }
  .qz-q-text { font-size: 1.06rem; }
  .qz-q .category-switcher-wrapper { flex-wrap: wrap; }
  .qz-q-switch-label { width: 100%; }
}

/* ---------- OTP code entry (reference `.code-row` / `.code-in` / `.code-hint`) ---------- */
.code-row { display: flex; gap: .6rem; margin: 1.1rem 0 1.35rem; }
.code-in {
  width: 52px;
  height: 60px;
  border: 1px solid var(--9d-border-strong);
  border-radius: 12px;
  background: #fff;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--9d-ink);
  font-family: inherit;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.code-in:focus { border-color: var(--9d-teal); box-shadow: 0 0 0 3px rgba(41,182,181,.16); }
.code-in:disabled { background: var(--9d-zebra); color: var(--9d-muted); }

.code-hint {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--9d-mint);
  color: #1E7A6F;
  border-radius: 12px;
  padding: .8rem 1rem;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.45;
}
.code-hint i { color: var(--9d-teal); font-size: 1.2rem; }

.user-otp-resend {
  font-size: .85rem;
  font-weight: 700;
  color: var(--9d-teal) !important;
  text-decoration: none;
}
.user-otp-resend:disabled { color: var(--9d-muted) !important; opacity: 1; cursor: default; }

@media (max-width: 420px) {
  .code-row { gap: .35rem; }
  .code-in { width: 44px; height: 54px; font-size: 1.25rem; }
}

/* admin/layouts/head-css.blade.php hardcodes the old teal on SweetAlert buttons
   in an inline <style>. That partial is shared with the admin panel, so it is not
   edited here; user-panel.css loads afterwards and retargets it for our pages. */
.user-panel-shell .swal2-actions button.swal2-confirm.swal2-styled,
.user-auth-body .swal2-actions button.swal2-confirm.swal2-styled {
  background: var(--9d-teal) !important;
}
.user-panel-shell .swal2-actions button.swal2-cancel.swal2-styled,
.user-auth-body .swal2-actions button.swal2-cancel.swal2-styled {
  background: var(--9d-red) !important;
}

/* ---------- Card band + footer (reference `.band` / `.band-foot`) ----------
   The hotels card has a pink header band and a mint summary footer, not a plain
   white header. */
.user-panel-shell .band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--9d-band);
  padding: .85rem 1.15rem;
}
.user-panel-shell .band h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--9d-ink);
}
.user-panel-shell .band-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--9d-mint);
  padding: .7rem 1.15rem;
  font-size: .78rem;
  color: #1E7A6F;
  font-weight: 600;
}
.user-panel-shell .table td.muted,
.user-panel-shell .muted { color: var(--9d-muted); }

/* ---------- Icon fonts: repoint away from the hardcoded deploy prefix ----------
   build/css/icons.min.css references its webfonts at absolute
   /survey-quiz/build/icons/… — a deployment subdirectory that does not exist on
   this host, so every mdi/fa glyph silently fails to load (404). The files are
   present at /build/icons/. Re-declaring the @font-face here with correct
   relative URLs fixes it without editing the vendored theme CSS (which the admin
   panel also loads, and which would be overwritten by a theme update).
   Declared after icons.min.css, so these win. */
@font-face {
  font-family: "MDI Local";
  src: url("../icons/materialdesignicons-webfont.woff2?v=5.9.55") format("woff2"),
       url("../icons/materialdesignicons-webfont.woff?v=5.9.55") format("woff"),
       url("../icons/materialdesignicons-webfont.ttf?v=5.9.55") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "FA5 Local";
  src: url("../icons/fa-solid-900.woff2") format("woff2"),
       url("../icons/fa-solid-900.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "FA5 Local";
  src: url("../icons/fa-regular-400.woff2") format("woff2"),
       url("../icons/fa-regular-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* Point the glyph classes at the locally-resolvable families. Re-declaring
   @font-face under the SAME family name does not override the theme's broken
   src list — same-family blocks merge, so the 404 URLs are still attempted.
   A distinct family name plus a font-family override is what actually works. */
.user-panel-shell .mdi:before,
.user-panel-shell .mdi-set,
.user-auth-body .mdi:before,
.user-auth-body .mdi-set {
  font-family: "MDI Local", "Material Design Icons" !important;
}
.user-panel-shell .fa:before,
.user-panel-shell .fas:before,
.user-panel-shell .far:before,
.user-auth-body .fa:before,
.user-auth-body .fas:before,
.user-auth-body .far:before {
  font-family: "FA5 Local", "Font Awesome 5 Free" !important;
}

/* ==========================================================================
   Hotel setup / add-more (premium multi-hotel screens)
   quiz/hotel-setup.blade.php + quiz/hotel-add-more.blade.php. Replaces the
   per-view inline CSS those screens used to carry, which still had the old
   #0FB5B6 teal and 100px pill radii.
   ========================================================================== */
.user-panel-shell .hs-wrap {
  max-width: 660px;
  margin: 0 auto;
  padding: .5rem 0 2.5rem;
}

.user-panel-shell .hs-card {
  background: var(--9d-surface);
  border: 1px solid var(--9d-border);
  border-radius: var(--9d-radius);
  box-shadow: var(--9d-shadow);
  overflow: hidden;
}

/* Rose band header, as on the dashboard's "Your hotels" panel. */
.user-panel-shell .hs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.4rem;
  background: var(--9d-band);
}
.user-panel-shell .hs-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--9d-ink);
}
.user-panel-shell .hs-badge {
  flex: 0 0 auto;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: var(--9d-blue);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.user-panel-shell .hs-body { padding: 1.4rem; }
.user-panel-shell .hs-intro {
  margin: 0 0 1.25rem;
  font-size: .88rem;
  color: var(--9d-muted);
}

.user-panel-shell .hs-field { margin-bottom: 1.25rem; }
.user-panel-shell .hs-label {
  display: block;
  margin-bottom: .35rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--9d-ink);
}

.user-panel-shell .hs-select,
.user-panel-shell .hs-in {
  display: block;
  width: 100%;
  min-height: 2.55rem;
  padding: .62rem .8rem;
  border: 1px solid var(--9d-border-strong);
  border-radius: 10px;
  background: var(--9d-surface);
  color: var(--9d-ink);
  font-family: inherit;
  font-size: .88rem;
  transition: border-color .12s, box-shadow .12s;
}
.user-panel-shell .hs-select:focus,
.user-panel-shell .hs-in:focus {
  outline: 0;
  border-color: var(--9d-teal);
  box-shadow: 0 0 0 3px rgba(41, 182, 181, .16);
}

/* Two per row, collapsing to one on narrow screens. An odd final field simply
   occupies the left column, matching the reference. */
.user-panel-shell .hs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem 1rem;
}
@media (max-width: 575px) {
  .user-panel-shell .hs-grid { grid-template-columns: minmax(0, 1fr); }
}

.user-panel-shell .hs-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  width: 100%;
  margin-top: 1.5rem;
  padding: .78rem 1.1rem;
  border: 0;
  border-radius: 10px;
  background: var(--9d-teal);
  color: #fff;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter .12s, transform .12s;
}
.user-panel-shell .hs-submit:hover {
  filter: brightness(.96);
  transform: translateY(-1px);
}
.user-panel-shell .hs-submit i { font-size: 1.05rem; line-height: 1; }

.user-panel-shell .hs-err {
  margin-top: .3rem;
  font-size: .78rem;
  color: var(--9d-red);
}

.user-panel-shell .hs-alert {
  margin-top: 1rem;
  padding: .85rem 1.1rem;
  border: 1px solid var(--9d-red);
  border-radius: 10px;
  background: var(--9d-p-red);
  color: var(--9d-ink);
  font-size: .84rem;
}
.user-panel-shell .hs-alert ul { padding-left: 1.1rem; margin: 0; }

/* Success flash on the add-more screen (mint, matching the dashboard summary). */
.user-panel-shell .hs-note {
  margin-bottom: 1rem;
  padding: .8rem 1.1rem;
  border-radius: 10px;
  background: var(--9d-mint);
  color: var(--9d-teal-deep);
  font-size: .85rem;
  font-weight: 600;
}

/* "Add hotel" button — dashboard welcome row, dashboard band header, hotels page.
   Shown only when QuizProgress::canAddHotels() is true (premium funnel that
   allows several hotels, and setup has already run). */
.user-panel-shell .hs-add {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  flex: 0 0 auto;
  padding: .5rem .95rem;
  border-radius: 10px;
  background: var(--9d-teal);
  color: #fff !important;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: filter .12s, transform .12s;
}
.user-panel-shell .hs-add:hover {
  filter: brightness(.96);
  transform: translateY(-1px);
  color: #fff !important;
}
.user-panel-shell .hs-add i { font-size: .95rem; line-height: 1; }

/* On the rose band header a solid teal fill is heavy, so use a white chip with
   teal text — same treatment the reference gives actions on tinted bands. */
.user-panel-shell .band .hs-add,
.user-panel-shell .card-header .hs-add {
  background: var(--9d-surface);
  color: var(--9d-teal-deep) !important;
  border: 1px solid var(--9d-teal);
}
.user-panel-shell .band .hs-add:hover,
.user-panel-shell .card-header .hs-add:hover {
  background: var(--9d-teal-soft);
  color: var(--9d-teal-deep) !important;
}


/* ==========================================================================
   Question screen — answer options, progress bar, actions
   Presentation only. Overrides the remote quiz stylesheet
   (backend-ha.9dots.ai/build/css/style.css), which styles .form-group as the
   option card and draws the selection dot with `label:before`, filling it red
   (#FF3644) when checked. The same mechanism is kept — only colours, spacing
   and the selected state change — so question.blade.php's markup and its
   handleOptionClick() JS are untouched and every question type still works.
   ========================================================================== */

/* --- Option cards ------------------------------------------------------- */
.qz-q .step-checkbox .form-group {
  background: var(--9d-surface) !important;
  border: 1px solid var(--9d-border);
  border-radius: 12px !important;
  padding: 1rem 1.15rem !important;
  margin-bottom: .7rem !important;
  box-shadow: var(--9d-shadow-soft);
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.qz-q .step-checkbox .form-group:hover {
  background: var(--9d-surface) !important;
  border-color: var(--9d-teal);
}

.qz-q .step-checkbox .form-group label {
  font-size: .92rem !important;
  font-weight: 600;
  color: var(--9d-ink);
  padding-right: 44px !important;
  margin-bottom: 0;
}

/* The dot: neutral outline instead of the grey/red pair. */
.qz-q .step-checkbox .form-group label:before {
  border: 2px solid var(--9d-border-strong) !important;
  background-color: var(--9d-surface) !important;
  box-shadow: none !important;
  padding: 9px !important;
  /* Border only. Transitioning box-shadow would animate the selection fill in
     from zero, which reads as lag on a control that should feel instant. */
  transition: border-color .12s;
}

/* Selected: teal dot, teal border, mint wash on the card. */
.qz-q .step-checkbox .form-group input:checked + label:before {
  background: var(--9d-surface) !important;
  border-color: var(--9d-teal) !important;
  box-shadow: inset 0 0 0 4px var(--9d-teal) !important;
}
.qz-q .step-checkbox .form-group:has(input:checked) {
  border-color: var(--9d-teal);
  background: var(--9d-teal-soft) !important;
}

/* The checkbox tick is drawn with label:after in the view's inline CSS, in red. */
.qz-q .step-checkbox .form-group input[type="checkbox"]:checked + label:after {
  border-right-color: var(--9d-teal) !important;
  border-bottom-color: var(--9d-teal) !important;
}

/* Keyboard focus stays visible even though the input itself is display:none. */
.qz-q .step-checkbox .form-group input:focus-visible + label:before {
  border-color: var(--9d-teal) !important;
  box-shadow: 0 0 0 3px rgba(41, 182, 181, .22) !important;
}

/* --- Progress bar ------------------------------------------------------- */
.user-panel-shell .user-quiz-content .progress {
  height: 8px !important;
  border-radius: 999px !important;
  background: #E6EAF0 !important;
  overflow: hidden;
}
.user-panel-shell .user-quiz-content .progress-bar {
  background: linear-gradient(90deg, var(--9d-teal), var(--9d-teal-icon)) !important;
  border-radius: 999px !important;
}

/* --- Actions ------------------------------------------------------------ */
.qz-q .btn-row button,
.qz-q .btn-row .btn {
  color: #fff !important;
  font-weight: 700 !important;
}
.qz-q .btn-row p a {
  color: var(--9d-muted) !important;
  font-size: .86rem;
  text-decoration: none;
}
.qz-q .btn-row p a:hover { color: var(--9d-teal-deep) !important; }

/* The question-type caption reads as a caption, not an error. */
.qz-q .hotel-analyse h5 { color: var(--9d-muted) !important; }