/* Main Container */
.poltrada-press-frontend-container {
    margin: 20px 0;
    padding: 0 20px;
    box-sizing: border-box;
    width: 100%;
}

.poltrada-press-table-container {
    overflow-x: auto;
    max-width: 100%;
    box-shadow: 0 0 0 1px #e5e5e5;
    background: #fff;
}

/* Table Styles */
.poltrada-press-submissions-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.poltrada-press-submissions-table th,
.poltrada-press-submissions-table td {
    padding: 12px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #e5e5e5;
    word-break: break-word;
}

.poltrada-press-submissions-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    position: sticky;
    top: 0;
}

/* Column Widths */
.poltrada-press-submissions-table .column-id {
    width: 50px;
}

.poltrada-press-submissions-table .column-jenis {
    width: 120px;
}

.poltrada-press-submissions-table .column-judul {
    width: 200px;
}

.poltrada-press-submissions-table .column-bidang {
    width: 120px;
}

.poltrada-press-submissions-table .column-penulis {
    width: 150px;
}

.poltrada-press-submissions-table .column-ukuran {
    width: 80px;
}

.poltrada-press-submissions-table .column-hki {
    width: 60px;
}

.poltrada-press-submissions-table .column-nama {
    width: 150px;
}

.poltrada-press-submissions-table .column-hp {
    width: 120px;
}

.poltrada-press-submissions-table .column-email {
    width: 180px;
}

.poltrada-press-submissions-table .column-tanggal {
    width: 100px;
}

.poltrada-press-submissions-table .column-status {
    width: 170px;
}

.poltrada-press-submissions-table .column-bukti {
    width: 120px;
}

.poltrada-press-submissions-table .column-naskah {
    width: 120px; 
}

.poltrada-press-submissions-table .column-actions {
    width: 180px;
}

/* Status Styles */
.status-pending {
    color: #ffb900;
    font-weight: 600;
}

.status-approved {
    color: #00a32a;
    font-weight: 600;
}

.status-rejected {
    color: #d63638;
    font-weight: 600;
}

/* Action Buttons */
.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.action-buttons .button {
    margin: 0;
    padding: 5px 10px;
    height: auto;
    line-height: 1.4;
    font-size: 13px;
    border: 1px solid transparent;
    cursor: pointer;
}

.button-primary {
    background: #2271b1;
    color: #fff;
}

.button-secondary {
    background: #f0f0f1;
    color: #1d2327;
    border-color: #dcdcde;
}

.button-delete {
    background: #d63638;
    color: #fff;
}

/* Notes Row */
.poltrada-press-notes-row td {
    padding: 10px 15px;
    background-color: #f6f7f7;
}

.submission-notes {
    font-size: 13px;
    color: #646970;
}

/* Responsive */
@media screen and (max-width: 1200px) {
    .poltrada-press-submissions-table {
        min-width: 1000px;
    }
}

@media screen and (max-width: 782px) {
    .poltrada-press-submissions-table.mobile-table td {
        display: flex;
        justify-content: space-between;
        text-align: right;
        padding-left: 50%;
        position: relative;
    }
    
    .poltrada-press-submissions-table.mobile-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 15px;
        font-weight: bold;
        text-align: left;
    }
    
    .poltrada-press-submissions-table.mobile-table .action-buttons {
        flex-direction: column;
    }
}

/* Add to poltrada-press-frontend.css */
.poltrada-press-notice {
    padding: 10px 15px;
    margin: 10px 0;
    border-left: 4px solid;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,0.04);
}

.poltrada-press-notice.notice-success {
    border-left-color: #00a32a;
    color: #1d2327;
}

.poltrada-press-notice.notice-error {
    border-left-color: #d63638;
    color: #1d2327;
}

.poltrada-press-notice.notice-info {
    border-left-color: #72aee6;
    color: #1d2327;
}

/* Spinner Animation */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    vertical-align: middle;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Notice Styles */
.notice {
    padding: 10px 15px;
    margin: 5px 0 15px;
    border-left: 4px solid #72aee6;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,0.04);
}
.poltrada-notice {
    padding: 10px 15px;
    margin-bottom: 15px;
    border-left: 4px solid;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

.notice-success {
    border-left-color: #00a32a;
}

.notice-error {
    border-left-color: #d63638;
}

.notice.is-dismissible {
    position: relative;
    padding-right: 38px;
}

.notice-dismiss {
    text-decoration: none;
}

/* Struk Modal Styles */
.struk-modal {
    max-width: 600px;
}

.struk-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #0073aa;
}

.struk-logo h2 {
    margin: 0;
    color: #0073aa;
    font-size: 24px;
}

.struk-logo p {
    margin: 5px 0 0;
    color: #666;
    font-size: 12px;
}

.struk-info {
    text-align: right;
    font-size: 12px;
}

.struk-data {
    margin: 20px 0;
}

.struk-field {
    margin-bottom: 15px;
}

.struk-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    color: #333;
}

.struk-value {
    padding: 8px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 0;
}

.radio-group label {
    display: block;
    margin-bottom: 8px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.radio-group label:hover {
    background-color: #f0f6fc;
}

.radio-group input[type="radio"] {
    margin-right: 8px;
}

.rekening-details {
    margin-top: 15px;
    padding: 15px;
    background: #f8f9fa;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
}

.bank-detail {
    display: none;
}

.bank-detail h4 {
    margin: 0 0 10px;
    color: #0073aa;
}

.bank-detail p {
    margin: 5px 0;
    font-size: 13px;
}

.struk-footer {
    text-align: center;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

/* Print Styles for Receipt */
@media print {
    body * {
        visibility: hidden;
    }
    .struk-modal, .struk-modal * {
        visibility: visible;
    }
    .struk-modal {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
    .poltrada-press-close-modal,
    #poltrada-press-kirim-struk {
        display: none !important;
    }
}

/* Tambahkan styling untuk tombol cancel */
.poltrada-press-button.secondary {
    background-color: #f0f0f1;
    color: #1d2327;
    border: 1px solid #dcdcde;
}

.poltrada-press-button.secondary:hover {
    background-color: #dcdcde;
}

.modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 15px;
}

.button-process {
    background-color: #28a745;
    color: white;
}

.button-delay {
    background-color: #ffc107;
    color: #212529;
}

.button-process:hover {
    background-color: #218838;
}

.button-delay:hover {
    background-color: #e0a800;
}

/* ======================================================= */
/* MODERN STYLING - REVISI FINAL (FIXED ALL ISSUES)    */
/* ======================================================= */

/* 1. Header Tabel dengan Gradient Penuh */
.poltrada-press-submissions-table thead {
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

.poltrada-press-submissions-table th {
    background: transparent;
    /* FIX: Paksa warna teks menjadi putih dan hapus border kanan */
    color: white !important; 
    border-right: none !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid #5a3a8a;
}

/* FIX: Hilangkan border pemisah antar kolom di header */
.poltrada-press-submissions-table th + th {
    border-left: none !important;
}


/* 2. Desain Ulang Tombol Aksi Modern & Seragam */

/* -- Gaya Dasar untuk SEMUA Tombol (Termasuk "Lihat Bukti") -- */
.poltrada-press-submissions-table .action-buttons .button,
.poltrada-press-submissions-table td > a.button { /* Menargetkan tombol <a> juga */
    background-image: none !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
    color: white !important;
    text-shadow: none !important;
    line-height: 1.5 !important;
    height: auto !important;
    margin-bottom: 5px; 
    display: inline-block; /* Memastikan tag <a> berperilaku seperti tombol */
    text-align: center;
}

/* -- Warna Spesifik untuk Setiap Aksi -- */

/* FIX: Tombol "Lihat Bukti" menjadi Biru Muda */
.poltrada-press-submissions-table td > a.button {
    background-color: #3498db !important; /* Biru Muda */
}

/* Tombol Positif: Process (Hijau) */
.poltrada-press-submissions-table .action-buttons .button.button-process {
    background-color: #28a745 !important;
}

/* Tombol Peringatan: Delay (Kuning) */
.poltrada-press-submissions-table .action-buttons .button.button-delay {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

/* Tombol Negatif: Delete (Abu-abu Gelap) */
.poltrada-press-submissions-table .action-buttons .button.button-delete {
    background-color: #6c757d !important;
}

/* -- Efek Interaktif saat Hover -- */
.poltrada-press-submissions-table .action-buttons .button:hover,
.poltrada-press-submissions-table td > a.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
    filter: brightness(1.1);
}



/* ======================================================= */
/* CSS UPDATE: Nonaktifkan Hover Header & Style Modal  */
/* ======================================================= */

/* 1. Menonaktifkan Efek Hover pada Header Tabel */
/* Aturan ini memastikan baris header tidak berubah warna saat mouse melintas */
.poltrada-press-submissions-table thead tr:hover,
.poltrada-press-submissions-table th:hover {
    background: transparent !important;
}


/* 2. Menyeragamkan Gaya Tombol untuk Semua Modal Pop-up */

/* -- Gaya Dasar untuk semua tombol di dalam modal -- */
.poltrada-press-modal .poltrada-press-button,
.poltrada-press-modal .button {
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
    text-shadow: none !important;
    line-height: 1.5 !important;
    height: auto !important;
}

/* -- Gaya untuk Tombol Aksi Utama (Kirim, Konfirmasi, Submit) -- */
.poltrada-press-modal .poltrada-press-button.primary,
.poltrada-press-modal .button-primary {
    background-color: #667eea !important; /* Warna ungu/biru yang konsisten dengan header */
    color: white !important;
}

/* -- Gaya untuk Tombol Aksi Kedua (Batal, Cancel) -- */
.poltrada-press-modal .poltrada-press-button.secondary,
.poltrada-press-modal .button-secondary {
    background-color: #e9ecef !important; /* Abu-abu muda yang netral */
    color: #495057 !important;
}

/* -- Efek Hover untuk semua tombol modal -- */
.poltrada-press-modal .poltrada-press-button:hover,
.poltrada-press-modal .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
    filter: brightness(1.1);
}

.poltrada-press-modal h3 {
    color: #311250 !important; /* Warna ungu tua, konsisten dengan gradien header */
}

/* ======================================================= */
/* CSS UPDATE: Konsistensi Heading & Tombol Form     */
/* ======================================================= */

/* 1. Menyesuaikan Warna Heading Form */
/* Aturan ini akan mengubah semua judul di dalam kartu form menjadi ungu tua */
.poltrada-press-card-title,
.payment-header h2 {
    color: #764ba2 !important;
}


/* 2. Menyesuaikan Gaya Tombol Form */

/* -- Gaya Dasar untuk Tombol di dalam Form -- */
.poltrada-press-form .poltrada-press-button {
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
    line-height: 1.5 !important;
}

/* -- Warna Tombol Primary (Untuk tombol "Submit") -- */
.poltrada-press-form .poltrada-press-button.primary {
    background-color: #667eea !important;
    color: white !important;
}

/* -- Warna Tombol Secondary (Untuk tombol "+ Tambah Penulis") -- */
.poltrada-press-form .poltrada-press-button.secondary {
    background-color: #e9ecef !important;
    color: #495057 !important;
}

/* -- Efek Hover untuk semua tombol form -- */
.poltrada-press-form .poltrada-press-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
    filter: brightness(1.1);
}

/* ======================================================= */
/* ATURAN FINAL & BERSIH UNTUK SEMUA STATUS BADGE          */
/* ======================================================= */

/* -- Gaya Dasar Kapsul untuk SEMUA Status -- */
body .poltrada-press-submissions-table .status-badge,
body .poltrada-press-user-profile .timeline-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.5;
    letter-spacing: 0.5px;
    white-space: nowrap;
    border: none;
}

/* -- Warna untuk Status Peringatan/Menunggu (Kuning/Oranye) -- */
body .poltrada-press-submissions-table .status-badge.status-pending,
body .poltrada-press-submissions-table .status-badge.status-menunggu-verifikasi,
body .poltrada-press-submissions-table .status-badge.status-submisi-tertunda,
body .poltrada-press-submissions-table .status-badge.status-revisi,
body .poltrada-press-submissions-table .status-badge.status-review-naskah,
body .poltrada-press-submissions-table .status-badge.status-menunggu-kalkulasi,
body .poltrada-press-submissions-table .status-badge.status-menunggu-pembayaran,
body .poltrada-press-submissions-table .status-badge.status-menunggu-va,
body .poltrada-press-submissions-table .status-badge.status-menunggu-validasi, /* <-- DITAMBAHKAN */
body .poltrada-press-user-profile .timeline-status.status-pending,
body .poltrada-press-user-profile .timeline-status.status-menunggu-verifikasi,
body .poltrada-press-user-profile .timeline-status.status-submisi-tertunda,
body .poltrada-press-user-profile .timeline-status.status-revisi,
body .poltrada-press-user-profile .timeline-status.status-review-naskah,
body .poltrada-press-user-profile .timeline-status.status-menunggu-kalkulasi,
body .poltrada-press-user-profile .timeline-status.status-menunggu-pembayaran,
body .poltrada-press-user-profile .timeline-status.status-menunggu-va,
body .poltrada-press-user-profile .timeline-status.status-menunggu-validasi { /* <-- DITAMBAHKAN */
    background-color: #fcf3cf;
    color: #a1882d;
}

/* -- Warna untuk Status Sukses/Selesai (Hijau) -- */
body .poltrada-press-submissions-table .status-badge.status-approved,
body .poltrada-press-submissions-table .status-badge.status-publikasi,
body .poltrada-press-submissions-table .status-badge.status-terpublikasi,
body .poltrada-press-submissions-table .status-badge.status-published,
body .poltrada-press-submissions-table .status-badge.status-telah-dikirim,
body .poltrada-press-submissions-table .status-badge.status-selesai,
body .poltrada-press-user-profile .timeline-status.status-approved,
body .poltrada-press-user-profile .timeline-status.status-publikasi,
body .poltrada-press-user-profile .timeline-status.status-terpublikasi,
body .poltrada-press-user-profile .timeline-status.status-telah-dikirim,
body .poltrada-press-user-profile .timeline-status.status-selesai {
    background-color: #d4edda;
    color: #155724;
}

/* -- Warna untuk Status Proses/Informasi (Biru) -- */
body .poltrada-press-submissions-table .status-badge.status-submisi,
body .poltrada-press-submissions-table .status-badge.status-redaksi,
body .poltrada-press-submissions-table .status-badge.status-siap-dikirim,
body .poltrada-press-user-profile .timeline-status.status-submisi,
body .poltrada-press-user-profile .timeline-status.status-redaksi,
body .poltrada-press-user-profile .timeline-status.status-siap-dikirim {
    background-color: #d1e7fd;
    color: #0c5460;
}

/* -- Warna untuk Status Ditolak/Negatif (Merah) -- */
body .poltrada-press-submissions-table .status-badge.status-rejected,
body .poltrada-press-user-profile .timeline-status.status-rejected {
    background-color: #f8d7da;
    color: #721c24;
}

/* -- Warna untuk Status Ditarik/Netral (Abu-abu) -- */
body .poltrada-press-submissions-table .status-badge.status-ditarik,
body .poltrada-press-submissions-table .status-badge.status-unpublished,
body .poltrada-press-user-profile .timeline-status.status-ditarik {
    background-color: #e2e8f0;
    color: #4a5568;
}


/* ============================================= */
/* GAYA UNTUK STATUS BADGE (KAPSUL) & TIMELINE  */
/* ============================================= */
.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
    text-transform: capitalize;
    line-height: 1;
    white-space: nowrap;
}

/* Base style for timeline status */
.poltrada-press-user-profile .timeline-status {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: 600;
    text-transform: capitalize;
    line-height: 1;
    white-space: nowrap;
    margin-top: 5px;
}

/* -- Warna untuk Status Pending (Orange) -- */
body .poltrada-press-submissions-table .status-badge.status-pending,
body .poltrada-press-submissions-table .status-badge.status-menunggu-verifikasi,
body .poltrada-press-user-profile .timeline-status.status-pending,
body .poltrada-press-user-profile .timeline-status.status-menunggu-verifikasi {
    background-color: #ffe0b2; /* Orange muda */
    color: #e65100; /* Orange gelap */
}

/* -- Warna untuk Status Approved/Published (Hijau) -- */
body .poltrada-press-submissions-table .status-badge.status-approved,
body .poltrada-press-submissions-table .status-badge.status-publikasi,
body .poltrada-press-submissions-table .status-badge.status-terpublikasi, /* Pastikan ini ada di badge */
body .poltrada-press-user-profile .timeline-status.status-approved,
body .poltrada-press-user-profile .timeline-status.status-publikasi,
body .poltrada-press-user-profile .timeline-status.status-terpublikasi { /* Pastikan ini ada di timeline */
    background-color: #e6ffed; /* Hijau muda */
    color: #1a6d34; /* Hijau gelap */
}

/* -- Warna untuk Status Rejected (Merah) -- */
body .poltrada-press-submissions-table .status-badge.status-rejected,
body .poltrada-press-submissions-table .status-badge.status-submisi-tertunda,
body .poltrada-press-user-profile .timeline-status.status-rejected,
body .poltrada-press-user-profile .timeline-status.status-submisi-tertunda {
    background-color: #ffeaea; /* Merah muda */
    color: #cc0000; /* Merah gelap */
}

/* -- Warna untuk Status In-progress (Biru/Ungu) -- */
body .poltrada-press-submissions-table .status-badge.status-submisi,
body .poltrada-press-submissions-table .status-badge.status-redaksi,
body .poltrada-press-submissions-table .status-badge.status-review-naskah,
body .poltrada-press-submissions-table .status-badge.status-revisi,
body .poltrada-press-user-profile .timeline-status.status-submisi,
body .poltrada-press-user-profile .timeline-status.status-redaksi,
body .poltrada-press-user-profile .timeline-status.status-review-naskah,
body .poltrada-press-user-profile .timeline-status.status-revisi {
    background-color: #e0f2f7; /* Biru muda */
    color: #0288d1; /* Biru gelap */
}

/* -- Warna untuk Status Ditarik (Abu-abu) -- */
body .poltrada-press-submissions-table .status-badge.status-ditarik, /* Pastikan ini ada di badge */
body .poltrada-press-user-profile .timeline-status.status-ditarik { /* Pastikan ini ada di timeline */
    background-color: #e2e8f0; /* Abu-abu muda */
    color: #cc071e; /* Abu-abu gelap */
}

/* Gaya untuk kolom Actions di tabel */
.poltrada-press-submissions-table .column-actions {
    width: 200px; /* Lebar tetap untuk kolom action */
    white-space: nowrap; /* Mencegah tombol melompat baris */
}

.poltrada-press-submissions-table .column-actions .action-buttons button {
    margin-right: 5px; /* Spasi antar tombol */
    margin-bottom: 5px; /* Spasi di mobile */
}

/* ======================================================= */
/* CSS FIX: Aturan Prioritas Tinggi untuk Tombol Tabel   */
/* Tambahkan kode ini di bagian paling akhir file CSS      */
/* ======================================================= */

/* Menggunakan selector yang SANGAT SPESIFIK untuk memastikan aturan ini menang */
body .poltrada-press-frontend-container .poltrada-press-submissions-table .action-buttons .button,
body .poltrada-press-frontend-container .poltrada-press-submissions-table td > a.button {
    background-image: none !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
    text-shadow: none !important;
    line-height: 1.5 !important;
    height: auto !important;
    margin-bottom: 5px !important;
    transition: all 0.2s ease-in-out !important;
}



/* ============================================= */
/* CSS UPDATE: Menyamakan Lebar Tombol Aksi    */
/* ============================================= */

/* Atur lebar tetap & teks di tengah untuk semua tombol di dalam tabel */
body .poltrada-press-frontend-container .poltrada-press-submissions-table .action-buttons .button,
body .poltrada-press-frontend-container .poltrada-press-submissions-table td > a.button {
    width: 105px !important; 
    text-align: center !important;
    justify-content: center; /* Untuk flexbox jika ada ikon */
}

/* ============================================= */
/* CSS untuk Pagination                          */
/* ============================================= */

.poltrada-pagination {
    margin-top: 25px;
    text-align: center;
}

.poltrada-pagination .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    margin: 0 2px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #667eea;
    background-color: #fff;
    transition: all 0.2s ease-in-out;
}

.poltrada-pagination .page-numbers:hover,
.poltrada-pagination .page-numbers.current {
    background-color: #667eea;
    color: white;
    border-color: #667eea;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.poltrada-pagination .page-numbers.current {
    cursor: default;
    transform: none;
    box-shadow: none;
}

/* ======================================================= */
/* CSS FINAL & LENGKAP UNTUK FILTER BAR                */
/* Ganti semua aturan CSS filter bar Anda dengan ini.  */
/* ======================================================= */

.poltrada-filter-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px; 
}

.poltrada-filter-bar form.poltrada-filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px; /* Jarak antar elemen di dalam form */
}

/* Menghilangkan margin default dari elemen WordPress */
.poltrada-filter-bar .search-box,
.poltrada-filter-bar .actions {
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    gap: 10px;
    align-items: center;
}

.poltrada-filter-bar input[type="search"],
.poltrada-filter-bar select {
    margin: 0 !important;
}

/* --- Gaya Tombol di Dalam Filter Bar --- */

.poltrada-filter-bar .button,
.poltrada-filter-bar .button-primary {
    background-image: none !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    line-height: 1.5 !important;
    height: auto !important;
    text-shadow: none !important;
    white-space: nowrap;
}

.poltrada-filter-bar .button:hover,
.poltrada-filter-bar .button-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
    filter: brightness(1.05);
}

/* Tombol abu-abu (contoh: Reset) */
.poltrada-filter-bar .button {
    background-color: #f0f0f1 !important;
    color: #50575e !important;
    border: 1px solid #dcdcde !important;
}

/* Tombol Biru (Filter, Search & Export) */
.poltrada-filter-bar input[type="submit"].button,
.poltrada-filter-bar .button-primary {
    background-color: #3498db !important;
    color: white !important;
    border: 1px solid transparent !important;
}



/* ======================================================= */
/* FIX: Meluruskan Elemen di Filter Bar                    */
/* ======================================================= */

/* 1. Pastikan container utama menggunakan align-items: center */
.poltrada-filter-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* KUNCI UTAMA: Memusatkan semua grup item secara vertikal */
    align-items: center; 
    gap: 20px;
    margin-bottom: 25px; 
}

/* 2. Hapus margin default dari WordPress pada kotak pencarian */
.poltrada-filter-bar .search-box {
    margin: 0;
    padding: 0;
}

/* ======================================================= */
/* CSS FIX: Aturan Prioritas Tinggi untuk Tombol Tabel   */
/* ======================================================= */

body .poltrada-press-frontend-container .poltrada-press-submissions-table .action-buttons .button,
body .poltrada-press-frontend-container .poltrada-press-submissions-table td > a.button {
    background-image: none !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
    text-shadow: none !important;
    line-height: 1.5 !important;
    height: auto !important;
    margin-bottom: 5px !important;
    transition: all 0.2s ease-in-out !important;
    width: 105px !important; 
    text-align: center !important;
    justify-content: center;
}


/* Aturan warna spesifik dengan prioritas tinggi */
body .poltrada-press-frontend-container .poltrada-press-submissions-table td > a.button {
    background-color: #3498db !important; /* Biru Muda untuk "Lihat Bukti" */
    color: white !important;
}
body .poltrada-press-frontend-container .poltrada-press-submissions-table .action-buttons .button.button-approve {
    background-color: #667eea !important; /* Biru/Ungu untuk "Approve" */
    color: white !important;
}

body .poltrada-press-frontend-container .poltrada-press-submissions-table .action-buttons .button.button-accept-manuscript {
    background-color: #34b12d !important; /* Biru/Ungu, sama seperti Approve */
    color: white !important;
}

body .poltrada-press-frontend-container .poltrada-press-submissions-table .action-buttons .button.button-request-revision {
    background-color: #e8b427 !important; /* Oranye */
    color: white !important;
}

body .poltrada-press-frontend-container .poltrada-press-submissions-table .action-buttons .button.button-process {
    background-color: #28a745 !important; /* Hijau untuk "Proses" */
    color: white !important;
}
body .poltrada-press-frontend-container .poltrada-press-submissions-table .action-buttons .button.button-delay {
    background-color: #ffc107 !important; /* Kuning untuk "Tunda" */
    color: #212529 !important;
}
body .poltrada-press-frontend-container .poltrada-press-submissions-table .action-buttons .button.button-reject {
    background-color: #f25217 !important; /* Merah untuk "Reject" */
    color: white !important;
}
body .poltrada-press-frontend-container .poltrada-press-submissions-table .action-buttons .button.button-delete {
    background-color: #dc3545 !important; /* Abu-abu untuk "Delete" */
    color: white !important;
}

/* Efek Hover dengan prioritas tinggi */
body .poltrada-press-frontend-container .poltrada-press-submissions-table .action-buttons .button:hover,
body .poltrada-press-frontend-container .poltrada-press-submissions-table td > a.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
    filter: brightness(1.1);
}

/* ======================================================= */
/* CSS FINAL UNTUK Lonceng Notifikasi (Dipindahkan ke Bar) */
/* ======================================================= */

/* Grouping tombol export dan lonceng */
.poltrada-filter-bar .export-and-notifier-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

#poltrada-notifier,
#poltrada-order-notifier{
    /* Menjadikannya seperti tombol */
    position: relative; /* Penting untuk posisi badge */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* Menggunakan gaya tombol yang sudah ada */
    background-color: #f0f0f1 !important; /* Contoh warna abu-abu */
    color: #50575e !important;
    border: 1px solid #dcdcde !important;
    padding: 8px 12px !important; /* Padding disesuaikan */
    min-width: unset !important; /* Hilangkan min-width jika ada dari .button */
    width: auto !important;
}

#poltrada-notifier:hover 
#poltrada-order-notifier:hover{
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
    filter: brightness(1.05);
}

#poltrada-notifier:hover .poltrada-notifier-bell,
#poltrada-order-notifier:hover .poltrada-notifier-bell {
    transform: translateY(-2px); /* Efek mengangkat hanya pada ikon lonceng */
}

.poltrada-notifier-bell {
    font-size: 18px; /* Mengurangi ukuran 25% dari 24px */
    line-height: 1; /* Penting untuk vertikal align */
     transition: transform 0.2s ease-in-out;
    margin: 0;
    padding: 0;
}


.poltrada-notifier-count {
    position: absolute;
    top: -5px; /* Sesuaikan posisi badge */
    right: -5px; /* Sesuaikan posisi badge */
    background-color: #d63638;
    color: white;
    font-size: 10px; /* Ukuran font badge lebih kecil */
    font-weight: bold;
    width: 20px; /* Ukuran badge lebih kecil */
    height: 20px; /* Ukuran badge lebih kecil */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid white; /* Border lebih tipis */
    line-height: 1; /* Pastikan angka di tengah */
}

/* Dropdown Notifikasi */
.poltrada-notifications-list-wrapper {
    display: none;
    position: absolute;
    top: 100%; 
    right: 0;
    margin-top: 10px;
    width: 380px;
    max-height: 400px;
    overflow-y: auto;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
    border: 1px solid #ddd;
    /* Nilai z-index yang sangat tinggi untuk memastikan selalu di atas */
    z-index: 999999 !important; 
}

.poltrada-notifications-header {
    padding: 12px 18px;
    font-weight: bold;
    font-size: 15px;
    color: #333;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 1;
}

.poltrada-notification-item {
    display: flex;
    align-items: flex-start; /* Align item ke atas */
    gap: 15px;
    padding: 12px 18px;
    border-bottom: 1px solid #f5f5f5;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s;
}

.poltrada-notification-item:hover {
    background-color: #f9f9f9;
}

.poltrada-notification-item:last-child {
    border-bottom: none;
}

.poltrada-notification-icon {
    font-size: 22px; /* Ukuran ikon notifikasi */
    flex-shrink: 0; /* Pastikan ikon tidak menyusut */
}

.poltrada-notification-content {
    flex-grow: 1;
}

.poltrada-notification-title {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 4px;
    color: #333;
}

.poltrada-notification-detail {
    font-size: 13px;
    color: #555;
    line-height: 1.5;
}

.poltrada-notification-time {
    font-size: 11px;
    color: #999;
    margin-top: 5px;
}

.poltrada-notifications-placeholder {
    padding: 20px;
    text-align: center;
    color: #888;
}

/* Styling untuk tombol dengan ikon */
.poltrada-button-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 6px; /* Jarak antara ikon dan teks */
}

.poltrada-button-with-icon .dashicons {
    line-height: 1; /* Memastikan ikon sejajar sempurna dengan teks */
}

/* ============================================= */
/* CSS: Menambahkan Ikon pada Kolom Search       */
/* ============================================= */

/* 1. Buat wadah untuk ikon */
.poltrada-filter-bar .search-box {
    position: relative;
}

/* 2. Buat dan posisikan ikon search menggunakan Dashicons */
.poltrada-filter-bar .search-box::before {
    content: "\f179"; /* Kode untuk ikon search WordPress */
    font-family: "dashicons";
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    z-index: 2;
    color: #888;
    font-size: 18px;
}

/* 3. Beri jarak di dalam kolom input agar teks tidak menimpa ikon */
.poltrada-filter-bar .search-box input[type="search"] {
    padding-left: 35px !important;
}


/* ============================================= */
/* FIX: Tampilan Tombol Saat Status Processing   */
/* ============================================= */
body .poltrada-press-frontend-container .poltrada-press-submissions-table .action-buttons .button:disabled,
body .poltrada-press-frontend-container .poltrada-press-submissions-table td > a.button:disabled {
    white-space: nowrap; /* Mencegah teks turun baris */
    justify-content: center; /* Memastikan spinner dan teks di tengah */
    text-align: center;
}

/* ============================================= */
/* GAYA BARU UNTUK KATALOG BUKU (RESPONSIF & MENARIK) */
/* ============================================= */
.poltrada-katalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.katalog-buku-item {
    text-align: left;
    transition: transform 0.3s, box-shadow 0.3s;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    overflow: hidden; /* Tambahkan ini agar border-radius berfungsi baik dengan child elements */
}

.katalog-buku-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.12);
}

.katalog-buku-item a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.katalog-buku-thumbnail {
    position: relative; /* Penting untuk overlay */
    background-color: #f0f0f1;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    overflow: hidden;
    aspect-ratio: 2 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.katalog-buku-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.katalog-buku-item:hover .katalog-buku-thumbnail img {
    transform: scale(1.05); /* Efek zoom pada gambar saat hover */
}

/* Overlay yang muncul saat hover */
.katalog-buku-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(44, 62, 80, 0.6); /* Warna overlay gelap transparan */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.katalog-buku-overlay .dashicons {
    color: white;
    font-size: 40px;
}

.katalog-buku-item:hover .katalog-buku-overlay {
    opacity: 1;
}

/* KODE DIUBAH: Penyesuaian tinggi judul agar pemotongan teks sempurna */
.katalog-buku-title {
    font-size: 1.1em;
    font-weight: 700;
    color: #2c3e50;
    
    /* Atur jarak baris yang lebih eksplisit */
    line-height: 1.5; 
    
    /* Kunci 1: Tinggi elemen disesuaikan (1.5 line-height * 3 baris = 4.5em) */
    height: 4.5em; 
    
    margin: 0 0 8px 0;
    
    /* Kunci 2: Tampilkan elipsis (...) jika teks lebih dari 3 baris */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.katalog-buku-title a {
    color: inherit; /* Pastikan link mewarisi warna dari h3 */
    text-decoration: none;
}

.katalog-buku-author {
    font-size: 0.9em;
    color: #764ba2;
    background-color: rgba(118, 75, 162, 0.08);
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0; /* Hapus semua margin */
    
    /* Ganti padding yang tidak konsisten dengan satu nilai */
    padding: 8px 15px;
    border-radius: 4px; /* Tambahan kecil agar lebih manis */
}

/* Pagination tetap sama */
.poltrada-katalog-pagination {
    margin-top: 40px;
    text-align: center;
}
/* ... (aturan pagination tetap sama) ... */

/* Media Query untuk Mobile */
@media (max-width: 540px) {
    .poltrada-katalog-grid {
        /* Tampilkan 2 kolom di mobile */
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    .katalog-buku-title {
        font-size: 1em;
    }
}

/* ============================================= */
/* GAYA UNTUK HALAMAN DETAIL BUKU                */
/* ============================================= */

/* KODE DIUBAH: Beri padding yang konsisten pada kontainer info utama */
.katalog-buku-info {
    /* Padding 15px atas-bawah, dan 15px kiri-kanan */
    padding: 10px; 
}
.poltrada-buku-detail {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    margin-top: 20px;
}

.buku-detail-sampul img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.buku-detail-judul {
    font-size: 2.5em;
    font-weight: 700;
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 5px;
}

.buku-detail-penulis {
    font-size: 1.2em;
    font-style: italic;
    color: #764ba2;
    margin-top: 0;
    margin-bottom: 25px;
}

.buku-detail-meta {
    margin-bottom: 25px;
    padding: 15px;
    background: #f8f9fa;
    border-left: 3px solid #667eea;
    border-radius: 4px;
}

.buku-detail-meta .meta-item {
    display: block;
    margin-bottom: 8px;
    font-size: 0.95em;
    color: #495057;
}

.buku-detail-sinopsis h3 {
    font-size: 1.4em;
    color: #333;
    border-bottom: 2px solid #f0f0f1;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.buku-detail-sinopsis p {
    line-height: 1.7;
    color: #555;
    text-align: justify;
}

.buku-detail-button {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 25px;
    background-color: #28a745;
    color: white !important;
    text-decoration: none;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
}

.buku-detail-button:hover {
    background-color: #218838;
    transform: translateY(-2px);
}

/* Responsivitas Halaman Detail */
@media (max-width: 768px) {
    .poltrada-buku-detail {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .buku-detail-judul {
        font-size: 2em;
    }
}

/* Gaya untuk Icon Love (Favorit) */
.katalog-buku-love {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff; /* Warna default ikon */
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease-in-out;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3); /* Tambah bayangan agar lebih menonjol */
}

/* Efek saat hover pada ikon love */
.katalog-buku-love:hover {
    color: #e74c3c; /* Merah terang saat di-hover */
    transform: scale(1.2);
}

/* Gaya untuk ikon yang SUDAH di-love */
.katalog-buku-love.is-loved {
    color: #e00a3c; /* Warna merah */
}

/* Gaya saat ikon sedang diproses (loading) */
.katalog-buku-love.processing {
    opacity: 0.5;
    cursor: wait;
}

/* Status untuk buku yang tidak dipublikasikan */
.status-unpublished {
    color: #6c757d; /* Abu-abu */
    font-weight: 600;
}

/* Gaya untuk status 'terpublikasi' (Centang Hijau) */
.progress-step.success .step-marker {
    background: #28a745; /* Warna hijau */
    border-color: #28a745;
}

/* Gaya untuk status 'ditarik' (Silang Merah) di progress bar */
.progress-step.withdrawn .step-marker {
    background: #dc3545; /* Warna merah */
    border-color: #dc3545;
}

.progress-step.withdrawn .step-marker .step-icon {
    color: white; /* Ikon silang menjadi putih */
    font-size: 22px; /* Sesuaikan ukuran ikon jika perlu */
}


/* ======================================================= */
/* FIX: Tombol di Tabel Manajemen Katalog                */
/* ======================================================= */

/* Mengatur agar tombol tersusun vertikal dan rapi */
body .poltrada-press-frontend-container .action-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* Membuat semua tombol memiliki lebar yang sama */
body .poltrada-press-frontend-container .action-buttons .button {
    width: 100% !important;
    white-space: normal;
    line-height: 1.4 !important;
    height: auto !important;
    padding: 8px !important;
    justify-content: center;
    text-align: center;
}

/* Atur lebar kolom 'Actions' agar tombol tidak terpotong */
body .poltrada-press-frontend-container .poltrada-press-submissions-table .column-actions {
    width: 280px !important; /* Lebar diperbesar */
}

/* --- ATURAN WARNA BARU --- */

/* Tombol "Tarik (Unpublish)" -> Latar putih, teks merah */
.action-buttons .button-toggle-book-status[data-action="unpublish"] {
    background-color: #efbbbb !important;
    color: #dc3545 !important;
    border: 1px solid #dc3545 !important;
}

/* Tombol "Terbitkan Ulang" -> Latar hijau */
.action-buttons .button-toggle-book-status[data-action="publish"] {
    background-color: #28a745 !important;
    color: white !important;
    border: 1px solid transparent !important;
}

/* Tombol "Edit" -> Biru */
.action-buttons a.button-edit {
    background-color: #3498db !important;
    color: white !important;
    border: 1px solid transparent !important;
    /* Samakan gaya dengan tombol lain */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    text-decoration: none;
}

/* ======================================================= */
/* FIX: Membuat Tabel Manajemen Katalog Full-Width       */
/* ======================================================= */

/*
   Aturan ini menargetkan container utama dari shortcode
   dan memastikannya tidak dibatasi oleh lebar default tema.
*/
.poltrada-press-frontend-container {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Ini memastikan tabel di dalamnya juga mengisi container tersebut.
   Aturan ini mungkin sudah ada, tapi kita pastikan lagi.
*/
.poltrada-press-frontend-container .poltrada-press-table-container .poltrada-press-submissions-table {
    width: 100%;
}

/* ============================================= */
/* PENYESUAIAN: Ukuran Font Tombol Aksi Katalog  */
/* ============================================= */

/* Targetkan semua tombol di dalam kolom 'Actions' pada tabel */
body .poltrada-press-frontend-container .poltrada-press-submissions-table .column-actions .button {
    font-size: 11px !important;      /* Ukuran font diperkecil */
    padding: 6px 10px !important;    /* Padding disesuaikan agar proporsional */
    font-weight: 700 !important;     /* Teks sedikit lebih tebal */
    letter-spacing: 0.5px;           /* Jarak antar huruf */
}

/* ============================================= */
/* GAYA UNTUK VIEW COUNTER BUKU                  */
/* ============================================= */

.katalog-buku-view-count {
    position: absolute; /* Kunci untuk memposisikan elemen */
    top: 10px;          /* Jarak 10px dari atas */
    left: 10px;         /* Jarak 10px dari kiri */
    z-index: 5;         /* Pastikan tampil di atas gambar */
    
    background-color: rgba(0, 0, 0, 0.6); /* Latar belakang hitam transparan */
    color: white;                     /* Teks warna putih */
    padding: 4px 8px;                 /* Ruang di dalam counter */
    border-radius: 4px;               /* Sudut sedikit melengkung */
    font-size: 12px;                  /* Ukuran font kecil */
    font-weight: 600;                 /* Teks sedikit tebal */
    
    /* Menyelaraskan ikon dan teks */
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ============================================= */
/* GAYA UNTUK TOMBOL RELEASE (WARNA TOSCA)       */
/* ============================================= */

.action-buttons .button-release,
.poltrada-press-actions .button-release {
    background-color: #20c997 !important; /* Warna Tosca / Teal */
    color: white !important;
    border-color: #1aa9ab !important;
    text-decoration: none; /* Pastikan tidak ada garis bawah */
    justify-content: center;
}

.action-buttons .button-release:hover,
.poltrada-press-actions .button-release:hover {
    background-color: #41b6b2 !important; /* Warna saat hover */
}

/* ============================================= */
/* GAYA UNTUK JUDUL & KONTAINER KATALOG (STYLISH) */
/* ============================================= */

.poltrada-katalog-container {
    background-color: #ffffff; /* Latar belakang putih solid */
    border-radius: 16px;       /* Sudut yang lebih melengkung */
    padding: 40px;             /* Ruang di dalam kontainer lebih besar */
    margin-top: 40px;
    margin-bottom: 40px;

    /* Efek bayangan (shadow) yang menarik dan lembut */
    box-shadow: 0 8px 32px rgba(118, 75, 162, 0.15); 
    
    /* Transisi halus untuk efek interaktif (opsional) */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efek saat mouse diarahkan ke kontainer (opsional) */
.poltrada-katalog-container:hover {
    transform: translateY(-5px); /* Sedikit terangkat ke atas */
    box-shadow: 0 12px 40px rgba(118, 75, 162, 0.2); /* Bayangan lebih jelas */
}

.poltrada-katalog-title {
    text-align: center;
    font-size: 2.5em;
    font-weight: 700;
    color: #764ba2;
    margin-top: 0; /* Hapus margin atas karena sudah ada padding dari kontainer */
    margin-bottom: 40px; /* Jarak lebih besar ke grid buku */
    padding-bottom: 0;   /* Hapus padding bawah */
    border-bottom: none; /* Hapus garis bawah, karena sudah digantikan oleh box */
}

/* ============================================= */
/* GAYA UNTUK RATING BINTANG                     */
/* ============================================= */

.katalog-buku-rating {
    margin: 0 0 8px 0;
}

.katalog-buku-rating .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Warna untuk bintang yang terisi */
.katalog-buku-rating .dashicons-star-filled {
    color: #ffb900; /* Warna kuning emas */
}

/* Warna untuk bintang yang kosong */
.katalog-buku-rating .dashicons-star-empty {
    color: #ddd; /* Warna abu-abu terang */
}


/* ============================================= */
/* GAYA UNTUK HARGA & DISKON BUKU                */
/* ============================================= */

.katalog-buku-harga {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px; /* Jarak antar elemen harga */
}

.harga-jual {
    font-size: 0.9em; /* DIUBAH: Ukuran font diperkecil dari 1.2em */
    font-weight: 600;
    color: #2c3e50;
}

.diskon-badge {
    background-color: #fce8e8;
    color: #c53832;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75em; /* DIUBAH: Ukuran font diperkecil dari 0.8em */
    font-weight: 600;
}

.harga-asli-coret {
    color: #b0b0b0;
    text-decoration: line-through;
    font-size: 0.85em; /* DIUBAH: Ukuran font diperkecil dari 0.9em */
}

.gratis-badge {
    color: #28a745;
    font-weight: 600;
    font-size: 0.85em; /* DIUBAH: Ukuran font diperkecil dari 0.9em */
}

/* ============================================= */
/* GAYA UNTUK KARTU NOTIFIKASI PRATINJAU         */
/* ============================================= */

.preview-notice-card {
    display: flex;
    align-items: center;
    gap: 15px; /* Jarak antara ikon dan teks */
    background-color: #fffbeb; /* Kuning muda */
    color: #92400e; /* Coklat/Oranye tua */
    border: 1px solid #fde68a; /* Border kuning */
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 20px; /* Jarak ke viewer PDF di bawahnya */
}

.preview-notice-card .dashicons {
    font-size: 28px;
    height: 28px;
    width: 28px;
}

.preview-notice-card p {
    margin: 0;
    font-size: 1.25em;
    font-weight: 500;
}

.preview-notice-card p strong {
    font-weight: 700;
}

/* ============================================= */
/* GAYA UNTUK SEARCH BAR KATALOG                 */
/* ============================================= */

.katalog-search-bar {
    background-color: #ffffff;
    border-radius: 12px; /* Sudut rounded */
    padding: 10px; /* Ruang di dalam bar */
    margin-bottom: 30px; /* Jarak ke kontainer buku */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* Efek shadow seperti kontainer */
    display: flex;
    justify-content: flex-end; /* Mendorong form ke kanan */
}

.katalog-search-form {
    position: relative;
    width: 100%;
    max-width: 350px; /* Batasi lebar kolom pencarian */
}

.katalog-search-field {
    width: 100%;
    border-radius: 8px !important; /* Sudut rounded untuk input */
    border: 1px solid #ddd !important;
    padding: 10px 40px 10px 15px !important; /* Padding untuk ruang ikon */
    font-size: 14px !important;
    height: auto !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color 0.2s;
}

.katalog-search-field:focus {
    border-color: #764ba2 !important; /* Warna ungu saat aktif */
}

.katalog-search-submit {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    background: transparent !important;
    border: none !important;
    color: #888 !important;
    cursor: pointer;
    padding: 8px !important;
    box-shadow: none !important;
}

.katalog-search-submit .dashicons {
    font-size: 20px;
}

/* Styling untuk pesan jika tidak ada hasil */
.katalog-no-results {
    text-align: center;
    padding: 50px 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

/* ============================================= */
/* GAYA UNTUK KARTU KATEGORI TERLARIS (REVISI FINAL) */
/* ============================================= */

.kategori-terlaris-section {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: 0 8px 32px rgba(118, 75, 162, 0.1);
}

.kategori-section-title {
    font-size: 1.5em;
    font-weight: 600;
    color: #333;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
}

.kategori-grid {
    display: flex; /* DIUBAH: Menggunakan Flexbox untuk baris tunggal */
    justify-content: center; /* Memastikan item berada di tengah jika sedikit */
    gap: 20px;
    overflow-x: auto; /* Izinkan scroll horizontal jika item lebih banyak */
    padding-bottom: 15px; /* Beri sedikit ruang di bawah untuk shadow */
    -ms-overflow-style: none;  /* Sembunyikan scrollbar di IE dan Edge */
    scrollbar-width: none;  /* Sembunyikan scrollbar di Firefox */
}

/* Sembunyikan scrollbar di Chrome, Safari, dan Opera */
.kategori-grid::-webkit-scrollbar {
    display: none;
}

.kategori-item {
    display: block;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 10; /* Sedikit lebih tinggi agar tidak terlalu lebar */
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    
    /* KUNCI PERUBAHAN: Atur ukuran kartu agar tidak merenggang */
    width: 200px; /* Atur lebar tetap (sekitar 1/5 dari lebar kontainer umum) */
    flex-shrink: 0; /* Mencegah kartu menyusut */
}

.kategori-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* ... sisa kode untuk .kategori-background, .kategori-overlay, dan .kategori-title tetap sama ... */
.kategori-background {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.kategori-background img {
    position: absolute; width: 50%; height: auto; opacity: 0.5; box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.kategori-background .cover-1 {
    top: -10%; left: -5%; transform: rotate(-20deg);
}
.kategori-background .cover-2 {
    top: 5%; right: -10%; transform: rotate(15deg);
}
.kategori-background .cover-3 {
    bottom: -15%; left: 20%; transform: rotate(5deg); z-index: 2; opacity: 0.7;
}
.kategori-background .cover-4 {
    bottom: 5%; right: 15%; transform: rotate(-10deg);
}
.kategori-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0.6) 100%);
    z-index: 3;
}
.kategori-title {
    position: absolute; bottom: 15px; left: 15px; right: 15px; color: white;
    font-size: 1.1em; font-weight: 700; text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
    z-index: 4; text-align: center;
}

/* ============================================= */
/* GAYA UNTUK SEARCH BAR KATALOG (DENGAN IKON X) */
/* ============================================= */

.katalog-search-bar {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    display: flex;
    justify-content: flex-end;
}

.katalog-search-form {
    position: relative; /* Penting untuk posisi ikon */
    width: 100%;
    max-width: 350px;
    display: flex;
    align-items: center;
}

.katalog-search-field {
    width: 100%;
    border-radius: 8px !important;
    border: 1px solid #ddd !important;
    /* Padding Kiri untuk ikon search, Padding Kanan untuk ikon X */
    padding: 10px 40px 10px 40px !important; 
    font-size: 14px !important;
    height: auto !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color 0.2s;
}

.katalog-search-field:focus {
    border-color: #764ba2 !important;
}

/* Gaya untuk ikon search di sebelah kiri */
.katalog-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    pointer-events: none; /* Agar tidak bisa diklik */
}

/* Gaya untuk ikon 'X' (clear) di sebelah kanan */
.katalog-search-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    cursor: pointer;
    transition: color 0.2s;
}

.katalog-search-clear:hover {
    color: #333;
}

.buku-detail-actions {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Jarak antar tombol */
}

.buku-detail-button.button-buy {
    background-color: #0073aa; /* Warna biru untuk tombol beli */
}

.buku-detail-button.button-buy:hover {
    background-color: #005a87;
}

/* Gaya untuk Tombol Selesaikan Pesanan */
.action-buttons .button-complete-order {
    background-color: #28a745 !important;
    color: white !important;
    border-color: #28a745 !important;
}

.action-buttons .button-complete-order:hover {
    background-color: #218838 !important;
    border-color: #1e7e34 !important;
}

/* ============================================= */
/* GAYA UNTUK LOVE COUNTER BUKU                  */
/* ============================================= */


.katalog-buku-love-wrapper {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.katalog-buku-love-wrapper:hover {
    background-color: #e00a3c;
}

.katalog-buku-love-wrapper .katalog-buku-love {
    font-size: 16px;
    position: static;
    text-shadow: none;
    color: white; /* Pastikan warna defaultnya putih */
    transition: color 0.2s ease-in-out;
}

/* KUNCI PERBAIKAN: Aturan ini sekarang akan membuat ikon menjadi merah terang */
.katalog-buku-love-wrapper .katalog-buku-love.is-loved {
    color: #e00a3c !important; /* Warna merah terang yang seharusnya */
}