:root {
    /* Colors inspired by the flyer gradient reference */
    --primary-red: #c62828;
    --primary-orange: #f57f17;
    --gold: #ffd740;
    --text-dark: #212121;
    --text-light: #f5f5f5;
    --paper-bg: #fff8e1;

    --font-heading: 'Playfair Display', serif;
    --font-body: 'Raleway', sans-serif;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-soft: 0 10px 30px rgba(0,0,0,0.1);
    --shadow-hard: 8px 8px 0 rgba(0,0,0,0.2);
}

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

body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--text-dark);
    /* Reference gradient logic */
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }

h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: 700;
}

/* --- Components --- */

.section-title {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 3rem;
    color: var(--primary-red);
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}

.section-title::after {
    content: '';
    display: block;
    width: 60%;
    height: 4px;
    background: linear-gradient(to right, var(--primary-red), var(--primary-orange)), url('../images/texture_red.png');
    margin: 10px auto 0;
}

.btn-primary {
    background: linear-gradient(45deg, var(--primary-red), var(--primary-orange));
    color: #fff;
    padding: 1rem 3rem;
    font-size: 1.2rem;
    text-transform: uppercase;
    font-weight: bold;
    border: none;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(198, 40, 40, 0.4);
    transition: var(--transition);
    border-radius: 50px; /* Modern rounded */
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(198, 40, 40, 0.6);
}

/* --- Header (SIMPLIFIED V2) --- */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px; /* Fixed height */
    background-color: #ffffff; /* Solid white, no transparency glitches */
    border-bottom: 2px solid #f5f5f5; /* Subtle border instead of shadow for performance */
    z-index: 9999;
}

.navbar {
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-logo {
    height: 45px; /* Desktop standard */
    width: auto;
    display: block;
}

/* Navigation Links (Desktop) */
.nav-links {
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-links a {
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-dark);
    letter-spacing: 1px;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--primary-red);
}

.btn-cta-nav {
    padding: 8px 20px;
    background-color: var(--primary-red);
    color: #fff !important;
    border-radius: 4px;
}

.btn-cta-nav:hover {
    background-color: var(--primary-orange);
}

.hamburger {
    display: none; /* Hidden on desktop */
}

/* --- Hero Images (Restored) --- */
.hero-logo-img {
    height: 320px; /* Desktop size */
    width: auto;
    margin-bottom: 1.5rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
    animation: simpleFloat 4s ease-in-out infinite;
}

@keyframes simpleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.offer-emoji {
    font-size: 4rem;
    display: block;
    margin-bottom: 1rem;
}

.offer-card:hover .offer-emoji {
    transform: scale(1.2) rotate(10deg);
}

/* Navigation Styles cleared for rewrite */

/* --- Hero Section --- */

.hero-section {
    min-height: 100vh;
    /* Gradient inspired by flyer colors, with logohero.png as background */
    background: linear-gradient(rgba(255, 236, 179, 0.9), rgba(239, 108, 0, 0.8)), url('../images/logohero.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 80px;
    position: relative;
    overflow: hidden;
}

/* Abstract shapes to add visual interest without using the specific flyer image */
.hero-section::before {
    content: '';
    position: absolute;
    top: -10%;
    right: -10%;
    width: 50vw;
    height: 50vw;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    padding: 2rem;
}

.hero-title {
    font-size: 5rem;
    color: #fff;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.2);
    margin-bottom: 0.5rem;
    line-height: 1.1;
}

.hero-subtitle {
    font-size: 1.5rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 2rem;
    font-weight: 300;
}

.hero-text {
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 3rem;
    font-style: italic;
    opacity: 0.9;
}

/* --- Offer --- */

.section { padding: 100px 0; }

.offer-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.offer-card {
    background: #fff;
    padding: 2rem;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: var(--transition);
    border: 1px solid rgba(0,0,0,0.05);
    flex: 1 1 300px; /* Flex items grow and shrink, min-width 300px */
    max-width: 400px; /* Prevent them from becoming too wide on large screens */
}

.offer-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--gold);
}

.offer-icon {
    font-size: 2.5rem;
    color: var(--primary-orange);
    margin-bottom: 1rem;
    background: #fff3e0;
    width: 80px;
    height: 80px;
    line-height: 80px;
    border-radius: 50%;
}

/* --- Contact Section & Enhanced Form --- */

.contact-section {
    background: #fff;
    position: relative;
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Uneven split */
    gap: 4rem;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
    overflow: hidden;
    margin: 2rem 0;
}

.contact-info {
    background: linear-gradient(rgba(198, 40, 40, 0.9), rgba(245, 127, 23, 0.9)), url('../images/texture_red.png');
    background-size: cover;
    color: #fff;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.info-item {
    margin-bottom: 2.5rem;
    display: flex;
    align-items: center;
    font-size: 1.1rem;
}

.info-item i {
    font-size: 1.5rem;
    margin-right: 1.5rem;
    background: rgba(255,255,255,0.2);
    padding: 10px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 30px; /* vertically align icon */
}

/* Enhanced Form Design */
.contact-form {
    padding: 3rem;
    background: #fff;
}

.contact-form h3 {
    margin-bottom: 2rem;
    color: var(--text-dark);
    font-size: 1.8rem;
}

.form-group {
    margin-bottom: 1.5rem;
    position: relative;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #666;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    background: #f9f9f9;
    border: 2px solid #eee;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus {
    background: #fff;
    border-color: var(--primary-orange);
    outline: none;
    box-shadow: 0 0 0 4px rgba(245, 127, 23, 0.1);
}

.btn-submit {
    width: 100%;
    padding: 1rem;
    background: var(--text-dark);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.btn-submit:hover {
    background: var(--primary-red);
    transform: translateY(-2px);
}

.form-status { margin-top: 1rem; text-align: center; }
.success { color: green; font-weight: bold; }
.error { color: red; font-weight: bold; }

/* Footer */
.main-footer {
    background: var(--text-dark);
    color: #888;
    text-align: center;
    padding: 2rem;
}

/* Responsive */
@media (max-width: 992px) {
    .contact-wrapper {
        grid-template-columns: 1fr;
    }
    .hero-title { font-size: 3.5rem; }
}

/* --- Floating Call Button (Mobile) --- */
.floating-call-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(45deg, var(--primary-red), var(--primary-orange)); /* Theme gradient */
    color: white;
    padding: 15px 25px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(198, 40, 40, 0.4);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1000;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1rem;
    transition: transform 0.3s;
    animation: pulse 2s infinite;
}

.floating-call-btn:hover {
    transform: scale(1.05);
}

.floating-call-btn i {
    font-size: 1.2rem;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(198, 40, 40, 0.7); } /* Red pulse */
    70% { box-shadow: 0 0 0 15px rgba(198, 40, 40, 0); }
    100% { box-shadow: 0 0 0 0 rgba(198, 40, 40, 0); }
}

/* --- Responsive Styles (Mobile Specific) --- */
@media (max-width: 768px) {
    /* Stabilize header to prevent jumping during scroll */
    .main-header {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        backface-visibility: hidden;
    }

    /* Reduce header logo size on mobile to not overlap hamburger */
    .header-logo {
        height: 40px; 
    }

    /* Increase hamburger size for better touch target */
    .hamburger {
        display: block;
        font-size: 2rem; /* Increased size */
        padding: 10px; /* Bigger touch area */
        color: var(--primary-red);
    }
    
    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        flex-direction: column;
        padding: 2rem;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        display: none;
    }
    
    .nav-links.active { display: flex; }

    .hero-title { font-size: 3rem; }
    
    /* Adjust hero logo for mobile - INCREASED per request */
    .hero-logo-img { height: 180px; } /* Increased from 120px to make silhouette visible */
}

/* Hide floating button on desktop if desired, or keep it. 
   User asked for it "on mobile", usually suggests hiding on desktop 
   but it's useful everywhere. Let's keep it visible or hide? 
   "przycisk ... ktory bedzie przekirowywac do wykonania telefonu ju na komorce" 
   suggests mobile priority. Let's hide on large screens to be safe/cleaner */
@media (min-width: 993px) {
    .floating-call-btn {
        display: none;
    }
}

/* Spanish Decorative Elements */
.section::before {
    content: '💃'; /* Dancer emoji as a watermark */
    position: absolute;
    top: -20px;
    right: 20px;
    font-size: 8rem;
    opacity: 0.1;
    transform: rotate(15deg);
    pointer-events: none;
    z-index: 0;
}

.section::after {
    content: '🌹'; /* Rose emoji */
    position: absolute;
    bottom: -20px;
    left: 20px;
    font-size: 6rem;
    opacity: 0.1;
    transform: rotate(-15deg);
    pointer-events: none;
    z-index: 0;
}

/* Specific adjustments for different sections to vary the icons */
.offer-section::before { content: '☀️'; } /* Sun */
.offer-section::after { content: '🥘'; } /* Paella/Food */

.contact-section::before { content: '🐂'; font-size: 10rem; opacity: 0.05; } /* Bull */
.contact-section::after { content: '🌵'; } /* Cactus */

/* Smooth fade in for elements */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.offer-card {
    animation: fadeIn 0.5s ease-out forwards;
}

/* Stagger animations for cards */
.offer-card:nth-child(1) { animation-delay: 0.1s; }
.offer-card:nth-child(2) { animation-delay: 0.2s; }
.offer-card:nth-child(3) { animation-delay: 0.3s; }
.offer-card:nth-child(4) { animation-delay: 0.4s; }
.offer-card:nth-child(5) { animation-delay: 0.5s; }
.offer-card:nth-child(6) { animation-delay: 0.6s; }
.offer-card:nth-child(7) { animation-delay: 0.7s; }
.offer-card:nth-child(8) { animation-delay: 0.8s; }


/* Radio Group Styling */
.radio-group {
    display: flex;
    gap: 2rem;
    padding: 0.5rem 0;
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 400;
    cursor: pointer;
    text-transform: none; /* Override uppercase label style */
}

.radio-group input[type='radio'] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary-orange);
    cursor: pointer;
}

/* Select Styling */
select {
    width: 100%;
    padding: 1rem;
    padding-right: 2.5rem;
    background-color: #f9f9f9;
    border: 2px solid #eee;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: var(--transition);
    cursor: pointer;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23333%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3e%3cpolyline points=%226 9 12 15 18 9%22%3e%3c/polyline%3e%3c/svg%3e');
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
    appearance: none;
}

select:focus {
    background-color: #fff;
    border-color: var(--primary-orange);
    outline: none;
    box-shadow: 0 0 0 4px rgba(245, 127, 23, 0.1);
}


/* --- About Me Section --- */
.about-section {
    background: #fff;
    position: relative;
    overflow: hidden;
}

.about-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 0 1rem;
}

.about-text h3 {
    font-size: 1.8rem;
    color: var(--primary-orange);
    margin-bottom: 2rem;
    font-weight: 700;
}

.about-text p {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.about-text strong {
    color: var(--primary-red);
}

.about-text .signature {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--text-dark);
    margin-top: 3rem;
    font-style: italic;
    background: linear-gradient(120deg, rgba(255, 215, 64, 0.4) 0%, rgba(255, 215, 64, 0) 100%);
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    transform: rotate(-2deg);
}

/* Add custom icons for About section */
.about-section::before { content: '❤️'; }
.about-section::after { content: '🎸'; }


/* --- MOBILE FIXES OVERRIDES --- */
@media (max-width: 768px) {
    /* Stabilize Header */
    .main-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 60px !important;
        overflow: hidden !important;
        transform: translateZ(0) !important;
    }

    /* Force small header logo */
    .header-logo {
        height: 35px !important;
        width: auto !important;
        margin-top: 5px !important;
    }

    /* Enlarge hero dancer image */
    .hero-logo-img {
        height: 280px !important;
    }

    /* Position hamburger */
    .hamburger {
        top: 5px !important; 
        right: 15px !important;
    }
}


/* --- Floating Call Button (Base) --- */
.floating-call-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(45deg, var(--primary-red), var(--primary-orange));
    color: white;
    padding: 15px 25px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(198, 40, 40, 0.4);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1000;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1rem;
    transition: transform 0.3s;
    animation: pulse 2s infinite;
}

.floating-call-btn:hover {
    transform: scale(1.05);
}

.floating-call-btn i {
    font-size: 1.2rem;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(198, 40, 40, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(198, 40, 40, 0); }
    100% { box-shadow: 0 0 0 0 rgba(198, 40, 40, 0); }
}

/* Spanish Decorative Elements */
.section::before {
    content: '💃'; 
    position: absolute;
    top: -20px;
    right: 20px;
    font-size: 8rem;
    opacity: 0.1;
    transform: rotate(15deg);
    pointer-events: none;
    z-index: 0;
}

.section::after {
    content: '🌹'; 
    position: absolute;
    bottom: -20px;
    left: 20px;
    font-size: 6rem;
    opacity: 0.1;
    transform: rotate(-15deg);
    pointer-events: none;
    z-index: 0;
}

/* Specific adjustments */
.offer-section::before { content: '☀️'; }
.offer-section::after { content: '🥘'; }
.contact-section::before { content: '🐂'; font-size: 10rem; opacity: 0.05; }
.contact-section::after { content: '🌵'; }

/* Smooth fade in */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.offer-card {
    animation: fadeIn 0.5s ease-out forwards;
}

/* Stagger animations */
.offer-card:nth-child(1) { animation-delay: 0.1s; }
.offer-card:nth-child(2) { animation-delay: 0.2s; }
.offer-card:nth-child(3) { animation-delay: 0.3s; }
.offer-card:nth-child(4) { animation-delay: 0.4s; }
.offer-card:nth-child(5) { animation-delay: 0.5s; }
.offer-card:nth-child(6) { animation-delay: 0.6s; }
.offer-card:nth-child(7) { animation-delay: 0.7s; }
.offer-card:nth-child(8) { animation-delay: 0.8s; }

/* Form Styles */
.radio-group {
    display: flex;
    gap: 2rem;
    padding: 0.5rem 0;
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 400;
    cursor: pointer;
    text-transform: none;
}

.radio-group input[type='radio'] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary-orange);
    cursor: pointer;
}

select {
    width: 100%;
    padding: 1rem;
    padding-right: 2.5rem;
    background-color: #f9f9f9;
    border: 2px solid #eee;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: var(--transition);
    cursor: pointer;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23333%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3e%3cpolyline points=%226 9 12 15 18 9%22%3e%3c/polyline%3e%3c/svg%3e');
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
    appearance: none;
}

select:focus {
    background-color: #fff;
    border-color: var(--primary-orange);
    outline: none;
    box-shadow: 0 0 0 4px rgba(245, 127, 23, 0.1);
}

/* About Me Section */
.about-section {
    background: #fff;
    position: relative;
    overflow: hidden;
}

.about-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 0 1rem;
}

.about-text h3 {
    font-size: 1.8rem;
    color: var(--primary-orange);
    margin-bottom: 2rem;
    font-weight: 700;
}

.about-text p {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.about-text strong {
    color: var(--primary-red);
}

.about-text .signature {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--text-dark);
    margin-top: 3rem;
    font-style: italic;
    background: linear-gradient(120deg, rgba(255, 215, 64, 0.4) 0%, rgba(255, 215, 64, 0) 100%);
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    transform: rotate(-2deg);
}

.about-section::before { content: '❤️'; }
.about-section::after { content: '��'; }