/* Center card container */
.chooze-otp-lightmodern { min-width:100vw;  position: relative; min-height: 100vh; display: grid; place-items: center; overflow: hidden; background: #f7f9fc; }
.content { position: relative; z-index:2; width: 100%; display: grid; place-items: center; padding: 28px; }

/* Mixed alignment: titles centered, options left-aligned */
.chooze-otp-mixed .otp-title,
.chooze-otp-mixed .otp-sub,
.chooze-otp-mixed .success-hero { text-align: center; width: 100%; }
.chooze-otp-mixed .otp-sub { max-width: 720px; margin-left: auto; margin-right: auto; }

/* Background */
.bg-wrap { position: absolute; inset: 0; overflow: hidden; }
.bg-gradient { position: absolute; inset: -20% -10% -10% -10%;
  background:
    radial-gradient(900px 520px at 75% 0%, color-mix(in srgb, var(--chooze-primary, #FF9821) 20%, transparent) 0%, transparent 60%),
    radial-gradient(800px 520px at 10% 100%, color-mix(in srgb, var(--chooze-primary, #FF9821) 14%, transparent) 0%, transparent 65%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 60%, #f4f7fb 100%);
}
.bg-sheen { position:absolute; inset:0; background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,0.55) 12%, rgba(255,255,255,0.65) 16%, transparent 26%); transform:translateX(-120%); animation: sheen 9s ease-in-out infinite; pointer-events:none;}
@keyframes sheen { 0%,10%{transform:translateX(-130%)} 55%{transform:translateX(20%)} 100%{transform:translateX(130%)} }
.bg-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(15,23,42,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,0.06) 1px, transparent 1px); background-size:44px 44px,44px 44px; mask-image: radial-gradient(900px 600px at 50% 40%, rgba(0,0,0,0.9), transparent 70%); }
.bg-blob { position:absolute; border-radius:9999px; filter:blur(60px); background: color-mix(in srgb, var(--chooze-primary, #FF9821) 20%, transparent); mix-blend-mode:multiply; animation: floatY 14s ease-in-out infinite; }
.bg-blob.b1{ width:540px; height:540px; top:-160px; left:-160px; }
.bg-blob.b2{ width:400px; height:400px; bottom:-140px; right:-120px; animation-delay:3s; }
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }

/* Card */
.otp-card { background:#fff; border:1px solid #e7ebf2; border-radius:22px; box-shadow:0 14px 34px rgba(15,23,42,0.08); padding:26px; width:100%; max-width:720px; transition: transform .22s ease, box-shadow .22s ease, opacity .22s ease; }
.otp-card.is-verified { transform: scale(0.985); box-shadow: 0 10px 28px rgba(15,23,42,0.06); }
.otp-icon { width:64px; height:64px; border-radius:16px; background: linear-gradient(135deg, var(--chooze-primary, #FF9821), color-mix(in srgb, var(--chooze-primary, #FF9821) 80%, #000 0%)); display:flex; align-items:center; justify-content:center; margin:0 auto 12px auto; box-shadow: 0 10px 24px color-mix(in srgb, var(--chooze-primary, #FF9821) 35%, transparent); animation:bob 3.6s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }

.otp-title { font-size: 24px; font-weight: 800; color: #0f172a; margin: 2px 0 10px; letter-spacing: -0.015em; }
.otp-sub { color:#475569; margin: 0 0 14px; line-height: 1.45; }

/* OTP inputs (centered row, still fine) */
.otp-row { display:flex; gap:12px; justify-content:center; margin:0 0 10px; }
.otp-input{ width:52px; height:64px; border-radius:14px; border:2px solid #e2e8f0; background:#fff; text-align:center; font-size:24px; font-weight:800; color:#0f172a; transition:all .16s ease; outline:none; }
.otp-input.filled{ border-color: var(--chooze-primary, #FF9821); background: color-mix(in srgb, var(--chooze-primary, #FF9821) 15%, #fff 85%); color:#7a4f06; transform:scale(1.04); box-shadow: 0 8px 18px color-mix(in srgb, var(--chooze-primary, #FF9821) 20%, transparent); }
.otp-input.error{ border-color:#ef4444; background:#fee2e2; color:#991b1b; }
.otp-input:focus{ border-color: var(--chooze-primary, #FF9821); box-shadow: 0 0 0 7px color-mix(in srgb, var(--chooze-primary, #FF9821) 22%, transparent); transform:scale(1.04); }

.otp-badge{ display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700; padding:6px 10px; color:#b91c1c; background:#fef2f2; border:1px solid #fecaca; border-radius:999px; }
.otp-badge-wrap{ min-height:24px; display:flex; justify-content:center; align-items:center; margin-bottom:12px; }
.otp-verif{ display:flex; align-items:center; justify-content:center; gap:8px; color: var(--chooze-primary, #FF9821); font-weight:700; margin:12px 0 16px; }
.otp-spinner{ width:18px; height:18px; border:3px solid var(--chooze-primary, #FF9821); border-top-color:transparent; border-radius:999px; animation:spin 1s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg);}}
.otp-resend{ margin-top:6px; width:100%; text-align:center; } .otp-resend button{ background:none; border:none; color: var(--chooze-primary, #FF9821); font-weight:700; cursor:pointer; } .otp-resend button:hover{ opacity:.85; text-decoration:underline; }

/* Success + Stepper */
.success-hero{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8px 0 2px; width:100%; }
.success-ring{ position:relative; width:96px; height:96px; border-radius:999px; background:linear-gradient(135deg,#22c55e,#16a34a); display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 14px 32px rgba(34,197,94,0.28); animation:pop .35s ease-out both, pulseGlow 2.4s ease-in-out .35s infinite; }
@keyframes pop{0%{transform:scale(.85); opacity:0}100%{transform:scale(1); opacity:1}}
@keyframes pulseGlow{0%,100%{box-shadow:0 14px 32px rgba(34,197,94,0.28);}50%{box-shadow:0 18px 40px rgba(34,197,94,0.42);}}
.success-title{ font-size:22px; font-weight:800; color:#0f172a; margin:10px 0 6px; width:100%; text-align:center; }
.success-sub{ color:#475569; margin:0 0 16px; width:100%; text-align:center; }

.stepper { margin-top: 10px; width: 100%; display:grid; place-items:center; }
.step { border:1px solid #eef2f7; border-radius:16px; padding:18px; background:#fff; margin-top:14px; width:100%; max-width:640px; }
.step-head { display:flex; align-items:center; gap:10px; justify-content:center; text-align:center; }
.step-num { width:28px; height:28px; border-radius:999px; display:flex; align-items:center; justify-content:center; background: var(--chooze-primary, #FF9821); color:#fff; font-weight:800; font-size:13px; box-shadow:0 6px 14px color-mix(in srgb, var(--chooze-primary, #FF9821) 22%, transparent); }
.step-title { font-weight:800; color:#0f172a; font-size:16px; letter-spacing:-.01em; }

/* Choices: explicitly left-aligned block */
.choices { display:grid; grid-template-columns: 1fr; gap:16px; margin-top: 14px; text-align:left; }
.choice {
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:14px 16px; cursor:pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.choice:hover { border-color:#dbe1ea; background:#f9fbff; }
.choice .left { display:flex; align-items:center; gap:12px; }
.choice .label { font-weight:800; color:#0f172a; }
.choice .sub { color:#64748b; font-size:12px; line-height:1.4; word-wrap:break-word; }
.choice .go { color: var(--chooze-primary, #FF9821); font-weight:800; }

/* Animations */
.fade-in { animation: fadeIn .22s ease-out both; }
@keyframes fadeIn { from { opacity:0; transform: translateY(6px);} to { opacity:1; transform: translateY(0);} }

.confetti{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.confetti .p{ position:absolute; width:10px; height:18px; border-radius:2px; opacity:0; animation:drop 1200ms ease-out forwards; }
@keyframes drop{ 0%{ transform: translateY(-30px) rotate(0deg); opacity:0 } 10%{ opacity:1 } 100%{ transform: translateY(240px) rotate(540deg); opacity:0 } }

.final-wrap { padding-top: 6px; width:100%; text-align:center; }
.final-msg { color:#0f172a; font-weight:800; margin-bottom:4px; }
.final-sub { color:#475569; }
.summary { display:inline-flex; gap:10px; margin-top:10px; }
.summary .tag { background:#f1f5f9; border:1px solid #e2e8f0; border-radius:999px; padding:6px 10px; font-weight:700; font-size:12px; color:#0f172a; }

/* Shake */
.animate-shake{ animation: shakeX 430ms cubic-bezier(.36,.07,.19,.97) both; } 
@keyframes shakeX{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-3px)}40%,60%{transform:translateX(3px)}}


/* --- Alignment fix: force left alignment inside choices --- */
.choices { text-align: left; }
.choice { justify-content: flex-start !important; }
.choice .left { flex: 1 1 auto; text-align: left; }
.choice .label, .choice .sub { text-align: left; }
.choice .go { margin-left: auto; }


/* Force left alignment only for label + sub */
.choice .label, .choice .sub { text-align: left !important; }

/* breathing space adjustments */
.otp-sub { margin-bottom: 24px !important; }
.otp-row { margin-bottom: 24px !important; }
.otp-resend { margin-top: 24px !important; }


/* Multi-select states for day choices */
.choice.selected { 
  border-color: var(--chooze-primary, #FF9821);
  background: color-mix(in srgb, var(--chooze-primary, #FF9821) 12%, #fff 88%);
}
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 18px; border-radius: 12px; font-weight:800;
  background: var(--chooze-primary, #FF9821); color:#fff; border:1px solid color-mix(in srgb, var(--chooze-primary, #FF9821) 40%, #000 0%);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--chooze-primary, #FF9821) 22%, transparent);
  transition: transform .12s ease, box-shadow .12s; cursor:pointer;
}
.btn-primary:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }
.btn-primary:hover:not(:disabled){ transform: translateY(-1px); }
@media (max-width: 640px){
  .choices { gap: 12px; }
  .btn-primary{ width: 100%; }
}


/* Subtext style kept readable for the 'Pas d'autre jour de préférence' option */
.choice .sub { color:#64748b; font-size:12px; line-height:1.4; word-wrap:break-word; }
@media (max-width: 640px){
  .choice .sub { font-size:12px; }
}


/* v11.4 background fix (scoped, minimal) */
.chooze-otp-root{
  background: transparent !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chooze-otp-root .card-mount > *{ position: relative; z-index: 1; }
@media (max-width: 640px){
  .chooze-otp-root{  }
}

/* Guide (below success message) */
.guide-intro{ margin:12px 0 8px; display:grid; gap:8px; }
.guide-text{ color:#0f172a; font-size:14px; line-height:1.5; margin:0; }
.download-wrap{ display:grid; place-items:start; }
.btn-download{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px; border-radius:12px; font-weight:800;
  background: var(--chooze-primary, #FF9821); color:#fff; text-decoration:none;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-download:hover{ transform: translateY(-1px); box-shadow:0 12px 28px rgba(0,0,0,.12); }
.btn-download:active{ transform:none; box-shadow:0 8px 18px rgba(0,0,0,.08); }
@media (max-width:640px){
  .btn-download{ width:100%; }
}



/* v11.6: success subtext + guide button placement */
.success-sub{
  margin: 8px 0 4px;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.5;
}

/* Reassurance under OTP heading */
.otp-reassure{
  display:flex; align-items:flex-start; gap:8px;
  margin: 10px 0 6px;
  color:#334155; font-size:12px; line-height:1.5;
}
.otp-reassure .emoji{ font-size:14px; line-height:1; }

/* Round step numbers (in case not present) */
.step-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.step-num{
  width: 36px; height: 36px; line-height: 36px;
  border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--chooze-primary, #FF9821);
  color:#fff; font-weight: 800; font-size: 14px;
  flex: 0 0 36px;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
@media (max-width: 640px){
  .step-num{ width: 32px; height: 32px; line-height: 32px; font-size: 12px; flex-basis: 32px; }
}



/* Hide post-OTP questionnaire (days / time slots / summary) */
.chooze-otp-root .stepper {
  display: none !important;
}