body{
font-family:Arial;
background:#fff;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}

.login-box {
	width: 100%;
	background: #fff;
	padding: 30px;
	border-radius: 20px;
	top: 0;
	position: absolute;
	margin-top: 50px;
}

.tabs{
display:flex;
border:2px solid #0f2f4f;
border-radius:30px;
overflow:hidden;
margin-bottom:20px;
}

.tabs button{
flex:1;
padding:10px;
border:none;
background:white;
cursor:pointer;
}

.tabs button.active{
background:#eee;
}

input, select {
	width: 100%;
	padding: 12px;
	margin-top: 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	background: #fff;
}

button.submit{
width:100%;
padding:12px;
margin-top:15px;
background:#0f2f4f;
color:white;
border:none;
border-radius:6px;
cursor:pointer;
}
input, button, select, optgroup, textarea {
	font-size: 15px !important;
}
.error {
	color: red;
	font-size: 14px;
	margin-top: 10px;
	margin-bottom: -5px;
}
.success, .info {
	color: green;
	font-size: 14px;
	margin-top: 10px;
	margin-bottom: -5px;
}
.signup {
	border: 1px solid #0f2f4f;
	width: 100%;
	display: block;
	margin-top: 25px;
	border-radius: 6px;
	text-decoration: none;
	text-align: center;
	padding: 10px;
	color: #0f2f4f;
	font-size: 15px;
}
.signup-box{
    max-width:100%;
    margin:auto;
}
.form-group{
    margin-bottom:5px;
}
input, select{
    width:100%;
    padding:10px;
}
.password-field{
    position:relative;
}
#togglePass{
    position:absolute;
    right:10px;
    top:35px;
    cursor:pointer;
}
.signup-box {
	width: 100%;
	background: #fff;
	padding: 30px;
	border-radius: 0;
	top: 90px;
	position: absolute;
	margin-top: 20px;
}
.signup-welcome-text {
	background: #0f2f4f;
	top: 0px;
	position: absolute;
	width: 100%;
	color: #fff;
	padding: 20px 30px 0px 30px;
}
.link {
	color: #0f2f4f;
	text-decoration: none;
	margin: 10px 0 -15px 0;
	display: block;
}
.iti.iti--allow-dropdown {
	width: 100%;
}
.signup-box .iti.iti--allow-dropdown {
	width: 100%;
	margin-top: 7px;
}
.signup-welcome-text h2 {
	font-size: 23px;
}
.app {
	overflow: hidden;
	width: 100%;
	background-color: #fff !important;
	margin-top: 100px;
}
.top-bar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px;
}

.offline{
    color:#e74c3c;
    font-size:14px;
}

.actions{
    display:flex;
    gap:10px;
}

.btn{
    padding:10px 15px;
    border-radius:10px;
    border:none;
    cursor:pointer;
    font-weight:bold;
}
.online {
	background: #059a44;
	color: #fff;
	border: 1px solid #059a44;
}
.bell{
    background:#0b2c4a;
    color:#fff;
    width:40px;
}
.section-title{
    font-size:20px;
    font-weight:bold;
    margin:15px;
    color:#0b2c4a;
}
.card{
    background:#0b2c4a;
    color:#fff;
    margin:15px;
    padding:20px;
    border-radius:15px;
}
.balance{
    font-size:28px;
    font-weight:bold;
}
.stats{
    display:flex;
    justify-content:space-between;
    margin-top:15px;
    font-size:14px;
}
.grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:15px;
}
.box{
    background:#0b2c4a;
    color:#fff;
    text-align:center;
    padding:20px;
    border-radius:15px;
}
.box h2{
    margin:0;
    font-size:30px;
}
.box p{
    margin:5px 0 0;
    font-size:14px;
}
.nav-item{
    text-align:center;
    font-size:12px;
    color:#0b2c4a;
}
.active{
    background:#0b2c4a;
    color:#fff;
    padding:8px 15px;
    border-radius:20px;
}
.icon i {
	font-size: 48px;
	margin-right: 15px;
	margin-top: 10px;
}
.flex {
display: flex;
}
.stats div {
  flex: 1;
  text-align: center;
  position: relative;
}
.stats div:not(:last-child)::after {
	content: "";
	position: absolute;
	right: 0;
	top: 10%;
	height: 80%;
	width: 2px;
	background: #fff;
}
.section-title.home-summery {
	margin: 25px 32px -6px 20px !important;
}
.btn.bell {
	padding: 0;
}
.bottom-nav {
	position: absolute;
	bottom: 0;
	display: grid;
	grid-template-columns: auto auto auto auto;
	width: 100%;
	padding: 0 20px;
}
.bottom-nav .nav-item {
	font-size: 15px;
	padding: 10px 0;
}
.bottom-nav .nav-item.active a {
	color: #fff;
	text-decoration: none;
}
.bottom-nav .nav-item a {
	color: #0b2c4a;
}
.profile{
    display:flex;
    align-items:center;
    padding:15px 20px;
}

.avatar{
    width:60px;
    height:60px;
    border-radius:50%;
    background:#8c96a6;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:24px;
}

.profile-info{
    margin-left:15px;
}

.profile-info h3{
    margin:0;
    font-size:18px;
}

.profile-info p{
    margin:3px 0;
    color:#777;
    font-size:14px;
}

.ref-btn{
    border:1px solid #ccc;
    padding:3px 8px;
    font-size:12px;
    border-radius:10px;
    background:#fff;
}

.menu{
    padding:10px 15px 80px;
}

.menu-item{
    background:#fff;
    padding:15px;
    margin-bottom:10px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-shadow:0 2px 5px rgba(0,0,0,0.05);
}

.menu-left{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:15px;
}

.menu-left i{
    width:20px;
    text-align:center;
    color:#0b2c4a;
}

.arrow{
    color:#999;
}

.logout{
    color:#e74c3c;
}
.fab{
    position:absolute;
    top:-25px;
    left:50%;
    transform:translateX(-50%);
    width:50px;
    height:50px;
    background:#0b2c4a;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}
.nav-item{
    color:#7a8a9a;
    font-size:18px;
}

.active{
    color:#0b2c4a;
}
.dashboard-app {
	width: 100%;
	position: absolute;
	top: 0;
}

.header{
    padding:20px;
}

.header h2{
    margin:0;
}

.header p{
    color:#777;
    font-size:14px;
}

.faq {
	padding: 10px 15px 80px;
	width: 100%;
	position: absolute;
	top: 100px;
}
.faq-item{
    background:#fff;
    border-radius:10px;
    margin-bottom:10px;
    box-shadow:0 2px 5px rgba(0,0,0,0.05);
    overflow:hidden;
}

/* Question */
.faq-question{
    padding:15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
}

.left{
    display:flex;
    align-items:center;
    gap:10px;
}

.left i{
    color:#0b2c4a;
}

/* Answer */
.faq-answer{
    display:none;
    padding:0 15px 15px;
    font-size:14px;
    color:#555;
    line-height:1.5;
}

/* Active State */
.faq-item.active .faq-answer{
    display:block;
}

/* Arrow rotate */
.faq-item.active .arrow{
    transform:rotate(180deg);
}

/* Arrow */
.arrow{
    color:#999;
    transition:0.3s;
}
.faq-item.active {
	padding: 0;
}

/* Container */
.address-page .app{
    max-width:400px;
    margin:30px auto;
    background:#f3f3f3;
    border-radius:30px;
    overflow:hidden;
}

/* Header */
.address-page .header{
    padding:20px;
}

.address-page .header h2{
    margin:0;
}

/* Address List */
.address-page .address-list{
    padding:10px 15px 80px;
}

/* Card */
.address-page .address-card{
    background:#fff;
    padding:15px;
    border-radius:12px;
    margin-bottom:10px;
    box-shadow:0 2px 5px rgba(0,0,0,0.05);
}

/* Top */
.address-page .address-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

/* Title */
.address-page .address-title{
    font-weight:600;
    font-size:15px;
}

/* Badge */
.address-page .badge{
    background:#0b2c4a;
    color:#fff;
    font-size:10px;
    padding:3px 8px;
    border-radius:10px;
}

/* Text */
.address-page .address-text {
	font-size: 14px;
	color: #666;
	margin: 8px 0;
	line-height: 27px;
}

/* Actions */
.address-page .address-actions{
    display:flex;
    gap:15px;
    font-size:13px;
}

.address-page .address-actions span{
    cursor:pointer;
    color:#0b2c4a;
}

.address-page .address-actions .delete{
    color:#e74c3c;
}

/* Add Button */
.address-page .add-btn {
	position: fixed;
	bottom: 90px;
	left: 50%;
	transform: translateX(-50%);
	background: #0b2c4a;
	color: #fff;
	padding: 12px 20px;
	border-radius: 25px;
	text-decoration: none;
}

/* Bottom Nav */
.address-page .bottom-nav{
    position:fixed;
    bottom:0;
    width:100%;
    max-width:400px;
    background:#fff;
    display:flex;
    justify-content:space-around;
    padding:12px 0;
    border-top:1px solid #eee;
}

.address-page .nav-item{
    font-size:18px;
    color:#7a8a9a;
}

.address-page .active{
    color:#0b2c4a;
}
.address-app {
	position: absolute;
	top: 100px;
	width: 100%;
}
.password-wrapper{
    position:relative;
}

.password-wrapper input{
    width:100%;
    padding-right:40px;
}

.toggle-password {
	position: absolute;
	right: 10px;
	top: 34px;
	transform: translateY(-50%);
	cursor: pointer;
	color: #777;
}
.toggle-password i{
    font-size:16px;
}
.login-box .toggle-password {
	top: 34px;
}

.form-message {
    padding: 10px 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    font-size: 14px;
}

.form-message.success {
    background: #d4edda;
    color: #155724;
}

.form-message.error {
    background: #f8d7da;
    color: #721c24;
}
label.error {
	border: none;
}
.logout, .edit-profile, .change-password, .faqmenu, .delivery-addresses {
	cursor: pointer;
}
#logoutBtn {
    background-color: #dc3545; /* red */
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#logoutBtn:hover {
    background-color: #bb2d3b; /* darker red */
}
.password-wrapper {
    position: relative;
}

.password-input {
    width: 100%;
    padding-right: 40px;
}

.password-toggle-btn {
    position: absolute;
    right: 12px;
    top: 60%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #666;
}
#resendOtpBtn {
	background-color: #fff;
}

.place-order .phone {
    width: 100%;
    height: 740px;
    position: relative; /* needed for footer positioning */
}

/* HEADER */
.place-order .header {
    background: #0f3554;
    color: #fff;
    padding: 20px;
}

.place-order .header h2 {
    margin: 20px 0 5px;
    font-size: 26px;
}

.place-order .header p {
    margin: 0 0 15px;
    font-size: 14px;
    opacity: 0.8;
}

.place-order .steps {
    display: flex;
    gap: 8px;
}

.place-order .steps span {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #fff;
}

.place-order .steps .active {
    width: 40px;
    border-radius: 10px;
    background-color: #fff;
}

/* CONTENT */
.place-order .content {
    padding: 20px;
}

.place-order .title {
    font-size: 18px;
    margin-bottom: 15px;
}

/* PACKAGE CARD */
.place-order-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 14px;
    padding: 15px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: 0.2s;
}

.place-order-card img {
    width: 60px;
}

.place-order-card h4 {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
}

.place-order-card p {
    margin: 5px 0 0;
    font-size: 13px;
    color: #555;
}

/* RADIO STYLE */
.place-order-card input {
    display: none;
}

.place-order-card.active {
    border: 2px solid #0f3554;
    background: #eef5fb;
}

/* FOOTER BUTTON */
.place-order .footer {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
}

.place-order #nextBtn {
	width: 100%;
	padding: 14px;
	border: none;
	border-radius: 10px;
	background: #ccc;
	color: #fff;
	font-size: 16px;
	transition: 0.2s;
	display: block;
	text-align: center;
	text-decoration: none;
}

.place-order #nextBtn.enabled {
    background: #0f3554;
}
.place-order {
	width: 100%;
}
.place-order .header p {
	color: #fff;
}

.place-order-card:has(input:checked) {
    border: 1px solid #0f3554;
    background: #eef5fb;
}

.place-order-card:hover {
    border-color: #0f3554;
}

.place-order-card.active {
    border: 1px solid #0f3554;
    background: #eef5fb;
}

.place-order {
	width: 100%;
	top: 0;
	display: block;
	position: absolute;
}
.place-order-step-2 .card {
  background: #fff;
  border-radius: 12px;
  padding: 15px;
  border: 1px solid #ddd;
  margin: 0;
  color: #0f3554;
}
.place-order-step-2 .input {
	border: 2px solid #0f3554;
	border-radius: 8px;
	padding: 12px;
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 15px;
}
.divider {
	height: 1px;
	background: #ddd;
	margin: 15px 0;
}
.place-order-step-2 .row {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin-bottom: 10px !important;
}
.place-order-step-2 .fake-input {
	border-bottom: 1px solid #ccc;
	padding: 8px 0;
	flex: 1;
	font-size: 14px;
}

.datepickerclass input {
	padding-left: 40px !important;
}
.datepickerclass span {
	top: 68px;
	left: 29px;
	position: absolute;
}
.fromPickup span {
	margin-top: 14px;
}
.fromPickup .fake-input {
	border-bottom: 1px solid #ccc;
	padding: 14px 0;
	flex: 1;
	font-size: 14px;
    margin-left: 10px;
}

.toPickup .fake-input {
    margin-left: 10px;
}
.toPickup {
	margin-top: 2px;
}
.toPickup span {
	margin-top: 12px;
}
.toPickup .fake-input {
	border-bottom: 1px solid #ccc;
	padding: 14px 0;
	flex: 1;
	font-size: 14px;
}
.btn-add {
	background: #0f3554;
	color: white;
	padding: 12px;
	text-align: center;
	border-radius: 8px;
	margin-top: 10px;
	cursor: pointer;
}
.btn.next {
	background: #0f3554;
	color: white;
}
.btn.prev {
	background: #e0e0e0;
	color: #333;
}

.snd-footer .btn {
	padding: 12px 25px;
	border-radius: 8px;
	border: none;
	font-size: 12px;
}
.snd-footer {
	padding: 15px;
	display: flex;
	justify-content: space-between;
}
.footer.style2 {
	display: flex;
    justify-content: space-between;
    padding: 10px 0;
}
.fake-input input {
	border: none;
	margin: 0;
	padding: 0;
}
.address-input,
.address-input:hover,
.address-input:focus,
.address-input:active,
.address-input:focus-visible {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.footer.style2 .next, .footer.style2 .prev {
	width: 110px !important;
	padding: 14px;
}
.stopPickup span {
	margin-top: 8px;
}
.stopPickup .address-input {
	padding-left: 14px !important;
}

.contact-card {
  background: #fff;
  border-radius: 12px;
  padding: 15px;
  border: 1px solid #0f3554;
  margin-bottom: 15px;
}

.contact-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.circle {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #0f3554;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-card .card-body {
    display: none;
}

.contact-card.active .card-body {
    display: block;
}
.package {
    display: flex;
    align-items: center;
    gap: 15px;
}

.package img {
    width: 50px;
}

.package strong {
    display: block;
}

.delivery p {
    margin: 6px 0;
    color: #555;
}
.step5 .section-title {
	font-size: 18px;
	margin: 0;
	color: #444;
}
.step5 .section-sub-title {
	font-size: 15px;
	margin-bottom: 10px;
	color: #444;
}
.step5 .card {
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 15px;
	background: #fafafa;
	margin: 0;
}
.step5 .card.package span, .step5 .card.package p {
	color: #000000de;
}
.step5 .package strong {
	display: block;
	color: #0009;
}
.bg-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1; /* important */
}
.overlay {
    z-index: 1;
}

.login-box {
    z-index: 2;
}
.login-final-box {
	background: #ffffffb0;
}
.note {
	font-size: 12px;
	margin-top: 5px;
}


/* New css */
.video-container{
    padding: 15px;
}
.login-final-box{
    position: static;
}
.bottom-nav {
    position: fixed; 
    padding: 10px 20px;
    background: #fff;
    box-shadow: 0 0 10px rgb(0 0 0 / 10%);
}
.signup-welcome-text{
    padding-top: 15px;
}
.menu{padding-top: 21px;}


/************************** Samar ******************************/
.iti__flag-container{
    height: 45px;
}
.app.profile-app{
    margin-top: 200px;
}
.place_orderselect .fromPickup .fake-input{
    position: relative;
}
.place_orderselect .fromPickup .fake-input .autocomplete-list{
    position: absolute;
    bottom: -220px;
    background: #ffffff;
    z-index: 1; 
}
.place_orderselect .fromPickup .fake-input .autocomplete-list .autocomplete-item{
    border-bottom: 1px solid #1633534d;
    padding: 5px 15px;
}
.place_orderselect .toPickup .fake-input{
    position: relative;
}
.place_orderselect .toPickup .fake-input .autocomplete-list{
    position: absolute;
    bottom: -220px;
    background: #ffffff;
    z-index: 1; 
}
.place_orderselect .toPickup .fake-input .autocomplete-list .autocomplete-item{
    border-bottom: 1px solid #1633534d;
    padding: 5px 15px;
}
.place_orderselect .stopPickup .fake-input{
    position: relative;
}
.place_orderselect .stopPickup .fake-input .autocomplete-list{
    position: absolute;
    bottom: -220px;
    background: #ffffff;
    z-index: 1; 
}
.place_orderselect .stopPickup .fake-input .autocomplete-list .autocomplete-item{
    border-bottom: 1px solid #1633534d;
    padding: 5px 15px;
}
.place-order .phone{
    height: 100vh;
}
.cnttitlbx .title{
    margin-bottom: 0;
}
.cardsambodynew div.label{
    display: flex;
    align-items: center;
    gap: 20px;
}
.cardsambodynew div.label i{
    font-size: 17px;
}
.left_fstsam{
    
}
.iconacco{
    /* border-bottom: 1px solid #f7f7f7;
    padding-bottom: 7px; 
    margin-bottom: 30px; */
    width: 100%;
    justify-content: space-between;
}
.iconarrowbox i{
    font-size: 25px;
}
.cardsambodynew{
    border-top: 1px solid #f7f7f7;
    padding-top: 30px; 
    margin-top: 7px;
}
.cardsambodynew input{
    border: none;
    border-bottom: 1px solid #163353b3;
    margin: 0 0 0 36px;
    padding: 10px 10px;
    border-radius: 0;
    width: 90%;
}
.cardsambodynew input:focus{
    border: none;
    border-bottom: 1px solid #f1f1f1;
    box-shadow: 0;
    outline: 0;
}
.cardsambodynew .field{
    margin-bottom: 15px;
}