/* ============================================================
   CAR RENTAL PLUGIN - ADAPTIVE THEME STYLE
   Colors controlled via CSS variables injected by PHP.
   Plugin auto-detects the active WordPress theme palette.
   ============================================================ */

/* ===================================
   CSS VARIABLES (fallback defaults)
=================================== */
:root {
    --cr-primary: #0073aa;
    --cr-primary-dark: #a8894e;
    --cr-primary-rgb: 200,169,110;

    --cr-bg:#ffffff;
    --cr-bg-deep:#f7f5f0;
    --cr-bg-card:#faf8f4;
    --cr-bg-card2:#f0ede6;

    --cr-text:#1a1a1a;
    --cr-text-muted:#777777;
    --cr-text-light:#444444;

    --cr-border:#e0dbd2;
    --cr-radius:4px;

    --cr-font-head:sans-serif;
    --cr-font-body:sans-serif;
}

/* WIZARD CONTAINER */
.cr-wizard-container{
max-width:960px;
margin:0 auto;
padding:0;
background:transparent;
font-family:var(--cr-font-body);
}

/* PROGRESS BAR */
.cr-progress-bar{
display:flex;
align-items:center;
justify-content:space-between;
background:var(--cr-bg-deep);
padding:0 30px;
border-bottom:3px solid var(--cr-primary);
margin-bottom:0;
}

.cr-step{
display:flex;
flex-direction:column;
align-items:center;
flex:1;
padding:18px 8px;
position:relative;
cursor:default;
}

.cr-step-number{
width:40px;
height:40px;
border-radius:50%;
background:var(--cr-bg-card2);
border:2px solid var(--cr-border);
color:var(--cr-text-muted);
display:flex;
align-items:center;
justify-content:center;
font-weight:800;
font-size:15px;
font-family:inherit;
transition:all .3s ease;
z-index:2;
}

.cr-step.active .cr-step-number{
background:var(--cr-primary);
border-color:var(--cr-primary);
color:var(--cr-bg-deep);
transform:scale(1.1);
box-shadow:0 0 0 4px rgba(var(--cr-primary-rgb),0.25);
}

.cr-step.completed .cr-step-number{
background:var(--cr-primary-dark);
border-color:var(--cr-primary-dark);
color:var(--cr-bg-deep);
}

.cr-step-title{
margin-top:7px;
font-size:11px;
color:var(--cr-text-muted);
font-weight:600;
text-transform:uppercase;
letter-spacing:.8px;
font-family:inherit;
text-align:center;
}

.cr-step.active .cr-step-title{color:var(--cr-primary);}
.cr-step.completed .cr-step-title{color:var(--cr-primary-dark);}

.cr-step-line{
height:2px;
background:var(--cr-border);
flex:1;
margin-bottom:22px;
}

.cr-step.completed + .cr-step-line{
background:var(--cr-primary-dark);
}

/* STEP CONTENT */
.cr-step-content{
display:none;
background:var(--cr-bg);
animation:crSlideIn .35s ease;
}

.cr-step-content.active{display:block;}

@keyframes crSlideIn{
from{opacity:0;transform:translateX(20px);}
to{opacity:1;transform:translateX(0);}
}

.cr-step-heading{
font-family:inherit;
font-size:32px;
font-weight:800;
color:var(--cr-text);
text-transform:uppercase;
letter-spacing:1px;
padding:28px 35px 0 35px;
margin:0 0 6px 0;
}

.cr-step-heading span{color:var(--cr-primary);}

/* SERVICE CARDS */
.cr-service-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
padding:25px 35px 30px;
gap:16px;
}

.cr-service-card{cursor:pointer;display:block;}

.cr-service-card input[type="radio"]{display:none;}

.cr-service-content{
padding:28px 20px;
border:2px solid var(--cr-border);
background:var(--cr-bg-card);
text-align:center;
transition:all .25s ease;
position:relative;
overflow:hidden;
}

.cr-service-content::before{
content:'';
position:absolute;
bottom:0;
left:0;
right:0;
height:3px;
background:var(--cr-primary);
transform:scaleX(0);
transition:transform .25s ease;
}

.cr-service-icon{
font-size:38px;
margin-bottom:12px;
display:block;
}

.cr-service-content h3{
margin:0 0 6px 0;
font-family:inherit;
font-size:20px;
font-weight:700;
color:var(--cr-text);
text-transform:uppercase;
letter-spacing:.5px;
}

.cr-service-content p{
margin:0;
font-size:13px;
color:var(--cr-text-muted);
}

.cr-service-card:hover .cr-service-content,
.cr-service-card.cr-service-selected .cr-service-content,
.cr-service-card input:checked + .cr-service-content{
border-color:var(--cr-primary);
background:var(--cr-bg-card2);
}

.cr-service-card:hover .cr-service-content::before,
.cr-service-card.cr-service-selected .cr-service-content::before,
.cr-service-card input:checked + .cr-service-content::before{
transform:scaleX(1);
}

.cr-service-card input:checked + .cr-service-content h3{
color:var(--cr-primary);
}

/* FORM GROUPS */
.cr-form-group input,
.cr-form-group select,
.cr-form-group textarea{
padding:13px 16px;
background:var(--cr-bg-card);
border:1px solid var(--cr-border);
border-bottom:2px solid var(--cr-border);
color:var(--cr-text);
font-size:15px;
font-family:inherit;
width:100%;
box-sizing:border-box;
outline:none;
transition:border-color .25s;
}

/* BUTTONS */
.cr-btn{
padding:14px 32px;
border:none;
font-family:inherit;
font-size:16px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
cursor:pointer;
transition:all .25s ease;
border-radius:var(--cr-radius);
}

/* SUCCESS BOX */
.cr-success-box{
text-align:center;
padding:70px 30px;
background:var(--cr-bg);
}

.cr-success-box h2{
font-family:inherit;
font-size:32px;
font-weight:800;
color:var(--cr-primary);
text-transform:uppercase;
letter-spacing:1px;
}

/* THEME OVERRIDES RESET */
.cr-booking-wrapper label{
background:transparent!important;
padding:0!important;
display:block;
color:var(--cr-text-muted);
font-weight:600;
margin-bottom:6px;
}

.cr-booking-wrapper input{
background:var(--cr-bg-card);
border:1px solid var(--cr-border);
color:var(--cr-text);
padding:10px;
}

.cr-booking-wrapper input:focus{
outline:none;
border-color:var(--cr-primary);
}

.cr-booking-wrapper{
color:var(--cr-text);
font-family:var(--cr-font-body);
}

/* ===================================
   FORM GRID - 2 column layout
=================================== */
.cr-form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
padding:20px 35px 10px;
}

.cr-form-group{
display:flex;
flex-direction:column;
position:relative;
}

.cr-form-group.full-width{
grid-column:1 / -1;
}

.cr-form-group label{
display:block;
background:transparent!important;
padding:0!important;
font-size:12px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.7px;
color:var(--cr-text-muted);
margin-bottom:6px;
}

.cr-form-group input:focus,
.cr-form-group select:focus,
.cr-form-group textarea:focus{
border-color:var(--cr-primary);
border-bottom-color:var(--cr-primary);
}

.cr-form-group textarea{
resize:vertical;
min-height:80px;
}

.cr-form-group small{
margin-top:5px;
font-size:12px;
font-weight:600;
color:var(--cr-primary);
}

/* ===================================
   CAR AUTOCOMPLETE DROPDOWN
   JS uses class: cr-dropdown-item
=================================== */
.cr-car-dropdown{
position:absolute;
left:0;
right:0;
top:100%;
background:var(--cr-bg);
border:1px solid var(--cr-border);
border-top:none;
z-index:9999;
max-height:200px;
overflow-y:auto;
box-shadow:0 6px 20px rgba(0,0,0,.10);
}

.cr-dropdown-item{
padding:11px 16px;
cursor:pointer;
font-size:14px;
color:var(--cr-text);
border-bottom:1px solid var(--cr-border);
transition:background .15s;
}

.cr-dropdown-item:last-child{
border-bottom:none;
}

.cr-dropdown-item:hover{
background:var(--cr-bg-card2);
color:var(--cr-primary);
}

/* ===================================
   STEP 2 - SELECTED CAR INFO BOX
=================================== */
.cr-car-info-box{
margin:0 35px 20px;
border:1px solid var(--cr-border);
border-left:4px solid var(--cr-primary);
background:var(--cr-bg-card);
overflow:hidden;
}

.cr-car-info-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
}

.cr-info-item{
display:flex;
flex-direction:column;
padding:14px 18px;
border-right:1px solid var(--cr-border);
border-bottom:1px solid var(--cr-border);
}

.cr-info-item:last-child,
.cr-info-item:nth-child(4n){
border-right:none;
}

.cr-info-label{
font-size:11px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.7px;
color:var(--cr-text-muted);
margin-bottom:5px;
}

.cr-info-value{
font-size:15px;
font-weight:700;
color:var(--cr-primary);
}

/* ===================================
   NAVIGATION BUTTONS
=================================== */
.cr-step-buttons{
display:flex;
gap:12px;
padding:20px 35px 28px;
justify-content:flex-end;
align-items:center;
}

.cr-btn-primary{
background:var(--cr-primary);
color:var(--cr-bg-deep);
}

.cr-btn-primary:hover{
background:var(--cr-primary-dark);
color:var(--cr-bg-deep);
}

.cr-btn-secondary{
background:transparent;
color:var(--cr-text);
border:2px solid var(--cr-border)!important;
}

.cr-btn-secondary:hover{
border-color:var(--cr-primary)!important;
color:var(--cr-primary);
}

.cr-btn-success{
background:var(--cr-primary);
color:var(--cr-bg-deep);
}

.cr-btn-success:hover{
background:var(--cr-primary-dark);
color:var(--cr-bg-deep);
}

/* ===================================
   STEP 3 - ADD-ONS
=================================== */
.cr-addons-section{
padding:10px 35px 15px;
}

.cr-addons-section h3{
font-size:13px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.7px;
color:var(--cr-text);
margin:0 0 12px 0;
padding-bottom:8px;
border-bottom:1px solid var(--cr-border);
}

.cr-addons-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
}

.cr-addon-card{
cursor:pointer;
display:block;
}

.cr-addon-card input[type="checkbox"]{
display:none;
}

.cr-addon-content{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 14px;
border:1px solid var(--cr-border);
background:var(--cr-bg-card);
transition:all .2s;
font-size:14px;
color:var(--cr-text);
}

.cr-addon-card input:checked + .cr-addon-content{
border-color:var(--cr-primary);
background:var(--cr-bg-card2);
}

.cr-addon-price{
font-weight:700;
color:var(--cr-primary);
font-size:13px;
margin-left:8px;
white-space:nowrap;
}

#cr-avail-msg-box{
margin:0 35px 15px;
padding:12px 16px;
background:var(--cr-bg-card2);
border-left:4px solid var(--cr-primary);
font-size:14px;
color:var(--cr-text);
}

/* ===================================
   STEP 4 - DOCUMENT UPLOAD
=================================== */
.cr-document-section{
padding:5px 35px 15px;
}

.cr-document-section h3{
font-size:13px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.7px;
color:var(--cr-text);
margin:0 0 10px 0;
}

.cr-file-upload label{
display:flex;
align-items:center;
gap:10px;
padding:14px 18px;
border:2px dashed var(--cr-border);
background:var(--cr-bg-card);
cursor:pointer;
transition:border-color .2s;
font-size:14px;
color:var(--cr-text-muted);
}

.cr-file-upload label:hover{
border-color:var(--cr-primary);
color:var(--cr-primary);
}

.cr-file-upload input[type="file"]{
display:none;
}

/* ===================================
   STEP 5 - BOOKING SUMMARY CARD
=================================== */
.cr-summary-card{
margin:20px 35px 0;
border:1px solid var(--cr-border);
background:var(--cr-bg-card);
}

.cr-summary-row{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 20px;
border-bottom:1px solid var(--cr-border);
}

.cr-summary-row:last-child{
border-bottom:none;
}

.cr-summary-label{
font-size:12px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.7px;
color:var(--cr-text-muted);
}

.cr-summary-value{
font-size:15px;
font-weight:600;
color:var(--cr-text);
text-align:right;
}

/* ===================================
   STEP 5 - PRICE BREAKDOWN
=================================== */
.cr-price-summary{
margin:16px 35px 10px;
border:1px solid var(--cr-border);
background:var(--cr-bg-card);
padding:20px;
}

.cr-price-summary h3{
font-size:13px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.7px;
color:var(--cr-text);
margin:0 0 14px 0;
padding-bottom:10px;
border-bottom:1px solid var(--cr-border);
}

.cr-price-row{
display:flex;
justify-content:space-between;
align-items:center;
padding:9px 0;
font-size:14px;
color:var(--cr-text-light);
border-bottom:1px solid var(--cr-border);
}

.cr-price-row:last-child{
border-bottom:none;
}

.cr-total-row{
font-size:18px;
font-weight:800;
color:var(--cr-primary);
text-transform:uppercase;
letter-spacing:.5px;
padding-top:14px;
margin-top:4px;
border-top:2px solid var(--cr-primary)!important;
border-bottom:none!important;
}

/* ===================================
   RESPONSIVE - MOBILE
=================================== */
@media(max-width:680px){
.cr-form-grid{grid-template-columns:1fr;padding:15px 18px 10px;}
.cr-form-group.full-width{grid-column:1;}
.cr-car-info-grid{grid-template-columns:1fr 1fr;}
.cr-addons-grid{grid-template-columns:1fr 1fr;}
.cr-service-grid{grid-template-columns:1fr;}
.cr-step-heading{font-size:22px;padding:20px 18px 0;}
.cr-step-buttons{padding:15px 18px 22px;}
.cr-summary-card,.cr-price-summary{margin-left:18px;margin-right:18px;}
.cr-car-info-box{margin-left:18px;margin-right:18px;}
.cr-addons-section,.cr-document-section{padding-left:18px;padding-right:18px;}
}

/* ===================================
   FORM GRID LAYOUT
=================================== */
.cr-form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
padding:20px 35px 10px;
}

.cr-form-group{
display:flex;
flex-direction:column;
position:relative;
}

.cr-form-group.full-width{
grid-column:1 / -1;
}

.cr-form-group label{
display:block;
background:transparent!important;
padding:0!important;
font-size:12px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.8px;
color:var(--cr-text-muted);
margin-bottom:7px;
}

.cr-form-group input:focus,
.cr-form-group select:focus,
.cr-form-group textarea:focus{
border-color:var(--cr-primary);
border-bottom-color:var(--cr-primary);
}

.cr-form-group textarea{
resize:vertical;
min-height:80px;
}

.cr-form-group small{
margin-top:5px;
font-size:12px;
font-weight:600;
color:var(--cr-primary);
}

/* ===================================
   CAR AUTOCOMPLETE DROPDOWN
=================================== */
.cr-car-dropdown{
position:absolute;
left:0;
right:0;
top:100%;
background:var(--cr-bg);
border:1px solid var(--cr-border);
border-top:none;
z-index:9999;
max-height:220px;
overflow-y:auto;
box-shadow:0 8px 24px rgba(0,0,0,.12);
}

.cr-car-dropdown-item{
padding:11px 16px;
cursor:pointer;
font-size:14px;
color:var(--cr-text);
border-bottom:1px solid var(--cr-border);
transition:background .15s;
}

.cr-car-dropdown-item:last-child{border-bottom:none;}

.cr-car-dropdown-item:hover{
background:var(--cr-bg-card2);
color:var(--cr-primary);
}

/* ===================================
   STEP 2 - SELECTED CAR INFO BOX
=================================== */
.cr-car-info-box{
margin:10px 35px 20px;
border:1px solid var(--cr-border);
border-left:4px solid var(--cr-primary);
background:var(--cr-bg-card);
}

.cr-car-info-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
}

.cr-info-item{
display:flex;
flex-direction:column;
padding:14px 18px;
border-right:1px solid var(--cr-border);
border-bottom:1px solid var(--cr-border);
}

.cr-info-item:last-child{border-right:none;}
.cr-info-item:nth-child(4n){border-right:none;}

.cr-info-label{
font-size:11px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.8px;
color:var(--cr-text-muted);
margin-bottom:5px;
}

.cr-info-value{
font-size:15px;
font-weight:700;
color:var(--cr-primary);
font-family:var(--cr-font-head);
}

/* ===================================
   STEP NAVIGATION BUTTONS
=================================== */
.cr-step-buttons{
display:flex;
gap:12px;
padding:20px 35px 30px;
justify-content:flex-end;
align-items:center;
}

.cr-btn-primary{
background:var(--cr-primary);
color:var(--cr-bg-deep);
}

.cr-btn-primary:hover{
background:var(--cr-primary-dark);
color:var(--cr-bg-deep);
}

.cr-btn-secondary{
background:transparent;
color:var(--cr-text);
border:2px solid var(--cr-border)!important;
}

.cr-btn-secondary:hover{
border-color:var(--cr-primary)!important;
color:var(--cr-primary);
}

.cr-btn-success{
background:var(--cr-primary);
color:var(--cr-bg-deep);
}

.cr-btn-success:hover{
background:var(--cr-primary-dark);
color:var(--cr-bg-deep);
}

/* ===================================
   STEP 3 - ADD-ONS SECTION
=================================== */
.cr-addons-section{
padding:10px 35px 15px;
}

.cr-addons-section h3{
font-size:14px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.8px;
color:var(--cr-text);
margin:0 0 14px 0;
padding-bottom:10px;
border-bottom:1px solid var(--cr-border);
}

.cr-addons-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
}

.cr-addon-card{
cursor:pointer;
display:block;
}

.cr-addon-card input[type="checkbox"]{display:none;}

.cr-addon-content{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 14px;
border:1px solid var(--cr-border);
background:var(--cr-bg-card);
transition:all .2s;
font-size:14px;
color:var(--cr-text);
}

.cr-addon-card input:checked + .cr-addon-content{
border-color:var(--cr-primary);
background:var(--cr-bg-card2);
}

.cr-addon-price{
font-weight:700;
color:var(--cr-primary);
font-size:13px;
margin-left:8px;
white-space:nowrap;
}

/* Availability message */
#cr-avail-msg-box{
margin:0 35px 15px;
padding:12px 16px;
border-left:4px solid var(--cr-primary);
background:var(--cr-bg-card2);
font-size:14px;
color:var(--cr-text);
}

/* ===================================
   STEP 4 - DOCUMENT UPLOAD
=================================== */
.cr-document-section{
padding:10px 35px 15px;
}

.cr-document-section h3{
font-size:14px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.8px;
color:var(--cr-text);
margin:0 0 12px 0;
}

.cr-file-upload label{
display:flex;
align-items:center;
gap:12px;
padding:16px 20px;
border:2px dashed var(--cr-border);
background:var(--cr-bg-card);
cursor:pointer;
transition:border-color .2s;
font-size:14px;
color:var(--cr-text-muted);
}

.cr-file-upload label:hover{
border-color:var(--cr-primary);
color:var(--cr-primary);
}

.cr-file-upload input[type="file"]{
display:none;
}

.cr-upload-icon{
font-size:22px;
}

/* ===================================
   STEP 5 - SUMMARY CARD
=================================== */
.cr-summary-card{
margin:20px 35px 0;
border:1px solid var(--cr-border);
background:var(--cr-bg-card);
}

.cr-summary-row{
display:flex;
justify-content:space-between;
align-items:center;
padding:13px 20px;
border-bottom:1px solid var(--cr-border);
}

.cr-summary-row:last-child{border-bottom:none;}

.cr-summary-label{
font-size:12px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.8px;
color:var(--cr-text-muted);
}

.cr-summary-value{
font-size:15px;
font-weight:600;
color:var(--cr-text);
}

/* ===================================
   STEP 5 - PRICE BREAKDOWN
=================================== */
.cr-price-summary{
margin:20px 35px 10px;
border:1px solid var(--cr-border);
background:var(--cr-bg-card);
padding:20px;
}

.cr-price-summary h3{
font-size:14px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.8px;
color:var(--cr-text);
margin:0 0 16px 0;
padding-bottom:10px;
border-bottom:1px solid var(--cr-border);
}

.cr-price-row{
display:flex;
justify-content:space-between;
padding:9px 0;
font-size:14px;
color:var(--cr-text-light);
border-bottom:1px solid var(--cr-border);
}

.cr-price-row:last-child{border-bottom:none;}

.cr-total-row{
font-size:18px;
font-weight:800;
color:var(--cr-primary);
font-family:var(--cr-font-head);
text-transform:uppercase;
letter-spacing:.5px;
padding-top:14px;
margin-top:4px;
border-top:2px solid var(--cr-primary)!important;
border-bottom:none!important;
}

/* ===================================
   RESPONSIVE
=================================== */
@media(max-width:680px){
.cr-form-grid{
grid-template-columns:1fr;
padding:15px 18px 10px;
}
.cr-form-group.full-width{grid-column:1;}
.cr-car-info-grid{grid-template-columns:1fr 1fr;}
.cr-addons-grid{grid-template-columns:1fr 1fr;}
.cr-service-grid{grid-template-columns:1fr;}
.cr-step-heading{font-size:22px;padding:20px 18px 0;}
.cr-step-buttons{padding:16px 18px 24px;}
.cr-summary-card,.cr-price-summary{margin-left:18px;margin-right:18px;}
.cr-car-info-box,.cr-document-section,.cr-addons-section{margin-left:18px;margin-right:18px;padding-left:0;padding-right:0;}
}