/* ============================================================
   SEJOLI CUSTOM UI - front.css
   Styling halaman member area
   ============================================================ */

/* PAGE WRAP */
.scui-page-wrap {
    padding: 20px 24px;
    max-width: 1200px;
}

/* WELCOME BAR */
.scui-welcome-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, #2563eb, #1e40af);
    color: #fff;
    padding: 20px 24px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(37,99,235,.2);
}
.scui-welcome-logo {
    max-height: 56px;
    max-width: 140px;
    object-fit: contain;
}
.scui-welcome-text h2 {
    color: #fff !important;
    font-size: 18px;
    margin: 0 0 4px;
}
.scui-welcome-text p {
    margin: 0;
    opacity: .85;
    font-size: 13px;
    color: #fff !important;
}

/* SECTION TITLE */
.scui-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #475569;
    margin: 24px 0 4px;
    padding-bottom: 4px;
    border-bottom: none;
}

.scui-section-subtitle {
    font-size: 14px;
    font-weight: 700;
    color: #475569;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}

/* STAT GRID */
.scui-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 8px;
}
@media (max-width: 1024px) { .scui-stat-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px)  { .scui-stat-grid { grid-template-columns: 1fr; } }

.scui-stat-card {
    background: #fff;
    border-radius: 10px;
    padding: 18px;
    box-shadow: 0 1px 6px rgba(0,0,0,.07);
    display: flex;
    align-items: center;
    gap: 14px;
}
.scui-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.scui-stat-icon svg { width: 24px; height: 24px; }
.scui-stat-label { font-size: 13px; font-weight: 600; color: #64748b; margin-bottom: 2px; }
.scui-stat-val   { font-size: 20px; font-weight: 700; }

/* Warna ikon stat */
.scui-amber  { background: linear-gradient(135deg,#fbbf24,#f59e0b); }
.scui-teal   { background: linear-gradient(135deg,#2dd4bf,#14b8a6); }
.scui-cyan   { background: linear-gradient(135deg,#22d3ee,#06b6d4); }
.scui-green  { background: linear-gradient(135deg,#4ade80,#22c55e); }
.scui-amber  .scui-stat-val { color: #d97706; }
.scui-teal   .scui-stat-val { color: #0f766e; }
.scui-cyan   .scui-stat-val { color: #0e7490; }
.scui-green  .scui-stat-val { color: #15803d; }

/* PRODUCT GRID */
.scui-product-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px;
    margin-bottom: 8px;
}
@media (max-width: 1024px) { .scui-product-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px)  { .scui-product-grid { grid-template-columns: 1fr; } }

.scui-product-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,.08);
    position: relative;
    transition: box-shadow .2s;
    display: flex; 
    flex-direction: column;
}
.scui-product-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.scui-product-card img  { width: 100%; height: 160px; object-fit: cover; display: block; }
.scui-product-no-img    { height: 160px; display: flex; align-items: center; justify-content: center; font-size: 40px; background: #f1f5f9; }

.scui-badge {
    position: absolute;
    top: 0; left: 0;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 0 0 8px 0;
    color: #fff;
}
.scui-badge-green { background: #16a34a; }
.scui-badge-red   { background: #dc2626; }

.scui-product-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    flex: 1; 
}
.scui-product-price { font-size: 15px; font-weight: 700; color: #16a34a; margin-bottom: 4px; }
.scui-product-price.scui-free { color: #2563eb; }
.scui-product-title {
    font-size: 13px;
    color: #374151;
    min-height: 40px; 
    margin-bottom: 12px;
    line-height: 1.4;
}
.scui-product-btns {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: auto;
}

.scui-btn {
    display: block;
    text-align: center;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: opacity .15s;
}
.scui-btn:hover { opacity: .88; }
.scui-btn-teal    { background: #14b8a6; color: #fff !important; }
.scui-btn-primary { background: #2563eb; color: #fff !important; }

/* AFFILIASI GRID */
.scui-affiliate-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px;
}
@media (max-width: 768px) { .scui-affiliate-grid { grid-template-columns: 1fr; } }

.scui-aff-card {
    border-radius: 10px;
    padding: 20px;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.scui-aff-blue   { background: #748ceb; }
.scui-aff-cyan   { background: #37d5f2; }
.scui-aff-orange { background: #f2a66b; }
.scui-aff-val    { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.scui-aff-label  { font-size: 13px; opacity: .9; }

/* BANNER */
.scui-banner-wrap { margin-bottom: 20px; border-radius: 10px; overflow: hidden; }
.scui-banner-img  { width: 100%; max-height: 300px; object-fit: cover; display: block; }

/* SLIDER */
.scui-slider-wrap { margin-bottom: 20px; border-radius: 10px; overflow: hidden; position: relative; }
.scui-slider      { position: relative; }
.scui-slide       { display: none; }
.scui-slide.active { display: block; }
.scui-slide img   { width: 100%; max-height: 300px; object-fit: cover; display: block; }
.scui-slider-prev,
.scui-slider-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,.4); color: #fff; border: none;
    font-size: 28px; padding: 8px 14px; cursor: pointer;
    border-radius: 4px; z-index: 10;
}
.scui-slider-prev { left: 8px; }
.scui-slider-next { right: 8px; }
.scui-slider-dots { text-align: center; padding: 8px 0 4px; }
.scui-dot {
    display: inline-block; width: 8px; height: 8px;
    background: #cbd5e1; border-radius: 50%; margin: 0 3px; cursor: pointer;
}
.scui-dot.active { background: #2563eb; }
.scui-footer-bar {
    text-align: center;
    padding: 16px;
    color: #94a3b8;
    font-size: 12px;
    margin-top: 32px;
    border-top: 1px solid #e2e8f0;
}

/* Override grid akses: 3 kolom → 2 kolom */
.scui-page-wrap .masonry.grid {
    column-count: 3 !important;
    -webkit-column-count: 3 !important;
}
@media (max-width: 640px) {
    .scui-page-wrap .masonry.grid {
        column-count: 1 !important;
        -webkit-column-count: 1 !important;
    }
}
.scui-page-wrap .masonry.grid .column {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}
.ui.stackable.cards {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    flex-wrap: unset !important;
    gap: 16px !important;
}
.ui.stackable.cards .card {
    width: auto !important;
    margin: 0 !important;
}
.scui-product-card > img {
    width: 100% !important;
    height: 160px !important;
    object-fit: cover !important;
    display: block !important;
    max-width: 100% !important;
    max-height: 160px !important;
}
html body .scui-product-card > img {
    width: 100% !important;
    height: 160px !important;
    max-height: 160px !important;
    object-fit: cover !important;
    display: block !important;
}
html body .scui-product-card {
    overflow: hidden !important;
}
html body .scui-product-grid {
    grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 700px) {
    html body .scui-product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
html body.scui-member-area .scui-product-grid {
    grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 700px) {
    html body.scui-member-area .scui-product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* BOTTOM NAV (mobile PPOB style) */
.scui-bottom-nav { display:none; }
.scui-more-drawer { display:none; }

@media (max-width: 768px) {
    body.scui-bottom-nav-active .sejolisa-memberarea-menu.ui.sidebar,
    body.scui-bottom-nav-active .sidebar-toggle.ui.button {
        display: none !important;
    }
    body.scui-bottom-nav-active .pusher.sejolisa-memberarea-content {
        padding-bottom: 64px;
    }
    body.scui-bottom-nav-active .scui-bottom-nav {
        display:flex;
        position:fixed; bottom:0; left:0; right:0; z-index:10001;
        background:#fff; border-top:1px solid #eee;
        box-shadow:0 -2px 10px rgba(0,0,0,.06);
        height:60px;
    }
    .scui-bn-item {
        flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
        gap:2px; font-size:11px; color:#9a3412; text-decoration:none;
    }
    .scui-bn-item i.icon { font-size:18px; margin:0; }
    .scui-bn-item.active { color: var(--scui-primary,#ea580c); font-weight:600; }
    .scui-bn-center {
        margin-top:-18px;
        background: var(--scui-primary,#ea580c);
        color:#fff !important;
        width:48px; height:48px; border-radius:50%;
        justify-content:center;
        box-shadow:0 4px 10px rgba(234,88,12,.4);
        padding-top:2px;
    }
    .scui-bn-center span { display:block; font-size:9px; }
    .scui-bn-center i.icon { font-size:20px; color:#fff; }

    body.scui-bottom-nav-active .scui-more-drawer.open {
        display:block; position:fixed; inset:0; z-index:10000;
        pointer-events:none;
    }
    .scui-more-overlay, .scui-more-panel { pointer-events:auto; }
    .scui-more-overlay { position:absolute; inset:0; background:rgba(0,0,0,.4); }
    .scui-more-panel {
        position:absolute; bottom:60px; left:0; right:0;
        background:#fff; border-radius:16px 16px 0 0;
        padding:16px; max-height:calc(70vh - 60px); overflow-y:auto;
    }
    .scui-more-panel h3 { margin:0 0 12px; }
    .scui-more-panel a {
        display:flex; align-items:center; gap:10px;
        padding:12px 8px; border-bottom:1px solid #f3f4f6;
        color:#431407; text-decoration:none; font-size:14px;
    }
    body.scui-bottom-nav-active #scui-float-wrap:not([style*="bottom"]) { bottom: 80px; }
}

.ui.stackable.grid > .eight.wide.column {
    width: auto !important;
    flex: 1 1 auto;
    min-width: 130px;
}
.ui.stackable.grid:not(.stacked) {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
#sejoli-total-bayar,
#sejoli-total-bayar .total-holder,
#sejoli-total-bayar .total-holder * {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    box-sizing: border-box;
    white-space: normal;
}
#sejoli-total-bayar .total-holder {
    font-size: clamp(13px, 4.5vw, 20px);
}