/* ====== AUTH PAGES ====== */

body {
    background-color: #f7f7f7; /* light gray */
}





/* ==========================================================
   UNIVERSAL MODAL BASE (Applies to all modals)
========================================================== */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 9999;
}

.modal.show {
  opacity: 1;
  pointer-events: all;
}

.modal.hide {
  opacity: 0;
  pointer-events: none;
}

 
.modal.show .modal-content { transform: scale(1); }
.modal.hide .modal-content { transform: scale(0.95); }


 

/* ==========================================================
   AUTH-THEMED MODALS (OTP & SUCCESS)
========================================================== */


#otpModal .modal-content,
#successModal .modal-content {
  width: 400px;
  max-width: 95%;
  padding: 30px 26px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(67,18,18,0.25);
  font-family: 'Rubik', sans-serif;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* OTP specific layout */
#otpModal .modal-content {
  min-height:  270px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Headings */
#otpModal .modal-content h3,
#successModal .modal-content h3 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: #c99014;
  margin-bottom: 5px;
}

/* Paragraphs */
#otpModal .modal-content p,
#successModal .modal-content p {
  font-size: 15px;
  color: #2e2e2e;
  margin-bottom: 14px;
  line-height: 1.1;
}

/* Input field (OTP) */
/* Input field (OTP) */
#otpModal input {font-family: monospace;
   height: 37px;
  width: 80%;
  border: 2px solid #461111;
  border-radius: 4px;
  font-size: 15px;
  padding: 0 12px;
  text-align: center;
  letter-spacing: 2px;
  margin-bottom: px; 
  transition: border-color 0.3s, box-shadow 0.3s;
  box-sizing: border-box; /* ✅ include padding & border inside width */
}

#otpModal input:focus {
  border-color: #c99014;
  box-shadow: 0 0 0 3px rgba(209, 161, 54, 0.25);
  outline: none; /* properly remove default outline */
}

/* === Auth-themed Buttons (OTP & Success Modals) === */
/* OTP error: overlay it so it doesn't push anything down */
#otpModal .error-otp{
  position: relative;      /* stays in flow anchor, but… */
  height: 0;               /* …takes up no vertical space */
  overflow: visible;       /* let text render outside */
  margin: 0;
  padding: 0;

  display: block;
  text-align: center;
  transform: translateY(6px); /* nudge just below the input visually */
  pointer-events: none;       /* don’t block clicks on button below */
font-size: 9px;
  color: #e74c3c;
   line-height: 1;
  font-family: 'Rubik', sans-serif;
}
 


#otpModal button,
#successModal button {
  height: 40px;
  width: 80%;
  padding: 2 18px;
  font-size: 15px;
  font-weight: 500;
  background: #431212;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-family: 'coda', sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  margin-top: 15px;

  line-height: 1;
}

#successModal button {
  width: 50%;
}


/* Font Awesome icon inside the buttons */
#otpModal button i,
#successModal button i {
  margin-right: 8px;
  font-size: 18px;
  vertical-align: middle;
}
#otpModal button i{
 
  font-size: 14px;
 
}


/* Hover effect */
#otpModal button:hover,
#successModal button:hover {
  background: #804838;
  transform: scale(1.02);
}


.otp-cancel-text {
  margin-top: 10px;
  font-size: 12px;
  color: #804838;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease;
}

.otp-cancel-text:hover {
  color: #c99014;
}


/* HTML: <div class="loader"></div> */
.custom-loader {
  height: 30px;
  width: 15px;
  aspect-ratio: 1;
  animation: l5 1s infinite linear alternate;

}

@keyframes l5 {
  0%   { box-shadow: 20px 0 #431212, -20px 0 #43121233; background: #431212; }
  33%  { box-shadow: 20px 0 #431212, -20px 0 #43121233; background: #43121233; }
  66%  { box-shadow: 20px 0 #43121233, -20px 0 #431212; background: #43121233; }
  100% { box-shadow: 20px 0 #43121233, -20px 0 #431212; background: #431212; }
}
/* keep your existing .custom-loader keyframes/colors */
#otpModal .custom-loader {
  display: block;
  margin: 10px auto 0;
}

/* ==========================================================
   MOBILE RESPONSIVE ADJUSTMENTS
========================================================== */
@media (max-width: 480px) {
  #otpModal .modal-content,
  #successModal .modal-content {
    width: 90%;
    padding: 22px 18px;
  }

  #otpModal .modal-content h3,
  #successModal .modal-content h3 {
    font-size: 18px;
  }
}

/* ==========================================================
   LOADER MODAL
========================================================== */
#loaderModal {
  background: rgba(255,255,255,0.85);
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 10000;
}

#loaderModal.active {
  opacity: 1;
  pointer-events: all;
}

/* Spinner */
.loader {
  width: 60px;
  height: 60px;
  --b: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 1px;
  background: conic-gradient(#0000 10%, #431212) content-box;
  -webkit-mask:
    repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),
    radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
  -webkit-mask-composite: destination-in;
          mask-composite: intersect;
  animation: spinLoader 1s infinite steps(10);
}

@keyframes spinLoader {
  to { transform: rotate(1turn); }
}


/* Smooth swap for the OTP button -> loader */
#otpModal #confirmOtpBtn {
  transition:
    transform .25s ease,
    opacity   .22s ease,
    width     .25s ease,
    padding   .25s ease,
    margin    .25s ease;
  will-change: transform, opacity, width, padding, margin;
}

/* On click: slide a bit to the right + fade + “close in” (shrink horizontally) */
#otpModal #confirmOtpBtn.is-exiting {
  transform: translateX(16px);
  opacity: 0;
  width: 0;                 /* collapses nicely */
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

/* Loader entrance animation */
#otpModal .custom-loader.slide-in {
  animation: otpLoaderIn .25s ease both;
}
@keyframes otpLoaderIn {
  from { transform: translateX(-12px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}










.input-error {
    border: 2px solid #e74c3c;
    background-color: #fdf2f2;
}

.form-group {
    margin-bottom: 28px;
    width: 100%;        /* ensure full-width container */
    text-align: left;   /* errors stay left-aligned */
}




/* ====== AUTH WRAPPER ====== */
.auth-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 380px;
    margin: 40px auto;
    padding: 0 15px;
    font-family: 'Rubik';
}
#registerSection .auth-box {
 
 
}


.form-group {
    margin-bottom: 15px;
}

.auth-wrapper h1 {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 35px;
    font-weight: 650;
    color: #431212;
    text-align: center;
    margin: 0 0 15px 0; /* no top margin, only 15px bottom */
}

/* ====== AUTH BOX ====== */
.auth-box {
    background: #fff;
    padding: 25px 28px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(67, 18, 18, 0.22);
    width: 100%;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.auth-box:hover {
    
    box-shadow: 0 6px 20px rgba(67, 18, 18, 0.32);
}

.auth-box h2 {
    display: block;
    font-size: 21px;
    font-weight: 650;
    color: #431212; /* your theme dark red */
    text-align: center;
    margin: 0 0 20px 0;
    font-family: 'Rajdhani', sans-serif;
    line-height: 1.3;
}

/* ====== USER ICON ====== */
.user-icon {
    text-align: center;
    margin-bottom: 18px;
}

.user-icon i {
    font-size: 70px;
    color: #d1a136;
}

/* ====== INPUTS ====== */
.input-with-icon {
    position: relative;
    width: 100%;
}

.input-with-icon i {
    position: absolute;
    right: 12px;
    top: 50%;                      /* center vertically */
    transform: translateY(-50%);
    color: #804838;
    font-size: 16px;
    line-height: 1;
    height: 16px;
    pointer-events: auto;          /* ✅ allow click */
    cursor: pointer;               /* ✅ show it’s clickable */
    transition: color 0.2s ease, transform 0.2s ease;
}

.input-with-icon i:hover {
    transform: translateY(-50%) scale(1.05);
    color: #a35a3e;
}

.auth-box input {
    width: 100%;
    height: 40px; /* 🔑 fixed height for consistent centering */
    padding: 0 38px 0 12px;
    border: 1px solid #cbbbbb;
    border-radius: 6px;
    font-size: 15px;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
    line-height: 1.4;
}

.auth-box input:focus {
    border-color: #d1a136;
    box-shadow: 0 0 0 3px rgba(209, 161, 54, 0.25);
    outline: none;
}



/* ====== SELECT (Dropdown) ====== */
.auth-box select {
    width: 100%;
    height: 44px; /* Match input height */
    padding: 0 38px 0 12px; /* Leave space for icon */
    border: 1px solid #cbbbbb;
    border-radius: 6px;
    font-size: 15px;
    background-color: #fff;
    color: #333;
    box-sizing: border-box;
    appearance: none; /* Removes default OS styling */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none; /* Hide default arrow for consistency */
    transition: border-color 0.3s, box-shadow 0.3s;
    line-height: 1.4;
}

/* Focus effect to match inputs */
.auth-box select:focus {
    border-color: #d1a136;
    box-shadow: 0 0 0 3px rgba(209, 161, 54, 0.25);
    outline: none;
}

/* Optional: custom dropdown arrow using a pseudo-element */
.input-with-icon select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 20 14'%3E%3Cpath fill='%23804838' d='M5.516 0L10 5.208 14.484 0 16 1.621 10 8 4 1.621z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 38px center; /* Space for icon */
    background-size: 12px;
}




/* ====== BUTTONS ====== */
.auth-box button,
.auth-box #forgotForm button {
    width: 100%;
    margin: 10px 0;
    padding: 12px;
    background: #431212;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    font-family: 'Rajdhani', sans-serif;
}

.auth-box button:hover,
.auth-box #forgotForm button:hover {
    background: #804838;
    transform: scale(1.02);
}

.auth-box button i {
    margin-right: 6px;
}

/* ====== LINKS ====== */
.auth-box a {
    display: inline-block;
    margin-top: 8px;
    color: #804838;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s;
}

.auth-box a:hover {
    color: #d1a136;
}

/* ====== ERROR / SUCCESS ====== */
.error-msg {
    color: #b22222;
    font-size: 13px;
    margin-top: 4px;
    text-align: left;
}

.auth-box .error {
    background: #fce8e8;
    color: #431212;
    padding: 8px;
    border: 1px solid #b22222;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 14px;
    text-align: left;
}

.auth-box .success {
    background: #f0f8f0;
    color: #2f6b2f;
    padding: 8px;
    border: 1px solid #2f6b2f;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 14px;
    text-align: left;
}

/* ====== MOBILE ====== */
@media (max-width: 480px) {
    .auth-wrapper {
        max-width: 100%;
        padding: 15px;
    }

    .auth-box {
        padding: 20px;
    }

    .auth-wrapper h1 {
        font-size: 28px;
    }

    .auth-box h2 {
        font-size: 18px;
    }

    .auth-box input,
    .auth-box button {
        font-size: 15px;
        padding: 12px;
    }
}

























/* Hidden state fallback */
.hidden {
    display: none;
}

/* Error styling (reuses your theme) */
.error-msg {
    color: #b22222;
    font-size: 13px;
    margin-top: 4px;
}



/* Forgot Password Form (hidden by default) */
/* Forgot Password Form (hidden by default) */
#forgotForm {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  padding: 0 15px;
  border-radius: 8px;
  background: #f9f9f9;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  transition: all 0.5s ease-in-out;
}

#forgotForm.active {
  opacity: 1;
     max-height: 400px; /* enough room for content */

    padding: 15px;
  margin-top: 20px;
}



/* =========================
   SLIDE / REVEAL GROUPS
========================= */
/* Hidden */
.form-group.name-slide,
.form-group.country-field-group {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-6px);
  margin-bottom: 0;
  transition:
    max-height 0.45s ease,
    opacity 0.35s ease,
    transform 0.35s ease,
    margin-bottom 0.35s ease;
  will-change: max-height, opacity, transform, margin-bottom;
}

/* Visible */
.form-group.name-slide.visible,
.form-group.country-field-group.visible {
  max-height: 160px; /* adjust if any field is taller */
  opacity: 1;
  transform: translateY(0);
  margin-bottom: 16px;
    overflow: visible;

}

/* keep inner width tidy */
.form-group.name-slide .input-with-icon,
.form-group.country-field-group .input-with-icon {
  width: 100%;
}

/* error text */
.form-group .error-msg {
  font-size: 0.85rem;
  color: #d9534f;
  margin-top: 4px;
}

/* Allow dropdowns to overflow out of cards/rows (no stacking traps) */
.auth-box { overflow: visible; }
.form-group,
.input-with-icon,
.country-field,
.country-select-wrapper { position: static; z-index: auto; overflow: visible; }

/* =========================
   COUNTRY DROPDOWN
========================= */
.country-field { position: relative; width: 100%; }

/* wrapper sits above neighbors only while open */
.country-select-wrapper {
  position: relative;
  width: 100%;
  overflow: visible;
}
.country-select-wrapper.dd-open { z-index: 10000; }

/* input (apply class="country-search" on each custom input) */
.country-select-wrapper .country-search {
  width: 100%;
  height: 44px;
  padding: 0 38px 0 12px;
  border: 1px solid #cbbbbb;
  border-radius: 6px;
  font-size: 15px;
  color: #333;
  background: #fff;
  box-sizing: border-box;
  line-height: 1.4;
  font-family: 'Rubik', sans-serif;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 20 14'%3E%3Cpath fill='%23804838' d='M5.516 0L10 5.208 14.484 0 16 1.621 10 8 4 1.621z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 38px center;
  background-size: 12px;
}
.country-select-wrapper .country-search:focus {
  border-color: #d1a136;
  box-shadow: 0 0 0 3px rgba(209,161,54,0.25);
  outline: none;
}

/* when selected, hide placeholder + make room for overlay */
.country-select-wrapper .country-search.has-selection { padding-left: 35px; caret-color: transparent; }
.country-select-wrapper .country-search.has-selection::placeholder { color: transparent !important; }

/* dropdown */
.country-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #cbbbbb;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(67,18,18,0.15);
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: all 0.25s ease;
  z-index: 11000; /* sits above email/password when open */
}
.country-list.show {
  max-height: 220px;
  overflow-y: auto;
  opacity: 1;
  transform: translateY(0);
}

/* scrollbar */
.country-list::-webkit-scrollbar { width: 6px; }
.country-list::-webkit-scrollbar-thumb { background: #cbbbbb; border-radius: 4px; }

/* options */
.country-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 15px;
  color: #431212;
  background: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.country-list li:hover { background: #f9f3e6; transform: translateX(3px); }

/* overlayed selected value */
.selected-country-display {
  position: absolute;
  top: 0;
  left: 12px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  font-size: 15px;
  color: #333;
}
.country-flag {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  object-fit: cover;
}

/* ensure animated groups never clip the dropdown */
.form-group.country-field-group,
.form-group.country-field-group.visible { overflow: visible; position: relative; }




/* Make the whole auth area a new stacking root so our z-index wins */
.auth-container { isolation: isolate; overflow: visible; }
.auth-slider, .auth-box { overflow: visible; }

/* Default rows shouldn't create their own high stack */
.form-group, .input-with-icon { position: relative; z-index: auto; }

/* Boost the active row only while open */
.form-group.dd-host-open { position: relative; z-index: 10005 !important; }
.country-select-wrapper.dd-open  { position: relative; z-index: 10010 !important; }
.country-select-wrapper.dd-open .country-list { z-index: 10020 !important; }

/* Chrome autofill draws a painted layer that can look "above" siblings.
   Neutralise that so the dropdown can visually sit on top. */
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
          box-shadow: 0 0 0px 1000px #fff inset !important;
  -webkit-text-fill-color: #333 !important;
  caret-color: auto;
  transition: background-color 9999s ease-out 0s; /* suppress yellow flash */
}
/* FORCE FLAGS TO ALWAYS BE FLAT + CRISP (NO WAVY EFFECT) */
.country-flag,
.selected-country-display img {
    image-rendering: crisp-edges;      /* Most modern browsers */
    image-rendering: -webkit-optimize-contrast; /* Safari */
    image-rendering: pixelated;        /* fallback */
    transform: none !important;        /* No distort transforms */
    filter: none !important;           /* Remove anti-alias smoothing */
    border-radius: 2px;
}

/* Ensure fixed ratio – no stretching */
.country-flag,
.selected-country-display img {
    width: 20px;
    height: 14px;
    object-fit: cover; /* fill area without warping */
    background-color: transparent;
}





.auth-container {
  position: relative;
  width: 100%;
  max-width: 60%;   /* adjust for your design */
  overflow: hidden;
  margin: 0 auto;
}

.auth-slider {
  display: flex;
  width: 200%; /* two panels side-by-side */
    transition: transform 0.6s ease-in-out, height 0.5s ease;
  height: auto; /* let height grow naturally */
}


/* Start with login visible */
.auth-container.show-register .auth-slider {
  transform: translateX(-50%);
}


.auth-container.show-register #loginSection {
  opacity: 0.3;
}

.auth-container:not(.show-register) #registerSection {
  opacity: 0.4;
}


/* === Animated toggle fields: company/individual sections === */

/* 1) Keep your normal buttons styled, but exclude the Google one */
.auth-box button:not(.oauth-google-box),
.auth-box #forgotForm button {
  background: #431212;
  color: #ffffff;
}

/* 2) Force the Google button to be white (and stay white) */
.oauth-google-box{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; max-width:300px; height:44px;
  margin:12px auto 16px;

  background:#fff !important;           /* <<< always white */
  color:#202124 !important;
  border:1px solid #431212;
  border-radius:6px;
  box-shadow:none;
  appearance:none;                       /* avoid UA styles */
  -webkit-appearance:none;

  font:500 14px/1.2 'Rubik',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  cursor:pointer;
  transition: box-shadow .15s ease, transform .02s ease;
}
 
 
.oauth-google-box:hover{ box-shadow:0 1px 2px rgba(0,0,0,.08); }
.oauth-google-box:active{ transform:translateY(1px); }
.oauth-google-box:focus{ outline:3px solid #e8f0fe; outline-offset:2px; }

/* The icon: force exact size + remove baseline spacing */
.oauth-google-box .g-icon{
  width:18px; height:18px; min-width:18px; min-height:18px;
  display:block; /* avoids inline SVG baseline gap */
  vertical-align:middle; /* extra safety if inline */
}

/* Text stays tidy */
.oauth-google-box .g-text{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  line-height:1.15;
}

/* Keep Google’s injected button rendered but visually hidden */
#gsi-login-hidden > div,
#gsi-register-hidden > div{
  position:absolute !important; width:1px !important; height:1px !important;
  margin:0 !important; padding:0 !important; border:0 !important;
  clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important;
  overflow:hidden !important; white-space:nowrap !important;
}

/* Your divider is fine; optional: nudge spacing if needed */
.oauth-divider{ width:100%; max-width:300px; margin:14px auto 10px; display:flex; align-items:center; justify-content:center; }
.oauth-divider::before,.oauth-divider::after{ content:""; flex:1; height:1px; background:#e4d6c9; }
.oauth-divider>span{ padding:0 10px; background:#fff; font:13px 'Rubik',sans-serif; color:#6a5243; }
/* Center the divider + Google button inside the auth box */
.auth-box .oauth-divider,
.auth-box .oauth-google-box {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
}









/* ===== Floating labels (fixed triggers) ===== */
.auth-box .form-group { position: relative; }
.auth-box .input-with-icon,
.auth-box .country-select-wrapper { position: relative; }

/* Give space for the label to sit inside */
.auth-box .input-with-icon input,
.auth-box .input-with-icon select,
.auth-box .country-select-wrapper .country-search {
 
}

/* Base label position (centered until float) */
.auth-box .float-label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 4px;
  font-size: 14px;
  color: #7b6a4c;
  background: transparent;
  line-height: 1;
  pointer-events: none;
  transition: top .16s ease, transform .16s ease, font-size .16s ease, color .16s ease, background .16s ease;
}

/* Float only when focused or has-value (NO :not(:placeholder-shown)) */
.auth-box .form-group input:focus + .float-label,
.auth-box .input-with-icon input:focus + .float-label,
.auth-box .input-with-icon input.has-value + .float-label,
.auth-box .input-with-icon select.is-focused + .float-label,
.auth-box .input-with-icon select.has-value + .float-label,
.auth-box .country-select-wrapper .country-search:focus + .float-label,
.auth-box .country-select-wrapper .country-search.has-value + .float-label {
  top: -6px;
  transform: none;
  font-size: 11.5px;
  color: #8b5e3c;
  background: #fff; /* sits above border nicely */
}

/* Keep your icons as-is */
.auth-box .input-with-icon > i,
.auth-box .country-field .fa {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}


/* keep label floated when a country is selected via overlay */
.country-select-wrapper .country-search.has-selection + .float-label,
.country-select-wrapper .float-label.float {
  top: -6px;
  transform: none;
  font-size: 11.5px;
  color: #8b5e3c;
  background: #fff;
}


/* Make the FULL director-cell container red when invalid */
.floating.director-cell.input-error {
  border: 1px solid #e53935 !important;
  background: #fff2f2 !important;
  border-radius: 8px;
  padding: 6px;
  z-index: 2222222;
}

/* Make the FULL director-cell container red when invalid */
.floating .input-error {
  border: 1px solid #e53935 !important;
  background: #fff2f2 !important;
  border-radius: 8px;
  padding: 6px;
  z-index: 2222222;
}