/* public/assets/front/css/marketpro-tune.css
 * MarketPro-like typography + separators for front pages.
 * Safe, additive CSS: does NOT overwrite template core styles aggressively.
 */

.marketpro-page .marketpro-article{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:28px;
}

.marketpro-article__header{ margin-bottom:18px; }
.marketpro-article__title{ font-size:28px; line-height:1.25; margin:0 0 8px; font-weight:700; color:#111; }
.marketpro-article__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; color:#6b7280; font-size:14px; }
.marketpro-article__meta .meta-item{ display:inline-flex; align-items:center; gap:6px; }
.marketpro-article__meta .meta-sep{ opacity:.6; }

.marketpro-divider{ border:0; border-top:1px solid rgba(0,0,0,.08); margin:20px 0; }

.prose{ color:#111827; font-size:16px; line-height:1.8; }
.prose p{ margin:0 0 12px; }
.prose h2,.prose h3{ margin:20px 0 10px; font-weight:700; color:#111; }
.prose ul{ padding-left:18px; }
.prose li{ margin:6px 0; }
.prose img{ max-width:100%; height:auto; border-radius:12px; }

.marketpro-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:18px;
}

.marketpro-list .item{
  padding:14px 0;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.marketpro-list .item:last-child{ border-bottom:0; }

.marketpro-meta-row{
  display:flex; flex-wrap:wrap; gap:10px;
  color:#6b7280; font-size:13px;
}
.marketpro-meta-row .badge{
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  color:#111;
}

/* Sidebar widget (Recent Posts-like) */
.marketpro-widget{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:18px;
}
.marketpro-widget__title{
  font-weight:700;
  font-size:16px;
  margin:0 0 14px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.marketpro-widget__list{ list-style:none; padding:0; margin:0; }
.marketpro-widget__list li a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 8px;
  border-radius:10px;
  color:#111;
  transition:all .15s ease;
}
.marketpro-widget__list li a:hover{
  background:rgba(0,0,0,.03);
}
.marketpro-widget__list li a.active{
  background:rgba(13,110,253,.10);
  color:#0d6efd;
  font-weight:700;
}

/* Checkout / summary cards */
.checkout-grid{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:24px;
}
@media (max-width: 991.98px){
  .checkout-grid{ grid-template-columns:1fr; }
}
.marketpro-summary{
  position:sticky; top:16px;
}
.marketpro-summary .rowline{
  display:flex; justify-content:space-between; padding:8px 0;
  border-bottom:1px dashed rgba(0,0,0,.12);
  font-size:14px; color:#111;
}
.marketpro-summary .rowline:last-child{ border-bottom:0; }
.marketpro-summary .total{
  font-size:18px; font-weight:800;
}

/* Tabs area on product detail */
.marketpro-tabs{
  border-bottom:1px solid rgba(0,0,0,.08);
  display:flex; gap:18px;
}
.marketpro-tabs a{
  padding:12px 4px;
  font-weight:700;
  color:#6b7280;
  border-bottom:2px solid transparent;
}
.marketpro-tabs a.active{
  color:#111;
  border-bottom-color:#0d6efd;
}

/* Safe button helpers used across step-by-step register + guest order lookup */
.btn-main-600{
  background:#0d6efd;
  color:#fff !important;
  border:1px solid rgba(13,110,253,.35);
}
.btn-main-600:hover{ filter:brightness(.95); }

.btn-outline-neutral-200{
  background:#fff;
  color:#111 !important;
  border:1px solid rgba(0,0,0,.18);
}
.btn-outline-neutral-200:hover{ background:rgba(0,0,0,.03); }

/* ==============================
 * Header quick actions (compact)
 * - Prevent ugly wrapping when actions grow
 * - Show icons always, labels only on wide screens
 * ============================== */
.header-quick{ flex-wrap:nowrap; }
.header-quick .hq-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:34px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  color:#111;
  white-space:nowrap;
}
.header-quick .hq-item i{ font-size:18px; line-height:1; }
.header-quick .hq-item:hover{ background:rgba(0,0,0,.03); }

/* when space is tight: hide labels, keep icons */
@media (max-width: 1200px){
  .header-quick .hq-label{ display:none !important; }
  .header-quick .hq-item{ padding:0 8px; }
}

/* when even tighter: allow wrapping but keep it neat */
@media (max-width: 992px){
  .header-quick{ flex-wrap:wrap; row-gap:8px; }
}

/* ==============================
   Header right actions (account/wishlist/cart)
   ============================== */
.njeju-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.njeju-actions .njeju-act{ display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; border:1px solid rgba(0,0,0,.08); background:#fff; color:#111; text-decoration:none; }
.njeju-actions .njeju-act:hover{ border-color:rgba(0,0,0,.18); }
.njeju-actions .njeju-act .label{ font-size:13px; font-weight:600; }
.njeju-actions .njeju-act .cnt{ display:inline-flex; min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:rgba(0,0,0,.06); align-items:center; justify-content:center; font-size:12px; font-weight:700; }

/* Account dropdown on <details> */
.njeju-actions details.njeju-act{ position:relative; cursor:pointer; }
.njeju-actions details.njeju-act > summary{ list-style:none; }
.njeju-actions details.njeju-act > summary::-webkit-details-marker{ display:none; }
.njeju-actions details.njeju-act[open]{ border-color:rgba(0,0,0,.22); box-shadow:0 8px 24px rgba(0,0,0,.08); }
.njeju-actions details.njeju-act .dropdown-menu{ position:absolute; right:0; top:calc(100% + 8px); min-width:220px; padding:10px; border-radius:14px; border:1px solid rgba(0,0,0,.10); background:#fff; box-shadow:0 14px 34px rgba(0,0,0,.12); z-index:50; }
.njeju-actions details.njeju-act .dropdown-menu a{ display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:10px; text-decoration:none; color:#111; }
.njeju-actions details.njeju-act .dropdown-menu a:hover{ background:rgba(0,0,0,.04); }
.njeju-actions details.njeju-act .dropdown-menu .sep{ height:1px; background:rgba(0,0,0,.08); margin:8px 0; }

@media (max-width: 576px){
  .njeju-actions{ gap:8px; }
  .njeju-actions .njeju-act{ padding:7px 8px; }
  .njeju-actions .njeju-act .label{ font-size:12px; }
}