/* PAGE BG */
body{
  background: #f4f7fb;
}
@media (max-width: 768px){
#rc-wrapper,
#rc-form{
  width: 100%;
  max-width: 100%;
  padding: 15px;
}
.rc-confirm-card{
  width: 100%;
  max-width: 100%;
  padding: 20px 16px;
  border-radius: 14px;
}
.rc-confirm-card h2{
  font-size: 20px;
}

.rc-sub{
  font-size: 13px;
}

.rc-confirm-details{
  padding: 12px;
}

.rc-confirm-details .row{
  padding: 12px 0;
}

.rc-confirm-details strong{
  font-size: 14px;
}
.et_pb_row{
  width: 100% !important;
  max-width: 100% !important;
}

.et_pb_column{
  padding: 0 !important;
}
body{
  background: #f4f7fb;
}

#rc-wrapper{
  margin-top: 20px;
}
.rc-success-icon{
  font-size: 36px;
}
}
/* WRAPPER */
#rc-wrapper{
  max-width: 500px !important;
  margin: 60px auto !important;
  padding: 0 15px !important;
}

/* CARD */
#rc-form{
  background: #fff !important;
  border-radius: 16px !important;
  padding: 25px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
}

/* STEPS */
.rc-step{
  display: none;
  animation: fadeIn 0.3s ease !important;
}

.rc-step.active{
  display: block;
}

/* ANIMATION */
@keyframes fadeIn{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}

/* TITLE */
.rc-step h3{
  margin-bottom: 20px !important;
}

/* OPTIONS GRID */
.rc-options{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px !important;
}

/* BUTTON */
.rc-button{
  background: #2f6fa3 ;
  color: #fff;
  border: none !important;
  padding: 14px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: 0.2s !important;
  font-weight: 500 !important;
}

/* HOVER */
.rc-button:hover{
  background: #245c8a !important;
  transform: translateY(-2px) !important;
}

/* SELECTED */
.rc-button.active{
  background: #1e4d73 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* INPUTS */
.rc-input,
.rc-textarea{
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.rc-input:focus,
.rc-textarea:focus{
  border-color: #2f6fa3;
  outline: none;
}

/* FULL BUTTON */
#toStep3,
#confirmBooking{
  width: 100%;
}

/* PROGRESS BAR */
.rc-progress{
  height: 6px;
  background: #e5e7eb;
  border-radius: 10px;
  margin-bottom: 20px;
  overflow: hidden;
}

.rc-progress-bar{
  height: 100%;
  width: 0%;
  background: #2f6fa3;
  transition: width 0.3s ease;
}
.rc-confirm-card{
  text-align: center;
  padding: 20px;
}

.rc-success-icon{
  font-size: 42px;
  margin-bottom: 10px;
}

.rc-sub{
  color: #666;
  font-size: 14px;
  margin-bottom: 20px;
}

.rc-confirm-details{
  background: #f8fafc;
  border-radius: 12px;
  padding: 15px;
  text-align: left;
  margin-bottom: 20px;
}

.rc-confirm-details .row{
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.rc-confirm-details .row:last-child{
  border-bottom: none;
}

.rc-btn-primary{
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  border: none;
  background: #2f6fa3;
  color: #fff;
  font-weight: 600;
}
/*old*/
.rc-form{
  max-width:700px !important;
  margin:60px auto !important;
  padding-top:120px !important;
  background:#fff !important;
  border-radius:16px !important;
  box-shadow:0 10px 30px rgba(0,0,0,0.08) !important;
}
.rc-step{
	max-width: 400px;
  display: none;
  background: #fff;
  padding: 20px;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

.rc-step.active{
  display: block;
}

.rc-step h3{
  margin-bottom: 15px;
}
.rc-form h3{
  margin-bottom:12px !important;
}

.rc-form-input,
.rc-form-textarea{
  width:100%;
  padding:12px;
  margin-bottom:10px;
  border-radius:10px;
  border:1px solid #ddd;
  font-size:14px;
}

.rc-form input:focus,
.rc-form textarea:focus{
  border-color:#2271b1;
  outline:none;
}
.step{
color:#fff !important;
}
.rc-options{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
}

.rc-options button{
  padding:14px;
  border:none;
  border-radius:10px;
  background:#2271b1;
  color:#fff;
  font-weight:500;
  cursor:pointer;
}

.rc-input,
.rc-textarea{
  width:100% !important;
  padding:12px !important;
  margin-bottom:10px !important;
  border-radius:8px !important;
  border:1px solid #ddd !important;
}

.rc-button{
  width:100% !important;
  padding:12px !important;
  color:#fff;
  border:none !important;
  border-radius:10px !important;
}
#rc-timeSlots button {
    width: 100% !important;
    padding: 14px !important;
    border: none !important;
    border-radius: 14px !important;
    background: #2271b1 !important;
    color: #fff !important;
    font-size: 15px !important;
}
#rc-timeSlots{
  display:grid !important;
  gap:10px;
  margin-top:10px;
}
#rc-timeSlots .slot{
  width:auto !important;
}
.slot{
grid-template-columns: repeat(3, 1fr) !important;
      	width:100% !important;
  padding:10px;
  border-radius:10px;
  border:1px solid #ddd;
  background:#fff;
  font-size:14px;
  cursor:pointer;
}
.slot:hover{
  border-color:#2271b1;
}

.slot.active{
  background:#2271b1;
  color:#fff;
  border-color:#2271b1;
}
#rc-order-ui{
  max-width:420px;
  margin:40px auto;
  background:#fff;
  padding:20px;
  border-radius:16px;
  box-shadow:0 20px 50px rgba(0,0,0,0.08);
}

.rc-o-step{ 
display:none;
 padding: 20px !important;
 }
.rc-o-step.active{ display:block; }

/* menu items */
.rc-ui-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px;
  margin-bottom:8px;
  border:1px solid #eee;
  border-radius:10px;
}

.rc-ui-qty{
  display:flex;
  gap:8px;
}

.rc-ui-qty button{
  width:32px;
  height:32px;
  border:none;
  background:#2271b1;
  color:#fff;
  border-radius:8px;
}
#rc-order-ui{
  max-width:420px;
  margin:40px auto;
  background:#fff;
  padding:25px;
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,0.08);
}

/* GRID */
.rc-type-select{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:15px !important;
  margin-top:20px !important;
}

/* CARD */
.type-box{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;

  padding:16px !important;
  border-radius:14px !important;
  border:1px solid #e5e7eb !important;
  background:#fff !important;

  cursor:pointer !important;
  transition:0.2s !important;
}

/* ICON */
.type-icon{
  font-size:22px !important;
}

/* TEXT */
.type-title{
  font-weight:600 !important;
  font-size:15px !important;
}

.type-sub{
  font-size:12px !important;
  color:#6b7280 !important;
}

/* HOVER */
.type-box:hover{
  border-color:#2271b1 !important;
  transform:translateY(-2px) !important;
}

/* ACTIVE */
.type-box.active{
  border-color:#2271b1 !important;
  background:#eef6ff !important;
  box-shadow:0 6px 18px rgba(34,113,177,0.2) !important;
}
/* FOOD ROW */
.rc-food{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;

  padding:12px 14px !important;
  margin-bottom:8px !important;

  background:#fff !important;
  border-radius:12px !important;
  border:1px solid #eee !important;
}

/* LEFT SIDE */
.rc-food-info .name{
  font-size:14px !important;
  font-weight:500 !important;
  color:#111 !important;
}

.rc-food-info .price{
  font-size:12px !important;
  color:#6b7280 !important;
  margin-top:2px !important;
}
.rc-food-qty{
  display:flex;
  align-items:center !important;   /* 🔥 vertical center */
  justify-content:center !important;
  gap:8px !important;
}

/* BUTTON */
.rc-food-qty button{
  width:30px !important;
  height:30px !important;
  display:flex !important;             /* 🔥 important */
  align-items:center !important;       /* center icon */
  justify-content:center !important;   /* center icon */

  border:none !important;
  border-radius:8px !important;
  background:#2271b1 !important;
  color:#fff !important;
  font-size:16px !important;
  line-height:1 !important;            /* 🔥 remove extra spacing */
  padding:0 !important;                /* 🔥 remove default padding */
}
.rc-hide{
  display:none !important;
}
/* QTY NUMBER */
.rc-food-qty .qty{
  min-width:20px !important;
  text-align:center !important;
  font-size:14px !important;

  display:flex !important;             /* 🔥 center text */
  align-items:center !important;
  justify-content:center !important;
}
#rc-menu-ui{
  max-height: 500px !important;
  overflow-y: auto !important;
  scroll-behavior: smooth !important;
}

/* Chrome scrollbar */
#rc-menu-ui::-webkit-scrollbar{
  width:6px !important;
}

#rc-menu-ui::-webkit-scrollbar-thumb{
  background:#ccc !important;
  border-radius:10px !important;
}
.rc-cart-item{
  display:flex !important;
  justify-content:space-between !important;
  padding:8px 0 !important;
  font-size:14px !important;
}

.rc-cart-item .name{
  font-weight:500 !important;
}

.rc-cart-item .qty{
  font-size:12px !important;
  color:#777 !important;
}
.rc-cart-total{
  display:flex !important;
  justify-content:space-between !important;
  margin-top:12px !important;
  padding-top:10px !important;
  border-top:1px solid #eee !important;
  font-size:16px !important;
  font-weight:600 !important;
}
.rc-o-step{
  display:none;
}

.rc-o-step.active{
  display:block;
}
#rc-success{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0 !important;

  background:rgba(0,0,0,0.4) !important;
  display:flex;
  align-items:center !important;
  justify-content:center !important;
  z-index:9999 !important;
}

.rc-success-box{
  background:#fff !important;
  padding:25px !important;
  border-radius:14px !important;
  text-align:center !important;
  width:280px !important;
}

.rc-success-box .icon{
  font-size:40px;
  margin-bottom:10px;
}

.rc-success-box .msg{
  font-size:16px;
  font-weight:500;
}
.rc-payment-actions{
  display:flex !important;
  gap:10px !important;
  margin-top:15px !important;
}

.rc-btn{
  flex:1 !important;
  padding:12px !important;
  border-radius:10px !important;
  border:none !important;
  cursor:pointer !important;
  font-size:14px !important;
}

.rc-btn.primary{
  background:#2271b1 !important;
  color:#fff !important;
}

.rc-btn.secondary{
  background:#f1f1f1 !important;
}
#rc-confirmation{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.4);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:9999;
}

.rc-confirm-box{
  width:320px !important;
  background:#fff !important;
  border-radius:14px !important;
  padding:20px;
}

.rc-confirm-header{
  display:flex !important;
  justify-content:space-between !important;
  font-size:18px !important;
  margin-bottom:15px !important;
}

.rc-confirm-row{
  display:flex;
  justify-content:space-between;
  margin:8px 0;
}

.rc-confirm-total{
  display:flex;
  justify-content:space-between;
  font-size:16px;
  font-weight:600;
}
.step {
    color: #160c0c;
    background: #ffa300;
    border: none;
    padding: 10px !important;
    text-transform: uppercase;
    font-family: 'Oswald', Helvetica, Arial, Lucida, sans-serif !important;
    margin-top: 10px;
    letter-spacing: 1px !important;
}

.rc-o-step.active
 {

    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif !important;
    font-size: 18px !important;
    color: #000 !important;
}
.rc-step.active{
	   font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif !important;
    font-size: 18px !important;
    color: #000 !important;
}

.rc-options button
 {
    padding: 14px;
    border: none;
    border-radius: 10px;
    background: #ffa300;
    color: #121212;
    font-weight: 500;
    cursor: pointer;
	   font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif !important;
}
/* FINAL MOBILE CHART FIX */
@media(max-width:768px){

  .rc-charts{
    display:flex !important;
    flex-wrap:nowrap !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    white-space:normal !important;

    gap:15px !important;

    grid-template-columns:none !important;
  }

  .rc-charts .rc-card{
    flex:0 0 320px !important;
    width:320px !important;
    min-width:320px !important;

    display:block !important;
  }

}
@media(max-width:768px){

  .rc-charts .rc-card{
    flex:none !important;
    max-width:none !important;
  }

  .rc-charts canvas{
    width:300px !important;
    height:300px !important;
  }

}