/* ============================================================
   Lux Massage — Common Styles
   Shared across all pages (girls portal, staff portal, track)
   ============================================================ */

/* Reset */
*{margin:0;padding:0;box-sizing:border-box}

/* Typography */
body{
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:#FAFAF7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* App container — mobile-first centered */
#root{
  max-width:430px;
  margin:0 auto;
  min-height:100vh;
  background:#FAFAF7;
}
@media(min-width:431px){
  #root{box-shadow:0 0 40px rgba(0,0,0,.06)}
}

/* ============================================================
   iOS-STYLE BUTTON SYSTEM
   All buttons get consistent Apple-inspired styling
   ============================================================ */
button{
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  border-radius:14px;
  font-weight:600;
  letter-spacing:-.01em;
  transition:transform .15s cubic-bezier(.2,.8,.4,1),
             box-shadow .15s ease,
             opacity .15s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  outline:none;
}
button:active{
  transform:scale(.97) !important;
  opacity:.85;
}
button:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none !important;
}

/* Primary CTA buttons (Book Now, Submit, etc.) — brown bg */
button[style*="background: rgb(107, 91, 62)"],
button[style*="background:#6B5B3E"],
button[style*="background: #6B5B3E"]{
  box-shadow:0 2px 8px rgba(107,91,62,.25);
}
button[style*="background: rgb(107, 91, 62)"]:active,
button[style*="background:#6B5B3E"]:active,
button[style*="background: #6B5B3E"]:active{
  box-shadow:0 1px 4px rgba(107,91,62,.15);
}

/* Inputs — iOS-style (exclude checkbox/radio so they keep native rendering) */
input:not([type="checkbox"]):not([type="radio"]),textarea,select{
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  border-radius:12px;
  transition:border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance:none;
  appearance:none;
}
input[type="checkbox"],input[type="radio"]{
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
input:focus,textarea:focus,select:focus{
  box-shadow:0 0 0 3px rgba(201,169,110,.15);
}

/* Animations */
@keyframes pulse2{
  0%{transform:scale(1);opacity:.6}
  100%{transform:scale(2.5);opacity:0}
}
@keyframes shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
@keyframes spin{
  to{transform:rotate(360deg)}
}
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}
/* Page transition wrapper (v46 — UX4) */
.lux-page-enter{
  animation:fadeIn .2s ease-out both;
}

/* Skeleton loading */
.skeleton{
  background:linear-gradient(90deg,#f0ede8 25%,#e8e5df 50%,#f0ede8 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
}

/* Scrollbar styling */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#EDEBE7;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#D5D2CE}

/* Selection */
::selection{
  background:rgba(201,169,110,.2);
  color:#2D2A24;
}

/* Safe area support for notch devices */
@supports(padding:env(safe-area-inset-bottom)){
  .lux-safe-bottom{
    padding-bottom:env(safe-area-inset-bottom,0) !important;
  }
}