/* =========================================================
   QUSBA SUBMIT CARD — fully namespaced (.qsc-*).
   Loaded AFTER qafar-af-enhance.css. Self-contained, no clash
   with .quiz-submit-card / .form-field / .form-grid rules.
   Palette borrows from :root (--navy/--blue/--yellow).
   ========================================================= */

.qsc-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:22px;
  padding:clamp(24px,3vw,38px);
  border-radius:28px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255,215,0,.10), transparent 55%),
    radial-gradient(120% 80% at 100% 100%, rgba(11,76,109,.55), transparent 60%),
    linear-gradient(160deg, rgba(7,52,79,.92), rgba(4,31,49,.85));
  border:1px solid rgba(255,215,0,.22);
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 1px 0 rgba(255,255,255,.06) inset;
  overflow:hidden;
  isolation:isolate;
}
.qsc-card::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(255,215,0,.55), rgba(255,215,0,0)) top/100% 2px no-repeat;
  pointer-events:none; z-index:1;
}
.qsc-card::after{
  content:"";
  position:absolute;
  top:-40%; right:-20%;
  width:380px; height:380px;
  background:radial-gradient(closest-side, rgba(255,215,0,.22), transparent 70%);
  filter:blur(10px);
  pointer-events:none; z-index:0;
}
.qsc-card > *{ position:relative; z-index:2; }

/* Header */
.qsc-head{ display:flex; flex-direction:column; gap:10px; }
.qsc-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  align-self:flex-start;
  padding:6px 12px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(255,215,0,.18), rgba(255,215,0,.06));
  border:1px solid rgba(255,215,0,.35);
  color:#ffe680;
  font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
}
.qsc-eyebrow i{ font-size:.7rem; }
.qsc-title{
  margin:0;
  color:#fff;
  font-weight:950;
  letter-spacing:-.02em;
  line-height:1.1;
  font-size:clamp(1.55rem,3vw,2.3rem);
  display:flex; align-items:center; gap:12px;
}
.qsc-title .qsc-title-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border-radius:14px;
  background:linear-gradient(135deg,#ffe978,#f4a900);
  color:#07344f;
  box-shadow:0 8px 22px -8px rgba(244,169,0,.7);
}
.qsc-lead{
  margin:0;
  color:rgba(255,255,255,.78);
  font-weight:600;
  font-size:1rem;
  line-height:1.55;
  max-width:60ch;
}

/* Grid */
.qsc-form{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}
.qsc-field{ position:relative; display:block; min-width:0; }
.qsc-field.qsc-wide{ grid-column:1 / -1; }

/* Inputs */
.qsc-field input,
.qsc-field select,
.qsc-field textarea{
  width:100%;
  min-width:0;
  height:58px;
  padding:22px 16px 8px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-family:inherit;
  font-size:.97rem;
  font-weight:600;
  outline:none;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
  appearance:none;
  -webkit-appearance:none;
}
.qsc-field textarea{
  height:auto;
  min-height:118px;
  padding-top:26px;
  resize:vertical;
  line-height:1.5;
}
.qsc-field select{
  background-image:
    linear-gradient(45deg, transparent 50%, #ffd700 50%),
    linear-gradient(135deg, #ffd700 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% + 3px),
    calc(100% - 14px) calc(50% + 3px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:42px;
}
.qsc-field select option{
  background:#062743;
  color:#fff;
}
.qsc-field input::placeholder,
.qsc-field textarea::placeholder{
  color:rgba(255,255,255,.42);
  font-weight:500;
}

/* Floating label */
.qsc-label{
  position:absolute;
  left:16px; top:18px;
  color:rgba(255,255,255,.62);
  font-size:.95rem; font-weight:700;
  pointer-events:none;
  transition:top .15s ease, font-size .15s ease, color .15s ease, transform .15s ease;
  background:transparent;
  padding:0 4px;
}
.qsc-field input:focus + .qsc-label,
.qsc-field select:focus + .qsc-label,
.qsc-field textarea:focus + .qsc-label,
.qsc-field input:not(:placeholder-shown) + .qsc-label,
.qsc-field textarea:not(:placeholder-shown) + .qsc-label,
.qsc-field.qsc-filled .qsc-label,
.qsc-field select.qsc-has-value + .qsc-label{
  top:6px;
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#ffd700;
}

/* Selects always show some text, so keep the label floated up by default */
.qsc-field select + .qsc-label{
  top:6px;
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,215,0,.85);
}
.qsc-field select:focus + .qsc-label{ color:#ffd700; }

.qsc-field input:focus,
.qsc-field select:focus,
.qsc-field textarea:focus{
  border-color:rgba(255,215,0,.65);
  background:rgba(255,255,255,.08);
  box-shadow:0 0 0 4px rgba(255,215,0,.18);
}

/* Privacy box */
.qsc-privacy{
  grid-column:1 / -1;
  display:grid;
  gap:14px;
  padding:18px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(255,215,0,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,215,0,.22);
}
.qsc-privacy-title{
  display:flex; align-items:center; gap:10px;
  color:#ffe978;
  font-size:.85rem; font-weight:900;
  letter-spacing:.05em; text-transform:uppercase;
}
.qsc-privacy-title i{ color:#ffd700; }
.qsc-privacy-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}
.qsc-privacy-grid .qsc-field input,
.qsc-privacy-grid .qsc-field select{ height:52px; padding-top:18px; }
.qsc-privacy-grid .qsc-label{ top:15px; }
.qsc-privacy-grid .qsc-field input:focus + .qsc-label,
.qsc-privacy-grid .qsc-field select:focus + .qsc-label,
.qsc-privacy-grid .qsc-field input:not(:placeholder-shown) + .qsc-label,
.qsc-privacy-grid .qsc-field select.qsc-has-value + .qsc-label{ top:5px; }

.qsc-privacy-grid .qsc-field input.is-hidden{ display:none; }

/* When the nickname input is hidden, hide its entire field (including the
   floating label) so it cannot overlap the consent row below it. */
.qsc-privacy-grid .qsc-field:has(input.is-hidden){ display:none; }

/* Fallback for browsers without :has() — hide the orphaned label too. */
.qsc-privacy-grid .qsc-field input.is-hidden + .qsc-label{ display:none; }

.qsc-consent{
  display:grid;
  grid-template-columns:22px 1fr;
  align-items:start;
  gap:12px;
  margin:0;
  color:rgba(255,255,255,.82);
  font-size:.86rem;
  line-height:1.5;
  font-weight:600;
}
.qsc-consent input[type="checkbox"]{
  width:20px; height:20px; min-width:20px;
  margin:2px 0 0; padding:0;
  appearance:auto; -webkit-appearance:checkbox;
  accent-color:#ffd700;
}

/* Hint */
.qsc-hint{
  grid-column:1 / -1;
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px dashed rgba(255,255,255,.18);
  color:rgba(255,255,255,.78);
  font-size:.88rem; font-weight:600; line-height:1.5;
}
.qsc-hint i{ color:#ffd700; font-size:1.05rem; flex:0 0 auto; }
.qsc-hint strong{ color:#ffe978; }

/* Submit button */
.qsc-submit{
  grid-column:1 / -1;
  position:relative;
  min-height:60px;
  border:0;
  border-radius:16px;
  margin:4px 0 0;
  padding:0 22px;
  font-size:1.02rem;
  font-weight:900;
  letter-spacing:.02em;
  color:#07344f;
  background:linear-gradient(135deg,#ffe978 0%, #ffd700 50%, #f4a900 100%);
  cursor:pointer;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .25s ease, filter .2s ease;
  box-shadow:
    0 14px 32px -12px rgba(255,215,0,.55),
    0 2px 0 rgba(255,255,255,.4) inset;
}
.qsc-submit i{ margin-right:8px; }
.qsc-submit::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .7s ease;
}
.qsc-submit:not(:disabled):hover{
  transform:translateY(-2px);
  box-shadow:
    0 22px 40px -14px rgba(255,215,0,.65),
    0 2px 0 rgba(255,255,255,.5) inset;
}
.qsc-submit:not(:disabled):hover::after{ transform:translateX(120%); }
.qsc-submit:disabled{ filter:saturate(.6); cursor:wait; opacity:.85; }

/* Note */
.qsc-note{
  grid-column:1 / -1;
  margin:0;
  padding:11px 14px;
  border-radius:14px;
  background:rgba(255,215,0,.08);
  border:1px solid rgba(255,215,0,.25);
  color:rgba(255,255,255,.85);
  font-size:.87rem; font-weight:600; line-height:1.5;
}
.qsc-note i{ color:#ffd700; margin-right:8px; }

/* Form message */
.qsc-form-message{
  grid-column:1 / -1;
  display:none;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(31,191,117,.15);
  border:1px solid rgba(31,191,117,.4);
  color:#cfffe7;
  font-weight:700;
  text-align:center;
  line-height:1.5;
}
.qsc-form-message.error{
  background:rgba(255,95,109,.15);
  border-color:rgba(255,95,109,.45);
  color:#ffd6da;
}

/* Honeypot */
.qsc-hp{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0);
  border:0;
}

/* Responsive */
@media (max-width: 720px){
  .qsc-form{ grid-template-columns:1fr; }
  .qsc-privacy-grid{ grid-template-columns:1fr; }
  .qsc-title{ font-size:1.5rem; }
  .qsc-title .qsc-title-icon{ width:38px; height:38px; border-radius:12px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .qsc-submit,
  .qsc-field input,
  .qsc-field select,
  .qsc-field textarea,
  .qsc-label{ transition:none !important; }
  .qsc-submit::after{ display:none; }
}