/* Sala Massage Global Theme */
/* Google Fonts import: Arimo (Latin) + Prompt (Thai) */
@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@400;500;600;700&family=Prompt:wght@300;400;500;600;700&display=swap');
/* Brand palette and base tokens */
:root{
	--brand: #603912; /* brown */
	--brand2: #603912; /* keep same for solid look when used in gradients */
	--cream: #eaded2; /* page background */
	--text: #2C1810;
	--bg1: #eaded2;
	--bg2: #eaded2;
	--bg3: #eaded2;
	--brown: #603912;
	--gray: #8e8e8e;
}

/* Typography and page background */
html, body{
	/* Use Prompt (Thai) first, then Arimo (Latin), then system fallbacks */
	font-family: 'Prompt', 'Arimo', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	background: var(--cream);
	color: var(--text);
}

/* Navbar: solid brand brown with white text/icons */
.navbar{
	background: var(--brown);
	border-bottom: none;
	box-shadow: 0 4px 16px rgba(0,0,0,.1);
}
.navbar .navbar-brand,
.navbar .nav-link,
.navbar .navbar-toggler,
.navbar .dropdown-toggle{
	color: #fff !important;
}
.navbar .btn-outline-light{
	color: #fff;
	border-color: rgba(255,255,255,0.7);
}
.navbar .btn-outline-light:hover{
	background: rgba(255,255,255,0.1);
}

/* Brand logo sizing inside navbar (responsive, no over-expansion) */
.navbar .navbar-brand img.brand-logo{
	display: block;
	height: auto;           /* keep natural aspect ratio */
	width: auto;            /* prevent stretching */
	max-height: 30px;       /* default cap on small screens */
	max-width: 100%;        /* do not overflow container */
}
@media (min-width: 768px){
	.navbar .navbar-brand img.brand-logo{ max-height: 34px; }
}
@media (min-width: 1200px){
	.navbar .navbar-brand img.brand-logo{ max-height: 38px; }
}

/* Cards sit white on cream background */
.card,
.card .card-header,
.card .card-body{
	background: #fff;
}


/* Utility chips used in navbars and stats */
.stat-chip{
	border-radius: 16px;
	background: #fff;
	padding: .35rem .75rem;
	box-shadow: 0 6px 20px rgba(0,0,0,.06);
}

/* Optional: light offcanvas body */
.offcanvas{ background: linear-gradient(180deg,#fff,#FFFEF7); }

/* Modern Language Switch - Premium Glassmorphism Design */

/* Pill group style (fallback/alternative) */
.lang-switch-group{ 
  display: inline-flex; 
  background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.08)); 
  border: 1px solid rgba(255,255,255,0.2);
  padding: 3px; 
  border-radius: 28px; 
  backdrop-filter: blur(16px);
  box-shadow: 
    0 8px 32px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -1px 0 rgba(0,0,0,0.1);
  transition: all .3s ease;
}
.lang-switch-group:hover {
  box-shadow: 
    0 12px 40px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.1);
}
.lang-switch-group .lang-pill{ 
  text-decoration: none; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  padding: 8px 14px; 
  font-size: .75rem; 
  font-weight: 600; 
  color: rgba(255,255,255,0.8); 
  border-radius: 24px; 
  transition: all .3s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}
.lang-switch-group .lang-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1));
  opacity: 0;
  transition: opacity .3s ease;
  border-radius: inherit;
}
.lang-switch-group .lang-pill:hover::before { opacity: 1; }
.lang-switch-group .lang-pill:hover{ 
  color: #fff; 
  text-decoration: none; 
  transform: translateY(-1px);
}
.lang-switch-group .lang-pill.active{ 
  background: linear-gradient(145deg, #ffffff, #f8f4ee); 
  color: var(--brown); 
  box-shadow: 
    0 4px 20px rgba(0,0,0,0.2),
    0 2px 8px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.9);
  transform: translateY(-1px);
}
.lang-switch-group .flag-icon{ 
  font-size: 1rem; 
  line-height: 1; 
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
}

/* Premium Toggle Switch Style */
.lang-switch{ 
  position: relative; 
  display: inline-flex; 
  align-items: center; 
  gap: .75rem; 
  text-decoration: none; 
  font-weight: 600; 
  font-size: .8rem; 
  letter-spacing: .5px; 
  color: #fff; 
  transition: all .3s ease;
  padding: 6px 8px;
  border-radius: 32px;
}
.lang-switch:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.25));
}

.lang-switch .lang-track{ 
  position: relative; 
  width: 84px; 
  height: 42px; 
  background: linear-gradient(145deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
  border: 2px solid rgba(255,255,255,0.25); 
  backdrop-filter: blur(20px);
  border-radius: 28px; 
  display: inline-flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 4px 8px; 
  box-shadow: 
    inset 0 2px 12px rgba(0,0,0,0.2),
    0 8px 32px rgba(0,0,0,0.12),
    0 4px 16px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: all .35s cubic-bezier(.4,0,.2,1);
}

.lang-switch:hover .lang-track{ 
  border-color: rgba(255,255,255,0.45);
  box-shadow: 
    inset 0 2px 12px rgba(0,0,0,0.25),
    0 12px 48px rgba(0,0,0,0.18),
    0 6px 24px rgba(0,0,0,0.12);
}

.lang-switch .lang-opt{ 
  position: relative; 
  z-index: 3; 
  font-size: 1.2rem; 
  line-height: 1; 
  opacity: .35; 
  transition: all .4s cubic-bezier(.4,0,.2,1);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  transform: scale(.85);
}
.lang-switch.is-th .lang-opt-th, 
.lang-switch.is-en .lang-opt-en{ 
  opacity: 1; 
  transform: scale(1.1);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4));
}

.lang-switch .lang-handle{ 
  position: absolute; 
  z-index: 2; 
  top: 4px; 
  bottom: 4px; 
  width: 40px; 
  border-radius: 24px; 
  background: linear-gradient(145deg, #ffffff, #f8f4ee, #f0e6d2);
  box-shadow: 
    0 6px 24px rgba(0,0,0,0.3),
    0 3px 12px rgba(0,0,0,0.2),
    inset 0 2px 4px rgba(255,255,255,0.9),
    inset 0 -2px 4px rgba(0,0,0,0.08);
  transform: translateX(2px); 
  transition: all .4s cubic-bezier(.34,.56,.64,1);
}
.lang-switch.is-en .lang-handle{ 
  transform: translateX(40px); 
}
.lang-switch:hover .lang-handle {
  box-shadow: 
    0 8px 32px rgba(0,0,0,0.35),
    0 4px 16px rgba(0,0,0,0.25),
    inset 0 2px 4px rgba(255,255,255,1),
    inset 0 -2px 4px rgba(0,0,0,0.1);
}

.lang-switch-text{ 
  font-size: .75rem; 
  font-weight: 700; 
  color: rgba(255,255,255,0.95); 
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
  letter-spacing: .6px;
  transition: all .3s ease;
}
.lang-switch:hover .lang-switch-text {
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.7);
}

/* Responsive adjustments */
@media (max-width: 575.98px){
  .lang-switch .lang-track{ width: 76px; height: 38px; }
  .lang-switch .lang-handle{ width: 36px; }
  .lang-switch.is-en .lang-handle{ transform: translateX(36px); }
  .lang-switch-text{ display: none; }
  .lang-switch { gap: .5rem; padding: 4px 6px; }
}

/* Simple Text-Based Language Switch */
.lang-switch-simple{ 
  position: relative; 
  display: inline-flex; 
  align-items: center; 
  text-decoration: none; 
  font-weight: 600; 
  font-size: .85rem; 
  color: #fff; 
  transition: all .3s ease;
  padding: 4px;
  border-radius: 24px;
}
.lang-switch-simple:hover {
  transform: translateY(-1px);
  text-decoration: none;
  color: #fff;
}

.lang-switch-simple .lang-track-simple{ 
  position: relative; 
  width: 72px; 
  height: 36px; 
  background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.08));
  border: 1.5px solid rgba(255,255,255,0.25); 
  backdrop-filter: blur(12px);
  border-radius: 22px; 
  display: inline-flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 3px 8px; 
  box-shadow: 
    inset 0 2px 8px rgba(0,0,0,0.15),
    0 4px 16px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: all .3s cubic-bezier(.4,0,.2,1);
}

.lang-switch-simple:hover .lang-track-simple{ 
  border-color: rgba(255,255,255,0.4);
  box-shadow: 
    inset 0 2px 8px rgba(0,0,0,0.2),
    0 6px 24px rgba(0,0,0,0.15);
}

.lang-switch-simple .lang-opt-simple{ 
  position: relative; 
  z-index: 3; 
  font-size: .75rem; 
  font-weight: 700;
  line-height: 1; 
  color: rgba(255,255,255,0.6); 
  transition: all .3s cubic-bezier(.4,0,.2,1);
  letter-spacing: .3px;
}
.lang-switch-simple.is-th .lang-opt-th, 
.lang-switch-simple.is-en .lang-opt-en{ 
  color: var(--brown);
  font-weight: 800;
}

.lang-switch-simple .lang-handle-simple{ 
  position: absolute; 
  z-index: 2; 
  top: 3px; 
  bottom: 3px; 
  left: 3px;
  width: 32px; 
  border-radius: 18px; 
  background: linear-gradient(145deg, #ffffff, #f8f4ee);
  box-shadow: 
    0 3px 12px rgba(0,0,0,0.25),
    0 1px 4px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.9);
  transform: translateX(0); 
  transition: all .3s cubic-bezier(.34,.56,.64,1);
}
.lang-switch-simple.is-en .lang-handle-simple{ 
  transform: translateX(34px); 
}
.lang-switch-simple:hover .lang-handle-simple {
  box-shadow: 
    0 4px 16px rgba(0,0,0,0.3),
    0 2px 6px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,1);
}

/* Responsive adjustments for simple switch */
@media (max-width: 575.98px){
  .lang-switch-simple .lang-track-simple{ width: 64px; height: 32px; padding: 2px 6px; }
  .lang-switch-simple .lang-handle-simple{ width: 28px; }
  .lang-switch-simple.is-en .lang-handle-simple{ transform: translateX(30px); }
  .lang-switch-simple .lang-opt-simple { font-size: .7rem; }
}

/* Flag-only style improvements */
.btn-lang-switch{ 
  background: linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.1)); 
  border: 2px solid rgba(255,255,255,0.3); 
  padding: 10px 14px; 
  border-radius: 20px; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 1.2rem; 
  backdrop-filter: blur(16px); 
  color: #fff; 
  text-decoration: none; 
  transition: all .35s cubic-bezier(.4,0,.2,1);
  box-shadow: 
    0 6px 20px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn-lang-switch:hover{ 
  background: linear-gradient(145deg, rgba(255,255,255,0.3), rgba(255,255,255,0.2)); 
  border-color: rgba(255,255,255,0.5);
  text-decoration: none; 
  transform: translateY(-3px);
  box-shadow: 
    0 10px 32px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-lang-switch .flag-icon{ 
  font-size: 1.3rem; 
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

/* Navbar positioning and overrides */
.navbar .lang-switch-group{ margin-right: .5rem; }
.navbar .lang-switch { margin-right: .25rem; }

/* Force navbar simple language switch display */
.navbar .lang-switch-simple,
nav .lang-switch-simple { 
  position: relative !important; 
  display: inline-flex !important; 
  align-items: center !important; 
  text-decoration: none !important; 
  font-weight: 600 !important; 
  font-size: .85rem !important; 
  color: #fff !important; 
  transition: all .3s ease !important;
  padding: 4px !important;
  border-radius: 24px !important;
}

.navbar .lang-switch-simple .lang-track-simple,
nav .lang-switch-simple .lang-track-simple{ 
  position: relative !important; 
  width: 72px !important; 
  height: 36px !important; 
  background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.08)) !important;
  border: 1.5px solid rgba(255,255,255,0.25) !important; 
  backdrop-filter: blur(12px) !important;
  border-radius: 22px !important; 
  display: inline-flex !important; 
  align-items: center !important; 
  justify-content: space-between !important; 
  padding: 3px 8px !important; 
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.1) !important;
  overflow: hidden !important;
  transition: all .3s cubic-bezier(.4,0,.2,1) !important;
}

.navbar .lang-switch-simple .lang-opt-simple,
nav .lang-switch-simple .lang-opt-simple{ 
  position: relative !important; 
  z-index: 3 !important; 
  font-size: .75rem !important; 
  font-weight: 700 !important;
  line-height: 1 !important; 
  color: rgba(255,255,255,0.6) !important; 
  transition: all .3s cubic-bezier(.4,0,.2,1) !important;
  letter-spacing: .3px !important;
}

.navbar .lang-switch-simple.is-th .lang-opt-th, 
.navbar .lang-switch-simple.is-en .lang-opt-en,
nav .lang-switch-simple.is-th .lang-opt-th, 
nav .lang-switch-simple.is-en .lang-opt-en{ 
  color: var(--brown) !important;
  font-weight: 800 !important;
}

.navbar .lang-switch-simple .lang-handle-simple,
nav .lang-switch-simple .lang-handle-simple{ 
  position: absolute !important; 
  z-index: 2 !important; 
  top: 3px !important; 
  bottom: 3px !important; 
  left: 3px !important;
  width: 32px !important; 
  border-radius: 18px !important; 
  background: linear-gradient(145deg, #ffffff, #f8f4ee) !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.25), 0 1px 4px rgba(0,0,0,0.15) !important;
  transform: translateX(0) !important; 
  transition: all .3s cubic-bezier(.34,.56,.64,1) !important;
}

.navbar .lang-switch-simple.is-en .lang-handle-simple,
nav .lang-switch-simple.is-en .lang-handle-simple{ 
  transform: translateX(34px) !important; 
}