/* === Layout === */
.signup-body {
  background-color: #f3f4f6;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding:1rem;
}

/* === Container === */
.signup-container {
  background-color: white;
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  width: 100%;
  max-width: 28rem;
  padding: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  position: relative;
}

/* Expand to 70% of screen on tablets */
@media (min-width: 640px) and (max-width: 1023px) {
  .signup-container {
    width: 80vw !important;     /* 70 % of viewport */
    max-width: none !important; /* remove 28 rem cap */
    padding: 2rem;
  }
}

/* Expand to ~34rem on desktops */
@media (min-width: 1024px) {
  .signup-container {
    max-width: 34rem;
  }
}

/* dropdown list always on top & hidden by default */
.signup-dropdown-list{display:none;z-index:9999;}
.signup-dropdown-list.show{display:block;}

/* Avatar */
.signup-avatar {
  position: absolute;
  top: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
}
.signup-avatar img {
  height: 80px;
  width: 80px;
  border-radius: 9999px;
  border: 4px solid white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Inputs */
.signup-input,
.signup-input-half {
  width: 100%;
  border: 1px solid #d1d5db;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

/* Flex columns */
.signup-flex-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 640px) {
  .signup-flex-row {
    flex-direction: row;
  }
}

/* Button */
.signup-btn {
  width: 100%;
  background-color: #1d4ed8;
  color: white;
  padding: 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color 0.2s ease;
}
.signup-btn:hover {
  background-color: #1e40af;
}

/* Dropdown styling */
.signup-dropdown-btn {
  width: 100%;
  border: 1px solid #d1d5db;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Dropdown list */
.signup-dropdown-list {
  position: absolute;
  z-index: 50;
  background-color: white;
  margin-top: 0.25rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  width: 100%;
  max-height: 15rem;
  overflow-y: auto;
  display: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  z-index: 9999;
}
.signup-dropdown-list.show {
  display: block;
}
.signup-dropdown-list li {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.signup-dropdown-list li:hover {
  background-color: #f3f4f6;
}

/* Caption */
.signup-caption {
  font-size: 0.75rem;
  line-height: 1.25rem;
}

/* center captions on all viewports */
.signup-caption {
  font-size: 0.75rem;
  line-height: 1.25rem;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

/* add a little padding on the sides for very small screens */
@media (max-width: 639px) {
  .signup-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* expand on tablets */
@media (min-width: 640px) and (max-width: 1023px) {
  .signup-container {
    width: 80vw;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* desktop max-width */
@media (min-width: 1024px) {
  .signup-container {
    max-width: 34rem;
  }
}


/* Dropdown button */
.signup-dropdown-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
}

/* Hidden list */
.signup-dropdown-list {
  display: none;
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  max-height: 15rem;
  overflow-y: auto;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  z-index: 1000;
}
.signup-dropdown-list.show {
  display: block;
}

/* List items */
.signup-dropdown-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
}
.signup-dropdown-list li img {
  width: 20px;
  height: 12px;
  object-fit: cover;
  border-radius: 2px;
}

/* hide list by default */
.signup-dropdown-list {
  opacity: 0;
  pointer-events: none;
}

/* show on .show */
.signup-dropdown-list.show {
  opacity: 1;
  pointer-events: auto;
}

/* ─── Country dropdown full-width + flag alignment ─── */
#country-dropdown {
  position: relative; /* ensure the UL can absolutely position under it */
  width: 100%;
}

/* The button that shows the selected country */
.signup-dropdown-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
}

/* Make the inside span lay out flag + name on one line */
#selected-country {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* If you’re inserting an <img> for the flag, size it here */
#selected-country img {
  display: inline-block;
  width: 20px;
  height: auto;
}

/* The dropdown list itself, full width of the button */
.signup-dropdown-list {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  width: 100%;
  max-height: 15rem;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  z-index: 9999;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Each list item: full width, flag + label aligned horizontally */
.signup-dropdown-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
}

.signup-dropdown-list li:hover {
  background: #f3f4f6;
}




/* Desktop / laptop default */
body.signup-hero{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:4rem 1rem;
  box-sizing:border-box;

  /* desktop landscape */
  background-image: url("/public/assets/uploads/bg_2.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Tablets */
@media (max-width: 1024px){
  body.signup-hero{
    background-image: url("/public/assets/uploads/bg_2.jpg");
    background-position: center top;   /* keep the face visible */
    background-attachment: scroll;     /* smoother on mobile */
  }
}

/* Phones */
@media (max-width: 640px){
  body.signup-hero{
    background-image: url("/public/assets/uploads/bg3.jpg");
    background-position: center top;
    background-attachment: scroll;
    padding: 3rem 0.75rem;              /* tighter spacing on small screens */
  }
}

/* Optional: sharper image on high-DPI phones */
@media (max-width:640px) and (min-resolution: 2dppx){
  body.signup-hero{
    background-image: image-set(
      url("/public/assets/uploads/bg3.jpg") 1x,
      url("/public/assets/uploads/bg3.jpg") 2x
    );
  }
}

/* Optional: portrait-specific tweak */
@media (orientation: portrait){
  body.signup-hero{ background-position: 50% 15%; }
}


@media (max-width: 420px) {
  body.signup-hero {
    padding-top: 2rem;
  }
}



/* ────────────────────────────────────────────────
   TABLETS  &  SMALL LAPTOPS   ( 768 – 1199 px )
   iPad Air, iPad Pro, Surface Pro 7, ZenBook Fold
   ────────────────────────────────────────────────*/

/* 1️⃣  Generic “tablet-up” defaults  – start at 768 px */
@media (min-width: 768px) {
  .signup-container {
    max-width: 30rem;          /* 480 px – wider than phone view  */
    padding: 2.25rem 2.5rem;   /* a little more breathing room    */
  }
  .signup-flex-row   { gap: 1rem; }      /* nicer two-column gap  */
}

/* 2️⃣  Wider tablets  ( 820 – 899 px: iPad Air in portrait )      */
@media (min-width: 820px) {
  .signup-container { max-width: 32rem; }  /* 512 px */
}

/* 3️⃣  Large tablets / small laptops ( 900 – 1019 px )
       Surface Pro 7, ZenBook Fold half-fold                  */
@media (min-width: 900px) {
  .signup-container { max-width: 34rem; }  /* 544 px */
}

/* 4️⃣  iPad Pro & similar ( 1020 – 1199 px )                  */
@media (min-width: 1020px) {
  .signup-container { max-width: 36rem; }  /* 576 px */
}

/* 5️⃣  Extras that look nicer once the card grows            */
@media (min-width: 768px) {
  /* Headline & button scale up just a touch */
  .signup-container h2       { font-size: 1.15rem; }
  .signup-btn                { font-size: 1.05rem; }

  /* Half-inputs keep equal width inside their row      */
  .signup-input-half         { flex: 1 1 0; }
}

/* That’s it – no changes to scrolling or the hero wrapper */

/* ─────────────────────────────────────────────
   OPTIMISED “LARGE-TABLET” BREAKPOINTS
   (everything between 1 024 px and 1 359 px)
   iPad Pro, Surface-type 3:2 screens, etc.
   ────────────────────────────────────────────*/

/* 1️⃣  iPad Pro portrait ( 1024 – 1199 ) */
@media (min-width:1024px) and (max-width:1199px){
  .signup-container{
    max-width:40rem !important;   /* 672 px – fills space better   */
    padding:2.5rem 3rem !important;
    max-height: 150rem !important;
  }
}

/* 2️⃣  1 200 – 1 359 px  (small-laptop / 3:2 tablets in landscape) */
@media (min-width:1200px) and (max-width:1359px){
  .signup-container{
    max-width:46rem !important;   /* 736 px                       */
    padding:3rem 3.25rem !important;
  }
}

/* 3️⃣  tidy things that grow with the card                       */
@media (min-width:1024px){
  .signup-container h2       { font-size:1.25rem !important; }
  .signup-btn                { font-size:1.1rem  !important; }
  .signup-flex-row           { gap:1.25rem      !important; } /* nicer columns */
}

/* ─────────────────────────────────────────────
   10-inch / 11-inch tablets ‒ portrait (1024-1199 px)
   iPad Air, iPad Pro, Surface Pro 7, etc.
   ────────────────────────────────────────────*/
@media (min-width:1024px) and (max-width:1199px){
  .signup-container{
    /* CARD WIDTH  – roughly 80 % of viewport */
    max-width:48rem !important;     /* 768 px */

    /* ROOMIER INNER PADDING  */
    padding:3rem 3.25rem !important;

    /* remove any accidental height ceiling         */
    max-height:none !important;     /* let content decide */
  }
}

/* (optionally) landscape small-laptops / 3:2 slates 1200-1359 px */
@media (min-width:1200px) and (max-width:1359px){
  .signup-container{
    max-width:52rem !important;     /* 832 px */
    padding:3.25rem 3.5rem !important;
  }
}

/* ─── Blue outline around the signup card ─── */
.signup-container {
  border: 2px solid #2563eb !important;  /* vivid, Tailwind’s blue-600 */
  border-radius: 0.75rem !important;     /* matching your corner radius */
  padding: 2rem !important;              /* ensure your internal spacing */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important; /* subtle lift */
}

/* auth-signup.css */

/* make the container a positioning context */
.signup-container {
  position: relative;
}

/* pull the avatar out of the border and center it */
.signup-avatar {
  position: absolute;
  top: -3rem;               /* adjust to half of avatar’s height (e.g. 64px/2 = 32px = 2rem) */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;               /* sit above the border */
}

/* ensure the container’s border doesn’t clip the avatar */
.signup-container {
  overflow: visible;
}

/* ─── Tighter spacing & smaller heading ───────────────────────────────────────── */
.signup-container .text-center {
  margin-top: 1rem;         /* reduce space above the heading block */
}

/* Target specifically the signup welcome */
.signup-container h2 {
  margin-top: 0.25rem;      /* collapse gap under avatar */
  font-size: 1.125rem;      /* about 18px, smaller than default */
  line-height: 1.3;
}

/* On very small devices, shrink a bit more */
@media (max-width: 375px) {
  .signup-container h2 {
    font-size: 1rem;        /* about 16px */
    margin-top: 0.2rem;
  }
}

.signup-container .text-center h2 {
  font-size: 1rem;
  line-height: 1.2;
  margin-top: 0.25rem;
}

@media (max-width: 375px) {
  .signup-container .text-center h2 {
    font-size: 0.875rem;
  }
}




/* ─────────────────────────── Signup Container ────────────────────────── */
/* Base: mobile-first centering */
.signup-body {
  background: #f3f4f6;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.signup-container {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  width: 90%;
  max-width: 25rem;    /* ~400px */
  margin-top: 2rem;
  padding: 2rem 1.75rem 2.5rem;
  position: relative;
}

/* Small tablets (≥600px) */
@media (min-width: 600px) {
  .signup-container {
    width: 85%;
    max-width: 32rem;  /* ~512px */
    padding: 2.5rem 2.5rem 3rem;
  }
}

/* iPad portrait (≥768px) */
@media (min-width: 768px) {
  .signup-container {
    width: 75%;
    max-width: 36rem;  /* ~576px */
    padding: 3rem 3rem 3.5rem;
  }
}

/* iPad landscape & small desktop (≥1024px) */
@media (min-width: 1024px) {
  .signup-container {
    width: 60%;
    max-width: 40rem;  /* ~640px */
    padding: 3.5rem 4rem 4rem;
  }
}


.notification {
  padding: 0.75em 1em;
  margin: 1rem auto 1em;   /* <──  auto left + right  */
  border-radius: 4px;
  font-weight: bold;
  display: none;
  text-align: center;   /* optional: center the text too */
}

.notification.error   { background:#fee; color:#900; }
.notification.success { background:#efe; color:#090; }



/* —— PayBridge signup card ————————————————————— */
.signup-container {
  position: relative;
  width: 100%;
  max-width: 28rem;                 /* 448 px */
  padding: 2.75rem 2rem 2.25rem;
  border-radius: 1.25rem;           /* softer corners */
  background: #ffffff;
  box-shadow: 0 12px 40px -6px rgba(0, 0, 0, 0.15);

  /* 1️⃣ gradient border via mask trick */
  border: 2px solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-image:
    linear-gradient(#fff 0 0),                           /* inner */
    linear-gradient(135deg,#7f66ff 0%,#245dff 100%);     /* border */
}

/* subtle paper-grain texture inside */
.signup-container::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url("/static/img/paper-noise.png") center/120%;
  mix-blend-mode: overlay;
  opacity: 0.15;
  pointer-events: none;
}

/* —— avatar badge (floats above the card) ———————— */
.signup-avatar {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #ffffff;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  background: #f4f4f4;
}
.signup-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* —— headings inside the card ——————————————— */
.signup-container h2 {
  margin-top: 2.5rem;               /* clears avatar */
  font-size: 1.35rem;
  font-weight: 700;
  text-align: center;
  color: #111827;
}

/* optional accent colour for “PayBridge” word */
.signup-container h2 span {
  color: #002ca3;
}


/* Base input style */
.signup-input,
.signup-input-half {
  color: black;
}

/* Icons spacing */
.icon-username,
.icon-firstname,
.icon-lastname,
.icon-email,
.icon-id,
.icon-address,
.icon-password {
  padding-left: 44px; /* Space for the icon */
  background-repeat: no-repeat;
  background-position: 12px 50%;
  background-size: 18px 18px;
}

/* Username (person icon) */
.icon-username {
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' fill='%23007BFF' viewBox='0 0 24 24'>\
  <path d='M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5-5 2.3-5 5 2.3 5 5 5zm0 2c-3.3 0-10 1.7-10 5v3h20v-3c0-3.3-6.7-5-10-5z'/>\
  </svg>");
}

/* Email */
.icon-email {
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' fill='%23007BFF' viewBox='0 0 24 24'>\
  <path d='M2 6a2 2 0 012-2h16a2 2 0 012 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V6zm2 0l8 5 8-5H4zm16 12V8l-8 5-8-5v10h16z'/>\
  </svg>");
}

/* ID (card icon) */
.icon-id {
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' fill='%23007BFF' viewBox='0 0 24 24'>\
  <path d='M2 4h20v16H2V4zm2 2v12h16V6H4zm2 2h6v2H6V8zm0 4h10v2H6v-2z'/>\
  </svg>");
}

/* Address (map marker) */
.icon-address {
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' fill='%23007BFF' viewBox='0 0 24 24'>\
  <path d='M12 2a7 7 0 00-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 00-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z'/>\
  </svg>");
}

/* Password (lock) */
.icon-password {
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' fill='%23007BFF' viewBox='0 0 24 24'>\
  <path d='M12 1a5 5 0 00-5 5v3H6a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2v-8a2 2 0 00-2-2h-1V6a5 5 0 00-5-5zm-3 8V6a3 3 0 016 0v3H9z'/>\
  </svg>");
}

/* Focus state */
.signup-input:focus,
.signup-input-half:focus {
  outline: none;
  border-color: #007BFF;
}










/* ====== TOKENS ====== */
:root{
  --bg1:#0b1226; --bg2:#131f3a;
  --card:#fff; --text:#0f172a; --muted:#64748b;
  --brand-600:#2563eb; --brand-700:#1d4ed8;
  --ring: rgba(37,99,235,.18);
  --shadow: 0 10px 30px rgba(2,8,23,.12);
}

/* ====== PAGE BG ====== */
.signup-body.signup-hero{
  min-height:100dvh; margin-top:15px;
  display:grid; place-items:center;
  background:
    radial-gradient(1200px 600px at 85% 10%, rgba(37,99,235,.08), transparent 60%),
    radial-gradient(1000px 700px at 10% 90%, rgba(59,130,246,.06), transparent 60%),
    linear-gradient(135deg, var(--bg1), var(--bg2));
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial;
  color:var(--text);
}

/* ====== CARD ====== */
.signup-container{
  width:min(94vw, 520px);
  background:var(--card);
  border-radius:18px;
  padding:28px 26px 24px;
  border:1px solid rgba(15,23,42,.06);
  box-shadow:var(--shadow);
  position:relative;
  text-align:center;
}

/* ====== AVATAR ====== */
.signup-avatar{
  width:72px;height:72px;margin:-56px auto 6px;
  border-radius:999px; display:grid; place-items:center;
  background:linear-gradient(180deg,#fff 30%, #f8fafc);
  box-shadow:0 8px 20px rgba(2,8,23,.12);
  border:3px solid #fff;
}
.signup-avatar img{width:60px;height:60px;border-radius:999px;display:block}

/* ====== TYPO / CAPTION ====== */
.signup-container h2{ margin:6px 0 2px; font-size:22px; letter-spacing:.2px }
.signup-caption{ color:var(--muted); font-size:.9rem }

/* ====== NOTIFICATION ====== */
.notification{
  margin:12px 0 4px; padding:10px 12px;
  border-radius:10px; font-size:14px; text-align:left;
  background:#eff6ff; border:1px solid #bfdbfe; color:#1e3a8a;
}

/* ====== FORM LAYOUT ====== */
.signup-flex-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px }

/* ====== INPUTS ====== */
.signup-input, .signup-input-half, .signup-dropdown-btn, select.signup-input-half{
  width:100%; height:46px; margin-top:10px;
  padding:0 14px; border:1px solid #e5e7eb; border-radius:12px;
  background:#fff; font-size:15px;
  transition:border-color .15s ease, box-shadow .15s ease, transform .08s ease;
  box-shadow:inset 0 1px 0 rgba(2,8,23,.03);
}
.signup-input::placeholder, .signup-input-half::placeholder{ color:#9aa3af }
.signup-input:focus, .signup-input-half:focus, .signup-dropdown-btn:focus,
select.signup-input-half:focus{
  outline:none; border-color:var(--brand-600);
  box-shadow:0 0 0 3px var(--ring); transform:translateY(-1px);
}

/* ====== ICONS ON INPUTS (blue) ====== */
.signup-input.icon-username,
.signup-input.icon-email,
.signup-input.icon-address,
.signup-input.icon-password,
.signup-input-half.icon-id{
  padding-left:42px;
  background-repeat:no-repeat;
  background-position:12px 50%;
  background-size:20px 20px;
}
/* username */
.signup-input.icon-username{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232563EB'><path d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-3.9 0-10 2-10 6v2h20v-2c0-4-6.1-6-10-6Z'/></svg>");
}
/* email */
.signup-input.icon-email{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232563EB'><path d='M2 6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2Zm2 0 8 5 8-5H4Zm16 12V8l-8 5-8-5v10Z'/></svg>");
}
/* id card */
.signup-input-half.icon-id{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232563EB'><path d='M2 4h20v16H2V4Zm2 2v12h16V6H4Zm2 2h6v2H6V8Zm0 4h10v2H6v-2Z'/></svg>");
}
/* address */
.signup-input.icon-address{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232563EB'><path d='M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 0 0-7-7Zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z'/></svg>");
}
/* password (both fields share class) */
.signup-input.icon-password{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232563EB'><path d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5Zm-3 8V6a3 3 0 0 1 6 0v3H9Z'/></svg>");
}

/* ====== COUNTRY DROPDOWN (class-based, no HTML change) ====== */
.signup-dropdown-btn{
  display:flex; justify-content:space-between; align-items:center;
  background:#fff;
}
.signup-dropdown-list{
  position:absolute; top:110%; left:0; right:0;
  opacity:0; pointer-events:none;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  max-height:15rem; overflow:auto; box-shadow:0 10px 24px rgba(2,8,23,.12);
  margin:0; padding:.25rem 0; z-index:20; transition:opacity .15s ease;
}
.signup-dropdown-list.show{ opacity:1; pointer-events:auto; }
.signup-dropdown-list li:hover{ background:#f8fafc }

/* ====== BUTTON ====== */
.signup-btn{
  width:100%; height:48px; margin-top:6px;
  border:0; border-radius:12px; font-weight:700; font-size:15px; color:#fff;
  background:linear-gradient(180deg,var(--brand-600),var(--brand-700));
  box-shadow:0 10px 18px rgba(37,99,235,.22), inset 0 -2px 0 rgba(255,255,255,.15);
  cursor:pointer; transition:transform .08s ease, filter .15s ease, box-shadow .15s ease;
}
.signup-btn:hover{ filter:brightness(1.03); box-shadow:0 12px 22px rgba(37,99,235,.28) }
.signup-btn:active{ transform:translateY(1px) }

.btn-spinner{
  width:18px;height:18px;border:3px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:999px;margin-right:8px;
  animation:spin .8s linear infinite;
}
.hidden{ display:none } @keyframes spin{ to{ transform:rotate(360deg) } }

/* ====== HR ====== */
.signup-container hr{ border:0; height:1px; background:rgba(15,23,42,.08); margin:20px 0 }

/* ====== LINKS ====== */
.signup-container a{ color:var(--brand-600) }
.signup-container a:hover{ text-decoration:underline }

/* ====== RESPONSIVE ====== */
@media (max-width:420px){
  .signup-container{ width:min(94vw, 380px); padding:24px 18px 20px }
  .signup-flex-row{ grid-template-columns:1fr; }
  .signup-input, .signup-input-half{ height:48px !important }
  .signup-btn{ height:46px }
}


/* ===== ULTRA COMPACT SIGNUP FORM ===== */
.signup-container {
  padding: 14px 14px 12px;   /* very tight card padding */
  max-width: 400px;          /* slightly narrower */
}

.signup-avatar {
  width: 55px; height: 55px;
  margin: -40px auto 0;      /* avatar overlaps header */
}
.signup-avatar img {
  width: 50px; height: 50px;
}

.signup-container h2 {
  font-size: 15px !important;
  margin: 2px 0;             /* minimal spacing */
  margin-bottom: 10px;
}

.signup-container img.mx-auto {
  margin-top: 2px;           /* logo closer */
  height: 24px;              /* smaller logo */
}

.signup-flex-row {
  gap: 6px;                  /* tighter row gap */
}

.signup-input,
.signup-input-half,
.signup-dropdown-btn,
select.signup-input-half {
  height: 36px;              /* smaller inputs */
  font-size: 13px;
  margin-top: 4px;
  padding: 0 10px;
  border-radius: 8px;
}

.signup-btn {
  height: 38px;              /* compact button */
  margin-top: 2px;
  font-size: 13px;
  border-radius: 8px;
}

.signup-container hr {
  margin: 10px 0;
}

.signup-caption {
  font-size: 0.75rem;        /* smaller text */
  margin-top: 2px;
}

/* Responsive tweaks */
@media (max-width: 420px) {
  .signup-container {
    padding: 12px 12px 10px;
  }
  .signup-input,
  .signup-input-half {
    height: 34px;
  }
  .signup-btn {
    height: 36px;
  }
  .signup-container h2 {
  font-size: 17.5px !important;
  margin-top: -10px !important;
}

.signup-input,
.signup-input-half,
.signup-dropdown-btn,
select.signup-input-half {
  height: 48px;              /* smaller inputs */
  font-size: 14.5px;
  margin-top: 4px;
  padding: 0 10px;
  border-radius: 8px;
}
}