.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

:root {
    --public-app-width: 430px;
    --public-civic-red: #c8102e;
    --public-civic-red-dark: #920c20;
    --public-civic-red-soft: #fff1f3;
}

body.public-app-shell {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    background:
        radial-gradient(circle at 50% -8rem, rgba(200, 16, 46, 0.13), transparent 25rem),
        radial-gradient(circle at top left, rgba(14, 165, 233, 0.12), transparent 32rem),
        radial-gradient(circle at bottom right, rgba(16, 185, 129, 0.10), transparent 28rem),
        #f3f4f6;
}

.public-app-shell button,
.public-app-shell input,
.public-app-shell select,
.public-app-shell textarea {
    font-family: inherit;
}

.public-app-container {
    width: 100%;
    max-width: var(--public-app-width);
    margin-left: auto;
    margin-right: auto;
}

.public-app-shell > section,
.public-app-shell > div:not(#lightbox):not(#toastContainer):not(#tailwindAlertRoot):not(#transferModal):not(#qrisModal):not(#successModal),
.public-app-shell > form {
    width: 100%;
    max-width: var(--public-app-width);
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
}

.public-app-shell section > .max-w-6xl,
.public-app-shell section > .max-w-5xl,
.public-app-shell section > .max-w-4xl,
.public-app-shell section > .max-w-3xl,
.public-app-shell section > .max-w-2xl,
.public-app-shell section > .max-w-xl,
.public-app-shell section > .container,
.public-app-shell .public-page-container {
    max-width: var(--public-app-width) !important;
}

.public-app-header,
.public-bottom-nav,
.public-compact-footer {
    width: 100%;
    max-width: var(--public-app-width);
    margin-left: auto;
    margin-right: auto;
}

.public-compact-footer {
    border-top: 1px solid rgba(226, 232, 240, 0.9);
    padding-bottom: calc(6rem + env(safe-area-inset-bottom));
}

.public-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
}

.public-app-shell > section.public-favorite-section {
    background-color: #e8f7fd;
}

.public-app-shell > section.bg-slate-50 {
    background-color: #f8fafc;
}

.public-app-shell > section.bg-white {
    background-color: #fff;
}

.public-section-visual {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-image: var(--public-section-bg);
    background-repeat: no-repeat;
    background-size: 260px auto;
    background-position: right -74px top 8px;
}

.public-section-visual > * {
    position: relative;
    z-index: 1;
}

.public-section-hero {
    background-image:
        url("../../../images/pdam-bg-help.svg"),
        linear-gradient(180deg, #f8fafc 0%, #f8fafc 100%);
    background-size: 300px auto, cover;
    background-position: right -92px bottom -36px, center;
}

.public-hero-visual {
    background-color: #07111f;
    background-image:
        linear-gradient(180deg, rgba(7, 17, 31, 0.44) 0%, rgba(7, 17, 31, 0.76) 56%, #07111f 100%),
        url("../../../images/pdam-bg-hero.svg");
    background-repeat: no-repeat;
    background-size: cover, cover;
    background-position: center, center;
}

.public-hero-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 92% 15%, rgba(220, 38, 38, 0.36), transparent 15rem),
        linear-gradient(120deg, transparent 44%, rgba(127, 29, 29, 0.16) 100%);
    pointer-events: none;
}

.public-hero-visual > * {
    position: relative;
    z-index: 1;
}

.public-bg-actions { --public-section-bg: url("../../../images/pdam-bg-actions.svg"); }
.public-bg-flow { --public-section-bg: url("../../../images/pdam-bg-flow.svg"); }
.public-bg-map { --public-section-bg: url("../../../images/pdam-bg-map.svg"); }
.public-bg-tarif { --public-section-bg: url("../../../images/pdam-bg-tarif.svg"); }
.public-bg-help { --public-section-bg: url("../../../images/pdam-bg-help.svg"); }
.public-bg-hero { --public-section-bg: url("../../../images/pdam-bg-help.svg"); }

.public-section-dark {
    background-image:
        linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(15, 23, 42, 0.96)),
        var(--public-section-bg);
    background-size: cover, 330px auto;
    background-position: center, right -92px top -30px;
}

.public-dark-visual-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: #07111f;
    background-image:
        linear-gradient(135deg, rgba(7, 17, 31, 0.93) 0%, rgba(30, 15, 28, 0.94) 58%, rgba(92, 8, 25, 0.92) 100%),
        var(--public-dark-card-bg, url("../../../images/pdam-bg-tarif.svg"));
    background-repeat: no-repeat;
    background-size: cover, 320px auto;
    background-position: center, right -84px top -36px;
}

.public-dark-visual-card > * {
    position: relative;
    z-index: 1;
}

.public-dark-visual-card::after {
    content: "";
    position: absolute;
    right: -42px;
    bottom: -50px;
    width: 160px;
    height: 160px;
    border: 1px solid rgba(251, 113, 133, 0.30);
    border-radius: 999px;
    pointer-events: none;
}

.public-info-hero-card {
    --public-dark-card-bg: url("../../../images/pdam-bg-hero.svg");
    min-height: 0;
}

.public-tarif-card {
    --public-dark-card-bg: url("../../../images/pdam-bg-tarif.svg");
}

.public-info-stat-grid {
    margin-top: -1.5rem;
}

.public-red-action {
    color: #fff;
    background: linear-gradient(135deg, var(--public-civic-red) 0%, #e11d48 54%, var(--public-civic-red-dark) 100%);
    box-shadow: 0 12px 26px rgba(190, 18, 60, 0.25);
}

.public-red-action:hover {
    background: linear-gradient(135deg, #b30d28 0%, #cf173f 54%, #7f0a1b 100%);
}

.public-red-soft-panel {
    border-color: rgba(251, 113, 133, 0.32) !important;
    background:
        radial-gradient(circle at right top, rgba(251, 113, 133, 0.18), transparent 10rem),
        linear-gradient(145deg, #fff 0%, var(--public-civic-red-soft) 100%) !important;
}

.public-red-edge-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(251, 113, 133, 0.30) !important;
}

.public-red-edge-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--public-civic-red-dark), #e11d48 58%, #fb7185);
}

.public-red-icon {
    color: var(--public-civic-red) !important;
    background-color: var(--public-civic-red-soft) !important;
}

.public-red-kicker {
    color: var(--public-civic-red) !important;
}

.public-red-nav-orb {
    background: linear-gradient(145deg, #e11d48, var(--public-civic-red-dark));
    box-shadow: 0 10px 24px rgba(190, 18, 60, 0.34);
}

.lightbox[hidden] {
    display: none !important;
}

.public-faq-item > summary {
    list-style: none;
}

.public-faq-item > summary::-webkit-details-marker {
    display: none;
}

.public-faq-item .faq-chevron {
    transition: transform 0.2s ease;
}

.public-faq-item[open] .faq-chevron {
    transform: rotate(180deg);
}

.public-app-card {
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 1.5rem;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lightbox { opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.lightbox.active { opacity: 1; visibility: visible; }
.lightbox-content { transform: scale(0.8); transition: transform 0.3s ease; }
.lightbox.active .lightbox-content { transform: scale(1); }

.gradient-overlay {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.85) 0%, rgba(5, 150, 105, 0.9) 100%);
}

.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scroll-reveal.revealed { opacity: 1; transform: translateY(0); }

.scroll-reveal-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scroll-reveal-left.revealed { opacity: 1; transform: translateX(0); }

.scroll-reveal-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scroll-reveal-right.revealed { opacity: 1; transform: translateX(0); }

.scroll-reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scroll-reveal-scale.revealed { opacity: 1; transform: scale(1); }

.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }