/**
 * Javan Job — plan pages, comparison table and order summary.
 *
 * Written entirely with CSS logical properties, so one rule set serves both
 * reading directions. Nothing here is direction-specific: the browser mirrors
 * the layout from the dir attribute the markup carries.
 *
 * The brand tokens below are defaults. The dashboard writes its own values as
 * inline custom properties, so a colour change in settings reaches every card
 * without editing this file.
 */

.javan-pricing,
.javan-checkout {
	--javan-navy: #0B1F3A;
	--javan-accent: #D4AF37;
	--javan-featured-bg: #FFFDF5;

	--javan-ink: var(--javan-navy);
	--javan-ink-soft: #5a6a83;
	--javan-line: #e1e6ee;
	--javan-surface: #ffffff;
	--javan-canvas: #f6f8fb;
	--javan-save: #0f8a5f;
	--javan-save-soft: #e8f6ef;
	--javan-danger: #b42318;
	--javan-danger-soft: #fdeceb;
	--javan-radius: 18px;
	--javan-gap: 24px;

	box-sizing: border-box;
	color: var(--javan-ink);
	font-family: inherit;
	inline-size: 100%;
}

.javan-pricing *,
.javan-pricing *::before,
.javan-pricing *::after,
.javan-checkout *,
.javan-checkout *::before,
.javan-checkout *::after {
	box-sizing: inherit;
}

.javan-pricing .screen-reader-text,
.javan-checkout .screen-reader-text {
	block-size: 1px;
	clip-path: inset(50%);
	inline-size: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ hero */

.javan-pricing {
	margin-block: 32px;
}

.javan-pricing__hero {
	margin-block-end: 36px;
	text-align: center;
}

.javan-pricing__headline {
	color: var(--javan-navy);
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.35rem);
	line-height: 1.3;
	margin: 0;
}

.javan-pricing__subtitle {
	color: var(--javan-ink-soft);
	font-size: 1rem;
	line-height: 1.9;
	margin-block: 12px 0;
	margin-inline: auto;
	max-inline-size: 62ch;
}

.javan-pricing__chat {
	border: 1px solid var(--javan-line);
	border-radius: 999px;
	color: var(--javan-navy);
	display: inline-block;
	font-size: 0.875rem;
	font-weight: 600;
	margin-block-start: 18px;
	padding: 8px 20px;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.javan-pricing__chat:hover,
.javan-pricing__chat:focus-visible {
	border-color: var(--javan-accent);
	color: var(--javan-accent);
}

.javan-pricing__empty,
.javan-pricing__note {
	background: var(--javan-canvas);
	border: 1px dashed var(--javan-line);
	border-radius: var(--javan-radius);
	color: var(--javan-ink-soft);
	margin-block-start: 24px;
	padding: 18px 24px;
	text-align: center;
}

/* ------------------------------------------------------------------ grid */

.javan-pricing__grid {
	align-items: stretch;
	display: grid;
	gap: var(--javan-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(235px, 100%), 1fr));
	margin-inline: auto;
	max-inline-size: calc(var(--javan-columns, 3) * 330px + (var(--javan-columns, 3) - 1) * var(--javan-gap));
	/* The featured card grows by 5%, so the row needs room for the overflow. */
	padding-block: 22px;
}

/* ------------------------------------------------------------------ card */

.javan-plan {
	background: var(--javan-surface);
	border: 1px solid var(--javan-line);
	border-radius: var(--javan-radius);
	display: flex;
	flex-direction: column;
	padding: 30px 26px;
	position: relative;
	transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.javan-plan:hover {
	box-shadow: 0 18px 40px -24px rgba(11, 31, 58, 0.45);
}

.javan-plan--featured {
	background: var(--javan-featured-bg);
	border: 3px solid var(--javan-accent);
	box-shadow: 0 26px 60px -28px rgba(11, 31, 58, 0.55);
	transform: scale(1.05);
	z-index: 1;
}

.javan-plan--featured:hover {
	box-shadow: 0 30px 70px -28px rgba(11, 31, 58, 0.6);
}

.javan-plan__ribbon {
	background: var(--javan-accent);
	border-radius: 999px;
	color: var(--javan-navy);
	font-size: 0.8125rem;
	font-weight: 800;
	inset-block-start: -16px;
	inset-inline-start: 50%;
	margin: 0;
	padding: 7px 20px;
	position: absolute;
	transform: translateX(-50%);
	white-space: nowrap;
}

/* The ribbon is centred by percentage, so the shift follows the inline axis. */
[dir="rtl"] .javan-plan__ribbon {
	transform: translateX(50%);
}

.javan-plan__header {
	border-block-end: 1px solid var(--javan-line);
	padding-block-end: 20px;
	text-align: center;
}

.javan-plan__badge {
	background: var(--javan-accent);
	border-radius: 999px;
	color: var(--javan-navy);
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	margin: 0 0 10px;
	padding: 4px 14px;
}

.javan-plan__title {
	color: var(--javan-navy);
	font-size: 1.3rem;
	line-height: 1.4;
	margin: 0;
}

.javan-plan__duration {
	color: var(--javan-ink-soft);
	font-size: 0.9375rem;
	margin-block: 6px 0;
}

/* --------------------------------------------------------------- pricing */

.javan-plan__pricing {
	padding-block: 22px;
	text-align: center;
}

.javan-plan__was {
	color: var(--javan-ink-soft);
	font-size: 0.9375rem;
	margin: 0 0 6px;
}

.javan-plan__was s {
	text-decoration-thickness: 2px;
}

.javan-plan__price {
	align-items: baseline;
	display: flex;
	gap: 6px;
	justify-content: center;
	margin: 0;
}

.javan-plan__amount {
	color: var(--javan-navy);
	font-size: clamp(1.9rem, 1.5rem + 1.3vw, 2.6rem);
	font-weight: 800;
	line-height: 1.1;
}

.javan-plan__currency {
	color: var(--javan-ink-soft);
	font-size: 1rem;
	font-weight: 600;
}

.javan-plan__equivalent {
	color: var(--javan-ink-soft);
	font-size: 0.875rem;
	margin-block: 10px 0;
}

.javan-plan__savings {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-block: 14px 0;
}

.javan-plan__savings-amount,
.javan-plan__savings-percent {
	background: var(--javan-save-soft);
	border-radius: 999px;
	color: var(--javan-save);
	font-size: 0.8125rem;
	font-weight: 800;
	padding: 6px 14px;
}

.javan-plan__daily {
	color: var(--javan-ink-soft);
	font-size: 0.8125rem;
	line-height: 1.8;
	margin-block: 12px 0;
}

/* -------------------------------------------------------------- features */

.javan-plan__features-title {
	color: var(--javan-ink-soft);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin: 0 0 12px;
	text-align: start;
	text-transform: uppercase;
}

.javan-plan__feature-list {
	display: grid;
	gap: 10px;
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}

.javan-plan__feature {
	align-items: start;
	display: flex;
	font-size: 0.9375rem;
	gap: 10px;
	line-height: 1.7;
	text-align: start;
}

.javan-plan__feature--strong {
	font-weight: 700;
}

.javan-plan__feature--excluded {
	color: var(--javan-ink-soft);
}

.javan-plan__feature-icon {
	background: var(--javan-save-soft);
	block-size: 20px;
	border-radius: 50%;
	flex: 0 0 auto;
	inline-size: 20px;
	margin-block-start: 4px;
	position: relative;
}

.javan-plan__feature-icon::before {
	block-size: 4px;
	border-color: var(--javan-save);
	border-style: solid;
	border-width: 0 0 2px 2px;
	content: "";
	inline-size: 8px;
	inset-block-start: 6px;
	inset-inline-start: 5px;
	position: absolute;
	transform: rotate(-45deg);
}

.javan-plan__feature--excluded .javan-plan__feature-icon {
	background: var(--javan-danger-soft);
}

.javan-plan__feature--excluded .javan-plan__feature-icon::before {
	background: var(--javan-danger);
	block-size: 2px;
	border: 0;
	inline-size: 10px;
	inset-block-start: 9px;
	inset-inline-start: 5px;
	transform: rotate(45deg);
}

.javan-plan__feature--excluded .javan-plan__feature-icon::after {
	background: var(--javan-danger);
	block-size: 2px;
	content: "";
	inline-size: 10px;
	inset-block-start: 9px;
	inset-inline-start: 5px;
	position: absolute;
	transform: rotate(-45deg);
}

/* --------------------------------------------------------------- actions */

.javan-plan__actions {
	display: grid;
	gap: 10px;
	margin-block-start: auto;
}

.javan-plan__details {
	background: transparent;
	border: 1px solid var(--javan-line);
	border-radius: 12px;
	color: var(--javan-ink-soft);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.875rem;
	padding-block: 10px;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.javan-plan__details:hover,
.javan-plan__details:focus-visible {
	border-color: var(--javan-navy);
	color: var(--javan-navy);
}

.javan-plan__cta,
.javan-checkout__cta {
	background: var(--javan-navy);
	border: 0;
	border-radius: 12px;
	color: #fff;
	cursor: pointer;
	display: block;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	inline-size: 100%;
	padding-block: 15px;
	padding-inline: 16px;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.javan-plan__cta:hover,
.javan-plan__cta:focus-visible,
.javan-checkout__cta:hover,
.javan-checkout__cta:focus-visible {
	background: #14294a;
	color: #fff;
}

.javan-plan--featured .javan-plan__cta {
	background: var(--javan-accent);
	color: var(--javan-navy);
}

.javan-plan--featured .javan-plan__cta:hover,
.javan-plan--featured .javan-plan__cta:focus-visible {
	background: #c39d2b;
	color: var(--javan-navy);
}

.javan-plan__cta:focus-visible,
.javan-plan__details:focus-visible,
.javan-checkout__cta:focus-visible {
	outline: 3px solid rgba(11, 31, 58, 0.35);
	outline-offset: 2px;
}

.javan-plan__footer {
	border-block-start: 1px solid var(--javan-line);
	margin-block-start: 18px;
	padding-block-start: 16px;
}

.javan-plan__guarantee {
	color: var(--javan-ink-soft);
	font-size: 0.8125rem;
	margin: 0;
	text-align: center;
}

/* ----------------------------------------------------------------- modal */

.javan-modal {
	align-items: center;
	background: rgba(11, 31, 58, 0.6);
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 20px;
	position: fixed;
	z-index: 9999;
}

.javan-modal[hidden] {
	display: none;
}

.javan-modal__panel {
	background: #fff;
	border-radius: var(--javan-radius);
	max-block-size: 82vh;
	max-inline-size: 560px;
	overflow-y: auto;
	padding: 28px;
}

.javan-modal__title {
	color: var(--javan-navy);
	margin: 0 0 14px;
}

.javan-modal__body {
	color: var(--javan-ink-soft);
	line-height: 2;
}

.javan-modal__close {
	background: var(--javan-navy);
	border: 0;
	border-radius: 10px;
	color: #fff;
	cursor: pointer;
	font-family: inherit;
	margin-block-start: 20px;
	padding: 10px 22px;
}

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

/* ------------------------------------------------------------- compare */

.javan-compare {
	margin-block-start: 48px;
}

.javan-compare__title {
	color: var(--javan-navy);
	font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	margin: 0 0 8px;
	text-align: center;
}

.javan-compare__hint {
	color: var(--javan-ink-soft);
	font-size: 0.8125rem;
	margin: 0 0 16px;
	text-align: center;
}

.javan-compare__scroll {
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--javan-line);
	border-radius: var(--javan-radius);
	overflow-x: auto;
}

.javan-compare__scroll:focus-visible {
	outline: 3px solid rgba(11, 31, 58, 0.35);
}

.javan-compare__table {
	border-collapse: collapse;
	inline-size: 100%;
	/*
	 * The table wants 620px so its columns stay comfortable, but it must never
	 * be wider than the page itself: on a narrow screen that leaked past the
	 * scroll container and gave the whole document a horizontal scrollbar.
	 * Clamped this way the table still scrolls sideways inside its own box.
	 */
	min-inline-size: min(620px, 100%);
}

.javan-compare__table th,
.javan-compare__table td {
	border-block-end: 1px solid var(--javan-line);
	padding: 14px 16px;
	text-align: start;
}

.javan-compare__table thead th {
	background: var(--javan-canvas);
	color: var(--javan-navy);
	font-size: 0.9375rem;
}

.javan-compare__table tbody th {
	color: var(--javan-ink);
	font-size: 0.9375rem;
	font-weight: 500;
}

.javan-compare__table td {
	text-align: center;
}

.javan-compare__yes {
	color: var(--javan-save);
	font-size: 1.1rem;
	font-weight: 700;
}

.javan-compare__no {
	color: var(--javan-danger);
	font-size: 1.1rem;
}

.javan-compare__table tbody tr:last-child th,
.javan-compare__table tbody tr:last-child td {
	border-block-end: 0;
}

/* ------------------------------------------------------------- checkout */

.javan-checkout {
	margin-block: 32px;
	margin-inline: auto;
	max-inline-size: 620px;
}

.javan-checkout__title {
	color: var(--javan-navy);
	font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem);
	line-height: 1.5;
	margin: 0 0 10px;
}

.javan-checkout__subtitle {
	color: var(--javan-ink-soft);
	line-height: 1.9;
	margin: 0 0 22px;
}

.javan-checkout__summary {
	background: var(--javan-canvas);
	border: 1px solid var(--javan-line);
	border-radius: var(--javan-radius);
	padding: 22px;
}

.javan-checkout__summary-title {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin: 0 0 14px;
	text-transform: uppercase;
}

.javan-checkout__lines {
	margin: 0;
}

.javan-checkout__line {
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding-block: 8px;
}

.javan-checkout__line dt,
.javan-checkout__line dd {
	margin: 0;
}

.javan-checkout__line--total {
	border-block-start: 1px solid var(--javan-line);
	font-size: 1.1rem;
	font-weight: 800;
	margin-block-start: 8px;
	padding-block-start: 14px;
}

.javan-checkout__savings {
	color: var(--javan-save);
	font-weight: 700;
	margin-block: 14px 0;
}

.javan-checkout__daily {
	color: var(--javan-ink-soft);
	font-size: 0.875rem;
	line-height: 1.9;
	margin-block: 8px 0;
}

.javan-checkout__benefits {
	display: grid;
	gap: 10px;
	list-style: none;
	margin: 22px 0;
	padding: 0;
}

.javan-checkout__benefits li {
	align-items: center;
	display: flex;
	gap: 10px;
}

.javan-checkout__tick {
	background: var(--javan-save-soft);
	block-size: 20px;
	border-radius: 50%;
	flex: 0 0 auto;
	inline-size: 20px;
	position: relative;
}

.javan-checkout__tick::before {
	block-size: 4px;
	border-color: var(--javan-save);
	border-style: solid;
	border-width: 0 0 2px 2px;
	content: "";
	inline-size: 8px;
	inset-block-start: 6px;
	inset-inline-start: 5px;
	position: absolute;
	transform: rotate(-45deg);
}

.javan-checkout__form {
	margin-block: 22px;
}

.javan-checkout__login,
.javan-checkout__error {
	background: var(--javan-danger-soft);
	border-radius: 12px;
	color: var(--javan-danger);
	margin-block: 18px;
	padding: 14px 16px;
	text-align: center;
}

.javan-checkout__login {
	background: var(--javan-canvas);
	color: var(--javan-ink);
}

.javan-checkout__trust {
	color: var(--javan-ink-soft);
	font-size: 0.875rem;
	margin-block: 12px 0;
	text-align: center;
}

.javan-checkout__message {
	background: var(--javan-canvas);
	border-radius: 12px;
	color: var(--javan-ink);
	font-size: 0.9375rem;
	line-height: 2;
	margin-block-start: 18px;
	padding: 16px 18px;
}

.javan-checkout__message--muted {
	color: var(--javan-ink-soft);
	font-size: 0.875rem;
}

.javan-checkout__back {
	color: var(--javan-ink-soft);
	display: inline-block;
	font-size: 0.875rem;
	margin-block-start: 20px;
	text-decoration: underline;
}

/* Order confirmation is a decision moment: the site header and footer step aside. */
body.javan-focus-mode .site-header,
body.javan-focus-mode .site-footer,
body.javan-focus-mode header.site-header,
body.javan-focus-mode footer.site-footer,
body.javan-focus-mode #masthead,
body.javan-focus-mode #colophon,
body.javan-focus-mode .page-title-wrap,
body.javan-focus-mode .widget-area,
body.javan-focus-mode #secondary,
body.javan-focus-mode .sidebar {
	display: none !important;
}

body.javan-focus-mode .content-area,
body.javan-focus-mode #primary,
body.javan-focus-mode .site-content {
	inline-size: 100% !important;
	margin-inline: auto !important;
	max-inline-size: 720px !important;
	float: none !important;
}

/* ---------------------------------------------------------- preferences */

@media (max-width: 640px) {
	.javan-compare__table th,
	.javan-compare__table td {
		font-size: 0.8125rem;
		padding: 12px 10px;
	}

	.javan-plan--featured {
		transform: none;
	}

	.javan-plan {
		padding: 24px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.javan-plan,
	.javan-plan__cta,
	.javan-plan__details,
	.javan-pricing__chat {
		transition: none;
	}
}

/* Plan pages are sales pages: full content width, no sidebar. */
body.javan-plans-page .widget-area,
body.javan-plans-page #secondary,
body.javan-plans-page .sidebar {
	display: none !important;
}