/* assets/css/style.css */

/* --- Global Styles --- */
body {
    font-family: 'Inter', sans-serif; /* A common, clean sans-serif font */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -overflow-x: hidden; /* Prevent horizontal scroll */
    -max-width: 100vw;   /* Ensure viewport doesn't expand */
}


#mobile-menu {
    max-width: 100vw;
    overflow-x: hidden;

}

/* --- SwiperJS Custom Styles --- */
/* These styles ensure your slider pagination and navigation buttons look professional */

/* Style for the pagination bullets */
.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: #ccc;
    opacity: 1;
    transition: background-color 0.3s ease;
}

.swiper-pagination-bullet-active {
    background-color: #46B5B6; /* Your theme's primary color */
}

/* Style for the navigation arrows (if you choose to use the default ones) */
.swiper-button-next,
.swiper-button-prev {
    color: #46B5B6; /* Your theme's primary color */
    transform: scale(0.7); /* Make them slightly smaller */
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 32px;
    font-weight: 600;
}
.rotate-180 {
  transform: rotate(180deg);
}
/* CSS for Tab Functionality (Add to style.css) */

/* Styles for active and inactive tab buttons */
.tab-button {
    transition: all 0.3s ease-in-out;
    border-bottom: 2px solid transparent; /* Default inactive state */
}

.tab-button.active-tab {
    color: #46B5B6; /* Custom Teal */
    border-color: #46B5B6; /* Custom Teal */
}

/* Styles for tab content panels */
.tab-content {
    display: block; /* Default for initially active content */
    opacity: 1;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    transform: translateY(0);
}

.tab-content.hidden-content {
    display: none; /* Hide inactive content */
    opacity: 0;
    transform: translateY(20px); /* Optional: slight slide-down effect when hidden */
}

.tab-content.active-content {
    display: block; /* Ensure active content is always block for visibility */
    opacity: 1;
    transform: translateY(0);
}
/* CSS for Tab Functionality (Confirm this is in your style.css) */

/* Styles for active and inactive tab buttons */
.tab-button {
    padding-left: 1.5rem; /* px-6 */
    padding-right: 1.5rem; /* px-6 */
    padding-top: 0.75rem; /* py-3 */
    padding-bottom: 0.75rem; /* py-3 */
    font-size: 1.125rem; /* text-lg */
    line-height: 1.75rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    border-bottom: 2px solid transparent; /* Default inactive state */
    color: #4b5563; /* text-gray-600 */
    transition: all 0.3s ease-in-out;
}

.tab-button:hover {
    color: #46B5B6; /* custom-teal */
    border-color: #46B5B6; /* custom-teal */
}

.tab-button:focus {
    outline: none;
}

.tab-button.active-tab {
    color: #46B5B6; /* custom-teal */
    border-color: #46B5B6; /* custom-teal */
    /* Add any other active styles here if desired, e.g., font-weight: bold; */
}

/* Styles for tab content panels */
.tab-content {
    /* These properties are crucial for the display toggle and smooth transition */
    opacity: 1;
    max-height: 2000px; /* Large enough to accommodate content when active */
    overflow: hidden; /* Hide overflow content during transition */
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.tab-content.hidden-content {
    opacity: 0;
    max-height: 0; /* Collapse content when hidden */
}

.tab-content.active-content {
    display: block; /* Ensure it's block when active */
    opacity: 1;
    max-height: 2000px; /* Re-expand when active */
}
/* Custom CSS for Tab Functionality and other site-wide styles */

/* Ensure Tailwind's base styles are correctly applied by its CDN */

/* Custom colors defined in tailwind.config.js */
/* You defined custom-teal and custom-blue, ensure Tailwind is processing them */

/* Header Animation CSS */
.header-hidden {
    transform: translateY(-100%); /* Moves the header completely up and out of view */
}

/* Styles for Tab Functionality */

/* Styles for active and inactive tab buttons */
.tab-button {
    /* Basic padding and font styles as per your HTML classes */
    padding-left: 1.5rem; /* px-6 */
    padding-right: 1.5rem; /* px-6 */
    padding-top: 0.75rem; /* py-3 */
    padding-bottom: 0.75rem; /* py-3 */
    font-size: 1.125rem; /* text-lg */
    line-height: 1.75rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    border-bottom: 2px solid transparent; /* Default inactive state: transparent border */
    color: #4b5563; /* text-gray-600: default text color for inactive */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover/active */
    white-space: nowrap; /* Prevent tabs from wrapping */
    background-color: transparent; /* Ensure no default browser background */
    cursor: pointer; /* Indicate it's clickable */
}

.tab-button:hover {
    color: #46B5B6; /* custom-teal text on hover */
    border-color: #46B5B6; /* custom-teal border on hover */
}

.tab-button:focus {
    outline: none; /* Remove default focus outline */
}

.tab-button.active-tab {
    color: #46B5B6; /* custom-teal text when active */
    border-color: #46B5B6; /* custom-teal border when active */
}

/* Styles for tab content panels */
.tab-content {
    /* These properties are crucial for the hide/show functionality and smooth transition */
    display: block; /* Default to block so transitions can apply when active */
    opacity: 1;
    max-height: 2000px; /* Large enough value to accommodate content when visible */
    overflow: hidden; /* Hide content that exceeds max-height during collapse */
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Smooth collapse/fade */
}

.tab-content.hidden-content {
    opacity: 0;
    max-height: 0; /* Collapse content to 0 height */
    /* Remove padding and margin when collapsed to prevent hidden space */
    padding-top: 0 !important; 
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Ensure active content is explicitly shown */
.tab-content.active-content {
    display: block;
    opacity: 1;
    max-height: 2000px; /* Ensure content is visible and takes full height */
}

/* Specificity adjustments for some Tailwind defaults if they interfere */
button.tab-button {
    border-width: 0; /* Reset button border from user agent stylesheet */
    background-color: transparent; /* Reset button background */
}


/* Custom Checkbox/Radio Styling (Blue Tick) */
/* This requires Tailwind forms plugin or similar custom utility classes */
/* If you are using @tailwindcss/forms, the checked:bg-custom-blue will work automatically for color */
/* The base styling here ensures it looks like a custom tick */
input[type="checkbox"].form-checkbox,
input[type="radio"].form-radio {
    /* Base styles for custom appearance */
    -webkit-appearance: none; /* Remove default browser styling */
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    user-select: none;
    flex-shrink: 0;
    border-width: 1px;
    border-color: #d1d5db; /* gray-300 */
    background-color: #fff;
    color: #46B5B6; /* custom-teal color for checked state */
    /* Default size from your HTML h-5 w-5 */
    height: 1.25rem;
    width: 1.25rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* Checked state for checkboxes and radios */
input[type="checkbox"].form-checkbox:checked,
input[type="radio"].form-radio:checked {
    background-color: #46B5B6; /* custom-teal background when checked */
    border-color: #46B5B6; /* custom-teal border when checked */
}

/* For checkboxes, add the tick icon using background-image */
input[type="checkbox"].form-checkbox:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 00-1.414 0L7 8.586 5.207 6.793a1 1 0 00-1.414 1.414l2.5 2.5a1 1 0 001.414 0l4-4a1 1 0 000-1.414z'/%3e%3c/svg%3e");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

/* For radios, make them circular and add the dot */
input[type="radio"].form-radio {
    border-radius: 50%; /* Make radio buttons circular */
}

input[type="radio"].form-radio:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
    background-size: 100% 100%; /* Adjust size of the dot if needed */
    background-position: center;
    background-repeat: no-repeat;
}

/* Focus styles for accessibility */
input[type="checkbox"].form-checkbox:focus,
input[type="radio"].form-radio:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.5); /* A light blue shadow */
    border-color: #46B5B6; /* custom-teal */
}

/* Custom CSS for Tab Functionality and other site-wide styles */

/* Ensure Tailwind's base styles are correctly applied by its CDN */

/* Custom colors defined in tailwind.config.js */
/* You defined custom-teal and custom-blue, ensure Tailwind is processing them */

/* Header Animation CSS */
.header-hidden {
    transform: translateY(-100%); /* Moves the header completely up and out of view */
}

/* Styles for Tab Functionality */

/* Styles for active and inactive tab buttons */
.tab-button {
    padding-left: 1.5rem; /* px-6 */
    padding-right: 1.5rem; /* px-6 */
    padding-top: 0.75rem; /* py-3 */
    padding-bottom: 0.75rem; /* py-3 */
    font-size: 1.125rem; /* text-lg */
    line-height: 1.75rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    border-bottom: 2px solid transparent; /* Default inactive state: transparent border */
    color: #4b5563; /* text-gray-600: default text color for inactive */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover/active */
    white-space: nowrap; /* Prevent tabs from wrapping */
    background-color: transparent; /* Ensure no default browser background */
    cursor: pointer; /* Indicate it's clickable */
}

.tab-button:hover {
    color: #46B5B6; /* custom-teal text on hover */
    border-color: #46B5B6; /* custom-teal border on hover */
}

.tab-button:focus {
    outline: none; /* Remove default focus outline */
}

.tab-button.active-tab {
    color: #46B5B6; /* custom-teal text when active */
    border-color: #46B5B6; /* custom-teal border when active */
}

/* Styles for tab content panels */
.tab-content {
    display: block; /* Default to block so transitions can apply when active */
    opacity: 1;
    max-height: 2000px; /* Large enough value to accommodate content when visible */
    overflow: hidden; /* Hide content that exceeds max-height during collapse */
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Smooth collapse/fade */
}

.tab-content.hidden-content {
    opacity: 0;
    max-height: 0; /* Collapse content to 0 height */
    padding-top: 0 !important; 
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Ensure active content is explicitly shown */
.tab-content.active-content {
    display: block;
    opacity: 1;
    max-height: 2000px; /* Ensure content is visible and takes full height */
}

/* Specificity adjustments for some Tailwind defaults if they interfere */
button.tab-button {
    border-width: 0; /* Reset button border from user agent stylesheet */
    background-color: transparent; /* Reset button background */
}


/* Custom Checkbox/Radio Styling (Blue Tick) */
input[type="checkbox"].form-checkbox,
input[type="radio"].form-radio {
    -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    user-select: none;
    flex-shrink: 0;
    border-width: 1px;
    border-color: #d1d5db; /* gray-300 */
    background-color: #fff;
    color: #46B5B6; /* custom-teal color for checked state */
    height: 1.25rem;
    width: 1.25rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

input[type="checkbox"].form-checkbox:checked,
input[type="radio"].form-radio:checked {
    background-color: #46B5B6; /* custom-teal background when checked */
    border-color: #46B5B6; /* custom-teal border when checked */
}

input[type="checkbox"].form-checkbox:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 00-1.414 0L7 8.586 5.207 6.793a1 1 0 00-1.414 1.414l2.5 2.5a1 1 0 001.414 0l4-4a1 1 0 000-1.414z'/%3e%3c/svg%3e");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

input[type="radio"].form-radio {
    border-radius: 50%; /* Make radio buttons circular */
}

input[type="radio"].form-radio:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

input[type="checkbox"].form-checkbox:focus,
input[type="radio"].form-radio:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.5); /* A light blue shadow */
    border-color: #46B5B6; /* custom-teal */
}

/* --- FAQ Accordion Specific CSS (CRITICAL) --- */
.faq-answer-content {
    max-height: 0; /* Initially collapsed */
    overflow: hidden; /* Hide overflow content */
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out; /* Smooth transition */
    padding-top: 0;    /* No padding when collapsed */
    padding-bottom: 0; /* No padding when collapsed */
    /* Ensure no margin is interfering when collapsed */
    margin-top: 0;
    margin-bottom: 0;
}

.faq-answer-content.active { /* This class is toggled by JS */
    max-height: 1000px; /* Large enough value to show full content when open */
    padding-top: 1rem;   /* Padding when open */
    padding-bottom: 1rem; /* Padding when open */
    /* You can adjust these padding values (e.g., 0.5rem, 1.5rem) */
}

/* Ensure the icon rotates */
.faq-icon {
    transition: transform 0.3s ease-in-out;
}

.faq-icon.rotate-180 {
    transform: rotate(180deg);
}