/* =======================================
   Global Settings
======================================= */
:root {
  /* Colors in HSL */
  --background: 40 45% 95%;
  --foreground: 30 15% 20%;
  --primary: 30 40% 45%;
  --primary-foreground: 40 45% 98%;
  --muted: 30 20% 90%;
  --muted-foreground: 30 15% 50%;
  --card: 40 50% 98%;
  --gradient-card: linear-gradient(135deg,
      hsl(40, 20%, 95%) 0%,  /* Off-White */
  hsl(27, 48%, 64%) 100% /* Muted Sunset Gold */



      );
  --shadow-elegant: 0 20px 60px -15px hsl(30 15% 20% / 0.15);
  --shadow-soft: 0 10px 30px -10px hsl(30 15% 20% / 0.1);
  --radius: 0.75rem;
}

/* Dark Mode (Commented for future use) */
/*
.dark {
  --background: 30 20% 12%;
  --foreground: 40 45% 95%;
  --primary: 30 40% 55%;
  --gradient-card: linear-gradient(135deg, hsl(30 30% 22%) 0%, hsl(30 25% 18%) 35%, hsl(25 20% 15%) 70%, hsl(30 25% 18%) 100%);
}
*/

/* =======================================
   Body & Font
======================================= */
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  overflow-x: hidden;
}

/* =======================================
   Background Layers
======================================= */
.bg-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

.bg-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../asserts/client_background.webp"); /* Sample free image */
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* Gradient overlay for readability */
.gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, rgba(245,245,245,0.2), rgba(245,245,245,0.3));
  backdrop-filter: blur(2px);
  z-index: 1;
}

/* Glow radial overlay */
.glow-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(245,180,130,0.05), transparent 70%);
  z-index: 2;
}

/* =======================================
   Login Card
======================================= */
.login-card {
  z-index: 3;
  background: var(--gradient-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-elegant);
  backdrop-filter: blur(5px);
  padding: 2rem;
  width: 100%;
  max-width: 420px;
  animation: fade-in 0.5s ease-out forwards;
}

/* Header typography */
.login-card .logo-text .text-primary {
  color: hsl(var(--primary));
}

.login-card .card-title {
  margin-top: 0.5rem;
  font-weight: 300;
  letter-spacing: 1px;
}

.login-card .card-text {
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.tracking-wider{
  color: #a17345 !important;
}
.st{
  color: #94816c !important;
}
.access{
  color: #968571 !important;
}
/* Inputs */
.input-custom {
  height: 44px;
  background-color: rgb(246, 242, 235);
  border: 1px solid hsl(var(--card));
  transition: all 0.3s ease;
}
.lab{
  font-size: 13.5px !important;
}
.input-custom:focus {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 5px hsl(var(--primary)/0.3);
}

/* Buttons */
.btn-custom {
  height: 44px;
  font-weight: 500;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-soft);
  background-color: #a0672e !important;
  color: white !important;
}

.btn-custom:hover {
   background-color: #c7833f !important;
  box-shadow: var(--shadow-elegant);
}

/* Links hover */
.link-hover:hover {
  color: hsl(var(--primary));
  text-decoration: underline;
  transition: all 0.3s ease;
}

.con{
  
  color: #a5631d !important;
  font-size: 15px !important;
}
.con:hover{
  color: #a26728 !important;
}
/* =======
wave effect for login
=========*/
/* === Glossy Wave Animation for Login Card === */
/* =======================================
   Glossy Light Wave Animation for Login Card
   (visible, smooth, luxury gloss effect)
======================================= */
.login-card {
  position: relative;
  overflow: hidden;
  isolation: isolate; /* ensures the ::after stays inside card */
}

/* Moving glossy diagonal reflection */
/* =======================================
   Single White Diagonal Wave Effect
   (Moves once every 60s across the card)
======================================= */
.login-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* The diagonal moving white wave */
.login-card::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(245, 221, 195, 0.3) 50%,
    rgba(255, 255, 255, 0) 60%
  );
  transform: translateX(-100%) translateY(-100%);
  animation: single-wave 8s linear infinite;
  pointer-events: none;
  z-index: 5;
}

/* Animation: smooth diagonal sweep */
@keyframes single-wave {
  0% {
    transform: translateX(-120%) translateY(-120%);
  }
  100% {
    transform: translateX(120%) translateY(120%);
  }
}



/* =======================================
   Bottom Brand Strip
======================================= */
.bottom{
  font-size: 18px !important;
  cursor: pointer;
  text-decoration: none;
  color: rgb(0, 0, 0);
}
.bottom:hover{
  color: #382e25;
}
.brand-strip {
  background-color: hsl(var(--primary)/0.2);
  backdrop-filter: blur(9px);
  border-top: 1px solid hsl(var(--primary)/0.2);
  z-index: 4;
}

/* Text opacity for muted effect */
.text-foreground-80 {
  color: hsla(var(--foreground), 0.8);
}

/* =======================================
   Animations
======================================= */
@keyframes fade-in {
  0% { opacity: 0; transform: translateY(10px);}
  100% { opacity: 1; transform: translateY(0);}
}