/* ============ Wedding-elegant theme (plain, minimal) ============ */
:root{
  --ivory: #fffaf4;
  --porcelain: #f5f2ee;
  --blush: #eecfd6;
  --sage: #dfe7e2;
  --gold: #c9a86a;
  --ink: #2b2b2b;
  --muted: #6e6e6e;
  --card: #ffffff;
  --ring: #e9d9c7;
  --shadow: 0 10px 30px rgba(18, 16, 14, .12), 0 2px 10px rgba(18,16,14,.06);
}

/* page background — airy ivory with a faint corner glow */
html,body{
  height:100%;
}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(1400px 700px at 80% 0%, #f7f2ee 0%, #faf7f3 40%, var(--ivory) 70%),
    radial-gradient(900px 600px at -10% 100%, #f8eff3 0%, var(--ivory) 60%);
  font: 400 16px/1.55 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* hide the old animated squares if present */
section > span{ display:none; }

/* center shell */
section{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:32px 16px;
}

/* card */
.signin{
  width:min(440px, 92vw);
  background:var(--card);
  border:1px solid #efe9e2;
  border-radius:20px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.signin .content{
  padding:28px 26px 24px;
}

/* headings with a serif touch (keeps working even if you keep Roboto loaded) */
h1,h2,h3,.title{
  font-family: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  letter-spacing:.2px;
  margin:0 0 6px 0;
  color:#1e1e1e;
}
h2{ font-size:28px; font-weight:600; text-align:center; }
.subtitle{
  margin:0 0 18px 0;
  text-align:center;
  color:var(--muted);
  font-size:14.5px;
}

/* form */
.form{ margin-top:6px; }
.inputBox{
  position:relative;
  display:block;
  margin:14px 0;
}
.inputBox input{
  width:100%;
  height:46px;
  border-radius:12px;
  border:1px solid #ebe3da;
  background:#fcfbf9;
  padding:0 14px;
  font-size:15px;
  color:#2a2a2a;
  outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.inputBox input::placeholder{ color:#b9b1a8; }

/* floating label (your existing <i> element) */
.inputBox i{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  padding:0 6px;
  color:#9f9487;
  pointer-events:none;
  transition: all .18s ease;
  background:transparent;
}

/* lift label on focus or when filled */
.inputBox input:focus + i,
.inputBox input:not(:placeholder-shown) + i{
  top:0;
  transform:translateY(-50%) scale(.92);
  background:var(--card);
  color:#8a7a68;
}

/* focus ring */
.inputBox input:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(201,168,106,.14);
  background:#fff;
}

/* button */
.inputBox button,
.btn{
  width:100%;
  height:46px;
  border:0;
  border-radius:12px;
  cursor:pointer;
  font-weight:600;
  letter-spacing:.2px;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease;
  background: linear-gradient(180deg, #f2e8d8 0%, #e8d7bd 60%, #e2cfb0 100%);
  color:#2b2418;
  box-shadow: 0 6px 18px rgba(201,168,106,.20), inset 0 1px 0 rgba(255,255,255,.6);
}
.inputBox button:hover{
  box-shadow: 0 10px 24px rgba(201,168,106,.28), inset 0 1px 0 rgba(255,255,255,.7);
}
.inputBox button:active{ transform:translateY(1px); }

/* links */
.links{
  margin-top:10px;
  text-align:center;
}
.links a{
  color:#7a6751;
  text-decoration:none;
  border-bottom:1px dotted rgba(201,168,106,.6);
  padding-bottom:1px;
}
.links a:hover{
  border-bottom-style:solid;
}

/* tiny caption (optional if you add one) */
.helper, .note{
  color:var(--muted);
  text-align:center;
  font-size:13px;
}

/* mobile polish */
@media (max-width: 420px){
  .signin{ border-radius:18px; }
  .signin .content{ padding:24px 18px 20px; }
}

/* accessibility tweaks */
input::-ms-reveal, input::-ms-clear{ display:none; }

/* 1) Make widths include padding/border everywhere */
*, *::before, *::after { box-sizing: border-box; }

/* 2) Keep the card comfy and prevent any bleed */
.signin{
  width: clamp(320px, 92vw, 440px);
  overflow: hidden;            /* clip any glow/shadow overflow */
}

/* 3) Inputs: never overflow the card */
.inputBox{ margin: 14px 0; }
.inputBox input{
  display: block;
  width: 100%;
  max-width: 100%;             /* belts-and-suspenders */
  -webkit-appearance: none;    /* Safari quirks */
  padding: 0 14px 0 44px;      /* room for the floating <i> label */
}

/* 4) Floating label stays inside nicely */
.inputBox i{
  left: 14px;
  background: var(--card);
  padding: 0 6px;
}

/* 5) Tiny mobile nudge so nothing kisses the edges */
@media (max-width: 420px){
  .signin .content{ padding: 22px 16px 18px; }
}