/* CS Quote Manager v2 — Frontend Widget Styles */
#cs-quote * { box-sizing: border-box; margin: 0; padding: 0; }
#cs-quote { max-width: 720px; margin: 0 auto; padding: 2rem 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #1a1a1a; }
#cs-quote .cs-title { font-size: 32px; font-weight: 700; margin-bottom: 6px; }
#cs-quote .cs-sub { font-size: 17px; color: #666; margin-bottom: 2rem; line-height: 1.5; }
#cs-quote .cs-section { margin-bottom: 1.75rem; }
#cs-quote .cs-step-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #999; margin-bottom: 12px; }
#cs-quote .cs-hidden { display: none; }

/* Device buttons */
#cs-quote .cs-devices { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
#cs-quote .cs-device-btn { border: 1.5px solid #e0e0e0; border-radius: 10px; padding: 14px 12px; background: #fff; cursor: pointer; text-align: left; transition: all 0.15s; width: 100%; }
#cs-quote .cs-device-btn:hover { border-color: #aaa; }
#cs-quote .cs-device-btn.active { border-color: #1a56db; background: #eff4ff; }
#cs-quote .d-icon { font-size: 26px; margin-bottom: 8px; display: block; }
#cs-quote .d-name { font-size: 15px; font-weight: 600; color: #1a1a1a; display: block; margin-bottom: 2px; }
#cs-quote .cs-device-btn.active .d-name { color: #1a56db; }
#cs-quote .d-from { font-size: 13px; color: #999; }
#cs-quote .cs-device-btn.active .d-from { color: #1a56db; }

/* Issue rows */
#cs-quote .cs-issues { display: flex; flex-direction: column; gap: 6px; }
#cs-quote .cs-issue-row { display: flex; align-items: center; justify-content: space-between; border: 1.5px solid #e0e0e0; border-radius: 10px; padding: 14px 16px; cursor: pointer; background: #fff; transition: all 0.15s; }
#cs-quote .cs-issue-row:hover { border-color: #aaa; }
#cs-quote .cs-issue-row.active { border-color: #1a56db; background: #eff4ff; }
#cs-quote .cs-issue-row.cs-no-select { cursor: default; background: #fafafa; }
#cs-quote .cs-issue-row.cs-no-select:hover { border-color: #e0e0e0; }
#cs-quote .cs-issue-left { display: flex; align-items: center; gap: 10px; }
#cs-quote .cs-check { width: 18px; height: 18px; border: 1.5px solid #ccc; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: transparent; flex-shrink: 0; }
#cs-quote .cs-issue-row.active .cs-check { background: #1a56db; border-color: #1a56db; color: #fff; }
#cs-quote .cs-check-info { background: #f0f0f0; border-color: #ccc; color: #888 !important; font-size: 11px; font-weight: 700; font-style: italic; }
#cs-quote .cs-issue-name { font-size: 16px; color: #1a1a1a; }
#cs-quote .cs-issue-row.active .cs-issue-name { color: #1a56db; font-weight: 500; }
#cs-quote .cs-issue-price { font-size: 15px; font-weight: 600; color: #444; white-space: nowrap; }
#cs-quote .cs-issue-row.active .cs-issue-price { color: #1a56db; }

/* Price type tags */
#cs-quote .cs-diag-tag { font-size: 12px; background: #e8f8ee; color: #166534; border: 1px solid #bbf7d0; border-radius: 6px; padding: 3px 8px; font-weight: 500; }
#cs-quote .cs-cfp-tag  { font-size: 12px; background: #fff8e1; color: #92400e; border: 1px solid #fde68a; border-radius: 6px; padding: 3px 8px; font-weight: 500; }

/* Badge */
#cs-quote .cs-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; background: #dcfce7; color: #166534; margin-left: 8px; vertical-align: middle; }

/* Summary */
#cs-quote .cs-summary-box { background: #f7f8fa; border: 1.5px solid #e0e0e0; border-radius: 12px; padding: 1.25rem; }
#cs-quote .cs-summary-title { font-size: 15px; font-weight: 700; color: #666; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
#cs-quote .cs-sum-row { display: flex; justify-content: space-between; font-size: 16px; color: #555; padding: 6px 0; border-bottom: 1px solid #eee; }
#cs-quote .cs-sum-row:last-of-type { border-bottom: none; }
#cs-quote .cs-total-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 14px; border-top: 2px solid #e0e0e0; }
#cs-quote .cs-total-label { font-size: 18px; font-weight: 600; }
#cs-quote .cs-total-amount { font-size: 34px; font-weight: 700; color: #1a56db; }

/* Diagnosis notice */
#cs-quote .cs-diag-notice { margin-top: 14px; background: #e8f8ee; border: 1.5px solid #86efac; border-radius: 10px; padding: 16px 18px; line-height: 1.6; }
#cs-quote .cs-diag-title { font-size: 15px; font-weight: 700; color: #166534; margin-bottom: 8px; }
#cs-quote .cs-diag-notice p { font-size: 14px; color: #166534; margin-bottom: 8px; }
#cs-quote .cs-diag-notice p:last-of-type { margin-bottom: 10px; }
#cs-quote .cs-diag-address { font-size: 13px; color: #15803d; background: #dcfce7; border-radius: 6px; padding: 8px 12px; font-weight: 500; }

#cs-quote .cs-disclaimer { font-size: 12px; color: #999; margin-top: 10px; line-height: 1.5; }

/* CTA buttons */
#cs-quote .cs-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 1.25rem; }
#cs-quote .cs-btn-main { padding: 14px 26px; background: #1a56db; color: #fff; border: none; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; }
#cs-quote .cs-btn-main:hover { background: #1447b8; color: #fff; }
#cs-quote .cs-btn-sec { padding: 14px 26px; background: #fff; color: #1a1a1a; border: 1.5px solid #e0e0e0; border-radius: 10px; font-size: 16px; font-weight: 500; cursor: pointer; text-decoration: none; display: inline-block; }
#cs-quote .cs-btn-sec:hover { border-color: #aaa; color: #1a1a1a; }

@media (max-width: 480px) {
    #cs-quote .cs-title { font-size: 26px; }
    #cs-quote .cs-devices { grid-template-columns: repeat(2, 1fr); }
}