/* public/css/price-list.css */

/* =========================================
   1. DESAIN BANNER (PUBLIC)
========================================= */
.price-banner {
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    margin-top: 60px;
}

.price-banner h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 3.5rem; /* Judul Banner tetap besar */
    letter-spacing: 5px;
    text-transform: uppercase; /* Judul Banner tetap Kapital Semua */
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

/* =========================================
   2. DESAIN TABEL & JUDUL (PUBLIC)
========================================= */
/* Judul Halaman: Ukuran proporsional & tidak uppercase */
.section-title {
    font-size: 24px; 
    font-weight: 700;
    text-transform: none; 
    color: #222;
    margin-bottom: 5px;
}

.custom-table { 
    width: 100%; 
    border-collapse: collapse; 
    background: #f8f9fa; 
    border: none; 
    margin-bottom: 30px;
}

.custom-table th { 
    border-bottom: 2px solid #dee2e6; 
    padding: 20px 15px; 
    text-align: center; 
    color: #ffffff; 
    font-weight: 700; 
    text-transform: uppercase;
    font-size: 14px;
    background-color: #cb0c0c; /* Merah Mitsubishi */
}

.custom-table td { 
    padding: 15px; 
    vertical-align: middle; 
    border: none; 
}

.custom-table .model-name { 
    font-weight: 900 !important; 
    color: #000 !important; 
    text-transform: uppercase;
}

.custom-table .type-text {
    font-weight: 700 !important;
    color: #333 !important;
}

.price-tag {
    font-weight: 900;
    color: #000 !important;
    text-align: center;
}

.custom-table .static-cell { 
    background-color: #fafafa; 
    text-align: center; 
}

.custom-table .static-cell-last {
    background-color: #fafafa;
}

/* GARIS PEMISAH PER MODEL */
.model-group-separator {
    border-bottom: 3px solid #dee2e6;
}

/* Hover Effect */
.custom-table tbody tr:hover td.hover-target { 
    background-color: #a4acb5; 
    cursor: pointer; 
}

/* =========================================
   3. DESAIN TABEL ADMIN (BACKEND)
========================================= */
.admin-table { 
    width: 100%; 
    border-collapse: collapse;
    background: #fff; 
    border: none; 
}

.admin-table th { 
    border-bottom: 2px solid #dee2e6;
    padding: 15px; 
    text-align: center; 
    font-weight: bold; 
    text-transform: uppercase; 
}

.admin-table td { 
    border-bottom: 1px solid #f4f4f4;
    padding: 0; 
    vertical-align: middle; 
}