/* Page Loader Styles */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 100%);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease-out;
}

.page-loader.fade-out {
    opacity: 0;
    pointer-events: none;
}

.loader-content {
    text-align: center;
}

.loader-logo {
    width: 120px;
    height: auto;
    margin-bottom: 2rem;
    /* Removed pulse animation to prevent movement */
}

.loader-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #EC4899;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Disable transitions on initial load */
.no-transitions * {
    transition: none !important;
    animation: none !important;
}

/* Brand Button Styles */
.brand-blue-btn:hover {
    background-color: #0088c7 !important;
}

.brand-green-btn:hover {
    background-color: #85c100 !important;
}

/* Reset everything for full viewport */
* {
    box-sizing: border-box !important;
}

/* Prevent pinch-to-zoom on the entire page */
html, body {
    touch-action: pan-x pan-y;  /* Allow scrolling but prevent zoom */
}

/* Desktop only - full viewport lock */
@media (min-width: 1200px) {
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        max-width: none !important;
        min-width: 0 !important;
    }
}

/* Mobile defaults - allow scrolling */
@media (max-width: 1199px) {
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }
}

/* Override any container constraints */
.container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Force app container to be full viewport on desktop only */
@media (min-width: 1200px) {
    #app {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        max-width: none !important;
        min-width: 0 !important;
        z-index: 1 !important;
    }
}

/* Mobile app container */
@media (max-width: 1199px) {
    #app {
        position: relative !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        max-width: none !important;
        min-width: 0 !important;
    }
}

/* Main wrapper - absolutely positioned full viewport */
.campaign-takeover-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: row !important;
    margin: 0 !important;
    padding: 0 !important;
    background: white;
    z-index: 10 !important;
    max-width: none !important;
    min-width: 0 !important;
}

.campaign-form-section {
    width: 50% !important;  /* Restored to 50% for side-by-side layout */
    height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;  /* Prevent horizontal scroll */
    background: white !important;
    position: relative !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.campaign-hero-section {
    width: 50% !important;
    height: 100vh !important;
    position: relative !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
}

/* Hero Slideshow Styles */
.hero-slideshow {
    width: 100%;
    height: 100%;
    position: relative;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 1;
}

.hero-slide.active {
    opacity: 1;
    z-index: 2;
}

.hero-slide img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}


.close-button {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
}

.close-button:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* Make form inputs less bulky - reduce padding by ~20% */
.campaign-form-section .form-input {
    padding: 0.6rem 0.6rem 0.6rem 2.75rem !important;  /* Increased left padding for more icon spacing */
}

.campaign-form-section select.form-input {
    padding: 0.6rem 2.75rem 0.6rem 2.75rem !important;  /* Increased both sides for icon spacing */
}

.campaign-form-section textarea.form-input {
    padding: 0.6rem !important;
}

/* Adjust icon positioning for better spacing - only for form input icons */
.campaign-form-section .relative .absolute.flex.items-center.pointer-events-none {
    padding-left: 0.875rem;  /* Increased from 0.6rem for more breathing room */
}

/* Ensure form content fills the section properly */
.campaign-form-section > .min-h-full {
    min-height: 100% !important;  /* Changed from 100vh to 100% to prevent overflow */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 1rem 0 !important;  /* Reduced padding to minimize white space */
}

/* Remove any borders from inner form container */
.campaign-form-section .bg-white {
    border: none !important;
}

/* Tablet and Mobile: Stack vertically at 1199px and below */
@media (max-width: 1199px) {
    .campaign-takeover-wrapper {
        flex-direction: column !important;
        position: relative !important;
        height: auto !important;
        min-height: 100vh !important;
        overflow-y: visible !important;
    }
    
    /* Remove margin-bottom on the form container on smaller devices */
    .campaign-form-section .mb-8 {
        margin-bottom: 0 !important;
    }
    
    /* Remove padding-bottom on the form wrapper on smaller devices */
    .campaign-form-section .pb-10 {
        padding-bottom: 0 !important;
    }
    
    .campaign-form-section {
        width: 100% !important;
        position: relative !important;
        height: auto !important;
    }
    
    /* Hide hero section completely on mobile */
    .campaign-hero-section {
        display: none !important;
    }
    
    .campaign-form-section {
        min-height: auto !important;
        overflow-y: visible !important;
    }
    
    .campaign-form-section > .min-h-full {
        min-height: auto !important;
        display: block !important;
        align-items: normal !important;
        justify-content: normal !important;
    }
    
    .close-button {
        top: 1rem;
        right: 1rem;
    }
}

/* Original styles continue below */
.flatpickr-wrapper {
    position: relative;
    display: block;
    width: 100%;
}

/* Error message animations */
@keyframes slideInDown {
    0% {
        transform: translateY(-150%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideOutUp {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-150%);
        opacity: 0;
    }
}

#error-message {
    transform-origin: top center;
    will-change: transform, opacity;
}

#error-message.error-show {
    animation: slideInDown 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

#error-message.error-hide {
    animation: slideOutUp 0.4s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* Goal Option Styles */
input[type="radio"]:checked + .goal-option {
    border-color: #009cde;
    background-color: #e0f2fe;
}

/* Make goal options less bulky */
.campaign-form-section .goal-option {
    padding: 0.5rem !important;
}

input[type="radio"]:checked + .goal-option span {
    color: #0077b3;
}

input[type="radio"]:checked + .goal-option .check-icon {
    display: block;
}

/* Fix the form container width to prevent shifting when content changes */
.campaign-form-section .max-w-2xl {
    width: 36rem !important; /* Lock to max-width value - narrower for better layout */
    max-width: 36rem !important;
}

/* For smaller screens, ensure it stays responsive */
@media (max-width: 768px) {
    .campaign-form-section .max-w-2xl {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 0.5rem;  /* Reduced from 1rem to 0.5rem for more content space */
    }
}

/* Progress Bar Styles - Updated to remove shadow and border */
.progress-bar-container {
    background: white;
    padding: 0.5rem 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
}

@keyframes glow {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(400%);
    }
}

/* Pulse animation for completion */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.progress-complete {
    animation: pulse 0.5s ease-in-out;
}

/* Form Step Container */
.form-steps-container {
    position: relative;
    min-height: auto;
}

.form-step {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.form-step.active {
    display: block;
    opacity: 1;
}

/* Hide icons on small screens to prevent wrapping */
@media (max-width: 600px) {
    .welcome-icon {
        display: none !important;
    }
}

@media (max-width: 450px) {
    .auth-avatar-icon {
        display: none !important;
    }
}

/* Force modal to have no margins */
.modal-no-margin {
    margin-top: 0 !important;
    margin: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

/* Prevent zoom on input focus for iOS */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important;  /* iOS zooms if font-size is less than 16px */
    }
}

/* Mobile responsiveness */
@media (max-width: 640px) {
    /* Reduce horizontal padding on mobile for more content space */
    .campaign-form-section .px-6 {
        padding-left: 0.75rem !important;  /* Reduced from 1.5rem */
        padding-right: 0.75rem !important;  /* Reduced from 1.5rem */
    }
    
    .campaign-form-section .px-8 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Reduce padding on the main content container */
    .campaign-form-section .bg-white[style*="padding"] {
        padding: 1rem 0.75rem !important;  /* Reduced from 1.5rem 1.25rem */
    }
    
    /* Reduce padding on error and success messages */
    #error-message.px-4,
    #success-message.px-4 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Adjust error message position on mobile - bring it down more */
    #error-message {
        top: 0.5rem !important;  /* Moved down from -3rem to be more visible on mobile */
    }
    
    /* Fix checkbox alignment specifically for agreement on mobile */
    .flex.items-start {
        display: flex !important;
        flex-direction: row !important;  /* Ensure horizontal layout */
        align-items: flex-start !important;
    }
    
    /* Ensure checkbox container doesn't wrap under */
    .flex.items-start > div:first-child {
        flex-shrink: 0 !important;
        margin-right: 0.5rem !important;
        margin-top: 0 !important;
    }
    
    label[for="agreement"] {
        margin-left: 0 !important;  /* Remove left margin on mobile since flexbox handles spacing */
        padding-top: 0 !important;  /* Align text to top of checkbox */
        flex: 1 !important;  /* Take remaining space */
    }
    
    /* Reduce padding on CREATE CAMPAIGN button to prevent text wrapping */
    #create-campaign-btn-mobile {
        padding: 0.75rem 1rem !important;  /* Reduced from 1rem 1.5rem */
        white-space: nowrap !important;
        font-size: 0.9rem !important;  /* Slightly smaller font if needed */
    }
    
    #email-status-notice {
        font-size: 0.75rem;
    }
    
    /* Thank you page mobile spacing */
    .form-step[data-step="4"] .mb-8 {
        margin-bottom: 1.5rem !important; /* Reduce from 2rem */
    }
    
    .form-step[data-step="4"] .mb-6 {
        margin-bottom: 1.5rem !important; /* Reduce from 1.5rem */
    }
    
    .form-step[data-step="4"] .mb-4 {
        margin-bottom: 1rem !important; /* Reduce from 1rem */
    }
    
    .form-step[data-step="4"] .mb-3 {
        margin-bottom: 0.75rem !important; /* Reduce from 0.75rem */
    }
    
    /* Add spacing after donate button group */
    .form-step[data-step="4"] .flex.flex-col.gap-4 {
        margin-bottom: 1.5rem !important;
    }
    
    /* Info section spacing */
    .form-step[data-step="4"] .bg-gray-50 {
        padding: 1rem !important; /* Reduce from 1.5rem */
        margin-bottom: 1.5rem !important;
    }
    
    /* Countdown text spacing */
    .form-step[data-step="4"] .text-sm.text-gray-500 {
        margin-top: 1rem !important;
    }
    
    /* Flush mobile appearance - only on mobile */
    .mobile-flush {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }
    
    /* Optimize campaign header for mobile to prevent wrapping */
    .campaign-header {
        padding: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .campaign-title {
        font-size: 1.25rem !important;
        line-height: 1.2 !important;
        white-space: normal !important;  /* Allow wrapping on mobile */
        overflow: visible !important;
        text-overflow: unset !important;
    }
    
    .campaign-stats {
        font-size: 0.625rem !important;
        padding: 0.375rem 0.5rem !important;
    }
    
    .campaign-stats p {
        font-size: 0.625rem !important;
    }
    
    .campaign-stats span.font-bold {
        font-size: 0.75rem !important;
    }
    
    /* Fix fundraising goals grid on mobile - 4 columns to fit all amounts on one row */
    .goal-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.375rem !important;  /* Slightly reduce gap for better fit */
    }
    
    /* Make goal option text smaller on mobile for better fit */
    .goal-option span {
        font-size: 0.875rem !important;  /* Reduced from 1.125rem */
    }
    
    /* Reduce padding on goal options for mobile */
    .goal-option {
        padding: 0.375rem 0.125rem !important;  /* Further reduced for mobile */
    }
    
    /* Make checkmark icon smaller on mobile */
    .goal-option .checkmark-icon svg {
        width: 0.75rem !important;
        height: 0.75rem !important;
    }
    
    /* Match custom amount field height to Other button on mobile */
    #otherAmount {
        padding: 0.375rem 0.375rem 0.375rem 1.75rem !important;  /* Match the Other button padding */
        font-size: 0.875rem !important;  /* Match the reduced font size */
        height: auto !important;  /* Let height be determined by padding */
    }
    
    /* Adjust dollar sign position for custom amount on mobile */
    .other .absolute.flex {
        padding-left: 0.5rem !important;
    }
    
    /* Make navigation buttons stack on very small screens */
    @media (max-width: 380px) {
        .step-navigation .flex {
            flex-direction: column;
        }
        
        .step-nav-btn {
            width: 100%;
            margin-bottom: 0.5rem;
        }
    }
    
    /* Adjust form container height for mobile */
    .form-steps-container {
        min-height: auto;
    }
    
    /* Form step adjustments for mobile */
    .form-step {
        padding: 0.5rem 0;
        min-height: auto;
    }
    
    /* Minimize padding on location step specifically */
    .form-step[data-step="3"] {
        padding-bottom: 0 !important;
    }
    
    /* Reduce gap before navigation buttons */
    .step-navigation {
        margin-top: 1.25rem !important;
    }
    
    /* Compact location fields on mobile - but not the agreement checkbox */
    .form-step[data-step="3"] .flex:not(.items-start) {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    .form-step[data-step="3"] .w-full {
        width: 100% !important;
        margin-bottom: 0 !important;
    }
}

/* Desktop and tablet styles */
@media (min-width: 641px) {
    /* Restore border-radius on desktop */
    .mobile-flush {
        border-radius: 1rem !important;
        border-left: 1px solid #F3F4F6 !important;
        border-right: 1px solid #F3F4F6 !important;
    }
    
    
    /* Maintain compact campaign header on desktop */
    .campaign-header {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .campaign-title {
        font-size: 1.5rem !important;
    }
    
    /* Goal grid on desktop - 4 columns for the main amounts */
    .goal-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Form transitions */
.form-group {
    margin-bottom: 1rem;
}

/* Spinning animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Auth container animation */
#auth-fields-container {
    transition: all 0.3s ease-in-out;
}

/* Email checking animation */
.email-checking {
    position: relative;
}

.email-checking::after {
    content: '';
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    border: 2px solid #F59E0B;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Flatpickr custom styling */
.flatpickr-calendar {
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.flatpickr-day.selected {
    background: #ec4899;
    border-color: #ec4899;
}

.flatpickr-day.selected:hover {
    background: #db2777;
    border-color: #db2777;
}

/* Ensure date input consistency - applies to all screen sizes */
/* Removed overly specific rules that conflict with inline styles */
/* Flatpickr inputs will inherit styles from inline attributes */

/* Only apply necessary fixes for Flatpickr that don't conflict */
.flatpickr-input[readonly] {
    cursor: pointer;
    background-color: white;
}

/* Ensure Flatpickr inputs have consistent styling with other form inputs */
.flatpickr-input,
.flatpickr-mobile {
    border-radius: 0.5rem !important;
    border: 2px solid #D1D5DB !important;
    padding: 0.6rem 0.6rem 0.6rem 2.75rem !important;  /* Match other form inputs */
    font-size: 1rem !important;
    transition: all 0.2s !important;
}

/* Set placeholder color for Flatpickr inputs */
.flatpickr-input::-moz-placeholder, .flatpickr-mobile::-moz-placeholder {
    color: #9CA3AF !important; /* Same gray as other placeholders */
    opacity: 1 !important;
}
.flatpickr-input::placeholder,
.flatpickr-mobile::placeholder {
    color: #9CA3AF !important; /* Same gray as other placeholders */
    opacity: 1 !important;
}

/* Hover state for Flatpickr inputs */
.flatpickr-input:hover:not(:focus),
.flatpickr-mobile:hover:not(:focus) {
    border-color: #9CA3AF !important;
}

/* Focus state for Flatpickr inputs */
.flatpickr-input:focus,
.flatpickr-mobile:focus {
    border-color: #EC4899 !important;
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1) !important;
    outline: none !important;
}

/* Overlay styles */
#form-overlay {
    transition: opacity 0.3s ease-in-out;
}

#form-fields-wrapper {
    transition: all 0.3s ease-in-out;
}

#form-fields-wrapper.unlocked #form-overlay {
    opacity: 0;
    pointer-events: none;
}

/* Google Places Autocomplete Dropdown Styling */
.pac-container {
    font-family: inherit;
    border: 2px solid #D1D5DB;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    margin-top: 2px;
    background-color: white;
}

.pac-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-size: 0.875rem;
    border-bottom: 1px solid #F3F4F6;
    transition: background-color 0.2s;
}

.pac-item:hover {
    background-color: #FDF2F8;
}

.pac-item-selected,
.pac-item-selected:hover {
    background-color: #FBBF24;
}

.pac-icon {
    display: none;
}

.pac-item-query {
    font-weight: 600;
    color: #111827;
}

.pac-matched {
    font-weight: 700;
    color: #EC4899;
}

/* Mobile adjustments for Google Places dropdown */
@media (max-width: 640px) {
    .pac-container {
        width: calc(100% - 2rem) !important;
        max-width: none !important;
    }
    
    .pac-item {
        padding: 1rem;
        font-size: 1rem;
    }
    
    /* Fix icon overlap on mobile for Flatpickr inputs */
    .flatpickr-input,
    .flatpickr-mobile {
        padding-left: 3.25rem !important; /* Increase left padding to prevent icon overlap with more breathing room */
    }
    
    /* Keep consistent icon positioning on mobile for Location step */
    .form-step[data-step="3"] .relative .absolute {
        padding-left: 0.75rem !important;
    }
}