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

:root {
    --public-app-width: 430px;
}

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 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):not([id^="popup_"]),
.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-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; }