@import url('https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css');

/* Sign In */
	.signin-container {
		display: flex;
		padding: 20px;
		overflow: auto;
		align-items: center;
		justify-content: center;
		height: calc(var(--vh, 1vh) * 100);
	}
	.signin-modal {
		width: 720px;
		display: flex;
		border-radius: 15px;
	}
	.logo-wrapper {
		display: flex;
		flex: 0 0 280px;
		align-items: center;
		border-right: 2px solid #959595;
	}
	.signin-wrapper {
		flex: 0 0 440px;
		padding-left: 80px;
	}
	.signin-title {
		font-weight: 600;
		text-align: center;
	}
	.signin-text {
		color: #959595;
		font-size: 15px;
		padding: 10px 0;
		text-align: center;
	}
	.signin-form {
		margin-top: 40px;
	}
	.signin-form .form-submit {
		background: black;
	}
	.signin-form .form-submit[disabled] {
		color: #666;
		cursor: not-allowed;
		background: #cecece;
	}
	.signin-form .other-link-wrapper {
		font-size: 13px;
		text-align: center;
		margin-top: 20px;
	}
	.signin-form .other-link-wrapper a,
	.signin-form #otpCountdown {
		color: #999;
		line-height: 1.5;
	}
	.signin-form .other-link-wrapper a:hover {
		color: var(--theme);
	}

/* Account Container */
	.account-container {
		min-height: calc(var(--vh, 1vh) * 100 - 66px);
		background: #F3F4F5;
	}
	.account-grid {
		display: flex;
		gap: 12px;
		margin: 0 auto;
		padding: 15px 30px;
		max-width: 1160px;
	}
	.account-nav-wrapper {
		flex: 0 0 280px;
		height: max-content;
		background: white;
		border-radius: 12px;
		position: sticky;
		top: 76px;
		padding: 20px 15px;
		border: 1px solid #DEDEDE;
	}
	.account-navlink {
		display: flex;
		gap: 15px;
		color: #454545;
		padding: 15px;
		margin-bottom: 10px;
		background: #fafafa;
		border-radius: 10px;
		align-items: center;
	}
	.account-navlink .nav-icon {
		width: 20px;
		height: 20px;
	}
	.account-navlink.active {
		font-weight: 500;
		color: var(--theme);
		background: var(--theme-light);
	}
	.account-content-wrapper {
		height: calc(var(--vh, 1vh) * 100 - 91px);
		min-height: 500px;
		flex: 0 0 calc(100% - 292px);
		background: white;
		border-radius: 12px;
		overflow-y: auto;
		border: 1px solid #DEDEDE;
		position: relative;
	}

/* Policies */
	.policy-content {
		padding: 20px;
	}
	.policy-header {
		display: flex;
		min-height: 34px;
		align-items: center;
		justify-content: space-between;
	}
	.policy-header .header-title {
		font-size: 16px;
		font-weight: 600;
	}
	.policy-header .header-cta {
		color: white;
		padding: 10px 12px;
		font-weight: 500;
		cursor: pointer;
		border-radius: 25px;
		background: var(--theme);
	}
	.policy-body {
		padding: 20px 0;
		min-height: 190px;
	}
	.no-policy-text {
		width: 85%;
		max-width: 400px;
		font-size: 13px;
		line-height: 1.25;
		color: #858585;
		margin: 50px auto;
		text-align: center;
	}
	.policy-form {
		padding: 20px;
	}
	.policy-card-wrapper {
		display: grid;
		grid-gap: 15px;
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	}
	.policy-card {
		padding: 10px;
		display: flex;
		column-gap: 10px;
		border-radius: 10px;
		border: 1px solid #eee;
	}
	.policy-opt-wrapper {
		flex: 1;
	}
	.policy-icon {
		padding: 10px;
		background: #f3f4f5;
		border-radius: 6px;
	}
	.policy-name {
		font-size: 13px;
		overflow: hidden;
		line-height: 24px;
		white-space: nowrap;
		display: inline-block;
		text-overflow: ellipsis;
		width: calc(100% - 1px);
	}
	.policy-action-wrapper {
		display: flex;
		gap: 15px;
		justify-content: flex-end;
	}
	.policy-action-wrapper a {
		font-size: 13px;
		padding: 4.5px 7px;
	}
	.policy-action-wrapper a:first-child {
		color: #d62828;
	}
	.policy-action-wrapper a:last-child {
		color: var(--theme);
		border-radius: 5px;
		border: 1px solid var(--theme);
		background: var(--theme-light);
	}

/* Profile */
	.profile-content {
		padding: 20px;
	}
	.profile-header {
		padding: 15px 0;
	}
	.profile-header .header-title {
		font-size: 18px;
		font-weight: 600;
		text-align: center;
	}
	.profile-wrapper {
		max-width: 500px;
		margin: 20px auto 0;
	}
	.profile-wrapper .input-label {
		top: -7px;
		font-size: 13px;
	}
	.profile-otp-form {
		margin-top: 20px;
	}

/* Rewards */
	.reward-section {
		padding: 20px;
	}
	.reward-card-wrapper {
		top: 20px;
		display: flex;
		column-gap: 20px;
		position: sticky;
		background: white;
		padding-bottom: 15px;
	}
	.reward-card {
		flex: 1;
		padding: 20px 0;
		text-align: center;
		border-radius: 12px;
		background: #f3f4f5;
	}
	.reward-value {
		font-size: 20px;
		line-height: 1.5;
		font-weight: 600;
		color: var(--theme);
	}
	.reward-desc {
		color: #656565;
		font-size: 13px;
		font-weight: 500;
		padding-top: 8px;
	}
	#promptRedeem {
		font-size: 14px;
		margin-top: 8px;
		color: var(--orange);
		display: inline-block;
		text-decoration: underline;
	}
	.reward-info-section .heading {
		padding: 8px 0;
		font-size: 14px;
		font-weight: 600;
	}
	.reward-info-section .desc {
		color: #555;
		font-size: 13px;
		line-height: 20px;
		padding: 4px 0 10px;
	}
	.referral-link-wrapper {
		padding-top: 20px;
	}
	.referral-link-title {
		font-size: 15px;
		font-weight: 600;
		text-align: center;
	}
	.referral-link {
		padding: 10px;
		color: #656565;
		font-size: 13px;
		margin: 15px auto;
		border-radius: 5px;
		text-align: center;
		width: fit-content;
		border: 1px dashed #656565;
	}
	.referral-action-wrapper {
		display: flex;
		column-gap: 15px;
		justify-content: center;
	}
	.referral-action-wrapper a {
		padding: 5px 10px;
		font-size: 12px;
		line-height: 16px;
		color: var(--theme);
		display: inline-block;
		border-radius: 5px;
		background: var(--theme-light);
	}
	.redeem-desc {
		padding: 15px;
		color: #555;
		font-size: 13px;
		line-height: 1.3;
	}
	.redeem-form {
		padding: 10px 15px;
	}
	.redeem-form .mask {
		text-security: disc;
		-webkit-text-security: disc;
	}
	.redeem-form .form-field:last-of-type {
		margin-bottom: 0;
	}

@media screen and (max-width: 840px) {
	/* Sign In */
		.signin-modal {
			width: 100%;
			gap: 60px;
			max-width: 500px;
			flex-direction: column;
		}
		.logo-wrapper {
			border: 0;
			flex: initial;
			justify-content: center;
		}
		.signin-wrapper {
			padding: 0;
			flex: initial;
		}

	/* Account Container */
		.account-grid {
			gap: 6px;
			padding: 5px 0 0;
			flex-direction: column;
		}
		.account-nav-wrapper {
			top: 66px;
			border: 0;
			flex: initial;
			padding: 0 20px;
			border-radius: 0;
		}
		.account-nav {
			gap: 15px;
			display: flex;
		}
		.account-navlink {
			gap: 10px;
			margin-bottom: 0;
			border-radius: 0;
			padding: 15px 10px;
			justify-content: center;
			background: transparent;
			flex: 0 0 calc((100% - 45px) / 4);
		}
		.account-navlink.active {
			background: transparent;
			border-bottom: 2px solid var(--theme);
		}
		.account-navlink-label {
			font-size: 15px;
		}
		.account-content-wrapper {
			flex: initial;
			border: 0;
			border-radius: 0;
			min-height: 400px;
			height: calc(var(--vh, 1vh) * 100 - 129px);
		}
}

@media screen and (max-width: 600px) {

		.account-nav {
			gap: 0;
		}

		.account-nav-wrapper {
			padding: 0;
		}

		.account-navlink {
			flex: 0 0 25%;
		}

		.account-navlink .nav-icon {
			display: none;
		}

		.account-navlink-label {
			font-size: 13px;
		}

		.account-content-wrapper {
			height: calc(var(--vh, 1vh) * 100 - 122px);
		}

		.policy-content,
		.reward-section,
		.profile-content {
			padding: 15px;
		}

		.reward-card-wrapper {
			top: 15px;
			column-gap: 10px;
		}
}