/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 2rem;
    font-weight: 600;
    border-radius: 50px;
    transition: all var(--transition-normal);
    cursor: pointer;
    border: 2px solid transparent;
    font-size: 0.95rem;
    box-shadow: var(--shadow-sm);
}

.btn-primary {
    background-color: var(--color-primary);
    color: white;
}

.btn-primary:hover {
    background-color: var(--color-primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-accent {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    color: white;
}

.btn-accent:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-outline {
    background-color: transparent;
    border-color: white;
    color: white;
}

.btn-outline:hover {
    background-color: white;
    color: var(--color-primary);
}

.btn-outline-dark {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-outline-dark:hover {
    background-color: var(--color-primary);
    color: white;
}

.btn-sm {
    padding: 0.6rem 1.5rem;
    font-size: 0.85rem;
}

.btn-lg {
    padding: 1.2rem 3rem;
    font-size: 1.1rem;
}


/* Hero Section */
.hero {
    position: relative;
    height: auto;
    /* Allow growth */
    min-height: 100vh;
    /* Full screen minimum */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 140px;
    /* Space for fixed header + visual gap */
    padding-bottom: 4rem;
    /* Space for widget at bottom */
    /* Fallback background if video fails */
    background: radial-gradient(circle at top right, #1A5243 0%, transparent 40%),
        radial-gradient(circle at bottom left, #062118 0%, transparent 40%),
        var(--color-primary);
    color: white;
    text-align: center;
    overflow: visible;
    /* Changed from hidden to allow widget datepicker to show */
}

.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    /* Dark overlay text readability */
    /* Add a subtle gradient on top */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%);
    z-index: 2;
}

.hero-content {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem;
    z-index: 3;
    /* Corrected to sit above overlay */
}

.hero h1 {
    color: white;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    font-size: 4rem;
}

.hero-sub {
    font-size: var(--text-lg);
    margin-bottom: 2.5rem;
    opacity: 0.95;
    font-weight: 300;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hero-ctas {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

/* Hero Search Widget */
.hero-search-widget {
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all var(--transition-normal);
    overflow: visible;
    /* Ensure datepicker isn't clipped */
    position: relative;
    z-index: 100;
    /* Ensure it sits on top */
}

.hero-search-widget:hover {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Minimal widget overrides - don't break Guesty's layout */
#search-widget_IO312PWQ {
    width: 100%;
}

#search-widget_IO312PWQ button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}


/* Mobile Hero Adjustment */
@media (max-width: 768px) {
    .hero {
        padding-top: calc(var(--header-height) + 4rem);
        /* Increase padding to avoid header overlap */
        align-items: flex-start;
        /* Start from top to respect padding */
    }

    .hero-content {
        padding-top: 4rem;
        /* Reset excessive padding from desktop */
    }

    /* Force 2 columns for apartments features on mobile */
    .apartments-features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.75rem;
    }

    .apartments-features-grid .card-feature {
        padding: 0.75rem;
    }

    .apartments-features-grid h5 {
        font-size: 0.95rem;
        /* Slightly smaller text */
        word-wrap: break-word;
        hyphens: auto;
    }

    /* Reduce gap for referral steps on mobile */
    .referral-steps-grid {
        gap: 1rem !important;
    }

    /* Orphaned styles reintegration & fixes */
    .hero h1 {
        font-size: 2.8rem;
        /* Increased from 2.2rem */
        line-height: 1.2;
    }

    .hero-search-widget {
        margin: 2rem 0.5rem 0 0.5rem;
        padding: 1rem;
    }

    .hero {
        height: auto;
        /* Allow growth */
        min-height: 85vh;
        padding-bottom: 3rem;
        /* Buffer for widget */
    }

    .hero-video {
        object-position: 70% center;
    }
}

/* Split Header (Buildings) */
.split-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 3rem;
}

.split-image img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    transition: transform var(--transition-normal);
}

.split-image img:hover {
    transform: scale(1.02);
}

@media (max-width: 768px) {
    .split-header {
        grid-template-columns: 1fr;
    }
}


/* Cards */
.card {
    background: white;
    border-radius: var(--border-radius);
    padding: 2.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all var(--transition-normal);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.card-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: inline-block;
}

/* Scoped circular style for Hero (About) and Apartments ONLY */
.about-section .card-icon,
#apartments .card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: #2A3E36;
    /* Dark green background */
    color: var(--color-accent);
    border-radius: 50%;
    transition: all var(--transition-normal);
}

.card-icon svg {
    width: 30px;
    height: 30px;
    stroke-width: 1.5;
}

@media (max-width: 768px) {

    /* Only resize the circular icons, leave clean icons alone */
    .about-section .card-icon,
    #apartments .card-icon {
        width: 40px;
        height: 40px;
        font-size: 2rem;
    }

    .card-icon svg {
        width: 24px;
        height: 24px;
    }
}

.card-glass {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.card-dark {
    background: var(--color-bg-dark);
    color: white !important;
}

.card-dark h3,
.card-dark p,
.card-dark li {
    color: white !important;
}


/* Peace of Mind Cards (Apartments) */
.card-feature {
    background: white;
    padding: 1.5rem;
    border-radius: var(--border-radius);
    border: 1px solid #eee;
    transition: all var(--transition-fast);
}

.card-feature h5 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--color-primary);
}

.card-feature p {
    font-family: var(--font-body);
}

.card-feature:hover {
    border-color: var(--color-accent);
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
}

.icon-sm {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Mobile Pricing Table Logic */
.segmented-control {
    display: flex;
    background: transparent;
    /* No grey background */
    padding: 0;
    border-radius: 0;
    gap: 0;
    margin-bottom: 20px;
    flex-wrap: nowrap !important;
    overflow-x: hidden;
    width: 104%;
    margin-left: -2%;
    margin-right: -2%;
    justify-content: space-around;
    border-bottom: 1px solid #ddd;
    /* Base line for tabs */
}

.plan-tab {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 10px 2px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #888;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 2px solid transparent;
    /* Prepare for underline */
    border-radius: 0;
    /* Reset radius */
}

/* Gold Highlight - V5 */
.plan-tab[data-plan="gold"] {
    font-weight: 700 !important;
    color: #bfa15f !important;
    /* Gold color to stand out */
}

/* Active State overrides */
.plan-tab.active {
    background: transparent !important;
    /* Remove background pill */
    color: var(--color-primary) !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    box-shadow: none;
    /* Remove shadow */
    border-bottom: 2px solid var(--color-primary);
    /* Underline style */
}

.mobile-service-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    background: white;
}

.mobile-service-item:last-child {
    border-bottom: none;
}

.mobile-section-title {
    background: #f9f9f9;
    padding: 10px 15px;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-primary);
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin-top: 10px;
}

.mobile-service-item.gold-highlight {
    background: #fffbef;
    /* Light gold tint for gold plan items */
}

.mobile-service-item.included .ms-status {
    color: #25D366;
    font-weight: bold;
    font-size: 1.2rem;
}

/* Timeline */
.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding-left: 20px;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 39px;
    height: 100%;
    width: 2px;
    background: #eee;
}

.timeline-item {
    display: flex;
    gap: 2rem;
    margin-bottom: 3rem;
    position: relative;
}

.timeline-number {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-family: var(--font-heading);
    box-shadow: 0 0 0 8px white;
    z-index: 1;
}

.timeline-content {
    background: white;
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    flex-grow: 1;
    border: 1px solid #f0f0f0;
}


/* Accordion */
.accordion-item {
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
    background: white;
}

.accordion-header {
    width: 100%;
    padding: 1.5rem;
    text-align: left;
    background: white;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-primary);
    font-weight: 600;
}

.accordion-body {
    padding: 0 1.5rem 1.5rem 1.5rem;
    color: var(--color-text-main);
    line-height: 1.7;
}

.accordion-header .icon {
    transition: transform 0.3s;
}

.accordion-header.active .icon {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
}

.accordion-header.active {
    background: var(--color-bg-light);
}


/* Forms */
.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-primary);
}

.form-control {
    width: 100%;
    padding: 1rem 1.25rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 1rem;
    background: #fdfdfd;
    transition: all var(--transition-fast);
}

.form-control:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(197, 160, 101, 0.1);
    background: white;
}

/* Tables */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
    border-radius: 8px;
    border: 1px solid #eee;
}

.commission-table {
    width: 100%;
    min-width: 600px;
    /* Force min width to trigger scroll */
    border-collapse: collapse;
}

/* Global Contact Modal */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.open {
    display: flex;
    opacity: 1;
}

.modal-content {
    background: white;
    width: 100%;
    max-width: 500px;
    padding: 2.5rem;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.modal-overlay.open .modal-content {
    transform: translateY(0);
}

.close-modal-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #f0f0f0;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #666;
    transition: all 0.2s;
}

.close-modal-btn:hover {
    background: #e0e0e0;
    color: #333;
}

.modal-title {
    font-family: var(--font-heading);
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    text-align: center;
}

.modal-subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}



/* Cities Comparison Grid */
.city-compare-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
}

@media (max-width: 768px) {
    .city-compare-grid {
        grid-template-columns: 1fr;
    }

    .city-col.featured {
        transform: scale(1);
        margin-bottom: 1rem;
    }
}

.city-col {
    padding: 2.5rem 2rem;
    background: white;
    text-align: center;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: all var(--transition-normal);
}

.city-col:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.city-col.featured {
    background: var(--color-primary);
    /* Malaga Highlight */
    color: white;
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
    border: none;
    z-index: 2;
}

.city-col.featured h3 {
    color: var(--color-accent);
}

.city-col.featured p {
    color: rgba(255, 255, 255, 0.9);
}

.city-col h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}


/* WhatsApp Float */
.floating-whatsapp {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25D366;
    color: white;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    z-index: 999;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.floating-whatsapp svg {
    width: 32px;
    height: 32px;
}

.floating-whatsapp:hover {
    transform: scale(1.1) rotate(10deg);
}

@media (max-width: 768px) {
    .floating-whatsapp {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 15px;
        /* Adjusted to prevent clipping */
    }

    .floating-whatsapp svg {
        width: 26px;
        height: 26px;
    }
}

/* Animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Content Visibility Utilities */
.is-landing .hide-on-landing {
    display: none !important;
}

.is-subpage .hide-on-subpage {
    display: none !important;
}

/* Back to Home Button */
.back-home-container {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-light);
    font-weight: 500;
    transition: all var(--transition-fast);
}

.btn-back:hover {
    color: var(--color-primary);
    transform: translateX(-3px);
    background-color: rgba(0, 0, 0, 0.02);
}

/* Interactive Call Button */
.btn-call.active-call {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
    color: white !important;
}

/* Footer Fixes */
footer h4 {
    color: white !important;
    margin-bottom: 1.5rem;
}

/* About Section Buffer */
.about-section {
    padding-top: 9rem;
    /* Increased buffer */
}

@media (max-width: 768px) {
    .about-section {
        padding-top: 6rem;
        /* Increased mobile buffer */
    }
}

/* Hero Widget Title */
.hero-widget-title {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.5rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Referral Commission Section */
.commission-section {
    max-width: 900px;
    margin: 4rem auto;
}

.commission-container {
    padding: 2.5rem;
    border-radius: var(--border-radius);
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-sm);
}

.table-responsive {
    overflow-x: auto;
    width: 100%;
    margin-bottom: 1rem;
}

.commission-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
    table-layout: fixed;
    /* Ensure table doesn't squish on mobile */
}

/* Widths: Zone wider, others equal */
.commission-table th:first-child,
.commission-table td:first-child {
    width: 25%;
}

.commission-table th {
    text-align: center;
    padding: 1rem 0.5rem;
    border-bottom: 2px solid var(--color-primary);
    color: var(--color-primary);
    font-weight: 600;
    white-space: nowrap;
    font-size: 0.95rem;
}

.commission-table th:first-child {
    text-align: left;
    padding-left: 1rem;
}

.commission-table td {
    padding: 1rem 0.5rem;
    border-bottom: 1px solid #eee;
    color: var(--color-text-main);
    text-align: center;
    vertical-align: middle;
}

.commission-table td:first-child {
    text-align: left;
    padding-left: 1rem;
    font-weight: 500;
}

.commission-table td.amount {
    font-weight: 700;
    color: var(--color-accent);
    font-size: 1.1rem;
}

.commission-details h5 {
    color: var(--color-primary);
    margin-bottom: 1rem;
    font-size: 1.1rem;
    border-left: 3px solid var(--color-accent);
    padding-left: 1rem;
}

.commission-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.commission-details ul li {
    margin-bottom: 0.8rem;
    line-height: 1.6;
    color: var(--color-text-light);
    position: relative;
    padding-left: 1.5rem;
}

.commission-details ul li::before {
    content: "•";
    color: var(--color-accent);
    position: absolute;
    left: 0;
    font-weight: bold;
}

.examples-list li {
    font-family: monospace;
    background: #f9f9f9;
    padding: 0.8rem 1rem !important;
    /* Override standard padding */
    border-radius: 6px;
    border-left: 3px solid #ddd;
    font-size: 0.9rem;
}

.examples-list li::before {
    content: none !important;
}

@media (max-width: 768px) {
    .commission-container {
        padding: 1.5rem;
    }
}

/* Referral Assets Grid */
.assets-grid {
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .assets-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 3 is too wide for some mobiles */
        gap: 0.5rem;
    }

    .asset-item p {
        font-size: 0.9rem;
    }
}

/* Footer Refactor Styles */
.footer-nav-list li,
.footer-group-list li {
    margin-bottom: 0;
}

.footer-nav-list a {
    text-decoration: none;
    transition: all 0.2s ease;
}

.footer-nav-list a:hover {
    text-decoration: underline;
    opacity: 1;
}

.footer-col h3,
.footer-col h4 {
    color: white;
    font-weight: 600;
}

/* Footer Responsive Grid - 3 Columns (25% | 50% | 25%) */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 3rem;
    align-items: start;
}

@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 3rem;
    }
}

@media (max-width: 576px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 2.5rem;
    }

    .footer-bottom {
        text-align: center;
        margin-top: 3rem !important;
    }
}

/* Service Levels Table */
.service-levels-section {
    margin-top: 4rem;
    margin-bottom: 4rem;
    overflow: hidden;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.service-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 900px;
    /* Ensure scroll on smaller screens */
}

.service-table th {
    background: #fff;
    padding: 1.5rem 1rem;
    text-align: center;
    vertical-align: top;
    border-bottom: 1px solid #eee;
}

.plan-header .plan-name {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.plan-header .plan-price {
    font-size: 1rem;
    color: var(--color-text-main);
    margin-bottom: 1rem;
    min-height: 4.5rem;
    /* Align buttons */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1.3;
}

.plan-header .btn {
    width: 100%;
    border-radius: 8px;
    padding: 0.6rem 0.5rem;
    font-size: 0.85rem;
    white-space: nowrap;
    box-shadow: none;
    border-width: 1px;
}

.plan-header .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Gold Highlight */
.plan-header.gold {
    background: #fffbef;
    /* Subtle gold tint */
    border-top: 4px solid var(--color-accent);
    position: relative;
    padding-top: 2rem;
    /* Make space for badge */
}

.plan-header.gold .plan-name {
    color: var(--color-accent-hover);
    font-size: 1.4rem;
}

.badge-rec {
    position: absolute;
    top: -12px;
    /* Pull it up above the border */
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-accent);
    color: white;
    font-size: 0.75rem;
    padding: 4px 16px;
    border-radius: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 5;
    border: 2px solid white;
}

.old-price {
    text-decoration: line-through;
    font-size: 0.9rem;
    color: #999;
    display: block;
    margin-bottom: 2px;
}

.offer-price {
    color: #d32f2f;
    font-weight: 700;
    font-size: 1.1rem;
    display: block;
}

.price-normal {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-main);
}

/* Table Body - Fixed Layout System */
.service-table {
    table-layout: fixed !important;
    width: 100%;
    border-collapse: collapse;
}

.service-table td {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid #f5f5f5;
    color: var(--color-text-main);
    font-size: 0.9rem;
    vertical-align: middle;
    word-wrap: break-word;
    /* Ensure wrapping */
}

/* Specific Column Styles - Controlled by Colgroup primarily, but enforced here */
.service-table td:first-child,
.service-table th:first-child {
    text-align: left;
    font-weight: 500;
    line-height: 1.4;
    padding-left: 1rem;
    color: var(--color-primary);
    /* Width is handled by colgroup */
}

/* Plan Columns Alignment */
.service-table th.plan-header,
.service-table td.tick,
.service-table td.cross {
    text-align: center;
}

/* Section separators */
.section-row td {
    background: #f8f9fa;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary);
    padding: 1.2rem 1.5rem;
    text-align: left;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    border-top: 1px solid #e0e0e0;
}

/* Ticks and Crosses */
.tick {
    color: #25D366;
    font-size: 1.2rem;
    font-weight: bold;
}

.cross {
    color: #e0e0e0;
    font-size: 1.2rem;
    font-weight: 400;
}

.service-table td:not(:first-child) {
    text-align: center;
}

/* Highlight Gold Column Cells */
td.gold-col {
    background: rgba(197, 160, 101, 0.04);
    border-right: 1px solid rgba(197, 160, 101, 0.08);
    border-left: 1px solid rgba(197, 160, 101, 0.08);
    font-weight: 600;
}

th.gold {
    border-right: 1px solid rgba(197, 160, 101, 0.08);
    border-left: 1px solid rgba(197, 160, 101, 0.08);
}

/* Ticker Rows striped (optional, keeping minimal as requested) */
/* .service-table tr:nth-child(even) td:not(.gold-col) { background: #fafafa; } */

/* Disclaimer */
.table-disclaimer p {
    margin-bottom: 0.3rem;
    font-size: 0.85rem;
    opacity: 0.7;
    font-style: italic;

    color: var(--color-text-light);
}

/* Tooltips */
.service-tooltip-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.tooltip-trigger {
    background: rgba(0, 0, 0, 0.05);
    border: none;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 700;
    transition: all 0.2s;
    padding: 0;
}

.tooltip-trigger:hover,
.tooltip-trigger:focus {
    background: var(--color-primary);
    color: white;
    transform: scale(1.1);
}

.tooltip-content {
    position: absolute;
    bottom: 150%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 260px;
    background: #333;
    color: white;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    pointer-events: none;
}

.tooltip-content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

.tooltip-trigger:hover+.tooltip-content,
.tooltip-trigger:focus+.tooltip-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Adjustments for clipping and badge */
.service-levels-section {
    overflow: visible;
    /* Fix clipping of tooltips and badges */
}

/* Ensure table responsive allows vertical overflow for tooltips if possible, 
   but usually overflow-x:auto clips y. 
   So we might need to rely on the badge being inside the padding. 
   For tooltips inside a scrollable table, they might get clipped. 
   To fix this, on mobile we keep them inside or position carefully.
   On desktop (where we likely don't scroll), it's fine.
*/
/* Ensure table responsive allows vertical overflow for tooltips if possible, 
   but usually overflow-x:auto clips y. 
   So we might need to rely on the badge being inside the padding. 
   On desktop (where we likely don't scroll), we force it visible to avoid internal scrollbars.
*/
.table-responsive {
    overflow: visible !important;
    /* Force visible on desktop to kill scrollbars */
    padding-top: 30px;
    /* Space for the badge sticking out */
    display: block;
    /* Ensure it behaves as a block */
}

.badge-rec {
    top: -28px;
    /* Move up slightly more to look "floating" correctly with the new padding */
}

/* Tooltip Column Adjustment */
.service-table td.tooltip-col {
    width: 40px;
    padding: 0;
    text-align: center;
    vertical-align: middle;
}

.service-table th.tooltip-col-header {
    width: 40px;
}

.service-tooltip-wrapper {
    margin-left: 0;
    /* Remove margin since it's in its own column */
}

.tooltip-content {
    left: 100%;
    /* Open to the right on desktop if possible */
    bottom: auto;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    width: 280px;
}

.tooltip-content::after {
    top: 50%;
    left: 0;
    right: auto;
    bottom: auto;
    margin-top: -6px;
    margin-left: -6px;
    border-color: transparent #333 transparent transparent;
}

/* Ensure tooltip doesn't go off screen on right side, fallback to top if needed 
   Since col is 2nd, right open is good. */


/* MOBILE VIEW STYLES */
.mobile-service-view {
    display: none;
    text-align: left;
}

.mobile-plan-selector {
    position: sticky;
    top: calc(var(--header-height) + 10px);
    z-index: 99;
    background: white;
    padding: 1rem 0;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 12px 12px;
}

.segmented-control {
    display: flex;
    background: #f0f0f0;
    border-radius: 8px;
    padding: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
}

.segmented-control button {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.6rem 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: #666;
    border-radius: 6px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
}

.segmented-control button.active {
    background: white;
    color: var(--color-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-weight: 700;
}

.segmented-control button.active[data-plan="gold"] {
    color: var(--color-accent-hover);
    background: #fffbef;
    border: 1px solid var(--color-accent);
}

.mobile-service-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mobile-section-title {
    font-family: var(--font-heading);
    color: var(--color-primary);
    font-weight: 700;
    margin: 1.5rem 0 0.5rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mobile-service-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.8rem;
    background: #f9f9f9;
    border-radius: 8px;
    gap: 1rem;
    transition: background 0.3s;
}

.mobile-service-item.included {
    background: white;
    border: 1px solid #e0e0e0;
}

.mobile-service-item.included.gold-highlight {
    background: #fffbef;
    border-color: rgba(197, 160, 101, 0.3);
}

.ms-content {
    flex: 1;
}

.ms-name {
    font-size: 0.9rem;
    color: var(--color-text-main);
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    /* Ensure icon and text align */
}

.ms-status {
    flex-shrink: 0;
    width: 24px;
    text-align: right;
    font-size: 1.2rem;
}

/* Remove desktop tooltip margin in mobile list */
.ms-name .service-tooltip-wrapper {
    margin-left: 0;
}

/* Mobile Tooltip Override */
.ms-name .tooltip-content {
    left: 0;
    top: 100%;
    bottom: auto;
    transform: translateY(5px);
    width: 260px;
    z-index: 1000;
}

.ms-name .tooltip-content::after {
    left: 10px;
    top: -6px;
    margin-top: 0;
    border-color: transparent transparent #333 transparent;
}


@media (max-width: 992px) {

    /* Show mobile view on tablet too if table is too wide */
    .table-responsive.service-table-container {
        display: none;
    }

    .mobile-service-view {
        display: block;
    }

    /* Helper to hide disclaimer on mobile initially */
    .hide-on-mobile {
        display: none !important;
    }

    /* Animated Prompt Styles */
    .select-plan-prompt {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--color-primary);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        margin: 1rem 0;
        animation: pulse-text 2s infinite ease-in-out;
    }

    .arrow-icon {
        font-size: 1.2rem;
        display: inline-block;
        animation: bounce-up 1.5s infinite;
    }

    @keyframes pulse-text {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0.5;
        }
    }

    @keyframes bounce-up {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-5px);
        }
    }
}

/* Privacy Modal Specifics */
.privacy-modal-content {
    max-width: 800px;
    width: 90%;
}

.privacy-content {
    line-height: 1.8;
    color: #444;
}

.privacy-content section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
}

.privacy-content section:last-child {
    border-bottom: none;
}

.privacy-content h2 {
    color: var(--color-primary);
    font-size: 1.4rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.privacy-content h3 {
    font-size: 1.1rem;
    color: #333;
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
    font-weight: 600;
}

.privacy-content ul {
    list-style-type: none;
    padding-left: 0;
}

.privacy-content ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}

.privacy-content ul li::before {
    content: "•";
    color: var(--color-accent);
    position: absolute;
    left: 0;
    font-weight: bold;
}

.privacy-content p {
    margin-bottom: 1rem;
}

/* Mobile Table Card View */
@media (max-width: 768px) {
    .referral-table thead {
        display: none;
    }

    .referral-table,
    .referral-table tbody,
    .referral-table tr,
    .referral-table td {
        display: block;
        width: 100%;
        min-width: 0 !important;
        /* Override the 600px default */
        box-sizing: border-box;
    }

    .referral-table tr {
        margin-bottom: 2rem;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
        border: 1px solid #eee;
        padding: 1rem;
    }

    .referral-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.85rem 0;
        border-bottom: 1px solid #f5f5f5;
        text-align: right;
    }

    .referral-table td:last-child {
        border-bottom: none;
    }

    .referral-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #666;
        text-align: left;
        margin-right: 1rem;
    }

    /* Highlight Zone Row (Header of the card) */
    .referral-table td[data-label="Zona"] {
        background: var(--color-bg-light);
        margin: -1rem -1rem 1rem -1rem;
        width: calc(100% + 2rem) !important;
        /* Force full width including negative margins */
        padding: 1rem;
        border-radius: 12px 12px 0 0;
        justify-content: center;
        font-weight: 700;
        color: var(--color-primary);
        font-size: 1.15rem;
        border-bottom: 1px solid #eee;
    }

    .referral-table td[data-label="Zona"]::before {
        display: none;
    }

    /* Remove container background on mobile to avoid "double card" look */
    .commission-container.card-glass {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
    }

    /* Fix font size inconsistencies (override inline styles) */
    .referral-table td,
    .referral-table td.amount {
        font-size: 1rem !important;
        /* Force uniform size */
    }

    /* Ensure small text in "Consultar" still looks okay but consistent */
    .referral-table td[data-label="Edificios (+6)"] {
        color: var(--color-primary) !important;
        /* Make it standard color too maybe? User said "size", implies consistency */
    }
}

/* Mobile Table Scroll */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}

.table-responsive table {
    min-width: 600px;
    /* Ensure table is wide enough to trigger scroll */
}

/* =========================================
   Cookie Consent Banner
   ========================================= */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    padding: 1.5rem;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.4s ease;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: center;
}

.cookie-banner.active {
    transform: translateY(0);
}

.cookie-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    max-width: 1200px;
    width: 100%;
}

.cookie-container p {
    margin: 0;
    font-size: 0.95rem;
    color: #444;
    flex: 1 1 300px;
    line-height: 1.5;
}

.cookie-link {
    color: var(--color-primary);
    text-decoration: underline;
    margin-left: 5px;
    font-weight: 500;
}

.cookie-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* Secondary Banner (if used) */
.cookie-banner .secondary-content {
    text-align: center;
    width: 100%;
}

.cookie-banner .secondary-content h4 {
    margin-bottom: 0.5rem;
    color: var(--color-primary);
}

@media (max-width: 768px) {
    .cookie-container {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .cookie-actions {
        width: 100%;
        justify-content: space-between;
    }

    .cookie-actions .btn {
        flex: 1;
    }
}

/* Fresh Cookie Banner */
.cookie-banner {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    width: 90%;
    max-width: 680px;
    /* Reduced width for "pill" look */
    background: var(--color-bg-glass);
    /* Using variable if technically correct, else fallback */
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    border-radius: 20px;
    padding: 1rem 1.5rem;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Bouncy pop-up */
}

.cookie-banner.active {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}

.cookie-content {
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--color-text-main);
}

.cookie-content a {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: 500;
    transition: color 0.2s;
}

.cookie-content a:hover {
    color: var(--color-accent);
}

.cookie-actions {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.cookie-btn {
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    white-space: nowrap;
    line-height: 1;
}

/* Necessary Button - "En claro" (Light/Ghost) */
.cookie-btn.necessary {
    background: transparent;
    color: var(--color-text-light);
    /* Or primary if preferred */
    border: 1px solid transparent;
    /* Optional border */
}

.cookie-btn.necessary:hover {
    color: var(--color-text-main);
    background: rgba(0, 0, 0, 0.03);
}

/* Accept Button - Green with White Text */
.cookie-btn.accept {
    background-color: var(--color-primary);
    color: white;
    box-shadow: 0 4px 12px rgba(13, 59, 47, 0.2);
    /* Shadow matching primary color */
}

.cookie-btn.accept:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(13, 59, 47, 0.3);
}

@media (max-width: 768px) {
    .cookie-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 1.2rem;
        bottom: 20px;
        width: calc(100% - 40px);
        /* 20px margin each side */
        border-radius: 16px;
    }

    .cookie-content {
        text-align: center;
        font-size: 0.85rem;
    }

    .cookie-actions {
        justify-content: center;
        width: 100%;
        /* Buttons side-by-side on mobile */
        flex-direction: row;
    }

    .cookie-btn {
        flex: 1;
        text-align: center;
        padding: 0.8rem;
        /* Larger touch target */
    }
}