/* ====================================
banner
======================================= */

.page-banner1 {
  position: relative;
  height: 450px;
  background: url("../images/book/book_car_banner.jpg") center center/cover
    no-repeat !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}

.banner-content {
  position: relative;
  z-index: 2;
}

.banner-content h1 {
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 30px;
}

.breadcrumb {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

.breadcrumb a {
  color: #fff;
  text-decoration: none;
}

.breadcrumb i {
  font-size: 14px;
}

@media (max-width: 992px) {
  .page-banner1 {
    height: 350px;
  }

  .banner-content h1 {
    font-size: 55px;
  }

  .breadcrumb {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  .page-banner1 {
    height: 280px;
    padding: 0 15px;
  }

  .banner-content h1 {
    font-size: 38px;
    margin-bottom: 15px;
  }

  .breadcrumb {
    gap: 8px;
    font-size: 14px;
    flex-wrap: wrap;
  }

  .breadcrumb i {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .page-banner1 {
    height: 220px;
  }

  .banner-content h1 {
    font-size: 25px;
  }

  .breadcrumb {
    font-size: 11px;
  }
}


/* ==========================
BOOKING FORM
========================== */

.booking-section{
    padding:40px 30px;
    background:#f5f5f5;
}

.form-group,
.form-row{
    margin-bottom:18px;
}

.form-row{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

.three-col{
    grid-template-columns:repeat(3,1fr);
}

.booking-form input,
.booking-form select,
.booking-form textarea{
    width:100%;
    height:58px;
    border:1px solid #000;
    border-radius:14px;
    background:#fff;
    outline:none;
    padding:0 18px;
    font-size:16px;
}

.booking-form textarea{
    min-height:110px;
    resize:none;
    padding-top:15px;
}

/* ===================
PHONE GROUP
=================== */

.phone-group{
    display:flex;
    /* gap:-15px !important; */
}

.country-select-wrapper{
    width:280px;
    min-width:280px;
    position:relative;
}


.country-select-wrapper select{
    width: 85%;
    height: 58px;
    padding-left: 65px;
    padding-right: 50px;
    border: 1px solid #000;
    border-radius: 14px;
    background: #fff;

    font-size: 18px;
    /* font-weight: 600; */
    color: #111;

    outline: none;
    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Flag */
.country-flag{
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    z-index: 2;
}

.country-select-wrapper::after{
    content: "▼";
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #333;
    pointer-events: none;
}

/* =========================
PAYMENT METHOD
========================= */

.payment-method{
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 30px 0;
    flex-wrap: wrap;
}

.payment-title{
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

.payment-options{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.payment-box{
    min-width: 130px;
    height: 56px;
    background: #fff;
    border: 1px solid #000;
    border-radius: 6px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    cursor: pointer;
    transition: all .3s ease;
}

/* Hover Effect */
.payment-box:hover{
    border-color: #d92d2d;
    box-shadow: 0 4px 15px rgba(217,45,45,.15);
    transform: translateY(-2px);
}

.payment-box span{
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.payment-box input[type="radio"]{
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #d92d2d;
}

/* ===================
CHARGES
=================== */

.charges-box{
    background:#fff;
    /* border:1px solid #000; */
    border-radius:14px;
    padding:25px;
    margin-bottom:20px;
}

.charges-box p{
    line-height:1.8;
    color:#666;
}

/* ==========================
TERMS & CONDITIONS
========================== */

.terms-check{
    margin-bottom: 25px;
}

.terms-label{
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    font-size: 16px;
    color: #555;
    font-weight: 500;
}

.terms-label input[type="checkbox"]{
    width: 26px;
    height: 26px;
    min-width: 26px;
    cursor: pointer;
    accent-color: #d92d2d;
}

.terms-label span{
    line-height: 1.4;
}

/* ===================
BUTTON
=================== */

.submit-btn-wrap{
    text-align:center;
}

.submit-btn-wrap button{
    background:#d92d2d;
    color:#fff;
    border:none;
    padding:15px 55px;
    border-radius:14px;
    font-weight:700;
    cursor:pointer;
}

/* ==========================
CUSTOM SELECT ICON
========================== */

.select-box{
    position: relative;
}

.select-box select{
    width:100%;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    padding-right:50px;
}

/* ▼ icon */
.select-box::after{
    content:"";
    position:absolute;
    right:22px;
    top:50%;
    transform:translateY(-50%);

    width:0;
    height:0;

    border-left:7px solid transparent;
    border-right:7px solid transparent;
    border-top:9px solid #333;

    pointer-events:none;
}




/* ===================
TABLET
=================== */

@media(max-width:992px){

    .form-row,
    .three-col{
        grid-template-columns:1fr;
    }

    .phone-group{
        flex-direction:column;
    }

    .country-select-wrapper{
        width:100%;
        min-width:100%;
    }

}

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

@media(max-width:768px){
  .country-select-wrapper select {
    margin-bottom: 15px;
    width: 98%;
  }

    .booking-section{
        padding:50px 15px;
    }

    .booking-form input,
    .booking-form select,
    .booking-form textarea{
        font-size:15px;
    }

    .submit-btn-wrap button{
        width:100%;
    }
  .country-select-wrapper{
        width:100%;
        min-width:100%;
    }

    .country-select-wrapper::after{
        right:18px;
        font-size:15px;
    }

      .payment-options{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:10px;
        width:100%;
    }

    .payment-box{
        min-width:unset;
        width:100%;
        height:55px;
        padding:0 8px;

        display:flex;
        align-items:center;
        justify-content:center;
        gap:8px;
    }

    .payment-box span{
        font-size:14px;
    }

    .payment-box input[type="radio"]{
        width:18px;
        height:18px;
    }


    .terms-label{
        gap: 12px;
        font-size: 15px;
    }

    .terms-label input[type="checkbox"]{
        width: 20px;
        height: 20px;
        min-width: 20px;
    }

}