.clients-recover .navbar-container {
	display: none;
}

.clients-reset_password .navbar-container {
	display: none;
}

.login-form {
	height: 100%;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 500px;
	justify-content: center;
	margin: 0 auto;
}

.login-form .backbtn {
	font-size: 14px;
	font-weight: 600;
	color: #aeaeae;
}

.login-header {
	position: absolute;
	top: 40px;
}

.backbtn img {
	max-width: 24px;
	background: #eee;
	padding: 5px;
	border-radius: 5px;
	margin-right: 5px;
}

.social-login-button {
	padding: 10px;
	border-radius: 9px;
	display: inline-flex;
	align-items: center;
	font-weight: 500;
	font-size: 13px;
	/* flex-shrink: 0; */
	width: 100%;
}

.social-login {
	display: flex;
	gap: 10px;
	margin-bottom: 15px;
}
 
.social-login-button img {
	max-width: 20px;
	margin-right: 10px;
}

.social-login-button.google {
	box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px;
	background: #fff;
	border: 1px solid #ddd;
	color: #222;
}

.social-login-button.fb {
	background: #1877F2;
	color: #fff;
}

.page-template.login {
	max-height: 100vh;
	overflow: hidden;
}

.alert-notification {
	background: #4C68FF03;
	border: 1px solid #4C68FF14;
	display: flex;
	align-items: center;
	color: #4C68FF;
	font-weight: 500;
	font-size: 12px;
	padding: 10px 20px;
	border-radius: 5px;
	margin: 1rem 0;
}
.alert-notification i {
	font-size: 26px;
	margin-right: 14px;
}

.nowrap {
    flex-wrap: nowrap;
}

.marquee {
	opacity: .3;
    position: relative;
}

.marquee::before {
	content: "";
	/* background: linear-gradient; */
	background: #5F5BFE;
	background: linear-gradient(90deg, #4C68FF 20%, rgba(220,236,249,0) 100%);
	width: 20%;
	height: 105%;
	position: absolute;
	left: -50px;
	z-index: 1;
	top: 0px;
}

.marquee::after {
	content: "";
	/* background: linear-gradient; */
	background: #5F5BFE;
	background: linear-gradient(270deg, #4C68FF 20%, rgba(220,236,249,0) 100%);
	width: 20%;
	height: 105%;
	position: absolute;
	right: -50px;
	z-index: 1;
	top: 0px;
}


.login-image-bg {
	height: 100vh;
    background: #F3F6FB;
	padding:50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.login-image-bg h2 {
	font-weight: 600;
	font-size: 27px;
}


.login-image-bg .announcement-card.bg-white.p-4.border.rounded-3 {
	border-radius: 20px !important;
}

.login-form .form-control {
	border-radius: 9px;
	background-color: #F2F3F6;
	border: none;
	padding: 14px;
	font-size: 14px;
}

.login-image-bg::before {
	background: #fff0 radial-gradient(closest-side at 50% 50%, transparent 0%, rgb(251, 251, 251) 100%) 0 0 no-repeat padding-box;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
    display: none;
}

.login-image-bg::after {
	background: linear-gradient(180deg,rgb(255, 255, 255) 0%,rgba(255, 255, 255, 0.44) 120%);
	content: "";
	width: 100%;
	height: 120%;
	position: absolute;
	top: -100px;
	z-index: 2;
    display: none;
}

.vertical-scrolling-infinite {
    animation: bannermove 11s linear infinite; 
}

.vertical-scrolling-infinite-bottom {
    padding-top: 2.35em;
     animation: marqueeTop 108s linear infinite reverse;
     animation-direction: reverse;
     animation-delay: -84s;
}

@keyframes bannermove {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

@keyframes marqueeTop {
    0% {
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0)
      }
      100% {
          -webkit-transform: translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0)
      }
}

@keyframes marqueeBottom {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
      100% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
      }
}

.terms-and-conditions {
	font-size: 14px;
}

.terms-and-conditions a {
	font-weight: 500;
	border-bottom: 1px dotted;
}

.recover-img {
	justify-content: center;
}

.recover-img img {
	mix-blend-mode: multiply;
}

/* Dashboard */
.c-card {
	background: #fff;
	padding: 2rem;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
	border-radius: 12px;
}
.dashboard-page {
    border-top:1px solid #ddd;
}

.top-dashboard.mb-3.p-4 {
	background: #fff;
	margin-bottom: 10px;
	padding: 11px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
	border-radius: 6px;
}
.top-menu ul {
   list-style: none;
   padding:0;
   margin:0;
   display: flex;
   flex-direction: column;
}


.top-menu ul li a {
	color: #3e3e3e;
	padding: 5px;
	display: block;
	font-size: 14px;
	background: #fff;
	margin-bottom: 10px;
	padding: 11px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
	border-radius: 6px;
	font-weight: 500;
}

.top-menu ul li a.active {
    color:var(--primary-color);
    font-weight: 500;
}

.top-menu ul li a.logout {
	color: #ff0000;
	font-weight: 500;
	margin-left: auto;
	padding: 11px;
	justify-content: start;
}

.top-menu ul li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.top-menu .menu-left {
	display: flex;
	align-items: center;
}

.menu-text {
	display: flex;
	flex-direction: column;
}

.menu-text span {
	font-weight: 300;
	font-size: 11px;
}

.top-menu img {
	padding: 5px;
	border-radius: 10px;
	max-width: 30px;
	margin-right: 10px;
}


.top-menu .m1 img {
	background: #4A53FB29;
}
.top-menu .m2 img {
	background: #4FAA842E;
}
.top-menu .m3 img {
	background: #5194FF2E;
}
.top-menu .m4 img {
	background: #FC852E29;
}
.top-menu .m5 img {
	background: #04909F2B;
}
.top-menu .m6 img {
	background: #ff000024;
}

.account-card input:not([type='checkbox']),
.account-card .form-select,
.account-card textarea {
	border-radius: 9px;
	background-color: #fff;
	border: none;
	padding: 14px;
	font-size: 14px;
	border: 1px solid #ddd;
}

.us-item {
	font-weight: 400;
	font-size: 13px;
	text-align: center;
	background: #F8F9FA;
	padding: 7px 10px;
	border-radius: 5px;
	line-height: 1;
	width: 100%;
}

.tooltip-content {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 8px;
	background-color: #1F295E;
	color: #fff;
	padding: 6px 10px;
	border-radius: 4px;
	font-size: 12px;
	white-space: nowrap;
	display: none;
	z-index: 100;
  }
  
  .us-item.show-tooltip .tooltip-content,
  .us-item:hover .tooltip-content {
	display: block;
  }

.us-item .us-item-text {
	font-weight: 300;
	color: #6c757d;
	font-size: 12px;
	display: none;
}

.us-item i {
	font-size: 16px;
	margin-right: 5px;
}

.announcement-card-footer {
	display: flex;
	align-items: end;
	justify-content: space-between;
}

.user-statistics {
	gap: 5px;
}

.acf-buttons {
	display: flex;
	gap: 5px;
}

.acf-buttons a {
	border-radius: 5px;
	padding: 5px 17px;
	font-size: 13px;
	font-weight: 400;
	color: #333;
	display: flex;
	background: #F2F3F6;
}

.acf-buttons .delete-item {
	background: #FFEAEA;
	color: #FF3F42;
	border: 1px solid #FF3F42;
}

.delete-item img {
	max-width: 18px;
	margin-right: 5px;
}

.acf-buttons a i {
	margin-right: 5px;
}

.ac-badge {
	position: absolute;
	top: -11px;
	padding: 5px 17px;
	border-radius: 5px;
	font-size: 10px;
	font-weight: 400;
}

.ac-badge.expired {
	background: #FFEAEA;
	color: #FF3F42;
}
.ac-badge.pending {
	color: #0CA75E;
	background: #E2F1EC;
}
.ac-badge.rejected {
	color: #e27217;
	background: #ffede4;
}

.ac-badge.deactivated {
	background: #F0DBE4;
	color: #C2185B;
}

.nav-pills .nav-link {
	background: 0 0;
	border: 0;
	border-radius: .25rem;
	font-weight: 300;
	font-size: 14px;
	padding: .25rem 1rem;
}

.listing-buttons.see-comments a {
	border: 2px solid #333;
	color: #333;
	font-weight: 600;
}

.listing-buttons.see-comments a:hover {
	border: 2px solid #333;
	color: #fff;
	background: #333;
	font-weight: 600;
}

.unread-offer {
	background: rgba(255, 82, 82, 1);
	box-shadow: 0 0 0 0 rgba(255, 82, 82, 1);
	animation: pulse-red 2s infinite;
	width: 15px;
	height: 15px;
	display: block;
	border-radius: 50%;
	position: absolute;
	right: -1px;
	top: -5px;
	border: 2px solid #fff;
}

@keyframes pulse-red {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
	}
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
	}
	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
	}
}

.response {
	background: #F0F2F5;
	padding: 10px;
	border-radius: 12px;
	position: relative;
	padding-left: 20px;
}

.response::before {
	content: "\0022";
	font-size: 41px;
	font-style: italic;
	top: -12px;
	left: 0;
	position: absolute;
	color: #C8C8C8;
}

.add-new-post .form-label.required {
	position: relative;
}

.add-new-post .form-label.required::after {
	content: "*";
	color:#ff0000
}
/* Dashboard */

.clients-new_pass .navbar-container {
	display: none;
}

.reset-title img {
	max-width: 33px;
	margin-right: 5px;
}

.my_profile .account-card {
	padding: 2rem;
	background: #fff;
} 

.form-label.required {
	position: relative;
}

.form-label.required {
	position: relative;
}

.form-label.required::after {
	content: "*";
	color: #ff0000;
	margin-left: 2px;
	font-size: 12px;
	vertical-align: top;
}

.rest-pass-form img {
	max-width: 50px;
	margin-right: 10px;
}

.avatars-img img {
	max-width: 40px;
	border-radius: 50%;
	border: 2px solid var(--primary-color);
	position: relative;
	z-index: 1;
}

.avatars-img img {
	margin-left: -16px;
}

.avatars-img img:first-child {
	margin-left: 0;
}

.avatars {
	display: flex;
	align-items: center;
	background: #fff;
	display: inline-flex;
	padding: 10px 30px 10px 10px;
	border-radius: 50px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
	margin-bottom: 20px;
	color: #222;
	color: var(--bs-gray);
	font-weight: 400;
	font-size: .85rem;
}

.avatars-img {
	margin-right: 20px;
}

/* ========== New Listing Form v2 ========== */

.clients-new_listing .ui-widget.ui-widget-content {
	width: 400px !important;
	max-width: 100% !important;
	min-width: initial;
	z-index: 10 !important;
}

.form-card {
	padding: 2rem;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}

.btn-check:active+.btn-outline-primary:focus,
.btn-check:checked+.btn-outline-primary:focus,
.btn-outline-primary.active:focus,
.btn-outline-primary.dropdown-toggle.show:focus,
.btn-outline-primary:active:focus {
	box-shadow: none;
}

.form-check-input:focus {
	box-shadow: none;
}

/* --- Step Cards --- */
.nl-step {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
	overflow: hidden;
}
.nl-step-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem 2rem;
	border-bottom: 1px solid #F3F4F6;
	background: #FAFBFC;
}
.nl-step-number {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--primary-color);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.nl-step-title {
	font-weight: 700;
	font-size: 1rem;
	color: #1a1a1a;
}
.nl-step-subtitle {
	font-size: 13px;
	color: #9CA3AF;
	margin-top: 1px;
}
.nl-step-body {
	padding: 1.75rem 2rem;
}

/* --- Field labels --- */
.nl-field-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: 14px;
	color: #374151;
	margin-bottom: 0.5rem;
}
.nl-field-label i {
	color: var(--primary-color);
	font-size: 16px;
}

/* --- Inputs --- */
.newListingForm input:not([type='checkbox']):not(.nl-price-display input),
.newListingForm .form-select {
	font-weight: 400;
	color: #374151;
	padding: 11px 14px;
	font-size: 14px;
	height: 48px;
	border-radius: 10px;
	background-color: #fff;
	border: 1px solid #E5E7EB;
	box-shadow: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.newListingForm input:not([type="checkbox"])::placeholder,
.newListingForm .form-select::placeholder {
	font-weight: 400;
	color: #9CA3AF;
	font-size: 13px;
}
.newListingForm input:not([type="checkbox"]):focus,
.newListingForm .form-select:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

/* --- Date picker --- */
.nl-date-picker {
	max-width: 320px;
}
.nl-input-icon {
	position: relative;
}
.nl-input-icon i {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--primary-color);
	font-size: 16px;
	z-index: 1;
	pointer-events: none;
}
.nl-input-icon input {
	padding-left: 40px !important;
	cursor: pointer;
}

/* --- Route Builder Timeline --- */
.nl-route-builder {
	position: relative;
}
.nl-route-point {
	display: flex;
	gap: 1rem;
	position: relative;
}
.nl-route-dot-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 20px;
	flex-shrink: 0;
	padding-top: 14px;
}
.nl-route-dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 3px solid var(--primary-color);
	background: #fff;
	z-index: 1;
	flex-shrink: 0;
}
.nl-route-dot.origin {
	background: var(--primary-color);
}
.nl-route-dot.destination {
	border-color: #EF4444;
	background: #EF4444;
}
.nl-route-line {
	width: 2px;
	flex: 1;
	background: #E5E7EB;
	min-height: 16px;
}
.nl-route-fields {
	flex: 1;
	min-width: 0;
	padding-bottom: 0.75rem;
}

/* Time inputs */
.nl-time-inputs {
	display: flex;
	align-items: center;
	gap: 4px;
	background: #fff;
	border: 1px solid #E5E7EB;
	border-radius: 10px;
	padding: 0 10px;
	height: 48px;
}
.nl-time-inputs i {
	color: var(--primary-color);
	font-size: 15px;
	flex-shrink: 0;
}
.nl-time-inputs input {
	border: none !important;
	box-shadow: none !important;
	height: 100% !important;
	padding: 0 4px !important;
	text-align: center;
	width: 44px;
	font-weight: 600;
	font-size: 15px;
	background: transparent !important;
}
.nl-time-inputs input:focus {
	box-shadow: none !important;
	border: none !important;
}
.nl-time-sep {
	font-weight: 700;
	color: #9CA3AF;
	font-size: 16px;
}

/* Add stop button */
.nl-add-stop-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
	font-size: 13px;
	border: 1px dashed #D1D5DB;
	background: #FAFBFC;
	color: var(--primary-color);
	padding: 8px 16px;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.nl-add-stop-btn:hover {
	background: #F0EDFF;
	border-color: var(--primary-color);
}

/* Intermediate stops */
#intermediateStops {
	position: relative;
}
.intermediate.position-relative.stop-row {
	background: #F8F7FF;
	margin: 0 0 0 8px;
	padding: 12px 12px 5px;
	border-radius: 10px;
	border-left: 3px solid var(--primary-color);
}
.intermediate-heading {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}
.intermediate-heading p {
	font-size: 13px;
	font-weight: 600;
	color: var(--primary-color);
}
.btn-delete-stop {
	border: none;
	background: #FEE2E2;
	color: #EF4444;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.15s;
}
.btn-delete-stop:hover {
	background: #FECACA;
}

/* --- Add vehicle link --- */
.nl-add-vehicle-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--primary-color);
	text-decoration: none;
	margin-top: 10px;
	padding: 6px 0;
	transition: opacity 0.15s;
}
.nl-add-vehicle-link:hover {
	opacity: 0.8;
	color: var(--primary-color);
}

/* --- Map --- */
.newListingForm #map {
	height: 400px;
	width: 100%;
	border: 1px solid #E5E7EB;
	border-radius: 12px;
}

/* --- Vehicle & Seats --- */
.nl-seats-selector {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	background: #FAFBFC;
	border: 1px solid #E5E7EB;
	border-radius: 12px;
	padding: 12px 20px;
}
.nl-seats-btn {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	border: 1px solid #E5E7EB;
	background: #fff;
	color: var(--primary-color);
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.nl-seats-btn:hover {
	background: #F0EDFF;
	border-color: var(--primary-color);
}
.nl-seats-value {
	text-align: center;
}
.nl-seats-value input {
	border: none !important;
	box-shadow: none !important;
	height: auto !important;
	width: 50px;
	font-weight: 700;
	font-size: 28px;
	color: var(--primary-color);
	padding: 0 !important;
	background: transparent !important;
}
.nl-seats-label {
	display: block;
	font-size: 12px;
	color: #9CA3AF;
	font-weight: 500;
	margin-top: -2px;
}

/* --- Price Picker --- */
.nl-price-picker {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 0.5rem;
}
.nl-price-btn {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	border: 1px solid #E5E7EB;
	background: #fff;
	color: var(--primary-color);
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.nl-price-btn:hover {
	background: #F0EDFF;
	border-color: var(--primary-color);
}
.nl-price-display {
	display: flex;
	align-items: baseline;
	gap: 4px;
}
.nl-price-display input {
	border: none !important;
	box-shadow: none !important;
	width: 80px;
	font-weight: 700;
	font-size: 32px;
	height: auto !important;
	color: var(--primary-color);
	padding: 0 !important;
	background: transparent !important;
}
.nl-price-currency {
	font-weight: 600;
	color: #9CA3AF;
	font-size: 18px;
}

/* Progress bar (price quality) */
.newListingForm .progress {
	position: relative;
	height: 8px;
	border-radius: 8px;
	overflow: visible;
}
.newListingForm .progress-gradient {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	border-radius: 8px;
	width: 100%;
	background: linear-gradient(90deg, #229F21 0%, rgba(79, 170, 132, 1) 49%, rgba(255, 210, 77, 1) 82%, rgba(255, 125, 125, 1) 100%);
}
.newListingForm .marker {
	position: absolute;
	top: -17px;
	height: 100%;
	transition: left 0.3s ease;
}
#marker img {
	max-width: 22px;
}

.badge-recommend {
	background: #ECFDF5;
	display: block;
	margin: 15px 0 5px;
	padding: 8px 12px;
	color: #059669;
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	border-radius: 8px;
}
.price-selector-info small {
	text-align: center;
	display: block;
	color: #059669;
	font-weight: 600;
}

.price-totals {
	background: #FAFBFC;
	padding: 16px !important;
	border-radius: 12px;
	margin-top: 16px;
	border: 1px solid #F3F4F6;
}
.price-item {
	display: flex;
	justify-content: space-between;
	font-weight: 400;
	font-size: 13px;
	color: #6B7280;
	margin-bottom: 10px;
}
.price-item span {
	font-weight: 600;
	flex-shrink: 0;
	color: #374151;
}
.price-totals .separator {
	border-bottom: 1px solid #E5E7EB;
}
.price-item.total {
	font-weight: 500;
	color: #111;
	margin-bottom: 0;
}
.price-item.total span {
	font-weight: 700;
	color: var(--primary-color);
}

/* --- Features Grid --- */
.nl-features-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
.nl-feature-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	border: 1px solid #E5E7EB;
	border-radius: 10px;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
	user-select: none;
}
.nl-feature-item:hover {
	border-color: #D1D5DB;
	background: #FAFBFC;
}
.nl-feature-item:has(input:checked) {
	border-color: var(--primary-color);
	background: #F5F3FF;
}
.nl-feature-item input {
	width: 16px !important;
	height: 16px !important;
	flex-shrink: 0;
}
.nl-feature-item img {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}
.nl-feature-item span {
	font-size: 13px;
	font-weight: 500;
	color: #374151;
}

/* --- Submit Area --- */
.nl-submit-area {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.5rem 2rem;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.nl-save-template {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 14px;
	color: #6B7280;
	user-select: none;
}
.nl-save-template input {
	width: 18px;
	height: 18px;
}
.nl-submit-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 32px;
	background: var(--primary-color);
	color: #fff;
	border: none;
	border-radius: 12px;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	transition: transform 0.15s, filter 0.15s;
	flex-shrink: 0;
}
.nl-submit-btn:hover {
	transform: translateY(-1px);
	filter: brightness(1.1);
}

/* --- Mobile --- */
@media (max-width: 768px) {
	.nl-step-header {
		padding: 1rem 1.25rem;
	}
	.nl-step-body {
		padding: 1.25rem;
	}
	.nl-features-grid {
		grid-template-columns: 1fr;
	}
	.nl-submit-area {
		flex-direction: column;
		padding: 1.25rem;
	}
	.nl-submit-btn {
		width: 100%;
		justify-content: center;
	}
	.nl-time-inputs {
		padding: 0 6px;
	}
	.nl-route-dot-col {
		display: none;
	}
	.nl-route-fields {
		padding-bottom: 0.5rem;
	}
	.intermediate.position-relative.stop-row {
		margin-left: 0;
	}
}

/* Legacy compat */
label.btn.btn-outline-primary {
	padding: 7px 15px;
	font-size: 14px;
	border-radius: 5px;
	width: 100%;
	color: #000;
	border-color: #EAECEF;
	background: #F5F6F9;
	margin-bottom: 6px;
	text-align: left;
}
.btn-check:checked+label.btn-outline-primary {
	background: #4651FB;
	box-shadow: none;
}
.btn-check:checked+label.btn-outline-primary img {
	filter: brightness(100) grayscale(1);
}

.dashboard-card {
	background: #F8F9FA;
	padding: 2rem;
	border-radius: 12px;
	height: 100%;
}

.arrow-right {
	position: absolute;
	top: 1rem;
	right: 1rem;
	font-size: 30px;
	opacity: .3;
	transform: rotate(90deg);
	color: var(--primary-color);
}

.icon-holder {
	background: var(--primary-color);
	display: flex;
	padding: 8px;
	border-radius: 12px;
	flex-shrink: 0;
	width: 40px;
	align-items: center;
	justify-content: center;
	height: 40px;
}

.dashboard-card--title {
	font-weight: bold;
	color: var(--primary-color);
	line-height: 1.2;
}

.dashboard-card--text {
	margin-top: 10px;
	display: block;
	/* font-weight: 400; */
	color: #575768;
}

.dashboard-card--button {
	font-weight: 500;
	font-size: 13px;
	letter-spacing: -.4px;
	margin-top: 10px;
	display: block;
}

.dashboard-card img {
	max-width: 20px;
	filter: invert(1) brightness(100);
}

.messages-btn {
	background: #EBECED;
	color:var(--primary-color);
	padding: 9px 16px;
	border-radius: 50px;
	font-size: 13px;
	font-weight: 400;
	transition: .2s all;
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

/* ========== Messages v2 ========== */

/* --- Conversations List --- */
.msg-list-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}
.msg-list-header h1 {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0;
}
.msg-unread-badge {
	background: var(--primary-color);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 50px;
}

.msg-conversations {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.msg-conv-item {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.875rem 1rem;
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
	transition: background 0.15s;
}
.msg-conv-item:hover {
	background: #F3F4F6;
	color: inherit;
}
.msg-conv-item.unread {
	background: #F0F4FF;
}
.msg-conv-item.unread:hover {
	background: #E4EAFF;
}

.msg-conv-item-avatar-wrap {
	position: relative;
	flex-shrink: 0;
}
.msg-conv-item-avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	object-fit: cover;
}
.msg-online-dot {
	position: absolute;
	bottom: 2px;
	right: 2px;
	width: 12px;
	height: 12px;
	background: var(--primary-color);
	border: 2px solid #fff;
	border-radius: 50%;
}

.msg-conv-item-body {
	flex: 1;
	min-width: 0;
}
.msg-conv-item-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 3px;
}
.msg-conv-item-name {
	font-weight: 600;
	font-size: 0.95rem;
	color: #1a1a1a;
}
.msg-conv-item.unread .msg-conv-item-name {
	font-weight: 700;
}
.msg-conv-item-time {
	font-size: 12px;
	color: #9CA3AF;
	flex-shrink: 0;
}
.msg-conv-item.unread .msg-conv-item-time {
	color: var(--primary-color);
	font-weight: 600;
}

.msg-conv-item-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
}
.msg-conv-item-preview {
	font-size: 13px;
	color: #6B7280;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.msg-conv-item.unread .msg-conv-item-preview {
	color: #374151;
	font-weight: 500;
}
.msg-conv-item-count {
	background: var(--primary-color);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	min-width: 20px;
	height: 20px;
	border-radius: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
	flex-shrink: 0;
}

/* --- Conversation Header --- */
.msg-conv-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0 1rem;
	border-bottom: 1px solid #F3F4F6;
	margin-bottom: 0;
}
.msg-back-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #374151;
	background: #F3F4F6;
	text-decoration: none;
	transition: background 0.15s;
	flex-shrink: 0;
}
.msg-back-btn:hover {
	background: #E5E7EB;
	color: #111;
}
.msg-conv-user {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	flex: 1;
	min-width: 0;
}
.msg-conv-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}
.msg-conv-name {
	font-weight: 600;
	font-size: 1rem;
	color: #1a1a1a;
}
.msg-profile-link {
	font-size: 13px;
	color: var(--primary-color);
	text-decoration: none;
	font-weight: 500;
	padding: 6px 12px;
	border-radius: 8px;
	background: #F0F4FF;
	transition: background 0.15s;
	flex-shrink: 0;
}
.msg-profile-link:hover {
	background: #E0E8FF;
	color: var(--primary-color);
}

/* --- Chat Area --- */
.msg-chat-area {
	height: 450px;
	overflow-y: auto;
	padding: 1.25rem 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 4px;
	scrollbar-width: thin;
	scrollbar-color: #D1D5DB transparent;
}
.msg-chat-area::-webkit-scrollbar {
	width: 5px;
}
.msg-chat-area::-webkit-scrollbar-thumb {
	background: #D1D5DB;
	border-radius: 10px;
}

/* Date dividers */
.msg-date-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 1rem 0;
}
.msg-date-divider span {
	background: #E5E7EB;
	color: #6B7280;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 14px;
	border-radius: 50px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

/* Bubbles */
.msg-bubble-row {
	display: flex;
	margin-bottom: 2px;
}
.msg-bubble-row.sent {
	justify-content: flex-end;
}
.msg-bubble-row.received {
	justify-content: flex-start;
}

.msg-bubble {
	max-width: 75%;
	padding: 10px 14px;
	border-radius: 18px;
	position: relative;
	line-height: 1.45;
	font-size: 14px;
	word-wrap: break-word;
}

.msg-bubble-row.sent .msg-bubble {
	background: var(--primary-color);
	color: #fff;
	border-bottom-right-radius: 6px;
}
.msg-bubble-row.received .msg-bubble {
	background: #F3F4F6;
	color: #1a1a1a;
	border-bottom-left-radius: 6px;
}

/* Consecutive same-side bubbles: reset radius */
.msg-bubble-row.sent + .msg-bubble-row.sent .msg-bubble {
	border-top-right-radius: 6px;
}
.msg-bubble-row.received + .msg-bubble-row.received .msg-bubble {
	border-top-left-radius: 6px;
}

.msg-bubble-text {
	margin-bottom: 2px;
}
.msg-bubble-time {
	font-size: 10px;
	opacity: 0.65;
	text-align: right;
	margin-top: 2px;
}

/* --- Input Area --- */
.msg-input-area {
	padding: 0.75rem 0 0;
	border-top: 1px solid #F3F4F6;
}
.msg-input-wrap {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: #F3F4F6;
	border-radius: 50px;
	padding: 4px 4px 4px 18px;
}
.msg-input {
	border: none;
	background: transparent;
	flex: 1;
	font-size: 14px;
	padding: 8px 0;
	outline: none;
	min-width: 0;
}
.msg-input::placeholder {
	color: #9CA3AF;
}
.msg-send-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: var(--primary-color);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.15s, background 0.15s;
	flex-shrink: 0;
	font-size: 16px;
}
.msg-send-btn:hover {
	transform: scale(1.05);
	filter: brightness(1.1);
}

/* --- Empty States --- */
.msg-empty-state,
.msg-empty-chat {
	text-align: center;
	padding: 3rem 1rem;
	color: #6B7280;
}
.msg-empty-icon {
	font-size: 3rem;
	margin-bottom: 1rem;
	opacity: 0.3;
}
.msg-empty-state h5 {
	color: #374151;
	font-weight: 600;
	margin-bottom: 0.5rem;
}
.msg-empty-state p,
.msg-empty-chat p {
	font-size: 14px;
	margin: 0;
}

/* --- Mobile --- */
@media (max-width: 768px) {
	.msg-chat-area {
		height: 350px;
	}
	.msg-bubble {
		max-width: 85%;
	}
	.msg-conv-item {
		padding: 0.75rem;
	}
	.msg-conv-item-avatar {
		width: 44px;
		height: 44px;
	}
	.msg-profile-link {
		display: none;
	}
	.dashboard-container {
		padding: 1rem;
	}
}

/* Legacy compat */
.avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.btn.delete-btn {
	background: #FFDBDB;
	color: #ff0000;
}
.btn.view-btn {
	background: #4EAC84;
	color: #fff !important;
}
.selected-count {
	color: #64748b;
	font-size: 0.9rem;
}

	.tc-ratings .avatars {
		box-shadow: none;
	}

	.top-card {
		border-bottom: 1px solid #ddd;
		padding: 1rem 0;
	}

/* Profile page */
.profile-hero {
	background: #F8F9FA;
	border-radius: 12px;
	padding: 1.5rem;
}

.profile-hero-top {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.profile-avatar-img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.profile-online-badge {
	position: absolute;
	bottom: 2px;
	right: 2px;
	width: 22px;
	height: 22px;
	background: #22c55e;
	border-radius: 50%;
	border: 2px solid #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 12px;
}

.profile-hero-info {
	flex: 1;
	min-width: 0;
}

.profile-display-name {
	font-size: 1.25rem;
	font-weight: 600;
	color: #212529;
	margin-bottom: 0;
	line-height: 1.3;
}

.profile-username {
	font-size: 0.875rem;
	color: #6c757d;
	margin-bottom: 0.35rem;
}

.profile-rating {
	display: flex;
	align-items: center;
	gap: 2px;
	color: #f59e0b;
	font-size: 0.8rem;
}

.profile-rating-text {
	color: #6c757d;
	margin-left: 6px;
	font-size: 0.8rem;
}

.profile-info-card {
	background: #F8F9FA;
	border-radius: 10px;
	padding: 1rem 1.15rem;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	height: 100%;
}

.profile-info-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--primary-color);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	flex-shrink: 0;
}

.profile-info-label {
	font-size: 0.75rem;
	color: #6c757d;
	margin-bottom: 0;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	font-weight: 500;
}

.profile-info-value {
	font-size: 0.9rem;
	font-weight: 600;
	color: #212529;
	margin-bottom: 0;
	word-break: break-word;
}

.profile-stat-card {
	background: #F8F9FA;
	border-radius: 10px;
	padding: 1.15rem;
	text-align: center;
}

.profile-stat-number {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--primary-color);
	line-height: 1.2;
}

.profile-stat-label {
	font-size: 0.75rem;
	color: #6c757d;
	margin-top: 2px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	font-weight: 500;
}

@media (max-width: 767px) {
	.profile-hero-top {
		flex-direction: column;
		text-align: center;
	}
	.profile-hero-info {
		text-align: center;
	}
	.profile-rating {
		justify-content: center;
	}
	.profile-hero-action {
		margin-left: 0 !important;
		width: 100%;
	}
	.profile-hero-action .btn {
		width: 100%;
		justify-content: center;
	}
}

/* Messages start */


.c-card .ride-card-list {
	border: 1px solid #F8F9FA;
}

.c-card .list-col a {
	color:initial
}

/* Unified list card items */
.passenger-card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #F8F9FA;
	border-radius: 10px;
	padding: 1rem;
	margin-bottom: 0.65rem;
	transition: box-shadow 0.15s ease;
}

.passenger-card:hover {
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.passenger-card .pc-data img,
.passenger-card .passenger-image {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	margin-right: 10px;
	object-fit: cover;
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.small-items {
	color: #424242;
	font-size: 13px;
	font-weight: 400;
}

.small-items .fw-bold {
	color: #212529;
}

.passenger-info {
	display: flex;
	gap: 10px;
	font-weight: 300;
	font-size: 13px;
}

.passenger-info span {
	font-weight: 500;
}

.pc-name {
	line-height: 1.3;
}

.pc-name strong {
	font-size: 0.9rem;
	color: #212529;
}

.pc-type-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 500;
	padding: 3px 10px;
	border-radius: 50px;
	color: #fff;
	width: max-content;
	margin-top: 3px;
	letter-spacing: 0.2px;
}

.pc-type-badge.past {
	background: #EF5350;
}

.pc-type-badge.current {
	background: #4FAA84;
}

.pc-data {
	display: flex;
	align-items: center;
}

/* Page section header */
.page-section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.25rem;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.page-section-header h1 {
	font-size: 1.1rem;
	font-weight: 600;
	color: #212529;
	margin: 0;
}

/* Status badges unified */
.status-badge {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 50px;
	letter-spacing: 0.2px;
	gap: 4px;
}

.status-badge.pending { background: #FFF3CD; color: #856404; }
.status-badge.accepted { background: #D4EDDA; color: #155724; }
.status-badge.rejected { background: #F8D7DA; color: #721C24; }
.status-badge.cancelled { background: #E2E3E5; color: #383D41; }
.status-badge.completed { background: #CCE5FF; color: #004085; }

/* Ride item card (for upcoming/past rides lists) */
.ride-item {
	background: #F8F9FA;
	border-radius: 10px;
	padding: 1rem 1.25rem;
	margin-bottom: 0.65rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	transition: box-shadow 0.15s ease;
}

.ride-item:hover {
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ride-item-route {
	flex: 1;
	min-width: 0;
}

.ride-item-route .ride-date {
	font-size: 12px;
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: 2px;
}

.ride-item-route .ride-cities {
	font-size: 0.95rem;
	font-weight: 500;
	color: #212529;
}

.ride-item-route .ride-cities .bi {
	color: var(--primary-color);
	margin: 0 4px;
	font-size: 0.8rem;
}

.ride-item-details {
	display: flex;
	gap: 1rem;
	align-items: center;
	flex-shrink: 0;
}

.ride-item-details .ride-price {
	font-weight: 600;
	color: #212529;
	font-size: 0.95rem;
	white-space: nowrap;
}

.ride-item-details .ride-seats {
	font-size: 12px;
	color: #6c757d;
	white-space: nowrap;
}

.ride-item-actions {
	display: flex;
	gap: 0.4rem;
	align-items: center;
	flex-shrink: 0;
}

.ride-item-actions .btn {
	border-radius: 8px;
	font-size: 13px;
	padding: 6px 12px;
}

/* Hub cards (rides.tpl driver hub grid) */
.hub-card {
	background: #F8F9FA;
	border-radius: 12px;
	padding: 1.75rem 1.5rem;
	text-align: center;
	transition: all 0.2s ease;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: #212529;
}

.hub-card:hover {
	background: #fff;
	box-shadow: 0 4px 15px rgba(0,0,0,0.08);
	transform: translateY(-2px);
	color: #212529;
}

.hub-card .hub-icon {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: var(--primary-color);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	margin-bottom: 0.85rem;
}

.hub-card .hub-title {
	font-weight: 600;
	font-size: 0.95rem;
	margin-bottom: 0.25rem;
}

.hub-card .hub-desc {
	font-size: 0.8rem;
	color: #6c757d;
	margin-bottom: 0;
}

/* Account form improvements (legacy) */
.account-section {
	margin-bottom: 2rem;
}

.account-section-title {
	font-size: 0.95rem;
	font-weight: 600;
	color: #212529;
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid #F0F1F3;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.account-section-title i {
	color: var(--primary-color);
}

/* Profile Update v2 */
.pu-page-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 1.75rem;
	gap: 1rem;
}

.pu-page-title {
	font-size: 1.35rem;
	font-weight: 700;
	color: #1a1a2e;
	margin-bottom: 0.15rem;
}

.pu-page-subtitle {
	font-size: 0.85rem;
	color: #6c757d;
	margin-bottom: 0;
}

.pu-section {
	background: #fff;
	border: 1px solid #eef0f2;
	border-radius: 14px;
	padding: 1.5rem;
	margin-bottom: 1.25rem;
	transition: box-shadow 0.2s;
}

.pu-section:hover {
	box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.pu-section-header {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-bottom: 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #f0f1f3;
}

.pu-section-icon {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--primary-color), #9b59b6);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	flex-shrink: 0;
}

.pu-section-title {
	font-size: 0.95rem;
	font-weight: 700;
	color: #1a1a2e;
	margin-bottom: 0.1rem;
}

.pu-section-desc {
	font-size: 0.8rem;
	color: #8c8c9e;
	margin-bottom: 0;
}

/* Avatar area */
.pu-avatar-area {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.pu-avatar-preview {
	position: relative;
	flex-shrink: 0;
}

.pu-avatar-preview img {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid #eef0f2;
}

.pu-avatar-delete {
	position: absolute;
	top: -2px;
	right: -2px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #ff4757;
	color: #fff;
	border: 2px solid #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.65rem;
	cursor: pointer;
	transition: transform 0.15s;
}

.pu-avatar-delete:hover {
	transform: scale(1.15);
}

.pu-upload-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1rem 1.5rem;
	border: 2px dashed #dde1e6;
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.2s;
	text-align: center;
	min-width: 180px;
}

.pu-upload-btn:hover {
	border-color: var(--primary-color);
	background: #f8f5ff;
}

.pu-upload-btn i {
	font-size: 1.5rem;
	color: var(--primary-color);
	margin-bottom: 0.35rem;
}

.pu-upload-btn span {
	font-size: 0.85rem;
	font-weight: 600;
	color: #333;
}

.pu-upload-btn small {
	font-size: 0.72rem;
	color: #999;
	margin-top: 0.15rem;
}

/* Form fields */
.pu-fields {
	padding-top: 0.25rem;
}

.pu-field {
	display: flex;
	flex-direction: column;
}

.pu-field-label {
	font-size: 0.8rem;
	font-weight: 600;
	color: #4a4a5a;
	margin-bottom: 0.4rem;
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.pu-field-label i {
	color: var(--primary-color);
	font-size: 0.85rem;
}

.pu-input {
	border: 1.5px solid #e0e3e8;
	border-radius: 10px;
	padding: 0.65rem 0.9rem;
	font-size: 0.88rem;
	color: #1a1a2e;
	background: #fff;
	transition: all 0.2s;
	width: 100%;
}

.pu-input:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.pu-input:disabled {
	background: #f5f6f8;
	color: #8c8c9e;
	cursor: not-allowed;
}

.pu-textarea {
	resize: vertical;
	min-height: 80px;
	line-height: 1.5;
}

.pu-field-hint {
	font-size: 0.72rem;
	color: #a0a0b0;
	margin-top: 0.3rem;
}

/* Submit */
.pu-submit-area {
	display: flex;
	justify-content: flex-end;
	padding-top: 0.5rem;
}

.pu-save-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 2rem;
	background: linear-gradient(135deg, var(--primary-color), #9b59b6);
	color: #fff;
	border: none;
	border-radius: 12px;
	font-size: 0.92rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.25s;
	box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

.pu-save-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
}

.pu-save-btn:active {
	transform: translateY(0);
}

/* Avatar status messages */
.pu-avatar-status {
	margin-top: 0.75rem;
	font-size: 0.82rem;
	font-weight: 500;
	padding: 0.4rem 0.75rem;
	border-radius: 8px;
}

.pu-avatar-status-success {
	color: #15803d;
	background: #f0fdf4;
}

.pu-avatar-status-error {
	color: #dc2626;
	background: #fef2f2;
}

.pu-avatar-status-loading {
	color: #7c3aed;
	background: #f5f3ff;
}

.pu-uploading {
	pointer-events: none;
	opacity: 0.6;
}

@media (max-width: 767px) {
	.pu-page-header {
		flex-direction: column;
	}
	.pu-avatar-area {
		flex-direction: column;
		text-align: center;
	}
	.pu-submit-area {
		justify-content: stretch;
	}
	.pu-save-btn {
		width: 100%;
		justify-content: center;
	}
}

/* Security page */
.security-card {
	background: #F8F9FA;
	border-radius: 12px;
	padding: 2rem;
	text-align: center;
	max-width: 480px;
	margin: 0 auto;
}

.security-card .security-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--primary-color);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	margin: 0 auto 1rem;
}

.security-card .security-title {
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.security-card .security-desc {
	font-size: 0.85rem;
	color: #6c757d;
	margin-bottom: 1.5rem;
}

.security-card .form-control {
	border-radius: 10px;
	padding: 12px 15px;
	font-size: 14px;
	border: 1px solid #d7dadc;
	box-shadow: 0 1px 1px rgba(0,0,0,0.05);
	text-align: center;
}

/* Booking card (passenger trips) */
.booking-card {
	background: #F8F9FA;
	border-radius: 10px;
	padding: 1rem 1.25rem;
	margin-bottom: 0.65rem;
	transition: box-shadow 0.15s ease;
}

.booking-card:hover {
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.booking-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}

.booking-card-route {
	font-weight: 500;
	color: #212529;
}

.booking-card-route .bi {
	color: var(--primary-color);
	margin: 0 4px;
}

.booking-card-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.booking-card-info {
	display: flex;
	gap: 1rem;
	align-items: center;
	flex-wrap: wrap;
	font-size: 13px;
	color: #6c757d;
}

.booking-card-info strong {
	color: #212529;
}

.booking-card-actions {
	display: flex;
	gap: 0.4rem;
	align-items: center;
}

.booking-card-actions .btn {
	border-radius: 8px;
	font-size: 13px;
	padding: 6px 12px;
}

/* Empty state */
.empty-state {
	text-align: center;
	padding: 3rem 1rem;
}

.empty-state .empty-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #F0F1F3;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	color: #adb5bd;
	margin: 0 auto 1rem;
}

.empty-state p {
	color: #6c757d;
	margin-bottom: 0.75rem;
}

.empty-state .btn {
	border-radius: 8px;
}

/* Responsive overrides for new cards */
@media (max-width: 767px) {
	.ride-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
	.ride-item-details {
		width: 100%;
		justify-content: space-between;
	}
	.ride-item-actions {
		width: 100%;
		justify-content: flex-end;
	}
	.booking-card-top, .booking-card-bottom {
		flex-direction: column;
		align-items: flex-start;
	}
	.booking-card-actions {
		width: 100%;
		justify-content: flex-end;
		margin-top: 0.5rem;
	}
	.hub-card {
		padding: 1.25rem 1rem;
	}
	.hub-card .hub-icon {
		width: 44px;
		height: 44px;
		font-size: 1.2rem;
	}
	.passenger-card {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
	.passenger-card .passenger-actions {
		width: 100%;
		text-align: right;
	}
}

.dashboard-navtabs .nav-link {
	background: none;
	border-bottom: 2px solid #EEE;
	border-radius: 0;
	color:#444;
	font-weight: 400;
	padding:5px;
}

.dashboard-navtabs .nav-link.active {
	background-color: transparent;
	color: var(--primary-color);
	border-bottom: 2px solid var(--primary-color);
}

.dashboard-navtabs {
	gap: 3px;
	flex-wrap: nowrap;
	overflow-x: auto;
}

.dashboard-navtabs .nav-item {
	flex-shrink: 0;
	padding-right: 15px;
}

.heading-tab .form-control {
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
	border: none;
	padding: 10px 20px;
	font-size: 13px;
}

.heading-tab .btn {
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
	border: none;
	padding: 10px 20px;
	font-size: 13px;
	background: var(--primary-color);
	font-weight: 500;
	border-radius: 5px;
	color: #fff;
}

#addVehicle .modal-header {
	border-bottom: none;
	padding: 1.5rem 1.5rem 0.5rem;
}

#addVehicle .close {
	background: none;
	border: none;
}

#addVehicle .form-control {
	padding: 10px 20px;
	font-size: 13px;
	border-radius: 9px;
	background-color: #fff;
	border: 1px solid #d7dadc;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

#addVehicle label {
	font-weight: 500;
	margin-bottom: 0;
	font-size: 13px;
}

#addVehicle .btn.btn-primary {
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
	border: none;
	padding: 13px 20px;
	font-size: 13px;
	background: var(--primary-color);
	font-weight: 500;
	border-radius: 6px;
	color: #fff; 
}

#addVehicle .feature-check label {
	margin-bottom: 8px;
}


/* Settings start */
.clients-profile_update #ui-datepicker-div {
	min-width: 370px;
	left:0
}

#about {
	min-height: 100%;
}

#deleteImage {
	background: #ff0000;
	color: #fff;
	padding: 5px;
	line-height: 1;
	border-radius: 50px;
	position: absolute;
	left: 11px;
	top: 11px;
}
/* Settings start */

@media(max-width:767px) {
	.form-card {
		padding:1rem;
	}
	.passenger-info small {
			display: flex;
			gap:5px
	}
	.pc-date-time {
		margin: 10px 0;
	}
	.login-image-bg .w-75 {
		width:100% !important
	}
	.login-main-img {
		max-width: 168px;
		margin: 15px auto 0;
	}
	.login-image-bg h2 {
		font-weight: 600;
		font-size: 20px;
		display: flex;
		align-items: center;
	}
	.login-image-bg h2 i {
		margin-right: 10px;
	}
	.login-image-bg {
		height: 300px;
		padding: 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: relative;
		overflow: hidden;
	}
    .page-template.login {
        max-height: 100%;
        overflow: hidden;
    }
    .login-form {
        padding: 30px;
		overflow-x: hidden;
		position: relative;
    }
	.login-header {
		display: none;
	}
	.login-header .nav-logo {
		filter:invert(1) brightness(100)
	}
    .login-form .backbtn {  
        font-size: 12px;
        font-weight: 600;
        color: #fff;
    }
	.text-no-account {
		text-align: center;
	}
	.text-no-account a {
		display: block;
	}
	.page-template.login .row.full-width > .col-md-6 {
		padding: 0;
	}
	.clients-recover .login-form::before {
		height: 208px !important;
	}

	.clients-recover .login-form::after {
		top:96px
	}
	.reset-title img {
		max-width: 23px;
		margin-right: 5px;
	}
	.login-form h1, .login-form p {
		color:#fff;
	}
	.login-form h1 {
		font-size: 20px;
		margin-top: 10px;
	}

	.login-form p {
		line-height: 1.3;
	}
	
	
	.avatars-img {
		margin-right: 20px;
		display: flex;
	}
	.top-menu ul {
		flex-wrap: nowrap;
		flex-direction: row;
		overflow-x: auto;
		padding-bottom: 10px;
	}
	.top-menu ul li {
		margin-right: 5px;
		flex-shrink: 0;
	}
	.top-menu ul li a {
		padding: 7px;
		border-radius: 5px;
		font-size: 12px;
		color: #1F295E;
		font-weight: 400;
		margin-bottom: 0;
	}
	.top-menu ul li a.logout {
		padding: 7px 15px;
	}
	.announcement-card-footer {
			align-items: start;
	}
	.user-statistics {
		gap: 5px;
		margin-top: 10px;
	}
	.c-card {
		padding:.5rem;
		margin-top: 10px;
	}
	.menuItem .bi {
		display: none;
	}
	.newListingForm input:not([type="checkbox"]), .newListingForm .form-select {
		height: 44px;
		border-radius: 8px;
		padding: 10px 12px;
		font-size: 13px;
	}
}

/* ===== Reviews ===== */

/* Review summary cards */
.review-summary-card {
	background: #F8F9FA;
	border-radius: 12px;
	padding: 1.5rem;
	text-align: center;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.review-big-number {
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--primary-color);
	line-height: 1;
	display: block;
	margin-bottom: 0.35rem;
}

.review-stars-row {
	font-size: 1rem;
	margin-bottom: 0.25rem;
}

.review-summary-type {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

.review-type-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	color: #fff;
}

.review-type-icon.driver { background: #4CAF50; }
.review-type-icon.passenger { background: #2196F3; }

.review-type-label {
	font-weight: 600;
	font-size: 0.9rem;
	color: #212529;
}

.review-type-rating {
	font-size: 0.9rem;
	font-weight: 500;
	color: #212529;
}

/* Filter tabs */
.review-filter-tabs {
	display: flex;
	gap: 0.5rem;
	border-bottom: 2px solid #F0F1F3;
	padding-bottom: 0;
}

.review-filter-tab {
	padding: 0.5rem 1rem;
	font-size: 13px;
	font-weight: 500;
	color: #6c757d;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: all 0.15s ease;
}

.review-filter-tab:hover {
	color: var(--primary-color);
}

.review-filter-tab.active {
	color: var(--primary-color);
	border-bottom-color: var(--primary-color);
	font-weight: 600;
}

/* Review cards */
.review-card {
	background: #F8F9FA;
	border-radius: 10px;
	padding: 1rem;
	margin-bottom: 0.65rem;
}

.review-card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 0.5rem;
}

.review-card-user {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.review-card-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.review-card-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	margin-top: 2px;
}

.review-type-pill {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 50px;
}

.review-type-pill.driver { background: #E8F5E9; color: #2E7D32; }
.review-type-pill.passenger { background: #E3F2FD; color: #1565C0; }

.review-card-rating {
	font-size: 0.8rem;
	flex-shrink: 0;
}

.review-card-comment {
	font-size: 0.875rem;
	color: #495057;
	line-height: 1.5;
	margin-bottom: 0.5rem;
}

.review-card-trip {
	font-size: 12px;
	color: #6c757d;
}

.review-card-trip a {
	color: var(--primary-color);
	font-weight: 500;
}

/* Star rating input */
.review-star-input {
	display: flex;
	gap: 4px;
	font-size: 1.4rem;
	cursor: pointer;
}

.review-star-input .review-star {
	color: #dee2e6;
	transition: color 0.15s;
}

.review-star-input .review-star.active {
	color: #f59e0b;
}

.review-star-input .review-star:hover {
	color: #f59e0b;
}

@media (max-width: 767px) {
	.review-card-header {
		flex-direction: column;
		gap: 0.5rem;
	}
	.review-filter-tabs {
		overflow-x: auto;
		flex-wrap: nowrap;
	}
	.review-filter-tab {
		flex-shrink: 0;
	}
	.review-summary-card {
		padding: 1rem;
	}
	.review-big-number {
		font-size: 1.75rem;
	}
}

/* Route stats panel */
.route-stats {
	margin-top: 1rem;
	background: #f8f9fb;
	border-radius: 12px;
	padding: 1rem 1.25rem;
	border: 1px solid #e8eaf0;
}

.route-stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

.route-stat-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.route-stat-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	color: #4752FB;
	border: 1px solid #e8eaf0;
	flex-shrink: 0;
}

.route-stat-content {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.route-stat-value {
	font-weight: 700;
	font-size: 0.95rem;
	color: #1a1a2e;
	white-space: nowrap;
}

.route-stat-label {
	font-size: 0.75rem;
	color: #8a8a9a;
	white-space: nowrap;
}

.route-stat-legs {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border-top: 1px solid #e8eaf0;
	padding-top: 0.75rem;
	margin-top: 0.25rem;
}

@media (max-width: 991px) {
	.route-stats-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.route-stats-grid {
		grid-template-columns: 1fr;
	}
}

/* Intermediate stop options */
.stop-options {
	padding: 4px 0 0;
}

.stop-options .form-check-input {
	width: 16px;
	height: 16px;
	margin-top: 0;
}

.stop-options .small {
	font-size: 0.8rem;
	color: #555;
}