/* JOON Frontend Styles v1.1.0 */
.joon-app{position:fixed;inset:0;background:#000;color:#fff;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;z-index:2147483000}
.joon-app.joon-offset{top:32px}
@media (max-width:782px){ .joon-app.joon-offset{ top:46px } }

.joon-sidebar{position:fixed;left:0;top:0;bottom:0;width:20vw;min-width:240px;background:#000;border-right:1px solid rgba(255,255,255,.08);transition:transform .25s ease;z-index:2147483300;}
.joon-sidebar-inner{display:flex;flex-direction:column;height:100%;padding:20px 10px;gap:6px;overflow:auto;}
.joon-tab{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;color:#c9c9c9;text-decoration:none;transition:background .2s,color .2s;}
.joon-tab i{width:20px;text-align:center;}
.joon-tab:hover{background:rgba(255,255,255,.08);color:#fff;}
.joon-tab.is-active{background:rgba(255,255,255,.14);color:#fff;}
.joon-tab.is-logout{color:#ff6b6b;}
.joon-tab.is-logout:hover{background:rgba(255,70,70,.15);color:#fff;}

.joon-main{margin-left:20vw;height:100vh;display:flex;flex-direction:column;}
.joon-header{display:flex;align-items:center;justify-content:space-between;margin:18px 24px 10px 24px;padding:14px 16px;border-radius:18px;
    background:radial-gradient(120% 120% at 10% 10%, #ffffff 0%, #c6e9ff 45%, #c8f7d2 85%);color:#0b1b22;}
.joon-header-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.joon-header-right{display:flex;align-items:center;gap:10px}
.joon-header-name{font-weight:700;font-size:1.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.joon-header-btn{background:rgba(0,0,0,.06);border:0;border-radius:12px;padding:8px 10px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.joon-header-btn i{color:#0b1b22;}

.joon-search{display:flex;align-items:center;gap:6px;margin-left:8px;flex:1;min-width:180px;max-width:420px;}
.joon-search-input{flex:1;border-radius:999px;border:0;padding:8px 12px;font-size:.9rem;outline:none;background:rgba(255,255,255,.85);}
.joon-search-btn{display:inline-flex;align-items:center;gap:6px;border-radius:999px;border:0;padding:8px 12px;font-size:.85rem;font-weight:600;cursor:pointer;background:#0b1b22;color:#f8fafc;}
.joon-search-btn i{color:inherit;}

.joon-cart-wrapper{position:relative;z-index:2147483210;}
.joon-cart-btn{position:relative;}
.joon-cart-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;border-radius:999px;background:#ef4444;color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;padding:0 4px;}
.joon-cart-menu{position:absolute;right:0;top:110%;min-width:220px;background:#020617;color:#e5e7eb;border-radius:14px;box-shadow:0 18px 45px rgba(0,0,0,.45);padding:10px;display:none;z-index:2147483200;}
.joon-cart-menu-inner{display:flex;flex-direction:column;gap:10px;}
.joon-cart-menu-header{display:flex;align-items:center;justify-content:space-between;font-size:.85rem;}
.joon-cart-menu-actions{display:flex;gap:8px;}
.joon-cart-link{text-decoration:none;text-align:center;padding:6px 10px;border-radius:999px;font-size:.8rem;}
.joon-cart-link.button{background:#111827;color:#e5e7eb;}
.joon-cart-link.button-primary{background:#2563eb;color:#eff6ff;}

.joon-canvas{flex:1;overflow:auto;padding:10px 24px 24px 24px;}
.joon-panel{min-height:240px;background:radial-gradient(120% 120% at 10% 10%, #ffffff 0%, #c6e9ff 45%, #c8f7d2 85%);border-radius:18px;padding:16px;color:#0b1b22;}
.joon-muted{opacity:.6}
.joon-search-note{margin-bottom:8px;font-size:.85rem;}

.joon-search-results{margin:0 0 14px 0;padding-left:18px;}
.joon-search-results li{margin:2px 0;}
.joon-search-results a{text-decoration:none;color:#0b1b22;font-size:.9rem;}
.joon-search-results a:hover{text-decoration:underline;}

.joon-notice{padding:16px;border-radius:12px;background:#111;color:#ddd;}
@media (max-width: 960px){
  .joon-sidebar{width:260px;min-width:260px;transform:translateX(-100%);}
  .joon-sidebar.is-open{transform:translateX(0);}
  .joon-main{margin-left:0}
  .joon-tab span{display:inline;}
}

@media (max-width: 720px){
  .joon-header{margin:10px 10px 6px 10px;padding:10px 12px;border-radius:14px;}
  .joon-header-name{font-size:1rem;}
  .joon-header-btn{padding:6px 8px;border-radius:10px;}
  .joon-search{max-width:none;}
}
@media (max-width: 540px){
  .joon-search{flex-basis:100%;}
  .joon-search-btn span{display:none;}
}

.joon-menu-toggle{display:none;}
@media (max-width: 960px){
  .joon-menu-toggle{display:inline-flex;}
}

.joon-app.joon-dark{background:#000;color:#fff;}
.joon-app.joon-light{background:#f4f6fb;color:#111;}
.joon-app.joon-light .joon-sidebar{background:#111;border-right:1px solid rgba(0,0,0,.08);}
.joon-app.joon-light .joon-tab{color:#e0e0e0;}
.joon-app.joon-light .joon-tab.is-active{background:rgba(255,255,255,.24);color:#fff;}
.joon-app.joon-light .joon-panel{background:radial-gradient(120% 120% at 10% 10%, #ffffff 0%, #dbeafe 45%, #dcfce7 85%);}

.joon-mode-toggle i{transition:transform .25s, filter .25s;}
.joon-mode-toggle.is-night i{filter:drop-shadow(0 0 6px rgba(255,255,255,.7));transform:rotate(15deg);}

/* JOON header mini-cart (desktop dropdown + mobile drawer) */
.joon-header{overflow:visible;}
.joon-header-right{display:flex;align-items:center;gap:10px;position:relative;}
.joon-header-controls{display:flex;align-items:center;gap:8px;}
.joon-cart-wrapper{position:relative;z-index:2147483210;}

/* Backdrop (used on mobile drawer) */
.joon-cart-overlay{position:fixed;inset:0;background:rgba(2,6,23,.45);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:2147483190;}
.joon-app.joon-cart-open .joon-cart-overlay{opacity:1;pointer-events:auto;}

/* --- Desktop dropdown (animated) --- */
.joon-cart-menu{
  position:absolute;
  right:0;
  top:110%;
  width:340px;
  max-width:min(100vw - 24px, 380px);
  background:#020617;
  color:#e5e7eb;
  border-radius:16px;
  padding:12px 14px;
  box-shadow:0 18px 45px rgba(15,23,42,.55);
  z-index:2147483200;

  /* override any legacy rules that used display:none */
  display:block;

  /* animation state */
  opacity:0;
  transform:translateY(-6px) scale(.98);
  pointer-events:none;
  visibility:hidden;
  transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.joon-cart-menu.is-open{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
  visibility:visible;
  transition:opacity .16s ease, transform .16s ease, visibility 0s;
}

/* Light-mode dropdown */
.joon-app.joon-light .joon-cart-menu{
  background:#ffffff;
  color:#0f172a;
  box-shadow:0 18px 45px rgba(15,23,42,.16);
}

.joon-cart-menu-inner{display:flex;flex-direction:column;gap:8px;}
.joon-cart-menu-header{display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:.9rem;margin-bottom:4px;}

.joon-cart-items{list-style:none;margin:4px 0 10px;padding:0;max-height:260px;overflow-y:auto;}
.joon-cart-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid rgba(148,163,184,.18);}
.joon-cart-item:last-child{border-bottom:none;}
.joon-cart-name{font-size:.83rem;font-weight:500;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.joon-cart-meta{font-size:.78rem;opacity:.75;white-space:nowrap;}
.joon-cart-remove{border:0;background:transparent;cursor:pointer;font-size:1.05rem;line-height:1;padding:4px;border-radius:999px;}
.joon-cart-remove:hover{background:rgba(148,163,184,.20);}
.joon-cart-empty{font-size:.83rem;opacity:.7;padding:4px 0 6px;}

.joon-cart-menu-actions{display:flex;justify-content:space-between;gap:8px;}
.joon-cart-link{flex:1;text-align:center;font-size:.82rem;padding:7px 10px;border-radius:999px;border:1px solid rgba(148,163,184,.35);text-decoration:none;}
.joon-cart-link.button{background:#111827;color:#e5e7eb;border-color:transparent;}
.joon-cart-link.button-primary{background:#2563eb;color:#eff6ff;border-color:transparent;}
.joon-app.joon-light .joon-cart-link.button{background:#0f172a;color:#e5e7eb;}
.joon-app.joon-light .joon-cart-link.button-primary{background:#2563eb;color:#eff6ff;}

/* --- Mobile drawer: cart becomes a right-side panel --- */
@media (max-width: 720px){
  .joon-cart-menu{
    position:fixed;
    top:0;
    right:0;
    height:100vh;
    width:min(92vw, 420px);
    max-width:none;
    border-radius:18px 0 0 18px;
    /* iOS safe-area support */
    padding:calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));
    transform:translateX(102%);
    opacity:1; /* keep solid; animate via transform */
    visibility:visible;
    pointer-events:auto;
    transition:transform .22s cubic-bezier(.2,.8,.2,1);
  }
  .joon-app.joon-cart-open .joon-cart-menu{
    transform:translateX(0);
  }

  /* On mobile, buttons are easier stacked */
  .joon-cart-menu-actions{flex-direction:column;}
  .joon-cart-link{width:100%;}
}


/* Search dropdown table for individual search */
.joon-search-dropdown{position:relative;margin:4px 24px 0 24px;max-width:900px;background:#ffffff;border-radius:18px;padding:10px 14px;box-shadow:0 16px 40px rgba(0,0,0,.12);z-index:2147483200;}
.joon-search-panel-header{display:flex;align-items:center;gap:6px;font-size:.9rem;font-weight:600;margin-bottom:4px;}
.joon-search-keyword{padding:2px 8px;border-radius:999px;background:rgba(15,23,42,.06);}
.joon-search-table-wrap{max-height:260px;overflow-y:auto;border-radius:12px;border:1px solid rgba(15,23,42,.06);margin-top:4px;}
.joon-search-table{width:100%;border-collapse:collapse;font-size:.86rem;}
.joon-search-row:nth-child(odd){background:rgba(15,23,42,.01);}
.joon-search-row:hover{background:rgba(15,23,42,.05);}
.joon-search-cell{padding:6px 10px;vertical-align:middle;}
.joon-search-cell-title a{text-decoration:none;color:#0f172a;display:block;}
.joon-search-cell-title a:hover{text-decoration:underline;}
.joon-search-cell-view{text-align:right;white-space:nowrap;}
.joon-search-cell-view a{text-decoration:none;font-size:.78rem;padding:4px 10px;border-radius:999px;border:1px solid rgba(15,23,42,.12);color:#0f172a;}
.joon-search-cell-view a:hover{background:rgba(15,23,42,.04);}

/* Responsive enhancements for JOON plugin */
@media (max-width: 720px){
  /* On small screens, show the sidebar at half of the viewport width so that
     icons and labels remain visible. Remove hard min-width and max-width
     constraints to allow flexible sizing. */
  .joon-sidebar{width:50vw;max-width:none;min-width:0;}
  /* Increase canvas width by reducing padding on narrow screens */
  .joon-canvas{padding:10px 12px;}
  /* Ensure tab labels remain visible on mobile */
  .joon-tab span{display:inline;}
}
@media (max-width: 540px){
  /* Further constrain to half the viewport on very small screens */
  .joon-sidebar{width:50vw;max-width:none;min-width:0;}
  .joon-tab span{display:inline;}
}