/* --- The Greetings Times Theme --- */
:root {
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Source Serif Pro', serif;
    --font-meta: 'Helvetica', 'Arial', sans-serif;
    --bg-color: #f4f1ea;
    --text-color: #1a1a1a;
    --border-color: #dcdcdc;
    --subtle-text: #666;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-body); background-color: var(--bg-color); color: var(--text-color); line-height: 1.6; }
.newspaper-page { max-width: 1400px; margin: 0 auto; padding: 10px; }

/* --- Masthead --- */
.masthead { text-align: center; margin-bottom: 20px; }
.header-top-line { display: flex; justify-content: space-between; font-family: var(--font-meta); font-size: 12px; text-transform: uppercase; padding: 5px 0; border-top: 1px solid var(--text-color); border-bottom: 1px solid var(--text-color); }
.masthead .title-wrapper { padding: 10px 0; }
.masthead h1 { font-family: var(--font-heading); font-size: clamp(2.5rem, 10vw, 6rem); font-weight: 900; letter-spacing: -3px; line-height: 1; }
.editor-line { font-family: var(--font-meta); font-size: 13px; font-style: italic; margin-top: 5px; }
.header-bottom-line { border-top: 4px double var(--text-color); border-bottom: 1px solid var(--text-color); height: 7px; margin-top: 10px; }

/* --- Main Content Grid --- */
.main-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }

/* --- Lead Story (Greeting) --- */
.lead-story .main-headline { font-family: var(--font-heading); font-size: clamp(2rem, 7vw, 3.5rem); line-height: 1.1; margin-bottom: 5px; }
.card-container { width: 100%; perspective: 1000px; position: relative; height: 400px; margin-bottom: 15px; border: 1px solid var(--border-color); }
.greeting-card, .customization-form { width: 100%; height: 100%; position: absolute; top: 0; left: 0; transform-style: preserve-3d; backface-visibility: hidden; transition: transform 0.7s ease; display: flex; flex-direction: column; overflow: hidden; }
.customization-form { background: #fff; padding: 20px; transform: rotateY(180deg); }
.card-container.flipped .greeting-card { transform: rotateY(-180deg); }
.card-container.flipped .customization-form { transform: rotateY(0deg); }
.card-inner-background { position: relative; width: 100%; height: 100%; }
.video-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
#bg-video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.quote { font-size: 1.1rem; text-align: justify; margin-top: 15px; }
.from-name { font-weight: 600; font-size: 1.1rem; text-align: right; margin-top: 10px; }

/* --- Side Columns (Features) --- */
.feature-box { margin-bottom: 20px; }
.feature-box h4 { font-family: var(--font-heading); font-size: 1.2rem; margin-bottom: 5px; }
.feature-box p { font-size: 0.9rem; color: var(--subtle-text); margin-bottom: 10px; line-height: 1.4; }
.side-column-left, .side-column-right { border-top: 1px solid var(--border-color); padding-top: 20px; }
hr { border: 0; border-top: 1px solid var(--border-color); margin: 20px 0; }
.weather-box { background-color: #fff; border: 1px solid var(--border-color); padding: 15px; }
.weather-box h4 { font-family: var(--font-heading); font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; }

/* --- Advertisements --- */
.advertisements-section { border-top: 2px solid var(--text-color); margin-top: 20px; padding-top: 20px; }
.ad-header { font-family: var(--font-meta); text-align: center; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.product-ad { border: 1px dotted var(--subtle-text); padding: 15px; text-align: center; }
.product-ad img { max-width: 100%; height: 100px; object-fit: cover; margin-bottom: 10px; filter: grayscale(0.5); }
.product-ad h5 { font-family: var(--font-heading); font-size: 1.1rem; }
.product-ad p { font-size: 0.9rem; color: var(--subtle-text); }
.product-ad span { display: block; font-weight: 600; color: var(--text-color); margin-top: 5px; }
.ad-footer { text-align: center; margin-top: 30px; }
.ad-footer .action-button { display: inline-block; width: auto; }

/* --- Buttons, Controls, Modal --- */
.action-button { display: block; width: 100%; font-family: var(--font-meta); text-transform: uppercase; font-size: 12px; font-weight: 600; padding: 8px; border: 1px solid var(--text-color); background: transparent; color: var(--text-color); cursor: pointer; text-decoration: none; text-align: center; transition: all 0.2s; }
.action-button:hover { background: var(--text-color); color: var(--bg-color); }
.customization-form .form-title { font-family: var(--font-heading); font-size: 1.5rem; text-align: center; margin-bottom: 20px; }
.customization-form textarea { height: 10em; resize: vertical; } /* UPDATED: Textarea height */
.customization-form textarea, .customization-form input { width: 100%; padding: 8px; margin-bottom: 10px; font-family: var(--font-body); font-size: 1rem; border: 1px solid var(--border-color); }
.customization-form .form-buttons { display: flex; gap: 10px; }
.close-btn { background: transparent; border: none; font-size: 24px; cursor: pointer; }
.control-btn { position: fixed; bottom: 10px; right: 10px; font-family: var(--font-meta); font-size: 12px; background: #fff; border: 1px solid #000; padding: 5px 10px; z-index: 100; cursor: pointer; }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.7); backdrop-filter: blur(2px); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.modal-overlay.visible { opacity: 1; pointer-events: auto; }
.modal-content { background-color: var(--bg-color); border: 1px solid var(--text-color); padding: 30px; width: 90%; max-width: 400px; text-align: center; }
.modal-content h2 { font-family: var(--font-heading); margin-bottom: 20px; }
.modal-share-actions { display: flex; flex-direction: column; gap: 10px; }
.modal-close-btn { position: absolute; top: 10px; right: 15px; }

/* UPDATED: QR Code Alignment */
#modal-qrcode-display-area { 
    margin-top: 20px; 
    text-align: center; 
}
#qr-code-sticker {
    border: 1px solid var(--border-color);
    padding: 15px;
    background: #fff;
    display: inline-flex; /* Changed to inline-flex */
    flex-direction: column; /* Arrange items vertically */
    align-items: center;   /* Center items horizontally */
}
.qr-code-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
}
#qr-code-image {
    margin: 10px 0; /* Adjusted margin */
}
.qr-code-from {
    font-size: 0.9rem;
    font-style: italic;
    color: var(--subtle-text);
}
#modal-download-qr-btn {
    margin-top: 15px;
    display: inline-block;
    width: auto;
}


/* --- BG.HTML & SHOP.HTML STYLES --- */
.bg-selection-container, .shop-container { padding: 40px 20px; max-width: 1200px; margin: 0 auto; }
.shop-container > h1, .bg-header h1, .bg-header h2 { font-family: var(--font-heading); color: var(--text-color); margin-bottom: 30px; text-align: center; }
.bg-selection-container .subtitle { text-align: center; color: var(--subtle-text); margin-top: -20px; margin-bottom: 30px; }
.selection-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.news-item { background: #fff; border: 1px solid var(--border-color); display: flex; flex-direction: column; transition: box-shadow 0.2s ease; }
.news-item.selected { box-shadow: 0 0 0 3px var(--text-color); }
.item-preview { width: 100%; height: 180px; overflow: hidden; filter: grayscale(1); transition: filter 0.3s ease; }
.item-preview video, .item-preview .bg-image { width: 100%; height: 100%; object-fit: cover; }
.news-item:hover .item-preview, .news-item.selected .item-preview { filter: grayscale(0); }
.item-content { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }
.item-content h3 { font-family: var(--font-heading); font-size: 1.3rem; }
.item-content p { color: var(--subtle-text); font-size: 0.9rem; flex-grow: 1; margin: 10px 0; }
.item-content .action-button { margin-top: auto; }
.music-preview { font-size: 4rem; display: grid; place-items: center; background-color: #f0f0f0; color: #ccc; }
.news-item.selected .music-preview { color: var(--text-color); background-color: #ddd; }
hr.divider { border: 0; border-top: 1px solid var(--border-color); margin: 40px 0; }
.news-item.selected .select-btn { background: var(--text-color); color: var(--bg-color); cursor: default; }

.product-card-shop { border: 1px solid var(--border-color); padding: 20px; text-align: center; display: flex; flex-direction: column; }
.product-card-shop img { max-width: 100%; height: 200px; object-fit: cover; margin-bottom: 15px; }
.product-card-shop h3 { font-family: var(--font-heading); font-size: 1.5rem; }
.product-card-shop p { color: var(--subtle-text); flex-grow: 1; margin: 10px 0; }
.product-card-shop .price { font-weight: bold; font-size: 1.2rem; margin-bottom: 20px; }
.product-card-shop .action-button { width: auto; margin: 0 auto; }


/* --- Footer --- */
.site-footer { padding: 20px; text-align: center; border-top: 1px solid var(--border-color); margin-top: 40px; font-family: var(--font-meta); font-size: 12px; }
.footer-links a { color: var(--text-color); text-decoration: underline; margin: 0 10px; font-weight: 600; }

/* --- DESKTOP: Multi-Column Layout --- */
@media (min-width: 768px) {
    .main-grid { grid-template-columns: repeat(6, 1fr); column-gap: 20px; }
    .lead-story { grid-column: 1 / span 4; }
    .side-column-left { grid-column: 5 / span 1; border-top: none; padding-top: 0; padding-left: 20px; border-left: 1px solid var(--border-color); }
    .side-column-right { grid-column: 6 / span 1; border-top: none; padding-top: 0; padding-left: 20px; border-left: 1px solid var(--border-color); }
}