body {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, Segoe UI, Roboto, sans-serif;
  background-color: #1f3864;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
 
.page-overlay { min-height: 100vh; background: rgba(255, 255, 255, 0.86); }
 
.topnav {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px;
  padding: 8px 32px; background: rgba(31, 56, 100, 0.92);
}
/* 50mm x 50mm — a fixed physical-size box (CSS mm units), not a pixel
   guess, per the 16 Sep request. object-fit: contain keeps the logo's own
   aspect ratio inside that box rather than stretching it, since the logo
   itself is only resized to fit within an 800x800 square on upload (K.11),
   not forced square. */
.topnav-logo { width: 50mm; height: 50mm; object-fit: contain; display: block; }
/* 7 Oct 2026: the site name, large bold white, next to the logo in the blue band. */
.topnav-brand { display: flex; align-items: center; gap: 20px; text-decoration: none; }
.topnav-title { color: #fff; font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 3rem); line-height: 1.1; letter-spacing: 0.5px; }
.topnav-links a { color: #fff; text-decoration: none; margin-left: 24px; font-weight: 600; }
.topnav-links a:hover { text-decoration: underline; }
.topnav-cart { position: relative; }
.cart-badge {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px;
  background: #c0392b; color: #fff; border-radius: 10px; font-size: 12px;
  font-weight: 700; text-align: center; line-height: 18px;
}
 
.page-content {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 24px; min-height: calc(100vh - 72px); padding: 32px 16px;
}
 
.card {
  background: #fff; padding: 48px 56px; border-radius: 12px;
  text-align: center; max-width: 480px;
}
.card-wide { max-width: 960px; width: 100%; text-align: left; box-sizing: border-box; }
.card-wide h1 { color: #1f3864; }
.about-subheading { color: #1f3864; font-size: 20px; margin: 28px 0 8px; }
 
.logo { width: 180px; max-width: 60%; height: auto; margin-bottom: 8px; }
.tagline { color: #595959; margin-top: 0; }
.notice { color: #c0392b; margin-top: 0; font-weight: bold; }
.contact { color: #2e5395; margin-top: 24px; }
 
.flash-list { max-width: 480px; margin: 0 auto 16px; }
.flash { padding: 10px 16px; border-radius: 8px; font-size: 14px; }
.flash-success { background: #e2efda; color: #375623; }
.flash-error { background: #fbe4e4; color: #7f1d1d; }
 
/* Fishing-day capacity pill (25 Sep 2026) — the server-side "only N spot(s)
   left" / "braai area fully booked" rejection, normally rendered as a plain
   .flash-error banner at the top of the page, gets pulled down next to the
   "Number of people" field on the fishing form and shown here instead
   (see templates/fishing.html's moveFlashErrorIntoCapacityPill()). Fire
   engine red background, bold white text, narrow pill shape so it reads as
   an urgent inline warning right where the person needs to fix the group
   size, not a generic banner easy to miss at the top of the page. */
.capacity-pill[hidden] { display: none; }
.capacity-pill {
  display: inline-block;
  margin-left: 10px;
  padding: 6px 14px;
  max-width: 260px;
  background: #ce2029;
  color: #ffffff;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.3;
  border-radius: 999px;
  vertical-align: middle;
}
 
.admin-header { display: flex; align-items: center; justify-content: space-between; }
.admin-logout { color: #c0392b; text-decoration: none; font-weight: 600; }
.admin-section { border-top: 1px solid #e0e0e0; padding-top: 20px; margin-top: 20px; }
 
/* Admin dashboard tabs (16 Sep 2026) — turns the dashboard's stack of
   sections into a tab strip instead of one long scrolling list. Scoped
   under .admin-dashboard so admin_reports.html's own .admin-section
   blocks (a separate page, not tabbed) keep their original divider-line
   layout above untouched. */
.admin-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 2px solid #e0e0e0; margin-top: 20px;
}
.admin-tab-button {
  background: none; border: none; border-bottom: 3px solid transparent;
  margin-bottom: -2px; padding: 10px 16px; font-family: inherit;
  font-size: 14px; font-weight: 600; color: #7a7a7a; cursor: pointer;
}
.admin-tab-button:hover { color: #1f3864; }
.admin-tab-button.active { color: #1f3864; border-bottom-color: #1f3864; }
.admin-dashboard .admin-section { border-top: none; margin-top: 0; padding-top: 24px; }
.admin-form label { display: block; margin-bottom: 12px; font-weight: 600; color: #404040; }
.admin-form input[type="text"],
.admin-form input[type="password"],
.admin-form input[type="email"],
.admin-form input[type="tel"],
.admin-form input[type="number"],
.admin-form select,
.admin-form textarea {
  display: block; width: 100%; margin-top: 6px; padding: 8px 10px;
  border: 1px solid #ccc; border-radius: 6px; font-family: inherit;
  font-size: 14px; box-sizing: border-box;
}
.admin-form .checkbox-label { display: flex; align-items: center; gap: 8px; }
.admin-form .checkbox-label input { width: auto; margin: 0; }
.admin-form button {
  background: #1f3864; color: #fff; border: none; padding: 10px 18px;
  border-radius: 6px; font-weight: 600; cursor: pointer;
}
.admin-form button:hover { background: #2e5395; }
.admin-form .hint { font-weight: 400; color: #7a7a7a; font-size: 12px; margin: 8px 0 0; }
.admin-preview { display: block; max-height: 80px; margin-bottom: 12px; }
.admin-preview-wide { max-width: 100%; max-height: 160px; object-fit: cover; border-radius: 6px; }
 
/* ---- Shop: featured section on the home page ---- */
.featured-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.shop-now-btn {
  display: inline-block; background: #1f3864; color: #fff; text-decoration: none;
  padding: 10px 18px; border-radius: 6px; font-weight: 600;
}
.shop-now-btn:hover { background: #2e5395; }
 
/* ---- Shop: category & subcategory tabs ---- */
.category-tabs, .subcategory-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px;
  border-bottom: 1px solid #e0e0e0; padding-bottom: 12px;
}
.subcategory-tabs { border-bottom: none; padding-bottom: 0; margin-bottom: 24px; }
.category-tabs a, .subcategory-tabs a {
  color: #2e5395; text-decoration: none; padding: 6px 14px; border-radius: 999px;
  font-weight: 600; font-size: 14px; background: #edf1f7;
}
.subcategory-tabs a { background: none; border: 1px solid #d7dfec; }
.category-tabs a.active, .subcategory-tabs a.active { background: #1f3864; color: #fff; }
.category-tabs a:hover, .subcategory-tabs a:hover { background: #dbe4f2; }
.category-tabs a.active:hover, .subcategory-tabs a.active:hover { background: #2e5395; }
 
/* ---- Shop: product grid ---- */
.product-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px;
}
.product-card {
  border: 1px solid #e0e0e0; border-radius: 10px; padding: 16px;
  display: flex; flex-direction: column; gap: 6px; background: #fff;
}
.product-image { width: 100%; height: 150px; object-fit: cover; border-radius: 6px; margin-bottom: 6px; background: #edf1f7; }
.product-name { font-weight: 700; color: #1f3864; }
.product-pot-size { font-size: 13px; color: #548235; font-weight: 600; }
.product-spec { font-size: 12px; color: #7a7a7a; line-height: 1.5; }
.product-price { font-weight: 700; color: #2e5395; font-size: 18px; }
.product-stock { font-size: 12px; color: #548235; }
.product-out-of-stock { color: #c0392b; font-weight: 600; }
.product-add-form { display: flex; gap: 8px; margin-top: 6px; }
.product-add-form input[type="number"] { width: 56px; padding: 6px; border: 1px solid #ccc; border-radius: 6px; }
.product-add-form button {
  flex: 1; background: #1f3864; color: #fff; border: none; padding: 8px 10px;
  border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 13px;
}
.product-add-form button:hover { background: #2e5395; }
.product-view-link { font-size: 13px; color: #2e5395; font-weight: 600; }
.featured-tag {
  display: inline-block; background: #fff2cc; color: #5c3d00; font-size: 11px;
  font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-left: 6px;
}
 
/* ---- Cart ---- */
.cart-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.cart-table th, .cart-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid #e0e0e0; font-size: 14px; }
.cart-qty-form { display: flex; gap: 6px; align-items: center; }
.cart-qty-form input[type="number"] { width: 56px; padding: 6px; border: 1px solid #ccc; border-radius: 6px; }
.cart-qty-form button, .cart-remove-btn {
  background: #edf1f7; color: #1f3864; border: none; padding: 6px 12px;
  border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 13px;
}
.cart-remove-btn { background: #fbe4e4; color: #7f1d1d; }
.cart-qty-form button:hover { background: #dbe4f2; }
.cart-remove-btn:hover { background: #f5caca; }
.cart-subtotal { font-size: 18px; font-weight: 700; color: #1f3864; }
 
/* ---- Admin: shop management tables ---- */
.admin-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.admin-table th, .admin-table td { text-align: left; padding: 8px; border-bottom: 1px solid #e0e0e0; vertical-align: middle; }
.inline-form { display: flex; gap: 6px; align-items: center; margin: 0; }
.inline-form input[type="text"], .inline-form select {
  padding: 6px 8px; border: 1px solid #ccc; border-radius: 6px; font-size: 13px;
}
.inline-form .sort-input { width: 50px; }
.inline-form button {
  background: #1f3864; color: #fff; border: none; padding: 6px 12px;
  border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 13px;
}
.inline-form button:hover { background: #2e5395; }
.inline-form .cart-remove-btn:hover { background: #f5caca; }
.admin-add-form { margin-top: 8px; }
.admin-shop-links { display: flex; gap: 16px; }
.admin-shop-links a { color: #2e5395; font-weight: 600; text-decoration: none; }
.admin-shop-links a:hover { text-decoration: underline; }
.status-tag {
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px;
  font-weight: 700; text-transform: capitalize;
}
.status-new { background: #fff2cc; color: #5c3d00; }
.status-contacted { background: #e8eef7; color: #2e5395; }
.status-done { background: #e2efda; color: #375623; }
.status-archived { background: #e0e0e0; color: #595959; }
.status-urgent { background: #fbe4e4; color: #7f1d1d; }
 
/* ---- Home page intro text (admin-editable, Part M) ---- */
/* .tagline/.notice/.contact already exist above (from Part K) — this only
   adds spacing rules for the wrapper div now that the paragraphs are built
   from admin-entered HTML instead of hardcoded in index.html. */
.home-intro-content p { margin: 0 0 12px; }
.home-intro-content p:last-child { margin-bottom: 0; }
 
/* ---- Admin: simple rich-text toolbar (Part M) ---- */
.rte-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 6px 0 0; padding: 8px; background: #edf1f7; border-radius: 6px 6px 0 0;
  border: 1px solid #ccc; border-bottom: none;
}
.rte-toolbar button {
  width: 30px; height: 30px; border: 1px solid #ccc; border-radius: 4px;
  background: #fff; color: #1f3864; cursor: pointer; font-size: 14px;
}
.rte-toolbar button:hover { background: #dbe4f2; }
.rte-toolbar select {
  padding: 5px 6px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px;
}
.rte-color-label { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 13px; color: #404040; margin: 0; }
.rte-color-label input[type="color"] { width: 32px; height: 28px; padding: 0; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; }
.rte-editor {
  min-height: 120px; padding: 12px; border: 1px solid #ccc; border-top: none;
  border-radius: 0 0 6px 6px; font-size: 14px; line-height: 1.5; background: #fff;
  margin-bottom: 10px;
}
.rte-editor:focus { outline: 2px solid #2e5395; outline-offset: -1px; }
.rte-editor p { margin: 0 0 10px; }
 
/* ---- Home page intro card: same width as the Featured section (Part N) ---- */
/* .card-wide already sets the width and left-aligns text (K.3.4); this
   card needs the wider box but should stay centred like it always has. */
.home-intro-card { text-align: center; }
 
/* ---- Admin: request status filter tabs (Part N) ---- */
.status-filter-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px;
  border-bottom: 1px solid #e0e0e0; padding-bottom: 12px;
}
.status-filter-tabs a {
  color: #2e5395; text-decoration: none; padding: 6px 14px; border-radius: 999px;
  font-weight: 600; font-size: 14px; background: #edf1f7;
}
.status-filter-tabs a.active { background: #1f3864; color: #fff; }
.status-filter-tabs a:hover { background: #dbe4f2; }
.status-filter-tabs a.active:hover { background: #2e5395; }
 
/* ---- Admin: background opacity slider (Part N) ---- */
.opacity-form { margin-top: 16px; }
.opacity-slider-row { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.opacity-slider-row input[type="range"] { flex: 1; }
.opacity-slider-row span { font-weight: 600; color: #1f3864; min-width: 42px; }

/* ---- Admin: wider cards for table-heavy screens (4 Oct 2026) ---- */
/* Shop -> Categories grew a third button (Disable) and its table ran past
   the right-hand edge of the 960px white card. Every admin screen is a wide
   table, so give them more room: up to 1400px, never wider than the window,
   and scroll sideways inside the card as a last resort rather than letting
   text spill out over the background photo. */
.card-wide.admin-dashboard { max-width: min(1400px, 96vw); padding-left: 32px; padding-right: 32px; overflow-x: auto; }

/* ---- 5 Oct 2026: cancellations, gate passes, email wording, U-pick products, print ---- */
.status-paid { background: #e2efda; color: #375623; }
.status-pending { background: #fff2cc; color: #5c3d00; }
.status-expired { background: #e0e0e0; color: #595959; }
.status-cancelled { background: #fbe4e4; color: #7f1d1d; }
.status-active { background: #e2efda; color: #375623; }
tr.row-cancelled td { color: #7a7a7a; }
tr.row-cancelled td:first-child { box-shadow: inset 3px 0 0 #c8102e; }

.booking-actions { display: flex; flex-direction: column; gap: 6px; min-width: 150px; }
.booking-actions a, .booking-actions summary { font-size: 13px; color: #2e5395; cursor: pointer; }
.cancel-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.cancel-form input[type="text"] { padding: 4px 6px; font-size: 13px; }
.cancel-form label { font-size: 13px; display: flex; gap: 6px; align-items: center; }
.btn-danger {
  background: #c8102e; color: #fff; border: 0; border-radius: 4px; padding: 5px 10px;
  font-weight: 600; cursor: pointer; font-size: 13px;
}
.btn-danger:hover { background: #a00d25; }

.pass-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; align-items: end; }
.pass-form-grid label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 14px; }
.day-checks { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.day-checks label { flex-direction: row; align-items: center; font-weight: 400; gap: 5px; }
.gate-pass-box { border: 1px solid #d6dce6; border-radius: 8px; padding: 16px 20px; margin: 16px 0; background: #fafbfd; }

.email-card { border: 1px solid #d6dce6; border-radius: 8px; margin: 12px 0; background: #fafbfd; }
.email-card > summary { padding: 12px 16px; cursor: pointer; font-weight: 600; }
.email-card .email-body { padding: 0 16px 16px; }
.email-card textarea { width: 100%; min-height: 260px; font-family: Consolas, monospace; font-size: 13px; }
.email-card input[type="text"] { width: 100%; }
.email-preview { white-space: pre-wrap; font-family: Consolas, monospace; font-size: 13px; background: #fff;
  border: 1px solid #d0d0d0; border-radius: 6px; padding: 10px 12px; }
.placeholder-chip { display: inline-block; background: #edf1f7; color: #1f3864; border-radius: 4px; padding: 1px 6px;
  font-family: Consolas, monospace; font-size: 12px; margin: 2px 4px 2px 0; }
.tag-custom { background: #fff2cc; color: #5c3d00; border-radius: 999px; padding: 1px 8px; font-size: 12px; margin-left: 8px; }

.upick-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; vertical-align: middle; margin-right: 10px; }
.product-book-link {
  display: inline-block; margin-top: 8px; background: #2e5395; color: #fff; text-decoration: none;
  padding: 8px 14px; border-radius: 6px; font-weight: 600;
}
.product-book-link:hover { background: #1f3864; }

.slip { max-width: 640px; margin: 0 auto; }
.slip table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.slip th { text-align: left; width: 34%; padding: 8px 10px 8px 0; vertical-align: top; color: #444; }
.slip td { padding: 8px 0; white-space: pre-line; border-bottom: 1px solid #e0e0e0; }
.slip-qr { text-align: center; margin: 18px 0; }
.slip-qr img { width: 260px; height: 260px; }

.print-btn {
  margin-left: 12px; background: #1f3864; color: #fff; border: 0; border-radius: 6px;
  padding: 6px 12px; font-weight: 600; cursor: pointer;
}
.print-btn:hover { background: #2e5395; }
.print-only { display: none; }

@media print {
  body { background: none !important; }
  .page-overlay { background: #fff !important; }
  .topnav, .no-print, .flash-list, .admin-tabs, .admin-header a, .admin-logout,
  .admin-table form, .admin-table details, .inline-form, .admin-shop-links, .hint a,
  .gate-pass-box, .email-card form { display: none !important; }
  .print-only { display: block !important; }
  .print-header { font-size: 12px; color: #444; border-bottom: 1px solid #999; padding-bottom: 4px; margin-bottom: 10px; }
  .card, .card-wide, .card-wide.admin-dashboard {
    box-shadow: none !important; border: 0 !important; max-width: none !important; width: 100% !important;
    padding: 0 !important; overflow: visible !important; background: #fff !important;
  }
  .admin-table { font-size: 11px; }
  .admin-table th, .admin-table td { padding: 4px 6px; }
  a { color: #000; text-decoration: none; }
  tr { page-break-inside: avoid; }
  .admin-section[hidden] { display: none !important; }
  .email-card:not([open]) .email-body { display: block; }
}
.pass-form-grid input, .email-card input[type="text"], .email-card textarea {
  box-sizing: border-box; width: 100%; padding: 8px 10px; border: 1px solid #c9ced6; border-radius: 6px; font: inherit;
}

/* 6 Oct 2026: U-pick booking mode and the pay-on-the-day pass page */
.booking-mode { display: grid; gap: 10px; margin-bottom: 14px; }
.mode-option { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid #c9d3e0; border-radius: 8px; cursor: pointer; background: #fff; }
.mode-option input[type="radio"] { margin-top: 4px; }
.mode-option .hint { display: block; margin-top: 2px; }
.gate-pass-qr { max-width: 260px; width: 100%; height: auto; border: 1px solid #c9d3e0; padding: 8px; background: #fff; }

.product-book-form { margin-top: 8px; }
.product-book-form .addon-tick { display: block; font-size: 0.9em; margin: 4px 0; }
.addon-stepper { margin: 6px 0; font-size: 0.9em; }
.addon-stepper-label { display: block; margin-bottom: 4px; }
.stepper { display: inline-flex; align-items: center; gap: 4px; }
.step-btn { width: 34px; height: 34px; border: 1px solid #2e5395; background: #fff; color: #2e5395; border-radius: 6px; font-size: 1.2em; font-weight: 700; cursor: pointer; line-height: 1; }
.step-btn:hover { background: #e8eefa; }
.step-input { width: 56px; text-align: center; padding: 6px 4px; }
button.product-book-link { border: 0; cursor: pointer; font-size: 1em; font-family: inherit; }
.stepper .step-input { width: 64px; flex: none; }

/* 12 Oct 2026: Gallery tab — big photo on the left half, thumbnails on the right half */
.gallery-wrap { width: 100%; max-width: 1400px; box-sizing: border-box; background: rgba(255,255,255,0.92); border-radius: 12px; padding: 20px 24px 24px; }
.gallery-heading { color: #1f3864; margin: 0 0 14px; }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.gallery-main { margin: 0; background: #f2f4f8; border-radius: 10px; padding: 10px; text-align: center; box-sizing: border-box; }
.gallery-main img { display: block; width: 100%; height: calc(100vh - 380px); min-height: 300px; object-fit: contain; border-radius: 6px; }
.gallery-main figcaption { margin-top: 8px; font-weight: 600; color: #1f3864; }
.gallery-thumbs { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; max-height: calc(100vh - 340px); min-height: 340px; overflow-y: auto; padding: 4px; align-content: start; }
.gallery-thumb { border: 3px solid transparent; padding: 0; background: #fff; border-radius: 8px; cursor: pointer; overflow: hidden; line-height: 0; }
.gallery-thumb img { width: 100%; height: 90px; object-fit: cover; display: block; }
.gallery-thumb:hover { border-color: #9fb6e0; }
.gallery-thumb.is-active { border-color: #2e5395; box-shadow: 0 0 0 2px #2e5395; }
.gallery-empty { color: #595959; }
@media (max-width: 760px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery-main img { height: 45vh; }
  .gallery-thumbs { max-height: 40vh; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .gallery-thumb img { height: 70px; }
  .gallery-wrap { padding: 14px; }
}

/* 12 Oct 2026: Admin > Gallery editor */
.admin-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 8px; }
.admin-gallery-item { border: 1px solid #c9d3e0; border-radius: 8px; padding: 8px; background: #fff; text-align: center; }
.admin-gallery-item img { width: 100%; height: 110px; object-fit: cover; border-radius: 6px; display: block; }
.admin-gallery-name { margin: 6px 0; font-size: 0.85em; color: #1f3864; word-break: break-word; }
.admin-gallery-delete { border: 1px solid #c0392b; background: #fff; color: #c0392b; border-radius: 6px; padding: 4px 12px; cursor: pointer; font: inherit; }
.admin-gallery-delete:hover { background: #fbe4e4; }
.button-link { display: inline-block; padding: 9px 16px; background: #2e5395; color: #fff; border-radius: 6px; text-decoration: none; font-weight: 600; }
.button-link:hover { background: #1f3864; }

/* 12 Oct 2026: Contact us button in the header, Contact page and Google Maps pin */
.topnav-links a.topnav-contact { display: inline-block; margin-left: 24px; padding: 7px 16px; background: #fff; color: #1f3864; border-radius: 20px; font-weight: 700; }
.topnav-links a.topnav-contact:hover { background: #e8eefa; text-decoration: none; }
.contact-wrap { width: 100%; max-width: 760px; box-sizing: border-box; background: #fff; border-radius: 12px; padding: 28px 32px; }
.contact-heading { color: #1f3864; margin: 0 0 6px; }
.contact-note { color: #c0392b; font-weight: 600; margin: 0 0 18px; }
.contact-people { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.contact-person { border: 1px solid #c9d3e0; border-radius: 10px; padding: 14px 16px; background: #f7f9fc; }
.contact-person h2 { margin: 0 0 6px; color: #1f3864; font-size: 1.2em; }
.contact-phone { font-size: 1.25em; font-weight: 700; color: #2e5395; text-decoration: none; white-space: nowrap; }
.contact-phone:hover { text-decoration: underline; }
.contact-line { margin: 6px 0; color: #404040; }
.map-pin-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; background: #2e5395; color: #fff; border-radius: 8px; text-decoration: none; font-weight: 700; }
.map-pin-btn:hover { background: #1f3864; }
@media (max-width: 760px) {
  .contact-people { grid-template-columns: 1fr; }
  .contact-wrap { padding: 20px; }
  .topnav-links a.topnav-contact { margin-left: 12px; }
}
.map-embed { margin-top: 18px; border-radius: 10px; overflow: hidden; border: 1px solid #c9d3e0; }
.map-embed iframe { display: block; width: 100%; height: 360px; border: 0; }
@media (max-width: 760px) { .map-embed iframe { height: 280px; } }
.admin-gallery-edit { margin: 4px 0 6px; text-align: left; }
.admin-gallery-edit summary { cursor: pointer; display: inline-block; border: 1px solid #2e5395; color: #2e5395; border-radius: 6px; padding: 3px 12px; font-size: 0.9em; list-style: none; }
.admin-gallery-edit summary::-webkit-details-marker { display: none; }
.admin-gallery-edit[open] summary { background: #e8eefa; }
.admin-gallery-edit form { margin-top: 6px; }
.admin-gallery-edit input[type="text"] { box-sizing: border-box; width: 100%; padding: 6px 8px; border: 1px solid #c9ced6; border-radius: 6px; font: inherit; margin-bottom: 6px; }
.admin-gallery-edit button { border: 0; background: #2e5395; color: #fff; border-radius: 6px; padding: 5px 12px; cursor: pointer; font: inherit; }
.admin-gallery-edit { text-align: center; }
.admin-gallery-edit form { text-align: left; }

/* 12 Oct 2026: Admin > Contact us editor */
.contact-edit-rows { display: grid; gap: 8px; margin-bottom: 12px; }
.contact-edit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.contact-edit-rows input[type="text"], .admin-form input[type="email"] { box-sizing: border-box; width: 100%; }
.contact-wrap .admin-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (max-width: 760px) { .contact-edit-row { grid-template-columns: 1fr; } }

/* 18 Oct 2026: the switch between the flower farm and the farm stay in Admin */
.admin-site-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 16px; padding: 10px 12px; background: #eef2fa; border: 1px solid #c9d3e0; border-radius: 8px; }
.admin-site-switch-label { font-weight: 700; color: #1f3864; margin-right: 4px; }
.admin-site-switch button { padding: 8px 16px; border-radius: 20px; border: 2px solid #1f3864; background: #fff; color: #1f3864; font-weight: 700; cursor: pointer; }
.admin-site-switch button.is-on { background: #1f3864; color: #fff; }
.admin-stay-bar { margin: 0 0 12px; font-size: 14px; }
.admin-stay-table td form { display: inline; margin: 0 4px 0 0; }
.admin-stay-table button, .admin-stay-photo button { cursor: pointer; }
.admin-stay-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 8px; }
.admin-stay-photo { border: 1px solid #c9d3e0; border-radius: 8px; padding: 8px; background: #fff; }
.admin-stay-photo img { width: 100%; height: 120px; object-fit: cover; border-radius: 6px; display: block; }
.admin-stay-photo .admin-gallery-name { margin: 6px 0 4px; }
.admin-stay-photo-buttons { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.admin-stay-photo-buttons form { margin: 0; }
.admin-stay-photo-buttons button { padding: 3px 8px; font-size: 13px; }

/* 19 Oct 2026: server-role banner, shown only to a logged-in admin */
.site-banner { position: sticky; top: 0; z-index: 9999; text-align: center; font: 600 13px/1 system-ui, sans-serif; letter-spacing: .04em; padding: 7px 10px; color: #fff; }
.site-banner-dev { background: #b35c00; }
.site-banner-prod { background: #8f1d1d; }
@media print { .site-banner { display: none; } }

/* 20 Oct 2026: Gallery page - Photos / Reels */
.gallery-switch { display: flex; gap: 10px; margin: 0 0 8px; }
.gallery-switch a { border: 1px solid #2e5395; color: #2e5395; border-radius: 999px; padding: 4px 16px; text-decoration: none; font-weight: 600; background: #fff; }
.gallery-switch a:hover { background: #e8eefa; }
.gallery-reels-heading { margin-top: 36px; padding-top: 8px; border-top: 2px solid #e1e7f1; }
.reels-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.reel-tile { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 3px solid transparent; border-radius: 10px; overflow: hidden; background: #1b2a41; cursor: pointer; line-height: 0; }
.reel-tile:hover, .reel-tile:focus-visible { border-color: #2e5395; }
.reel-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.reel-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.85); color: #1f3864; font-size: 22px; line-height: 52px; text-align: center; padding-left: 3px; box-sizing: border-box; }
.reel-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 8px 8px; background: linear-gradient(transparent, rgba(0,0,0,0.65)); color: #fff; font-size: 0.85em; font-weight: 600; line-height: 1.25; text-align: left; }
.reel-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.88); display: flex; align-items: center; justify-content: center; padding: 12px; box-sizing: border-box; }
.reel-modal[hidden] { display: none; }
.reel-modal-box { position: relative; max-width: 100%; display: flex; flex-direction: column; align-items: center; }
.reel-modal-box video { max-width: min(94vw, 520px); max-height: calc(100vh - 110px); background: #000; border-radius: 8px; }
.reel-close { position: absolute; top: -6px; right: -6px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #fff; color: #1f3864; font-size: 26px; line-height: 36px; cursor: pointer; }
.reel-modal-bar { display: flex; align-items: center; gap: 14px; margin-top: 10px; color: #fff; font-weight: 600; max-width: 94vw; }
.reel-nav { border: 0; background: rgba(255,255,255,0.2); color: #fff; width: 40px; height: 40px; border-radius: 50%; font-size: 26px; line-height: 38px; cursor: pointer; }
.reel-nav:hover { background: rgba(255,255,255,0.35); }
body.reel-open { overflow: hidden; }
.admin-reels-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.admin-reels-grid video { width: 100%; height: 220px; object-fit: contain; background: #000; border-radius: 6px; display: block; }
@media (max-width: 760px) { .reels-grid { grid-template-columns: repeat(2, 1fr); } }