/* Paktograf UI foundations — presentation primitives, loaded after legacy CSS. */

:root {
  --pg-space-1: 4px;
  --pg-space-2: 8px;
  --pg-space-3: 12px;
  --pg-space-4: 16px;
  --pg-space-6: 24px;
  --pg-space-8: 32px;
  --pg-radius-sm: 10px;
  --pg-radius-md: 14px;
  --pg-radius-lg: 20px;
  --pg-radius-xl: 26px;
  --pg-border: #e7e3ed;
  --pg-border-strong: #d8d0e3;
  --pg-primary: #6f2cff;
  --pg-primary-dark: #5b21b6;
  --pg-accent: #ffc107;
  --pg-success: #138a55;
  --pg-warning: #9a6500;
  --pg-danger: #b4233a;
  --pg-text: #191226;
  --pg-muted: #6f6878;
  --pg-page: #f8f7fb;
  --pg-surface: #fff;
  --pg-shadow-1: 0 8px 24px rgba(29, 20, 45, .055);
  --pg-shadow-2: 0 20px 54px rgba(29, 20, 45, .12);
  --pg-control-height: 48px;
  --pg-bottom-nav-height: 74px;
  --pg-safe-bottom: env(safe-area-inset-bottom, 0px);
  --pg-visual-height: 100vh;
  --pg-visual-height: 100dvh;
}

body.pg-ui {
  color: var(--pg-text);
  background: var(--pg-page);
  font-family: Poppins, Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-x: hidden;
  overflow-x: clip;
}

body.pg-ui *, body.pg-ui *::before, body.pg-ui *::after { box-sizing: border-box; }
body.pg-ui img, body.pg-ui video, body.pg-ui iframe { max-width: 100%; }

/* Forms: scoped bridges for Paktograf, WooCommerce and CMB2 surfaces. */
body.pg-ui :where(.pg-ui-form,.pg-checkout-shell,.pg-settings-page,.pg-submit-service,.pg-post-project-page,.pg-filter-form,.cmb-form,.pkt-onboarding-card,.pg-bio-modal) :where(input[type="text"],input[type="email"],input[type="number"],input[type="password"],input[type="search"],input[type="tel"],input[type="url"],textarea,select):not(.select2-search__field) {
  width: 100%;
  max-width: 100%;
  min-height: var(--pg-control-height);
  padding: 11px 14px;
  border: 1px solid var(--pg-border-strong);
  border-radius: var(--pg-radius-md);
  background: var(--pg-surface);
  color: var(--pg-text);
  font: inherit;
  font-size: 16px;
  line-height: 1.35;
  box-shadow: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
body.pg-ui :where(.pg-ui-form,.pg-checkout-shell,.pg-settings-page,.pg-submit-service,.pg-post-project-page,.pg-filter-form,.cmb-form,.pkt-onboarding-card,.pg-bio-modal) textarea { min-height: 112px; resize: vertical; }
body.pg-ui :where(.pg-ui-form,.pg-checkout-shell,.pg-settings-page,.pg-submit-service,.pg-post-project-page,.pg-filter-form,.cmb-form,.pkt-onboarding-card,.pg-bio-modal) :where(input,textarea,select):hover { border-color: #c9bfd5; }
body.pg-ui :where(.pg-ui-form,.pg-checkout-shell,.pg-settings-page,.pg-submit-service,.pg-post-project-page,.pg-filter-form,.cmb-form,.pkt-onboarding-card,.pg-bio-modal) :where(input,textarea,select):focus-visible {
  border-color: var(--pg-primary);
  outline: 0;
  box-shadow: 0 0 0 4px rgba(111, 44, 255, .12);
}
body.pg-ui :where(input,textarea,select):disabled,
body.pg-ui :where(input,textarea,select)[aria-disabled="true"] { cursor: not-allowed; background: #f1eff4; color: #918a99; opacity: .82; }
body.pg-ui :where(.woocommerce-invalid,.has-error,.is-error) :where(input,textarea,select),
body.pg-ui :where(input,textarea,select,.pg-ui-location-trigger)[aria-invalid="true"] { border-color: var(--pg-danger); box-shadow: 0 0 0 3px rgba(180,35,58,.09); }
body.pg-ui :where(.woocommerce-validated,.has-success,.is-success) :where(input,textarea,select) { border-color: var(--pg-success); }
body.pg-ui :where(input[type="checkbox"],input[type="radio"]) { width: 20px; height: 20px; min-height: 20px; accent-color: var(--pg-primary); }
body.pg-ui :where(.pg-ui-form,.pg-checkout-shell,.pg-settings-page,.pkt-onboarding-card,.pg-bio-modal) label { color: var(--pg-text); font-size: 14px; font-weight: 700; line-height: 1.4; }

/* Buttons: new code uses pg-ui-button; bridges keep existing Paktograf controls coherent. */
.pg-ui-button,
body.pg-ui :where(.pg-button,.pg-checkout-shell #place_order,.pg-filter-form button[type="submit"]) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pg-space-2);
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--pg-radius-md);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.pg-ui-button--primary,body.pg-ui :where(.pg-button--primary,.pg-checkout-shell #place_order) { background: var(--pg-primary); color: #fff; }
.pg-ui-button--primary:hover,body.pg-ui :where(.pg-button--primary,.pg-checkout-shell #place_order):hover { background: var(--pg-primary-dark); color: #fff; }
.pg-ui-button--secondary,body.pg-ui .pg-button--secondary { border-color: #d8c9f7; background: #fff; color: var(--pg-primary); }
.pg-ui-button--text { background: transparent; color: var(--pg-primary); }
.pg-ui-button--danger { border-color: #f2c7ce; background: #fff7f8; color: var(--pg-danger); }
.pg-ui-button--icon { width: 44px; padding: 0; border-color: var(--pg-border); background: #fff; color: var(--pg-text); border-radius: 50%; }
.pg-ui-button:focus-visible,body.pg-ui :where(.pg-button,.pg-checkout-shell #place_order):focus-visible { outline: 3px solid rgba(111,44,255,.22); outline-offset: 2px; }
.pg-ui-button:active,body.pg-ui :where(.pg-button,.pg-checkout-shell #place_order):active { transform: translateY(1px); }
.pg-ui-button:disabled,.pg-ui-button[aria-disabled="true"],body.pg-ui :where(.pg-button,.pg-checkout-shell #place_order):disabled { cursor: not-allowed; opacity: .55; transform: none; }
body.pg-ui-onboarding .pkt-btn { min-height: 48px; border-radius: var(--pg-radius-md); font-size: 14px; font-weight: 800; }

/* Card primitives and conservative bridges. */
.pg-ui-card,
body.pg-ui :where(.pg-archive-card,.pg-checkout-card,.pg-checkout-summary-card,.pg-service-card,.pg-bio-card) {
  border: 1px solid var(--pg-border);
  border-radius: var(--pg-radius-lg);
  background: var(--pg-surface);
  box-shadow: var(--pg-shadow-1);
}
body.pg-ui .pgsf-card { border-color: var(--pg-border); border-radius: var(--pg-radius-lg); box-shadow: var(--pg-shadow-1); }
body.pg-ui :where(.pg-archive-card,.pgsf-card,.pg-service-card,.pg-bio-people-card) :where(h2,h3) { line-height: 1.25; overflow-wrap: anywhere; }
body.pg-ui :where(.pg-archive-card,.pgsf-card,.pg-service-card,.pg-bio-people-card) a:focus-visible { outline: 3px solid rgba(111,44,255,.22); outline-offset: 3px; }
.pg-ui-card { padding: var(--pg-space-6); }
.pg-ui-card--highlight { border-color: #d9c5ff; background: #fcfaff; }
.pg-ui-card--status { padding: var(--pg-space-4); box-shadow: none; }
.pg-ui-card--compact { padding: var(--pg-space-4); border-radius: var(--pg-radius-md); box-shadow: none; }

/* WordPress, WooCommerce and Paktograf notices become one visual language. */
body.pg-ui :where(.woocommerce-error,.woocommerce-message,.woocommerce-info,.pg-ui-notice,.notice) {
  position: relative;
  width: 100%;
  margin: 0 0 var(--pg-space-4);
  padding: 14px 16px 14px 46px;
  border: 1px solid #d9d5e1;
  border-radius: var(--pg-radius-md);
  background: #fff;
  color: var(--pg-text);
  box-shadow: var(--pg-shadow-1);
  font-size: 14px;
  line-height: 1.5;
  list-style: none;
}
body.pg-ui :where(.woocommerce-error,.woocommerce-message,.woocommerce-info,.pg-ui-notice)::before {
  position: absolute;
  left: 16px;
  top: 14px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
}
body.pg-ui .woocommerce-message,body.pg-ui .pg-ui-notice--success { border-color: #bee8d3; background: #f5fcf8; }
body.pg-ui .woocommerce-message::before,body.pg-ui .pg-ui-notice--success::before { content: "✓"; background: #d9f5e7; color: var(--pg-success); }
body.pg-ui .woocommerce-error,body.pg-ui .pg-ui-notice--error { border-color: #f1c6cd; background: #fff8f9; }
body.pg-ui .woocommerce-error::before,body.pg-ui .pg-ui-notice--error::before { content: "!"; background: #ffe7eb; color: var(--pg-danger); }
body.pg-ui .woocommerce-info,body.pg-ui .pg-ui-notice--info { border-color: #d8c9f7; background: #fbf9ff; }
body.pg-ui .woocommerce-info::before,body.pg-ui .pg-ui-notice--info::before { content: "i"; background: #eee7ff; color: var(--pg-primary); }
body.pg-ui .pg-ui-notice--warning { border-color: #efd89b; background: #fffbef; }
body.pg-ui .pg-ui-notice--warning::before { content: "!"; background: #fff0bd; color: var(--pg-warning); }
body.pg-ui :where(.woocommerce-error,.woocommerce-message,.woocommerce-info) li { margin: 0; padding: 0; }

/* One new modal/sheet shell. Existing legacy systems are not force-converted. */
.pg-ui-modal { position: fixed; inset: 0; z-index: 100500; display: grid; align-items: end; visibility: hidden; opacity: 0; transition: opacity .18s ease, visibility 0s linear .18s; }
.pg-ui-modal.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
.pg-ui-modal__backdrop { position: absolute; inset: 0; border: 0; background: rgba(18,12,27,.46); backdrop-filter: blur(3px); }
.pg-ui-modal__panel { position: relative; width: 100%; max-height: calc(var(--pg-visual-height) - 16px); max-height: min(88dvh,calc(var(--pg-visual-height) - 16px)); display: flex; flex-direction: column; overflow: hidden; border-radius: 24px 24px 0 0; background: var(--pg-surface); box-shadow: var(--pg-shadow-2); transform: translateY(18px); transition: transform .18s ease; }
.pg-ui-modal.is-open .pg-ui-modal__panel { transform: none; }
.pg-ui-modal__handle { width: 42px; height: 5px; flex: 0 0 auto; margin: 9px auto 2px; border-radius: 999px; background: #d8d2df; }
.pg-ui-modal__head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--pg-border); }
.pg-ui-modal__head h2 { flex: 1; margin: 0; color: var(--pg-text); font-size: 19px; line-height: 1.25; }
.pg-ui-modal__close { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #f4f1f7; color: var(--pg-text); font-size: 22px; cursor: pointer; }
.pg-ui-modal__body { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 16px 18px calc(18px + var(--pg-safe-bottom)); }
html.pg-ui-modal-open,html.pg-ui-modal-open body { overflow: hidden; overscroll-behavior: none; }

/* Searchable location picker; the original select remains the submitted value. */
.pg-ui-location-native { position: absolute!important; width: 1px!important; height: 1px!important; overflow: hidden!important; clip: rect(0 0 0 0)!important; clip-path: inset(50%)!important; white-space: nowrap!important; }
.pg-ui-location-trigger { width: 100%; min-height: var(--pg-control-height); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--pg-border-strong); border-radius: var(--pg-radius-md); background: #fff; color: var(--pg-text); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.pg-ui-location-trigger::after { content: "⌄"; color: var(--pg-primary); font-weight: 900; }
.pg-ui-location-search { position: sticky; top: 0; z-index: 2; padding-bottom: 12px; background: #fff; }
.pg-ui-location-search input { width: 100%; min-height: 50px; padding: 11px 14px; border: 1px solid var(--pg-border-strong); border-radius: var(--pg-radius-md); color: var(--pg-text); font-size: 16px; }
.pg-ui-location-list { display: grid; gap: 6px; }
.pg-ui-location-option { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid transparent; border-radius: 12px; background: #fff; color: var(--pg-text); font: inherit; text-align: left; cursor: pointer; }
.pg-ui-location-option:hover,.pg-ui-location-option:focus-visible { border-color: #d8c8f8; background: #faf7ff; outline: 0; }
.pg-ui-location-option.is-selected { border-color: #c9afff; background: #f5efff; color: #5620bf; font-weight: 800; }
.pg-ui-location-option span { min-width: 0; overflow-wrap: anywhere; }
.pg-ui-location-option small { flex: 0 1 auto; color: var(--pg-muted); text-align: right; overflow-wrap: anywhere; }
.pg-ui-location-empty,.pg-ui-location-hint { margin: 12px 2px; color: var(--pg-muted); font-size: 13px; line-height: 1.5; }

/* Checkout polish — visual only; gateway and Stripe behavior stay native. */
body.pg-ui-checkout { background: var(--pg-page); }
body.pg-ui-checkout :where(.pg-checkout-shell,.woocommerce-checkout) { width: min(1180px,calc(100% - 24px)); max-width: 100%; margin-inline: auto; }
body.pg-ui-checkout .woocommerce-notices-wrapper { width: min(1180px,calc(100% - 24px)); margin-inline: auto; }
body.pg-ui-checkout :where(.pg-checkout-grid,.woocommerce-checkout-review-order) { min-width: 0; }
body.pg-ui-checkout :where(#payment,.pg-checkout-payment-card,.payment_box) { max-width: 100%; overflow: visible; }
body.pg-ui-checkout :where(.wc-stripe-upe-element,.wc-stripe-elements-field,.StripeElement,#stripe-card-element) { width: 100%; min-width: 0; max-width: 100%; }
body.pg-ui-checkout :where(.wc-stripe-upe-element iframe,.wc-stripe-elements-field iframe,.StripeElement iframe,#payment iframe) { width: 100%!important; min-width: 0!important; max-width: 100%!important; }
body.pg-ui-checkout #place_order { width: 100%; min-height: 50px; }
body.pg-ui-checkout :where(.pg-checkout-card,.pg-checkout-summary-card,.payment_box,.woocommerce-privacy-policy-text) { overflow-wrap: anywhere; }

/* Existing archive filter UIs share one shell without sharing query logic. */
body.pg-ui :where(.pg-mobile-filter-backdrop,.pg-project-filter-sheet__backdrop,.pg-filter-sheet-backdrop) { background: rgba(18,12,27,.46); backdrop-filter: blur(3px); }
body.pg-ui :where(.pg-project-filter-sheet,.pg-mobile-filter-panel,.pg-filter-sheet-panel) { border-radius: var(--pg-radius-xl) var(--pg-radius-xl) 0 0; background: #fff; box-shadow: var(--pg-shadow-2); }
body.pg-ui :where(.pg-filter-sheet-head,.pg-mobile-filter-head) { border-bottom: 1px solid var(--pg-border); }

/* Onboarding is a focused flow. Its own progress/back/logo remain untouched. */
body.pg-ui-onboarding :where(#apus-header,.site-header,.header-mobile,.pg-mobile-header,.mobile-bottom-nav,.pg-mobile-bottom-nav,.pg-site-footer,#apus-footer) { display: none!important; }
body.pg-ui-onboarding { min-height: var(--pg-visual-height); background: #fff; }
body.pg-ui-onboarding :where(#apus-main-content,.site-main,main) { min-height: var(--pg-visual-height); padding-bottom: max(24px,var(--pg-safe-bottom)); }

/* One global content clearance for the canonical mobile bottom navigation. */
@media (max-width: 782px) {
  body.pg-has-bottom-nav:not(.pg-signals-page):not(.pg-ui-onboarding):not(.pg-ui-checkout) { padding-bottom: calc(92px + var(--pg-safe-bottom)); }
  body.pg-has-bottom-nav:not(.pg-signals-page):not(.pg-ui-onboarding) :where(#apus-main-content,.site-main,main#main) { padding-bottom: calc(var(--pg-bottom-nav-height) + var(--pg-safe-bottom) + 20px); }
  body.pg-has-bottom-nav :where(.pg-mobile-bottom-nav,.mobile-bottom-nav) { bottom: 0; padding-bottom: calc(10px + var(--pg-safe-bottom)); min-height: calc(var(--pg-bottom-nav-height) + var(--pg-safe-bottom)); }
  body.pg-ui-checkout :where(.pg-checkout-shell,.woocommerce-checkout) { width: calc(100% - 24px); }
  body.pg-ui-checkout :where(.pg-checkout-grid,.pg-contact-checkout-grid) { grid-template-columns: minmax(0,1fr); gap: 12px; }
  body.pg-ui-checkout :where(.pg-checkout-card,.pg-checkout-summary-card,.pg-contact-checkout-card,.pg-contact-checkout-payment-card) { border-radius: 18px; }
  .pg-ui-location-option { align-items: flex-start; }
}

@media (min-width: 783px) {
  .pg-ui-modal { place-items: center; padding: 24px; }
  .pg-ui-modal__panel { width: min(620px,100%); max-height: min(82vh,760px); border-radius: var(--pg-radius-xl); transform: translateY(8px) scale(.985); }
  .pg-ui-modal__handle { display: none; }
  .pg-ui-modal__body { padding-bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-ui-modal,.pg-ui-modal__panel,.pg-ui-button { transition: none!important; }
}