/* Font Import */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
    /* Color Palette */
    --color-primary: #10a396;
    --color-secondary: #036f72;
    --color-accent: #65cbc3;
    --color-bg: #ffffff;
    --color-text: #333333;
    --color-text-light: #666666;
    --color-white: #ffffff;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.05);
    --shadow-hover: 0 10px 30px rgba(16, 163, 150, 0.15);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font-family: inherit;
    border: none;
    cursor: pointer;
}

/* Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    font-weight: 600;
    border-radius: var(--radius-full);
    transition: all 0.3s ease;
    font-size: 1rem;
}

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

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

.btn-whatsapp {
    background-color: #25D366;
    color: var(--color-white);
    gap: 8px;
}

.btn-whatsapp:hover {
    background-color: #1ebc57;
    transform: translateY(-2px);
}

/* Header */
header {
    background-color: var(--color-white);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: var(--shadow-soft);
    padding: 1rem 0;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-container img {
    height: 50px;
    /* Adjust based on logo aspect ratio */
    width: auto;
}

/* Hero Section */
.hero {
    padding-top: 120px;
    /* Space for fixed header */
    padding-bottom: var(--spacing-xl);
    min-height: 90vh;
    /* Almost full screen */
    display: flex;
    align-items: center;
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%), url('images/portada.jpg');
    /* Fallback valid url syntax, will fix image later if needed */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.hero-content {
    max-width: 600px;
    animation: fadeInUp 1s ease-out;
}

.hero h1 {
    color: var(--color-secondary);
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
    font-weight: 700;
}

.hero p {
    color: var(--color-text-light);
    font-size: 1.25rem;
    margin-bottom: var(--spacing-md);
    font-weight: 400;
}

/* Footer */
footer {
    background-color: var(--color-secondary);
    color: var(--color-white);
    padding: var(--spacing-xl) 0 var(--spacing-md);
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.footer-column h3 {
    color: var(--color-accent);
    margin-bottom: var(--spacing-sm);
    font-size: 1.5rem;
}

.footer-column p {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    opacity: 0.9;
}

.footer-column strong {
    color: var(--color-white);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Services Section */
#servicios {
    background-color: #f9fbfb;
    /* Very light tint of the primary color */
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
    padding-top: var(--spacing-md);
}

.service-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

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

.service-image {
    height: 220px;
    width: 100%;
    object-fit: cover;
    object-position: top;
}

.service-content {
    padding: var(--spacing-md);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.service-content h3 {
    color: var(--color-secondary);
    font-size: 1.5rem;
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
}

.service-content p {
    color: var(--color-text-light);
    font-size: 1rem;
    margin-bottom: var(--spacing-sm);
    flex-grow: 1;
}

.service-link {
    color: var(--color-primary);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
}

.service-link:hover {
    color: var(--color-secondary);
}

/* Map Section */
.map-section {
    width: 100%;
    padding: var(--spacing-md);
    background-color: var(--color-bg);
}

.map-container {
    width: 100%;
    height: 450px;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    :root {
        --spacing-md: 1.5rem;
        --spacing-lg: 2.5rem;
        --spacing-xl: 4rem;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .hero p {
        font-size: 1.1rem;
    }

    .footer-content {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .map-container {
        height: 350px;
    }
}

/* Animations & Polish */
html {
    scroll-behavior: smooth;
}

.btn {
    position: relative;
    overflow: hidden;
}

.btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn:hover::after {
    width: 300px;
    height: 300px;
}

/* Page Specific Styles */
.page-hero {
    min-height: 30vh;
    /* Compact height */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(135deg, #ffffff 0%, #e0f2f1 100%);
    /* Clean light teal gradient */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.services-detail-section {
    padding: var(--spacing-xl) 0;
    background-color: #f9fbfb;
}

.service-category {
    background: white;
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    margin-bottom: var(--spacing-md);
}

.service-category h2 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: 10px;
}

.service-list {
    list-style: none;
    margin-left: 1rem;
}

.service-list li {
    position: relative;
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    color: var(--color-text);
}

.service-list li::before {
    content: '•';
    color: var(--color-accent);
    font-weight: bold;
    font-size: 1.5rem;
    position: absolute;
    left: 0;
    top: -5px;
}

.two-col-list {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .two-col-list {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-md);
    }
}

/* Job Vacancy Styles */
.job-card-container {
    max-width: 800px;
    margin: 0 auto;
}

.job-card {
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    border: 1px solid #eee;
}

.job-header {
    background-color: var(--color-primary);
    color: white;
    padding: var(--spacing-md);
}

.job-header h3 {
    margin: 0;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.badge {
    background-color: var(--color-accent);
    color: var(--color-secondary);
    font-size: 0.8rem;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-weight: 700;
    text-transform: uppercase;
}

.job-location {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 5px;
    opacity: 0.9;
}

.job-body {
    padding: var(--spacing-md);
}

.alert-box.warning {
    background-color: #fff3e0;
    border-left: 4px solid #ff9800;
    padding: 1rem;
    margin-bottom: var(--spacing-md);
    border-radius: 4px;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.alert-box.warning ion-icon {
    font-size: 1.5rem;
    color: #ff9800;
    flex-shrink: 0;
}

.requirements-section,
.offer-section {
    margin-bottom: var(--spacing-md);
}

.requirements-section h4,
.offer-section h4 {
    color: var(--color-secondary);
    margin-bottom: 1rem;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.requirements-list,
.offer-list {
    list-style: none;
    padding-left: 0.5rem;
}

.requirements-list li,
.offer-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}

.requirements-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: bold;
}

.offer-list li::before {
    content: '★';
    position: absolute;
    left: 0;
    color: var(--color-accent);
}

.job-actions {
    text-align: center;
    margin-top: var(--spacing-lg);
    background-color: #f9fbfb;
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
}

.job-actions p {
    margin-bottom: 1rem;
    color: var(--color-text-light);
}

/* Accordion Styles (Ensuring they are present for new page usage) */
.accordion {
    max-width: 900px;
    /* Slightly wider for better card fit */
    width: 100%;
    margin: 0 auto;
}

.accordion-item {
    background: #ffffff;
    border: 1px solid #b2dfdb;
    /* Soft teal border */
    border-radius: 8px;
    margin-bottom: 15px;
    /* More spacing */
    overflow: hidden;
    transition: all 0.3s ease;
    width: 100%;
    /* Ensure full width */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.accordion-item.active {
    box-shadow: 0 8px 25px rgba(38, 166, 154, 0.15);
    /* Soft teal shadow */
    border-color: var(--color-primary);
}

.accordion-header {
    padding: 18px 25px;
    /* Larger click area */
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #e0f2f1;
    /* Light teal background for the box look */
    transition: background 0.3s ease;
    border-bottom: 1px solid transparent;
}

.accordion-header:hover {
    background: #b2dfdb;
    /* Slightly darker on hover */
}

.accordion-item.active .accordion-header {
    background: var(--color-primary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.accordion-header h3 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--color-primary);
    /* Primary text color */
    font-weight: 600;
}

.accordion-item.active .accordion-header h3 {
    color: #ffffff;
    /* White text when active */
}

.accordion-icon {
    font-size: 1.3rem;
    color: var(--color-primary);
    transition: transform 0.3s ease;
}

.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
    color: #ffffff;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background: #fff;
}

.accordion-body {
    padding: 20px;
    color: var(--color-text);
}

/* Join Team Section */
.join-team-section {
    padding: var(--spacing-xl) 0;
    background-color: rgba(16, 163, 150, 0.08);
    /* Brand color #10A396 with low opacity */
    text-align: center;
}

.join-content h2 {
    color: var(--color-secondary);
    font-size: 2.5rem;
    margin-bottom: var(--spacing-sm);
}

.join-content p {
    color: var(--color-text-light);
    font-size: 1.2rem;
    margin-bottom: var(--spacing-md);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.join-content .btn ion-icon {
    font-size: 1.2rem;
    margin-right: 8px;
}

/* Main Navigation */
.main-nav ul {
    display: flex;
    list-style: none;
    gap: 20px;
}

.main-nav a {
    text-decoration: none;
    color: var(--color-text);
    font-weight: 500;
    transition: color 0.3s ease;
    font-size: 1rem;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--color-primary);
    font-weight: 700;
}

@media (max-width: 768px) {
    .main-nav {
        display: none;
        /* Mobile menu implementation usually requires JS, hiding for now or simplify */
        /* For MVP: simple stack or hide. Let's stack them for simple mobile view if requested, implies desktop focus first. 
           We will keep it hidden on very small screens or make it wrap. 
           Actually, let's make it wrap/stack for basic responsiveness. */
        display: block;
        width: 100%;
        margin: 10px 0;
    }

    .main-nav ul {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    header .container {
        flex-direction: column;
        gap: 1rem;
    }
}

/* Blog Styles */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
}

.blog-card {
    background: white;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

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

.blog-img-container {
    height: 200px;
    overflow: hidden;
}

.blog-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-content {
    padding: var(--spacing-md);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.blog-content h3 {
    color: var(--color-secondary);
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
}

.blog-content p {
    color: var(--color-text-light);
    font-size: 0.95rem;
    margin-bottom: 1rem;
    flex-grow: 1;
}

.btn-read-more {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
}

.btn-read-more:hover {
    color: var(--color-secondary);
}

/* About Section */
.about-section {
    padding: var(--spacing-xl) 0;
    background-color: var(--color-white);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    align-items: center;
}

@media (min-width: 768px) {
    .about-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.about-image {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.about-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.about-image:hover img {
    transform: scale(1.03);
}

.section-title {
    color: var(--color-secondary);
    font-size: 2.5rem;
    margin-bottom: var(--spacing-md);
    position: relative;
    padding-bottom: 10px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background-color: var(--color-primary);
}

.about-intro {
    font-size: 1.1rem;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
}

.mission-vision {
    display: grid;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.mv-item h3 {
    color: var(--color-secondary);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0.5rem;
}

.mv-item h3 ion-icon {
    color: var(--color-primary);
}

.mv-item p {
    font-size: 0.95rem;
    color: var(--color-text-light);
    padding-left: 1.8rem;
}

/* =========================================
   MOBILE OPTIMIZATION & HAMBURGER MENU
   ========================================= */

/* Global Image Responsiveness */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Nav Toggle Button (Hidden on Desktop) */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--color-primary);
    cursor: pointer;
    padding: 5px;
}

/* Mobile Media Queries */
@media (max-width: 768px) {

    /* Header Layout */
    header .container {
        flex-wrap: wrap;
        /* Allow wrapping for menu */
        position: relative;
    }

    .logo-container {
        flex-grow: 1;
        /* Pushes toggle to right if needed, or justify-between handles it */
    }

    /* Show Hamburger Button */
    .nav-toggle {
        display: block;
        position: absolute;
        right: var(--spacing-md);
        top: 22px;
        /* Adjusted manually for alignment */
    }

    /* Hide Desktop Menu by default */
    .main-nav {
        display: none;
        /* Hidden initially */
        width: 100%;
        margin-top: 1rem;
        background-color: var(--color-white);
        border-top: 1px solid #eee;
        padding-bottom: 1rem;
    }

    /* Active State for Menu (Toggled via JS) */
    .main-nav.active {
        display: block;
        animation: slideDown 0.3s ease-out;
    }

    .main-nav ul {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        padding-top: 1rem;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

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

    /* Force Vertical Stacking for Grids */
    .services-grid,
    .blog-grid,
    .about-grid,
    .values-grid,
    .director-card {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
    }

    /* Director Card Specifics */
    .director-card {
        text-align: center !important;
        gap: var(--spacing-md) !important;
    }

    .director-image {
        margin: 0 auto var(--spacing-md) auto !important;
    }

    /* Adjust Spacing */
    :root {
        --spacing-md: 1.5rem;
        --spacing-xl: 3rem;
    }
}


/* =========================================
   SEARCH FEATURE STYLES
   ========================================= */
.search-wrapper {
    max-width: 600px;
    margin: var(--spacing-md) auto 0;
    position: relative;
    display: flex;
    align-items: center;
}

.search-wrapper input {
    width: 100%;
    padding: 15px 20px 15px 50px;
    /* Left padding for icon */
    border: 2px solid #e0e0e0;
    border-radius: var(--radius-full);
    font-size: 1rem;
    font-family: inherit;
    outline: none;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-soft);
}

.search-wrapper input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(16, 163, 150, 0.1);
}

.search-wrapper ion-icon {
    position: absolute;
    left: 20px;
    font-size: 1.2rem;
    color: var(--color-text-light);
}

#noResults {
    text-align: center;
    padding: var(--spacing-md);
    color: var(--color-text-light);
    font-style: italic;
    background: #f9f9f9;
    border-radius: var(--radius-md);
    margin-top: var(--spacing-md);
}


/* =========================================
   PROMO BANNER STYLES
   ========================================= */
.promo-bar {
    background: linear-gradient(135deg, #e0f7fa 0%, #80cbc4 100%);
    /* Summer feel teal gradient */
    padding: 15px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    font-size: 0.95rem;
    color: var(--color-text);
}

.promo-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.promo-content {
    flex: 1;
}

.promo-title {
    font-weight: bold;
    color: #00695c;
    font-size: 1.1rem;
    display: inline-block;
    margin-right: 10px;
}

.promo-subtitle {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 8px;
    color: #004d40;
}

.promo-details-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 8px 0;
    font-size: 0.85rem;
}

.promo-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 15px;
}

.promo-list li {
    display: flex;
    align-items: center;
    gap: 5px;
}

.promo-list ion-icon {
    color: var(--color-primary);
}

.promo-pricing {
    background: rgba(255, 255, 255, 0.6);
    padding: 5px 12px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-right: 15px;
}

.old-price {
    text-decoration: line-through;
    color: #777;
    font-size: 0.9rem;
}

.new-price {
    font-weight: bold;
    color: #e53935;
    /* Red highlight for deal */
    font-size: 1.1rem;
}

.promo-benefit {
    font-size: 0.85rem;
    font-style: italic;
    color: #004d40;
    margin-top: 5px;
}

.promo-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    text-align: right;
}

.btn-promo {
    background-color: var(--color-primary);
    color: white;
    padding: 8px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
    transition: transform 0.2s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.btn-promo:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.promo-validity {
    font-size: 0.75rem;
    opacity: 0.8;
}

@media (max-width: 992px) {
    .promo-container {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .promo-actions {
        align-items: flex-start;
        width: 100%;
        margin-top: 10px;
        text-align: left;
    }

    .promo-list {
        flex-direction: column;
        gap: 5px;
    }
}


/* =========================================
   PROMO MODAL STYLES (Pastel & Boxed)
   ========================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(2px);
    /* Subtle blur effect */
}

.modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: #ffffff;
    padding: 0;
    /* Remove padding here, use inner containers */
    border-radius: 20px;
    /* Softer rounded corners */
    width: 90%;
    max-width: 480px;
    position: relative;
    box-shadow: 0 15px 35px rgba(16, 163, 150, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(20px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Bouncy pop effect */
    text-align: center;
    border: 4px solid #e0f2f1;
    /* Pastel border frame */
    overflow: hidden;
}

.modal-overlay.show .modal-content {
    transform: translateY(0) scale(1);
}

.modal-header {
    background: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 100%);
    /* Pastel Green/Teal */
    padding: 25px 20px;
    color: #004d40;
}

.modal-header h3 {
    color: #00695c;
    margin-bottom: 8px;
    font-size: 1.4rem;
    font-weight: 700;
}

.modal-header p {
    font-size: 0.95rem;
    color: #004d40;
    margin: 0;
    opacity: 0.9;
}

.modal-body {
    padding: 25px;
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #00695c;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.9);
}

.modal-list {
    flex-direction: column;
    align-items: flex-start;
    margin: 0 auto 20px;
    background: #fcfdfe;
    /* Very light cool white */
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #e0f2f1;
    text-align: left;
}

.modal-list li {
    margin-bottom: 8px;
    color: #555;
    font-size: 0.9rem;
}

.modal-list li:last-child {
    margin-bottom: 0;
}

.modal-price-box {
    margin: 20px 0;
    background: #fff8e1;
    /* Pastel Yellow specific for price highlight */
    padding: 15px;
    border-radius: 12px;
    border: 1px dashed #ffe082;
}

.modal-price-box .old-price {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.modal-price-box .new-price {
    font-size: 1.8rem;
    color: #e53935;
    display: block;
    line-height: 1.2;
}

.benefit-tag {
    font-size: 0.85rem;
    color: #f57f17;
    margin-top: 8px;
    font-weight: 600;
}

.btn-block {
    display: block;
    width: 100%;
    padding: 14px;
    font-size: 1.1rem;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(16, 163, 150, 0.3);
}

.btn-block:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 163, 150, 0.4);
}

.modal-note {
    margin-top: 15px;
    font-size: 0.75rem;
    color: #90a4ae;
    text-transform: uppercase;
    letter-spacing: 1px;
}