/* ============= Base / Theme ============= */
:root{
  --bg-grad: linear-gradient(90deg, #687f97 0%, #061619 87%);
  --text: #ffffff;
  --muted: rgba(255,255,255,.75);
  --brand: #18c89b;
  --brand-2: #74f0d2;
  --accent: #ff9700;
  --card: rgba(255,255,255,.10);
  --card-2: rgba(255,255,255,.06);
  --ring: rgba(255,255,255,.85);
  --shadow: 0 6px 20px rgba(0,0,0,.3);
  --radius: 12px;
  --font: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family:var(--font);
  background:var(--bg-grad);
}

/* ============= Section / Headings ============= */
.section_first{
  width:100%;
  padding:32px 16px 48px;
}

.face_heading {
  font-size: clamp(2.2rem, 3.5vw + 1.2rem, 3.6rem);
  text-align: center;
  margin: 0 0 8px;
  letter-spacing: .5px;
  font-weight: 800;
  color: #ffffff; /* ✅ force white text */
}

.face_tagline{
  text-align:center;
  color:var(--muted);
  font-size:clamp(1rem, .8vw + .8rem, 1.25rem);
  margin:0 0 32px;
}

/* ============= Layout ============= */
.duo_container{
  display:flex;
  gap:40px;
  align-items:flex-start;
  justify-content:center;
  max-width:1200px;
  margin:0 auto;
  padding-bottom:20px;
  position:relative;
}

.left_container,
.right_container{
  flex:1 1 520px;
  max-width:640px;
}

.left_container{
  padding:20px 10px;
  border-right:1px solid rgba(255,255,255,.15);
}

.right_container{
  padding:10px;
}

/* ============= Text bits ============= */
.custom-text-primary{
  text-align:center;
  color:var(--muted);
  font-size:1.05rem;
  margin:0 0 18px;
}

/* ============= Form ============= */
.custom_form{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}

.input_width{
  width:min(420px, 86%);
  color:var(--text);
}

input[type=file]{
  width:min(420px, 86%);
  border:1px solid rgba(255,255,255,.25);
  background:transparent;
  color:var(--text);
  padding:10px;
  border-radius:10px;
}

input[type=file]::file-selector-button{
  border:none;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
  color:#000;
  background:linear-gradient(135deg, #ffe088, #fff29a);
  border-right:1px solid rgba(255,255,255,.4);
  transition:transform .12s ease, filter .2s ease;
}
input[type=file]::file-selector-button:hover{filter:brightness(1.05);transform:translateY(-1px)}

/* ============= CTA Button ============= */
.custom-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 26px;
  font-weight:800;
  letter-spacing:.2px;
  color:#000;
  border:none;
  border-radius:999px;
  cursor:pointer;
  background:linear-gradient(135deg, #ffb457, #ffd27a);
  box-shadow:0 10px 20px rgba(0,0,0,.15);
  transition:transform .12s ease, box-shadow .2s ease;
}
.custom-btn:hover{transform:translateY(-2px);box-shadow:0 14px 26px rgba(0,0,0,.22)}
.custom-btn:active{transform:translateY(0)}

/* ============= Gender Pills ============= */
.fsd-gender{margin:8px 0 2px;text-align:center}
.fsd-gender-label{font-weight:700;margin-bottom:10px;color:var(--text);opacity:.9}
.fsd-gender-toggle{display:inline-flex;gap:16px}

.fsd-gender-option{position:relative;display:inline-flex;align-items:center}
.fsd-gender-input{
  position:absolute;inset:0;opacity:0;cursor:pointer;
}
.fsd-gender-btn{
  min-width:160px;height:72px;
  padding:0 26px;border-radius:40px;
  border:3px solid var(--ring);
  color:var(--text);font-weight:800;
  background:var(--card-2);backdrop-filter:blur(6px);
  transition:transform .12s ease, border-color .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}
.fsd-gender-option:hover .fsd-gender-btn,
.fsd-gender-input:focus + .fsd-gender-btn{
  transform:translateY(-2px);
  border-color:#cfeee6;
  background:rgba(255,255,255,.12);
}
.fsd-gender-input:checked + .fsd-gender-btn{
  border-color:var(--brand);
  color:#0b2320;
  background:linear-gradient(135deg, #b8ffe9 0%, var(--brand-2) 100%);
  box-shadow:0 10px 28px rgba(24,200,155,.25), inset 0 0 0 2px rgba(255,255,255,.55);
}
.fsd-gender-input:focus-visible + .fsd-gender-btn{outline:3px solid var(--brand);outline-offset:3px}

/* ============= Idle / Scanner ============= */
.animation_player{
  display:flex;align-items:center;justify-content:center;
  padding:20px 0;width:100%;
}
.loader_container{position:relative;width:100%;display:flex;align-items:center;justify-content:center}
.scanner_container{
  min-height:280px;display:flex;align-items:center;justify-content:center;
  padding:16px 0;
}
.image-container{display:flex;flex-direction:column;align-items:center;gap:10px}
.image-container img{
  max-width:180px;max-height:230px;width:100%;object-fit:cover;border-radius:36px;
  box-shadow:var(--shadow);
}

/* tiny scanning HUD */
.ocrloader{
  position:relative;width:200px;height:100%;padding:14px;pointer-events:none;
}
.ocrloader p{
  position:absolute;left:25%;bottom:-28px;
  color:var(--brand);font-weight:700;font-size:16px;
  animation:blink 1s linear infinite;text-transform:uppercase;
}
.ocrloader span::before{
  content:"";position:absolute;top:5%;left:4%;width:5px;height:90%;
  background:var(--brand);box-shadow:0 0 50px 10px var(--brand);
  animation:scan-x 1s ease-in-out infinite alternate, scan-y 2s ease-in-out infinite;
}
@keyframes blink{50%{opacity:0}}
@keyframes scan-x{to{transform:translateX(-100%);left:100%}}
@keyframes scan-y{33%{clip-path:inset(0 0 0 -100px)}50%{clip-path:inset(0)}83%{clip-path:inset(0 -100px 0 0)}}

/* ============= Result Card ============= */
.result_container{
  background:var(--card);
  border:2px solid var(--brand);
  border-radius:var(--radius);
  color:var(--text);
  width:100%;
  max-width:460px;
  margin:0 auto;
  padding:18px 18px 22px;
  box-shadow:var(--shadow);
  text-align:center;
}
.primary-result-card{
  position:relative;
  border-radius:var(--radius);
  background:var(--card);
  padding:16px 20px;
  margin:8px auto 16px;
  border:2px solid var(--brand);
}
.best-match-badge{
  position:absolute;top:-10px;right:14px;
  background:var(--brand);color:#fff;font-size:.72rem;
  padding:6px 12px;border-radius:18px;font-weight:800;letter-spacing:.6px;
  box-shadow:0 4px 12px rgba(24,200,155,.35);
  text-transform:uppercase;
}
.primary-shape-name{font-size:1.1rem;font-weight:800;margin:0 0 6px}
.primary-shape-percentage{font-size:2rem;font-weight:800;color:var(--brand)}

/* Details grid (Eyes/Eyebrows/Nose/Mouth) */
.other-shapes-section{
  background:var(--card-2);
  border-radius:var(--radius);
  padding:14px;
}
.other-shapes-section h3{margin:0 0 12px;font-size:1.1rem;color: #ffffff;}
.other-shapes-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(140px,1fr));
  gap:14px;
}
.other-shape-item{
  background:var(--card);
  border:2px solid rgba(255,255,255,.14);
  border-radius:14px;
  padding:14px 10px;
  transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.other-shape-item:hover{transform:translateY(-2px);border-color:var(--brand);box-shadow:0 10px 24px rgba(24,200,155,.22)}
.other-shape-name{color: #ffffff;font-weight:800;margin-bottom:6px}
.other-shape-percentage{font-weight:800;color:var(--brand)}

/* ============= Messaging ============= */
.error_display{
  color:#ffd536;text-align:center;margin-top:6px;min-height:20px;
}

/* ============= Responsive ============= */
@media (max-width:1080px){
  .duo_container{flex-direction:column-reverse;gap:26px;padding:0 10px}
  .left_container{border:none}
  .result_container{max-width:520px}
}
@media (max-width:640px){
  .fsd-gender-btn{min-width:140px;height:64px;border-radius:36px;font-size:16px}
  .other-shapes-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:420px){
  .fsd-gender-toggle{gap:12px}
  .fsd-gender-btn{min-width:120px;height:58px;font-size:15px;padding:0 18px}
  input[type=file], .input_width{width:94%}
  .other-shapes-grid{grid-template-columns:1fr}
}

/* --- Pill radio buttons --- */
.gender-group { margin: 18px 0 8px; text-align: center; }

.gender-title {
  color: #fff;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .3px;
  margin-bottom: 14px;
}

.gender-pills {
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}

/* hide the native radios */
.gender-pill input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* the visible pill */
.gender-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 14px 28px;
  cursor: pointer;
  user-select: none;
  transition: transform .12s ease, box-shadow .2s ease;
}

/* pill interior (so we can style via input:checked + span, widely supported) */
.gender-pill > span {
  display: inline-block;
  border: 2px solid rgba(255,255,255,.9);
  color: #fff;
  border-radius: 9999px;
  padding: 12px 28px;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .2px;
  backdrop-filter: saturate(120%) blur(2px);
  background: rgba(255,255,255,0.04);
  transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
  box-shadow: 0 0 0 0 rgba(255,165,0,0);
}

/* hover focus */
.gender-pill:hover > span,
.gender-pill:focus-within > span {
  border-color: #fff;
  background: rgba(255,255,255,0.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* SELECTED state – full pill turns orange */
.gender-pill input[type="radio"]:checked + span {
  background: linear-gradient(180deg, #ffb84d 0%, #ff9700 100%);
  color: #1a1f24;
  border-color: transparent;
  box-shadow: 0 10px 28px rgba(255,151,0,.35), inset 0 -2px 0 rgba(0,0,0,.1);
}

/* slight press effect */
.gender-pill:active { transform: translateY(1px); }

/* responsive tweaks */
@media (max-width: 640px) {
  .gender-pill > span { font-size: 18px; padding: 10px 22px; }
  .gender-pills { gap: 14px; }
}