/* Additional Styles for Mobile Optimization */

/* Ensure proper scrolling on mobile devices */
body {
    -webkit-overflow-scrolling: touch;
}

/* Fix for iOS Safari modal display */
@supports (-webkit-touch-callout: none) {
    .fixed {
        position: -webkit-sticky;
        position: sticky;
    }
}

/* Perfect circles - Force circular shape ONLY for icon-only buttons */
.rounded-full {
    border-radius: 9999px !important;
}

/* Override: Only apply perfect circles to specific icon containers */
[class*="w-"].rounded-full[class*="h-"]:not(button) {
    border-radius: 50% !important;
    flex-shrink: 0;
}

/* Ensure badge circles are perfect */
#cart-badge,
#cart-badge-mobile {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
}

/* FAQ and Contact icon circles - perfect circles with padding */
.bg-blue-100.p-3.rounded-full {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

.bg-blue-100.p-3.rounded-full i {
    font-size: 1.25rem !important;
}

/* Icon circle containers - Make perfect circles */
.w-16.h-16 {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px;
    min-height: 64px;
    border-radius: 50% !important;
}

.w-12.h-12 {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px;
    min-height: 48px;
    border-radius: 50% !important;
}

.w-10.h-10 {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50% !important;
}

.w-8.h-8 {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50% !important;
}

.w-7.h-7 {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50% !important;
}

.w-6.h-6 {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px;
    min-height: 24px;
    border-radius: 50% !important;
}

/* Ensure flexbox centering for circular buttons */
.rounded-full.flex {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Close buttons with icon only - make them perfect circles */
button.rounded-full:not([class*="px-"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

button.rounded-full i {
    display: block;
    line-height: 1;
}

/* Icon containers in divs - perfect circles */
div.rounded-full {
    border-radius: 50% !important;
}

/* Custom scrollbar for better UX */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Mobile menu animation */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#mobile-menu {
    animation: slideDown 0.3s ease-out;
}

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* Improve touch targets on mobile */
@media (max-width: 768px) {
    button, a {
        min-height: 44px;
    }
    
    /* Mobile specific circle adjustments - ONLY for icon containers */
    .sm\:w-8.sm\:h-8 {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        border-radius: 50% !important;
    }
    
    .w-7.h-7,
    .sm\:w-7.sm\:h-7 {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        border-radius: 50% !important;
    }
    
    /* Circle badges and icon containers on mobile */
    #cart-badge,
    #cart-badge-mobile,
    div.w-16.h-16.rounded-full,
    div.w-12.h-12.rounded-full,
    div.w-10.h-10.rounded-full,
    div.w-8.h-8.rounded-full {
        border-radius: 50% !important;
    }
    
    /* Keep text buttons as pills */
    button.rounded-full[class*="px-"],
    a.rounded-full[class*="px-"] {
        border-radius: 9999px !important;
        aspect-ratio: auto !important;
    }
}

/* Focus Ring Primary */
.focus-ring-primary:focus {
    --tw-ring-color: var(--primary-color) !important;
}

/* Override all Tailwind blue-600 classes */
.bg-blue-600,
button.bg-blue-600,
a.bg-blue-600 {
    background-color: #3eafcc !important;
}

.hover\:bg-blue-700:hover {
    background-color: #11657a !important;
}

.text-blue-600 {
    color: #11657a !important;
}

.hover\:text-blue-600:hover {
    color: #3eafcc !important;
}

.bg-blue-100 {
    background-color: #fce8ef !important;
}

.bg-blue-50 {
    background-color: #fef5f8 !important;
}

.text-blue-800 {
    color: #8c1138 !important;
}

.border-blue-200 {
    border-color: #f9c5d5 !important;
}

.from-blue-50 {
    --tw-gradient-from: #fef5f8 !important;
}

.to-blue-100 {
    --tw-gradient-to: #fce8ef !important;
}

.focus\:ring-blue-500:focus {
    --tw-ring-color: rgba(235, 37, 96, 0.5) !important;
}