.utility-header{
    background:#000;
    color:#fff;
    padding:16px 18px;
    border-bottom:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    text-align:left;
}

.white-title{
    color:#fff;
}

.close-btn{
    background:#F7A31E;
    color:#fff;
    border:none;
    border-radius:10px;
    padding:10px 14px;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
}

.utility-note{
    font-size:14px;
    color:#333;
    line-height:1.6;
    margin-bottom:14px;
}

.help-list{
    display:grid;
    gap:10px;
}

.help-item{
    border:1px solid #e2e2e2;
    border-radius:14px;
    padding:14px;
    background:#fbfbfb;
}

.help-title{
    font-size:15px;
    font-weight:700;
    color:#111;
    margin-bottom:6px;
}

.help-address,
.help-type{
    font-size:13px;
    color:#555;
    margin-bottom:4px;
    line-height:1.5;
}

.help-phone{
    font-size:15px;
    font-weight:700;
    color:#1A5ABE;
    margin-top:6px;
}

.help-link{
    display:inline-block;
    margin-top:8px;
    font-size:13px;
    font-weight:700;
    color:#DA2F25;
    text-decoration:none;
}

.map-canvas.map-disabled{
    pointer-events:none;
    filter:grayscale(.05);
}

.about-copy{
    line-height:1.7;
    color:#222;
}

.menu-link.nearby-link{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,#F7A31E 0%, #FFBE4D 48%, #E58E00 100%);
    color:#fff;
    border-color:#F7A31E;
    box-shadow:0 10px 22px rgba(247,163,30,.32);
}

.menu-link.nearby-link::before{
    content:"";
    position:absolute;
    top:0;
    left:-140%;
    width:90%;
    height:100%;
    background:linear-gradient(
        110deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.22) 45%,
        rgba(255,255,255,.55) 50%,
        rgba(255,255,255,.18) 55%,
        rgba(255,255,255,0) 100%
    );
    transform:skewX(-25deg);
    animation:nearbySheen 3.6s linear infinite;
}

@keyframes nearbySheen{
    0%{left:-140%}
    100%{left:160%}
}

.weather-widget{
    position:absolute;
    top:16px;
    right:16px;
    z-index:8;
    width:188px;
    min-height:52px;
    padding:9px 12px;
    border-radius:18px;
    background:linear-gradient(135deg, rgba(17,24,39,.96) 0%, rgba(37,47,63,.92) 100%);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 14px 28px rgba(0,0,0,.26);
    overflow:hidden;
}

.weather-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.weather-place{
    font-size:11px;
    color:rgba(255,255,255,.88);
    line-height:1.15;
    font-weight:600;
    max-width:92px;
}

.weather-temp{
    font-size:26px;
    font-weight:800;
    color:#fff;
    margin:1px 0 0;
    line-height:1;
}

.weather-desc{
    font-size:11px;
    color:rgba(255,255,255,.78);
    font-weight:700;
    margin-top:1px;
    line-height:1.05;
}

.weather-anim{
    position:relative;
    width:52px;
    height:38px;
    flex:0 0 52px;
}

.sun{
    position:absolute;
    width:26px;
    height:26px;
    border-radius:50%;
    background:#FFE27D;
    top:6px;
    left:20px;
    box-shadow:0 0 16px rgba(255,226,125,.7);
    animation:sunPulse 2.8s ease-in-out infinite;
}

.cloud{
    position:absolute;
    background:#dfe7f4;
    border-radius:18px;
}

.cloud.one{
    width:34px;
    height:14px;
    top:22px;
    left:12px;
}

.cloud.one::before,
.cloud.one::after{
    content:"";
    position:absolute;
    background:#dfe7f4;
    border-radius:50%;
}

.cloud.one::before{
    width:14px;
    height:14px;
    top:-6px;
    left:5px;
}

.cloud.one::after{
    width:18px;
    height:18px;
    top:-9px;
    right:3px;
}

.cloud.two{
    width:28px;
    height:12px;
    top:29px;
    left:33px;
    opacity:.9;
}

.rain-drop{
    position:absolute;
    width:3px;
    height:10px;
    background:#1A5ABE;
    border-radius:3px;
    top:38px;
    animation:rainFall 1s linear infinite;
}

.rain-drop.d1{left:22px}
.rain-drop.d2{left:34px; animation-delay:.2s}
.rain-drop.d3{left:46px; animation-delay:.4s}

.fog-line{
    position:absolute;
    width:42px;
    height:4px;
    background:#cfd7e5;
    border-radius:10px;
    left:12px;
    opacity:.9;
    animation:fogMove 2.4s ease-in-out infinite;
}

.fog-line.f1{top:24px}
.fog-line.f2{top:34px; animation-delay:.3s}
.fog-line.f3{top:44px; animation-delay:.6s}

.storm-bolt{
    position:absolute;
    left:30px;
    top:28px;
    width:0;
    height:0;
    border-left:8px solid transparent;
    border-right:4px solid transparent;
    border-top:16px solid #FFE27D;
    transform:rotate(12deg);
    animation:stormBlink 1s ease-in-out infinite;
}

.snow-dot{
    position:absolute;
    width:5px;
    height:5px;
    background:#fff;
    border:1px solid #b8c7e3;
    border-radius:50%;
    top:38px;
    animation:snowFall 1.6s linear infinite;
}
.snow-dot.s1{left:22px}
.snow-dot.s2{left:36px; animation-delay:.3s}
.snow-dot.s3{left:50px; animation-delay:.6s}

@keyframes sunPulse{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.08)}
}

@keyframes rainFall{
    0%{transform:translateY(0); opacity:1}
    100%{transform:translateY(10px); opacity:.15}
}

@keyframes fogMove{
    0%,100%{transform:translateX(0); opacity:.65}
    50%{transform:translateX(6px); opacity:1}
}

@keyframes stormBlink{
    0%,100%{opacity:1}
    50%{opacity:.25}
}

@keyframes snowFall{
    0%{transform:translateY(0); opacity:1}
    100%{transform:translateY(12px); opacity:.2}
}

.popup-card.success-pop{
    animation:successPop .55s ease forwards;
    border:2px solid #1A5ABE;
    box-shadow:0 0 0 6px rgba(26,90,190,.08), 0 18px 32px rgba(26,90,190,.18);
}

@keyframes successPop{
    0%{transform:scale(1); opacity:1}
    35%{transform:scale(1.04)}
    100%{transform:scale(.88); opacity:0}
}

@media (max-width:768px){
    .weather-widget{top:12px;right:12px;width:182px;min-height:50px;padding:8px 11px}
    .weather-temp{font-size:24px}
    .weather-place{font-size:10px;max-width:88px}
    .weather-desc{font-size:11px}
    .weather-anim{width:50px;height:36px;flex-basis:50px}
}

.utility-card{
    display:flex;
    flex-direction:column;
    max-height:min(86vh, 760px);
}

.utility-header{
    position:sticky;
    top:0;
    z-index:2;
    flex-shrink:0;
}

.utility-scroll-body{
    overflow-y:auto;
    flex:1;
    min-height:0;
}

.close-icon-btn{
    width:40px;
    height:40px;
    border:none;
    border-radius:999px;
    background:rgba(255,255,255,.14);
    color:#fff;
    font-size:28px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background .2s ease, transform .2s ease;
}

.close-icon-btn:hover{
    background:rgba(255,255,255,.22);
    transform:scale(1.04);
}

.help-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:12px;
}

.help-action-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:0 14px;
    border-radius:999px;
    background:linear-gradient(135deg,#1A5ABE 0%, #2d74e5 50%, #1A5ABE 100%);
    color:#fff;
    font-size:13px;
    font-weight:700;
    text-decoration:none;
    white-space:nowrap;
    box-shadow:0 8px 18px rgba(26,90,190,.22);
}

.help-action-btn:hover{
    filter:brightness(1.05);
}

.help-phone{
    margin-top:0;
}

.help-phone .help-action-btn,
.help-link.help-action-btn{
    color:#fff;
}



/* ===== Final weather widget icon alignment fix ===== */
.weather-widget{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) 58px !important;
    grid-template-rows:auto auto !important;
    align-items:center !important;
    column-gap:10px !important;
    row-gap:2px !important;
}

.weather-widget .weather-header{
    grid-column:2 !important;
    grid-row:1 / span 2 !important;
    align-self:center !important;
    justify-self:center !important;
    width:58px !important;
    height:40px !important;
    min-width:58px !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

.weather-widget .weather-temp{
    grid-column:1 !important;
    grid-row:1 !important;
    align-self:end !important;
    margin:0 !important;
    line-height:1 !important;
}

.weather-widget .weather-desc{
    grid-column:1 !important;
    grid-row:2 !important;
    align-self:start !important;
    margin:0 !important;
    line-height:1.08 !important;
    position:static !important;
}

.weather-widget .weather-anim{
    position:relative !important;
    width:58px !important;
    height:40px !important;
    flex:0 0 58px !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
    overflow:visible !important;
}

/* Center the actual icon artwork inside the weather box */
.weather-widget .weather-anim .sun{
    top:4px !important;
    left:28px !important;
}

.weather-widget .weather-anim .cloud.one{
    top:14px !important;
    left:8px !important;
}

.weather-widget .weather-anim .cloud.two{
    top:21px !important;
    left:28px !important;
}

.weather-widget .weather-anim .rain-drop{
    top:30px !important;
}

.weather-widget .weather-anim .fog-line.f1{ top:16px !important; }
.weather-widget .weather-anim .fog-line.f2{ top:24px !important; }
.weather-widget .weather-anim .fog-line.f3{ top:32px !important; }

.weather-widget .weather-anim .storm-bolt{
    top:20px !important;
}

.weather-widget .weather-anim .snow-dot{
    top:30px !important;
}

@media (max-width:768px){
    .weather-widget{
        grid-template-columns:minmax(0, 1fr) 54px !important;
        column-gap:8px !important;
    }

    .weather-widget .weather-header{
        width:54px !important;
        height:38px !important;
        min-width:54px !important;
    }

    .weather-widget .weather-anim{
        width:54px !important;
        height:38px !important;
        flex:0 0 54px !important;
    }

    .weather-widget .weather-anim .sun{
        top:4px !important;
        left:25px !important;
    }

    .weather-widget .weather-anim .cloud.one{
        top:14px !important;
        left:7px !important;
    }

    .weather-widget .weather-anim .cloud.two{
        top:20px !important;
        left:26px !important;
    }

    .weather-widget .weather-anim .rain-drop,
    .weather-widget .weather-anim .snow-dot{
        top:28px !important;
    }

    .weather-widget .weather-anim .fog-line.f1{ top:15px !important; }
    .weather-widget .weather-anim .fog-line.f2{ top:23px !important; }
    .weather-widget .weather-anim .fog-line.f3{ top:31px !important; }

    .weather-widget .weather-anim .storm-bolt{
        top:19px !important;
    }
}


/* ===== Premium widget polish ===== */
.weather-widget{
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.10), transparent 34%),
        linear-gradient(135deg, rgba(42,48,68,.96) 0%, rgba(22,28,43,.96) 100%) !important;
    border-radius:24px !important;
    overflow:hidden;
}

.weather-widget::after{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(180deg, rgba(255,255,255,.06), transparent 46%);
}

.weather-widget .weather-temp{
    font-size:19px !important;
    font-weight:800 !important;
    letter-spacing:-.03em;
    text-shadow:0 6px 12px rgba(0,0,0,.20);
}

.weather-widget .weather-desc{
    font-size:11px !important;
    font-weight:700 !important;
    color:rgba(255,255,255,.88) !important;
}

.weather-widget .weather-header{
    transform:translateY(-1px);
}

.weather-widget .weather-anim{
    filter:drop-shadow(0 6px 12px rgba(0,0,0,.18));
}

.map-live-chip{
    border-radius:22px !important;
}

.live-chip-face{
    padding:0 14px !important;
}

.live-text-title{
    font-size:14px !important;
    font-weight:800 !important;
}

.live-text-sub{
    font-size:10px !important;
    opacity:.92;
}

.map-user-bubble-name,
.protecu-center-bubble .map-user-bubble-name{
    letter-spacing:-.01em;
}

.help-action-btn{
    box-shadow:0 10px 18px rgba(17,17,17,.08);
    transition:transform .18s ease, box-shadow .22s ease, filter .22s ease;
}

.help-action-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 14px 22px rgba(17,17,17,.12);
}

.nearby-help-card,
.faq-web-card{
    border-radius:24px !important;
    box-shadow:0 26px 58px rgba(17,17,17,.18) !important;
    overflow:hidden;
}

.utility-header,
.survey-header{
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 30%),
        linear-gradient(135deg, #111 0%, #222 100%) !important;
}

@media (max-width:768px){
    .weather-widget{
        border-radius:22px !important;
    }
    .weather-widget .weather-temp{
        font-size:18px !important;
    }
}


/* ===== Contact us tabs and issue reporting ===== */
.contact-us-card{max-width:560px;}
.contact-tab-switcher{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:16px;
}
.contact-tab-btn{
    min-height:46px;
    border:none;
    border-radius:14px;
    padding:0 14px;
    background:#eef3fb;
    color:#1A5ABE;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    transition:all .18s ease;
}
.contact-tab-btn.active{
    background:linear-gradient(135deg,#F7A31E 0%, #FFBE4D 100%);
    color:#fff;
    box-shadow:0 10px 20px rgba(247,163,30,.22);
}
.contact-tab-panel{display:none;}
.contact-tab-panel.active{display:block;}
.contact-file-row{
    display:flex;
    align-items:center;
    gap:10px;
}
.contact-file-name{flex:1; min-width:0;}
.contact-browse-btn{min-width:108px; flex:0 0 auto;}
.contact-upload-note{margin-top:-4px; color:#6b7280; font-size:12px;}
.contact-file-list{display:flex; flex-direction:column; gap:8px; margin-top:-2px;}
.contact-file-chip{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border:1px solid #e2e8f0;
    border-radius:12px;
    background:#fff9ef;
    font-size:12px;
    line-height:1.4;
}
.contact-file-chip-name{color:#111; font-weight:700; word-break:break-word;}
.contact-file-chip-size{color:#7c5a18; white-space:nowrap; font-weight:700;}
@media (max-width:640px){
    .contact-file-row{flex-direction:column; align-items:stretch;}
    .contact-browse-btn{width:100%;}
    .contact-tab-switcher{grid-template-columns:1fr;}
}


.contact-hidden-file-input{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0, 0, 0, 0) !important;
    white-space:nowrap !important;
    border:0 !important;
    opacity:0 !important;
    pointer-events:none !important;
}