/* problem entry — batch of 10 minimal UX fixes */
.header-inner-simple{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;gap:12px;
}
.problem-header-step{
  font-size:12px;font-weight:700;color:#64748b;
}
.problem-page__inner{max-width:560px;margin:0 auto;padding-bottom:48px}
.problem-intro{text-align:center;margin:8px 0 18px}
.problem-intro__eyebrow{
  margin:0 0 6px;font-size:12px;font-weight:800;color:#c45c26;
}
.problem-intro__title{
  margin:0 0 8px;font-size:clamp(1.35rem,4.5vw,1.7rem);
  line-height:1.35;color:#1b2a4a;font-weight:800;
}
.problem-intro__desc{
  margin:0 auto;max-width:26rem;font-size:15px;line-height:1.7;color:#64748b;
}

/* Resume */
.problem-resume{
  margin:0 0 14px;padding:12px 14px;border-radius:14px;
  background:#fff7ed;border:1px solid #fed7aa;
}
.problem-resume p{margin:0 0 10px;font-size:13px;font-weight:600;color:#9a3412}
.problem-resume__actions{display:flex;flex-wrap:wrap;gap:8px}

/* Primary grid — big targets */
.problem-grid--primary{
  display:grid;gap:12px;grid-template-columns:1fr;
}
@media(min-width:540px){
  .problem-grid--primary{grid-template-columns:1fr 1fr}
}
.problem-card--primary{
  min-height:110px;text-align:right;
  border-radius:18px!important;padding:18px!important;
  border:1px solid #e2e8f0!important;
  background:#fff;
  box-shadow:0 8px 28px rgba(15,39,68,.06);
  display:flex!important;align-items:center;gap:12px;
  cursor:pointer;width:100%;
  transition:transform .15s ease, box-shadow .15s ease;
}
.problem-card--primary:hover,
.problem-card--primary:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(15,39,68,.1);
  outline:none;
  border-color:#fdba74!important;
}
.problem-card[data-problem-type="outage"]{border-top:4px solid #c45c26!important}
.problem-card[data-problem-type="high_bill"]{border-top:4px solid #0f766e!important}
.problem-card__icon{font-size:1.5rem;line-height:1;flex-shrink:0}
.problem-card__body{flex:1;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.problem-card__title{font-size:1.08rem;font-weight:800;color:#1b2a4a}
.problem-card__hint{font-size:13px;color:#64748b;line-height:1.45}
.problem-card__cta-hint{
  font-size:12px;font-weight:800;color:#c45c26;flex-shrink:0;
}

/* More options */
.problem-more{
  margin-top:14px;border:1px solid #e2e8f0;border-radius:14px;background:#f8fafc;
}
.problem-more summary{
  cursor:pointer;padding:12px 14px;font-size:13px;font-weight:700;color:#475569;
  list-style:none;
}
.problem-more summary::-webkit-details-marker{display:none}
.problem-more[open] summary{border-bottom:1px solid #e2e8f0}
.problem-grid--secondary{display:grid;gap:8px;padding:12px;grid-template-columns:1fr}
.problem-grid--secondary .problem-card{
  min-height:64px;padding:12px 14px!important;border-radius:12px!important;
  border:1px solid #e2e8f0!important;background:#fff;
  display:flex!important;align-items:center;gap:10px;width:100%;text-align:right;
  text-decoration:none;color:inherit;cursor:pointer;
}
.problem-card--soon{opacity:.55;cursor:not-allowed!important}

.problem-note{
  text-align:center;margin:16px 0 0;font-size:12px;color:#94a3b8;line-height:1.6;
}

/* Confirm — 8. full-width primary on mobile */
.problem-confirm__actions{
  display:flex;flex-direction:column;gap:10px;margin-top:16px;
}
.problem-confirm__actions .btn-lg{min-height:50px;font-size:16px;font-weight:800}
@media(min-width:480px){
  .problem-confirm__actions{flex-direction:row}
  .problem-confirm__actions .btn-cta{flex:1}
}
.problem-confirm__choice{
  font-size:1.2rem;font-weight:800;color:#c45c26;margin:8px 0;
}
.problem-footer{
  display:flex;justify-content:space-between;padding:1rem 0;font-size:13px;color:#94a3b8;
}
.problem-footer a{color:#64748b;font-weight:600;text-decoration:none}