/* ==========================================================================
   Pricing / services-page catalog — redesigned to be pixel-identical to the
   new-order checkout's Services step (resources/views/frontend/new-order,
   classes .no-group-*, .no-item-*, .no-qty-*, .no-add-btn in new-order.css).
   Values below are copied from there directly, under a .pg- prefix so
   nothing here can collide with that page's own styles or with the old
   checkout's reuse of some of the same underlying class names
   (.main-service, .sub-service-list-item, .cat-details, .price-btn,
   .dummyBtn, .qty_text) — kept unrenamed only because the shared
   add-to-cart JS in layouts/master.blade.php depends on them.
   ========================================================================== */

/* The shared category-switch handler (layouts/master.blade.php) does
   $("#sub-service-"+id).parent().find(".cat-details").fadeIn() on every
   click — it has to keep existing (removing it breaks that handler
   entirely, which also drives #sub-service-{id}'s own show/hide), but its
   old title+description content is redundant now that the card header
   itself shows the name/description. !important is required specifically
   here because fadeIn() sets this element's inline display style directly,
   which would otherwise override a plain (non-!important) display:none. */
.pg-catalog .cat-details{ display: none !important; }

.pg-catalog{
  --pg-primary: var(--color-primary, #E3B624);
  --pg-primary-deep: var(--primary, #C6A436);
  --pg-primary-wash: rgba(227, 182, 36, .14);
  --pg-ink: #111111;
  --pg-ink-soft: #333333;
  --pg-muted: #767676;
  --pg-bg: #FFFFFF;
  --pg-bg-soft: #F3EFE4;
  --pg-border: #EAE4D6;
  --pg-shadow-sm: 0 1px 2px rgba(28,22,6,.05), 0 1px 1px rgba(28,22,6,.04);
  --pg-shadow-md: 0 10px 30px rgba(28,22,6,.07), 0 2px 8px rgba(28,22,6,.04);
  font-family: inherit;
}

/* Matches .no-search-wrap/.no-input/.no-search-icon in new-order.css
   exactly — icon on the right (input itself has no left padding for it,
   only padding-right for the icon), 10px radius, 14px bottom margin. */
.pg-search-wrap{ position: relative; margin-bottom: 14px; }
.pg-search{
  width: 100%; padding: 12px 44px 12px 16px; border-radius: 10px;
  border: 1px solid var(--pg-border); background: var(--pg-bg);
  font-size: 15px; color: var(--pg-ink); box-shadow: var(--pg-shadow-sm);
  font-family: inherit;
}
.pg-search:focus{ outline: none; border-color: var(--pg-primary-deep); }
.pg-search-icon{
  position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--pg-muted); pointer-events: none;
}

.pg-cards{ display: flex; flex-direction: column; }

/* .no-group-card — the shared click handler (layouts/master.blade.php)
   only ever toggles .active-main-service on the .main-service head
   itself, never a class on this outer wrapper, so every "this card is
   open" visual (elevation, chevron rotation, Select pill text) has to key
   off that head's state, not a class on .pg-card. :has() has had solid
   support across evergreen browsers for years now; if it's ever
   unsupported somewhere the card just skips the subtle lift — cosmetic
   only, nothing breaks. */
.pg-card{ border: 1px solid var(--pg-border); border-radius: 16px; background: var(--pg-bg); box-shadow: var(--pg-shadow-sm); margin-bottom: 12px; overflow: hidden; }
.pg-card:has(.main-service.active-main-service){ box-shadow: var(--pg-shadow-md); border-color: rgba(227,182,36,.35); }

/* .no-group-head */
.pg-card-head{
  width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px 18px;
  background: none; border: none; cursor: pointer; text-align: left; font-family: inherit;
}
.pg-card-head:hover{ background: var(--pg-bg-soft); }

/* .no-group-icon */
.pg-card-icon{
  width: 44px; height: 44px; border-radius: 999px; background: var(--pg-primary-wash);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden;
}
.pg-card-icon img{ width: 100%; height: 100%; border-radius: 999px; object-fit: cover; }

/* .no-group-info / name / desc */
.pg-card-info{ flex: 1; min-width: 0; }
.pg-card-name{ font-size: 16px; font-weight: 700; color: var(--pg-ink); }
.pg-card-desc{ font-size: 13px; color: var(--pg-muted); margin-top: 2px; }

/* .no-group-meta — FROM price + chevron + Select pill */
.pg-card-meta{ display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.pg-card-from{ font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--pg-muted); text-align: right; line-height: 1.3; white-space: nowrap; }
.pg-card-from strong{ font-size: 16px; color: var(--pg-ink); font-weight: 700; }
.pg-card-from span{ font-size: 11px; font-weight: 500; }
.pg-card-chevron{
  width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--pg-border);
  display: flex; align-items: center; justify-content: center; color: var(--pg-ink-soft);
  transition: transform .2s ease; flex-shrink: 0;
}
.main-service.active-main-service .pg-card-chevron{ transform: rotate(180deg); }
.pg-card-select{
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--pg-border);
  font-size: 13px; font-weight: 700; white-space: nowrap; background: var(--pg-bg); color: var(--pg-ink);
}
.main-service.active-main-service .pg-card-select{ background: var(--pg-primary-wash); border-color: rgba(227,182,36,.4); color: var(--pg-primary-deep); }
.pg-card-select .pg-card-select-selected{ display: none; }
.main-service.active-main-service .pg-card-select .pg-card-select-default{ display: none; }
.main-service.active-main-service .pg-card-select .pg-card-select-selected{ display: inline; }

/* .no-group-body — new-order's own version of this card plays a CSS
   reveal animation because it fully empties and rebuilds the accordion
   list on every click (a fresh element always replays a CSS animation on
   insert). This component instead reuses the shared show/hide handler in
   layouts/master.blade.php, which already animates the reveal itself via
   jQuery's .fadeIn() on the SAME element — adding a second, independent
   CSS animation on top of that was fighting over the same opacity
   property and is what caused the open/close to visibly blink. */
.pg-card-body{ padding: 0 18px 18px; border-top: 1px solid var(--pg-border); }
.pg-card-items{ padding-top: 14px; }

/* .no-item-row */
.pg-item-row{ display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border: 1px solid var(--pg-border); background: var(--pg-bg); border-radius: 12px; margin-bottom: 8px; box-shadow: var(--pg-shadow-sm); }
.pg-item-name{ font-size: 15px; font-weight: 600; color: var(--pg-ink); }
.pg-item-right{ display: flex; align-items: center; gap: 16px; }
.pg-item-price{ font-size: 15px; font-weight: 600; width: 58px; text-align: right; color: var(--pg-ink); }
/* Exists purely to put the standalone add button at the same DOM depth
   (3 levels above .sub-service-list-item) the shared handler's
   .parent().parent().parent() expects — the stepper below achieves the
   same depth via its own wrapper (.pg-qty-stepper itself counts as that
   level), so neither needs any extra nesting beyond this. */
.pg-item-action{ display: flex; align-items: center; }

/* .no-add-btn and .no-qty-* — these specific class names (.price-btn,
   .dummyBtn, .qty_text) already carry old styling from style.css (a
   rectangular yellow button, a circular bordered badge) at the same
   single-class specificity as plain .pg-* rules, so everything the shared
   JS needs touched is scoped under .pg-item-row to guarantee these win. */
.pg-item-row .price-btn.pg-add-btn{ width: 34px; height: 34px; border-radius: 999px; background: var(--pg-primary); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; line-height: 1; color: var(--pg-ink); font-weight: 700; box-shadow: var(--pg-shadow-sm); transition: transform .12s ease, box-shadow .12s ease; text-decoration: none; padding: 0; margin: 0; }
.pg-item-row .price-btn.pg-add-btn:hover{ transform: scale(1.08); box-shadow: var(--pg-shadow-md); }
.pg-item-row .pg-qty-stepper{ display: flex; align-items: center; gap: 12px; background: var(--pg-bg-soft); border-radius: 999px; padding: 5px 7px; }
.pg-item-row .pg-qty-stepper .pg-qty-btn{ width: 24px; height: 24px; border-radius: 999px; border: 1px solid var(--pg-border); background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; line-height: 1; color: var(--pg-ink); text-decoration: none; padding: 0; margin: 0; }
.pg-item-row .pg-qty-stepper .pg-qty-btn--fill{ background: var(--pg-ink); color: #FFFFFF; border: none; }
.pg-item-row .pg-qty-stepper .pg-qty-val{ font-size: 14px; font-weight: 700; min-width: 12px; width: auto; height: auto; text-align: center; color: var(--pg-ink); display: inline-block; border: none; border-radius: 0; line-height: normal; }

.pg-empty{ padding: 24px 4px; text-align: center; color: var(--pg-muted); font-size: 14px; display: none; }

/* ==========================================================================
   Price Estimator sidebar — "Items so far" cards, matching the new-order
   checkout's own summary panel. The row HTML itself (.sub-service-list-item
   .total_services, #pe_total, .fa-minas, .fa-plas, #qty_text, etc.) is
   built by a shared JS template in layouts/master.blade.php that
   order-main.blade.php's own (unrelated) cart also uses, so this is all
   done via CSS targeting that same existing markup, scoped under
   .pg-estimate so none of it reaches that other page.
   ========================================================================== */
.pg-estimate .carts-items{ display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.pg-estimate .sub-service-list-item.total_services{
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  padding: 13px 16px; border: 1px solid var(--pg-border, #EAE4D6); border-radius: 12px;
  background: #FFFFFF; box-shadow: var(--pg-shadow-sm, 0 1px 2px rgba(28,22,6,.05));
}
.pg-estimate .sub-service-list-item.total_services .content{ width: auto; max-width: 100%; }
.pg-estimate .sub-service-list-item.total_services .content h6{
  font-size: 15px; font-weight: 600; color: var(--pg-ink, #111111); margin: 0;
}
/* #pe_total (the real qty×price line total) is the one meaningful price
   here — #pe_price/#pe_qty are just internal state for the shared JS to
   read back, never meant to be shown, so only #pe_total's own .d-none
   (Bootstrap's !important utility) needs overriding. */
.pg-estimate .sub-service-list-item.total_services #pe_total{
  display: block !important; font-size: 15px; font-weight: 700; color: var(--pg-ink, #111111);
  position: absolute; top: 13px; right: 16px;
}
.pg-estimate .sub-service-list-item.total_services #pe_total::before{ content: "\00A3"; }
.pg-estimate .sub-service-list-item.total_services{ position: relative; }
/* Bootstrap's own "w-50" utility (set by the shared JS template this
   row's markup comes from) and responsive.css's ".qty_actions{width:39%
   !important}" mobile rule both carry !important, which beats a plain
   declaration regardless of specificity — hence the stepper stretching
   into a half/39%-width pill with a dead gap after the + button. This
   selector already out-specifies both, so matching their !important is
   enough to finally win and let the pill hug its own content. */
.pg-estimate .sub-service-list-item.total_services .qty_actions{
  width: auto !important; display: flex; align-items: center; gap: 10px; font-size: 0;
  background: var(--pg-bg-soft, #F3EFE4); border-radius: 999px; padding: 5px 7px; align-self: flex-start;
}
.pg-estimate .sub-service-list-item.total_services .qty_actions .fa-minas,
.pg-estimate .sub-service-list-item.total_services .qty_actions .fa-plas{
  width: 24px; height: 24px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; text-decoration: none; cursor: pointer;
}
.pg-estimate .sub-service-list-item.total_services .qty_actions .fa-minas{
  border: 1px solid var(--pg-border, #EAE4D6); background: #FFFFFF; color: var(--pg-ink, #111111);
}
.pg-estimate .sub-service-list-item.total_services .qty_actions .fa-plas{
  background: var(--pg-ink, #111111); color: #FFFFFF; border: none;
}
.pg-estimate .sub-service-list-item.total_services .qty_actions #qty_text{
  font-size: 14px; font-weight: 700; color: var(--pg-ink, #111111); min-width: 12px; text-align: center;
}

/* Copied from new-order.css's own .no-group-* mobile block verbatim — it
   never shrinks the head's padding/gap, the icon, or the name font-size
   at narrow widths; it only lets .pg-card-meta (which is already
   flex-wrap: wrap at every width, matching .no-group-head above) drop to
   its own full-width row once there's no longer room beside the icon and
   name/description, then keeps FROM pinned left and chevron+Select
   pinned right on that row via margin-right:auto on FROM alone (plain
   space-between would instead strand the chevron alone in the middle).
   The previous version here independently shrank padding to 14px/12px,
   the icon to 40px and the name to 15px, and added an unexplained
   margin-left:56px on the meta row that doesn't correspond to anything
   in the layout — all of which only pushed this further from "identical"
   to the reference instead of closer. */
@media (max-width: 767px){
  .pg-card-meta{ width: 100%; margin-top: 4px; }
  .pg-card-from{ margin-right: auto; }
}

/* ==========================================================================
   Page heading, express banner, and the right-column chrome (skip card,
   estimator header, promo, app download) — these used to be a visual
   mismatch against the redesigned catalog/estimator: a different heading
   typeface, a flat dark banner, a loud solid-gold CTA block, and a raster
   "torn paper" sticker, none sharing the new cards' colour tokens, radius
   or shadow. Brought in line with the same system, keeping every existing
   class name so nothing here needs touching in the ~20 other pages that
   include this same partial — this is all additive via a wrapping
   .pg-catalog-page class set once around the whole component below.
   ========================================================================== */
.pg-heading{ font-size: 32px; font-weight: 800; color: var(--pg-ink, #111111); line-height: 1.15; margin-bottom: 10px; }
.pg-lede{ font-size: 15px; color: var(--pg-muted, #767676); line-height: 1.5; margin-bottom: 8px; max-width: 760px; }

.pg-express{
  display: flex; align-items: center; gap: 12px; padding: 14px 18px; margin: 20px 0;
  background: var(--pg-ink, #111111); border-radius: 14px; width: fit-content;
}
.pg-express img{ width: 28px; height: 28px; flex-shrink: 0; }
.pg-express p{ margin: 0; color: #FFFFFF; font-size: 14px; font-weight: 600; }

.pg-skip-card{
  background: #FFFFFF; border: 1px solid var(--pg-border, #EAE4D6); border-radius: 16px;
  box-shadow: var(--pg-shadow-sm, 0 1px 2px rgba(28,22,6,.05)); padding: 22px 24px; text-align: center;
}
.pg-skip-title{ font-size: 19px; font-weight: 700; color: var(--pg-ink, #111111); margin: 0 0 4px; }
.pg-skip-sub{ font-size: 13.5px; color: var(--pg-muted, #767676); margin: 0 0 16px; }
.pg-skip-btn{
  display: inline-flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 8px;
  background: var(--pg-primary, #E3B624); color: var(--pg-ink, #111111); font-weight: 700; font-size: 14.5px;
  text-decoration: none; padding: 13px 22px; border-radius: 999px; width: 100%; box-sizing: border-box;
  box-shadow: var(--pg-shadow-sm, 0 1px 2px rgba(28,22,6,.05)); transition: transform .12s ease, box-shadow .12s ease;
}
.pg-skip-btn:hover{ color: var(--pg-ink, #111111); transform: translateY(-1px); box-shadow: var(--pg-shadow-md, 0 10px 30px rgba(28,22,6,.07)); }
/* The site-wide canvas/img/picture/svg/video{ display:block; } reset
   (style.min.css) is exactly why a bare <svg> here would otherwise force
   a line break before it the instant flex isn't actually applying (as it
   wasn't, before the .too-busy specificity conflict above was found) —
   making this explicit so a future regression fails obviously in a flex
   context instead of silently wrapping again. */
.pg-skip-btn svg{ display: inline-block; flex-shrink: 0; }

/* The right-column sidebar (skip card / estimator / promo / app download)
   is a plain Bootstrap .row of unguttered col-12's — there's no row-level
   vertical gap, so margin-top on each section is the ONLY thing separating
   it from the block above. 4px (and, for .pg-estimate/.pg-app-card, no
   margin at all) read as the sections touching. One consistent rhythm
   across all four transitions instead. */
.pg-estimator-head{ margin-top: 28px; }
.pg-card-title{ font-size: 18px; font-weight: 700; color: var(--pg-ink, #111111); margin: 0 0 4px; }
.pg-card-sub{ font-size: 13.5px; color: var(--pg-muted, #767676); line-height: 1.5; margin: 0; }

.pg-estimate{ margin-top: 20px; }

.pg-promo-card{
  background: var(--pg-primary-wash, rgba(227,182,36,.14)); border: 1px solid rgba(227,182,36,.4);
  border-radius: 16px; padding: 20px 22px; margin-top: 28px;
}
.pg-promo-percent{ font-size: 26px; font-weight: 800; color: var(--pg-ink, #111111); line-height: 1; margin-bottom: 8px; }
.pg-promo-text{ font-size: 14px; font-weight: 600; color: var(--pg-ink-soft, #333333); line-height: 1.4; }

.pg-app-card{
  background: var(--pg-bg-soft, #F3EFE4); border-radius: 16px; padding: 22px 24px; margin-top: 28px;
}
.pg-app-card .store-images{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.pg-app-card .store-images img{ height: 40px; width: auto; }

@media (max-width: 767px){
  .pg-heading{ font-size: 26px; }
}