/* 
   Tech-Mech Mobile Car Service - Premium Presentation Stylesheet
   Designed with custom variables, Apple-inspired scroll animations, and z-index menu toggles.
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800;900&display=swap');

:root {
   /* Branding Palette */
   --color-primary: #0A2240;
   --color-secondary: #E67E00;
   --color-secondary-hover: #C56C00;
   --color-bg: #FFFFFF;
   --color-bg-alt: #F5F5F7;
   --color-text-main: #1D1D1F;
   --color-text-muted: #86868B;
   --color-border: #E2E8F0;
   --color-success: #10B981;

   --font-display: 'Outfit', 'Inter', -apple-system, sans-serif;
   --font-body: 'Inter', -apple-system, sans-serif;
   --transition-smooth: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
   --transition-fast: all 0.2s ease;
   --border-radius-lg: 18px;
   --border-radius-md: 12px;
   --border-radius-sm: 8px;

   --shadow-premium: 0 10px 30px rgba(10, 34, 64, 0.04), 0 1px 8px rgba(10, 34, 64, 0.02);
   --shadow-hover: 0 20px 40px rgba(10, 34, 64, 0.08), 0 1px 10px rgba(10, 34, 64, 0.03);
   --shadow-glass: 0 8px 32px 0 rgba(10, 34, 64, 0.08);
   --shadow-glow: 0 0 40px rgba(230, 126, 0, 0.3), 0 10px 30px rgba(10, 34, 64, 0.1);
}

*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   scroll-behavior: smooth;
   font-size: 16px;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

body {
   font-family: var(--font-body);
   background-color: var(--color-bg);
   color: var(--color-text-main);
   line-height: 1.6;
   overflow-x: hidden;
   width: 100%;
   padding-top: 80px;
}

img {
   max-width: 100%;
   height: auto;
   display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--font-display);
   font-weight: 700;
   color: var(--color-primary);
   line-height: 1.15;
   letter-spacing: -0.02em;
}

a {
   color: inherit;
   text-decoration: none;
   transition: var(--transition-fast);
}

.container {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 1.5rem;
}

.text-center {
   text-align: center;
}

/* ============================================= */
/* HEADER & NAVIGATION */
/* ============================================= */
.header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 10002;
   isolation: isolate;
   background-color: rgba(255, 255, 255, 0.92);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border-bottom: 1px solid rgba(226, 232, 240, 0.8);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.header.scrolled {
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.nav-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 80px;
}

.logo {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   text-decoration: none;
}

.logo img {
   height: 48px;
   width: auto;
   border-radius: 8px;
   flex-shrink: 0;
}

.logo-text {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   line-height: 1;
}

.logo-title {
   font-family: var(--font-display);
   font-size: 1.25rem;
   font-weight: 900;
   color: var(--color-primary);
   line-height: 1;
   display: block;
   white-space: nowrap;
}

.logo-subtitle {
   font-family: var(--font-display);
   font-size: 0.625rem;
   font-weight: 700;
   color: var(--color-secondary);
   letter-spacing: 0.15em;
   text-transform: uppercase;
   display: block;
   white-space: nowrap;
   margin-top: 2px;
}

.nav-links {
   display: flex;
   align-items: center;
   gap: 2rem;
   list-style: none;
}

.nav-links a {
   font-weight: 500;
   font-size: 0.95rem;
   color: var(--color-text-main);
   position: relative;
}

.nav-links a::after {
   content: '';
   position: absolute;
   bottom: -4px;
   left: 0;
   width: 0;
   height: 2px;
   background-color: var(--color-secondary);
   transition: var(--transition-fast);
}

.nav-links a:hover::after,
.nav-links a.active::after {
   width: 100%;
}

/* Mobile drawer */
.nav-drawer {
   position: fixed;
   top: 0;
   right: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: 10001;
}

.nav-links {
   pointer-events: auto;
}

.menu-toggle {
   display: none;
   flex-direction: column;
   gap: 6px;
   cursor: pointer;
   background: none;
   border: none;
   padding: 8px;
   position: relative;
   z-index: 10002;
}

.menu-toggle span {
   display: block;
   width: 24px;
   height: 2px;
   background-color: var(--color-primary);
   border-radius: 2px;
   transition: var(--transition-fast);
}

.nav-overlay {
   display: none;
   position: fixed;
   inset: 0;
   background: rgba(10, 34, 64, 0.5);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
   z-index: 10000;
   opacity: 0;
   transition: opacity 0.3s ease;
}

.nav-overlay.active {
   display: block;
   opacity: 1;
}

@media (max-width: 992px) {
   .menu-toggle {
      display: flex;
   }

   .nav-links {
      position: fixed;
      top: 0;
      right: 0;
      width: 75vw;
      max-width: 320px;
      height: 100vh;
      background-color: #FFFFFF;
      flex-direction: column;
      padding: 6rem 2rem 2rem;
      gap: 1.5rem;
      transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: -10px 0 30px rgba(0, 0, 0, 0.05);
      z-index: 10001;
      align-items: flex-start;
   }

   .nav-links.active {
      transform: translateX(0);
   }
}

/* ============================================= */
/* BUTTONS */
/* ============================================= */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0.9rem 1.8rem;
   font-family: var(--font-display);
   font-weight: 600;
   font-size: 0.95rem;
   border-radius: 30px;
   cursor: pointer;
   transition: all 0.3s ease;
   border: 2px solid transparent;
   gap: 8px;
   position: relative;
   overflow: hidden;
}

.btn-primary {
   background-color: var(--color-secondary);
   color: #FFFFFF;
}

.btn-primary:hover {
   background-color: var(--color-secondary-hover);
   transform: translateY(-2px);
   box-shadow: 0 8px 25px rgba(230, 126, 0, 0.3);
}

.btn-outline {
   border-color: rgba(10, 34, 64, 0.15);
   color: var(--color-primary);
   background-color: transparent;
}

.btn-outline:hover {
   border-color: var(--color-primary);
   background-color: var(--color-primary);
   color: #FFFFFF;
}

/* ============================================= */
/* SECTION 1: HERO — Fullscreen cinematic */
/* ============================================= */
.hero-presentation {
   position: relative;
   height: 100vh;
   width: 100%;
   background-color: #000000;
   overflow: hidden;
}

.hero-bg-media {
   position: absolute;
   inset: 0;
   z-index: 1;
   overflow: hidden;
}

.hero-bg-img-file {
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: brightness(0.4) saturate(1.1);
   transform-origin: center;
   will-change: transform;
   animation: heroZoom 8s ease-out forwards;
}

@keyframes heroZoom {
   0% {
      transform: scale(1.15);
   }

   100% {
      transform: scale(1);
   }
}

.hero-screen-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to bottom, rgba(10, 34, 64, 0.2) 0%, rgba(10, 34, 64, 0.7) 100%);
   z-index: 2;
}

.hero-presentation-content {
   position: relative;
   z-index: 3;
   color: #FFFFFF;
   max-width: 800px;
   margin: 0 auto;
   text-align: center;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 0 1.5rem;
   animation: heroContentFadeIn 1.2s 0.3s both ease-out;
}

@keyframes heroContentFadeIn {
   from {
      opacity: 0;
      transform: translateY(30px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.hero-presentation-content h1 {
   color: #FFFFFF;
   font-size: clamp(2.5rem, 5vw, 4.5rem);
   font-weight: 900;
   line-height: 1.05;
   margin-bottom: 1.25rem;
   letter-spacing: -0.03em;
}

.hero-presentation-content p {
   font-size: clamp(1rem, 1.5vw, 1.25rem);
   color: rgba(255, 255, 255, 0.85);
   margin-bottom: 2.5rem;
   max-width: 600px;
}

.hero-btn-row {
   display: flex;
   gap: 1.25rem;
   flex-wrap: wrap;
   justify-content: center;
}

@media (max-width: 768px) {
   .hero-presentation {
      height: 90vh;
   }

   .hero-presentation-content h1 {
      font-size: 2.3rem;
   }

   .hero-presentation-content p {
      font-size: 1rem;
   }
}

/* ============================================= */
/* SECTION: FAMOUS CAR BRANDS & WARRANTY STRIP */
/* ============================================= */
.brands-warranty-strip {
   background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
   border-bottom: 1px solid #E2E8F0;
   padding: 1.4rem 0 1.6rem;
   position: relative;
   overflow: hidden;
}

.brands-warranty-container {
   max-width: 900px;
   margin: 0 auto;
   padding: 0 1.25rem;
   text-align: center;
}

.warranty-badge-row {
   display: flex;
   justify-content: center;
   margin-bottom: 0.45rem;
}

.warranty-pill {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: #F0FDF4;
   border: 1px solid #BBF7D0;
   color: #166534;
   padding: 3px 12px;
   border-radius: 999px;
   font-size: 0.76rem;
   font-weight: 700;
   letter-spacing: 0.02em;
}

.warranty-headline {
   font-size: clamp(1.2rem, 2.5vw, 1.65rem);
   font-weight: 800;
   color: var(--color-primary, #0A2240);
   margin: 0 0 0.35rem 0;
   line-height: 1.25;
   letter-spacing: -0.02em;
}

.warranty-subtext {
   font-size: clamp(0.82rem, 1.3vw, 0.9rem);
   color: #64748B;
   max-width: 680px;
   margin: 0 auto 1.15rem auto;
   line-height: 1.45;
}

/* Single-Line Continuous Marquee Track */
.brands-marquee-wrapper {
   position: relative;
   width: 100%;
   overflow: hidden;
   padding: 0.25rem 0;
   display: flex;
   mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
   -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

.brands-marquee-track {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   width: max-content;
   white-space: nowrap;
   flex-wrap: nowrap;
   animation: brandsMarquee 34s linear infinite;
   will-change: transform;
}

.brands-marquee-track:hover {
   animation-play-state: paused;
}

@keyframes brandsMarquee {
   0% {
      transform: translateX(0);
   }
   100% {
      transform: translateX(-50%);
   }
}

.brand-chip {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: #FFFFFF;
   border: 1px solid #E2E8F0;
   border-radius: 999px;
   padding: 6px 14px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
   transition: all 0.2s ease;
   flex-shrink: 0;
   white-space: nowrap;
}

.brand-chip:hover {
   border-color: #CBD5E1;
   box-shadow: 0 3px 8px -1px rgba(0, 0, 0, 0.08);
   transform: translateY(-1px);
}

.brand-chip-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   color: #1E293B;
   width: 20px;
   height: 20px;
}

.brand-chip-icon svg {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.brand-chip-name {
   font-size: 0.82rem;
   font-weight: 700;
   color: #1E293B;
   letter-spacing: -0.01em;
}

@media (max-width: 768px) {
   .hero-presentation {
      height: 86vh;
   }
   .brands-warranty-strip {
      padding: 1.15rem 0 1.25rem;
   }
   .warranty-headline {
      font-size: 1.15rem;
   }
   .warranty-subtext {
      font-size: 0.8rem;
      margin-bottom: 0.9rem;
   }
   .brand-chip {
      padding: 5px 11px;
      gap: 6px;
   }
   .brand-chip-icon {
      width: 18px;
      height: 18px;
   }
   .brand-chip-name {
      font-size: 0.76rem;
   }
   .brands-marquee-track {
      animation-duration: 25s;
      gap: 0.6rem;
   }
}

/* ============================================= */
/* SECTION: TRUST WEDGES STRIP */
/* ============================================= */
.trust-wedges-strip {
   padding: 2rem 0;
   background: #FAFAFA;
   border-bottom: 1px solid var(--color-border);
}

.trust-wedges-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1rem;
}

.trust-wedge-strip-item {
   display: flex;
   align-items: center;
   gap: 0.85rem;
   padding: 0.5rem;
   opacity: 0;
   transform: translateY(15px);
   animation: wedgeSlideUp 0.6s forwards;
}

.trust-wedge-strip-item:nth-child(1) {
   animation-delay: 0.1s;
}

.trust-wedge-strip-item:nth-child(2) {
   animation-delay: 0.2s;
}

.trust-wedge-strip-item:nth-child(3) {
   animation-delay: 0.3s;
}

.trust-wedge-strip-item:nth-child(4) {
   animation-delay: 0.4s;
}

@keyframes wedgeSlideUp {
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.wedge-strip-icon {
   font-size: 1.6rem;
   flex-shrink: 0;
}

.wedge-strip-content h4 {
   font-size: 0.85rem;
   margin-bottom: 2px;
}

.wedge-strip-content p {
   font-size: 0.75rem;
   color: var(--color-text-muted);
   line-height: 1.3;
}

@media (max-width: 768px) {
   .trust-wedges-grid {
      grid-template-columns: repeat(2, 1fr);
   }
}

/* ============================================= */
/* PRICE BADGE */
/* ============================================= */
.price-badge-global {
   display: inline-block;
   background: transparent;
   border: 2px solid rgba(255, 255, 255, 0.3);
   color: #FFFFFF;
   font-weight: 700;
   font-size: 0.7rem;
   padding: 0.35rem 0.9rem;
   border-radius: 100px;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   margin-bottom: 0.75rem;
}

/* ============================================= */
/* SECTION 2: PROBLEM — Pinned split view */
/* ============================================= */
.presentation-pin-trigger {
   position: relative;
   width: 100%;
}

.presentation-sticky-view {
   position: sticky;
   top: 0;
   height: 100vh;
   width: 100%;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   isolation: isolate;
}

.problem-pin-trigger {
   height: 65vh;
}

.problem-split-track {
   display: flex;
   width: 100%;
   height: 100%;
   position: relative;
}

@media (max-width: 768px) {
   .problem-split-track {
      flex-direction: column;
   }
}

.problem-side {
   flex: 1;
   height: 100%;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 3rem;
   overflow: hidden;
}

.problem-side-bg {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: 1;
   will-change: opacity;
   filter: brightness(0.6);
}

.problem-side-overlay {
   position: absolute;
   inset: 0;
   z-index: 2;
}

.problem-side.side-left .problem-side-overlay,
.problem-side.side-right .problem-side-overlay {
   background: rgba(5, 14, 26, 0.45);
}

.problem-side-content {
   position: relative;
   z-index: 3;
   color: #FFFFFF;
   text-align: center;
   max-width: 480px;
   will-change: opacity, transform;
}

.problem-side-content h3 {
   color: #FFFFFF;
   font-size: clamp(1.8rem, 3vw, 2.8rem);
   font-weight: 800;
   line-height: 1.15;
   letter-spacing: -0.02em;
}

.problem-side.side-right .problem-side-content h3 {
   background: linear-gradient(135deg, #FFB04D 0%, #E67E00 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

@media (max-width: 768px) {
   .problem-pin-trigger {
      height: auto !important;
   }

   .problem-pin-trigger .presentation-sticky-view {
      position: relative !important;
      height: auto !important;
      overflow: visible !important;
   }

   .problem-split-track {
      flex-direction: column !important;
      height: auto !important;
   }

   .problem-side {
      height: 45vh !important;
      padding: 2.5rem 1.5rem !important;
   }
}

/* ============================================= */
/* SECTION 3: SAVE MONEY — Cinematic fade-in */
/* ============================================= */
.money-presentation {
   position: relative;
   height: 80vh;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
}

.money-bg-container {
   position: absolute;
   inset: 0;
   z-index: 1;
}

.money-bg-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: brightness(0.35) saturate(1.2);
   transform: scale(1.05);
   transition: transform 0.1s linear;
   will-change: transform;
}

.money-content {
   position: relative;
   z-index: 2;
   text-align: center;
   padding: 0 1.5rem;
}

.money-text-row {
   font-family: var(--font-display);
   font-size: clamp(2rem, 4vw, 4rem);
   font-weight: 800;
   color: #FFFFFF;
   line-height: 1.2;
   letter-spacing: -0.025em;
   opacity: 0;
   transform: translateY(40px);
   transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.money-text-row.row-highlight {
   background: linear-gradient(135deg, #FFB04D, #E67E00);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.money-presentation.in-view .money-text-row {
   opacity: 1;
   transform: translateY(0);
}

.money-presentation.in-view .money-text-row:nth-child(2) {
   transition-delay: 0.2s;
}

.money-presentation.in-view .money-text-row:nth-child(3) {
   transition-delay: 0.4s;
}

/* ============================================= */
/* SECTION 4: SAVE TIME — Pinned overlay messages */
/* ============================================= */
.time-desktop-view {
   display: none;
}
.time-mobile-view {
   display: block;
}

.time-pin-trigger {
   height: auto;
}

.time-bg-container {
   position: absolute;
   inset: 0;
   z-index: 1;
}

.time-bg-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: brightness(0.35);
   will-change: transform;
}

@media (min-width: 769px) {
   .time-desktop-view {
      display: block;
   }
   .time-mobile-view {
      display: none;
   }
   .time-pin-trigger {
      padding: 6rem 0;
      background-color: #FFFFFF;
   }
   .time-pin-trigger .presentation-sticky-view {
      position: relative !important;
      height: auto !important;
      display: block !important;
   }
   .time-grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 2rem;
   }
   .time-image-wrapper {
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: var(--shadow-premium);
      height: 480px;
   }
   .time-image-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: cover;
   }
   .time-text-wrapper {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
   }
   .time-text-wrapper h2 {
      font-size: 2.6rem;
      font-weight: 800;
      color: var(--color-primary);
      margin-bottom: 0.5rem;
      line-height: 1.15;
   }
   .time-text-wrapper h2 span {
      background: linear-gradient(135deg, #FFB04D, #E67E00);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
   }
   .time-feature-item {
      display: flex;
      gap: 1rem;
      align-items: flex-start;
      padding: 1.25rem;
      border-radius: 12px;
      border: 1px solid var(--color-border);
      background: #FAFAFA;
      transition: all 0.3s ease;
   }
   .time-feature-item:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-premium);
      border-color: rgba(230, 126, 0, 0.3);
   }
   .time-feature-icon {
      font-size: 1.8rem;
      flex-shrink: 0;
   }
   .time-feature-info h4 {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--color-primary);
      margin-bottom: 4px;
   }
   .time-feature-info p {
      font-size: 0.9rem;
      color: var(--color-text-muted);
      line-height: 1.4;
      margin: 0;
   }
}

.time-content-overlay {
   position: absolute;
   inset: 0;
   z-index: 3;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 2rem;
}

.time-message {
   position: absolute;
   max-width: 650px;
   color: #FFFFFF;
   text-align: center;
   opacity: 0;
   transform: translateY(40px) scale(0.95);
   transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
   pointer-events: none;
}

.time-message.active {
   opacity: 1;
   transform: translateY(0) scale(1);
   pointer-events: auto;
}

.time-message h3 {
   color: #FFFFFF;
   font-size: clamp(2rem, 4vw, 3.5rem);
   font-weight: 800;
   margin-bottom: 1rem;
   letter-spacing: -0.025em;
}

.time-message h3 span {
   background: linear-gradient(135deg, #FFB04D, #E67E00);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.time-message p {
   font-size: 1.1rem;
   color: rgba(255, 255, 255, 0.85);
   max-width: 500px;
   margin: 0 auto;
}

@media (max-width: 768px) {
   .time-pin-trigger {
      height: auto !important;
   }

   .time-pin-trigger .presentation-sticky-view {
      position: relative !important;
      height: auto !important;
      min-height: 70vh !important;
   }

   .time-message {
      position: relative !important;
      opacity: 1 !important;
      transform: none !important;
      padding: 0.75rem 0;
   }

   .time-content-overlay {
      position: relative !important;
      flex-direction: column !important;
      padding: 3rem 1.5rem !important;
   }
}

/* ============================================= */
/* SECTION 5: WHAT WE DO — Horizontal scroll */
/* ============================================= */
.do-pin-trigger {
   height: auto;
}

.do-horizontal-viewport {
   position: sticky;
   top: 0;
   height: 100vh;
   width: 100%;
   overflow: hidden;
   display: flex;
   align-items: center;
}

.do-track {
   display: flex;
   gap: 2rem;
   padding: 2rem 1.5rem;
   will-change: transform;
}

.do-card {
   flex: 0 0 340px;
   background: #FFFFFF;
   border-radius: var(--border-radius-lg);
   overflow: hidden;
   box-shadow: var(--shadow-premium);
   transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
   border: 1px solid var(--color-border);
   display: flex;
   flex-direction: column;
   transform: scale(0.95);
   opacity: 0.7;
}

.do-card.active {
   transform: scale(1);
   opacity: 1;
   box-shadow: var(--shadow-hover);
}

.do-card:hover {
   transform: scale(1.02) !important;
   opacity: 1 !important;
   box-shadow: 0 30px 60px rgba(10, 34, 64, 0.12);
}

@media (min-width: 769px) {
   .do-pin-trigger {
      padding: 6rem 0;
      background-color: #FAFAFA;
   }
   .do-horizontal-viewport {
      position: relative !important;
      height: auto !important;
      overflow: visible !important;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 2rem;
   }
   .do-track {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 2rem !important;
      padding: 0 !important;
      transform: none !important;
   }
   .do-card {
      flex: none !important;
      width: 100% !important;
      transform: none !important;
      opacity: 1 !important;
      background: #FFFFFF;
      border-radius: var(--border-radius-lg);
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-premium);
      transition: all 0.3s ease;
   }
   .do-card:hover {
      transform: translateY(-5px) !important;
      box-shadow: var(--shadow-hover) !important;
   }
}

.do-card-media {
   height: 200px;
   overflow: hidden;
}

.do-card-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.8s ease;
}

.do-card:hover .do-card-img {
   transform: scale(1.08);
}

.do-card-body {
   padding: 1.5rem;
   flex: 1;
   display: flex;
   flex-direction: column;
}

.do-card-body h4 {
   font-size: 1.2rem;
   margin-bottom: 0.5rem;
   color: var(--color-primary);
}

.do-card-body p {
   font-size: 0.9rem;
   color: var(--color-text-muted);
   line-height: 1.5;
   flex: 1;
}

@media (max-width: 768px) {
   .do-pin-trigger {
      height: auto !important;
   }

   .do-horizontal-viewport {
      position: relative !important;
      height: auto !important;
      overflow: visible !important;
   }

   .do-track {
      flex-direction: column !important;
      gap: 1.5rem !important;
      padding: 2rem 1rem !important;
      transform: none !important;
   }

   .do-card {
      flex: none !important;
      width: 100% !important;
      opacity: 1 !important;
      transform: none !important;
   }
}

/* ============================================= */
/* SECTION 6: TRUST & REVIEWS */
/* ============================================= */
.trust-presentation {
   background: var(--color-bg-alt);
}

.trust-presentation-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2rem;
   align-items: center;
}

.float-review-card {
   background: #FFFFFF;
   border-radius: var(--border-radius-lg);
   padding: 2rem;
   box-shadow: var(--shadow-premium);
   border: 1px solid var(--color-border);
   transition: transform 0.3s ease;
}

.float-review-card:hover {
   transform: translateY(-4px);
}

.quote-author-row {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   margin-bottom: 0.75rem;
}

.quote-avatar {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   background: var(--color-primary);
   color: #FFFFFF;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   font-size: 1.1rem;
}

.quote-meta h4 {
   font-size: 0.95rem;
   margin-bottom: 2px;
}

.quote-meta span {
   font-size: 0.78rem;
   color: var(--color-text-muted);
}

.quote-stars-row {
   color: #F59E0B;
   font-size: 1.1rem;
   letter-spacing: 2px;
   margin-bottom: 0.75rem;
}

.quote-text {
   font-size: 0.92rem;
   color: var(--color-text-main);
   line-height: 1.5;
   font-style: italic;
   margin-bottom: 1rem;
}

.badge-google-trust {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 0.72rem;
   color: var(--color-text-muted);
   font-weight: 600;
   border-top: 1px solid var(--color-border);
   padding-top: 0.75rem;
   margin-top: 1rem;
}

/* Counter stats */
.trust-counters-list {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
}

.trust-counter-item {
   padding: 1rem 1.5rem;
   background: #FFFFFF;
   border-radius: var(--border-radius-md);
   border: 1px solid var(--color-border);
   box-shadow: var(--shadow-premium);
   transform: translateX(-20px);
   opacity: 0;
   transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

#trust-section.in-view .trust-counter-item {
   transform: translateX(0);
   opacity: 1;
}

#trust-section.in-view .trust-counter-item:nth-child(2) {
   transition-delay: 0.15s;
}

#trust-section.in-view .trust-counter-item:nth-child(3) {
   transition-delay: 0.3s;
}

.trust-counter-num {
   font-family: var(--font-display);
   font-size: 2.5rem;
   font-weight: 900;
   color: var(--color-primary);
   line-height: 1;
   margin-bottom: 0.25rem;
}

.trust-counter-label {
   font-size: 0.85rem;
   color: var(--color-text-muted);
   font-weight: 500;
}

@media (max-width: 768px) {
   .trust-presentation-grid {
      grid-template-columns: 1fr;
   }

   .trust-counter-num {
      font-size: 2rem;
   }
}

/* ============================================= */
/* BRAKE COMPARISON SLIDER */
/* ============================================= */
.brake-slider-container {
   position: relative;
   width: 100%;
   max-width: 700px;
   height: 400px;
   margin: 0 auto;
   border-radius: var(--border-radius-lg);
   overflow: hidden;
   box-shadow: var(--shadow-premium);
   user-select: none;
   cursor: ew-resize;
}

.brake-slider-before,
.brake-slider-after {
   position: absolute;
   inset: 0;
   overflow: hidden;
}

.brake-slider-after {
   width: 100%;
}

.brake-slider-before {
   width: 50%;
   z-index: 2;
   border-right: 2px solid #FFFFFF;
}

.brake-slider-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.brake-slider-tag {
   position: absolute;
   bottom: 1rem;
   padding: 0.3rem 0.8rem;
   border-radius: 20px;
   font-size: 0.72rem;
   font-weight: 700;
   backdrop-filter: blur(8px);
   color: #FFFFFF;
}

.tag-before {
   left: 1rem;
   background: rgba(220, 38, 38, 0.8);
}

.tag-after {
   right: 1rem;
   background: rgba(16, 185, 129, 0.8);
}

.brake-slider-handle {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 50%;
   width: 4px;
   background: #FFFFFF;
   z-index: 3;
   transform: translateX(-50%);
   display: flex;
   align-items: center;
   justify-content: center;
}

.brake-slider-handle-btn {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: #FFFFFF;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1rem;
   cursor: pointer;
   transition: transform 0.2s ease;
}

.brake-slider-handle-btn:hover {
   transform: scale(1.1);
}

/* ============================================= */
/* SECTION 7: PROCESS TIMELINE */
/* ============================================= */
.process-presentation {
   background: #FAFAFA;
}

.process-timeline-vertical {
   position: relative;
   max-width: 700px;
   margin: 0 auto;
   padding-left: 3rem;
}

.process-link-line {
   position: absolute;
   left: 14px;
   top: 0;
   width: 3px;
   height: 100%;
   background: var(--color-border);
   border-radius: 3px;
}

.process-link-line-fill {
   width: 100%;
   height: 0;
   background: linear-gradient(to bottom, var(--color-secondary), var(--color-primary));
   border-radius: 3px;
   transition: height 0.3s ease;
}

.process-timeline-card {
   position: relative;
   margin-bottom: 2.5rem;
   opacity: 0;
   transform: translateX(30px);
   transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.process-timeline-card.active {
   opacity: 1;
   transform: translateX(0);
}

.process-timeline-dot {
   position: absolute;
   left: -3rem;
   top: 0.5rem;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: var(--color-border);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 800;
   font-size: 0.85rem;
   color: var(--color-text-muted);
   z-index: 2;
   transition: all 0.4s ease;
}

.process-timeline-card.active .process-timeline-dot {
   background: var(--color-secondary);
   color: #FFFFFF;
   box-shadow: 0 0 0 4px rgba(230, 126, 0, 0.2);
}

.process-card-content {
   background: #FFFFFF;
   border-radius: var(--border-radius-md);
   padding: 1.25rem 1.5rem;
   border: 1px solid var(--color-border);
   box-shadow: var(--shadow-premium);
   transition: box-shadow 0.3s ease;
}

.process-timeline-card.active .process-card-content {
   box-shadow: var(--shadow-hover);
}

.process-card-content h3 {
   font-size: 1.1rem;
   margin-bottom: 0.4rem;
}

.process-card-content p {
   font-size: 0.85rem;
   color: var(--color-text-muted);
   line-height: 1.5;
}

/* ============================================= */
/* SECTION 8: COMPARISON TABLE */
/* ============================================= */
.comparison-table-box {
   overflow-x: auto;
   border-radius: var(--border-radius-lg);
   box-shadow: var(--shadow-premium);
}

.comp-table {
   width: 100%;
   border-collapse: collapse;
   background: #FFFFFF;
}

.comp-table th,
.comp-table td {
   padding: 1rem 1.25rem;
   text-align: left;
   border-bottom: 1px solid var(--color-border);
   font-size: 0.9rem;
}

.comp-table th {
   background: var(--color-primary);
   color: #FFFFFF;
   font-family: var(--font-display);
   font-weight: 700;
   font-size: 0.85rem;
}

.comp-table .header-techmech {
   background: var(--color-secondary);
}

.comp-table tr {
   opacity: 0;
   transform: translateX(-15px);
   transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.comp-table tr.revealed {
   opacity: 1;
   transform: translateX(0);
}

.cell-bold {
   font-weight: 700;
   color: var(--color-primary);
}

.cell-techmech {
   color: var(--color-secondary);
   font-weight: 600;
}

.header-techmech {
   background: var(--color-secondary);
}

/* ============================================= */
/* SECTION 9: ABOUT — Full bleed with overlay */
/* ============================================= */
.about-presentation {
   position: relative;
   height: 80vh;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
}

.about-bg-container {
   position: absolute;
   inset: 0;
   z-index: 1;
}

.about-bg-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: brightness(0.3);
   will-change: transform;
}

.about-content {
   position: relative;
   z-index: 2;
   text-align: center;
   max-width: 800px;
   padding: 0 1.5rem;
}

.about-content h2 {
   color: #FFFFFF;
   font-size: clamp(2rem, 3.5vw, 3.2rem);
   font-weight: 900;
   margin-bottom: 1.5rem;
}

.about-story-paragraphs {
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.about-story-line {
   font-size: 1rem;
   color: rgba(255, 255, 255, 0.85);
   line-height: 1.6;
   padding: 0.75rem 1.5rem;
   background: rgba(255, 255, 255, 0.08);
   backdrop-filter: blur(8px);
   border-radius: var(--border-radius-md);
   border: 1px solid rgba(255, 255, 255, 0.1);
   transform: translateY(20px);
   opacity: 0;
   transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

#about-section.in-view .about-story-line {
   opacity: 1;
   transform: translateY(0);
}

#about-section.in-view .about-story-line:nth-child(2) {
   transition-delay: 0.15s;
}

#about-section.in-view .about-story-line:nth-child(3) {
   transition-delay: 0.3s;
}

@media (max-width: 768px) {
   .about-presentation {
      height: auto;
      min-height: 70vh;
      padding: 3rem 0;
   }
}

/* ============================================= */
/* SECTION 10: REVIEWS CAROUSEL */
/* ============================================= */
#reviews-carousel-section {
   padding: 4rem 0;
   overflow: hidden;
}

.carousel-track-container {
   overflow: hidden;
   width: 100%;
}

.carousel-marquee {
   display: flex;
   gap: 1.5rem;
   width: max-content;
   animation: marqueeScroll 30s linear infinite;
}

@keyframes marqueeScroll {
   0% {
      transform: translateX(0);
   }

   100% {
      transform: translateX(-50%);
   }
}

.carousel-marquee:hover {
   animation-play-state: paused;
}

.carousel-card {
   width: 320px;
   background: #FFFFFF;
   border-radius: var(--border-radius-lg);
   padding: 1.5rem;
   box-shadow: var(--shadow-premium);
   border: 1px solid var(--color-border);
   flex-shrink: 0;
}

/* ============================================= */
/* SECTION 11: FINAL PARALLAX CTA */
/* ============================================= */
.parallax-presentation {
   position: relative;
   height: 85vh;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
}

.parallax-bg-container {
   position: absolute;
   inset: 0;
   z-index: 1;
}

.parallax-bg-img {
   width: 100%;
   height: 120%;
   object-fit: cover;
   will-change: transform;
}

.parallax-content {
   position: relative;
   z-index: 2;
   text-align: center;
   padding: 0 1.5rem;
}

.parallax-text-line {
   font-family: var(--font-display);
   font-size: clamp(1.8rem, 3.5vw, 3.2rem);
   font-weight: 800;
   color: #FFFFFF;
   line-height: 1.2;
   margin-bottom: 0.3rem;
   opacity: 0;
   transform: translateY(20px);
   transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

#final-section.in-view .parallax-text-line {
   opacity: 1;
   transform: translateY(0);
}

#final-section.in-view .parallax-text-line:nth-child(2) {
   transition-delay: 0.2s;
}

#final-section.in-view .parallax-text-line:nth-child(3) {
   transition-delay: 0.4s;
}

.parallax-text-line.text-orange {
   background: linear-gradient(135deg, #FFB04D, #E67E00);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.parallax-btn-container {
   margin-top: 2.5rem;
}

@media (max-width: 768px) {
   .parallax-presentation {
      height: 70vh;
   }
}

/* ============================================= */
/* FOOTER */
/* ============================================= */
.footer {
   background: var(--color-primary);
   color: rgba(255, 255, 255, 0.8);
   padding: 3rem 1.5rem;
   font-size: 0.85rem;
}

.footer-grid {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1fr;
   gap: 2rem;
   margin-bottom: 2rem;
}

.footer-col h3 {
   color: #FFFFFF;
   font-size: 0.9rem;
   margin-bottom: 1rem;
}

.footer-col ul {
   list-style: none;
}

.footer-col ul li {
   margin-bottom: 0.5rem;
}

.footer-col ul li a {
   color: rgba(255, 255, 255, 0.65);
   font-size: 0.85rem;
}

.footer-col ul li a:hover {
   color: var(--color-secondary);
}

.footer-col p {
   font-size: 0.85rem;
   margin-bottom: 0.3rem;
}

.footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   padding-top: 1.5rem;
   text-align: center;
   font-size: 0.8rem;
   color: rgba(255, 255, 255, 0.5);
}

.footer a {
   color: var(--color-secondary);
}

@media (max-width: 768px) {
   .footer-grid {
      grid-template-columns: 1fr 1fr;
   }
}

@media (max-width: 480px) {
   .footer-grid {
      grid-template-columns: 1fr;
   }
}

/* ============================================= */
/* FLOATING ACTION BUTTONS */
/* ============================================= */
.floating-glass-action {
   position: fixed;
   bottom: 1.5rem;
   z-index: 9000;
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 0.6rem 1.2rem;
   background: rgba(255, 255, 255, 0.85);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border-radius: 30px;
   box-shadow: var(--shadow-glass);
   font-family: var(--font-display);
   font-weight: 700;
   font-size: 0.85rem;
   color: var(--color-primary);
   border: 1px solid rgba(226, 232, 240, 0.6);
   transition: all 0.3s ease;
   cursor: pointer;
   text-decoration: none;
   animation: floatUp 1s 0.5s both;
}

@keyframes floatUp {
   from {
      opacity: 0;
      transform: translateY(20px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.floating-action-left {
   left: 1.5rem;
}

.floating-action-right {
   right: 1.5rem;
   background: var(--color-secondary);
   color: #FFFFFF;
   border-color: var(--color-secondary);
}

.floating-action-right:hover {
   background: var(--color-secondary-hover);
   transform: translateY(-2px);
}

@media (max-width: 768px) {
   .floating-glass-action {
      font-size: 0.75rem;
      padding: 0.5rem 0.9rem;
   }

   .floating-action-left {
      left: 0.75rem;
   }

   .floating-action-right {
      right: 0.75rem;
   }
}

/* ============================================= */
/* BOOKING PAGE PREMIUM STYLES */
/* ============================================= */
.booking-page {
   background: linear-gradient(135deg, #FAFBFC 0%, #F0F2F5 60%, #E8ECF0 100%);
   min-height: 100vh;
}

.booking-hero-header {
   margin-bottom: 2.5rem;
   padding: 2.5rem 2rem;
   background: linear-gradient(135deg, var(--color-primary) 0%, #1a3a6a 100%);
   border-radius: var(--border-radius-lg);
   position: relative;
   overflow: hidden;
   box-shadow: var(--shadow-glow);
}

.booking-hero-header::before {
   content: '';
   position: absolute;
   top: -50%;
   right: -20%;
   width: 400px;
   height: 400px;
   border-radius: 50%;
   background: rgba(230, 126, 0, 0.08);
   pointer-events: none;
}

.booking-hero-header::after {
   content: '';
   position: absolute;
   bottom: -30%;
   left: -10%;
   width: 200px;
   height: 200px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.04);
   pointer-events: none;
}

.booking-hero-header::before {
   content: '';
   position: absolute;
   top: -50%;
   right: -20%;
   width: 400px;
   height: 400px;
   border-radius: 50%;
   background: rgba(230, 126, 0, 0.08);
   pointer-events: none;
}

.booking-header-badge {
   display: inline-block;
   background: rgba(255, 255, 255, 0.12);
   backdrop-filter: blur(8px);
   padding: 0.35rem 1rem;
   border-radius: 100px;
   font-size: 0.72rem;
   font-weight: 700;
   color: #FFFFFF;
   margin-bottom: 0.75rem;
   border: 1px solid rgba(255, 255, 255, 0.15);
}

.booking-header-title {
   color: #FFFFFF;
   font-size: clamp(1.6rem, 3vw, 2.4rem);
   font-weight: 900;
   margin-bottom: 0.5rem;
}

.booking-header-sub {
   color: rgba(255, 255, 255, 0.8);
   font-size: 1rem;
   margin-bottom: 1.25rem;
}

.booking-header-sub strong {
   color: var(--color-secondary);
}

.booking-header-stats {
   display: flex;
   gap: 0.5rem;
   justify-content: center;
   flex-wrap: wrap;
}

.stat-chip {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.15);
   padding: 0.3rem 0.75rem;
   border-radius: 100px;
   font-size: 0.72rem;
   font-weight: 600;
   color: #FFFFFF;
}

/* Price Match Hero Card */
.price-match-hero {
   background: linear-gradient(135deg, #0A2240 0%, #1a3a6a 100%) !important;
   border: none !important;
   color: #FFFFFF;
   position: relative;
   overflow: hidden;
}

.price-match-hero::after {
   content: '🏷️';
   position: absolute;
   right: -10px;
   bottom: -10px;
   font-size: 6rem;
   opacity: 0.06;
   pointer-events: none;
}

.price-match-icon {
   font-size: 2.2rem;
   margin-bottom: 0.5rem;
}

.price-match-title {
   font-family: var(--font-display);
   font-size: 1.3rem;
   font-weight: 900;
   color: #FFFFFF;
   margin-bottom: 0.5rem;
}

.price-match-title span {
   background: linear-gradient(135deg, #FFB04D, #E67E00);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.price-match-divider {
   width: 60px;
   height: 3px;
   background: linear-gradient(90deg, var(--color-secondary), transparent);
   border-radius: 3px;
   margin-bottom: 0.75rem;
}

.price-match-desc {
   font-size: 0.85rem;
   color: rgba(255, 255, 255, 0.8);
   line-height: 1.5;
   margin-bottom: 1rem;
}

.price-match-steps {
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.pm-step {
   display: flex;
   align-items: center;
   gap: 8px;
   background: rgba(255, 255, 255, 0.06);
   padding: 0.5rem 0.75rem;
   border-radius: 8px;
   border: 1px solid rgba(255, 255, 255, 0.08);
}

.pm-step-num {
   width: 22px;
   height: 22px;
   border-radius: 50%;
   background: var(--color-secondary);
   color: #FFFFFF;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.7rem;
   font-weight: 800;
   flex-shrink: 0;
}

.pm-step-text {
   font-size: 0.78rem;
   color: rgba(255, 255, 255, 0.85);
   font-weight: 500;
}

/* Email verify card */
.email-verify-card {
   background: #FEFCE8 !important;
   border: 1.5px solid #EAB308 !important;
}

.verify-icon {
   font-size: 1.5rem;
   margin-bottom: 0.25rem;
}

.verify-title {
   font-size: 0.95rem;
   font-weight: 800;
   color: #854D0E;
   margin-bottom: 0.4rem;
}

.verify-desc {
   font-size: 0.82rem;
   color: #713F12;
   line-height: 1.5;
}

.verify-badge {
   margin-top: 0.75rem;
   padding: 0.4rem 0.75rem;
   background: rgba(234, 179, 8, 0.12);
   border-radius: 6px;
   font-size: 0.75rem;
   color: #713F12;
}

.email-verify-inline {
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 0.4rem 0.75rem;
   background: #FEFCE8;
   border: 1px solid #FDE68A;
   border-radius: 6px;
   font-size: 0.78rem;
}

.verify-inline-icon {
   flex-shrink: 0;
}

.verify-inline-text {
   color: #854D0E;
   font-weight: 500;
}

/* Trust card title */
.trust-card-title {
   font-size: 1.15rem;
   margin-bottom: 1.25rem;
   display: flex;
   align-items: center;
   gap: 8px;
}

/* Mini Review Card */
.mini-review-card {
   background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%) !important;
   border: 1px solid #FDE68A !important;
}

.mini-review-stars {
   color: #F59E0B;
   font-size: 0.95rem;
   letter-spacing: 2px;
   margin-bottom: 0.5rem;
}

.mini-review-text {
   font-size: 0.82rem;
   color: #92400E;
   line-height: 1.5;
   font-style: italic;
   margin-bottom: 0.5rem;
}

.mini-review-author {
   font-size: 0.72rem;
   color: #A16207;
   font-weight: 600;
}

/* Wizard Progress Steps */
.wizard-progress-steps {
   display: flex;
   justify-content: space-between;
   margin-bottom: 0.75rem;
}

.wizard-prog-step {
   font-size: 0.7rem;
   font-weight: 700;
   color: var(--color-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.03em;
   padding: 0.2rem 0.4rem;
   border-radius: 4px;
   transition: all 0.3s ease;
}

.wizard-prog-step.active {
   color: var(--color-secondary);
   background: rgba(230, 126, 0, 0.08);
}

/* Booking Summary Box */
.booking-summary-box {
   background: #FAFAFA;
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius-md);
   padding: 1.25rem;
   margin-bottom: 1.5rem;
}

.summary-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0.5rem 0;
   border-bottom: 1px solid rgba(226, 232, 240, 0.5);
}

.summary-row:last-child {
   border-bottom: none;
}

.summary-row .label {
   font-size: 0.82rem;
   font-weight: 600;
   color: var(--color-text-muted);
}

.summary-row .value {
   font-size: 0.9rem;
   font-weight: 700;
   color: var(--color-primary);
   text-align: right;
}

/* ============================================= */
/* WIZARD STEP — Only active step visible */
/* ============================================= */
.wizard-step {
   display: none !important;
   position: relative;
}

.wizard-step.active {
   display: block !important;
}

/* ============================================= */
/* BOOKING WIZARD LAYOUT */
/* ============================================= */
.booking-wizard-layout {
   display: grid;
   grid-template-columns: 1fr 340px;
   gap: 1.5rem;
   align-items: start;
}

@media (max-width: 992px) {
   .booking-wizard-layout {
      grid-template-columns: 1fr;
      gap: 1.25rem;
   }
}

.booking-sidebar {
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
}

.booking-sidebar-card {
   background: #FFFFFF;
   border-radius: var(--border-radius-md);
   padding: 1.25rem;
   border: 1px solid var(--color-border);
   box-shadow: var(--shadow-premium);
}

.booking-wizard-card {
   background: #FFFFFF;
   border-radius: var(--border-radius-lg);
   padding: 2rem;
   border: 1px solid var(--color-border);
   box-shadow: var(--shadow-premium);
   position: relative;
   overflow: hidden;
}

.booking-wizard-card::before {
   content: '';
   position: absolute;
   top: -10%;
   right: -10%;
   width: 150px;
   height: 150px;
   border-radius: 50%;
   background: rgba(230, 126, 0, 0.04);
   pointer-events: none;
}

.wizard-progress-bar-container {
   margin-bottom: 2rem;
}

.wizard-progress-steps {
   display: flex;
   justify-content: space-between;
   margin-bottom: 0.5rem;
   gap: 0.5rem;
}

.wizard-prog-step {
   font-size: 0.7rem;
   font-weight: 700;
   color: var(--color-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.03em;
   padding: 0.25rem 0.5rem;
   border-radius: 4px;
   transition: all 0.3s ease;
   flex: 1;
   text-align: center;
}

.wizard-prog-step.active {
   color: var(--color-secondary);
   background: rgba(230, 126, 0, 0.08);
}

.wizard-progress-bar-fill {
   height: 4px;
   background: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
   border-radius: 2px;
   width: 0%;
   transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.wizard-buttons-row {
   display: flex;
   gap: 1rem;
   margin-top: 2rem;
   padding-top: 1.5rem;
   border-top: 1px solid var(--color-border);
}

.wizard-buttons-row .btn {
   flex: 1;
}

/* Rego plate input styling */
.rego-plate-input-wrapper {
   position: relative;
   display: flex;
   align-items: center;
}

.rego-plate-badge {
   position: absolute;
   left: 0.75rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background: var(--color-primary);
   color: #FFFFFF;
   padding: 0.25rem 0.4rem;
   border-radius: 4px;
   z-index: 2;
}

.rego-plate-input-wrapper input {
   padding-left: 3.5rem !important;
   font-weight: 700;
   letter-spacing: 0.05em;
}

/* Mobile input styling */
.mobile-input-wrapper {
   position: relative;
   display: flex;
   align-items: center;
}

.mobile-input-badge {
   position: absolute;
   left: 0.75rem;
   display: flex;
   align-items: center;
   gap: 4px;
   font-size: 0.85rem;
   font-weight: 600;
   color: var(--color-text-muted);
   z-index: 2;
}

.mobile-input-wrapper input {
   padding-left: 3.5rem !important;
}

/* Calendar widget styling */
.calendar-widget-container {
   background: #FFFFFF;
   border-radius: var(--border-radius-md);
   border: 1px solid var(--color-border);
   box-shadow: var(--shadow-premium);
}

.cal-header-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0.75rem 1rem;
   background: var(--color-primary);
   color: #FFFFFF;
}

.cal-nav-button {
   background: rgba(255, 255, 255, 0.15);
   border: 1px solid rgba(255, 255, 255, 0.25);
   border-radius: 6px;
   color: #FFFFFF;
   font-size: 0.8rem;
   cursor: pointer;
   padding: 0.3rem 0.6rem;
   transition: background 0.2s ease;
}

.cal-nav-button:hover {
   background: rgba(255, 255, 255, 0.25);
}

.cal-month-title {
   font-family: var(--font-display);
   font-weight: 700;
   font-size: 1rem;
}

.cal-days-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 1px;
   background: var(--color-border);
}

.cal-weekday-label {
   text-align: center;
   padding: 0.5rem 0.25rem;
   font-size: 0.7rem;
   font-weight: 700;
   color: var(--color-text-muted);
   background: #F8FAFC;
}

.cal-day-cell {
   aspect-ratio: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #FFFFFF;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
   font-size: 0.9rem;
}

/* Enhanced wizard step headings */
.wizard-step h3 {
   font-size: 1.4rem;
   font-weight: 800;
   color: var(--color-primary);
   margin-bottom: 0.25rem;
}

.wizard-step p {
   font-size: 0.9rem;
   color: var(--color-text-muted);
}

/* Turnstile container styling */
.turnstile-box {
   margin-top: 1rem;
   padding: 1rem;
   background: #F8FAFC;
   border-radius: var(--border-radius-sm);
   border: 1px solid var(--color-border);
}

/* Trust wedge items */
.trust-wedge-item {
   display: flex;
   gap: 0.75rem;
   margin-bottom: 1rem;
}

.trust-wedge-item:last-child {
   margin-bottom: 0;
}

.trust-wedge-icon {
   font-size: 1.4rem;
   flex-shrink: 0;
}

/* ============================================= */
/* CALENDAR DATE AVAILABILITY COLORS */
/* ============================================= */
.cal-day-cell.available {
   background: #ECFDF5;
   color: #065F46;
   font-weight: 700;
   border: 1px solid transparent;
}

.cal-day-cell.available:hover {
   background: #D1FAE5;
   border-color: var(--color-success);
   transform: scale(1.08);
   z-index: 2;
}

.cal-day-cell.past {
   color: #CBD5E0;
   background: #F1F5F9;
   pointer-events: none;
   cursor: not-allowed;
}

.cal-day-cell.closed {
   color: #94A3B8;
   background: #F1F5F9;
   text-decoration: line-through;
   pointer-events: none;
   border: 1px dashed #CBD5E0;
}

.cal-day-cell.fully-booked {
   color: #991B1B;
   background: #FEF2F2;
   text-decoration: line-through;
   pointer-events: none;
   border: 1px solid #FECACA;
}

.cal-day-cell.selected {
   background: var(--color-secondary) !important;
   color: #FFFFFF !important;
   border-color: var(--color-secondary) !important;
   transform: scale(1.08);
   box-shadow: 0 4px 12px rgba(230, 126, 0, 0.3);
   font-weight: 900;
}

/* Legend for calendar */
.cal-legend-row {
   display: flex;
   gap: 0.75rem;
   flex-wrap: wrap;
   margin-bottom: 0.75rem;
   padding: 0.5rem 0.75rem;
   background: #FAFAFA;
   border-radius: 8px;
   font-size: 0.7rem;
}

.cal-legend-item {
   display: flex;
   align-items: center;
   gap: 4px;
   font-weight: 600;
   color: var(--color-text-muted);
}

.cal-legend-dot {
   width: 10px;
   height: 10px;
   border-radius: 3px;
   flex-shrink: 0;
}

.cal-legend-dot.dot-avail {
   background: #D1FAE5;
   border: 1px solid #6EE7B7;
}

.cal-legend-dot.dot-booked {
   background: #FEF2F2;
   border: 1px solid #FCA5A5;
}

.cal-legend-dot.dot-closed {
   background: #F1F5F9;
   border: 1px dashed #CBD5E0;
}

.cal-legend-dot.dot-selected {
   background: var(--color-secondary);
}

/* ============================================= */
/* SECTION PADDING / HEADERS */
/* ============================================= */
.section-padding {
   padding-top: 5rem;
   padding-bottom: 5rem;
}

.section-header {
   text-align: center;
   margin-bottom: 3rem;
}

.section-header h2 {
   font-size: 2.4rem;
   font-weight: 800;
   margin-bottom: 0.75rem;
}

.section-header p {
   font-size: 1rem;
   color: var(--color-text-muted);
   max-width: 600px;
   margin: 0 auto;
   line-height: 1.5;
}

.section-header .price-badge-global {
   border-color: var(--color-primary);
   color: var(--color-primary);
}

@media (max-width: 768px) {
   .section-header h2 {
      font-size: 1.8rem;
   }
}

/* ============================================= */
/* TOAST NOTIFICATION */
/* ============================================= */
.notification-toast {
   position: fixed;
   top: 1.5rem;
   right: 1.5rem;
   z-index: 20000;
   max-width: 380px;
   background: #FFFFFF;
   border-radius: var(--border-radius-md);
   box-shadow: 0 25px 50px rgba(10, 34, 64, 0.15);
   border: 1px solid var(--color-border);
   display: flex;
   align-items: flex-start;
   gap: 0.75rem;
   padding: 1rem;
   transform: translateX(120%);
   transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.address-suggestions-dropdown {
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   background: #FFFFFF !important;
   border: 1px solid #CBD5E1 !important;
   border-radius: var(--border-radius-md);
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
   z-index: 99999 !important;
   max-height: 240px;
   overflow-y: auto;
   margin-top: 4px;
}

.suggestion-item,
.address-suggestion-item {
   padding: 0.7rem 1rem;
   font-size: 0.88rem;
   cursor: pointer;
   transition: background-color 0.15s ease;
   border-bottom: 1px solid #F1F5F9;
   color: var(--color-text-main);
   text-align: left;
   line-height: 1.35;
   display: block;
   width: 100%;
   box-sizing: border-box;
}

.suggestion-item:last-child,
.address-suggestion-item:last-child {
   border-bottom: none;
}

.suggestion-item.highlighted,
.suggestion-item:hover,
.address-suggestion-item.highlighted,
.address-suggestion-item:hover {
   background-color: #F8FAFC !important;
   color: var(--color-primary-dark, #0F172A) !important;
}


.notification-toast.show {
   transform: translateX(0);
}

.toast-icon {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.toast-success .toast-icon {
   background: #D1FAE5;
   color: var(--color-success);
}

.toast-error .toast-icon {
   background: #FEE2E2;
   color: #DC2626;
}

.toast-content h4 {
   font-size: 0.9rem;
   margin-bottom: 2px;
}

.toast-content p {
   font-size: 0.82rem;
   color: var(--color-text-muted);
   line-height: 1.3;
}

/* ============================================= */
/* SCROLL ANIMATIONS - Intersection Observer */
/* ============================================= */
.fade-in-up {
   opacity: 0;
   transform: translateY(30px);
   transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-up.in-view {
   opacity: 1;
   transform: translateY(0);
}

.scale-in {
   opacity: 0;
   transform: scale(0.9);
   transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.scale-in.in-view {
   opacity: 1;
   transform: scale(1);
}

.slide-in-left {
   opacity: 0;
   transform: translateX(-40px);
   transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.slide-in-left.in-view {
   opacity: 1;
   transform: translateX(0);
}

.slide-in-right {
   opacity: 0;
   transform: translateX(40px);
   transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.slide-in-right.in-view {
   opacity: 1;
   transform: translateX(0);
}

/* Staggered children */
.stagger-children>* {
   opacity: 0;
   transform: translateY(20px);
   transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.stagger-children.in-view>* {
   opacity: 1;
   transform: translateY(0);
}

.stagger-children.in-view>*:nth-child(2) {
   transition-delay: 0.1s;
}

.stagger-children.in-view>*:nth-child(3) {
   transition-delay: 0.2s;
}

.stagger-children.in-view>*:nth-child(4) {
   transition-delay: 0.3s;
}

.stagger-children.in-view>*:nth-child(5) {
   transition-delay: 0.4s;
}

.in-view {
   --is-in-view: 1;
}

/* ============================================= */
/* FORM CONTROLS (shared) */
/* ============================================= */
.form-group {
   margin-bottom: 1.25rem;
}

.form-group label {
   display: block;
   font-weight: 600;
   margin-bottom: 0.4rem;
   font-size: 0.9rem;
   color: var(--color-primary);
}

.form-control {
   width: 100%;
   padding: 0.7rem 1rem;
   border: 1.5px solid var(--color-border);
   border-radius: var(--border-radius-sm);
   font-size: 0.9rem;
   color: var(--color-text-main);
   transition: border-color 0.18s ease, box-shadow 0.18s ease;
   background: #FFFFFF;
}

.form-control:focus {
   border-color: var(--color-secondary);
   box-shadow: 0 0 0 3px rgba(230, 126, 0, 0.12);
   outline: none;
}

textarea.form-control {
   resize: vertical;
   min-height: 80px;
}

/* ============================================= */
/* RESPONSIVE BOOKING & INLINE FORM LAYOUTS */
/* ============================================= */
.booking-wizard-card {
   padding: 1.5rem !important;
}

.form-row {
   display: flex !important;
   flex-direction: row !important;
   gap: 0.75rem !important;
   width: 100% !important;
   align-items: flex-start !important;
}

.form-row > .form-group {
   flex: 1 1 0% !important;
   min-width: 0 !important;
}

.form-row.row-unit-street {
   display: grid !important;
   grid-template-columns: 85px 1fr !important;
   gap: 0.75rem !important;
}

.form-row.row-suburb-postcode {
   display: grid !important;
   grid-template-columns: 1fr 90px !important;
   gap: 0.75rem !important;
}

@media (max-width: 480px) {
   .booking-wizard-card {
      padding: 1rem 0.85rem !important;
   }

   .form-row {
      gap: 0.5rem !important;
   }

   .form-group label {
      font-size: 0.82rem !important;
      margin-bottom: 0.25rem !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
   }

   .form-control {
      padding: 0.55rem 0.65rem !important;
      font-size: 0.85rem !important;
   }

   .form-row.row-unit-street {
      grid-template-columns: 75px 1fr !important;
   }

   .form-row.row-suburb-postcode {
      grid-template-columns: 1fr 80px !important;
   }
}

/* ============================================= */
/* BLOG SECTION */
/* ============================================= */
.blog-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   gap: 2rem;
}

.blog-card {
   background: #FFFFFF;
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius-lg);
   overflow: hidden;
   transition: all 0.4s ease;
   box-shadow: var(--shadow-premium);
}

.blog-card:hover {
   box-shadow: var(--shadow-hover);
   transform: translateY(-6px);
}

.blog-card-img {
   height: 200px;
   overflow: hidden;
}

.blog-card-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.8s ease;
}

.blog-card:hover .blog-card-img img {
   transform: scale(1.08);
}

.blog-card-body {
   padding: 1.5rem;
}

.blog-card-meta {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   font-size: 0.78rem;
   color: var(--color-text-muted);
   margin-bottom: 0.75rem;
}

.blog-category-badge {
   background: var(--color-bg-alt);
   padding: 0.2rem 0.6rem;
   border-radius: 100px;
   font-weight: 700;
   font-size: 0.7rem;
   text-transform: uppercase;
}

.blog-card-body h3 {
   font-size: 1.2rem;
   margin-bottom: 0.5rem;
}

.blog-card-body p {
   font-size: 0.9rem;
   color: var(--color-text-muted);
   margin-bottom: 1rem;
}

@media (max-width: 768px) {
   .blog-grid {
      grid-template-columns: 1fr;
   }
}

/* ============================================= */
/* FLOATING MOBILE BAR */
/* ============================================= */
.floating-mobile-bar {
   display: none;
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 9998;
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(12px);
   border-top: 1px solid var(--color-border);
   padding: 0.5rem 0;
   justify-content: space-around;
   align-items: center;
}

.floating-bar-btn {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 2px;
   font-size: 0.6rem;
   font-weight: 600;
   color: var(--color-text-muted);
   text-decoration: none;
   padding: 0.25rem 0.5rem;
   border-radius: 8px;
   transition: color 0.15s ease;
}

.floating-bar-btn i {
   font-size: 1.2rem;
}

.btn-book-highlight {
   color: var(--color-secondary);
}

@media (max-width: 768px) {
   .floating-mobile-bar {
      display: flex;
   }
}

/* ============================================= */
/* BLOG SPECIFIC: Filters */
/* ============================================= */
.blog-filters-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   margin-bottom: 2rem;
   flex-wrap: wrap;
}

.blog-categories-list {
   display: flex;
   gap: 4px;
   list-style: none;
   flex-wrap: wrap;
}

.blog-cat-pill {
   padding: 0.4rem 0.9rem;
   border-radius: 30px;
   font-size: 0.78rem;
   font-weight: 600;
   cursor: pointer;
   border: 1px solid var(--color-border);
   transition: all 0.15s ease;
   color: var(--color-text-muted);
}

.blog-cat-pill.active {
   background: var(--color-primary);
   color: #FFFFFF;
   border-color: var(--color-primary);
}

.blog-search-wrapper {
   flex: 1;
   max-width: 280px;
}

.blog-search-wrapper .form-control {
   padding: 0.5rem 0.85rem;
   font-size: 0.82rem;
   border-radius: 30px;
}

/* ============================================= */
/* ADMIN PANEL LAYOUT */
/* Preserved for admin pages */
/* ============================================= */
body.admin-page,
body:has(#admin-container) {
   padding-top: 0 !important;
   margin: 0 !important;
   height: 100vh !important;
   overflow: hidden !important;
}

#admin-container {
   height: 100vh !important;
   width: 100% !important;
   overflow: hidden !important;
}

.admin-layout {
   height: 100vh !important;
   max-height: 100vh !important;
   display: flex !important;
   flex-direction: row !important;
   background-color: #F8FAFC;
   overflow: hidden !important;
}

/* DESKTOP VERTICAL SIDEBAR - Strictly frozen in place */
.admin-sidebar {
   width: 230px;
   background: #0A2240;
   color: #FFFFFF;
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
   position: sticky;
   top: 0;
   height: 100vh;
   z-index: 100;
   transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
   box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
   overflow-y: auto;
   overflow-x: hidden;
}

.admin-sidebar.collapsed {
   width: 64px;
}

.admin-sidebar-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 0.85rem;
   height: 50px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   flex-shrink: 0;
}

.admin-sidebar-brand {
   display: flex;
   align-items: center;
   gap: 8px;
   font-family: var(--font-display);
   font-size: 0.95rem;
   font-weight: 800;
   color: #FFFFFF;
   white-space: nowrap;
   overflow: hidden;
}

.admin-sidebar.collapsed .brand-text {
   display: none;
}

.admin-sidebar-brand .brand-sub {
   color: var(--color-secondary);
   font-weight: 700;
   font-size: 0.72rem;
   background: rgba(230, 126, 0, 0.15);
   padding: 1px 5px;
   border-radius: 4px;
}

.sidebar-collapse-btn {
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 6px;
   width: 26px;
   height: 26px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: rgba(255, 255, 255, 0.7);
   cursor: pointer;
   transition: all 0.2s ease;
   flex-shrink: 0;
}

.sidebar-collapse-btn:hover {
   background: rgba(255, 255, 255, 0.15);
   color: #FFFFFF;
}

.admin-sidebar-nav {
   flex: 1;
   padding: 0.5rem 0.4rem;
   display: flex;
   flex-direction: column;
   gap: 0.2rem;
   overflow-y: auto;
   scrollbar-width: thin;
}

.sidebar-group-title {
   font-size: 0.62rem;
   font-weight: 800;
   letter-spacing: 0.06em;
   color: rgba(255, 255, 255, 0.4);
   padding: 0.5rem 0.5rem 0.2rem;
   text-transform: uppercase;
   white-space: nowrap;
   user-select: none;
}

.admin-sidebar.collapsed .sidebar-group-title {
   display: none;
}

.admin-sidebar-menu {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 2px;
   margin: 0;
   padding: 0;
}

.admin-sidebar .admin-menu-item button {
   width: 100%;
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 0.45rem 0.6rem;
   border-radius: 6px;
   background: transparent;
   border: 1px solid transparent;
   color: rgba(255, 255, 255, 0.8);
   font-family: var(--font-body);
   font-size: 0.8rem;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.15s ease;
   text-align: left;
   white-space: nowrap;
   box-shadow: none;
}

.admin-sidebar .admin-menu-item button .item-icon {
   font-size: 0.95rem;
   flex-shrink: 0;
   width: 20px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}

.admin-sidebar.collapsed .admin-menu-item button {
   justify-content: center;
   padding: 0.5rem 0;
}

.admin-sidebar.collapsed .item-label {
   display: none;
}

.admin-sidebar .admin-menu-item button:hover {
   background: rgba(255, 255, 255, 0.08);
   color: #FFFFFF;
}

.admin-sidebar .admin-menu-item.active button {
   background: var(--color-secondary);
   color: #FFFFFF;
   font-weight: 700;
   border-color: var(--color-secondary);
   box-shadow: 0 2px 6px rgba(230, 126, 0, 0.3);
}

.admin-sidebar-footer {
   padding: 0.6rem 0.75rem;
   border-top: 1px solid rgba(255, 255, 255, 0.08);
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: rgba(0, 0, 0, 0.15);
   flex-shrink: 0;
}

.admin-user-pill {
   display: flex;
   align-items: center;
   gap: 6px;
   overflow: hidden;
}

.admin-user-pill .user-avatar {
   font-size: 1rem;
   flex-shrink: 0;
}

.admin-user-pill .user-details {
   display: flex;
   flex-direction: column;
   line-height: 1.15;
   overflow: hidden;
}

.admin-user-pill .user-name {
   font-size: 0.75rem;
   font-weight: 700;
   color: #FFFFFF;
   white-space: nowrap;
}

.admin-user-pill .user-role {
   font-size: 0.62rem;
   color: rgba(255, 255, 255, 0.5);
   white-space: nowrap;
}

.admin-sidebar.collapsed .user-details {
   display: none;
}

.admin-sidebar-logout-btn {
   background: rgba(239, 68, 68, 0.12);
   border: 1px solid rgba(239, 68, 68, 0.25);
   border-radius: 6px;
   width: 26px;
   height: 26px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #F87171;
   cursor: pointer;
   transition: all 0.2s ease;
   flex-shrink: 0;
}

.admin-sidebar-logout-btn:hover {
   background: #EF4444;
   color: #FFFFFF;
   border-color: #EF4444;
}

/* MAIN WRAPPER & SLIM TOPBAR */
.admin-main-wrapper {
   flex: 1;
   display: flex;
   flex-direction: column;
   min-width: 0;
   height: 100vh !important;
   max-height: 100vh !important;
   overflow-y: auto !important;
   overflow-x: hidden !important;
   background: #F8FAFC;
}

.admin-topbar {
   position: sticky;
   top: 0;
   z-index: 90;
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 44px;
   padding: 0 1.25rem;
   background: #FFFFFF;
   border-bottom: 1px solid var(--color-border);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
   flex-shrink: 0;
}

.admin-topbar-left {
   display: flex;
   align-items: center;
   gap: 10px;
}

.admin-mobile-brand {
   display: none;
   font-family: var(--font-display);
   font-weight: 800;
   font-size: 0.95rem;
   color: var(--color-primary);
}

.admin-breadcrumb {
   font-family: var(--font-display);
   font-size: 0.88rem;
   font-weight: 700;
   color: var(--color-primary);
   display: flex;
   align-items: center;
   gap: 6px;
}

.admin-topbar-right {
   display: flex;
   align-items: center;
   gap: 8px;
}

.live-clock-chip {
   font-size: 0.72rem;
   font-weight: 600;
   color: var(--color-text-muted);
   background: #F1F5F9;
   padding: 2px 7px;
   border-radius: 12px;
   border: 1px solid #E2E8F0;
}

.admin-logout-square {
   flex-shrink: 0;
   background: none;
   border: 1.5px solid #E2E8F0;
   border-radius: 8px;
   width: 30px;
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: border-color 0.15s ease, color 0.15s ease;
   color: var(--color-text-muted);
}

.admin-logout-square:hover {
   border-color: #EF4444;
   color: #EF4444;
}

.admin-content {
   flex: 1;
   padding: 0.75rem 1.25rem 1.5rem;
   max-width: 1400px;
   width: 100%;
   margin: 0 auto;
}

.admin-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 0.75rem;
   margin-bottom: 0.5rem;
}

.admin-header h2 {
   font-size: 1.4rem;
   font-weight: 800;
   color: var(--color-primary);
}

.admin-stats-row {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 0.4rem;
   margin-bottom: 0.75rem;
}

.admin-stat-card {
   background: #FFFFFF;
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius-md);
   padding: 1rem 1.25rem;
   display: flex;
   align-items: center;
   gap: 0.75rem;
   box-shadow: var(--shadow-premium);
}

.admin-stat-icon {
   width: 42px;
   height: 42px;
   border-radius: var(--border-radius-sm);
   background: var(--color-bg-alt);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.3rem;
   flex-shrink: 0;
}

.admin-stat-info {
   display: flex;
   flex-direction: column;
}

.admin-stat-label {
   font-size: 0.75rem;
   font-weight: 600;
   color: var(--color-text-muted);
   text-transform: uppercase;
}

.admin-stat-value {
   font-family: var(--font-display);
   font-size: 1.6rem;
   font-weight: 900;
   color: var(--color-primary);
   line-height: 1.2;
}

.admin-filter-bar {
   display: flex;
   align-items: center;
   gap: 1rem;
   margin-bottom: 1.25rem;
   flex-wrap: wrap;
}

.admin-search-input {
   flex: 1;
   min-width: 200px;
   padding: 0.6rem 1rem;
   border: 1.5px solid var(--color-border);
   border-radius: 30px;
   font-size: 0.85rem;
   outline: none;
   transition: border-color 0.15s ease;
   background: #FFFFFF;
}

.admin-search-input:focus {
   border-color: var(--color-secondary);
   box-shadow: 0 0 0 3px rgba(230, 126, 0, 0.08);
}

.admin-filter-tabs {
   display: flex;
   gap: 4px;
   flex-wrap: wrap;
}

.admin-filter-btn {
   padding: 0.4rem 0.8rem;
   background: #FFFFFF;
   border: 1px solid var(--color-border);
   border-radius: 30px;
   font-size: 0.75rem;
   font-weight: 600;
   color: var(--color-text-muted);
   cursor: pointer;
   transition: all 0.15s ease;
}

.admin-filter-btn.active {
   background: var(--color-primary);
   color: #FFFFFF;
   border-color: var(--color-primary);
}

.admin-filter-btn:hover:not(.active) {
   border-color: var(--color-secondary);
   color: var(--color-secondary);
}

.admin-table {
   width: 100%;
   border-collapse: collapse;
   background: #FFFFFF;
   border-radius: var(--border-radius-md);
   overflow: hidden;
   box-shadow: var(--shadow-premium);
}

.admin-table th,
.admin-table td {
   padding: 0.75rem 1rem;
   text-align: left;
   border-bottom: 1px solid var(--color-border);
   font-size: 0.85rem;
   vertical-align: middle;
}

.admin-table th {
   background: var(--color-bg-alt);
   font-size: 0.7rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--color-text-muted);
}

.admin-table tr:hover td {
   background: #FAFAFA;
}

.status-badge {
   display: inline-block;
   padding: 3px 10px;
   border-radius: 100px;
   font-size: 0.7rem;
   font-weight: 700;
   text-transform: uppercase;
}

.status-pending {
   background: #FEF3C7;
   color: #92400E;
}

.status-confirmed {
   background: #DBEAFE;
   color: #1E40AF;
}

.status-completed {
   background: #D1FAE5;
   color: #065F46;
}

.status-cancelled {
   background: #FEE2E2;
   color: #991B1B;
}

.invoice-portal-box {
   background: #FFFFFF;
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius-lg);
   padding: 2.5rem;
   box-shadow: 0 20px 60px rgba(10, 34, 64, 0.10);
}

.btn-secondary {
   background-color: #E2E8F0;
   color: var(--color-primary);
   border-color: transparent;
}

.btn-secondary:hover {
   background-color: #CBD5E0;
}

.btn-danger {
   background-color: #E53E3E;
   color: #FFFFFF;
   border-color: transparent;
}

.btn-danger:hover {
   background-color: #C53030;
}

.admin-detail-card {
   background: #FFFFFF;
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius-md);
   padding: 1.5rem;
   margin-bottom: 1.25rem;
   box-shadow: var(--shadow-premium);
}

.admin-section-title {
   font-family: var(--font-display);
   font-size: 0.75rem;
   font-weight: 700;
   color: var(--color-secondary);
   text-transform: uppercase;
   letter-spacing: 0.1em;
   border-bottom: 2px solid var(--color-secondary);
   padding-bottom: 4px;
   margin-bottom: 1rem;
}

@media (max-width: 768px) {
   .admin-menubar {
      padding: 0 0.85rem;
      gap: 0.6rem;
   }

   .admin-menubar-brand {
      font-size: 0.9rem;
   }

   .admin-menu-item button {
      padding: 0.4rem 0.6rem;
      font-size: 0.72rem;
   }

   .admin-content {
      padding: 1rem 0.85rem 2.5rem;
   }

   .admin-stats-row {
      grid-template-columns: repeat(5, 1fr);
      gap: 0.3rem;
   }

   .admin-stat-value {
      font-size: 1.4rem;
   }

   .admin-filter-bar {
      flex-direction: column;
      align-items: flex-start;
   }

   .admin-search-input {
      width: 100%;
   }
}

@media (max-width: 480px) {
   .admin-stats-row {
      grid-template-columns: repeat(5, 1fr) !important;
      gap: 0.25rem;
   }
   .admin-stats-row .admin-stat-card {
      padding: 0.5rem 0.15rem !important;
      min-width: 0;
   }
   .admin-stats-row .admin-stat-value {
      font-size: 1.2rem !important;
   }
   .admin-stats-row .admin-stat-label {
      font-size: 0.55rem !important;
   }
}

/* ============================================================
   ADMIN AVAILABILITY CALENDAR
   ============================================================ */
.adm-cal-legend {
   display: flex;
   align-items: center;
   gap: 0.6rem;
   font-size: 0.72rem;
   font-weight: 600;
   color: var(--color-text-muted);
   flex-wrap: wrap;
}

.adm-legend-dot {
   display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 50%;
}

.adm-legend-dot.morning-dot {
   background: #3B82F6;
}

.adm-legend-dot.afternoon-dot {
   background: #F59E0B;
}

.adm-legend-dot.evening-dot {
   background: #8B5CF6;
}

.adm-legend-dot.off-dot {
   background: #CBD5E1;
}

.adm-cal-wrapper {
   background: #FFFFFF;
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius-md);
   overflow: hidden;
   box-shadow: var(--shadow-premium);
}

.adm-cal-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 0.5rem;
   padding: 0.75rem 1rem;
   background: var(--color-primary);
   color: #FFFFFF;
}

.adm-cal-month-title {
   font-family: var(--font-display);
   font-size: 1rem;
   font-weight: 700;
   color: #FFFFFF;
}

.adm-cal-month-title small {
   font-size: 0.72rem;
   font-weight: 400;
   color: rgba(255, 255, 255, 0.65);
   margin-left: 6px;
}

.adm-cal-nav {
   display: flex;
   gap: 4px;
}

.adm-cal-nav-btn {
   padding: 0.3rem 0.65rem;
   background: rgba(255, 255, 255, 0.12);
   border: 1px solid rgba(255, 255, 255, 0.25);
   border-radius: 6px;
   color: #FFFFFF;
   font-size: 0.75rem;
   font-weight: 600;
   cursor: pointer;
   transition: background 0.15s ease;
   white-space: nowrap;
}

.adm-cal-nav-btn:hover {
   background: rgba(255, 255, 255, 0.25);
}

.adm-cal-nav-btn.danger {
   background: rgba(229, 62, 62, 0.25);
   border-color: rgba(229, 62, 62, 0.5);
}

.adm-cal-nav-btn.danger:hover {
   background: rgba(229, 62, 62, 0.50);
}

.adm-cal-grid {
   display: grid;
   grid-template-columns: repeat(7, minmax(0, 1fr));
   width: 100%;
}

.adm-cal-weekday {
   background: #F8FAFC;
   text-align: center;
   padding: 6px 2px;
   font-size: 0.68rem;
   font-weight: 700;
   color: var(--color-text-muted);
   text-transform: uppercase;
   border-bottom: 1px solid var(--color-border);
   border-right: 1px solid rgba(226, 232, 240, 0.6);
}

.adm-cal-weekday:last-child {
   border-right: none;
}

.adm-cal-cell {
   border-right: 1px solid rgba(226, 232, 240, 0.6);
   border-bottom: 1px solid rgba(226, 232, 240, 0.6);
   padding: 5px 4px 6px;
   display: flex;
   flex-direction: column;
   gap: 4px;
   background: #FFFFFF;
   transition: background 0.15s ease;
   min-width: 0;
}

.adm-cal-cell:nth-child(7n) {
   border-right: none;
}

.adm-cal-cell.empty {
   background: #F8FAFC;
   pointer-events: none;
}

.adm-cal-cell.day-off {
   background: #FEE2E2;
   outline: 3px solid #DC2626;
   outline-offset: -2px;
   border-radius: 2px;
   box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.2);
}

.adm-cal-cell.today {
   background: #FFFBEB;
   outline: 2px solid var(--color-secondary);
   outline-offset: -2px;
   border-radius: 2px;
}

.adm-cal-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 2px;
   margin-bottom: 2px;
}

.adm-cal-daynum {
   font-family: var(--font-display);
   font-size: 0.85rem;
   font-weight: 700;
   color: var(--color-primary);
   line-height: 1;
}

.adm-cal-cell.today .adm-cal-daynum {
   color: var(--color-secondary);
}

.adm-cal-off-label {
   display: flex;
   align-items: center;
   gap: 2px;
   font-size: 0.6rem;
   font-weight: 600;
   color: var(--color-text-muted);
   cursor: pointer;
   user-select: none;
   white-space: nowrap;
}

.adm-cal-off-label input[type="checkbox"] {
   width: 11px;
   height: 11px;
   accent-color: var(--color-primary);
   cursor: pointer;
   flex-shrink: 0;
}

.adm-cal-saved {
   font-size: 0.6rem;
   font-weight: 700;
   color: var(--color-success);
   opacity: 0;
   transition: opacity 0.3s ease;
   flex-shrink: 0;
}

.adm-cal-saved.visible {
   opacity: 1;
}

.adm-cal-slots {
   display: flex;
   flex-direction: column;
   gap: 3px;
}

.adm-cal-slot {
   display: flex;
   align-items: center;
   gap: 4px;
   min-width: 0;
   padding-left: 3px;
   border-left: 2px solid transparent;
   border-radius: 0 2px 2px 0;
}

.adm-cal-slot.am-slot {
   border-left-color: #3B82F6;
}

.adm-cal-slot.pm-slot {
   border-left-color: #F59E0B;
}

.adm-cal-slot.eve-slot {
   border-left-color: #8B5CF6;
}

.adm-slot-input {
   flex: 1;
   min-width: 0;
   width: 100%;
   padding: 2px 3px;
   font-size: 0.72rem;
   font-weight: 600;
   text-align: center;
   border: 1px solid var(--color-border);
   border-radius: 4px;
   background: #FAFAFA;
   color: var(--color-primary);
   outline: none;
   transition: border-color 0.15s ease, background 0.15s ease;
   -moz-appearance: textfield;
}

.adm-slot-input::-webkit-outer-spin-button,
.adm-slot-input::-webkit-inner-spin-button {
   -webkit-appearance: none;
}

.adm-slot-input:focus {
   border-color: var(--color-secondary);
   background: #FFFBEB;
}

.adm-cal-cell.day-off .adm-slot-input {
   background: #E2E8F0;
   color: #94A3B8;
   pointer-events: none;
}

.adm-slot-booked {
   font-size: 0.65rem;
   font-weight: 700;
   color: #059669;
   flex-shrink: 0;
   min-width: 10px;
   text-align: right;
}

@media (max-width: 600px) {
   .adm-cal-header {
      flex-direction: column;
      align-items: flex-start;
   }

   .adm-cal-month-title {
      font-size: 0.9rem;
   }

   .adm-cal-month-title small {
      display: none;
   }

   .adm-cal-nav-btn {
      font-size: 0.68rem;
      padding: 0.25rem 0.5rem;
   }

   .adm-cal-cell {
      padding: 4px 3px 5px;
   }

   .adm-cal-daynum {
      font-size: 0.75rem;
   }

   .adm-slot-input {
      font-size: 0.65rem;
   }

   .adm-slot-booked {
      font-size: 0.6rem;
   }

   .adm-cal-off-label span {
      display: none;
   }
}

@media (max-width: 400px) {
   .adm-cal-cell {
      padding: 3px 2px;
      gap: 2px;
   }

   .adm-cal-slot {
      gap: 2px;
   }

   .adm-slot-tag {
      min-width: 16px;
      font-size: 0.44rem;
   }
}

/* Desktop header navigation links positioning */
@media (min-width: 993px) {
   .nav-drawer {
      position: fixed;
      top: 0;
      right: max(1.5rem, calc((100% - 1200px) / 2 + 1.5rem));
      width: auto;
      height: 80px;
      display: flex;
      align-items: center;
      z-index: 10003;
      pointer-events: auto;
   }
}

/* Custom Toggle Switch */
.admin-switch {
   position: relative;
   display: inline-block;
   width: 38px;
   height: 20px;
   margin: 0;
}

.admin-switch input {
   opacity: 0;
   width: 0;
   height: 0;
}

.admin-switch-slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #CBD5E1;
   transition: .3s;
   border-radius: 20px;
}

.admin-switch-slider:before {
   position: absolute;
   content: "";
   height: 14px;
   width: 14px;
   left: 3px;
   bottom: 3px;
   background-color: white;
   transition: .3s;
   border-radius: 50%;
}

.admin-switch input:checked+.admin-switch-slider {
   background-color: var(--color-success);
}

.admin-switch input:checked+.admin-switch-slider:before {
   transform: translateX(18px);
}

/* Responsive Rescheduling Calendar Layout */
.calendar-layout-wrapper {
   display: grid;
   grid-template-columns: 3fr 1fr;
   gap: 1.5rem;
   align-items: start;
}

@media (max-width: 1024px) {
   .calendar-layout-wrapper {
      display: flex;
      flex-direction: column-reverse;
      /* Place sidebar at the top */
      gap: 1.5rem;
   }

   .unallocated-sidebar-box {
      max-height: none !important;
      overflow-y: visible !important;
   }

   /* Style lists as horizontal carousels when stacked */
   #sched-unallocated-list,
   #sched-overdue-list {
      flex-direction: row !important;
      overflow-x: auto !important;
      white-space: nowrap;
      padding: 0.5rem 0.25rem;
      gap: 1rem !important;
      -webkit-overflow-scrolling: touch;
   }

   /* Make cards behave nicely in horizontal layout */
   #sched-unallocated-list>div,
   #sched-overdue-list>div {
      min-width: 280px;
      max-width: 280px;
      flex-shrink: 0;
      white-space: normal;
      /* Restore text wrap inside cards */
   }

   .swipe-hint {
      display: flex !important;
   }
}

/* Custom Admin Calendar Day Cell to override wizard styles */
.admin-cal-day-cell {
   min-height: 120px;
   min-width: 120px;
   background: #FFF;
   border: 1px solid var(--color-border);
   border-radius: 8px;
   padding: 6px;
   display: flex;
   flex-direction: column;
   gap: 4px;
   transition: all 0.2s ease;
   aspect-ratio: auto !important;
   /* Overrides customer aspect-ratio: 1 */
   cursor: default !important;
}

.admin-cal-day-cell:hover {
   background: #F8FAFC;
   box-shadow: inset 0 0 0 1px var(--color-primary-light);
}

/* Mobile Rescheduling Calendar Controls Header Adjustments */
@media (max-width: 768px) {
   .calendar-header-responsive {
      flex-direction: column;
      align-items: flex-start !important;
      gap: 0.75rem !important;
   }

   .calendar-header-responsive>div {
      width: 100%;
   }

   .calendar-controls-container {
      width: 100%;
      justify-content: space-between;
      flex-direction: row !important;
   }

   .calendar-controls-nav {
      flex-grow: 1;
      justify-content: flex-end;
   }

   .calendar-controls-nav span {
      min-width: 100px !important;
      font-size: 0.85rem !important;
   }

   .calendar-controls-nav button {
      padding: 4px 8px !important;
      font-size: 0.75rem !important;
   }

   #sched-view-select {
      width: 90px !important;
      font-size: 0.8rem !important;
   }
}

/* Sidebar Collapsible Animations & Styles */
.unallocated-sidebar-box {
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.collapsed-sidebar {
   max-height: 50px !important;
   overflow: hidden !important;
   padding-top: 0.5rem !important;
   padding-bottom: 0.5rem !important;
}

.collapsed-sidebar> :not(.sidebar-collapse-header) {
   display: none !important;
}

.admin-cal-day-cell {
   min-height: 80px;
}

/* ============================================================
   MOBILE-FIRST PREMIUM SCHEDULE SCREEN
   ============================================================ */
.schedule-mobile-container {
   display: flex;
   justify-content: center;
   align-items: flex-start;
   padding: 1.5rem 0.5rem;
   background: var(--color-bg);
   min-height: calc(100vh - 120px);
}

.schedule-phone-frame {
   width: 100%;
   max-width: 410px;
   height: 780px;
   background: #FFFFFF;
   border-radius: 40px;
   border: 12px solid #1E293B;
   box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
   position: relative;
   overflow: hidden;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   user-select: none;
}

/* Simulated Phone UI Components */
.phone-status-bar {
   height: 24px;
   background: #FFFFFF;
   padding: 0 24px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 0.72rem;
   font-weight: 700;
   color: #1E293B;
   flex-shrink: 0;
   border-bottom: 1px solid rgba(226, 232, 240, 0.3);
}

.phone-status-icons {
   display: flex;
   gap: 4px;
   align-items: center;
}

/* Top Sticky Header */
.schedule-header {
   height: 56px;
   background: #FFFFFF;
   border-bottom: 1px solid #E2E8F0;
   padding: 0 16px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-shrink: 0;
   position: relative;
   z-index: 10;
}

.schedule-header-title {
   font-size: 1.15rem;
   font-weight: 800;
   color: #1E293B;
   margin: 0;
   letter-spacing: -0.01em;
}

.schedule-header-actions {
   display: flex;
   align-items: center;
   gap: 6px;
}

.schedule-action-btn {
   background: none;
   border: none;
   color: #64748B;
   font-size: 1.05rem;
   padding: 6px;
   cursor: pointer;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.15s ease, color 0.15s ease;
}

.schedule-action-btn:hover {
   background: #F1F5F9;
   color: var(--color-primary);
}

.schedule-month-btn {
   background: #F1F5F9;
   border: 1px solid #E2E8F0;
   color: #1E293B;
   font-size: 0.78rem;
   font-weight: 700;
   padding: 5px 10px;
   border-radius: 20px;
   display: flex;
   align-items: center;
   gap: 4px;
   cursor: pointer;
   transition: all 0.15s ease;
}

.schedule-month-btn:hover {
   border-color: #CBD5E1;
   background: #E2E8F0;
}

/* Filter Chips Bar */
.filter-chips-bar {
   display: flex;
   gap: 6px;
   overflow-x: auto;
   padding: 8px 12px;
   background: #FFFFFF;
   border-bottom: 1px solid #F1F5F9;
   flex-shrink: 0;
   -webkit-overflow-scrolling: touch;
}

.filter-chips-bar::-webkit-scrollbar {
   display: none;
}

.filter-chip {
   padding: 5px 12px;
   background: #F1F5F9;
   border: 1px solid #E2E8F0;
   border-radius: 20px;
   font-size: 0.72rem;
   font-weight: 700;
   color: #64748B;
   cursor: pointer;
   white-space: nowrap;
   transition: all 0.15s ease;
}

.filter-chip:hover {
   background: #E2E8F0;
   color: #334155;
}

.filter-chip.active {
   background: #7C3AED;
   color: #FFFFFF;
   border-color: #7C3AED;
   box-shadow: 0 2px 4px rgba(124, 58, 237, 0.2);
}

/* Search Bar Box */
.schedule-search-bar {
   padding: 8px 12px;
   background: #FFFFFF;
   border-bottom: 1px solid #F1F5F9;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   transition: all 0.25s ease;
}

.schedule-search-bar input {
   width: 100%;
   padding: 6px 12px;
   border: 1.5px solid #E2E8F0;
   border-radius: 20px;
   font-size: 0.8rem;
   outline: none;
   background: #F8FAFC;
   transition: all 0.15s ease;
}

.schedule-search-bar input:focus {
   border-color: #7C3AED;
   background: #FFFFFF;
   box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08);
}

/* Sticky Calendar Grid */
.sticky-calendar-section {
   background: #FFFFFF;
   border-bottom: 1px solid #E2E8F0;
   padding: 8px 12px 10px;
   flex-shrink: 0;
   z-index: 5;
}

.calendar-week-headers {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   text-align: center;
   font-size: 0.65rem;
   font-weight: 800;
   color: #94A3B8;
   text-transform: uppercase;
   margin-bottom: 6px;
   letter-spacing: 0.02em;
}

.calendar-days-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 4px;
   max-height: 140px;
   overflow-y: auto;
   padding-right: 2px;
}

.calendar-days-grid::-webkit-scrollbar {
   width: 4px;
}

.calendar-days-grid::-webkit-scrollbar-track {
   background: #F1F5F9;
}

.calendar-days-grid::-webkit-scrollbar-thumb {
   background: #CBD5E1;
   border-radius: 2px;
}

.schedule-date-cell {
   aspect-ratio: 1;
   background: #FFFFFF;
   border: 1px solid #F1F5F9;
   border-radius: 8px;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 2px 2px;
   cursor: pointer;
   position: relative;
   overflow: visible;
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.schedule-date-cell:hover {
   background: #F8FAFC;
}

.schedule-date-number {
   font-size: 0.8rem;
   font-weight: 800;
   color: #334155;
   line-height: 1;
   width: 18px;
   height: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
}

.schedule-date-cell.today .schedule-date-number {
   background: #3B82F6;
   color: #FFFFFF;
}

/* Selected Date Highlight */
.schedule-date-cell.selected {
   outline: 2px solid #7C3AED;
   background-color: #F5F3FF;
   z-index: 2;
   box-shadow: 0 4px 10px rgba(124, 58, 237, 0.15);
}

.schedule-date-cell.selected .schedule-date-number {
   color: #7C3AED;
}

.schedule-date-cell.selected.today .schedule-date-number {
   background: #7C3AED;
   color: #FFFFFF;
}

/* Blocked day diagonal stripes */
.schedule-date-cell.blocked {
   background: repeating-linear-gradient(45deg, #F1F5F9, #F1F5F9 6px, #E2E8F0 6px, #E2E8F0 12px);
   color: #94A3B8;
   cursor: not-allowed;
   border-color: #E2E8F0;
}

.schedule-date-cell.blocked .schedule-date-number {
   color: #94A3B8;
}

/* Booking Dots inside calendar cells */
.calendar-cell-dots {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 1.5px;
   width: 100%;
   margin-top: auto;
   max-height: 24px;
   overflow: hidden;
   padding: 0 1px;
}

.booking-dot {
   width: 4.5px;
   height: 4.5px;
   border-radius: 50%;
   display: inline-block;
}

.dot-red {
   background: #EF4444;
}

.dot-yellow {
   background: #F59E0B;
}

.dot-blue {
   background: #3B82F6;
}

.dot-green {
   background: #10B981;
}

.dot-overflow {
   font-size: 0.52rem;
   font-weight: 900;
   color: #64748B;
   line-height: 1;
   margin-left: 1px;
}

/* Drag-over hover states for calendar */
.schedule-date-cell.valid-drop-target {
   background-color: #F0FDF4;
   border: 1px dashed #10B981;
   box-shadow: 0 0 0 1.5px #10B981;
}

.schedule-date-cell.invalid-drop-target {
   opacity: 0.35;
   cursor: not-allowed;
}

.schedule-date-cell.drag-hover {
   transform: scale(1.1);
   background-color: #DCFCE7 !important;
   box-shadow: 0 8px 16px rgba(16, 185, 129, 0.25) !important;
   z-index: 10;
}

/* Booking List Section (Scrollable) */
.booking-list-section {
   flex: 1;
   overflow-y: auto;
   background: #F8FAFC;
   padding: 12px;
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.booking-list-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 4px;
   font-size: 0.85rem;
   font-weight: 800;
   color: #1E293B;
   flex-shrink: 0;
}

.booking-list-header span.badge {
   background: #E2E8F0;
   color: #475569;
   padding: 2px 8px;
   border-radius: 12px;
   font-size: 0.7rem;
   font-weight: 700;
}

/* Booking Compact Card */
.booking-compact-card {
   display: flex;
   min-height: 95px;
   height: auto !important;
   padding-bottom: 8px;
   background: #FFFFFF;
   border: 1.5px solid #E2E8F0;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.02);
   transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
   position: relative;
   cursor: grab;
   touch-action: pan-y;
}

.booking-card-actions button {
   height: 26px !important;
   padding: 2px 6px !important;
   font-size: 0.68rem !important;
   font-weight: 700 !important;
   border-radius: 6px !important;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 1px solid transparent;
}

.booking-compact-card:active {
   cursor: grabbing;
}

.booking-compact-card.locked {
   opacity: 0.5;
   cursor: not-allowed;
   background: #F8FAFC;
}

.booking-compact-card.selected-card {
   border-color: #7C3AED;
   background: #F5F3FF;
}

.booking-card-strip {
   width: 6px;
   height: 100%;
   flex-shrink: 0;
}

.strip-red {
   background: #EF4444;
}

.strip-yellow {
   background: #F59E0B;
}

.strip-blue {
   background: #3B82F6;
}

.strip-green {
   background: #10B981;
}

.booking-card-select-overlay {
   width: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   border-right: 1px solid #F1F5F9;
}

.booking-checkbox {
   width: 16px;
   height: 16px;
   accent-color: #7C3AED;
   cursor: pointer;
}

.booking-card-main {
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 0 10px;
   min-width: 0;
}

.booking-card-title-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 2px;
   gap: 6px;
}

.booking-card-title {
   font-size: 0.82rem;
   font-weight: 800;
   color: #1E293B;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.booking-card-customer {
   font-size: 0.72rem;
   font-weight: 500;
   color: #64748B;
   margin-bottom: 2px;
}

.booking-card-meta {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 0.68rem;
   font-weight: 600;
   color: #94A3B8;
}

.booking-card-time {
   color: #475569;
   font-weight: 700;
}

.booking-card-type {
   text-transform: capitalize;
}

.booking-card-right {
   min-width: 40px;
   width: auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 4px;
   border-left: 1px solid #F1F5F9;
   flex-shrink: 0;
   padding: 0 6px;
}

.booking-card-lock-icon {
   font-size: 0.82rem;
   color: #94A3B8;
   cursor: pointer;
   padding: 4px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.15s ease;
}

.booking-card-lock-icon:hover {
   background: #F1F5F9;
   color: #7C3AED;
}

.booking-compact-card.locked .booking-card-lock-icon {
   color: #7C3AED;
}

/* WhatsApp Confirmation Button on Cards */
.booking-card-wa-btn {
   background: #25D366;
   color: #FFFFFF;
   border: none;
   font-size: 0.62rem;
   font-weight: 800;
   padding: 2px 6px;
   border-radius: 12px;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: 2px;
   box-shadow: 0 2px 4px rgba(37, 211, 102, 0.15);
   transition: all 0.15s ease;
   user-select: none;
   flex-shrink: 0;
}

.booking-card-wa-btn:hover {
   background: #128C7E;
   transform: scale(1.05);
}

.booking-card-menu-trigger {
   font-size: 0.95rem;
   color: #94A3B8;
   cursor: pointer;
   padding: 2px;
   border-radius: 4px;
}

.booking-card-menu-trigger:hover {
   background: #F1F5F9;
   color: #475569;
}

/* Card Drag State */
.booking-compact-card.dragging-active {
   position: fixed;
   width: 374px;
   /* matches container inner width */
   z-index: 9999;
   transform: scale(1.04);
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
   pointer-events: none;
   border-color: #7C3AED;
}

/* Empty State Card */
.schedule-empty-state {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 2.5rem 1.5rem;
   background: #FFFFFF;
   border: 1px dashed #E2E8F0;
   border-radius: 16px;
   text-align: center;
   margin-top: 1rem;
}

.schedule-empty-icon {
   font-size: 2.8rem;
   margin-bottom: 12px;
   animation: float 3s ease-in-out infinite;
}

@keyframes float {
   0% {
      transform: translateY(0px);
   }

   50% {
      transform: translateY(-6px);
   }

   100% {
      transform: translateY(0px);
   }
}

.schedule-empty-text {
   font-size: 0.85rem;
   font-weight: 700;
   color: #475569;
   margin-bottom: 4px;
}

.schedule-empty-subtext {
   font-size: 0.75rem;
   color: #94A3B8;
   margin-bottom: 14px;
   line-height: 1.4;
}

.schedule-empty-cta {
   background: #F1F5F9;
   border: 1px solid #E2E8F0;
   color: #475569;
   font-size: 0.75rem;
   font-weight: 700;
   padding: 6px 12px;
   border-radius: 20px;
   cursor: pointer;
   transition: all 0.15s ease;
}

.schedule-empty-cta:hover {
   background: #E2E8F0;
   color: #1E293B;
}

/* Bottom Action Bar */
.schedule-bottom-bar {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 64px;
   background: #FFFFFF;
   border-top: 1px solid #E2E8F0;
   padding: 0 16px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   box-shadow: 0 -10px 15px -3px rgba(0, 0, 0, 0.05);
   z-index: 100;
   transform: translateY(100%);
   transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.schedule-bottom-bar.visible {
   transform: translateY(0);
}

.bottom-bar-count {
   font-size: 0.8rem;
   font-weight: 800;
   color: #1E293B;
   background: #F1F5F9;
   padding: 4px 10px;
   border-radius: 20px;
}

.bottom-bar-actions {
   display: flex;
   gap: 6px;
}

.bottom-bar-btn {
   background: #FFFFFF;
   border: 1px solid #E2E8F0;
   color: #475569;
   font-size: 0.72rem;
   font-weight: 700;
   padding: 6px 10px;
   border-radius: 8px;
   cursor: pointer;
   transition: all 0.15s ease;
   display: flex;
   align-items: center;
   gap: 3px;
}

.bottom-bar-btn:hover {
   background: #F8FAFC;
   border-color: #CBD5E1;
   color: #1E293B;
}

.bottom-bar-btn.danger {
   color: #EF4444;
   border-color: #FEE2E2;
}

.bottom-bar-btn.danger:hover {
   background: #FEE2E2;
   border-color: #FCA5A5;
}

/* Confirmation Bottom Sheet */
.bottom-sheet-backdrop {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(15, 23, 42, 0.4);
   z-index: 200;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.25s ease;
}

.bottom-sheet-backdrop.visible {
   opacity: 1;
   pointer-events: auto;
}

.bottom-sheet-panel {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   background: #FFFFFF;
   border-top-left-radius: 24px;
   border-top-right-radius: 24px;
   padding: 20px 18px 24px;
   z-index: 210;
   transform: translateY(100%);
   transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   box-shadow: 0 -15px 30px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.bottom-sheet-panel.visible {
   transform: translateY(0);
}

.bottom-sheet-handle {
   width: 36px;
   height: 4px;
   background: #E2E8F0;
   border-radius: 2px;
   align-self: center;
   margin-bottom: 4px;
}

.bottom-sheet-title {
   font-size: 1.05rem;
   font-weight: 800;
   color: #1E293B;
   text-align: center;
   margin: 0;
}

.bottom-sheet-body {
   font-size: 0.8rem;
   color: #475569;
   text-align: center;
   line-height: 1.4;
   margin: 4px 0 12px;
}

.bottom-sheet-details-box {
   background: #F8FAFC;
   border: 1px solid #E2E8F0;
   border-radius: 12px;
   padding: 10px 12px;
   margin-bottom: 12px;
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   text-align: center;
}

.details-box-date {
   font-size: 0.85rem;
   font-weight: 800;
   color: #1E293B;
}

.details-box-arrow {
   color: #94A3B8;
   font-size: 1.1rem;
}

.bottom-sheet-buttons {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
}

.bottom-sheet-btn {
   padding: 10px;
   border-radius: 10px;
   font-size: 0.82rem;
   font-weight: 700;
   cursor: pointer;
   text-align: center;
   transition: all 0.15s ease;
}

.bottom-sheet-btn.cancel {
   background: #F1F5F9;
   border: 1px solid #E2E8F0;
   color: #475569;
}

.bottom-sheet-btn.cancel:hover {
   background: #E2E8F0;
}

.bottom-sheet-btn.confirm {
   background: #7C3AED;
   border: 1px solid #7C3AED;
   color: #FFFFFF;
   box-shadow: 0 4px 10px rgba(124, 58, 237, 0.2);
}

.bottom-sheet-btn.confirm:hover {
   background: #6D28D9;
}

/* Drop hover indicators */
.schedule-date-cell.valid-drop-target::after {
   content: "Move to " attr(data-date-label);
   position: absolute;
   top: -32px;
   left: 50%;
   transform: translateX(-50%);
   background: #1E293B;
   color: #FFFFFF;
   font-size: 0.68rem;
   font-weight: 700;
   padding: 4px 10px;
   border-radius: 6px;
   white-space: nowrap;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.15s ease;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
   z-index: 9999;
   letter-spacing: 0.01em;
}

.schedule-date-cell.valid-drop-target.drag-hover::after {
   opacity: 1;
}

/* Date Cell Tooltip Hover Label */
.schedule-date-cell::before {
   content: attr(title);
   position: absolute;
   bottom: 100%;
   left: 50%;
   transform: translateX(-50%) translateY(-4px);
   background: #1E293B;
   color: #FFFFFF;
   font-size: 0.65rem;
   padding: 4px 8px;
   border-radius: 4px;
   white-space: nowrap;
   opacity: 0;
   pointer-events: none;
   z-index: 1000;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   transition: opacity 0.15s ease;
}

/* Shake Animation */
@keyframes shake {

   0%,
   100% {
      transform: translateX(0);
   }

   20%,
   60% {
      transform: translateX(-6px);
   }

   40%,
   80% {
      transform: translateX(6px);
   }
}

.shake {
   animation: shake 0.4s ease-in-out;
}

/* Elegant Toasts */
.schedule-toast-container {
   position: absolute;
   top: 36px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 9999;
   display: flex;
   flex-direction: column;
   gap: 8px;
   pointer-events: none;
}

.schedule-toast {
   background: #1E293B;
   color: #FFFFFF;
   padding: 8px 16px;
   border-radius: 20px;
   font-size: 0.72rem;
   font-weight: 700;
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
   animation: toast-slide-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards, toast-fade-out 0.3s ease 2.7s forwards;
   display: flex;
   align-items: center;
   gap: 6px;
}

@keyframes toast-slide-in {
   from {
      transform: translateY(-16px);
      opacity: 0;
   }

   to {
      transform: translateY(0);
      opacity: 1;
   }
}

@keyframes toast-fade-out {
   from {
      opacity: 1;
   }

   to {
      opacity: 0;
   }
}

@keyframes spin {
   to { transform: rotate(360deg); }
}

/* Responsive Overrides to adapt inside standard Dashboard layout */
@media (max-width: 480px) {
   .schedule-mobile-container {
      padding: 0;
      height: calc(100dvh - 60px);
      display: flex;
      flex-direction: column;
   }

   .schedule-phone-frame {
      flex: 1;
      height: auto;
      border-radius: 0;
      border: none;
      max-width: 100vw;
   }
}

/* Booking Context Menu styling for mobile-first layout */
.booking-context-menu {
   position: absolute;
   background: rgba(255, 255, 255, 0.98);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   border: 1px solid #E2E8F0;
   border-radius: 12px;
   box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
   width: 200px;
   z-index: 10000;
   display: none;
   padding: 6px;
   font-family: inherit;
}

.context-menu-item {
   padding: 8px 12px;
   font-size: 0.78rem;
   color: #334155;
   cursor: pointer;
   border-radius: 8px;
   transition: background 0.15s ease, color 0.15s ease;
   display: flex;
   align-items: center;
   gap: 8px;
   font-weight: 600;
   user-select: none;
}

.context-menu-item:hover {
   background: #F1F5F9;
   color: #1E293B;
}

.context-menu-item.header {
   font-size: 0.62rem;
   font-weight: 800;
   color: #94A3B8;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   cursor: default;
   padding: 6px 12px;
   pointer-events: none;
   border-bottom: none;
}

.context-menu-item.danger {
   color: #EF4444;
}

.context-menu-item.danger:hover {
   background: #FEE2E2;
   color: #DC2626;
}

.context-menu-divider {
   height: 1px;
   background: #E2E8F0;
   margin: 4px 6px;
}

/* --- RESPONSIVE WORK & COMPLEMENTARY STYLES FOR ENHANCED PORTAL --- */

/* Responsive Desktop Styles for Schedule tab - Stacked Vertically */
.schedule-mobile-container {
   padding: 1rem;
   background: var(--color-bg-alt);
   max-width: 100% !important;
}

.schedule-phone-frame {
   max-width: 1000px;
   height: calc(100vh - 140px);
   min-height: 550px;
   border-radius: 16px;
   border: 1px solid var(--color-border);
   box-shadow: var(--shadow-premium);
   display: flex;
   flex-direction: column;
   margin: 0 auto;
   background: #FFFFFF;
}

.schedule-responsive-wrapper {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   padding: 1.25rem;
   background: #FFFFFF;
   flex: 1;
   overflow: hidden;
   min-height: 0;
}

.schedule-lists-section {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   border: none !important;
   padding: 0 !important;
   flex: 1;
   min-height: 0;
}

.schedule-calendar-section-wrapper {
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.calendar-days-grid {
   max-height: 380px !important;
   grid-gap: 6px;
   overflow-y: auto;
}

.schedule-date-cell {
   aspect-ratio: 1.2;
   padding: 4px 4px;
}

/* Mobile: full viewport column layout */
@media (max-width: 768px) {
   .schedule-mobile-container {
      padding: 0;
   }

   .schedule-phone-frame {
      border-radius: 0;
      border: none;
      box-shadow: none;
      height: calc(100dvh - 110px);
      min-height: 0;
   }

   .schedule-header {
      padding: 0.5rem 1rem !important;
   }

   .schedule-header-title {
      font-size: 1rem !important;
   }

   .schedule-responsive-wrapper {
      flex-direction: column !important;
      display: flex !important;
      padding: 0.5rem !important;
      gap: 0.6rem !important;
      flex: 1 1 0 !important;
      overflow: hidden !important;
      min-height: 0 !important;
      height: 100% !important;
   }

   /* The calendar/unscheduled column: shrink to its content, never grow */
   .schedule-left-column {
      flex-shrink: 0 !important;
      flex-grow: 0 !important;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
   }

   /* Compact calendar grid on mobile */
   .calendar-days-grid {
      max-height: 185px !important;
      overflow-y: auto !important;
   }

   .schedule-date-cell {
      aspect-ratio: 1;
      padding: 1px 1px;
   }

   /* The list section: takes ALL remaining height and scrolls */
   .schedule-lists-section {
      flex: 1 1 0 !important;
      min-height: 200px !important;
      overflow: hidden !important;
      display: flex !important;
      flex-direction: column !important;
      border-radius: 12px !important;
   }

   /* The bookings list inside: fills and scrolls */
   #schedule-bookings-list {
      flex: 1 1 0 !important;
      min-height: 0 !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
   }

   /* Restore and make compact the unscheduled section on mobile */
   #schedule-unscheduled-container {
      display: flex !important;
      padding: 6px 8px !important;
      gap: 4px !important;
   }

   #schedule-unscheduled-container .unscheduled-chip {
      padding: 4px 8px !important;
      font-size: 0.65rem !important;
      min-width: 100px !important;
   }
}

/* Collapsible Booking Card layout for Dashboard */
.mobile-booking-card {
   background: #FFFFFF;
   border: 1px solid var(--color-border);
   border-radius: 12px;
   padding: 1rem;
   box-shadow: var(--shadow-sm);
   cursor: pointer;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   transition: border-color 0.2s, box-shadow 0.2s;
   text-align: left;
   position: relative;
   flex-shrink: 0;
}

.mobile-booking-card:hover {
   border-color: var(--color-primary);
   box-shadow: var(--shadow-md);
}

.mobile-booking-card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-weight: 700;
   color: var(--color-primary);
   font-size: 0.95rem;
}

.mobile-booking-card-body-collapsed {
   display: flex;
   justify-content: space-between;
   font-size: 0.8rem;
   color: var(--color-text-muted);
}

.mobile-booking-card-body-expanded {
   display: none;
   flex-direction: column;
   gap: 0.75rem;
   font-size: 0.82rem;
   border-top: 1px dashed var(--color-border);
   padding-top: 0.75rem;
   margin-top: 0.25rem;
   color: #334155;
}

.mobile-booking-card.expanded .mobile-booking-card-body-expanded {
   display: flex;
}

.mobile-booking-card.expanded .expand-icon {
   transform: rotate(180deg);
}

.expand-icon {
   transition: transform 0.2s;
   font-weight: bold;
}

.mobile-booking-card .btn {
   height: 26px !important;
   padding: 2px 8px !important;
   font-size: 0.7rem !important;
   font-weight: 700 !important;
   border-radius: 6px !important;
   cursor: pointer;
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
   border: 1px solid transparent !important;
   margin: 0 !important;
   transform: none !important;
   box-shadow: none !important;
   font-family: inherit !important;
   white-space: nowrap !important;
}

/* Day Off calendar cell style indicator */
.schedule-date-cell.blocked.day-off-cell {
   background: repeating-linear-gradient(45deg, #FEE2E2, #FEE2E2 6px, #FCA5A5 6px, #FCA5A5 12px) !important;
   color: #B91C1C !important;
}

.schedule-date-cell.blocked.day-off-cell .schedule-date-number {
   color: #B91C1C !important;
   font-weight: bold;
}

/* Desktop two-column grid layout for scheduling panel */
@media (min-width: 992px) {
   .schedule-responsive-wrapper {
      display: grid !important;
      grid-template-columns: 5fr 7fr !important;
      gap: 1.5rem !important;
      align-items: stretch !important;
      height: 100%;
   }
}

/* Invoice parts and service spreadsheet-like grid input */
.invoice-grid-table {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 1rem;
}

.invoice-grid-table th {
   background-color: var(--color-primary);
   color: #FFFFFF;
   font-weight: 700;
   font-size: 0.85rem;
   padding: 8px 12px;
   text-align: left;
   border: 1px solid var(--color-border);
}

.invoice-grid-table td {
   padding: 0;
   border: 1px solid var(--color-border);
   background-color: #FFFFFF;
}

.invoice-grid-table input.form-control {
   border: none !important;
   border-radius: 0 !important;
   box-shadow: none !important;
   padding: 8px 12px !important;
   margin: 0 !important;
   width: 100% !important;
   height: 100% !important;
   background: transparent !important;
}

.invoice-grid-table input.form-control:focus {
   background-color: #F8FAFC !important;
   outline: 2px solid var(--color-secondary) !important;
   z-index: 1;
}

.invoice-grid-table .item-total {
   display: block;
   padding: 8px 12px;
   font-weight: 600;
   color: var(--color-text);
}

.invoice-grid-table button {
   margin: 0 auto;
   display: block;
}

/* ============================================================
   MOBILE NAVIGATION: FLOATING BUTTON, SIDE DRAWER & SUBTABS
   ============================================================ */

/* Floating corner navigation button (Apple/Samsung style FAB) */
.admin-nav-fab {
   display: none;
   position: fixed;
   bottom: 20px;
   right: 20px;
   width: 52px;
   height: 52px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.92);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid rgba(15, 23, 42, 0.06);
   color: var(--color-primary);
   align-items: center;
   justify-content: center;
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
   cursor: pointer;
   z-index: 10001;
   transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.admin-nav-fab:active {
   transform: scale(0.94);
}

.admin-nav-fab.active {
   background: var(--color-secondary);
   color: #FFFFFF;
   transform: rotate(90deg);
}

/* Side drawer overlay */
.admin-nav-drawer-overlay {
   display: none;
   position: fixed;
   inset: 0;
   background: rgba(15, 23, 42, 0.4);
   backdrop-filter: blur(2px);
   z-index: 9999;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.2s ease;
}

.admin-nav-drawer-overlay.open {
   opacity: 1;
   pointer-events: auto;
}

/* Side drawer panel (slides in from the right) */
.admin-nav-drawer {
   position: fixed;
   top: 0;
   bottom: 0;
   right: 0;
   width: min(78vw, 320px);
   background: #FFFFFF;
   z-index: 10000;
   box-shadow: -12px 0 32px rgba(15, 23, 42, 0.18);
   transform: translateX(100%);
   transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
   display: flex;
   flex-direction: column;
}

.admin-nav-drawer.open {
   transform: translateX(0);
}

.admin-nav-drawer-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1.25rem 1.1rem 0.85rem;
   border-bottom: 1px solid var(--color-border);
   flex-shrink: 0;
}

.admin-nav-drawer-title {
   font-size: 1.05rem;
   font-weight: 800;
   color: var(--color-primary);
}

.admin-nav-drawer-close {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   border: none;
   background: #F1F5F9;
   color: var(--color-text-muted);
   font-size: 1.1rem;
   line-height: 1;
   cursor: pointer;
}

.admin-nav-drawer-body {
   flex: 1;
   overflow-y: auto;
   padding: 0.85rem 1rem 1.5rem;
}

.admin-nav-drawer-group-title {
   font-size: 0.68rem;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--color-text-muted);
   margin: 1.1rem 0 0.4rem;
}

.admin-nav-drawer-group-title:first-child {
   margin-top: 0.25rem;
}

.admin-nav-drawer-menu {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.admin-nav-drawer .admin-menu-item button {
   width: 100%;
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 0.7rem 0.7rem;
   border-radius: 12px;
   background: transparent;
   border: none;
   color: var(--color-text-main);
   font-family: var(--font-body);
   font-size: 0.92rem;
   font-weight: 600;
   cursor: pointer;
   text-align: left;
}

.admin-nav-drawer .admin-menu-item button .item-icon {
   font-size: 1.15rem;
   flex-shrink: 0;
   width: 24px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}

.admin-nav-drawer .admin-menu-item.active button {
   background: var(--color-secondary-tint, #FFF1E5);
   color: var(--color-secondary);
}

/* Mobile Sub-Navigation pills (acts as the bottom navigation bar) */
.admin-mobile-sub-nav {
   display: none;
   background: rgba(255, 255, 255, 0.96);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border-top: 1px solid var(--color-border);
   padding: 0.55rem 78px 0.55rem 0.85rem;
   gap: 6px;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
   -ms-overflow-style: none;
   flex-shrink: 0;
}

.admin-mobile-sub-nav::-webkit-scrollbar {
   display: none;
}

.mobile-sub-tab-item {
   flex-shrink: 0;
   background: #FFFFFF;
   border: 1px solid var(--color-border);
   padding: 0.35rem 0.75rem;
   font-size: 0.72rem;
   font-weight: 600;
   color: var(--color-text-main);
   cursor: pointer;
   border-radius: 20px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
   transition: all 0.15s ease;
   white-space: nowrap;
   user-select: none;
}

.mobile-sub-tab-item.active {
   background: var(--color-secondary);
   color: #FFFFFF;
   border-color: var(--color-secondary);
   box-shadow: 0 2px 6px rgba(230, 126, 0, 0.2);
}

@media (max-width: 1023px) {
   .admin-sidebar {
      display: none !important;
   }

   .admin-mobile-brand {
      display: block !important;
   }

   .mobile-only {
      display: flex !important;
   }

   .admin-nav-drawer-overlay.mobile-only {
      display: block !important;
   }

   .admin-mobile-sub-nav {
      position: fixed !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      background: rgba(255, 255, 255, 0.98) !important;
      backdrop-filter: blur(10px) !important;
      border-top: 1px solid var(--color-border) !important;
      border-bottom: none !important;
      padding: 0.6rem 78px 0.6rem 0.85rem !important;
      z-index: 9998 !important;
      box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05) !important;
      display: none; /* controlled by JS toggle */
      justify-content: flex-start !important;
      align-items: center !important;
      margin: 0 !important;
      height: auto !important;
   }

   .admin-content {
      padding: 0.5rem 0.65rem 24px !important; /* clearance for floating nav button */
   }

   .admin-layout.has-mobile-subnav .admin-content {
      padding-bottom: 78px !important; /* space for the bottom sub-nav bar */
   }
}

@media (min-width: 1024px) {
   .admin-mobile-sub-nav,
   .mobile-only,
   .admin-mobile-brand {
      display: none !important;
   }
   .admin-sidebar {
      display: flex !important;
   }
}

/* Accordion & Dashboard Enhancements */
.booking-card-actions {
   display: flex !important;
   gap: 4px !important;
   align-items: center !important;
   flex-wrap: wrap !important;
   justify-content: flex-end !important;
}

@media (max-width: 768px) {
   .admin-stats-row {
      grid-template-columns: repeat(5, 1fr) !important;
      gap: 0.3rem !important;
   }
   .admin-stats-row .admin-stat-card {
      padding: 0.5rem 0.2rem !important;
      min-width: 0;
   }
   .admin-stats-row .admin-stat-value {
      font-size: 1.3rem !important;
   }
   .admin-stats-row .admin-stat-label {
      font-size: 0.58rem !important;
   }
}

/* Premium Accordion Settings Page */
.settings-accordion {
   display: flex;
   flex-direction: column;
   gap: 12px;
   margin-bottom: 1.5rem;
}

.settings-accordion-item {
   background: #FFFFFF;
   border: 1px solid var(--color-border);
   border-radius: 12px;
   overflow: hidden;
   box-shadow: var(--shadow-sm);
   transition: all 0.3s ease;
}

.settings-accordion-item.active {
   border-color: var(--color-primary);
   box-shadow: 0 4px 12px rgba(124, 58, 237, 0.08);
}

.settings-accordion-header {
   padding: 1rem 1.25rem;
   background: #F8FAFC;
   font-size: 1rem;
   font-weight: 700;
   color: #1E293B;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
   user-select: none;
   transition: background 0.2s ease;
}

.settings-accordion-header:hover {
   background: #F1F5F9;
}

.settings-accordion-item.active .settings-accordion-header {
   background: #F5F3FF;
   color: var(--color-primary);
   border-bottom: 1px solid var(--color-border);
}

.settings-accordion-header::after {
   content: '▼';
   font-size: 0.8rem;
   color: #64748B;
   transition: transform 0.3s ease;
}

.settings-accordion-item.active .settings-accordion-header::after {
   transform: rotate(180deg);
   color: var(--color-primary);
}

.settings-accordion-content {
   padding: 1.25rem;
   display: none;
   animation: slideDown 0.3s ease;
}

.settings-accordion-item.active .settings-accordion-content {
   display: block;
}

@keyframes slideDown {
   from {
      opacity: 0;
      transform: translateY(-8px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* Saved Address List Styles */
.saved-address-chip {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: #ffffff;
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius-sm);
   padding: 0.6rem 0.8rem;
   cursor: pointer;
   transition: all 0.2s ease;
   user-select: none;
}

.saved-address-chip:hover {
   background: #f3f4f6;
   border-color: var(--color-primary);
}

.saved-address-chip.active {
   background: #fffbeb;
   border: 2px solid var(--color-primary);
   padding: 0.55rem 0.75rem;
}

.saved-address-details {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   font-size: 0.85rem;
   color: var(--color-text);
   font-weight: 500;
   flex-grow: 1;
   min-width: 0;
}

.saved-address-text {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   flex-grow: 1;
}

.delete-saved-address-btn {
   background: transparent;
   border: none;
   color: #ef4444;
   cursor: pointer;
   font-size: 1rem;
   padding: 4px 8px;
   border-radius: var(--border-radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.15s ease;
}

.delete-saved-address-btn:hover {
   background: #fee2e2;
}

@keyframes slideUp {
   from {
      transform: translateY(100%);
      opacity: 0;
   }
   to {
      transform: translateY(0);
      opacity: 1;
   }
}

/* Mobile Header Logo Rules - Ensure "MOBILE CAR SERVICE" sits directly as a whole unbroken line below "TECH-MECH" */
@media (max-width: 768px) {
   .logo {
      gap: 0.55rem;
   }

   .logo img {
      height: 40px;
   }

   .logo-text {
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      justify-content: center !important;
      line-height: 1 !important;
   }

   .logo-title {
      font-size: 1.1rem !important;
      line-height: 1 !important;
      display: block !important;
      white-space: nowrap !important;
      letter-spacing: 0 !important;
   }

   .logo-subtitle {
      font-size: 0.52rem !important;
      line-height: 1 !important;
      display: block !important;
      white-space: nowrap !important;
      letter-spacing: 0.08em !important;
      margin-top: 2px !important;
   }
}

@media (max-width: 380px) {
   .logo {
      gap: 0.4rem;
   }

   .logo img {
      height: 34px;
   }

   .logo-title {
      font-size: 0.95rem !important;
   }

   .logo-subtitle {
      font-size: 0.45rem !important;
      letter-spacing: 0.05em !important;
   }
}

/* ============================================= */
/* TECH-MECH QUOTATION MODULE STYLES */
/* ============================================= */
.quotation-card-modern {
   background: #FFFFFF;
   border: 1px solid var(--color-border);
   border-radius: 12px;
   padding: 1rem;
   box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
   transition: all 0.2s ease;
   position: relative;
}

.quotation-card-modern:hover {
   border-color: #3B82F6;
   box-shadow: 0 4px 12px rgba(59, 130, 246, 0.08);
}

.quote-badge-tax {
   background: #EFF6FF;
   color: #1D4ED8;
   border: 1px solid #BFDBFE;
   font-size: 0.72rem;
   font-weight: 700;
   padding: 2px 8px;
   border-radius: 9999px;
   display: inline-flex;
   align-items: center;
   gap: 4px;
}

.quote-badge-cash {
   background: #ECFDF5;
   color: #047857;
   border: 1px solid #A7F3D0;
   font-size: 0.72rem;
   font-weight: 700;
   padding: 2px 8px;
   border-radius: 9999px;
   display: inline-flex;
   align-items: center;
   gap: 4px;
}

.quote-status-badge {
   font-size: 0.72rem;
   font-weight: 700;
   padding: 2px 8px;
   border-radius: 9999px;
   display: inline-flex;
   align-items: center;
   gap: 4px;
   text-transform: capitalize;
}

.quote-status-draft { background: #F1F5F9; color: #475569; border: 1px solid #CBD5E1; }
.quote-status-sent { background: #DBEAFE; color: #1D4ED8; border: 1px solid #93C5FD; }
.quote-status-viewed { background: #EDE9FE; color: #6D28D9; border: 1px solid #DDD6FE; }
.quote-status-accepted { background: #D1FAE5; color: #047857; border: 1px solid #6EE7B7; }
.quote-status-declined { background: #FEE2E2; color: #B91C1C; border: 1px solid #FCA5A5; }
.quote-status-expired { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.quote-status-converted { background: #CCFBF1; color: #0F766E; border: 1px solid #5EEAD4; }

.quote-action-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 4px;
   font-size: 0.78rem;
   font-weight: 700;
   padding: 5px 9px;
   border-radius: 6px;
   border: 1px solid #CBD5E1;
   background: #F8FAFC;
   color: #334155;
   cursor: pointer;
   transition: all 0.15s ease;
   text-decoration: none;
   white-space: nowrap;
}

.quote-action-btn:hover {
   background: #F1F5F9;
   border-color: #94A3B8;
}

.quote-action-btn.btn-primary-action {
   background: #EFF6FF;
   color: #1D4ED8;
   border-color: #BFDBFE;
}
.quote-action-btn.btn-primary-action:hover {
   background: #DBEAFE;
}

.quote-action-btn.btn-success-action {
   background: #ECFDF5;
   color: #047857;
   border-color: #A7F3D0;
}
.quote-action-btn.btn-success-action:hover {
   background: #D1FAE5;
}

.quote-action-btn.btn-wa-action {
   background: #DCFCE7;
   color: #15803D;
   border-color: #86EFAC;
}
.quote-action-btn.btn-wa-action:hover {
   background: #BBF7D0;
}

.quote-action-btn.btn-square-action {
   background: #006AFF;
   color: #FFFFFF;
   border-color: #0056D2;
}
.quote-action-btn.btn-square-action:hover {
   background: #0056D2;
}

/* ===================== Simplified Quotations List + Drawer (2026) ===================== */
.qrow {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   background: #FFFFFF;
   border: 1px solid var(--color-border);
   border-radius: 10px;
   padding: 0.75rem 0.9rem;
   cursor: pointer;
   transition: border-color 0.15s, box-shadow 0.15s;
}
.qrow:hover {
   border-color: #94A3B8;
   box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
.qrow-main { min-width: 0; flex: 1; }
.qrow-top { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; flex-wrap: wrap; }
.qrow-num { font-weight: 800; color: #1E293B; font-size: 0.92rem; }
.qrow-cust {
   font-size: 0.83rem; color: #334155; font-weight: 600;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qrow-sub {
   font-size: 0.75rem; color: #64748B;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qrow-side { text-align: right; flex-shrink: 0; }
.qrow-total { font-weight: 800; font-size: 0.95rem; color: #1E293B; }
.qrow-date { font-size: 0.7rem; color: #94A3B8; margin-top: 2px; }

.qdrawer-overlay {
   position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 99999;
   display: flex; justify-content: flex-end;
}
.qdrawer-panel {
   background: #FFFFFF; width: 100%; max-width: 460px; height: 100%;
   box-shadow: -8px 0 30px rgba(15, 23, 42, 0.15);
   display: flex; flex-direction: column;
   animation: qdrawerSlideIn 0.22s ease;
}
@keyframes qdrawerSlideIn {
   from { transform: translateX(24px); opacity: 0.6; }
   to { transform: translateX(0); opacity: 1; }
}
.qdrawer-head {
   padding: 1.1rem 1.25rem 0.9rem; border-bottom: 1px solid var(--color-border);
   display: flex; align-items: flex-start; gap: 12px; flex-shrink: 0;
}
.qdrawer-avatar {
   width: 38px; height: 38px; border-radius: 50%; background: #EFF6FF; color: #2563EB;
   display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.85rem; flex-shrink: 0;
}
.qdrawer-close {
   width: 30px; height: 30px; border-radius: 50%; border: none; background: #F1F5F9;
   color: #64748B; cursor: pointer; font-size: 15px; flex-shrink: 0;
}
.qdrawer-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; }
.qdrawer-footer {
   padding: 0.9rem 1.25rem 1.1rem; border-top: 1px solid var(--color-border);
   flex-shrink: 0; display: flex; flex-direction: column; gap: 8px;
}
.qdrawer-more {
   display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0.7rem 0 0.2rem;
   border-top: 1px dashed var(--color-border); margin-top: 0.5rem;
}
.qdrawer-textlink {
   background: none; border: none; padding: 2px 0; font-size: 0.78rem; font-weight: 700;
   color: #64748B; cursor: pointer;
}
.qdrawer-textlink:hover { color: #2563EB; }
.qdrawer-textlink.danger:hover { color: #DC2626; }

.btn-primary-full {
   width: 100%; background: var(--color-primary, #0A2240); color: #FFFFFF; border: none;
   padding: 0.75rem 1rem; border-radius: 10px; font-size: 0.9rem; font-weight: 700; cursor: pointer;
}
.btn-primary-full:hover { opacity: 0.92; }
.btn-secondary-full {
   width: 100%; background: #FFFFFF; color: #1E293B; border: 1.5px solid var(--color-border);
   padding: 0.65rem 1rem; border-radius: 10px; font-size: 0.85rem; font-weight: 700; cursor: pointer;
}
.btn-secondary-full:hover { border-color: #94A3B8; }

@media (max-width: 560px) {
   .qdrawer-panel { max-width: 100%; }
}

/* Billing Mode Selector Segmented Control */
.billing-mode-selector {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8px;
   background: #F1F5F9;
   padding: 4px;
   border-radius: 10px;
}

.billing-mode-option {
   cursor: pointer;
   padding: 8px 12px;
   border-radius: 8px;
   text-align: center;
   font-size: 0.82rem;
   font-weight: 700;
   color: #64748B;
   transition: all 0.2s ease;
   border: 1px solid transparent;
   user-select: none;
}

.billing-mode-option.active.mode-tax {
   background: #FFFFFF;
   color: #1D4ED8;
   border-color: #BFDBFE;
   box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

.billing-mode-option.active.mode-cash {
   background: #FFFFFF;
   color: #047857;
   border-color: #A7F3D0;
   box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

/* Timeline component */
.quote-timeline {
   position: relative;
   padding-left: 24px;
}

.quote-timeline::before {
   content: '';
   position: absolute;
   left: 7px;
   top: 6px;
   bottom: 6px;
   width: 2px;
   background: #E2E8F0;
}

.quote-timeline-item {
   position: relative;
   margin-bottom: 16px;
}

.quote-timeline-item:last-child {
   margin-bottom: 0;
}

.quote-timeline-dot {
   position: absolute;
   left: -24px;
   top: 2px;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background: #3B82F6;
   border: 2px solid #FFFFFF;
   box-shadow: 0 0 0 2px #BFDBFE;
}

/* ============================================================= */
/* OPENSTREETMAP (OSM) AUTOCOMPLETE STYLING */
/* ============================================================= */
.osm-autocomplete-dropdown {
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   background: #FFFFFF;
   border: 1px solid #CBD5E1;
   border-radius: 8px;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
   z-index: 99999;
   max-height: 220px;
   overflow-y: auto;
   margin-top: 4px;
}

.osm-suggestion-item {
   padding: 8px 12px;
   cursor: pointer;
   border-bottom: 1px solid #F1F5F9;
   font-size: 0.83rem;
   transition: background 0.15s ease;
}

.osm-suggestion-item:last-child {
   border-bottom: none;
}

.osm-suggestion-item:hover {
   background: #EFF6FF !important;
}

/* ============================================================= */
/* JOBS 4-IN-1 VIEW SWITCHER & TABLE LIST */
/* ============================================================= */
.jobs-view-switcher {
   display: inline-flex;
   background: #F1F5F9;
   border-radius: 10px;
   padding: 3px;
   gap: 2px;
   border: 1px solid #E2E8F0;
}

.jobs-view-btn {
   border: none;
   background: transparent;
   padding: 5px 12px;
   border-radius: 7px;
   font-size: 0.78rem;
   font-weight: 700;
   color: #475569;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   transition: all 0.15s ease;
}

.jobs-view-btn:hover {
   color: #1E293B;
}

.jobs-view-btn.active {
   background: #FFFFFF;
   color: #2563EB;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.jobs-table-container {
   background: #FFFFFF;
   border: 1px solid #E2E8F0;
   border-radius: 12px;
   overflow-x: auto;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.jobs-data-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 0.82rem;
   text-align: left;
}

.jobs-data-table th {
   background: #F8FAFC;
   color: #475569;
   font-weight: 700;
   text-transform: uppercase;
   font-size: 0.7rem;
   letter-spacing: 0.04em;
   padding: 0.75rem 0.85rem;
   border-bottom: 2px solid #E2E8F0;
   white-space: nowrap;
}

.jobs-data-table td {
   padding: 0.75rem 0.85rem;
   border-bottom: 1px solid #F1F5F9;
   color: #1E293B;
   vertical-align: middle;
}

.jobs-data-table tr:hover td {
   background: #F8FAFC;
}

/* ============================================================= */
/* REQUESTS MODULE & CLIENT 360 CRM STYLING */
/* ============================================================= */
.request-card-modern {
   background: #FFFFFF;
   border: 1px solid #E2E8F0;
   border-radius: 12px;
   padding: 1rem 1.25rem;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
   transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.request-card-modern:hover {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.client-card-modern {
   background: #FFFFFF;
   border: 1px solid #E2E8F0;
   border-radius: 12px;
   padding: 1rem 1.15rem;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
   transition: all 0.15s ease;
}

.client-card-modern:hover {
   border-color: #CBD5E1;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
/* ==========================================================
   SERVICE-AREA SUBURB PICKER
   Suggestions come only from suburbs we service; anything else
   gets a friendly WhatsApp prompt instead of a dead end.
   ========================================================== */

/* Green tick on each suggestion — a quiet reassurance that the suburb is
   covered, which is the whole point of restricting the list. */
.suggestion-item .suburb-tick {
   display: inline-block;
   margin-right: 8px;
   color: #059669;
   font-weight: 800;
}

.suggestion-empty {
   padding: 12px 14px;
   font-size: 0.85rem;
   color: #64748B;
   font-style: italic;
}

/* The field itself flags the problem, so the message below isn't the only
   signal that something needs attention. */
.form-control.out-of-area {
   border-color: #F59E0B;
   background: #FFFBEB;
}

/* Deliberately warm rather than red: this isn't the customer's mistake and
   it isn't a refusal — it's an invitation to talk to us. */
.suburb-notice {
   margin-top: 8px;
   padding: 12px 14px;
   background: #FFFBEB;
   border: 1px solid #FDE68A;
   border-left: 3px solid #F59E0B;
   border-radius: 10px;
   font-size: 0.84rem;
   line-height: 1.45;
}

.suburb-notice-title {
   color: #92400E;
   font-weight: 700;
   margin-bottom: 3px;
}

.suburb-notice-body {
   color: #78350F;
   margin-bottom: 10px;
}

.suburb-notice-wa {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 9px 15px;
   background: #25D366;
   color: #FFFFFF;
   border-radius: 8px;
   font-weight: 700;
   font-size: 0.82rem;
   text-decoration: none;
   transition: filter 0.15s ease;
}

.suburb-notice-wa:hover {
   filter: brightness(0.94);
   color: #FFFFFF;
}

/* ==========================================================
   QUOTE MODAL — SEND BUTTONS & THANK YOU
   ========================================================== */

.qm-send { margin-bottom: 0.95rem; }

.qm-send-label {
   margin: 0 0 0.45rem;
   font-weight: 600;
   font-size: 0.82rem;
   color: #1E293B;
}

.qm-send-row {
   display: flex;
   gap: 8px;
}

/* Two equal buttons, because neither is the fallback — the customer picks the
   app they actually use, and the one they press decides how we reply. */
.qm-send-btn {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 0.7rem 0.6rem;
   border: none;
   border-radius: 10px;
   color: #FFFFFF;
   cursor: pointer;
   text-align: left;
   transition: filter 0.15s ease, transform 0.08s ease;
}

.qm-send-btn.wa { background: #25D366; }
.qm-send-btn.sms { background: #2563EB; }
.qm-send-btn:hover { filter: brightness(0.94); }
.qm-send-btn:active { transform: translateY(1px); }
.qm-send-btn:disabled { opacity: 0.6; cursor: default; filter: grayscale(0.3); }

.qm-send-ic { font-size: 1.1rem; line-height: 1; flex-shrink: 0; }

.qm-send-text { display: flex; flex-direction: column; line-height: 1.2; }
.qm-send-text strong { font-size: 0.9rem; font-weight: 800; }
.qm-send-text small { font-size: 0.68rem; opacity: 0.85; }

.qm-send-foot {
   margin: 0.45rem 0 0;
   font-size: 0.72rem;
   color: #64748B;
   text-align: center;
}

@media (max-width: 360px) {
   .qm-send-row { flex-direction: column; }
}

/* --- thank you --- */

.qm-thanks {
   text-align: center;
   padding: 0.5rem 0.25rem;
}

.qm-thanks-tick {
   width: 52px;
   height: 52px;
   margin: 0 auto 0.75rem;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: #DCFCE7;
   color: #16A34A;
   font-size: 1.6rem;
   font-weight: 800;
}

.qm-thanks-title {
   margin: 0 0 0.35rem;
   font-size: 1.15rem;
   font-weight: 800;
   color: #0F172A;
}

.qm-thanks-ref {
   margin: 0 0 1rem;
   font-size: 0.78rem;
   color: #64748B;
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.qm-thanks-ref strong {
   font-size: 1.05rem;
   font-weight: 800;
   color: #F97316;
   letter-spacing: 0.02em;
}

.qm-thanks-promise {
   padding: 0.7rem 0.85rem;
   margin-bottom: 0.9rem;
   background: #F8FAFC;
   border: 1px solid #E2E8F0;
   border-radius: 10px;
}

.qm-thanks-promise p {
   margin: 0;
   font-size: 0.86rem;
   color: #1E293B;
}

.qm-thanks-avg {
   margin-top: 3px !important;
   font-size: 0.78rem !important;
   color: #16A34A !important;
}

.qm-thanks-note {
   margin: 0 0 0.7rem;
   font-size: 0.78rem;
   line-height: 1.55;
   color: #64748B;
}

.qm-thanks-actions {
   display: flex;
   gap: 8px;
   margin-bottom: 0.85rem;
}

.qm-thanks-btn {
   flex: 1;
   padding: 0.6rem 0.5rem;
   border-radius: 9px;
   font-size: 0.82rem;
   font-weight: 700;
   text-decoration: none;
   color: #FFFFFF;
}

.qm-thanks-btn.wa { background: #25D366; }
.qm-thanks-btn.sms { background: #2563EB; }
.qm-thanks-btn:hover { filter: brightness(0.94); color: #FFFFFF; }

.qm-thanks-close {
   background: none;
   border: none;
   padding: 4px;
   font-size: 0.8rem;
   font-weight: 600;
   color: #64748B;
   text-decoration: underline;
   cursor: pointer;
}

@media (max-width: 420px) {
   .qm-thanks-actions { flex-direction: column; }
}