/* ========================================================================= Roof Estimate Widget — styles (namespaced with .rrew to avoid theme clashes) ========================================================================= */ /* Google Places autocomplete dropdown is appended to at z-index 1000 — lift it above the widget panel so address suggestions are visible/clickable. */ .pac-container{ z-index:2147483647 !important; } #rrew-root, #rrew-root *{ box-sizing:border-box; } #rrew-root{ --rrew-ink:#1b2733; --rrew-muted:#6b7a8d; --rrew-line:#e2e8f0; --rrew-bg:#f6f9fc; --rrew-ok:#1e8f5a; --rrew-primary:#1f4e79; --rrew-accent:#e8a33d; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--rrew-ink); } /* ---- Floating launcher ---- */ #rrew-launcher{ position:fixed; right:22px; bottom:22px; z-index:2147483000; display:inline-flex; align-items:center; gap:10px; background:var(--rrew-primary); color:#fff; border:none; cursor:pointer; font-size:15px; font-weight:700; font-family:inherit; padding:14px 20px; border-radius:999px; box-shadow:0 10px 30px rgba(16,42,67,.28); transition:transform .15s, box-shadow .15s; } #rrew-launcher:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(16,42,67,.34); } #rrew-launcher .rrew-launcher-ic{ display:inline-flex; } .rrew-open #rrew-launcher{ transform:scale(.96); opacity:.9; } @media(max-width:520px){ #rrew-launcher .rrew-launcher-txt{ display:none; } #rrew-launcher{ padding:16px; } } /* ---- Panel ---- */ #rrew-panel{ position:fixed; right:22px; bottom:92px; z-index:2147483001; width:400px; max-width:calc(100vw - 32px); height:640px; max-height:calc(100vh - 130px); background:#fff; border:1px solid var(--rrew-line); border-radius:18px; overflow:hidden; box-shadow:0 24px 60px rgba(16,42,67,.30); display:flex; flex-direction:column; animation:rrewPop .22s ease; } @keyframes rrewPop{ from{ opacity:0; transform:translateY(12px) scale(.98);} to{opacity:1;transform:none;} } /* CRITICAL: the [hidden] attribute must win over #rrew-panel's display:flex, otherwise the panel is permanently open and the close button can't hide it. */ #rrew-panel[hidden]{ display:none !important; } @media(max-width:520px){ #rrew-panel{ right:0; left:0; bottom:0; top:0; width:100%; max-width:100%; height:100vh; height:100dvh; max-height:100vh; max-height:100dvh; border-radius:0; } } .rrew-panel-head{ background:linear-gradient(135deg,var(--rrew-primary),color-mix(in srgb,var(--rrew-primary) 70%, #000)); color:#fff; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:calc(16px + env(safe-area-inset-top)); } .rrew-panel-title{ font-size:16px; font-weight:800; line-height:1.2; } .rrew-panel-sub{ font-size:12px; opacity:.9; margin-top:2px; } #rrew-close{ background:rgba(255,255,255,.15); color:#fff; border:none; width:38px; height:38px; min-width:38px; border-radius:50%; font-size:24px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; flex:0 0 auto; -webkit-tap-highlight-color:transparent; } #rrew-close:hover{ background:rgba(255,255,255,.28); } #rrew-close:active{ background:rgba(255,255,255,.4); } @media(max-width:520px){ .rrew-panel-foot{ padding-bottom:calc(9px + env(safe-area-inset-bottom)); } #rrew-launcher{ bottom:calc(16px + env(safe-area-inset-bottom)); } } .rrew-progress{ display:flex; gap:6px; padding:12px 18px 0; } .rrew-seg{ flex:1; height:5px; border-radius:99px; background:var(--rrew-line); transition:background .3s; } .rrew-seg.done{ background:var(--rrew-accent); } .rrew-panel-body{ padding:14px 18px 18px; overflow-y:auto; flex:1; } .rrew-panel-foot{ text-align:center; font-size:11px; color:var(--rrew-muted); padding:9px; border-top:1px solid var(--rrew-line); } /* ---- Steps ---- */ .rrew-step{ display:none; animation:rrewFade .3s ease; } .rrew-step.active{ display:block; } @keyframes rrewFade{ from{opacity:0; transform:translateY(6px);} to{opacity:1;transform:none;} } .rrew-q{ font-size:18px; font-weight:800; margin:6px 0 4px; } .rrew-sub{ color:var(--rrew-muted); font-size:13.5px; margin:0 0 14px; line-height:1.5; } /* Intro */ .rrew-intro{ padding-top:6px; } .rrew-h{ font-size:23px; font-weight:800; margin:6px 0 6px; } .rrew-underline{ box-shadow:inset 0 -8px 0 color-mix(in srgb,var(--rrew-accent) 45%, transparent); } .rrew-steps{ list-style:none; padding:0; margin:16px 0 6px; } .rrew-steps li{ display:flex; align-items:center; gap:10px; padding:9px 0; font-size:14px; font-weight:600; border-bottom:1px solid var(--rrew-line); } .rrew-steps li:last-child{ border-bottom:none; } .rrew-steps li span{ width:30px; height:30px; flex:0 0 30px; display:inline-flex; align-items:center; justify-content:center; background:var(--rrew-bg); border-radius:8px; } /* Option cards */ .rrew-opts{ display:grid; gap:10px; } .rrew-opt{ display:flex; align-items:center; gap:12px; border:2px solid var(--rrew-line); border-radius:13px; padding:13px; cursor:pointer; background:#fff; transition:all .16s; text-align:left; width:100%; font-family:inherit; } .rrew-opt:hover{ border-color:var(--rrew-primary); box-shadow:0 3px 10px rgba(16,42,67,.08); } .rrew-opt.sel{ border-color:var(--rrew-primary); background:color-mix(in srgb,var(--rrew-primary) 8%, #fff); } .rrew-ic{ width:42px; height:42px; flex:0 0 42px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:var(--rrew-bg); font-size:22px; } .rrew-txt b{ display:block; font-size:14.5px; } .rrew-txt small{ color:var(--rrew-muted); font-size:12.5px; } .rrew-tag{ margin-left:auto; font-size:10.5px; font-weight:700; color:var(--rrew-accent); background:color-mix(in srgb,var(--rrew-accent) 14%, #fff); border:1px solid color-mix(in srgb,var(--rrew-accent) 35%, #fff); padding:3px 8px; border-radius:99px; white-space:nowrap; } /* Fields */ .rrew-field{ margin-bottom:12px; } .rrew-field label{ display:block; font-size:12.5px; font-weight:700; margin-bottom:5px; } .rrew-field input{ width:100%; padding:12px 13px; border:2px solid var(--rrew-line); border-radius:11px; font-size:15px; font-family:inherit; color:var(--rrew-ink); background:#fff; } .rrew-field input:focus{ outline:none; border-color:var(--rrew-primary); } /* Google Places (New) autocomplete web component */ .rrew-pacmount{ width:100%; } .rrew-pacmount gmp-place-autocomplete{ width:100%; display:block; } .rrew-pacmount input{ width:100%; } #rrewAddrFallback{ color:var(--rrew-muted); } .rrew-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .rrew-consent{ display:flex; gap:9px; align-items:flex-start; margin-top:4px; } .rrew-consent input{ width:17px; height:17px; margin-top:2px; flex:0 0 17px; } .rrew-consent span{ font-size:11.5px; color:var(--rrew-muted); line-height:1.5; } .rrew-err{ color:#c0392b; font-size:12.5px; margin-top:8px; display:none; } /* Buttons + nav */ .rrew-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:18px; gap:10px; } .rrew-navr{ display:flex; gap:8px; align-items:center; } .rrew-btn{ appearance:none; border:none; font-family:inherit; font-weight:700; font-size:14.5px; padding:12px 20px; border-radius:11px; cursor:pointer; transition:all .16s; } .rrew-btn.primary{ background:var(--rrew-primary); color:#fff; } .rrew-btn.primary:hover{ filter:brightness(.94); } .rrew-btn.primary:disabled{ background:#b9c6d6; cursor:not-allowed; } .rrew-btn.ghost{ background:transparent; color:var(--rrew-muted); padding:12px 6px; } .rrew-btn.ghost:hover{ color:var(--rrew-ink); } .rrew-btn.outline{ background:#fff; border:2px solid var(--rrew-line); color:var(--rrew-ink); } .rrew-btn.outline:hover{ border-color:var(--rrew-primary); } .rrew-btn.sm{ padding:8px 12px; font-size:12.5px; border-radius:9px; } .rrew-btn.big{ width:100%; font-size:15.5px; padding:15px; } /* Map */ #rrewMap{ width:100%; height:280px; border-radius:12px; border:1px solid var(--rrew-line); background:#e9eef3; } .rrew-maptools{ display:flex; gap:8px; align-items:center; margin:10px 0 2px; } .rrew-measure{ margin-left:auto; font-weight:800; font-size:13.5px; color:var(--rrew-primary); } .rrew-mapfallback{ padding:20px; border:1px dashed var(--rrew-line); border-radius:12px; background:var(--rrew-bg); font-size:13px; color:var(--rrew-muted); text-align:center; } /* Result */ .rrew-result{ text-align:center; padding:4px 0; } .rrew-badge{ display:inline-block; background:color-mix(in srgb,var(--rrew-ok) 12%, #fff); color:var(--rrew-ok); font-weight:800; font-size:11px; letter-spacing:.04em; text-transform:uppercase; padding:6px 13px; border-radius:99px; margin-bottom:12px; } .rrew-price{ font-size:34px; font-weight:800; color:var(--rrew-primary); letter-spacing:-.5px; margin:2px 0; } .rrew-price small{ font-size:15px; color:var(--rrew-muted); font-weight:600; } .rrew-summary{ text-align:left; background:var(--rrew-bg); border:1px solid var(--rrew-line); border-radius:12px; padding:14px 15px; margin:16px 0; font-size:13px; } .rrew-li{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px dashed var(--rrew-line); } .rrew-li:last-child{ border-bottom:none; } .rrew-li span:first-child{ color:var(--rrew-muted); white-space:nowrap; } .rrew-li span:last-child{ font-weight:700; text-align:right; } .rrew-disc{ font-size:11px; color:var(--rrew-muted); line-height:1.6; margin-top:12px; } .rrew-thanks{ text-align:center; padding:20px 4px; } .rrew-check{ width:60px; height:60px; border-radius:50%; background:color-mix(in srgb,var(--rrew-ok) 12%, #fff); color:var(--rrew-ok); display:flex; align-items:center; justify-content:center; font-size:32px; margin:0 auto 14px; } /* Fallback for browsers without color-mix (older) */ @supports not (background:color-mix(in srgb,#000 10%, #fff)){ .rrew-opt.sel{ background:#eef3f8; } .rrew-tag{ background:#fff6e8; border-color:#f2dcae; } .rrew-badge{ background:#e7f6ee; } .rrew-check{ background:#e7f6ee; } .rrew-underline{ box-shadow:inset 0 -8px 0 #f6e3c2; } .rrew-panel-head{ background:var(--rrew-primary); } }