section.bg-muted:first-of-type {
  height: 4cm !important;
  min-height: 4cm !important;
  max-height: 4cm !important;
  padding: 0.5rem 1.5rem !important;
  overflow: hidden !important;
  position: relative !important;
}

section.bg-muted:first-of-type h1,
section.bg-muted:first-of-type p,
section.bg-muted:first-of-type button,
section.bg-muted:first-of-type a[class*="button"],
section.bg-muted:first-of-type [class*="italic"],
section.bg-muted:first-of-type img {
  display: none !important;
}

section.bg-muted:first-of-type > div {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 1.5rem !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

section.bg-muted:first-of-type > div > div {
  display: none !important;
}

section.bg-muted:first-of-type::before {
  content: 'Inteligentná cenová ponuka elektrickej prípojky' !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  font-style: normal !important;
  letter-spacing: -0.025em !important;
  color: #2E3338 !important;
  padding: 0 1rem !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  font-family: inherit !important;
  text-align: center !important;
}

.dark section.bg-muted:first-of-type::before,
[data-theme="dark"] section.bg-muted:first-of-type::before,
html.dark section.bg-muted:first-of-type::before {
  color: #FFFFFF !important;
}

@media (prefers-color-scheme: dark) {
  section.bg-muted:first-of-type::before {
    color: #FFFFFF !important;
  }
}

html:not(.dark) section.bg-muted:first-of-type::before,
html:not([data-theme="dark"]) section.bg-muted:first-of-type::before {
  color: #2E3338 !important;
}

@media (max-width: 1200px) {
  section.bg-muted:first-of-type::before {
    font-size: 1.9rem !important;
  }
}

@media (min-width: 1201px) {
  section.bg-muted:first-of-type::before {
    font-size: 2.5rem !important;
  }
}

section.bg-card:first-of-type > div > h2:first-of-type,
section.bg-card:first-of-type > div > p:first-of-type,
section[class*="pt-12"][class*="pb-8"] > div > h2,
section[class*="pt-12"][class*="pb-8"] > div > p,
section.bg-muted + section > div > h2,
section.bg-muted + section > div > p {
  display: none !important;
}

section.bg-muted + section {
  padding-top: 0.5rem !important;
  margin-top: 0 !important;
}

#intro-text {
  margin-top: 0 !important;
}

input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  flex-shrink: 0 !important;
  border: 1px solid #D1D5DB;
  border-radius: 50% !important;
  background: white;
  cursor: pointer;
  position: relative;
}

input[type="radio"]:checked {
  border: 1px solid #D1D5DB;
}

input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: #F97316;
  border-radius: 50%;
}

/* ===== MOBILE RESPONSIVE STYLES ===== */

/* Mobile base - up to 768px */
@media (max-width: 1200px) {
  /* Hero section smaller on mobile */
  section.bg-muted:first-of-type {
    height: 3cm !important;
    min-height: 3cm !important;
    max-height: 3cm !important;
  }
  
  section.bg-muted:first-of-type::before {
    content: 'Inteligentná cenová ponuka\A elektrickej prípojky' !important;
    white-space: pre-wrap !important;
    font-size: 1.3rem !important;
    padding: 0 0.5rem !important;
    line-height: 1.3 !important;
  }
  
  #beta-text {
    margin-top: -55px !important;
  }
  
  /* Cards container - minimal padding for wider cards */
  #custom-hero-content {
    padding: 0 4px !important;
  }
  
  /* All cards inside custom-hero-content - wider with less margin */
  #custom-hero-content > div,
  #location-card,
  #building-info-card,
  #connection-info-card,
  #cable-routing-card,
  #contact-info-card,
  #cenova-ponuka-card,
  #material-list-card {
    padding: 10px !important;
    margin-bottom: 8px !important;
    margin-top: 8px !important;
    margin-left: 2px !important;
    margin-right: 2px !important;
    width: calc(100% - 4px) !important;
    max-width: calc(100vw - 12px) !important;
    box-sizing: border-box !important;
  }
  
  /* Card inner padding container - less padding */
  #custom-hero-content > div > div,
  #location-card > div,
  #building-info-card > div,
  #connection-info-card > div,
  #cable-routing-card > div,
  #contact-info-card > div {
    padding: 5px 8px !important;
  }
  
  /* Location card specific - fix overflow */
  #location-card,
  #location-card > div {
    overflow: hidden !important;
  }
  
  /* Location selects in row - stack them */
  #location-card > div > div {
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  #location-card > div > div > div {
    width: 100% !important;
    min-width: 0 !important;
  }
  
  /* ===== SPECIFIC FIXES FOR ISSUES ===== */
  
  /* Fix 1: Prevent all cards from overflow */
  #custom-hero-content,
  #custom-hero-content > div,
  #connection-info-card,
  #cable-routing-card {
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
  
  /* Fix 2: Radio buttons - force perfect circles */
  input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
  }
  
  /* Fix 3: Miesto pripojenia - show full text */
  #connection-info-card div[style*="gap: 25px"] {
    flex-direction: column !important;
    gap: 10px !important;
    margin-left: 0 !important;
  }
  
  #connection-info-card label span {
    white-space: normal !important;
    word-break: break-word !important;
  }
  
  /* Fix 4: Dĺžka trasy - Info inline with text, input with m on same row */
  #connection-info-card > div > div > div:has(#dlzka-trasy-input) {
    flex-wrap: wrap !important;
  }
  
  #dlzka-trasy-input {
    margin-left: 0 !important;
    margin-top: 8px !important;
  }
  
  /* Fix 5: Spôsob ukončenia - stack vertically */
  #connection-info-card div[style*="margin-left: 250px"] {
    margin-left: 0 !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  /* Fix 6: Typ prívodného kábla sections */
  #typ-kabla-dom-section div[style*="margin-left: 168px"] select,
  #cable-routing-card select {
    margin-left: 0 !important;
    margin-top: 8px !important;
  }
  
  /* Fix 7: Dĺžka trasy kábla od elektromerového rozvádzača */
  #dlzka-trasy-dom-section div[style*="margin-left: 350px"] {
    margin-left: 0 !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  
  /* Card titles */
  #custom-hero-content h3,
  #location-card h3,
  #building-info-card h3,
  #connection-info-card h3,
  #cable-routing-card h3,
  #contact-info-card h3,
  #cenova-ponuka-card h3,
  #material-list-card h3 {
    font-size: 1rem !important;
    margin-bottom: 10px !important;
    line-height: 1.4 !important;
  }
  
  /* Hide subtitle on mobile */
  #custom-hero-content h3 span,
  #connection-info-card h3 span {
    display: none !important;
  }
  
  /* Form rows - make them stack vertically */
  #custom-hero-content > div > div > div,
  #location-card > div > div > div,
  #building-info-card > div > div > div,
  #connection-info-card > div > div > div,
  #cable-routing-card > div > div > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
  }
  
  /* Labels/Spans with fixed width - override */
  #custom-hero-content span[style*="width: 180px"],
  #custom-hero-content span[style*="width: 280px"],
  #custom-hero-content span[style*="width: 300px"],
  #connection-info-card span[style*="width"],
  #building-info-card span[style*="width"],
  #cable-routing-card span[style*="width"] {
    width: 100% !important;
    min-width: auto !important;
    font-size: 0.9rem !important;
    margin-bottom: 4px !important;
  }
  
  /* Radio button labels with fixed widths */
  #custom-hero-content label[style*="width: 420px"],
  #custom-hero-content label[style*="width: 300px"],
  #connection-info-card label[style*="width"],
  #building-info-card label[style*="width"] {
    width: 100% !important;
    font-size: 0.85rem !important;
  }
  
  /* All labels in cards */
  #custom-hero-content label,
  #location-card label,
  #building-info-card label,
  #connection-info-card label,
  #cable-routing-card label,
  #contact-info-card label {
    font-size: 0.85rem !important;
    padding: 6px 0 !important;
    width: 100% !important;
  }
  
  /* Radio group divs with margin-left */
  #custom-hero-content div[style*="margin-left"],
  #connection-info-card div[style*="margin-left"],
  #cable-routing-card div[style*="margin-left"] {
    margin-left: 0 !important;
    width: 100% !important;
  }
  
  /* Select dropdowns - fix overflow */
  #custom-hero-content select,
  #location-card select,
  #connection-info-card select,
  #cable-routing-card select,
  select {
    width: 100% !important;
    max-width: calc(100vw - 50px) !important;
    min-width: unset !important;
    font-size: 0.85rem !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 8px !important;
  }
  
  /* Input fields */
  #custom-hero-content input[type="text"],
  #custom-hero-content input[type="email"],
  #custom-hero-content input[type="tel"],
  #custom-hero-content input[type="number"],
  #contact-info-card input,
  #cable-routing-card input[type="number"] {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 0.9rem !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
  }
  
  /* Input with fixed width override */
  #custom-hero-content input[style*="width: 80px"],
  #cable-routing-card input[style*="width"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Hlavny istic row - wrap radios */
  #connection-info-card div:has(input[name="hlavny-istic"]) {
    flex-wrap: wrap !important;
  }
  
  /* Price quote card */
  #cenova-ponuka-card {
    padding: 12px !important;
  }
  
  #cenova-ponuka-card h3 {
    font-size: 1rem !important;
  }
  
  /* Price rows container */
  #price-rows-container {
    gap: 6px !important;
  }
  
  /* Price rows */
  #price-rows-container > div {
    padding: 6px 0 !important;
  }
  
  #price-rows-container span {
    font-size: 0.8rem !important;
  }
  
  #price-rows-container span:first-child {
    flex: 1 !important;
    min-width: 0 !important;
  }
  
  #price-rows-container span:last-child {
    white-space: nowrap !important;
  }
  
  /* Total price row */
  #celkova-cena {
    font-size: 1.2rem !important;
  }
  
  /* Material card */
  #material-list-card {
    padding: 12px !important;
  }
  
  #material-list-card h3 {
    font-size: 1rem !important;
  }
  
  /* Material list grid - single column on mobile */
  #material-list-container > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  
  #material-list-container span {
    font-size: 0.8rem !important;
    padding: 3px 0 !important;
    text-align: left !important;
  }
  
  /* Hide header row */
  #material-list-container > div > span:nth-child(-n+3) {
    display: none !important;
  }
  
  /* Material item name */
  #material-list-container > div > span:nth-child(3n+4) {
    font-weight: 600 !important;
    padding-top: 10px !important;
    border-top: 1px solid #E5E7EB !important;
    margin-top: 6px !important;
    color: #2E3338 !important;
  }
  
  /* Material qty and price */
  #material-list-container > div > span:nth-child(3n+5),
  #material-list-container > div > span:nth-child(3n+6) {
    padding-left: 8px !important;
    color: #4B5563 !important;
  }
  
  /* First item no border */
  #material-list-container > div > span:nth-child(4) {
    border-top: none !important;
    margin-top: 0 !important;
  }
  
  /* Button */
  #btn-vypocitat {
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 0.95rem !important;
  }
  
  /* Intro text */
  #intro-text {
    font-size: 0.95rem !important;
    padding: 0 8px !important;
  }
  
  /* Orange divider lines */
  #custom-hero-content div[style*="height: 2px"][style*="background-color: #F97316"],
  div[style*="height: 2px"][style*="background-color: #F97316"] {
    margin: 10px 0 !important;
  }
  
  /* Contact info inputs */
  #contact-info-card > div > div {
    flex-direction: column !important;
    gap: 12px !important;
  }
  
  /* Info buttons - keep compact */
  #tarif-info-btn,
  #vypinac-info-btn,
  #kabel-info-btn,
  #dlzka-info-btn,
  span[id$="-info-btn"] {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }
  
  /* Fix long text labels wrapping */
  #connection-info-card span[style*="white-space: nowrap"],
  #cable-routing-card span[style*="white-space: nowrap"] {
    white-space: normal !important;
    word-wrap: break-word !important;
  }
  
  /* Card overflow prevention */
  #custom-hero-content > div,
  #location-card,
  #building-info-card,
  #connection-info-card,
  #cable-routing-card,
  #contact-info-card {
    overflow-x: hidden !important;
  }
  
  /* Hlavny vypinac value positioning */
  #hlavny-vypinac-value {
    margin-left: 10px !important;
  }
  
  /* Location card mobile - match other cards */
  #location-card {
    margin: 8px 0 !important;
  }
  
  #location-card #location-form {
    padding: 15px 10px 10px 10px !important;
  }
  
  /* More padding at top of cards */
  #building-info-card > div,
  #connection-info-card > div,
  #contact-info-card > div,
  #price-quote-card > div,
  #material-list-card > div {
    padding-top: 15px !important;
  }
  
  #location-card #location-fields-container {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }
  
  #location-card .location-field-wrapper label {
    margin-bottom: 2px !important;
    padding: 0 !important;
  }
  
  #location-card select {
    margin-top: 0 !important;
  }
  
  /* Center footer on mobile */
  footer,
  footer > div {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
  }
  
  footer > div > div {
    justify-content: center !important;
    width: 100% !important;
  }
  
  footer img {
    margin: 0 auto !important;
  }
  
  /* KONTAKT SECTION - Force center on mobile */
  #kontakt article,
  #kontakt .grid article,
  #kontakt .grid > article {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  
  #kontakt article *,
  #kontakt .grid article * {
    text-align: center !important;
  }
  
  /* Override Tailwind items-start and text-left */
  #kontakt article [class*="items-start"],
  #kontakt article [class*="text-left"],
  #kontakt article [class*="justify-start"] {
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
  }
  
  #kontakt article img {
    margin: 0 auto !important;
    display: block !important;
  }
  
  #kontakt article dl,
  #kontakt article dt,
  #kontakt article dd {
    text-align: center !important;
    width: 100% !important;
  }
  
  /* Center WhatsApp and all buttons */
  #kontakt article a,
  #kontakt article button {
    margin: 0 auto !important;
    display: block !important;
    width: fit-content !important;
  }
  
  /* Form inputs stay left-aligned */
  #kontakt article form {
    width: 100% !important;
  }
  
  #kontakt-DISABLED article form label,
  #kontakt-DISABLED article form input,
  #kontakt-DISABLED article form textarea {
    text-align: left !important;
  }
  
  #location-card .location-field-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: none !important;
  }
  
  #location-card select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Tablet - 641px to 1024px */
@media (min-width: 641px) and (max-width: 1024px) {
  #custom-hero-content {
    padding: 0 20px !important;
  }
  
  #custom-hero-content > div {
    padding: 20px !important;
  }
  
  /* Two column layout for some form rows */
  #custom-hero-content .form-row {
    flex-wrap: wrap !important;
  }
  
  #custom-hero-content select {
    min-width: 200px !important;
  }
}

/* ===== DARK MODE STYLES ===== */
/* Color palette from design:
   Background: #1B1E21
   Card: #252A2F
   Sidebar: #2A2F35
   Muted: #31373D
   Border: #363C42
   Card border: #31373D
   Text foreground: #DDE0E3
   Card text: #E3E5E8
   Muted text: #9BA2AA
   Primary text: #FFFFFF
   Accent/Primary (orange): #FF9F4D
   Destructive (red): #CD3232
   Input: #4D5869
   Ring focus: #4D8AE6
*/

/* Dark mode - Body and main backgrounds */
html.dark body,
html.dark #root {
  background-color: #1B1E21 !important;
  color: #DDE0E3 !important;
}

html.dark main {
  background-color: #1B1E21 !important;
}

/* Dark mode - Header/Nav */
html.dark header,
html.dark nav {
  background-color: #252A2F !important;
  border-color: #363C42 !important;
}

html.dark header a,
html.dark nav a,
html.dark header button,
html.dark nav button {
  color: #DDE0E3 !important;
}

html.dark header a:hover,
html.dark nav a:hover {
  color: #FF9F4D !important;
}

/* Dark mode - Hero section */
html.dark section.bg-muted:first-of-type {
  background-color: #2A2F35 !important;
}

html.dark section.bg-muted:first-of-type::before {
  color: #FFFFFF !important;
}

/* Dark mode - Sections */
html.dark section {
  background-color: #1B1E21 !important;
}

html.dark section.bg-muted {
  background-color: #2A2F35 !important;
}

html.dark section.bg-card {
  background-color: #1B1E21 !important;
}

/* Dark mode - Calculator cards */
html.dark #location-card,
html.dark #building-info-card,
html.dark #connection-info-card,
html.dark #cable-routing-card,
html.dark #contact-info-card,
html.dark #cenova-ponuka-card,
html.dark #material-list-card,
html.dark div[class*="rounded"][class*="border"] {
  background-color: #252A2F !important;
  border-color: #FF9F4D !important;
}

/* Dark mode - All white bg cards */
html.dark div[style*="background: white"],
html.dark div[style*="background-color: white"],
html.dark div[style*="background: rgb(255, 255, 255)"],
html.dark div[style*="background-color: rgb(255, 255, 255)"] {
  background-color: #252A2F !important;
}

/* Dark mode - PDF buttons */
html.dark button[style*="background: white"],
html.dark button[style*="background-color: white"],
html.dark button[style*="background: transparent"] {
  background-color: #4D5869 !important;
  border-color: #363C42 !important;
  color: #E3E5E8 !important;
}

/* Red asterisks - force red color */
.red-asterisk {
  color: #DC2626 !important;
}

/* Dark mode - Price quote card specific */
html.dark #price-quote-card {
  background-color: #252A2F !important;
  border-color: #FF9F4D !important;
}

html.dark #price-quote-card h3 {
  color: #FFFFFF !important;
}

html.dark #price-quote-card span {
  color: #E3E5E8 !important;
}

html.dark #price-quote-card #celkova-cena {
  color: #FF9F4D !important;
}

html.dark #btn-vzor-pdf,
html.dark #btn-rozpis-pdf {
  background-color: transparent !important;
  border-color: #363C42 !important;
  color: #9BA2AA !important;
}

html.dark #btn-vzor-pdf:hover,
html.dark #btn-rozpis-pdf:hover {
  border-color: #FF9F4D !important;
  color: #FF9F4D !important;
}

html.dark #btn-reset-kalkulacka {
  background-color: #4D5869 !important;
}

/* Dark mode - Card headings */
html.dark .card-heading,
html.dark #location-card h3,
html.dark #building-info-card h3,
html.dark #connection-info-card h3,
html.dark #cable-routing-card h3,
html.dark #contact-info-card h3,
html.dark #cenova-ponuka-card h3,
html.dark #material-list-card h3 {
  color: #FFFFFF !important;
}

/* Dark mode - Text colors */
html.dark #intro-text,
html.dark #beta-text,
html.dark #version-text,
html.dark #mobile-hint {
  color: #DDE0E3 !important;
}

html.dark label,
html.dark span {
  color: #E3E5E8 !important;
}

html.dark #location-card label,
html.dark #building-info-card label,
html.dark #connection-info-card label,
html.dark #cable-routing-card label,
html.dark #contact-info-card label,
html.dark #location-card span,
html.dark #building-info-card span,
html.dark #connection-info-card span,
html.dark #cable-routing-card span,
html.dark #contact-info-card span {
  color: #E3E5E8 !important;
}

/* Dark mode - Inputs and selects */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="tel"],
html.dark input[type="number"],
html.dark select,
html.dark textarea {
  background-color: #4D5869 !important;
  border-color: #363C42 !important;
  color: #FFFFFF !important;
}

html.dark input[type="text"]::placeholder,
html.dark input[type="email"]::placeholder,
html.dark input[type="tel"]::placeholder,
html.dark textarea::placeholder {
  color: #9BA2AA !important;
}

html.dark select option {
  background-color: #4D5869 !important;
  color: #FFFFFF !important;
}

/* Dark mode - Radio buttons */
html.dark input[type="radio"] {
  background-color: #4D5869 !important;
  border-color: #363C42 !important;
}

html.dark input[type="radio"]:checked::after {
  background-color: #FF9F4D !important;
}

/* Dark mode - Divider lines */
html.dark div[style*="background-color: #D1D5DB"],
html.dark div[style*="background-color: rgb(209, 213, 219)"] {
  background-color: #31373D !important;
}

/* Dark mode - Price rows */
html.dark #price-rows-container span {
  color: #E3E5E8 !important;
}

html.dark #celkova-cena {
  color: #FFFFFF !important;
}

/* Dark mode - Material list */
html.dark #material-list-container span {
  color: #E3E5E8 !important;
}

/* Dark mode - Info buttons */
html.dark span[id$="-info-btn"] {
  border-color: #FF9F4D !important;
  color: #FF9F4D !important;
  background-color: transparent !important;
}

/* Dark mode - Footer */
html.dark footer {
  background-color: #252A2F !important;
  border-color: #363C42 !important;
}

html.dark footer * {
  color: #9BA2AA !important;
}

html.dark footer a:hover {
  color: #FF9F4D !important;
}

/* Dark mode - Kontakt section */
html.dark #kontakt {
  background-color: #1B1E21 !important;
}

html.dark #kontakt article {
  background-color: #252A2F !important;
  border-color: #31373D !important;
}

html.dark #kontakt h2,
html.dark #kontakt h3,
html.dark #kontakt p,
html.dark #kontakt span,
html.dark #kontakt dt,
html.dark #kontakt dd {
  color: #DDE0E3 !important;
}

/* Dark mode - Modal/Dialog */
html.dark .modal-content,
html.dark [role="dialog"] {
  background-color: #252A2F !important;
  border-color: #31373D !important;
}

html.dark .modal-content *,
html.dark [role="dialog"] * {
  color: #DDE0E3 !important;
}

/* Dark mode - Subcontractor section */
html.dark #subdodavatel-section h3 {
  color: #FFFFFF !important;
}

html.dark #subdodavatel-section span {
  color: #E3E5E8 !important;
}

/* Dark mode - Focus ring */
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  outline-color: #4D8AE6 !important;
  border-color: #4D8AE6 !important;
}

/* Dark mode - Scrollbar */
html.dark ::-webkit-scrollbar {
  width: 10px;
}

html.dark ::-webkit-scrollbar-track {
  background: #1B1E21;
}

html.dark ::-webkit-scrollbar-thumb {
  background: #363C42;
  border-radius: 5px;
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background: #4D5869;
}

/* Dark mode transition */
body, main, section, header, footer, nav,
#location-card, #building-info-card, #connection-info-card,
#cable-routing-card, #contact-info-card, #cenova-ponuka-card,
#material-list-card, input, select, textarea {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}