/*
 * 48-dokan.css — Dokan directory and vendor store surfaces. §6.6, §6.7.
 *
 * PHASE 2.
 *
 * Two jobs:
 *   1. Style /service-providers/ (the store list, §6.6) and /experts/<slug>/
 *      (the store page, §6.7) to the prototype.
 *   2. COLLISION FIREWALL. Dokan's front-end stylesheet defines unprefixed .btn
 *      and .table. This theme's components are all `eng-` prefixed precisely so
 *      the two never touch — see docs/DECISIONS.md #7. The rules below are the
 *      other half of that: they restyle Dokan's own components to match the
 *      design, without this theme ever claiming the bare class names.
 */

.dokan-store-wrap .btn,
.dokan-btn,
.dokan-btn-theme{
  border-radius:0;
  background:var(--color-accent-600);
  color:#fff;
  border:1px solid var(--color-accent-600);
  font-family:var(--font-body);
  font-weight:600;
}
.dokan-store-wrap .btn:hover,
.dokan-btn:hover,
.dokan-btn-theme:hover{
  background:var(--color-accent-800);
  color:#fff;
  border-color:var(--color-accent-800);
}

/* §6.6 — directory rows: rank, name, blurb, meta, right-aligned rating.
   Hairline rules between rows; no cards, no fill. */
.dokan-seller-listing ul.dokan-seller-wrap li.dokan-single-seller{
  border:0;
  border-bottom:1px solid var(--color-divider);
  background:transparent;
  box-shadow:none;
  border-radius:0;
}

/* §6.7 — store banner takes the duotone treatment like every other photograph. */
.dokan-store-wrap .profile-frame{
  border-radius:0;
  border:1px solid var(--color-divider);
  box-shadow:none;
}

.dokan-store-wrap table{ border-collapse:collapse; }
.dokan-store-wrap table th{
  font-family:var(--font-heading);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--color-accent-700);
  border-bottom:1px solid var(--color-text);
}
.dokan-store-wrap table td{ border-bottom:1px solid var(--color-divider); }

/* ==========================================================================
   §6.6 Directory — /service-providers/

   NOT Dokan's store list. The page is a custom OCS vendor grid from the
   eg-storefront mu-plugin: .eg-vendors-grid > .eg-vendor-card, each holding a badge,
   type badge, banner, avatar, name, location, product count and a Visit Store link.

   §6.6 specifies ranked ROWS, so the grid is relaid as rows and the rank number comes
   from a CSS counter — the markup carries no rank of its own.

   WHAT THE LIVE DATA CANNOT SUPPLY: the spec's row also wants a blurb, a star rating,
   a review count and a from-price. None of those exist on these cards, and inventing
   them would be worse than omitting them. If they are wanted, they need to come from
   vendor meta first.
   ========================================================================== */

.eg-vendors-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  counter-reset:eng-rank;
}

/*
 * FLEX, not grid.
 *
 * The card has a variable number of children: vendors without a "Featured" badge
 * emit one element fewer, so a fixed grid-template-columns scrambled every row after
 * the fifth — the banner landed in the body column and the type badge stretched the
 * full width. Flex with explicit order is stable regardless of which children exist.
 *
 * Reading order: [rank] [thumb] [name · location · count] [badges] [Visit Store]
 */
.eg-vendor-card{
  counter-increment:eng-rank;
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-3) var(--space-4);
  padding:var(--space-4) 0 var(--space-4) var(--space-6);
  border:0;
  border-bottom:1px solid var(--color-divider);
  border-radius:0;
  box-shadow:none;
  background:transparent;
}
.eg-vendor-card:last-child{ border-bottom:0; }

.eg-vendor-avatar-link{ order:1; flex:0 0 96px; }
.eg-vendor-body{ order:2; flex:1 1 200px; margin-right:auto; min-width:0; }
.eg-vendor-badge{ order:3; }
.eg-vendor-type-badge{ order:4; }
/* margin-left on the BODY, not the button: pushing the button with auto-margin made it
   claim its own flex line whenever the badges filled the first one. */
.eg-vendor-btn{ order:5; margin-left:var(--space-2); }

/* The cover photo is removed in PHP (eng_vendor_cards_single_image). This is the belt
   to that braces: if the filter ever stops matching, the cover must still not render,
   because the whole point is one image per row. */
.eg-vendor-banner{ display:none !important; }

/* The rank, drawn from the counter. accent-700 rather than accent: at this size it is
   body text and must clear 4.5:1 (see build/audit-contrast.mjs). */
.eg-vendor-card::before{
  content:counter(eng-rank,decimal-leading-zero);
  position:absolute;
  left:0;
  top:var(--space-4);
  font-family:var(--font-heading);
  font-size:22px;
  font-weight:600;
  color:var(--color-accent-700);
  line-height:1.2;
}

.eg-vendor-body{
  display:grid;
  gap:2px;
  align-content:center;
  padding:0;
}

/*
 * The operator's logo IS the row's image (client direction — see
 * eng_vendor_cards_single_image in inc/vendors.php).
 *
 * object-fit is CONTAIN, not cover. These are logos, not photographs: 41 vendors upload
 * wordmarks, round badges and square icons at wildly different aspect ratios, and cover
 * would crop the name off a wide wordmark. Contain letterboxes instead, so every logo
 * arrives whole. The white pad gives transparent PNGs — most of them — a consistent
 * ground instead of showing the page's cream through the mark.
 */
.eg-vendor-avatar-link{
  display:block;
  width:96px;
  height:96px;
  border:1px solid var(--color-divider);
  background:#FFFFFF;
  overflow:hidden;
}
.eg-vendor-avatar{
  width:100%;
  height:100%;
  border:0;
  border-radius:0;
  object-fit:contain;
  padding:var(--space-2);
  display:block;
}
.eg-vendor-name{ font-size:17px; margin:0; }
.eg-vendor-name a{ text-decoration:none; }
.eg-vendor-name a:hover{ text-decoration:underline; }
.eg-vendor-loc,
.eg-vendor-count{ font-size:12px; color:var(--color-muted); margin:0; }

/* Badges become tags (§3.4) and sit inline rather than floating over the banner. */
.eg-vendor-badge,
.eg-vendor-type-badge{
  position:static;
  flex:0 0 auto;
  width:auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  padding:2px 8px;
  border-radius:0;
  border:1px solid var(--color-divider);
  background:transparent;
  color:var(--color-accent-800);
  box-shadow:none;
}
.eg-vendor-badge{
  background:var(--color-accent-100);
  color:var(--color-accent-900);
  border-color:var(--color-accent-300);
}

/* Right-hand action — secondary button per §6.6.
 *
 * width:auto is load-bearing. The mu-plugin styles this button for a CARD layout, where
 * it sits full-bleed across the bottom, so its own rule is `display:block;width:100%`.
 * Our `display:inline-flex` alone did not undo that: the button kept the 100% width,
 * claimed a whole flex line to itself and stretched the full row — which is exactly the
 * stretched-button artefact visible on the directory before this fix. */
/*
 * JUSTIFY-SELF, not flex.
 *
 * The button is NOT a direct child of .eg-vendor-card — the mu-plugin nests it inside
 * .eg-vendor-body. That body is a single-column grid, so the button stretched to the full
 * column (977px) and the flex properties written here did nothing at all, because the
 * button was never a flex item of the card. justify-self is what actually governs it.
 */
.eg-vendor-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  justify-self:start;
  flex:0 0 auto;
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
  padding:10px 18px;
  border-radius:0;
  background:transparent;
  color:var(--color-accent-800);
  border:1px solid var(--color-accent-400);
  text-decoration:none;
  white-space:nowrap;
}
.eg-vendor-btn:hover{
  background:var(--color-accent-100);
  color:var(--color-accent-900);
  border-color:var(--color-accent-600);
}

/* §6.6 filter row — secondary buttons, active one carrying a 5px accent dot. */
.eg-vendors-filter{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin:var(--space-3) 0 var(--space-4);
}
.eg-vendor-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
  padding:10px 18px;
  border-radius:0;
  background:transparent;
  color:var(--color-accent-800);
  border:1px solid var(--color-accent-400);
  text-decoration:none;
  cursor:pointer;
}
.eg-vendor-pill:hover{
  background:var(--color-accent-100);
  color:var(--color-accent-900);
  border-color:var(--color-accent-600);
}
.eg-vendor-pill.active::before,
.eg-vendor-pill.is-active::before,
.eg-vendor-pill[aria-pressed="true"]::before{
  content:"";
  width:5px;
  height:5px;
  background:var(--color-accent);
  display:inline-block;
}

.eg-vendors-top{ border-bottom:2px solid var(--color-text); padding-bottom:var(--space-3); }

/* --- directory pagination ------------------------------------------------- */
/* The mu-plugin emits Prev / 1 / 2 / Next as bare inline elements with no separation,
   so the page numbers ran together as "«Prev12Next»". */
.eg-vendors-pagination{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-2);
  margin:var(--space-6) 0;
  padding-top:var(--space-4);
  border-top:1px solid var(--color-divider);
  font-size:14px;
}
.eg-vendors-pagination a,
.eg-vendors-pagination .eg-page-current,
.eg-vendors-pagination .eg-page-disabled{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;      /* §9 hit target */
  padding:0 var(--space-3);
  border:1px solid var(--color-accent-400);
  text-decoration:none;
  color:var(--color-accent-800);
}
.eg-vendors-pagination .eg-page-current{
  background:var(--color-accent-100);
  color:var(--color-accent-900);
  border-color:var(--color-accent-600);
  font-weight:600;
}
.eg-vendors-pagination .eg-page-disabled{
  color:var(--color-muted);
  border-color:var(--color-divider);
}
.eg-vendors-pagination a:hover{
  background:var(--color-accent-100);
  border-color:var(--color-accent-600);
}

/* --- "Run a tour, stay, or service in El Nido?" ---------------------------- */
/*
 * The two actions are plain <a>s emitted back to back with no whitespace between them,
 * so they rendered as one run-on string: "Become a Service ProviderService Provider
 * Login". They are the directory's only conversion point, so they get real button
 * treatment and real separation — primary for signup, secondary for the existing-vendor
 * login, which is the standard weighting for a "join or sign in" pair.
 */
.eg-vendors-cta{
  margin-top:var(--space-6);
  padding:var(--space-4);
  border:1px solid var(--color-divider);
  background:var(--color-surface);
}
.eg-vendors-cta-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
}
.eg-vendors-cta-copy{ flex:1 1 320px; min-width:0; }
.eg-vendors-cta-copy h3{ margin:0 0 var(--space-2); font-size:22px; }
.eg-vendors-cta-copy p{ margin:0; color:var(--color-muted); }

.eg-vendors-cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  flex:0 0 auto;
}
.eg-vendors-cta-signup,
.eg-vendors-cta-login{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-height:44px;
  padding:12px 22px;
  border-radius:0;
  font-family:var(--font-body);
  font-weight:600;
  font-size:15px;
  text-decoration:none;
  white-space:nowrap;
}.eg-vendors-cta-signup,a.eg-vendors-cta-signup{
  background:var(--color-accent-600);
  color:#fff;
  border:1px solid var(--color-accent-600);
}
.eg-vendors-cta-signup:hover{
  background:var(--color-accent-800);
  border-color:var(--color-accent-800);
  color:#fff;
}.eg-vendors-cta-login,a.eg-vendors-cta-login{
  background:transparent;
  color:var(--color-accent-800);
  border:1px solid var(--color-accent-400);
}
.eg-vendors-cta-login:hover{
  background:var(--color-accent-100);
  color:var(--color-accent-900);
  border-color:var(--color-accent-600);
}

@media (max-width:767px){
  /* Card is flex; on mobile the row stacks but the logo stays a fixed square rather
     than stretching full-width — a letterboxed logo at 100% width is mostly padding. */
  .eg-vendor-card{ padding-left:var(--space-6); }
  .eg-vendor-avatar-link{ flex:0 0 72px; width:72px; height:72px; }
  .eg-vendor-body{ flex:1 1 100%; }
  .eg-vendor-btn{ flex:1 1 100%; margin-left:0; }
  .eg-vendors-cta-actions{ width:100%; }
  .eg-vendors-cta-signup,
  .eg-vendors-cta-login{ flex:1 1 100%; }
}

/* ==========================================================================
   §6.7 Provider store — /experts/<slug>/

   Also NOT Dokan's store template: another custom OCS build (eg-store-*) from
   eg-store-profile / eg-storefront. Banner, logo, name, location, actions, then
   sections for the about text and social reels.
   ========================================================================== */

.eg-store{ background:transparent; }
.eg-store-back{ font-size:13px; }

/* 24/7 hero (§6.7), framed as a blueprint object. */
.eg-store-banner{
  aspect-ratio:24/7;
  overflow:hidden;
  border:1px solid var(--color-divider);
  border-radius:0;
  background:var(--color-surface);
}
.eg-store-banner img{ width:100%; height:100%; object-fit:cover; display:block; }

.eg-store-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-4);
  padding:var(--space-4) 0;
  border-bottom:2px solid var(--color-text);
}
.eg-store-logo{
  width:72px;
  height:72px;
  border-radius:0;
  border:1px solid var(--color-divider);
  object-fit:cover;
  box-shadow:none;
}
.eg-store-id{ display:grid; gap:2px; margin-right:auto; }
.eg-store-name{
  font-family:var(--font-heading);
  font-size:var(--type-h1-page);
  font-weight:600;
  line-height:1.05;
  margin:0;
}
.eg-store-loc{ font-size:13px; color:var(--color-muted); margin:0; }

.eg-store-actions{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
/* First action is the primary; the rest are secondary (§3.1, §6.7). */
.eg-store-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
  padding:10px 18px;
  border-radius:0;
  text-decoration:none;
  background:transparent;
  color:var(--color-accent-800);
  border:1px solid var(--color-accent-400);
}
.eg-store-btn:hover{
  background:var(--color-accent-100);
  color:var(--color-accent-900);
  border-color:var(--color-accent-600);
}
.eg-store-actions > .eg-store-btn:first-child{
  background:var(--color-accent-600);
  color:#fff;
  border-color:var(--color-accent-600);
}
.eg-store-actions > .eg-store-btn:first-child:hover{
  background:var(--color-accent-800);
  color:#fff;
  border-color:var(--color-accent-800);
}

.eg-store-section{
  padding:var(--space-6) 0;
  border-top:1px solid var(--color-divider);
}
.eg-store-section h2,
.eg-store-section h3{ font-size:var(--type-h2-section); margin:0 0 var(--space-3); }

/* ==========================================================================
   §6.13 Accommodations — /accommodations/

   Custom OCS hub (eg-ac-*): header, filter chips, amenity controls, split layout
   with a filter aside and a card grid. Restyled per decision B1 — the visual
   treatment of §6.13 without building bookable `stay` inventory.
   ========================================================================== */

.eg-ac-head{ padding:var(--space-6) 0 var(--space-4); }
.eg-ac-h1{ font-size:var(--type-h1-page); line-height:1.05; margin:var(--space-2) 0; }
.eg-ac-sub{ font-size:19px; color:var(--color-muted); max-width:56ch; }

.eg-ac-chips,
.eg-ac-filters{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin:var(--space-3) 0; }
.eg-ac-chip,
.eg-ac-ctl-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
  padding:10px 18px;
  border-radius:0;
  background:transparent;
  color:var(--color-accent-800);
  border:1px solid var(--color-accent-400);
  cursor:pointer;
  text-decoration:none;
}
.eg-ac-chip:hover,
.eg-ac-ctl-btn:hover{
  background:var(--color-accent-100);
  color:var(--color-accent-900);
  border-color:var(--color-accent-600);
}
.eg-ac-chip.active,
.eg-ac-chip.is-active,
.eg-ac-chip[aria-pressed="true"]{
  background:var(--color-accent-100);
  color:var(--color-accent-900);
  border-color:var(--color-accent-600);
}

.eg-ac-split{ display:grid; grid-template-columns:260px 1fr; gap:var(--space-8); align-items:start; }
.eg-ac-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--space-4);
}
/* §3.2 — stay cards are blueprint objects: transparent, hairline, square. */
.eg-ac-card{
  border:1px solid var(--color-divider);
  border-radius:0;
  box-shadow:none;
  background:transparent;
  overflow:hidden;
}
/* §3.3 — 3/2 for stay cards. */
.eg-ac-media{ aspect-ratio:3/2; overflow:hidden; background:var(--color-surface); }
.eg-ac-media img{ width:100%; height:100%; object-fit:cover; display:block; }

.eg-ac-amen,
.eg-ac-amen-in{ border-radius:0; }
.eg-ac-amck{ accent-color:var(--color-accent-700); }
.eg-ac-al{ font-size:13px; }

@media (max-width:1024px){
  .eg-ac-split{ grid-template-columns:1fr; }
}
@media (max-width:767px){
  .eg-store-bar{ gap:var(--space-3); }
  .eg-store-logo{ width:56px; height:56px; }
  .eg-store-actions{ width:100%; }
  .eg-store-btn{ flex:1 1 auto; min-height:44px; }
}

/* §6.6 — derived stats line. Class is eng- (theme prefix), not eg- (the mu-plugin's
   prefix) — the two differ by one letter and are easy to cross. Injected by
   eng_vendor_cards_add_stats() in inc/vendors.php. */
.eng-vendor-stats{
  font-size:13px;
  margin:2px 0 0;
  color:var(--color-text);
}
.eng-vendor-rating{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:16px;
}

/* --- contact -------------------------------------------------------------- */
.eg-store-section ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:var(--space-2);
}
.eg-store-section ul li{ padding-left:0; }

@media (max-width:600px){
}

/* --- published reviews ---------------------------------------------------- */
.eg-store-reviews{ display:grid; gap:0; }

@media (max-width:600px){
}

/* ==========================================================================
   Carried over from the previous theme's custom-CSS post (go-live 2026-09).
   Only the rules that fix Dokan BEHAVIOUR are kept — pagination floats, the
   phantom grid gap, the unreadable support pop-up, the store grid on phones.
   Its decoration (glass cards, purple buttons, shadows) is not carried: those
   surfaces now take the design system above.
   ========================================================================== */

/* Directory pagination: Dokan floats the items; keep them inline and readable. */
#dokan-seller-listing-wrap .dokan-pagination-container .pagination li{
  display:inline-block;
  float:none;
  margin:0 var(--space-1);
}
#dokan-seller-listing-wrap .dokan-pagination-container .pagination .page-numbers{
  min-height:44px;
  min-width:44px;
  padding:0 var(--space-2);
  border:1px solid var(--color-divider);
  border-radius:0;
  background:var(--color-surface);
  color:var(--color-text);
  font-weight:600;
}
#dokan-seller-listing-wrap .dokan-pagination-container .pagination .page-numbers.current,
#dokan-seller-listing-wrap .dokan-pagination-container .pagination .page-numbers:hover{
  background:var(--color-accent-700);
  border-color:var(--color-accent-700);
  color:#fff;
}

/* Vendor name under a product card in the shop grid. */
.dokan-vendor-shop-name-archive,
.dokan-vendor-shop-name-archive a{
  font-size:.9rem;
  font-weight:400;
  color:var(--color-muted);
  text-decoration:none;
  text-align:center;
  margin:0 var(--space-4) 1.2em;
}

/* The invisible ::before pseudo-element Dokan leaves in the store product grid
   opens a phantom first cell; the seller grid also centres, which strands the
   last row. */
.dokan-store-wrap ul.products.columns-3::before{ display:none; }
.seller-items{ justify-content:flex-start; }

/* Store page product grid on phones: two columns on tablets, one on phones. */
@media (max-width:991px){
  body.dokan-store ul.products{
    grid-template-columns:repeat(2,1fr);
    gap:var(--space-4);
  }
}
@media (max-width:768px){
  body.dokan-store ul.products{ grid-template-columns:1fr; }
  body.dokan-store li.product img{ height:200px; object-fit:cover; }
}

/* Support-ticket pop-up: text was inheriting a white colour; fit it on phones. */
.white-popup.dokan-support-login-wrapper{ color:var(--color-text); }
@media (max-width:768px){
  .white-popup.dokan-support-login-wrapper{ width:90vw; }
  .dokan-support-login-wrapper .dokan-form-group{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }
  .dokan-support-login-wrapper .dokan-form-group input[type="text"],
  .dokan-support-login-wrapper .dokan-form-group textarea{ width:100%; }
}