/* ==== Custom CSS think2speak.html ==== */

/* Perbaikan jarak kosong di sekitar tombol LOGIN/DAFTAR atas */
.section-2-container.section-container-gray-bg{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
}
.section-2-container .container.mt-1.pt-1{
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.section-2-container .w-100.mt-4.mb-4{
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

/* ==== Kotak Info + Harga + Login/Daftar + Paragraf (gabungan 1 kotak) ==== */
.m-design-details__title{
    background:linear-gradient(180deg, rgba(42,0,0,.96) 0%, rgba(10,0,0,.98) 100%);
    border:1px solid rgba(204,0,0,.45);
    border-radius:12px;
    padding:16px 18px;
    box-shadow:0 8px 24px rgba(204,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
    margin-bottom:14px;
}
.m-design-details__title .t2s-dropdown-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:13px;
    color:#eeeeee !important;
    padding-bottom:10px;
    margin-bottom:10px;
    border-bottom:1px solid rgba(204,0,0,.3);
}
.m-design-details__title .t2s-chevron{
    color:#ff6666 !important;
    font-size:11px;
}
.m-design-details__title h1{
    color:#ffffff !important;
    font-weight:700;
}
.m-design-details__title .t2s-checklist{
    list-style:none;
    margin:12px 0 0;
    padding:0;
}
.m-design-details__title .t2s-checklist li{
    color:#ffffff !important;
    font-size:13px;
    padding-left:20px;
    position:relative;
    margin-bottom:6px;
}
.m-design-details__title .t2s-checklist li::before{
    content:"✓";
    position:absolute;
    left:0;
    color:#ff6666;
    font-weight:800;
}
.m-design-details__title .m-design__prices{
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid rgba(204,0,0,.3);
    display:flex;
    align-items:baseline;
    gap:10px;
}
.m-design-details__title .t2s-price-label{
    color:#6ec1ff !important;
    font-size:13px;
    margin-right:auto;
}
.m-design-details__title .jsProductSalePrice{
    text-decoration:line-through;
    color:#a99 !important;
    font-size:14px;
}
.m-design-details__title .jsProductRegularPrice{
    color:#ffffff !important;
    font-weight:800;
    font-size:22px;
}
.m-design-details__title .t2s-section{
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid rgba(204,0,0,.3);
}
.m-design-details__title .asm-lanang-btn{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    font-weight:700;
}
.m-design-details__title .asm-lanang-btn a{
    text-align:center;
    text-decoration:none;
    border-radius:8px;
    padding:14px 10px;
    letter-spacing:.5px;
    font-size:14px;
    text-transform:uppercase;
    transition:transform .22s ease;
}
.m-design-details__title .asm-lanang-btn a:hover{
    transform:translateY(-2px);
}
.m-design-details__title .login{
    color:#ffffff !important;
    background:linear-gradient(180deg, #2a0000 0%, #1a0000 100%) !important;
    border:1px solid rgba(255,255,255,.45);
}
.m-design-details__title .login:hover{
    background:linear-gradient(180deg, #cc0000 0%, #8b0000 100%) !important;
}
.m-design-details__title .rFerister{
    color:#ffffff !important;
    background:linear-gradient(180deg, #cc0000 0%, #8b0000 100%) !important;
    border:1px solid rgba(255,255,255,.65);
}
.m-design-details__title .rFerister:hover{
    background:linear-gradient(180deg, #8b0000 0%, #cc0000 100%) !important;
}
.m-cart-config__option--color{ display:none !important; }

@media (max-width: 767px){
    .m-design__product{
        display:flex !important;
        flex-direction:column !important;
    }
    .m-design-details__title{
        order:2;
    }
    .m-design__preview{
        order:1;
        margin-bottom:14px;
    }
}

/* ==== FAQ & Review (ub-card) ==== */
.ub-card{
    max-width: 900px;
    margin: 20px auto;
    padding: 28px 22px;
    border-radius: 10px;
    background: linear-gradient(180deg, #2b2b2b 0%, #1a1a1a 100%);
    border: 1px solid #3a1f1f;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    font-family: Arial, Helvetica, sans-serif;
}

.ub-head{
    display:flex;
    align-items:center;
    gap:12px;
    margin: 0 0 22px;
}
.ub-head-badge{
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: linear-gradient(135deg, #5c1a1a, #8B0000);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
}
.ub-title{
    font-weight: 800;
    font-size: 20px;
    color: #ffffff !important;
    margin:0;
    border-left: 3px solid #8B0000;
    padding-left: 12px;
}

/* ===== FAQ — grid bernomor ===== */
.ub-faq-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:14px;
}
.ub-faq-item{
    position:relative;
    border-radius: 10px;
    padding: 18px 16px 16px 16px;
    background: #222222;
    box-shadow: inset 0 0 0 1px rgba(139,0,0,.35);
}
.ub-faq-num{
    display:inline-block;
    min-width: 26px;
    height: 26px;
    line-height: 26px;
    text-align:center;
    border-radius: 50%;
    background: #8B0000;
    color:#ffffff !important;
    font-size:13px;
    font-weight:700;
    margin-bottom:10px;
}
.ub-faq-item .ub-q{
    font-weight:700;
    font-size:15px;
    margin-bottom:6px;
    color:#ffffff !important;
}
.ub-faq-item .ub-a{
    font-size:13px;
    line-height:1.7;
    color:#c9c9c9 !important;
}
.ub-faq-item:last-child:nth-child(odd){
    grid-column: 1 / -1;
}

/* ===== REVIEWS — kartu avatar + rating ===== */
.ub-review-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap:14px;
}
.ub-review-card{
    border-radius: 10px;
    padding: 18px 16px;
    background: #222222;
    box-shadow: inset 0 0 0 1px rgba(139,0,0,.35);
    display:flex;
    flex-direction:column;
    gap:10px;
}
.ub-review-card .ub-review-top{
    display:flex;
    align-items:center;
    gap:10px;
}
.ub-review-avatar{
    flex:0 0 auto;
    width:38px;
    height:38px;
    border-radius:50%;
    background: linear-gradient(135deg, #8B0000, #5c1a1a);
    color:#ffffff !important;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:14px;
}
.ub-review-who{ line-height:1.35; }
.ub-review-card .ub-review-name{
    font-weight:700;
    color:#ffffff !important;
    font-size:14px;
    display:block;
}
.ub-review-card .ub-review-city{
    font-size:12px;
    color:#9a9a9a !important;
    display:block;
}
.ub-review-stars{
    color:#e05050 !important;
    font-size:13px;
    letter-spacing:2px;
}
.ub-review-card .ub-review-body{
    font-size:13px;
    line-height:1.7;
    color:#c9c9c9 !important;
}
.ub-review-card .ub-review-meta{
    margin-top:auto;
    padding-top:10px;
    border-top: 1px dashed rgba(139,0,0,.4);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
.ub-review-card .ub-review-date{
    font-size:11px;
    color:#8a8a8a !important;
}
.ub-review-card .ub-review-badge{
    font-size:11px;
    color:#ffb3b3 !important;
    background:rgba(139,0,0,0.5);
    padding:3px 9px;
    border-radius:6px;
}

/* ===== MOBILE ===== */
@media (max-width: 560px){
    .ub-card{ padding: 20px 14px; }
    .ub-faq-grid{ grid-template-columns: 1fr; }
    .ub-faq-item:last-child:nth-child(odd){ grid-column: auto; }
}