
.ucc{font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; padding:12px}
.ucc-card{max-width:1100px;margin:0 auto;background:#fff;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.06);border:1px solid #eee;overflow:hidden}
.ucc-tabs{display:flex;gap:10px;padding:14px;background:#fafafa;flex-wrap:wrap}
.ucc-tab{border:1px solid #e5e7eb;background:#fff;padding:10px 14px;border-radius:10px;font-weight:700;cursor:pointer}
.ucc-tab.is-active{background:var(--ucc-primary,#ef6b43);color:#fff;border-color:var(--ucc-primary,#ef6b43)}
.ucc-body{padding:18px}
.ucc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:12px}
@media(max-width:900px){.ucc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.ucc-grid{grid-template-columns:1fr}}
.ucc-select,.ucc-input{width:100%;padding:12px 14px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}
.ucc-select:focus,.ucc-input:focus{outline:none;border-color:var(--ucc-primary,#ef6b43);box-shadow:0 0 0 3px rgba(239,107,67,.2)}
.ucc-hint{font-size:12px;color:#6b7280;margin-top:8px}
.ucc-results{margin:10px 0}
.ucc-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.ucc-label{font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:#6b7280;margin-bottom:6px}
.ucc-price{font-weight:800;font-size:22px}
#monthlyWrap{display:flex;gap:24px}
.ucc-btn{width:100%;padding:14px 16px;border:none;border-radius:12px;background:#d1d5db;color:#fff;font-weight:800;cursor:not-allowed}
.ucc-btn:not([disabled]){background:var(--ucc-primary,#ef6b43);cursor:pointer}

/* Ensure tab-specific fields are hidden by default; JS shows relevant ones */
[ucc-root] [data-for]{display:none}

/* Mobile tab grid (2x2) */
@media (max-width: 640px){
  .ucc-tabs{display:grid; grid-template-columns: repeat(2, 1fr); gap:8px; padding:10px}
  .ucc-tab{font-size:14px; padding:8px 10px; border-radius:10px}
}
@media (max-width: 400px){
  .ucc-tab{font-size:13px; padding:7px 8px}
}

.ucc-tab{min-height:40px; display:flex; align-items:center; justify-content:center; line-height:1;}
@media (max-width: 640px){
  .ucc-tab{min-height:36px}
}

.ucc-select{pointer-events:auto}
