@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800;900&family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
    --bg-deep-red: #4a000b;
    --bg-dark-ruby: #2e0006;
    --gold-metallic: linear-gradient(135deg, #bf953f 0%, #fcf6ba 25%, #b38728 50%, #fbf5b7 75%, #aa771c 100%);
    --red-button-bg: linear-gradient(180deg, #d3122a 0%, #990014 100%);
    --red-button-border: #ffffff;
}

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

body.flyer-bg {
  font-family: 'Poppins', sans-serif;
  color: #333333;
  min-height: 100vh;
  padding: 15px;
  margin: 0;
}

/* Poster Main Wrapper */
.poster-container {
 background: #fcf4e4 url('../img/Bg.webp') center top repeat-y fixed;
  background-size: cover;
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  padding: 8px;
}

/* Header Image */
.poster-header {
    width: 100%;
    text-align: center;
    margin-bottom: 12px;
}

.flyer-header-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Top 2 Banners Section (Side-by-Side Left & Right) */
.top-banners-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 12px 0 16px 0;
    width: 100%;
}

.top-banner-item {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    
}

.top-banner-item:hover {
    transform: translateY(-3px) scale(1.01);
    filter: brightness(1.06);

}

.top-banner-link {
    display: block;
    width: 100%;
    text-decoration: none;
}

.top-banner-link.non-clickable {
    cursor: default;
    pointer-events: none;
}

.top-banner-item:has(.non-clickable):hover {
    transform: none;
    filter: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.top-banner-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    object-fit: contain;
}

.top-banner-fallback {
    min-height: 90px;
}

/* Stalls Grid Layout */
.stalls-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 15px 0;
}

@media (max-width: 680px) {
    .stalls-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

@media (max-width: 420px) {
    .stalls-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* Tile Link Wrapper */
.stall-tile-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border-radius: 12px;
    transition: transform 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease;
    overflow: hidden;
}

.stall-tile-link.clickable:hover {
    transform: translateY(-4px) scale(1.03);
    filter: brightness(1.08);    
}

.stall-tile-link.non-clickable {
    cursor: default;
    pointer-events: none;
    opacity: 0.92;
}

.stall-tile-link.non-clickable:hover {
    transform: none;
    filter: none;   
}

/* Custom Base64 Uploaded Button Image */
.stall-button-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: 12px;
}

/* Fallback Red Button Tile (Matches the exact Red Flyer Button style) */
.flyer-red-button {
    background: var(--red-button-bg);
    border: 3px solid #ffffff;
    border-radius: 12px;
    padding: 16px 10px;
    text-align: center;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 85px;
    height: 100%;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.3), 0 3px 8px rgba(0,0,0,0.3);
    position: relative;
}

/* Decorative inner border accent */
.flyer-red-button::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border: 1px dashed rgba(255,255,255,0.6);
    border-radius: 8px;
    pointer-events: none;
}

.flyer-btn-title {
    font-family: 'Playfair Display', 'Cinzel', serif;
    font-weight: 900;
    font-size: clamp(1rem, 2vw, 1.35rem);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.25;
    color: #ffffff;
    text-shadow: 1px 2px 4px rgba(0,0,0,0.7);
}

.flyer-btn-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(0.72rem, 1.2vw, 0.85rem);
    font-weight: 600;
    color: #fff7d6;
    margin-top: 4px;
}

/* Footer Image */
.poster-footer {
    width: 100%;
    text-align: center;
    margin-top: 15px;
}

.flyer-footer-img {
    width: 100%;
    height: auto;
    display: block;
}