/* ===========================
   RUHANMAS RENT A CAR
   BOOKING FORM STYLES
   (extends style.css theme)
=========================== */

.booking-section{
    max-width:960px;
    margin:0 auto;
    padding:70px 6% 100px;
}

/* ---------- HEADING ---------- */
.booking-heading{
    text-align:center;
    margin-bottom:45px;
}

.booking-heading h1{
    font-size:42px;
    font-weight:800;
    color:var(--blue-dark);
}

.booking-heading h1 span{
    color:var(--blue-main);
}

.booking-heading p{
    margin-top:12px;
    color:#4a5a72;
    font-size:16px;
}

/* ===========================
        STEPPER
=========================== */
.stepper{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:50px;
}

.step{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    min-width:110px;
}

.step-circle{
    width:44px;
    height:44px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:16px;
    background:#dfe9ff;
    color:var(--blue-main);
    border:2px solid #dfe9ff;
    transition:.4s;
}

.step-label{
    font-size:13px;
    font-weight:600;
    color:#8091ab;
    letter-spacing:.5px;
    transition:.4s;
}

.step.active .step-circle,
.step.done .step-circle{
    background:linear-gradient(135deg,var(--blue-dark),var(--blue-main));
    border-color:var(--blue-main);
    color:white;
    box-shadow:0 0 0 6px rgba(0,85,255,.15);
}

.step.done .step-circle{
    background:linear-gradient(135deg,var(--blue-main),var(--blue-electric));
}

.step.active .step-label,
.step.done .step-label{
    color:var(--blue-dark);
}

.step-line{
    flex:1;
    max-width:90px;
    height:3px;
    background:#dfe9ff;
    margin:0 6px 26px;
    border-radius:10px;
    position:relative;
    overflow:hidden;
}

.step-line::after{
    content:"";
    position:absolute;
    inset:0;
    width:0%;
    background:linear-gradient(90deg,var(--blue-main),var(--blue-electric));
    transition:.5s;
}

.step-line.filled::after{
    width:100%;
}

/* ===========================
        FORM PANELS
=========================== */
.form-panel{
    display:none;
    background:white;
    border-radius:30px;
    padding:40px 35px;
    box-shadow:0 20px 50px rgba(0,60,150,.12);
    border:1px solid #eaf1ff;
    animation:panelIn .4s ease;
}

.form-panel.active{
    display:block;
}

@keyframes panelIn{
    from{opacity:0; transform:translateY(15px);}
    to{opacity:1; transform:translateY(0);}
}

.panel-title{
    font-size:22px;
    font-weight:800;
    color:var(--blue-dark);
    margin-bottom:30px;
    display:flex;
    align-items:center;
    gap:12px;
}

.panel-title i{
    color:var(--blue-main);
}

/* ---------- GRID / INPUTS ---------- */
.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px 25px;
}

.input-group{
    display:flex;
    flex-direction:column;
    gap:8px;
    position:relative;
}

.input-group.full{
    grid-column:1/-1;
}

.input-group label{
    font-size:14px;
    font-weight:600;
    color:var(--blue-dark);
}

.input-group input[type="text"],
.input-group input[type="email"],
.input-group input[type="tel"],
.input-group input[type="date"],
.input-group input[type="time"],
.input-group select{

    /* =========================================================
   BOOKING FORM — TEXT INPUT UPPERCASE
========================================================= */

#fullName,
#identity,
#address,
#otherLocation{
    text-transform: uppercase;
}

    padding:13px 16px;
    border:2px solid #e3ebfb;
    border-radius:14px;
    font-size:15px;
    font-family:inherit;
    color:#1c2b45;
    background:#f8faff;
    transition:.3s;
}

.input-group input:focus,
.input-group select:focus{
    outline:none;
    border-color:var(--blue-main);
    background:white;
    box-shadow:0 0 0 4px rgba(0,85,255,.12);
}

.error-msg{
    display:none;
    font-size:12.5px;
    color:#ff4d5e;
    font-weight:600;
}

.input-group.invalid input,
.input-group.invalid select{
    border-color:#ff4d5e;
    background:#fff5f6;
}

.input-group.invalid .error-msg{
    display:block;
}

/* ---------- RADIO: DRIVING TYPE ---------- */
.radio-row{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}

.radio-option{
    flex:1;
    min-width:160px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 18px;
    border:2px solid #e3ebfb;
    border-radius:14px;
    background:#f8faff;
    cursor:pointer;
    font-weight:600;
    color:#1c2b45;
    transition:.3s;
}

.radio-option input{
    accent-color:var(--blue-main);
    width:18px;
    height:18px;
}

.radio-option:has(input:checked){
    border-color:var(--blue-main);
    background:linear-gradient(135deg,#eaf2ff,#f4f8ff);
    box-shadow:0 6px 18px rgba(0,85,255,.15);
}

/* ---------- BUTTON ROW ---------- */
.btn-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:35px;
}

.next-btn,
.back-btn,
.confirm-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:13px 32px;
    border:none;
    border-radius:50px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    transition:.35s;
    font-family:inherit;
}

.next-btn,
.confirm-btn{
    background:linear-gradient(135deg,var(--blue-dark),var(--blue-main));
    color:white;
    box-shadow:0 12px 30px rgba(0,85,255,.3);
}

.next-btn:hover,
.confirm-btn:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(0,85,255,.4);
    background:linear-gradient(135deg,var(--blue-main),var(--blue-electric));
}

.back-btn{
    background:#eef3ff;
    color:var(--blue-main);
}

.back-btn:hover{
    background:#dde9ff;
    transform:translateY(-3px);
}


/* ===========================
        BOOKING SUMMARY
=========================== */
.summary-card{
    background:
    linear-gradient(145deg, rgba(0,18,51,.97), rgba(0,55,120,.92));
    border-radius:22px;
    padding:26px 28px;
    margin-bottom:30px;
    border:1px solid rgba(255,255,255,.15);
    box-shadow:0 20px 45px rgba(0,20,60,.25);
}

.summary-card h3{
    color:white;
    font-size:17px;
    font-weight:800;
    margin-bottom:16px;
    display:flex;
    align-items:center;
    gap:10px;
}

.summary-card h3 i{
    color:var(--yellow);
}

.summary-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 24px;
}

.summary-grid div{
    font-size:13.5px;
    color:rgba(255,255,255,.9);
    padding:8px 0;
    border-bottom:1px dashed rgba(255,255,255,.15);
}

.summary-grid strong{
    display:block;
    color:var(--yellow);
    font-size:11px;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:3px;
    font-weight:700;
}

/* ---------- CAPTCHA ---------- */
.captcha-box{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 20px;
    border:2px solid #e3ebfb;
    border-radius:14px;
    background:#f8faff;
    width:fit-content;
}

.captcha-box input[type="checkbox"]{
    position:absolute;
    opacity:0;
    width:24px;
    height:24px;
    cursor:pointer;
}

.captcha-label{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:600;
    color:#1c2b45;
    cursor:pointer;
}

.check-box{
    width:22px;
    height:22px;
    border:2px solid #b9c9ea;
    border-radius:6px;
    background:white;
    display:inline-block;
    position:relative;
    transition:.25s;
}

.captcha-box input:checked ~ .captcha-label .check-box{
    background:var(--blue-main);
    border-color:var(--blue-main);
}

.captcha-box input:checked ~ .captcha-label .check-box::after{
    content:"\2713";
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:14px;
    font-weight:800;
}

.captcha-icon{
    color:#b9c9ea;
    font-size:20px;
    margin-left:8px;
}

.captcha-box input:checked ~ .captcha-icon{
    color:var(--blue-main);
}

/* ---------- PAYMENT METHOD ---------- */
.payment-methods {
    display: grid;
    grid-template-columns: repeat(2, 220px);
    justify-content: center;
    gap: 16px;
}

.pay-option {
    width: 220px;
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 14px;
    border: 2px solid #e3ebfb;
    border-radius: 16px;
    background: #f8faff;
    cursor: pointer;
    font-weight: 600;
    font-size: 13.5px;
    color: #1c2b45;
    text-align: center;
    transition: .3s;
    box-sizing: border-box;

}

.pay-option input{
    position:absolute;
    opacity:0;
    width:0;
    height:0;
}

.pay-option i{
    font-size:26px;
    color:var(--blue-main);
}

.pay-option:has(input:checked){
    border-color:var(--blue-main);
    background:linear-gradient(135deg,#eaf2ff,#f4f8ff);
    box-shadow:0 10px 24px rgba(0,85,255,.18);
    transform:translateY(-3px);
}

/* ===========================
        CONFIRMATION SCREEN
=========================== */
.confirmation-panel{
    display:none;
    text-align:center;
    background:white;
    border-radius:30px;
    padding:55px 35px;
    box-shadow:0 20px 50px rgba(0,60,150,.12);
    border:1px solid #eaf1ff;
    animation:panelIn .5s ease;
}

.confirmation-panel.active{
    display:block;
}

.confirm-icon{
    font-size:70px;
    color:#2ecc71;
    margin-bottom:15px;
}

.confirmation-panel h2{
    font-size:28px;
    color:var(--blue-dark);
    font-weight:800;
    margin-bottom:10px;
}

.confirmation-panel p{
    color:#5a6b85;
    margin-bottom:30px;
}

.confirmation-panel .summary-card{
    text-align:left;
    margin-bottom:35px;
}

.confirmation-panel .hero-btn{
    background:linear-gradient(135deg,var(--blue-dark),var(--blue-main));
    color:white;
    border:none;
    cursor:pointer;
    font-family:inherit;
}

.confirmation-panel .hero-btn:hover{
    background:var(--yellow);
    color:var(--blue-dark);
}


/* ===========================
        RESPONSIVE
=========================== */
@media(max-width:768px){

    .form-grid,
    .summary-grid{
        grid-template-columns:1fr;
    }

    .payment-methods{
        grid-template-columns:1fr;
    }

    .step-label{
        font-size:11px;
    }

    .step-line{
        max-width:40px;
    }

    .form-panel{
        padding:30px 20px;
    }

    .booking-heading h1{
        font-size:32px;
    }

    .btn-row{
        flex-wrap:wrap;
        gap:14px;
    }

    .btn-row span{
        display:none;
    }
}


/* ===========================
        INFO / NOTICE BOXES
=========================== */
.info-note{
    display:flex;
    align-items:flex-start;
    gap:14px;
    background:linear-gradient(135deg,#eaf2ff,#f4f8ff);
    border:1px solid #d3e3ff;
    border-left:4px solid var(--blue-main);
    border-radius:14px;
    padding:16px 18px;
    margin-bottom:26px;
    grid-column:1/-1;
}

.info-note i{
    font-size:20px;
    color:var(--blue-main);
    margin-top:2px;
}

.info-note p{
    font-size:13.5px;
    line-height:1.6;
    color:#33455f;
}

.info-note strong{
    color:var(--blue-dark);
}

.location-note{
    display:none;
    align-items:center;
    gap:8px;
    margin-top:8px;
    padding:9px 14px;
    border-radius:10px;
    font-size:12.5px;
    font-weight:600;
    background:#fff4e0;
    color:#8a5a00;
    border:1px solid #ffe1a3;
}

.location-note.show{
    display:flex;
}

.location-note i{
    font-size:14px;
}

.location-note.ok{
    background:#e7f9ee;
    color:#1c7a44;
    border-color:#bdeccd;
}

/* ===========================
        LICENSE UPLOAD
=========================== */
.license-upload-section{
    margin-bottom:30px;
}

.upload-heading{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:20px;
}

.upload-icon{
    width:52px;
    height:52px;
    min-width:52px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    color:white;
    margin-top: -15px;
    background:linear-gradient(135deg,var(--blue-dark),var(--blue-main));
}

.upload-heading h3{
    font-size:16px;
    font-weight:800;
    color:var(--blue-dark);
    margin-bottom:3px;
}

.upload-heading p{
    font-size:13px;
    color:#6a7b96;
}

.upload-box{
    display:flex;
    cursor:pointer;
}

.upload-box input[type="file"]{
    position:absolute;
    opacity:0;
    width:0;
    height:0;
}

.upload-content{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-align:center;
    padding:38px 20px;
    border:2px dashed #b9cdf5;
    border-radius:18px;
    background:#f8faff;
    transition:.3s;
}

.upload-box:hover .upload-content{
    border-color:var(--blue-main);
    background:#eef4ff;
}

.upload-content i{
    font-size:34px;
    color:var(--blue-main);
    margin-bottom:4px;
}

.upload-content strong{
    color:var(--blue-dark);
    font-size:15px;
}

.upload-content span{
    font-size:13px;
    color:#6a7b96;
}

.upload-content small{
    font-size:11.5px;
    color:#9aa9c2;
}

.selected-file{
    display:none;
    align-items:center;
    gap:10px;
    margin-top:14px;
    padding:12px 16px;
    border-radius:12px;
    background:#eaf7ee;
    border:1px solid #c3ecce;
    color:#1c7a44;
    font-size:13.5px;
    font-weight:600;
}

.selected-file.show{
    display:flex;
}

.selected-file i{
    font-size:16px;
}

.license-upload-section .error-msg{
    margin-top:10px;
}

.license-upload-section.invalid .upload-content{
    border-color:#ff4d5e;
    background:#fff5f6;
}

.license-upload-section.invalid .error-msg{
    display:block;
}

.input-group.invalid .captcha-box,
.input-group.invalid .payment-methods .pay-option{
    border-color:#ff4d5e;
}


/* ===========================
        RESPONSIVE (TABLET)
=========================== */
@media(max-width:900px){

    .booking-section{
        padding:45px 5% 70px;
    }

    .stepper{
        margin-bottom:36px;
    }

}


/* ===========================
        RESPONSIVE (PHONE)
=========================== */
@media(max-width:600px){

    .booking-section{
        padding:30px 4% 60px;
    }

    .booking-heading h1{
        font-size:26px;
    }

    .booking-heading p{
        font-size:14px;
    }

    .stepper{
        margin-bottom:26px;
    }

    .step{
        min-width:0;
        flex:1;
        gap:5px;
    }

    .step-circle{
        width:34px;
        height:34px;
        font-size:13px;
    }

    .step-label{
        font-size:9.5px;
        letter-spacing:0;
        text-align:center;
    }

    .step-line{
        margin:0 2px 20px;
        max-width:24px;
    }

    .form-panel{
        padding:22px 16px;
        border-radius:20px;
    }

    .panel-title{
        font-size:18px;
        margin-bottom:20px;
    }

    .form-grid{
        gap:16px;
    }

    .radio-row{
        flex-direction:column;
    }

    .radio-option{
        min-width:0;
        width:100%;
    }

    .payment-methods{
        grid-template-columns:1fr;
    }

    .pay-option{
        width:100%;
        flex:1 1 auto;
    }

    .upload-content{
        padding:26px 14px;
    }

    .upload-heading{
        gap:12px;
    }

    .upload-icon{
        width:44px;
        height:44px;
        min-width:44px;
        font-size:18px;
    }

    .btn-row{
        flex-direction:column-reverse;
        align-items:stretch;
        gap:12px;
    }

    .btn-row span{
        display:none;
    }

    .next-btn,
    .back-btn,
    .confirm-btn{
        width:100%;
        justify-content:center;
    }

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

    .confirmation-panel{
        padding:35px 20px;
    }

    .confirm-icon{
        font-size:56px;
    }
}


@media(max-width:380px){

    .step-label{
        display:none;
    }

    .step-circle{
        width:30px;
        height:30px;
        font-size:12px;
    }
}

/* =========================================================
   ============  ALTERATIONS / NEW COMPONENTS  ============
========================================================= */


/* ---------------------------------------------------------
   INFO NOTE VARIANTS
--------------------------------------------------------- */

.info-note.warn{
    background:linear-gradient(135deg,#fff6e5,#fffaf1);
    border-color:#ffe1a3;
    border-left-color:#f0a400;
}

.info-note.warn i{
    color:#c47f00;
}

.info-note.slim{
    margin-bottom:20px;
    padding:13px 16px;
}

.info-note.slim p{
    font-size:13px;
}


/* ---------------------------------------------------------
   FIELD HINT (small helper text under an input)
--------------------------------------------------------- */

.field-hint{
    display:flex;
    align-items:flex-start;
    gap:7px;
    color:#6b7d99;
    font-size:12px;
    line-height:1.5;
}

.field-hint i{
    margin-top:2px;
    color:var(--blue-main);
    font-size:11px;
}


/* ---------------------------------------------------------
   LOCATION NOTE — WARN VARIANT
--------------------------------------------------------- */

.location-note.warn{
    background:#fff4e0;
    color:#8a5a00;
    border-color:#ffe1a3;
}

.location-note{
    align-items:flex-start;
    line-height:1.55;
}

.location-note i{
    margin-top:2px;
}


/* ---------------------------------------------------------
   SAVED-PROGRESS BANNER
--------------------------------------------------------- */

.draft-banner{
    display:flex;
    width: 100%;
    align-items:center;
    justify-content: space-between;
    gap:15px;
    max-width:860px;
    margin:0 auto 30px;
    padding:14px 18px;
    border-radius:16px;
    background:linear-gradient(135deg,#e7f9ee,#f3fdf7);
    border:1px solid #bdeccd;
    border-left:4px solid #1c7a44;
}

.draft-banner.hidden {
    display: none !important;
}

.draft-banner > i{
    flex-shrink:0;
    color:#1c7a44;
    font-size:19px;
}

.draft-banner p{
    text-align: left;
    margin:0;
    color:#155e35;
    font-size:13px;
    line-height:1.6;
}

.draft-clear{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:9px 15px;
    border:1px solid #bdeccd;
    border-radius:50px;
    background:white;
    color:#1c7a44;
    font-size:12px;
    font-weight:700;
    font-family:inherit;
    cursor:pointer;
    transition:.25s;
}

.draft-clear:hover{
    background:#1c7a44;
    border-color:#1c7a44;
    color:white;
}


/* ---------------------------------------------------------
   ADDRESS TEXTAREA (expanded)
--------------------------------------------------------- */

.address-box{
    width:100%;
    min-height:110px;
    padding:14px 16px;
    border:2px solid #e3ebfb;
    border-radius:14px;
    background:#f8faff;
    color:#1c2b45;
    font-size:15px;
    font-family:inherit;
    line-height:1.65;
    resize:vertical;
    transition:.3s;
}

.address-box:focus{
    outline:none;
    border-color:var(--blue-main);
    background:white;
    box-shadow:0 0 0 4px rgba(0,85,255,.12);
}

.input-group.invalid .address-box{
    border-color:#ff4d5e;
    background:#fff5f6;
}


/* =========================================================
   STEP 2 — RENTAL, ORGANISED INTO BLOCKS
========================================================= */

.rental-block{
    margin-bottom:28px;
    padding:24px 24px 26px;
    border-radius:20px;
    background:#fbfdff;
    border:1px solid #e3ebfb;
    overflow: visible;
}

.rental-block:last-of-type{
    margin-bottom:0;
}

.rental-block-title{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:20px;
    padding-bottom:13px;
    border-bottom:1px solid #e3ebfb;
    color:var(--blue-dark);
    font-size:16px;
    font-weight:800;
}

.rental-block-title i{
    color:var(--blue-main);
    font-size:15px;
}

.rental-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px 25px;
    align-items:start;
}


/* ---------------------------------------------------------
   RETURN LOCATION — PLAIN TEXT DISPLAY (NOT A DROPDOWN)
--------------------------------------------------------- */

.return-location-display{
    display:flex;
    align-items:center;
    gap:11px;
    padding:13px 16px;
    border:2px dashed #d6e2f7;
    border-radius:14px;
    background:#f1f6ff;
    color:#7c8ca6;
    font-size:15px;
    font-weight:600;
    min-height:52px;
}

.return-location-display i{
    flex-shrink:0;
    color:#a9bcd8;
    font-size:15px;
}

.return-location-display.filled{
    border-style:solid;
    border-color:#bdeccd;
    background:#f2fbf6;
    color:#1c7a44;
}

.return-location-display.filled i{
    color:#1c7a44;
}


/* ---------------------------------------------------------
   "OTHER" LOCATION BOX — HIDDEN UNTIL NEEDED
--------------------------------------------------------- */

.other-location{
    display:none;
}

.other-location.show{
    display:flex;
    animation:slideDown .3s ease;
}

@keyframes slideDown{
    from{ opacity:0; transform:translateY(-8px); }
    to  { opacity:1; transform:translateY(0);    }
}


/* =========================================================
   STEP 3 — LICENCE UPLOAD (UP TO 4 PHOTOS)
========================================================= */

.upload-box.is-full{
    display:none;
}

.license-counter{
    display:flex;
    align-items:center;
    gap:8px;
    margin:14px 0 0;
    color:#6b7d99;
    font-size:12.5px;
    font-weight:600;
}

.license-counter i{
    color:#a9bcd8;
}

.license-counter.has-files{
    color:#1c7a44;
}

.license-counter.has-files i{
    color:#1c7a44;
}


/* PREVIEW GRID */

.license-preview-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
    gap:14px;
    margin-top:14px;
}

.license-preview-grid:empty{
    margin-top:0;
}

.licence-thumb{
    position:relative;
    border-radius:14px;
    overflow:hidden;
    background:#f1f6ff;
    border:2px solid #e3ebfb;
    animation:thumbIn .3s ease;
}

@keyframes thumbIn{
    from{ opacity:0; transform:scale(.92); }
    to  { opacity:1; transform:scale(1);   }
}

.licence-thumb img{
    display:block;
    width:100%;
    height:105px;
    object-fit:cover;
}

.licence-name{
    display:block;
    padding:7px 9px;
    background:white;
    color:#6b7d99;
    font-size:10.5px;
    font-weight:600;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}


/* REMOVE (×) BUTTON */

.licence-remove{
    position:absolute;
    top:7px;
    right:7px;
    width:26px;
    height:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:none;
    border-radius:50%;
    background:rgba(214,48,64,.92);
    color:white;
    font-size:12px;
    cursor:pointer;
    transition:.25s;
    box-shadow:0 3px 10px rgba(0,0,0,.25);
}

.licence-remove:hover{
    background:#b5202f;
    transform:scale(1.12);
}


/* =========================================================
   STEP 3 — PAYMENT (CATEGORY -> METHOD)
========================================================= */

.payment-section{
    margin-top:30px;
    padding:24px;
    border-radius:20px;
    background:#fbfdff;
    border:1px solid #e3ebfb;
}

.payment-heading{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:20px;
    padding-bottom:13px;
    border-bottom:1px solid #e3ebfb;
    color:var(--blue-dark);
    font-size:16px;
    font-weight:800;
}

.payment-heading i{
    color:var(--blue-main);
    font-size:15px;
}


/* CATEGORY CARDS */

.pay-category-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.pay-category{
    position:relative;
    cursor:pointer;
}

.pay-category input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.pay-category-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    height:100%;
    padding:20px 16px;
    border:2px solid #e3ebfb;
    border-radius:16px;
    background:white;
    text-align:center;
    transition:.28s;
}

.pay-category-inner i{
    color:#a9bcd8;
    font-size:26px;
    transition:.28s;
}

.pay-category-inner strong{
    color:var(--blue-dark);
    font-size:15px;
    font-weight:800;
}

.pay-category-inner small{
    color:#7c8ca6;
    font-size:11px;
    line-height:1.45;
}

.pay-category:hover .pay-category-inner{
    border-color:#b9d1ff;
    transform:translateY(-2px);
}

.pay-category:has(input:checked) .pay-category-inner{
    border-color:var(--blue-main);
    background:#f0f6ff;
    box-shadow:0 0 0 4px rgba(0,85,255,.1);
}

.pay-category:has(input:checked) .pay-category-inner i{
    color:var(--blue-main);
}

.input-group.invalid .pay-category-inner{
    border-color:#ff4d5e;
}


/* PROMPT BEFORE A CATEGORY IS PICKED */

.pay-prompt{
    display:flex;
    align-items:center;
    gap:9px;
    margin:18px 0 0;
    padding:14px 16px;
    border-radius:14px;
    background:#f1f6ff;
    border:1px dashed #d6e2f7;
    color:#6b7d99;
    font-size:12.5px;
    font-weight:600;
}

.pay-prompt i{
    color:var(--blue-main);
}

.pay-prompt.hide{
    display:none;
}


/* METHOD BLOCKS — HIDDEN UNTIL A CATEGORY IS PICKED */

.pay-method-block{
    display:none;
    margin-top:22px;
}

.pay-method-block.show{
    display:flex;
    animation:slideDown .3s ease;
}


/* =========================================================
   STEP 4 — CONFIRM
========================================================= */

.confirm-divider{
    height:0;
    margin:0 0 26px;
    border:none;
    border-top:2px solid #e3ebfb;
    opacity:1;
}


/* ---------------------------------------------------------
   PAYMENT DETAILS CARD
--------------------------------------------------------- */

.payment-details-card{
    margin-top:24px;
    padding:26px;
    border-radius:20px;
    background:#fbfdff;
    border:1px solid #e3ebfb;
}

.payment-details-card h3{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
    padding-bottom:13px;
    border-bottom:1px solid #e3ebfb;
    color:var(--blue-dark);
    font-size:16px;
    font-weight:800;
}

.payment-details-card h3 i{
    color:var(--blue-main);
    font-size:15px;
}


/* REMINDER (sits above the amounts) */

.payment-reminder{
    display:flex;
    align-items:flex-start;
    gap:13px;
    margin-bottom:22px;
    padding:16px 18px;
    border-radius:14px;
    background:linear-gradient(135deg,#fff6e5,#fffaf1);
    border:1px solid #ffe1a3;
    border-left:4px solid #f0a400;
}

.payment-reminder i{
    flex-shrink:0;
    margin-top:2px;
    color:#c47f00;
    font-size:17px;
}

.payment-reminder p{
    margin:0;
    color:#7a5400;
    font-size:13px;
    line-height:1.7;
}

.payment-reminder strong{
    color:#5e4000;
}


/* PAY TO / PAYMENT FOR / REFERENCE */

.pay-detail-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px 24px;
    margin-bottom:22px;
}

.pay-detail-grid > div{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding-bottom:12px;
    border-bottom:1px dashed #e3ebfb;
}

.pay-detail-grid strong{
    color:#7c8ca6;
    font-size:11px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.pay-detail-grid span{
    color:var(--blue-dark);
    font-size:14px;
    font-weight:600;
    word-break:break-word;
}


/* CHARGE TABLE */

.charge-table{
    padding:18px 20px;
    border-radius:16px;
    background:white;
    border:1px solid #e3ebfb;
}

.charge-row{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    padding:9px 0;
    color:#4a5c78;
    font-size:13.5px;
}

.charge-row > span:last-child{
    flex-shrink:0;
    font-weight:700;
    font-variant-numeric:tabular-nums;
}

.charge-row.total{
    margin-top:8px;
    padding-top:14px;
    border-top:2px solid #e3ebfb;
    color:var(--blue-dark);
    font-size:16px;
    font-weight:800;
}

.charge-row.total > span:last-child{
    color:var(--blue-main);
    font-size:20px;
    font-weight:800;
}

.charge-row.deposit-row{
    margin-top:10px;
    padding:11px 13px;
    border-radius:11px;
    background:#e7f9ee;
    color:#1c7a44;
    font-weight:700;
}

.charge-row.balance-row{
    margin-top:7px;
    padding:11px 13px;
    border-radius:11px;
    background:#fff4e0;
    color:#8a5a00;
    font-weight:700;
}


/* TERMS GROUP */

.terms-group{
    margin-top:26px;
    padding:18px 20px;
    border-radius:16px;
    background:#fbfdff;
    border:1px solid #e3ebfb;
}

.terms-group.invalid{
    border-color:#ff4d5e;
    background:#fff5f6;
}

.terms-group.invalid .error-msg{
    display:block;
}


/* =========================================================
   BOOKING SUBMITTED — TWO BUTTONS
========================================================= */

.finish-btn-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:20px;
}

.confirmation-panel .hero-btn{
    border:none;
    font-family:inherit;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content: center;
    gap: 8px;
}

.confirmation-panel .hero-btn.ghost{
    background:white;
    color:var(--blue-main);
    border:2px solid var(--blue-main);
    box-shadow:none;
}

.confirmation-panel .hero-btn.ghost:hover{
    background:var(--blue-main);
    color:white;
}

.finish-note{
    display:flex;
    align-items:flex-start;
    gap:8px;
    justify-content:center;
    max-width:520px;
    margin:18px auto 0;
    color:#6b7d99;
    font-size:12px;
    line-height:1.6;
    text-align:left;
}

.finish-note i{
    margin-top:2px;
    flex-shrink:0;
    color:var(--blue-main);
}


/* The copied payment card on the submitted screen */

.confirmation-panel .payment-details-card{
    text-align:left;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:768px){

    .rental-grid,
    .pay-detail-grid,
    .pay-category-row{
        grid-template-columns:1fr;
    }

    .rental-block {
        overflow: visible;
    }

    .payment-section,
    .payment-details-card{
        padding:20px 18px;
    }

    .draft-banner{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 8px;
    }

    .draft-banner p {
        order: 1;
        text-align: center;
    }

    .draft-clear{
        width:100%;
        justify-content:center;
        order: 2;
    }

    .license-preview-grid{
        grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
    }

    .finish-btn-row .hero-btn{
        width:100%;
        justify-content:center;
    }

    .charge-row.total{
        font-size:15px;
    }

    .charge-row.total > span:last-child{
        font-size:18px;
    }

    .rental-block {
        overflow: visible;
    }

    .rental-grid {
        width: 100%;
        min-width: 0;
    }

    .rental-grid .input-group {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .rental-grid select {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .finish-btn-row .hero-btn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    position: relative;
    top: 1px;
}

}


@media (max-width:480px){

    .rental-block,
    .payment-section,
    .payment-details-card{
        padding:18px 15px;
        box-sizing:border-box;
        width:100%;
        max-width:100%;
    }

    .charge-row{
        font-size:12.5px;
    }

    .licence-thumb img{
        height:90px;
    }

    .return-location-display{
        font-size:14px;
    }

}

/* =========================================================
   RUHANMAS — CALENDAR & MOBILE SELECT FIX
========================================================= */

/* ---------- DATE INPUT ---------- */

.rental-grid input[type="date"]{
    width:100%;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
    appearance:auto;
    -webkit-appearance:auto;
}


/* Make the calendar icon stay inside the input */
.rental-grid input[type="date"]::-webkit-calendar-picker-indicator{
    cursor:pointer;
    opacity:.75;
    margin-left:4px;
}


/* =========================================================
   MOBILE DROPDOWN FIX
========================================================= */

.rental-grid select,
.input-group select {

    width:100%;
    max-width:100%;
    min-width:0;

    box-sizing:border-box;

    font-size:15px;

    padding:12px 14px;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}


/* PHONE */

@media (max-width:600px) {

    .rental-grid select,
    .input-group select {

        width:100%;
        max-width:100%;

        font-size:14px;

        padding:11px 12px;

        border-radius:12px;
    }

}


/* SMALL PHONE */

@media (max-width:380px) {

    .rental-grid select,
    .input-group select {

        font-size:13px;

        padding:10px 11px;

    }

}

/* =========================================================
   FLATPICKR — RUHANMAS CALENDAR
========================================================= */

.flatpickr-calendar {
    font-family: inherit;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0, 60, 150, .18);
    border: 1px solid #e3ebfb;
    overflow: hidden;
}


/* Calendar width */

.flatpickr-calendar.open {
    width: 320px;
    max-width: calc(100vw - 30px);
}


/* Header */

.flatpickr-months {
    padding: 8px 6px;
}


/* Days */

.flatpickr-day {
    border-radius: 8px;
    margin: 2px;
}


/* Selected */

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--blue-main);
    border-color: var(--blue-main);
}


/* Today */

.flatpickr-day.today {
    border-color: var(--blue-main);
}


/* Hover */

.flatpickr-day:hover {
    background: #eaf2ff;
    border-color: #eaf2ff;
}


/* =========================================================
   BOOKED DATES
========================================================= */

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: #c5ccd8;
    background: #f3f4f6;
    text-decoration: line-through;
    cursor: not-allowed;
    opacity: .7;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 480px) {

    .flatpickr-calendar {
        width: calc(100vw - 30px) !important;
        max-width: calc(100vw - 30px) !important;
        left: 15px !important;
        right: 15px !important;
    }


    .flatpickr-days,
    .dayContainer {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }


    .flatpickr-day {
        max-width: none;
        width: calc(100% / 7);
        margin: 0;
    }


    .flatpickr-innerContainer {
        width: 100%;
    }


    .flatpickr-rContainer {
        width: 100%;
    }

}

/* =========================================================
   CALENDAR DATE PICKER (PICK-UP + RETURN)
========================================================= */

.date-field{
    position:relative;
}

.date-field input{
    width:100%;
    cursor:pointer;
    padding-right:44px !important;
}

.date-field-icon{
    position:absolute;
    right:16px;
    top:16px;
    color:var(--blue-main);
    pointer-events:none;
    font-size:15px;
}

.calendar-pop{
    display:none;
    position:absolute;
    z-index:60;
    top:calc(100% + 8px);
    left:0;
    width:300px;
    max-width:calc(100vw - 40px);
    background:#ffffff;
    border-radius:18px;
    border:1px solid #e3ebfb;
    box-shadow:0 20px 45px rgba(0,25,70,.22);
    padding:16px;
}

.calendar-pop.show{
    display:block;
    animation:calPopIn .18s ease;
}

@keyframes calPopIn{
    from{ opacity:0; transform:translateY(-6px); }
    to{ opacity:1; transform:translateY(0); }
}

.cal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:12px;
}

.cal-title{
    font-size:14.5px;
    font-weight:800;
    color:var(--blue-dark);
}

.cal-nav{
    width:30px;
    height:30px;
    border:none;
    border-radius:50%;
    background:#f0f4ff;
    color:var(--blue-main);
    font-size:12px;
    cursor:pointer;
    transition:.25s;
}

.cal-nav:hover:not(:disabled){
    background:var(--blue-main);
    color:#ffffff;
}

.cal-nav:disabled{
    opacity:.3;
    cursor:not-allowed;
}

.cal-weekdays,
.cal-grid{
    display:grid;
    grid-template-columns:repeat(7, 1fr);
}

.cal-weekdays{
    margin-bottom:4px;
}

.cal-weekdays span{
    text-align:center;
    font-size:10.5px;
    font-weight:700;
    color:#9aa7bd;
}

.cal-grid{
    row-gap:4px;
}

.cal-day{
    aspect-ratio:1/1;
    display:flex;
    align-items:center;
    justify-content:center;
    border:none;
    background:transparent;
    border-radius:50%;
    font-size:13px;
    font-weight:600;
    color:#1c2b45;
    cursor:pointer;
    transition:.2s;
}

.cal-day.is-empty{
    cursor:default;
}

.cal-day:not(.is-disabled):not(.is-empty):hover{
    background:#e6efff;
    color:var(--blue-main);
}

.cal-day.is-today{
    border:2px solid var(--blue-main);
    color:var(--blue-main);
}

.cal-day.in-range{
    background:#e6efff;
    color:var(--blue-main);
}

.cal-day.is-selected{
    background:var(--blue-main);
    color:#ffffff;
    box-shadow:0 6px 14px rgba(0,85,255,.35);
}

.cal-day.is-disabled{
    color:#c7cfdd;
    cursor:not-allowed;
}

.cal-day.is-booked{
    color:#ff8a8a;
    background:#fff2f2;
    text-decoration:line-through;
}

.prefill-note{
    display:none;
    color:#1a9c5b;
    font-weight:600;
}

.prefill-note.show{
    display:flex;
}


/* =========================================================
   FIXES: CALENDAR VISIBILITY + RESPONSIVE DROPDOWNS
========================================================= */

/* Nothing may clip the calendar pop-ups */
.form-panel,
.rental-block,
.rental-grid,
.input-group,
.date-field{
    overflow:visible;
}

.calendar-pop{
    z-index:999;
    box-sizing:border-box;
}

/* Grid columns must be allowed to shrink (long <option> text used to
   stretch the column wider than the phone screen) */
.form-grid,
.rental-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

.form-grid > *,
.rental-grid > *,
.input-group{
    min-width:0;
}

.input-group select,
.rental-grid select{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
}

@media (max-width:768px){

    .form-grid,
    .rental-grid{
        grid-template-columns:minmax(0, 1fr);
    }

    /* Calendar follows the width of its field */
    .calendar-pop{
        width:100%;
        max-width:340px;
        padding:14px;
    }
}

@media (max-width:600px){

    .form-panel{
        padding:26px 16px;
        border-radius:22px;
    }

    /* 16px stops iOS from zooming in and keeps the control compact */
    .input-group select,
    .rental-grid select,
    .input-group input[type="text"],
    .input-group input[type="email"],
    .input-group input[type="tel"]{
        font-size:16px;
        padding:11px 36px 11px 12px;
        min-height:46px;
        border-radius:12px;
    }

    .input-group select,
    .rental-grid select{
        -webkit-appearance:none;
        appearance:none;
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230055ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat:no-repeat;
        background-position:right 12px center;
        background-size:12px 8px;
    }

    .cal-day{
        font-size:12.5px;
    }
}

/* =========================================================
   IDENTITY DOCUMENTS - 4 FIXED-SIZE UPLOAD BOXES
========================================================= */

.doc-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
}

.doc-label{
    display:block;
    margin-bottom:8px;
    font-size:13px;
    font-weight:700;
    color:var(--blue-dark);
}

/* fixed card shape = every photo is shown at the same size */
.doc-frame{
    position:relative;
    aspect-ratio:1.586 / 1;
    border:2px dashed #b9cdf5;
    border-radius:14px;
    background:#f8faff;
    overflow:hidden;
    transition:.25s;
}

.doc-frame:hover{ border-color:var(--blue-main); background:#eef4ff; }

.doc-box{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

.doc-box input[type="file"]{
    position:absolute;
    opacity:0;
    width:0;
    height:0;
}

.doc-placeholder{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    padding:10px;
    text-align:center;
}

.doc-placeholder i{ font-size:26px; color:var(--blue-main); }
.doc-placeholder strong{ font-size:13px; color:var(--blue-dark); }
.doc-placeholder small{ font-size:11px; color:#9aa9c2; }

/* whole photo always visible: never too big, never too small, never cropped */
.doc-preview{
    display:none;
    width:100%;
    height:100%;
    object-fit:contain;
    background:#fff;
}

.doc-slot.has-image .doc-frame{ border-style:solid; border-color:#8fd3a8; }
.doc-slot.has-image .doc-preview{ display:block; }
.doc-slot.has-image .doc-placeholder{ display:none; }
.doc-slot.has-image .doc-box{ pointer-events:none; }   /* use the X to replace */

.doc-remove{
    display:none;
    position:absolute;
    top:6px;
    right:6px;
    width:26px;
    height:26px;
    align-items:center;
    justify-content:center;
    border:none;
    border-radius:50%;
    background:rgba(214,48,64,.92);
    color:#fff;
    font-size:12px;
    cursor:pointer;
}

.doc-slot.has-image .doc-remove{ display:flex; }

.doc-error{
    display:none;
    margin-top:6px;
    font-size:12px;
    color:#ff4d5e;
}

.doc-slot.invalid .doc-frame{ border-color:#ff4d5e; background:#fff5f6; }
.doc-slot.invalid .doc-error{ display:block; }

@media (max-width:480px){
    .doc-grid{ grid-template-columns:minmax(0, 1fr); }
}


/* =========================================================
   RUHANMAS — MODERN BOOKING DROPDOWNS
========================================================= */

.booking-section .input-group select,
.booking-section .rental-grid select{

    width: 100%;
    max-width: 100%;
    min-width: 0;

    height: 48px;

    padding: 0 42px 0 15px;

    border: 1.5px solid #dce6f5;
    border-radius: 12px;

    background-color: #f8faff;

    color: #1c2b45;

    font-family: inherit;
    font-size: 15px;
    font-weight: 500;

    outline: none;

    cursor: pointer;

    box-sizing: border-box;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}


.booking-section .input-group select:hover,
.booking-section .rental-grid select:hover{

    border-color: #b9cdf3;

    background-color: #ffffff;

}


.booking-section .input-group select:focus,
.booking-section .rental-grid select:focus{

    border-color: var(--blue-main);

    background-color: #ffffff;

    box-shadow:
        0 0 0 4px rgba(0, 85, 255, .10);

}


/* ---------- MOBILE ---------- */

@media (max-width: 768px){

    .booking-section .input-group select,
    .booking-section .rental-grid select{

        width: 100%;

        height: 46px;

        min-height: 46px;

        font-size: 15px;

        padding-left: 13px;
        padding-right: 38px;

        border-radius: 11px;

    }

}


/* ---------- SMALL PHONE ---------- */

@media (max-width: 480px){

    .booking-section .input-group select,
    .booking-section .rental-grid select{

        width: 100%;

        height: 46px;

        font-size: 14px;

        padding-left: 12px;
        padding-right: 36px;

    }

}

/* =========================================================
   BOOKING FORM - FORCE UPPERCASE TEXT
========================================================= */

#fullName,
#identity,
#address,
#otherLocation {
    text-transform: uppercase;
}

/* =========================================================
   PAYMENT LOCKED UNTIL OTP VERIFICATION
========================================================= */

.payment-locked {
    opacity: 0.55;
    pointer-events: none;
}
/* OTP verification modal — shown only after Proceed to Payment */
.otp-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:20px}.otp-modal.show{display:flex}.otp-modal-backdrop{position:absolute;inset:0;background:rgba(12,24,45,.58);backdrop-filter:blur(3px)}.otp-modal-card{position:relative;width:min(460px,100%);background:#fff;border-radius:22px;padding:34px 30px 30px;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.24);animation:otpPop .2s ease}.otp-modal-close{position:absolute;right:18px;top:14px;border:0;background:transparent;font-size:30px;line-height:1;color:#777;cursor:pointer}.otp-modal-icon{width:70px;height:70px;margin:0 auto 16px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#eef5ff;color:var(--blue-main);font-size:30px}.otp-modal-card h3{font-size:24px;font-weight:800;margin:0 0 8px}.otp-modal-card>p{color:#687386;margin-bottom:20px}.otp-input-wrapper input{width:100%;height:58px;border:2px solid #dce4ef;border-radius:14px;text-align:center;font-size:25px;font-weight:700;letter-spacing:8px;outline:none}.otp-input-wrapper input:focus{border-color:var(--blue-main);box-shadow:0 0 0 4px rgba(25,99,210,.10)}.otp-verify-btn{width:100%;border:0;border-radius:14px;padding:15px 18px;background:var(--blue-main);color:#fff;font:inherit;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(25,99,210,.22);transition:.2s}.otp-verify-btn:hover{transform:translateY(-1px)}.otp-verify-btn:disabled{opacity:.72;cursor:not-allowed;transform:none}.otp-message{min-height:22px;margin:12px 0!important;font-size:14px;font-weight:600}.otp-message.error{color:#c62828}.otp-message.success{color:#178344}.otp-expiry-note{display:block;margin-top:14px;color:#7b8492}.otp-expiry-note i{margin-right:5px}@keyframes otpPop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

/* ===== 2026 additive UI enhancement: keeps original form structure ===== */
.rental-block select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#173b66 50%),linear-gradient(135deg,#173b66 50%,transparent 50%),linear-gradient(to right,#e8eef6,#e8eef6);background-position:calc(100% - 20px) calc(50% - 3px),calc(100% - 14px) calc(50% - 3px),calc(100% - 44px) 50%;background-size:6px 6px,6px 6px,1px 60%;background-repeat:no-repeat;padding-right:55px!important;border:1px solid #d9e2ee!important;border-radius:14px!important;box-shadow:0 8px 24px rgba(18,45,76,.06);transition:.2s ease;background-color:#fff!important}.rental-block select:hover{border-color:#9bb4d0!important;box-shadow:0 10px 28px rgba(18,45,76,.1)}.rental-block select:focus{border-color:#173b66!important;box-shadow:0 0 0 4px rgba(23,59,102,.10)!important;outline:none}.pickup-map-group{margin-top:8px}.map-heading-row{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:12px}.map-hint{display:block;margin-top:5px}.pickup-map{height:360px;width:100%;border-radius:18px;border:1px solid #d9e2ee;overflow:hidden;box-shadow:0 16px 35px rgba(17,42,70,.10);z-index:1}.map-result-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:12px;padding:13px 16px;border-radius:13px;background:#f3f7fb;color:#45617d;font-size:13px}.map-result-bar strong{color:#173b66;font-size:14px}.map-reset-btn{border:0;border-radius:11px;padding:10px 14px;background:#173b66;color:white;font-weight:700;cursor:pointer}.map-reset-btn:hover{transform:translateY(-1px)}@media(max-width:700px){.pickup-map{height:300px}.map-heading-row,.map-result-bar{align-items:stretch;flex-direction:column}.map-reset-btn{align-self:flex-start}}

/* 2026 focused rental-location fixes */
.return-location-display{width:100%!important;min-height:52px!important;display:flex!important;align-items:center!important;padding:12px 14px!important;white-space:normal!important;}
.rental-grid .input-group:has(#returnLocationDisplay){grid-column:auto!important;}
.pickup-map iframe{border-radius:16px;}
@media(max-width:768px){.rental-grid .input-group:has(#returnLocationDisplay){grid-column:1/-1!important}.pickup-map{min-height:300px!important}}


/* 2026 location field sizing: keep pickup and return aligned with the full-width vehicle field. */
.rental-grid .input-group.location-full-width,
.rental-grid .input-group:has(#pickupLocation),
.rental-grid .input-group:has(#returnLocationDisplay){
    grid-column:1 / -1 !important;
    width:100% !important;
    max-width:100% !important;
}

.rental-grid .input-group:has(#pickupLocation) select,
.rental-grid .input-group:has(#returnLocationDisplay) .return-location-display{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
}

@media (max-width:768px){
    .rental-grid .input-group:has(#pickupLocation),
    .rental-grid .input-group:has(#returnLocationDisplay){
        grid-column:1 / -1 !important;
    }
}

/* Focused rental-location sizing and map result polish */
#pickupLocation,
#returnLocationDisplay,
.rental-grid .input-group select{
    width:100%!important;
    min-width:0!important;
}
.return-location-display{
    min-height:46px!important;
    box-sizing:border-box!important;
}
.map-result-bar{
    flex-wrap:wrap!important;
}
.map-google-link{
    display:inline-flex!important;
    align-items:center!important;
    padding:8px 12px!important;
    border-radius:9px!important;
    background:#fff!important;
    border:1px solid #d9e2ee!important;
    color:#173b66!important;
    text-decoration:none!important;
    font-weight:700!important;
    font-size:12px!important;
}
.map-google-link:hover{border-color:#173b66!important;transform:translateY(-1px)}
.map-actions{display:flex;gap:8px;flex-wrap:wrap}.map-actions .map-reset-btn:first-child{background:#0f6b55}@media(max-width:600px){.map-actions{width:100%}.map-actions .map-reset-btn{flex:1 1 100%}}

/* Clean document upload preview: no filename/raw label after select/remove. */
.doc-pdf-preview{
    display:none;
    position:absolute;
    inset:0;
    align-items:center;
    justify-content:center;
    background:#fff;
    color:#e04444;
    font-size:42px;
}
.doc-slot.has-image .doc-pdf-preview{display:none;}
.doc-remove{z-index:4;}
@media (max-width:768px){
    .doc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
    .doc-label{font-size:12px;line-height:1.3;}
    .doc-placeholder{padding:8px 6px;}
    .doc-placeholder i{font-size:23px;}
    .doc-placeholder strong{font-size:12px;}
    .doc-placeholder small{font-size:10px;line-height:1.25;}
}
@media (max-width:430px){
    .doc-grid{grid-template-columns:minmax(0,1fr);gap:14px;}
    .doc-frame{max-width:100%;}
    .doc-remove{width:30px;height:30px;top:7px;right:7px;}
}