@import url("common.css");
@import url("animation.css");

/* ── Sage & Gold Theme Variables ─────────────── */
:root {
    --sage-primary:   #2d5a3d;
    --sage-medium:    #4a7c5a;
    --sage-light:     #b5c9b7;
    --gold:           #c9a84c;
    --gold-light:     #e8d9a8;
    --cream:          #f5f0e8;
    --brown:          #8b6f5e;
    --brown-light:    #c4a882;
}

/* ── Force light theme body & sections ───────── */
body {
    background-color: var(--cream) !important;
    color: var(--brown) !important;
}

.bg-light-dark {
    background-color: var(--cream) !important;
}

.bg-white-black {
    background-color: #faf7f2 !important;
}

.color-theme-svg {
    color: var(--cream) !important;
}

html[data-bs-theme="dark"] .color-theme-svg {
    color: #1a2e22 !important;
}

/* ── Section alternating backgrounds ─────────── */
section {
    position: relative;
}

#bride {
    background-color: #faf7f2 !important;
}

#wedding-date {
    background-color: #faf7f2 !important;
}

#gallery {
    background-color: var(--cream) !important;
}

#comment {
    background-color: var(--cream) !important;
}

/* ── Sage card backgrounds ───────────────────── */
.bg-theme-auto {
    background-color: #eef3ee !important;
}

html[data-bs-theme="dark"] .bg-theme-auto {
    background-color: var(--bs-gray-800) !important;
}

html[data-bs-theme="light"] .btn-outline-auto {
    --bs-btn-color: var(--sage-primary) !important;
    --bs-btn-border-color: var(--sage-primary) !important;
    --bs-btn-hover-bg: var(--sage-primary) !important;
    --bs-btn-hover-color: var(--cream) !important;
    --bs-btn-hover-border-color: var(--sage-primary) !important;
    --bs-btn-active-bg: var(--sage-primary) !important;
    --bs-btn-active-color: var(--cream) !important;
}

.loading-page {
    background: linear-gradient(160deg, var(--sage-primary) 0%, var(--sage-medium) 60%, var(--sage-light) 100%) !important;
}

html[data-bs-theme="dark"] .loading-page {
    background: linear-gradient(160deg, #0f1f16 0%, #1a3525 60%, #2d5a3d 100%) !important;
}

.ornamen-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--gold);
    font-size: 1.25rem;
    margin: 1rem 0;
    opacity: 0.85;
}

.gebyok-frame {
    position: relative;
    padding: 1.5rem 1rem;
}

.gebyok-frame::before,
.gebyok-frame::after {
    content: '';
    display: block;
    width: 80%;
    margin: 0 auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

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

.text-sage {
    color: var(--sage-primary) !important;
}

.bg-cream {
    background-color: var(--cream) !important;
}

.bg-sage-soft {
    background-color: #eef3ee !important;
}

/* ── Ornamen border untuk section utama ─────── */
#bride {
    border-top: 2px solid var(--gold-light);
    border-bottom: 2px solid var(--gold-light);
}

#wedding-date {
    border-top: 2px solid var(--sage-light);
    border-bottom: 2px solid var(--sage-light);
}

/* ── Kartu / card styling Sage ───────────────── */
.rounded-4, .rounded-5 {
    border-color: var(--sage-light) !important;
}

/* ── Carousel indicator warna gold ───────────── */
.carousel-indicators [data-bs-target] {
    background-color: var(--gold) !important;
    opacity: 0.5;
}

.carousel-indicators .active {
    background-color: var(--gold) !important;
    opacity: 1;
}

/* ── Form focus warna sage ───────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: var(--sage-medium) !important;
    box-shadow: 0 0 0 0.25rem rgba(74, 124, 90, 0.25) !important;
}

/* ── Progress bar warna gold ─────────────────── */
.progress-bar {
    background-color: var(--gold) !important;
}

/* ── Button primary warna sage ───────────────── */
.btn-primary {
    background-color: var(--sage-primary) !important;
    border-color: var(--sage-primary) !important;
}

.btn-primary:hover {
    background-color: var(--sage-medium) !important;
    border-color: var(--sage-medium) !important;
}

/* ── Navbar active link ───────────────────────── */
.nav-link.active {
    color: var(--gold) !important;
}

/* ── Alert info warna sage ───────────────────── */
.alert-info {
    --bs-alert-color: var(--sage-primary) !important;
    --bs-alert-bg: #eef3ee !important;
    --bs-alert-border-color: var(--sage-light) !important;
}

#welcome h2,
#welcome p,
#welcome div {
    color: var(--cream) !important;
}

#welcome .btn {
    background-color: var(--gold) !important;
    border-color: var(--gold) !important;
    color: var(--sage-primary) !important;
    font-weight: 600;
}

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

#wedding-date .border {
    border-color: var(--sage-light) !important;
}

html[data-bs-theme="light"] #navbar-menu {
    background-color: rgba(245, 240, 232, 0.9) !important;
    border-color: var(--sage-light) !important;
}

html[data-bs-theme="light"] #navbar-menu .nav-link {
    color: var(--sage-primary) !important;
}

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

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

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

.font-esthetic {
    font-family: 'Great Vibes', cursive !important;
}

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

.img-center-crop {
    width: 13rem;
    height: 13rem;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

/* ── Toggle buttons ───────────────────────── */
html[data-bs-theme="dark"] .btn-transparent {
    background-color: rgba(61, 26, 56, 0.65) !important;
    backdrop-filter: blur(0.5rem);
}

html[data-bs-theme="light"] .btn-transparent {
    background-color: rgba(255, 215, 238, 0.65) !important;
    backdrop-filter: blur(0.5rem);
}

/* ── Loading / Welcome page ───────────────── */
.loading-page {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1056;
    background-color: var(--pastel-blush) !important;
}

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

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

.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;
}

/* ── Alert / info box ─────────────────────── */
.alert-info {
    --bs-alert-color:         var(--pastel-text);
    --bs-alert-bg:            var(--pastel-card);
    --bs-alert-border-color:  var(--pastel-rose-soft);
}

html[data-bs-theme="dark"] .alert-info {
    --bs-alert-color:         var(--pastel-dark-text);
    --bs-alert-bg:            var(--pastel-dark-card);
    --bs-alert-border-color:  #9d3f73;
}

/* ── Form controls focus ──────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: var(--pastel-rose-soft) !important;
    box-shadow: 0 0 0 0.25rem rgba(232, 121, 164, 0.25) !important;
}