/* ===================================================================
   MAMAIA NORD - UNIFIED DESIGN OVERRIDE
   Fixes all blue colors, inconsistent styling, and unifies design
   PROTECTS WordPress admin elements from being affected
   =================================================================== */

/* ===================================================================
   UNIFIED CONTAINER SYSTEM - OVERRIDE ALL CONFLICTS
   =================================================================== */

/* Force consistent container widths across ALL sections */
.container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

@media (min-width: 768px) {
    .container {
        padding: 0 40px !important;
    }
}

/* ===================================================================
   WOOINSTANT CHECKOUT CONTAINER FIX
   Ensures WooInstant (Instantio Pro) checkout has proper container
   =================================================================== */

/* Main checkout page container fix */
body.woocommerce-checkout .ins-checkout,
body.woocommerce-checkout form.checkout.ins-checkout {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

@media (min-width: 768px) {
    body.woocommerce-checkout .ins-checkout,
    body.woocommerce-checkout form.checkout.ins-checkout {
        padding: 0 40px !important;
    }
}

/* Ensure WooInstant content sections also respect containers */
.ins-cart-inner,
.ins-shipping-billing,
body.woocommerce-checkout #site-content,
body.woocommerce-checkout .tft-site-content {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

@media (min-width: 768px) {
    .ins-cart-inner,
    .ins-shipping-billing,
    body.woocommerce-checkout #site-content,
    body.woocommerce-checkout .tft-site-content {
        padding: 0 40px !important;
    }
}

/* ===================================================================
   UNIVERSAL CONTENT CONTAINER SAFETY RULE
   Ensures any content that might bypass theme containers gets proper layout
   =================================================================== */

/* Safety rule for main content areas */
#site-content:not(.no-container),
.tft-site-content:not(.no-container),
main.site-main:not(.no-container) {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

@media (min-width: 768px) {
    #site-content:not(.no-container),
    .tft-site-content:not(.no-container),
    main.site-main:not(.no-container) {
        padding: 0 40px !important;
    }
}

/* Specific overrides for different contexts */
.site-footer .container,
.footer .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

@media (min-width: 768px) {
    .site-footer .container,
    .footer .container {
        padding: 0 40px !important;
    }
}

/* Header container - NO PADDING to match main content width */
.header-main .container,
.site-header .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Fix header actions positioning */
.header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.wishlist-link,
.cart-link {
    position: relative !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--gray-600) !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

/* Ensure mobile buttons are hidden on mobile */
@media (max-width: 768px) {
    .wishlist-link.hidden-mobile,
    .cart-link.hidden-mobile {
        display: none !important;
    }
}

/* Date picker/mobile calendar usability fixes (Flatpickr/TF wrappers) */
@media (max-width: 768px) {
    /* Increase tap targets and font sizes for TF date inputs */
    .single-tf_hotel .tf-booking-form input[type="text"],
    .single-tf_hotel .tf-booking-form input[type="date"],
    .single-tf_hotel .tf-booking-form .tf-check-in-out-date,
    .tf-check-in-out-date,
    input[name="check-in-out-date"] {
        font-size: 16px !important;
        min-height: 44px !important;
    }

    /* SPECIFIC FIX: remove vertical padding from sidebar date input */
    .single-tf_hotel .tf-hotel-side-booking #check-in-out-date {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        height: 44px !important;
        box-sizing: border-box !important;
    }

    /* Flatpickr calendar panel */
    .flatpickr-calendar,
    .flatpickr-days,
    .flatpickr-day,
    .flatpickr-months .flatpickr-month,
    .flatpickr-weekdays {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }
    
    /* Fix calendar date selection circle centering */
    .flatpickr-day {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        line-height: 1 !important;
    }
    
    .flatpickr-day.selected,
    .flatpickr-day.today.selected {
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* Flatpickr calendar improvements for all screen sizes */
.flatpickr-day {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 1 !important;
    text-align: center !important;
}

.flatpickr-day.selected,
.flatpickr-day.today.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.inRange {
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.flatpickr-day.today {
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Mobile guest counter styles - keep as they were (perfect) */
@media (max-width: 768px) {
    .tf_acrselection {
        margin-bottom: 1rem !important;
    }

    .tf_acrselection .acr-label {
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        color: var(--gray-dark) !important;
        margin-bottom: 0.5rem !important;
        display: block !important;
        text-align: left !important; /* Keep left alignment on mobile */
    }

    .tf_acrselection .acr-select {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1rem !important;
        width: 100% !important;
        max-width: none !important;
    }

    .tf_acrselection .acr-select .acr-dec,
    .tf_acrselection .acr-select .acr-inc {
        width: 2.5rem !important;
        height: 2.5rem !important;
        min-width: 2.5rem !important;
        min-height: 2.5rem !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--turquoise-light) !important;
        border: none !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        flex-shrink: 0 !important;
    }

    .tf_acrselection .acr-select .acr-dec svg,
    .tf_acrselection .acr-select .acr-inc svg {
        width: 1rem !important;
        height: 1rem !important;
    }

    .tf_acrselection .acr-select .acr-dec svg rect,
    .tf_acrselection .acr-select .acr-dec svg path,
    .tf_acrselection .acr-select .acr-inc svg rect,
    .tf_acrselection .acr-select .acr-inc svg path {
        fill: white !important;
    }
    
    .tf_acrselection .acr-select .acr-dec,
    .tf_acrselection .acr-select .acr-inc {
        color: white !important; /* Make + and - symbols white on mobile too */
    }

    .tf_acrselection .acr-select .acr-dec:hover,
    .tf_acrselection .acr-select .acr-inc:hover {
        background: var(--turquoise-dark) !important;
        transform: scale(1.05) !important;
    }

    .tf_acrselection .acr-select input[type=tel],
    .tf_acrselection .acr-select input[type=number] {
        width: 3rem !important;
        min-width: 3rem !important;
        height: 2.5rem !important;
        border-radius: 0.5rem !important;
        background: white !important;
        color: var(--gray-dark) !important;
        border: 2px solid #E0E6ED !important;
        font-weight: 600 !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 1rem !important;
        line-height: 1 !important;
        flex-shrink: 0 !important;
    }

    .tf_acrselection .acr-select input[type=tel]:focus,
    .tf_acrselection .acr-select input[type=number]:focus {
        border-color: var(--turquoise-light) !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(55, 206, 241, 0.1) !important;
    }
}

/* Remove grey container constraints and expand to full sidebar width */
.tf-hotel-side-booking {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.tf-hotel-side-booking .tf_booking-widget {
    background: white !important;
    padding: 1.5rem !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #E0E6ED !important;
    width: 100% !important;
}

/* DESKTOP FIX - Now that we know selectors work */
@media (min-width: 769px) {
    /* Force vertical layout like mobile - simplified approach */
    .tf_acrselection {
        background: transparent !important;
        display: block !important;
        justify-content: initial !important;
        align-items: initial !important;
        margin-bottom: 1rem !important;
        flex-direction: column !important;
    }
    
    .tf_acrselection .acr-label {
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        color: var(--gray-dark) !important;
        margin-bottom: 0.5rem !important;
        display: block !important;
        text-align: left !important;
        width: 100% !important;
        margin-right: 0 !important;
        white-space: nowrap !important; /* Prevent text wrapping like "Adul-ți" */
        overflow: visible !important;
        min-width: fit-content !important;
    }
    
    .tf_acrselection .acr-select {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    
    .tf_acrselection .acr-select .acr-dec,
    .tf_acrselection .acr-select .acr-inc {
        width: 2.5rem !important;
        height: 2.5rem !important;
        min-width: 2.5rem !important;
        min-height: 2.5rem !important;
        border-radius: 50% !important;
        background: var(--turquoise-light) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: none !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        color: white !important;
    }
    
    .tf_acrselection .acr-select input[type=number],
    .tf_acrselection .acr-select input[type=tel] {
        width: 3rem !important;
        min-width: 3rem !important;
        height: 2.5rem !important;
        border-radius: 0.5rem !important;
        background: white !important;
        color: var(--gray-dark) !important;
        border: 2px solid #E0E6ED !important;
        font-weight: 600 !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 1rem !important;
        line-height: 1 !important;
        flex-shrink: 0 !important;
        box-shadow: none !important;
    }
    
    /* Target the REAL HTML structure found with curl */
    .tf_acrselection .tf-field.tf-flex {
        display: block !important; /* Override tf-flex that causes horizontal layout */
        flex-direction: column !important;
        align-items: initial !important;
        justify-content: initial !important;
    }
    
    .tf_acrselection .tf-field .acr-label.tf-flex {
        display: flex !important; /* Keep flex for icon + text */
        align-items: center !important;
        gap: 0.5rem !important; /* Space between icon and "Adulți" */
        margin-bottom: 0.5rem !important;
        white-space: nowrap !important; /* Prevent text wrapping */
        justify-content: flex-start !important;
        width: 100% !important;
    }
}

/* Fix GTranslate Share button translation issue - JavaScript approach needed */
/* CSS cannot target text content directly, so we'll add a JavaScript solution */

.wishlist-count,
.cart-count {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    min-width: 16px !important;
    height: 16px !important;
    font-size: 0.65rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    font-weight: 600 !important;
}

/* 
 * PROTECTION for backend only.
 * The 'all: revert' rule was breaking the front-end admin bar.
 * It is now scoped only to the backend admin area (.wp-admin).
 */
.wp-admin,
.wp-admin * {
    all: revert !important;
}




@media screen and (max-width: 782px) {
    body.admin-bar {
        padding-top: 46px !important;
    }
}

/* CRITICAL: Remove ALL blue colors and replace with Mamaia Nord colors */
:root {
    /* Force override all blue variables */
    --blue-50: #F0F9FF !important;
    --blue-100: #E0F2FE !important;
    --blue-200: #37CEF1 !important;
    --blue-300: #37CEF1 !important;
    --blue-400: #37CEF1 !important;
    --blue-500: #00B3E2 !important;
    --blue-600: #00B3E2 !important;
    --blue-700: #00B3E2 !important;
    --blue-800: #00B3E2 !important;
    --blue-900: #00B3E2 !important;
    
    /* Unified Mamaia Nord Colors */
    --mamaia-turquoise: #37CEF1;
    --mamaia-turquoise-dark: #00B3E2;
    --mamaia-orange: #FF5500;
    --mamaia-gold: #FFC500;
    --mamaia-white: #FFFFFF;
    --mamaia-gray-100: #F3F4F6;
    --mamaia-gray-200: #E5E7EB;
    --mamaia-gray-600: #4B5563;
    --mamaia-gray-700: #374151;
    --mamaia-gray-900: #111827;
    
    /* Unified Border Radius */
    --mamaia-radius: 12px;
    
    /* Unified Fonts */
    --mamaia-font-heading: 'Josefin Sans', sans-serif;
    --mamaia-font-body: 'Poppins', sans-serif;
}

/* ===================================================================
   GLOBAL OVERRIDES - Remove ALL blue colors
   =================================================================== */

/* Override any blue backgrounds */
*[style*="background-color: #0073aa"],
*[style*="background-color: #005177"],
*[style*="background-color: #0085ba"],
*[style*="background-color: #2271b1"],
*[style*="background: #0073aa"],
*[style*="background: #005177"],
*[style*="background: #0085ba"],
*[style*="background: #2271b1"],
.bg-blue-500,
.bg-blue-600,
.bg-blue-700,
.bg-blue-800,
.bg-blue-900 {
    background: var(--mamaia-turquoise-dark) !important;
    background-color: var(--mamaia-turquoise-dark) !important;
}

/* Override any blue text colors */
*[style*="color: #0073aa"],
*[style*="color: #005177"],
*[style*="color: #0085ba"],
*[style*="color: #2271b1"],
.text-blue-500,
.text-blue-600,
.text-blue-700,
.text-blue-800,
.text-blue-900 {
    color: var(--mamaia-turquoise-dark) !important;
}

/* ===================================================================
   UNIFIED FONT SYSTEM
   =================================================================== */

/* Apply consistent fonts ONLY where needed */
.mamaia-booking-style-wrapper,
.mamaia-booking-style-wrapper *,
.tf-item-card,
.tf-item-card * {
    font-family: var(--mamaia-font-body) !important;
}

/* Apply heading fonts ONLY where needed */
.mamaia-booking-style-wrapper h1,
.mamaia-booking-style-wrapper h2,
.mamaia-booking-style-wrapper h3,
.tf-title h2,
.tf-item-card h2 {
    font-family: var(--mamaia-font-heading) !important;
}

/* ===================================================================
   UNIFIED CARD SYSTEM
   =================================================================== */

/* All cards should look identical */
.hotel-card,
.tf-item-card,
.card,
.mamaia-card,
.booking-hotel-card {
    background: var(--mamaia-white) !important;
    background-color: var(--mamaia-white) !important;
    border-radius: var(--mamaia-radius) !important;
    border: 1px solid var(--mamaia-gray-200) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

.hotel-card:hover,
.tf-item-card:hover,
.card:hover,
.mamaia-card:hover,
.booking-hotel-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
}

/* ===================================================================
   UNIFIED BUTTON SYSTEM
   =================================================================== */

/* Primary buttons - Orange gradient */
.btn-primary,
.tf_btn,
.tf-btn,
button[type="submit"],
.mamaia-btn-primary,
.btn-book,
.view-hotel-btn,
.mamaia-search-btn,
.booking-submit-horizontal {
    background: linear-gradient(135deg, var(--mamaia-orange), var(--mamaia-gold)) !important;
    color: var(--mamaia-white) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 20px !important;
    font-family: var(--mamaia-font-body) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

.btn-primary:hover,
.tf_btn:hover,
.tf-btn:hover,
button[type="submit"]:hover,
.mamaia-btn-primary:hover,
.btn-book:hover,
.view-hotel-btn:hover,
.mamaia-search-btn:hover,
.booking-submit-horizontal:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 16px rgba(255, 85, 0, 0.3) !important;
    background: linear-gradient(135deg, var(--mamaia-orange), var(--mamaia-gold)) !important;
    color: var(--mamaia-white) !important;
    text-decoration: none !important;
}



/* Secondary buttons - Turquoise */
.btn-secondary,
.btn-outline,
.mamaia-btn-secondary {
    background: var(--mamaia-turquoise-dark) !important;
    color: var(--mamaia-white) !important;
    border: 2px solid var(--mamaia-turquoise-dark) !important;
    border-radius: 8px !important;
    padding: 12px 20px !important;
    font-family: var(--mamaia-font-body) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.btn-secondary:hover,
.btn-outline:hover,
.mamaia-btn-secondary:hover {
    background: var(--mamaia-turquoise) !important;
    border-color: var(--mamaia-turquoise) !important;
    color: var(--mamaia-white) !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
}

/* ===================================================================
   UNIFIED PRICING SYSTEM
   =================================================================== */

/* All prices should be orange */
.price-amount,
.tf-archive-price-text,
.hotel-price,
.price,
.tf-pricing,
.mamaia-price,
.current-price,
.amount {
    color: var(--mamaia-orange) !important;
    font-weight: 700 !important;
    font-family: var(--mamaia-font-body) !important;
}

/* ===================================================================
   UNIFIED LINK SYSTEM
   =================================================================== */

/* All links should be turquoise */
a:not(.btn):not(.tf_btn):not(.tf-btn):not(.mamaia-btn),
.hotel-title a,
.tf-title h2 a,
h2 a,
h3 a {
    color: var(--mamaia-turquoise-dark) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

a:not(.btn):not(.tf_btn):not(.tf-btn):not(.mamaia-btn):hover,
.hotel-title a:hover,
.tf-title h2 a:hover,
h2 a:hover,
h3 a:hover {
    color: var(--mamaia-turquoise) !important;
    text-decoration: none !important;
}

/* ===================================================================
   UNIFIED TAG SYSTEM
   =================================================================== */

/* All promotional tags should look the same */
.hotel-badge,
.tf-feature,
.tf-multiple-tag-item,
.promo-tag,
.featured-badge,
.mamaia-feature-tag {
    background: linear-gradient(135deg, var(--mamaia-orange), var(--mamaia-gold)) !important;
    color: var(--mamaia-white) !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: var(--mamaia-font-body) !important;
    box-shadow: 0 2px 4px rgba(255, 85, 0, 0.2) !important;
    display: inline-block !important;
    margin-bottom: 4px !important;
}

/* Secondary tags (like location, features) */
.feature-tag,
.feature,
.hotel-features .feature,
.tf-archive-features li {
    background: var(--mamaia-gray-100) !important;
    color: var(--mamaia-gray-700) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-family: var(--mamaia-font-body) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-right: 8px !important;
}

.feature-tag i,
.feature i,
.hotel-features .feature i,
.tf-archive-features li i {
    color: var(--mamaia-turquoise) !important;
}

/* ===================================================================
   UNIFIED ICON SYSTEM
   =================================================================== */

/* Apply icon colors ONLY where needed */
.mamaia-booking-style-wrapper i,
.tf-item-card i,
.tf-title-meta i {
    color: var(--mamaia-turquoise-dark) !important;
}

/* Location icons */
.hotel-location i,
.tf-title-meta i,
.location i {
    color: var(--mamaia-turquoise-dark) !important;
}

/* ===================================================================
   UNIFIED RATING SYSTEM
   =================================================================== */

/* All star ratings */
.stars,
.rating-stars,
.hotel-rating .stars,
.tf-rating .stars {
    color: var(--mamaia-gold) !important;
}

.rating-score,
.score,
.rating-value {
    background: var(--mamaia-turquoise-dark) !important;
    color: var(--mamaia-white) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: var(--mamaia-font-body) !important;
}

/* ===================================================================
   TOURFIC SPECIFIC OVERRIDES
   =================================================================== */

/* Archive page layout - sidebar on left */
.mamaia-booking-style-wrapper .tf-archive-inner {
    display: flex !important;
    flex-direction: row-reverse !important;
    gap: 24px !important;
}

.mamaia-booking-style-wrapper .tf-archive-left {
    order: 2 !important;
    flex: 1 !important;
}

.mamaia-booking-style-wrapper .tf-archive-right {
    order: 1 !important;
    width: 300px !important;
    flex-shrink: 0 !important;
}

/* Tourfic cards */
.mamaia-booking-style-wrapper .tf-item-card {
    background: var(--mamaia-white) !important;
    background-color: var(--mamaia-white) !important;
    border-radius: var(--mamaia-radius) !important;
    border: 1px solid var(--mamaia-gray-200) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    margin-bottom: 16px !important;
    display: flex !important;
    flex-direction: row !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

.mamaia-booking-style-wrapper .tf-item-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
}

.mamaia-booking-style-wrapper .tf-item-card .tf-item-details {
    background: var(--mamaia-white) !important;
    background-color: var(--mamaia-white) !important;
    padding: 20px !important;
    flex: 1 !important;
}

/* ===================================================================
   RESTAURANT BOOKING BUTTONS MOBILE FIX
   =================================================================== */

/* Fix spacing between restaurant booking buttons on mobile */
.tf-restaurant-booking-form .tf-booking-submit {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.tf-restaurant-booking-form .tf-booking-submit .tf-btn {
    margin: 0 !important;
    flex: 1;
    min-width: 140px;
    padding: 12px 20px !important;
    font-size: 0.95rem !important;
}

@media (max-width: 768px) {
    .tf-restaurant-booking-form .tf-booking-submit {
        flex-direction: column;
        gap: 16px;
    }
    
    .tf-restaurant-booking-form .tf-booking-submit .tf-btn {
        width: 100%;
        flex: none;
    }
}

/* ===================================================================
   HOTEL SINGLE PAGE SHARE/WISHLIST BUTTONS FIX
   =================================================================== */

/* Fix deformed share and wishlist buttons on hotel single pages */
.tf-wish-and-share {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* Target with maximum specificity to override Tourfic styles */
.tf-single-template__one .tf-head-social .tf-icon.tf-wishlist-box,
.tf-single-template__one .tf-head-social div.tf-icon.tf-wishlist-box,
.tf-single-template__one .tf-head-social a.share-toggle.tf-icon.tf-social-box,
.tf-single-template__two .tf-wish-and-share .tf-icon.tf-wishlist-box,
.tf-single-template__two .tf-wish-and-share a.tf-share-toggle.tf-icon.tf-social-box,
div.tf-icon.tf-wishlist-box,
a.tf-icon.tf-wishlist-box,
a.share-toggle.tf-icon.tf-social-box,
a.tf-share-toggle.tf-icon.tf-social-box {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--mamaia-turquoise) !important;
    border: 1px solid var(--mamaia-turquoise) !important;
    color: white !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    line-height: 40px !important;
    cursor: pointer !important;
    min-width: 40px !important;
    min-height: 40px !important;
    z-index: 10 !important;
    position: relative !important;
}

/* Share button hover - turquoise darker */
a.share-toggle.tf-icon.tf-social-box:hover,
a.tf-share-toggle.tf-icon.tf-social-box:hover {
    background: var(--mamaia-turquoise-dark) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(55, 206, 241, 0.3) !important;
}

/* Wishlist button - orange */
div.tf-icon.tf-wishlist-box,
a.tf-icon.tf-wishlist-box {
    background: var(--mamaia-orange) !important;
    border-color: var(--mamaia-orange) !important;
}

/* Wishlist hover - orange darker */
div.tf-icon.tf-wishlist-box:hover,
a.tf-icon.tf-wishlist-box:hover,
a.tf-icon.tf-wishlist-box.actives {
    background: #e54a00 !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 85, 0, 0.3) !important;
}

/* Fix icon alignment inside buttons */
div.tf-icon.tf-wishlist-box i,
a.tf-icon.tf-wishlist-box i,
a.share-toggle.tf-icon.tf-social-box i,
a.tf-share-toggle.tf-icon.tf-social-box i {
    font-size: 16px !important;
    line-height: 1 !important;
    margin: 0 !important;
    color: inherit !important;
}

/* Remove inner icon gray background and enforce size to match container */
.tf-single-template__one .tf-head-social .tf-icon i,
.tf-single-template__two .tf-wish-and-share .tf-icon i,
div.tf-icon.tf-wishlist-box i,
a.tf-icon.tf-wishlist-box i,
a.share-toggle.tf-icon.tf-social-box i,
a.tf-share-toggle.tf-icon.tf-social-box i {
    width: 40px !important;
    height: 40px !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
}

/* Safety: ensure Font Awesome pseudo-element has no background */
.tf-single-template__one .tf-head-social .tf-icon i::before,
.tf-single-template__two .tf-wish-and-share .tf-icon i::before,
div.tf-icon.tf-wishlist-box i::before,
a.tf-icon.tf-wishlist-box i::before,
a.share-toggle.tf-icon.tf-social-box i::before,
a.tf-share-toggle.tf-icon.tf-social-box i::before {
    background: transparent !important;
}

/* Mobile responsive fixes */
@media (max-width: 768px) {
    .tf-wish-and-share {
        justify-content: center !important;
        margin-top: 16px !important;
        padding: 0 16px !important;
    }
}

/* ===================================================================
   FORM ELEMENTS
   =================================================================== */

/* Unified form styling - ONLY for booking areas */
.mamaia-booking-style-wrapper input,
.mamaia-booking-style-wrapper select,
.mamaia-booking-style-wrapper textarea {
    background: var(--mamaia-white) !important;
    border: 2px solid var(--mamaia-gray-200) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-family: var(--mamaia-font-body) !important;
    font-size: 14px !important;
    color: var(--mamaia-gray-900) !important;
    transition: all 0.2s ease !important;
}

/* Fix homepage search form text visibility */
.hero-section input,
.booking-form input,
.booking-form select,
.booking-form-card input,
.booking-form-card select {
    color: var(--mamaia-gray-900) !important;
    background: var(--mamaia-white) !important;
}

.hero-section input::placeholder,
.booking-form input::placeholder,
.booking-form-card input::placeholder {
    color: var(--mamaia-gray-600) !important;
    opacity: 1 !important;
}

.mamaia-booking-style-wrapper input:focus,
.mamaia-booking-style-wrapper select:focus,
.mamaia-booking-style-wrapper textarea:focus {
    outline: none !important;
    border-color: var(--mamaia-turquoise) !important;
    box-shadow: 0 0 0 3px rgba(55, 206, 241, 0.1) !important;
}

/* ===================================================================
   HOMEPAGE SPECIFIC FIXES
   =================================================================== */

/* Fix homepage card styling to match archive */
.hotel-card {
    background: var(--mamaia-white) !important;
    border-radius: var(--mamaia-radius) !important;
    border: 1px solid var(--mamaia-gray-200) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.hotel-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
}

/* Fix homepage notes/badges */
.hotel-badge {
    background: linear-gradient(135deg, var(--mamaia-orange), var(--mamaia-gold)) !important;
    color: var(--mamaia-white) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* ===================================================================
   RESPONSIVE FIXES
   =================================================================== */

@media (max-width: 768px) {
    .mamaia-booking-style-wrapper .tf-archive-inner {
        flex-direction: column !important;
    }
    
    .mamaia-booking-style-wrapper .tf-archive-left,
    .mamaia-booking-style-wrapper .tf-archive-right {
        order: unset !important;
        width: 100% !important;
    }
    
    .mamaia-booking-style-wrapper .tf-item-card {
        flex-direction: column !important;
    }
    
    .mamaia-booking-style-wrapper .tf-item-card .tf-item-featured {
        width: 100% !important;
        height: 200px !important;
    }
}

/* ===================================================================
   SPECIFIC BLUE COLOR FIXES
   =================================================================== */

/* Fix specific blue elements I can see in the screenshot */
.mamaia-booking-style-wrapper .tf-list-grid a[style*="background"] {
    background: var(--mamaia-turquoise-dark) !important;
}

.mamaia-booking-style-wrapper .tf-sorting-selection-warper select {
    border-color: var(--mamaia-gray-200) !important;
}

/* Fix price range slider */
.mamaia-booking-style-wrapper input[type="range"] {
    accent-color: var(--mamaia-turquoise-dark) !important;
}

/* Fix any remaining blue buttons */
.mamaia-booking-style-wrapper button[style*="background-color"],
.mamaia-booking-style-wrapper .tf-btn[style*="background-color"] {
    background-color: var(--mamaia-turquoise-dark) !important;
}

/* Fix hotel title links specifically */
.mamaia-booking-style-wrapper .tf-item-card .tf-title h2 a[style*="color"] {
    color: var(--mamaia-turquoise-dark) !important;
}

/* ===================================================================
   FINAL OVERRIDES - Highest Priority
   =================================================================== */

/* Remove any remaining blue colors with highest specificity */
body .mamaia-booking-style-wrapper .tf-btn-primary,
body .mamaia-booking-style-wrapper .tf-btn-success,
body .mamaia-booking-style-wrapper .tf-list-grid a.active,
body .mamaia-booking-style-wrapper .tf-pagination-bar .current,
body .mamaia-booking-style-wrapper button[style*="background"],
body .tf-btn[style*="background"],
body .btn-primary[style*="background"] {
    background: var(--mamaia-turquoise-dark) !important;
    background-color: var(--mamaia-turquoise-dark) !important;
    border-color: var(--mamaia-turquoise-dark) !important;
    color: var(--mamaia-white) !important;
}

/* Force orange buttons where needed */
body .mamaia-booking-style-wrapper .tf_btn,
body .mamaia-booking-style-wrapper .tf-booking-bttns .tf_btn,
body .mamaia-search-btn,
body .btn-book {
    background: linear-gradient(135deg, var(--mamaia-orange), var(--mamaia-gold)) !important;
    color: var(--mamaia-white) !important;
}

/* Fix any remaining price colors */
body .price-amount,
body .tf-archive-price-text,
body .amount,
body .current-price {
    color: var(--mamaia-orange) !important;
}

/* Fix any remaining link colors */
body .hotel-title a,
body .tf-title h2 a {
    color: var(--mamaia-turquoise-dark) !important;
}

body .hotel-title a:hover,
body .tf-title h2 a:hover {
    color: var(--mamaia-turquoise) !important;
} 

/* ===================================================================
   REVIEW CONTENT SAFETY - Prevent long links/text from breaking layout
   Applies to Apartments (and similarly to Hotels/Tours for safety)
   =================================================================== */

/* Allow flex children to shrink properly */
.single-tf_apartment .tf-reviews-wrapper .tf-reviews-item .tf-reviews-text,
.single-tf_hotel .tf-reviews-wrapper .tf-reviews-item .tf-reviews-text,
.single-tf_tours .tf-reviews-wrapper .tf-reviews-item .tf-reviews-text {
    min-width: 0 !important;
}

/* Force long words/URLs to wrap inside review text */
.single-tf_apartment .tf-reviews-wrapper .tf-reviews-text p,
.single-tf_apartment .tf-reviews-wrapper .tf-reviews-text a,
.single-tf_apartment .tf-reviews-wrapper .tf-reviews-text span,
.single-tf_hotel .tf-reviews-wrapper .tf-reviews-text p,
.single-tf_hotel .tf-reviews-wrapper .tf-reviews-text a,
.single-tf_hotel .tf-reviews-wrapper .tf-reviews-text span,
.single-tf_tours .tf-reviews-wrapper .tf-reviews-text p,
.single-tf_tours .tf-reviews-wrapper .tf-reviews-text a,
.single-tf_tours .tf-reviews-wrapper .tf-reviews-text span,
/* Generic comment content safety as a fallback */
.single-tf_apartment .comment-content,
.single-tf_apartment .comment-content a {
    overflow-wrap: anywhere !important; /* modern, breaks anywhere if needed */
    word-break: break-word !important;  /* legacy support */
    white-space: normal !important;
    max-width: 100% !important;
}

/* Avoid massive inline links overflowing horizontally */
.single-tf_apartment .tf-reviews-wrapper .tf-reviews-text a,
.single-tf_hotel .tf-reviews-wrapper .tf-reviews-text a,
.single-tf_tours .tf-reviews-wrapper .tf-reviews-text a {
    display: inline !important;
    text-decoration: underline !important;
}

/* ===================================================================
   HOTEL ROOMS TABLE – Mobile responsive reflow (fix horizontal scroll)
   =================================================================== */
@media (max-width: 768px) {
    /* Hide table header on mobile and reflow rows as blocks */
    .single-tf_hotel .tf-rooms-sections .tf-availability-table thead {
        display: none !important;
    }

    .single-tf_hotel .tf-rooms-sections .tf-availability-table,
    .single-tf_hotel .tf-rooms-sections .tf-availability-table tbody,
    .single-tf_hotel .tf-rooms-sections .tf-availability-table tr,
    .single-tf_hotel .tf-rooms-sections .tf-availability-table td {
        display: block !important;
        width: 100% !important;
    }

    .single-tf_hotel .tf-rooms-sections .tf-availability-table tr {
        border: 1px solid var(--mamaia-gray-200) !important;
        border-radius: 8px !important;
        margin-bottom: 16px !important;
        overflow: hidden !important;
    }

    /* Reset problematic width/display coming from plugin */
    .single-tf_hotel .tf-rooms-sections .tf-availability-table td.description {
        width: 100% !important;
        display: block !important;
        padding: 16px !important;
    }

    .single-tf_hotel .tf-rooms-sections .tf-availability-table td.options,
    .single-tf_hotel .tf-rooms-sections .tf-availability-table td.pax,
    .single-tf_hotel .tf-rooms-sections .tf-availability-table td.reserve {
        padding: 16px !important;
        border-top: 1px solid var(--mamaia-gray-200) !important;
    }

    /* Make room preview image fluid */
    .single-tf_hotel .tf-room-preview-img img {
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
    }

    /* Tidy facilities list and pax row on small screens */
    .single-tf_hotel .tf-rooms-sections .tf-availability-table td .tf-features-infos ul {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .single-tf_hotel .tf-rooms-sections .tf-availability-table td.pax {
        display: flex !important;
        gap: 12px !important;
        align-items: center !important;
    }

    /* Improve native select dropdown readability */
    .single-tf_hotel .room-selection-wrap select,
    .single-tf_hotel .room-selection-wrap .select2-container .select2-selection--single {
        font-size: 16px !important; /* prevents iOS zoom and tiny options */
        line-height: 1.4 !important;
        min-height: 44px !important;
        padding: 10px 12px !important;
    }

    /* Make the dropdown list items larger as well */
    .single-tf_hotel .select2-container .select2-results__option {
        font-size: 16px !important;
        line-height: 1.6 !important;
        padding: 10px 12px !important;
    }
}

/* =================================================
   RESTAURANT BOOKINGS TABLE - RESPONSIVE DESIGN
   ================================================= */

/* Base table styles */
.tf-bookings-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    background: white !important;
}

.tf-bookings-table {
    width: 100% !important;
    min-width: 800px !important; /* Minimum width to prevent cramping */
    border-collapse: collapse !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
}

.tf-bookings-table thead th {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    color: #1e293b !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 16px 12px !important;
    text-align: left !important;
    border-bottom: 2px solid #e2e8f0 !important;
    white-space: nowrap !important;
    font-family: 'Josefin Sans', sans-serif !important;
}

.tf-bookings-table tbody td {
    padding: 14px 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: top !important;
    color: #475569 !important;
    line-height: 1.5 !important;
}

.tf-bookings-table tbody tr:hover {
    background: #f8fafc !important;
}

.tf-bookings-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Column specific styles */
.tf-bookings-table td:first-child {
    font-weight: 600 !important;
    color: #37CEF1 !important;
    font-family: 'Josefin Sans', sans-serif !important;
}

.tf-bookings-table td:nth-child(2) strong {
    color: #1e293b !important;
    font-weight: 600 !important;
    display: block !important;
    margin-bottom: 2px !important;
    font-family: 'Josefin Sans', sans-serif !important;
}

.tf-bookings-table td:nth-child(3) {
    min-width: 200px !important;
}

.tf-bookings-table td:nth-child(3) a {
    color: #37CEF1 !important;
    text-decoration: none !important;
    font-size: 12px !important;
}

.tf-bookings-table td:nth-child(3) a:hover {
    text-decoration: underline !important;
}

.tf-bookings-table td:nth-child(4) {
    white-space: nowrap !important;
    min-width: 120px !important;
}

/* Status badges */
.tf-bookings-table .badge {
    padding: 4px 8px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-family: 'Poppins', sans-serif !important;
}

.tf-bookings-table .badge-success {
    background: #dcfce7 !important;
    color: #166534 !important;
    border: 1px solid #bbf7d0 !important;
}

.tf-bookings-table .badge-warning {
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
}

.tf-bookings-table .badge-gray {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}

/* Action buttons */
.tf-bookings-table .tf-rb-view {
    padding: 6px 12px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
}

/* Mobile responsive styles - No scroll, optimized layout */
@media (max-width: 768px) {
    .tf-bookings-table-wrap {
        margin: 0 -20px !important; /* Extend to edges on mobile */
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        overflow-x: visible !important; /* Remove horizontal scroll */
    }
    
    .tf-bookings-table {
        min-width: 100% !important; /* Full width, no scroll needed */
        font-size: 13px !important;
        table-layout: fixed !important; /* Fixed layout for better control */
    }
    
    /* Hide non-essential columns on mobile - Keep only 2 columns */
    .tf-bookings-table th:nth-child(1), /* Hide ID column */
    .tf-bookings-table td:nth-child(1),
    .tf-bookings-table th:nth-child(3), /* Hide Client details */
    .tf-bookings-table td:nth-child(3),
    .tf-bookings-table th:nth-child(4), /* Hide Date column */
    .tf-bookings-table td:nth-child(4),
    .tf-bookings-table th:nth-child(5) { /* Hide Status column header */
        display: none !important;
    }
    
    /* Only 2 columns remain: Restaurant + combined Status/Action */
    .tf-bookings-table th:nth-child(2), /* Restaurant name */
    .tf-bookings-table td:nth-child(2) {
        width: 65% !important;
        padding: 14px 12px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.4 !important;
    }
    
    .tf-bookings-table th:nth-child(6), /* Combined Status + Action */
    .tf-bookings-table td:nth-child(6) {
        width: 35% !important;
        text-align: center !important;
        padding: 14px 10px !important;
        vertical-align: middle !important;
        line-height: 1.3 !important;
    }
    
    /* Hide status column content but keep the data for moving */
    .tf-bookings-table td:nth-child(5) {
        display: none !important;
    }
    
    /* Reorganize content in remaining cells with better spacing */
    .tf-bookings-table td:nth-child(2) strong {
        display: block !important;
        margin-bottom: 6px !important;
        font-size: 13px !important;
        color: #1e293b !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
    }
    
    .tf-bookings-table thead th {
        font-size: 11px !important;
        padding: 12px 8px !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
    }
    
    .tf-bookings-table tbody td {
        vertical-align: top !important;
        line-height: 1.4 !important;
    }
}

@media (max-width: 480px) {
    .tf-bookings-table {
        font-size: 12px !important;
    }
    
    .tf-bookings-table thead th {
        padding: 10px 6px !important;
        font-size: 11px !important;
    }
    
    .tf-bookings-table tbody td {
        padding: 10px 6px !important;
    }
    
    /* Adjust column widths for very small screens - Only 2 columns */
    .tf-bookings-table th:nth-child(2),
    .tf-bookings-table td:nth-child(2) {
        width: 60% !important;
        padding: 10px 6px !important;
    }
    
    .tf-bookings-table th:nth-child(6),
    .tf-bookings-table td:nth-child(6) {
        width: 40% !important;
        padding: 10px 6px !important;
    }
    
    .tf-rb-view {
        padding: 4px 6px !important;
        font-size: 10px !important;
    }
    
    /* More compact restaurant name */
    .tf-bookings-table td:nth-child(2) strong {
        font-size: 12px !important;
        line-height: 1.2 !important;
    }
    
    /* Smaller client details */
    .tf-bookings-table td:nth-child(3) {
        font-size: 10px !important;
    }
    
    /* Smaller status badges on very small screens */
    .tf-bookings-table .badge {
        padding: 2px 6px !important;
        font-size: 9px !important;
        border-radius: 8px !important;
    }
    
    /* Ensure no text overflow */
    .tf-bookings-table td {
        white-space: normal !important;
        word-break: break-word !important;
        hyphens: auto !important;
    }
}

/* Pagination controls responsive */
@media (max-width: 768px) {
    .tf-restaurant-bookings-panel .tf-btn {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
    
    #tf-rb-page {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #475569 !important;
    }
}

         /* JavaScript will move date info to restaurant column and status to action column on mobile */
         .tf-mobile-date-info {
             display: block !important;
             font-size: 11px !important;
             color: #64748b !important;
             font-weight: normal !important;
             margin-top: 5px !important;
             line-height: 1.3 !important;
         }


.tf-mobile-client-info {
    display: block !important;
    font-size: 10px !important;
    color: #37CEF1 !important;
    font-weight: 500 !important;
    margin-top: 4px !important;
    line-height: 1.3 !important;
    font-style: italic !important;
}

.tf-mobile-status-info {
    display: block !important;
    margin-bottom: 8px !important;
    text-align: center !important;
}

.tf-mobile-status-info .badge {
    display: inline-block !important;
    padding: 4px 8px !important;
    font-size: 10px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Update header text for mobile - only 2 columns */
@media (max-width: 768px) {
    .tf-bookings-table th:nth-child(2)::after {
        content: ", Data & Client";
        font-weight: normal;
        font-size: 9px;
        color: #64748b;
    }
    
    .tf-bookings-table th:nth-child(6)::after {
        content: "Status & ";
        font-weight: normal;
        font-size: 10px;
        color: #64748b;
    }
}