/* Custom styles and enhancements for Akemsan Machinery Website - Corporate Blue Theme */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --primary: #0284c7;
  --primary-hover: #0369a1;
  --primary-glow: rgba(2, 132, 199, 0.3);
  --accent-cyan: #38bdf8;
  --accent-royal: #2563eb;
  --dark-bg: #070d18;
  --dark-card: #0f192d;
  --dark-card-hover: #162442;
  --dark-border: #1e3156;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: #070d18;
  color: #e2e8f0;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

h1, h2, h3, h4, .font-heading {
  font-family: 'Space Grotesk', sans-serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #070d18;
}
::-webkit-scrollbar-thumb {
  background: #1e3156;
  border-radius: 5px;
  border: 2px solid #070d18;
}
::-webkit-scrollbar-thumb:hover {
  background: #0284c7;
}

/* Grid & Radial Background Effects */
.bg-grid-pattern {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(56, 189, 248, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(56, 189, 248, 0.04) 1px, transparent 1px);
}

.hero-glow-1 {
  position: absolute;
  top: 8%;
  left: 15%;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(2, 132, 199, 0.2) 0%, rgba(7, 13, 24, 0) 70%);
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

.hero-glow-2 {
  position: absolute;
  top: 25%;
  right: 12%;
  width: 650px;
  height: 650px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.18) 0%, rgba(7, 13, 24, 0) 70%);
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}

/* Glassmorphism Classes */
.glass-panel {
  background: rgba(15, 25, 45, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(56, 189, 248, 0.15);
}

.glass-nav {
  background: rgba(7, 13, 24, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(56, 189, 248, 0.12);
}

.glass-card {
  background: rgba(15, 25, 45, 0.65);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(56, 189, 248, 0.1);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
  background: rgba(22, 36, 66, 0.9);
  border-color: rgba(56, 189, 248, 0.5);
  transform: translateY(-4px);
  box-shadow: 0 16px 30px -10px rgba(2, 132, 199, 0.25);
}

/* Pulse Animation for CTA & WhatsApp */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
  }
  50% {
    box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
  }
}

.pulse-play {
  animation: pulseGlow 2.5s infinite;
}

/* Badge styles */
.badge-tech {
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: #38bdf8;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Category Filter Active Indicator */
.filter-btn.active {
  background-color: #0284c7;
  color: #ffffff;
  font-weight: 700;
  border-color: #38bdf8;
  box-shadow: 0 0 18px rgba(2, 132, 199, 0.5);
}

/* Horizontal Video Slider Track with Smooth Mouse Drag & Buttons */
.videos-slider-wrapper {
  position: relative;
  width: 100%;
}

.videos-slider-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 0.25rem 1.25rem 0.25rem;
  scrollbar-width: thin;
  scrollbar-color: #1e3156 rgba(7, 13, 24, 0.5);
  cursor: grab;
}

.videos-slider-track.cursor-grabbing {
  cursor: grabbing !important;
  user-select: none;
}

.videos-slider-track::-webkit-scrollbar {
  height: 6px;
}

.videos-slider-track::-webkit-scrollbar-track {
  background: rgba(15, 25, 45, 0.6);
  border-radius: 9999px;
}

.videos-slider-track::-webkit-scrollbar-thumb {
  background: #1e3156;
  border-radius: 9999px;
  border: 1px solid rgba(56, 189, 248, 0.2);
}

.videos-slider-track::-webkit-scrollbar-thumb:hover {
  background: #ef4444;
}

/* Video Card in Horizontal Track */
.horizontal-video-card {
  width: 360px;
  min-width: 360px;
  max-width: 360px;
  flex-shrink: 0;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid rgba(56, 189, 248, 0.18);
  background: rgba(10, 18, 34, 0.95);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.horizontal-video-card:hover {
  border-color: rgba(239, 68, 68, 0.7);
  transform: translateY(-5px);
  box-shadow: 0 16px 30px -5px rgba(239, 68, 68, 0.25);
}

@media (max-width: 640px) {
  .horizontal-video-card {
    width: 290px;
    min-width: 290px;
    max-width: 290px;
  }
}

/* Toast Notification */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  background: #0f192d;
  border: 1px solid #0284c7;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: slideIn 0.3s ease forwards;
}

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

/* Machine Image Stage / Showcase Background with Studio Illumination (Lighter & High Contrast) */
.machine-img-stage {
  background: 
    radial-gradient(circle at 50% 35%, rgba(56, 189, 248, 0.35) 0%, rgba(30, 58, 95, 0.25) 50%, transparent 75%),
    radial-gradient(ellipse at 50% 65%, #254673 0%, #0e1a2f 85%),
    linear-gradient(180deg, #1f395d 0%, #0a1322 100%);
  border: 1px solid rgba(56, 189, 248, 0.35);
  position: relative;
  box-shadow: inset 0 0 30px rgba(56, 189, 248, 0.18), 0 8px 25px rgba(0, 0, 0, 0.45);
}

.machine-img-stage::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 10%;
  right: 10%;
  height: 20px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 75%);
  filter: blur(6px);
  pointer-events: none;
  z-index: 1;
}

.machine-img-stage img {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.85));
  transition: opacity 0.6s ease-in-out, transform 0.5s ease-out;
}

.machine-img-stage img.fade-out {
  opacity: 0;
  transform: scale(0.96);
}

.machine-img-stage img.fade-in {
  opacity: 1;
  transform: scale(1);
}

.img-switch-pill {
  position: absolute;
  bottom: 10px;
  right: 12px;
  z-index: 20;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 9999px;
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  cursor: pointer;
  transition: all 0.2s ease;
}

.img-switch-pill:hover {
  background: rgba(2, 132, 199, 0.9);
  color: #ffffff;
  border-color: #38bdf8;
}

/* Horizontal Category Slider Styling */
.category-slider-wrapper {
  position: relative;
  width: 100%;
}

.category-slider-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 0.25rem 1.25rem 0.25rem;
  scrollbar-width: thin;
  scrollbar-color: #1e3156 rgba(7, 13, 24, 0.5);
}

.category-slider-track::-webkit-scrollbar {
  height: 6px;
}

.category-slider-track::-webkit-scrollbar-track {
  background: rgba(15, 25, 45, 0.6);
  border-radius: 9999px;
}

.category-slider-track::-webkit-scrollbar-thumb {
  background: #1e3156;
  border-radius: 9999px;
  border: 1px solid rgba(56, 189, 248, 0.2);
}

.category-slider-track::-webkit-scrollbar-thumb:hover {
  background: #0284c7;
}

.category-card {
  width: 360px;
  min-width: 360px;
  max-width: 360px;
  flex-shrink: 0;
  border-radius: 1.25rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: rgba(15, 25, 45, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(56, 189, 248, 0.18);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.category-card:hover {
  background: rgba(20, 34, 62, 0.98);
  border-color: rgba(56, 189, 248, 0.5);
  transform: translateY(-5px);
  box-shadow: 0 16px 30px -10px rgba(2, 132, 199, 0.35);
}

@media (max-width: 640px) {
  .category-card {
    width: 290px;
    min-width: 290px;
    max-width: 290px;
  }
}

.slider-nav-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(15, 25, 45, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: all 0.2s ease;
  cursor: pointer;
}

.slider-nav-btn:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 0 15px rgba(2, 132, 199, 0.4);
  transform: scale(1.05);
}

.slider-nav-btn:active {
  transform: scale(0.95);
}

/* ==========================================================================
   AKEMSAN 3-THEME SYSTEM (Live Corporate Color Comparisons)
   1. theme-navy (Default): Akemsan Kurumsal Canlı Çelik Mavisi (#4f80aa & #152742)
   2. theme-light: Akemsan Açık Showroom (Stüdyo Beyazı & Kurumsal Mavi)
   3. theme-titanium: Akemsan Endüstriyel Çelik & Grafit Antrasit (#20252e & Metalik Gri)
   ========================================================================== */

/* 1. THEME: AKEMSAN KURUMSAL ÇELİK MAVİSİ (Açık, Asil ve Canlı Mavi) */
body.theme-navy {
  background-color: #122137;
  background-image: 
    linear-gradient(to right, rgba(79, 128, 170, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(79, 128, 170, 0.08) 1px, transparent 1px);
  color: #e6f0fa;
}

body.theme-navy header.glass-nav {
  background: rgba(18, 33, 55, 0.94);
  border-bottom: 1px solid rgba(79, 128, 170, 0.35);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.35);
}

body.theme-navy .glass-panel {
  background: rgba(23, 42, 69, 0.82);
  border: 1px solid rgba(79, 128, 170, 0.38);
  box-shadow: 0 12px 30px rgba(8, 17, 30, 0.45);
}

body.theme-navy .glass-card {
  background: rgba(23, 42, 69, 0.75);
  border: 1px solid rgba(79, 128, 170, 0.32);
}

body.theme-navy .glass-card:hover {
  background: rgba(30, 54, 88, 0.95);
  border-color: #4f80aa;
  box-shadow: 0 16px 32px -5px rgba(79, 128, 170, 0.35);
}

body.theme-navy .category-card {
  background: rgba(22, 40, 66, 0.9);
  border-color: rgba(79, 128, 170, 0.35);
}

body.theme-navy .category-card:hover {
  background: rgba(28, 51, 84, 0.98);
  border-color: #5b92bd;
  box-shadow: 0 16px 32px -5px rgba(79, 128, 170, 0.4);
}

body.theme-navy .machine-img-stage {
  background: 
    radial-gradient(circle at 50% 35%, rgba(79, 128, 170, 0.5) 0%, rgba(35, 66, 107, 0.35) 50%, transparent 80%),
    radial-gradient(ellipse at 50% 65%, #2d5182 0%, #152742 85%),
    linear-gradient(180deg, #25446d 0%, #101e33 100%) !important;
  border: 1px solid rgba(79, 128, 170, 0.5) !important;
  box-shadow: inset 0 0 35px rgba(79, 128, 170, 0.3), 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

body.theme-navy #products,
body.theme-navy #catalog-section,
body.theme-navy #about,
body.theme-navy #videos,
body.theme-navy #quote-section {
  border-color: rgba(79, 128, 170, 0.25);
}

body.theme-navy #catalog-section {
  background: #0f1c2f;
}

body.theme-navy #about {
  background: #112035;
}

body.theme-navy #videos {
  background: linear-gradient(180deg, #14243b 0%, #0e1a2b 100%);
}

/* 2. THEME: LIGHT (Açık Endüstriyel Stüdyo Teması) */
body.theme-light {
  background-color: #f1f5f9;
  color: #1e293b;
}

body.theme-light .bg-grid-pattern {
  background-image: 
    linear-gradient(to right, rgba(15, 23, 42, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.05) 1px, transparent 1px);
}

body.theme-light .hero-glow-1,
body.theme-light .hero-glow-2 {
  opacity: 0.25;
}

body.theme-light header.glass-nav {
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

body.theme-light header.glass-nav nav a {
  color: #334155 !important;
}

body.theme-light header.glass-nav nav a:hover {
  color: #0284c7 !important;
}

body.theme-light .top-info-bar-elem {
  background-color: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

body.theme-light .top-info-bar-elem a,
body.theme-light .top-info-bar-elem span {
  color: #475569 !important;
}

body.theme-light #products {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

body.theme-light #videos {
  background: linear-gradient(180deg, #f8fafc 0%, #edf2f7 100%) !important;
  border-color: #e2e8f0 !important;
}

body.theme-light #catalog-section,
body.theme-light #about,
body.theme-light #contact,
body.theme-light #quote-section {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

body.theme-light .glass-panel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05) !important;
}

body.theme-light .glass-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04) !important;
}

body.theme-light .glass-card:hover {
  background: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 15px 30px -5px rgba(2, 132, 199, 0.2) !important;
}

body.theme-light .category-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04) !important;
}

body.theme-light .category-card:hover {
  background: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 16px 32px -5px rgba(2, 132, 199, 0.22) !important;
}

body.theme-light .category-card .bg-gradient-to-b {
  background: #ffffff !important;
}

body.theme-light .category-card .bg-slate-950\/80 {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

body.theme-light .category-card .border-slate-800\/80 {
  border-color: #e2e8f0 !important;
}

body.theme-light .category-card .text-slate-300,
body.theme-light .category-card .text-slate-400 {
  color: #475569 !important;
}

/* Light Theme Machine Stage */
body.theme-light .machine-img-stage {
  background: 
    radial-gradient(circle at 50% 35%, #ffffff 0%, rgba(241, 245, 249, 0.8) 55%, transparent 85%),
    radial-gradient(ellipse at 50% 70%, #e2e8f0 0%, #cbd5e1 100%),
    linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%) !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: inset 0 2px 10px rgba(255, 255, 255, 0.9), 0 6px 16px rgba(0, 0, 0, 0.06) !important;
}

body.theme-light .machine-img-stage::after {
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 75%) !important;
}

body.theme-light .machine-img-stage img {
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.2)) !important;
}

body.theme-light .slider-nav-btn {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

body.theme-light .slider-nav-btn:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
}

body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light h4,
body.theme-light .text-white:not(.keep-white) {
  color: #0f172a !important;
}

body.theme-light .text-slate-200,
body.theme-light .text-slate-300,
body.theme-light .text-slate-400 {
  color: #475569 !important;
}

body.theme-light .bg-slate-900:not(.keep-dark),
body.theme-light .bg-slate-900\/90:not(.keep-dark),
body.theme-light .bg-slate-900\/95:not(.keep-dark),
body.theme-light .bg-slate-950:not(.keep-dark),
body.theme-light .bg-slate-950\/80:not(.keep-dark) {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}

body.theme-light input,
body.theme-light textarea,
body.theme-light select {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

body.theme-light input::placeholder,
body.theme-light textarea::placeholder {
  color: #94a3b8 !important;
}

body.theme-light .border-slate-800,
body.theme-light .border-slate-800\/80,
body.theme-light .border-slate-700,
body.theme-light .border-slate-700\/80 {
  border-color: #e2e8f0 !important;
}

body.theme-light .horizontal-video-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
}

body.theme-light #machine-modal > div,
body.theme-light #video-modal > div {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

body.theme-light #machine-modal .bg-slate-900,
body.theme-light #machine-modal .bg-slate-950,
body.theme-light #machine-modal .bg-slate-800 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

body.theme-light #mobile-menu {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

body.theme-light #mobile-menu a {
  color: #1e293b !important;
}

body.theme-light a[href^="#cat-"] {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

body.theme-light a[href^="#cat-"]:hover {
  border-color: #0284c7 !important;
  color: #0284c7 !important;
}

body.theme-light a[class*="bg-gradient-to-r"] *,
body.theme-light button[class*="bg-gradient-to-r"] *,
body.theme-light a[class*="bg-gradient-to-r"],
body.theme-light button[class*="bg-gradient-to-r"],
body.theme-light .bg-emerald-600 *,
body.theme-light .bg-sky-600 *,
body.theme-light .bg-blue-600 *,
body.theme-light .theme-pill-btn.active * {
  color: #ffffff !important;
}

/* 3. THEME: TITANIUM & ANTHRACITE (Endüstriyel Ağır Sanayi Çeliği & Grafit) */
body.theme-titanium {
  background-color: #1a202c;
  background-image: 
    linear-gradient(to right, rgba(148, 163, 184, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
  color: #e2e8f0;
}

body.theme-titanium header.glass-nav {
  background: rgba(26, 32, 44, 0.95);
  border-bottom: 1px solid #334155;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

body.theme-titanium .glass-panel {
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid #475569;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

body.theme-titanium .glass-card {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid #475569;
}

body.theme-titanium .glass-card:hover {
  background: rgba(40, 53, 75, 0.95);
  border-color: #94a3b8;
  box-shadow: 0 16px 30px -5px rgba(0, 0, 0, 0.5);
}

body.theme-titanium .category-card {
  background: rgba(30, 41, 59, 0.9);
  border-color: #475569;
}

body.theme-titanium .category-card:hover {
  background: rgba(38, 51, 72, 0.98);
  border-color: #cbd5e1;
  box-shadow: 0 16px 30px -10px rgba(0, 0, 0, 0.6);
}

body.theme-titanium .machine-img-stage {
  background: 
    radial-gradient(circle at 50% 35%, rgba(203, 213, 225, 0.25) 0%, rgba(71, 85, 105, 0.3) 50%, transparent 80%),
    radial-gradient(ellipse at 50% 65%, #334155 0%, #1e293b 85%),
    linear-gradient(180deg, #334155 0%, #111827 100%) !important;
  border: 1px solid #64748b !important;
  box-shadow: inset 0 0 30px rgba(148, 163, 184, 0.2), 0 8px 25px rgba(0, 0, 0, 0.5) !important;
}

body.theme-titanium #catalog-section {
  background: #151a24;
}

body.theme-titanium #about {
  background: #171d28;
}

body.theme-titanium #videos {
  background: linear-gradient(180deg, #1e2634 0%, #131720 100%);
}

#products,
#catalog-section,
#about,
#videos,
#quote-section,
#contact {
  content-visibility: auto;
  contain-intrinsic-size: 1px 700px;
}

/* Custom Sleek Scrollbar for Modal and Overflows */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.35);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(56, 189, 248, 0.7);
}

/* 14-inch and Laptop Viewport Scale Fine-Tuning (Heights <= 820px) */
@media (max-height: 820px) {
  #machine-modal > div {
    max-height: 94vh;
  }
  #machine-modal .machine-img-stage {
    min-height: 180px;
    max-height: 280px;
    padding: 0.75rem;
  }
  #machine-modal .machine-img-stage img {
    max-height: 190px !important;
  }
  #machine-modal table td {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
    font-size: 11px !important;
  }
}