/* E90 Dashboard Navigation — v1.0.16 */

.e90-dashnav {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 10px 12px;
}

/* === E90 Post UX: top-left quick links (Dashboard / Home / Explore) === */
.e90-post-quicklinks{
  display:flex;
  gap:10px;
  align-items:center;
  margin: 8px 0 14px 0;
  flex-wrap:wrap;
}
.e90-post-quicklinks__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border:1px solid rgba(0,0,0,0.15);
  border-radius:999px;
  text-decoration:none;
  font-size:14px;
  line-height:1;
  background:#fff;
}
.e90-post-quicklinks__btn:hover{
  text-decoration:none;
}

.e90-dashnav__state {
  font-size: 13px;
  opacity: 0.85;
  margin-bottom: 8px;
}

.e90-dashnav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.e90-dashnav__item a {
  display: inline-block;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  font-size: 14px;
  line-height: 1;
}

.e90-dashnav__item.is-active a {
  font-weight: 600;
  border-color: rgba(0,0,0,0.22);
}

/* =========================================================
   DASHBOARD SIDE PANELS (LEFT/RIGHT) + MOBILE SLIDE-OUT
   NOTE: These styles only apply if the template includes
   <!--E90_DASH_LEFT--> and/or <!--E90_DASH_RIGHT--> tokens.
   ========================================================= */

.e90-dash-side {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  overflow: hidden;
}

.e90-dash-side__inner {
  padding: 10px 12px;
}

.e90-dash-side__header {
  font-size: 13px;
  font-weight: 700;
  opacity: 0.85;
  margin-bottom: 8px;
}

.e90-dash-muted {
  font-size: 13px;
  opacity: 0.75;
  line-height: 1.35;
}

.e90-dashpanel {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
}

.e90-dashpanel__title {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.75;
  margin-bottom: 6px;
}

.e90-dashpanel__row {
  font-size: 14px;
  margin: 2px 0;
}

/* ---------------------------------------------------------
   User card: clickable wrapper + inline gem (match text height)
   NOTE: Keep this in e90-dashnav.css (this file is always enqueued).
--------------------------------------------------------- */
.e90-dashpanel__linkwrap{display:block;text-decoration:none;color:inherit}
.e90-dashpanel__linkwrap:focus{outline:2px solid rgba(0,0,0,.15);outline-offset:3px;border-radius:12px}
.e90-dashpanel__linkwrap:hover .e90-dashpanel{box-shadow:0 1px 8px rgba(0,0,0,.08)}

.e90-user-key-row{display:flex;align-items:center;gap:6px}
/* Theme CSS can set img { width:100% } inside content; hard-pin the gem size. */
.e90-user-key-row img.e90-user-gem{width:14px !important;height:14px !important;max-width:14px !important;max-height:14px !important;border-radius:4px;object-fit:cover;flex:0 0 auto;display:inline-block}

/* Toggle buttons injected by JS */
.e90-dash-togglebar {
  display: none;
}

.e90-dash-toggle {
  display: none;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 999px;
  padding: 8px 10px;
  background: #fff;
  font-size: 13px;
  line-height: 1;
}

.e90-dash-toggle--left { justify-self: start; }
.e90-dash-toggle--right { justify-self: end; }

.e90-dash-overlay {
  pointer-events: auto;

  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 999998;
}

/* Mobile behavior */
@media (max-width: 900px) {
  .e90-dash-togglebar {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  .e90-dash-toggle { display: inline-flex; gap: 6px; align-items: center; }

  /* Off-canvas panels */
  #e90-dash-left,
  #e90-dash-right {
    position: fixed;
    top: 0;
    bottom: 0;
    width: min(340px, 86vw);
    max-width: 86vw;
    background: #fff;
    z-index: 999999;
    overflow: auto;
    border-radius: 0;
    transform: translateX(-110%);
    transition: transform 180ms ease;
  }

  #e90-dash-right {
    right: 0;
    left: auto;
    transform: translateX(110%);
  }

  body.e90-dash-left-open #e90-dash-left { transform: translateX(0); left: 0; }
  body.e90-dash-right-open #e90-dash-right { transform: translateX(0); }
  body.e90-dash-left-open .e90-dash-overlay,
  body.e90-dash-right-open .e90-dash-overlay { display: block; }
}

/* =========================================================
   DASHBOARD SHELL LAYOUT (DESKTOP GRID)
   - Best UX: 3-column grid on desktop, off-canvas on mobile
   - This activates when your Dashboard template (or a wrapper block)
     uses class: e90-dash-layout
   ========================================================= */

.e90-dash-layout {
  max-width: 1600px;
  margin: 0 auto;
  padding: 16px 14px;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 320px;
  gap: 14px;
  align-items: start;
}


/* =========================================================
   INDEPENDENT SCROLL COLUMNS (DESKTOP)
   - Stop full-page scroll below the header
   - Left / Center / Right scroll independently inside the viewport
   - Activated only when JS adds: body.e90-shell-active
   ========================================================= */

@media (min-width: 901px){
  body.e90-shell-active{
    overflow: hidden; /* lock the page behind the shell */
  }

  /* The 3-column shell becomes the viewport region under the header */
  body.e90-shell-active .e90-dash-layout{
    height: var(--e90-shell-h, calc(100vh - 0px));
    overflow: hidden;
    align-items: stretch; /* allow children to fill height */
  }

  /* Make each grid column independently scrollable */
  body.e90-shell-active .e90-dash-layout > *{
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Prevent horizontal jiggle */
  body.e90-shell-active .e90-dash-layout > *{
    overflow-x: hidden;
  }
}

.e90-dash-layout > * {
  margin-top: 0 !important;
}

.e90-dash-center {
  min-width: 0;
}

/* Allow Woo/product blocks to use the wider shell area (no 680px content clamp) */
body.single-product .e90-dash-center,
body.post-type-product .e90-dash-center{
  --wp--style--global--content-size: 1600px;
  --wp--style--global--wide-size: 1600px;
}

body.single-product .e90-dash-center .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body.post-type-product .e90-dash-center .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){
  max-width: none !important;
}

body.single-product .e90-dash-center .alignwide,
body.post-type-product .e90-dash-center .alignwide{
  max-width: none !important;
}

/* If the theme wraps content in a constrained container, prevent double constraint.
   IMPORTANT: WordPress forces the Homepage (/) to use the Front Page template
   (front-page.html), so we must apply the same “no double constraint” behavior
   to both Dashboard AND Front Page contexts.
*/
body.page-template-dashboard .wp-site-blocks,
body.page-template-dashboard .wp-block-group,
body.page-template-front-page .wp-site-blocks,
body.page-template-front-page .wp-block-group,
body.front-page .wp-site-blocks,
body.front-page .wp-block-group,
body.home .wp-site-blocks,
body.home .wp-block-group {
  max-width: none;
}

/* Single Product (WooCommerce): prevent theme constrained wrappers from limiting the dashboard shell */
body.single-product .wp-site-blocks,
body.single-product .wp-site-blocks > .wp-block-group,
body.single-product .wp-site-blocks > .wp-block-group.has-global-padding.is-layout-constrained,
body.post-type-product .wp-site-blocks,
body.post-type-product .wp-site-blocks > .wp-block-group,
body.post-type-product .wp-site-blocks > .wp-block-group.has-global-padding.is-layout-constrained{
  max-width:none !important;
}

/* Allow Woo blocks inside the center column to use full available width */
body.single-product .e90-dash-center,
body.post-type-product .e90-dash-center{
  --wp--style--global--content-size: 1600px;
  --wp--style--global--wide-size: 1600px;
}

body.single-product .e90-dash-center .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body.post-type-product .e90-dash-center .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){
  max-width:none !important;
}

body.single-product .e90-dash-center .alignwide,
body.post-type-product .e90-dash-center .alignwide{
  max-width:none !important;
}

/* Mobile: collapse to center column (side panels become off-canvas via existing rules) */
@media (max-width: 900px) {
  .e90-dash-layout {
    grid-template-columns: 1fr;
  }
}


/* Content padding */
.e90-dash-main,
.e90-dash-content,
.e90-dash-center {
  padding-left: 4px;
  padding-right: 4px;
}

.e90-dash-close{position:absolute;top:10px;right:10px;z-index:1000005;border:1px solid rgba(0,0,0,0.15);border-radius:999px;padding:6px 10px;background:#fff;font-size:14px;line-height:1;}

/* Close button */
.e90-dash-close{display:none;}
@media (max-width: 900px){
  .e90-dash-close{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    padding:0;
    border-radius:999px;
    font-size:16px;
    line-height:1;
    right:8px;
    top:8px;
  }
}

.e90-dash-layout > .wp-block-post-content{padding-left:4px;padding-right:4px;}

/* Equal side widths */
@media (min-width: 901px){
  .e90-dash-layout{
    /* left | center | right */
    grid-template-columns: 320px 1fr 320px;
  }
  #e90-dash-left,
  #e90-dash-right{
    width: auto;
    max-width: none;
  }
}

/* Close button override */
@media (max-width: 900px){
  #e90-dash-left .e90-dash-close,
  #e90-dash-right .e90-dash-close{
    display: inline-flex !important;
  }
}

/* Close button (panel) */
@media (max-width: 900px){
  .e90-dash-side__inner{ position: relative; }
  .e90-dash-close{
    float: right;
    margin-bottom: 8px;
    border: 1px solid rgba(0,0,0,0.15);
    color: inherit;
  }
}

/* Close button hard */
@media (max-width: 900px){
  #e90-dash-left .e90-dash-close,
  #e90-dash-right .e90-dash-close{
    display: inline-flex !important;
  }
}

/* Activity card */
.e90-dash-card{border:1px solid rgba(0,0,0,0.08);border-radius:14px;padding:14px;background:#fff;}
.e90-dash-card__title{font-weight:600;margin-bottom:8px;}
.e90-dash-activity{margin:0;padding-left:18px;}
.e90-dash-activity li{margin:4px 0;}

/* Floating close button for slideouts (mobile) */
.e90-dash-fabclose{display:none;}
@media (max-width: 900px){
  body.e90-dash-left-open .e90-dash-fabclose,
  body.e90-dash-right-open .e90-dash-fabclose{
    display:inline-flex !important;
  }
  .e90-dash-fabclose{
    position:fixed;
    top:12px;
    right:12px;
    z-index:1000007;
    width:34px;
    height:34px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,0.2);
    background:#fff;
    align-items:center;
    justify-content:center;
    font-size:18px;
    line-height:1;
  }
}

/* AJAX content swap loading state */
.e90-ajax-loading{opacity:.6;pointer-events:none;}



/* ==========================================================
   E90 CTA Strip (center column only)
   - Inserted via [e90_cta_strip] shortcode in templates
   - Hidden when user meta has_valid_printed_key is truthy
   ========================================================== */

.e90-cta-strip{
  margin: 10px 0 14px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.8);
  overflow: hidden;
}
.e90-cta-strip__inner{
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
}
.e90-cta-strip__copy{
  min-width: 160px;
  flex: 1 1 auto;
}
.e90-cta-strip__headline{
  font-weight: 700;
  line-height: 1.15;
  font-size: 14px;
  margin: 0 0 2px;
}
.e90-cta-strip__sub{
  font-size: 12px;
  line-height: 1.25;
  opacity: .85;
}

.e90-cta-strip__items{
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
  align-items: center;
}
.e90-cta-strip__item{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.6);
  transition: transform .08s ease, background .12s ease;
  min-width: 84px;
}
.e90-cta-strip__item:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.95);
}
.e90-cta-strip__imgwrap{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 38px; /* locks the "narrow strip" height behavior */
  overflow: hidden;
}
.e90-cta-strip__img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.e90-cta-strip__label{
  font-size: 11px;
  line-height: 1.1;
  text-align: center;
  color: inherit;
  opacity: .95;
  white-space: nowrap;
}

/* Responsive: stack copy above icons; keep icons visible */
@media (max-width: 640px){
  .e90-cta-strip__inner{
    flex-direction: column;
    align-items: stretch;
  }
  .e90-cta-strip__items{
    width: 100%;
    justify-content: space-between;
  }
  .e90-cta-strip__item{
    flex: 1 1 0;
    min-width: 0;
  }
  .e90-cta-strip__label{
    white-space: normal;
  }
}


/* Access Options Page (System > Access Options) */

.e90-access-options{
  margin-top: 6px;
}
.e90-access-card{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 14px 14px 10px;
  background: rgba(255,255,255,.85);
  margin: 14px 0;
}
.e90-access-card .wp-block-image img{
  width: 100%;
  height: auto;
  max-width: 120px;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}
.e90-access-label{
  text-align: center;
  margin-top: 6px;
  margin-bottom: 0;
  font-size: 13px;
}
.e90-access-card .wp-block-buttons{
  gap: 8px;
  flex-wrap: wrap;
}
.e90-access-card .wp-block-button__link{
  font-size: 13px;
  padding: 10px 12px;
}
@media (max-width: 640px){
  .e90-access-card{
    padding: 12px 12px 8px;
  }
  .e90-access-card .wp-block-columns{
    flex-direction: column;
  }
  .e90-access-card .wp-block-column{
    flex-basis: auto !important;
  }
  .e90-access-card .wp-block-buttons{
    justify-content: flex-start !important;
  }
  .e90-access-card .wp-block-image img{
    max-width: 160px;
  }
  .e90-access-label{
    font-size: 14px;
  }
}


/* Logged-in restricted state gating */
.e90-state-gate{
  margin: 18px 0;
  padding: 0;
}
.e90-state-gate__inner{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,248,244,.96));
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  padding: 28px 22px;
  text-align: center;
}
.e90-state-gate__eyebrow{
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .72;
}
.e90-state-gate__title{
  margin: 0;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.2;
}
.e90-state-gate__actions{
  margin-top: 18px;
}
.e90-state-gate__button{
  display: inline-block;
  padding: 12px 20px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
.e90-state-gate__button:hover,
.e90-state-gate__button:focus{
  color: #fff;
  opacity: .92;
}