:root{
  --gutter:20px; /* side spacing shared by .wrap and the mobile nav bar so edges always line up */
  --orange:#F07C1D;
  --logo-h:32px;   /* one logo height for the header AND the footer, on every device */
  --brand:#0A5C48;
  --brand-dark:#063A2D;
  --ink:#222831;
  --muted:#6B7280;
  --bg:#F4F7F9;
  --card:#FFFFFF;
  --line:#E3E8EC;
  --green:#1E9E5A;
  --red:#D64545;
  --logo-border:#E3E3E3;   /* border colour of every store-logo frame - change it here */
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Segoe UI', Arial, sans-serif;background:var(--bg);color:var(--ink);}
a{text-decoration:none;color:inherit;}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px;}

/* Header */
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;}
.header-top{display:flex;align-items:center;gap:28px;padding:5px 5px;flex-wrap:wrap;}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:22px;flex-shrink:0;}
.logo-icon{color:var(--orange);}
.logo-text{color:var(--ink);}
.logo-img{max-height:var(--logo-h,39px);}
.menu-toggle{cursor:pointer;}
.header-actions-desktop{display:flex;align-items:center;gap:14px;flex-shrink:0;margin-left:auto;order:2;}
.mobile-actions{display:none;align-items:center;gap:10px;margin-left:auto;flex-shrink:0;order:3;}
/* Shared style for ALL public-header buttons (Login, Submit Offer, Menu) - same look as .btn-deal (View Offer) */
.btn-header{display:inline-block;font-family:inherit;font-weight:700;font-size:14px;line-height:1.3;color:#fff;background:var(--brand);white-space:nowrap;padding:7px 16px;border:1.5px solid var(--brand);border-radius:6px;cursor:pointer;}
.btn-header:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff;}
.lnk-login{font-weight:700;color:var(--brand);}
.btn-outline{border:1.5px solid var(--orange);color:var(--brand);padding:6px 10px;border-radius:0px;font-weight:600;white-space:nowrap;}
.btn-outline:hover{background:var(--orange);color:#fff;}

/* Circular initial-letter avatar with a hover/tap dropdown (My Dashboard, Logout) */
.user-avatar-wrap{position:relative;display:inline-block;}
.user-avatar{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;font-size:15px;}
.user-avatar-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,0.12);min-width:160px;z-index:70;overflow:hidden;}
.user-avatar-dropdown a{display:block;padding:11px 16px;font-size:14px;color:var(--ink);font-weight:600;}
.user-avatar-dropdown a:hover{background:var(--bg);color:var(--orange);}
.user-avatar-wrap:hover .user-avatar-dropdown,
.user-avatar-wrap.open .user-avatar-dropdown{display:block;}

/* Main nav: a centered link row on desktop; on mobile it's a slim bar*/
.main-nav{border-top:1px solid var(--line);}
.nav-mobile-bar{display:none;}
.nav-links{display:flex;gap:16px;padding:10px 20px;font-weight:600;font-size:12px;max-width:1200px;margin:0 auto;flex-wrap:wrap;justify-content:center;}
.nav-links a:hover{color:var(--orange);}

/* Search bar - sits inline right after the logo on desktop */
.search-bar{position:relative;display:flex;align-items:center;border:2px solid var(--orange);border-radius:0px;background:#fff;flex:1 1 320px;min-width:200px;max-width:830px;order:1;}
.search-fixed-label{padding-left:16px;font-weight:700;color:var(--ink);white-space:nowrap;font-size:14px;line-height:1;display:flex;align-items:center;}
.search-bar input{flex:1;border:none;outline:none;padding:10px 10px;font-size:14px;line-height:1;min-width:0;background:transparent;font-family:inherit;}
.search-bar button{border:none;background:transparent;color:var(--orange);padding:0 18px;border-radius:0px;cursor:pointer;display:flex;align-items:center;justify-content:center;align-self:stretch;}
.search-bar button:hover{color:#c9670f;}
.search-suggestions{position:absolute;top:46px;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,0.1);display:none;max-height:340px;overflow-y:auto;z-index:60;text-align:left;}
.sg-group{font-size:12px;font-weight:700;color:var(--muted);padding:8px 14px 2px;text-transform:uppercase;}
.sg-item{display:flex;align-items:center;gap:10px;padding:8px 14px;font-size:14px;}
.sg-logo{flex-shrink:0;width:26px;height:26px;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#F1F4F7;}
.sg-logo img{width:100%;height:100%;object-fit:contain;}
.sg-logo-fallback{background:var(--brand);color:#fff;font-weight:700;font-size:12px;}
.sg-item:hover{background:var(--bg);}
.sg-item small{color:var(--muted);}
.sg-empty{padding:14px;color:var(--muted);font-size:14px;}

/* Sections */
.section{padding:14px 0;}
.section-title{font-size:22px;margin-bottom:16px;}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;}
.section-head .section-title{margin-bottom:0;}
.section-head-link{flex-shrink:0;font-size:14px;font-weight:700;color:var(--brand);white-space:nowrap;}
.section-head-link:hover{color:var(--orange);}
@media (max-width:480px){.section-head-link{font-size:13px;}}
.page-h1{font-size:26px;margin-bottom:18px;}
.sub-h{margin:26px 0 12px;font-size:17px;color:var(--brand-dark);}

/* Grids */
.grid{display:grid;gap:18px;}
.grid-offerloc{grid-template-columns:repeat(6,minmax(0,1fr));}
@media (max-width:900px){.grid-offerloc{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:560px){.grid-offerloc{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* grid-3 wraps offer cards almost everywhere on the site (homepage, store/category/
   location pages, search results, deals, all coupons...) and those lists rarely
   divide evenly by 3 or 2. A plain CSS grid leaves a short final row stuck to the
   left; this keeps real rows of up to 3 (or 2 on smaller screens) but centers a
   short last row instead - the same fix already used for "You Might Also Like". */
/* Desktop shows 4 per row here (was 3) - this is the shared offer-card grid used by
   Featured Offers, Latest Offers, More From This Store, You Might Also Like, and every
   coupon listing on browse.php (deals, all coupons, search, store/category/location
   pages, online/showroom). Tablet/mobile fallback (non-swipe) stays 2 per row. */
.grid-3{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;}
.grid-3 > *{flex:0 1 calc(25% - 13.5px);max-width:calc(25% - 13.5px);}
@media (max-width:900px){.grid-3 > *{flex:0 1 calc(50% - 9px);max-width:calc(50% - 9px);}}
@media (max-width:560px){.grid-3 > *{flex:0 1 calc(50% - 9px);max-width:calc(50% - 9px);}}

/* grid-blog: the homepage's "From the Blog" section used to share .grid-3 with the offer
   cards, but that would have dragged it along to 4-per-row above too. This is a decoupled
   copy of grid-3's ORIGINAL 3-per-row desktop layout, kept separate on purpose so blog
   cards keep their own sizing independent of however the offer-card grid changes later. */
.grid-blog{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;}
.grid-blog > *{flex:0 1 calc(33.333% - 12px);max-width:calc(33.333% - 12px);}
@media (max-width:900px){.grid-blog > *{flex:0 1 calc(50% - 9px);max-width:calc(50% - 9px);}}
@media (max-width:560px){.grid-blog > *{flex:0 1 calc(50% - 9px);max-width:calc(50% - 9px);}}

/* Same fix as grid-3, sized for grid-6's store tiles (homepage and location page
   Popular Stores): rows of up to 6 (4 on tablet, 3 on phones), short last row centered
   instead of stuck to the left - this is exactly the "Apex" vs "foodpanda" case. */
.grid-6{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;}
.grid-6 > *{flex:0 1 calc(16.666% - 15px);max-width:calc(16.666% - 15px);}
@media (max-width:900px){.grid-6 > *{flex:0 1 calc(25% - 13.5px);max-width:calc(25% - 13.5px);}}
@media (max-width:560px){.grid-6 > *{flex:0 1 calc(33.333% - 12px);max-width:calc(33.333% - 12px);}}

/* Store tiles */
/* justify-content:flex-start (not center) anchors every logo to the top of its tile,
   so the logos in a row line up even when one tile's store name wraps taller than
   its neighbor's - centering would re-center each tile's own content independently. */
.store-tile{background:transparent;border:none;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:110px;text-align:center;transition:transform .15s;position:relative;}
.store-tile:hover{transform:translateY(-2px);}
.store-tile img{max-width:100%;max-height:60px;object-fit:contain;}
.store-tile-name{margin-top:8px;font-size:13px;font-weight:600;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.logo-fallback-name{display:none;}   /* a store without a logo: its name written inside the box - used on phones only */
.logo-fallback-lg{width:56px;height:56px;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;font-size:24px;display:flex;align-items:center;justify-content:center;}

/* Category tiles */
.cat-tile{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-weight:600;font-size:14px;}
.cat-icon{font-size:26px;}
.cat-row-tile{background:var(--card);border:1.5px dashed var(--brand);border-radius:8px;padding:16px;display:flex;align-items:center;gap:12px;font-weight:600;}

/* Coupon ticket card */
/* offer-card is a grid item, so it's already stretched to match the tallest card in
   its row. offer-card-link is set to flex-grow (flex:1) so IT absorbs any leftover
   height (from a short 1-line title, no tags, etc). Because the button and the save/
   love row below it are fixed-height, that growth pushes the button down to the exact
   same level in every card in the row - on both desktop and mobile. */
.offer-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:10px;text-align:center;position:relative;}
@media (max-width:600px){
  .offer-card{padding:12px;gap:6px;border-radius:10px;}
  .offer-title{font-size:14px;}
  .offer-store{font-size:12px;}
  .offer-tag{font-size:10px;padding:2px 7px;}
  .btn-deal{padding:8px 12px;font-size:14px;}
  .offer-meta{font-size:11px;}
}
.offer-card-link{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1 1 auto;width:100%;}
.offer-logo{display:flex;align-items:center;justify-content:center;}
.logo-fallback{width:40px;height:40px;border-radius:8px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;}
.offer-store{font-size:13px;color:var(--muted);}
/* Caps the title at 2 lines and fades the rest with an ellipsis, so one extremely
   long title can no longer stretch a card taller than the rest. */
.offer-title{font-weight:700;font-size:16px;color:var(--brand-dark);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;width:100%;}
.offer-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;}
.offer-tag{font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;background:#E4F2EE;color:var(--brand);white-space:nowrap;}
.offer-tag-showroom{background:#E7F8EE;color:var(--green);}
.offer-tag-both{background:#F1EAFF;color:#6B3FA0;}

/* Small corner ribbon: "Ad" on Top Offers and Featured Stores */
.ribbon{position:absolute;top:8px;left:8px;font-size:8px;font-weight:700;letter-spacing:.3px;padding:3px 8px;border-radius:999px;z-index:2;}
.ribbon-ad{background:#6B7280;color:#fff;padding:1px 6px;font-size:9px;}

/* Love + Save buttons (Save replaces the old non-working star) */
.love-btn{display:inline-flex;align-items:center;gap:4px;border:none;background:transparent;cursor:pointer;font-size:13px;color:var(--muted);padding:0;}
.love-btn .love-icon{font-size:14px;line-height:1;transition:transform .12s ease;}
.love-btn:active .love-icon{transform:scale(1.25);}
.love-btn.loved{color:#E0245E;font-weight:600;}
.save-btn{border:none;background:transparent;cursor:pointer;padding:0;line-height:1;color:#4B5563;}
.save-btn .save-icon{display:inline-block;transition:transform .12s ease;}
.save-btn .save-icon svg{display:block;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;}
.save-btn:active .save-icon{transform:scale(1.2);}
.save-btn:hover{color:#E0245E;}
.save-btn.saved{color:#E0245E;}
.save-btn.saved .save-icon svg{fill:currentColor;}
.bm-ico{display:inline-block;vertical-align:-3px;width:17px;height:17px;fill:none;stroke:#4B5563;stroke-width:2;stroke-linejoin:round;}
.bm-ico.on{fill:#E0245E;stroke:#E0245E;}
.kpi .bm-ico{width:24px;height:24px;vertical-align:-4px;}
.btn-deal{background:var(--brand);color:#fff;font-weight:700;padding:10px 16px;border-radius:6px;display:inline-block;}
.btn-deal:hover{background:var(--brand-dark);}
.offer-meta{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);}

/* A-Z nav */
.az-nav{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px;}
.az-nav a{font-weight:700;color:var(--brand);}
.az-disabled{color:#C7CDD3;font-weight:700;}

/* Location tiles */
.loc-tile{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:12px;text-align:center;font-weight:600;overflow-wrap:break-word;word-break:break-word;}
.loc-tile:hover{border-color:var(--brand);color:var(--brand);}
.loc-tile-count{display:block;font-size:11px;font-weight:500;color:var(--muted);margin-top:4px;}
.loc-tile-all{display:flex;align-items:center;justify-content:center;background:transparent;border-style:dashed;color:var(--brand);}
.cat-tile-all{background:transparent;border-style:dashed;color:var(--brand);justify-content:center;}
.cat-tile-all:hover{border-color:var(--brand);}
.input-box{width:100%;padding:11px 14px;border-radius:8px;margin-bottom:14px;font-size:14px;font-family:inherit;background-color:#fff;}
.input-box:focus{outline:none;border-color:var(--orange);}
/* Phones/tablets draw an EMPTY date field as a blank box (no "mm/dd/yyyy" hint). On touch devices main.js wraps each
   date input in .date-field and we lay a placeholder over it while it has no value. Desktop keeps its native look. */
.date-field{position:relative;margin-bottom:14px;}
.date-field .input-box{display:block;margin-bottom:0;}   /* so the wrapper is exactly as tall as the input and the placeholder lines up */
.date-field .date-placeholder{display:none;position:absolute;top:1.5px;bottom:1.5px;left:1.5px;right:44px;align-items:center;padding-left:14px;background:#fff;color:#757575;font-size:14px;border-radius:8px 0 0 8px;pointer-events:none;}
.date-field .date-placeholder::before{content:'Select a date';}
.date-field .input-box:disabled + .date-placeholder::before{content:'No expiry';}
.date-field.is-empty .date-placeholder{display:flex;}

/* Page banner (used on inner pages if needed) */

/* Coupon detail */
.coupon-detail-box{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;background:#F7F9FB;border:2px solid #C6CDD4;border-bottom:none;padding:30px;}
.cd-left{width:auto;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;}
.cd-left img{max-width:100%;max-height:100px;object-fit:contain;}
.cd-store-link{color:var(--brand);font-weight:600;font-size:14px;}
.cd-right{display:flex;flex-direction:column;align-items:center;text-align:center;}
.cd-right h1{margin:0 0 10px;font-size:24px;}
.cd-type-badge{display:inline-block;white-space:nowrap;font-size:12px;font-weight:700;letter-spacing:.3px;padding:5px 12px;border-radius:999px;margin-bottom:10px;background:#E4F2EE;color:var(--brand);}
.cd-type-badge.cd-type-coupon{background:#FFF3E0;color:var(--orange);}
.cd-type-badge + .cd-type-badge{margin-left:6px;}
.cd-type-badge.cd-mode-showroom{background:#E7F8EE;color:var(--green);}
.cd-type-badge.cd-mode-both{background:#F1EAFF;color:#6B3FA0;}
.cd-outlet-note{background:#E7F8EE;color:#14663B;border-radius:8px;padding:12px 16px;margin:14px auto 6px;max-width:460px;font-weight:600;line-height:1.5;}
.code-box-lg{display:inline-flex;align-items:center;gap:14px;border:2px dashed var(--orange);border-radius:8px;padding:10px 18px;font-weight:700;font-size:16px;margin:16px 0;}
.code-box-lg button{background:var(--orange);color:#fff;border:none;padding:6px 14px;border-radius:6px;font-weight:600;cursor:pointer;}
.cd-hint{color:var(--muted);font-size:13px;margin:-10px 0 14px;}
.btn-deal-lg{background:var(--brand);color:#fff;font-weight:700;padding:16px 32px;border-radius:8px;display:inline-block;margin:10px 0;font-size:16px;box-shadow:0 8px 20px rgba(10,92,72,0.25);transition:transform .15s ease;}
.btn-deal-lg:hover{transform:translateY(-2px);}
.cd-meta{color:var(--muted);font-size:13px;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;}

.nowrap{white-space:nowrap;}

/* App-style swipeable rows - mobile only. Featured Offers, Featured Stores, Popular
   Stores and Top Categories add the .swipe-row class alongside .grid-3/.grid-6.
   Native touch-scroll with snap points, no JS required. Desktop is untouched -
   .grid-3/.grid-6's normal wrapped-and-centered layout still applies above 600px. */
@media (max-width:600px){
  .swipe-row{
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    padding-bottom:4px;
    /* bleed past .wrap's own 20px side padding so the row runs edge-to-edge,
       with the next card peeking at the right to hint that it scrolls */
    margin:0 -20px;
    padding-left:20px;
    padding-right:20px;
  }
  .swipe-row::-webkit-scrollbar{display:none;}
  .swipe-row > *{flex:0 0 auto;scroll-snap-align:start;}
  /* Offer cards and blog cards intentionally share the same mobile swipe width (was 62%,
     each card took up most of the screen) so the two sections feel visually consistent. */
  .grid-3.swipe-row > *{width:60%;max-width:60%;}
  .grid-blog.swipe-row > *{width:58%;max-width:58%;}
  .grid-6.swipe-row > *{width:30%;max-width:30%;}
}

/* Offer details laid out like a spreadsheet: cells touch, thick visible grid lines */
.coupon-detail-box{margin-bottom:0;}
.cd-info-table-wrap{margin-top:0;overflow:hidden;}
.cd-info-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;background:#F7F9FB;border:2px solid #C6CDD4;}
.cd-info-table td{border-right:2px solid #C6CDD4;border-bottom:2px solid #C6CDD4;padding:14px 16px;font-size:14px;color:var(--ink);vertical-align:top;}
.cd-info-table td:last-child{border-right:none;}
.cd-info-table tr:last-child td{border-bottom:none;}
.cd-info-table .cd-info-label{font-weight:700;width:160px;background:#EEF2F5;white-space:nowrap;}
.cd-info-table .cd-info-value{background:#F7F9FB;word-break:break-word;}

/* Share button, right-aligned just under the bottom-right of the info table */
.cd-share-row{display:flex;justify-content:flex-end;margin-top:10px;}
.btn-share{background:#fff;border:2px solid #C6CDD4;color:var(--ink);font-weight:700;font-size:13px;padding:8px 16px;border-radius:6px;cursor:pointer;}
.btn-share:hover{background:#F7F9FB;}

/* On desktop this card used to stretch the full 1160px content width, which looked
   oversized for a single offer - cap it narrower and center it. Mobile is untouched. */
@media (min-width:601px){
  .coupon-detail{max-width:700px;margin-left:auto;margin-right:auto;}
}

/* Related-offer sections on the coupon detail page */
.related-block{margin-top:6px;}
.related-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:14px;padding:14px 18px;border-radius:12px;}
.related-heading h2{margin:0;font-size:18px;}
.related-heading-store{background:var(--card);border:1px solid var(--line);}
.related-heading-left{display:flex;align-items:center;gap:10px;}
.related-heading-logo{max-height:34px;max-width:70px;object-fit:contain;}
.related-heading-link{font-size:13px;font-weight:700;color:var(--brand);white-space:nowrap;}
.related-heading-similar{background:linear-gradient(90deg,var(--orange),#ffb066);}
.related-heading-similar h2{color:#fff;}

.loc-page-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px;}
.loc-switcher select{min-width:180px;margin-bottom:0;}

/* Forms / Auth */
.auth-section{display:flex;justify-content:center;}
.auth-box{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:34px;max-width:420px;width:100%;}
.btn-submit-lg{width:100%;background:var(--brand);color:#fff;border:none;padding:13px;border-radius:8px;font-weight:700;font-size:15px;cursor:pointer;}
.btn-submit-lg:hover{background:var(--brand-dark);}
.btn-submit-lg:disabled{background:#B9C3CB;cursor:not-allowed;}
.alert-error{background:#FDEDED;color:var(--red);padding:10px 14px;border-radius:8px;margin-bottom:14px;}
.alert-success{background:#EAF8EF;color:var(--green);padding:10px 14px;border-radius:8px;margin-bottom:14px;}

/* Submit Offer layout */
.submit-layout{display:flex;gap:30px;align-items:flex-start;}
.submit-form-box{flex:1.2;background:var(--card);border-radius:12px;padding:26px;}
.submit-help-box{flex:1;background:var(--card);border-radius:12px;padding:26px;}
.submit-help-box ol{padding-left:20px;line-height:1.8;}
.field-label{display:block;font-weight:600;font-size:13px;margin:4px 0 6px;color:var(--brand-dark);}

/* Searchable location dropdown */
.loc-picker{position:relative;margin-bottom:16px;}
.loc-picker-box{display:flex;justify-content:space-between;align-items:center;border-radius:8px;padding:11px 14px;cursor:pointer;background:#fff;font-size:14px;color:var(--muted);}
.loc-picker-box.has-selection{color:var(--ink);}
.loc-picker-box:hover{border-color:var(--orange);}
.loc-picker-arrow{color:var(--muted);}
.loc-picker-panel{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,0.12);z-index:40;padding:12px;}
.loc-picker-panel.open{display:block;}
.loc-picker-panel .input-box{margin-bottom:10px;}
.loc-checklist{max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;}
.loc-check-item{display:flex;align-items:center;gap:8px;padding:7px 6px;border-radius:6px;font-size:14px;cursor:pointer;}
.loc-check-item:hover{background:var(--bg);}
.loc-check-item input{width:auto;margin:0;}
.loc-check-item.hidden-item{display:none;}

/* Store picker (reuses .loc-picker base styles, adds logo rows) */
.store-checklist{max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;}
.store-item{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:6px;font-size:14px;cursor:pointer;}
.store-item:hover{background:var(--bg);}
.store-item.hidden-item{display:none;}
.store-item-logo{width:28px;height:28px;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.store-item-logo img{max-width:100%;max-height:100%;object-fit:contain;}
.logo-fallback-sm{width:100%;height:100%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;}
.store-item-add{border-top:1px solid var(--line);margin-top:4px;padding-top:10px;font-weight:700;color:var(--orange);}
.store-item-add .store-item-logo{background:none;color:var(--orange);font-size:20px;}
.new-store-fields{display:none;border-radius:10px;padding:16px;margin-bottom:16px;background:#FFFBF3;}
.new-store-fields.open{display:block;}
.back-link{display:inline-block;font-size:13px;color:var(--brand);margin-top:4px;}
.store-description{color:var(--muted);line-height:1.6;margin:-8px auto 20px;max-width:70ch;text-align:justify;text-justify:inter-word;text-align-last:center;hyphens:auto;}   /* store description: block centered, full lines justified, last line centered (desktop and mobile) */

/* Contact page */
.contact-lede{color:var(--muted);max-width:65ch;margin-bottom:26px;}
.contact-layout{display:grid;grid-template-columns:280px 1fr;gap:26px;align-items:start;}
@media (max-width:820px){.contact-layout{grid-template-columns:1fr;}}
.contact-info-card{background:var(--brand-dark);color:#fff;border-radius:14px;padding:26px;}
.contact-info-card h3{color:#fff;margin:0 0 20px;font-size:18px;}
.contact-info-item{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px;}
.contact-info-item:last-child{margin-bottom:0;}
.contact-info-icon{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.contact-info-label{font-size:12px;color:#9FB4C4;text-transform:uppercase;letter-spacing:0.4px;margin-bottom:2px;}
.contact-info-item a{color:#fff;font-weight:600;}
.contact-info-item span{color:#fff;font-weight:600;}
.contact-form-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:30px;}
.form-group{margin-bottom:18px;}
.form-group label{display:block;font-weight:600;font-size:14px;margin-bottom:7px;color:var(--ink);}
.form-group .required{color:var(--red);}
.form-group .optional{color:var(--muted);font-weight:400;font-size:12px;}
.field-hint{display:block;font-size:12px;color:var(--muted);margin-top:5px;}
.contact-form textarea.input-box{resize:vertical;min-height:110px;}
.contact-form input:invalid:not(:placeholder-shown){border-color:var(--red);}
.checkbox-line{display:flex;align-items:center;gap:8px;margin-bottom:14px;font-size:14px;}
/* "I accept the Terms and Privacy Policy" tick box: the two links must look like links */
.auth-intro{text-align:justify;text-justify:inter-word;}   /* intro text under the sign-up page title */
.terms-label{line-height:1.5;font-size:14px;}
.terms-label input[type=checkbox]{margin-right:6px;vertical-align:middle;}
.terms-label a{color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:2px;}
.terms-label a:hover{color:var(--brand-dark);}
/* Offer Type: three big tap-friendly cards (Online / Showroom / Both) */
.mode-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;}
.mode-opt{position:relative;display:block;cursor:pointer;}
.mode-opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;}
.mode-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;height:100%;padding:12px 8px;border:1.5px solid var(--line);border-radius:8px;background:#fff;transition:border-color .15s,background .15s;}
.mode-ico{font-size:22px;line-height:1;white-space:nowrap;}
.mode-text{display:flex;flex-direction:column;gap:2px;}
.mode-text strong{font-size:13px;color:var(--ink);}
.mode-text small{font-size:12px;color:var(--muted);}
.mode-opt:hover .mode-card{border-color:var(--brand);}
.mode-opt input:checked + .mode-card{border-color:var(--brand);background:#E4F2EE;box-shadow:0 0 0 1px var(--brand) inset;}
.mode-opt input:focus-visible + .mode-card{outline:2px solid var(--orange);outline-offset:2px;}
@media (max-width:600px){
  .mode-options{grid-template-columns:1fr;}
  .mode-card{flex-direction:row;justify-content:flex-start;text-align:left;gap:12px;padding:10px 14px;}
  .mode-ico{width:56px;font-size:20px;text-align:left;flex-shrink:0;}
}
.login-notice{background:#FFF6E9;border:1px solid var(--orange);padding:10px 14px;border-radius:8px;margin-bottom:14px;font-size:14px;}
@media (max-width:820px){.submit-layout{flex-direction:column;}}

/* Dashboard */
.dash-stats{display:flex;gap:16px;flex-wrap:wrap;margin:20px 0 10px;}
.dash-stat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px 26px;text-align:center;min-width:130px;}
.dash-stat b{display:block;font-size:26px;}
.dash-stat.approved b{color:var(--green);}
.dash-stat.pending b{color:var(--orange);}
.dash-stat.rejected b{color:var(--red);}
.dash-table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;}
.dash-table th,.dash-table td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;font-size:14px;}
.dash-table th{background:var(--bg);}

/* Admin */
.admin-body{background:#F0F3F6;}
.admin-layout{display:flex;min-height:calc(100vh - 60px);}
.admin-sidebar{width:220px;background:var(--brand-dark);color:#fff;padding:20px 0;flex-shrink:0;}
.admin-sidebar a{display:block;padding:12px 22px;color:#CBD9E3;font-weight:600;}
.admin-sidebar a:hover,.admin-sidebar a.active{background:rgba(255,255,255,0.08);color:#fff;}
.admin-content{flex:1;padding:26px;}
.admin-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px;margin-bottom:20px;}
.admin-stats{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:20px;}
.admin-stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px 24px;min-width:140px;text-align:center;}
.admin-stat b{font-size:24px;display:block;}
.admin-table{width:100%;border-collapse:collapse;}
.admin-table th,.admin-table td{padding:10px;border-bottom:1px solid var(--line);text-align:left;font-size:14px;vertical-align:middle;}
.admin-table th{background:var(--bg);}
.badge{padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;}
.badge-pending{background:#FFF3E0;color:var(--orange);}
.badge-approved{background:#E7F8EE;color:var(--green);}
.badge-rejected{background:#FDECEC;color:var(--red);}
/* display:inline-block (+ a bottom margin) is required here: these are <a> tags, and a
   plain inline element's vertical padding doesn't reserve line-box space, so once several
   buttons wrap onto a second line inside a cramped mobile table cell their backgrounds
   visually overlap the line above. inline-block fixes that regardless of screen width. */
.btn-sm{display:inline-block;padding:5px 12px;border-radius:6px;font-size:12px;font-weight:700;border:none;cursor:pointer;margin:0 4px 4px 0;}
.btn-approve{background:var(--green);color:#fff;}
.btn-reject{background:var(--red);color:#fff;}
.btn-edit{background:var(--brand);color:#fff;}
.btn-delete{background:#9AA5B1;color:#fff;}
.admin-form label{display:block;font-weight:600;margin:12px 0 6px;font-size:14px;}
.tabs{display:flex;gap:10px;margin-bottom:18px;}
.tabs a{padding:8px 16px;border-radius:6px;font-weight:600;background:#fff;border:1px solid var(--line);}
.tabs a.active{background:var(--brand);color:#fff;border-color:var(--brand);}

/* Footer */
.site-footer-wrap{margin-top:30px;}

/* Mega-footer link columns (About/Legal/Explore etc.), like a typical hosting-company footer */
.footer-links-section{background:var(--brand-dark,#063A2D);color:#C9D6DF;padding:40px 0 28px;}
.footer-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;}
.footer-col{display:flex;flex-direction:column;gap:10px;}
.footer-col-title{color:#fff;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin:0 0 4px;}
.footer-col-links{display:flex;flex-direction:column;gap:10px;}
.footer-col a{color:#C9D6DF;font-size:14px;line-height:1.4;}
.footer-col a:hover{color:var(--orange);}
.footer-col-brand{gap:12px;}
.footer-logo{display:flex;align-items:center;gap:8px;color:#fff;font-weight:700;font-size:18px;}
/* The logo artwork was made for a white background - on this dark footer it needs its own
   light chip behind it so the navy/blue parts of the mark don't blend into the footer. */
.footer-logo-chip{display:inline-flex;align-items:center;background:#fff;padding:8px 8px;line-height:0;}
.footer-logo-img{height:var(--logo-h,39px);width:auto;display:block;}
.footer-tagline{font-size:13px;line-height:1.6;color:#9FB1BE;margin:0;max-width:260px;}

/* Explore/Company/Legal column titles double as buttons: on tablet/desktop they look and
   behave like plain static headings (button reset, not clickable); on mobile only, CSS
   turns the same markup into a tap-to-expand accordion (see the max-width:560px block). */
.footer-col-title.footer-acc-toggle{background:none;border:0;padding:0;font-family:inherit;text-align:left;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:default;}
.footer-col-title.footer-acc-toggle::after{content:'';}

@media (max-width:900px){
  .footer-cols{grid-template-columns:1fr 1fr;row-gap:28px;}
  .footer-col-brand{grid-column:1 / -1;}
}

@media (max-width:560px){
  .footer-cols{grid-template-columns:1fr;text-align:left;}
  .footer-col{border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:14px;}
  .footer-col-brand{border-bottom:none;padding-bottom:0;}
  .footer-col-title.footer-acc-toggle{cursor:pointer;padding:6px 0;}
  .footer-col-title.footer-acc-toggle::after{content:'+';font-size:18px;color:#9FB1BE;font-weight:400;}
  .footer-col.is-open .footer-col-title.footer-acc-toggle::after{content:'–';}
  .footer-col-links{display:none;padding:8px 0 4px;}
  .footer-col.is-open .footer-col-links{display:flex;}
}

/* Bottom bar: copyright only, like most hosting-company sites */
.site-footer{background:#052C22;border-top:1px solid rgba(255,255,255,.08);padding:16px 0;}
.footer-row{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;color:#9FB1BE;text-align:center;}

/* Responsive nav */
@media (max-width:820px){
  .header-top{gap:5px;}
  .header-actions-desktop{display:none;}
  .btn-header{font-size:13px;padding:5px 10px;}
  .mobile-actions{display:flex;order:1;}
  .search-bar{order:2;flex-basis:100%;max-width:100%;margin-top:0px;}
  .nav-mobile-bar{display:flex;align-items:center;justify-content:space-between;padding:4px var(--gutter);}
  .nav-links{display:none;flex-direction:column;gap:0;padding:0 var(--gutter) 10px;}
  .nav-links.open{display:flex;}
  .nav-links a{padding:10px 0;border-bottom:1px solid var(--line);white-space:normal;}
  .coupon-detail-box{flex-direction:column;}
  .cd-info-table .cd-info-label{width:110px;white-space:normal;}
  .cd-info-table td{padding:10px 10px;font-size:13px;}
  /* .admin-layout / .admin-sidebar on phones: see the dedicated "mobile-app style navigation"
     section further down - it replaces this old horizontal-scrolling-bar attempt with a slide-in drawer. */
}
/* 1. Center the section container wrapper */
.wrap {
  margin-left: auto;
  margin-right: auto;
}

/* 2. Center the section titles */
.section-title {
  text-align: center;
}
/* Center all page titles */
.page-h1 {
  text-align: center;
}
/* Submit Offer page - darker, clearer borders */
.submit-form-box{border:1.5px solid #D3D3D3;}
.submit-help-box{border:1.5px solid #D3D3D3;}
.input-box{border:1.5px solid #0A5C48;}
.loc-picker-box{border:1.5px solid #0A5C48;}
.loc-picker-panel{border:1.5px solid #0A5C48;}
.new-store-fields{border:1.5px solid #0A5C48;}

@media (max-width: 1600px) {
  :root { --gutter: 35px; }
  .wrap {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
}
@media (max-width: 1200px) {
  :root { --gutter: 25px; }
  .wrap {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
}
@media (max-width: 600px) {
  :root { --gutter: 16px; }
  .wrap {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
}

/* ===== BLOG + long-text pages (Disclaimer / Privacy / Terms) ===== */


/* long-text pages */
.prose{max-width:820px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 30px;line-height:1.75;}
.prose h2{font-size:19px;margin:24px 0 8px;color:var(--brand-dark);}
.prose p{margin:0 0 12px;}
.prose ul{margin:0 0 12px;padding-left:22px;list-style:disc;}
.prose li{margin-bottom:6px;}
.prose a{color:var(--brand);font-weight:600;text-decoration:underline;}
.prose-updated{color:var(--muted);font-size:13px;margin:-8px 0 16px;}
/* FAQ page: each question opens its answer when tapped (no JavaScript needed) */
.faq-intro{color:var(--muted);margin:-6px 0 8px;}
.prose h2.faq-group{font-size:18px;margin:28px 0 12px;padding-bottom:6px;border-bottom:2px solid var(--line);}
.faq-item{border:1px solid var(--line);border-radius:10px;margin-bottom:10px;background:#fff;overflow:hidden;}
.faq-item summary{cursor:pointer;list-style:none;position:relative;padding:14px 48px 14px 16px;font-weight:700;line-height:1.45;color:var(--ink);text-align:left;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:24px;line-height:1;font-weight:700;color:var(--brand);}
.faq-item[open] summary{background:#F2F8F6;color:var(--brand-dark);}
.faq-item[open] summary::after{content:"\2212";}
.faq-item summary:hover{background:#F2F8F6;}
.faq-answer{padding:2px 16px 8px;}
.faq-answer p{margin:10px 0;}
.faq-more{margin-top:26px;padding:16px 18px;border-radius:10px;background:#E4F2EE;border:1px solid #BFE0D6;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;}
@media (max-width:600px){.prose{padding:18px 16px;}}

/* blog list */
.blog-intro{color:var(--muted);margin:-8px 0 22px;text-align:center;}
.blog-grid{display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:900px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:600px){.blog-grid{grid-template-columns:1fr;}}
.blog-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease;}
.blog-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(6,58,45,.10);}
.blog-card-img{aspect-ratio:16/9;background:linear-gradient(135deg,#E4F2EE,#FFF3E0);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.blog-card-img img{width:100%;height:100%;object-fit:cover;display:block;}
.blog-card-fallback{font-size:44px;}
/* Title and the date/read-more row are centered to match the rest of the site's
   card sections (offer-card, store-tile, etc). The excerpt itself stays left-aligned -
   centering 2-3 lines of running text tends to look messy rather than tidy. */
.blog-card-body{padding:16px 18px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;flex:1;}
.blog-card-title{font-size:17px;line-height:1.4;color:var(--brand-dark);margin:0;}
.blog-card-excerpt{font-size:14px;color:var(--muted);line-height:1.6;margin:0;text-align:justify;text-justify:inter-word;align-self:stretch;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.blog-card-meta{margin-top:auto;display:flex;justify-content:center;align-items:center;gap:14px;font-size:12px;color:var(--muted);padding-top:6px;}
.blog-card-more{color:var(--brand);font-weight:700;}
@media (max-width:600px){
  /* Matches the same compaction .offer-card already gets at this width, since blog
     cards now sit at the same narrower mobile size as offer cards (see .grid-blog). */
  .blog-card-body{padding:10px 12px 12px;gap:5px;}
  .blog-card-title{font-size:14px;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;}
  .blog-card-excerpt{font-size:12px;-webkit-line-clamp:2;}
  .blog-card-meta{font-size:11px;gap:8px;}
  .blog-card-fallback{font-size:30px;}
}
.pager a,.pager-current{padding:7px 13px;border-radius:8px;border:1px solid var(--line);background:#fff;font-weight:600;font-size:14px;}
.pager a:hover{border-color:var(--brand);color:var(--brand);}
.pager-current{background:var(--brand);color:#fff;border-color:var(--brand);}

/* one article (also used by the editor's live preview via .post-body) */
.post{max-width:780px;margin:0 auto;}
.post-title{font-size:32px;line-height:1.3;margin:10px 0 10px;color:var(--brand-dark);}
.post-title{text-align:justify;text-justify:inter-word;}   /* blog post title: justified on desktop and mobile */
.post-title.post-title-fill{text-align-last:justify;}   /* a long one-line title is stretched to the full width (set by the small script in blog.php) */
.post-title,.post-title.post-title-fill{text-align:center;text-align-last:center;}   /* the blog post title is centered on desktop, tablet and phone */
.post-meta{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--muted);font-size:13px;margin-bottom:18px;}
.post-edit-link{color:var(--orange);font-weight:700;}
.post-cover{width:100%;height:auto;border-radius:12px;margin-bottom:22px;display:block;}
.post-body{font-size:17px;line-height:1.85;color:var(--ink);overflow-wrap:anywhere;}
.post-body h2{font-size:24px;margin:30px 0 10px;color:var(--brand-dark);line-height:1.35;}
.post-body h3{font-size:20px;margin:24px 0 8px;color:var(--brand-dark);line-height:1.35;}
.post-body p{margin:0 0 16px;}
.post-body ul{margin:0 0 16px;padding-left:26px;list-style:disc;}
.post-body ol{margin:0 0 16px;padding-left:26px;list-style:decimal;}
.post-body li{margin-bottom:6px;}
.post-body a{color:var(--brand);font-weight:600;text-decoration:underline;}
.post-body blockquote{margin:0 0 16px;padding:12px 18px;border-left:4px solid var(--orange);background:#FFF8F0;border-radius:0 8px 8px 0;}
.post-body blockquote p{margin:0;}
.post-body p,.post-body li,.post-body blockquote p{text-align:justify;text-justify:inter-word;}   /* blog content: justified on desktop and mobile (headings stay as they are) */
.post-body figure{margin:0 0 18px;}
.post-body::after{content:"";display:block;clear:both;}   /* text never runs outside the article after a floated picture */
/* pictures with a chosen size / position (set in the blog editor) */
.post-body .post-img img{width:100%;}
.post-body .post-img-left{float:left;margin:4px 22px 14px 0;}
.post-body .post-img-right{float:right;margin:4px 0 14px 22px;}
.post-body .post-img-center{margin-left:auto;margin-right:auto;}
.post-body ul,.post-body ol{display:flow-root;}   /* bullets stay visible next to a picture */
.post-body sup,.post-body sub{font-size:.72em;line-height:0;}   /* keeps line spacing even */
.post-body img{max-width:100%;height:auto;border-radius:10px;display:block;}
.post-body hr{border:none;border-top:1px solid var(--line);margin:26px 0;clear:both;}
.post-share{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:30px 0 8px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;}
.post-share a,.post-share button{padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:600;font-size:13px;cursor:pointer;color:var(--ink);font-family:inherit;}
.post-share a:hover,.post-share button:hover{border-color:var(--brand);color:var(--brand);}
.related-more-title{font-size:22px;margin:40px 0 16px;color:var(--brand-dark);text-align:center;}
@media (max-width:600px){.post-title{font-size:25px;}.post-body{font-size:16px;}.post-body h2{font-size:21px;}}
/* phones: a picture with text beside it goes on its own line, full width */
@media (max-width:600px){.post-body .post-img-left,.post-body .post-img-right{float:none;width:100%!important;margin:0 0 18px;}.post-body .post-img{width:100%!important;}}

/* admin: blog editor */
.editor-tabs{display:flex;gap:6px;margin-bottom:8px;}
.editor-tabs button{padding:7px 16px;border:1px solid var(--line);background:#fff;border-radius:8px;font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;}
.editor-tabs button.active{background:var(--brand);color:#fff;border-color:var(--brand);}
.editor-toolbar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.editor-toolbar button{padding:6px 11px;border:1px solid var(--line);background:#fff;border-radius:6px;font-size:13px;cursor:pointer;font-family:inherit;}
.editor-toolbar button:hover{border-color:var(--brand);color:var(--brand);}
#postContent{font-family:inherit;line-height:1.6;min-height:340px;}
.editor-preview{border:1.5px solid var(--line);border-radius:8px;padding:18px 20px;background:#fff;min-height:340px;margin-bottom:14px;}
.editor-help{font-size:13px;color:var(--muted);margin:-6px 0 14px;}
.editor-cover-current{margin-bottom:10px;}
.editor-cover-current img{max-width:260px;width:100%;border-radius:8px;border:1px solid var(--line);display:block;margin-bottom:6px;}

/* editor: bar that appears when the cursor is on a picture line */
.editor-imgbar{display:none;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:10px 12px;margin-bottom:8px;background:#E4F2EE;border:1px solid #BFE0D6;border-radius:8px;font-size:13px;}
.editor-imgbar strong{color:var(--brand-dark);}
.editor-imgbar label{display:flex;align-items:center;gap:6px;margin:0;font-weight:600;color:var(--ink);}
.editor-imgbar select,.editor-imgbar input[type=text]{padding:5px 8px;border:1px solid var(--line);border-radius:6px;font-family:inherit;font-size:13px;background:#fff;}
.editor-imgbar input[type=text]{min-width:190px;}
.editor-imgbar input[type=range]{width:130px;}
.editor-imgbar .imgbar-pct{min-width:38px;font-weight:700;color:var(--brand);}

/* editor: SEO box (search engine title + description + Google preview) */
.seo-box{border:1.5px solid var(--line);border-radius:10px;padding:14px 16px 6px;margin:6px 0 16px;background:#FAFBFC;}
.seo-box h4{margin:0 0 4px;font-size:16px;color:var(--brand-dark);}
.seo-box .editor-help{margin:0 0 12px;}
.seo-tabs{display:flex;gap:6px;margin:10px 0 10px;}
.seo-tabs button{padding:5px 14px;border:1px solid var(--line);background:#fff;border-radius:999px;font-weight:700;font-size:12.5px;cursor:pointer;font-family:inherit;}
.seo-tabs button.active{background:var(--brand);color:#fff;border-color:var(--brand);}
.seo-count{display:block;font-size:12.5px;margin:-8px 0 12px;color:var(--muted);}
.seo-count.ok{color:#1E8E3E;}.seo-count.warn{color:#C77700;}.seo-count.bad{color:#D64545;}
.seo-bar{height:5px;border-radius:3px;background:#E3E8EC;margin:-8px 0 4px;overflow:hidden;}
.seo-bar i{display:block;height:100%;width:0;background:#9AA5B1;transition:width .15s;}
.seo-bar.ok i{background:#1E8E3E;}.seo-bar.warn i{background:#E8A200;}.seo-bar.bad i{background:#D64545;}

/* the Google result preview (an approximation of how a search result looks) */
.serp{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-family:Arial,Helvetica,sans-serif;max-width:640px;}
.serp.serp-mobile{max-width:380px;border-radius:14px;padding:12px 14px;}
.serp-site{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.serp-fav{width:26px;height:26px;border-radius:50%;border:1px solid #E3E8EC;background:#fff center/16px no-repeat;flex-shrink:0;}
.serp-sitename{font-size:14px;line-height:1.2;color:#202124;}
.serp-url{font-size:12px;line-height:1.3;color:#4D5156;word-break:break-all;}
.serp-title{display:block;font-size:20px;line-height:1.3;color:#1A0DAB;margin:0 0 3px;font-weight:400;overflow-wrap:anywhere;}
.serp-mobile .serp-title{font-size:18px;}
.serp-desc{font-size:14px;line-height:1.58;color:#4D5156;margin:0;overflow-wrap:anywhere;}
.serp-mobile .serp-desc{font-size:13.5px;}

/* ===== LOGO FRAME: every store logo sits in a white frame with a light-gray border =====
   The white frame keeps a logo's own white background looking tidy, and the light-gray border separates the
   logo clearly from the page. Change the border colour in ONE place: --logo-border below. */
.logo-frame{background:#fff;border:2px solid var(--logo-border);border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;}

/* offer cards */
/* capped at the same width Popular Stores tiles render at (a 6-col grid), so the
   logo looks the same physical size here even though this card sits in a wider,
   3-column grid - without the cap it would scale up to fill the wider column. */
.offer-logo.logo-frame{width:100%;max-width:150px;height:auto;aspect-ratio:3/2;padding:10px 14px;}
.offer-logo.logo-frame img{max-height:100%;max-width:100%;object-fit:contain;}
@media (max-width:600px){
  .offer-logo.logo-frame{max-width:100px;padding:6px 8px;}
}

/* store tiles */
.store-tile{padding:14px 12px;}
.store-tile .logo-frame{width:100%;height:auto;aspect-ratio:3/2;padding:10px 14px;}
.store-tile .logo-frame img{max-height:100%;max-width:100%;object-fit:contain;}
.store-tile .logo-fallback-lg{flex-shrink:0;}
/* phones show 3 stores per row, so tiles are narrow: keep the logo frame (and tile) landscape instead of tall */
@media (max-width:600px){
  .store-tile{padding:8px;min-height:0;}
  .store-tile .logo-frame{padding:6px 8px;}
  .store-tile .logo-frame .logo-fallback-lg{width:38px;height:38px;font-size:18px;}   /* letter avatar must fit inside the smaller frame */
}

/* small logos: store picker in the Submit Offer form, and the "More offers from ..." heading */
.store-item-logo{background:#fff;border:1px solid var(--logo-border);}
.related-heading-logo{background:#fff;border:2px solid var(--logo-border);border-radius:8px;padding:4px 8px;}

/* ===== ADMIN / MERCHANT PANEL: mobile-app style navigation =====
   On phones the sidebar becomes a slide-in drawer opened with the ☰ button in the header, instead of a
   full column of links that pushed the rest of the page off-screen and made half the menu unreachable. */
.header-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:13px 0;}
.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto;}
.header-actions>span{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.admin-menu-toggle{display:none;background:var(--brand-dark);color:#fff;border:none;width:38px;height:38px;border-radius:8px;font-size:18px;line-height:1;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0;}
.admin-overlay{display:none;}

@media (max-width:880px){
  .admin-menu-toggle{display:inline-flex;}
  .admin-layout{display:block;}
  /* top starts BELOW the sticky header (its real height is measured in JS and stored in
     --admin-header-h - the header can wrap to two lines on narrow phones, so this can't be a
     fixed guess) - otherwise the header sits on top of the drawer and hides the first couple
     of links (Dashboard, Offers) behind it, exactly like a plain top:0 would. */
  .admin-sidebar{display:block;position:fixed;top:var(--admin-header-h, 64px);left:0;bottom:0;width:250px;max-width:82vw;transform:translateX(-100%);
    transition:transform .22s ease;z-index:210;overflow-y:auto;box-shadow:3px 0 22px rgba(6,58,45,.25);
    padding-top:12px;padding-bottom:env(safe-area-inset-bottom,0px);}
  .admin-sidebar.open{transform:translateX(0);}
  .admin-overlay{display:block;position:fixed;inset:0;background:rgba(6,58,45,0);pointer-events:none;
    transition:background .22s ease;z-index:200;}
  .admin-overlay.open{background:rgba(6,58,45,.45);pointer-events:auto;}
  body.admin-drawer-open{overflow:hidden;}
  .admin-content{padding:16px;width:100%;box-sizing:border-box;}
  .header-row{position:sticky;top:0;z-index:220;background:#fff;}   /* above the drawer (210) & overlay (200) so the ☰ button stays clickable to close it */
}

/* ===== ADMIN / MERCHANT PANEL: compact, even stat tiles on phones (instead of odd-sized flex-wrap) ===== */
@media (max-width:600px){
  .admin-stats,.dash-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .admin-stat,.dash-stat{min-width:0;padding:14px 8px;}
  .admin-stat b,.dash-stat b{font-size:20px;}
  .admin-stat{font-size:12px;}
  .page-h1{font-size:22px;}
}

/* ===== ADMIN / MERCHANT PANEL: a table scrolls inside its own card instead of squeezing or breaking the page ===== */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table-scroll table{min-width:520px;}

/* ===== LOGO RESIZER TOOL: client-side crop/resize helper offered wherever a store logo is
   uploaded (submit-offer.php, admin store form). Runs entirely in the visitor's browser via
   <canvas> - nothing is uploaded to the server until they click "Use This Image", so it costs
   no server bandwidth to offer it. See assets/js/logo-resizer.js for the logic. ===== */

.lr-inline-hint{margin:6px 0 0;font-size:12.5px;color:var(--muted);}
.lr-inline-hint a, .lr-trigger-link{color:var(--brand);font-weight:700;cursor:pointer;text-decoration:none;}
.lr-inline-hint a:hover, .lr-trigger-link:hover{color:var(--orange);}
.lr-suggest{margin:8px 0 0;padding:10px 12px;background:#FFF3E0;border:1px solid #F3D9B8;border-radius:8px;font-size:13px;color:#7A4A12;display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:space-between;}
.lr-suggest strong{color:#7A4A12;}
.lr-suggest .btn-sm{margin:0;}
/* Stronger red styling for a file that will actually be REJECTED (over 500KB) - as opposed to
   the softer orange "recommended size" suggestion, which is optional. */
.lr-suggest-error{background:#FDECEC;border-color:#F3C6C6;color:#8A2323;}
.lr-suggest-error strong{color:#8A2323;}
.lr-ok{margin:8px 0 0;padding:8px 12px;background:#E7F8EE;border:1px solid #BEE9CE;border-radius:8px;font-size:13px;color:#166534;}

.lr-overlay{position:fixed;inset:0;background:rgba(6,58,45,.55);z-index:400;display:none;align-items:center;justify-content:center;padding:16px;}
.lr-overlay.open{display:flex;}
.lr-modal{background:#fff;border-radius:14px;max-width:680px;width:100%;max-height:92vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.35);}
.lr-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;border-radius:14px 14px 0 0;z-index:2;}
.lr-modal-head h3{margin:0;font-size:16px;color:var(--brand-dark);}
.lr-close{background:none;border:0;font-size:22px;line-height:1;cursor:pointer;color:var(--muted);padding:4px 6px;}
.lr-close:hover{color:var(--red);}
.lr-modal-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:16px;}

.lr-canvas-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;}
.lr-canvas-box{position:relative;width:100%;max-width:360px;aspect-ratio:3/2;border-radius:10px;overflow:hidden;border:1px solid var(--line);
  background-color:#e9edf0;background-image:linear-gradient(45deg,#dde3e7 25%,transparent 25%),linear-gradient(-45deg,#dde3e7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dde3e7 75%),linear-gradient(-45deg,transparent 75%,#dde3e7 75%);
  background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;cursor:grab;touch-action:none;}
.lr-canvas-box.dragging{cursor:grabbing;}
.lr-canvas-box canvas{width:100%;height:100%;display:block;}
.lr-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;color:var(--muted);padding:16px;background:rgba(244,247,249,.9);}
.lr-hint{font-size:12px;color:var(--muted);margin:0;text-align:center;}
.lr-file-input{font-size:13px;}

.lr-controls{display:flex;flex-direction:column;gap:14px;}
.lr-field label{display:block;font-size:12px;font-weight:700;color:var(--brand-dark);margin-bottom:6px;}
.lr-btn-row{display:flex;flex-wrap:wrap;gap:8px;}
.lr-mode-btn,.lr-fmt-btn{padding:7px 14px;border-radius:8px;font-size:12.5px;font-weight:700;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;}
.lr-mode-btn.active,.lr-fmt-btn.active{background:var(--brand);border-color:var(--brand);color:#fff;}
.lr-bg-btn{width:34px;height:34px;border-radius:8px;border:2px solid var(--line);cursor:pointer;background:#fff;padding:0;}
.lr-bg-btn.active{border-color:var(--brand);box-shadow:0 0 0 2px rgba(10,92,72,.25);}
#lrCustomColor{width:34px;height:34px;border-radius:8px;border:2px solid var(--line);padding:0;cursor:pointer;background:none;}
.lr-zoom-row{display:flex;align-items:center;gap:10px;}
.lr-zoom-row input[type=range]{flex:1;}
#lrZoomVal{font-size:12px;color:var(--muted);font-weight:700;min-width:42px;text-align:right;}
.lr-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding-top:4px;border-top:1px solid var(--line);}

@media (max-width:480px){
  .lr-modal{border-radius:0;max-height:100vh;height:100%;}
  .lr-modal-head{border-radius:0;}
}

/* Location page: center the heading, sub-headings, dropdown and content */
.loc-page-head{flex-direction:column;justify-content:center;align-items:center;}
.loc-page-head .page-h1{width:100%;margin-bottom:0;}
.loc-switcher{display:flex;justify-content:center;}
.sub-h{text-align:center;}
/* Swipe rows: keep content centered when it doesn't fill the row (e.g. a single store),
   but still scroll normally when it overflows. Auto margins only absorb free space. */
@media (max-width:600px){
  .swipe-row > :first-child{margin-left:auto;}
  .swipe-row > :last-child{margin-right:auto;}
}

/* Footer tagline under the logo: justified */
.footer-tagline{text-align:justify;text-justify:inter-word;hyphens:none;}

/* Tagline takes exactly the logo's width and is justified to it */
.footer-brand-inner{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:12px;}
.footer-brand-inner .footer-tagline{width:100%;max-width:none;text-align:justify;text-justify:inter-word;hyphens:none;}
/* Footer logo box: regular rectangle corners */
.footer-logo-chip{border-radius:0;}

/* Offer count + sort bar on listing pages: both boxes share one design */
.list-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px;}
.list-count,.sort-form select{box-sizing:border-box;height:42px;background:#fff;border:1.5px solid #0A5C48;border-radius:12px;font-size:15px;color:#063A2D;}
.list-count{display:inline-flex;align-items:center;gap:8px;padding:0 14px 0 6px;}
.list-count-num{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 8px;border-radius:8px;background:#0A5C48;color:#fff;font-weight:700;font-size:14px;}
.list-count-text{font-weight:600;font-size:14px;color:#063A2D;white-space:nowrap;}
.sort-form{display:flex;align-items:center;gap:8px;margin:0;}
.sort-form label{font-size:14px;font-weight:600;color:#063A2D;white-space:nowrap;}
.sort-form select{width:auto;min-width:160px;margin-bottom:0;padding:0 10px;font-weight:600;}
@media (max-width:600px){
  /* One row: count pinned to the left edge, sort pinned to the right edge (matches page margins) */
  .list-toolbar{flex-wrap:nowrap;justify-content:space-between;gap:8px;}
  .list-count{flex:0 0 auto;padding:0 10px 0 5px;gap:6px;}
  .list-count-num{min-width:26px;height:26px;padding:0 7px;font-size:13px;}
  .list-count-text{font-size:13px;}
  .sort-form{flex:0 0 auto;min-width:0;}
  /* "Sort by" label hidden visually (still read by screen readers) */
  .sort-form label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .sort-form select{min-width:0;width:140px;padding:0 4px 0 10px;font-size:13px;}
}

/* Load more offers */
.load-more-wrap{text-align:center;margin:26px 0 8px;}
.load-more-status{font-size:14px;color:#5b6b7b;margin:0 0 12px;}
.btn-load-more{display:inline-block;background:#0A5C48;color:#fff;font-weight:700;font-size:16px;padding:12px 32px;border-radius:12px;border:0;cursor:pointer;}
.btn-load-more:hover{background:#084A3A;}
.btn-load-more.loading{opacity:.65;pointer-events:none;}
.load-prev{display:block;margin-top:14px;font-size:14px;font-weight:600;color:#0A5C48;}

/* ===== v7: merchant tools, profile, status badges, alerts ===== */
.badge-paused{background:#EEF1F4;color:#5b6b7b;}
.badge-expired{background:#F3E8E8;color:#9a3b3b;}
.alert-warn{background:#FFF7E6;color:#A66A00;padding:10px 14px;border-radius:8px;margin-bottom:14px;}
.alert-info{background:#E4F2EE;color:#0A5C48;padding:10px 14px;border-radius:8px;margin-bottom:14px;}
.muted{color:var(--muted);}
.inline-form{display:inline;margin:0;}
.inline-form .btn-sm{margin:0 4px 4px 0;}
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;align-items:start;}
.profile-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px;}
.profile-card h3{margin-top:0;}
.profile-card label{display:block;font-weight:600;font-size:14px;margin:12px 0 4px;}
.reject-note{font-size:12px;color:var(--red);margin-top:4px;}
.range-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 14px;font-size:14px;color:var(--muted);}
.chip{display:inline-block;padding:6px 14px;border:1.5px solid #0A5C48;border-radius:999px;background:#fff;color:#0A5C48;font-weight:600;font-size:13px;}
.chip span{display:inline-block;margin-left:4px;background:#E4F2EE;border-radius:999px;padding:0 7px;font-size:12px;}
.chip.active{background:#0A5C48;color:#fff;}
.chip.active span{background:rgba(255,255,255,.25);color:#fff;}
.filter-chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0;}
.offers-top{margin-bottom:6px;}
.offers-filter{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0;}
.offers-filter .input-box{width:auto;min-width:160px;margin:0;}
.offers-filter input[type=search]{flex:1 1 200px;}
.pager a.active{background:#0A5C48;color:#fff;border-color:#0A5C48;}
.kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:20px;}
.kpi{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 8px;text-align:center;}
.kpi b{display:block;font-size:22px;color:#063A2D;}
.kpi span{display:block;font-size:12px;color:var(--muted);margin-top:2px;}
.chart-legend{display:flex;gap:16px;font-size:13px;color:var(--muted);margin-bottom:6px;}
.chart-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px;}
.best-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:14px;}
.attention-card .attn-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;background:#F6F8FA;margin-bottom:8px;font-size:14px;}
.attn-bad{background:#FDEDED !important;}
.attn-warn{background:#FFF7E6 !important;}
.app-box{border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:12px;background:#fff;font-size:14px;}
.app-form{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.app-form .input-box{width:auto;min-width:160px;margin:0;}
@media (max-width:860px){
  .kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .best-row{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .attention-card .attn-row{flex-direction:column;align-items:flex-start;}
}

/* ---- Sign-up / profile forms ---- */
.form-sec{font-size:15px;color:#063A2D;margin:20px 0 4px;padding-bottom:6px;border-bottom:1px solid var(--line);}
.form-sec:first-of-type{margin-top:6px;}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
.form-row-2 label{display:block;font-weight:600;font-size:14px;margin:12px 0 4px;}
.auth-box > form > label{display:block;font-weight:600;font-size:14px;margin:12px 0 4px;}

/* ---- Merchant profile completeness + locked analytics ---- */
.progress-bar{height:10px;background:#E3E8EC;border-radius:99px;overflow:hidden;margin:8px 0 12px;}
.progress-bar > i{display:block;height:100%;background:#2E9E5B;border-radius:99px;}
.progress-bar.low > i{background:#E8932C;}
.lock-card{border:2px dashed #C9D6E0;background:#F8FAFC;text-align:center;}
.lock-card h3{margin-top:0;}
.todo-list{list-style:none;padding:0;margin:12px auto 14px;max-width:420px;text-align:left;}
.todo-list li{padding:7px 10px;border-radius:8px;font-size:14px;display:flex;justify-content:space-between;gap:10px;align-items:center;}
.todo-list li.done{color:var(--muted);}
.todo-list li.todo{background:#FFF7E6;margin-bottom:4px;}
.sidebar-progress{padding:10px 22px 4px;font-size:12px;color:#CBD9E3;}
.sidebar-progress .progress-bar{margin:5px 0 0;background:rgba(255,255,255,.18);height:7px;}
.kpi-locked{background:#F3F6F9;border-style:dashed;opacity:.8;}
.kpi-locked b{color:#9AA9B7;}
@media (max-width:600px){.form-row-2{grid-template-columns:1fr;}}
.role-chip{display:inline-block;background:#E4F2EE;color:#084A3A;font-size:12px;font-weight:700;padding:4px 10px;border-radius:99px;margin-right:6px;}
.badge-suspended{background:#FDE8E8;color:#B3261E;}
.search-row{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px;}
.search-row .input-box{max-width:280px;margin:0;}
.pager{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:12px 0 4px;}
.pager a,.pager span{padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:14px;}
.pager span{background:#084A3A;color:#fff;border-color:#084A3A;}
button.btn-outline{background:transparent;font:inherit;font-weight:600;cursor:pointer;}
.logout-form{margin:0;}
.user-avatar-dropdown .logout-form button{display:block;width:100%;text-align:left;background:none;border:0;padding:11px 16px;font:inherit;font-size:14px;color:var(--ink);font-weight:600;cursor:pointer;}
.user-avatar-dropdown .logout-form button:hover{background:var(--bg);color:var(--orange);}
/* ---- Footer: spread the four columns across the full width ----
   The brand block sits on the left edge and the last column ends on the right edge, so the blank space is
   shared evenly instead of piling up on the right. Phones/tablets keep their own layouts (rules above). */
@media (min-width:901px){
  .footer-cols{grid-template-columns:minmax(240px,340px) auto auto auto;justify-content:space-between;column-gap:48px;}
  .footer-col-title.footer-acc-toggle{width:auto;}
  /* Side gaps on desktop: about 0.75in (72px) each side, never wider than the 1200px site content */
  .footer-links-section .wrap,.site-footer .wrap{width:min(1200px,calc(100% - 2*clamp(40px,5.5vw,72px)));max-width:none;padding-left:0;padding-right:0;}
}

/* ---- Text pages (Privacy, Terms, Disclaimer, About): justified body text, headings stay as they are ---- */
.prose p,.prose li{text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;}
.prose p.prose-updated{text-align:center;}

/* ---- Login page: User / Merchant tabs ---- */
.auth-tabs{display:flex;border-bottom:2px solid var(--line);margin:0 0 20px;}
.auth-tab{flex:1;text-align:center;padding:11px 8px;font-weight:700;font-size:15px;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-2px;text-decoration:none;}
.auth-tab:hover{color:var(--brand);}
.auth-tab.is-active{color:var(--brand);border-bottom-color:var(--orange);}
.auth-promo{background:#E4F2EE;color:var(--brand-dark);padding:10px 14px;border-radius:8px;font-size:14px;line-height:1.5;margin:0 0 16px;text-align:left;}
.auth-promo a{color:var(--brand);text-decoration:underline;}
.auth-panel[hidden]{display:none;}
@media (max-width:480px){
  .auth-tabs-box{padding:22px 16px;}
  .auth-tab{font-size:14px;padding:10px 4px;}
}

/* ---- Store tiles on phones/tablets (homepage + location page Featured/Popular Stores) ----
   Every tile is the same plain box with no caption underneath (Featured and Popular look the same). A store with
   no logo shows its name inside its box instead of a letter circle. Gaps are tighter and the logo frames are
   wider and a little shorter, so logos show bigger in less space. Desktop is unchanged. */
@media (max-width:900px){
  .grid-6.store-row{gap:12px;}
  .grid-6.store-row > *{flex:0 1 calc(25% - 9px);max-width:calc(25% - 9px);}
  .store-row .store-tile{padding:0;min-height:0;}
  .store-row .store-tile .logo-frame{aspect-ratio:8/5;padding:6px 10px;}
  .store-row .store-tile .store-tile-name{display:none;}
  .store-row .store-tile.no-logo .logo-fallback-lg{display:none;}
  .store-row .store-tile.no-logo .logo-fallback-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-width:100%;text-align:center;font-weight:700;font-size:13px;line-height:1.25;color:var(--brand-dark);overflow-wrap:anywhere;}
}
@media (max-width:560px){
  .grid-6.store-row{gap:8px;}
  .grid-6.store-row > *{flex:0 1 calc(25% - 6px);max-width:calc(25% - 6px);}
  .store-row .store-tile .logo-frame{padding:4px 6px;}
}
@media (max-width:600px){
  .grid-6.store-row.swipe-row{gap:8px;scroll-padding-left:20px;}   /* first logo lines up with the page margin instead of touching the screen edge */
  .grid-6.store-row.swipe-row > *{flex:0 0 auto;width:31%;max-width:31%;}
}

/* Offer-form location picker: "Selected:" line on top, a checkbox for every location below */
.loc-select{border:1.5px solid #0A5C48;border-radius:10px;padding:10px;margin-bottom:16px;background:#fff;}
.loc-selected-line{font-size:14px;font-weight:600;color:var(--ink);background:#F2F8F6;border-radius:8px;padding:9px 12px;margin-bottom:10px;overflow-wrap:anywhere;}
.loc-selected-line .loc-selected-title{color:var(--brand-dark);}
.loc-selected-line.empty .loc-selected-text{color:var(--muted);font-weight:400;}
.loc-select .loc-search{margin-bottom:8px;}
.loc-select .loc-checklist-open{max-height:148px;overflow-y:auto;}   /* 4 rows visible, scroll for the rest */
.loc-select .loc-check-item{display:flex;align-items:center;gap:10px;margin:0;font-weight:400;font-size:14px;padding:8px 6px;}
.loc-select .loc-check-item input{width:18px;height:18px;flex:0 0 18px;margin:0;}
.loc-select .loc-check-item.hidden-item{display:none;}

/* ---- Store tile logos: fill the whole frame on every device ----
   Uploaded store logos are 300x200 (3:2). The frame is now exactly 3:2 with no inner padding, so the logo
   covers the full box with no white strips at the sides. Placed last so it overrides the earlier per-device
   rules (8/5 ratio + padding on phones/tablets). object-fit stays "contain" so a non-3:2 logo is never cropped. */
.store-tile .logo-frame,
.store-row .store-tile .logo-frame{aspect-ratio:3/2;padding:0;}
.store-tile .logo-frame img,
.store-row .store-tile .logo-frame img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;display:block;}

/* ---- Row action dropdown: [Edit] [Actions ▾] ----
   Replaces the long row of buttons in admin / merchant tables, so no sideways scrolling is needed.
   The open menu is position:fixed (placed by JS in includes/admin-footer.php) so the table's scroll box can't clip it. */
.act-cell{white-space:nowrap;}
.act-cell .btn-sm{font-family:inherit;line-height:1.4;vertical-align:top;}
.act-dd{display:inline-block;vertical-align:top;margin:0 4px 4px 0;}
.act-dd .act-toggle{margin:0;background:#E4E9EE;color:#1F2933;}
.act-dd .act-toggle:hover,.act-dd .act-toggle[aria-expanded="true"]{background:#D3DAE1;}
.act-caret{font-size:10px;margin-left:2px;}
.act-menu{display:none;position:fixed;top:0;left:0;z-index:10050;min-width:210px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(16,24,40,.18);padding:6px;white-space:normal;}
.act-menu.open{display:block;}
.act-menu .inline-form{display:block;margin:0;}
.act-menu .btn-sm{display:block;width:100%;box-sizing:border-box;text-align:left;margin:0;padding:10px 12px;font-family:inherit;font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap;text-decoration:none;background:transparent;color:#1F2933;border:0;border-radius:6px;cursor:pointer;}
.act-menu .btn-sm:hover,.act-menu .btn-sm:focus{background:#F2F5F7;outline:none;}
.act-menu .btn-approve{color:var(--green);}
.act-menu .btn-reject,.act-menu .btn-delete{color:var(--red);}
.act-menu .btn-delete{font-weight:700;}
.act-menu .btn-reject:hover,.act-menu .btn-delete:hover,.act-menu .btn-reject:focus,.act-menu .btn-delete:focus{background:#FDECEA;}
.act-sep{height:1px;background:var(--line);margin:6px 4px;}
@media (max-width:600px){ .act-menu .btn-sm{padding:12px 14px;font-size:14px;} }

/* ---- Admin / merchant panel: real site logo in the header + site footer at the bottom ---- */
.panel-logo{text-decoration:none;}
.panel-tag{font-size:12px;font-weight:700;color:var(--brand-dark);background:#E6F0ED;padding:3px 10px;border-radius:999px;white-space:nowrap;}
@media (max-width:420px){ .panel-tag{display:none;} }
.admin-body .site-footer-wrap{margin-top:10px;}

/* ---- Bulk delete bar (Stores / Offers tables) ---- */
.bulk-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;padding:8px 12px;background:#F2F5F7;border:1px solid var(--line);border-radius:8px;}
.bulk-bar .btn-sm{margin:0;}
.bulk-bar .btn-sm[disabled]{opacity:.45;cursor:not-allowed;}
.bulk-count{font-size:13px;font-weight:700;color:var(--muted);min-width:78px;}
.bulk-hint{font-size:12px;color:var(--muted);}
.bulk-bar.has-selection{background:#FDECEA;border-color:#F3C4C0;}
.bulk-bar.has-selection .bulk-count{color:var(--red);}
.bulk-bar.has-selection .bulk-hint{display:none;}
.bulk-col{width:34px;text-align:center;}
.bulk-col input{width:17px;height:17px;cursor:pointer;vertical-align:middle;}
.admin-table tr.row-selected td{background:#FFF6F5;}


/* ---- "See All Offers" link under Top Offers / Latest Offers on the homepage ---- */
.section-more{text-align:center;margin-top:20px;}
.section-more .btn-outline{display:inline-block;padding:10px 22px;border-radius:6px;font-size:15px;}

/* ---- Store logo in front of the store page heading ---- */
.store-page-head{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-bottom:3px solid #0A5C48;border-radius:14px;padding:14px 16px;margin-bottom:24px;box-shadow:0 2px 8px rgba(16,40,32,.06);}
/* the store description sits right under the header band, so cancel its pull-up margin */
.store-page-head + .store-description{margin-top:0;}
.store-head-logo{height:56px;width:auto;max-width:140px;object-fit:contain;box-sizing:border-box;background:#fff;border:2px solid var(--logo-border,#E3E3E3);border-radius:10px;padding:4px 8px;}
@media (max-width:560px){ .store-head-logo{height:44px;max-width:104px;padding:3px 6px;} }

/* ---- Merchant panel: store logo + name in the top bar ---- */
.panel-store{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--text,#222);font-weight:700;min-width:0;}
.panel-store-logo{height:34px;width:auto;max-width:90px;object-fit:contain;border-radius:5px;}
.header-actions>.panel-store .panel-store-name{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:600px){
  .panel-store.has-logo .panel-store-name{display:none;}   /* phones: the logo alone is shown (the name is its tooltip) */
  .panel-user{display:none;}
}

/* ---- Trending offers / Sponsored texts under the search box ---- */
.sg-trend-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sg-sponsored-item{background:#FFFBF0;}
.sg-sponsored{flex-shrink:0;font-size:11px;font-weight:700;color:#8A5A00;border:1px solid #E8B04B;background:#FFF6E0;padding:1px 8px;border-radius:999px;white-space:nowrap;}

/* ---- Small inline icons (replace emoji so every device shows the same picture) ---- */
.ob-icon{width:1.15em;height:1.15em;min-width:1.15em;vertical-align:-0.2em;margin-right:5px;}
.ob-icon-cal{color:var(--brand);}