/* =========================================================
   Custom Tailwind-like Utilities for Best Choices Travel
   These classes replace the tw-* prefix used in the template
   ========================================================= */

/* =============== Background Colors =============== */
.tw-bg-main-600 { background-color: var(--main-600) !important; }
.tw-bg-main-700 { background-color: var(--main-700) !important; }
.tw-bg-main-two-600 { background-color: var(--main-two-600) !important; }
.tw-bg-neutral-50 { background-color: var(--neutral-50) !important; }
.tw-bg-neutral-100 { background-color: var(--neutral-100) !important; }
.tw-bg-neutral-900 { background-color: var(--neutral-900) !important; }
.tw-bg-white { background-color: #fff !important; }

.bg-neutral-50 { background-color: var(--neutral-50) !important; }
.bg-light { background-color: var(--neutral-100) !important; }

/* =============== Text Colors =============== */
.tw-text-main-600 { color: var(--main-600) !important; }
.tw-text-main-two-600 { color: var(--main-two-600) !important; }
.tw-text-white { color: #fff !important; }
.tw-text-neutral-600 { color: var(--neutral-600) !important; }
.tw-text-neutral-700 { color: var(--neutral-700) !important; }
.tw-text-neutral-900 { color: var(--neutral-900) !important; }
.text-main-600 { color: var(--main-600) !important; }

/* =============== Padding =============== */
.tw-py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.tw-py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.tw-py-5 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
.tw-py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.tw-py-80 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.tw-py-120 { padding-top: 7.5rem !important; padding-bottom: 7.5rem !important; }

.tw-px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.tw-px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.tw-px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
.tw-px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }

.tw-p-4 { padding: 1rem !important; }
.tw-p-5 { padding: 1.25rem !important; }
.tw-p-6 { padding: 1.5rem !important; }

/* =============== Margin =============== */
.tw-mt-4 { margin-top: 1rem !important; }
.tw-mt-5 { margin-top: 1.25rem !important; }
.tw-mt-6 { margin-top: 1.5rem !important; }

.tw-mb-1 { margin-bottom: 0.25rem !important; }
.tw-mb-2 { margin-bottom: 0.5rem !important; }
.tw-mb-3 { margin-bottom: 0.75rem !important; }
.tw-mb-4 { margin-bottom: 1rem !important; }
.tw-mb-5 { margin-bottom: 1.25rem !important; }
.tw-mb-6 { margin-bottom: 1.5rem !important; }

.tw-gap-3 { gap: 0.75rem !important; }
.tw-gap-4 { gap: 1rem !important; }

.tw-space-y-2 > * + * { margin-top: 0.5rem; }
.tw-space-y-3 > * + * { margin-top: 0.75rem; }

/* =============== Typography =============== */
.tw-text-xs { font-size: 0.75rem !important; }
.tw-text-sm { font-size: 0.875rem !important; }
.tw-text-base { font-size: 1rem !important; }
.tw-text-lg { font-size: 1.125rem !important; }
.tw-text-xl { font-size: 1.25rem !important; }
.tw-text-2xl { font-size: 1.5rem !important; }
.tw-text-3xl { font-size: 1.875rem !important; }
.tw-text-4xl { font-size: 2.25rem !important; }

.tw-font-semibold { font-weight: 600 !important; }
.tw-font-bold { font-weight: 700 !important; }
.tw-uppercase { text-transform: uppercase !important; }

/* =============== Border Radius =============== */
.tw-rounded { border-radius: 0.25rem !important; }
.tw-rounded-md { border-radius: 0.375rem !important; }
.tw-rounded-lg { border-radius: 0.5rem !important; }
.tw-rounded-xl { border-radius: 0.75rem !important; }
.tw-rounded-2xl { border-radius: 1rem !important; }
.tw-rounded-3xl { border-radius: 1.5rem !important; }
.tw-rounded-4xl { border-radius: 2rem !important; }
.tw-rounded-full { border-radius: 9999px !important; }

/* =============== Shadows =============== */
.tw-shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important; }
.tw-shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !important; }
.tw-shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important; }

/* =============== Width =============== */
.tw-w-100 { width: 100% !important; }
.tw-w-full { width: 100% !important; }

/* =============== Display & Flex =============== */
.tw-flex { display: flex !important; }
.tw-inline-flex { display: inline-flex !important; }
.tw-items-center { align-items: center !important; }
.tw-justify-center { justify-content: center !important; }
.tw-justify-between { justify-content: space-between !important; }
.tw-flex-col { flex-direction: column !important; }
.tw-flex-wrap { flex-wrap: wrap !important; }

/* =============== Buttons Enhancement =============== */
.primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    text-align: center;
}

.primary-btn.tw-rounded-4xl {
    border-radius: 2rem;
}

.primary-btn.tw-bg-main-two-600 {
    background-color: var(--main-two-600);
    color: var(--main-900);
}

.primary-btn.tw-bg-neutral-900 {
    background-color: var(--neutral-900);
    color: #fff;
}

.primary-btn.tw-bg-neutral-900:hover {
    background-color: var(--main-600);
}

/* =============== Tour Page Sections =============== */
.tour-hero,
.tour-details,
.related-tours {
    position: relative;
}

.tour-hero .swiper-slide img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 1.5rem;
}

/* =============== Package Cards =============== */
.package-card-three {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 1.5rem;
    overflow: hidden;
}

.package-card-three:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.package-card-three img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.package-card-three a {
    text-decoration: none;
    color: inherit;
}

.package-card-three a:hover {
    color: var(--main-600);
}

/* =============== FAQ Section =============== */
.faq-section .accordion-button {
    font-weight: 600;
    font-size: 1rem;
}

.faq-section .accordion-button:not(.collapsed) {
    background-color: var(--neutral-50);
    color: var(--main-600);
}

/* =============== Preloader Fix =============== */
.preloader {
    display: none !important;
}

/* =============== Hero Slider Fix =============== */
.hero-slider .swiper-slide {
    display: flex;
    align-items: center;
}

.hero-slider img {
    max-height: 600px;
    width: 100%;
    object-fit: cover;
}

/* =============== Responsive Fixes =============== */
@media (max-width: 991px) {
    .tw-py-80 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
    .tw-py-120 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
    
    .tour-hero .swiper-slide img {
        height: 300px;
    }
}

@media (max-width: 767px) {
    .tw-text-4xl { font-size: 1.75rem !important; }
    .tw-text-3xl { font-size: 1.5rem !important; }
    
    .tour-hero .swiper-slide img {
        height: 250px;
    }
    
    .package-card-three img {
        height: 180px;
    }
}