/* FILE: css/style.css (Fully Corrected and Consolidated) */

/* --- 1. Universal Reset, Fonts & Variables --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Roboto+Mono:wght@500&display=swap');

:root {
  /* Main Site Theme */
  --primary-orange: #FF6C00;
  --dark-orange: #CC5500;
  --brand-green: #2c6e63;
  --white: #FFFFFF;
  --light-bg: #F8F8F8;
  --dark-text: #333333;
  --medium-text: #555555;
  --light-gray: #E0E0E0;
  --box-shadow-small: 0 2px 10px rgba(0, 0, 0, 0.08);
  --border-radius: 8px;
  --header-height: 100px;

  /* Secondary Theme (How it Works/Misc pages) */
  --primary-color: #FF6B6B;
  --secondary-color: #4ECDC4;
  --dark-bg: #2C3E50;
  --text-dark: #333333;
  --text-light: #FFFFFF;
  --font-family: 'Poppins', sans-serif;
}

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

/* --- 2. Site-Wide Base Layout --- */
html, body {
    height: 100%;
}

body {
  font-family: 'Open Sans', sans-serif;
  background-color: var(--light-bg);
  color: var(--dark-text);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
    flex-grow: 1;
    padding-top: var(--header-height);
    display: flex;
    flex-direction: column;
}

h1, h2, h3 {
    line-height: 1.2;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

/* --- 3. Main Header & All Original Styles Preserved --- */
/* (All of your other styles for buttons, homepage, deals, etc., are preserved below) */
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  min-height: var(--header-height);
  background-image: url('/freelunchdaily/images/header1.png');
  background-size: cover;
  background-position: center;
  box-shadow: var(--box-shadow-small);
}
.logo img { max-height: 150px; }
.nav-links { list-style: none; display: flex; gap: 40px; }
.nav-links a { color: #ffffff; text-decoration: none; text-shadow: 0 0 5px rgba(0,0,0,0.5); font-family: 'Poppins', sans-serif; font-size: 1.5rem; font-weight: 600; transition: all 0.3s ease; }
.nav-links a:hover { color: var(--primary-orange); }
.btn-primary-small, .btn-secondary-small { padding: 10px 20px; border-radius: var(--border-radius); font-size: 1.5rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.3s ease; }
.btn-primary-small { background-color: var(--primary-orange); color: #fff; border: none; }
.btn-secondary-small { background-color: transparent; border: 2px solid #fff; color: #fff; }
.btn-secondary-small:hover { background-color: var(--brand-green); color: #fff; }
.hero-magazine-layout { display: flex; min-height: calc(90vh - 140px); background-color: #ffffff; border-bottom: 1px solid #e0e0e0; }
.hero-text-panel { flex-basis: 55%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem 4rem; position: relative; z-index: 10; text-align: center; }
.hero-text-panel h1 { font-family: 'Poppins', sans-serif; font-size: 4.2rem; color: var(--brand-green); line-height: 1.15; margin-bottom: 0; }
.hero-divider { border: none; height: 3px; width: 80px; background-color: var(--primary-orange); margin: 2rem auto; }
.hero-kicker { font-size: 2rem; font-weight: 700; color: var(--primary-orange); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 5rem; }
.hero-text-panel p { font-family: 'Open Sans', sans-serif; font-size: 1.5rem; color: #555; max-width: 550px; line-height: 1.7; margin-bottom: 2.5rem; }
.hero-image-panel { flex-basis: 60%; align-self: stretch; background-image: url('../images/hero-food1.png'); background-size: cover; background-position: center top; border-radius: 12px; position: relative; z-index: 5; margin-left: -10px; box-shadow: -10px 10px 30px rgba(0,0,0,0.2); }
.hottest-deals-section { padding: 5rem 2rem; background-color: var(--light-bg); }
.section-title { text-align: center; font-size: 2.8rem; font-weight: 800; color: var(--brand-green); margin-bottom: 3rem; }
.deals-preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto; }
.deal-card-preview { background-color: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 25px rgba(0,0,0,0.1); transition: all 0.3s ease; }
.deal-card-preview:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.15); }
.deal-card-preview img { width: 100%; height: 200px; object-fit: cover; }
.deal-card-content { padding: 20px; }
.deal-card-content h3 { margin: 0 0 10px 0; font-size: 1.5rem; color: var(--dark-text); }
.deal-card-content p { color: #666; font-size: 1.3rem; }
.for-business-callout { background: linear-gradient(to right, #2c6e63, #3a8e7e, #2c6e63); color: #fff; padding: 2rem; }
.callout-content { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; text-align: center; }
.callout-content i { font-size: 2.5rem; color: var(--primary-orange); }
.callout-content p { font-size: 2rem; margin: 0; font-weight: 400; }
.btn-callout { background-color: var(--primary-orange); color: #fff; padding: 0.8rem 1.5rem; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 2rem; transition: all 0.3s ease; border: 2px solid var(--primary-orange); }
.btn-callout:hover { background-color: transparent; border-color: #fff; }
.hero-form { display: flex; flex-direction: column; align-items: center; gap: 0.75rem !important; width: 100%; max-width: 450px; margin-top: 1.5rem; }
.hero-form .form-group { width: 100%; position: relative; }
.hero-form input { width: 100%; padding: 1rem 1.2rem 1rem 3.2rem !important; font-size: 1.2rem !important; border-radius: 8px; border: 1px solid #ccc; box-sizing: border-box; transition: all 0.3s ease; }
.hero-form input:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); }
.hero-form input:focus { outline: none; border-color: var(--brand-green); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(44, 110, 99, 0.25); transform: translateY(-2px); }
.hero-form .form-group i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #aaa; font-size: 1.2rem; }
.hero-form .btn-early-access { width: 100%; background-color: var(--primary-orange); color: #fff; padding: 1rem 2rem; border: none; border-radius: 8px; font-size: 1.2rem; font-weight: 700; cursor: pointer; transition: all 0.3s ease; }
.hero-form .btn-early-access:hover { background-color: var(--dark-orange); transform: translateY(-3px); box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.no-content-message { grid-column: 1 / -1; text-align: center; padding: 3rem; font-size: 1.5rem; color: var(--medium-text); }
.deal-card-link { text-decoration: none; color: inherit; display: block; height: 100%; }
.form-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); justify-content: center; align-items: center; z-index: 2000; }
.form-modal-content { background: #fff; padding: 2rem; border-radius: 8px; max-width: 500px; width: 90%; text-align: center; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.form-modal-close { position: absolute; top: 10px; right: 15px; font-size: 1.8rem; color: #aaa; cursor: pointer; }
.form-modal-content h3 { font-family: 'Poppins', sans-serif; color: var(--brand-green); margin-top: 0; }
.confirm-checkbox-wrapper { margin: 1.5rem 0; display: flex; justify-content: center; align-items: center; gap: 0.5rem; }
.confirm-buttons { display: flex; justify-content: center; gap: 1rem; }
.btn-modal-primary, .btn-modal-secondary { padding: 0.8rem 1.5rem; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; transition: all 0.2s ease-in-out; }
.btn-modal-primary { background-color: var(--primary-orange); color: #fff; }
.btn-modal-secondary { background-color: #eee; color: #555; }
.btn-modal-primary:hover { background-color: var(--dark-orange); }
.form-error-message { color: #e74c3c; font-size: 1.5rem; margin-top: 1rem; height: 1rem; }
.success-icon { font-size: 4rem; color: #2ecc71; margin-bottom: 1rem; }
.filter-bar { background-color: #f8f8f8; padding: 1.5rem; border-radius: 8px; border: 1px solid #e0e0e0; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 3rem; }
.filter-search { flex-grow: 1; display: flex; align-items: center; background-color: #fff; border: 1px solid #ccc; border-radius: 8px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.06); }
.filter-search i { padding: 0 1rem; color: #999; font-size: 1.5rem; }
.filter-search input { border: none; outline: none; padding: 1rem 0; font-size: 1.5rem; width: 100%; }
.filter-dropdown select { padding: 1rem; border: 1px solid #ccc; border-radius: 8px; font-size: 1.5rem; background-color: #fff; }
.filter-bar .btn-primary-small { font-size: 1.5rem; padding: 1rem 2rem; }
.deal-card .deal-location { font-size: 0.9rem; color: #777; margin-top: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.deal-card .price-container { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #f0f0f0; display: flex; align-items: baseline; gap: 0.75rem; }
.deal-card .deal-price { font-size: 1.8rem; font-weight: 700; color: var(--brand-green); }
.deal-card .original-price { font-size: 1.1rem; color: #999; text-decoration: line-through; }
.listing-card { background: #fff; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); display: flex; align-items: center; padding: 1.5rem; gap: 1.5rem; border: 1px solid #e0e0e0; transition: all 0.3s ease; }
.listing-card:hover { border-color: var(--primary-orange); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.listing-card .logo { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.listing-info h3 { margin: 0 0 0.25rem; font-size: 1.25rem; color: var(--dark-text); }
.listing-info p { margin: 0; color: #777; font-size: 0.9rem; }
.biz-badges { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:8px 0 12px; }
.biz-badge { display:flex; align-items:center; gap:8px; padding:6px 10px; background:#fff; border:1px solid #eef2f7; border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.biz-badge img { width:28px; height:28px; object-fit:contain; }
.biz-badge em { font-style:normal; font-weight:600; color:#111827; font-size:1.5rem; }
.biz-menu { margin:14px 0 0; }
.biz-menu h3 { margin:0 0 8px; font-size:1.1rem; }
.biz-menu .biz-menu-links { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.biz-menu .menu-link { color:#f97316; font-weight:700; text-decoration:none; }
.biz-menu .menu-link:hover { text-decoration:underline; }
.services-text { background:#fff; border:1px solid #eef2f7; border-radius:12px; padding:12px; white-space:pre-wrap; }
.hero-section { display: flex; align-items: center; gap: 2rem; padding: 4rem 2rem; max-width: 1200px; margin: auto; }
.hero-text { flex: 1; padding-right: 2rem; }
.hero-image { flex: 1; text-align: center; }
.hero-image img { max-width: 100%; height: auto; }
.section-container { padding: 4rem 2rem; max-width: 1100px; margin: auto; }
.section-dark { background-color: var(--dark-bg); color: var(--text-light); }
.section-intro { max-width: 700px; margin: 0 auto 2rem auto; font-size: 1.1rem; }
.icon-steps { display: flex; justify-content: space-around; margin: 2rem 0 3rem 0; flex-wrap: wrap; }
.step { flex: 1; max-width: 200px; margin: 1rem; }
.icon { font-size: 1.2rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--primary-color); }
.features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 3rem; }
.feature { background: rgba(255, 255, 255, 0.1); padding: 1.5rem; border-radius: 8px; border: 1px solid var(--secondary-color); }
.prize-image img { max-width: 100%; height: auto; border-radius: 10px; margin-bottom: 2rem; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.business-cta { background-color: var(--secondary-color); color: var(--text-light); padding: 3rem 2rem; text-align: center; }
.btn { display: inline-block; padding: 0.8rem 2rem; border-radius: 50px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; margin-top: 1rem; border: none; cursor: pointer; }
.btn-primary { background-color: var(--primary-color); color: var(--text-light); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.btn-secondary { background-color: var(--text-light); color: var(--dark-bg); }
.btn-secondary:hover { background-color: #f0f0f0; transform: translateY(-3px); }
footer { text-align: center; padding: 2rem; background-color: #EAEAEA; color: #555; }
.prize-section { display: flex; align-items: center; gap: 3rem; }
.prize-section .prize-image, .prize-section .prize-text { flex: 1; }
.intro-section { display: flex; align-items: center; gap: 3rem; background-color: var(--white); border-radius: 15px; margin: 2rem auto; padding: 3rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07); }
.faq-hero { background: linear-gradient(135deg, var(--brand-green), #3a8e7e); color: var(--white); padding: 4rem 2rem; text-align: center; border-bottom: 5px solid var(--primary-orange); position: relative; overflow: hidden; }
.faq-hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.faq-title { font-family: 'Poppins', sans-serif; color: var(--white); font-size: 3rem; margin-bottom: 1rem; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.faq-hero p { font-size: 1.2rem; color: var(--white); opacity: 0.9; margin-bottom: 2rem; }
.faq-search-wrapper { position: relative; max-width: 600px; margin: 0 auto; }
.faq-search-wrapper i { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: #999; font-size: 1.2rem; }
#faqSearch { width: 100%; padding: 1.1rem 1rem 1.1rem 3.5rem; font-size: 1.1rem; border-radius: 50px; border: 2px solid transparent; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
#faqSearch:focus { outline: none; border-color: var(--primary-orange); box-shadow: 0 0 0 4px rgba(255, 108, 0, 0.2), 0 4px 15px rgba(0,0,0,0.2); }
.faq-layout { display: grid; grid-template-columns: 1fr 320px; gap: 3rem; align-items: flex-start; padding-top: 3rem; }
.faq-content h2 { font-family: 'Poppins', sans-serif; font-size: 1.8rem; margin-bottom: 1.5rem; border-bottom: 2px solid var(--primary-orange); padding-bottom: 0.5rem; display: inline-block; }
.no-results-message { background-color: var(--white); padding: 2rem; border-radius: var(--border-radius); text-align: center; font-size: 1.2rem; color: var(--medium-text); }
.faq-category details { background-color: var(--white); border-radius: var(--border-radius); margin-bottom: 1rem; box-shadow: var(--box-shadow-small); border: 1px solid var(--light-gray); transition: all 0.3s ease; scroll-margin-top: 160px; }
.faq-category details:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.1); transform: translateY(-3px); border-color: var(--primary-orange); }
.faq-category summary { font-size: 1.1rem; font-weight: 600; color: var(--dark-text); padding: 1.25rem 3.5rem 1.25rem 1.25rem; cursor: pointer; list-style: none; position: relative; display: block; }
details[open] > summary { color: var(--brand-green); border-bottom: 1px solid var(--light-gray); }
.faq-category summary::after { content: '+'; font-size: 1.8rem; color: var(--primary-orange); position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%) rotate(0deg); transition: transform 0.3s ease; }
details[open] > summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-category details p { padding: 1.25rem; margin: 0; color: var(--medium-text); line-height: 1.7; }
.faq-sidebar .sidebar-card { background-color: var(--white); border-radius: var(--border-radius); padding: 2rem; border-top: 5px solid var(--primary-orange); box-shadow: var(--box-shadow-small); position: sticky; top: 170px; text-align: center; }
.sidebar-icon { font-size: 2.5rem; color: var(--primary-orange); margin-bottom: 1rem; }
.sidebar-card h3 { margin-top: 0; color: var(--brand-green); font-family: 'Poppins', sans-serif; }
.sidebar-card .btn-primary-small { display: block; text-align: center; width: 100%; margin-top: 1.5rem; }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 2000; opacity: 0; transition: opacity 0.3s ease; }
.modal-content { background: var(--white); padding: 2rem; border-radius: var(--border-radius); max-width: 500px; width: 90%; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.2); transform: scale(0.95); transition: transform 0.3s ease; }
.modal-overlay.open { opacity: 1; }
.modal-overlay.open .modal-content { transform: scale(1); }
.contact-form-wrapper h3 { font-size: 1.8rem; font-family: 'Poppins', sans-serif; color: var(--brand-green); margin-bottom: 0.5rem; }
.contact-form-wrapper p { color: var(--medium-text); margin-bottom: 1.5rem; }
.contact-form-wrapper input, .contact-form-wrapper textarea { width: 100%; padding: 12px 15px; margin-bottom: 1rem; border: 1px solid var(--light-gray); border-radius: var(--border-radius); font-size: 1rem; font-family: 'Open Sans', sans-serif; }
.contact-form-wrapper button[type="submit"] { width: 100%; background-color: var(--primary-orange); color: white; padding: 14px; font-size: 1rem; font-weight: bold; border: none; border-radius: var(--border-radius); cursor: pointer; margin-top: 10px; transition: background-color 0.3s ease; }
.contact-form-wrapper button[type="submit"]:hover { background-color: var(--dark-orange); }
.modal-close-btn { background: none; border: 1px solid var(--light-gray); color: var(--medium-text); padding: 8px 16px; border-radius: var(--border-radius); cursor: pointer; margin-top: 1rem; }
.card-container { background-color: #FFFFFF; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); max-width: 480px; width: 100%; margin: 0 auto 30px auto; overflow: hidden; transition: all 0.3s ease; cursor: pointer; }
.card-container:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); }
.card-header { display: flex; align-items: center; padding: 16px 20px; }
.business-logo { width: 45px; height: 45px; border-radius: 50%; margin-right: 15px; border: 1px solid #eee; object-fit: cover; }
.business-name { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 18px; color: #333; }
.card-image-container { position: relative; }
.card-image { width: 100%; height: 250px; object-fit: cover; display: block; }
.card-content { padding: 20px; }
.card-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 24px; color: #1c1e21; margin: 0 0 10px 0; }
.card-description { font-size: 16px; color: #65676b; line-height: 1.5; margin: 0; }
.card-description a { color: #3498DB; text-decoration: none; font-weight: 500; }
.card-cta-button { display: block; width: calc(100% - 40px); margin: 0 20px 20px 20px; padding: 15px; color: white; border: none; border-radius: 8px; font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 500; text-transform: uppercase; cursor: pointer; transition: background-color 0.2s ease; }
.deal-card .deal-badge { position: absolute; top: 20px; left: -8px; background-color: #E67E22; color: white; padding: 8px 18px 8px 26px; font-weight: 700; font-size: 18px; clip-path: polygon(100% 0, 100% 100%, 0 100%, 15% 50%, 0 0); }
.deal-card .card-footer { padding: 16px 20px; border-top: 1px solid #e8e8e8; display: flex; justify-content: space-between; align-items: center; background-color: #fafafa; }
.deal-card .deal-pricing .deal-price { font-size: 28px; font-weight: 700; color: #1ABC9C; margin-right: 12px; }
.deal-card .deal-pricing .original-price { font-size: 18px; color: #888888; text-decoration: line-through; }
.deal-card .deal-countdown .countdown-label { font-size: 11px; color: #888; font-weight: 500; display: block; text-transform: uppercase; }
.deal-card .deal-countdown .countdown-timer { font-family: 'Roboto Mono', monospace; font-size: 18px; font-weight: 500; color: #E74C3C; }
.deal-card .card-cta-button { background-color: #3498DB; }
.deal-card .card-cta-button:hover { background-color: #2980b9; }
.promo-card .value-badge { position: absolute; top: 20px; right: 20px; background-color: rgba(0,0,0,0.6); color: white; padding: 12px 16px; border-radius: 8px; font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 700; border: 2px solid white; }
.promo-card .card-footer { padding: 16px 20px; border-top: 1px solid #e8e8e8; background-color: #fafafa; text-align: center; }
.promo-card .countdown-label { font-size: 11px; color: #888; font-weight: 500; text-transform: uppercase; }
.promo-card .countdown-timer { font-family: 'Roboto Mono', monospace; font-size: 20px; font-weight: 500; color: #E74C3C; }
.promo-card .card-cta-button { background-color: #2ECC71; }
.promo-card .card-cta-button:hover { background-color: #27ae60; }

/* --- 4. NEW STYLES for Business Registration Page --- */
.registration-container { max-width: 1200px; margin: 40px auto; padding: 2rem; background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); font-family: 'Poppins', sans-serif; }
.registration-container h1 { font-family: 'Playfair Display', serif; color: #0f766e; text-align: center; margin-bottom: 0.5rem; }
.registration-container .subtitle { text-align: center; color: #555; margin-bottom: 2rem; font-size: 1.5rem; }
.registration-container .form-layout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: flex-start; }
.registration-container .reg-form fieldset { border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; }
.registration-container .reg-form legend { font-size: 1.5rem; font-weight: 700; color: #0f766e; padding: 0 0.5rem; }
.registration-container .reg-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.registration-container .reg-form .form-group { display: flex; flex-direction: column; }
.registration-container .reg-form .span-2 { grid-column: span 2 / span 2; }
.registration-container .reg-form label { margin-bottom: 0.5rem; font-weight: 600; color: #333; font-size: 1.3rem; }
.registration-container .reg-form input, .registration-container .reg-form select { width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 1.5rem; transition: border-color 0.2s, box-shadow 0.2s; }
.registration-container .reg-form input:focus { outline: none; border-color: #0f766e; box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.2); }
.registration-container .reg-form .checkbox-group { display: flex; align-items: center; gap: 0.75rem; padding: 8px; border-radius: 6px; background-color: #f9fafb; }
.registration-container .reg-form .checkbox-group input { width: auto; accent-color: #0f766e; }
.registration-container .reg-form .badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.registration-container .logo-upload-area { display: flex; gap: 1.5rem; align-items: center; }
.registration-container .logo-upload-area img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid #e5e7eb; }
.registration-container .btn-submit { width: 100%; margin-top: 1.5rem; padding: 12px 20px; border: none; border-radius: 6px; background-color: #ff5e00; color: white; font-size: 1.5rem; font-weight: 700; cursor: pointer; transition: background-color 0.2s; }
.registration-container .btn-submit:hover { background-color: #e65600; }

/* --- 5. Responsive Styles (Consolidated) --- */
@media (max-width: 900px) {
    .hero-magazine-layout { flex-direction: column; }
    .faq-layout { grid-template-columns: 1fr; }
    .faq-sidebar { margin-top: 2rem; }
    .faq-sidebar .sidebar-card { position: static; }
    .registration-container .form-layout-grid { grid-template-columns: 1fr; }
}

@media(max-width: 768px) {
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    .hero-section, .intro-section, .prize-section { flex-direction: column; text-align: center; padding: 3rem 1.5rem; }
    .hero-text { padding-right: 0; margin-bottom: 2rem; }
    .features-grid { grid-template-columns: 1fr; }
    .registration-container .reg-form .form-grid { grid-template-columns: 1fr; }
    .registration-container .reg-form .span-2 { grid-column: span 1; }
}

/* === Groupon-style header === */

.main-header {
  background: #2ab673;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 6vw;
}

.header-left .logo-img {
  height: 40px;
  object-fit: contain;
}

.header-center {
  flex: 1 1 auto;
  max-width: 720px;
}

.header-search-form {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
}

.header-search-group {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 999px;
  padding: 0 0.75rem;
  flex: 1;
}

.header-search-location {
  max-width: 180px;
}

.header-search-query {
  flex: 2;
}

.header-search-icon {
  margin-right: 0.35rem;
  color: #888;
  font-size: 0.9rem;
}

.header-search-group input {
  border: none;
  outline: none;
  background: transparent;
  padding: 0.5rem 0;
  font-size: 0.9rem;
  width: 100%;
}

.header-search-btn {
  border-radius: 999px;
  border: none;
  padding: 0.55rem 1.25rem;
  font-size: 0.9rem;
  white-space: nowrap;
  cursor: pointer;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.navbar .nav-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  list-style: none;
}

.navbar .nav-links a {
  color: #fff;
  font-size: 0.9rem;
  text-decoration: none;
}

.navbar .nav-links a:hover {
  text-decoration: underline;
}

.header-icons {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.header-icon-btn {
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 1.1rem;
}

/* Category strip */

.category-nav {
  background: #249f64;
  padding: 0.25rem 6vw;
}

.category-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
}

.category-nav-list a {
  color: #e9fff3;
  font-size: 0.85rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.category-nav-list a:hover {
  text-decoration: underline;
}

/* === Groupon-style hero === */

.hero-groupon-style {
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 360px;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.hero-groupon-style .hero-overlay {
  background: linear-gradient(90deg, rgba(0,0,0,0.65), rgba(0,0,0,0.25));
  width: 100%;
  padding: 2.5rem 6vw 3rem;
  display: flex;
  align-items: center;
}

.hero-groupon-style .hero-content {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 2rem;
  width: 100%;
  max-width: 1200px;
  color: #fff;
}

.hero-text-panel h1 {
  font-size: clamp(1.8rem, 2.7vw, 2.6rem);
  margin-bottom: 0.5rem;
}

.hero-kicker {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.9;
  margin-bottom: 0.5rem;
}

.hero-subtitle {
  font-size: 0.95rem;
  max-width: 28rem;
  margin-bottom: 1.25rem;
}

.hero-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: stretch;
}

.hero-form-row .form-group {
  flex: 1;
  min-width: 150px;
  background: #fff;
  border-radius: 999px;
  padding: 0 0.8rem;
  display: flex;
  align-items: center;
}

.hero-form-row .form-group i {
  color: #666;
  margin-right: 0.5rem;
}

.hero-form-row .form-group input {
  border: none;
  outline: none;
  background: transparent;
  padding: 0.45rem 0;
  font-size: 0.9rem;
  width: 100%;
}

.hero-cta {
  border-radius: 999px;
  padding: 0.6rem 1.4rem;
  font-size: 0.9rem;
  align-self: stretch;
}

.hero-small-print {
  font-size: 0.75rem;
  margin-top: 0.6rem;
  opacity: 0.9;
}

/* Right hero deal stack */

.hero-deal-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hero-deal-card {
  background: rgba(255,255,255,0.96);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

.hero-deal-link {
  display: flex;
  text-decoration: none;
  color: inherit;
}

.hero-deal-image-wrap {
  flex: 0 0 110px;
  max-width: 110px;
  overflow: hidden;
}

.hero-deal-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-deal-body {
  padding: 0.6rem 0.8rem;
}

.hero-deal-body h3 {
  font-size: 0.95rem;
  margin-bottom: 0.15rem;
  color: #222;
}

.hero-deal-biz {
  font-size: 0.8rem;
  color: #555;
  margin-bottom: 0.15rem;
}

.hero-deal-tagline {
  font-size: 0.75rem;
  color: #2ab673;
  font-weight: 600;
}

.hero-deal-placeholder {
  background: rgba(255,255,255,0.12);
  border-radius: 0.75rem;
  padding: 1rem;
  font-size: 0.85rem;
}

/* Spotlight + deals grid tweaks */

.spotlight-deals-section,
.homepage-deals-preview {
  padding: 2.25rem 6vw 1.5rem;
}

.spotlight-deals-carousel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1rem;
}

.spotlight-card {
  background: #fff;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

.spotlight-image-wrap img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.spotlight-body {
  padding: 0.75rem 0.9rem 0.9rem;
}

.deals-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1rem;
}

/* === Responsive tweaks === */

@media (max-width: 960px) {
  .header-top-bar {
    flex-wrap: wrap;
    padding: 0.5rem 4vw;
  }

  .header-center {
    order: 3;
    width: 100%;
  }

  .header-right {
    order: 2;
  }

  .hero-groupon-style .hero-content {
    grid-template-columns: 1fr;
  }

  .hero-deal-stack {
    display: none; /* keep hero lighter on small screens */
  }
}

@media (max-width: 640px) {
  .category-nav-list {
    gap: 0.5rem 1rem;
  }

  .header-search-form {
    flex-direction: column;
  }

  .header-search-location {
    max-width: 100%;
  }

  .hero-groupon-style .hero-overlay {
    padding: 1.8rem 5vw 2.2rem;
  }
}


/* ===== Clean modern header: logo left, wide search + categories center, nav right ===== */

.main-header {
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-main-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* was space-between */
  padding: 0.6rem 6vw;
  gap: 1.5rem;
}


/* Bigger logo */
.header-left .logo-img {
  height: 52px;
  object-fit: contain;
}

/* Center column: search + categories stacked */
.header-center {
  flex: 0 1 760px;       /* nice max width for the search area */
  margin: 0 auto;        /* this is what centers it between left + right */
}

/* Wide search bar */
.header-search-form {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
  max-width: 780px;
}

.header-search-group {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 999px;
  padding: 0 0.9rem;
  border: 1px solid #e2e6ea;
}

.header-search-location {
  max-width: 190px;
}

.header-search-query {
  flex: 2;
}

.header-search-icon {
  margin-right: 0.4rem;
  color: #999;
  font-size: 0.9rem;
}

.header-search-group input {
  border: none;
  outline: none;
  background: transparent;
  padding: 0.55rem 0;
  font-size: 0.9rem;
  width: 100%;
}

.header-search-btn {
  border-radius: 999px;
  border: none;
  padding: 0.55rem 1.4rem;
  font-size: 0.9rem;
  white-space: nowrap;
  cursor: pointer;
  background: #2ab673;
  color: #fff;
  font-weight: 600;
}

/* Right side: nav + icons */
.header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.top-nav-links {
  list-style: none;
  display: flex;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}

.top-nav-links a {
  color: #333;
  font-size: 0.86rem;
  text-decoration: none;
  white-space: nowrap;
}

.top-nav-links a:hover {
  color: #2ab673;
}

.nav-highlight {
  padding: 0.18rem 0.7rem;
  border-radius: 999px;
  background: #2ab673;
  color: #fff !important;
  font-weight: 600;
}

.header-icons {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.header-icon-btn {
  border: none;
  background: transparent;
  color: #333;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0.25rem;
  border-radius: 999px;
}

.header-icon-btn:hover {
  background: rgba(42,182,115,0.1);
}

/* Categories centered under search */
.header-category-nav {
  width: 100%;
  margin-top: 0.35rem;
}

.category-nav {
  background: transparent; /* no extra borders now */
  border: none;
  padding: 0;
}

.category-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0.1rem 0;
  justify-content: center; /* center under search */
}

.category-nav-list a {
  color: #323232;
  font-size: 0.86rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.category-nav-list a i {
  font-size: 0.9rem;
  color: #2ab673;
}

.category-nav-list a:hover {
  color: #2ab673;
}

/* ===== Responsive behavior ===== */

/* Tablets: wrap rows nicely */
@media (max-width: 1024px) {
  .header-main-bar {
    flex-wrap: wrap;
    padding: 0.6rem 4vw;
    align-items: flex-start;
  }

 .header-left {
  flex: 0 0 auto;        /* logo only takes the space it needs */
}

.header-center {
  flex: 0 1 760px;       /* nice max width for the search area */
  margin: 0 auto;        /* this is what centers it between left + right */
}

.header-right {
  flex: 0 0 auto;        /* nav+icons anchor to the right side */
}
/* === FINAL HEADER ALIGNMENT OVERRIDE === */
.main-header .header-main-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;  /* so we can use auto margins */
  padding: 0.6rem 6vw !important;
  gap: 1.5rem !important;
}

/* Logo: fixed on the left */
.main-header .header-left {
  flex: 0 0 auto !important;
}

/* Search block: lives in the middle area */
.main-header .header-center {
  flex: 0 1 780px !important;  /* nice width for search */
  margin: 0 auto !important;   /* pushes it toward the center between left and right */
}

/* Nav + icons: pushed toward the right */
.main-header .header-right {
  flex: 0 0 auto !important;
  margin-left: auto !important;  /* this is what shoves it to the right edge */
}


  .header-search-form {
    max-width: 100%;
  }
}

/* Phones: stack logo, search+categories, then nav */
@media (max-width: 640px) {
  .header-main-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .header-left {
    display: flex;
    justify-content: center;
  }

  .header-center {
    align-items: stretch;
  }

  .header-search-form {
    flex-direction: column;
  }

  .header-search-location {
    max-width: 100%;
  }

  .header-right {
    justify-content: center;
  }

  .top-nav-links {
    flex-wrap: wrap;
    justify-content: center;
  }

  .category-nav-list {
    justify-content: flex-start;
  }
}
/* === DESKTOP HEADER GRID LAYOUT (logo | centered search | nav right) === */
@media (min-width: 900px) {
  .main-header .header-main-bar {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto; /* logo | center | nav */
    align-items: center;
    column-gap: 1.5rem;
    padding: 0.6rem 6vw;
  }

  .main-header .header-left {
    justify-self: start;
  }

  .main-header .header-center {
    justify-self: center;     /* center the whole search+categories block */
    max-width: 780px;
    width: 100%;
  }

  .main-header .header-right {
    justify-self: end;        /* push nav + icons to the far right */
    margin-left: 0 !important; /* override old flex tweaks */
  }
}
/* === FINAL DESKTOP HEADER LAYOUT (logo | search | nav) === */
@media (min-width: 1200px) {
  .main-header .header-main-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0.6rem 6vw !important;
    gap: 1.5rem !important;
  }

  /* Logo: fixed on left */
  .main-header .header-left {
    flex: 0 0 auto !important;
  }

  /* Center column: search + categories */
  .main-header .header-center {
    flex: 1 1 auto !important;
    margin: 0 1.5rem !important;   /* breathing room between logo and nav */
    text-align: center;
  }

  .main-header .header-search-form {
    max-width: 780px;
    margin: 0 auto;                 /* centers the search inside the center column */
  }

  /* Nav + icons: pushed to the right edge */
  .main-header .header-right {
    flex: 0 0 auto !important;
    margin-left: auto !important;   /* THIS is what shoves them right */
  }
}
/* =========================================================
   FreeLunchDaily Header v5
   Logo left | Wide search center | Nav right
   Desktop + mobile hamburger menu
   ========================================================= */

/* Wrapper */
.main-header {
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  position: sticky;
  top: 0;
  z-index: 9999;          /* keep header above hero on phones */
  width: 100%;
}

/* Inner bar: logo, center block, nav/icons */
.header-main-bar {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 2.5vw;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem;
}

/* Logo column (left) */
.header-left {
  flex: 0 0 auto;
}

.header-left .logo-img {
  height: 52px;
  object-fit: contain;
}

/* Center column: search */
.header-center {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 2rem;
}

/* Search bar */
.header-search-form {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
  max-width: 900px;
}

.header-search-group {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 999px;
  padding: 0 0.9rem;
  border: 1px solid #e2e6ea;
}

/* Wider location field */
.header-search-location {
  max-width: 260px;
  flex: 0 0 260px;
}

.header-search-query {
  flex: 1 1 auto;
}

.header-search-icon {
  margin-right: 0.4rem;
  color: #999;
  font-size: 1.1rem;
}

.header-search-group input {
  border: none;
  outline: none;
  background: transparent;
  padding: 0.55rem 0;
  font-size: 1rem;
  width: 100%;
}

.header-search-btn {
  border-radius: 999px;
  border: none;
  padding: 0.55rem 1.6rem;
  font-size: 0.95rem;
  white-space: nowrap;
  cursor: pointer;
  background: #2ab673;
  color: #fff;
  font-weight: 600;
}

/* Right column: nav + icons */
.header-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
  position: relative; /* anchor mobile dropdown */
}

/* Desktop nav list */
.top-nav-links {
  list-style: none;
  display: flex;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}

.top-nav-links a {
  color: #333;
  font-size: 0.86rem;
  text-decoration: none;
  white-space: nowrap;
}

.top-nav-links a:hover {
  color: #2ab673;
}

.nav-highlight {
  padding: 0.18rem 0.7rem;
  border-radius: 999px;
  background: #2ab673;
  color: #fff !important;
  font-weight: 600;
}

/* Header icons */
.header-icons {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.header-icon-btn {
  border: none;
  background: transparent;
  color: #333;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0.25rem;
  border-radius: 999px;
}

.header-icon-btn:hover {
  background: rgba(42,182,115,0.1);
}

/* Hamburger button (hidden on desktop) */
.header-menu-toggle {
  display: none;
  border: none;
  background: transparent;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 6px;
}

.header-menu-toggle:focus-visible {
  outline: 2px solid #2ab673;
}

/* ===============================
   RESPONSIVE BEHAVIOR
   =============================== */

/* Medium screens (tablets, small laptops) */
@media (max-width: 1024px) {
  .header-main-bar {
    padding: 0.6rem 4vw;
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  .header-center {
    margin: 0 1rem;
  }

  .header-search-form {
    max-width: 100%;
  }
}

/* Phones & small tablets: hamburger menu */
@media (max-width: 768px) {
  .header-main-bar {
    flex-wrap: wrap;
    align-items: center;
  }

  .header-left {
    flex: 0 0 auto;
  }

  .header-center {
    order: 3;
    width: 100%;
    align-items: stretch;
    margin: 0;
  }

  .header-search-form {
    flex-direction: column;
    max-width: 100%;
  }

  .header-search-location {
    max-width: 100%;
    flex: 1 1 auto;
  }

  .header-right {
    order: 2;
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
  }

  /* Show hamburger, hide desktop nav by default */
  .header-menu-toggle {
    display: block;
  }

  .top-nav-links {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    padding: 0.75rem 1rem 1rem;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.14);
    border-bottom: 1px solid #eee;
    z-index: 9998;
  }

  .top-nav-links li {
    width: 100%;
  }

  .top-nav-links a {
    display: block;
    width: 100%;
  }

  /* When body has mobile-nav-open, show the dropdown */
  body.mobile-nav-open .top-nav-links {
    display: flex;
  }

  /* Icons stay on the right of the header bar */
  .header-icons {
    margin-left: auto;
  }
}

/* Very small phones: stack logo, search, nav more tightly */
@media (max-width: 480px) {
  .header-main-bar {
    padding: 0.5rem 3vw;
  }

  .header-left {
    justify-content: flex-start;
  }

  .header-right {
    font-size: 0.9rem;
  }
}
/* ===== MOBILE HEADER RESCUE (phones & small tablets) ===== */
@media (max-width: 768px) {

  /* Make absolutely sure the header is visible */
  .main-header {
    display: block !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: #ffffff !important;
  }

  .header-main-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.5rem 3vw !important;
    gap: 0.5rem !important;
  }

  /* Logo row */
  .header-left {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex: 0 0 auto !important;
  }

  /* Search row */
  .header-center {
    display: block !important;
    order: 2 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .header-search-form {
    display: flex !important;
    flex-direction: column !important;
    max-width: 100% !important;
    width: 100% !important;
    gap: 0.4rem !important;
  }

  .header-search-location {
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }

  /* Right row: hamburger + icons */
  .header-right {
    display: flex !important;
    order: 3 !important;
    width: 100% !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-left: 0 !important;
    position: relative !important;
  }

  .header-menu-toggle {
    display: block !important;
  }

  .header-icons {
    display: flex !important;
    margin-left: auto !important;
  }

  /* Mobile dropdown nav */
  .top-nav-links {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0.75rem 1rem 1rem;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.14);
    border-bottom: 1px solid #eee;
    z-index: 9998;
  }

  body.mobile-nav-open .top-nav-links {
    display: flex !important;
  }
}
/* ===== FINAL MOBILE HEADER LAYOUT (phones & small tablets) ===== */
@media (max-width: 768px) {

  .main-header {
    display: block !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: #ffffff !important;
  }

  /* Make header items stack neatly: row1 logo+menu+icons, row2 search */
  .header-main-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.5rem 3vw !important;
    gap: 0.4rem !important;
  }

  /* Logo – left on row 1 */
  .header-left {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
  }

  .header-left .logo-img {
    height: 42px !important; /* a bit smaller on phones */
  }

  /* Right side of row 1 – hamburger + icons */
  .header-right {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    position: relative !important;
  }

  .header-menu-toggle {
    display: block !important;
    margin-right: 0.5rem;
  }

  .header-icons {
    display: flex !important;
    margin-left: 0 !important;
  }

  /* Row 2 – full-width search under header bar */
  .header-center {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 0.3rem 0 0.1rem !important;
  }

  .header-search-form {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0.3rem !important;
  }

  .header-search-location {
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }

  .header-search-group input {
    font-size: 0.95rem !important;
    padding: 0.5rem 0 !important;
  }

  .header-search-btn {
    width: 100% !important;
    text-align: center !important;
  }

  /* Mobile dropdown nav */
  .top-nav-links {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    padding: 0.75rem 1rem 1rem;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.14);
    border-bottom: 1px solid #eee;
    z-index: 9998;
  }

  .top-nav-links li {
    width: 100%;
  }

  .top-nav-links a {
    display: block;
    width: 100%;
  }

  /* When hamburger toggles body.mobile-nav-open, show menu */
  body.mobile-nav-open .top-nav-links {
    display: flex !important;
  }
}
/* ===== FINAL SIMPLE MOBILE HEADER (stacked layout) ===== */
@media (max-width: 768px) {

  .main-header {
    display: block !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: #ffffff !important;
  }

  /* Stack header content vertically */
  .header-main-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.5rem 4vw !important;
    gap: 0.5rem !important;
  }

  /* Row 1 – logo centered */
  .header-left {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex: 0 0 auto !important;
  }

  .header-left .logo-img {
    height: 42px !important;
  }

  /* Row 2 – full-width search */
  .header-center {
    order: 2 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .header-search-form {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0.3rem !important;
  }

  .header-search-location {
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }

  .header-search-group input {
    font-size: 0.95rem !important;
    padding: 0.5rem 0 !important;
  }

  .header-search-btn {
    width: 100% !important;
    text-align: center !important;
  }

  /* Row 3 – nav links + icons, all visible */
  .header-right {
    order: 3 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 0 !important;
    position: static !important;
  }

  /* Hide hamburger; just show the links */
  .header-menu-toggle {
    display: none !important;
  }

  .top-nav-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.5rem 1rem !important;
    margin: 0.25rem 0 0.35rem !important;
    padding: 0 !important;
    position: static !important;
    box-shadow: none !important;
    border: none !important;
  }

  .header-icons {
    display: flex !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    margin-left: 0 !important;
  }

  /* Give the hero a tiny bit of breathing room under the header */
  .hero-magazine-layout {
    margin-top: 0.5rem !important;
  }
}
/* ===== Mobile header base ===== */
.fld-header {
  position: sticky;        /* keeps it visible as you scroll */
  top: 0;
  z-index: 1000;
  background: #ffffff;
  border-bottom: 1px solid #eee;
}

/* Keep content centered and padded */
.fld-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.4rem 0.75rem;
}

/* Logo row – you can hide this on very small screens if needed */
.fld-header-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 0.25rem;
}

.fld-logo {
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  color: #333;
}

/* Main bar: search + hamburger side by side */
.fld-header-bar {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

/* Search takes all remaining width */
.fld-search-form {
  flex: 1;
}

.fld-search-input {
  width: 100%;
  padding: 0.45rem 0.65rem;
  border-radius: 999px;
  border: 1px solid #ddd;
  font-size: 0.9rem;
  outline: none;
}

.fld-search-input:focus {
  border-color: #ff7a00; /* your orange */
}

/* Hamburger button – fixed size circle */
.fld-nav-toggle {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid #ddd;
  background: #fff;
  font-size: 1.3rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Basic mobile nav style */
.fld-mobile-nav {
  display: none;      /* hidden by default, JS toggles this */
  margin-top: 0.4rem;
}

.fld-mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fld-mobile-nav li {
  border-top: 1px solid #f0f0f0;
}

.fld-mobile-nav a {
  display: block;
  padding: 0.55rem 0;
  text-decoration: none;
  color: #333;
  font-size: 0.95rem;
}

/* ===== Desktop adjustments (tablet+ up) ===== */
@media (min-width: 768px) {
  /* Put logo + search + nav in one row on bigger screens if you want */
  .fld-header-top {
    margin-bottom: 0.5rem;
  }

  .fld-header-bar {
    margin-bottom: 0.4rem;
  }

  /* Example: show nav always on desktop, hide hamburger if you prefer */
  .fld-mobile-nav {
    display: block !important;
  }

  .fld-nav-toggle {
    display: none;
  }

  .fld-mobile-nav ul {
    display: flex;
    gap: 1.5rem;
  }

  .fld-mobile-nav li {
    border-top: none;
  }

  .fld-mobile-nav a {
    padding: 0.25rem 0;
  }
}