/* === Base Reset & Typography === */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
}

body {
  background: url('../assets/background.png') no-repeat center center fixed;
  background-size: cover;
  padding-top: 40px; /* adjust based on navbar height */
}

body.dashboard {
  background: none !important;
  background-color: #f8f9fa;
  padding-top: 70px; /* if using fixed-top navbar */
}

/* === Login Container === */
.login-container {
  background: white;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 90%;
  max-width: 350px;
  margin: 50px auto;
  box-sizing: border-box;
}

.login-logo {
  width: 250px;
  max-width: 100%;
}

.login-subtext {
  color: #000000;
  font-size: 15px;
  font-weight: 500;
}

/* === Input & Button Styles === */
input, button {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 10px;
  box-sizing: border-box;
}

input[type="text"],
input[type="password"] {
  border: none;
  padding: 3px 8px;
  font-size: 14px;
  outline: none;
  margin: 0;
  flex: 1;
}

button {
  margin: 15px auto 10px auto;
  background-color: #6d3f18;
  color: #ffffff;
  border: 1px solid #6d3f18;
  border-radius: 8px;
  padding: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #F2C84B;
  color: #6d3f18;
}

button[type="submit"] {
  width: 100%;
}

/* === Input Group === */
.input-group {
  display: flex;
  align-items: center;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
}

.input-group input {
  flex: 1;
  height: 50px;
  border: 1px solid #a7a7a7;
  padding: 0 15px;
  font-size: 16px;
  border-radius: 0 10px 10px 0;
  background-color: white;
  color: #6d3f18;
  transition: border-color 0.3s ease;
}

.input-group input:focus {
  border-color: #F2C84B;
  outline: none;
}

/* === Icon Box === */
.icon-box {
  background-color: #6d3f18;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.icon-box i {
  color: #ffffff;
  font-size: 18px;
}

/* === Dashboard === */
.dashboard-container {
  max-width: 500px;
  margin: 50px auto;
  padding: 30px;
  background: #fff;
  border: 2px solid #ffe600;
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  font-family: 'Poppins', sans-serif;
  color: #6d3f18;
}

.dashboard-container h1 {
  margin-bottom: 20px;
  color: #233368;
}

.dashboard-container p {
  margin: 10px 0;
}

.dashboard-container button {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #233368;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

/* === Navbar === */
.custom-navbar {
  background-color: #6d3f18 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  z-index: 1030;
}

.custom-navbar .navbar-brand span {
  color: #fff;
  font-weight: bold;
  font-size: 18px;
}

.custom-navbar .nav-link {
  color: #fff !important;
}

.custom-navbar .btn-warning {
  background-color: #F2C84B;
  color: #6d3f18;
  border: none;
}

/* === Buttons === */
.btn-warning {
  background-color: #f2c84b;
  color: #6d3f18;
  border: none;
}

.btn-warning:hover {
  background-color: #e0b43a;
  color: #fff;
}

.btn-custom {
  background-color: #6d3f18;
  color: #fff;
  border: none;
}

.btn-custom:hover {
  background-color: #5c3414;
  color: #fff;
}

/* === Card === */
.card {
  background-color: #ffffff;
  border: 2px solid #f2c84b;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  border-radius: 15px;
}

.card-title {
  color: #6d3f18;
  font-weight: bold;
}

/* === Footer === */
.footer {
  text-align: center;
  color: white;
  font-size: 14px;
  margin-top: 20px;
  position: absolute;
  bottom: 10px;
  width: 100%;
}

/* === Bataka Flip Card === */
.card-flip-container {
  perspective: 1000px;
  height: 260px;
  position: relative;
  overflow: hidden;
}

.card-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card-flip-inner.flipped {
  transform: rotateY(180deg);
}

.card-flip-front,
.card-flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.card-flip-front {
  z-index: 2;
}

.card-flip-back {
  transform: rotateY(180deg);
  z-index: 1;
}

.card-flip-front.hint {
  animation: flipHint 1s ease-in-out 2;
}

@keyframes flipHint {
  0%   { transform: rotateY(0deg); }
  25%  { transform: rotateY(10deg); }
  50%  { transform: rotateY(-10deg); }
  75%  { transform: rotateY(5deg); }
  100% { transform: rotateY(0deg); }
}

/* === Bataka Text Positioning === */
.bataka-name {
  top: 64%;
  left: 5%;
  font-size: clamp(12px, 3vw, 14px);
}

.bataka-username {
  top: 78%;
  left: 42%;
  font-size: clamp(12px, 3vw, 14px);
}

/* === Responsive Tweaks === */
@media (max-width: 480px) {
  .card-flip-container {
    height: 200px;
  }

  .bataka-name {
    top: 58%;
  }

  .bataka-username {
    top: 72%;
  }

  #barcode-wrapper {
    top: 58% !important; /* ⬆️ raised from 66% or 72% */
    width: 160px;
    height: 48px;
    
  }

  #barcode {
    width: 120%;
    height: 120%;
  }

}

@media (max-width: 576px) {
  .card-flip-container {
    height: 180px;
  }
}

@media (min-width: 768px) {
  .bataka-name {
    top: 66%;
  }

  .bataka-username {
    top: 80%;
  }
}

/* Default positioning (mobile-first) */
.bataka-name {
  top: 62%; /* was 60% */
  left: 5%;
  font-size: clamp(12px, 3vw, 14px);
}

.bataka-username {
  top: 76%; /* was 74% */
  left: 42%;
  font-size: clamp(12px, 3vw, 14px);
}

/* Small screens */
@media (max-width: 480px) {
  .bataka-name {
    top: 58%; /* was 56% */
  }

  .bataka-username {
    top: 72%; /* was 70% */
  }
}

/* Larger screens */
@media (min-width: 768px) {
  .bataka-name {
    top: 64%; /* was 62% */
  }

  .bataka-username {
    top: 78%; /* was 76% */
  }
}

.flip-hint {
  position: absolute;
  top: 10px; /* ⬆️ distance from top edge */
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0.85);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: #6d3f18;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  animation: pulseHint 1.2s ease-in-out infinite;
  z-index: 10; /* ensures it stays above the image */
}

@keyframes pulseHint {
  0%   { transform: translateX(-50%) scale(1); opacity: 1; }
  50%  { transform: translateX(-50%) scale(1.05); opacity: 0.8; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

#langToggleBtn {
  border-radius: 20px;
  width: 60px;
  height: 36px;
  padding: 0;
  font-size: 1rem;
  color: #fff;              /* White text */
  border: 2px solid #fff;   /* White border */
  background-color: transparent;
}

#langToggleBtn:hover {
  background-color: #fff;   /* Optional: white background on hover */
  color: #0d6efd;           /* Optional: blue text on hover */
}

.toggle-eye i {
  color: #6d3f18;
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.toggle-eye i:hover {
  color: #8a4a1e; /* slightly lighter brown */
}