/* Hakeemi Cloud — portal flow styles (checkout, pay, slots)
   Same brand tokens as the story landing. Mobile-first.
   Loaded AFTER site.css via head_extra, so these rules win ties. */
:root{
  --p-bg:#F7F9FD;
  --p-soft:#EEF2F9;
  --p-card:#FFFFFF;
  --p-line:#E2E8F0;
  --p-ink:#0F172A;
  --p-muted:#5B6579;
  --p-faint:#94A3B8;
  --p-primary:#2563EB;
  --p-deep:#1D4ED8;
  --p-teal:#14B8A6;
  --p-green:#22C55E;
  --p-green-bg:#DCFCE7;
  --p-green-ink:#14532D;
  --p-red:#DC2626;
  --p-red-bg:#FEE2E2;
  --p-amber-bg:#FEF3C7;
  --p-amber-line:#FDE68A;
  --p-amber-ink:#92400E;
  --p-r:14px;
  --p-r-lg:20px;
  --p-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --p-display:"Instrument Sans","Inter",system-ui,sans-serif;
  --p-mono:"JetBrains Mono",ui-monospace,monospace;
}
.portal-wrap{max-width:880px;margin:0 auto;padding:104px 20px 72px}
.portal-narrow{max-width:600px}
.portal-wrap h1{font-family:var(--p-display);letter-spacing:-.03em;line-height:1.08;margin:0 0 10px;font-size:clamp(1.7rem,6.5vw,2.4rem);color:var(--p-ink)}
.portal-kicker{font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--p-primary);margin:0 0 10px}
.portal-sub{color:var(--p-muted);font-size:.95rem;margin:0 0 6px}
.portal-muted{color:var(--p-muted)}
.portal-wrap a{color:var(--p-primary)}
button{font:inherit}

/* buttons (self-sufficient — never depend on theme vars) */
.portal-wrap .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;border-radius:999px;border:1px solid transparent;cursor:pointer;text-decoration:none;min-height:48px;padding:12px 22px;font-size:.95rem;transition:transform .12s ease,background .2s ease,box-shadow .2s ease}
.portal-wrap .btn:active{transform:scale(.97)}
.portal-wrap .btn-primary{background:var(--p-primary);color:#fff;box-shadow:0 10px 24px rgba(37,99,235,.28)}
.portal-wrap .btn-primary:hover{background:var(--p-deep);color:#fff}
.portal-wrap .btn-ghost{background:var(--p-card);border-color:var(--p-line);color:var(--p-ink)}
.portal-wrap .btn-block{width:100%}
.portal-wrap .btn-lg{min-height:54px;font-size:1.02rem}

/* price header */
.plan-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:14px 0 4px}
.plan-price .price{font-size:2rem;font-weight:900;letter-spacing:-.03em;color:var(--p-ink)}
.plan-price .price-original{text-decoration:line-through;color:var(--p-faint);font-weight:700}
.plan-price .price-once{font-size:.82rem;color:var(--p-muted)}
.saving-badge{font-size:.72rem;font-weight:800;background:var(--p-green-bg);color:var(--p-green-ink);padding:5px 11px;border-radius:999px}
.charged-note{font-size:.82rem;color:var(--p-muted)}

/* steps pills */
.checkout-steps{display:flex;gap:8px;margin:16px 0 4px;flex-wrap:wrap}
.checkout-steps span{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:var(--p-soft);border:1px solid var(--p-line);color:var(--p-muted)}
.checkout-steps span.active{background:var(--p-ink);color:#fff;border-color:var(--p-ink)}

/* checkout — a concise, branded hand-off into the form */
.checkout-page{max-width:960px}
.checkout-intro{margin-top:8px;padding:clamp(22px,4vw,36px);border:1px solid rgba(37,99,235,.16);border-radius:24px;background:radial-gradient(circle at 92% 8%,rgba(20,184,166,.15),transparent 28%),linear-gradient(135deg,#fff 20%,#F2F7FF);box-shadow:0 18px 42px rgba(15,23,42,.08)}
.checkout-intro .plan-price{margin-top:16px}
.checkout-intro .guarantee{background:rgba(255,255,255,.72)}
.checkout-page .checkout-steps{margin:20px 0 2px}
.checkout-disclosure{margin-top:18px;border-top:1px solid var(--p-line);padding-top:16px}
.checkout-optional{padding-bottom:22px}
.checkout-disclosure summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;color:var(--p-ink);font-size:.88rem;font-weight:800;list-style:none}
.checkout-disclosure summary::-webkit-details-marker{display:none}
.checkout-disclosure summary::after{content:"+";margin-left:auto;color:var(--p-primary);font-size:1.25rem;line-height:1}
.checkout-disclosure[open] summary::after{content:"−"}
.checkout-disclosure summary span{font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--p-muted);background:var(--p-soft);border:1px solid var(--p-line);border-radius:999px;padding:4px 8px}
.checkout-disclosure .form-grid{margin-top:14px}
.checkout-optional .card-sub{margin-top:12px}

/* cards */
.portal-card{background:var(--p-card);border:1px solid var(--p-line);border-radius:var(--p-r-lg);padding:clamp(18px,3.4vw,26px);margin-top:16px;box-shadow:0 12px 32px rgba(15,23,42,.07)}
.portal-card h3{margin:0 0 4px;font-size:1.08rem;letter-spacing:-.01em;color:var(--p-ink)}
.portal-card .card-sub{margin:0 0 12px;font-size:.85rem;color:var(--p-muted)}
.portal-card h4{margin:16px 0 8px;font-size:.76rem;color:var(--p-muted);text-transform:uppercase;letter-spacing:.07em}

/* form */
.form-grid{display:grid;grid-template-columns:1fr;gap:12px}
.field label{display:block;margin-bottom:6px;font-size:.82rem;font-weight:700;color:var(--p-ink)}
.field input,.field textarea,.field select{width:100%;border:1.5px solid var(--p-line);border-radius:12px;padding:12px 14px;font-size:16px;font-family:var(--p-font);background:#F8FAFC;color:var(--p-ink);min-height:48px;box-sizing:border-box}
.field textarea{min-height:90px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--p-primary);background:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.field-hint{color:var(--p-muted);font-size:.74rem;margin-top:4px;display:block}
.optional{color:var(--p-faint);font-weight:400}
.field-error{color:var(--p-red);font-size:.78rem;margin:6px 0 0;font-weight:600}
.req{color:var(--p-red)}
.file-input{position:relative;border:1.5px dashed var(--p-line);border-radius:12px;padding:16px 14px;background:var(--p-soft);text-align:center;transition:border-color .15s,background .15s;cursor:pointer}
.file-input:hover{border-color:var(--p-primary);background:#EFF6FF}
.file-input input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.file-input span{font-size:.82rem;color:var(--p-muted);font-weight:600}

/* banners + notes */
.banner{border-radius:14px;padding:14px 16px;font-size:.88rem;margin-top:14px}
.banner-error{background:var(--p-red-bg);border:1px solid #FECACA;color:#991B1B}
.banner-success{background:var(--p-green-bg);border:1px solid #BBF7D0;color:var(--p-green-ink)}
.guarantee{display:flex;gap:12px;background:#EFF6FF;border:1px solid #BFDBFE;border-radius:16px;padding:14px 16px;font-size:.86rem;margin-top:14px;color:var(--p-ink)}
.g-icon{width:34px;height:34px;border-radius:11px;background:var(--p-primary);color:#fff;display:grid;place-items:center;flex:none;font-weight:900}
.legal-card{background:var(--p-soft);border:1px solid var(--p-line);border-radius:14px;padding:12px 16px;font-size:.86rem;margin-top:14px}
.back-link{display:inline-flex;align-items:center;gap:6px;margin-bottom:12px;font-weight:700;font-size:.88rem;text-decoration:none}

/* calendar */
.cal-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.cal-head h3{margin:0}
.pill-note{font-size:.74rem;font-weight:700;background:var(--p-soft);border:1px solid var(--p-line);padding:5px 12px;border-radius:999px;color:var(--p-muted);white-space:nowrap}
.date-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
.date-cell{border:1.5px solid var(--p-line);border-radius:12px;padding:10px 4px;text-align:center;cursor:pointer;background:var(--p-card);min-height:62px;display:flex;flex-direction:column;justify-content:center;gap:2px;color:var(--p-ink);transition:border-color .15s,transform .15s,box-shadow .15s}
.date-cell:hover{border-color:var(--p-primary);transform:translateY(-1px)}
.date-cell.active{background:var(--p-primary);border-color:var(--p-primary);color:#fff;box-shadow:0 8px 20px rgba(37,99,235,.3)}
.date-cell strong{font-size:.84rem}
.date-cell small{display:block;font-size:.7rem;color:var(--p-muted);line-height:1.3}
.date-cell.active small{color:rgba(255,255,255,.85)}
.date-cell .sun{color:#EA580C;font-weight:800}
.slot-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:6px}
.slot-btn{padding:14px;border-radius:12px;border:1.5px solid var(--p-line);background:var(--p-card);cursor:pointer;font-weight:700;display:flex;justify-content:space-between;align-items:center;min-height:54px;color:var(--p-ink);font-size:.9rem;transition:border-color .15s,background .15s}
.slot-btn:hover{border-color:var(--p-primary);background:#EFF6FF}
.slot-btn .st{font-size:.78rem;color:var(--p-muted);font-weight:700}
.slot-btn.booked{opacity:.55;pointer-events:none;text-decoration:line-through;background:var(--p-soft)}
.slot-btn.past{opacity:.4;pointer-events:none}
.slot-btn.selected{border-color:var(--p-primary);background:var(--p-primary);color:#fff}
.slot-btn.selected .st{color:rgba(255,255,255,.85)}
.slot-empty{color:var(--p-muted);font-size:.88rem}
.slot-err{color:var(--p-red);font-size:.88rem;font-weight:600}
.slot-note{grid-column:1/-1;margin:0;padding:11px 12px;border-radius:10px;background:var(--p-amber-bg);border:1px solid var(--p-amber-line);color:var(--p-amber-ink);font-size:.82rem;font-weight:650}

/* pay page */
.pay-box{text-align:center}
.pay-amount{font-size:2.4rem;font-weight:900;letter-spacing:-.03em;margin:10px 0 2px;color:var(--p-ink)}
.pay-note{color:var(--p-muted);font-size:.88rem;margin:0 0 18px}
.order-ref{display:inline-block;font-family:var(--p-mono);font-size:.74rem;background:var(--p-soft);border:1px solid var(--p-line);border-radius:999px;padding:6px 14px;color:var(--p-muted);margin-top:14px}

@media (min-width:720px){
  .form-grid{grid-template-columns:1fr 1fr}
  .field-wide{grid-column:1/-1}
  .date-grid{grid-template-columns:repeat(7,1fr)}
  .slot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:719px){
  .portal-wrap{padding:92px 16px 64px}
}