/* ====== Base (dark, modern) ====== */
:root{
  --ink:#0B0B0B; --muted:#6B7280; --bg:#0A0A0A; --card:#0F1115;
  --brand:#BB2323; --ring:#222631; --ok:#10B981; --warn:#F59E0B; --radius:16px;
  --text:#E5E7EB; --sub:#A6AAB2; --white:#fff;
}
.frath-wrap{max-width:1100px;margin:24px auto;padding:16px;color:var(--text);
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

@font-face{
  font-family:"Gibson";
  src:url("https://circuitx.yourdigishell.in/wp-content/uploads/2025/09/gibson-bold.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
}

/* Header */
.frath-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:24px; border-radius:26px; background:#0B0D12;
  box-shadow:0 14px 30px rgba(0,0,0,.28); margin-bottom:22px;
}
.frath-hello{display:flex; gap:16px; align-items:center}
.frath-title{margin:0; font-size:clamp(24px,3.4vw,36px); color:#fff}
.frath-sub{margin:4px 0 0; color:#c2c6cf; font-size:14px}
.frath-btn.ghost{background:transparent; border:1px solid #2c313d; color:#fff; border-radius:14px; padding:10px 16px}

/* Avatar + upload */
.frath-avatar{ position:relative; width:84px; height:84px; border-radius:50%; overflow:hidden }
.frath-avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50% }
.frath-avatar-form input[type=file]{ display:none }
.frath-avatar-edit{
  position:absolute; right:-6px; bottom:-6px;
  width:28px; height:28px; display:grid; place-items:center;
  background:var(--brand); color:#fff; border-radius:50%; cursor:pointer;
  box-shadow:0 6px 18px rgba(187,35,35,.35); border:2px solid #0B0D12;
}
.frath-avatar-edit:hover{ filter:brightness(1.05) }

/* Card */
.frath-card.pro{ background:#0D0F14; border:1px solid #202737; border-radius:22px; padding:20px;
  box-shadow:0 12px 30px rgba(0,0,0,.22) }
.frath-card-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px }
.frath-card-title{ margin:0; color:#E9EDF5; font-size:20px }
.frath-status{ font-weight:800; font-size:12px; padding:7px 12px; border-radius:999px; border:1px solid var(--ring) }
.frath-status.ok{ background:#0c2d20; border-color:#155e46; color:#b7f3d9 }
.frath-status.warn{ background:#2d1f0c; border-color:#5e4a15; color:#f3deb7 }

.frath-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px }
.chip{ background:#151a22; border:1px solid #2b3344; color:#c7d2e0; border-radius:999px; padding:6px 12px; font-size:12px }

.frath-card-body{ display:flex; gap:20px; justify-content:space-between; flex-wrap:wrap }
.frath-fields{ display:grid; grid-template-columns:1fr 1fr; gap:10px; font-size:14px; color:#d7dbe3 }
.frath-fields strong{ color:#f0f3f7 }

.frath-qr-wrap{ text-align:center; min-width:170px }
.frath-qr{ width:170px; height:170px; background:#fff; border-radius:14px; padding:8px; display:block }
.frath-qr.empty{ background:#0B0D12; border:1px dashed #334155; border-radius:14px; padding:36px 12px; color:#9EA5B1 }
.frath-btn.small{ background:var(--brand); color:#fff; border:0; border-radius:10px; padding:8px 12px; font-weight:700; display:inline-block; margin-top:10px }

@media (max-width:680px){
  .frath-fields{ grid-template-columns:1fr }
}

/* ====== Alerts used in login/reset ====== */
.fr-auth-alert{padding:10px 12px;border-radius:12px;margin:10px 0;font-size:14px}
.fr-auth-alert.ok{background:#0c2d20;color:#b7f3d9;border:1px solid #155e46}
.fr-auth-alert.error{background:#2d0c0c;color:#f3b7b7;border:1px solid #5e1515}

/* ====== Modern Login / Reset (Hero + Card) ====== */
.frr-hero{
  position:relative; min-height:70vh; display:grid; place-items:center; padding:48px 20px;
  background: radial-gradient(1200px 600px at 10% -10%, rgba(187,35,35,0.35), transparent 60%),
              radial-gradient(900px 500px at 100% 0%, rgba(255,255,255,0.05), transparent 70%),
              linear-gradient(160deg, #000 0%, #0b0b0b 60%, #111 100%);
  color:#fff;
}
.frr-ornament{ position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.2) 30%, transparent 30%),
                    radial-gradient(2px 2px at 70% 60%, rgba(255,255,255,0.16) 30%, transparent 30%),
                    radial-gradient(2px 2px at 40% 80%, rgba(255,255,255,0.1) 30%, transparent 30%);
  background-size: 120px 120px; opacity:.25;
}
.frr-login-shell{ width:min(1050px, 100%); display:grid; grid-template-columns:1.1fr 1fr; gap:28px; }
.frr-brand{ padding:26px; border:1px solid var(--ring); border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  backdrop-filter: blur(6px);
}
.frr-brand .badge{ display:inline-block; padding:6px 10px; border-radius:999px;
  background: rgba(187,35,35,0.15); border:1px solid rgba(187,35,35,0.35);
  color:#ffdddd; font-weight:700; margin-bottom:10px; font-size:12px;
}
.frr-brand h1{ margin:.2rem 0 .5rem; font-size:clamp(24px,4vw,36px); color:#fff; }
.frr-brand p{ margin:0 0 12px; color:#d1d5db; }
.frr-brand .points{ margin:8px 0 0; padding:0 0 0 16px; color:#cbd5e1; }
.frr-card.glass{ position:relative; padding:22px 22px 16px; border-radius:16px; border:1px solid var(--ring);
  background:rgba(255,255,255,0.04); box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.frr-card .card-head h2{ margin:0 0 4px; font-size:22px; color:#fff;}
.frr-card .small{ color:#cbd5e1; margin:0 0 14px; }

/* Login / Reset fields */
#frr-login label, .frr-card label{ display:block; font-size:12px; color:#e5e7eb; margin:0 0 6px; }
#frr-login input[type='text'], #frr-login input[type='password'],
.frr-card input[type='password']{
  width:100%; background:#0A0A0A; color:#fff; border:1px solid var(--ring);
  border-radius:12px; padding:12px 14px; outline:none; box-sizing:border-box;
}
#frr-login input:focus, .frr-card input:focus{
  border-color:rgba(255,255,255,0.35); box-shadow:0 0 0 3px rgba(187,35,35,0.25);
}
.passwrap{ position:relative; }
.pass-toggle{ position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:transparent; border:0; color:#e5e7eb; cursor:pointer; padding:6px; border-radius:8px; }
.pass-toggle:hover{ background:rgba(255,255,255,0.05); }

/* Login / Reset buttons + links */
.frr-btn{ width:100%; padding:12px 14px; border-radius:12px; border:0; font-weight:700;
  color:#fff; background:linear-gradient(90deg, var(--brand), #ff3b3b 70%);
  box-shadow:0 10px 24px rgba(187,35,35,0.35); cursor:pointer; margin-top:8px; transition:transform .06s ease}
.frr-btn:hover{ transform:translateY(-1px) }
.extra-links{ display:flex; justify-content:space-between; margin-top:10px; }
.link{ color:#fda4a4; text-decoration:none; }
.link:hover{ text-decoration:underline; }

@media (max-width:900px){ .frr-login-shell{ grid-template-columns:1fr; } }

/* ====== Responsive (profile) ====== */
@media (max-width:680px){
  .frath-head{flex-direction:column;gap:12px;align-items:flex-start}
  .frath-grid{grid-template-columns:1fr}
  .frath-card-body{flex-direction:column}
  .frath-fields{grid-template-columns:1fr}
}
.passwrap{ position:relative; }
.passwrap input{ padding-right:44px; box-sizing:border-box; }
.pass-toggle{
  position:absolute; right:10px; top:70%; transform:translateY(-50%);
  background:transparent; border:0; cursor:pointer; color:#9ca3af;
  padding:6px; border-radius:8px; line-height:0;
}
.pass-toggle:hover{ background:rgba(255,255,255,0.05); color:#fff; }
.pass-toggle .eye-closed{ display:none; }
.pass-toggle.is-on .eye-open{ display:none; }
.pass-toggle.is-on .eye-closed{ display:inline; }
.pass-hint {
  font-size: 13px;
  margin: 4px 0 0;
}
.pass-hint.ok {
  color: #10B981; /* green */
}
.pass-hint.error {
  color: #EF4444; /* red */
}
.passwrap { position:relative; }
.passwrap input { padding-right:44px; box-sizing:border-box; }
.pass-toggle {
  position:absolute; right:10px; top:70%; transform:translateY(-50%);
  background:transparent; border:0; cursor:pointer; color:#9ca3af;
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
}
.pass-toggle:hover { background:rgba(255,255,255,0.08); color:#fff; border-radius:6px; }
.pass-hint { font-size:13px; margin:4px 0 0; }
.pass-hint.ok { color:#10B981; }
.pass-hint.error { color:#EF4444; }
/* ==== Header: red gradient ==== */
.frath-wrap .frath-head{
  background:
    linear-gradient(135deg, #BB2323 0%, #0B0D12 55%);
  border-radius: 20px;
  padding: 20px;
  color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}

/* ==== Avatar edit camera (always visible) ==== */
.frath-wrap .frath-avatar{ position:relative; width:92px; height:92px; border-radius:50%; overflow:hidden; }
.frath-wrap .frath-avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.frath-wrap .frath-avatar-form input[type="file"]{ display:none; }

.frath-wrap .frath-avatar .frath-avatar-edit{
  position:absolute; right:6px; bottom:6px;
  width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; color:#fff; cursor:pointer; z-index:3;
  background: linear-gradient(135deg,#BB2323,#FF5656);
  border:2px solid #0B0D12;
  box-shadow: 0 10px 24px rgba(187,35,35,.45);
  transition: transform .15s ease, filter .2s ease;
}
.frath-wrap .frath-avatar:hover .frath-avatar-edit{ transform: scale(1.06); filter:brightness(1.06); }

/* ==== Card gradient (use .pro class your template outputs) ==== */
.frath-wrap .frath-card.pro{
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(187,35,35,.10), transparent 55%),
    linear-gradient(180deg, #111 0%, #181818 100%);
  border:1px solid rgba(255,255,255,.06);
  border-radius:22px;
  padding:20px;
  color:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}

/* ==== Info Fields as List ==== */
.frath-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 20px;
  margin-top: 20px;
}
.frath-fields div {
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.02);
  font-size: 15px;
  color: #E5E7EB;
}
.frath-fields strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  color: #fff;
  font-weight: 600;
}

/* ==== Card Gradient ==== */
.frath-card {
  background: linear-gradient(160deg,#141414 0%,#0b0b0b 100%);
  border-radius: 22px;
  padding: 22px;
  color: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

/* ===== Athlete Auth – Left actions (Register highlight) ===== */
.frr-left-actions{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;
}

/* Brand red & neutrals */
:root{
  --cx-red:#BB2323;
  --cx-red-2:#a11e1e;
  --cx-paper:#ffffff;
  --cx-ink:#0f0f0f;
}

/* Primary highlighted pill */
.frr-left-actions .cta-primary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:999px; text-decoration:none;
  font-weight:700; letter-spacing:.2px; line-height:1;
  background:linear-gradient(180deg, var(--cx-red) 0%, var(--cx-red-2) 100%);
  color:#fff; border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 24px rgba(187,35,35,.35), inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.frr-left-actions .cta-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 28px rgba(187,35,35,.45), inset 0 1px 0 rgba(255,255,255,.18);
  filter:saturate(1.05);
}
.frr-left-actions .cta-primary:active{
  transform:translateY(0);
}

/* Secondary ghost link (optional) */
.frr-left-actions .cta-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 14px; border-radius:999px; text-decoration:none;
  font-weight:600; line-height:1; color:#fff;
  border:1px dashed rgba(255,255,255,.35);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(4px);
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.frr-left-actions .cta-ghost:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.6);
}

/* If left column is dark/glass, keep contrast strong */
.frr-brand .badge, .frr-brand h1, .frr-brand p, .frr-brand li{
  color:#fff;
}

/* Small screens: stack neatly */
@media (max-width: 520px){
  .frr-left-actions{ gap:8px; }
  .frr-left-actions .cta-primary,
  .frr-left-actions .cta-ghost{ padding:10px 14px; font-size:14px; }
}
/* ===== OTP Login/Reset polish ===== */

/* Two-column buttons on ALL viewports (mobile + desktop) */
.frr-card .split{
  display:grid;
  grid-template-columns: 1fr 1fr;   /* 2 x 2 layout for two buttons */
  gap: 12px;
  margin-top: 12px;
}
.frr-card .split .frr-btn{
  width:100%;
}

/* Phone + OTP inputs — modern dark field */
.frr-card .input[type="tel"],
.frr-card .input[type="text"],
.frr-card .input[type="password"]{
  width:100%;
  height:48px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:#fff;
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

/* Placeholder tone */
.frr-card .input::placeholder{ color:rgba(255,255,255,.55); }

/* Focus ring in brand red (#BB2323) with soft glow */
.frr-card .input:focus{
  border-color:#BB2323;
  box-shadow:0 0 0 4px rgba(187,35,35,.18);
  background:rgba(255,255,255,.06);
}

/* Label spacing for a tighter, neat block */
.frr-card .form-wrap p{ margin:0 0 12px; }
.frr-card .form-wrap label{
  display:block;
  font-size:13px;
  color:rgba(255,255,255,.85);
  margin:0 0 6px;
}

/* OTP block spacing */
#frath_otp_block,
#rp_step2{ margin-top: 8px; }

/* Buttons: keep your red style, refine hover/disabled */
.frr-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:48px;
  border-radius:12px;
  font-weight:700;
  letter-spacing:.2px;
  border:0;
  background:#E43B3B;            /* feel free to keep your existing token */
  color:#fff;
  box-shadow:0 10px 22px rgba(228,59,59,.22);
  transition:transform .08s ease, box-shadow .18s ease, opacity .18s ease;
}
.frr-btn:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(228,59,59,.28); }
.frr-btn:active{ transform:translateY(0); box-shadow:0 8px 18px rgba(228,59,59,.2); }

.frr-btn.ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:none;
}
.frr-btn.ghost:hover{ border-color:#BB2323; box-shadow:0 0 0 3px rgba(187,35,35,.16) inset; }

.frr-btn[disabled],
.frr-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* Optional: give the card a touch more breathing room on very small screens */
@media (max-width: 380px){
  .frr-card .input{ height:46px; }
  .frr-btn{ height:46px; }
  .frr-card .split{ gap:10px; }
}

/* ===== Phone input: icon + padding ===== */
.frr-card .input[type="tel"],
.frr-card input[name="phone"],
.frr-card input[name="mobile"],
.frr-card input[name="mobile_number"],
.frr-card input[name="otp_phone"]{
  padding-left: 44px; /* room for icon */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'>\
<path opacity='.85' d='M22 16.92v2a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.09 4.18 2 2 0 0 1 4.11 2h2a2 2 0 0 1 2 1.72c.12.86.32 1.69.59 2.49a2 2 0 0 1-.45 2.11L7.09 9.91a16 16 0 0 0 6 6l1.59-1.16a2 2 0 0 1 2.11-.45c.8.27 1.63.47 2.49.59A2 2 0 0 1 22 16.92z'/></svg>");
  background-repeat: no-repeat;
  background-position: 14px 50%;
  background-size: 18px 18px;
}
/* ===== Profile: remove header photo spacing (since photo moved to right) ===== */
.frath-wrap .frath-head .frath-avatar{ display:none !important; }
.frath-wrap .frath-hello{ gap:0 !important; }

/* ===== Right block (Photo box) ===== */
.frath-photo-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:18px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:18px;
  background:rgba(255,255,255,0.02);
  min-height: 260px;
}

.frath-photo-frame{
  width: 320px;
  max-width: 100%;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
}

.frath-photo{
  width:100%;
  height:auto;
  display:block;
}

.frath-photo-actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}

.frath-avatar-form input[type="file"]{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  opacity:0;
}

.frath-photo-help{
  margin:0;
  font-size:12px;
  color: rgba(229,231,235,0.75);
  text-align:center;
}

.frath-hidden-submit{
  display:none !important;
}

/* Buttons used inside photo section */
.frath-btn.small.upload{
  padding:10px 14px;
  border-radius:12px;
  font-weight:700;
}

.frath-btn.small.danger{
  padding:10px 14px;
  border-radius:12px;
  font-weight:700;
  background: rgba(187,35,35,0.15);
  border:1px solid rgba(187,35,35,0.55);
  color:#fff;
}

@media (max-width: 820px){
  .frath-photo-frame{ width: 100%; }
  .frath-photo-wrap{ min-height: unset; }
}
/* ===== Athlete profile: left column should size to content ===== */

/* Main two-column layout */
.frath-card-body.two-col{
  display: grid;
  grid-template-columns: max-content 1fr; /* LEFT = content width, RIGHT = flexible */
  gap: 32px;
  align-items: start; /* prevent stretching */
}

/* Left field grid */
.frath-fields.list{
  display: grid;
  grid-template-columns: repeat(2, max-content); /* boxes wrap to content */
  gap: 16px;
}

/* Individual info cards */
.frath-fields.list .item{
  width: max-content;
  min-width: 180px; /* keeps visual balance */
}

/* Right photo box should NOT force left width */
.frath-photo-wrap{
  justify-self: end;
  max-width: 420px;
  width: 100%;
}

/* Mobile fallback */
@media (max-width: 900px){
  .frath-card-body.two-col{
    grid-template-columns: 1fr;
  }

  .frath-fields.list{
    grid-template-columns: repeat(2, 1fr);
  }

  .frath-fields.list .item{
    width: 100%;
  }

  .frath-photo-wrap{
    max-width: 100%;
    justify-self: stretch;
  }
}
/* ===== Mobile overflow fix (force everything to fit viewport) ===== */
@media (max-width: 900px){

  /* Make the main wrapper respect viewport */
  .frath-wrap,
  .frath-card,
  .frath-card-body{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Force single-column layout */
  .frath-card-body.two-col{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* Left cards: full width grid, no min-width */
  .frath-fields.list{
    grid-template-columns: 1fr 1fr !important;
  }

  .frath-fields.list .item{
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Photo section: full width and shrinkable */
  .frath-photo-wrap{
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
  }

  .frath-photo-frame{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Safety: prevent any child from pushing beyond */
  .frath-card *{
    max-width: 100%;
    box-sizing: border-box;
  }
}
/* ===== Mobile: stack profile info cards one below another ===== */
@media (max-width: 600px){

  /* Force single column for left info cards */
  .frath-fields.list{
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .frath-fields.list .item{
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Ensure text wraps nicely instead of breaking awkwardly */
  .frath-fields.list .item .text span{
    word-break: break-word;
    white-space: normal;
  }
}