body {
  background-color: #f8f9fa;
}

/* Logo Banner Styles */
.navbar {
  background: linear-gradient(135deg, #1e88e5, #1565c0) !important;
  padding: 0.5rem 0;
}

.finzapp-logo {
  height: 50px;
  width: auto;
  object-fit: contain;
}

/* Card Styles */
.card {
  border: none;
  border-radius: 10px;
  margin-top: 2rem;
}

.card-body {
  padding: 2rem;
}

h2 {
  color: #007bff;
  font-weight: 600;
}

.btn-primary {
  padding: 0.8rem;
  font-weight: 500;
  background: linear-gradient(135deg, #1e88e5, #1565c0);
  border: none;
  box-shadow: 
    0 2px 4px rgba(0,0,0,0.2),
    inset 0 1px 1px rgba(255,255,255,0.2);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #42a5f5, #1976d2);
  transform: translateY(-1px);
  box-shadow: 
    0 4px 8px rgba(0,0,0,0.3),
    inset 0 1px 1px rgba(255,255,255,0.2);
}

.btn-primary:active {
  transform: translateY(1px);
  box-shadow: 
    0 1px 2px rgba(0,0,0,0.2),
    inset 0 1px 1px rgba(255,255,255,0.1);
}

.btn-link {
  color: #6c757d;
  text-decoration: none;
}

.btn-link:hover {
  color: #007bff;
  text-decoration: underline;
}

/* Form Controls */
.form-control {
  padding: 0.8rem;
  border: 1px solid #dee2e6;
}

.form-control:focus {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .finzapp-logo {
    height: 40px;
  }
  
  .card-body {
    padding: 1.5rem;
  }
  
  .btn-primary {
    padding: 0.6rem;
  }
}

/* Styles for banner carousel containers */
.banner-container {
    width: 100%;
    margin-bottom: 10px; /* Space below top banner */
    display: none; /* Hidden by default, shown by JS */
    /* Removed fixed height, carousel will determine height */
}
#bottom-banner-container {
    margin-top: 20px; /* Space above bottom banner */
}

/* Carousel Styles */
.banner-carousel .carousel-inner {
     /* Allow content to determine height, but set a max */
     max-height: 150px; /* Example max height, adjust as needed */
     overflow: hidden; /* Hide overflow */
     border-radius: 8px; /* Optional rounded corners */
}
.banner-carousel .carousel-item img {
   width: 100%;
   /* Let height be determined by aspect ratio, up to max-height of inner */
   height: auto;
   max-height: 150px; /* Match max-height of inner */
   object-fit: contain; /* Use contain to show the whole image within the constraints */
   display: block; /* Ensure image behaves like a block element */
}

/* Style for carousel controls */
.banner-carousel .carousel-control-prev-icon,
.banner-carousel .carousel-control-next-icon {
      background-color: rgba(0, 0, 0, 0.5); /* Darker background for visibility */
      border-radius: 50%;
      width: 2rem;
      height: 2rem;
      background-size: 60% 60%;
}
/* Position controls vertically centered */
.banner-carousel .carousel-control-prev,
.banner-carousel .carousel-control-next {
       top: 50%;
       transform: translateY(-50%);
       height: 2rem; /* Match icon height */
       width: 2rem; /* Match icon width */
       opacity: 0.7;
}
.banner-carousel .carousel-control-prev { left: 10px; }
.banner-carousel .carousel-control-next { right: 10px; }

/* Style for carousel indicators */
.banner-carousel .carousel-indicators {
      position: absolute;
      bottom: 5px; /* Adjust position from bottom */
      left: 50%;
      transform: translateX(-50%);
      margin-bottom: 0; /* Override default */
}
.banner-carousel .carousel-indicators [data-bs-target] {
      background-color: rgba(255, 255, 255, 0.5); /* Lighter indicators on dark backgrounds */
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin: 0 4px;
      opacity: 0.8;
      border: 1px solid rgba(0, 0, 0, 0.2); /* Optional border */
}
.banner-carousel .carousel-indicators .active {
      background-color: #ffffff; /* Active indicator color */
      opacity: 1;
}
/* Hide controls/indicators if only one item */
.banner-carousel:has(.carousel-item:first-child:last-child) .carousel-control-prev,
.banner-carousel:has(.carousel-item:first-child:last-child) .carousel-control-next,
.banner-carousel:has(.carousel-item:first-child:last-child) .carousel-indicators {
      display: none;
}

/* Styles for Auth Page Banner (for exchange rate, clock, date) */
.auth-page-banner {
  background: linear-gradient(135deg, #42a5f5, #1976d2);
  padding: 10px 20px;
  color: white;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Style for live exchange rate display (copied from index.html styles) */
#live-exchange-rate {
    font-size: 0.9em;
    color: #f8f9fa; /* Light color for dark background */
    padding: 5px 0;
    /* background-color: rgba(0,0,0,0.1); */ /* Removed to blend with auth-page-banner */
    border-radius: 0 0 5px 5px; /* Optional: round bottom corners if it's the last element in banner */
}
#live-exchange-rate strong {
    color: #ffffff; /* Pure white for emphasis */
}
#live-exchange-rate .text-white-50 { /* Bootstrap class for semi-transparent white */
   opacity: 0.8;
}
#live-exchange-rate .clock-date-container {
    font-size: 0.9em;
    color: #f0f0f0; /* Slightly off-white for better readability */
}
#live-exchange-rate .clock-time, #live-exchange-rate .current-date {
    font-weight: 500; /* Slightly bolder for clock/date */
}