/* ============================================================
   SITE SHELL — client area wears the website's own look.
   CLIENTAREA-RESKIN 2026-10-24. Values measured from the website's
   own stylesheets (home-sections.css): navy #0E2A48 / #15375C /
   #184884, cyan #189CCC, page bg #F4F8FC, Manrope body,
   Space Grotesk wordmark, JetBrains Mono eyebrows.
   Loaded AFTER ui-v6.css so shell rules win. Admin layout never
   loads this file, so the admin glass design is untouched.
   ============================================================ */

/* ---------- page ---------- */
body { background: #F4F8FC; }
[data-theme="dark"] body { background: var(--surface-0); }

.sh-container { max-width: 1280px; margin: 0 auto; padding-left: 1.75rem; padding-right: 1.75rem; }
@media (max-width: 640px) { .sh-container { padding-left: 1rem; padding-right: 1rem; } }

/* ---------- header (website top row, sticky — the site's own is
     fixed, but sticky avoids content-overlap maths in the app) ---------- */
.sh-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border-bottom: 1px solid #E1EBF5;
}
.sh-header-row { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 18px 0; }
.sh-logo { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.sh-logo img { height: 32px; width: auto; display: block; }
.sh-burger {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 11px;
  border: 1px solid #CFE0EF; background: #F4F9FD; color: #123258; cursor: pointer; flex: 0 0 auto;
}
.sh-nav { display: flex; align-items: center; gap: 2px; margin-left: 6px; }
.sh-nav-item {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Manrope', sans-serif; color: #4E637E; font-size: 14.5px; font-weight: 600;
  padding: 9px 13px; border-radius: 10px; text-decoration: none; white-space: nowrap;
  background: transparent; border: 0; cursor: pointer; transition: color .2s ease, background .2s ease;
}
.sh-nav-item:hover { color: #123258; background: #F4F9FD; }
.sh-nav-item svg { flex: 0 0 auto; }
.sh-drop { position: relative; }
.sh-drop-menu {
  display: none; position: absolute; top: calc(100% + .55rem); left: 0;
  min-width: 250px; background: #FFFFFF; border: 1px solid #E1EBF5; border-radius: 12px;
  padding: 8px; box-shadow: 0 24px 50px -20px rgba(24, 72, 132, .35); z-index: 95;
}
.sh-drop:hover .sh-drop-menu, .sh-drop:focus-within .sh-drop-menu, .sh-drop.sh-open .sh-drop-menu { display: block; }
.sh-drop-menu a {
  display: block; padding: 8px 12px; border-radius: 8px; white-space: nowrap;
  font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 500; color: #4E637E; text-decoration: none;
}
.sh-drop-menu a:hover { background: #F4F9FD; color: #123258; }
.sh-cluster { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.sh-ghost {
  white-space: nowrap; color: #184884; font-family: 'Manrope', sans-serif; font-size: 14.5px; font-weight: 600;
  padding: 10px 16px; border-radius: 11px; border: 1px solid #CFE0EF; text-decoration: none; transition: all .25s ease;
}
.sh-ghost:hover { background: #F4F9FD; }
.sh-cta {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px;
  color: #FFFFFF !important; font-family: 'Manrope', sans-serif; font-size: 14.5px; font-weight: 800;
  padding: 11px 20px; border-radius: 11px; text-decoration: none; white-space: nowrap;
  background: linear-gradient(135deg, #189CCC, #184884);
  box-shadow: 0 12px 28px -12px rgba(24, 72, 132, .75); transition: transform .25s ease, box-shadow .25s ease;
}
.sh-cta:hover { transform: translateY(-1px); }
.sh-cart-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 11px; border: 1px solid #CFE0EF;
  background: #F4F9FD; color: #123258; text-decoration: none; flex: 0 0 auto;
}
.sh-cart-badge {
  position: absolute; top: -6px; right: -6px; display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border-radius: 99px;
  background: linear-gradient(135deg, #6366f1, #a855f7); color: #fff;
  font-size: .68rem; font-weight: 800; line-height: 1;
}
.sh-header .pm-theme-toggle {
  width: 44px; height: 44px; border-radius: 11px; border: 1px solid #CFE0EF;
  background: #F4F9FD; color: #123258; display: inline-flex; align-items: center; justify-content: center;
}
.sh-header .pm-theme-toggle svg { width: 20px; height: 20px; }
.sh-drawer { display: none; border-top: 1px solid #E1EBF5; padding: 12px 0 18px; }
.sh-drawer[hidden] { display: none !important; }
.sh-drawer:not([hidden]) { display: block; }
.sh-drawer a, .sh-drawer button.sh-drawer-link {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 600; color: #123258;
  padding: 11px 4px; text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left;
}
.sh-drawer .sh-drawer-sub { display: flex; flex-direction: column; padding: 2px 0 8px 16px; }
.sh-drawer .sh-drawer-sub a { font-size: 14px; font-weight: 500; color: #4E637E; padding: 7px 4px; }
@media (max-width: 1023px) {
  /* FULL-POLISH 2026-10-25 (m7): Register (.sh-ghost) is NO LONGER
     hidden here — guests get the same Register + Login pair as
     desktop. Only the site nav collapses into the drawer. */
  .sh-nav, .sh-cluster .sh-cta-text { display: none; }
  .sh-burger { display: inline-flex; }
}
/* FULL-POLISH 2026-10-25 (m7, <=480px): the full cluster cannot fit
   a 390px row, so the theme toggle moves into the hamburger drawer
   (a .pm-theme-toggle button is added there) and the remaining
   actions shrink to fit: burger + logo + cart + Register + Login. */
@media (max-width: 480px) {
  .sh-header .pm-theme-toggle { display: none; }
  .sh-header-row { gap: 8px; padding: 12px 0; }
  .sh-logo img { height: 26px; }
  .sh-burger, .sh-cart-btn { width: 38px; height: 38px; }
  .sh-cluster { gap: 6px; }
  .sh-cluster .sh-ghost { padding: 8px 10px; font-size: 13px; }
  .sh-cluster .sh-cta { padding: 9px 12px; font-size: 13px; }
}
/* FULL-POLISH 2026-10-25 (P4): logged-in client pages show TWO
   hamburgers on mobile — the site header's burger AND the content
   area's sidebar toggle (.sh-side-btn). The sidebar toggle is the
   one that opens the client navigation (and the bottom bar covers
   the main sections), so the site burger hides on app pages only
   (store/guest layouts keep it: they have no sidebar toggle). */
@media (max-width: 1023px) {
  body.sh-shell-page:not(.sh-guest) .sh-burger { display: none; }
}
@media (min-width: 1024px) { .sh-drawer { display: none !important; } }

/* dark header: same structure, website-navy surfaces */
[data-theme="dark"] .sh-header { background: rgba(14, 42, 72, .92); border-bottom-color: rgba(255, 255, 255, .12); }
[data-theme="dark"] .sh-logo img { filter: brightness(0) invert(1); }
[data-theme="dark"] .sh-nav-item { color: #C6DAEE; }
[data-theme="dark"] .sh-nav-item:hover { color: #FFFFFF; background: rgba(255, 255, 255, .08); }
[data-theme="dark"] .sh-drop-menu { background: #0E2A48; border-color: rgba(255, 255, 255, .14); }
[data-theme="dark"] .sh-drop-menu a { color: #C6DAEE; }
[data-theme="dark"] .sh-drop-menu a:hover { background: rgba(255, 255, 255, .08); color: #FFFFFF; }
[data-theme="dark"] .sh-ghost { color: #FFFFFF; border-color: rgba(255, 255, 255, .22); }
[data-theme="dark"] .sh-ghost:hover { background: rgba(255, 255, 255, .08); }
[data-theme="dark"] .sh-cart-btn,
[data-theme="dark"] .sh-header .pm-theme-toggle,
[data-theme="dark"] .sh-burger { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #FFFFFF; }
[data-theme="dark"] .sh-drawer { border-top-color: rgba(255, 255, 255, .12); }
[data-theme="dark"] .sh-drawer a, [data-theme="dark"] .sh-drawer button.sh-drawer-link { color: #FFFFFF; }
[data-theme="dark"] .sh-drawer .sh-drawer-sub a { color: #C6DAEE; }

.sh-side-btn {
  display: none; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 11px; border: 1px solid #CFE0EF;
  background: #FFFFFF; color: #123258; cursor: pointer; margin-top: 2px;
}
@media (max-width: 1023px) { .sh-side-btn { display: inline-flex; } }
[data-theme="dark"] .sh-side-btn { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #FFFFFF; }

/* ---------- configure page: live blueprint (hero split, steps, ready, order flow) ---------- */
.cfg-crumb { font-size: .85rem; color: var(--text-2); margin: 0 0 1rem; }
.cfg-crumb a { color: var(--text-2); text-decoration: none; }
.cfg-crumb a:hover { color: #189CCC; }
.cfg-hero { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.25rem; align-items: stretch; margin-bottom: 1.25rem; }
.cfg-hero-left { padding: 1.5rem 1.75rem; }
.cfg-eyebrow { letter-spacing: .14em; font-weight: 800; font-size: .78rem; color: #E86A1C; }
.cfg-hero-sub { color: #189CCC; font-weight: 700; margin: .15rem 0 0; }
.cfg-hero-right { background: #0E2A48; border-radius: 1rem; padding: 1.5rem 1.75rem; color: #FFFFFF; box-shadow: 0 10px 30px rgba(14, 42, 72, .25); }
.cfg-hero-label { letter-spacing: .12em; font-weight: 800; font-size: .78rem; color: #8FB8DC; }
.cfg-hero-right .pm-btn-ghost { color: #EAF3FB; border-color: rgba(255, 255, 255, .35); background: transparent; }
.cfg-hero-note { color: #9BB6D2; font-size: .9rem; margin: .35rem 0 0; }
.cfg-step { border-top: 3px solid #189CCC; }
.cfg-step-head { display: flex; align-items: baseline; gap: .6rem; }
.cfg-step-label { letter-spacing: .14em; font-weight: 800; font-size: .72rem; color: #189CCC; white-space: nowrap; }
.cfg-included { border-top: 3px solid #E8A33D; }
.cfg-ticks { list-style: none; }
.cfg-ticks li { position: relative; padding-left: 1.4rem; }
.cfg-ticks li::before { content: "✓"; position: absolute; left: 0; color: #1A9E4B; font-weight: 800; }
.cfg-ready { border-top: 3px solid #189CCC; }
.cfg-orderflow { margin-top: 1.25rem; background: linear-gradient(135deg, #0E2A48, #16456F); border-radius: 1rem; padding: 1.25rem 1.5rem; color: #FFFFFF; box-shadow: 0 10px 30px rgba(14, 42, 72, .25); }
.cfg-orderflow li { color: #D7E6F5; }
#advcr-picker label:has(.advcr-qty:checked):not([style*="b-ok-bg"]) { background: #EAF4FC; border-color: #189CCC; }
@media (max-width: 900px) { .cfg-hero { grid-template-columns: 1fr; } }

/* ---------- logged-in sidebar, website language (structure unchanged) ---------- */
.pm-shell .pm-sidebar { background: #FFFFFF; border-right: 1px solid #E1EBF5; }
.pm-shell .pm-sidebar .pm-brand-sub { color: #4E637E; }
.pm-shell .pm-sidebar .pm-nav-label { color: #6E8FB4; }
.pm-shell .pm-sidebar .pm-nav a { color: #4E637E; }
.pm-shell .pm-sidebar .pm-nav a:hover { background: #F4F9FD; color: #123258; }
.pm-shell .pm-sidebar .pm-nav a.pm-active { background: rgba(24, 156, 204, .10); color: #184884; }
.pm-shell .pm-sidebar .pm-side-foot a { color: #4E637E; }
.pm-shell .pm-sidebar .pm-rail-toggle { color: #4E637E; }
[data-theme="dark"] .pm-shell .pm-sidebar { background: #0E2A48; border-right-color: rgba(255, 255, 255, .12); }
[data-theme="dark"] .pm-shell .pm-sidebar .pm-brand-sub,
[data-theme="dark"] .pm-shell .pm-sidebar .pm-nav a,
[data-theme="dark"] .pm-shell .pm-sidebar .pm-side-foot a,
[data-theme="dark"] .pm-shell .pm-sidebar .pm-rail-toggle { color: #C6DAEE; }
[data-theme="dark"] .pm-shell .pm-sidebar .pm-nav-label { color: #6E8FB4; }
[data-theme="dark"] .pm-shell .pm-sidebar .pm-nav a:hover { background: rgba(255, 255, 255, .08); color: #FFFFFF; }
[data-theme="dark"] .pm-shell .pm-sidebar .pm-nav a.pm-active { background: rgba(255, 255, 255, .12); color: #FFFFFF; }
@media (max-width: 1023px) { .pm-shell .pm-sidebar .pm-rail-toggle { display: none; } }

/* ---------- content: website cards, headings, buttons ---------- */
.site-page-head { margin: 0 0 1.4rem; }
.site-eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: #6E8FB4; display: block; margin-bottom: 8px;
}
.site-page-head h1, h1.site-h1 {
  font-family: 'Manrope', sans-serif; font-weight: 800; letter-spacing: -.01em;
  font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.15; color: #123258; margin: 0;
}
.site-page-head p { color: #4E637E; margin: .45rem 0 0; font-size: 15px; }
[data-theme="dark"] .site-page-head h1, [data-theme="dark"] h1.site-h1 { color: var(--text-1); }
[data-theme="dark"] .site-page-head p { color: var(--text-3); }
.site-crumb-band { background: linear-gradient(180deg, #EAF3FB, #F4F8FC); border-bottom: 1px solid #E1EBF5; }
.site-crumb-band .sh-container { padding-top: 1.4rem; padding-bottom: 1.4rem; }
[data-theme="dark"] .site-crumb-band { background: linear-gradient(180deg, rgba(24, 156, 204, .12), transparent); border-bottom-color: rgba(255, 255, 255, .12); }

/* client cards in website language (admin untouched: this file is only
   loaded by the three client-area layouts) */
.pm-card {
  background: #FFFFFF; border: 1px solid #E1EBF5; border-radius: 16px;
  box-shadow: 0 10px 30px -18px rgba(24, 72, 132, .25);
}
.pm-card-head h2, .pm-card h2 { color: #123258; }
[data-theme="dark"] .pm-card { background: var(--surface-1); border-color: var(--asl-18); box-shadow: none; }
[data-theme="dark"] .pm-card-head h2, [data-theme="dark"] .pm-card h2 { color: var(--text-1); }
.pm-btn-primary { background: linear-gradient(135deg, #189CCC, #184884) !important; border-color: transparent !important; }
.site-outline-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 700; color: #184884;
  padding: 9px 16px; border-radius: 11px; border: 1px solid #CFE0EF; background: #FFFFFF; text-decoration: none;
  transition: background .2s ease;
}
.site-outline-btn:hover { background: #F4F9FD; }

.site-h2 { font-weight: 800; letter-spacing: -.01em; color: #123258; }
.site-card-title { font-weight: 800; color: #123258; }
.site-muted { color: #4E637E; }
[data-theme="dark"] .site-h2, [data-theme="dark"] .site-card-title { color: var(--text-1); }
[data-theme="dark"] .site-muted { color: var(--text-3); }

/* portal cards: thin coloured top accent stripe, cycling (live portal) */
.site-accent-card { position: relative; overflow: hidden; }
.site-accent-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: #189CCC;
}
.site-accent-card:nth-child(4n+2)::before { background: #16A34A; }
.site-accent-card:nth-child(4n+3)::before { background: #7C3AED; }
.site-accent-card:nth-child(4n+4)::before { background: #EA580C; }

/* portal help / account icon links */
.site-icon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.site-icon-link {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  background: #FFFFFF; border: 1px solid #E1EBF5; border-radius: 16px; padding: 22px 12px;
  font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 700; color: #123258; text-decoration: none;
  box-shadow: 0 10px 30px -18px rgba(24, 72, 132, .25); transition: transform .2s ease, box-shadow .2s ease;
}
.site-icon-link:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -18px rgba(24, 72, 132, .35); }
.site-icon-link .site-ic {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border-radius: 13px; background: #F4F9FD; border: 1px solid #E1EBF5; color: #184884;
}
[data-theme="dark"] .site-icon-link { background: var(--surface-1); border-color: var(--asl-18); color: var(--text-1); box-shadow: none; }
[data-theme="dark"] .site-icon-link .site-ic { background: rgba(24, 156, 204, .12); border-color: var(--asl-18); color: #7CC6E8; }

@media (max-width: 1023px) {
  .sh-header-row { flex-wrap: wrap; }
}
.sh-drawer-label { font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 800; color: #123258; padding: 11px 4px 2px; }
[data-theme="dark"] .sh-drawer-label { color: #FFFFFF; }

/* ---------- footer (website footer, dark navy anchor) ---------- */
.sh-footer { position: relative; z-index: 1; background: #0E2A48; color: #C6DAEE; padding: 70px 0 34px; overflow: hidden; }
.sh-wordmark { display: flex; flex-wrap: wrap; gap: clamp(2px, .8vw, 10px); margin: 0 0 clamp(46px, 5vw, 72px); cursor: default; }
.sh-wordmark span {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(52px, 12vw, 170px);
  line-height: .84; letter-spacing: -.05em; color: #15375C; display: inline-block;
  transition: color .42s ease, transform .42s ease;
}
.sh-wordmark:hover span:nth-child(3n+1) { color: #189CCC; transform: translateY(-4px); }
.sh-wordmark:hover span:nth-child(3n+2) { color: #8B5CF6; transform: translateY(-4px); }
.sh-wordmark:hover span:nth-child(3n) { color: #16A34A; transform: translateY(-4px); }
.sh-foot-grid { display: grid; grid-template-columns: minmax(260px, 1.4fr) repeat(4, 1fr); gap: 28px; }
@media (max-width: 1023px) { .sh-foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sh-foot-grid { grid-template-columns: 1fr; } }
.sh-foot-logo img { height: 32px; width: auto; display: block; filter: brightness(0) invert(1); margin-bottom: 20px; }
.sh-foot-blurb { font-size: 14.5px; line-height: 1.65; color: #9BB6D2; max-width: 330px; margin: 0 0 24px; }
.sh-foot-social { display: flex; gap: 10px; flex-wrap: wrap; }
.sh-foot-social a {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06);
  color: #C6DAEE; text-decoration: none; transition: all .25s ease;
}
.sh-foot-social a:hover { background: rgba(255, 255, 255, .12); color: #FFFFFF; }
.sh-foot-head {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: #6E8FB4; margin-bottom: 18px;
}
.sh-foot-links { display: grid; gap: 11px; }
.sh-foot-links a { font-size: 14.5px; color: #B8CEE5; font-weight: 500; text-decoration: none; }
.sh-foot-links a:hover { color: #FFFFFF; }
.sh-foot-links span { font-size: 13.5px; color: #7E9CBD; line-height: 1.6; }
.sh-foot-links a.sh-foot-phone { color: #FFFFFF; font-weight: 700; }
.sh-foot-divider { height: 1px; background: rgba(255, 255, 255, .12); margin: 44px 0 26px; }
.sh-foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.sh-foot-copy { font-size: 13px; color: #7E9CBD; }
.sh-foot-legal { display: flex; flex-wrap: wrap; gap: 22px; }
.sh-foot-legal a { font-size: 13px; color: #9BB6D2; text-decoration: none; }
.sh-foot-legal a:hover { color: #FFFFFF; }
.sh-foot-marks { display: flex; gap: 6px; align-items: center; }
.sh-foot-marks span {
  font-size: .62rem; font-weight: 700; letter-spacing: .04em; color: #C6DAEE;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: .3rem; padding: .14rem .4rem;
}
.sh-foot-select {
  background: rgba(255, 255, 255, .06); color: #C6DAEE; border: 1px solid rgba(255, 255, 255, .14);
  border-radius: .55rem; padding: .35rem .5rem; font-size: 12px;
}
.sh-foot-select option { color: #123258; }

/* auth pages: keep the card centred under the shell */
.sh-auth-main { min-height: 60vh; display: flex; align-items: flex-start; justify-content: center; padding: 3rem 1rem 4rem; }

/* ============================================================
   FINISHING 2026-10-24 — user feedback (Quote #21 screenshots):
   header + footer FULL WIDTH (shell ke bahar, viewport edge-to-edge),
   sidebar body ke ANDER normal flow me (page ke saath scroll, koi
   fixed rail / independent scroll nahi), admin-style dropdown groups.
   Sirf client-area layouts (yeh file admin kabhi load nahi karta).
   ============================================================ */

/* page column: header (full width) → body (sidebar + content) → footer (full width) */
body { margin: 0; } /* browser default 8px margin would frame header/footer — edge-to-edge needs 0 */
body.sh-shell-page { display: flex; flex-direction: column; min-height: 100vh; }
body.sh-shell-page .pm-shell { flex: 1 0 auto; min-height: 0; }
body.sh-shell-page .sh-footer { flex-shrink: 0; }

/* desktop: sidebar normal document flow me — page scroll ho to sidebar
   bhi saath scroll ho; koi cut/scroll-trap nahi (mobile drawer ≤900px
   premium.css ke fixed rule par hi chalta hai, is override se bahar). */
@media (min-width: 901px) {
  body.sh-shell-page .pm-shell .pm-sidebar { position: static; height: auto; }
  body.sh-shell-page .pm-shell .pm-nav { overflow-y: visible; }
}
/* mobile drawer: sticky site header (z-90) ke upar aaye, taaki drawer ka
   head (avatar + naam) + close button dikhe aur clickable rahe — pehle
   drawer header ke neeche dab jaata tha (purana z-order note). */
@media (max-width: 900px) {
  body.sh-shell-page .pm-sidebar { z-index: 100; }
}

/* ---------- sidebar head: avatar + client name (logo duplicate hata) ---------- */
.pm-side-head {
  display: flex; align-items: center; gap: .6rem;
  padding: 1.4rem 1rem 1rem 1.25rem; border-bottom: 1px solid #E1EBF5; flex: none;
}
.pm-side-who { display: flex; align-items: center; gap: .7rem; min-width: 0; flex: 1; }
.pm-side-avatar {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, #189CCC, #184884); color: #FFFFFF;
  font-weight: 800; font-size: 15px; box-shadow: 0 6px 16px -6px rgba(24, 72, 132, .55);
}
.pm-side-who-text { display: flex; flex-direction: column; min-width: 0; }
.pm-side-name {
  font-weight: 700; color: #123258; font-size: 15px; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pm-side-sub { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #6E8FB4; }
.pm-side-head .pm-rail-toggle, .pm-side-head .pm-drawer-x { flex: none; }
[data-theme="dark"] .pm-side-head { border-bottom-color: rgba(255, 255, 255, .12); }
[data-theme="dark"] .pm-side-name { color: #FFFFFF; }
html.pm-rail .pm-side-who-text { display: none; }
html.pm-rail .pm-side-head { justify-content: center; padding-left: 0; padding-right: 0; }

/* ---------- dropdown groups, website language me ---------- */
.pm-shell .pm-sidebar .pm-nav-group + .pm-nav-group { margin-top: .5rem; }
.pm-shell .pm-sidebar .pm-nav-ghead { color: #4E637E; padding: .62rem .75rem; }
.pm-shell .pm-sidebar .pm-nav-ghead:hover { background: #F4F9FD; color: #123258; }
.pm-shell .pm-sidebar .pm-nav-glabel {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
}
.pm-shell .pm-sidebar .pm-nav-ghead svg.pm-gicon { background: #F4F9FD; border-color: #E1EBF5; color: #184884; }
.pm-shell .pm-sidebar .pm-nav-ghead:hover svg.pm-gicon { background: #EAF3FB; border-color: #CFE0EF; }
.pm-shell .pm-sidebar .pm-nav-group.has-active .pm-nav-ghead { color: #184884; }
.pm-shell .pm-sidebar .pm-nav-group.has-active svg.pm-gicon {
  background: rgba(24, 156, 204, .12); border-color: rgba(24, 156, 204, .35); color: #184884;
}
.pm-shell .pm-sidebar .pm-nav-sub { padding-bottom: .35rem; }
.pm-shell .pm-sidebar .pm-nav-sub a { padding-left: 1rem; color: #4E637E; }
.pm-shell .pm-sidebar .pm-nav-sub a:hover { background: #F4F9FD; color: #123258; }
.pm-shell .pm-sidebar .pm-nav-sub a.pm-active {
  background: rgba(24, 156, 204, .10); color: #184884; font-weight: 700;
  border-left: 1px solid transparent; box-shadow: inset 3px 0 0 #189CCC;
}
[data-theme="dark"] .pm-shell .pm-sidebar .pm-nav-ghead { color: #C6DAEE; }
[data-theme="dark"] .pm-shell .pm-sidebar .pm-nav-ghead:hover { background: rgba(255, 255, 255, .08); color: #FFFFFF; }
[data-theme="dark"] .pm-shell .pm-sidebar .pm-nav-ghead svg.pm-gicon { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #C6DAEE; }
[data-theme="dark"] .pm-shell .pm-sidebar .pm-nav-group.has-active .pm-nav-ghead { color: #FFFFFF; }
[data-theme="dark"] .pm-shell .pm-sidebar .pm-nav-group.has-active svg.pm-gicon { background: rgba(24, 156, 204, .20); border-color: rgba(24, 156, 204, .45); color: #FFFFFF; }
[data-theme="dark"] .pm-shell .pm-sidebar .pm-nav-sub a { color: #C6DAEE; }
[data-theme="dark"] .pm-shell .pm-sidebar .pm-nav-sub a:hover { background: rgba(255, 255, 255, .08); color: #FFFFFF; }
[data-theme="dark"] .pm-shell .pm-sidebar .pm-nav-sub a.pm-active { background: rgba(255, 255, 255, .12); color: #FFFFFF; }

/* ---------- page-head + crumbs polish ---------- */
.site-page-head { margin: 0 0 1rem; }
.pm-crumbs { font-size: .85rem; }
.pm-crumb-cur { color: #184884; font-weight: 700; }
[data-theme="dark"] .pm-crumb-cur { color: var(--text-1); }

/* ---------- keyboard focus (sidebar, header, footer) ---------- */
.pm-shell .pm-sidebar .pm-nav a:focus-visible,
.pm-shell .pm-sidebar .pm-nav-ghead:focus-visible,
.pm-side-head a:focus-visible, .pm-side-head button:focus-visible,
.sh-header a:focus-visible, .sh-header button:focus-visible,
.sh-footer a:focus-visible { outline: 2px solid #189CCC; outline-offset: 2px; border-radius: 6px; }

/* ============================================================
   UI/UX AUDIT 2026-10-24 — live blueprint vs clone gaps.
   Live tokens: navy #0E2A48 header bars, cyan→navy primary gradient
   (135deg #189CCC→#184884), green checkout CTA (live webyne.css:
   135deg #22C58A→#12855C). Fixes the indigo/violet --grad-brand leaks
   (active filter tabs, category pills/buttons) without touching the
   shared token — this file loads last and only in client layouts.
   ============================================================ */

/* active filter tabs / pills (services filter, service tabs, profile
   tabs, store category tabs): site gradient, not indigo→violet */
html[data-theme] .pm-filter-tabs .pm-ftab.pm-ftab.active,
html[data-theme] .pm-filter-tabs .pm-ftab.pm-ftab.pm-ftab-active {
  background: linear-gradient(135deg, #189CCC, #184884) !important;
  color: #FFFFFF !important; border-color: transparent;
  box-shadow: 0 8px 20px -8px rgba(24, 72, 132, .55);
}
html[data-theme] .pm-filter-tabs .pm-ftab.pm-ftab.active .pm-ftab-count {
  background: rgba(255, 255, 255, .25); color: #FFFFFF;
}

/* table headers: live cart's dark navy bar with tracked labels,
   replacing the pale lavender thead on every client-area table */
.pm-table thead th {
  background: #0E2A48; color: #FFFFFF;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.pm-table thead th:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.pm-table thead th:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
[data-theme="dark"] .pm-table thead th { background: #16365E; }

/* gradient summary head (live ORDER SUMMARY card): apply to a
   .pm-card-head to turn it into the gradient band */
.pm-card-head--grad {
  background: linear-gradient(135deg, #189CCC, #184884) !important;
  border-bottom: 0; border-radius: 15px 15px 0 0;
}
.pm-card-head--grad h2 { color: #FFFFFF !important; }

/* green payment CTA (live cart Checkout): use for Pay/Checkout
   actions — red stays reserved for destructive actions (Close Ticket) */
.pm-btn-pay {
  background: linear-gradient(135deg, #22C58A, #12855C) !important;
  border-color: transparent !important; color: #FFFFFF !important;
  box-shadow: 0 12px 28px -12px rgba(18, 133, 92, .7);
  transition: transform .2s ease, box-shadow .2s ease;
}
.pm-btn-pay:hover { transform: translateY(-1px); }

/* cart badge: site gradient, not the indigo→violet accent */
.sh-cart-badge { background: linear-gradient(135deg, #189CCC, #184884); }

/* store plan price (navy, live pattern) + billing-term pill */
.site-price { color: #123258; }
[data-theme="dark"] .site-price { color: var(--text-1); }
.site-term-pill {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #184884; background: #EAF3FB;
  border: 1px solid #CFE0EF; border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
[data-theme="dark"] .site-term-pill { color: #7CC6E8; background: rgba(24, 156, 204, .12); border-color: rgba(24, 156, 204, .35); }

/* guest pages on the app shell (register, pwreset) used to show an empty
   MANAGE/ACCOUNT/STORE sidebar — those groups hold no guest links, and
   login already uses the centred auth shell. Guests get the full-width
   content column instead; the sidebar DOM stays (JS-safe), just hidden. */
body.sh-guest .pm-shell .pm-sidebar { display: none; }
body.sh-guest .sh-side-btn { display: none !important; }

/* ============================================================
   DEPLOYED-ISSUES-FIX 2026-10-25 (Phase 1C): the website's own
   header/footer (wx classes) inside the client area.
   The wx markup needs a handful of Bootstrap utilities (container,
   row, columns, display helpers). They are SCOPED under .wx21/.wx1
   on purpose — loading the website's bootstrap.subset.css globally
   would restyle every client view that happens to use a .container
   or .row class. Only the exact utilities the wx markup uses are
   reproduced here, with Bootstrap's own values.
   ============================================================ */
.wx21 .container, .wx1 .container { --bs-gutter-x:1.5rem; --bs-gutter-y:0; width:100%; padding-right:calc(var(--bs-gutter-x) * .5); padding-left:calc(var(--bs-gutter-x) * .5); margin-right:auto; margin-left:auto; }
/* The header container also carries .wx22, which caps it at 1280px on
   the website at every width — so the header gets NO Bootstrap
   breakpoint max-widths here (the .wx22 rule supplies the cap). The
   footer container has no such cap and follows Bootstrap. */
@media (min-width:576px) { .wx1 .container { max-width:540px; } }
@media (min-width:768px) { .wx1 .container { max-width:720px; } }
@media (min-width:992px) { .wx1 .container { max-width:960px; } }
@media (min-width:1200px) { .wx1 .container { max-width:1140px; } }
@media (min-width:1400px) { .wx1 .container { max-width:1320px; } }
.wx1 .row { --bs-gutter-x:2rem; --bs-gutter-y:2.5rem; display:flex; flex-wrap:wrap; margin-top:calc(-1 * var(--bs-gutter-y)); margin-right:calc(-.5 * var(--bs-gutter-x)); margin-left:calc(-.5 * var(--bs-gutter-x)); }
.wx1 .row > * { flex-shrink:0; width:100%; max-width:100%; padding-right:calc(var(--bs-gutter-x) * .5); padding-left:calc(var(--bs-gutter-x) * .5); margin-top:var(--bs-gutter-y); }
.wx1 .col-6 { flex:0 0 auto; width:50%; }
@media (min-width:992px) {
  .wx1 .col-lg-2 { flex:0 0 auto; width:16.66666667%; }
  .wx1 .col-lg-4 { flex:0 0 auto; width:33.33333333%; }
  .wx1 .col-lg-8 { flex:0 0 auto; width:66.66666667%; }
}
.wx21 .d-none, .wx1 .d-none { display:none !important; }
.wx21 .d-inline-flex { display:inline-flex !important; }
@media (min-width:768px) { .wx21 .d-md-inline-flex { display:inline-flex !important; } }
@media (min-width:992px) {
  .wx21 .d-lg-flex { display:flex !important; }
  .wx21 .d-lg-block { display:block !important; }
  .wx21 .d-lg-none, .wx1 .d-lg-none { display:none !important; }
}
/* The website header is position:fixed; this spacer reserves its
   height in document flow so page content never slides underneath.
   69px = 18px padding x2 + 32px logo + 1px border (the unscrolled
   size; site-nav.js shrinks padding on scroll, leaving at most a
   small harmless gap — overlap is the failure this avoids). */
.wx-spacer { height:69px; }
/* Client cluster inside the website header's right-hand group:
   cart, theme toggle, bell, avatar. The buttons keep their existing
   client styles; this only lays them out. */
.wx-cluster { display:flex; align-items:center; gap:.5rem; }
@media (max-width:480px) { .wx-cluster .pm-theme-toggle { display:none; } }
/* Client utility strip below the website footer (payment badges +
   language/currency switching). Same navy as the website footer,
   but visually its own strip — it is not part of the website footer. */
.wx-client-strip { background:#0E2A48; color:#C6DAEE; padding:6px 0 20px; }
.wx-client-strip-inner { max-width:1320px; margin:0 auto; padding:0 .75rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.wx-client-strip .sh-foot-marks span { color:#C6DAEE; border-color:rgba(255,255,255,.25); }
.wx-client-strip label { color:#C6DAEE; }