/* Custom styles for Wedding Invitation Platform */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&family=Jost:wght@300;400;500;600&display=swap');

:root {
    /* Anglocita rose/maroon ramp (legacy --pink-* var names kept for compatibility) */
    --pink-50: #fcf5f6;
    --pink-100: #f7e9ec;
    --pink-200: #eccdd3;
    --pink-300: #dca7b1;
    --pink-400: #c2687a;
    --pink-500: #A84052;
    --pink-600: #8c3444;
    --pink-700: #742b39;
    --pink-800: #5f2530;
    --pink-900: #4a1e27;
    --gold: #A84052;
    --gold-light: #dca7b1;
}

* { box-sizing: border-box; }

body {
    font-family: 'Inter', 'Jost', sans-serif;
    color: #2a2630;
    background: #fff;
}

.font-serif { font-family: 'Playfair Display', 'Georgia', serif; }

.bg-gradient-pink {
    background: linear-gradient(135deg, #fcf5f6 0%, #f7e9ec 50%, #eccdd3 100%);
}
.bg-gradient-hero {
    background: linear-gradient(135deg, #fcf5f6 0%, #fff 40%, #f7e9ec 100%);
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.animate-fade-in-up { animation: fadeInUp 0.6s ease-out forwards; }
.animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }
.animate-slide-left { animation: slideInLeft 0.6s ease-out forwards; }
.animate-slide-right { animation: slideInRight 0.6s ease-out forwards; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-scale-in { animation: scaleIn 0.4s ease-out forwards; }

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

.card-hover { transition: all 0.3s ease; }
.card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(168, 64, 82, 0.12); }

.btn-pink {
    background: linear-gradient(135deg, #A84052, #8c3444);
    color: white; padding: 0.75rem 2rem; border-radius: 9999px;
    font-weight: 600; transition: all 0.3s ease; border: none;
    cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem;
}
.btn-pink:hover { background: linear-gradient(135deg, #8c3444, #742b39); transform: translateY(-2px); box-shadow: 0 10px 25px rgba(168, 64, 82, 0.3); }
.btn-pink:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-outline-pink {
    border: 2px solid #A84052; color: #A84052; padding: 0.65rem 2rem;
    border-radius: 9999px; font-weight: 600; transition: all 0.3s ease;
    background: transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem;
}
.btn-outline-pink:hover { background: #A84052; color: white; transform: translateY(-2px); }

.btn-white {
    background: white; color: #A84052; padding: 0.75rem 2rem;
    border-radius: 9999px; font-weight: 600; transition: all 0.3s ease; border: none; cursor: pointer;
}
.btn-white:hover { background: #fcf5f6; transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }

.input-pink {
    width: 100%; padding: 0.75rem 1rem; border: 2px solid #eccdd3;
    border-radius: 0.75rem; font-family: 'Inter', 'Jost', sans-serif;
    font-size: 0.875rem; transition: all 0.3s ease; background: white;
}
.input-pink:focus { outline: none; border-color: #c2687a; box-shadow: 0 0 0 3px rgba(168, 64, 82, 0.15); }

.badge { padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; display: inline-block; }
.badge-pending { background: #fef3c7; color: #92400e; }
.badge-paid { background: #dbeafe; color: #1e40af; }
.badge-in_progress { background: #e0e7ff; color: #3730a3; }
.badge-review { background: #f7e9ec; color: #742b39; }
.badge-done { background: #d1fae5; color: #065f46; }
.badge-cancelled { background: #fee2e2; color: #991b1b; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f7e9ec; }
::-webkit-scrollbar-thumb { background: #d8a3ae; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #A84052; }

.toast {
    position: fixed; top: 1.5rem; right: 1.5rem; padding: 1rem 1.5rem;
    border-radius: 0.75rem; color: white; font-weight: 500; z-index: 9999;
    animation: slideInRight 0.3s ease-out; max-width: 400px;
}
.toast-success { background: #059669; }
.toast-error { background: #dc2626; }
.toast-info { background: #A84052; }

.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 50;
    display: flex; align-items: center; justify-content: center; animation: fadeIn 0.2s ease-out;
}
.modal-content {
    background: white; border-radius: 1.5rem; padding: 2rem;
    max-width: 500px; width: 90%; max-height: 90vh; overflow-y: auto; animation: scaleIn 0.3s ease-out;
}

.loader {
    border: 3px solid #f7e9ec; border-top: 3px solid #A84052;
    border-radius: 50%; width: 2rem; height: 2rem; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.floral-divider { display: flex; align-items: center; gap: 1rem; color: #d8a3ae; }
.floral-divider::before, .floral-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, transparent, #d8a3ae, transparent); }

.invitation-section { padding: 4rem 1.5rem; position: relative; overflow: hidden; }

.mobile-menu {
    display: none; position: fixed; inset: 0; background: white;
    z-index: 40; padding: 2rem; flex-direction: column; gap: 1rem;
}
.mobile-menu.active { display: flex; }