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

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

html[data-bs-theme="dark"] .btn-transparent {
    background-color: rgba(var(--bs-dark-rgb), 0.5) !important;
    backdrop-filter: blur(0.5rem);
}

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

.loading-page {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1056;
}

html[data-bs-theme="light"] .color-theme-svg {
    color: rgb(255, 255, 255);
    background-color: var(--bs-light);
}

html[data-bs-theme="dark"] .color-theme-svg {
    color: rgb(0, 0, 0);
    background-color: var(--bs-dark);
}

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

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

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

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

.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;
}
/* ===================================================================
   Wedding theme: maroon & gold (Pakistani wedding palette)
   Edit the colours here to restyle the whole invitation.
   =================================================================== */
html[data-bs-theme="light"] {
    --wd-bg: 255, 251, 244;        /* ivory      - main sections   */
    --wd-bg-alt: 247, 236, 219;    /* warm beige - alt sections    */
    --wd-card: 255, 255, 255;      /* cards                        */
    --wd-accent: 122, 26, 50;      /* maroon                       */
    --wd-gold: 176, 134, 52;       /* antique gold                 */
    --wd-text: 58, 32, 36;
    --bs-body-color: rgb(var(--wd-text));
    --bs-body-bg: rgb(var(--wd-bg));
}

html[data-bs-theme="dark"] {
    --wd-bg: 20, 9, 13;
    --wd-bg-alt: 34, 15, 22;
    --wd-card: 48, 22, 32;
    --wd-accent: 226, 192, 120;    /* gold on dark                 */
    --wd-gold: 212, 175, 95;
    --wd-text: 244, 232, 214;
    --bs-body-color: rgb(var(--wd-text));
    --bs-body-bg: rgb(var(--wd-bg));
}

html[data-bs-theme] .bg-white-black {
    background-color: rgb(var(--wd-bg)) !important;
}

html[data-bs-theme] .bg-light-dark {
    background-color: rgb(var(--wd-bg-alt)) !important;
}

html[data-bs-theme] .color-theme-svg {
    color: rgb(var(--wd-bg)) !important;
    background-color: rgb(var(--wd-bg-alt)) !important;
}

html[data-bs-theme] .bg-theme-auto {
    background-color: rgb(var(--wd-card)) !important;
}

html[data-bs-theme] .navbar {
    background-color: rgba(var(--wd-bg-alt), 0.85) !important;
}

html[data-bs-theme] .nav-link.active,
html[data-bs-theme] .nav-link:hover {
    color: rgb(var(--wd-accent)) !important;
}

html[data-bs-theme] .bg-overlay-auto {
    background-color: rgba(var(--wd-bg), 0.55);
}

html[data-bs-theme] .btn-outline-auto {
    --bs-btn-color: rgb(var(--wd-accent));
    --bs-btn-border-color: rgb(var(--wd-accent));
    --bs-btn-hover-color: rgb(var(--wd-bg));
    --bs-btn-hover-bg: rgb(var(--wd-accent));
    --bs-btn-hover-border-color: rgb(var(--wd-accent));
    --bs-btn-active-color: rgb(var(--wd-bg));
    --bs-btn-active-bg: rgb(var(--wd-accent));
    --bs-btn-active-border-color: rgb(var(--wd-accent));
}

.font-esthetic,
.text-accent {
    color: rgb(var(--wd-accent));
}

.font-arabic {
    color: rgb(var(--wd-gold));
}

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

.letter-wide {
    letter-spacing: 0.25em;
}

.ornament-line {
    width: 5rem;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgb(var(--wd-gold)), transparent);
}

.event-card {
    border: 1px solid rgba(var(--wd-gold), 0.45);
    position: relative;
}

.event-card::before {
    content: "";
    position: absolute;
    inset: 0.4rem;
    border: 1px dashed rgba(var(--wd-gold), 0.35);
    border-radius: inherit;
    pointer-events: none;
}

.event-card .btn {
    position: relative;
    z-index: 1;
}

.progress {
    --bs-progress-bar-bg: rgb(var(--wd-accent));
}

.form-check-input:checked {
    background-color: rgb(var(--wd-accent));
    border-color: rgb(var(--wd-accent));
}

.btn-whatsapp {
    --bs-btn-color: #fff;
    --bs-btn-bg: #25d366;
    --bs-btn-border-color: #25d366;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1ebe5b;
    --bs-btn-hover-border-color: #1ebe5b;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1aa851;
    font-weight: 600;
}

/* Duas & Blessings: Urdu sher card */
.font-urdu {
    font-family: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', serif;
    font-size: 1.3rem;
    line-height: 2.6;
    color: rgb(var(--wd-gold));
}

.sher-card {
    border: 1px solid rgba(var(--wd-gold), 0.45);
}

.sher-fade {
    transition: opacity 350ms ease;
}

.sher-hidden {
    opacity: 0;
}

.dua-chip {
    font-size: 0.78rem;
}

.rsvp-card {
    border: 1px solid rgba(var(--wd-gold), 0.45);
}

.couple-art {
    max-width: 18rem;
    padding: 0.5rem;
    background: #fff;
    border: 2px solid rgb(var(--wd-gold));
    border-radius: 1.25rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
}

/* ===================================================================
   Elegant light mode: ivory, champagne & antique gold
   (dark mode is unchanged)
   =================================================================== */
html[data-bs-theme="light"] {
    --wd-bg: 253, 250, 244;        /* warm ivory        */
    --wd-bg-alt: 248, 241, 230;    /* champagne         */
    --wd-card: 255, 255, 255;
    --wd-accent: 122, 28, 52;      /* deep maroon       */
    --wd-gold: 184, 146, 74;       /* antique gold      */
    --wd-text: 74, 52, 40;         /* warm brown text   */
    --bs-body-color: rgb(var(--wd-text));
}

/* faint gold lattice (jaal) pattern on every section */
html[data-bs-theme="light"] .bg-white-black,
html[data-bs-theme="light"] .bg-light-dark {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23b8924a' stroke-opacity='0.11' stroke-width='0.8'%3E%3Cpath d='M24 2 L46 24 L24 46 L2 24 Z'/%3E%3Ccircle cx='24' cy='24' r='5'/%3E%3C/g%3E%3Ccircle cx='24' cy='24' r='1.3' fill='%23b8924a' fill-opacity='0.18'/%3E%3C/svg%3E");
    background-size: 48px 48px;
}

/* cards: white with a hairline gold border, inner gold rule and soft warm shadow */
html[data-bs-theme="light"] .bg-theme-auto {
    background-color: #fff !important;
    border: 1px solid rgba(var(--wd-gold), 0.55);
    box-shadow: 0 0.75rem 2rem -0.75rem rgba(122, 28, 52, 0.18), 0 0.15rem 0.4rem rgba(184, 146, 74, 0.12) !important;
}

html[data-bs-theme="light"] .event-card::before,
html[data-bs-theme="light"] .rsvp-card::before {
    content: "";
    position: absolute;
    inset: 0.45rem;
    border: 1px solid rgba(var(--wd-gold), 0.35);
    border-radius: calc(var(--bs-border-radius-xl) - 0.3rem);
    pointer-events: none;
}

html[data-bs-theme="light"] .rsvp-card {
    position: relative;
}

/* headings: deep maroon script with a soft gold glow; Arabic in gold */
html[data-bs-theme="light"] .font-esthetic {
    color: rgb(var(--wd-accent));
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 18px rgba(184, 146, 74, 0.18);
}

html[data-bs-theme="light"] .font-arabic {
    color: rgb(var(--wd-gold));
}

html[data-bs-theme="light"] .text-accent {
    color: rgb(var(--wd-gold)) !important;
}

/* gold frame around the round pictures */
html[data-bs-theme="light"] .img-center-crop.rounded-circle {
    border-color: rgb(var(--wd-gold)) !important;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9), 0 0 0 7px rgba(var(--wd-gold), 0.55), 0 1rem 2rem -0.5rem rgba(122, 28, 52, 0.25) !important;
}

/* buttons: maroon outline, fills maroon on tap */
html[data-bs-theme="light"] .btn-outline-auto {
    --bs-btn-color: rgb(var(--wd-accent));
    --bs-btn-border-color: rgba(var(--wd-gold), 0.9);
    --bs-btn-hover-bg: rgb(var(--wd-accent));
    --bs-btn-hover-border-color: rgb(var(--wd-accent));
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: rgb(var(--wd-accent));
    --bs-btn-active-color: #fff;
    background-color: rgba(255, 255, 255, 0.7);
}

/* countdown pill */
html[data-bs-theme="light"] #wedding-date .border-gold.rounded-pill {
    background: linear-gradient(180deg, #fff, rgba(var(--wd-bg-alt), 1));
    box-shadow: 0 0.5rem 1.5rem -0.75rem rgba(122, 28, 52, 0.25) !important;
}

html[data-bs-theme="light"] #day,
html[data-bs-theme="light"] #hour,
html[data-bs-theme="light"] #minute,
html[data-bs-theme="light"] #second {
    color: rgb(var(--wd-accent));
    font-weight: 600;
}

/* bottom menu: frosted ivory with a gold top line */
html[data-bs-theme="light"] .navbar {
    background-color: rgba(253, 250, 244, 0.88) !important;
    border-top: 1px solid rgba(var(--wd-gold), 0.5) !important;
    box-shadow: 0 -0.5rem 1.5rem -1rem rgba(122, 28, 52, 0.25);
}

html[data-bs-theme="light"] .nav-link {
    color: rgba(var(--wd-text), 0.55);
}

/* ornament lines a little richer */
html[data-bs-theme="light"] .ornament-line {
    width: 6rem;
    background: linear-gradient(90deg, transparent, rgb(var(--wd-gold)), transparent);
}

/* softer artwork wash behind the home section in light mode */
html[data-bs-theme="light"] #home > img.position-absolute {
    opacity: 0.1 !important;
}