/* DIYguru Quick Enroll — Modal v1.1.0 */

.dqe-modal,
.dqe-modal *,
.dqe-modal *::before,
.dqe-modal *::after { box-sizing: border-box; }

.dqe-modal {
	--dqe-brand: #374A47;
	--dqe-brand-hover: #243331;
	--dqe-brand-soft: #E8F0EE;
	--dqe-accent: #0F9D58;
	--dqe-ink: #0F172A;
	--dqe-ink-soft: #475569;
	--dqe-muted: #94A3B8;
	--dqe-border: #E2E8F0;
	--dqe-border-hover: #CBD5E1;
	--dqe-bg: #FFFFFF;
	--dqe-bg-soft: #F8FAFC;
	--dqe-error: #B91C1C;
	--dqe-error-bg: #FEF2F2;
	--dqe-radius: 14px;
	--dqe-radius-sm: 10px;
	--dqe-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(15, 23, 42, 0.04);

	position: fixed; inset: 0;
	display: none;
	z-index: 100000;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: var(--dqe-ink);
}
.dqe-modal.is-open { display: block; animation: dqe-fade 140ms ease-out; }

@keyframes dqe-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dqe-rise { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.dqe-modal__overlay {
	position: absolute; inset: 0;
	background: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.dqe-modal__dialog {
	position: relative;
	width: calc(100% - 24px);
	max-width: 460px;
	margin: min(5vh, 40px) auto;
	background: var(--dqe-bg);
	border-radius: var(--dqe-radius);
	box-shadow: var(--dqe-shadow);
	max-height: calc(100vh - 40px);
	overflow: hidden;
	animation: dqe-rise 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dqe-modal__body {
	padding: 24px 28px 24px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
}

.dqe-modal__close {
	position: absolute; top: 12px; right: 12px;
	width: 36px; height: 36px;
	display: inline-flex; align-items: center; justify-content: center;
	background: transparent; border: 0; border-radius: 50%;
	color: var(--dqe-ink-soft);
	cursor: pointer;
	transition: background 120ms, color 120ms;
	z-index: 2;
}
.dqe-modal__close:hover { background: var(--dqe-bg-soft); color: var(--dqe-ink); }
.dqe-modal__close:focus-visible { outline: 2px solid var(--dqe-brand); outline-offset: 2px; }

.dqe-modal__heading { margin: 0 0 14px; }
.dqe-modal__eyebrow {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--dqe-brand);
}
.dqe-modal__title {
	margin: 6px 0 4px;
	font-size: 22px;
	font-weight: 700;
	color: var(--dqe-ink);
	letter-spacing: -0.3px;
	line-height: 1.2;
}
.dqe-modal__sub {
	margin: 0;
	font-size: 14px;
	color: var(--dqe-ink-soft);
}
.dqe-modal__sub a {
	color: var(--dqe-brand);
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1px solid rgba(55, 74, 71, 0.3);
}
.dqe-modal__sub a:hover { color: var(--dqe-brand-hover); border-bottom-color: var(--dqe-brand-hover); }
.dqe-modal--signup .dqe-modal__course-block,
.dqe-modal--signin .dqe-modal__course-block { display: none; }
.dqe-modal--signup .dqe-modal__heading,
.dqe-modal--signin .dqe-modal__heading { margin-bottom: 18px; }

/* Course card */
.dqe-course-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--dqe-border);
	border-radius: var(--dqe-radius-sm);
	margin-bottom: 14px;
	background: var(--dqe-bg-soft);
}
.dqe-course-card__thumb {
	flex: 0 0 56px;
	width: 56px; height: 56px;
	border-radius: 10px;
	background: var(--dqe-brand-soft) center/cover no-repeat;
	position: relative;
	overflow: hidden;
}
.dqe-course-card__thumb::after {
	content: "";
	position: absolute; inset: 0;
	border-radius: 10px;
	box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}
.dqe-course-card__info { min-width: 0; flex: 1; }
.dqe-course-card__title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--dqe-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.dqe-course-card__stats {
	margin-top: 4px;
	font-size: 12px;
	color: var(--dqe-ink-soft);
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.dqe-course-card__stats span + span::before {
	content: "·";
	margin-right: 8px;
	color: var(--dqe-muted);
}

/* Price block */
.dqe-price-block {
	margin: 0 0 18px;
	padding: 14px 16px;
	background: linear-gradient(135deg, rgba(55, 74, 71, 0.06), rgba(55, 74, 71, 0.02));
	border: 1px solid rgba(55, 74, 71, 0.12);
	border-radius: var(--dqe-radius-sm);
}
.dqe-price-block__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--dqe-ink-soft);
	margin-bottom: 4px;
}
.dqe-price-block__row {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}
.dqe-price-block__amount {
	font-size: 26px;
	font-weight: 800;
	color: var(--dqe-ink);
	letter-spacing: -0.5px;
	line-height: 1;
}
.dqe-price-block__amount del { font-size: 16px; font-weight: 500; color: var(--dqe-muted); margin-left: 6px; }
.dqe-price-block__amount .dqe-modal__price-label { display: none; } /* legacy, hidden in new UI */
.dqe-price-block__badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--dqe-accent);
	background: rgba(15, 157, 88, 0.1);
	padding: 4px 10px;
	border-radius: 999px;
	line-height: 1;
}
.dqe-price-block__badge svg { stroke: var(--dqe-accent); }
.dqe-price-block--free .dqe-price-block__amount { color: var(--dqe-accent); }

/* Form fields */
.dqe-form { display: flex; flex-direction: column; gap: 14px; }
.dqe-field { display: flex; flex-direction: column; gap: 6px; }
.dqe-field > label {
	font-size: 13px;
	font-weight: 600;
	color: var(--dqe-ink);
	padding: 0;
}
.dqe-req {
	color: #DC2626;
	font-weight: 700;
	margin-left: 1px;
}
.dqe-field input[type="text"],
.dqe-field input[type="email"],
.dqe-field input[type="tel"] {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--dqe-border);
	border-radius: var(--dqe-radius-sm);
	font-size: 15px;
	background: var(--dqe-bg);
	color: var(--dqe-ink);
	transition: border-color 120ms, box-shadow 120ms;
	line-height: 1.3;
}
.dqe-field input::placeholder { color: var(--dqe-muted); }
.dqe-field input:hover { border-color: var(--dqe-border-hover); }
.dqe-field input:focus {
	outline: none;
	border-color: var(--dqe-brand);
	box-shadow: 0 0 0 3px rgba(55, 74, 71, 0.16);
}
.dqe-field__hint { font-size: 12px; color: var(--dqe-ink-soft); }
.dqe-field__label-row { display: flex; justify-content: space-between; align-items: baseline; }
.dqe-field__link {
	color: var(--dqe-brand);
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	transition: color 120ms;
}
.dqe-field__link:hover { color: var(--dqe-brand-hover); text-decoration: underline; }

/* Checkbox */
.dqe-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--dqe-ink-soft);
	cursor: pointer;
	user-select: none;
	margin: 2px 0;
}
.dqe-checkbox input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--dqe-brand);
	cursor: pointer;
	margin: 0;
}
.dqe-checkbox span { line-height: 1.3; }

/* intl-tel-input v25 overrides */
.iti { width: 100%; }
.iti--inline-dropdown .iti__dropdown-content { border-radius: var(--dqe-radius-sm); overflow: hidden; border: 1px solid var(--dqe-border); box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.2); }
.iti__country-list { padding: 4px; }
.iti__country { padding: 8px 10px; border-radius: 8px; }
.iti__country.iti__highlight { background: var(--dqe-bg-soft); }
.iti__selected-country { border-radius: var(--dqe-radius-sm) 0 0 var(--dqe-radius-sm); background: var(--dqe-bg-soft); border-right: 1px solid var(--dqe-border); }
.iti__selected-country:hover,
.iti__selected-country-primary:hover { background: #EEF2F0; }
.iti--separate-dial-code .iti__selected-dial-code { color: var(--dqe-ink); font-weight: 600; }
.iti__search-input { padding: 8px 10px; border: 0; border-bottom: 1px solid var(--dqe-border); font-size: 14px; }
.iti__search-input:focus { outline: 0; background: var(--dqe-bg-soft); }
.dqe-field--phone .iti input.iti__tel-input { padding-left: 92px !important; }

/* Button */
.dqe-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 20px;
	border: 0;
	border-radius: var(--dqe-radius-sm);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.1px;
	cursor: pointer;
	transition: background 140ms, transform 80ms, box-shadow 140ms;
	font-family: inherit;
	min-height: 48px;
}
.dqe-btn--primary {
	background: var(--dqe-brand);
	color: #fff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1), 0 4px 12px -4px rgba(55, 74, 71, 0.4);
}
.dqe-btn--primary:hover { background: var(--dqe-brand-hover); }
.dqe-btn--primary:active { transform: translateY(1px); }
.dqe-btn--primary:focus-visible { outline: 3px solid rgba(55, 74, 71, 0.35); outline-offset: 2px; }
.dqe-btn:disabled { opacity: 0.7; cursor: not-allowed; }
.dqe-btn__arrow { transition: transform 150ms ease; }
.dqe-btn--primary:hover .dqe-btn__arrow { transform: translateX(3px); }

.dqe-btn__spinner {
	display: none;
	width: 16px; height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: dqe-spin 0.7s linear infinite;
}
.dqe-btn.is-loading .dqe-btn__arrow { display: none; }
.dqe-btn.is-loading .dqe-btn__spinner { display: inline-block; }
@keyframes dqe-spin { to { transform: rotate(360deg); } }

/* Trust row */
.dqe-trust {
	list-style: none; padding: 0; margin: 14px 0 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 12px;
	color: var(--dqe-ink-soft);
	flex-wrap: wrap;
}
.dqe-trust li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
}
.dqe-trust svg { stroke: var(--dqe-brand); }

.dqe-fine {
	margin: 14px 0 0;
	font-size: 11px;
	color: var(--dqe-muted);
	text-align: center;
	line-height: 1.5;
}
.dqe-fine a { color: var(--dqe-brand); text-decoration: none; border-bottom: 1px dotted rgba(55, 74, 71, 0.5); }
.dqe-fine a:hover { color: var(--dqe-brand-hover); border-bottom-color: var(--dqe-brand-hover); }

/* Error */
.dqe-modal__error {
	display: none;
	padding: 10px 14px;
	background: var(--dqe-error-bg);
	border: 1px solid #FECACA;
	color: var(--dqe-error);
	border-radius: var(--dqe-radius-sm);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.45;
}
.dqe-modal__error.is-visible { display: block; animation: dqe-rise 150ms ease-out; }

/* OTP */
.dqe-otp__intro {
	text-align: center;
	padding: 8px 0 12px;
	color: var(--dqe-ink-soft);
}
.dqe-otp__intro svg { stroke: var(--dqe-brand); margin-bottom: 6px; }
.dqe-otp__intro h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: var(--dqe-ink); }
.dqe-otp__intro p { margin: 0; font-size: 14px; }
.dqe-otp__intro strong { color: var(--dqe-ink); word-break: break-all; font-weight: 600; }
.dqe-otp__input {
	letter-spacing: 12px !important;
	text-align: center !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	padding: 14px !important;
}
.dqe-otp__actions { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; gap: 12px; }
.dqe-link {
	background: none;
	border: 0;
	color: var(--dqe-brand);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	padding: 6px 0;
	font-family: inherit;
	transition: color 120ms;
}
.dqe-link:hover:not(:disabled) { color: var(--dqe-brand-hover); text-decoration: underline; }
.dqe-link:disabled { color: var(--dqe-muted); cursor: not-allowed; }

body.dqe-modal-open { overflow: hidden; }

/* Mobile */
@media (max-width: 480px) {
	.dqe-modal__dialog {
		margin: 0;
		max-width: 100%;
		width: 100%;
		min-height: 100vh;
		max-height: 100vh;
		border-radius: 0;
	}
	.dqe-modal__body { padding: 20px 18px 24px; max-height: 100vh; }
	.dqe-price-block__amount { font-size: 24px; }
	.dqe-course-card__title { font-size: 14px; }
	.dqe-trust { justify-content: center; gap: 12px 18px; }
}