@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Open+Sans:wght@400;600;700&display=swap');
:root { color-scheme:light; font-family:'Open Sans',Arial,sans-serif; color:#0b2947; background:#edf3f8; }
h1,h2,h3,h4,.eyebrow,.primary { font-family:'Montserrat',Arial,sans-serif; }
.brand img { display:block; width:240px; max-width:45vw; height:auto; }
* { box-sizing:border-box; } body { margin:0; } a { color:#006a82; } button,input,textarea { font:inherit; }
.client-header { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px max(24px,calc((100vw - 1100px)/2)); background:#07192d; color:#fff; border-bottom:3px solid #00d4ff; }
.client-header a { color:#fff; text-decoration:none; } .brand { font-size:1.3rem; font-weight:800; } .brand span { display:block; font-size:.7rem; font-weight:400; margin-top:4px; }
.login-card { max-width:460px; margin:60px auto; background:#fff; padding:32px; border-radius:12px; box-shadow:0 8px 35px #0b294714; }
h1 { font-size:1.65rem; line-height:1.3; margin:8px 0 16px; } p { line-height:1.6; } .eyebrow { font-size:.75rem; font-weight:700; text-transform:uppercase; color:#006a82; margin:0; }
label { display:block; margin:22px 0 8px; font-weight:700; font-size:.85rem; } input { width:100%; border:1px solid #a6b9c9; border-radius:7px; padding:13px; }
button,.primary { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:12px 18px; cursor:pointer; border:1px solid #a6b9c9; border-radius:7px; background:#fff; color:#0b2947; text-decoration:none; }
.primary { background:#00d4ff; border-color:#00d4ff; font-weight:700; } form button { width:100%; margin-top:14px; } button:disabled { opacity:.5; cursor:wait; }
:focus-visible { outline:3px solid #007d96; outline-offset:3px; } [hidden] { display:none!important; } .support { font-size:.85rem; } #client-feedback { color:#8b3319; }
.portal { max-width:1100px; margin:40px auto; padding:0 24px; } .portal-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:24px; }
.order-card { background:#fff; border:1px solid #d9e5ee; border-radius:12px; padding:26px; margin-bottom:20px; } .order-top { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; } .order-top h2 { margin:0; font-size:1.1rem; }
.order-status { background:#e1f6fa; color:#00576c; border-radius:20px; font-size:.8rem; padding:6px 12px; } .order-meta { color:#52647a; font-size:.8rem; }
.order-details { display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; margin:20px 0; } .order-details dt { font-size:.75rem; color:#52647a; margin-bottom:5px; } .order-details dd { margin:0; line-height:1.5; overflow-wrap:anywhere; }
.quote-result { background:#f3fbfd; border-left:4px solid #00b5d5; padding:20px; border-radius:5px; } .quote-result h3 { margin:0 0 12px; } .quote-price { font-size:1.5rem; font-weight:800; margin:10px 0; } .quote-description { white-space:pre-wrap; overflow-wrap:anywhere; }
.waiting { background:#f4f7fa; border-radius:6px; padding:18px; color:#52647a; }
.access-code-copy { padding:16px; margin:20px 0; border:1px solid #b9eaf3; border-radius:8px; background:#e6f8fc; }
.access-code-copy button { width:100%; margin:8px 0; }
.access-code-number { font-size:30px; letter-spacing:6px; font-weight:800; }
.quote-result h4 { margin:24px 0 12px; font-size:1rem; }
.quote-item-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:8px; }
.quote-item-list li { background:#fff; border:1px solid #d9e5ee; border-radius:7px; padding:10px 12px; }
.quote-item-list strong { font-size:.8rem; line-height:1.35; display:block; }
.quote-item-list p { margin:4px 0 0; font-size:.75rem; line-height:1.45; color:#52647a; }
.quote-result .quote-actions { display:flex; flex-wrap:wrap; column-gap:24px; row-gap:16px; align-items:center; margin-top:22px; }
.quote-result .quote-actions > * { margin:0; flex:0 1 auto; }
.quote-stage:disabled { opacity:1; cursor:default; color:#52647a; background:#edf3f8; border:1px solid #bacbd9; font-weight:600; }
.approval-dialog { position:fixed; inset:0; margin:auto; padding:0; width:min(520px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow:auto; border:1px solid #c6dbe7; border-radius:14px; background:#fff; color:#0b2947; box-shadow:0 20px 70px #07192d55; }
.approval-dialog::backdrop { background:rgba(7,25,45,.72); }
.approval-brand { padding:26px; background:#07192d; border-bottom:4px solid #00d4ff; text-align:center; }
.approval-brand img { display:block; width:220px; max-width:100%; height:auto; margin:auto; }
.approval-body { padding:28px; }
.approval-body h2 { margin:0 0 12px; font-size:1.35rem; }
.approval-dialog .quote-actions { display:flex; flex-direction:row; flex-wrap:wrap; gap:20px; align-items:center; margin-top:24px; }
.approval-dialog .quote-actions > button { margin:0; width:auto; }
.approval-success-message { padding:16px; background:#e6f8fc; border-left:4px solid #00d4ff; border-radius:6px; font-weight:700; color:#0b2947; }
.approval-body select { width:100%; padding:12px; border:1px solid #a6b9c9; border-radius:7px; font:inherit; color:#0b2947; background:white; }
.installation-choice { border-top:1px solid #c9e3ec; margin-top:24px; padding-top:8px; }
.installation-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
.address-map { display:block; width:100%; height:200px; border:1px solid #c6dbe7; border-radius:8px; margin:12px 0 8px; }
.quote-contact { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:12px 18px; border:1px solid #007d96; border-radius:7px; background:#fff; color:#006a82; text-decoration:none; font-weight:600; }
@media(max-width:600px) { .quote-result .quote-actions { flex-direction:column; align-items:stretch; } .quote-actions > * { width:100%; } .quote-item-list { grid-template-columns:1fr 1fr; } }
.quote-total { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; border-top:1px solid #c9e3ec; margin-top:24px; padding-top:16px; }
@media(max-width:600px) { .login-card { margin:28px 16px; padding:24px; } .client-header { padding:18px; } .portal { padding:0 16px; } .order-card { padding:20px; } .order-details { grid-template-columns:1fr; } }