@import url("/templates/undangan/assets/css/common.css");
@import url("/templates/undangan/assets/css/animation.css");

html {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.with-scrollbar {
    scrollbar-width: auto !important;
    -ms-overflow-style: auto !important;
}

/* ── Royal Classic Font ── */
.font-esthetic {
    font-family: 'Playfair Display', 'Georgia', serif !important;
    font-weight: 400;
}

.font-esthetic-script {
    font-family: 'Sacramento', cursive !important;
}

.font-arabic {
    font-family: 'Noto Naskh Arabic', serif !important;
}

/* ── Royal Color Palette ── */
:root {
    --royal-gold: #d4af37;
    --royal-gold-light: #e8d48b;
    --royal-burgundy: #5c1a1a;
    --royal-burgundy-deep: #3d0f0f;
    --royal-cream: #faf5e8;
    --royal-bg-dark: #0d0a08;
    --royal-bg-mid: #1a1410;
    --royal-bg-card: #1f1914;
    --royal-text: #faf5e8;
    --royal-text-muted: #a89878;
}

/* ── Override Bootstrap Dark Theme ── */
html[data-bs-theme="dark"] {
    --bs-body-bg: var(--royal-bg-dark);
    --bs-body-color: var(--royal-text);
    --bs-dark-rgb: 13, 10, 8;
    --bs-black-rgb: 13, 10, 8;
    --bs-light-rgb: 250, 245, 232;
}

html[data-bs-theme="light"] {
    --bs-body-bg: var(--royal-cream);
    --bs-body-color: #2a1a10;
    --bs-light-rgb: 250, 245, 232;
    --bs-white-rgb: 255, 252, 245;
}

/* ── Loading & Welcome Pages ── */
.loading-page {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1056;
}

html[data-bs-theme="dark"] .loading-page {
    background-color: var(--royal-bg-dark) !important;
}

html[data-bs-theme="light"] .loading-page {
    background-color: var(--royal-cream) !important;
}

/* ── Progress Bar ── */
html[data-bs-theme="dark"] .progress {
    background-color: var(--royal-bg-mid);
}

.progress-bar {
    background-color: var(--royal-gold) !important;
}

/* ── Section Backgrounds ── */
html[data-bs-theme="dark"] .bg-light-dark {
    background-color: var(--royal-bg-dark);
}

html[data-bs-theme="light"] .bg-light-dark {
    background-color: var(--royal-cream);
}

html[data-bs-theme="dark"] .bg-white-black {
    background-color: var(--royal-bg-mid);
}

html[data-bs-theme="light"] .bg-white-black {
    background-color: #fffcf5;
}

/* ── SVG Wave Dividers ── */
html[data-bs-theme="dark"] .color-theme-svg {
    color: var(--royal-bg-mid);
    background-color: var(--royal-bg-dark);
}

html[data-bs-theme="light"] .color-theme-svg {
    color: #fffcf5;
    background-color: var(--royal-cream);
}

html[data-bs-theme="dark"] .color-theme-svg-reverse {
    color: var(--royal-bg-dark);
    background-color: var(--royal-bg-mid);
}

html[data-bs-theme="light"] .color-theme-svg-reverse {
    color: var(--royal-cream);
    background-color: #fffcf5;
}

/* ── Gold Accents ── */
.text-gold {
    color: var(--royal-gold) !important;
}

.border-gold {
    border-color: var(--royal-gold) !important;
}

.border-burgundy {
    border-color: var(--royal-burgundy) !important;
}

/* ── Royal Buttons ── */
html[data-bs-theme="dark"] .btn-outline-auto {
    --bs-btn-color: var(--royal-gold);
    --bs-btn-border-color: var(--royal-gold);
    --bs-btn-hover-color: var(--royal-bg-dark);
    --bs-btn-hover-bg: var(--royal-gold);
    --bs-btn-hover-border-color: var(--royal-gold);
    --bs-btn-focus-shadow-rgb: 212, 175, 55;
    --bs-btn-active-color: var(--royal-bg-dark);
    --bs-btn-active-bg: var(--royal-gold);
    --bs-btn-active-border-color: var(--royal-gold);
    --bs-btn-disabled-color: var(--royal-gold);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--royal-gold);
    --bs-gradient: none;
}

html[data-bs-theme="light"] .btn-outline-auto {
    --bs-btn-color: var(--royal-burgundy);
    --bs-btn-border-color: var(--royal-burgundy);
    --bs-btn-hover-color: var(--royal-cream);
    --bs-btn-hover-bg: var(--royal-burgundy);
    --bs-btn-hover-border-color: var(--royal-burgundy);
    --bs-btn-focus-shadow-rgb: 92, 26, 26;
    --bs-btn-active-color: var(--royal-cream);
    --bs-btn-active-bg: var(--royal-burgundy);
    --bs-btn-active-border-color: var(--royal-burgundy);
    --bs-btn-disabled-color: var(--royal-burgundy);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--royal-burgundy);
    --bs-gradient: none;
}

.btn-royal {
    background: linear-gradient(135deg, var(--royal-gold), var(--royal-gold-light));
    color: var(--royal-bg-dark);
    border: none;
    font-weight: 600;
}

.btn-royal:hover {
    background: linear-gradient(135deg, var(--royal-gold-light), var(--royal-gold));
    color: var(--royal-bg-dark);
}

html[data-bs-theme="dark"] .btn-primary {
    background-color: var(--royal-gold) !important;
    border-color: var(--royal-gold) !important;
    color: var(--royal-bg-dark) !important;
}

html[data-bs-theme="dark"] .btn-primary:hover {
    background-color: var(--royal-gold-light) !important;
    border-color: var(--royal-gold-light) !important;
}

/* ── Navbar ── */
html[data-bs-theme="dark"] .navbar {
    background-color: rgba(13, 10, 8, 0.85) !important;
    backdrop-filter: blur(0.5rem);
    border-color: var(--royal-burgundy) !important;
}

html[data-bs-theme="light"] .navbar {
    background-color: rgba(250, 245, 232, 0.85) !important;
    backdrop-filter: blur(0.5rem);
    border-color: rgba(92, 26, 26, 0.3) !important;
}

html[data-bs-theme="dark"] .nav-link {
    color: rgba(212, 175, 55, 0.5);
}

html[data-bs-theme="dark"] .nav-link.active {
    color: var(--royal-gold) !important;
}

html[data-bs-theme="light"] .nav-link {
    color: rgba(92, 26, 26, 0.5);
}

html[data-bs-theme="light"] .nav-link.active {
    color: var(--royal-burgundy) !important;
}

/* ── Card & Form Overrides ── */
html[data-bs-theme="dark"] .bg-theme-auto {
    background-color: var(--royal-bg-card);
}

html[data-bs-theme="light"] .bg-theme-auto {
    background-color: #f5efe3;
}

html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select {
    background-color: var(--royal-bg-card);
    border-color: var(--royal-burgundy);
    color: var(--royal-text);
}

html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus {
    border-color: var(--royal-gold);
    box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.2);
}

/* ── Image Styling ── */
.img-center-crop {
    width: 13rem;
    height: 13rem;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.bg-cover-home {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mask-image: linear-gradient(0.5turn, transparent, black 40%, black 60%, transparent);
}

/* ── Decorative Elements ── */
.royal-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.5rem 0;
}

.royal-divider::before,
.royal-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--royal-gold), transparent);
    max-width: 120px;
}

.royal-ornament {
    color: var(--royal-gold);
    font-size: 1.5rem;
}

.royal-frame {
    position: relative;
    border: 1px solid var(--royal-burgundy);
    padding: 2rem;
}

.royal-frame::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    pointer-events: none;
}

/* ── Circle Image Border ── */
html[data-bs-theme="dark"] .img-center-crop {
    border-color: var(--royal-gold) !important;
}

html[data-bs-theme="light"] .img-center-crop {
    border-color: var(--royal-burgundy) !important;
}

/* ── Section borders ── */
html[data-bs-theme="dark"] .border {
    border-color: var(--royal-burgundy) !important;
}

html[data-bs-theme="dark"] .border-light {
    border-color: var(--royal-gold) !important;
}

/* ── Theme Toggle Button ── */
html[data-bs-theme="dark"] .btn-transparent {
    background-color: rgba(13, 10, 8, 0.5) !important;
    backdrop-filter: blur(0.5rem);
    color: var(--royal-gold);
    border-color: var(--royal-burgundy) !important;
}

html[data-bs-theme="light"] .btn-transparent {
    background-color: rgba(250, 245, 232, 0.5) !important;
    backdrop-filter: blur(0.5rem);
    color: var(--royal-burgundy);
    border-color: rgba(92, 26, 26, 0.3) !important;
}

/* ── Overlay ── */
html[data-bs-theme="dark"] .bg-overlay-auto {
    background-color: rgba(13, 10, 8, 0.6);
    backdrop-filter: blur(0.25rem);
}

html[data-bs-theme="light"] .bg-overlay-auto {
    background-color: rgba(255, 252, 245, 0.6);
    backdrop-filter: blur(0.25rem);
}

/* ── Text Theme ── */
html[data-bs-theme="dark"] .text-theme-auto {
    color: var(--royal-text);
}

html[data-bs-theme="light"] .text-theme-auto {
    color: #2a1a10;
}

/* ── Misc ── */
.width-loading {
    width: 25%;
}

.cursor-pointer {
    cursor: pointer;
}

@media screen and (max-width: 992px) {
    .width-loading {
        width: 50%;
    }
}

@media screen and (max-width: 576px) {
    .width-loading {
        width: 75%;
    }
}

svg {
    display: block;
    line-height: 0;
    shape-rendering: geometricPrecision;
    backface-visibility: hidden;
}

.svg-wrapper {
    overflow: hidden !important;
    transform: translateZ(0) !important;
}

.no-gap-bottom {
    margin-bottom: -0.75rem !important;
}

/* ── Gold heart icons ── */
html[data-bs-theme="dark"] .heart-icon {
    color: var(--royal-gold);
}

html[data-bs-theme="light"] .heart-icon {
    color: var(--royal-burgundy);
}

/* ── Countdown ── */
.countdown-box {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(92, 26, 26, 0.1));
    border: 1px solid var(--royal-burgundy);
}

html[data-bs-theme="dark"] .countdown-box {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), rgba(92, 26, 26, 0.15));
}

/* ── Scrollbar for guestbook ── */
.with-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.with-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

html[data-bs-theme="dark"] .with-scrollbar::-webkit-scrollbar-thumb {
    background: var(--royal-burgundy);
    border-radius: 4px;
}

html[data-bs-theme="light"] .with-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(92, 26, 26, 0.3);
    border-radius: 4px;
}