/*
 * Shared app shell for logged-in pages (includes/app_shell.php): tokens, the
 * sidebar, the top bar, notices, buttons and motion. Taken out of the seller
 * home page (dashboard-v3.css), which now loads this file first, so every page
 * on the new shell looks the same.
 *
 * Tokens follow the dashboard handoff and the Listing Checker redesign (brand
 * purple #6a49f2). Everything is scoped under .d3; Bootstrap 5 may be on the
 * page for the shared upgrade modal but nothing here relies on it.
 */

:root{
  --d3-brand:#6a49f2;
  --d3-brand-rgb:106,73,242;
  --d3-brand-deep:#2A1A66;
  --d3-brand-ink:#3D2496;
  --d3-ink:#1D1730;
  --d3-ink-2:#4A4560;
  --d3-ink-3:#69637F;
  --d3-nav:#2F2945;
  --d3-ground:#F7F5FD;
  --d3-surface:#FFFFFF;
  --d3-surface-2:#FAF8FF;
  --d3-tint:#F1ECFE;
  --d3-tint-line:#E2DAF8;
  --d3-chip:#EDE7FD;
  --d3-nav-tile:#F3EFFE;
  --d3-line:#E6E1F3;
  --d3-line-soft:#EEEAF8;
  --d3-line-strong:#D7D0EC;
  --d3-track:#ECE7F9;
  --d3-live:#2E7552;
  --d3-live-text:#1F5C3D;
  --d3-live-tint:#E6F1EA;
  --d3-warn-text:#7A5208;
  --d3-warn-tint:#FAF0DC;
  --d3-spring:cubic-bezier(.34,1.56,.64,1);
}

body{margin:0;background:var(--d3-ground)}

.d3{display:flex;align-items:stretch;min-height:100vh;background:var(--d3-ground);color:var(--d3-ink);
    font-family:'Schibsted Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;font-size:15px;line-height:1.45;
    -webkit-font-smoothing:antialiased}
.d3 *,.d3 *::before,.d3 *::after{box-sizing:border-box}
.d3 a{color:var(--d3-ink)}
.d3 button,.d3 input{font:inherit;color:inherit}
.d3 h1,.d3 h2,.d3 p{margin:0}
.d3 [hidden]{display:none !important}
.d3 :focus-visible{outline:3px solid rgba(var(--d3-brand-rgb),.45);outline-offset:2px}
.d3-tnum{font-variant-numeric:tabular-nums}
.d3-muted{font-size:13px;color:var(--d3-ink-3)}
.d3-grow{flex:1}
.d3-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ----------------------------------------------------------------- sidebar */

.d3-side{width:288px;flex:none;background:var(--d3-surface);border-right:1px solid var(--d3-line);
         position:sticky;top:0;height:100vh;overflow-y:auto}
.d3-side-in{min-height:100%;padding:22px 18px;display:flex;flex-direction:column;gap:20px}
.d3-side-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.d3-logo{display:flex;align-items:center;gap:12px;padding:4px 6px;text-decoration:none}
.d3-logo img{width:38px;height:38px;border-radius:12px;flex:none}
.d3-logo span{font-size:18px;font-weight:700;letter-spacing:-.015em;color:var(--d3-ink)}
.d3-side-close{display:none;width:44px;height:44px;border:0;border-radius:12px;background:transparent;align-items:center;justify-content:center;cursor:pointer}
.d3-side-close:hover{background:var(--d3-nav-tile)}

.d3-shop{width:100%;border:1px solid var(--d3-line);background:var(--d3-surface-2);border-radius:16px;padding:12px;
         display:flex;align-items:center;gap:12px;text-decoration:none;transition:background .15s ease}
.d3-shop:hover{background:var(--d3-nav-tile)}
.d3-shop--empty{border:1.5px dashed #C3B9E2}
.d3-shop-img{width:40px;height:40px;border-radius:12px;flex:none;object-fit:cover}
.d3-shop-initial{display:inline-flex;align-items:center;justify-content:center;background:var(--d3-chip);color:var(--d3-brand-ink);font-weight:700;font-size:16px}
.d3-shop-plus{display:inline-flex;align-items:center;justify-content:center;background:var(--d3-chip)}
.d3-shop-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.d3-shop-name{font-size:15px;font-weight:700;color:var(--d3-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d3-shop-state{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--d3-live-text)}
.d3-shop-meta{font-size:12px;color:var(--d3-ink-3)}
.d3-shop-switch{display:inline-flex}

.d3-nav{display:flex;flex-direction:column;gap:2px}
.d3-navi{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:10px 12px;border:0;border-radius:12px;
         background:transparent;font-size:15px;font-weight:500;color:var(--d3-nav);text-decoration:none;text-align:left;cursor:pointer;
         transition:background .15s ease}
.d3 .d3-navi{color:var(--d3-nav)}
.d3-navi:hover{background:var(--d3-nav-tile);color:var(--d3-ink)}
.d3-navi > svg:first-child{width:34px;height:34px;padding:8px;border-radius:11px;background:var(--d3-nav-tile);color:var(--d3-brand);flex:none}
.d3 .d3-navi.is-on{background:var(--d3-chip);color:var(--d3-brand-ink);font-weight:700}
.d3-navi.is-on > svg:first-child{background:var(--d3-brand);color:#FFFFFF}
.d3-chev{display:inline-flex;transition:transform .3s var(--d3-spring)}
.d3-navi[aria-expanded="true"] .d3-chev{transform:rotate(90deg)}
.d3-sub{display:flex;flex-direction:column;margin:2px 0 6px 28px;padding-left:10px;border-left:2px solid var(--d3-line-soft);
        animation:d3-rise .45s var(--d3-spring) both}
.d3-subi{display:flex;align-items:center;gap:8px;min-height:40px;padding:8px 12px;border-radius:12px;font-size:14px;text-decoration:none;
         transition:background .15s ease}
.d3 .d3-subi{color:var(--d3-ink-2)}
.d3-subi:hover{background:var(--d3-nav-tile)}
.d3 .d3-subi:hover{color:var(--d3-ink)}
.d3-subi > span:first-child{flex:1}

.d3-side-cards{margin-top:8px;display:flex;flex-direction:column;gap:12px}
.d3-upgrade{padding:18px;border-radius:20px;background:var(--d3-brand-deep);color:#FFFFFF;display:flex;flex-direction:column;gap:10px}
.d3-upgrade-h{font-size:16px;font-weight:700}
.d3-upgrade-p{font-size:13px;line-height:1.45;color:#D9D2F5}
/* Micro-Shop variant of the card: a yellow tag and the struck list price. */
.d3-upgrade-tag{align-self:flex-start;padding:2px 9px;border-radius:999px;background:#ffd84d;color:#3a0f73;
                font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.d3-upgrade-h del{font-weight:500;opacity:.6}
.d3 .d3-upgrade-btn{align-self:flex-start;height:38px;padding:0 16px;border-radius:999px;background:#FFFFFF;color:var(--d3-brand-deep);
             font-size:14px;font-weight:700;display:inline-flex;align-items:center;text-decoration:none}
.d3 .d3-help{display:flex;align-items:center;gap:10px;min-height:44px;padding:12px;border-radius:14px;text-decoration:none;color:var(--d3-ink-2);font-size:14px;
         transition:background .15s ease}
.d3-help:hover{background:var(--d3-nav-tile)}
.d3-help-card{padding:18px;border-radius:20px;background:var(--d3-tint);display:flex;flex-direction:column;gap:8px}
.d3-help-h{font-size:13px;font-weight:700}
.d3-help-p{font-size:13px;line-height:1.45;color:var(--d3-ink-2)}
.d3 .d3-help-card a{font-size:13px;font-weight:700;color:var(--d3-brand-ink)}

.d3-scrim{position:fixed;inset:0;background:rgba(29,23,48,.4);z-index:1040}

/* ----------------------------------------------------------------- main column */

.d3-main{flex:1;min-width:0;display:flex;flex-direction:column}

.d3-demo-bar{padding:9px 32px;background:var(--d3-brand-deep);color:#FFFFFF;display:flex;flex-wrap:wrap;align-items:center;
             justify-content:space-between;gap:8px 16px;font-size:14px}
.d3-demo-bar strong{font-weight:700}

.d3-top{height:64px;padding:0 32px;background:var(--d3-surface);border-bottom:1px solid var(--d3-line);display:flex;align-items:center;gap:14px;
        position:sticky;top:0;z-index:20}
.d3-menu-btn{display:none;width:44px;height:44px;border:1px solid var(--d3-line-strong);border-radius:12px;background:#FFFFFF;
             align-items:center;justify-content:center;cursor:pointer;flex:none;transition:background .15s ease}
.d3-menu-btn:hover{background:var(--d3-nav-tile)}
.d3-top-label{font-size:14px;color:var(--d3-ink-3)}

.d3-search{position:relative;flex:1;min-width:0;max-width:420px}
.d3-field{height:42px;margin:0;display:flex;align-items:center;gap:10px;padding:0 14px;border:1px solid var(--d3-line);border-radius:14px;
          background:var(--d3-surface-2);cursor:text}
.d3-field:focus-within{border-color:var(--d3-brand);box-shadow:0 0 0 4px rgba(var(--d3-brand-rgb),.16)}
.d3-field input{flex:1;min-width:0;border:0;background:transparent;font-size:15px;outline:none}
.d3-search-list{position:absolute;left:0;right:0;top:48px;margin:0;padding:6px;list-style:none;background:#FFFFFF;border:1px solid var(--d3-line);
                border-radius:14px;box-shadow:0 16px 36px -18px rgba(61,36,150,.45);max-height:360px;overflow-y:auto;z-index:30}
.d3-search-list a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:10px 12px;border-radius:10px;
                  text-decoration:none;font-size:14px}
.d3-search-list a:hover,.d3-search-list a.is-hl{background:var(--d3-nav-tile)}
.d3-search-list .d3-search-none{padding:12px;font-size:14px;color:var(--d3-ink-3)}
.d3-search-lock{font-size:12px;color:var(--d3-ink-3)}

.d3-top-link{margin-left:auto;font-size:14px;font-weight:700}
.d3 .d3-top-link{color:var(--d3-brand-ink)}
.d3-account{margin-left:auto;position:relative}
.d3-avatar{width:44px;height:44px;border:0;border-radius:50%;padding:4px;background:transparent;cursor:pointer;display:inline-flex;
           align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--d3-brand-ink)}
.d3-avatar img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.d3-avatar-initial{width:36px;height:36px;border-radius:50%;background:var(--d3-chip);display:inline-flex;align-items:center;justify-content:center}
.d3-menu{position:absolute;right:0;top:50px;min-width:230px;margin:0;padding:6px;list-style:none;background:#FFFFFF;border:1px solid var(--d3-line);
         border-radius:14px;box-shadow:0 16px 36px -18px rgba(61,36,150,.45);z-index:30}
.d3-menu a{display:flex;align-items:center;min-height:44px;padding:10px 12px;border-radius:10px;text-decoration:none;font-size:14px}
.d3-menu a:hover{background:var(--d3-nav-tile)}
.d3-menu-sep{margin-top:4px;padding-top:4px;border-top:1px solid var(--d3-line-soft)}

.d3-content{padding:36px 32px 64px;display:flex;flex-direction:column;gap:32px;max-width:1120px;width:100%}
.d3-content--new{padding-top:40px;gap:36px;max-width:1040px}

/* ----------------------------------------------------------------- notices */

.d3-notices{display:flex;flex-direction:column;gap:12px}
.d3-notices:empty{display:none}
.d3-notice{display:flex;align-items:flex-start;gap:12px;padding:14px 18px;border-radius:18px;background:var(--d3-surface);border:1px solid var(--d3-line);
           font-size:14px;line-height:1.5;color:var(--d3-ink-2)}
.d3-notice > svg{flex:none;margin-top:1px}
.d3-notice strong{color:var(--d3-ink)}
.d3 .d3-notice a{font-weight:700;color:var(--d3-brand-ink);text-underline-offset:3px}
.d3-notice--info{background:var(--d3-tint);border-color:var(--d3-tint-line)}
.d3-notice--good{background:var(--d3-live-tint);border-color:#D7E8DC}
.d3-notice--warn{background:var(--d3-warn-tint);border-color:#F0DDB4;color:var(--d3-warn-text)}
.d3-notices .smt-micro{margin:0}

/* Campaign bar (_include/modules/campaign-bar.php).
 *
 * The shared bar hugs its content and centres itself, and below a 1100px
 * container it turns into a compact two-column block. In this layout that left
 * a ~530px island in the middle of a full-width column, so here it spans the
 * content width like every other card. Its own phone layout (620px and under)
 * is kept. Scoped to .d3-notices so the bar on every other page is unchanged. */
.d3-notices .smt-campaign-bar-wrap{width:100%}
.d3 .cbar-cta,.d3 .cbar-cta:hover{color:#FFFFFF}
@container (min-width:621px){
  .d3-notices .cbar{display:grid;width:100%;max-width:none;margin:0;
                    grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"id msg clock cta";
                    justify-content:stretch;align-items:center;column-gap:28px;row-gap:14px;padding:20px 28px;border-radius:22px}
  .d3-notices .cbar-id{grid-area:id;align-self:center;padding-right:28px;border-right:1px solid rgba(255,255,255,.15)}
  .d3-notices .cbar-id .big{font-size:1.4rem}
  .d3-notices .cbar-msg{grid-area:msg;align-self:center;white-space:normal;font-size:1.12rem}
  .d3-notices .cbar .flip{grid-area:clock;align-self:center;justify-self:auto}
  .d3-notices .cbar .flip-d{width:25px;height:31px;font-size:1rem}
  .d3-notices .cbar-cta{grid-area:cta;align-self:center;justify-self:auto;padding:13px 24px;border-radius:999px;font-size:.95rem;text-align:center}
}
@container (min-width:621px) and (max-width:940px){
  .d3-notices .cbar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"id clock" "msg cta"}
  .d3-notices .cbar-id{border-right:0;padding-right:0}
  .d3-notices .cbar-cta{justify-self:stretch}
}

/* ----------------------------------------------------------------- buttons */

.d3 .d3-btn{flex:none;height:42px;padding:0 18px;border:0;border-radius:999px;background:var(--d3-brand);color:#FFFFFF;font-size:14px;font-weight:700;
        display:inline-flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap;cursor:pointer;
        box-shadow:0 2px 0 rgba(27,26,23,.14);transition:filter .2s ease,transform .25s var(--d3-spring),box-shadow .2s ease}
.d3 .d3-btn:hover{filter:brightness(.94);transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(27,26,23,.4);color:#FFFFFF}
.d3 .d3-btn:active{transform:scale(.97)}
.d3 .d3-btn--ghost{padding:0 16px;background:transparent;border:1px solid var(--d3-line-strong);color:var(--d3-ink);font-weight:600;box-shadow:none}
.d3 .d3-btn--ghost:hover{background:var(--d3-nav-tile);color:var(--d3-ink);filter:none;transform:none;box-shadow:none}
.d3 .d3-btn--sm{height:32px;padding:0 14px;font-size:13px;box-shadow:none}
.d3 .d3-btn--lg{height:48px;padding:0 22px;font-size:15px}
.d3-link-btn{align-self:flex-start;border:0;background:none;padding:10px 0;font-size:14px;font-weight:600;color:var(--d3-brand-ink);
             text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ----------------------------------------------------------------- shell additions */

/* The page a seller is on, inside its open sidebar group. */
.d3 .d3-subi.is-on{background:var(--d3-chip);color:var(--d3-brand-ink);font-weight:700}

/* Free accounts: an Upgrade button in the top bar, as the old shell had. */
.d3 .d3-top-upgrade{margin-left:auto;height:36px;padding:0 16px;font-size:13px;box-shadow:none}
.d3 .d3-top-upgrade + .d3-account{margin-left:0}

/* Micro-Shop: a small shop's own Starter price, next to the Upgrade button.
   Takes the auto margin when it is there, so the button sits beside it. */
.d3 .d3-top-micro{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;
                  background:var(--d3-chip);border:1px solid var(--d3-line-strong);color:var(--d3-brand-ink);
                  font-size:13px;font-weight:600;white-space:nowrap;text-decoration:none}
.d3 .d3-top-micro:hover{border-color:var(--d3-brand)}
.d3-top-micro-new{padding:0 6px;border-radius:999px;background:#ffd84d;color:#3a0f73;font-size:10px;font-weight:700;letter-spacing:.04em}
.d3-top-micro del{font-weight:500;opacity:.7}
.d3 .d3-top-micro + .d3-top-upgrade,
.d3 .d3-top-micro + .d3-account{margin-left:0}

/* Page heading for tool pages: title, one line of context, actions on the right. */
.d3-page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px}
.d3-page-head-txt{display:flex;flex-direction:column;gap:6px;min-width:0}
.d3 .d3-page-head h1{font-size:30px;line-height:1.1;font-weight:700;letter-spacing:-.025em;color:var(--d3-ink)}
.d3-page-head p{font-size:15px;line-height:1.5;color:var(--d3-ink-2);max-width:680px}
.d3-page-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.d3-content--wide{max-width:1280px}

/* Cards: the home page and tool pages both use them. */
.d3-card{padding:24px;border-radius:24px;background:var(--d3-surface);border:1px solid var(--d3-line);display:flex;flex-direction:column;gap:6px}
.d3-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.d3-card h2{font-size:20px;font-weight:700;color:var(--d3-ink)}

/* ----------------------------------------------------------------- motion */

@keyframes d3-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes d3-pop{0%{transform:scale(.6)}100%{transform:scale(1)}}
@keyframes d3-pulse{0%{box-shadow:0 0 0 0 rgba(46,117,82,.45)}70%{box-shadow:0 0 0 7px rgba(46,117,82,0)}100%{box-shadow:0 0 0 0 rgba(46,117,82,0)}}
.d3-pop{animation:d3-pop .4s var(--d3-spring) both}

@media (prefers-reduced-motion: reduce){
  .d3 *,.d3 *::before,.d3 *::after{animation:none !important;transition:none !important}
}

/* ----------------------------------------------------------------- responsive */

@media (max-width:1000px){
  .d3-side{position:fixed;left:0;top:0;bottom:0;height:auto;z-index:1045;transform:translateX(-100%);visibility:hidden;
           transition:transform .3s var(--d3-spring),visibility 0s linear .3s;box-shadow:0 24px 48px -20px rgba(29,23,48,.45)}
  .d3.is-drawer-open .d3-side{transform:none;visibility:visible;transition:transform .3s var(--d3-spring)}
  .d3-side-close{display:inline-flex}
  .d3-menu-btn{display:inline-flex}
}
@media (max-width:700px){
  .d3-top,.d3-demo-bar{padding-left:16px;padding-right:16px}
  /* No room beside the search and the button; the sidebar card carries it. */
  .d3 .d3-top-micro{display:none}
  .d3 .d3-top-micro + .d3-top-upgrade{margin-left:auto}
  .d3-content{padding:24px 16px 48px;gap:24px}
  .d3 .d3-page-head h1{font-size:26px}
}