/*
Theme Name: Listing Ecosystem by Atul Ingale
Theme URI: https://crminfo.in/
Author: Atul Ingale
Author URI: https://crminfo.in/
Description: A premium, mobile-first custom booking theme for Listing Ecosystem by Atul Ingale. Acts as an independent Master Theme.
Version: 1.0.0
Text Domain: listing-by-atul-ingale
*/

/* ── Variables inherited from style.css ── */
:root {
    --rating-color: var(--rating-color, #f59e0b);
    --success-color: var(--success-color, #10b981);
    
    /* Spacing System */
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 40px;
    --space-section: 56px;

    /* Card System */
    --card-radius: 16px;
    --card-shadow: 0 4px 20px rgba(0,0,0,0.04);
    --card-shadow-hover: 0 12px 30px rgba(0,0,0,0.08);
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 16px !important;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(15, 23, 42, 0.4);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(15, 23, 42, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(15, 23, 42, 0);
    }
}

/* ========================================================
   GLOBAL APP HEADER & SEARCH
   ======================================================== */


.ail-location-bar {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.ail-pin-icon {
    font-size: 20px;
    margin-right: 10px;
}

.ail-loc-text {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.ail-loc-title {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
}

.ail-loc-sub {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.ail-profile-icon {
    font-size: 28px;
    color: var(--text-primary);
}

.ail-search-input {
    background: var(--bg-color);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ail-search-input i {
    color: var(--text-secondary);
}

.ail-search-input input {
    border: none;
    background: transparent;
    width: 100%;
    font-size: 15px;
    outline: none;
    font-family: inherit;
    font-weight: 600;
    color: var(--text-primary);
}

.ail-search-bar {
    position: relative;
}

.pm-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card-bg, #ffffff);
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    margin-top: 12px;
    z-index: 9999;
    overflow: hidden;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid rgba(99,102,241,0.1);
}

.pm-ac-list {
    display: flex;
    flex-direction: column;
}

.pm-ac-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid #f8fafc;
    text-decoration: none;
    transition: all 0.2s ease;
}

.pm-ac-item:last-child {
    border-bottom: none;
}

.pm-ac-item:hover,
.pm-ac-item:active,
.pm-ac-item.active {
    background: var(--bg-color, #f8fafc);
}

.pm-ac-img-wrap {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--border-color, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pm-ac-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pm-ac-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-grow: 1;
}

.pm-ac-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.pm-ac-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
}

.pm-ac-type {
    font-weight: 700;
    color: var(--primary-color);
    background: rgba(99,102,241,0.1);
    padding: 4px 8px;
    border-radius: 8px;
    letter-spacing: 0.5px;
}

.pm-ac-loc {
    color: var(--text-secondary);
    font-weight: 500;
}

.pm-ac-empty,
.pm-ac-loading {
    padding: 24px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
}

.pm-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(99,102,241,0.2);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: pm-spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}

@keyframes pm-spin {
    to { transform: rotate(360deg); }
}


/* ========================================================
   GLOBAL APP CONTENT AREAS
   ======================================================== */
.ail-app-content {
    padding: 20px;
    padding-bottom: 20px !important;
}

.ail-section-title {
    padding: 0 16px;
    margin: 32px 0 18px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Dark Mode overrides */
[data-theme="dark"] .ail-city-info {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
}

[data-theme="dark"] .ail-trending-section .ail-noteworthy-card {
    background: var(--card-bg);
}

[data-theme="dark"] .ail-rating-overall {
    border-right-color: rgba(255, 255, 255, 0.1);
}

/* ========================================================
   TASK 3D UNIFIED HEADER SYSTEM
   Single source of truth for global header architecture.
   header.php renders ONE <header.ail-app-header>; all other
   templates reuse it via get_header().
   ======================================================== */

/* APP HEADER — Global Sticky Shell */
.ail-app-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    background: var(--card-bg, #ffffff);
    padding: 12px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

.ail-top-header,
.ail-header-shell {
    position: relative;
    width: 100%;
    background: var(--card-bg, #ffffff);
    overflow: hidden;
    z-index: 30;
}

/* HEADER TOP ROW — Logo left, Actions right */
.ail-header-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

/* LOGO WRAPPER — Compact, no min-height bloat */
.ail-app-header .ail-app-logo-wrap {
    display: flex;
    align-items: center;
    min-height: auto;
    max-height: none;
    padding: 0;
    overflow: hidden;
}

/* Standalone logo wrapper (outside header — legacy fallback) */
.site-branding,
.lbai-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    max-height: 90px;
    padding: 8px 16px;
    overflow: hidden;
}

/* LOGO IMAGE CONSTRAINTS */
.ail-app-logo-wrap img,
.site-branding img,
.lbai-logo-wrap img,
.custom-logo {
    width: auto;
    height: auto;
    max-width: 140px;
    max-height: 44px;
    object-fit: contain;
    display: block;
}

/* SINGLE LOGO CONSTRAINT */
.ail-site-logo {
    width: auto;
    height: auto;
    max-width: 140px;
    max-height: 44px;
    object-fit: contain;
    display: block;
}

/* HEADER ACTIONS — Bell, User, Hamburger */
.ail-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.ail-header-actions a,
.ail-header-actions .ail-user-icon {
    display: flex;
    align-items: center;
    color: var(--text-primary);
    text-decoration: none;
}

/* FIX APP SHELL OVERFLOW */
#page,
.site,
.site-main {
    overflow-x: hidden;
}

/* STRICT MOBILE HEADER LIMITS */
@media (max-width: 480px) {
    .ail-app-header {
        padding: 10px 16px;
    }

    .ail-app-logo-wrap img,
    .site-branding img,
    .lbai-logo-wrap img,
    .custom-logo {
        max-width: 120px;
        max-height: 38px;
    }
}

/* Swiper fallback to prevent layout flash */
@media (max-width: 768px) {
    .swiper:not(.swiper-initialized) .swiper-wrapper {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .swiper:not(.swiper-initialized) .swiper-wrapper::-webkit-scrollbar {
        display: none;
    }

    .swiper:not(.swiper-initialized) .swiper-slide {
        scroll-snap-align: start;
        flex-shrink: 0;
    }
}

/* ============================================================
   SUPPRESS LISTING ECOSYSTEM INJECTED ELEMENTS
   These are injected as siblings of #page by the Listing Ecosystem
   plugin ecosystem and conflict with our custom mobile theme.
   ============================================================ */
body>.header-container,
body>.lp-home-banner-contianer,
body>.lp-search-bar,
body>.lp-section-search-result,
body>.lp-search-section,
body>#lp-app,
body>.md-overlay,
body>.md-modal,
body>.lp-main-search-section,
body>.lp-footer,
body>.lp-sidebar,
body>.lp-listing-header,
body>.site-branding,
#lp-header,
.lp-header-wrapper,
.listingpro-header,
.lp-mobile-menu-wrapper {
    display: none !important;
}

/* Ensure #page has no unexpected top spacing from LP styles */
#page {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Prevent any global img rule from bloating header logos */
.ail-app-header img {
    max-width: 140px;
    max-height: 44px;
    width: auto;
    height: auto;
}

/* Base Universal Desktop Constraint Removed for Responsive App View */
@media (min-width: 768px) {
    #page {
        width: 100%;
        margin: 0 auto;
        min-height: auto;
        position: relative;
        background: var(--surface-color, #fff);
    }

    .ail-app-header,
    .ail-bottom-nav,
    .ail-single-bottom-bar {
        width: 100%;
        margin: 0 auto;
        left: 0;
        right: 0;
    }
}

/* Global Button Styles */
.ail-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border-radius: var(--btn-radius, 12px) !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    flex-grow: 1;
    background: var(--btn-primary-bg, var(--primary-color)) !important;
    color: var(--btn-primary-text, #ffffff) !important;
    transition: all 0.2s ease;
}

.ail-action-btn:hover {
    background: var(--btn-hover-bg, var(--secondary-color)) !important;
    color: var(--btn-hover-text, #ffffff) !important;
}

.ail-action-chat {
    background: var(--border-color, #f1f5f9);
    color: var(--primary-color, #0f172a);
    flex-grow: 0;
    width: 60px;
}

.ail-action-book {
    background: var(--btn-primary-bg, var(--primary-color)) !important;
    color: var(--btn-primary-text, #ffffff) !important;
}

/* Global Bottom Sheet Modal System */
.ail-sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999999998 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.ail-sheet-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.ail-booking-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--card-bg, #ffffff);
    border-radius: 24px 24px 0 0;
    z-index: 999999999 !important;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    max-width: 480px;
    margin: 0 auto;
    max-height: calc(100dvh - 20px) !important;
    display: flex;
    flex-direction: column;
}

.ail-booking-sheet.open {
    transform: translateY(0);
}

.ail-sheet-handle {
    width: 40px;
    height: 5px;
    background: var(--border-color, #e2e8f0);
    border-radius: 10px;
    margin: 12px auto 0 auto;
    flex-shrink: 0;
}

.ail-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color, #f1f5f9);
    flex-shrink: 0;
}

.ail-sheet-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
}

.ail-sheet-close-btn {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1;
}

.ail-sheet-body {
    padding: 20px;
    flex: 1 1 auto;
    overflow-y: auto;
    padding-bottom: 20px !important;
}

.ail-sheet-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
}

/* Date Chips */
.ail-date-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 5px;
    scrollbar-width: none;
}

.ail-date-scroll::-webkit-scrollbar {
    display: none;
}

.ail-date-option {
    flex-shrink: 0;
    width: 60px;
    padding: 12px 0;
    border: 2px solid #f1f5f9;
    border-radius: 14px;
    background: var(--card-bg, #ffffff);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ail-do-day {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

.ail-do-num {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
}

.ail-date-option.selected {
    background: var(--footer-bg);
    border-color: var(--text-primary);
}

.ail-date-option.selected .ail-do-day,
.ail-date-option.selected .ail-do-num {
    color: #fff;
}

/* Time Slots */
.ail-time-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.ail-time-slot {
    padding: 12px 0;
    border: 2px solid #f1f5f9;
    border-radius: 12px;
    background: var(--card-bg, #ffffff);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
}

.ail-time-slot.selected {
    background: var(--footer-bg);
    border-color: var(--text-primary);
    color: #fff;
}

.ail-sheet-footer {
    padding: 15px 20px 30px 20px;
    border-top: 1px solid #f1f5f9;
}

/* ── html/body/box-sizing resets inherited from style.css ── */


/* ========================================================
   TRUST & SAFETY BADGES
   ======================================================== */
.ail-trust-badges {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #f0fdf4;
    border: 1px solid #dcfce7;
    border-radius: 16px;
    padding: 12px 8px;
    margin: 15px 16px 28px;
    gap: 8px;
}

.ail-trust-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #064e3b;
    background: var(--card-bg, #ffffff);
    padding: 10px 12px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.06);
    flex: 1;
    white-space: nowrap;
}

.ail-trust-icon {
    font-size: 14px;
    line-height: 1;
}


/* ========================================================
   HOW IT WORKS
   ======================================================== */
.ail-how-it-works {
    margin: 0 20px 32px;
    background: var(--card-bg, #ffffff);
    border-radius: 20px;
    padding: 24px 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
}

.ail-how-it-works .ail-section-title {
    color: var(--primary-color);
    margin: 0 0 24px;
    padding: 0;
}

.ail-hiw-steps {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
}

.ail-hiw-steps::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 15%;
    right: 15%;
    height: 2px;
    background: var(--border-color, #e2e8f0);
    z-index: 1;
}

.ail-hiw-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    position: relative;
    z-index: 2;
}

.ail-hiw-icon {
    width: 56px;
    height: 56px;
    background: #f3f0ff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(138, 43, 226, 0.08);
}

.ail-hiw-step h4 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 800;
    color: var(--primary-color);
}

.ail-hiw-step p {
    margin: 0;
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
    line-height: 1.3;
}


/* ========================================================
   GLOBAL CARD COMPONENT SYSTEM
   Used across: homepage, category, search, listing, dashboard.
   Page-specific CSS may override colors/effects only.
   ======================================================== */

/* Horizontal scroll card (homepage trending/near-you) */
.ail-card-wrap {
    position: relative;
    border-radius: var(--card-radius, 16px);
    overflow: hidden;
    flex: 0 0 240px;
    width: 240px;
}

/* Full-width row card (category, search, taxonomy pages) */
.ail-card-wrap-row {
    flex: unset;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Favorite / Heart Button (global) */
.ail-fav-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 5;
    transition: transform 0.2s ease;
}

.ail-fav-btn:active {
    transform: scale(0.85);
}

.ail-fav-btn.active {
    animation: heartBounce 0.4s ease;
}

.ail-fav-row {
    top: 50%;
    transform: translateY(-50%);
}

.ail-fav-row:active {
    transform: translateY(-50%) scale(0.85);
}

@keyframes heartBounce {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.3);
    }

    60% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

/* ── Result card (global base — category/search/taxonomy) ── */
.ail-result-card {
    display: flex;
    align-items: center;
    background: var(--card-bg, #fff);
    padding: 14px;
    border-radius: var(--card-radius, 16px);
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    width: 100%;
    box-sizing: border-box;
    gap: 14px;
    transition: box-shadow 0.2s ease;
}

/* ── Image container ── */
.ail-rc-img {
    width: 85px;
    min-width: 85px;
    height: 85px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
}

.ail-rc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Info column — all text content ── */
.ail-rc-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

/* ── Title row: title text + badge cluster (title-priority) ── */
.ail-rc-title {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
    color: var(--text-primary, #0f172a);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 6px;
    row-gap: 3px;
    min-width: 0;
}
.ail-rc-title-text {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Vendor profile card (author.php): same title-row pattern so green/blue ticks sit beside the
   title text and the business badge cluster wraps onto the line below. Consumes the ONE shared
   renderer LBAI_Listing_Card::badges() — no bespoke vendor badge styling. */
.ail-sc-info .ail-sc-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 6px;
    row-gap: 3px;
    min-width: 0;
}
.ail-sc-info .ail-sc-title-text {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Title + tick wrapper (injected by LPCF JS inside h2) */
.ail-rc-title .lpcf-badges-inline-wrapper {
    display: inline !important;
    align-items: baseline;
    gap: 4px;
    vertical-align: baseline;
    line-height: inherit;
}

/* Green/Blue tick icons — sit inline with text */
.ail-rc-title .lpcf-tick,
.ail-rc-info .lpcf-tick {
    display: inline-flex !important;
    align-items: center;
    vertical-align: middle;
    position: relative;
    top: -1px;
    margin-left: 3px;
}

.ail-rc-title .lpcf-tick svg,
.ail-rc-info .lpcf-tick svg {
    width: 16px !important;
    height: 16px !important;
}

/* ── Meta row: rating + location ── */
.ail-rc-meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    margin: 0;
    line-height: 1.4;
}

.ail-rc-rating {
    color: var(--accent-color);
    white-space: nowrap;
}

.ail-rc-address {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

/* ── Arrow action ── */
.ail-rc-action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.ail-rc-action i {
    font-size: 22px;
    color: var(--text-secondary, #cbd5e1);
}

/* ========================================================
   LPCF BADGE PILLS — Professional compact layout
   Injected by JS as .lpcf-pills-container AFTER h2
   ======================================================== */

/* Global pill container defaults */
.lpcf-pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    margin: 0;
    max-width: 100%;
}

/* Inside result cards — tighter spacing (overrides plugin inline <style>) */
.ail-result-card .lpcf-pills-container,
.ail-card-wrap .lpcf-pills-container {
    margin-top: 3px !important;
    margin-bottom: 0 !important;
    gap: 4px !important;
    justify-content: flex-start !important;
}

/* Badge pill styling — uniform height, compact */
.ail-result-card .lpcf-badge-icon,
.ail-card-wrap .lpcf-badge-icon {
    font-size: 10px !important;
    padding: 2px 7px 2px 3px !important;
    border-radius: 6px !important;
    white-space: nowrap;
    line-height: 1.4;
    height: 20px;
    box-sizing: border-box;
}

.ail-result-card .lpcf-badge-icon svg,
.ail-card-wrap .lpcf-badge-icon svg {
    width: 10px !important;
    height: 10px !important;
    flex-shrink: 0;
}

/* Trust badge (has custom_html with yellow bg) — normalize size */
.ail-result-card .lpcf-badge-icon[style*="background:#fde047"],
.ail-card-wrap .lpcf-badge-icon[style*="background:#fde047"] {
    font-size: 10px !important;
    height: 20px;
}

/* ── Listing results grid container ── */
.ail-listing-results-grid {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap, 12px);
    width: 100%;
    padding: 0 var(--space-md, 16px);
}

/* ── Global Section Spacing Utilities ── */
.ail-section {
    padding: var(--space-lg, 24px) var(--space-md, 16px);
}

.ail-section+.ail-section {
    padding-top: 0;
}

/* Search header spacing */
.ail-search-header-wrap {
    padding: var(--space-sm, 8px) var(--space-md, 16px) var(--space-md, 16px);
}

/* Results count row */
.ail-results-count {
    padding: 0 var(--space-md, 16px);
    margin: var(--space-md, 16px) 0;
}

/* App content padding */
.ail-app-content {
    padding: var(--space-md, 16px);
}

/* ========================================================
   GLOBAL Z-INDEX HIERARCHY
   ──────────────────────────────────────────────────────
   Layer             │ z-index
   ──────────────────┼──────────
   Base content      │ 1
   Card badges       │ 5
   Fav buttons       │ 5
   Sticky header     │ 1000
   Chat FAB          │ 998
   Bottom nav        │ 9999
   Filter sheet      │ 10000
   Drawer overlay    │ 9999998
   Drawer panel      │ 9999999
   Sheet overlay     │ 999999998
   Booking sheet     │ 999999999
   ======================================================== */

/* ── Floating Chat Button (Plugin injects via wp_footer) ── */
.lpcf-chat-fab {
    position: fixed !important;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), #1d4ed8);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.35);
    z-index: 998 !important;
    transition: transform 0.2s, box-shadow 0.2s;
    border: none;
}

.lpcf-chat-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 28px rgba(37, 99, 235, 0.5);
}

.lpcf-chat-fab:active {
    transform: scale(0.95);
}

/* Desktop: constrain FAB inside 480px app shell */
@media (min-width: 768px) {
    .lpcf-chat-fab {
        /* Position relative to centered 480px shell */
        right: calc(50% - 240px + 16px) !important;
    }
}

/* Hide FAB on pages where it's not relevant */
.page-template-template-dashboard .lpcf-chat-fab,
.page-template-template-add-listing .lpcf-chat-fab {
    display: none !important;
}

/* Legacy listing-card badge overlay (.ail-card-badge-wrap / .ail-badge / .ail-badge-verified /
   .ail-badge-featured) removed — every listing badge now renders ONLY through the shared
   LBAI_Listing_Card::badges() renderer (.lbai-badges / .lbai-tick). No second visual path. */


/* ========================================================
   AI RECOMMENDATIONS SECTION
   ======================================================== */
.ail-ai-recommendations {
    margin-bottom: 32px;
}

.ail-trend-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 16px;
    overflow: hidden;
    background: var(--card-bg);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.ail-trend-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.ail-trend-card img {
    width: 100%;
    height: 140px;
    object-fit: cover;
}

.ail-trend-info {
    padding: 12px 14px;
}

.ail-trend-info h3 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ail-trend-rating {
    font-size: 12px;
    color: var(--accent-color);
    font-weight: 600;
}


/* ========================================================
   GENERIC PAGE TEMPLATE
   ======================================================== */
.ail-page-content {
    padding: 30px 20px;
    min-height: auto;
}

.ail-page-content h1 {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 20px 0;
}

.ail-page-content p,
.ail-page-content ul,
.ail-page-content ol {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
}



/* ========================================================
   CONTACT ACTION PILLS
   ======================================================== */
.ail-contact-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.ail-contact-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.15s ease;
}

.ail-contact-pill:active {
    transform: scale(0.95);
}

.ail-pill-call {
    background: #d1fae5;
    color: #065f46;
}

.ail-pill-whatsapp {
    background: #dcfce7;
    color: #166534;
}

.ail-pill-email {
    background: #e0e7ff;
    color: #3730a3;
}

.ail-pill-book {
    background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
    color: #ffffff;
    border: none;
}

.ail-pill-enquire {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    border: none;
}

/* Share Button */
.ail-share-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}


/* ========================================================
   404 PAGE
   ======================================================== */
.ail-404-page {
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-color, #f8fafc);
}

.ail-404-content {
    text-align: center;
    padding: 40px 30px;
}

.ail-404-emoji {
    font-size: 72px;
    display: block;
    margin-bottom: 20px;
}

.ail-404-title {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 10px 0;
    color: var(--text-primary);
}

.ail-404-text {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 30px;
    line-height: 1.6;
}


/* ========================================================
   CITY / LOCATION SELECTOR
   ======================================================== */
.ail-city-list {
    max-height: 350px;
    overflow-y: auto;
}

.ail-city-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 5px;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color, #f1f5f9);
    transition: background 0.15s ease;
}

.ail-city-item:hover {
    background: var(--bg-color, #f8fafc);
    border-radius: 8px;
}

.ail-city-item:last-child {
    border-bottom: none;
}

.ail-city-item.active {
    color: var(--accent-color);
    font-weight: 800;
}

.ail-city-count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--border-color, #f1f5f9);
    padding: 2px 8px;
    border-radius: 50px;
}


/* ========================================================
   SKELETON LOADING
   ======================================================== */
.ail-skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 12px;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.ail-skeleton-text {
    height: 14px;
    margin-bottom: 8px;
}

.ail-skeleton-title {
    height: 20px;
    width: 60%;
    margin-bottom: 12px;
}

.ail-skeleton-card {
    height: 100px;
    margin-bottom: 12px;
}

.ail-skeleton-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

/* Location bar tap hint */
.ail-loc-text {
    cursor: pointer;
}

.ail-loc-sub::after {
    content: "\f347";
    font-family: dashicons;
    font-size: 13px;
    color: inherit;
    margin-left: 4px;
    vertical-align: middle;
    display: inline-block;
}

.ail-loc-sub i {
    display: none !important;
}


/* ========================================================
   DARK MODE TOGGLE
   ======================================================== */
.ail-dark-mode-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    margin-top: 10px;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid var(--border-color, #f1f5f9);
}

.ail-toggle {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}

.ail-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ail-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--text-secondary, #cbd5e1);
    border-radius: 26px;
    transition: 0.3s;
}

.ail-toggle-slider::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: var(--card-bg, #ffffff);
    border-radius: 50%;
    transition: 0.3s;
}

.ail-toggle input:checked+.ail-toggle-slider {
    background-color: var(--text-primary);
}

.ail-toggle input:checked+.ail-toggle-slider::before {
    transform: translateX(22px);
}


/* ========================================================
   FRONT PAGE ENHANCEMENTS (Redesign)
   ======================================================== */
.ail-quick-services {
    padding: 15px 16px 5px;
}

.ail-qs-scroll {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: none;
}

.ail-qs-scroll::-webkit-scrollbar {
    display: none;
}

.ail-qs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px 10px;
    padding-bottom: 10px;
}

@media (max-width: 480px) {
    .ail-qs-grid {
        grid-template-columns: repeat(4, 1fr);
        /* 4 items per row on mobile looks like apps */
    }
}

.ail-qs-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
    text-decoration: none;
}

.ail-qs-icon {
    width: 50px;
    height: 50px;
    background: var(--card-bg, #ffffff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 8px;
    transition: transform 0.2s;
}

.ail-qs-item:hover .ail-qs-icon {
    transform: scale(1.05);
}

.ail-qs-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    text-align: center;
}

.ail-trust-badges {
    display: flex;
    justify-content: space-between;
    padding: 20px 16px;
    background: var(--bg-color, #f8fafc);
    margin: 10px 16px;
    border-radius: 12px;
}

.ail-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 10px;
    font-weight: 800;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.ail-trust-icon {
    font-size: 20px;
    margin-bottom: 5px;
}

.ail-how-it-works {
    padding: 20px 16px;
}

.ail-hiw-steps {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}

.ail-hiw-step {
    flex: 1;
    text-align: center;
    position: relative;
}

.ail-hiw-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 25px;
    right: -15px;
    width: 30px;
    height: 2px;
    background: var(--border-color, #e2e8f0);
}

.ail-hiw-icon {
    width: 50px;
    height: 50px;
    background: #e0e7ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 10px;
}

.ail-hiw-step h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-primary, #0f172a);
}

.ail-hiw-step p {
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--text-secondary, #64748b);
}

.ail-vendor-cta {
    padding: 30px 16px;
    margin-bottom: 20px;
}

.ail-vcta-content {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    padding: 30px 20px;
    border-radius: 16px;
    text-align: center;
    color: #fff;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.2);
}

.ail-vcta-content h2 {
    color: #fff;
    font-size: 20px;
    margin: 0 0 10px;
    font-weight: 800;
}

.ail-vcta-content p {
    color: var(--text-secondary);
    font-size: 13px;
    margin: 0 0 20px;
}

.ail-vcta-btn {
    display: inline-block;
    background: var(--primary-color, var(--primary-color));
    color: #fff;
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    font-size: 14px;
    transition: transform 0.2s;
}

.ail-vcta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(37, 99, 235, 0.4);
}

/* Dark Mode fixes for new sections */
body.dark-mode .ail-qs-icon {
    background: #334155;
}

body.dark-mode .ail-trust-badges {
    background: var(--footer-bg);
    border-color: #334155;
}

body.dark-mode .ail-trust-item {
    background: #334155;
    color: #f1f5f9;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

body.dark-mode .ail-hiw-icon {
    background: #334155;
}

body.dark-mode .ail-hiw-step:not(:last-child)::after {
    background: #334155;
}


/* ========================================================
   DARK MODE THEME OVERRIDES
   ======================================================== */
body.dark-mode {
    --bg-color: var(--text-primary);
    --card-bg: #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --primary-color: #f1f5f9;
    --border-color: #334155;
    background-color: var(--text-primary);
    color: #f1f5f9;
}

body.dark-mode .ail-app-header {
    background: var(--footer-bg);
}

body.dark-mode .ail-bottom-nav,
body.dark-mode .ail-single-bottom-bar {
    background: var(--footer-bg);
    border-top-color: #334155;
}

body.dark-mode .ail-search-input {
    background: #334155;
}

body.dark-mode .ail-search-input input {
    color: #f1f5f9;
}

body.dark-mode .ail-cat-icon {
    background: #334155;
}

body.dark-mode .ail-noteworthy-card,
body.dark-mode .ail-result-card,
body.dark-mode .ail-review-card,
body.dark-mode .ail-booking-card,
body.dark-mode .ail-vendor-listing-card {
    background: var(--footer-bg);
    color: #f1f5f9;
}

body.dark-mode .ail-field-input {
    background: #334155;
    color: #f1f5f9;
    border-color: var(--text-secondary);
}

body.dark-mode .ail-booking-sheet {
    background: var(--footer-bg);
    color: #f1f5f9;
}

body.dark-mode .ail-sheet-header {
    border-bottom-color: #334155;
}

body.dark-mode .ail-dash-header {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

body.dark-mode .ail-dash-stat-card {
    background: var(--footer-bg);
}

body.dark-mode .ail-quick-action-item {
    background: var(--footer-bg);
    color: #f1f5f9;
    border-color: #334155;
}

body.dark-mode .ail-dash-tabs {
    background: var(--footer-bg);
}

body.dark-mode .ail-tab-btn {
    color: var(--text-secondary);
}

body.dark-mode .ail-tab-btn.active {
    color: #f1f5f9;
}

body.dark-mode .ail-autocomplete-dropdown {
    background: var(--footer-bg);
}

body.dark-mode .ail-ac-item {
    color: #f1f5f9;
    border-bottom-color: #334155;
}

body.dark-mode .ail-fav-btn {
    background: rgba(30, 41, 59, 0.9);
}

body.dark-mode .ail-dark-mode-row {
    border-color: #334155;
}

body.dark-mode #page {
    background: var(--footer-bg);
}

body.dark-mode .ail-page-content {
    color: var(--text-secondary, #cbd5e1);
}

body.dark-mode .ail-page-content p,
body.dark-mode .ail-page-content ul,
body.dark-mode .ail-page-content ol {
    color: var(--text-secondary);
}


/* ========================================================
   TOAST NOTIFICATIONS
   ======================================================== */
#ail-toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000000000 !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 90%;
    max-width: 90vw;
    pointer-events: none;
}

.ail-toast {
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-family);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    animation: toastSlideUp 0.35s ease, toastFadeOut 0.35s ease 2.65s forwards;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ail-toast-success {
    background: #065f46;
    color: #d1fae5;
}

.ail-toast-error {
    background: #991b1b;
    color: #fee2e2;
}

.ail-toast-info {
    background: var(--footer-bg);
    color: #e2e8f0;
}

@keyframes toastSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toastFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}


/* ========================================================
   PAGE ENTRANCE ANIMATION
   ======================================================== */
.ail-app-content,
.ail-single-content,
.ail-dashboard-page,
.ail-taxonomy-page main {
    animation: pageEnter 0.4s ease;
}

@keyframes pageEnter {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered card entrance */
.ail-result-card,
.ail-booking-card,
.ail-vendor-listing-card,
.ail-quick-action-item {
    animation: cardEnter 0.35s ease both;
}

.ail-result-card:nth-child(1),
.ail-booking-card:nth-child(1) {
    animation-delay: 0.05s;
}

.ail-result-card:nth-child(2),
.ail-booking-card:nth-child(2) {
    animation-delay: 0.1s;
}

.ail-result-card:nth-child(3),
.ail-booking-card:nth-child(3) {
    animation-delay: 0.15s;
}

.ail-result-card:nth-child(4),
.ail-booking-card:nth-child(4) {
    animation-delay: 0.2s;
}

.ail-result-card:nth-child(5),
.ail-booking-card:nth-child(5) {
    animation-delay: 0.25s;
}

@keyframes cardEnter {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Smooth body transition for dark mode */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}


/* ========================================================
   1. FIX: Sign Up & Forgot Password Links Visibility
   ======================================================== */
.pop-form-bottom .bottom-links {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 15px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.pop-form-bottom .bottom-links a {
    display: inline-block !important;
    color: #667eea !important;
    /* Premium link color */
    font-weight: 600 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    cursor: pointer !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.pop-form-bottom .bottom-links a:hover {
    color: #764ba2 !important;
}

/* Mobile par buttons ko upar-niche dikhane ke liye taaki easily click ho */
@media (max-width: 480px) {
    .pop-form-bottom .bottom-links {
        flex-direction: column !important;
        text-align: center !important;
    }

    .pop-form-bottom .bottom-links a {
        width: 100% !important;
        padding: 8px 0 !important;
    }
}


/* ========================================================
   MODERN AUTH TABS (LOGIN / SIGNUP)
   ======================================================== */
.ail-auth-tabs {
    display: flex;
    background: var(--border-color, #f1f5f9);
    border-radius: 12px;
    padding: 4px;
    margin: 0 20px 20px 20px;
}

.ail-auth-tab {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ail-auth-tab.active {
    background: var(--card-bg, #ffffff);
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}


/* ============================================================
   DYNAMIC THEME COLOR — set via output_dynamic_css() in PHP.
   These overrides are applied AFTER the stylesheet so they
   win without needing !important on individual properties.
   ============================================================ */
/* Placeholder: actual values injected inline by PHP */





/* ========================================================
   GOOGLE FONT — PREMIUM TYPOGRAPHY
   ======================================================== */


html,
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}


/* ========================================================
   CUSTOMIZABLE BRAND FOOTER STYLES
   ======================================================== */
.ail-brand-footer {
    background: var(--bg-color, #f8fafc);
    border-top: 1px solid #e2e8f0;
    padding: 32px 20px 24px;
    margin-top: 32px;
    font-family: inherit;
    color: var(--text-secondary);
}

.ail-footer-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 640px) {
    .ail-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (min-width: 1024px) {
    .ail-footer-grid {
        grid-template-columns: 2fr 1fr 1fr;
    }
}

.ail-footer-col {
    display: flex;
    flex-direction: column;
}

.ail-footer-brand-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 15px;
    letter-spacing: -0.5px;
}

.ail-footer-bio {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0 0 20px;
}

.ail-footer-pwa-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--primary-color, #10b981);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
    transition: all 0.2s ease;
    align-self: flex-start;
}

.ail-footer-pwa-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.25);
}

.ail-footer-col-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 18px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ail-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ail-footer-links li {
    list-style: none !important;
}

.ail-footer-links li a {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

.ail-footer-links li a:hover {
    color: var(--primary-color, #10b981);
}

.ail-footer-bottom {
    max-width: 1200px;
    margin: 30px auto 0;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
    text-align: center;
}

.ail-footer-copy {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    font-weight: 600;
}

/* Dark Mode fixes for Brand Footer */
body.dark-mode .ail-brand-footer {
    background: var(--footer-bg);
    border-top-color: var(--text-primary, #1e293b);
    color: var(--text-secondary);
}

body.dark-mode .ail-footer-brand-title,
body.dark-mode .ail-footer-col-title {
    color: #f8fafc;
}

body.dark-mode .ail-footer-bio,
body.dark-mode .ail-footer-links li a {
    color: var(--text-secondary);
}

body.dark-mode .ail-footer-links li a:hover {
    color: var(--primary-color, #10b981);
}

body.dark-mode .ail-footer-bottom {
    border-top-color: var(--text-primary, #1e293b);
}

@media (max-width: 768px) {

    /* ── Remove gap between content and footer ── */
    .ail-brand-footer {
        padding: 24px 16px 80px;
        /* Tighter padding — just enough for fixed bottom nav */
        margin-top: 0;
    }

    /* ── Compact Footer Grid: Brand on top, links side-by-side ── */
    .ail-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .ail-footer-brand-col {
        grid-column: 1 / -1;
        /* Brand spans full width */
    }

    .ail-footer-logo {
        max-height: 36px !important;
        max-width: 130px !important;
        object-fit: contain !important;
        margin-bottom: 10px !important;
    }

    .ail-footer-bio {
        font-size: 13px;
        margin-bottom: 14px;
    }

    .ail-footer-col-title {
        font-size: 13px;
        margin-bottom: 12px;
    }

    .ail-footer-links {
        gap: 10px;
    }

    .ail-footer-links li a {
        font-size: 13px;
    }

    .ail-footer-bottom {
        margin-top: 20px;
        padding-top: 14px;
    }

    .ail-footer-copy {
        font-size: 12px;
    }

    .ail-footer-pwa-btn {
        width: 100%;
        justify-content: center;
        padding: 10px 14px;
        font-size: 13px;
        border-radius: 10px;
    }

    /* ── Remove margin from CTA section touching footer ── */
    .ail-vendor-cta {
        margin-bottom: 0 !important;
        border-radius: 0 !important;
    }
}

/* Bottom Nav Spacer */
.ail-bottom-nav-spacer {
    height: 0;
    /* Eliminated: footer already has bottom padding for the nav bar */
}

@media (max-width: 768px) {
    .ail-bottom-nav-spacer {
        height: 0;
        /* Footer already has bottom padding on mobile */
    }
}




/* === MOVED FROM MOBILE.CSS === */
/* ============================================================
   HAMBURGER DRAWER MENU
   ============================================================ */
.ail-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.ail-drawer-overlay.open {
    opacity: 1;
    visibility: visible;
}

.ail-drawer-menu {
    position: fixed;
    top: 0;
    right: -300px;
    width: 280px;
    height: 100%;
    background: var(--card-bg, #ffffff);
    z-index: 9999;
    box-shadow: -4px 0 25px rgba(0, 0, 0, 0.15);
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.ail-drawer-menu.open {
    right: 0;
}

.ail-drawer-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 16px;
    border-bottom: 1px solid var(--border-color, #f1f5f9);
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.ail-drawer-nav {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}

.ail-drawer-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 20px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.15s ease;
}

.ail-drawer-link:hover,
.ail-drawer-link.active {
    background: var(--border-color, #f1f5f9);
}

.ail-drawer-link i {
    font-size: 18px;
    color: var(--text-secondary);
    width: 20px;
}

/* Tab Panels */
.ail-dash-content {
    padding: 20px;
}

.ail-tab-panel {
    display: none;
}

.ail-tab-panel.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stats Grid */
.ail-dash-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.ail-dash-stat-card {
    background: var(--card-bg, #ffffff);
    border-radius: 16px;
    padding: 18px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.ail-stat-icon {
    font-size: 28px;
}

.ail-stat-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-primary);
}

.ail-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Quick Actions */
.ail-quick-actions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ail-quick-action-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--card-bg, #ffffff);
    padding: 15px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.ail-quick-action-item i {
    font-size: 20px;
    color: var(--text-secondary);
}

.ail-quick-action-item span {
    flex-grow: 1;
}

.ail-qa-arrow {
    color: var(--text-secondary, #cbd5e1) !important;
}

/* Bookings List */
.ail-bookings-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ail-booking-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--card-bg, #ffffff);
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.ail-booking-info h4 {
    margin: 0 0 5px 0;
    font-size: 15px;
    font-weight: 700;
}

.ail-booking-date,
.ail-booking-time {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
}

.ail-booking-status {
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.ail-status-pending {
    background: #fef3c7;
    color: #92400e;
}

.ail-status-confirmed {
    background: #d1fae5;
    color: #065f46;
}

.ail-status-completed {
    background: #e0e7ff;
    color: #3730a3;
}

.ail-status-cancelled {
    background: #fee2e2;
    color: #991b1b;
}

/* Empty States */
.ail-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
}

.ail-empty-state p {
    font-size: 14px;
    font-weight: 600;
    margin-top: 10px;
}

/* Profile Fields */
.ail-profile-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ail-field-group label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.ail-field-input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #f1f5f9;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--card-bg, #ffffff);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.ail-field-input:focus {
    border-color: var(--text-primary);
}

/* Nav Items (used by bottom nav) */
.ail-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 10px;
    font-weight: 600;
}

.ail-nav-item i {
    font-size: 20px;
}

.ail-nav-item.active {
    color: var(--text-primary);
}


/* ========================================================
   APP BOTTOM NAVIGATION
   ======================================================== */
.ail-bottom-nav {
    display: none;
}
@media (max-width: 1024px) {
    .ail-bottom-nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
        background: var(--card-bg, #ffffff);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
        padding: 5px 0;
        padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px));
        z-index: 9999;
        height: calc(65px + env(safe-area-inset-bottom, 0px));
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-top: 1px solid var(--border-color, #f1f5f9);
    }
}

/* ── Password Strength Hint ──────────────────────────── */
.ail-pw-hint {
    font-size: 11px;
    font-weight: 600;
    margin-top: 4px;
    min-height: 16px;
    transition: color 0.2s ease;
}

.ail-pw-hint.weak {
    color: #ef4444;
}

.ail-pw-hint.fair {
    color: var(--rating-color, #f59e0b);
}

.ail-pw-hint.strong {
    color: var(--accent-color);
}

.ail-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 11px;
    flex: 1;
    transition: all 0.3s ease;
}

.ail-nav-item i {
    font-size: 20px;
    margin-bottom: 4px;
    transition: all 0.3s ease;
}

.ail-nav-item.active {
    color: var(--primary-color);
    font-weight: 700;
}

.ail-nav-item.active i {
    color: var(--primary-color);
    transform: translateY(-2px);
}

/* Floating Center Add Button — an equal-width slot (flex:1 like every other nav
   item) so the button lands exactly at the horizontal center of the bar. */
.ail-nav-add-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: -20px;
    /* Pulls it up above the nav bar */
}

.ail-add-floating-btn {
    width: 54px;
    height: 54px;
    background: linear-gradient(135deg, var(--primary-color), #10b981);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 15px rgba(37, 99, 235, 0.4);
    border: 4px solid #ffffff;
    transition: transform 0.3s ease;
}

.ail-add-floating-btn i,
.ail-add-floating-btn svg {
    color: #ffffff !important;
    stroke: #ffffff;
    font-size: 26px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0;
}

.ail-nav-item.active .ail-add-floating-btn {
    transform: scale(1.1);
}

/* -------------------------------------------
       SWIPER.JS MOBILE OVERRIDES
       ------------------------------------------- */
@media (max-width: 991px) {
    .swiper {
        width: 100%;
        padding-bottom: 20px;
    }

    #ail-mobile-swiper .swiper-slide,
    .ail-gallery-scroll .swiper-slide {
        width: 280px !important;
    }

    .lbai-ad-swiper .swiper-slide {
        width: 100% !important;
    }
}

/* On Desktop: Destroy Swiper CSS manually to ensure standard grid works if JS fails or resizes */
@media (min-width: 992px) {
    #ail-mobile-swiper .swiper-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        transform: none !important;
        width: 100%;
    }

    #ail-mobile-swiper .swiper-slide {
        width: calc(25% - 15px) !important;
        margin-right: 0 !important;
    }
}


/* ========================================================
   FIX: Bottom Mobile Menu Overlap Issue
   ======================================================== */

/* 1. Page ke sabse niche khali jagah banayein taaki content chhupe nahi */
@media (max-width: 768px) {

    body,
    .main-wrapper,
    #page,
    #content {
        padding-bottom: 0 !important;
        /* Eliminated: footer handles bottom nav spacing */
    }

    /* Location Dropdown ko screen ke andar rakhne ke liye */
    .ui-autocomplete,
    .select2-dropdown,
    .chosen-drop,
    .lp-search-results {
        max-height: 50vh !important;
        /* Screen ke half tak hi open hoga */
        padding-bottom: 40px !important;
        /* Dropdown ke last option ke niche space dega */
    }
}

/* 2. Bottom Menu ka Z-Index thoda kam karein taaki Search Dropdown uske UPAR aaye */
.app-view-header,
.lp-app-menu,
.bottom-nav-mobile,
.mobile-nav-bar,
.footer-bottom-menu {
    z-index: 9990 !important;
    /* Isko 9990 rakha hai */
}

/* 3. Search Dropdown ka Z-Index sabse high rakhein */
.ui-autocomplete,
.ui-menu,
.select2-container,
.chosen-container {
    z-index: 2147483647 !important;
    /* Yeh hamesha bottom menu ke upar khulega */
    max-height: 250px !important;
    overflow-y: auto !important;
}

/* 4. Hide Bottom Menu when Keyboard is Open (Screen Height Shrinks) */
@media screen and (max-width: 768px) and (max-height: 550px) {

    .app-view-header,
    .lp-app-menu,
    .bottom-nav-mobile,
    .mobile-nav-bar,
    .footer-bottom-menu,
    .ail-bottom-nav {
        display: none !important;
    }
}


/* ========================================================
   FIX: Hamburger Drawer Menu Z-Index (must be above bottom nav)
   ======================================================== */
.ail-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9999998 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.ail-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

.ail-drawer-menu {
    position: fixed;
    top: 0;
    right: -300px;
    width: 280px;
    height: 100%;
    background: var(--card-bg, #ffffff);
    z-index: 9999999 !important;
    box-shadow: -4px 0 25px rgba(0, 0, 0, 0.15);
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.ail-drawer-menu.open {
    right: 0;
}


/* ========================================================
   PREMIUM MOBILE APP UX REFINEMENTS
   ======================================================== */
@media (max-width: 768px) {

    /* Global App Padding */
    .ail-app-content {
        padding: 16px 5px 16px 5px !important;
        /* Tight bottom — footer/nav spacer handles bottom clearance */
        overflow-x: hidden;
    }

    /* Section Titles - Match padding alignment */
    .ail-section-title {
        margin-left: 4px;
        margin-right: 4px;
    }

    /* Ad & Hero Wrappers - Ensure they respect the new container padding */
    .ail-hero-banner,
    .ail-ad-block,
    .lbai-ad-carousel-wrap {
        width: 100% !important;
        margin: 0 0 24px 0 !important;
    }

    /* Premium rounded corners and soft shadows */
    .ail-hero-banner img,
    .swiper-slide img {
        border-radius: 12px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    }
}


/* Global 5px Padding requested by user */
#page {
    padding-left: 5px;
    padding-right: 5px;
    box-sizing: border-box;
    overflow-x: hidden;
}


/* ========================================================
   PHASE 1A — MOBILE RESPONSIVE HARDENING
   Fixes: horizontal overflow, ad banner clipping, card
   overflow, and viewport containment on Android/iOS.
   ======================================================== */

/* ── 1. Global Viewport Containment ─────────────────────── */
html,
body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.ail-taxonomy-page,
.ail-taxonomy-page main,
.ail-taxonomy-page .ail-search-results {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ── 2. Ad Carousel Container Hardening ──────────────────── */
.lbai-ad-carousel-wrap {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden;
}

.lbai-ad-carousel-wrap .swiper,
.lbai-ad-swiper {
    max-width: 100% !important;
    overflow: hidden !important;
}

.lbai-ad-swiper .swiper-slide {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.lbai-ad-swiper .swiper-slide img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    max-height: 180px;
    aspect-ratio: 3 / 1;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

/* ── 3. Mobile-Specific Hardening ────────────────────────── */
@media (max-width: 768px) {

    /* Taxonomy page global overflow lock */
    .ail-taxonomy-page {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* Search layout: force single column */
    .ail-search-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Search results container */
    .ail-search-results {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Ad carousel mobile containment */
    .lbai-ad-carousel-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .lbai-ad-swiper {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .lbai-ad-swiper .swiper-wrapper {
        max-width: 100% !important;
    }

    .lbai-ad-swiper .swiper-slide {
        width: 100% !important;
        max-width: 100% !important;
        flex-shrink: 0;
    }

    /* Card containment: prevent horizontal overflow */
    .ail-card-wrap-row {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .ail-result-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        flex-wrap: nowrap;
        padding: 12px !important;
        gap: 12px !important;
    }

    /* Card image: consistent mobile sizing */
    .ail-rc-img {
        width: 75px !important;
        min-width: 75px !important;
        height: 75px !important;
        flex-shrink: 0 !important;
    }

    /* Title: 2-line clamp on mobile */
    .ail-rc-title {
        font-size: 14px !important;
        -webkit-line-clamp: 2;
    }

    .ail-rc-info {
        min-width: 0 !important;
        overflow: hidden;
    }

    /* Meta row: rating + address inline */
    .ail-rc-meta {
        flex-direction: row !important;
        gap: 6px !important;
        font-size: 11px !important;
    }

    .ail-rc-address {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 140px;
    }

    /* Listing results grid */
    .ail-listing-results-grid {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Filter sidebar search bar */
    .ail-taxonomy-search-bar {
        padding: 0 10px 15px 10px !important;
    }

    .ail-taxonomy-search-bar form {
        padding: 10px 14px !important;
    }

    /* Category grid: ensure items don't overflow */
    .ail-category-grid {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Sponsored badge positioning fix */
    .lbai-ad-swiper .swiper-slide span[style*="position:absolute"] {
        max-width: calc(100% - 20px);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Search count row: prevent flex overflow */
    .ail-results-count {
        flex-wrap: wrap !important;
        gap: 8px;
    }

    /* All images: prevent any image from exceeding container */
    .ail-taxonomy-page img,
    .ail-search-results img {
        max-width: 100%;
        height: auto;
    }

    /* Fix inline style overrides from taxonomy.php */
    .ail-taxonomy-page main[style] {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* ── 4. Small Phone Hardening (≤ 375px) ──────────────────── */
@media (max-width: 375px) {
    .ail-rc-img {
        width: 65px !important;
        min-width: 65px !important;
        height: 65px !important;
    }

    .ail-rc-title {
        font-size: 13px !important;
    }

    .ail-rc-meta {
        font-size: 10px !important;
        gap: 4px !important;
    }

    .ail-rc-address {
        max-width: 110px;
    }

    .ail-result-card .lpcf-badge-icon,
    .ail-card-wrap .lpcf-badge-icon {
        font-size: 9px !important;
        height: 18px;
        padding: 1px 5px 1px 2px !important;
    }

}

.lbai-ad-swiper .swiper-slide img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    max-height: 180px;
    aspect-ratio: 3 / 1;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

/* ── 3. Mobile-Specific Hardening ────────────────────────── */
@media (max-width: 768px) {

    /* Taxonomy page global overflow lock */
    .ail-taxonomy-page {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* Search layout: force single column */
    .ail-search-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Search results container */
    .ail-search-results {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Ad carousel mobile containment */
    .lbai-ad-carousel-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .lbai-ad-swiper {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .lbai-ad-swiper .swiper-wrapper {
        max-width: 100% !important;
    }

    .lbai-ad-swiper .swiper-slide {
        width: 100% !important;
        max-width: 100% !important;
        flex-shrink: 0;
    }

    /* Card containment: prevent horizontal overflow */
    .ail-card-wrap-row {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .ail-result-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        flex-wrap: nowrap;
        padding: 12px !important;
        gap: 12px !important;
    }

    /* Card image: consistent mobile sizing */
    .ail-rc-img {
        width: 75px !important;
        min-width: 75px !important;
        height: 75px !important;
        flex-shrink: 0 !important;
    }

    /* Title: 2-line clamp on mobile */
    .ail-rc-title {
        font-size: 14px !important;
        -webkit-line-clamp: 2;
    }

    .ail-rc-info {
        min-width: 0 !important;
        overflow: hidden;
    }

    /* Meta row: rating + address inline */
    .ail-rc-meta {
        flex-direction: row !important;
        gap: 6px !important;
        font-size: 11px !important;
    }

    .ail-rc-address {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 140px;
    }

    /* Listing results grid */
    .ail-listing-results-grid {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Filter sidebar search bar */
    .ail-taxonomy-search-bar {
        padding: 0 10px 15px 10px !important;
    }

    .ail-taxonomy-search-bar form {
        padding: 10px 14px !important;
    }

    /* Category grid: ensure items don't overflow */
    .ail-category-grid {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Sponsored badge positioning fix */
    .lbai-ad-swiper .swiper-slide span[style*="position:absolute"] {
        max-width: calc(100% - 20px);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Search count row: prevent flex overflow */
    .ail-results-count {
        flex-wrap: wrap !important;
        gap: 8px;
    }

    /* All images: prevent any image from exceeding container */
    .ail-taxonomy-page img,
    .ail-search-results img {
        max-width: 100%;
        height: auto;
    }

    /* Fix inline style overrides from taxonomy.php */
    .ail-taxonomy-page main[style] {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* ── 4. Small Phone Hardening (≤ 375px) ──────────────────── */
@media (max-width: 375px) {
    .ail-rc-img {
        width: 65px !important;
        min-width: 65px !important;
        height: 65px !important;
    }

    .ail-rc-title {
        font-size: 13px !important;
    }

    .ail-rc-meta {
        font-size: 10px !important;
        gap: 4px !important;
    }

    .ail-rc-address {
        max-width: 110px;
    }

    .ail-result-card .lpcf-badge-icon,
    .ail-card-wrap .lpcf-badge-icon {
        font-size: 9px !important;
        height: 18px;
        padding: 1px 5px 1px 2px !important;
    }

    .lbai-ad-swiper .swiper-slide img {
        max-height: 140px;
    }
}

#ail-toast-container,
.ail-toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000000000 !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 90%;
    max-width: 90vw;
    pointer-events: none;
}

.ail-toast {
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-family);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    animation: toastSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.ail-toast span {
    flex: 1;
    line-height: 1.4;
}

.ail-toast .ail-toast-icon {
    flex-shrink: 0;
    font-size: 20px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ail-toast-success {
    background: #065f46;
    color: #d1fae5;
}

.ail-toast-error {
    background: #991b1b;
    color: #fee2e2;
}

.ail-toast-warning {
    background: #9a3412;
    color: #ffedd5;
}

.ail-toast-info {
    background: #1e293b;
    color: #f1f5f9;
}

.ail-toast.ail-toast-fadeout {
    animation: toastFadeOut 0.25s cubic-bezier(0.7, 0, 0.84, 0) forwards;
}

@media (prefers-reduced-motion: reduce) {
    #ail-toast-container,
    .ail-toast-container,
    .ail-toast,
    .ail-toast.ail-toast-fadeout {
        animation: none !important;
        transition: none !important;
    }
}

@keyframes toastSlideUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toastFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}

/* Category 3D Icon Styling */
.lbai-cat-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px !important;
    height: 72px !important;
    flex-shrink: 0;
    overflow: hidden;
    background: transparent !important;
}
.lbai-cat-3d-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
@media (max-width: 1024px) {
    .lbai-cat-icon-wrapper {
        width: 68px !important;
        height: 68px !important;
    }
}
@media (max-width: 768px) {
    .lbai-cat-icon-wrapper {
        width: 64px !important;
        height: 64px !important;
    }
}

/* ========================================================
   GLOBAL TOAST NOTIFICATIONS & INPUT STATES
   ======================================================== */
.ail-toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000000000 !important;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 90%;
    max-width: 90vw;
}

.ail-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    max-width: 400px;
    width: 100%;
    pointer-events: auto;
    animation: ailToastSlideDown 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes ailToastSlideDown {
    0% { opacity: 0; transform: translateY(-20px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.ail-toast.ail-toast-fadeout {
    animation: ailToastFadeOut 0.3s ease forwards;
}

@keyframes ailToastFadeOut {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-10px) scale(0.95); }
}

.ail-toast-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.ail-toast-error { background: #ef4444; }
.ail-toast-success { background: #10b981; }
.ail-toast-warning { background: #f59e0b; color: #0f172a; }

/* Input Validation States */
.ail-input-error {
    border: 2px solid #ef4444 !important;
    background: #fef2f2 !important;
}

.ail-input-success {
    border: 2px solid #10b981 !important;
}

.ail-field-error {
    border: 1.5px solid #ef4444 !important;
    background-color: #fef2f2 !important;
}

.ail-field-success {
    border: 1.5px solid #10b981 !important;
    background-color: #f0fdf4 !important;
}

.ail-error-message {
    color: #ef4444;
    font-size: 11px;
    font-weight: 600;
    margin-top: 4px;
    display: block;
}

/* ================================================================
   SPRINT 1 — LISTING BUILDER v1.0.0
   16-Step Wizard CSS Foundation
   APPEND-ONLY — No existing CSS modified above this line
   ================================================================ */

/* ── 16-Step Progress Bar ── */
.ail-wizard-16 .ail-step {
    padding: 6px 10px;
    font-size: 12px;
    gap: 6px;
}
.ail-wizard-16 .ail-step span {
    width: 22px;
    height: 22px;
    font-size: 11px;
    flex-shrink: 0;
}
.ail-wizard-16 .ail-step-line {
    min-width: 8px;
}
.ail-wizard-16 .ail-step.completed {
    color: var(--success-color, #10b981);
}
.ail-wizard-16 .ail-step.completed span {
    background: var(--success-color, #10b981);
    color: #fff;
}
.ail-step-label {
    display: none;
}
@media (min-width: 1024px) {
    .ail-step-label { display: inline; }
}

/* ── Sticky Bottom Navigation ── */
.ail-sticky-nav {
    position: sticky;
    bottom: 0;
    background: #ffffff;
    border-top: 1px solid #f1f5f9;
    padding: 16px 0 0;
    margin-top: 32px;
    z-index: 50;
    display: flex;
    gap: 12px;
}
.ail-sticky-nav .modern-btn { flex: 1; }
.ail-sticky-nav .modern-btn-secondary { flex: 0 0 auto; min-width: 100px; }

/* ── Gallery Grid ── */
.ail-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.ail-gallery-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}
.ail-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ail-gallery-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    background: rgba(239, 68, 68, 0.9);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    transition: transform 0.15s;
}
.ail-gallery-remove:hover { transform: scale(1.15); }
.ail-gallery-dropzone {
    border: 2px dashed #cbd5e1;
    background: #f8fafc;
    border-radius: 12px;
    padding: 30px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ail-gallery-dropzone:hover,
.ail-gallery-dropzone.dragover {
    border-color: var(--primary-color, #4f46e5);
    background: #eef2ff;
}

/* ── Video URL Row ── */
.ail-video-url-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
}
.ail-video-url-row .modern-input { flex: 1; }
.ail-video-url-row .ail-remove-row {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #ef4444;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.15s;
}
.ail-video-url-row .ail-remove-row:hover {
    background: #fee2e2;
    border-color: #ef4444;
}

/* ── Repeater Rows (Pricing, FAQ, Highlights, Branches, Portfolio) ── */
.ail-repeater-section { margin-bottom: 24px; }
.ail-repeater-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: flex-start;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
    flex-wrap: wrap;
}
.ail-repeater-row .modern-input-group {
    flex: 1;
    min-width: 140px;
    margin-bottom: 0;
}
.ail-repeater-row .modern-input-group label {
    font-size: 12px;
    margin-bottom: 6px;
}
.ail-repeater-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: #eef2ff;
    color: var(--primary-color, #4f46e5);
    border: 1px dashed var(--primary-color, #4f46e5);
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
    margin-top: 8px;
}
.ail-repeater-add:hover {
    background: #e0e7ff;
}
.ail-repeater-remove {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: none;
    background: #fef2f2;
    color: #ef4444;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    transition: all 0.15s;
    align-self: center;
}
.ail-repeater-remove:hover { background: #fee2e2; }

/* ── Working Hours Grid ── */
.ail-hours-grid { margin-top: 12px; }
.ail-hours-row {
    display: grid;
    grid-template-columns: 100px 44px 1fr 20px 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}
.ail-hours-row:last-child { border-bottom: none; }
.ail-hours-day {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}
.ail-hours-toggle {
    width: 44px;
    height: 24px;
    border-radius: 12px;
    appearance: none;
    -webkit-appearance: none;
    background: #e2e8f0;
    cursor: pointer;
    position: relative;
    transition: background 0.2s;
    border: none;
    outline: none;
    flex-shrink: 0;
}
.ail-hours-toggle:checked {
    background: var(--success-color, #10b981);
}
.ail-hours-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.ail-hours-toggle:checked::after {
    transform: translateX(20px);
}
.ail-hours-separator {
    text-align: center;
    font-size: 13px;
    color: #94a3b8;
    font-weight: 600;
}
.ail-hours-row input[type="time"] {
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #334155;
    transition: border-color 0.2s;
}
.ail-hours-row input[type="time"]:focus {
    outline: none;
    border-color: var(--primary-color, #4f46e5);
    box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
}
.ail-hours-row input[type="time"]:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}

/* ── Team Cards ── */
.ail-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 12px;
}
.ail-team-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
    text-align: center;
    position: relative;
    transition: box-shadow 0.2s;
}
.ail-team-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.ail-team-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 10px;
    border: 2px solid #e2e8f0;
    display: block;
}
.ail-team-name {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
}
.ail-team-role {
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 12px;
}
.ail-team-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.ail-team-actions button {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    transition: all 0.15s;
}
.ail-team-actions button:hover { background: #f1f5f9; }
.ail-team-actions .ail-team-delete {
    color: #ef4444;
    border-color: #fecaca;
}
.ail-team-actions .ail-team-delete:hover { background: #fef2f2; }

/* ── Booking Day Config ── */
.ail-booking-config { margin-top: 12px; }
.ail-booking-day-row {
    display: grid;
    grid-template-columns: 100px 44px 1fr;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}
.ail-booking-slot-input {
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    background: #fff;
    color: #334155;
    width: 100%;
    box-sizing: border-box;
}
.ail-booking-slot-input:focus {
    outline: none;
    border-color: var(--primary-color, #4f46e5);
}

/* ── Verification Badge Grid ── */
.ail-badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.ail-badge-item {
    padding: 16px;
    border-radius: 12px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    transition: all 0.2s;
}
.ail-badge-earned {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}
.ail-badge-pending {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}
.ail-badge-locked {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #94a3b8;
}
.ail-badge-icon {
    font-size: 28px;
    display: block;
    margin-bottom: 8px;
}

/* ── Social Links ── */
.ail-social-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}
.ail-social-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}
.ail-social-row .modern-input { flex: 1; }

/* ── SEO Character Counter ── */
.ail-char-counter {
    font-size: 11px;
    color: #94a3b8;
    text-align: right;
    margin-top: 4px;
    font-weight: 600;
}
.ail-char-counter.warn { color: #f59e0b; }
.ail-char-counter.over { color: #ef4444; }

/* ── Preview Section (Step 16) ── */
.ail-preview-section { margin-bottom: 20px; }
.ail-preview-card {
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 12px;
    transition: all 0.2s;
}
.ail-preview-card:hover { border-color: #e2e8f0; }
.ail-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    cursor: pointer;
}
.ail-preview-title {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
}
.ail-preview-edit {
    font-size: 12px;
    color: var(--primary-color, #4f46e5);
    font-weight: 600;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 6px;
    transition: background 0.15s;
}
.ail-preview-edit:hover { background: #eef2ff; }
.ail-preview-body { overflow: hidden; transition: max-height 0.3s ease; }
.ail-preview-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
}
.ail-preview-row:last-child { border-bottom: none; }
.ail-preview-label {
    color: #64748b;
    font-weight: 500;
}
.ail-preview-value {
    color: #0f172a;
    font-weight: 600;
    text-align: right;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ail-preview-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

/* ── Radius Slider ── */
.ail-radius-slider {
    width: 100%;
    margin: 8px 0;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: #e2e8f0;
    outline: none;
}
.ail-radius-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary-color, #4f46e5);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(79,70,229,0.3);
}
.ail-radius-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color, #4f46e5);
    margin-left: 12px;
}

/* ── Inquiry Status Display ── */
.ail-inquiry-status {
    padding: 24px;
    background: #f8fafc;
    border-radius: 14px;
    border: 1px solid #f1f5f9;
    text-align: center;
}
.ail-inquiry-status-icon {
    font-size: 40px;
    margin-bottom: 12px;
}
.ail-inquiry-status-text {
    font-size: 15px;
    font-weight: 600;
    color: #334155;
}
.ail-inquiry-status-desc {
    font-size: 13px;
    color: #94a3b8;
    margin-top: 4px;
}

/* ── Plan-Gated Step Visibility ── */
.ail-step-hidden { display: none !important; }

/* ── Step Section Heading ── */
.ail-step-heading {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}
.ail-step-desc {
    margin: 0 0 24px 0;
    font-size: 14px;
    color: #64748b;
}

/* ── Draft Restore Banner ── */
.ail-draft-banner {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 14px;
    color: #92400e;
    font-weight: 600;
}
.ail-draft-banner button {
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    margin-left: 8px;
}
.ail-draft-restore {
    background: var(--primary-color, #4f46e5);
    color: #fff;
}
.ail-draft-discard {
    background: #f1f5f9;
    color: #475569;
}

/* ── Sprint 1 Responsive Overrides ── */
@media (max-width: 640px) {
    /* Style .ail-hours-row as beautiful stacked cards */
    .ail-hours-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 12px !important;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 16px !important;
        margin-bottom: 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    }
    
    .ail-hours-day {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
        font-weight: 700 !important;
        font-size: 15px !important;
        align-self: center !important;
        margin: 0 !important;
    }
    
    .ail-hours-toggle {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        align-self: center !important;
        justify-self: end !important;
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
        cursor: pointer !important;
    }
    
    .ail-hours-open {
        grid-column: 1 / 2 !important;
        grid-row: 2 / 3 !important;
        width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
    }
    
    .ail-hours-close {
        grid-column: 2 / 3 !important;
        grid-row: 2 / 3 !important;
        width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
    }
    
    .ail-hours-separator {
        display: none !important;
    }

    .ail-repeater-row { flex-direction: column; gap: 8px; }
    .ail-repeater-row .modern-input-group { min-width: 100%; }
    .ail-team-grid { grid-template-columns: 1fr; }
    .ail-badge-grid { grid-template-columns: repeat(2, 1fr); }
    .ail-gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .ail-sticky-nav { flex-direction: column-reverse; gap: 8px; }
    .ail-sticky-nav .modern-btn-secondary { width: 100%; }
    .ail-preview-row { flex-direction: column; gap: 2px; }
    .ail-preview-value { text-align: left; max-width: 100%; }
    .ail-social-row { flex-direction: column; }
    .ail-social-icon { width: 100%; height: 36px; }
    .ail-booking-day-row { grid-template-columns: 70px 36px 1fr; gap: 8px; }

    /* Touch heights minimum 48px */
    .modern-btn, .ail-repeater-add, .ail-repeater-remove, .ail-gallery-remove, .ail-remove-row {
        min-height: 48px !important;
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    .ail-gallery-grid { grid-template-columns: repeat(4, 1fr); }
    .ail-badge-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Apply Primary Button Styles Globally */
.ail-action-btn, .pm-search-btn, .ail-write-review-btn, .lpcf-coupon-claim-btn, .ail-coupon-claim-btn, .ail-contact-pill, #ail-signin-btn, #ail-signup-btn, #ail-forgot-btn, #ail-submit-enquiry, #ail-submit-review, .swiper-button-prev-custom, .swiper-button-next-custom, .pm-card-view-all, .ail-see-more-reviews, button.btn-primary, .btn-primary, button.ail-btn-primary {
    background: var(--btn-primary-bg, var(--primary-color, #6366f1)) !important;
    color: var(--btn-primary-text, #ffffff) !important;
    border-radius: var(--btn-radius, 12px) !important;
    border: none !important;
    transition: var(--transition, all 0.3s ease) !important;
    cursor: pointer !important;
}

.ail-action-btn:hover, .pm-search-btn:hover, .ail-write-review-btn:hover, .lpcf-coupon-claim-btn:hover, .ail-coupon-claim-btn:hover, .ail-contact-pill:hover, #ail-signin-btn:hover, #ail-signup-btn:hover, #ail-forgot-btn:hover, #ail-submit-enquiry:hover, #ail-submit-review:hover, .swiper-button-prev-custom:hover, .swiper-button-next-custom:hover, .pm-card-view-all:hover, .ail-see-more-reviews:hover, button.btn-primary:hover, .btn-primary:hover, button.ail-btn-primary:hover {
    background: var(--btn-hover-bg, var(--secondary-color, #4f46e5)) !important;
    color: var(--btn-hover-text, #ffffff) !important;
    transform: translateY(-1px) !important;
}

/* Hover Effects */
.pm-cat-card:hover, .pm-card:hover, .ail-cat-card:hover, .ail-provider-card:hover {
    transform: var(--card-hover-transform, translateY(-2px));
    box-shadow: var(--card-shadow-hover, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)) !important;
}

/* Header Alignment Fixes */
.ail-app-header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.ail-header-loc {
    order: 3;
    width: 100%;
    margin-top: 12px;
}
.ail-app-logo-wrap { order: 1; }
.ail-header-actions { order: 2; }

@media (min-width: 768px) {
    .ail-header-loc {
        order: 2;
        width: auto;
        margin-top: 0;
        flex: 1;
        justify-content: center;
    }
    .ail-header-actions { order: 3; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   RC1 UI HOTFIX — MOBILE HEADER ALIGNMENT
   ONE responsive system for both Guest and Logged-in. No separate guest/logged-in CSS, no
   duplicate mobile header, no JavaScript, no markup change, no hidden elements.

   ── WHY THE LAYOUT BROKE ─────────────────────────────────────────────────────────────────
   The header is a single flex container, .ail-app-header-inner, carrying flex-wrap: wrap
   (declared above, and required: .ail-header-loc is order:3 / width:100% so the location
   switcher intentionally occupies its own row beneath the logo on mobile).

   The logged-in branch of header.php emits ONE more visible flex child than the guest branch
   — .ail-notif-bell — plus one more 16px gap. Measured on the rendered page:
       guest      visible children of .ail-header-actions: lang + profile        (heart is
                  display:none below 1024px)
       logged-in  visible children: bell + lang + profile
   No username text node is emitted in either state; the profile control is an icon in both.
   So the report's "profile area becomes larger" is really "an extra icon joins the row".

   Nothing in the row could absorb that extra width:
     1. .ail-header-actions has flex-shrink: 0, so the icon cluster cannot give up space.
     2. .ail-app-logo-wrap had no min-width: 0, and — the decisive part — its flex-basis was
        auto, so its hypothetical main size equalled its content width (the 120px logo cap at
        <=480px). Flex line-breaking is decided from hypothetical main sizes, so that 120px
        counted in full when the browser chose whether to break the line. min-width: 0 alone
        would NOT have prevented the wrap for exactly this reason.
   The guest row fits within the ~256px of inner width available at 320px; the logged-in row
   does not, and because neither child can yield, the non-shrinkable actions cluster is pushed
   onto line 2 — icons below the logo, and a taller header.

   ── THE FIX ──────────────────────────────────────────────────────────────────────────────
   Give the logo flex-basis: 0 so it contributes ~0 to the line-breaking decision and instead
   absorbs whatever space the fixed icon cluster does not use. The logo/actions row then cannot
   break at any width, in either auth state, without shrinking a single icon. This is the
   standard flex pattern for "one flexible item + one fixed cluster", not a hack: no negative
   margins, no absolute positioning, no !important, nothing hidden.

   Scoped to <=767px on purpose. At >=768px .ail-header-loc becomes order:2 / width:auto /
   flex:1 (rule above) and at >=1024px header.php's inline block builds the desktop navbar with
   its own .ail-app-logo-wrap { flex-shrink: 0 }. Neither is touched here, so tablet and
   desktop are byte-for-byte unchanged.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* The flexible item. flex-basis:0 keeps the logo out of the wrap calculation; min-width:0
       lets it shrink below its content width if a very narrow viewport ever demands it. The
       logo IMG keeps its existing max-width/max-height caps and object-fit: contain, so it
       scales down within the box and is never stretched or distorted. overflow: hidden is
       already on .ail-app-header .ail-app-logo-wrap above. */
    .ail-app-header-inner .ail-app-logo-wrap {
        flex: 1 1 0;
        min-width: 0;
    }

    /* The fixed cluster. flex-shrink:0 is inherited from the base rule and deliberately kept,
       so icons and their touch targets never shrink; the explicit basis states the intent, and
       nowrap guarantees the icons themselves stay on one line whatever the auth state. */
    .ail-app-header-inner .ail-header-actions {
        flex: 0 0 auto;
        flex-wrap: nowrap;
    }

    /* The location switcher keeps its own full-width row exactly as before — restated as a
       flex-basis so the intent is explicit rather than relying on width:100% alone. Identical
       computed outcome, so there is no visual change. */
    .ail-app-header-inner .ail-header-loc {
        flex: 0 0 100%;
        min-width: 0;
    }

    /* Fixed avatar/icon dimensions. Dashicons sizes its box to 20x20 while header.php sets an
       inline font-size of 24px (bell) and 28px (profile), so each glyph was overflowing a box
       smaller than itself — an indeterminate width feeding the overflow above. 1em ties the box
       to each icon's own font-size, making every control's width deterministic. Header height
       is unaffected: the tallest mobile header child remains the logo (max-height 38px at
       <=480px, 44px above it), and 28px is below both. */
    .ail-header-actions .dashicons {
        width: 1em;
        height: 1em;
        line-height: 1;
        flex: 0 0 auto;
    }

    /* Long text inside the location row truncates instead of widening the header. The strings
       are theme copy today, but they are translatable, so a longer locale must not reintroduce
       the overflow this section removes. */
    .ail-app-header-inner .ail-header-loc .ail-loc-text {
        min-width: 0;
    }

    .ail-app-header-inner .ail-header-loc .ail-loc-title,
    .ail-app-header-inner .ail-header-loc .ail-loc-sub {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
/* ═════════════════════════ END RC1 UI HOTFIX — MOBILE HEADER ALIGNMENT ════════════════════ */