/* ========================================================================== */
/*  SECTION: GLOBAL RESET & BASE ELEMENTS                                     */
/*  Used by: ALL PAGES                                                        */
/* ========================================================================== */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

body {
	font-family: "Manrope", sans-serif;
	line-height: 24px;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

	blockquote:before,
	blockquote:after,
	q:before,
	q:after {
		content: '';
		content: none;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

a {
	text-decoration: none;
}


/* ========================================================================== */
/*  SECTION: SHARED IMAGE / PORTAL BASICS                                     */
/*  Used by: Home/Index, Login, Signup, ForgotPassword, ChangePassword, etc.  */
/* ========================================================================== */

.main_img {
	width: 120px;
	padding: 60px 0 20px;
}

.main_img.main_img_inner {
	padding: 0px 0;
}


/* ========================================================================== */
/*  SECTION: LANGUAGE TOGGLE SWITCH                                           */
/*  Used by: Home/Index (Portal language toggle)                              */
/* ========================================================================== */

.lang-toggle {
	position: relative;
	width: 145px;
	height: 46px;
	margin: 0 auto 35px;
}

	/* Hidden Checkbox */
	.lang-toggle input {
		display: none;
	}

/* Toggle Track */
.toggle-label {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	border-radius: 50px;
	height: 100%;
	padding: 0 12px;
	font-weight: 600;
	color: #495057;
	cursor: pointer;
	position: relative;
	transition: background 0.3s;
	user-select: none;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
	border: 1px solid #e5e7eb;
}

	/* Blue Slider (moving part) */

/* Text layers */
	.toggle-label span {
		position: relative;
		z-index: 2;
		font-size: 13px;
		transition: color 0.3s;
		color: #4b5563;
	}

.lang-toggle .toggle-label .active_en {
	background-color: #72ce77;
	border-radius: 50px;
	padding: 5px 14px 6px 16px;
	position: relative;
	left: -5px;
}
.lang-toggle .toggle-label .active_ar {
	background-color: #72ce77;
	border-radius: 50px;
	padding: 4px 13px;
	position: relative;
	left: 5px;
}

	.lang-toggle .toggle-label .active_ar span {
		color: #fff;
		left: 0;
	}

.lang-toggle .toggle-label .active_en span {
	color: #fff;
}

.lang-toggle input:not(:checked) + .toggle-label .ar {
	color: #6c757d;
}

.lang-toggle span.ar {
	left: -12px;
}
.lang-toggle span.en {
	left: 8px;
}

.lang-toggle .active_en span.en {
	left: 0;
}
/* Force the language toggle to always behave LTR, 
   even when the page is Arabic (dir="rtl") */
.lang-toggle,
.lang-toggle .toggle-label {
	direction: ltr;
}
	.lang-toggle .toggle-label .active_ar span.ar {
		color: #fff;
	}


/* ========================================================================== */
/*  SECTION: PORTAL CARDS & PORTAL LANDING PAGE                               */
/*  View: Home/Index                                                          */
/* ========================================================================== */

.portal_card {
	transition: all 0.2s linear;
	border: 1px solid #e5e7eb;
	padding: 30px;
	border-radius: 15px;
	max-width: 260px;
	margin: 0 auto;
	text-align: center;
	position: relative;
}

	.portal_card .icon_wrapper {
		background-color: #72ce77;
		display: inline-block;
		padding: 20px 22px;
		border-radius: 15px;
	}

		.portal_card .icon_wrapper.cb_bg {
			background-color: #ec4899;
		}

		.portal_card .icon_wrapper.sm_bg {
			background-color: #3b82f6;
		}

		.portal_card .icon_wrapper i {
			color: #fff;
			font-size: 28px;
		}

	.portal_card h3 {
		color: #111827;
		font-weight: 800;
		font-size: 18px;
		padding: 13px 0 5px;
	}

	.portal_card p {
		color: #4b5563;
		line-height: 20px;
	}

.main_btm_area p {
	color: #6b7280;
}

.main_btm_area a {
	color: #6b7280;
}

.main_btm_area div a:nth-child(1) {
	margin-right: 20px;
}

.main_btm_area.text-center {
	margin-top: 40px;
}

.top_area_main h1 {
	font-size: 36px;
	line-height: 40px;
	font-weight: 800;
	color: #000;
}

.top_area_main p {
	color: #4b5563;
	font-size: 18px;
	max-width: 685px;
	margin: 15px auto 35px;
}

.portal_card i.ri-arrow-right-line {
	color: #fff;
	font-size: 19px;
	position: absolute;
	right: 14px;
	bottom: 15px;
}

.portal_card:hover {
	transform: scale(1.06);
	box-shadow: 1px 8px 15px #cccccc8c;
	border: 1px solid #ccccccf2;
}

	.portal_card:hover h3,
	.portal_card:hover i.ri-arrow-right-line {
		color: #72ce77;
	}

.portal_area .main {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}


/* ========================================================================== */
/*  SECTION: AUTH LAYOUT (LOGIN / SIGNUP / FORGOT / CHANGE PASSWORD)          */
/*  Views: Account/Login, Signup, ForgotPassword, ChangePassword              */
/* ========================================================================== */

.login_body {
	background-color: #f9fafb;
}

.login_form {
	background-color: #fff;
	border: 1px solid #e5e7eb;
	max-width: 480px;
	margin: 0 auto;
	padding: 30px;
	border-radius: 10px;
	margin-top: 35px;
	margin-bottom: 200px;
}

.login_top_area h2 {
	color: #111827;
	font-weight: 900;
	font-size: 32px;
}

.login_top_area p {
	color: #5c6572;
	padding: 15px 0 20px;
	font-size: 17px;
}

	.login_top_area p span {
		color: #72ce77;
	}

.login_top_area a {
	color: #5c6572;
	font-size: 15px;
	display: flex;
	justify-content: center;
}

.login_form label {
	width: 100%;
	text-align: left;
	font-size: 15px;
	margin-bottom: 3px;
}

.login_form input {
	width: 100%;
	padding: 10px 15px;
}

	.login_form input:placeholder-shown {
		background-color: #ffffff; /* white */
	}

	/* When input is filled (has user value) */
	.login_form input:not(:placeholder-shown) {
		background-color: #fffcc8; /* light yellow */
	}

.conatin_btnz {
	position: relative;
}

	.conatin_btnz button {
		position: absolute;
		right: 0;
		top: 1px;
		height: 45px;
	}

		.conatin_btnz button:active,
		.conatin_btnz button:focus {
			border: unset !important;
		}

.forget_adj label,
.forget_adj input {
	width: unset;
}

.forget_adj {
	display: flex;
	justify-content: space-between;
	margin-bottom: 15px;
	margin-top: 20px;
}

	.forget_adj a {
		color: #72ce77;
		opacity: 0.9;
	}

.login_form .login_submit {
	width: 100%;
	background-color: #72ce77;
	border: unset;
	color: #fff;
	padding: 10px 15px;
	border-radius: 5px;
	margin-bottom: 15px;
}

.login_submit + div p {
	color: #a4aab5;
}

	.login_submit + div p a {
		color: #72ce77;
		font-size: 15px;
		opacity: 0.9;
	}

		.forget_adj a:hover,
		.login_submit + div p a:hover {
			opacity: 1;
		}

.login_submit:hover {
	background-color: #50d057;
}

.login_form .form-control:focus {
	border-color: #72ce77;
	box-shadow: unset;
}

.login_top_area p.forget_para {
	max-width: 480px;
	margin: 0 auto;
}

/* Button reset overrides (used for eye toggle and others) */
.btn-toggle:focus,
.btn-toggle:focus-visible,
.btn-toggle:active,
.btn-toggle:focus:active,
.btn-toggle:focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none !important;
}

.btn {
	--bs-btn-color: unset !important;
	--bs-btn-border-width: unset !important;
}


/* ========================================================================== */
/*  SECTION: AUTH - VERIFY FLOW (SHARED PIECES)                               */
/*  Views: e.g. Verify Email pages using .verify_form, .verify_top_area       */
/* ========================================================================== */

.login_top_area.verify_top_area p span {
	display: block;
}

.verify_form .alert {
	font-size: 14px;
	background-color: #eff6ff;
}

.verify_form .timer {
	color: #72ce77;
}

.login_top_area.verify_top_area a {
	color: #72ce77;
	font-size: 15px;
	display: block;
}

.verify_btm a {
	color: #5c6572;
}

#resendBtn {
	color: #72ce77;
}

.login_form.verify_form {
	margin-top: 15px;
}


/* ========================================================================== */
/*  SECTION: OWNER ACCOUNT SETUP LAYOUT & COMPONENTS                          */
/*  View: Account/OwnerAccountSetup                                           */
/* ========================================================================== */

.header_area {
	padding: 25px 0;
	background: #fff;
	border-bottom: 1px solid #eaecef;
	position: sticky;
	top: 0;
	z-index: 1030;
}

.brand {
	font-weight: 800;
	font-size: 24px;
	letter-spacing: .2px;
	display: flex;
	align-items: center;
	gap: .25rem;
}

	.brand span:last-child {
		color: #27ae60;
	}

.form_area {
	padding: 28px 0 120px;
}

.section-card {
	background: #fff;
	border: 1px solid #e9edf2;
	border-radius: 12px;
	padding: 18px;
	margin-bottom: 16px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

	.section-card h5 {
		font-weight: 700;
		margin: 0 0 6px;
	}

.section-desc {
	color: #5f6b7a;
	margin-bottom: 14px;
	font-size: 14px;
	line-height: 20px;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: 3px 14px;
	border: 1px solid #dfe5ec;
	border-radius: 999px;
	margin: .35rem .4rem .35rem 0;
	cursor: pointer;
	user-select: none;
	transition: all .15s ease;
	background: #f3f4f6;
	font-size: 13px;
	transition: all 0.2s linear;
	background-color: #f3f4f6;
}

	.chip:hover {
		background-color: #cdd6df85;
	}

	.chip.active {
		background: #72ce77;
		border-color: #72ce77;
		color: #fff;
	}

	.chip .ri-check-line {
		display: none;
	}

	.chip.active .ri-check-line {
		display: inline;
	}

.dash-upload {
	border: 2px dashed #d9e1ea;
	border-radius: 12px;
	padding: 22px;
	text-align: center;
	background: #fbfcfe;
	cursor: pointer;
}

	.dash-upload input[type="file"] {
		display: none;
	}

	.dash-upload .btn {
		margin-top: 8px;
		background-color: #72ce77;
		color: #fff;
		transition: all 0.2s linear;
	}

		.dash-upload .btn:hover {
			opacity: 0.9;
		}

.invalid-hint {
	color: #dc3545;
	font-size: .9rem;
	display: none;
}

	.invalid-hint.show {
		display: block;
	}

.bottom_sticky_area {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	border-top: 1px solid #eaecef;
	padding: 12px 0;
	z-index: 1030;
}

.progress-text {
	color: #5f6b7a;
}

.btn-continue[disabled] {
	opacity: .6;
	cursor: not-allowed;
}

.owner_top .title {
	font-weight: 700;
	font-size: 30px;
	text-align: center;
	margin: 20px 0 6px;
	padding: 0 0 10px;
}

.owner_top .subtitle {
	text-align: center;
	color: #5f6b7a;
	margin-bottom: 35px;
}

#catCount {
	padding: 10px 0 0px;
	font-size: 15px;
	line-height: 12px;
}

.team_card_wrap {
	border: 2px solid #e5e7eb;
	padding: 12px 0;
	transition: all 0.2s linear;
}

	.team_card_wrap:hover,
	.team_card_wrap.active {
		background-color: #ecfdf5;
		border: 2px solid #72ce77;
		color: #72ce77;
	}

.business_area .form-control:not(:placeholder-shown) {
	background-color: #fffcc8;
}

.business_area .form-control:focus,
.business_area .form-select:focus {
	border-color: #72ce77;
	box-shadow: unset;
}

.form_area.owner_form_area .form-control:focus {
	box-shadow: unset;
	border-color: #3cb44e;
}

#btnContinue {
	color: #fff;
	transition: all 0.2s linear;
}

	#btnContinue:hover {
		opacity: 0.9;
	}

#btnClose {
	text-decoration: unset;
}



/* css for owner account setup banner image and gallery images*/



.owner_form_area .settings-banner-dropzone {
	border-radius: 8px;
	border: 1px dashed #d1d5db;
	background: #f9fafb;
	padding: 16px;
	cursor: pointer;
	min-height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
}

	.owner_form_area .settings-banner-dropzone img {
		width: 100%;
		max-height: 180px;
		object-fit: cover;
		border-radius: 8px;
	}

.owner_form_area .settings-banner-remove {
	position: absolute;
	top: 8px;
	right: 8px;
	border-radius: 999px;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.owner_form_area .settings-banner-empty i {
	opacity: 0.6;
}

.owner_form_area .settings-gallery-preview {
	gap: 8px;
}

.owner_form_area .settings-gallery-thumb {
	position: relative;
	width: 90px;
	height: 70px;
	border-radius: 6px;
	overflow: hidden;
}

	.owner_form_area .settings-gallery-thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

.owner_form_area .settings-gallery-remove {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 24px;
	height: 24px;
	padding: 0;
	border-radius: 999px;
}


/* ========================================================================== */
/*  SECTION: OWNER ACCOUNT SETUP - SALON TIMING TABLE                         */
/*  View: Account/OwnerAccountSetup                                           */
/* ========================================================================== */

.owner_area_wrapper .salon-timing-card .salon-timing-table {
	border-top: 1px solid #edf0f4;
	margin-top: 12px;
	padding-top: 8px;
}

.owner_area_wrapper .salon-timing-card .timing-row {
	padding: 6px 0;
	border-bottom: 1px solid #f3f4f6;
}

	.owner_area_wrapper .salon-timing-card .timing-row:last-child {
		border-bottom: 0;
	}

.owner_area_wrapper .salon-timing-card .day-name {
	min-width: 90px;
	font-weight: 500;
}

.owner_area_wrapper .salon-timing-card .closed-view {
	display: none;
	font-size: 13px;
}

.owner_area_wrapper .salon-timing-card .open-view {
	gap: 6px;
	flex-wrap: wrap;
}

	.owner_area_wrapper .salon-timing-card .open-view .form-control {
		max-width: 110px;
	}

.owner_area_wrapper .salon-timing-card .break-row .form-control {
	max-width: 110px;
}

.owner_area_wrapper .invalid-hint {
	display: none;
	font-size: 12px;
	color: #dc3545;
	margin-top: 4px;
}

	.owner_area_wrapper .invalid-hint.show {
		display: block;
	}


/* ========================================================================== */
/*  SECTION: VERIFY ACCOUNT CARD / OTP ENTRY                                  */
/*  View: Account/VerifyAccount                                               */
/* ========================================================================== */

.verify-card {
	background: #fff;
	width: 420px;
	border-radius: 12px;
	padding: 30px 35px;
	box-shadow: 0 4px 25px rgba(0,0,0,0.08);
}

.otp-input {
	width: 48px;
	height: 48px;
	border: 1px solid #ced4da;
	border-radius: 6px;
	text-align: center;
	font-size: 20px;
	margin: 0 4px;
}

	.otp-input:focus {
		outline: none;
		border-color: #2ecc71;
		box-shadow: 0 0 6px rgba(46,204,113,.4);
	}

.verify-btn {
	background: #72ce77;
	border: none;
	font-weight: 600;
	transition: 0.3s;
	color: #fff;
}
	.verify-btn:hover {
		background: #72ce77 !important;
		opacity: 0.9;
		color: #fff;
	}

	.verify-btn:disabled {
		background: #72ce77a1 !important;
		cursor: not-allowed;
		color: #fff;
	}

#resendCode {
	display: none;
	cursor: pointer;
}


.page-loading-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2000;
}

	.page-loading-overlay.d-none {
		display: none !important;
	}
.footer_area {
	background-color: #1f1f1f;
	padding: 8px 0;
	position: fixed;
	bottom: 0;
	width: 100%;
	font-size: 13px;
	z-index: 999;
}

.footer_bottom_wrapper {
	display: flex;
	justify-content: space-between;
	color: #fff;
	flex-wrap: wrap;
	gap: 10px;
}

	.footer_bottom_wrapper a {
		color: #fff;
	}

.portal_area .main_btm_area p {
	color: #6b7280;
}
.verify_resend a {
	color: #72ce77;
	font-size: 15px;
	display: none;
}
.back_potal_lnk a {
	color: #a4aab5;
	font-size: 15px;
}
.modal_area .modal-title {
	font-size: 20px;
	font-weight: 800;
}
.privacy_content_wrapper ul {
	padding-left: 15px;
	list-style: disc;
}
.privacy_content_wrapper p {
	margin-bottom: 10px;
	line-height: 20px;
	font-size: 16px;
}
.privacy_content_wrapper h3 {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 5px;
	margin-top: 5px;
}
.privacy_content_wrapper h4 {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 5px;
}
.privacy_cnt_detail p {
	margin-bottom: 0 !important;
	font-size: 15px;
	line-height: 16px;
}
.privacy_cnt_detail p span{
  font-weight:600;
}
.privacy_cnt_detail {
	margin-bottom: 10px;
}
.modal_area .btn-close {
	font-size: 10px;
	position: relative;
	left: -10px;
	top: 0px;
}
.modal_area .btn-close:focus {
 box-shadow:unset;
}
.modal_area .modal-footer button {
	background-color: #72ce77;
	color: #fff;
	transition: all 0.2s linear;
	border: 1px solid #72ce77;
}
	.modal_area .modal-footer button:hover {
		background-color: #fff;
		color: #72ce77;
		border: 1px solid #72ce77;
	}

.trail_suscription_area .subscription_icon {
	position: relative;
	width: 72px;
	height: 72px;
	margin: 0 auto 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #67c38b;
}

.trail_suscription_area .calendar_icon i {
	font-size: 52px;
	line-height: 1;
}

.trail_suscription_area .icon_check {
	position: absolute;
	right: 6px;
	bottom: 10px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #67c38b;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #f8f9fb;
}

	.trail_suscription_area .icon_check i {
		font-size: 12px;
		line-height: 1;
	}

.trail_suscription_area .bag_icon i {
	font-size: 52px;
	line-height: 1;
}

.trail_suscription_area .bag_dollar {
	position: absolute;
	font-size: 22px;
	font-weight: 800;
	color: #ffffff;
	line-height: 1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -52%);
}

.trail_suscription_area .subscription_title {
	font-size: 22px;
	font-weight: 700;
	color: #1f2a37;
	line-height: 24px;
	margin-bottom: 12px;
}

.trail_suscription_area .subscription_text {
	max-width: 320px;
	margin: 0 auto 24px;
	font-size: 18px;
	font-weight: 400;
	line-height: 19px;
	color: #5f6b7a;
}

.trail_suscription_area .subscription_btn {
	display: block;
	width: 100%;
	max-width: 100%;
	border-radius: 8px;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	transition: all 0.25s ease;
	font-family: "Inter", sans-serif;
}

.trail_suscription_area .trial_btn {
	background: #67c38b;
	color: #ffffff;
}

	.trail_suscription_area .trial_btn:hover {
		background: #a9ddb2;
		color: #ffffff;
	}

.trail_suscription_area .buy_btn {
	background: #233555;
	color: #ffffff;
	transition:all 0.2s linear;
}
	.trail_suscription_area .buy_btn:hover {
	  opacity:0.7;
	}

	.trail_suscription_area .buy_btn:hover {
		background: #1b2a45;
		color: #ffffff;
	}

@media (max-width: 767.98px) {
	.trail_suscription_area .subscription_card {
		padding: 24px 18px;
	}
	.right_badges {
	 display:none !important;
	}
	.purchase_subscription_area .with-right-content .form-control {
		padding-right: 15px !important;
	}
	.trail_suscription_area .subscription_title {
		font-size: 24px;
	}
	.taril_sub_card {
		margin-bottom:0 !important;
	}
	.login_form.taril_sub_card.taril_sub_card_1 {
	  margin-bottom:200px !important;
	}
	.trail_suscription_area .subscription_text {
		font-size: 16px;
	}

	.trail_suscription_area .subscription_btn {
		font-size: 16px;
		padding: 12px 14px;
	}
}
.taril_sub_card {
  max-width:unset;
  transition:all 0.2s linear;
}
	.taril_sub_card:hover {
	  box-shadow:1px 1px 17px #ccc;
	}
.trail_suscription_area .login_top_area h2 {
	font-size: 28px;
	padding: 10px 0 30px;
	line-height: 30px;
}
/**Styles for Purcchase subscription starts*/
.purchase_subscription_area {
	--accent: #e87474;
	--accent-dark: #983b3b;
	--accent-soft: #fff2f2;
	--card-bg: #fff8f8;
	--card-border: #f1dede;
	--text-main: #5a5656;
	--text-muted: #8f8a8a;
	--button-shadow: 0 8px 20px rgba(232, 116, 116, 0.18);
	padding: 24px 0 32px;
	margin-bottom: 200px;
}

.purchase_subscription_area.subscription_active {
	--accent: #5cc57a;
	--accent-dark: #2f8550;
	--accent-soft: #f1fbf4;
	--card-bg: #f6fcf7;
	--card-border: #d8eadb;
	--text-main: #4e6154;
	--text-muted: #7f9385;
	--button-shadow: 0 8px 20px rgba(92, 197, 122, 0.18);
	
}

.purchase_subscription_area .subscription_status_wrap {
	max-width: 420px;
	margin-top: 8px;
}

.purchase_subscription_area .login_top_area {
	margin-bottom: 12px;
}

.purchase_subscription_area .main_img {
	max-width: 170px;
}

.purchase_subscription_area .status_icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	margin: 8px auto 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.purchase_subscription_area .status_icon_text {
	font-size: 36px;
	line-height: 1;
	font-weight: 700;
	transform: translateY(-1px);
}

.purchase_subscription_area .status_title {
	font-size: 18px;
	line-height: 1.35;
	font-weight: 700;
	color: var(--accent-dark);
	margin-bottom: 8px;
}

.purchase_subscription_area .status_subtitle {
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-muted);
	margin-bottom: 18px;
}

.purchase_subscription_area .subscription_card {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.purchase_subscription_area .subscription_card_header {
	padding: 14px 16px;
	border-bottom: 1px solid var(--card-border);
}

.purchase_subscription_area .subscription_card_title {
	font-size: 15px;
	font-weight: 700;
	color: var(--accent-dark);
}

.purchase_subscription_area .gateway_brand {
	gap: 6px;
	font-weight: 700;
	color: var(--accent-dark);
	font-size: 15px;
}

.purchase_subscription_area .gateway_check {
	width: 18px;
	height: 18px;
	border-radius: 4px;
	background: var(--accent);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	line-height: 1;
}

.purchase_subscription_area .subscription_card_body {
	padding: 14px 16px 16px;
}

.purchase_subscription_area .payment_field {
	position: relative;
	margin-bottom: 10px;
}

	.purchase_subscription_area .payment_field .form-control {
		height: 42px;
		border-radius: 8px;
		border: 1px solid #e1dddd;
		background: #fff;
		color: var(--text-main);
		font-size: 14px;
		padding-left: 40px;
		box-shadow: none;
	}

.purchase_subscription_area.subscription_active .payment_field .form-control {
	border-color: #d7e5da;
}

.purchase_subscription_area .payment_field .form-control:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 0.15rem rgba(0, 0, 0, 0.03);
}

.purchase_subscription_area .field_icon {
	position: absolute;
	top: 50%;
	left: 12px;
	transform: translateY(-50%);
	color: #a7a2a2;
	z-index: 2;
}

	.purchase_subscription_area .field_icon svg,
	.purchase_subscription_area .secure_icon svg {
		width: 100%;
		height: 100%;
		display: block;
	}

.purchase_subscription_area .right_icon {
	left: auto;
	right: 12px;
}

	.purchase_subscription_area .with-right-content .form-control {
		padding-right: 120px;
	}

.purchase_subscription_area .right_badges {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	display: flex;
	gap: 4px;
	z-index: 2;
}

.purchase_subscription_area .brand_badge {
	min-width: 24px;
	height: 16px;
	padding: 0 5px;
	border-radius: 3px;
	font-size: 9px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid #ddd;
	line-height: 1;
	text-transform: uppercase;
}

	.purchase_subscription_area .brand_badge.visa {
		color: #1a4fb8;
	}

	.purchase_subscription_area .brand_badge.mc {
		color: #d34b25;
	}

	.purchase_subscription_area .brand_badge.mada {
		color: #38806a;
	}

.purchase_subscription_area .total_row {
	margin: 12px 0 14px;
	font-size: 15px;
	color: var(--text-main);
}

	.purchase_subscription_area .total_row strong {
		color: var(--accent-dark);
		font-size: 15px;
	}

.purchase_subscription_area .subscribe_btn {
	height: 46px;
	border: 0;
	border-radius: 8px;
	background: var(--accent);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	box-shadow: var(--button-shadow);
	transition: 0.25s ease;
}

	.purchase_subscription_area .subscribe_btn:hover,
	.purchase_subscription_area .subscribe_btn:focus {
		background: var(--accent);
		color: #fff;
		opacity: 0.95;
	}

.purchase_subscription_area .secure_note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 12px;
	font-size: 12px;
	color: var(--text-muted);
}

.purchase_subscription_area .secure_icon {
	color: var(--accent);
	flex: 0 0 14px;
}

.purchase_subscription_area .security_logos {
	gap: 14px;
	margin-top: 14px;
	color: #8a8a8a;
	font-size: 11px;
	font-weight: 700;
}

.purchase_subscription_area .security_logo {
	white-space: nowrap;
}

@media (max-width: 575.98px) {
	.purchase_subscription_area {
		padding: 18px 0 24px;
	}

		.purchase_subscription_area .right_badges {
			display: none;
		}

		.purchase_subscription_area .subscription_status_wrap {
			max-width: 100%;
		}

		.purchase_subscription_area .subscription_card_header,
		.purchase_subscription_area .subscription_card_body {
			padding-left: 12px;
			padding-right: 12px;
		}

		.purchase_subscription_area .status_title {
			font-size: 16px;
		}

		.purchase_subscription_area .status_subtitle {
			font-size: 13px;
		}

		.purchase_subscription_area .security_logos {
			gap: 10px;
		}
}
.security_logos img {
	width: 80px;
}
.lock_icon {
 font-size:18px;
}
@font-face {
	font-family: "saudi_riyal";
	src: url("https://emran-alhaddad.github.io/Saudi-Riyal-Font/fonts/regular/saudi_riyal.eot?bdfc4l");
	src: url("https://emran-alhaddad.github.io/Saudi-Riyal-Font/fonts/regular/saudi_riyal.eot?bdfc4l#iefix") format("embedded-opentype"), url("https://emran-alhaddad.github.io/Saudi-Riyal-Font/fonts/regular/saudi_riyal.ttf?bdfc4l") format("truetype"), url("https://emran-alhaddad.github.io/Saudi-Riyal-Font/fonts/regular/saudi_riyal.woff?bdfc4l") format("woff"), url("https://emran-alhaddad.github.io/Saudi-Riyal-Font/fonts/saudi_riyal.svg?bdfc4l#saudi_riyal") format("svg");
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

@font-face {
	font-family: "saudi_riyal_bold";
	src: url("https://emran-alhaddad.github.io/Saudi-Riyal-Font/fonts/bold/saudi_riyal.eot?bdfc4l");
	src: url("https://emran-alhaddad.github.io/Saudi-Riyal-Font/fonts/bold/saudi_riyal.eot?bdfc4l#iefix") format("embedded-opentype"), url("https://emran-alhaddad.github.io/Saudi-Riyal-Font/fonts/bold/saudi_riyal.ttf?bdfc4l") format("truetype"), url("https://emran-alhaddad.github.io/Saudi-Riyal-Font/fonts/bold/saudi_riyal.woff?bdfc4l") format("woff"), url("https://emran-alhaddad.github.io/Saudi-Riyal-Font/fonts/saudi_riyal.svg?bdfc4l#saudi_riyal") format("svg");
	font-weight: bold;
	font-style: normal;
	font-display: block;
}

.icon-saudi_riyal::after {
	content: "\20c1";
	font-family: "saudi_riyal_bold";
}
.subscribe_purchase_btn span{
	font-size:18px;
}