body {
    font-family: 'Onest', sans-serif;
   background-color: #F8F8F8;
   margin: 0; /* Hapus margin auto dari body */
   padding: 0;
 }

 /* Tambahkan gaya untuk membungkus konten utama */
 .main-content {
   max-width: 450px; /* Lebar maksimum yang diinginkan */
   margin: 0 auto; /* Pusatkan konten */
   background-color: #F8F8F8; /* Pastikan background tetap konsisten */
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
       min-height: 100vh;
 }

 @keyframes slideUpModal {
from {
 transform: translateY(100%);
 opacity: 0;
}
to {
 transform: translateY(0);
 opacity: 1;
}
}

@keyframes slideDownModal {
from {
 transform: translateY(0);
 opacity: 1;
}
to {
 transform: translateY(100%);
 opacity: 0;
}
}

.promo-banner-content {
display: inline-block;
transform-style: preserve-3d;
transition: transform 0.5s ease, opacity 0.5s ease;
transform-origin: bottom;
}

.promo-banner-content.flip-out {
transform: rotateX(90deg);
opacity: 0;
}

.promo-banner-content.flip-in {
transform: rotateX(-90deg);
opacity: 0;
}

.promo-banner-content.show {
transform: rotateX(0);
opacity: 1;
}



.modal.promo-modal-detail .modal-content.slide-down {
animation: slideDownModal 0.3s ease-in forwards;
}

 .container {
 /* Default style for mobile (width 100%) */
 width: 100%;
 margin: 0 auto; /* Ini akan memusatkan di desktop, tidak akan berpengaruh di mobile karena width 100% */
}

/* Media query for screens wider than, say, 768px (typical tablet/desktop breakpoint) */


 .container {
   width: 100%;
   margin: 0 auto;
 }

 .header {
   background: linear-gradient(to bottom, #1e3c94, #3357c3);
   color: white;
   text-align: center;
   padding: 30px 16px 200px;
   border-radius: 0px 0px 16px 16px;
 }

 .logo {
   width: 120px;
   margin-bottom: 12px;
 }

 .card {
   background: white;
   padding: 20px;
   border-radius: 16px;
   margin: 20px;
   box-shadow: 0 4px 8px rgba(0,0,0,0.05);
   margin-top: 0px;
   position: relative;
   z-index: 10;
 }

 .label {
   font-weight: 600;
   font-size: 14px;
   margin-bottom: 8px;
 }

 .amount {
   font-size: 34px;
   color: #1e3c94;
   margin: 0;
 }

 .amount span {
   font-weight: 700;
 }

 .subtitle {
   color: #777;
   font-size: 14px;
   margin-top: 4px;
 }
 .subtitle2 {
   color: #777;
   font-size: 14px;
   margin-top: 4px;
 }

 hr {
   margin: 20px 0;
   border: none;
   border-top: 1px solid #eee;
 }

 .section-title {
   font-weight: 600;
   margin-bottom: 12px;
 }

 .input-button {
   background: #f0f0f0;
   padding: 16px;
   border-radius: 10px;
   margin-bottom: 12px;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 

 .check-button {
   background-color: white;
   color: #1e3c94;
   border: 1.5px solid #1e3c94;
   padding: 12px;
   border-radius: 10px;
   font-family: 'Onest';
   font-weight: 600;
   width: 100%;
   cursor: pointer;
   margin-top: 10px;
   display: none;
 }

 .info-box {
   background: white;
   padding: 20px;
   border-radius: 16px;
   margin: 20px;
   box-shadow: 0 4px 8px rgba(0,0,0,0.05);

 }
 .info-box-ojk {

 padding: 0px 20px 20px;
 text-align: center;

}

 .btn-box {
       background: white;
 position: sticky;
 display: block;
 bottom: 0;
 left: 0;
 z-index: 11;
 right: 0;
 padding: 20px;
 border-radius: 10px 10px 0px 0px;
 margin: 0 auto;
 box-shadow: -1px -7px 8px rgba(0, 0, 0, 0.05);
 }

 .info-box h3 {
   margin-top: 0;
   font-size: 16px;
 }

 .see-more {
   display: inline-block;
   margin-top: 10px;
   color: #1e3c94;
   text-decoration: none;
   font-weight: 600;
   font-size: 14px;
 }

 /* Modal styles */
 .modal {
     display:none;
     position: fixed;
     animation: slideUpModal 0.35s ease-out;
     left: 0; /* Pastikan modal menutupi seluruh lebar viewport */
     right: 0;
     top: 0;
     bottom: 0;
     max-width: 450px;
 margin: 0 auto;
     background: rgba(0,0,0,0.5);
     z-index: 1000;
     /* Hapus margin: 0 auto; dan max-width dari sini */
     justify-content: center;
     align-items: flex-end;
 }

 .modal-content {
   background: white;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   width: 100%;
   max-width: 450px; /* Terapkan max-width di sini */
   margin: 0 auto; /* Pusatkan konten modal */
   max-height: 80%;
   border-radius: 16px 16px 0 0;
   overflow-y: auto;
   padding: 16px;
   align-items: flex-start;
 }
 

 .modal-header {
 position: sticky;
 display: flex
;    border-bottom: 1px solid #eee;
 padding-top: 10px;
 padding-bottom: 10px;
 width: 100%;
 top: 0;
 z-index: 1;
 justify-content: space-between;
 align-items: center;
 font-weight: 600;
 font-size: 16px;
 margin-bottom: 12px;
}

 .close-btn {
   font-size: 24px;
   cursor: pointer;
 }
 
 .province-list {
overflow-y: auto;
width: 100%;
flex-grow: 1;
max-height: 80vh; /* atau sesuai sisa ruang dari modal-content */
}
 .province-list label {
   display: block;
   padding: 12px 0;
   border-bottom: 1px solid #eee;
 }

 .input-button.selected {
background-color: #dce8ff; /* atau warna lain yang kamu suka */
color: #1e3c94;
font-weight: 600;
}

 input[type="radio"] {
   margin-right: 10px;
 }

 .modal-step {
margin-bottom: 16px;
}

.option-box {
 padding: 16px !important;
 margin-bottom: 8px;
 background: #fff;
 border-radius: 10px;
 border: 1px solid #f0f0f0;
 cursor: pointer;
}

.option-box.selected {
background-color: #1e3c94;
color: white;
font-weight: 600;
}

.radio-list label {
display: block;
padding: 10px 0;
border-bottom: 1px solid #eee;
}

.modal-step {
margin-bottom: 16px;
}

.option-box {
 padding: 12px 16px;
 margin-bottom: 8px;
 border-radius: 10px;
 border: 1px solid #f0f0f0;
 cursor: pointer;
}

.option-box.selected {
background-color: #1e3c94;
color: white;
font-weight: 600;
}

.radio-list label {
display: block;
padding: 10px 0;
border-bottom: 1px solid #eee;
}

.tab-header {
position: sticky;
 display: flex
;
 width: 100%;
 top: 0;
 z-index: 1;
 justify-content: space-between;
 align-items: center;
 font-weight: 600;
 font-size: 16px;
 margin-bottom: 12px;
 margin-top: -20px;
}
.tab-btn {
 flex: 1;
 font-family: 'Onest';
 padding: 10px;
 height: 50px;
 border: none;
 font-size: medium;
 background: #eaeaea;
 font-weight: 600;
 cursor: pointer;
 border-radius: 10px;
 margin: 0 4px;
}
.tab-btn.active {
background: #1e3c94;
color: white;
}

.loading-overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(255, 255, 255, 0.8);
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 12px;
   display: none;
 }
 .spinner {
   width: 32px;
   height: 32px;
   border: 4px solid #ccc;
   border-top-color: #1e3c94;
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }
 @keyframes spin {
   to { transform: rotate(360deg); }
 }

.installment-box {
   background-color: #1e3c94;
   color: white;
   padding: 12px 16px;
   border-radius: 12px;
   font-weight: 500;
   font-size: 15px;
   margin-top: 8px;
   cursor: pointer;
   display: none;
 }
 .installment-list {
   background-color: #eef2ff;
   padding: 10px;
   border-radius: 10px;
   margin-top: 6px;
   display: none;
 }
 .installment-option {
   padding: 16px;
   border-radius: 8px;
   margin-bottom: 6px;
   background-color: #fff;
   cursor: pointer;
   border: 1px solid #ccc;
 }
 .installment-option:hover {
   background-color: #e0e7ff;
 }
 .desc{
     font-size: 14px;
     font-family: 'Onest';
     color: #5F5F5F;
     text-align: left;
         line-height: 1.7;
 }

 .prosescard{
     display: flex;
     margin-top: 20px;
 }

 .prosesicon img {
 width: 50px;
}
.prosestext{
 margin-left:10px;
}

.collapsible {
 color: #1e3c94;
 font-family: 'Onest';
 font-weight: 600;
 cursor: pointer;
 padding: 18px 18px 18px 0px;
 width: 100%;
 text-align: left;
 outline: none;
 font-size: 15px;
 background-color: transparent;
 border: none;
}


.content {
 display: none;
 overflow: hidden;
 padding-bottom: 20px;
 border-bottom: 1px solid #eee;
}

.ajukan-btn {
 display: block;
 width: 100%;
 background-color: #1e3c94;
 color: white;
 border-radius: 8px !important;
 padding: 16px;
 font-size: 16px;
 font-weight: bold;
 border: none;
 font-family: 'Onest';
 cursor: pointer;
}

button.btn {
 display: block;
 width: 100%;
 background-color: #1e3c94;
 color: white;
 border-radius: 8px !important;
 padding: 16px;
 font-size: 16px;
 font-weight: bold;
 border: none;
 font-family: 'Onest';
 cursor: pointer;
}

div#motorSteps {
 overflow-y: auto;
 width: 100%;
 flex-grow: 1;
 max-height: 80vh;
}

/* NEW CSS FOR PROMO BANNER */

 
.gabungancar {
 margin-top: -180px;
}

#promo-berakhir {
  position: relative;
  overflow: hidden;
  background-color: transparent;
  color: #FFD700;
  padding: 15px 20px 30px 20px;
  margin: 0px 35px -15px 35px; 
  font-weight: 600;
  font-size: 1em; 
  text-align: center;
  display: none;
 ;
  justify-content: space-between;
  align-items: baseline;
  z-index: 1;
 
 }

.promo-banner {
 position: relative;
 overflow: hidden;
 background-color: #FFD700;
 color: #1e3c94;
 padding: 15px 20px 30px 20px;
 margin: 0px 35px -15px 35px;
 border-radius: 16px 16px 0px 0px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 font-weight: 600;
 font-size: 1em;
 cursor: pointer;
 display: flex
;
 justify-content: space-between;
 align-items: baseline;
 z-index: 1;

}

/* SHIMMER EFFECT */
.promo-banner::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 200%;
height: 100%;
background-image: linear-gradient(
     120deg,
     rgba(255,255,255, 0) 30%,
     rgba(255,255,255, .8),
     rgba(255,255,255, 0) 70%
 );
 
animation: shimmerBanner 3s linear infinite;
z-index: 2;
pointer-events: none;
}
.promo-banner > * {
position: relative;
z-index: 3;
}

@keyframes shimmerBanner {
0% {
 left: -100%;
}
100% {
 left: 100%;
}
}



.promo-banner-content {
 flex-grow: 1;
   transition: opacity 0.4s;
}

.promo-banner-icon {
 font-size: 1.2em;
 margin-left: 10px;
}

/* NEW CSS FOR PROMO DETAIL MODAL */
.promo-modal-detail .modal-content {
 height: auto; /* Adjust height based on content */
 max-height: 90vh; /* Maximum height for scrolling */
 padding-bottom: 0; /* Remove padding from bottom as button is sticky */
}

.promo-detail-header {
 width: 100%;
 display: flex;
 justify-content: space-between;
 align-items: center;
 font-weight: 600;
 font-size: 1.1em;
 padding: 10px 0;
 border-bottom: 1px solid #eee;
 margin-bottom: 15px;
 top: 0;
 background: white;
 z-index: 1;
}

.promo-detail-body {
 flex-grow: 1;
 overflow-y: auto;
 width: 100%;
 padding-bottom: 20px; /* Space for the button */
}

.promo-detail-image {
 width: 100%;
 border-radius: 12px;
 margin-bottom: 15px;
}

.promo-detail-section {
 display: flex
;
 justify-content: space-between;
 margin-bottom: 10px;
 margin-top: -30px;
 margin-left: 10px;
 margin-right: 10px;
 background: #f5f5f5;
 padding: 20px;
 border-radius: 0px 0px 12px 12px;
}

.promo-detail-cashback {
 font-size: 1em;
 font-weight: 600;
 
 color: #1e3c94;
}

.promo-detail-date {
 font-size: 1em;
 color: #020202;
 font-weight: 600;
 text-align: right;
}

.promo-detail-description {
 font-size: 0.95em;
 color: #555;
 line-height: 1.6;
 margin-top: 15px;
 padding-left: 10px;
 padding-right: 10px;
}

.promo-detail-button-wrapper {
 position: sticky;
 bottom: 0;
 width: 100%;
 background: white;
 padding: 15px 0;
 text-align: center;
}

.promo-detail-button {
 background-color: #1e3c94;
 color: white;
 border: none;
 padding:16px;
 border-radius: 8px;
 font-size: 1em;
 font-weight: 600;
 cursor: pointer;
 width: 100%;
}
.promo-detail-button.btn-kembali  {
  background-color: #fff ;
  color: #1e3c94;
  border: 1px solid  #1e3c94;  
 }
.cashbackInfo {
 flex: 1;
 align-content: center;
}

.expiredInfo{
 flex:1;
 text-align: right;
     align-content: center;
}

/* Explicitly targeting the modal element when it has both classes for clarity */


 @keyframes slideUpFadeIn {
     from {
         opacity: 0;
         transform: translateY(20px); /* Starts 20px below its final position */
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .animated-slide-up {
     animation: slideUpFadeIn 0.7s ease-out forwards; /* Adjust duration and timing function as needed */
     opacity: 0; /* Initially hidden */
 }


 .iconshake{
     animation: shake-animation 4.72s ease infinite;
transform-origin: 50% 50%;
 }

 @keyframes shake-animation {
0% { transform:translate(0,0) }
1.78571% { transform:translate(5px,0) }
3.57143% { transform:translate(0,0) }
5.35714% { transform:translate(0,0) }
7.14286% { transform:translate(5px,0) }
10.71429% { transform:translate(0,0) }
100% { transform:translate(0,0) }
}

div#cashbackPromo {
 margin-bottom: 20px;
 background:#f0f0f0;
 border-radius: 10px;
 padding: 10px;
}