/**
 * YOOAdmin - WooCommerce compatibility styles
 *
 * @package YOOAdmin
 */

/* Tokens (resolve from dynamic variables injected by PHP) */
:root{
  --_yp-primary: var(--yooadmin-primary, var(--yp-primary, #eda934));
  --_yp-border:  var(--yooadmin-border,  var(--yp-border,  #e5e7eb));
  --_yp-header:  var(--wp-admin--admin-bar--height, var(--yp-admin-header-h, 72px));
  --_yp-bc:      var(--yp-breadcrumbs-h, 0px);
}

/* Header/breadcrumb heights */
:root{
  --yp-header-h: var(--_yp-header);
  --yp-bc-h:     var(--_yp-bc);
}

/* ---- Scope root: Focus ON + Woo active (wc-admin SPA) ---- */
body.yoo-focus.yoo-woo:not(.yoo-skip-heavy).woocommerce_page_wc-admin{
  --yp-vw-gap: calc((100vw - 100%) / 2); /* extend inner wrappers to true viewport width */
  overflow-x: hidden !important;
}

/* Avoid creating new containing blocks; allow sticky elements */
body.yoo-focus.yoo-woo:not(.yoo-skip-heavy).woocommerce_page_wc-admin #wpwrap,
body.yoo-focus.yoo-woo:not(.yoo-skip-heavy).woocommerce_page_wc-admin #wpcontent,
body.yoo-focus.yoo-woo:not(.yoo-skip-heavy).woocommerce_page_wc-admin #wpbody,
body.yoo-focus.yoo-woo:not(.yoo-skip-heavy).woocommerce_page_wc-admin #wpbody-content,
body.yoo-focus.yoo-woo:not(.yoo-skip-heavy).woocommerce_page_wc-admin #wpbody-content > .wrap,
body.yoo-focus.yoo-woo:not(.yoo-skip-heavy).woocommerce_page_wc-admin .woocommerce-layout{
  overflow: visible !important;
  transform: none !important;
  contain: none !important;
}

/* Neutralize wc-admin body overflow behaviors */
.wp-admin.woocommerce_page_wc-admin,
.wp-admin.woocommerce_page_wc-admin.sticky-menu{
  overflow-y: visible !important;
}

/* Remove top gaps from WP wrappers on wc-admin screens */
body.yoo-focus.yoo-woo:not(.yoo-skip-heavy).woocommerce_page_wc-admin #wpcontent,
body.yoo-focus.yoo-woo:not(.yoo-skip-heavy).woocommerce_page_wc-admin #wpbody,
body.yoo-focus.yoo-woo:not(.yoo-skip-heavy).woocommerce_page_wc-admin #wpbody-content,
body.yoo-focus.yoo-woo:not(.yoo-skip-heavy).woocommerce_page_wc-admin #wpbody-content > .wrap{
  padding-top: 0 !important;
  margin-top: 0 !important;
  max-width: none !important;
}

/* Neutralize inline offsets */
body.yoo-focus.yoo-woo:not(.yoo-skip-heavy).woocommerce_page_wc-admin main[role="main"]{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Layout frame (wc-admin) */
body.yoo-focus.yoo-woo:not(.yoo-skip-heavy).woocommerce_page_wc-admin .woocommerce-layout{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* ===== wc-admin Header ===== */
body.yoo-focus.yoo-woo:not(.yoo-skip-heavy).woocommerce_page_wc-admin .woocommerce-layout__header{
  position: sticky !important;
  top: calc(var(--yp-header-h) + var(--yp-bc-h)) !important;
  z-index: 10010 !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #fff !important;
}

/* Stretch inner wrapper to viewport width without scrollbars */
body.yoo-focus.yoo-woo:not(.yoo-skip-heavy).woocommerce_page_wc-admin .woocommerce-layout__header-wrapper,
body.yoo-focus.yoo-woo:not(.yoo-skip-heavy).woocommerce_page_wc-admin .woocommerce-layout__header .components-card,
body.yoo-focus.yoo-woo:not(.yoo-skip-heavy).woocommerce_page_wc-admin .woocommerce-layout__header .components-card__body{
  width: calc(100% + (2 * var(--yp-vw-gap))) !important;
  margin-left: calc(-1 * var(--yp-vw-gap)) !important;
  margin-right: calc(-1 * var(--yp-vw-gap)) !important;
  max-width: none !important;
  margin-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* Content spacing under sticky header */
body.yoo-focus.yoo-woo:not(.yoo-skip-heavy).woocommerce_page_wc-admin .woocommerce-layout__content{
  min-width: 0 !important;
  padding-top: 12px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
}

/* ===== Activity panel (right drawer) ===== */
@media (min-width: 783px){
  body.yoo-focus.yoo-woo:not(.yoo-skip-heavy).woocommerce_page_wc-admin .woocommerce-layout__activity-panel-wrapper{
    position: fixed !important;
    top: calc(var(--yp-header-h) + var(--yp-bc-h)) !important;
    right: 0 !important;
    height: calc(100vh - (var(--yp-header-h) + var(--yp-bc-h))) !important;
    max-height: calc(100dvh - (var(--yp-header-h) + var(--yp-bc-h))) !important;
    overflow: auto !important;
    z-index: 10020 !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06) !important;
  }
  body.yoo-focus.yoo-woo:not(.yoo-skip-heavy).woocommerce_page_wc-admin
  .woocommerce-layout__activity-panel-wrapper.is-open ~ .woocommerce-layout__content{
    margin-right: 0 !important;
  }
}

/* Safety: non wc-admin screens */
body:not(.woocommerce_page_wc-admin) .woocommerce-layout__activity-panel-wrapper{
  position: static !important;
  height: auto !important;
  max-height: none !important;
  top: auto !important;
  right: auto !important;
}

/* Classic editor padding when using a fixed footer */
body.post-type-product #wpbody-content{
  padding-bottom: 56px !important;
}

/* ==========================================================================
   Woo Settings (admin.php?page=wc-settings)
   Sticky headers and tabs aligned to viewport
   ========================================================================== */

:root{
  --wc-settings-head-h: 0px; /* extra offset when Woo renders additional bars */
}

/* Allow sticky descendants on settings pages */
body.yoo-focus.yoo-woo.woocommerce_page_wc-settings #wpwrap,
body.yoo-focus.yoo-woo.woocommerce_page_wc-settings #wpcontent,
body.yoo-focus.yoo-woo.woocommerce_page_wc-settings #wpbody,
body.yoo-focus.yoo-woo.woocommerce_page_wc-settings #wpbody-content,
body.yoo-focus.yoo-woo.woocommerce_page_wc-settings #wpbody-content > .wrap{
  overflow: visible !important;
}

/* Remove top spacing */
body.yoo-focus.yoo-woo.woocommerce_page_wc-settings #wpbody-content > .wrap{
  padding-top: 0 !important;
  margin-top: 0 !important;
  background: transparent !important;
}

/* Hide classic H1 when Woo renders its own header */
body.yoo-focus.yoo-woo.woocommerce_page_wc-settings .wrap > h1{
  display: none !important;
}

/* ----- Payments header variant ----- */
body.yoo-focus.yoo-woo.woocommerce_page_wc-settings
  .woocommerce-layout__header:has(.woocommerce-settings-payments-header__title){
  position: sticky !important;
  top: calc(var(--yp-header-h) + var(--yp-bc-h)) !important;
  z-index: 10015 !important;
  margin: 0 !important;
  padding: 16px 24px !important;
  background: #fff !important;
  border-bottom: 1px solid var(--_yp-border) !important;
  --wc-payments-head-h: 60px;
}

/* Tabs under Payments header */
body.yoo-focus.yoo-woo.woocommerce_page_wc-settings
  .wrap:has(.woocommerce-layout__header .woocommerce-settings-payments-header__title)
  > .nav-tab-wrapper{
  position: sticky !important;
  top: calc(var(--yp-header-h) + var(--yp-bc-h) + var(--wc-payments-head-h, 60px)) !important;
  z-index: 10010 !important;
  background: #fff !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--_yp-border) !important;
}

/* Anchor scroll snapping (Payments) */
body.yoo-focus.yoo-woo.woocommerce_page_wc-settings
  .wrap:has(.woocommerce-layout__header .woocommerce-settings-payments-header__title)
  .form-table,
body.yoo-focus.yoo-woo.woocommerce_page_wc-settings
  .wrap:has(.woocommerce-layout__header .woocommerce-settings-payments-header__title)
  .wc-settings-sub-title,
body.yoo-focus.yoo-woo.woocommerce_page_wc-settings
  .wrap:has(.woocommerce-layout__header .woocommerce-settings-payments-header__title)
  .woocommerce-wc-settings{
  scroll-margin-top: calc(var(--yp-header-h) + var(--yp-bc-h) + var(--wc-payments-head-h, 60px) + 48px) !important;
}

/* ----- Standard settings header ----- */
body.yoo-focus.yoo-woo.woocommerce_page_wc-settings
  .woocommerce-layout__header:has(.woocommerce-layout__header-heading.woocommerce-layout__header-left-align):not(:has(.woocommerce-settings-payments-header__title)){
  position: sticky !important;
  top: calc(var(--yp-header-h) + var(--yp-bc-h)) !important;
  z-index: 10015 !important;
  margin: 0 !important;
  background: #fff !important;
  border-bottom: 1px solid var(--_yp-border) !important;
  padding: 16px 24px !important;
}

/* Keep heading flush */
body.yoo-focus.yoo-woo.woocommerce_page_wc-settings
  .woocommerce-layout__header:has(.woocommerce-layout__header-heading.woocommerce-layout__header-left-align):not(:has(.woocommerce-settings-payments-header__title))
  .woocommerce-layout__header-heading.woocommerce-layout__header-left-align{
  margin: 0 !important;
  flex: 1 1 auto !important;
}

/* Tabs under standard header */
body.yoo-focus.yoo-woo.woocommerce_page_wc-settings
  .wrap:has(.woocommerce-layout__header .woocommerce-layout__header-heading.woocommerce-layout__header-left-align):not(:has(.woocommerce-settings-payments-header__title))
  > .nav-tab-wrapper{
  position: sticky !important;
  top: calc(var(--yp-header-h) + var(--yp-bc-h) + var(--wc-settings-head-h)) !important;
  z-index: 10010 !important;
  background: #fff !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--_yp-border) !important;
}

/* Anchor scroll snapping (Standard) */
body.yoo-focus.yoo-woo.woocommerce_page_wc-settings
  .wrap:has(.woocommerce-layout__header .woocommerce-layout__header-heading.woocommerce-layout__header-left-align):not(:has(.woocommerce-settings-payments-header__title))
  .form-table,
body.yoo-focus.yoo-woo.woocommerce_page_wc-settings
  .wrap:has(.woocommerce-layout__header .woocommerce-layout__header-heading.woocommerce-layout__header-left-align):not(:has(.woocommerce-settings-payments-header__title))
  .wc-settings-sub-title,
body.yoo-focus.yoo-woo.woocommerce_page_wc-settings
  .wrap:has(.woocommerce-layout__header .woocommerce-layout__header-heading.woocommerce-layout__header-left-align):not(:has(.woocommerce-settings-payments-header__title))
  .woocommerce-wc-settings{
  scroll-margin-top: calc(var(--yp-header-h) + var(--yp-bc-h) + var(--wc-settings-head-h) + 52px) !important;
}

/* ==========================================================================
   Minor brand touches (kept minimal)
   ========================================================================== */
.woocommerce-task-products .woocommerce-task-products__button-view-less-product-types{
  color: var(--_yp-primary) !important;
}
.woocommerce-products-stack .woocommerce-list__item:hover{
  border: 1.5px solid var(--_yp-primary) !important;
}
.woocommerce-embed-page .woocommerce-layout__header.is-scrolled{
  box-shadow: 0 0 0 0 rgba(85, 93, 102, .3) !important; /* remove heavy shadow when scrolled */
}

/* Kill stray left gutter on some wc-admin task pages */
body.yoo-focus.yoo-woo:not(.yoo-skip-heavy).woocommerce_page_wc-admin #wpbody-content,
body.yoo-focus.yoo-woo:not(.yoo-skip-heavy).woocommerce_page_wc-admin #wpbody-content > .wrap{
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Keep header hugging edges on task pages */
body.yoo-focus.yoo-woo:not(.yoo-skip-heavy).woocommerce_page_wc-admin .woocommerce-layout__header,
body.yoo-focus.yoo-woo:not(.yoo-skip-heavy).woocommerce_page_wc-admin .woocommerce-layout__header-wrapper{
  margin-left: calc(-1 * var(--yp-vw-gap)) !important;
  margin-right: calc(-1 * var(--yp-vw-gap)) !important;
  width: calc(100% + (2 * var(--yp-vw-gap))) !important;
}

/* ==========================================================================
   Woo Settings — "Card" treatment (this page only)
   ========================================================================== */
body.yoo-focus.yoo-woo.woocommerce_page_wc-settings{
  --yp-settings-card-max: 1200px;
  --yp-settings-card-padding: 24px;
}

/* Apply card to main settings content areas only */
body.yoo-focus.yoo-woo.woocommerce_page_wc-settings .wrap > form#mainform,
body.yoo-focus.yoo-woo.woocommerce_page_wc-settings .wrap > form#woocommerce_settings,
body.yoo-focus.yoo-woo.woocommerce_page_wc-settings .wrap > .woocommerce-wc-settings,
body.yoo-focus.yoo-woo.woocommerce_page_wc-settings .wrap > .woocommerce,
body.yoo-focus.yoo-woo.woocommerce_page_wc-settings .wrap > .woocommerce-embed-page__content{
  background: #fff !important;
  border: 1px solid var(--_yp-border) !important;
  border-radius: 7px !important;
  padding: var(--yp-settings-card-padding) !important;
  margin: 16px auto 24px !important;
  max-width: var(--yp-settings-card-max) !important;
  box-shadow: none !important;
}

/* Tabs row above card */
body.yoo-focus.yoo-woo.woocommerce_page_wc-settings .wrap > .nav-tab-wrapper{
  margin-bottom: 8px !important;
  background: transparent !important;
  border-bottom: 0 !important;
}

/* Pull card up to touch tabs */
body.yoo-focus.yoo-woo.woocommerce_page_wc-settings
  .wrap > .nav-tab-wrapper.woo-nav-tab-wrapper
  + *:is(form#mainform, form#woocommerce_settings, .woocommerce-wc-settings, .woocommerce, .woocommerce-embed-page__content){
  margin-top: -1px !important;
  background: #fff !important;
  border: 1px solid var(--_yp-border) !important;
  border-top-left-radius: 7px !important;
  border-top-right-radius: 7px !important;
  max-width: var(--yp-settings-card-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: var(--yp-settings-card-padding) !important;
}

/* Woo settings local tweaks from legacy rules (cleaned and fixed) */
body.woocommerce_page_wc-settings #mainform nav{
  margin: -11px -25px 24px -25px !important;
}
body.woocommerce_page_wc-settings .nav-tab-wrapper{
  background: transparent !important;
}
.settings-payments-main__container{
  margin: 0 -24px !important;
}
body.yoo-focus.yoo-woo.woocommerce_page_wc-settings .woocommerce-layout__header:has(.woocommerce-layout__header-heading.woocommerce-layout__header-left-align):not(:has(.woocommerce-settings-payments-header__title)){
  width: 100% !important;
}

/* Keep subtle borders on wrap/header to visually separate areas */
body.yoo-focus.yoo-woo.woocommerce_page_wc-settings #wpbody-content > .wrap{
  border-bottom: 1px solid var(--_yp-border) !important;
  border-right: 1px solid var(--_yp-border) !important;
  border-left: 1px solid var(--_yp-border) !important; /* fixed typo */
}
body.yoo-focus.yoo-woo.woocommerce_page_wc-settings .woocommerce-layout__header:has(.woocommerce-layout__header-heading.woocommerce-layout__header-left-align):not(:has(.woocommerce-settings-payments-header__title)){
  border-right: 1px solid var(--_yp-border) !important;
  border-left: 1px solid var(--_yp-border) !important; /* fixed typo */
}