/* ==========================================================================
   Oxyum Downloads — storefront
   Written against the Oxyum Site theme's tokens, with fallbacks so the
   plugin still looks presentable under any other theme.
   ========================================================================== */

.oxd {
	--oxd-bg: var(--wp--preset--color--base, #000);
	--oxd-raised: var(--wp--preset--color--base-raised, #0a0a0a);
	--oxd-surface: var(--wp--preset--color--surface, #171717);
	--oxd-line: var(--wp--preset--color--surface-2, #262626);
	--oxd-border: var(--wp--preset--color--line, #404040);
	--oxd-muted: var(--wp--preset--color--muted, #737373);
	--oxd-bright: var(--wp--preset--color--muted-bright, #a3a3a3);
	--oxd-text: var(--wp--preset--color--contrast, #fff);
	--oxd-accent: var(--wp--preset--color--accent, #7165ef);
	--oxd-accent-strong: var(--wp--preset--color--accent-strong, #6249e2);
	--oxd-accent-soft: var(--wp--preset--color--accent-soft, #a6acfb);
	--oxd-radius: 14px;

	color: var(--oxd-text);
}

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

/* --------------------------------------------------------------------------
   Store page shell

   The horizontal gutter and 1200px column come from the wrapping group's
   constrained layout, so the store pages line up with the rest of the site.
   Only the vertical rhythm is set here, so it survives under a theme that
   does not define the spacing presets.
   -------------------------------------------------------------------------- */

.oxd-page {
	padding-block: clamp(48px, 8vw, 96px);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.oxd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border: 1px solid var(--oxd-border);
	border-radius: 999px;
	background: transparent;
	color: var(--oxd-text);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.oxd-btn:hover {
	background: var(--oxd-surface);
	border-color: var(--oxd-muted);
	color: var(--oxd-text);
}

.oxd-btn--primary {
	background: var(--oxd-accent-strong);
	border-color: var(--oxd-accent-strong);
	color: #fff;
}

.oxd-btn--primary:hover {
	background: var(--oxd-accent);
	border-color: var(--oxd-accent);
	color: #fff;
}

.oxd-btn--block { width: 100%; }
.oxd-btn--small { padding: 8px 15px; font-size: 12px; }
.oxd-btn[disabled] { opacity: .6; cursor: default; }

/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */

.oxd-notice {
	border: 1px solid transparent;
	border-radius: 10px;
	padding: 14px 17px;
	margin: 0 0 24px;
	font-size: 14px;
	line-height: 1.55;
}

.oxd-notice--error {
	background: rgba(207, 46, 46, .12);
	border-color: rgba(207, 46, 46, .45);
	color: #fca5a5;
}

.oxd-notice--success {
	background: rgba(22, 101, 52, .18);
	border-color: rgba(22, 101, 52, .55);
	color: #86efac;
}

.oxd-notice--pending {
	background: rgba(202, 138, 4, .16);
	border-color: rgba(202, 138, 4, .5);
	color: #fde68a;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.oxd-legend {
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -.02em;
	margin: 0 0 18px;
	color: var(--oxd-text);
}

.oxd-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0 0 18px;
}

.oxd-field label {
	font-size: 14px;
	font-weight: 500;
	color: var(--oxd-bright);
}

.oxd-field input[type="text"],
.oxd-field input[type="email"],
.oxd-field select {
	width: 100%;
	padding: 12px 14px;
	background: var(--oxd-raised);
	border: 1px solid var(--oxd-line);
	border-radius: 10px;
	color: var(--oxd-text);
	font-family: inherit;
	font-size: 15px;
}

.oxd-field input:focus,
.oxd-field select:focus {
	outline: none;
	border-color: var(--oxd-accent);
	box-shadow: 0 0 0 3px rgba(113, 101, 239, .25);
}

.oxd-field--check { flex-direction: row; align-items: flex-start; }

.oxd-field--check label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-weight: 400;
	font-size: 14px;
	color: var(--oxd-bright);
	line-height: 1.5;
}

.oxd-field--check input { margin-top: 2px; accent-color: var(--oxd-accent); }
.oxd-field--check a { color: var(--oxd-accent-soft); }

.oxd-hint { font-size: 12px; color: var(--oxd-muted); }

.oxd-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

@media (max-width: 560px) { .oxd-row { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Checkout
   -------------------------------------------------------------------------- */

.oxd-checkout__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 44px;
	align-items: start;
}

@media (max-width: 900px) {
	.oxd-checkout__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

.oxd-checkout__summary {
	background: linear-gradient(180deg, rgba(23, 23, 23, .9), rgba(10, 10, 10, .9));
	border: 1px solid var(--oxd-line);
	border-radius: var(--oxd-radius);
	padding: 26px;
	position: sticky;
	top: 90px;
}

@media (max-width: 900px) { .oxd-checkout__summary { position: static; } }

.oxd-summary__items { list-style: none; margin: 0 0 18px; padding: 0; }

.oxd-summary__items li {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 12px;
	align-items: start;
	padding: 13px 0;
	border-bottom: 1px solid var(--oxd-line);
	font-size: 14px;
}

.oxd-summary__name { display: flex; flex-direction: column; gap: 3px; }
.oxd-summary__name em { font-style: normal; color: var(--oxd-muted); font-size: 12px; }
.oxd-summary__price { font-variant-numeric: tabular-nums; }

.oxd-recurring { font-size: 11px; color: var(--oxd-accent-soft); }

.oxd-summary__remove {
	color: var(--oxd-muted);
	text-decoration: none;
	font-size: 18px;
	line-height: 1;
	padding: 0 2px;
}

.oxd-summary__remove:hover { color: #fca5a5; }

.oxd-summary__remove--locked { width: 14px; }

/* An automatic add-on line: same row, marked as coming with the plan. */
.oxd-addon-note { display: block; font-size: 12px; color: var(--oxd-muted); }

.oxd-addon-tag {
	display: inline-block;
	align-self: flex-start;
	margin-top: 3px;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(113, 101, 239, .16);
	color: var(--oxd-accent-soft);
	font-size: 11px;
	font-style: normal;
	line-height: 1.6;
}
.oxd-summary__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 16px 0 20px;
	font-size: 15px;
}

.oxd-summary__total strong { font-size: 24px; letter-spacing: -.02em; }

/* Subtotal and tax above the total. */
.oxd-summary__rows { display: grid; gap: 8px; padding-top: 14px; }

.oxd-summary__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
	color: var(--oxd-bright);
	font-variant-numeric: tabular-nums;
}

.oxd-summary__rows + .oxd-summary__total { padding-top: 12px; }

.oxd-table__sub td { color: var(--oxd-muted); font-size: 13px; }

.oxd-table__total td { font-weight: 600; color: var(--oxd-text); }

.oxd-secure { font-size: 12px; color: var(--oxd-muted); margin: 14px 0 0; text-align: center; }

.oxd-testmode {
	margin: 12px 0 0;
	padding: 9px 12px;
	border-radius: 8px;
	background: rgba(202, 138, 4, .14);
	border: 1px solid rgba(202, 138, 4, .45);
	color: #fde68a;
	font-size: 12px;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Gateway picker
   -------------------------------------------------------------------------- */

.oxd-gateways { display: grid; gap: 10px; margin-bottom: 24px; }

.oxd-gateway {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 15px 17px;
	border: 1px solid var(--oxd-line);
	border-radius: 11px;
	background: var(--oxd-raised);
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease;
}

.oxd-gateway:hover { border-color: var(--oxd-border); }

.oxd-gateway:has(input:checked) {
	border-color: var(--oxd-accent);
	background: rgba(36, 28, 74, .45);
}

.oxd-gateway input { margin-top: 3px; accent-color: var(--oxd-accent); }
.oxd-gateway__body { display: flex; flex-direction: column; gap: 3px; }
.oxd-gateway__title { font-size: 14px; font-weight: 500; }
.oxd-gateway__desc { font-size: 12px; color: var(--oxd-muted); line-height: 1.5; }

[data-oxd-gateway-fields][hidden] { display: none; }

/* --------------------------------------------------------------------------
   Pricing table
   -------------------------------------------------------------------------- */

.oxd-pricing { display: grid; gap: 20px; }
.oxd-pricing--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oxd-pricing--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oxd-pricing--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
	.oxd-pricing--3, .oxd-pricing--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.oxd-pricing { grid-template-columns: minmax(0, 1fr) !important; }
}

.oxd-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 34px 28px;
	border: 1px solid var(--oxd-line);
	border-radius: 22px;
	background: linear-gradient(180deg, rgba(23, 23, 23, .9), rgba(10, 10, 10, .9));
}

.oxd-plan--featured {
	border-color: var(--oxd-accent);
	background: linear-gradient(180deg, rgba(36, 28, 74, .75), rgba(10, 10, 10, .95));
	box-shadow: 0 0 0 1px rgba(113, 101, 239, .35), 0 20px 60px -20px rgba(113, 101, 239, .5);
}

.oxd-plan__badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--oxd-accent-strong);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 5px 14px;
	border-radius: 999px;
	white-space: nowrap;
}

.oxd-plan__name { margin: 0 0 4px; font-size: 19px; font-weight: 500; }

.oxd-plan__price { display: flex; align-items: baseline; gap: 7px; margin: 14px 0 8px; }
.oxd-plan__amount { font-size: 44px; font-weight: 500; line-height: 1; letter-spacing: -.04em; }
.oxd-plan__period { font-size: 13px; color: var(--oxd-muted); }

.oxd-plan__desc { margin: 0 0 16px; font-size: 14px; color: var(--oxd-muted); line-height: 1.55; }

.oxd-plan__features { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; flex: 1; }

.oxd-plan__features li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
	color: var(--oxd-bright);
	line-height: 1.5;
}

.oxd-plan__features li::before {
	content: "\2713";
	color: var(--oxd-accent-soft);
	font-weight: 700;
	flex: none;
}

.oxd-plan__features li.oxd-plan__feature--no { color: var(--oxd-muted); }

.oxd-plan__features li.oxd-plan__feature--no::before {
	content: "\2715";
	color: var(--oxd-muted);
	font-weight: 400;
}

.oxd .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* "Every plan checks out with …" under the pricing table. */
.oxd-pricing__addon {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: center;
	max-width: 760px;
	margin: 26px auto 0;
	padding: 14px 20px;
	border: 1px solid var(--oxd-line);
	border-radius: 14px;
	background: var(--oxd-raised);
	font-size: 14px;
	line-height: 1.55;
	color: var(--oxd-bright);
	text-align: left;
}

.oxd-pricing__addon strong { color: var(--oxd-text); font-weight: 500; }

.oxd-pricing__addon-plus {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--oxd-accent-strong);
	color: #fff;
	font-weight: 600;
}

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

.oxd-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

@media (max-width: 900px) { .oxd-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .oxd-products { grid-template-columns: minmax(0, 1fr); } }

.oxd-product {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	padding: 26px;
	border: 1px solid var(--oxd-line);
	border-radius: var(--oxd-radius);
	background: var(--oxd-raised);
}

.oxd-product__name { margin: 0; font-size: 18px; font-weight: 500; }
.oxd-product__desc { margin: 0; font-size: 14px; color: var(--oxd-muted); line-height: 1.55; flex: 1; }
.oxd-product__price { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -.02em; }

/* --------------------------------------------------------------------------
   Receipt and tables
   -------------------------------------------------------------------------- */

.oxd-receipt__meta {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: 0 0 28px;
}

@media (max-width: 640px) { .oxd-receipt__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.oxd-receipt__meta > div {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 16px 18px;
	border: 1px solid var(--oxd-line);
	border-radius: 11px;
	background: var(--oxd-raised);
}

.oxd-receipt__meta span { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--oxd-muted); }
.oxd-receipt__meta strong { font-size: 15px; font-weight: 500; }

.oxd-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0 0 28px; }

.oxd-table th,
.oxd-table td {
	padding: 14px 16px;
	text-align: left;
	border-bottom: 1px solid var(--oxd-line);
	vertical-align: middle;
}

.oxd-table thead th {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--oxd-muted);
	font-weight: 500;
}

.oxd-table td { color: var(--oxd-bright); }
.oxd-table tbody tr:last-child td { border-bottom: none; }

.oxd-key {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	background: var(--oxd-surface);
	border: 1px solid var(--oxd-line);
	border-radius: 6px;
	padding: 6px 10px;
	color: var(--oxd-accent-soft);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */

.oxd-empty {
	border: 1px dashed var(--oxd-border);
	border-radius: var(--oxd-radius);
	padding: 46px 28px;
	text-align: center;
	background: rgba(10, 10, 10, .5);
}

.oxd-empty__title { margin: 0 0 6px; font-size: 18px; font-weight: 500; color: var(--oxd-text); }
.oxd-empty__text { margin: 0; font-size: 14px; color: var(--oxd-muted); }

/* "By paying, you agree to the terms" — used when the Pay button is in the provider's form. */
.oxd-terms-note { margin: 0 0 22px; font-size: 13px; color: var(--oxd-muted); }
.oxd-terms-note a { color: var(--oxd-accent-soft); }