/* Wedding RSVP Form Styles */

/* Typography */
body {
    font-family: 'Montserrat', sans-serif;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e1e8ff' fill-opacity='0.3'%3E%3Cpath d='M30 45c-2.5-2.5-5-5-7.5-7.5C20 35 18.75 33.75 17.5 32.5c-1.25-1.25-2.5-2.5-3.75-3.75C12.5 27.5 11.25 26.25 10 25c-1.25-1.25-2.5-2.5-3.75-3.75C5 20 3.75 18.75 2.5 17.5 1.25 16.25 0 15 0 13.75c0-1.25 1.25-2.5 2.5-3.75C3.75 8.75 5 7.5 6.25 6.25 7.5 5 8.75 3.75 10 2.5c1.25-1.25 2.5-2.5 3.75-3.75C15 0 16.25 0 17.5 0c1.25 0 2.5 0 3.75 1.25C22.5 2.5 23.75 3.75 25 5c1.25 1.25 2.5 2.5 3.75 3.75C30 10 31.25 11.25 32.5 12.5c1.25 1.25 2.5 2.5 3.75 3.75C37.5 17.5 38.75 18.75 40 20c1.25 1.25 2.5 2.5 3.75 3.75C45 25 46.25 26.25 47.5 27.5c1.25 1.25 2.5 2.5 3.75 3.75C52.5 32.5 53.75 33.75 55 35c1.25 1.25 2.5 2.5 3.75 3.75C60 40 60 42.5 60 45c0 2.5-1.25 5-2.5 7.5C56.25 55 55 57.5 52.5 60c-2.5 2.5-5 2.5-7.5 2.5s-5 0-7.5-2.5C35 57.5 33.75 55 32.5 52.5 31.25 50 30 47.5 30 45z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Header typography */
.font-serif {
    font-family: 'Bricolage Grotesque', sans-serif;
}

/* All headings should use Bricolage Grotesque */
h1, h2, h3, h4, h5, h6 {
    /* font-family: 'Bricolage Grotesque', sans-serif; */
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Body text uses Montserrat */
p, span, div, input, textarea, button, label {
    font-family: 'Montserrat', sans-serif;
}

.blur-background {
    filter: blur(8px);
    pointer-events: none;
    user-select: none;
}

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltip-text {
    visibility: hidden;
    width: 200px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.fade-in {
    animation: fadeIn 0.5s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.shake {
    animation: shake 0.5s;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

/* Modern Modal Styling */
.modal-frame {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 244, 255, 0.95) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 40px;
    border-radius: 24px;
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

.modal-content {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(63, 120, 224, 0.05);
    position: relative;
    z-index: 1;
}

/* Logo styling for modals */
.modal-logo {
    width: 100px;
    /* height: 60px; */
    height: auto;
    margin: 0 auto 20px;
    display: block;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(63, 120, 224, 0.15);
    transition: transform 0.3s ease;
}

.modal-logo:hover {
    transform: scale(1.05);
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .modal-frame {
        padding: 25px;
        margin: 10px;
    }
    .modal-content {
        padding: 20px;
    }
}

/* Custom color overrides to replace rose with #3f78e0 */
.bg-rose-50 {
    background-color: #f0f4ff !important;
}

.bg-rose-100 {
    background-color: #e1e8ff !important;
}

.bg-rose-300 {
    background-color: #a3b8ff !important;
}

.bg-rose-500 {
    background-color: #3f78e0 !important;
}

.bg-rose-600 {
    background-color: #2d5bb8 !important;
}

.bg-rose-700 {
    background-color: #1e3d8f !important;
}

.text-rose-500 {
    color: #3f78e0 !important;
}

.text-rose-600 {
    color: #2d5bb8 !important;
}

.text-rose-700 {
    color: #1e3d8f !important;
}

.text-rose-800 {
    color: #1a2b5c !important;
}

.border-rose-300 {
    border-color: #a3b8ff !important;
}

.border-rose-500 {
    border-color: #3f78e0 !important;
}

.focus\:ring-rose-500:focus {
    --tw-ring-color: #3f78e0 !important;
}

.focus\:border-rose-500:focus {
    border-color: #3f78e0 !important;
}

.hover\:bg-rose-100:hover {
    background-color: #e1e8ff !important;
}

.hover\:bg-rose-700:hover {
    background-color: #1e3d8f !important;
}

/* Modern Form Styling */
.modern-input {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    transition: all 0.3s ease;
    width: 100%;
}

.modern-input:focus {
    outline: none;
    border-color: #3f78e0;
    background: white;
    box-shadow: 0 0 0 4px rgba(63, 120, 224, 0.1);
    transform: translateY(-1px);
}

.modern-textarea {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    transition: all 0.3s ease;
    width: 100%;
    resize: vertical;
    min-height: 100px;
}

.modern-textarea:focus {
    outline: none;
    border-color: #3f78e0;
    background: white;
    box-shadow: 0 0 0 4px rgba(63, 120, 224, 0.1);
    transform: translateY(-1px);
}

.modern-button {
    background: linear-gradient(135deg, #3f78e0 0%, #2d5bb8 100%);
    border: none;
    border-radius: 12px;
    padding: 16px 32px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(63, 120, 224, 0.3);
}

.modern-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(63, 120, 224, 0.4);
    background: linear-gradient(135deg, #2d5bb8 0%, #1e3d8f 100%);
}

.modern-button:active {
    transform: translateY(0);
}

.attendance-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    transition: all 0.3s ease;
}

.attendance-card:hover {
    border-color: #3f78e0;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(63, 120, 224, 0.1);
}

.attendance-btn {
    border-radius: 10px;
    padding: 12px 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.attendance-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.attendance-btn.selected {
    background: linear-gradient(135deg, #3f78e0 0%, #2d5bb8 100%);
    color: white;
    border-color: #3f78e0;
    box-shadow: 0 4px 16px rgba(63, 120, 224, 0.3);
}

/* Plus One button styling */
#plus-one-yes.selected,
#plus-one-no.selected {
    background: linear-gradient(135deg, #3f78e0 0%, #2d5bb8 100%);
    color: white;
    border-color: #3f78e0;
    box-shadow: 0 4px 16px rgba(63, 120, 224, 0.3);
    transform: translateY(-1px);
}

.success-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3f78e0 0%, #2d5bb8 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    box-shadow: 0 8px 24px rgba(63, 120, 224, 0.3);
}

.success-icon i {
    color: white;
    font-size: 32px;
}

/* Loading and Transition Animations */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid #e2e8f0;
    border-top: 4px solid #3f78e0;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    margin-top: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: #3f78e0;
    font-size: 18px;
}

/* Modal transitions */
.modal {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal.active {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.modal.fade-out {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
}

/* Form submission loading */
.submit-loading {
    position: relative;
    pointer-events: none;
}

.submit-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.submit-loading span {
    opacity: 0;
}

/* Progress indicator */
.progress-bar {
    width: 100%;
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 20px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3f78e0, #2d5bb8);
    width: 0%;
    transition: width 0.3s ease;
    border-radius: 2px;
}

/* Success animation */
.success-checkmark {
    animation: checkmark 0.6s ease-in-out;
}

@keyframes checkmark {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
} 

/* Custom */
#poAnim {
    align-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}