/* Global Styles */

.bengali-text {
    font-family: 'Noto Sans Bengali', 'Segoe UI', system-ui, sans-serif;
}

/* Fix for mobile footer visibility - force display on mobile regardless of parent */
/* !important is required here to override Tailwind's utility classes */
@media (max-width: 1279px) {
    footer div.xl\:hidden {
        display: block !important; /* Override Tailwind xl:hidden */
        visibility: visible !important; /* Ensure visibility */
        opacity: 1 !important; /* Ensure opacity */
        height: auto !important; /* Override any fixed heights */
    }
    footer > div.hidden.xl\:block {
        display: none !important; /* Override Tailwind xl:block */
    }
}

/* Fix for desktop footer visibility - force display on desktop */
/* !important is required here to override Tailwind's utility classes */
@media (min-width: 1280px) {
    footer > div.hidden.xl\:block {
        display: block !important; /* Override Tailwind hidden class */
        visibility: visible !important; /* Ensure visibility */
        opacity: 1 !important; /* Ensure opacity */
    }
    footer div.xl\:hidden {
        display: none !important; /* Override Tailwind xl:hidden */
    }

    /* Ensure proper 4-column grid layout for desktop footer */
    footer .hidden.xl\:block .grid.lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* Override Tailwind grid classes */
    }
}

/* Desktop-specific styles for fixed header */
/* !important is required to override any conflicting Tailwind utilities */
@media (min-width: 1280px) {
    body {
        padding-top: 80px !important; /* 80px = Tailwind h-20 = fixed desktop header height */
    }
}

/* Mobile-specific styles for fixed header and footer */
/* !important is required to override any conflicting Tailwind utilities */
@media (max-width: 1279px) {
    body {
        padding-top: 64px !important; /* 64px = Tailwind h-16 = fixed mobile header height */
        padding-bottom: 0px !important; /* Remove body padding - mobile bottom nav handles spacing */
    }

    /* Ensure main content also has proper spacing */
    main {
        padding-top: 1rem; /* 16px - standard spacing for content below header */
    }

    .mobile-content-spacing {
        margin-bottom: 20px; /* Extra spacing for mobile bottom navigation bar */
    }

    /* Override any conflicting styles */
    #header-container + * {
        margin-top: 0 !important; /* Remove default spacing after header */
    }
}

/* Tablet-specific styles for mobile footer (768px to 1279px) */
@media (min-width: 768px) and (max-width: 1279px) {
    /* Center align mobile footer content */
    #mobile-footer-content {
        text-align: center;
    }

    #mobile-footer-logo {
        display: flex;
        justify-content: center;
    }

    #mobile-footer-contact p {
        justify-content: center;
    }

    #mobile-footer-buttons {
        justify-content: center;
    }

    #mobile-footer-social {
        justify-content: center;
    }
}


/* Utility Classes */
/* Use higher specificity to override Tailwind utilities without !important */
footer nav a.mobile-nav-active,
nav a.mobile-nav-active,
.mobile-nav-active {
    color: #3b82f6;
}

/* Account Navigation Active States */
/* Desktop sidebar active state */
.account-nav-link.active {
    background-color: #f3f4f6 !important; /* bg-gray-100 */
    color: #2563eb !important; /* text-blue-600 */
}

/* Mobile drawer active state */
.account-nav-link-mobile.active {
    background-color: #eff6ff !important; /* bg-blue-50 */
    color: #2563eb !important; /* text-blue-600 */
    border-color: #bfdbfe !important; /* border-blue-200 */
}

/* Smooth transform transitions with vendor prefixes for better browser compatibility */
.transition-transform {
    -webkit-transition: -webkit-transform 0.3s ease-in-out; /* Safari/Chrome */
    -moz-transition: -moz-transform 0.3s ease-in-out; /* Firefox */
    -o-transition: -o-transform 0.3s ease-in-out; /* Opera */
    transition: transform 0.3s ease-in-out; /* Modern browsers */
}

/* Hide scrollbar utility class - cross-browser support */
.scrollbar-hide {
    -ms-overflow-style: none; /* Internet Explorer and Edge */
    scrollbar-width: none; /* Firefox */
}

/* WebKit browsers (Chrome, Safari, newer Edge) */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Form Input Classes */
/* Base input styles for text, email, password, number, tel, url inputs */
.form-input {
    width: 100%;
    padding: 0.5rem 0.75rem; /* py-2 px-3 */
    border: 1px solid #d1d5db; /* border-gray-300 */
    border-radius: 0.375rem; /* rounded-md */
    outline: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-input:focus {
    outline: none;
    border-color: transparent;
    box-shadow: 0 0 0 2px #3b82f6; /* ring-2 ring-blue-500 */
}

/* Select dropdown styles */
.form-select {
    width: 100%;
    padding: 0.5rem 0.75rem; /* py-2 px-3 */
    border: 1px solid #d1d5db; /* border-gray-300 */
    border-radius: 0.375rem; /* rounded-md */
    outline: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    background-color: white;
}

.form-select:focus {
    outline: none;
    border-color: transparent;
    box-shadow: 0 0 0 2px #3b82f6; /* ring-2 ring-blue-500 */
}

/* Textarea styles */
.form-textarea {
    width: 100%;
    padding: 0.5rem 0.75rem; /* py-2 px-3 */
    border: 1px solid #d1d5db; /* border-gray-300 */
    border-radius: 0.375rem; /* rounded-md */
    outline: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    resize: vertical;
}

.form-textarea:focus {
    outline: none;
    border-color: transparent;
    box-shadow: 0 0 0 2px #3b82f6; /* ring-2 ring-blue-500 */
}

/* Checkbox styles */
.form-checkbox {
    width: 0.75rem; /* w-3 */
    height: 0.75rem; /* h-3 */
    color: #2563eb; /* text-blue-600 */
    border-radius: 0.25rem; /* rounded */
    border: 1px solid #d1d5db;
    transition: all 0.15s ease-in-out;
}

.form-checkbox:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

/* Radio button styles */
.form-radio {
    width: 1rem; /* w-4 */
    height: 1rem; /* h-4 */
    color: #2563eb; /* text-blue-600 */
    border: 1px solid #d1d5db;
    transition: all 0.15s ease-in-out;
}

.form-radio:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

/* Form input variants with different focus colors */
.form-input-green:focus {
    box-shadow: 0 0 0 2px #10b981; /* ring-green-500 */
}

.form-input-yellow:focus {
    box-shadow: 0 0 0 2px #f59e0b; /* ring-yellow-500 */
}

/* Disabled state for form inputs */
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
    background-color: #f3f4f6; /* bg-gray-100 */
    cursor: not-allowed;
    opacity: 0.6;
}

/* Error state for form inputs */
.form-input-error {
    border-color: #ef4444; /* border-red-500 */
}

.form-input-error:focus {
    box-shadow: 0 0 0 2px #ef4444; /* ring-red-500 */
}