/* style.css */
.desktop-plan { display:inline; }
.mobile-plan { display:none; }
.rounded-5 { border-radius: 5px; }
.rounded-8 { border-radius: 8px; }
.rounded-xl { border-radius: 8px !important; }
.rounded-2xl { border-radius: 10px !important; }
.rounded-lg { border-radius: 6px !important; }

.mobile-hide-header-when-created {
        display: none !important;
    }


/* Fix for 1024px and below - Make "How it works" items go side by side (4x1 layout) */
@media (max-width: 1024px) {
    .how-it-works-responsive {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
    }
    
    /* Remove the space-y margin when using flex */
    .how-it-works-responsive > * {
        margin-top: 0 !important;
    }
}

/* Mobile layout changes for 767px and below */
@media (max-width: 767px) {
    /* Remove padding from main container */
    .mobile-container-no-padding {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Very little padding on header section */
    .mobile-header-minimal {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    
    /* Smaller font sizes for header */
    .mobile-header-minimal h1 {
        font-size: 2.25rem !important;
        line-height: 1.2 !important;
    }
    
    .mobile-header-minimal p {
        font-size: 1rem !important;
    }
    
    /* Hide how it works section completely on mobile */
    .mobile-hide-how-it-works {
        display: none !important;
    }
    
    /* Smaller padding for white sections */
    .mobile-section-compact {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
		margin-top: 1rem !important;
    }
    
    /* Change banner text on mobile */
    .banner-text-full {
        display: none;
    }
    
    .banner-text-short {
        display: block;
    }
    
    /* Hide header section on mobile when holiday is created */
    .mobile-hide-header-when-created {
        display: none !important;
    }
}

/* Show full text on larger screens */
@media (min-width: 768px) {
    .banner-text-full {
        display: block;
    }
    
    .banner-text-short {
        display: none;
    }
}

@media (max-width: 640px) {
	 .mobile-header-minimal h1 {
		font-size: 2rem !important;
	}
 .mobile-header-minimal p {
    line-height: 1.6 !important;
  }
  
  .mobile-section-compact { margin-top:0 !important; }
  
  #create-holiday-section { box-shadow:none; background:transparent; }
  .mobile-container-no-padding { padding:0 !important; }
  .rounded-2xl { border-radius:0 !important; }
  .mobile-section-compact { margin-bottom:0 !important; }
  .mobile-lists { padding:1rem !important; }
  .mobile-section-compact, .mobile-lists { box-shadow:none !important; background:transparent !important; }
  .desktop-plan { display:none; }
	.mobile-plan { display:inline; }
	.holiday-subtitle { display:none; }
	.mobile-header-minimal { padding-left:0.5rem !important; padding-right:0.5rem !important; }
}

/* Banner button adjustments for mobile */
@media (max-width: 640px) {
    /* Hide the + icon on mobile */
    .banner-button .shrink-0 {
        display: none;
    }
    
    /* Remove left margin from text when icon is hidden */
    .banner-button .ml-3 {
        margin-left: 0 !important;
    }
    
    /* Reduce right icon margin on mobile */
    .banner-button .ml-6 {
        margin-left: 0.5rem !important; /* ml-2 equivalent */
    }
	
	.flex.flex-col.sm\:flex-row.gap-4.mb-6 {
		margin-left:1rem !important;
		margin-right:1rem !important;
	}
	
	.flex.flex-col.sm\:flex-row.gap-4 button {
        font-size: 0.825rem !important; /* Reduce from default by ~2px */
    }
}

@media (max-width: 360px) {
    /* Make banner buttons full width on very small screens */
    .banner-buttons-container {
        display: block !important;
    }
    
    .banner-buttons-container > button {
        width: 100% !important;
        margin-bottom: 1rem;
    }
    
    .banner-buttons-container > button:last-child {
        margin-bottom: 0;
    }
}

/* Mobile layout changes for 767px and below */
@media (max-width: 767px) {
    /* Existing mobile styles... */
    
    /* Add top margin and reduce bottom margin for button container when how-it-works is hidden */
    .flex.flex-col.sm\:flex-row.gap-4.mb-6 {
        margin-top: 1rem !important; /* mt-4 */
        margin-bottom: 1rem !important; /* mb-4 instead of mb-6 */
    }
}

/* Keep buttons side-by-side until 350px instead of 640px */
@media (min-width: 351px) {
    .flex.flex-col.sm\:flex-row.gap-4 {
        flex-direction: row !important;
    }
}

/* Only stack buttons vertically at 350px and below */
@media (max-width: 350px) {
    .flex.flex-col.sm\:flex-row.gap-4 {
        flex-direction: column !important;
    }
    
    .flex.flex-col.sm\:flex-row.gap-4 button {
        width: 100% !important;
        margin-bottom: 1rem;
    }
    
    .flex.flex-col.sm\:flex-row.gap-4 button:last-child {
        margin-bottom: 0;
    }
}


/* Mobile notification positioning - move to bottom center at 500px and below */
@media (max-width: 500px) {
    .fixed.top-4.right-4 {
        top: auto !important;
        right: auto !important;
        bottom: 1rem !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
		width: calc(100% - 2rem) !important;
    }
	
}