@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

:root {
    --elegant-bg: #fff8f8;
    --elegant-bg-soft: #fff2f4;
    --elegant-ink: #23151b;
    --elegant-muted: #6a525b;
    --elegant-surface: rgba(255, 255, 255, 0.82);
    --elegant-surface-strong: rgba(255, 255, 255, 0.92);
    --elegant-border: rgba(190, 24, 60, 0.14);
    --elegant-accent: #be123c;
    --elegant-accent-soft: #f43f5e;
    --elegant-gold: #a8732a;
    --elegant-shadow-soft: 0 12px 30px rgba(114, 15, 45, 0.08);
    --elegant-shadow-strong: 0 22px 50px rgba(114, 15, 45, 0.14);
    --elegant-radius: 18px;
}

body {
    font-family: "Manrope", "Nunito", sans-serif;
    color: var(--elegant-ink);
    background:
        radial-gradient(circle at 12% 16%, rgba(244, 63, 94, 0.16) 0%, rgba(244, 63, 94, 0) 35%),
        radial-gradient(circle at 88% 14%, rgba(168, 85, 247, 0.12) 0%, rgba(168, 85, 247, 0) 38%),
        radial-gradient(circle at 26% 88%, rgba(249, 168, 212, 0.1) 0%, rgba(249, 168, 212, 0) 34%),
        linear-gradient(150deg, #fffafb 0%, var(--elegant-bg-soft) 42%, #fff 100%);
    min-height: 100vh;
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image:
        linear-gradient(rgba(190, 24, 60, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(190, 24, 60, 0.04) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(circle at center, black 36%, transparent 90%);
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-script,
.romantic-gradient-text {
    font-family: "Cormorant Garamond", "Dancing Script", serif !important;
    letter-spacing: 0.01em;
}

.romantic-header,
nav.bg-white\/95,
.bg-white\/90.backdrop-blur-md {
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.93) 0%, rgba(255, 255, 255, 0.88) 100%) !important;
    border-bottom: 1px solid var(--elegant-border) !important;
    box-shadow: 0 8px 24px rgba(114, 15, 45, 0.06) !important;
    backdrop-filter: blur(12px);
}

.fb-card,
.romantic-card,
.bg-white.rounded-xl.shadow-sm,
.bg-white.rounded-2xl.shadow-xl {
    background: var(--elegant-surface-strong) !important;
    border: 1px solid var(--elegant-border) !important;
    border-radius: var(--elegant-radius) !important;
    box-shadow: var(--elegant-shadow-soft) !important;
    position: relative;
    overflow: hidden;
}

.fb-card::before,
.romantic-card::before,
.bg-white.rounded-xl.shadow-sm::before,
.bg-white.rounded-2xl.shadow-xl::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(244, 63, 94, 0) 0%, rgba(190, 24, 60, 0.42) 35%, rgba(168, 85, 247, 0.26) 70%, rgba(244, 63, 94, 0) 100%);
}

.fb-card:hover,
.romantic-card:hover,
.hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--elegant-shadow-strong) !important;
}

.fb-btn-primary,
.romantic-btn-primary,
button.bg-gradient-to-r.from-rose-400,
button.bg-gradient-to-r.from-rose-500 {
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
    background: linear-gradient(130deg, #f43f5e 0%, #be123c 52%, #9f1239 100%) !important;
    box-shadow: 0 14px 28px rgba(190, 24, 60, 0.24) !important;
}

.fb-btn-primary:hover,
.romantic-btn-primary:hover,
button.bg-gradient-to-r.from-rose-400:hover,
button.bg-gradient-to-r.from-rose-500:hover {
    transform: translateY(-2px) scale(1.01);
    filter: saturate(1.08);
}

.fb-nav-item,
.romantic-nav-item {
    border: 1px solid transparent;
    border-radius: 12px;
}

.fb-nav-item:hover,
.romantic-nav-item:hover {
    background: rgba(244, 63, 94, 0.08) !important;
    border-color: rgba(244, 63, 94, 0.2) !important;
}

input,
select,
textarea {
    border-radius: 12px !important;
    border-color: rgba(190, 24, 60, 0.22) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(190, 24, 60, 0.62) !important;
    box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.16) !important;
}

table thead {
    background: linear-gradient(120deg, rgba(190, 24, 60, 0.08), rgba(168, 85, 247, 0.08)) !important;
}

table tbody tr:hover {
    background: rgba(244, 63, 94, 0.05) !important;
}

#mobile-sidebar,
#mobile-menu-popup {
    backdrop-filter: blur(10px);
}

@keyframes elegantReveal {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

main,
.fb-card,
.romantic-card {
    animation: elegantReveal 0.35s ease-out;
}

@media (max-width: 768px) {
    .fb-card,
    .romantic-card {
        border-radius: 14px !important;
    }

    body::before {
        background-size: 24px 24px;
    }
}