:root{
  --gold:#f2d36a;
  --ink:#07121a;
  --bg:#050b10;
  --panel: rgba(10,18,26,.72);
  --line: rgba(242,211,106,.22);
  --muted: rgba(234,243,255,.72);
  --text: #eaf3ff;
  --shadow: 0 24px 70px rgba(0,0,0,.55);
  --serif: "Baskerville Old Face","Baskerville","Garamond","Times New Roman",serif;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --r1: 18px;
  --r2: 28px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body{
  margin:0;
  color:var(--text);
  font-family:var(--sans);
  background:
    radial-gradient(1200px 600px at 15% 0%, rgba(242,211,106,.10), transparent 60%),
    radial-gradient(900px 540px at 80% 20%, rgba(90,162,255,.10), transparent 55%),
    linear-gradient(180deg, #04080c, var(--bg));
}

/* page layout */
.regal-wrap{
  min-height: calc(100vh - 56px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 22px 14px 60px;
}

.card{
  width: min(980px, 96vw);
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r2);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow:hidden;
}

/* header */
.card-head{
  padding: 22px 22px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: relative;
}
.glyph-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  margin-bottom: 10px;
}
.glyph-divider .line{
  width: 72px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(242,211,106,.65), transparent);
  opacity: .9;
}
.glyph-divider .glyph{
  color: rgba(242,211,106,.92);
  font-size: 14px;
  letter-spacing: .18em;
  line-height: 1;
}
.title{
  font-family: var(--serif);
  text-align:center;
  color: var(--gold);
  font-size: clamp(20px, 3vw, 30px);
  letter-spacing: .06em;
  margin: 0;
}
.subtitle{
  margin: 8px auto 0;
  text-align:center;
  max-width: 68ch;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}

/* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ body ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀*/
.card-body{ padding: 18px 18px 20px; }
.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 820px){
  .grid{ grid-template-columns: 1fr; }
}

/* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ input fields ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ */
.field{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r1);
  padding: 12px 12px 10px;
}
label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  font-size: 12px;
  color: rgba(242,211,106,.90);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.hint{ color: rgba(234,243,255,.55); font-size: 11px; letter-spacing: 0; text-transform:none; }
input, select, textarea{
  width:100%;
  color: var(--text);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(242,211,106,.18);
  border-radius: 14px;
  padding: 10px 12px;
  outline: none;
  font-size: 14px;
}


/* Buttons that should look like inputs (used by custom country picker) */
.input{
  width:100%;
  color: var(--text);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(242,211,106,.18);
  border-radius: 14px;
  padding: 10px 12px;
  outline: none;
  font-size: 16px;
  text-align:left;
}
.input:focus{ border-color: rgba(242,211,106,.55); box-shadow: 0 0 0 3px rgba(242,211,106,.12); }
textarea{ min-height: 92px; resize: vertical; }

input:focus, select:focus, textarea:focus{
  border-color: rgba(242,211,106,.55);
  box-shadow: 0 0 0 3px rgba(242,211,106,.12);
}

/*  ▀▀▀▀ Regal inputs (applies to ALL common input types)  ▀▀▀▀*/
.form input[type="text"],
.form input[type="email"],
.form input[type="password"],
.form input[type="search"],
.form input[type="tel"],
.form input[type="url"],
.form input[type="number"],
.form select,
.form textarea{
  width: 100%;
  height: 44px;                 /*  ▀▀▀▀ keep consistent  ▀▀▀▀ */
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(14,34,48,.55);
  color: rgba(234,243,255,.92);
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(242,211,106,.06);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.select-wrap select{
  width: 100%;
}

.phone-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  padding-right: 10px;
}

.phone-wrap .dial{
  flex: 0 0 auto;
  font-family: var(--serif);
  letter-spacing: .04em;
  color: rgba(242,211,106,.92);
  padding: 0 2px;
}

.phone-wrap input{
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  height: 42px; /* matches the 44px outer */
  padding: 0;
}



.form textarea{ height:auto; padding: 12px 14px; }

.form input:focus,
.form select:focus,
.form textarea:focus{
  border-color: rgba(242,211,106,.45);
  box-shadow: 0 0 0 3px rgba(242,211,106,.12);
  background: rgba(14,34,48,.68);
}

/* ▀▀▀▀ Force regal styling even when browser autofills ▀▀▀▀ */
.form input:-webkit-autofill,
.form input:-webkit-autofill:hover,
.form input:-webkit-autofill:focus,
.form textarea:-webkit-autofill,
.form textarea:-webkit-autofill:hover,
.form textarea:-webkit-autofill:focus,
.form select:-webkit-autofill,
.form select:-webkit-autofill:hover,
.form select:-webkit-autofill:focus{
  -webkit-text-fill-color: rgba(234,243,255,.92) !important;
  caret-color: rgba(234,243,255,.92);
  transition: background-color 9999s ease-out 0s;
  -webkit-box-shadow: 0 0 0px 1000px rgba(14,34,48,.55) inset !important;
          box-shadow: 0 0 0px 1000px rgba(14,34,48,.55) inset !important;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
}


/* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀  password field ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀*/
.pw-row{
  display:flex;
  align-items:stretch;   /* ▀▀▀▀ important ▀▀▀▀ */
}

.pw-row input{
  flex:1 1 auto;
  border-top-right-radius:0;
  border-bottom-right-radius:0;
}


/* Password strength aura (imperial glow) */
.pw-strength{
  --glow: rgba(242,211,106,.18);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.pw-strength.is-weak{ --glow: rgba(255,108,108,.22); }
.pw-strength.is-med{ --glow: rgba(242,211,106,.20); }
.pw-strength.is-strong{ --glow: rgba(111,255,214,.22); }
.pw-strength.is-weak,
.pw-strength.is-med,
.pw-strength.is-strong{
  box-shadow: 0 0 0 1px var(--glow), 0 0 18px 2px var(--glow);
  border-color: rgba(242,211,106,.30);
}

/* Imperial toggle checkbox */
.imperial-check{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top: 10px;
  user-select:none;
  color: rgba(234,243,255,.88);
  font-size: 13px;
  letter-spacing: .02em;
}
.imperial-check input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.imperial-check .box{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid rgba(242,211,106,.38);
  background: rgba(7,18,26,.65);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
  display:grid;
  place-items:center;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.imperial-check .box::after{
  content:"❖";
  font-size: 11px;
  color: rgba(242,211,106,.95);
  opacity: 0;
  transform: scale(.65);
  transition: opacity .15s ease, transform .15s ease;
}
.imperial-check input:checked + .box{
  background: rgba(242,211,106,.10);
  box-shadow: 0 0 0 1px rgba(242,211,106,.25), 0 0 14px rgba(242,211,106,.18);
}
.imperial-check input:checked + .box::after{
  opacity: 1;
  transform: scale(1);
}
.imperial-check:active .box{ transform: scale(.98); }

.pw-toggle{
  flex:0 0 auto;
  padding: 0 16px;       /* ▀▀▀▀ no vertical padding ▀▀▀▀ */
  border-radius: 0 999px 999px 0;
  border: 1px solid rgba(242,211,106,.28);
  border-left: none;
  background: rgba(0,0,0,.28);
  color: rgba(242,211,106,.92);
  font-weight: 700;
  font-size: 13px;
  cursor:pointer;
  transition: background .2s ease, box-shadow .2s ease;
}

.pw-toggle:hover{
  background: rgba(242,211,106,.10);
  border-color: rgba(242,211,106,.45);
  box-shadow: 0 0 14px rgba(242,211,106,.14);
  transform: translateY(-1px);
}
.pw-toggle:active{ transform: translateY(0); }

.pw-wrap{
  position:relative;
}

.pw-wrap input{
  width:100%;
  padding-right:44px;  /* ▀▀▀▀  room for eye▀▀▀▀ */
}

/*▀▀▀▀  Eye button (no height distortion) ▀▀▀▀  */
.pw-eye{
  position:absolute;
  right:0;
  top:0;
  height:100%;
  width:44px;

  border:none;
  background:transparent;

  color: rgba(242,211,106,.75);
  font-size:18px;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  transition: color .2s ease, transform .2s ease;
}

.pw-eye:hover{
  color: var(--yellow);
  transform: scale(1.1);
}

/* ▀▀▀▀ Imperial Password Strength Glow ▀▀▀▀  */
.pw-strength{
  height:4px;
  margin-top:6px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
}

.pw-strength-bar{
  height:100%;
  width:0%;
  border-radius:999px;
  transition: all .35s ease;
}

.pw-strength::after{
  content:"";
  display:block;
  height:100%;
  width:0%;
  background:transparent;
  transition: width .3s ease, background .3s ease, box-shadow .3s ease;
}

/* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀  footer actions ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀  */
.actions{
  display:flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.note{
  color: rgba(234,243,255,.65);
  font-size: 13px;
  line-height: 1.5;
}
.btn{
  width: 100%;
  justify-content: center;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(242,211,106,.35);
  background: rgba(242,211,106,.10);
  color: var(--gold);
  font-weight: 700;
  letter-spacing: .03em;
  cursor:pointer;
  text-decoration:none;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.btn:hover{
  background: rgba(242,211,106,.16);
  box-shadow: 0 0 18px rgba(242,211,106,.18);
  transform: translateY(-1px);
}
.btn:active{ transform: translateY(0); }

.alert{
  border-radius: 16px;
  padding: 12px 12px;
  margin: 12px 18px 0;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.30);
  color: rgba(234,243,255,.9);
}
.alert.ok{ border-color: rgba(90,214,194,.30); }
.alert.err{ border-color: rgba(255,90,90,.32); }


/* Autofill reset (Chrome/Safari + Firefox)
   Keeps inputs in the same regal style even when the browser autofills. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
textarea:-webkit-autofill{
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;
  transition: background-color 9999s ease-out 0s;
  box-shadow: 0 0 0px 1000px rgba(7,18,26,.92) inset !important;
  border: 1px solid rgba(242,211,106,.22) !important;
}

input:-moz-autofill,
textarea:-moz-autofill,
select:-moz-autofill{
  box-shadow: 0 0 0px 1000px rgba(7,18,26,.92) inset !important;
  -moz-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;
  border: 1px solid rgba(242,211,106,.22) !important;
}

/* ▀▀▀▀ Imperial Country Selector ▀▀▀▀ */
.country-select{ position:relative; }
.country-trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
}
.country-trigger .left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.country-flag{
  width:26px;
  height:26px;
  border-radius:999px;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(242,211,106,.08);
  border: 1px solid rgba(242,211,106,.30);
  box-shadow: 0 0 0 2px rgba(242,211,106,.08), 0 8px 18px rgba(0,0,0,.35);
  flex: 0 0 auto;
}
.country-flag img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.country-flag-fallback{
  width:100%;
  height:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 14px;
  line-height: 1;
}

.country-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* dropdown */
.country-menu{
  position:absolute;
  left:0;
  right:0;
  top: calc(100% + 8px);
  background: rgba(7,18,26,.96);
  border: 1px solid rgba(242,211,106,.22);
  border-radius: 16px;
  box-shadow: var(--shadow);
  display:none;
  z-index: 40;
}
.country-menu.open{ display:block; }

.menu-inner{
  padding: 10px;
  max-height: 320px;
  overflow:auto;
}

.country-search{ position: sticky; top: 0; padding-bottom: 10px; background: rgba(7,18,26,.96); }

.country-option{
  width:100%;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(234,243,255,.92);
  border-radius: 14px;
  padding: 10px 10px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap: 10px;
  text-align:left;
}
.country-option:hover,
.country-option:focus{
  background: rgba(242,211,106,.10);
  border-color: rgba(242,211,106,.18);
  outline:none;
}

.country-dial{
  margin-left:auto;
  color: rgba(234,243,255,.65);
  font-family: var(--serif);
  letter-spacing: .04em;
}

/* Secondary button (kept very close to primary, just slightly quieter) */
.btn.btn-secondary{
  background: rgba(242,211,106,.08);
}
.btn.btn-secondary:hover{
  background: rgba(242,211,106,.14);
}