* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    color: #222;
    background: #fff;
    line-height: 1.6;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}


/* NAVBAR */

.navbar {
    background: #ffffff;
    border-bottom: 1px solid #eeeeee;
    padding: 18px 0;
}

.navbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 22px;
    font-weight: bold;
    text-decoration: none;
    color: #e30613;
}

.navbar nav {
    display: flex;
    gap: 25px;
}

.navbar nav a {
    text-decoration: none;
    color: #333;
}

.navbar nav a:hover {
    color: #e30613;
}


/* HERO */

.hero {
    padding: 80px 0;
    background: #f7f7f7;
}

.hero h1 {
    font-size: 42px;
    margin-bottom: 15px;
}

.hero p {
    font-size: 18px;
    color: #666;
}


/* SECTION */

.section {
    padding-top: 60px;
    padding-bottom: 60px;
}

.section h2 {
    margin-bottom: 30px;
}

.section {
    padding-top: 60px;
    padding-bottom: 60px;
    height: auto;
    overflow: visible;
}

/* MOTOR CARD */

.motor-card {
    border: 1px solid #eeeeee;
    border-radius: 10px;
    padding: 25px;
    max-width: 400px;
}

.motor-card h3 {
    margin-bottom: 10px;
}

.motor-card p {
    color: #666;
    margin-bottom: 20px;
}


/* BUTTON */

.btn {
    display: inline-block;
    padding: 10px 20px;
    background: #e30613;
    color: #ffffff;
    text-decoration: none;
    border-radius: 6px;
}


/* FOOTER */

.footer {
    margin-top: 60px;
    padding: 30px 0;
    background: #222;
    color: #ffffff;
}

.footer p {
    margin-bottom: 5px;
}

/* HERO BUTTONS */

.hero-buttons {
    margin-top: 30px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.btn-secondary {
    background: #333;
}


/* FEATURES */

.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.feature-card {
    border: 1px solid #eeeeee;
    border-radius: 10px;
    padding: 25px;
}

.feature-card h3 {
    margin-bottom: 10px;
}

.feature-card p {
    color: #666;
}


/* CTA */

.cta {
    padding: 70px 0;
    background: #f7f7f7;
    text-align: center;
}

.cta h2 {
    margin-bottom: 15px;
}

.cta p {
    color: #666;
    margin-bottom: 25px;
}

@media (max-width: 768px) {

    .navbar-content {
        flex-direction: column;
        gap: 15px;
    }

    .navbar nav {
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero {
        padding: 50px 0;
    }

    .hero h1 {
        font-size: 32px;
    }

    .features {
        grid-template-columns: 1fr;
    }

}

.category-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.category-card {
    display: block;
    padding: 25px;
    border: 1px solid #eeeeee;
    border-radius: 10px;
    text-decoration: none;
    color: #222;
    transition: 0.2s;
}

.category-card:hover {
    transform: translateY(-3px);
}

.category-card h3 {
    margin-bottom: 10px;
}

.category-card p {
    color: #666;
    font-size: 14px;
}


@media (max-width: 768px) {

    .category-list {
        grid-template-columns: 1fr;
    }

}

/* PRODUCT GRID */

.motor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


.product-card {
    border: 1px solid #eeeeee;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}


/* FOTO MOTOR */

.product-image {

    height: 220px;
    background: #f5f5f5;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    color: #999;

}


.product-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}



/* ISI CARD */

.product-content {

    padding: 20px;

}


.product-content h3 {

    margin-bottom: 10px;

}


.product-description {

    color: #666;

    font-size: 14px;

    min-height: 65px;

    overflow: hidden;

}


.product-price {

    font-size: 20px;

    font-weight: bold;

    margin: 15px 0;

}



/* BUTTON DETAIL */

.btn {

    display: inline-block;

    padding: 10px 20px;

    background: #e30613;

    color: white;

    border-radius: 8px;

    text-decoration: none;

}


/* RESPONSIVE */

@media (max-width: 900px) {

    .motor-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 600px) {

    .motor-grid {
         display: grid;
        grid-template-columns: 1fr;
        gap: 25px;
        height: auto;
    }

}

.category-card.active {
    border: 2px solid #e30613;
}

.motor-detail{

    display:flex;
    gap:40px;
    margin-top:40px;

}



.motor-detail-image{

    width:50%;

}



.motor-detail-image img{

    width:100%;
    border-radius:20px;

}



.motor-detail-info{

    width:50%;

}



.motor-detail-info h1{

    font-size:36px;

}



.btn-whatsapp{

    display:inline-block;
    background:#25D366;
    color:white;
    padding:12px 25px;
    border-radius:10px;
    text-decoration:none;
    margin-top:20px;

}



.no-image{

    height:350px;
    background:#eee;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:20px;

}

.motor-gallery {

    display:flex;
    gap:10px;
    margin-top:15px;

}


.motor-gallery img {

    width:80px;
    height:80px;

    object-fit:cover;

    border-radius:8px;

    cursor:pointer;

}



.main-image {

    width:100%;

    max-height:450px;

    object-fit:contain;

}

.motor-gallery {

    display:flex;
    gap:10px;
    margin-top:20px;

}


.motor-gallery img {

    width:90px;
    height:70px;

    object-fit:cover;

    border-radius:8px;

    border:1px solid #ddd;

}


.motor-gallery img:hover {

    border:2px solid #e30613;

}

.admin-card {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    margin:30px 0;

}



.admin-card div {

    background:white;

    border:1px solid #eee;

    padding:25px;

    border-radius:15px;

    text-align:center;

}



.admin-card h2 {

    font-size:35px;

    color:#e30613;

}



.admin-menu {

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

/* ADMIN DASHBOARD */


.admin-wrapper{

display:flex;

min-height:100vh;

background:#f5f5f5;

}


/* =====================
   MODERN ADMIN SIDEBAR
===================== */


.sidebar {

    width:270px;

    min-height:100vh;

    background:

    linear-gradient(
        180deg,
        #cbd900,
        #a80000
    );


    color:white;

    padding:25px 20px;

    display:flex;

    flex-direction:column;

}





.sidebar-brand {

    display:flex;

    align-items:center;

    gap:15px;

    padding-bottom:25px;

    border-bottom:1px solid rgba(255,255,255,.2);

}



.brand-logo {


    width:45px;

    height:45px;

    background:white;

    color:#d90000;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:25px;


}



.sidebar-brand h2 {

    margin:0;

    font-size:22px;

}



.sidebar-brand small {

    opacity:.8;

}





/* ADMIN PROFILE */


.admin-profile {


    display:flex;

    gap:12px;

    align-items:center;

    background:rgba(255,255,255,.15);

    padding:15px;

    border-radius:15px;

    margin:25px 0;


}




.profile-icon {


    width:40px;

    height:40px;

    background:white;

    color:#d90000;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;


}




.admin-profile strong {

    display:block;

}



.admin-profile span {

    font-size:12px;

    opacity:.8;

}






/* MENU */


.sidebar-menu {


    display:flex;

    flex-direction:column;

    gap:8px;

}




.sidebar-menu a {


    color:white;

    text-decoration:none;

    padding:14px 15px;

    border-radius:12px;

    display:flex;

    align-items:center;

    gap:12px;

    transition:.3s;


}



.sidebar-menu a:hover {


    background:white;

    color:#d5d900;

    transform:translateX(5px);


}



.sidebar-menu a.active {


    background:white;

    color:#d9b100;

    font-weight:bold;


}







.sidebar-footer {


    margin-top:auto;

    padding-top:25px;


}



.sidebar-footer a {


    color:white;

    text-decoration:none;

    display:block;

    padding:15px;

    background:rgba(0,0,0,.15);

    border-radius:12px;

}





.admin-content{

flex:1;

padding:40px;

}




.admin-header{

background:white;

padding:30px;

border-radius:20px;

margin-bottom:30px;

}





.stat-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

}




.stat-card{

background:white;

padding:30px;

border-radius:20px;

box-shadow:0 5px 20px #ddd;

text-align:center;

}



.stat-card h2{

font-size:40px;

color:#d90000;

}





.menu-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

}



.menu-card{

background:white;

padding:25px;

border-radius:20px;

box-shadow:0 5px 20px #ddd;

}



.menu-card a{

display:inline-block;

margin-top:15px;

background:#d90000;

color:white;

padding:10px 20px;

border-radius:10px;

text-decoration:none;

}

/* ==========================
   PREMIUM ADMIN DASHBOARD
========================== */


.dashboard-header {


background:white;

padding:30px;

border-radius:20px;

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;


}



.dashboard-header h1 {

margin:0;

font-size:30px;

}



.dashboard-header p {

color:#777;

}



.admin-badge {


background:#d90000;

color:white;

padding:12px 20px;

border-radius:30px;

}





.dashboard-title {


margin:30px 0 20px;

}





.stat-grid {


display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;


}





.stat-card {


background:white;

padding:25px;

border-radius:20px;

display:flex;

align-items:center;

gap:20px;

box-shadow:0 10px 25px rgba(0,0,0,.08);

transition:.3s;


}



.stat-card:hover {


transform:translateY(-5px);


}



.stat-icon {


font-size:45px;

width:70px;

height:70px;

display:flex;

align-items:center;

justify-content:center;

border-radius:20px;


}



.stat-card h2 {


font-size:40px;

margin:0;


}




.stat-card.motor .stat-icon {


background:#ffe5e5;

}



.stat-card.category .stat-icon {


background:#fff4cc;

}



.stat-card.photo .stat-icon {


background:#dff5ff;

}





.menu-grid {


display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;


}





.menu-card {


background:white;

padding:30px;

border-radius:20px;

box-shadow:0 10px 25px rgba(0,0,0,.08);

transition:.3s;


}




.menu-card:hover {


transform:translateY(-5px);


}



.menu-icon {


font-size:40px;

margin-bottom:15px;


}



.menu-card a {


display:inline-block;

background:#d90000;

color:white;

padding:10px 20px;

border-radius:10px;

text-decoration:none;

margin-top:15px;


}

.table-card {

background:white;

padding:25px;

border-radius:20px;

box-shadow:0 10px 25px rgba(0,0,0,.08);

}



table {

width:100%;

border-collapse:collapse;

}



th {

text-align:left;

padding:15px;

background:#f5f5f5;

}



td {

padding:15px;

border-bottom:1px solid #eee;

}



.table-image {

width:80px;

height:60px;

object-fit:contain;

}



.btn-admin {

background:#d90000;

color:white;

padding:12px 20px;

border-radius:10px;

text-decoration:none;

}

/* =====================
 FORM ADMIN RESPONSIVE
===================== */


.form-card {


background:white;

padding:35px;

border-radius:20px;

max-width:900px;

box-shadow:0 10px 30px rgba(0,0,0,.08);


}



.form-header {


margin-bottom:30px;


}


.form-header h1 {


margin:0;

font-size:28px;


}



.form-header p {


color:#777;


}





.form-group {


margin-bottom:20px;


}



.form-group label {


display:block;

font-weight:bold;

margin-bottom:8px;


}




.form-group input,
.form-group select,
.form-group textarea {


width:100%;

padding:14px;

border:1px solid #ddd;

border-radius:12px;

font-size:15px;

box-sizing:border-box;


}





.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {


border-color:#d90000;

outline:none;


}





.btn-save {


background:#d90000;

color:white;

border:none;

padding:14px 30px;

border-radius:12px;

font-weight:bold;

cursor:pointer;


}



.btn-save:hover {


background:#b00000;


}




/* MOBILE */

@media(max-width:768px){


.form-card {


padding:20px;

margin:10px;


}


.form-header h1 {

font-size:22px;

}



}

.gallery-admin-grid{


display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;


}



.gallery-card{


background:white;

padding:25px;

border-radius:20px;

box-shadow:0 10px 25px rgba(0,0,0,.08);


}



.gallery-card input{


margin:15px 0;


}



@media(max-width:768px){


.gallery-admin-grid{

grid-template-columns:1fr;

}


}

/* SEARCH DATA MOTOR */


.search-box {


background:white;

padding:20px;

border-radius:15px;

margin-bottom:25px;

box-shadow:0 5px 15px rgba(0,0,0,.05);


}



.search-box form {


display:flex;

gap:15px;


}



.search-box input {


flex:1;

padding:14px;

border:1px solid #ddd;

border-radius:10px;

font-size:15px;


}



.search-box button {


background:#d90000;

color:white;

border:none;

padding:0 25px;

border-radius:10px;

cursor:pointer;


}





@media(max-width:768px){


.search-box form{

flex-direction:column;

}



.search-box button{

height:45px;

}


}

.gallery-grid{


display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;


}



.gallery-card{


background:white;

padding:25px;

border-radius:20px;

box-shadow:0 10px 25px rgba(0,0,0,.08);


}



.gallery-preview{


display:flex;

gap:10px;

flex-wrap:wrap;

margin:20px 0;


}



.image-box{


position:relative;


}



.image-box img{


width:90px;

height:70px;

object-fit:cover;

border-radius:10px;


}



.image-box a{


position:absolute;

top:-8px;

right:-8px;

background:red;

color:white;

width:22px;

height:22px;

border-radius:50%;

text-align:center;

text-decoration:none;


}




@media(max-width:768px){

.gallery-grid{

grid-template-columns:1fr;

}

}

.motor-slider{


display:flex;

gap:15px;

overflow-x:auto;

}



.motor-slider img{


width:180px;

height:140px;

object-fit:contain;

background:white;

border-radius:15px;

border:1px solid #eee;


}

/* ======================
   MODERN GALLERY ADMIN
====================== */


.gallery-admin-grid{


display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;


}





.gallery-card{


background:white;

border-radius:22px;

padding:25px;

box-shadow:
0 10px 30px rgba(0,0,0,.08);


transition:.3s;


}



.gallery-card:hover{


transform:translateY(-5px);


}





.gallery-title{


display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;


}



.gallery-title h3{


margin:0;

font-size:20px;


}




.gallery-title span{


background:#ffe5e5;

color:#d90000;

padding:6px 12px;

border-radius:20px;

font-size:12px;


}





.gallery-preview{


display:flex;

gap:12px;

flex-wrap:wrap;

min-height:100px;


}




.gallery-image{


position:relative;


}




.gallery-image img{


width:90px;

height:90px;

object-fit:cover;

border-radius:15px;

border:1px solid #eee;


}





.gallery-image a{


position:absolute;

right:-8px;

top:-8px;

background:#d90000;

color:white;

width:25px;

height:25px;

border-radius:50%;

text-align:center;

line-height:25px;

text-decoration:none;


}





.empty-gallery{


width:100%;

padding:35px;

background:#f5f5f5;

border-radius:15px;

text-align:center;

color:#999;


}





.upload-box{


display:block;

margin-top:20px;

padding:15px;

border:2px dashed #ddd;

border-radius:15px;

text-align:center;

cursor:pointer;

color:#d90000;

font-weight:bold;


}



.upload-box input{


display:none;


}





.btn-upload{


margin-top:15px;

width:100%;

background:#d90000;

color:white;

border:none;

padding:12px;

border-radius:12px;

font-weight:bold;

cursor:pointer;


}






@media(max-width:900px){


.gallery-admin-grid{

grid-template-columns:1fr;

}


}

/* SEARCH GALLERY */


.gallery-search{


background:white;

padding:20px;

border-radius:20px;

margin-bottom:25px;

box-shadow:
0 8px 20px rgba(0,0,0,.06);


}



.gallery-search form{


display:flex;

gap:15px;


}



.gallery-search input{


flex:1;

padding:14px;

border:1px solid #ddd;

border-radius:12px;

font-size:15px;


}



.gallery-search button{


background:#d90000;

color:white;

border:none;

padding:0 30px;

border-radius:12px;

font-weight:bold;

cursor:pointer;


}




@media(max-width:768px){


.gallery-search form{

flex-direction:column;

}


.gallery-search button{

height:45px;

}


}

/* SPECIFICATION MODERN */


.spec-search{

background:white;

padding:20px;

border-radius:18px;

margin-bottom:25px;

}



.spec-search input{

width:100%;

padding:15px;

border-radius:12px;

border:1px solid #ddd;

font-size:15px;

}





.spec-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

}





.spec-card{

background:white;

border-radius:22px;

padding:25px;

box-shadow:
0 8px 25px rgba(0,0,0,.08);

}





.spec-header{

border-bottom:1px solid #eee;

padding-bottom:15px;

margin-bottom:15px;

}



.spec-header h2{

margin:0;

font-size:20px;

}



.spec-header span{

font-size:13px;

color:#888;

}





.spec-row{

display:flex;

justify-content:space-between;

align-items:center;

padding:12px 0;

border-bottom:1px solid #eee;

font-size:14px;

}



.spec-row a{

color:#e00000;

text-decoration:none;

margin-left:15px;

}





.empty{

background:#f7f7f7;

padding:20px;

text-align:center;

border-radius:12px;

color:#999;

}





.add-spec-form{

margin-top:20px;

background:#fafafa;

padding:15px;

border-radius:15px;

}





.add-spec-form input{

width:100%;

padding:10px;

margin-bottom:10px;

border:1px solid #ddd;

border-radius:10px;

}





.add-spec-form button{

background:#d90000;

color:white;

border:none;

padding:10px 20px;

border-radius:10px;

cursor:pointer;

}





@media(max-width:1000px){


.spec-grid{

grid-template-columns:1fr;

}


}

.add-spec-form textarea{

width:100%;

height:90px;

padding:12px;

border-radius:10px;

border:1px solid #ddd;

font-family:inherit;

resize:none;

margin-bottom:10px;

}


.add-spec-form input{

width:100%;

box-sizing:border-box;

padding:12px;

margin-bottom:10px;

border-radius:10px;

border:1px solid #ddd;

}



.add-spec-form button{

width:100%;

background:#d90000;

color:white;

border:none;

padding:12px;

border-radius:10px;

cursor:pointer;

font-weight:bold;

}

.spec-description{

font-size:13px;

color:#777;

margin-top:5px;

line-height:1.5;

}

/* SPECIFICATION */

.spec-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

}



.spec-card{

background:white;

border-radius:20px;

padding:25px;

box-shadow:0 8px 25px rgba(0,0,0,.08);

}



.spec-header h2{

margin:0;

font-size:20px;

}


.spec-header span{

font-size:13px;

color:#888;

}



.spec-row{

display:flex;

gap:10px;

padding:12px 0;

border-bottom:1px solid #eee;

}



.spec-title{

width:35%;

}



.spec-detail{

width:55%;

}



.spec-value{

font-weight:bold;

}



.spec-description{

font-size:13px;

color:#777;

margin-top:5px;

line-height:1.5;

}



.delete-spec{

color:red;

text-decoration:none;

}



.add-title{

margin-top:20px;

font-weight:bold;

}



.add-spec-form input,
.add-spec-form textarea{

width:100%;

box-sizing:border-box;

margin-top:10px;

padding:12px;

border-radius:10px;

border:1px solid #ddd;

}



.add-spec-form textarea{

height:80px;

resize:none;

}



.add-spec-form button{

margin-top:10px;

background:#d90000;

color:white;

border:0;

padding:12px 20px;

border-radius:10px;

cursor:pointer;

}



.spec-search{

background:white;

padding:20px;

border-radius:15px;

margin-bottom:25px;

}



.spec-search input{

width:100%;

padding:14px;

border-radius:10px;

border:1px solid #ddd;

}




@media(max-width:1000px){


.spec-grid{

grid-template-columns:1fr;

}


}

.motor-gallery-detail{

width:50%;

}


.main-image{

width:100%;

height:450px;

object-fit:contain;

background:white;

border-radius:20px;

}



.thumbnail-list{

display:flex;

gap:10px;

margin-top:15px;

overflow-x:auto;

}



.thumbnail-list img{

width:90px;

height:70px;

object-fit:cover;

border-radius:10px;

cursor:pointer;

border:1px solid #ddd;

}




.price-box{

font-size:28px;

font-weight:bold;

color:#d90000;

margin:15px 0;

}




.motor-description{

color:#555;

line-height:1.7;

}




.spec-detail-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:15px;

}



.spec-detail-card{

background:#f8f8f8;

padding:20px;

border-radius:15px;

}



.spec-detail-card h4{

margin:0 0 10px;

color:#d90000;

}



.spec-detail-card p{

font-size:14px;

color:#666;

}





@media(max-width:768px){


.motor-detail{

display:block;

}


.motor-gallery-detail{

width:100%;

}


.spec-detail-grid{

grid-template-columns:1fr;

}


.main-image{

height:300px;

}


}

.credit-wrapper{
padding:40px;
}


.credit-header{
background:white;
padding:30px;
border-radius:20px;
margin-bottom:25px;
}


.credit-content{

display:grid;
grid-template-columns:1fr 1fr;
gap:30px;

}



.motor-credit-card,
.simulation-card{

background:white;
padding:30px;
border-radius:20px;
box-shadow:0 10px 30px #ddd;

}



.motor-credit-card img{

width:100%;
height:250px;
object-fit:contain;

}



.price{

font-size:28px;
font-weight:bold;
color:#d90000;

}



.simulation-card input,
.simulation-card select{

width:100%;
padding:12px;
margin-bottom:15px;
border-radius:10px;
border:1px solid #ddd;

}



.finance-info{

display:flex;
justify-content:space-between;
background:#f5f5f5;
padding:15px;
border-radius:10px;

}



.result-box{

margin-top:20px;
background:#d90000;
color:white;
padding:25px;
border-radius:15px;
text-align:center;

}



.result-box h1{

font-size:32px;

}



.simulation-card button,
.btn-whatsapp{

display:block;
width:100%;
padding:15px;
margin-top:15px;
border:none;
border-radius:10px;
background:#d90000;
color:white;
text-align:center;
text-decoration:none;

}



@media(max-width:768px){

.credit-content{

grid-template-columns:1fr;

}


}

.booking-container{

max-width:900px;
margin:auto;
padding:40px 20px;

}



.booking-header{

background:white;
padding:30px;
border-radius:20px;
margin-bottom:25px;
box-shadow:0 10px 30px rgba(0,0,0,.08);

}



.booking-card{

background:white;
padding:35px;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,.1);

}



.motor-selected{

background:#f7f7f7;
padding:20px;
border-radius:15px;
margin-bottom:30px;

}



.motor-selected h3{

color:#d90000;
font-size:28px;

}




.form-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:20px;

}



.form-group{

margin-bottom:20px;

}



.form-group label{

display:block;
font-weight:bold;
margin-bottom:8px;

}



.form-group input,
.form-group textarea,
.form-group select{

width:100%;
padding:14px;
border:1px solid #ddd;
border-radius:10px;
font-size:15px;

}



.form-group textarea{

height:120px;
resize:none;

}



.btn-submit{

width:100%;
padding:15px;
border:none;
border-radius:12px;
background:#d90000;
color:white;
font-size:16px;
font-weight:bold;
cursor:pointer;

}



.btn-submit:hover{

background:#b50000;

}



@media(max-width:768px){


.form-grid{

grid-template-columns:1fr;

}




}

.credit-card{

background:white;
padding:35px;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,.08);

}


.form-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:20px;

}


.form-group{

margin-bottom:20px;

}


.form-group label{

font-weight:bold;
display:block;
margin-bottom:8px;

}


.form-group input,
.form-group textarea{

width:100%;
padding:12px;
border:1px solid #ddd;
border-radius:10px;

}


.form-group textarea{

height:120px;

}


.btn-submit{

background:#d90000;
color:white;
border:none;
padding:14px 25px;
border-radius:10px;

}


@media(max-width:768px){

.form-grid{

grid-template-columns:1fr;

}

}

/* ===========================
   CREDIT SETTING ADMIN
=========================== */


.credit-card{

    background:#fff;
    padding:35px;
    border-radius:20px;
    box-shadow:0 8px 25px rgba(0,0,0,.08);

}



.credit-grid{

    display:grid !important;
    grid-template-columns:repeat(2, minmax(250px,1fr));
    gap:25px;
    width:100%;

}



.credit-card form > div{

    margin-bottom:20px;

}



.credit-card label{

    display:block;
    font-weight:600;
    margin-bottom:8px;
    color:#333;

}



.credit-card input,
.credit-card textarea,
.credit-card select{


    width:100% !important;
    box-sizing:border-box;

    padding:12px 15px;

    border-radius:10px;

    border:1px solid #ddd;

    font-size:14px;


}



.credit-card textarea{

    min-height:120px;
    resize:vertical;

}



.credit-card button{

    margin-top:20px;

    background:#d90000;

    color:white;

    border:none;

    padding:14px 30px;

    border-radius:12px;

    cursor:pointer;

    font-weight:bold;


}



.credit-card button:hover{

    background:#b80000;

}



@media(max-width:768px){


.credit-grid{

    grid-template-columns:1fr;

}


}

.credit-wrapper{
    max-width:1100px;
    margin:50px auto;
}


.credit-header{
    text-align:center;
    margin-bottom:30px;
}


.credit-header h1{
    font-size:32px;
    margin-bottom:10px;
}


.credit-header p{
    color:#666;
}

.booking-wrapper{
max-width:1100px;
margin:auto;
}


.booking-title{
margin-bottom:30px;
}


.booking-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:30px;

}



.booking-motor-card,
.booking-form-card{

background:white;
padding:30px;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,.08);

}



.booking-motor-card img{

width:100%;
height:280px;
object-fit:contain;

}



.booking-motor-card h3{

color:#e60000;
font-size:28px;

}



.booking-form-card input,
.booking-form-card textarea,
.booking-form-card select{

width:100%;
padding:12px;
margin-bottom:15px;
border:1px solid #ddd;
border-radius:10px;

}



.booking-form-card textarea{

height:100px;

}



.two-column{

display:grid;
grid-template-columns:1fr 1fr;
gap:15px;

}



.estimate{

background:#e60000;
color:white;
padding:20px;
border-radius:15px;
text-align:center;
margin:20px 0;

}



.estimate h2{

font-size:30px;

}



@media(max-width:768px){

.booking-grid{

grid-template-columns:1fr;

}

}



.booking-header{

display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;

}


.booking-header h2{

margin:0;
font-size:22px;

}


.booking-header span{

color:#666;

}



.booking-status{

background:#ffe58a;
padding:8px 15px;
border-radius:20px;
font-weight:bold;

}



.booking-info{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;

}



.booking-info div{

background:#f7f7f7;
padding:15px;
border-radius:12px;

}



.booking-info small{

display:block;
color:#777;

}



.booking-info strong{

font-size:15px;

}



.booking-action{

display:flex;
gap:10px;
margin-top:20px;

}



.btn-whatsapp{

background:#25D366;
color:white;
padding:12px 20px;
border-radius:10px;
text-decoration:none;

}



.btn-detail{

background:#eee;
padding:12px 20px;
border-radius:10px;
text-decoration:none;
color:#333;

}



@media(max-width:768px){

.booking-info{

grid-template-columns:1fr;

}

}

/* =============================
   BOOKING CUSTOMER DASHBOARD
============================= */





.booking-top{

display:flex;

justify-content:space-between;

align-items:center;

padding-bottom:20px;

border-bottom:1px solid #eee;

}





.customer-profile{

display:flex;

align-items:center;

gap:15px;

}



.customer-icon{

width:55px;

height:55px;

background:#e60000;

color:white;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:25px;

}



.customer-profile h2{

margin:0;

font-size:22px;

}



.customer-profile p{

margin:5px 0;

color:#777;

}




.status-badge{

background:#fff3cd;

color:#856404;

padding:8px 18px;

border-radius:20px;

font-weight:bold;

}





.booking-detail{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:15px;

margin-top:20px;

}





.detail-box{

background:#f8f9fa;

padding:18px;

border-radius:15px;

}



.detail-box span{

display:block;

font-size:13px;

color:#777;

margin-bottom:8px;

}



.detail-box strong{

font-size:16px;

}





.booking-footer{

display:flex;

gap:12px;

margin-top:25px;

}




.btn-wa{

background:#25D366;

color:white;

padding:12px 22px;

border-radius:12px;

text-decoration:none;

font-weight:bold;

}




.btn-detail{

background:#eee;

color:#333;

padding:12px 22px;

border-radius:12px;

text-decoration:none;

font-weight:bold;

}





@media(max-width:768px){


.booking-top{

flex-direction:column;

align-items:flex-start;

gap:15px;

}



.booking-detail{

grid-template-columns:1fr;

}



.booking-footer{

flex-direction:column;

}



}

.spec-header{

display:flex;

justify-content:space-between;

align-items:center;

}


.btn-import{

background:#e60012;

color:white;

border:none;

padding:10px 15px;

border-radius:10px;

cursor:pointer;

}



.import-modal{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.5);

z-index:9999;

}



.import-box{

background:white;

width:600px;

max-width:90%;

padding:30px;

border-radius:20px;

margin:100px auto;

}



.import-box textarea{

width:100%;

height:300px;

padding:15px;

border-radius:10px;

border:1px solid #ddd;

}



.import-box button{

margin-top:15px;

padding:12px 25px;

border:none;

background:#e60012;

color:white;

border-radius:10px;

cursor:pointer;

}