/* ==========================================================================
   Hidrologi.net Modern v2.12 — Cuaca
   Presentation layer only. Backend/API/JS remain the existing Cuaca engine.
   ========================================================================== */

body.mv2-cuaca-page{
    background:#f4f7fb;
}

.mv2-cuaca-page .mv2-main,
.mv2-cuaca-page main{
    min-width:0;
}

.cuaca-v2-page{
    --cw-v2-blue:#0873bd;
    --cw-v2-navy:#123f60;
    --cw-v2-teal:#168a72;
    --cw-v2-orange:#f58a25;
    --cw-v2-page:#f4f7fb;
    --cw-v2-card:#fff;
    --cw-v2-line:#dfe8ef;
    --cw-v2-muted:#668095;
    --cw-v2-ink:#183e5c;
    background:var(--cw-v2-page);
    color:var(--cw-v2-ink);
}

.cuaca-v2-shell{
    width:min(1180px,calc(100% - 32px));
    margin:0 auto;
}

.cuaca-v2-hero{
    padding:42px 0 20px;
    background:
        radial-gradient(circle at 8% 0%,rgba(18,137,211,.11),transparent 28%),
        radial-gradient(circle at 95% 15%,rgba(21,143,113,.08),transparent 25%),
        var(--cw-v2-page);
}

.cuaca-v2-hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
    gap:18px;
    align-items:stretch;
}

.cuaca-v2-hero-copy,
.cuaca-v2-weather-preview{
    min-width:0;
    border:1px solid var(--cw-v2-line);
    border-radius:14px;
    background:#fff;
    box-shadow:0 8px 28px rgba(27,65,95,.055);
}

.cuaca-v2-hero-copy{
    padding:28px;
}

.cuaca-v2-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#0871ca;
    font-size:9px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.cuaca-v2-eyebrow i{
    color:var(--cw-v2-orange);
    font-size:13px;
}

.cuaca-v2-hero-copy h1{
    max-width:760px;
    margin:10px 0 0;
    color:#153f5f;
    font-size:clamp(29px,4vw,48px);
    line-height:1.06;
    letter-spacing:-.04em;
}

.cuaca-v2-lead{
    max-width:700px;
    margin:13px 0 0;
    color:#607b90;
    font-size:12px;
    line-height:1.68;
}

.cuaca-v2-search-card{
    margin-top:20px;
    padding:15px;
    border:1px solid #dce7ef;
    border-radius:11px;
    background:#f9fcff;
    box-shadow:none;
}

.cuaca-v2-search-head{
    margin-bottom:11px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.cuaca-v2-search-head strong{
    display:block;
    color:#244a66;
    font-size:11px;
}

.cuaca-v2-search-head span:not(.cuaca-v2-free-badge){
    display:block;
    margin-top:2px;
    color:#7b8e9d;
    font-size:9px;
}

.cuaca-v2-free-badge{
    min-height:24px;
    padding:0 8px;
    display:inline-flex!important;
    align-items:center;
    border:1px solid #bde2d2;
    border-radius:999px;
    color:#187858!important;
    background:#f1fbf6;
    font-size:8px!important;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.cuaca-v2-search-card .cuaca-input{
    min-height:42px;
    padding-top:8px;
    padding-bottom:8px;
    border-radius:8px;
    font-size:10px;
}

.cuaca-v2-search-card .cuaca-coordinate-grid{
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.cuaca-v2-search-card .cuaca-field label{
    margin-bottom:4px;
    color:#536f84;
    font-size:8.5px;
}

.cuaca-v2-search-card .cuaca-form-actions{
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    margin-top:10px;
}

.cuaca-v2-page .cuaca-btn-primary,
.cuaca-v2-page .cuaca-btn-secondary{
    min-height:38px;
    padding:0 13px;
    border-radius:7px;
    font-size:9px;
    font-weight:900;
}

.cuaca-v2-page .cuaca-btn-primary{
    background:#0873bd;
    box-shadow:none;
}

.cuaca-v2-page .cuaca-btn-primary:hover{
    background:#0666a9;
    box-shadow:0 6px 16px rgba(8,115,189,.15);
}

.cuaca-v2-page .cuaca-btn-secondary{
    border-color:#ccdce7;
    color:#315f7e;
    background:#fff;
}

.cuaca-v2-form-note{
    margin:8px 0 0;
    color:#8b9aa6;
    font-size:8px;
    line-height:1.45;
}

.cuaca-v2-weather-preview{
    position:relative;
    overflow:hidden;
    padding:24px;
    color:#fff;
    border-color:transparent;
    background:
        radial-gradient(circle at 85% 12%,rgba(255,255,255,.18),transparent 21%),
        linear-gradient(135deg,#075f98,#0d806e);
}

.cuaca-v2-weather-preview::after{
    content:"";
    position:absolute;
    right:-70px;
    bottom:-90px;
    width:220px;
    height:220px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:50%;
    box-shadow:
        0 0 0 35px rgba(255,255,255,.035),
        0 0 0 70px rgba(255,255,255,.02);
}

.cuaca-v2-preview-head{
    position:relative;
    z-index:1;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.cuaca-v2-preview-head span{
    display:block;
    color:rgba(255,255,255,.7);
    font-size:8.5px;
}

.cuaca-v2-preview-head strong{
    display:block;
    margin-top:2px;
    font-size:11px;
}

.cuaca-v2-preview-head i{
    font-size:28px;
}

.cuaca-v2-preview-main{
    position:relative;
    z-index:1;
    margin-top:24px;
    display:flex;
    align-items:end;
    gap:18px;
}

.cuaca-v2-preview-temp{
    font-size:68px;
    font-weight:200;
    line-height:.85;
    letter-spacing:-.07em;
}

.cuaca-v2-preview-main strong{
    display:block;
    font-size:13px;
}

.cuaca-v2-preview-main span{
    display:block;
    margin-top:4px;
    color:rgba(255,255,255,.68);
    font-size:8.5px;
}

.cuaca-v2-preview-metrics{
    position:relative;
    z-index:1;
    margin-top:26px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.cuaca-v2-preview-metrics div{
    padding:12px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:9px;
    background:rgba(255,255,255,.08);
}

.cuaca-v2-preview-metrics span{
    display:block;
    color:rgba(255,255,255,.67);
    font-size:8px;
}

.cuaca-v2-preview-metrics strong{
    display:block;
    margin-top:3px;
    font-size:12px;
}

.cuaca-v2-preview-foot{
    position:relative;
    z-index:1;
    margin-top:14px;
    display:flex;
    gap:6px;
    color:rgba(255,255,255,.62);
    font-size:8px;
    line-height:1.45;
}

.cuaca-v2-capability-strip{
    margin-top:12px;
    padding:11px 14px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:7px;
    border:1px solid var(--cw-v2-line);
    border-radius:10px;
    background:#fff;
}

.cuaca-v2-capability-strip>div{
    min-width:0;
    display:flex;
    align-items:center;
    gap:8px;
}

.cuaca-v2-capability-strip i{
    width:30px;
    height:30px;
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    color:#0873bd;
    background:#eef7fd;
    font-size:14px;
}

.cuaca-v2-capability-strip span{
    color:#718596;
    font-size:8px;
    line-height:1.3;
}

.cuaca-v2-capability-strip strong{
    display:block;
    color:#32556f;
    font-size:9px;
}

.cuaca-v2-section{
    padding:18px 0;
}

.cuaca-v2-section.is-soft{
    background:#eef3f7;
}

.cuaca-v2-section-head{
    max-width:760px;
    margin-bottom:12px;
}

.cuaca-v2-section-head>span,
.cuaca-v2-section-kicker,
.cuaca-v2-card-label{
    color:#0873bd;
    font-size:8px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.cuaca-v2-section-head h2,
.cuaca-v2-context-main h2{
    margin:6px 0 0;
    color:#173f5d;
    font-size:22px;
    line-height:1.2;
    letter-spacing:-.025em;
}

.cuaca-v2-section-head p,
.cuaca-v2-context-main>p{
    margin:7px 0 0;
    color:#687f91;
    font-size:10px;
    line-height:1.58;
}

.cuaca-v2-feature-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}

.cuaca-v2-feature-grid article{
    min-width:0;
    padding:16px;
    border:1px solid var(--cw-v2-line);
    border-radius:10px;
    background:#fff;
    box-shadow:0 4px 14px rgba(31,72,107,.035);
}

.cuaca-v2-feature-icon{
    width:35px;
    height:35px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    font-size:16px;
}

.cuaca-v2-feature-icon.is-blue{color:#0873bd;background:#edf7ff}
.cuaca-v2-feature-icon.is-green{color:#14815f;background:#eefaf5}
.cuaca-v2-feature-icon.is-orange{color:#cf6b13;background:#fff6eb}
.cuaca-v2-feature-icon.is-purple{color:#7655b8;background:#f5f0ff}

.cuaca-v2-feature-grid h3{
    margin:11px 0 0;
    color:#294d67;
    font-size:11px;
}

.cuaca-v2-feature-grid p{
    margin:5px 0 0;
    color:#748697;
    font-size:9px;
    line-height:1.52;
}

.cuaca-v2-context-grid{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(330px,.9fr);
    gap:12px;
}

.cuaca-v2-context-main,
.cuaca-v2-reading-card{
    padding:20px;
    border:1px solid var(--cw-v2-line);
    border-radius:11px;
    background:#fff;
}

.cuaca-v2-context-main ul{
    margin:15px 0 0;
    padding:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    list-style:none;
}

.cuaca-v2-context-main li{
    position:relative;
    padding:9px 10px 9px 28px;
    border:1px solid #e5edf2;
    border-radius:8px;
    color:#617a8d;
    background:#fafcfd;
    font-size:8.5px;
    line-height:1.45;
}

.cuaca-v2-context-main li::before{
    content:"✓";
    position:absolute;
    left:10px;
    top:9px;
    color:#168a72;
    font-weight:900;
}

.cuaca-v2-reading-item{
    padding:11px 0;
    display:grid;
    grid-template-columns:32px minmax(0,1fr);
    gap:10px;
    border-bottom:1px solid #e8eef3;
}

.cuaca-v2-reading-item:last-child{
    border-bottom:0;
}

.cuaca-v2-reading-item>span{
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    color:#0873bd;
    background:#eef7fd;
    font-size:8px;
    font-weight:900;
}

.cuaca-v2-reading-item strong{
    display:block;
    color:#355a73;
    font-size:9.5px;
}

.cuaca-v2-reading-item p{
    margin:3px 0 0;
    color:#758897;
    font-size:8.5px;
    line-height:1.45;
}

.cuaca-v2-step-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;
}

.cuaca-v2-step-grid article{
    position:relative;
    min-height:105px;
    padding:15px 14px 14px 48px;
    border:1px solid var(--cw-v2-line);
    border-radius:9px;
    background:#fff;
}

.cuaca-v2-step-grid article>span{
    position:absolute;
    left:13px;
    top:14px;
    color:#f58a25;
    font-size:10px;
    font-weight:900;
}

.cuaca-v2-step-grid h3{
    margin:0;
    color:#345871;
    font-size:10px;
}

.cuaca-v2-step-grid p{
    margin:5px 0 0;
    color:#768896;
    font-size:8.5px;
    line-height:1.5;
}

.cuaca-v2-warning{
    margin-top:11px;
    padding:11px 13px;
    display:flex;
    gap:9px;
    align-items:flex-start;
    border:1px solid #edd8bd;
    border-radius:9px;
    color:#80531f;
    background:#fff9f1;
    font-size:8.5px;
    line-height:1.5;
}

.cuaca-v2-warning i{
    color:#d77d1c;
}

.cuaca-v2-related-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;
}

.cuaca-v2-related-grid>a{
    min-width:0;
    padding:14px;
    display:grid;
    grid-template-columns:34px minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    border:1px solid var(--cw-v2-line);
    border-radius:9px;
    color:inherit;
    background:#fff;
    text-decoration:none;
    transition:.16s ease;
}

.cuaca-v2-related-grid>a:hover{
    transform:translateY(-1px);
    border-color:#b9d9ed;
    box-shadow:0 5px 14px rgba(31,72,107,.06);
}

.cuaca-v2-related-grid>a>i{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    color:#0873bd;
    background:#edf7ff;
    font-size:15px;
}

.cuaca-v2-related-grid strong{
    display:block;
    color:#345871;
    font-size:9.5px;
}

.cuaca-v2-related-grid small{
    display:block;
    margin-top:3px;
    color:#7a8d9d;
    font-size:8px;
}

.cuaca-v2-related-grid b{
    color:#8ca0af;
    font-size:14px;
}

.cuaca-v2-faq{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px 10px;
}

.cuaca-v2-faq details{
    align-self:start;
    overflow:hidden;
    border:1px solid var(--cw-v2-line);
    border-radius:9px;
    background:#fff;
}

.cuaca-v2-faq summary{
    padding:12px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    color:#355a73;
    font-size:9px;
    font-weight:850;
    cursor:pointer;
    list-style:none;
}

.cuaca-v2-faq summary::-webkit-details-marker{display:none}

.cuaca-v2-faq summary span{
    flex:0 0 auto;
    color:#0873bd;
    font-size:14px;
}

.cuaca-v2-faq details[open] summary{
    color:#0873bd;
    background:#f5faff;
}

.cuaca-v2-faq details>div{
    padding:0 14px 13px;
    color:#718695;
    font-size:8.5px;
    line-height:1.55;
}

.cuaca-v2-bottom-cta{
    padding:24px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:20px;
    align-items:center;
    border-radius:12px;
    color:#fff;
    background:linear-gradient(135deg,#075d94,#0f7b69);
    box-shadow:0 8px 22px rgba(7,93,148,.13);
}

.cuaca-v2-bottom-cta>div>span{
    color:#aee8dc;
    font-size:8px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.cuaca-v2-bottom-cta h2{
    max-width:650px;
    margin:6px 0 0;
    color:#fff;
    font-size:19px;
}

.cuaca-v2-bottom-cta p{
    max-width:650px;
    margin:6px 0 0;
    color:rgba(255,255,255,.72);
    font-size:9px;
    line-height:1.5;
}

.cuaca-v2-bottom-cta>a{
    min-height:38px;
    padding:0 13px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:7px;
    color:#155273;
    background:#fff;
    font-size:9px;
    font-weight:900;
    text-decoration:none;
}

/* Result page ------------------------------------------------------------ */

.cuaca-v2-result-hero{
    padding:30px 0 13px;
    background:var(--cw-v2-page);
}

.cuaca-v2-result-head{
    padding:19px 20px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    border:1px solid var(--cw-v2-line);
    border-radius:12px;
    background:#fff;
    box-shadow:0 5px 16px rgba(31,72,107,.04);
}

.cuaca-v2-result-head h1{
    margin:7px 0 0;
    color:#173f5d;
    font-size:25px;
    line-height:1.15;
}

.cuaca-v2-result-head .cuaca-meta{
    margin-top:9px;
}

.cuaca-v2-result-actions{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}

.cuaca-v2-result-body{
    padding:0 0 24px;
}

.cuaca-v2-overview-grid{
    display:grid;
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    gap:11px;
    margin-bottom:11px;
}

.cuaca-v2-result .cuaca-current-card,
.cuaca-v2-result .cuaca-summary-card,
.cuaca-v2-result .cuaca-panel{
    border-radius:11px;
    box-shadow:0 5px 16px rgba(31,72,107,.04);
}

.cuaca-v2-result .cuaca-current-card{
    padding:18px;
    background:
        radial-gradient(circle at 85% 10%,rgba(255,255,255,.2),transparent 26%),
        linear-gradient(135deg,#086ca7,#13826e);
}

.cuaca-v2-card-label{
    display:block;
    margin-bottom:7px;
}

.cuaca-current-card .cuaca-v2-card-label{
    color:rgba(255,255,255,.7);
}

.cuaca-v2-result .cuaca-current-temp{
    font-size:54px;
}

.cuaca-v2-result .cuaca-current-card img{
    width:76px;
    height:76px;
}

.cuaca-v2-result .cuaca-current-stat{
    padding:9px;
    border-radius:8px;
}

.cuaca-v2-result .cuaca-summary-card{
    padding:18px;
}

.cuaca-v2-summary-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.cuaca-v2-summary-head h2{
    margin:4px 0 0;
    color:#2f566f;
    font-size:14px;
}

.cuaca-v2-result .cuaca-summary-metrics{
    margin-top:13px;
}

.cuaca-v2-result .cuaca-summary-metric{
    padding:10px 8px;
    border-radius:8px;
}

.cuaca-v2-result .cuaca-summary-metric strong{
    font-size:14px;
}

.cuaca-v2-summary-peak,
.cuaca-v2-method-note{
    margin:9px 0 0;
    color:#7b8d9c;
    font-size:8.5px;
    line-height:1.45;
}

.cuaca-v2-result .cuaca-summary-advice{
    margin-top:9px;
    font-size:9px;
}

.cuaca-v2-panel{
    margin-bottom:11px;
}

.cuaca-v2-result .cuaca-panel-head{
    padding:13px 15px;
}

.cuaca-v2-result .cuaca-panel-head h2{
    margin-top:4px;
    font-size:13px;
}

.cuaca-v2-result .cuaca-panel-head p{
    margin-top:3px;
    font-size:8.5px;
}

.cuaca-v2-result .cuaca-panel-body{
    padding:13px;
}

.cuaca-v2-result .cuaca-chart-wrap{
    height:300px;
}

.cuaca-v2-result .cuaca-hour-card{
    flex-basis:148px;
    padding:10px;
    border-radius:9px;
}

.cuaca-v2-result .cuaca-daily-card{
    flex-basis:176px;
    padding:10px;
    border-radius:9px;
}

.cuaca-v2-source-block{
    display:grid;
    gap:9px;
}

.cuaca-v2-source-block .cuaca-v2-warning{
    margin-top:0;
}

.cuaca-v2-result .cuaca-source{
    border:1px solid var(--cw-v2-line);
    border-radius:9px;
    background:#fff;
}

/* Preserve map quality while matching Modern v2 shell */
.cuaca-v2-result .cuaca-map-toolbar{
    background:#f8fbfd;
}

.cuaca-v2-result .cuaca-map-action,
.cuaca-v2-result .cuaca-layer-btn,
.cuaca-v2-result .cuaca-contrast-toggle,
.cuaca-v2-result .cuaca-opacity-control{
    border-radius:8px;
    box-shadow:none;
}

.cuaca-v2-result .cuaca-layer-btn.is-active,
.cuaca-v2-result .cuaca-contrast-toggle.is-active{
    background:#0873bd;
    box-shadow:none;
}

@media(max-width:980px){
    .cuaca-v2-hero-grid,
    .cuaca-v2-context-grid{
        grid-template-columns:1fr;
    }

    .cuaca-v2-weather-preview{
        min-height:320px;
    }

    .cuaca-v2-feature-grid{
        grid-template-columns:1fr 1fr;
    }

    .cuaca-v2-overview-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:760px){
    .cuaca-v2-shell{
        width:min(100% - 20px,1180px);
    }

    .cuaca-v2-hero{
        padding-top:18px;
    }

    .cuaca-v2-hero-copy,
    .cuaca-v2-weather-preview{
        padding:16px;
        border-radius:10px;
    }

    .cuaca-v2-hero-copy h1{
        font-size:30px;
    }

    .cuaca-v2-lead{
        font-size:10.5px;
    }

    .cuaca-v2-search-card{
        margin-top:14px;
        padding:11px;
    }

    .cuaca-v2-search-card .cuaca-coordinate-grid{
        grid-template-columns:1fr 1fr;
    }

    .cuaca-v2-search-card .cuaca-form-actions{
        grid-template-columns:1fr;
    }

    .cuaca-v2-weather-preview{
        min-height:0;
    }

    .cuaca-v2-preview-temp{
        font-size:54px;
    }

    .cuaca-v2-capability-strip{
        grid-template-columns:1fr 1fr;
    }

    .cuaca-v2-feature-grid,
    .cuaca-v2-related-grid{
        grid-template-columns:1fr 1fr;
    }

    .cuaca-v2-context-main ul{
        grid-template-columns:1fr;
    }

    .cuaca-v2-step-grid{
        grid-template-columns:1fr 1fr;
    }

    .cuaca-v2-faq{
        grid-template-columns:1fr;
    }

    .cuaca-v2-bottom-cta{
        grid-template-columns:1fr;
        padding:18px;
    }

    .cuaca-v2-bottom-cta>a{
        width:100%;
    }

    .cuaca-v2-result-hero{
        padding-top:16px;
    }

    .cuaca-v2-result-head{
        padding:14px;
        align-items:stretch;
        flex-direction:column;
    }

    .cuaca-v2-result-head h1{
        font-size:20px;
    }

    .cuaca-v2-result-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .cuaca-v2-result-actions .cuaca-btn-secondary{
        width:100%;
    }

    .cuaca-v2-summary-head{
        flex-direction:column;
    }

    .cuaca-v2-result .cuaca-chart-wrap{
        height:260px;
    }

    .cuaca-v2-result #cuacaMap{
        height:58vh;
        min-height:390px;
    }
}

@media(max-width:480px){
    .cuaca-v2-shell{
        width:min(100% - 14px,1180px);
    }

    .cuaca-v2-hero-copy h1{
        font-size:27px;
    }

    .cuaca-v2-search-card .cuaca-coordinate-grid{
        grid-template-columns:1fr;
    }

    .cuaca-v2-preview-metrics{
        grid-template-columns:1fr 1fr;
    }

    .cuaca-v2-capability-strip,
    .cuaca-v2-feature-grid,
    .cuaca-v2-related-grid,
    .cuaca-v2-step-grid{
        grid-template-columns:1fr;
    }

    .cuaca-v2-result-actions{
        grid-template-columns:1fr;
    }

    .cuaca-v2-result .cuaca-current-stats{
        grid-template-columns:1fr 1fr;
    }

    .cuaca-v2-result .cuaca-summary-metrics{
        grid-template-columns:1fr 1fr 1fr;
    }
}


/* ==========================================================================
   Modern v2.12.1 — Loading visibility fix
   .cuaca-loading uses display:flex, therefore the HTML hidden attribute can
   be overridden by author CSS. Make hidden state explicit and authoritative.
   ========================================================================== */

.cuaca-v2-page .cuaca-loading[hidden],
.cuaca-v2-page .cuaca-error[hidden],
.cuaca-v2-page #cuacaContent[hidden]{
    display:none!important;
}


/* ==========================================================================
   Modern v2.12.2 — Cuaca Result Refinement
   ========================================================================== */

/* 1. Readability --------------------------------------------------------- */
.cuaca-v2-result .cuaca-meta span{
    font-size:9px;
}

.cuaca-v2-result .cuaca-current-stat span,
.cuaca-v2-result .cuaca-summary-metric span{
    font-size:8.5px;
}

.cuaca-v2-result .cuaca-current-stat strong{
    font-size:10px;
}

.cuaca-v2-result .cuaca-current-desc{
    font-size:11px;
}

.cuaca-v2-result .cuaca-v2-summary-peak,
.cuaca-v2-result .cuaca-v2-method-note,
.cuaca-v2-result .cuaca-summary-advice{
    font-size:9.5px;
    line-height:1.55;
}

.cuaca-v2-result .cuaca-panel-head p,
.cuaca-v2-result .cuaca-source,
.cuaca-v2-result .cuaca-map-foot{
    font-size:9px;
}

.cuaca-v2-result .cuaca-hour-time,
.cuaca-v2-result .cuaca-daily-date{
    font-size:9px;
}

.cuaca-v2-result .cuaca-hour-temp{
    font-size:18px;
}

.cuaca-v2-result .cuaca-hour-rain,
.cuaca-v2-result .cuaca-daily-rain,
.cuaca-v2-result .cuaca-daily-desc{
    font-size:8.5px;
}

/* 2. Interpretation label ----------------------------------------------- */
.cuaca-v2-level-wrap{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:4px;
}

.cuaca-v2-level-wrap small{
    color:#8a9aa6;
    font-size:7px;
    font-weight:700;
    line-height:1.2;
    text-align:right;
}

/* 3. Horizontal forecast navigation ------------------------------------ */
.cuaca-v2-scroll-actions{
    display:flex;
    align-items:center;
    gap:5px;
}

.cuaca-v2-scroll-actions button{
    width:31px;
    height:31px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid #d6e2ea;
    border-radius:7px;
    color:#3a6683;
    background:#fff;
    font-size:18px;
    font-weight:700;
    line-height:1;
    cursor:pointer;
}

.cuaca-v2-scroll-actions button:hover{
    border-color:#9dc6df;
    color:#0873bd;
    background:#f4faff;
}

.cuaca-v2-scroll-shell{
    position:relative;
    min-width:0;
}

.cuaca-v2-scroll-shell::after{
    content:"";
    position:absolute;
    top:0;
    right:-1px;
    bottom:8px;
    width:38px;
    pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,0),#fff 88%);
}

.cuaca-v2-daily-actions{
    display:flex;
    align-items:center;
    gap:8px;
}

.cuaca-v2-day-toggle,
.cuaca-map-settings-toggle{
    min-height:31px;
    padding:0 10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:1px solid #d6e2ea;
    border-radius:7px;
    color:#315f7e;
    background:#fff;
    font-size:8.5px;
    font-weight:850;
    cursor:pointer;
}

.cuaca-v2-day-toggle:hover,
.cuaca-map-settings-toggle:hover{
    border-color:#9dc6df;
    color:#0873bd;
    background:#f4faff;
}

.cuaca-v2-day-toggle[hidden]{
    display:none!important;
}

/* 4. Map toolbar refinement --------------------------------------------- */
.cuaca-map-settings-toggle{
    width:max-content;
    max-width:100%;
    margin-top:2px;
}

.cuaca-map-settings-toggle[disabled]{
    cursor:not-allowed;
    opacity:.5;
}

.cuaca-v2-result .cuaca-map-display-controls[hidden]{
    display:none!important;
}

.cuaca-v2-result .cuaca-map-display-controls{
    margin-top:0;
}

.cuaca-v2-result .cuaca-layer-btn.is-disabled,
.cuaca-v2-result .cuaca-layer-btn:disabled{
    cursor:not-allowed;
    opacity:.45;
    transform:none!important;
    box-shadow:none!important;
}

/* 5. Basemap remains readable when dimmed ------------------------------- */
.cuaca-v2-result #cuacaMap.is-basemap-dimmed .leaflet-tile-pane .leaflet-tile{
    filter:saturate(.82) contrast(.96) brightness(1.03)!important;
}

/* 6. Cleaner point marker; details live in popup ------------------------ */
.cuaca-v2-result .cuaca-location-marker{
    width:1.45rem;
    height:1.45rem;
    border-width:3px;
}

.cuaca-v2-result .cuaca-location-wind-panel{
    display:none!important;
}

/* 7. Map health status --------------------------------------------------- */
.cuaca-v2-result .cuaca-map-status.is-error{
    max-width:min(620px,calc(100% - 1.4rem));
    border-radius:8px;
    line-height:1.45;
}

/* 8. Mobile -------------------------------------------------------------- */
@media(max-width:760px){
    .cuaca-v2-result .cuaca-panel-head{
        align-items:flex-start;
    }

    .cuaca-v2-daily-actions{
        width:100%;
        justify-content:space-between;
    }

    .cuaca-v2-scroll-actions{
        margin-left:auto;
    }

    .cuaca-v2-scroll-shell::after{
        width:28px;
    }

    .cuaca-v2-level-wrap{
        align-items:flex-start;
    }

    .cuaca-v2-level-wrap small{
        text-align:left;
    }

    .cuaca-map-settings-toggle{
        width:100%;
    }
}

@media(max-width:480px){
    .cuaca-v2-daily-actions{
        align-items:stretch;
        flex-direction:column;
    }

    .cuaca-v2-day-toggle{
        width:100%;
    }

    .cuaca-v2-scroll-actions{
        width:100%;
        margin-left:0;
        justify-content:flex-end;
    }

    .cuaca-v2-result .cuaca-summary-metrics{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .cuaca-v2-result .cuaca-summary-metric{
        padding:9px 4px;
    }

    .cuaca-v2-result .cuaca-summary-metric strong{
        font-size:12px;
    }
}

/* 9. Print/PDF layout ---------------------------------------------------- */
@media print{
    @page{
        size:A4 portrait;
        margin:12mm;
    }

    body.mv2-cuaca-page{
        background:#fff!important;
    }

    .mv2-cuaca-page header,
    .mv2-cuaca-page footer,
    .cuaca-v2-result-actions,
    .cuaca-v2-scroll-actions,
    .cuaca-v2-day-toggle,
    .cuaca-map-settings-toggle,
    .cuaca-map-head-actions,
    .cuaca-map-toolbar,
    .cuaca-map-foot{
        display:none!important;
    }

    .cuaca-v2-shell{
        width:100%!important;
        max-width:none!important;
    }

    .cuaca-v2-result-hero{
        padding:0 0 8mm!important;
    }

    .cuaca-v2-result-body{
        padding:0!important;
    }

    .cuaca-v2-result-head,
    .cuaca-v2-overview-grid,
    .cuaca-v2-panel,
    .cuaca-current-card,
    .cuaca-summary-card,
    .cuaca-v2-source-block{
        break-inside:avoid;
        page-break-inside:avoid;
    }

    .cuaca-v2-overview-grid{
        grid-template-columns:1fr 1fr!important;
    }

    .cuaca-v2-result .cuaca-panel{
        box-shadow:none!important;
        margin-bottom:6mm!important;
    }

    .cuaca-v2-result .cuaca-chart-wrap{
        height:240px!important;
    }

    .cuaca-hourly-scroll,
    .cuaca-daily-scroll{
        display:grid!important;
        grid-template-columns:repeat(4,minmax(0,1fr))!important;
        overflow:visible!important;
        gap:4mm!important;
    }

    .cuaca-hour-card,
    .cuaca-daily-card{
        width:auto!important;
        flex:auto!important;
        break-inside:avoid;
        page-break-inside:avoid;
    }

    .cuaca-v2-scroll-shell::after{
        display:none!important;
    }

    .cuaca-map-panel{
        break-before:page;
        page-break-before:always;
    }

    #cuacaMap{
        height:150mm!important;
        min-height:150mm!important;
    }

    .cuaca-map-legend{
        font-size:8pt!important;
    }

    .cuaca-v2-warning,
    .cuaca-source{
        break-inside:avoid;
        page-break-inside:avoid;
    }
}


/* ==========================================================================
   Modern v2.12.3 — Operational Hydrology & Rain Map Enhancement
   ========================================================================== */

/* Operational 24–48 h ---------------------------------------------------- */
.cuaca-v2-operational-grid{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
    gap:11px;
    margin-bottom:11px;
}

.cuaca-v2-operational-card{
    min-width:0;
    padding:17px;
    border:1px solid var(--cw-v2-line);
    border-radius:11px;
    background:#fff;
    box-shadow:0 5px 16px rgba(31,72,107,.04);
}

.cuaca-v2-operational-card.is-summary{
    background:
        radial-gradient(circle at 100% 0%,rgba(8,115,189,.055),transparent 32%),
        #fff;
}

.cuaca-v2-operational-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}

.cuaca-v2-operational-head h2{
    margin:4px 0 0;
    color:#315872;
    font-size:14px;
}

.cuaca-v2-op-badge{
    min-height:23px;
    padding:0 8px;
    display:inline-flex;
    align-items:center;
    border:1px solid #d4e4ef;
    border-radius:999px;
    color:#5f788b;
    background:#f8fbfd;
    font-size:7px;
    font-weight:850;
    white-space:nowrap;
}

.cuaca-v2-op-metrics{
    margin-top:12px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:7px;
}

.cuaca-v2-op-metrics>div{
    min-width:0;
    padding:10px 9px;
    border:1px solid #e3ebf1;
    border-radius:8px;
    background:#fbfdff;
}

.cuaca-v2-op-metrics span{
    display:block;
    color:#7a8d9c;
    font-size:7.5px;
}

.cuaca-v2-op-metrics strong{
    display:block;
    margin-top:4px;
    color:#2f566f;
    font-size:10px;
    line-height:1.3;
}

.cuaca-v2-op-notes{
    margin-top:9px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
}

.cuaca-v2-op-notes>div{
    min-width:0;
    padding:10px;
    display:grid;
    grid-template-columns:29px minmax(0,1fr);
    gap:8px;
    align-items:start;
    border:1px solid #e4ecf2;
    border-radius:8px;
    background:#fff;
}

.cuaca-v2-op-notes i{
    width:29px;
    height:29px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    color:#0873bd;
    background:#eef7fd;
    font-size:13px;
}

.cuaca-v2-op-notes small{
    display:block;
    color:#8797a4;
    font-size:7px;
}

.cuaca-v2-op-notes strong{
    display:block;
    margin-top:2px;
    color:#45657a;
    font-size:8.5px;
    line-height:1.4;
}

.cuaca-v2-field-windows{
    margin-top:12px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
}

.cuaca-v2-field-window{
    min-width:0;
    padding:9px 10px;
    display:grid;
    grid-template-columns:auto 1fr;
    column-gap:8px;
    row-gap:3px;
    align-items:center;
    border:1px solid #e3ebf1;
    border-radius:8px;
    background:#fbfdff;
}

.cuaca-v2-field-window.is-baik{
    border-color:#cde8dc;
    background:#f3fbf7;
}

.cuaca-v2-field-window.is-waspada{
    border-color:#eeddbb;
    background:#fffaf0;
}

.cuaca-v2-field-window.is-hindari{
    border-color:#edcccc;
    background:#fff6f6;
}

.cuaca-v2-window-status{
    grid-row:1 / 3;
    min-height:22px;
    padding:0 7px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    color:#526b7c;
    background:#edf2f6;
    font-size:7px;
    font-weight:900;
    white-space:nowrap;
}

.is-baik .cuaca-v2-window-status{
    color:#187654;
    background:#e6f6ee;
}

.is-waspada .cuaca-v2-window-status{
    color:#9b621e;
    background:#fff0d9;
}

.is-hindari .cuaca-v2-window-status{
    color:#a34747;
    background:#fdeaea;
}

.cuaca-v2-field-window>strong{
    color:#355a72;
    font-size:9px;
}

.cuaca-v2-field-window>small{
    color:#788b9a;
    font-size:7px;
    line-height:1.35;
}

/* Rain timeline ---------------------------------------------------------- */
.cuaca-v2-rain-timeline{
    min-height:148px;
    display:grid;
    grid-template-columns:repeat(8,minmax(64px,1fr));
    gap:6px;
    overflow-x:auto;
    padding-bottom:5px;
}

.cuaca-v2-rain-time{
    min-width:64px;
    display:grid;
    grid-template-rows:auto 82px auto auto;
    gap:4px;
    justify-items:center;
    color:#657d8f;
}

.cuaca-v2-rain-time>span{
    font-size:7.5px;
    font-weight:850;
}

.cuaca-v2-rain-time>strong{
    color:#355b73;
    font-size:8.5px;
}

.cuaca-v2-rain-time>small{
    font-size:7px;
}

.cuaca-v2-rain-bar-shell{
    width:20px;
    height:82px;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    border-radius:999px;
    background:#eef2f5;
}

.cuaca-v2-rain-bar{
    width:100%;
    min-height:3px;
    display:block;
    border-radius:999px;
    background:#c9d5df;
    transition:height .2s ease;
}

.cuaca-v2-rain-time.is-ringan .cuaca-v2-rain-bar{
    background:#55cbe9;
}

.cuaca-v2-rain-time.is-sedang .cuaca-v2-rain-bar{
    background:#2d7ed8;
}

.cuaca-v2-rain-time.is-tinggi .cuaca-v2-rain-bar{
    background:#8a46c6;
}

.cuaca-v2-rain-timeline-legend{
    margin-top:8px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    color:#748898;
    font-size:7.5px;
}

.cuaca-v2-rain-timeline-legend span{
    display:inline-flex;
    align-items:center;
    gap:5px;
}

.cuaca-v2-rain-timeline-legend i{
    width:9px;
    height:9px;
    border-radius:3px;
    background:#c9d5df;
}

.cuaca-v2-rain-timeline-legend i.is-light{background:#55cbe9}
.cuaca-v2-rain-timeline-legend i.is-medium{background:#2d7ed8}
.cuaca-v2-rain-timeline-legend i.is-high{background:#8a46c6}

/* Nearest rain stations -------------------------------------------------- */
.cuaca-v2-nearest-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}

.cuaca-v2-nearest-card{
    min-width:0;
    padding:13px;
    border:1px solid #e1e9ef;
    border-radius:9px;
    background:#fbfdff;
}

.cuaca-v2-nearest-card.is-nearest{
    border-color:#b9d9ed;
    background:#f3faff;
}

.cuaca-v2-nearest-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}

.cuaca-v2-nearest-top span{
    min-height:21px;
    padding:0 7px;
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    color:#527087;
    background:#edf2f6;
    font-size:7px;
    font-weight:900;
}

.cuaca-v2-nearest-card.is-nearest .cuaca-v2-nearest-top span{
    color:#0873bd;
    background:#e6f4fd;
}

.cuaca-v2-nearest-top strong{
    color:#0873bd;
    font-size:9px;
}

.cuaca-v2-nearest-card h3{
    margin:10px 0 0;
    color:#315872;
    font-size:11px;
}

.cuaca-v2-nearest-card p{
    margin:4px 0 0;
    color:#728696;
    font-size:8px;
    line-height:1.45;
}

.cuaca-v2-nearest-meta{
    margin-top:8px;
    display:flex;
    flex-wrap:wrap;
    gap:5px;
}

.cuaca-v2-nearest-meta span{
    padding:3px 6px;
    border-radius:5px;
    color:#718494;
    background:#eef3f6;
    font-size:6.8px;
}

.cuaca-v2-nearest-card a,
.cuaca-v2-text-link{
    margin-top:10px;
    display:inline-flex;
    align-items:center;
    gap:5px;
    color:#0873bd;
    font-size:8px;
    font-weight:900;
    text-decoration:none;
}

.cuaca-v2-text-link{
    margin-top:0;
}

.cuaca-v2-mini-loading,
.cuaca-v2-empty-state{
    grid-column:1 / -1;
    padding:18px;
    border:1px dashed #cedbe4;
    border-radius:8px;
    color:#7b8f9e;
    background:#fbfdff;
    font-size:8.5px;
    text-align:center;
}

/* Precipitation visual enhancement -------------------------------------- */
.cuaca-v2-result #cuacaMap[data-weather-layer="precipitation_new"]
.leaflet-cuaca-weather-pane .leaflet-tile{
    filter:
        saturate(2.25)
        contrast(1.50)
        brightness(.92)!important;
}

.cuaca-v2-result .cuaca-map-legend-bar.is-precipitation{
    background:
        linear-gradient(
            90deg,
            #b7f3ff 0%,
            #56c7ef 22%,
            #2675d8 48%,
            #7546c7 72%,
            #d946b8 100%
        )!important;
}

.cuaca-v2-result .cuaca-map-legend-head small{
    max-width:170px;
    text-align:right;
    line-height:1.25;
}

/* Default OSM / Satellite only ------------------------------------------ */
.cuaca-v2-result #cuacaMap.is-basemap-dimmed .leaflet-tile-pane .leaflet-tile{
    filter:saturate(.78) contrast(.96) brightness(1.02)!important;
}

/* Responsive ------------------------------------------------------------- */
@media(max-width:980px){
    .cuaca-v2-operational-grid{
        grid-template-columns:1fr;
    }

    .cuaca-v2-nearest-grid{
        grid-template-columns:1fr 1fr 1fr;
    }
}

@media(max-width:760px){
    .cuaca-v2-op-metrics{
        grid-template-columns:1fr 1fr;
    }

    .cuaca-v2-op-notes{
        grid-template-columns:1fr;
    }

    .cuaca-v2-field-windows{
        grid-template-columns:1fr 1fr;
    }

    .cuaca-v2-nearest-grid{
        grid-template-columns:1fr;
    }

    .cuaca-v2-rain-timeline{
        grid-template-columns:repeat(8,76px);
        scroll-snap-type:x proximity;
    }

    .cuaca-v2-rain-time{
        scroll-snap-align:start;
    }
}

@media(max-width:480px){
    .cuaca-v2-field-windows{
        grid-template-columns:1fr;
    }

    .cuaca-v2-op-badge{
        display:none;
    }

    .cuaca-v2-operational-card{
        padding:14px;
    }
}

/* Print ------------------------------------------------------------------ */
@media print{
    .cuaca-v2-operational-grid,
    .cuaca-v2-nearest-panel,
    .cuaca-v2-rain-timeline-panel{
        break-inside:avoid;
        page-break-inside:avoid;
    }

    .cuaca-v2-field-windows{
        grid-template-columns:repeat(4,minmax(0,1fr))!important;
    }

    .cuaca-v2-rain-timeline{
        grid-template-columns:repeat(8,minmax(0,1fr))!important;
        overflow:visible!important;
    }

    .cuaca-v2-nearest-grid{
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
    }
}