.pn-info-daerah,
.pn-info-daerah__dialog {
    --pn-ink: #172b4d;
    --pn-muted: #68778d;
    --pn-line: #e5eaf1;
    --pn-gold: #a98239;
    color: var(--pn-ink);
    font-family: inherit;
}

.pn-info-daerah {
    box-sizing: border-box;
    width: 100%;
    max-width: 960px;
    position: relative;
    margin: 8px 0;
    padding: 10px 14px 8px;
    overflow: hidden;
    border: 1px solid #bdcbe0;
    border-radius: 12px;
    background: linear-gradient(115deg, #f4f8ff 0%, #fff 50%, #faf7ef 100%);
    box-shadow: 0 10px 28px rgba(16, 35, 62, .14), 0 2px 6px rgba(16, 35, 62, .06);
}
.pn-info-daerah::before {
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #1f416d 0%, #1f416d 76%, #c7a354 76%, #c7a354 100%);
    content: "";
}

.pn-info-daerah *,
.pn-info-daerah__dialog * { box-sizing: border-box; }

.pn-info-daerah__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.pn-info-daerah__heading { min-width: 0; }
.pn-info-daerah__eyebrow {
    display: inline-block;
    margin-bottom: 2px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(185, 145, 72, .13);
    color: var(--pn-gold);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
}
.pn-info-daerah__heading h2,
.pn-info-daerah__dialog-head h2 {
    margin: 0;
    color: var(--pn-ink);
    font-size: 20px;
    line-height: 1.12;
}
.pn-info-daerah__location {
    display: block;
    max-width: 100%;
    margin-top: 3px;
    color: var(--pn-muted);
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    white-space: normal;
}
.pn-info-daerah__change,
.pn-info-daerah__apply,
.pn-info-daerah__cancel,
.pn-info-daerah__close {
    border: 0;
    font: inherit;
    cursor: pointer;
}
.pn-info-daerah__change {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid #d9e1ec;
    border-radius: 7px;
    background: #fff;
    color: var(--pn-ink);
    font-size: 12px;
    font-weight: 700;
}
.pn-info-daerah__change:hover,
.pn-info-daerah__cancel:hover { background: #f1f5fa; }
.pn-info-daerah__change span { color: var(--pn-gold); font-size: 15px; vertical-align: -1px; }

.pn-info-daerah__weather {
    display: grid;
    grid-template-columns: minmax(130px, .82fr) minmax(0, 1.7fr);
    align-items: center;
    gap: 14px;
    min-height: 64px;
    margin-top: 8px;
    padding: 6px 10px;
    border: 1px solid #e8edf4;
    border-radius: 9px;
    background: rgba(255,255,255,.96);
    box-shadow: inset 0 1px 4px rgba(23, 43, 77, .035);
}
.pn-info-daerah__current { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; }
.pn-info-daerah__weather-icon {
    position: relative;
    display: grid;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    place-items: center;
    overflow: visible;
    background: transparent;
}
.pn-weather-art { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 5px rgba(23,43,77,.14)); animation: pn-weather-float 4s ease-in-out infinite; }
.pn-weather-brand { position: absolute; right: -1px; bottom: -1px; width: 20px; height: 20px; padding: 3px; overflow: visible; border: 1px solid #d5b25e; border-radius: 50%; background: #fffdf7; box-shadow: 0 2px 5px rgba(23,43,77,.16); }
.pn-weather-brand path:first-child { fill: #c69a3d; }
.pn-weather-brand path:last-child { fill: none; stroke: #fff4d2; stroke-width: .9; stroke-linecap: round; }
.pn-weather-sun-glow { fill: #ffd45e; opacity: .2; animation: pn-weather-pulse 2.8s ease-in-out infinite; }
.pn-weather-sun-rays { transform-origin: 40px 40px; animation: pn-weather-turn 28s linear infinite; }
.pn-weather-sun-rays path { fill: none; stroke: #f2ad32; stroke-width: 3.5; stroke-linecap: round; }
.pn-weather-sun { fill: #ffc94e; stroke: #f2ad32; stroke-width: 1.5; }
.pn-weather-sun-highlight { fill: #fff1ad; opacity: .88; }
.pn-weather-cloud { fill: #edf4fb; stroke: #a9bfd7; stroke-width: 2; stroke-linejoin: round; }
.pn-weather-cloud-shine { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .9; }
.pn-weather-rain-drop { fill: #4aa6e8; animation: pn-weather-fall 1.3s ease-in-out infinite; }
.pn-weather-rain-drop:nth-of-type(3) { animation-delay: .2s; }
.pn-weather-rain-drop:nth-of-type(4) { animation-delay: .4s; }
.pn-weather-lightning { fill: #ffd447; stroke: #efa92c; stroke-width: 1.4; stroke-linejoin: round; }
.pn-weather-fog-line { fill: none; stroke: #91a8c1; stroke-width: 3; stroke-linecap: round; animation: pn-weather-fog 2.4s ease-in-out infinite alternate; }
@keyframes pn-weather-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes pn-weather-pulse { 0%,100% { opacity: .14; transform: scale(.96); } 50% { opacity: .28; transform: scale(1.04); } }
@keyframes pn-weather-turn { to { transform: rotate(360deg); } }
@keyframes pn-weather-fall { 0%,100% { transform: translateY(-1px); opacity: .75; } 50% { transform: translateY(2px); opacity: 1; } }
@keyframes pn-weather-fog { from { transform: translateX(-3px); opacity: .65; } to { transform: translateX(3px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pn-weather-art, .pn-weather-sun-glow, .pn-weather-sun-rays, .pn-weather-rain-drop, .pn-weather-fog-line { animation: none; } }
.pn-info-daerah__current-copy { display: grid; min-width: 0; gap: 1px; text-align: center; }
.pn-info-daerah__muted { color: var(--pn-muted); font-size: 11px; white-space: nowrap; }
.pn-info-daerah__current-copy strong {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.25;
    overflow-wrap: anywhere;
    white-space: normal;
}
.pn-info-daerah__temperature { font-size: 20px; font-weight: 700; line-height: 1.1; }
.pn-info-daerah__forecast { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.pn-info-daerah__forecast-item {
    display: grid;
    min-width: 0;
    gap: 2px;
    padding: 4px 6px;
    border-left: 1px solid var(--pn-line);
    text-align: center;
}
.pn-info-daerah__forecast-item span { color: var(--pn-muted); font-size: 11px; }
.pn-info-daerah__forecast-item strong { font-size: 18px; line-height: 1.15; }
.pn-info-daerah__forecast-item small {
    color: var(--pn-muted);
    font-size: 10px;
    line-height: 1.25;
    overflow-wrap: anywhere;
    white-space: normal;
}

.pn-info-daerah__earthquake {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    margin-top: 6px;
    padding: 9px 10px;
    border: 1px solid #e7dfca;
    border-left: 3px solid #b99148;
    border-radius: 7px;
    background: #fffdf8;
    font-size: 12px;
}
.pn-info-daerah__quake-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 9px; min-width: 0; }
.pn-info-daerah__quake-title { color: #172b4d; font-size: 12px; line-height: 1.35; }
.pn-info-daerah__quake-status {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 3px 7px;
    border-radius: 7px;
    background: #ffead7;
    color: #9a3d09;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
    white-space: normal;
}
.pn-info-daerah__quake-status.is-alert { background: #fee2e2; color: #a32121; }
.pn-info-daerah__quake-status.is-no-tsunami { background: #e8f3e8; color: #28603b; }
.pn-info-daerah__quake-status.is-info { background: #e8eef6; color: #35465e; }
.pn-info-daerah__quake-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 9px; min-width: 0; }
.pn-info-daerah__quake-stat { display: inline-flex; align-items: center; gap: 4px; min-width: 0; color: #40516a; font-size: 11px; line-height: 1.35; }
.pn-info-daerah__quake-stat + .pn-info-daerah__quake-stat::before { content: "|"; margin-right: 3px; color: #9aa6b5; }
.pn-info-daerah__quake-stat svg { width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: #df3e3e; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pn-info-daerah__quake-stat:nth-child(2) svg { stroke: #238a4b; }
.pn-info-daerah__quake-stat:nth-child(3) svg { stroke: #e27a16; }
.pn-info-daerah__quake-stat span { color: #64748b; }
.pn-info-daerah__quake-stat strong { min-width: 0; color: #172b4d; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.pn-info-daerah__quake-description { display: grid; justify-items: start; gap: 3px; min-width: 0; }
.pn-info-daerah__quake-location {
    min-width: 0;
    color: #172b4d;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
    white-space: normal;
}
.pn-info-daerah__quake-meta {
    justify-self: start;
    margin: 0;
    padding: 0;
    color: #172b4d;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-align: left;
    white-space: normal;
}
.pn-info-daerah__quake-note { margin: 0; color: #40516a; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.pn-info-daerah__earthquake.is-alert { border-color: #f0c4bd; background: #fff5f3; }

.pn-info-daerah__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2px 10px;
    margin-top: 4px;
    color: #8792a2;
    font-size: 10px;
    line-height: 1.35;
}
.pn-info-daerah__footer > span:first-child {
    min-width: 0;
    text-align: left;
}
.pn-info-daerah__footer > span:last-child { margin-left: auto; text-align: right; }
.pn-info-daerah__footer a { color: #66768c; text-decoration: underline; text-underline-offset: 2px; }

.pn-info-daerah__dialog {
    width: min(520px, calc(100vw - 28px));
    max-width: none;
    max-height: min(90vh, 720px);
    padding: 0;
    border: 1px solid #dce3ed;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 20px 70px rgba(12, 28, 50, .24);
}
.pn-info-daerah__dialog::backdrop { background: rgba(14, 28, 48, .46); }
.pn-info-daerah__dialog-inner { padding: 21px; }
.pn-info-daerah__dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pn-info-daerah__dialog-head h2 { font-size: 21px; }
.pn-info-daerah__close { width: 32px; height: 32px; border-radius: 50%; background: #f1f4f8; color: var(--pn-ink); font-size: 22px; line-height: 1; }
.pn-info-daerah__dialog-help { margin: 10px 0 16px; color: var(--pn-muted); font-size: 13px; line-height: 1.5; }
.pn-info-daerah__fields { display: grid; gap: 11px; }
.pn-info-daerah__fields label { display: grid; gap: 5px; color: #3f4e63; font-size: 12px; font-weight: 700; }
.pn-info-daerah__fields select {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid #d5deea;
    border-radius: 7px;
    background: #fff;
    color: var(--pn-ink);
    font: inherit;
    font-size: 13px;
}
.pn-info-daerah__fields select:disabled { background: #f3f5f8; color: #9aa4b2; }
.pn-info-daerah__dialog-status { min-height: 18px; margin: 10px 0 0; color: #65748a; font-size: 12px; }
.pn-info-daerah__dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.pn-info-daerah__cancel,
.pn-info-daerah__apply { padding: 9px 13px; border-radius: 7px; font-size: 12px; font-weight: 700; }
.pn-info-daerah__cancel { background: #edf1f6; color: #35465e; }
.pn-info-daerah__apply { background: #1f416d; color: #fff; }
.pn-info-daerah__apply:hover { background: #173455; }
.pn-info-daerah__apply:disabled { cursor: not-allowed; opacity: .48; }

@media (max-width: 600px) {
    .pn-info-daerah { margin: 8px 0 10px; padding: 9px 12px 7px; border-radius: 10px; }
    .pn-info-daerah__heading h2 { font-size: 17px; }
    .pn-info-daerah__change { padding: 6px 8px; font-size: 11px; }
    .pn-info-daerah__weather { grid-template-columns: minmax(125px, .9fr) minmax(0, 1.5fr); gap: 7px; min-height: 58px; margin-top: 6px; padding: 5px 6px; }
    .pn-info-daerah__current { gap: 6px; }
    .pn-info-daerah__weather-icon { flex-basis: 44px; width: 44px; height: 44px; }
    .pn-info-daerah__temperature { font-size: 21px; }
    .pn-info-daerah__forecast { gap: 1px; }
    .pn-info-daerah__forecast-item { padding: 3px 2px; }
    .pn-info-daerah__forecast-item span { font-size: 10px; }
    .pn-info-daerah__forecast-item strong { font-size: 16px; }
    .pn-info-daerah__forecast-item small { font-size: 9px; }
    .pn-info-daerah__earthquake { gap: 6px; margin-top: 5px; padding: 8px; font-size: 11px; }
    .pn-info-daerah__quake-summary { gap: 5px 7px; }
    .pn-info-daerah__quake-title { font-size: 11px; }
    .pn-info-daerah__quake-status { padding: 3px 6px; font-size: 9px; }
    .pn-info-daerah__quake-stats { flex: 1 1 100%; flex-wrap: nowrap; justify-content: space-between; gap: 3px; width: 100%; }
    .pn-info-daerah__quake-stat { flex: 0 1 auto; gap: 2px; font-size: 9px; white-space: nowrap; }
    .pn-info-daerah__quake-stat + .pn-info-daerah__quake-stat::before { margin-right: 1px; }
    .pn-info-daerah__quake-stat svg { width: 11px; height: 11px; flex-basis: 11px; }
    .pn-info-daerah__quake-stat strong { font-size: 9px; white-space: nowrap; }
    .pn-info-daerah__quake-location { font-size: 13px; }
    .pn-info-daerah__quake-meta { font-size: 11px; }
    .pn-info-daerah__quake-note { font-size: 10px; }
}

@media (max-width: 360px) {
    .pn-info-daerah__weather { grid-template-columns: 1fr; }
    .pn-info-daerah__forecast-item { border-left: 0; }
    .pn-info-daerah__quake-stats { gap: 2px; }
    .pn-info-daerah__quake-stat { gap: 1px; font-size: 8px; }
    .pn-info-daerah__quake-stat + .pn-info-daerah__quake-stat::before { margin-right: 0; }
    .pn-info-daerah__quake-stat svg { width: 10px; height: 10px; flex-basis: 10px; }
    .pn-info-daerah__quake-stat strong { font-size: 8px; }
    .pn-info-daerah__fields { gap: 8px; }
    .pn-info-daerah__dialog-inner { padding: 16px; }
}