/* Monochrome minimal styles inspired by ShadCN UI (black/white/gray) */
:root{
  --bg: #ffffff;
  --fg: #0a0a0a;
  --muted: #f5f5f5;
  --muted-foreground:#6b7280;
  --border:#e5e7eb;
  --ring:#111827;
}

.container{max-width:1100px}

.card{background:var(--bg); border:1px solid var(--border); border-radius:8px}
.card.p-4{padding:1.25rem}
.card-title{font-size:1.125rem; font-weight:600; color:var(--fg)}
.card.muted{background:var(--muted)}

.grid{display:grid}
.grid-cols-1{grid-template-columns:1fr}
.md\:grid-cols-2{grid-template-columns:1fr}
@media(min-width:768px){.md\:grid-cols-2{grid-template-columns:1fr 1fr}}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}
.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:.75rem}
.py-5{padding-top:2rem; padding-bottom:2rem}
.py-6{padding-top:2.5rem; padding-bottom:2.5rem}
.w-100{width:100%}
.w-full{width:100%}
.sticky{position:sticky; top:1rem}

/* Form */
label{display:block; font-size:.875rem; color:var(--muted-foreground); margin-bottom:.25rem}
input, select{width:100%; border:1px solid var(--border); border-radius:6px; padding:.6rem .75rem; background:var(--bg); color:var(--fg)}
input:focus, select:focus{outline:none; box-shadow:0 0 0 2px var(--ring); border-color:var(--ring)}
.form-group{display:flex; flex-direction:column}

/* Radio/checkbox */
.radio, .checkbox{display:flex; align-items:center; gap:.5rem; color:var(--fg)}
.radio input, .checkbox input{width:1rem; height:1rem}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border:1px solid var(--border); border-radius:6px; padding:.6rem .9rem; font-weight:600}
.btn-primary{background:#111827; color:#fff; border-color:#111827}
.btn-primary:hover{filter:brightness(0.95)}

/* Order summary */
.order-row{display:flex; align-items:center; justify-content:space-between; padding:.5rem 0; color:var(--fg)}
.divider{height:1px; background:var(--border); margin:.5rem 0}
.order-row.total{font-weight:700}

/* Segmented radio-as-buttons */
.segmented{display:inline-grid; grid-auto-flow:column; gap:.5rem}
.segmented-input{position:absolute; opacity:0; width:0; height:0}
.segmented-btn{border:1px solid var(--border); background:var(--bg); padding:.5rem .75rem; border-radius:6px; cursor:pointer; color:var(--fg); user-select:none}
.segmented-input:checked + .segmented-btn{background:#111827; color:#fff; border-color:#111827}

/* Header (reuse existing classes but ensure neutral) */
.subscription-header{background:var(--muted); border-bottom:1px solid var(--border)}
.subscription-title{margin:0; padding:1.25rem 0; color:var(--fg)}
.subscription-subtitle{margin:0 0 1rem; color:var(--muted-foreground)}