@font-face {
    font-family: 'Bobby Jon';
    src: url('fonts/BOBBY JONES SOFT.OTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Font Keycard';
    src: url('fonts/TCS-4KEYCARD.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bubblegum';
    src: url('fonts/BUBBLEGUM.TTF') format('truetype');
    font-weight: 700; /* Headers are often bold */
    font-style: normal;
}

:root {
    --color-primary-gold: #f7e6a7; /* Main background color */
    --color-dark-blue: #304e90; /* Movies lineup background */
    --color-red: #d14643; /* Book tickets section background */
    --color-text-dark: #333;
    --color-text-light: #fff;
    --color-pricing-bg: #806859; /* Card background color */
    --color-button-gold: #f8c946; /* Gold button color */
    --color-tag-green: #599c51;
    --color-tag-red: #cc4f56;
    --color-tag-blue: #4079a4;
    --color-background: #efedce
}

/* Global Styles and Reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Bobby Jon', sans-serif;
    background-color: var(--color-background);
    color: var(--color-text-dark);
    text-align: center;
    padding-bottom: 50px; /* Space for the bottom bar */
}

/* --- Header Section (Top Bar) --- */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5%;
    background-color: var(--color-dark-blue);
    color: var(--color-text-light);
    font-family: 'Bobby Jon', sans-serif;
    font-weight: 700;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 2px black solid;
}

.logo {
    font-size: 1.5rem;
}

.lang-nav a {
    color: var(--color-text-light);
    text-decoration: none;
    padding: 5px;
    margin: 0 5px;
    border-radius: 5px;
    font-size: 0.9rem;
}

.lang-nav .active {
    background-color: var(--color-button-gold);
    color: var(--color-text-dark);
    font-weight: 700;
}

.register-btn {
    background-color: var(--color-button-gold);
    color: var(--color-text-dark);
    border: none;
    padding: 8px 15px;
    font-family: 'Bobby Jon', sans-serif;
    font-weight: 700;
    cursor: pointer;
    border-radius: 5px;
}

/* --- Main Menu Section --- */
.main-menu {
    background-color: var(--color-background);
    padding: 15px 0;
    font-family: 'Bobby Jon', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--color-text-dark);
    padding-top: 80px;
}

.main-menu a {
    color: var(--color-text-dark);
    text-decoration: none;
    margin: 0 5px;
}

/* --- Pricing Section --- */
.pricing-section {
    padding: 40px 0;
}

.pricing-title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-red);
    margin-bottom: 30px;
    letter-spacing: 2px;
    -webkit-text-stroke: 2px black;
}

.pricing-cards {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 0 5%;
}

.card {
    background-color: var(--color-pricing-bg);
    color: var(--color-text-light);
    padding: 20px 40px;
    border-radius: 10px;
    width: 40%;
    max-width: 400px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border: 3px solid black; /* Outline */
}

.card h2 {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.price {
    font-family: 'Bobby Jon', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--color-button-gold); /* Price color */
}

.note {
    font-size: 0.8rem;
    font-style: italic;
}

/* --- Movies Lineup Section --- */
.movies-lineup-section {
    background-color: var(--color-dark-blue);
    padding: 40px 5%;
    margin: 30px auto;
    width: 90%;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.lineup-title {
    font-size: 2.5rem;
    color: var(--color-red);
    -webkit-text-stroke: 2px black;
    margin-bottom: 5px;
}

.lineup-subtitle {
    color: var(--color-button-gold);
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 25px;
}

.movies-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    text-align: left;
}

.movie-card {
    position: relative;
    background-color: var(--color-dark-blue);
    color: var(--color-text-light);
    text-align: center;
    
    /* Set a maximum width to constrain the poster size */
    max-width: 250px; /* Adjust this value (e.g., 200px, 250px) as needed */
    /* Center the card within its new grid cell */
    justify-self: center; 
}

.day-tag {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-pricing-bg); /* Default tag color */
    color: var(--color-text-light);
    font-family: 'Bobby Jon', sans-serif;
    font-size: 0.8rem;
    padding: 3px 8px;
    border-radius: 5px;
    z-index: 10;
}

.green-tag { background-color: var(--color-tag-green); }
.red-tag { background-color: var(--color-tag-red); }
.blue-tag { background-color: var(--color-tag-blue); }

.movie-poster {
    width: 100%;
    height: auto;
    display: block;
    /* border: 2px solid var(--color-text-light); */
    margin-top: 5px; /* Account for the tag */
}

.movie-title {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 5px 0;
}

.single-movie {
    /* Spans 1 column but is positioned to align visually in the center */
    grid-column: 1 / span 1; /* Spans the two middle columns */
    max-width: 250px; 
}


/* --- Book Tickets Section --- */
.book-tickets-section {
    background-color: var(--color-red);
    margin: 30px auto;
    width: 90%;
    border-radius: 15px;
    padding: 30px 5%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    border: 3px solid var(--color-text-dark);
}

.book-title {
    font-size: 3rem;
    color: var(--color-text-light);
    margin-bottom: 5px;
    letter-spacing: 2px;
}

.book-subtitle {
    font-family: 'Bobby Jon', sans-serif;
    font-size: 1.5rem;
    color: var(--color-button-gold);
    font-weight: 700;
    margin-bottom: 20px;
}

.register-here-btn {
    background-color: var(--color-button-gold);
    color: var(--color-text-dark);
    border: none;
    padding: 15px 30px;
    font-family: 'Bobby Jon', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 0 4px 0 var(--color-pricing-bg); /* 3D effect */
    transition: transform 0.1s;
}

.register-here-btn:active {
    transform: translateY(4px);
    box-shadow: none;
}

/* --- Footer Section (Location/Contact) --- */
.footer {
    display: flex;
    justify-content: space-around;
    padding: 40px 5% 20px;
    padding-bottom: 40px;
}

.footer-item {
    text-align: center;
    width: 45%;
}

.footer-title {
    font-size: 2rem;
    color: var(--color-text-dark);
    margin-bottom: 15px;
}

.footer-btn {
    background-color: var(--color-dark-blue);
    color: var(--color-text-light);
    border: none;
    padding: 10px 25px;
    font-family: 'Bobby Jon', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    border-radius: 5px;
    width: 100%;
    max-width: 250px;
}

.google-maps-btn {
    background-color: var(--color-dark-blue);
}

.line-oa-btn {
    background-color: #51b849; /* Line green color approximation */
}

/* --- Bottom Bar --- */
.bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--color-primary-gold);
    color: black;
    justify-content: center;
    align-items: center;
    padding: 5px 5%;
    font-size: 0.8rem;
    border-top: 2px black solid;
}

.social-icons span {
    margin-left: 10px;
    font-family: 'Bobby Jon', sans-serif;
    font-weight: 700;
}

/* Pricing Title */
.pricing-title,
/* Movie Lineup Title */
.lineup-title,
/* Book Tickets Title */
.book-title
.card h2,
/* Footer Titles (e.g., 'LOCATION') */
.footer-title {
    font-family: 'Bubblegum', sans-serif;
    /* Other existing styling... */
}

/* 1. Control the overall container (social-icons) */
.social-icons {
    display: flex; /* Use flexbox for easy horizontal alignment */
    align-items: center; /* Vertically align all items (icons and text) */
    gap: 10px; /* Space between the icons and the text handle */
    justify-content: center;
}

/* 2. Set a fixed, consistent size for the icon containers */
.social-icon {
    /* Define the exact height and width for your icons */
    width: 24px; /* Adjust this value (e.g., 20px, 32px) to your desired size */
    height: 24px;
    display: flex; /* Helps ensure the image/svg inside is centered if needed */
    align-items: center;
    justify-content: center;
}

/* 3. Ensure all images/SVGs fill their container */
.social-icon img {
    /* This is the key rule: make the icon fill the span container */
    width: 100%; 
    height: 100%;
    /* The 'object-fit: contain' ensures the image scales down without cropping 
       if the aspect ratio is slightly off, which is good for PNG/JPG. 
       For SVGs, it's often not needed but harmless. */
    object-fit: contain; 
}

/* 4. Style the text handle */
.social-icons > span:last-child {
    font-size: 0.9em; /* Adjust text size to match or complement the icons */
    /* Add any other styling like color, font-weight, etc. */
}

/* --- Mobile Responsiveness (Basic) --- */
@media (max-width: 768px) {
    /* .header {
        flex-direction: column;
    } */
    .register-btn {
        margin-top: 10px;
    }
    
    .pricing-cards {
        flex-direction: column;
        align-items: center;
    }

    .card {
        width: 80%;
    }

    .movies-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .single-movie {
        grid-column: 1 / span 2; /* Center in 2-column layout */
        max-width: 50%; /* Make it smaller */
        margin: 0 auto;
    }
    
    .footer {
        flex-direction: column;
        gap: 20px;
    }
    
    .footer-item {
        width: 80%;
        margin: 0 auto;
    }
}