@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  --primary-color: #ba2171;
  --primary-text: ;
  --secoundry-color: ;
  --secoundry-text: ;
  --primary-background: ;
  --secoundry-background: ;
  --primary-font: 'Poppins', sans-serif;
}

:root {
  --deep-wine: #4B0E1F;
  --ruby-red: #C2185B;
  --elegant-fuchsia: #E91E63;
  --soft-gold: #CBA135;
  --silver: #BFC1C2;
  --carbon-black: #111111;
  --smoke-gray: #2E2E2E;
  --pure-white: #ffffff;
}

body {
  background: #fff;
}

.login-page {
  font-family: var(--primary-font) !important;
  background: linear-gradient(135deg, #ba2171 0%, rgba(157, 0, 255, 0.4) 50%, #ba2171 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  position: relative;
}

.glass-card {
  background: ghostwhite;
  border-radius: 20px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
  width: 90%;
  max-width: 450px;
  padding: 2.5rem;
  margin: 1rem;
  z-index: 10;
}

.input-field {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid var(--primary-color) !important;
  border-radius: 50px !important;
  padding: 15px 20px !important;
  color: #000 !important;
  transition: all 0.3s ease !important;
  width: 100% !important;
}

.input-field:focus {
  background: rgba(255, 255, 255, 0.15) !important;
  outline: none !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2) !important;
}

.input-field::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.btn-login,
.btn-pink,
#load-more-btn,
.category-btn,
.hide_filters.btn {
  background-color: var(--ruby-red);
  /* Ruby Red */
  color: #FFFFFF;
  /* Pure White */
  border: none;
  border-radius: 25px;
  padding: 10px 20px;
  transition: all 0.3s ease;
}

.btn-login:hover,
.btn-pink:hover,
#load-more-btn:hover,
.category-btn:hover,
.hide_filters.btn:hover {
  background-color: var(--ruby-red);
  /* Alternate Ruby Red */
}

.btn-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(157, 0, 255, 0.4);
}

.title {
  background: linear-gradient(90deg, #101042, #ba2171);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  font-weight: 900;
}

.sphere {
  position: absolute;
  border-radius: 50%;
  filter: blur(0px);
  animation: float 15s infinite ease-in-out;
  opacity: 0.8;
}

.sphere-1 {
  width: 250px;
  height: 250px;
  top: 10%;
  left: 10%;
  background: radial-gradient(circle at 30% 30%, #ff00ff 0%, #9d00ff 100%);
  animation-delay: 0s;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  border: 3px solid #fff;
}

.sphere-2 {
  width: 180px;
  height: 180px;
  bottom: 35%;
  right: 15%;
  background: radial-gradient(circle at 30% 30%, #00ffcc 0%, #0099ff 100%);
  animation-delay: 3s;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  border: 3px solid #fff;
}

.sphere-3 {
  width: 120px;
  height: 120px;
  top: 70%;
  left: 17%;
  background: radial-gradient(circle at 30% 30%, #ffcc00 0%, #ff6600 100%);
  animation-delay: 6s;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  border: 3px solid #fff;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}

.show-password {
  position: relative;
}

.show-password-btn {
  position: absolute;
  right: 10px;
  top: 43px;
  border: none;
  background: transparent;
}

.show-password-icon {
  font-size: 18px;
}

/* General */
body,
section {
  background-color: var(--carbon-black);
  /* Carbon Black */
  color: #FFFFFF;
  /* Pure White */
}

.text-secondary {
  color: var(--silver);
  /* Silver */
}

/* Header (if in layouts.app) */
.navbar,
.header {
  background-color: var(--deep-wine);
  /* Burgundy */
  color: var(--pure-white);
  /* Pure White */
}

.navbar a {
  color: var(--pure-white);
  /* Pure White */
}

.navbar a:hover {
  color: var(--soft-gold);
  /* Soft Gold */
}

/* Categories and Popular Countries */
.container-fluid.py-3 {
  background-color: var(--smoke-gray);
  /* Smoke Gray */
  border: 1px solid var(--soft-gold);
  /* Soft Gold */
}

.container-fluid.py-3 .bg-warning {
  background-color: var(--deep-wine) !important;
  /* Burgundy */
  color: var(--pure-white);
  /* Pure White */
}

.container-fluid.py-3 a {
  color: var(--silver);
  /* Silver */
}

.container-fluid.py-3 a:hover {
  color: var(--soft-gold);
  /* Soft Gold */
}

/* Filter Dropdowns */
.form-select {
  background-color: var(--smoke-gray);
  /* Smoke Gray */
  color: var(--silver);
  /* Silver */
  border: 1px solid var(--soft-gold);
  /* Soft Gold */
}

.form-select option {
  background-color: var(--smoke-gray);
  /* Smoke Gray */
  color: var(--pure-white);
  /* Pure White */
}

/* Escort Cards */
.escort-card {
  background-color: var(--smoke-gray);
  /* Smoke Gray */
  border: 1px solid var(--soft-gold);
  /* Soft Gold */
  color: var(--silver);
  /* Silver */
  box-shadow: none;
}

.escort-card .text-main {
  color: var(--pure-white);
  /* Burgundy */
}

.escort-card .onOverlay {
  background-color: rgba(0, 0, 0, 0.92);
  /* Darker Black with higher opacity */
  color: var(--pure-white);
  /* Pure White */
}

.escort-card .onOverlay h4 {
  color: var(--soft-gold);
  /* Soft Gold */
}

.image_container {
  height: 250px;
  position: relative;
  overflow: hidden;
  background-color: var(--smoke-gray);
  /* Smoke Gray */
  border: 1px solid var(--soft-gold);
  /* Soft Gold */
}

.image_container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tags {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 5px;
  display: flex;

}

.tag-1,
.tag-2,
.tag-3 {
  margin-left: 5px;
}

.badge-img {
  width: 30px;
  height: 30px;
  filter: brightness(0) invert(0.9) sepia(1) hue-rotate(50deg) saturate(5);
  /* Soft Gold */
  transition: all 0.3s ease;
}

.badge-img:hover {
  filter: brightness(0) invert(1);
  /* Pure White on hover */
}

.onOverlay {
  background-color: rgba(0, 0, 0, 0.92);
  /* Darker Black with higher opacity */
  color: var(--pure-white);
  /* Pure White */
  opacity: 0;
  transition: opacity 0.3s ease;
  height: 100%;
  width: 100%;
  z-index: 999;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
}

.image_container:hover .onOverlay {
  opacity: 1;
}

.onOverlay h4 {
  color: var(--soft-gold);
  /* Soft Gold */
}

/* Billing Modal */
.billing-card {
  background-color: var(--smoke-gray);
  /* Smoke Gray */
  color: var(--pure-white);
  /* Pure White */
  border: 1px solid var(--soft-gold);
  /* Soft Gold */
}

.billing-card .modal-header {
  background-color: var(--deep-wine);
  /* deepwine */
  color: var(--pure-white);
  /* Pure White */
}

.billing-card .modal-header .btn-close {
  filter: invert(1);
  /* White close button */
}

.billing-card .text-pink {
  color: var(--ruby-red);
  /* Ruby Red */
}

.billing-card .custom-input {
  background-color: var(--carbon-black);
  /* Carbon Black */
  color: var(--silver);
  /* Silver */
  border: 1px solid var(--soft-gold);
  /* Soft Gold */
}

/* Icons */
.fa-location-dot,
.fa-circle.text-success {
  color: var(--soft-gold);
  /* Soft Gold */
}

/* Pagination */
.page-link {
  background-color: var(--smoke-gray);
  /* Smoke Gray */
  color: var(--silver);
  /* Silver */
  border: 1px solid var(--soft-gold);
  /* Soft Gold */
}

.page-item.active .page-link {
  background-color: var(--ruby-red);
  /* Ruby Red */
  border-color: var(--ruby-red);
  color: var(--pure-white);
  /* Pure White */
}

.page-link:hover {
  background-color: var(--deep-wine);
  /* deep-wine */
  color: #FFFFFF;
  /* Pure White */
}

/* ============================================
   RESPONSIVE STYLES FOR LOGIN PAGE
   ============================================ */

/* Mobile Devices */
@media (max-width: 767.98px) {
  .login-page {
    padding: 20px 10px;
    min-height: 100vh;
  }

  .glass-card {
    padding: 1.5rem;
    width: 95%;
    max-width: 100%;
  }

  .title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }

  .input-field {
    padding: 12px 16px !important;
    font-size: 14px !important;
  }

  .btn-login,
  .btn-pink {
    width: 100%;
    padding: 12px 20px;
    font-size: 14px;
  }

  .show-password-btn {
    top: 38px;
    right: 15px;
  }

  .show-password-icon {
    font-size: 16px;
  }

  /* Spheres - Smaller on mobile */
  .sphere-1 {
    width: 150px;
    height: 150px;
    top: 5%;
    left: 5%;
  }

  .sphere-2 {
    width: 120px;
    height: 120px;
    bottom: 30%;
    right: 10%;
  }

  .sphere-3 {
    width: 80px;
    height: 80px;
    top: 65%;
    left: 10%;
  }

  /* Form Elements */
  .form-group {
    margin-bottom: 15px;
  }

  .form-label {
    font-size: 13px;
  }

  /* Links */
  a {
    font-size: 13px;
  }

  /* Escort Cards on Homepage */
  .escort-card {
    margin-bottom: 15px;
  }

  .image_container {
    height: 200px !important;
  }

  .onOverlay h4 {
    font-size: 1rem;
  }

  /* Tags */
  .tags {
    top: 10px;
    left: 5px;
  }

  .tags span {
    max-width: 24px;
  }

  .badge-img {
    width: 24px;
    height: 24px;
  }

  /* Billing Modal */
  .billing-card {
    padding: 15px;
  }

  .billing-card .modal-header {
    padding: 15px;
  }

  .billing-card .modal-body {
    padding: 15px;
  }

  .custom-input {
    font-size: 14px;
    padding: 10px 12px;
  }

  /* Category Buttons */
  .category-btn {
    font-size: 12px;
    padding: 8px 14px !important;
    margin-bottom: 8px !important;
  }

  /* Filters */
  .form-select {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .hide_filters.btn {
    width: 100%;
    margin-bottom: 10px;
  }

  /* Load More */
  #load-more-btn {
    width: 100%;
    font-size: 14px;
  }

  /* Pagination */
  .pagination {
    font-size: 12px;
    justify-content: center;
  }

  .page-link {
    padding: 6px 10px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .glass-card {
    padding: 1.25rem;
  }

  .title {
    font-size: 1.25rem;
  }

  .input-field {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  .btn-login,
  .btn-pink {
    padding: 10px 16px;
    font-size: 13px;
  }

  .sphere-1 {
    width: 100px;
    height: 100px;
  }

  .sphere-2 {
    width: 80px;
    height: 80px;
  }

  .sphere-3 {
    width: 60px;
    height: 60px;
  }

  .image_container {
    height: 180px !important;
  }

  .category-btn {
    font-size: 11px;
    padding: 6px 12px !important;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
  .glass-card {
    max-width: 500px;
    padding: 2rem;
  }

  .image_container {
    height: 220px !important;
  }

  .escort-card {
    margin-bottom: 20px;
  }
}

/* Landscape Orientation */
@media (max-width: 767.98px) and (orientation: landscape) {
  .login-page {
    padding: 15px 10px;
  }

  .glass-card {
    padding: 1.25rem;
  }

  .sphere {
    display: none;
  }
}

/* 
Login Button - Header */
.login-btn {
  background-color: var(--ruby-red);
  color: #fff;
  transition: all 0.3s ease;
}

.login-btn:hover {
  background-color: var(--ruby-red);
  opacity: 0.9;
  color: #fff;
}


/* ============================================
   LOGIN PAGE RESPONSIVE IMPROVEMENTS
   ============================================ */

/* Extra Small Mobile (320px - 375px) */
@media (max-width: 375px) {
  .login-page .container {
    padding: 10px !important;
  }

  .glass-card {
    padding: 1rem;
    margin: 0.5rem;
    width: 95%;
  }

  .title {
    font-size: 1.1rem;
  }

  .text-muted.small {
    font-size: 11px;
  }

  .input-field {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  .form-group label {
    font-size: 11px;
  }

  .btn-login {
    padding: 10px 14px;
    font-size: 12px;
  }

  /* Spheres - smaller but visible */
  .sphere-1 {
    width: 80px;
    height: 80px;
    top: 2%;
    left: 2%;
  }

  .sphere-2 {
    width: 60px;
    height: 60px;
    bottom: 15%;
    right: 2%;
  }

  .sphere-3 {
    width: 50px;
    height: 50px;
    top: auto;
    bottom: 5%;
    left: 5%;
  }

  /* Forgot password link */
  .d-flex.justify-content-between {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .d-flex.justify-content-between a {
    margin-top: 5px;
  }
}

/* Mobile Portrait (376px - 575px) */
@media (min-width: 376px) and (max-width: 575.98px) {
  .glass-card {
    padding: 1.5rem;
    width: 92%;
  }

  .sphere-1 {
    width: 120px;
    height: 120px;
    top: 5%;
    left: 5%;
  }

  .sphere-2 {
    width: 100px;
    height: 100px;
    bottom: 25%;
    right: 5%;
  }

  .sphere-3 {
    width: 70px;
    height: 70px;
    top: 75%;
    left: 8%;
  }
}

/* Landscape Mobile */
@media (max-width: 767.98px) and (orientation: landscape) {
  .login-page {
    min-height: auto;
    padding: 20px 0;
  }

  .glass-card {
    margin: 10px auto;
  }

  /* Spheres visible but smaller in landscape */
  .sphere-1 {
    width: 70px;
    height: 70px;
    top: 5%;
    left: 3%;
  }

  .sphere-2 {
    width: 55px;
    height: 55px;
    bottom: 10%;
    right: 3%;
  }

  .sphere-3 {
    width: 45px;
    height: 45px;
    top: auto;
    bottom: 10%;
    left: 3%;
  }
}

/* Show Password Button Fix */
.show-password {
  position: relative;
}

.show-password-btn {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--ruby-red);
  cursor: pointer;
  padding: 5px;
  margin-top: 12px;
}

.show-password-btn:hover {
  color: var(--elegant-fuchsia);
}

@media (max-width: 575.98px) {
  .show-password-btn {
    right: 10px;
    padding: 3px;
  }

  .show-password-icon {
    font-size: 14px;
  }
}


/* ============================================
   FIX: FORM ABOVE SPHERES (Z-INDEX)
   ============================================ */

/* Ensure glass card is always above spheres */
.glass-card {
  position: relative;
  z-index: 100 !important;
}

/* Spheres should be behind the form */
.sphere {
  z-index: 1 !important;
}

.sphere-1 {
  z-index: 1 !important;
}

.sphere-2 {
  z-index: 1 !important;
}

.sphere-3 {
  z-index: 1 !important;
}

/* Container should have proper stacking context */
.login-page .container {
  position: relative;
  z-index: 10;
}

.login-page .row {
  position: relative;
  z-index: 50;
}

/* Form wrapper */
.d-flex.justify-content-center.align-items-center {
  position: relative;
  z-index: 100;
}


/* ============================================
   SPHERES ALWAYS VISIBLE - ALL SCREEN SIZES
   ============================================ */

/* Mobile (max 575px) - Smaller spheres, repositioned */
@media (max-width: 575.98px) {
  .sphere {
    display: block !important;
    opacity: 0.7;
  }

  .sphere-1 {
    width: 90px;
    height: 90px;
    top: 3%;
    left: 3%;
  }

  .sphere-2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    right: 3%;
    top: auto;
  }

  .sphere-3 {
    width: 55px;
    height: 55px;
    top: auto;
    bottom: 8%;
    left: 5%;
  }

  .sphere img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }
}

/* Small Mobile (max 480px) */
@media (max-width: 480px) {
  .sphere-1 {
    width: 70px;
    height: 70px;
    top: 2%;
    left: 2%;
  }

  .sphere-2 {
    width: 55px;
    height: 55px;
    bottom: 18%;
    right: 2%;
  }

  .sphere-3 {
    width: 45px;
    height: 45px;
    bottom: 5%;
    left: 3%;
  }
}

/* Tablet (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .sphere-1 {
    width: 180px;
    height: 180px;
    top: 8%;
    left: 5%;
  }

  .sphere-2 {
    width: 140px;
    height: 140px;
    bottom: 30%;
    right: 8%;
  }

  .sphere-3 {
    width: 100px;
    height: 100px;
    top: 65%;
    left: 10%;
  }
}

/* Ensure login page has proper overflow */
.login-page {
  overflow: hidden;
  position: relative;
}

/* Make sure spheres don't cause horizontal scroll */
.sphere {
  overflow: hidden;
}


/* ============================================
   FIX: SPHERE IMAGES VISIBLE ON ALL SCREENS
   ============================================ */

/* Sphere images - always visible */
.sphere {
  display: block !important;
  visibility: visible !important;
  opacity: 0.85 !important;
  overflow: hidden;
}

.sphere img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Mobile - Spheres visible and positioned */
@media (max-width: 767.98px) {
  .sphere {
    display: block !important;
    visibility: visible !important;
  }

  .sphere-1 {
    width: 100px !important;
    height: 100px !important;
    top: 2% !important;
    left: 2% !important;
  }

  .sphere-2 {
    width: 80px !important;
    height: 80px !important;
    bottom: 15% !important;
    right: 2% !important;
    top: auto !important;
  }

  .sphere-3 {
    width: 65px !important;
    height: 65px !important;
    top: auto !important;
    bottom: 5% !important;
    left: 3% !important;
  }
}

/* Very small mobile */
@media (max-width: 480px) {
  .sphere-1 {
    width: 80px !important;
    height: 80px !important;
  }

  .sphere-2 {
    width: 65px !important;
    height: 65px !important;
  }

  .sphere-3 {
    width: 50px !important;
    height: 50px !important;
  }
}

/* Landscape - keep spheres visible */
@media (max-width: 767.98px) and (orientation: landscape) {
  .sphere {
    display: block !important;
    visibility: visible !important;
  }

  .sphere-1 {
    width: 60px !important;
    height: 60px !important;
  }

  .sphere-2 {
    width: 50px !important;
    height: 50px !important;
  }

  .sphere-3 {
    width: 40px !important;
    height: 40px !important;
  }
}


/* ============================================
   FIX: LOGIN FORM COMPACT + IMAGES VISIBLE
   ============================================ */

/* Mobile - Compact form */
@media (max-width: 767.98px) {
  .login-page {
    padding: 10px 5px !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
  }

  .login-page .container {
    padding: 10px !important;
  }

  .login-page .container.py-4 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Compact glass card */
  .glass-card {
    padding: 1.25rem !important;
    margin: 0.5rem !important;
    width: 90% !important;
    max-width: 350px !important;
  }

  /* Smaller title */
  .glass-card .title {
    font-size: 1.3rem !important;
    margin-bottom: 0.5rem !important;
  }

  .glass-card .text-muted.small {
    font-size: 11px !important;
    margin-bottom: 0.75rem !important;
  }

  /* Compact form groups */
  .glass-card .form-group {
    margin-bottom: 0.75rem !important;
  }

  .glass-card .form-group label {
    font-size: 11px !important;
    margin-bottom: 3px !important;
  }

  /* Smaller inputs */
  .glass-card .input-field {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  /* Compact button */
  .glass-card .btn-login {
    padding: 10px 16px !important;
    font-size: 13px !important;
    margin-top: 0.5rem !important;
  }

  /* Forgot password */
  .glass-card .d-flex.justify-content-between {
    margin-bottom: 0.5rem !important;
  }

  .glass-card .d-flex.justify-content-between a {
    font-size: 11px !important;
  }

  /* Sign up text */
  .glass-card .text-center.mt-4 {
    margin-top: 0.75rem !important;
  }

  .glass-card .text-center.mt-4 p {
    font-size: 11px !important;
    margin-bottom: 0 !important;
  }

  /* Spheres - positioned outside form area */
  .sphere-1 {
    top: 5% !important;
    left: 5% !important;
  }

  .sphere-2 {
    bottom: 8% !important;
    right: 5% !important;
    top: auto !important;
  }

  .sphere-3 {
    bottom: 25% !important;
    left: 3% !important;
    top: auto !important;
  }
}

/* Very small screens */
@media (max-width: 480px) {
  .glass-card {
    padding: 1rem !important;
    width: 92% !important;
    max-width: 320px !important;
  }

  .glass-card .title {
    font-size: 1.2rem !important;
  }

  .glass-card .input-field {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  .glass-card .btn-login {
    padding: 8px 14px !important;
    font-size: 12px !important;
  }

  /* Spheres smaller */
  .sphere-1 {
    width: 70px !important;
    height: 70px !important;
    top: 3% !important;
    left: 3% !important;
  }

  .sphere-2 {
    width: 55px !important;
    height: 55px !important;
    bottom: 5% !important;
    right: 3% !important;
  }

  .sphere-3 {
    width: 45px !important;
    height: 45px !important;
    bottom: 20% !important;
    left: 2% !important;
  }
}

/* Extra small (320px) */
@media (max-width: 375px) {
  .glass-card {
    padding: 0.875rem !important;
    width: 95% !important;
    max-width: 300px !important;
  }

  .glass-card .title {
    font-size: 1.1rem !important;
  }

  .glass-card .form-group {
    margin-bottom: 0.5rem !important;
  }

  .glass-card .input-field {
    padding: 7px 10px !important;
    font-size: 11px !important;
  }

  .glass-card .btn-login {
    padding: 7px 12px !important;
    font-size: 11px !important;
  }

  .sphere-1 {
    width: 55px !important;
    height: 55px !important;
  }

  .sphere-2 {
    width: 45px !important;
    height: 45px !important;
  }

  .sphere-3 {
    width: 35px !important;
    height: 35px !important;
  }
}


/* ============================================
   FINAL FIX: SPHERES VISIBLE AROUND FORM
   ============================================ */

/* Ensure spheres are always visible */
@media (max-width: 991.98px) {
  /* Login page container */
  .login-page {
    position: relative;
    overflow: visible !important;
  }

  /* Spheres - force visible */
  .login-page .sphere {
    display: block !important;
    visibility: visible !important;
    opacity: 0.9 !important;
    z-index: 5 !important;
    position: fixed !important;
  }

  /* Sphere 1 - Top left */
  .login-page .sphere-1 {
    position: fixed !important;
    top: 80px !important;
    left: 10px !important;
    width: 80px !important;
    height: 80px !important;
  }

  /* Sphere 2 - Bottom right */
  .login-page .sphere-2 {
    position: fixed !important;
    bottom: 100px !important;
    right: 10px !important;
    top: auto !important;
    width: 70px !important;
    height: 70px !important;
  }

  /* Sphere 3 - Bottom left */
  .login-page .sphere-3 {
    position: fixed !important;
    bottom: 30px !important;
    left: 15px !important;
    top: auto !important;
    width: 55px !important;
    height: 55px !important;
  }

  /* Glass card - centered and above spheres */
  .login-page .glass-card {
    position: relative !important;
    z-index: 10 !important;
  }
}

/* Very small mobile */
@media (max-width: 480px) {
  .login-page .sphere-1 {
    width: 60px !important;
    height: 60px !important;
    top: 70px !important;
    left: 5px !important;
  }

  .login-page .sphere-2 {
    width: 50px !important;
    height: 50px !important;
    bottom: 80px !important;
    right: 5px !important;
  }

  .login-page .sphere-3 {
    width: 40px !important;
    height: 40px !important;
    bottom: 20px !important;
    left: 10px !important;
  }
}

/* Extra small */
@media (max-width: 375px) {
  .login-page .sphere-1 {
    width: 50px !important;
    height: 50px !important;
  }

  .login-page .sphere-2 {
    width: 40px !important;
    height: 40px !important;
  }

  .login-page .sphere-3 {
    width: 35px !important;
    height: 35px !important;
  }
}