body {

    margin:0;

    font-family:'Inter', sans-serif;

    background:#0f1115;

    background-image:url("https://www.transparenttextures.com/patterns/carbon-fibre.png");

    color:#e5e5e5;

}



.service-book-home {


    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;


}



.service-book-card {


    max-width:600px;

    width:100%;

    text-align:center;


    background:rgba(26,29,37,0.75);

    backdrop-filter:blur(15px);


    padding:50px 40px;


    border-radius:25px;


    border:1px solid rgba(255,255,255,0.08);


    box-shadow:0 25px 60px rgba(0,0,0,0.5);


}



.service-book-logo {


    width:80px;

    height:80px;


    margin:0 auto 25px;


    display:flex;

    justify-content:center;

    align-items:center;


    font-size:40px;


    background:rgba(255,45,45,0.1);

    border-radius:50%;

    border:1px solid rgba(255,45,45,0.3);


}



.service-book-card h1 {


    font-family:'Playfair Display', serif;

    font-size:36px;

    margin-bottom:20px;


}



.service-book-card p {


    color:#bbb;

    line-height:1.7;

    margin-bottom:40px;


}




.vin-search {


    text-align:left;


}



.vin-search label {


    display:block;

    margin-bottom:10px;

    color:#ddd;

    font-size:14px;


}



.vin-input {


    display:flex;

    gap:15px;


}



.vin-input input {


    flex:1;

    padding:15px;


    background:#0d0f12;


    border:1px solid #333;


    border-radius:10px;


    color:white;


    font-size:15px;


}



.vin-input input:focus {


    outline:none;

    border-color:#ff2d2d;


}



.vin-input button {


    padding:15px 25px;


    background:linear-gradient(45deg,#ff2d2d,#ff6b00);


    border:none;


    color:white;


    font-weight:700;


    border-radius:10px;


    cursor:pointer;


}



@media(max-width:600px){


.service-book-card{

padding:35px 20px;

}


.service-book-card h1{

font-size:28px;

}


.vin-input{

flex-direction:column;

}


}




.vehicle-page {

    min-height:100vh;

    display:flex;

    justify-content:center;

    padding:50px 20px;


}



.vehicle-card {


    max-width:800px;

    width:100%;


    background:rgba(26,29,37,0.75);

    backdrop-filter:blur(15px);


    border-radius:25px;

    padding:40px;


    border:1px solid rgba(255,255,255,0.08);


}



.vehicle-card h1 {


    font-family:'Playfair Display',serif;

    color:white;

}



.vin {


    color:#ff2d2d;

}



.vehicle-info {


    display:grid;

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

    gap:20px;

    margin:40px 0;


}



.vehicle-info div {


    background:#1a1d25;

    padding:20px;

    border-radius:15px;


}



.vehicle-info span {


    display:block;

    color:#888;

    margin-bottom:8px;


}



.vehicle-info strong {


    color:white;

}





.service-item {


    background:#1a1d25;

    border-left:4px solid #ff2d2d;

    padding:25px;

    border-radius:15px;

    margin-top:20px;


}



.service-item h3 {


    margin-top:0;

}



.service-item li {


    color:#ccc;

    margin:8px 0;


}



@media(max-width:600px){


.vehicle-info{

grid-template-columns:1fr;

}


}


.vehicle-status {


display:flex;

gap:15px;

flex-wrap:wrap;

margin-top:25px;


}



.vehicle-status span {


background:rgba(255,45,45,0.1);

border:1px solid rgba(255,45,45,0.3);

padding:10px 15px;

border-radius:20px;

font-size:14px;


}




.last-service {


background:linear-gradient(
145deg,
#1a1d25,
#222730
);


padding:25px;

border-radius:18px;

margin:30px 0;


border-top:2px solid #ff2d2d;


}



.last-service h2 {


margin-top:0;

font-family:'Inter',sans-serif;

font-size:22px;


}



.last-service p {


color:#ff2d2d;

font-weight:600;


}


/* SERVICE BRAND */


.service-company {


display:flex;

align-items:center;

gap:20px;

background:#111;

padding:20px;

border-radius:18px;

margin-top:30px;


}



.service-logo {


width:60px;

height:60px;


display:flex;

align-items:center;

justify-content:center;


font-size:30px;


background:rgba(255,45,45,0.15);

border-radius:50%;


}



.service-company h3 {


margin:0;

color:white;


}



.service-company p {


margin:5px 0 0;

color:#999;


}






/* QR */


.qr-section {


display:flex;

align-items:center;

gap:25px;


background:#1a1d25;


padding:25px;


border-radius:20px;


margin-top:30px;


}



.qr-placeholder {


width:100px;

height:100px;


background:white;


color:#111;


display:flex;

justify-content:center;

align-items:center;


font-weight:800;


font-size:25px;


}




.qr-section h3 {
margin-top:0;
}




/* BUTTONS */


.actions {


display:flex;

gap:20px;

margin-top:40px;


}



.actions button {


flex:1;

padding:16px;


border:none;

border-radius:12px;


background:linear-gradient(45deg,#ff2d2d,#ff6b00);


color:white;


font-weight:700;

cursor:pointer;


}



.actions .secondary {


background:#1a1d25;

border:1px solid #333;


}



@media(max-width:600px){


.service-company,

.qr-section,

.actions{


flex-direction:column;

text-align:center;


}


}



.service-date {

color:#ff2d2d;

font-weight:700;

font-size:14px;

margin-bottom:10px;

}


.service-item h4 {

color:white;

margin-top:25px;

margin-bottom:10px;

font-size:16px;

}


.service-item strong {

color:white;

}



.service-note {


background:#111;

padding:15px;

border-radius:10px;

color:#bbb;

margin-top:20px;


}



.performed-by {


display:block;

margin-top:20px;

color:#888;

font-size:14px;


}


/* =========================
   LOGIN PAGE
========================= */


.login-section {

    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 120px 20px 50px;

}



.login-box {

    width: 100%;
    max-width: 420px;

    background: rgba(26, 29, 37, 0.75);

    backdrop-filter: blur(12px);

    border-radius: 24px;

    border: 1px solid rgba(255,255,255,0.08);

    padding: 40px;

    box-shadow: 0 20px 50px rgba(0,0,0,0.4);

    text-align: center;

}



.login-box h2 {

    font-size: 32px;

    margin-bottom: 15px;

}



.login-box p {

    color:#aaa;

    margin-bottom:30px;

    line-height:1.6;

}




.login-box form {

    display:flex;

    flex-direction:column;

    gap:15px;

    text-align:left;

}



.login-box label {

    font-size:14px;

    color:#ccc;

}



.login-box input {


    background:#0d0f12;

    border:1px solid #333;

    color:white;

    padding:14px;

    border-radius:10px;

    font-family:'Inter', sans-serif;

    transition:0.3s;


}



.login-box input:focus {


    outline:none;

    border-color:#ff2d2d;

    box-shadow:0 0 10px rgba(255,45,45,0.2);


}



.login-box button {


    margin-top:15px;

    padding:15px;


    border:none;

    border-radius:12px;


    background:linear-gradient(45deg,#ff2d2d,#ff6b00);


    color:white;


    font-size:16px;

    font-weight:700;


    cursor:pointer;


    transition:0.3s;


}



.login-box button:hover {


    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(255,45,45,0.3);


}



.login-box a {


    display:block;

    margin-top:25px;

    color:#ff2d2d;

    text-decoration:none;

    font-size:14px;


}



.login-box a:hover {


    text-decoration:underline;


}



@media(max-width:600px){


.login-box {

    padding:30px 20px;

}


}


/* =========================
   DASHBOARD
========================= */


.dashboard {

    min-height:100vh;

    padding:80px 40px;

}




.dashboard-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    max-width:1200px;

    margin:0 auto 40px;


    background:rgba(26,29,37,0.75);

    backdrop-filter:blur(10px);

    padding:25px 30px;

    border-radius:20px;

    border:1px solid rgba(255,255,255,0.08);


}



.dashboard-header h1 {

    margin:0;

    font-size:32px;

}



.dashboard-header p {

    margin:8px 0 0;

    color:#aaa;

}




.dashboard-header button {


    background:#1a1d25;

    border:1px solid #333;

    color:white;

    padding:12px 25px;

    border-radius:10px;

    cursor:pointer;

    transition:0.3s;


}



.dashboard-header button:hover {


    border-color:#ff2d2d;

    color:#ff2d2d;


}







.dashboard-actions {


    max-width:1200px;

    margin:0 auto 40px;

    display:flex;

    gap:20px;


}



.dashboard-actions button {


    padding:15px 30px;

    border-radius:12px;

    border:1px solid #333;

    background:#1a1d25;

    color:white;

    font-weight:600;

    cursor:pointer;

    transition:0.3s;


}



.dashboard-actions button:hover {


    transform:translateY(-3px);

    border-color:#ff2d2d;


}



.dashboard-actions .main-action {


    background:linear-gradient(45deg,#ff2d2d,#ff6b00);

    border:none;


}








.stats-grid {


    max-width:1200px;

    margin:0 auto 50px;


    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:25px;


}





.stat-card {


    background:rgba(26,29,37,0.75);

    backdrop-filter:blur(10px);


    padding:30px;

    border-radius:20px;


    border:1px solid rgba(255,255,255,0.08);


    text-align:center;


    transition:0.3s;


}




.stat-card:hover {


    transform:translateY(-8px);

    border-color:#ff2d2d;


}




.stat-card h3 {


    color:#ff2d2d;

    font-size:40px;

    margin:0 0 10px;


}




.stat-card p {


    color:#bbb;

    margin:0;

}









.recent-services {


    max-width:1200px;

    margin:auto;


    background:rgba(26,29,37,0.75);

    backdrop-filter:blur(10px);


    padding:35px;

    border-radius:24px;


    border:1px solid rgba(255,255,255,0.08);


}





.recent-services h2 {


    margin-top:0;

    margin-bottom:30px;


}






.service-row {


    display:flex;

    justify-content:space-between;

    align-items:center;


    padding:20px;

    margin-bottom:15px;


    background:#111;

    border-radius:15px;


    border-left:3px solid #ff2d2d;


    transition:0.3s;


}




.service-row:hover {


    transform:translateX(5px);

}




.service-row h3 {


    margin:0 0 8px;

    font-family:'Inter',sans-serif;


}



.service-row p {


    margin:0;

    color:#999;


}




.service-row strong {


    color:#ff2d2d;

}






@media(max-width:768px){


.dashboard {

    padding:80px 20px;

}



.dashboard-header {


    flex-direction:column;

    gap:20px;

    text-align:center;


}



.dashboard-actions {


    flex-direction:column;


}



.service-row {


    flex-direction:column;

    align-items:flex-start;

    gap:15px;


}



}


/* =========================
   VEHICLES PAGE
========================= */


.vehicles-page {

    min-height:100vh;

    padding:80px 40px;

}





.vehicles-header {


    max-width:1200px;

    margin:0 auto 35px;


    display:flex;

    justify-content:space-between;

    align-items:center;


    background:rgba(26,29,37,0.75);

    backdrop-filter:blur(10px);


    padding:30px;


    border-radius:24px;

    border:1px solid rgba(255,255,255,0.08);


}




.vehicles-header h1 {


    margin:0;

    font-size:36px;


}



.vehicles-header p {


    color:#aaa;

    margin-top:10px;


}




.add-vehicle-btn {


    padding:15px 25px;


    background:linear-gradient(45deg,#ff2d2d,#ff6b00);


    color:white;

    border:none;


    border-radius:12px;


    font-weight:700;


    cursor:pointer;


    transition:0.3s;


}



.add-vehicle-btn:hover {


    transform:translateY(-3px);


    box-shadow:0 10px 25px rgba(255,45,45,0.3);


}







.vehicle-search {


    max-width:1200px;

    margin:0 auto 40px;


    display:flex;

    gap:15px;


}




.vehicle-search input {


    flex:1;


    background:#0d0f12;


    border:1px solid #333;


    color:white;


    padding:15px;


    border-radius:12px;


    font-size:15px;


}



.vehicle-search input:focus {


    outline:none;


    border-color:#ff2d2d;


}





.vehicle-search button {


    padding:0 30px;


    border:none;


    border-radius:12px;


    background:#1a1d25;


    color:white;


    border:1px solid #333;


    cursor:pointer;


}



.vehicle-search button:hover {


    border-color:#ff2d2d;


}







.vehicles-grid {
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:35px;
    align-items:start;
}




.vehicle-card {


    background:rgba(26,29,37,0.75);


    backdrop-filter:blur(10px);


    border-radius:22px;


    padding:30px;


    border:1px solid rgba(255,255,255,0.08);


    transition:0.3s;


}





.vehicle-card:hover {


    transform:translateY(-8px);


    border-color:#ff2d2d;


    box-shadow:0 15px 35px rgba(0,0,0,0.4);


}



.vehicle-label {

    color:#666 !important;

    font-size:11px;

    font-weight:700;

    letter-spacing:1.5px;

    margin:0 0 6px !important;

}


.vehicle-main-info {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;

    margin-bottom:20px;

}


.vehicle-mileage,
.vehicle-registration {

    background:#111;

    border:1px solid #222;

    border-radius:14px;

    padding:16px;

}


.vehicle-main-info span,
.vehicle-details span {

    display:block;

    color:#777;

    font-size:12px;

    margin-bottom:6px;

}


.vehicle-mileage strong {

    display:block;

    color:#ff2d2d;

    font-size:20px;

}


.vehicle-registration strong {

    display:block;

    font-size:18px;

}


.vehicle-details {

    padding:15px 0;

    border-top:1px solid #222;

    border-bottom:1px solid #222;

}


.vehicle-details strong {

    display:block;

    font-size:13px;

    font-weight:500;

    word-break:break-all;

    color:#aaa;

}



@media(max-width:768px) {

    .vehicle-main-info {

        grid-template-columns:1fr;

    }

}






.vehicle-top {


    display:flex;


    justify-content:space-between;


    align-items:center;


    margin-bottom:25px;


}





.vehicle-top h2 {


    font-family:'Inter',sans-serif;


    font-size:22px;


    margin:0;


}





.vehicle-top span {


    background:rgba(40,167,69,0.15);


    color:#28a745;


    padding:6px 14px;


    border-radius:20px;


    font-size:13px;


}





.vehicle-card p {


    color:#aaa;


    margin:12px 0;


}



.vehicle-card strong {


    color:white;


}






.vehicle-actions {


    display:flex;


    gap:15px;


    margin-top:30px;


}





.vehicle-actions button {


    flex:1;


    padding:12px;


    border-radius:10px;


    border:none;


    cursor:pointer;


    background:linear-gradient(45deg,#ff2d2d,#ff6b00);


    color:white;


    font-weight:600;


}





.vehicle-actions .secondary {


    background:#111;


    border:1px solid #333;


}





.vehicle-actions .secondary:hover {


    border-color:#ff2d2d;


}






@media(max-width:768px){


.vehicles-page {


    padding:80px 20px;


}



.vehicles-header {


    flex-direction:column;


    gap:20px;


    text-align:center;


}



.vehicle-search {


    flex-direction:column;


}



.vehicle-search button {


    height:50px;


}



.vehicle-actions {


    flex-direction:column;


}


}


.vehicle-card {
    height: auto;
    box-sizing: border-box;
}


/* =========================
   ADD VEHICLE PAGE
========================= */


.add-vehicle-page {

    min-height:100vh;

    padding:80px 40px;

    display:flex;

    justify-content:center;

}




.add-vehicle-container {


    width:100%;

    max-width:900px;


    background:rgba(26,29,37,0.75);

    backdrop-filter:blur(12px);


    padding:40px;


    border-radius:24px;


    border:1px solid rgba(255,255,255,0.08);


    box-shadow:0 20px 50px rgba(0,0,0,0.4);


}




.add-vehicle-container h1 {


    margin-top:0;

    font-size:36px;


}




.add-vehicle-container > p {


    color:#aaa;

    margin-bottom:40px;


}







.vehicle-form h2 {


    font-family:'Inter',sans-serif;

    font-size:22px;


    margin:35px 0 20px;


    color:#ff2d2d;


}




.form-grid {


    display:grid;


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


    gap:20px;


}




.vehicle-form label {


    display:block;


    margin-bottom:8px;


    color:#ccc;


    font-size:14px;


}




.vehicle-form input,

.vehicle-form select {


    width:100%;


    box-sizing:border-box;


    padding:14px;


    background:#0d0f12;


    color:white;


    border:1px solid #333;


    border-radius:10px;


    font-family:'Inter',sans-serif;


}





.vehicle-form input:focus,

.vehicle-form select:focus {


    outline:none;


    border-color:#ff2d2d;


    box-shadow:0 0 10px rgba(255,45,45,0.2);


}





.vehicle-form button {


    width:100%;


    margin-top:40px;


    padding:16px;


    border:none;


    border-radius:12px;


    background:linear-gradient(45deg,#ff2d2d,#ff6b00);


    color:white;


    font-size:16px;


    font-weight:700;


    cursor:pointer;


    transition:0.3s;


}




.vehicle-form button:hover {


    transform:translateY(-3px);


    box-shadow:0 10px 25px rgba(255,45,45,0.3);


}






@media(max-width:768px){


.add-vehicle-page {

    padding:80px 20px;

}



.add-vehicle-container {

    padding:25px 20px;

}



.form-grid {

    grid-template-columns:1fr;

}



.add-vehicle-container h1 {

    font-size:30px;

}



}


/* =========================
   ADD SERVICE PAGE
========================= */


.add-service-page {

    min-height:100vh;

    padding:80px 40px;

    display:flex;

    justify-content:center;

}




.add-service-container {


    width:100%;

    max-width:900px;


    background:rgba(26,29,37,0.75);

    backdrop-filter:blur(12px);


    padding:40px;


    border-radius:24px;


    border:1px solid rgba(255,255,255,0.08);


    box-shadow:0 20px 50px rgba(0,0,0,0.4);


}





.add-service-container h1 {


    margin:0;

    font-size:36px;


}




.add-service-container > p {


    color:#aaa;

    margin-top:10px;

    margin-bottom:40px;


}





.service-form h2 {


    font-family:'Inter',sans-serif;

    font-size:22px;

    color:#ff2d2d;


    margin:35px 0 20px;


}





.service-form textarea {


    width:100%;


    min-height:120px;


    resize:vertical;


    box-sizing:border-box;


    padding:15px;


    background:#0d0f12;


    color:white;


    border:1px solid #333;


    border-radius:12px;


    font-family:'Inter',sans-serif;


}





.service-form textarea:focus {


    outline:none;


    border-color:#ff2d2d;


    box-shadow:0 0 10px rgba(255,45,45,0.2);


}






.service-form input,

.service-form select {


    width:100%;


    box-sizing:border-box;


    padding:14px;


    background:#0d0f12;


    color:white;


    border:1px solid #333;


    border-radius:10px;


}





.service-form input:focus,

.service-form select:focus {


    outline:none;


    border-color:#ff2d2d;


}






.service-form label {


    display:block;


    color:#ccc;


    margin-bottom:8px;


    font-size:14px;


}





.service-form button {


    width:100%;


    margin-top:40px;


    padding:16px;


    border:none;


    border-radius:12px;


    background:linear-gradient(45deg,#ff2d2d,#ff6b00);


    color:white;


    font-weight:700;


    font-size:16px;


    cursor:pointer;


    transition:0.3s;


}





.service-form button:hover {


    transform:translateY(-3px);


    box-shadow:0 10px 25px rgba(255,45,45,0.3);


}





@media(max-width:768px){


.add-service-page {

    padding:80px 20px;

}



.add-service-container {

    padding:25px 20px;

}



.add-service-container h1 {

    font-size:30px;

}



}


/* =========================
   VEHICLE DETAILS PAGE
========================= */


.vehicle-details-page {

    min-height:100vh;
    padding:80px 40px;

}




.vehicle-details-container {

    max-width:1200px;
    margin:auto;


    background:rgba(26,29,37,0.75);

    backdrop-filter:blur(12px);


    padding:40px;


    border-radius:24px;


    border:1px solid rgba(255,255,255,0.08);


    box-shadow:0 20px 50px rgba(0,0,0,0.4);

}





.vehicle-details-header {


    display:flex;

    justify-content:space-between;

    align-items:center;


    margin-bottom:40px;


}




.vehicle-details-header h1 {


    margin:0;

    font-size:36px;


}




.vehicle-details-header p {


    color:#aaa;

    margin-top:10px;


}





.vehicle-details-header button,
.history-header button {


    padding:14px 25px;


    background:linear-gradient(45deg,#ff2d2d,#ff6b00);


    color:white;


    border:none;


    border-radius:12px;


    font-weight:700;


    cursor:pointer;


    transition:0.3s;


}



.vehicle-details-header button:hover,
.history-header button:hover {


    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(255,45,45,0.3);


}





.vehicle-info-grid {


    display:grid;


    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));


    gap:20px;


    margin-bottom:50px;


}





.info-box {


    background:#111;


    padding:25px;


    border-radius:18px;


    border:1px solid rgba(255,255,255,0.06);


    transition:0.3s;


}




.info-box:hover {


    border-color:#ff2d2d;


    transform:translateY(-5px);


}





.info-box h3 {


    color:#ff2d2d;


    margin-top:0;


    font-family:'Inter',sans-serif;


    font-size:16px;


}




.info-box p {


    color:white;

    margin:0;


    font-size:18px;


}







.service-history {


    margin-top:20px;


}





.history-header {


    display:flex;


    justify-content:space-between;


    align-items:center;


    margin-bottom:25px;


}




.history-header h2 {


    margin:0;


}





.history-item {


    display:flex;


    justify-content:space-between;


    align-items:center;


    background:#111;


    padding:25px;


    margin-bottom:15px;


    border-radius:18px;


    border-left:3px solid #ff2d2d;


    transition:0.3s;


}





.history-item:hover {


    transform:translateX(5px);


}




.history-item h3 {


    margin:0 0 8px;


    font-family:'Inter',sans-serif;


}




.history-item p {


    color:#aaa;

    margin:5px 0;


}




.history-item strong {


    color:#ff2d2d;


}


.history-main {

    display:flex;

    justify-content:space-between;

    align-items:center;

    width:100%;

}

.history-main > div {
    min-width: 0;
}

.history-main > div:last-child {
    max-width: 55%;
}

.history-main p {
    overflow-wrap: anywhere;
    word-break: break-word;
}


.history-details {

    display:none;

    width:100%;

    margin-top:20px;

    padding-top:20px;

    border-top:1px solid #222;

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

    gap:20px;

}


.history-item.expanded .history-details {

    display:grid !important;

}


.history-details strong {

    display:block;

    color:#fff;

    margin-bottom:6px;

}


.history-details p {

    margin:0;

}


@media(max-width:768px) {

    .history-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .history-main > div:last-child {
        max-width: 100%;
    }

    .history-details {
        grid-template-columns: 1fr;
    }

}


.history-item {

    flex-direction:column;

    align-items:stretch;

    cursor:pointer;

}



@media(max-width:768px){


.vehicle-details-page {

    padding:80px 20px;

}


    .history-header {

        align-items:flex-start;

        gap:15px;

    }


    .history-header h2 {

        font-size:24px;

    }


    .history-main {

        flex-direction:column;

        align-items:flex-start;

        gap:14px;

        padding:20px;

    }


    .history-main > div:last-child {

        max-width:100%;

        width:100%;

        text-align:left;

    }


    .history-details {

        grid-template-columns:1fr;

        padding:0 20px 20px;

    }


    .repair-actions {

        flex-wrap:wrap;

    }


}



@media(max-width:768px){


.vehicle-details-page {

    padding:80px 20px;

}



.vehicle-details-container {

    padding:25px 20px;

}



.vehicle-details-header {

    flex-direction:column;

    gap:20px;

    text-align:center;

}



.history-header {

    flex-direction:column;

    gap:20px;

}



.history-item {

    flex-direction:column;

    align-items:flex-start;

    gap:15px;

}



}




/* =========================
   EDIT VEHICLE PAGE
========================= */


.edit-vehicle-page {

    min-height:100vh;

    padding:80px 40px;

    display:flex;

    justify-content:center;

}




.edit-vehicle-container {

    width:100%;

    max-width:900px;


    background:rgba(26,29,37,0.75);

    backdrop-filter:blur(12px);


    padding:40px;


    border-radius:24px;


    border:1px solid rgba(255,255,255,0.08);


    box-shadow:0 20px 50px rgba(0,0,0,0.4);

}





.edit-vehicle-container h1 {

    margin:0;

    font-size:36px;

}





.edit-vehicle-container > p {

    color:#aaa;

    margin-top:10px;

    margin-bottom:40px;

}





.vehicle-form .form-grid {

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:20px;

}





.vehicle-form label {

    display:block;

    color:#ccc;

    font-size:14px;

    margin-bottom:8px;

}





.vehicle-form input,

.vehicle-form select,

.vehicle-form textarea {


    width:100%;

    box-sizing:border-box;


    padding:14px;


    background:#0d0f12;


    color:white;


    border:1px solid #333;


    border-radius:10px;


    font-family:'Inter',sans-serif;


}





.vehicle-form input:focus,

.vehicle-form select:focus,

.vehicle-form textarea:focus {


    outline:none;


    border-color:#ff2d2d;


    box-shadow:0 0 10px rgba(255,45,45,0.15);


}





.vehicle-form input:disabled {


    color:#777;

    cursor:not-allowed;

    background:#08090b;


}





.vehicle-form textarea {

    margin-top:0;
    min-height:120px;
    resize:vertical;

}

.vehicle-form > div:last-of-type {
    margin-top:25px;
}





.vehicle-form button {


    width:100%;


    margin-top:35px;


    padding:16px;


    border:none;


    border-radius:12px;


    background:linear-gradient(45deg,#ff2d2d,#ff6b00);


    color:white;


    font-size:16px;


    font-weight:700;


    cursor:pointer;


    transition:0.3s;


}





.vehicle-form button:hover {


    transform:translateY(-3px);


    box-shadow:0 10px 25px rgba(255,45,45,0.3);


}





@media(max-width:768px){


    .recent-service-card {

    padding:20px;

}
    .recent-service-card {

    flex-direction:column;

    align-items:flex-start;

    gap:20px;

}

@media(max-width:768px){

    .stats-grid {

        grid-template-columns:1fr;

    }

}


.recent-service-card > div:last-child {

    width:100%;

}



.edit-vehicle-page {

    padding:80px 20px;

}



.edit-vehicle-container {

    padding:25px 20px;

}



.edit-vehicle-container h1 {

    font-size:30px;

}


}


.repair-actions {

    margin-top:20px;

    display:flex;

    gap:10px;

}


.repair-actions button {

    cursor:pointer;

}



.dashboard-page {

    padding:40px;

}


.dashboard-container {

    max-width:1200px;

    margin:auto;

}



.dashboard-container h1 {

    font-size:42px;

    margin-bottom:10px;

}



.dashboard-container > p {

    color:#aaa;

    margin-bottom:40px;

}




.stats-grid {

    display:grid;

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

    gap:20px;

}




.stat-card {

    background:#111;

    padding:30px;

    border-radius:20px;

    border-left:4px solid #ff2d2d;

    transition:0.3s;

}



.stat-card:hover {

    transform:translateY(-5px);

}



.stat-card h3 {

    color:#aaa;

    margin:0 0 15px;

    font-size:18px;

}



.stat-card strong {

    font-size:32px;

    color:white;

}




@media(max-width:900px){


    .stats-grid {

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

    }

}



@media(max-width:600px){


    .stats-grid {

        grid-template-columns:
        1fr;

    }

}




.recent-services {

    margin-top:50px;

}



.recent-services h2 {

    margin-bottom:25px;

}







.recent-service-card h3 {

    margin:0 0 8px;

}



.recent-service-card p {

    color:#aaa;

    margin:5px 0;

}



.recent-service-card strong {

    color:#ff2d2d;

}



.stat-card {

    background:
    linear-gradient(
        145deg,
        #151515,
        #0c0c0c
    );

    padding:30px;

    border-radius:22px;

    border:1px solid #222;

    position:relative;

    overflow:hidden;

}



.stat-card::after {

    content:"";

    position:absolute;

    width:120px;

    height:120px;

    background:#ff2d2d;

    opacity:0.08;

    border-radius:50%;

    right:-40px;

    top:-40px;

}



.stat-icon {

    font-size:32px;

    margin-bottom:20px;

}



.stat-card h3 {

    color:#aaa;

    font-size:16px;

    font-weight:500;

    margin-bottom:10px;

}



.stat-card strong {

    font-size:40px;

    display:block;

    margin-bottom:10px;

}



.stat-card p {

    color:#777;

    margin:0;

    font-size:14px;

}


.recent-service-card {

    background:#111;

    padding:25px 30px;

    border-radius:20px;

    border:1px solid #222;

    margin-bottom:15px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    transition:0.3s;

}



.recent-service-card:hover {

    border-color:#ff2d2d;

    transform:translateX(5px);

}



.recent-service-card h4 {

    color:#ff2d2d;

    margin:0 0 8px;

    font-size:17px;

}



.recent-service-card h3 {

    font-size:22px;

    margin:5px 0;

}



.dashboard-header {

    margin-bottom:45px;

}


.dashboard-header h1 {

    font-size:48px;

    margin:0 0 12px;

    letter-spacing:-1px;

}



.dashboard-header p {

    color:#888;

    font-size:18px;

    margin:0;

}



.navbar {

    background:#0d0d0d;

    border-bottom:1px solid #222;

    position:sticky;

    top:0;

    z-index:100;

}



.nav-container {

    max-width:1200px;

    margin:auto;

    padding:20px 40px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.nav-logo {

    color:white;

    text-decoration:none;

    font-size:22px;

    font-weight:700;

}



.nav-links {

    display:flex;

    align-items:center;

    gap:30px;

}



.nav-links a {

    color:#aaa;

    text-decoration:none;

    font-size:16px;

    transition:0.3s;

}



.nav-links a:hover {

    color:#ff2d2d;

}



@media(max-width:700px){


.nav-container {

    flex-direction:column;

    gap:20px;

}


.nav-links {

    gap:15px;

    flex-wrap:wrap;

    justify-content:center;

}


}



.nav-links a.active {

    color:white;

    font-weight:600;

}




.nav-links a.active {

    color:white;

    font-weight:600;

    position:relative;

}


.nav-links a.active::after {

    content:"";

    position:absolute;

    bottom:-8px;

    left:0;

    width:100%;

    height:2px;

    background:#ff2d2d;

}



#logout {

    background:transparent;

    color:#ff2d2d;

    border:1px solid #ff2d2d;

    padding:10px 18px;

    border-radius:12px;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:0.3s;

}



#logout:hover {

    background:#ff2d2d;

    color:white;

}




.nav-links button {

    margin-left:20px;

}


#logout {

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0;

}


.vehicles-empty {

    display:none;

    text-align:center;

    max-width:500px;

    margin:80px auto;

    padding:50px 30px;

    background:
        linear-gradient(
            145deg,
            #151515,
            #0c0c0c
        );

    border:1px solid #222;

    border-radius:22px;

}


.vehicles-empty-icon {

    font-size:48px;

    margin-bottom:20px;

}


.vehicles-empty h2 {

    font-size:26px;

    margin-bottom:10px;

}


.vehicles-empty p {

    color:#888;

    line-height:1.6;

    margin-bottom:25px;

}


.repair-actions {

    display:flex;

    justify-content:flex-start;

    gap:10px;

    margin-top:20px;

    padding-top:16px;

    border-top:1px solid #222;

}


.repair-actions a {

    display:block;

    margin:0;

    padding:0;

}


.repair-actions button {

    width:auto;

    min-width:100px;

    height:40px;

    padding:0 18px;

    margin:0;

    border-radius:9px;

    font-size:13px;

    font-weight:600;

    line-height:1;

    cursor:pointer;

    transition:0.2s;

}


/* IZMENI */

.repair-actions a button {

    background:#ff2d2d;

    border:1px solid #ff2d2d;

    color:white;

}


/* OBRIŠI */

.repair-actions > button.secondary {

    background:transparent;

    border:1px solid #333;

    color:#aaa;

}


.repair-actions button:hover {

    transform:translateY(-1px);

}


.repair-actions a button:hover {

    background:#ff4545;

}


.repair-actions > button.secondary:hover {

    color:white;

    border-color:#ff2d2d;

}


@media(max-width:768px) {

    .repair-actions {

        justify-content:stretch;

    }

    .repair-actions a,
    .repair-actions button {

        flex:1;

    }


    .vehicle-summary {

    grid-template-columns:1fr 1fr;

}


.vehicle-summary > div:first-child {

    grid-column:1 / -1;

}


.vehicle-stats {

    grid-template-columns:1fr;

}

}



.vehicle-page-label {

    display:block;

    color:#666;

    font-size:11px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:8px;

}


.vehicle-subtitle {

    color:#888;

    margin-top:8px;

}


.vehicle-summary {

    display:grid;

    grid-template-columns:1.5fr 1fr 1fr 1fr;

    gap:15px;

    margin-top:35px;

}


.vehicle-summary > div {

    background:#111;

    border:1px solid #222;

    border-radius:16px;

    padding:20px;

}


.vehicle-summary span,
.vehicle-stat span,
.vehicle-vin span {

    display:block;

    color:#777;

    font-size:12px;

    margin-bottom:8px;

}


.vehicle-summary strong {

    font-size:17px;

}


.vehicle-stats {

    display:grid;

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

    gap:15px;

    margin-top:15px;

}


.vehicle-stat {

    background:
        linear-gradient(
            145deg,
            #151515,
            #0c0c0c
        );

    border:1px solid #222;

    border-radius:16px;

    padding:22px;

}


.vehicle-stat strong {

    display:block;

    font-size:25px;

}


.vehicle-stat:first-child strong {

    color:#ff2d2d;

}


.vehicle-vin {

    margin-top:15px;

    padding:18px 20px;

    background:#111;

    border:1px solid #222;

    border-radius:16px;

}


.vehicle-vin strong {

    display:block;

    color:#aaa;

    font-size:13px;

    font-weight:500;

    word-break:break-all;

}


.notification {

    position:fixed;

    right:25px;

    bottom:25px;

    z-index:9999;

    width:min(430px, calc(100vw - 40px));

    display:flex;

    align-items:center;

    gap:16px;

    padding:20px 22px;

    background:#151515;

    border:1px solid #292929;

    border-left:4px solid #28a745;

    border-radius:16px;

    box-shadow:
        0 18px 45px
        rgba(0,0,0,0.5);

    opacity:0;

    transform:translateY(20px);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;

}


.notification.show {

    opacity:1;

    transform:translateY(0);

}


.notification-icon {

    width:36px;

    height:36px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(40,167,69,0.15);

    color:#28a745;

    font-size:16px;

    font-weight:700;

}


.notification-content {

    flex:1;

    color:#eee;

    font-size:14px;

    line-height:1.4;

}


.notification-close {

    background:none;

    border:none;

    color:#666;

    font-size:22px;

    cursor:pointer;

    padding:0;

    line-height:1;

}


.notification-close:hover {

    color:white;

}


/* ERROR */

.notification-error {

    border-left-color:#ff2d2d;

}


.notification-error .notification-icon {

    background:rgba(255,45,45,0.15);

    color:#ff2d2d;

}


/* INFO */

.notification-info {

    border-left-color:#ff6b00;

}


.notification-info .notification-icon {

    background:rgba(255,107,0,0.15);

    color:#ff6b00;

}


@media(max-width:768px) {

    .notification {

        right:20px;

        bottom:20px;

        width:calc(100vw - 40px);

    }

}



/* =========================
   CUSTOM MODAL
========================= */


.custom-modal-overlay {

    position:fixed;

    inset:0;

    z-index:10000;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

    background:rgba(0,0,0,0.72);

    backdrop-filter:blur(6px);

    opacity:0;

    transition:opacity 0.25s ease;

}


.custom-modal-overlay.show {

    opacity:1;

}



.custom-modal {

    width:min(420px, 100%);

    background:
        linear-gradient(
            145deg,
            #181818,
            #0e0e0e
        );

    border:1px solid #292929;

    border-radius:22px;

    padding:35px 30px 30px;

    text-align:center;

    box-shadow:
        0 25px 70px
        rgba(0,0,0,0.65);

    transform:translateY(15px) scale(0.97);

    transition:
        transform 0.25s ease;

}


.custom-modal-overlay.show
.custom-modal {

    transform:
        translateY(0)
        scale(1);

}



.custom-modal-icon {

    width:58px;

    height:58px;

    margin:0 auto 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-size:28px;

    font-weight:700;

}


.custom-modal-icon.success {

    color:#28a745;

    background:
        rgba(40,167,69,0.14);

    border:
        1px solid
        rgba(40,167,69,0.25);

}


.custom-modal-icon.error {

    color:#ff2d2d;

    background:
        rgba(255,45,45,0.12);

    border:
        1px solid
        rgba(255,45,45,0.25);

}



.custom-modal h2 {

    margin:0 0 12px;

    font-size:24px;

    color:white;

}


.custom-modal p {

    margin:0 auto 28px;

    max-width:340px;

    color:#999;

    line-height:1.6;

    font-size:15px;

}



.custom-modal-button {

    width:100%;

    padding:13px 20px;

    border:none;

    border-radius:11px;

    background:
        linear-gradient(
            45deg,
            #ff2d2d,
            #ff6b00
        );

    color:white;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:0.2s;

}


.custom-modal-button:hover {

    transform:translateY(-1px);

    box-shadow:
        0 8px 20px
        rgba(255,45,45,0.25);

}


@media(max-width:768px) {

    .custom-modal {

        padding:30px 22px 22px;

    }


    .custom-modal h2 {

        font-size:21px;

    }

}



.confirm-modal-actions {

    display:flex;

    gap:12px;

    margin-top:5px;

}


.confirm-modal-actions button {

    flex:1;

    height:44px;

    border-radius:10px;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:0.2s;

}


.confirm-cancel {

    background:#111;

    border:1px solid #333;

    color:#aaa;

}


.confirm-cancel:hover {

    border-color:#555;

    color:white;

}


.confirm-delete {

    background:#ff2d2d;

    border:1px solid #ff2d2d;

    color:white;

}


.confirm-delete:hover {

    background:#ff4545;

}


@media(max-width:768px) {

    .confirm-modal-actions {

        flex-direction:column;

    }

}



/* =========================
   LANDING PAGE
========================= */

.landing-page {

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:40px 20px;

}


.landing-container {

    width:100%;

    max-width:1000px;

    text-align:center;

}


.landing-logo {

    width:75px;

    height:75px;

    margin:0 auto 25px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,45,45,0.1);

    border:1px solid rgba(255,45,45,0.25);

    border-radius:22px;

    font-size:38px;

}


.landing-container h1 {

    margin:0;

    font-size:48px;

    font-weight:700;

}


.landing-subtitle {

    margin:12px 0 50px;

    color:#999;

    font-size:18px;

}


.landing-options {

    display:grid;

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

    gap:25px;

}


.landing-card {

    background:rgba(26,29,37,0.75);

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,0.08);

    border-radius:24px;

    padding:40px 35px;

    transition:0.3s;

}


.landing-card:hover {

    transform:translateY(-7px);

    border-color:#ff2d2d;

    box-shadow:0 15px 40px rgba(0,0,0,0.35);

}


.landing-card-icon {

    font-size:42px;

    margin-bottom:20px;

}


.landing-card h2 {

    margin:0 0 15px;

    font-size:25px;

}


.landing-card p {

    color:#999;

    line-height:1.6;

    min-height:52px;

    margin:0 0 30px;

}


.landing-btn {

    width:100%;

    padding:14px;

    border:none;

    border-radius:11px;

    background:linear-gradient(
        45deg,
        #ff2d2d,
        #ff6b00
    );

    color:white;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:0.2s;

}


.landing-btn:hover {

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(255,45,45,0.2);

}


.landing-btn.secondary {

    background:#111;

    border:1px solid #333;

}


.landing-btn.secondary:hover {

    border-color:#ff2d2d;

}


@media(max-width:700px) {

    .landing-container h1 {

        font-size:36px;

    }


    .landing-subtitle {

        font-size:16px;

        margin-bottom:35px;

    }


    .landing-options {

        grid-template-columns:1fr;

    }


    .landing-card {

        padding:30px 25px;

    }

}



/* =========================
   CLIENT PAGE
========================= */

.client-page {

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:40px 20px;

}


.client-container {

    width:100%;

    max-width:600px;

    text-align:center;

    position:relative;

}


.client-back {

    position:absolute;

    top:-50px;

    left:0;

    color:#999;

    text-decoration:none;

    font-size:14px;

    transition:0.2s;

}


.client-back:hover {

    color:white;

}


.client-logo {

    width:75px;

    height:75px;

    margin:0 auto 25px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,45,45,0.1);

    border:1px solid rgba(255,45,45,0.25);

    border-radius:22px;

    font-size:38px;

}


.client-container h1 {

    margin:0;

    font-size:42px;

}


.client-subtitle {

    margin:12px 0 35px;

    color:#999;

    font-size:17px;

}


.client-card {

    background:rgba(26,29,37,0.75);

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,0.08);

    border-radius:24px;

    padding:40px;

    text-align:left;

}


.client-card-icon {

    text-align:center;

    font-size:38px;

    margin-bottom:20px;

}


.client-card h2 {

    text-align:center;

    margin:0 0 12px;

    font-size:24px;

}


.client-card > p {

    text-align:center;

    color:#999;

    line-height:1.6;

    margin:0 0 30px;

}


.client-card label {

    display:block;

    margin-bottom:8px;

    color:#ccc;

    font-size:14px;

    font-weight:600;

}


.client-card input {

    width:100%;

    box-sizing:border-box;

    background:#0d0f12;

    border:1px solid #333;

    color:white;

    padding:15px;

    border-radius:12px;

    font-size:15px;

    text-transform:uppercase;

    margin-bottom:18px;

}


.client-card input:focus {

    outline:none;

    border-color:#ff2d2d;

}


.client-card button {

    width:100%;

}


@media(max-width:600px) {

    .client-card {

        padding:30px 22px;

    }


    .client-container h1 {

        font-size:34px;

    }


    .client-back {

        position:static;

        display:block;

        text-align:left;

        margin-bottom:30px;

    }

}




.client-vehicle-page {

    min-height:100vh;

    padding:120px 30px 80px;

}


.client-vehicle-container {

    max-width:1100px;

    margin:auto;

}


.client-vehicle-header {

    margin-bottom:40px;

}


.client-label {

    color:#ff2d2d;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    margin:0 0 10px;

}


.client-vehicle-header h1 {

    margin:0;

    font-size:42px;

}


.client-vehicle-header p:not(.client-label) {

    color:#999;

    margin-top:10px;

}


.client-vehicle-info-grid {

    display:grid;

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

    gap:20px;

    margin-bottom:60px;

}


.client-info-box {

    background:
        rgba(26,29,37,0.75);

    border:1px solid
        rgba(255,255,255,0.08);

    border-radius:18px;

    padding:25px;

}


.client-info-box span {

    display:block;

    color:#888;

    font-size:13px;

    margin-bottom:10px;

}


.client-info-box strong {

    display:block;

    color:white;

    font-size:17px;

    overflow-wrap:anywhere;

}


.client-service-section {

    margin-top:20px;

}


.client-section-header {

    margin-bottom:25px;

}


.client-section-header h2 {

    margin:0;

    font-size:28px;

}


.client-empty-history {

    background:#111;

    border:1px solid #222;

    border-radius:18px;

    padding:35px;

    text-align:center;

}


.client-empty-history p {

    color:#888;

    margin:0;

}



@media(max-width:900px) {

    .client-vehicle-info-grid {

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

    }

}



@media(max-width:600px) {

    .client-vehicle-page {

        padding:
            100px 20px 60px;

    }


    .client-vehicle-header h1 {

        font-size:32px;

    }


    .client-vehicle-info-grid {

        grid-template-columns:1fr;

    }

}



.client-service-item {

    background:
        rgba(26,29,37,0.75);

    border:1px solid
        rgba(255,255,255,0.08);

    border-left:3px solid #ff2d2d;

    border-radius:18px;

    padding:25px;

    margin-bottom:15px;

    transition:0.3s;

}


.client-service-item:hover {

    transform:translateX(5px);

    border-color:#ff2d2d;

}


.client-service-main {

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}


.client-service-main h3 {

    margin:0 0 8px;

    font-size:19px;

}


.client-service-main p {

    color:#888;

    margin:0;

}


.client-service-main strong {

    color:#ff2d2d;

    font-size:16px;

}


.client-service-description {

    margin-top:18px;

    padding-top:18px;

    border-top:1px solid #222;

}


.client-service-description p {

    color:#aaa;

    margin:0;

    line-height:1.6;

}


@media(max-width:600px) {

    .client-service-main {

        align-items:flex-start;

    }

}




.client-service-item {

    background:
        rgba(26,29,37,0.75);

    border:1px solid
        rgba(255,255,255,0.08);

    border-left:3px solid #ff2d2d;

    border-radius:20px;

    padding:28px;

    margin-bottom:16px;

    transition:
        transform 0.25s,
        border-color 0.25s,
        box-shadow 0.25s;

}


.client-service-item:hover {

    transform:translateY(-3px);

    border-color:#ff2d2d;

    box-shadow:
        0 12px 30px
        rgba(0,0,0,0.3);

}


.client-service-main {

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

}


.client-service-label {

    display:block;

    color:#ff2d2d;

    font-size:11px;

    font-weight:700;

    letter-spacing:1.5px;

    margin-bottom:6px;

}


.client-service-main h3 {

    margin:0 0 7px;

    font-size:20px;

}


.client-service-main p {

    color:#888;

    margin:0;

}


.client-service-mileage {

    text-align:right;

}


.client-service-mileage span {

    display:block;

    color:#777;

    font-size:12px;

    margin-bottom:5px;

}


.client-service-mileage strong {

    color:white;

    font-size:17px;

}


.client-service-details {

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:30px;

    margin-top:25px;

    padding-top:20px;

    border-top:1px solid #222;

}


.client-service-details span {

    display:block;

    color:#777;

    font-size:12px;

    margin-bottom:7px;

}


.client-service-details p {

    color:#aaa;

    line-height:1.6;

    margin:0;

}


@media(max-width:600px) {

    .client-service-item {

        padding:22px;

    }


    .client-service-main {

        align-items:flex-start;

        gap:20px;

    }


    .client-service-mileage {

        text-align:left;

    }


    .client-service-details {

        grid-template-columns:1fr;

        gap:20px;

    }

}



.client-vehicle-stats {

    display:grid;

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

    gap:20px;

    margin:30px 0 50px;

}


.client-stat-box {

    background:
        rgba(26,29,37,0.75);

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius:18px;

    padding:24px;

    transition:0.25s;

}


.client-stat-box:hover {

    transform:translateY(-3px);

    border-color:#ff2d2d;

}


.client-stat-box span {

    display:block;

    color:#777;

    font-size:13px;

    margin-bottom:10px;

}


.client-stat-box strong {

    display:block;

    color:white;

    font-size:24px;

}


@media(max-width:768px) {

    .client-vehicle-stats {

        grid-template-columns:1fr;

        margin-bottom:40px;

    }

}


.print-service-wrapper {

    margin-top:40px;

    padding-top:30px;

    border-top:1px solid #222;

    text-align:center;

}


.print-service-wrapper p {

    color:#888;

    margin:0 0 15px;

    font-size:14px;

}


.print-service-btn {
    position: absolute;
    top: 28px;
    right: 0;

    padding: 15px 25px;
    border-radius: 14px;

    background: #ff2d2d;
    color: #fff;

    border: 1px solid#ff2d2d;

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;

    transition: 0.25s;
}

.print-service-btn:hover {
    background: #e67e00;
    border-color: #e67e00;
    transform: translateY(-2px);
}


.print-service-btn:active {

    transform:translateY(0);

}


.print-service-btn:hover {

    border-color:#ff2d2d;

    background:#171717;

}


@media print {

    body {

        background:white !important;

        color:black !important;

    }


    .navbar {

        display:none !important;

    }


    .client-vehicle-page {

        padding:0 !important;

    }


    .client-vehicle-container {

        max-width:none !important;

        width:100% !important;

    }


    .print-service-wrapper {
    display:none !important;
}


    .client-vehicle-header {

        margin-bottom:25px;

    }


    .client-label {

        color:#555 !important;

    }


    .client-vehicle-info-grid {

        display:grid !important;

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

        gap:10px;

    }


    .client-info-box {

        background:white !important;

        border:1px solid #ddd !important;

        color:black !important;

        box-shadow:none !important;

    }


    .client-info-box span {

        color:#666 !important;

    }


    .client-info-box strong {

        color:black !important;

    }


    .client-stat-box {

        background:white !important;

        border:1px solid #ddd !important;

        color:black !important;

        box-shadow:none !important;

    }


    .client-stat-box span {

        color:#666 !important;

    }


    .client-stat-box strong {

        color:black !important;

    }


    .client-service-item {

        background:white !important;

        border:1px solid #ddd !important;

        border-left:3px solid #222 !important;

        color:black !important;

        box-shadow:none !important;

        break-inside:avoid;

    }


    .client-service-item h3 {

        color:black !important;

    }


    .client-service-item p {

        color:#444 !important;

    }


    .client-service-item span {

        color:#666 !important;

    }


    .client-service-item strong {

        color:black !important;

    }


    .client-service-details {

        border-top:1px solid #ddd !important;

    }

}



@media(max-width:768px){

    .client-vehicle-header {

        flex-direction:column;

    }


    .print-service-btn {

        width:100%;

    }

}


.client-vehicle-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    gap: 30px;
}

.client-vehicle-header > div:first-child {
    flex: 1;
}

.client-vehicle-header .print-service-btn {
    margin-left: auto !important;
    flex-shrink: 0;
}


.client-vehicle-header {
    position: relative;
}

.client-vehicle-header .print-service-btn {
    position: absolute;
    top: 28px;
    right: 0;
}


@media(max-width:768px) {

    .client-vehicle-header .print-service-btn {
        position:static;
        width:100%;
        margin-top:20px;
    }

}



@media print {

    .print-service-btn {
        display:none !important;
    }

}


@media (max-width: 768px) {

    .custom-modal-overlay {
        padding: 16px;
        box-sizing: border-box;
    }

    .custom-modal {
        width: 100%;
        max-width: 420px;
        box-sizing: border-box;
        margin: 0 auto;
    }

}


@media (max-width: 768px) {

    .custom-modal-overlay {
        position: fixed !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: 100vw !important;
        height: 100vh !important;

        padding: 16px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        box-sizing: border-box !important;
    }


    .custom-modal {
        position: relative !important;

        width: calc(100vw - 32px) !important;
        max-width: 420px !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        left: auto !important;
        right: auto !important;
    }

}



@media (max-width: 768px) {

    .navbar {
        padding: 0;
    }


    .nav-container {
        min-height: 62px;
        padding: 0 18px;
    }


    .nav-logo {
        font-size: 16px;
        white-space: nowrap;
    }


    .nav-links {
        gap: 10px;
    }


    .nav-links a {
        font-size: 13px;
    }

}


@media (max-width: 768px) {

    .navbar {

        transition:
            transform 0.3s ease;

    }


    .navbar.navbar-hidden {

        transform:
            translateY(-100%);

    }

}