/* Sign-in popup styles (subset of checkout.css) — loaded site-wide */
:root{ --teal:#7C3AED; --teal-deep:#5B21B6; --signal:#FFD76A; --pine-2:#2E1065;
  --white:#fff; --ballpit:#F3F0FB; --lav-pale:#F3EDFF; }
.modal{ --ink:#241A3E; --ink-soft:#5A4F7A; color:var(--ink) }
.modal a{color:var(--teal)}
.checkout,.modal,.detail-panel,.price-card,.card,.success-panel { --ink:#241A3E; --ink-soft:#5A4F7A; color:var(--ink) }
.checkout { background:#fff;border-radius:22px;box-shadow:0 24px 70px rgba(5,2,18,.6) }
.modal { color:var(--ink) }
.modal a { color:var(--teal) }
.checkout a { color:var(--teal) }
.btn-teal { background: var(--signal); color: var(--pine-2); box-shadow: 0 4px 0 #9a6708; }
.btn-teal:hover:not(:disabled) { background: #FFC64A; }
.btn-outline { background: transparent; border: 2px solid var(--ink); color: var(--ink); box-shadow: none; }
.checkout { background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 32px;
  max-width: 600px; margin: 40px auto 0; }
.checkout h3 { font-size: 1.4rem; margin-bottom: 16px; text-align: center; }
.checkout .btn { width: 100%; text-align: center; margin-top: 14px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 200;
  background: rgba(44,42,74,.55); backdrop-filter: blur(3px);
  display: none; align-items: flex-start; justify-content: center;
  padding: 4vh 16px; overflow-y: auto; }
.modal-backdrop.show { display: flex; }
.modal { background: var(--white); border-radius: var(--radius);
  max-width: 720px; width: 100%; padding: 30px;
  box-shadow: 0 24px 64px rgba(0,0,0,.3); }
.modal h2 { font-size: 1.6rem; margin-bottom: 4px; }
.modal .sub { color: var(--ink-soft); margin-bottom: 16px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 800; font-size: .88rem; }
.field input, .field textarea { font-family: 'Baloo 2', sans-serif; font-size: 1rem;
  padding: 11px 14px; border: 2px solid #DDE3EC; border-radius: 12px;
  background: var(--white); color: var(--ink); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--teal); }
.field .hint { font-size: .8rem; color: var(--ink-soft); }
.check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; font-size: .92rem; }
.check input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--teal); }
.modal-actions { display: flex; gap: 12px; margin-top: 18px; }
.modal-actions .btn { flex: 1; text-align: center; }
.form-error { color: #D6336C; font-weight: 700; font-size: .9rem; margin-top: 10px; display: none; }
.form-error.show { display: block; }
.success-panel { display: none; text-align: center;
  background: #EAF4EC; border: 2px solid var(--teal); border-radius: 14px;
  padding: 20px; margin-top: 18px; }
.success-panel.show { display: block; }
.success-panel h4 { font-family: 'Baloo 2', sans-serif; color: var(--teal-deep); font-size: 1.2rem; }
.check-all { background: var(--ballpit); border: 2px solid var(--teal); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.modal { position: relative; }
.field { min-width: 0; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.modal-narrow { max-width: 440px; }
.phone-row { display: grid; grid-template-columns: 128px 1fr; gap: 8px; }
.phone-row select { font-family: 'Baloo 2', sans-serif; font-size: 1rem; padding: 11px 8px; border: 2px solid #DDE3EC; border-radius: 12px; background: var(--white); color: var(--ink); }
.phone-row select:focus { outline: none; border-color: var(--teal); }
@media (max-width: 640px){
.field-grid { grid-template-columns:1fr }
.modal { padding:22px }
}
.modal input, .modal select, .modal textarea,
.checkout input, .checkout select, .checkout textarea { background:#fff;color:#241A3E;border:2px solid #DDE3EC;border-radius:12px;
  padding:10px 12px;font-family:'Sora',system-ui,sans-serif;font-size:1rem;color-scheme:light }
.modal input:focus, .modal select:focus, .modal textarea:focus { outline:none;border-color:var(--teal) }
.modal ::placeholder { color:#9A92B5 }
.modal input, .modal select, .modal textarea{
  background:#fff;color:#241A3E;border:2px solid #DDE3EC;border-radius:12px;
  padding:10px 12px;font-family:'Sora',system-ui,sans-serif;font-size:1rem;color-scheme:light}
.modal input:focus, .modal select:focus, .modal textarea:focus{outline:none;border-color:var(--teal)}
.modal ::placeholder{color:#9A92B5}