/* =====================================================================
 * Domain Auction - gaya halaman marketplace, detail lelang, dan aturan.
 *
 * BARU 2026-09-05. Sebelumnya CSS ini tinggal di dalam blok <style> pada
 * templates/six/domainmarket.tpl - 39% dari berkas template - sehingga
 * tidak bisa di-cache browser, tidak bisa ditinjau terpisah, dan setiap
 * penyuntingan gaya berarti menyunting template.
 *
 * Pemindahan ini SENGAJA tidak mengubah tampilan sedikit pun. Warna yang
 * berulang diganti variabel, dan substitusinya diverifikasi dengan cara
 * dibalik lagi lalu dibandingkan byte-per-byte terhadap teks aslinya.
 *
 * CATATAN: berkas domain-auction-modern.css di folder yang sama TIDAK
 * dipakai dan bukan pendahulu berkas ini. Isinya arah visual lain (gradien
 * ungu) dan selektornya beririsan dengan .alert serta .nav-tabs, jadi
 * memuatnya akan mengubah tampilan. Biarkan yatim atau hapus.
 * ===================================================================== */

:root {
    --ws-brand: #116DFF;   /* biru merek DewaBiz */
    --ws-surface: #f8f9fa; /* latar lembut kartu dan baris */
    --ws-border: #e9ecef;  /* garis pemisah */
    --ws-success: #28a745;
    --ws-muted: #6c757d;
}

/* Header dengan Background Solid */
.domain-header {
    background: var(--ws-brand);
    color: white;
    padding: 50px 0;
    margin: -20px -15px 40px -15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    position: relative;
    overflow: hidden;
}
.domain-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="rgba(255,255,255,0.1)"/></svg>');
    opacity: 0.1;
}
.domain-header h1 {
    color: white;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
    z-index: 1;
}
.domain-header p {
    position: relative;
    z-index: 1;
}

/* Card Styling */
.domain-card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 25px;
    background: white;
}
.domain-card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    transform: translateY(-5px);
}

/* Domain Grid Item */
.domain-grid-item {
    background: white;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 25px;
    border: 2px solid #f0f0f0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
}
.domain-grid-item:hover {
    border-color: var(--ws-brand);
    box-shadow: 0 10px 40px rgba(17, 109, 255, 0.2);
    transform: translateY(-5px);
}

/* Domain Name */
.domain-name {
    font-size: 20px;
    font-weight: 700;
    color: #2c3e50;
    /* UX 2026-08-19: break-all memutus nama domain di karakter mana pun sehingga
       kabarjateng.co.id bisa terbelah di tengah kata. anywhere hanya memutus bila
       baris benar-benar tidak muat. */
    overflow-wrap: anywhere;
}

/* Price Tag Solid */
.price-tag {
    background: var(--ws-brand);
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 700;
    display: inline-block;
    box-shadow: 0 4px 15px rgba(17, 109, 255, 0.3);
}

/* Bid Badge */
.bid-badge {
    background: var(--ws-brand);
    color: white;
    padding: 6px 15px;
    border-radius: 20px;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(17, 109, 255, 0.3);
}

/* Countdown Timer */
.countdown-timer {
    background: var(--ws-brand);
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 14px;
    display: inline-block;
    box-shadow: 0 2px 10px rgba(17, 109, 255, 0.3);
    /* UX 2026-08-19: denyut permanen dipindahkan ke .urgent. Sebelumnya SETIAP
       hitung mundur berdenyut selamanya - dengan 17 di satu layar tidak ada yang
       menonjol, justru lelang yang benar-benar mepet kehilangan urgensinya. */
}

/* Hanya lelang yang berakhir di bawah satu jam yang berdenyut. */
.countdown-timer.urgent {
    background: #C2334D;
    box-shadow: 0 2px 10px rgba(194, 51, 77, 0.35);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 5px rgba(255, 152, 0, 0.3); }
    50% { box-shadow: 0 0 20px rgba(255, 152, 0, 0.6); }
}

.countdown-timer.extended {
    background: linear-gradient(135deg, #ff9800, #f57c00) !important;
    animation: pulse 1s ease-in-out infinite !important;
}

/* UX 2026-08-19: pengguna yang sensitif terhadap gerak sebelumnya tidak punya
   jalan keluar sama sekali - tidak ada satu pun guard di halaman ini. */
@media (prefers-reduced-motion: reduce) {
    .countdown-timer.urgent,
    .countdown-timer.extended,
    #auction-extension-notice {
        animation: none !important;
    }
}

/* Category Button */
.category-btn {
    margin: 5px;
    border-radius: 25px;
    padding: 10px 25px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid #e0e0e0;
}
.category-btn:hover {
    background: var(--ws-brand);
    color: white;
    border-color: var(--ws-brand);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(17, 109, 255, 0.3);
}

/* Search Box */
.search-box {
    border-radius: 25px;
    border: 2px solid #e0e0e0;
    padding: 12px 20px;
    transition: all 0.3s ease;
}
.search-box:focus {
    border-color: var(--ws-brand);
    box-shadow: 0 0 0 4px rgba(17, 109, 255, 0.1);
    outline: none;
}

/* Nav Pills Custom */
.nav-pills > li.active > a {
    background: var(--ws-brand);
    box-shadow: 0 4px 15px rgba(17, 109, 255, 0.3);
}
.nav-pills > li > a {
    font-weight: 600;
    transition: all 0.3s ease;
}
.nav-pills > li > a:hover {
    background: var(--ws-surface);
    transform: translateY(-2px);
}

/* Button Enhancements */
.btn {
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
}
.btn-primary {
    background: var(--ws-brand);
    box-shadow: 0 4px 15px rgba(17, 109, 255, 0.3);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(17, 109, 255, 0.4);
}
.btn-success {
    background: var(--ws-brand);
    box-shadow: 0 4px 15px rgba(17, 109, 255, 0.3);
}
.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(17, 109, 255, 0.4);
}
.btn-danger {
    background: var(--ws-brand);
    box-shadow: 0 4px 15px rgba(17, 109, 255, 0.3);
}
.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(17, 109, 255, 0.4);
}

/* Alert Enhancements */
.alert {
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* Panel Enhancements */
.panel {
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    border-radius: 10px;
}

/* Input Group */
.input-group .form-control {
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
}
.input-group .form-control:focus {
    border-color: var(--ws-brand);
    box-shadow: none;
}

/* Responsive */
@media (max-width: 768px) {
    .domain-header {
        padding: 30px 0;
        margin: -15px -15px 25px -15px;
    }
    .domain-header h1 {
        font-size: 24px;
    }
    .domain-grid-item {
        padding: 20px;
    }
    .category-btn {
        padding: 8px 15px;
        font-size: 13px;
    }
}

/* Loading Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.domain-grid-item {
    animation: fadeIn 0.5s ease-out;
}

/* Domain Filter Tabs */
.nav-tabs > li > a.domain-filter-tab {
    color: #666;
    border: none;
    padding: 12px 20px;
    transition: all 0.3s ease;
}
.nav-tabs > li.active > a.domain-filter-tab {
    color: var(--ws-brand);
    border-bottom: 3px solid var(--ws-brand);
    background: transparent;
}
.nav-tabs > li > a.domain-filter-tab:hover {
    background: var(--ws-surface);
    border-bottom: 3px solid var(--ws-brand);
}
.nav-tabs {
    border-bottom: 2px solid #f0f0f0;
}
.domain-item {
    transition: opacity 0.3s ease;
}

/* Domain Filter Links in Nav Pills */
.domain-filter-link {
    font-weight: 600;
    transition: all 0.3s ease;
}
.domain-filter-link:hover {
    background: var(--ws-surface) !important;
    color: var(--ws-brand) !important;
}
.domain-filter-link.active {
    background: #f0f7ff !important;
    color: var(--ws-brand) !important;
}
.nav-pills > li.pull-right {
    margin-left: 5px;
}

/* Modern Filter & Search Container */
.filter-search-container {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.06);
    border: 1px solid #f0f0f0;
}

.filter-section {
    margin-bottom: 0;
}

.filter-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f0f0;
}

.filter-header i {
    font-size: 20px;
    color: var(--ws-brand);
    margin-right: 10px;
}

.filter-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #333;
}

/* Category Tags */
.category-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.category-tag {
    background: var(--ws-surface);
    border: 2px solid var(--ws-border);
    color: #495057;
    padding: 10px 18px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.category-tag i {
    font-size: 11px;
}

.category-tag:hover {
    background: var(--ws-brand);
    border-color: var(--ws-brand);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(17, 109, 255, 0.3);
}

.category-tag:active {
    transform: translateY(0);
}

/* UX 2026-08-20: chip kini <a>, bukan <button>, jadi garis bawah bawaan
   tautan harus dimatikan dan fokus papan ketik harus tetap terlihat. */
.category-tag,
.category-tag:hover,
.category-tag:focus { text-decoration: none; }

.category-tag:focus-visible {
    outline: 2px solid var(--ws-brand);
    outline-offset: 2px;
}

/* Kategori yang sedang dipakai menyaring. Tanpa ini pengunjung tidak punya
   petunjuk apa pun tentang penyaring mana yang sedang aktif. */
.category-tag.is-active {
    background: var(--ws-brand);
    border-color: var(--ws-brand);
    color: #fff;
}

/* Jumlah lelang di tiap kategori, supaya terlihat mana yang layak dibuka. */
.cat-count {
    background: var(--ws-border);
    color: var(--ws-muted);
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.category-tag:hover .cat-count,
.category-tag.is-active .cat-count {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .category-tag { transition: none; }
    .category-tag:hover { transform: none; box-shadow: none; }
}

/* Modern Search Box */
.modern-search-box {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--ws-surface);
    border-radius: 30px;
    padding: 5px;
    border: 2px solid var(--ws-border);
    transition: all 0.3s ease;
}

.modern-search-box:focus-within {
    background: white;
    border-color: var(--ws-brand);
    box-shadow: 0 0 0 4px rgba(17, 109, 255, 0.1);
}

.modern-search-box input.form-control {
    border: none;
    background: transparent;
    padding: 10px 20px;
    font-size: 14px;
    color: #333;
    outline: none;
    box-shadow: none;
}

.modern-search-box input.form-control::placeholder {
    color: #adb5bd;
}

.modern-search-box .search-btn {
    background: var(--ws-brand);
    border: none;
    color: white;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.modern-search-box .search-btn:hover {
    background: #0d5dd1;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(17, 109, 255, 0.4);
}

.modern-search-box .search-btn:active {
    transform: scale(0.95);
}

.modern-search-box .search-btn i {
    font-size: 16px;
}

/* Search Section Specific */
.search-section {
    position: relative;
}

/* View Details Button */
.view-details-btn {
    background: linear-gradient(135deg, var(--ws-surface) 0%, var(--ws-border) 100%);
    border: 2px solid #dee2e6;
    color: #495057;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    display: inline-block;
    width: 100%;
    text-align: center;
}

.view-details-btn:hover {
    background: var(--ws-brand);
    border-color: var(--ws-brand);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(17, 109, 255, 0.3);
    text-decoration: none;
}

.view-details-btn:active {
    transform: translateY(0);
}

.view-details-btn i {
    margin-right: 5px;
}

/* Domain Name Hover Effect */
.domain-name:hover {
    color: var(--ws-brand) !important;
}

/* ========== DETAIL PAGE BID SIDEBAR - SIMPLE & CLEAN ========== */
.bid-sidebar-container {
    position: sticky;
    top: 20px;
}

/* Bid Form Card - Simple */
/* Geometri disamakan dengan .panel bawaan Six: border 1px, radius 4px, bayangan
   tipis. Nama kelasnya sengaja dipertahankan karena dipakai JavaScript. */
.bid-form-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-bottom: 20px;
}

.bid-form-header {
    background: var(--ws-brand);
    padding: 20px;
    text-align: center;
    color: white;
}

.bid-form-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.bid-form-header h3 i {
    margin-right: 8px;
}

/* Bid Input Wrapper */
.bid-input-wrapper {
    padding: 25px;
}

.bid-label {
    display: block;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
    font-size: 14px;
}

.bid-input-container {
    position: relative;
    margin-bottom: 10px;
}

.currency-symbol {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
    color: var(--ws-brand);
    font-size: 16px;
}

.bid-input-field {
    width: 100%;
    padding: 12px 15px 12px 40px;
    border: 2px solid var(--ws-border);
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    transition: all 0.3s ease;
}

.bid-input-field:focus {
    outline: none;
    border-color: var(--ws-brand);
    box-shadow: 0 0 0 3px rgba(17, 109, 255, 0.1);
}

.minimum-bid-info {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #666;
    padding: 8px 12px;
    background: var(--ws-surface);
    border-radius: 6px;
    margin-bottom: 15px;
}

.minimum-bid-info i {
    color: var(--ws-brand);
}

.minimum-bid-info strong {
    color: var(--ws-brand);
}

/* Simple Bid Button */
.btn-place-bid {
    width: 100%;
    padding: 15px 30px;
    background: var(--ws-brand);
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.btn-place-bid:hover,
.btn-place-bid:focus {
    background: #0d5dd1;
}

.btn-place-bid:active {
    background: #0a4ba8;
}

.btn-place-bid i {
    margin-right: 8px;
}

/* Auction Info Box - Below Bid Form */
.auction-info-box {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.info-item {
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.info-label {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
}

.info-label i {
    color: var(--ws-brand);
    margin-right: 5px;
}

.info-value {
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

.info-value .countdown-timer {
    background: var(--ws-brand);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    display: inline-block;
}

/* Login Prompt Card */
.login-prompt-card {
    background: white;
    border-radius: 10px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.btn-login-now {
    display: inline-block;
    padding: 12px 30px;
    background: var(--ws-brand);
    color: white;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(17, 109, 255, 0.3);
}

.btn-login-now:hover {
    background: #0d5dd1;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(17, 109, 255, 0.4);
    color: white;
    text-decoration: none;
}

/* Responsive */
@media (max-width: 768px) {
    .filter-search-container {
        padding: 20px;
    }
    
    .category-tags {
        gap: 8px;
    }
    
    .category-tag {
        padding: 8px 14px;
        font-size: 12px;
    }
    
    .filter-header {
        margin-bottom: 15px;
    }
}

/* Pagination Styling */
.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}

.pagination > li {
    display: inline;
}

.pagination > li > a,
.pagination > li > span {
    position: relative;
    float: left;
    padding: 10px 16px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: var(--ws-brand);
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    transition: all 0.3s ease;
}

.pagination > li:first-child > a,
.pagination > li:first-child > span {
    margin-left: 0;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.pagination > li:last-child > a,
.pagination > li:last-child > span {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
    z-index: 2;
    color: #fff;
    background-color: var(--ws-brand);
    border-color: var(--ws-brand);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: var(--ws-brand);
    border-color: var(--ws-brand);
}

.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
    color: #999;
    cursor: not-allowed;
    background-color: #fff;
    border-color: #ddd;
}

.pagination-lg > li > a,
.pagination-lg > li > span {
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 600;
}

.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
/* ── UX 2026-08-20: tombol tawar langsung dan pesan hasil aksi ───────────── */

/* Pesan hasil aksi. Garis tepi mengambil warna teks alert itu sendiri,
   sehingga satu aturan melayani keempat tingkat pesan. */
.ws-notice { border-left: 4px solid currentColor; }
.ws-notice p { margin: 6px 0 0; }

/* Aksi utama pada baris lelang. Sebelumnya baris ini memuat dua tombol yang
   sama menonjol, dan yang bertuliskan "Place Bid" justru berwarna merah bahaya
   padahal hanya menautkan ke halaman detail. Kini satu tombol saja yang
   menonjol, dan tombol itu benar-benar mengirim penawaran. */
.ws-quickbid { display: inline-block; margin: 0; }
.ws-btn-bid {
    background: var(--ws-brand);
    border: 1px solid var(--ws-brand);
    color: #fff;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 4px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.ws-btn-bid:hover,
.ws-btn-bid:focus { background: #0d55c9; border-color: #0d55c9; color: #fff; }
.ws-btn-bid:focus-visible { outline: 2px solid #0d55c9; outline-offset: 2px; }
.ws-btn-bid[disabled] { opacity: .65; cursor: default; }

.ws-action-secondary { margin-top: 6px; font-size: 12px; }
.ws-action-secondary a { color: #666; text-decoration: underline; }
.ws-action-secondary a:hover,
.ws-action-secondary a:focus { color: var(--ws-brand); }

.ws-top-badge {
    display: inline-block;
    background: var(--ws-success);
    color: #fff;
    padding: 6px 12px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
/* ── UX 2026-08-20: baris lelang menjadi kartu di layar sempit ───────────
   Tabel ini punya enam kolom. Di layar telepon Bootstrap menyalurkannya ke
   dalam wadah yang bisa digeser mendatar, sehingga harga, sisa waktu, dan
   tombol aksi berada di luar layar dan praktis tak terjangkau. Di bawah
   768px tiap baris disusun ulang menjadi kartu bertumpuk. Markupnya tidak
   berubah selain atribut data-label, jadi tampilan meja tulis tetap sama
   persis. */
@media (max-width: 767px) {
    .ws-auction-table thead { display: none; }
    .ws-auction-table,
    .ws-auction-table tbody,
    .ws-auction-table tr,
    .ws-auction-table td { display: block; width: 100%; }

    .ws-cards-wrap { border: 0; overflow-x: visible; }

    .ws-auction-table tr {
        border: 1px solid var(--ws-border) !important;
        border-radius: 8px;
        margin-bottom: 14px;
        padding: 6px 0;
        background: #fff;
    }

    .ws-auction-table td {
        border: 0 !important;
        padding: 7px 16px !important;
        text-align: left !important;
    }

    /* Nama tiap kolom dipindahkan ke sel karena kepala tabel disembunyikan. */
    .ws-auction-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 3px;
        color: #8a8f96;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    /* Nama domain berperan sebagai judul kartu, jadi tidak perlu label. */
    .ws-auction-table td.ws-c-domain {
        padding-top: 12px !important;
        padding-bottom: 2px !important;
    }
    .ws-auction-table td.ws-c-domain::before { content: none; }

    /* Dua keterangan pendek berdampingan agar kartu tidak terlalu jangkung. */
    .ws-auction-table td.ws-c-type,
    .ws-auction-table td.ws-c-bids {
        display: inline-block;
        width: 50%;
        vertical-align: top;
    }

    /* Aksi adalah hal terakhir yang dibaca dan harus mudah disentuh. */
    .ws-auction-table td.ws-c-action {
        padding-top: 10px !important;
        padding-bottom: 12px !important;
    }
    .ws-auction-table td.ws-c-action::before { content: none; }
    .ws-auction-table td.ws-c-action .ws-quickbid,
    .ws-auction-table td.ws-c-action .ws-btn-bid,
    .ws-auction-table td.ws-c-action .btn { display: block; width: 100%; }
    .ws-auction-table td.ws-c-action .ws-action-secondary { text-align: center; }
}
.ws-rules { max-width: 860px; margin: 0 auto 40px; }
.ws-rules h2 { font-size: 26px; font-weight: 700; margin-bottom: 6px; }
.ws-rules .ws-sub { color: #6b7280; margin-bottom: 26px; }
.ws-rules section { margin-bottom: 30px; }
.ws-rules h3 { font-size: 18px; font-weight: 700; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid #eef1f6; }
.ws-rules p, .ws-rules li { line-height: 1.7; color: #333; }
.ws-rules ul { padding-left: 20px; }
.ws-rules li { margin-bottom: 8px; }
.ws-key { width: 100%; border-collapse: collapse; margin: 0 0 6px; }
.ws-key td { padding: 10px 12px; border-bottom: 1px solid #eef1f6; vertical-align: top; }
.ws-key td:first-child { color: #6b7280; width: 46%; }
.ws-key td:last-child { font-weight: 700; }
.ws-callout { padding: 14px 16px; border-radius: 8px; background: #eef4ff; color: #1b3a6b; line-height: 1.65; }
.ws-warn { padding: 14px 16px; border-radius: 8px; background: #fff6e5; color: #7a4b00; line-height: 1.65; }
.ws-log { font-size: 13px; color: #555; }
@media (max-width: 600px) { .ws-key td:first-child { width: 55%; } }

/* ---------------------------------------------------------------------
 * Daftar lelang: panel pembungkus dan kepala tabel.
 *
 * BARU 2026-09-05. Sebelumnya gaya kepala tabel ditulis sebagai atribut
 * style="" yang diulang pada keenam <th>, dan pembungkusnya memakai
 * .domain-card - yang mematikan border panel Six lalu menggantinya dengan
 * kartu melayang ber-radius 10px yang terangkat saat hover. Efek kartu itu
 * diterapkan pada wadah yang isinya tabel, bukan kartu. Sekarang memakai
 * panel bawaan Six, dan gaya kepala tabel tinggal di sini.
 *
 * Kombinator anak dipakai supaya kekhususannya menyamai .table > thead > tr > th
 * milik Bootstrap; tanpa itu padding bawaan Bootstrap yang menang.
 * --------------------------------------------------------------------- */
.ws-auction-panel-body {
    padding: 0;
}
.ws-auction-table {
    margin-bottom: 0;
}
.ws-auction-table > thead > tr {
    background: var(--ws-surface);
    border-bottom: 2px solid var(--ws-border);
}
.ws-auction-table > thead > tr > th {
    padding: 15px;
    font-weight: 600;
    color: #333;
}
.ws-auction-table > tbody > tr.domain-item {
    border-bottom: 1px solid #f0f0f0;
}

/* ---------------------------------------------------------------------
 * Panel berkepala warna merek, dan panel beraksen garis kiri.
 *
 * BARU 2026-09-05. Sebelumnya warna, padding, dan radius kepala ditulis
 * sebagai atribut style="" pada tiap panel, dan wadahnya memakai
 * .domain-card yang mematikan border panel Six lalu menggantinya dengan
 * kartu melayang yang terangkat saat hover.
 *
 * Bootstrap 3 punya .panel-primary untuk kepala berwarna, tetapi warnanya
 * #337ab7 - bukan biru merek - jadi dipakai modifier sendiri di atas
 * .panel-default. Kekhususannya (0,2,0) menyamai .panel-default >
 * .panel-heading milik Bootstrap dan berkas ini dimuat belakangan, jadi
 * warna merek yang menang.
 *
 * Modifier warna dan modifier padding SENGAJA dipisah: panel detail domain
 * memakai padding kepala 20px, sedangkan panel preferensi email memakai
 * padding bawaan Bootstrap. Menyatukannya akan mengubah salah satunya.
 * --------------------------------------------------------------------- */
.ws-panel-brand > .panel-heading {
    background: var(--ws-brand);
    border-color: var(--ws-brand);
    color: #fff;
}
.ws-panel-brand > .panel-heading .panel-title,
.ws-panel-brand > .panel-heading h3 {
    color: #fff;
}
.ws-heading-lg {
    padding: 20px;
}
.ws-panel-title-lg {
    margin: 0;
    font-size: 24px;
}
.ws-panel-title {
    margin: 0;
    padding: 15px 0;
}
.ws-panel-body-lg {
    padding: 30px;
}
.ws-panel-accent {
    border-left: 4px solid var(--ws-brand);
}

/* ---------------------------------------------------------------------
 * Kartu penawaran: gaya yang tadinya ditulis sebagai atribut style="".
 * BARU 2026-09-05. Nilainya tidak diubah, hanya dipindahkan ke sini -
 * kecuali radius kotak catatan, 6px -> 4px, agar seragam dengan panel.
 * --------------------------------------------------------------------- */
.ws-bid-ended {
    padding: 25px 20px;
    text-align: center;
    color: #dc3545;
    font-weight: 600;
}
.ws-min-explain {
    display: block;
    color: #888;
    margin-top: 5px;
}
.ws-rules-link {
    margin-top: 10px;
    font-size: 12px;
}
.ws-proxy-note {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 4px;
    background: #eef4ff;
    color: #1b3a6b;
    font-size: 12px;
    line-height: 1.5;
}
.ws-leading-note {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 4px;
    background: #e6f7ec;
    color: #14663a;
    font-size: 12px;
    font-weight: 600;
}
.ws-login-icon {
    font-size: 40px;
    color: var(--ws-brand);
    margin-bottom: 15px;
}
.ws-login-title {
    margin: 0 0 10px 0;
}
.ws-login-text {
    color: #666;
    margin-bottom: 20px;
}

/* ---------------------------------------------------------------------
 * Gaya berulang yang tadinya ditulis sebagai atribut style="".
 * BARU 2026-09-05. Nilainya tidak diubah, hanya dipindahkan ke sini.
 *
 * Sel tabel memakai kombinator anak agar kekhususannya melampaui
 * .table > tbody > tr > td milik Bootstrap.
 * --------------------------------------------------------------------- */
.ws-meta {
    color: #999;
    display: block;
}
.ws-text-soft {
    color: #666;
}
.ws-tile {
    padding: 15px;
    background: var(--ws-surface);
    border-radius: 8px;
    margin-bottom: 10px;
}
.ws-tile-15 {
    margin-bottom: 15px;
}
.ws-ended-label {
    color: #dc3545;
    font-weight: bold;
}
.ws-auction-table > tbody > tr > td.ws-c {
    padding: 20px;
}
.ws-auction-table > tbody > tr > td.ws-c-type,
.ws-auction-table > tbody > tr > td.ws-c-bids,
.ws-auction-table > tbody > tr > td.ws-c-ends,
.ws-auction-table > tbody > tr > td.ws-c-action {
    text-align: center;
}
.ws-auction-table > tbody > tr > td.ws-c-price {
    text-align: right;
}