/* =============================================================================
   Rich Dad's News — Atomic components
   Buttons (Main + Alternative), Links, Inputs, Icons — all states from UI Kit.
   These classes are shared by theme template parts, Gutenberg blocks and
   Elementor widgets. Depends on tokens.css + base.css.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   BUTTONS — shared base
   --------------------------------------------------------------------------- */
.rdn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--rdn-space-xs);
	min-height: 44px;
	padding: 13px 28px;
	border: var(--rdn-border-width) solid transparent;
	border-radius: var(--rdn-radius);
	font-family: var(--rdn-font-heading);
	font-size: var(--rdn-fs-btn);
	line-height: var(--rdn-lh-btn);
	font-weight: var(--rdn-fw-btn);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--rdn-transition), color var(--rdn-transition), border-color var(--rdn-transition);
	-webkit-appearance: none;
	appearance: none;
}
.rdn-btn:disabled,
.rdn-btn.is-disabled { cursor: not-allowed; pointer-events: none; }

/* MAIN button (filled red) */
.rdn-btn--main {
	background: var(--rdn-btn-bg);
	color: var(--rdn-btn-text);
	border-color: var(--rdn-btn-bg);
}
.rdn-btn--main:hover,
.rdn-btn--main:focus-visible {
	background: var(--rdn-btn-bg-hover);
	border-color: var(--rdn-btn-bg-hover);
	color: var(--rdn-btn-text-hover);
}
.rdn-btn--main:disabled,
.rdn-btn--main.is-disabled {
	background: var(--rdn-btn-bg-disabled);
	border-color: var(--rdn-btn-bg-disabled);
	color: var(--rdn-btn-text-disabled);
}

/* MAIN button — loading state (spinner) */
.rdn-btn--main.is-loading {
	background: var(--rdn-btn-bg-hover);
	border-color: var(--rdn-btn-bg-hover);
	color: transparent;
	position: relative;
}
.rdn-btn--main.is-loading::after {
	content: "";
	position: absolute;
	width: 18px; height: 18px;
	border: 2px solid var(--rdn-btn-spinner);
	border-top-color: transparent;
	border-radius: 50%;
	animation: rdn-spin 0.7s linear infinite;
}
@keyframes rdn-spin { to { transform: rotate(360deg); } }

/* ALTERNATIVE button (outlined red) */
.rdn-btn--alt {
	background: var(--rdn-btn-alt-bg);
	color: var(--rdn-btn-alt-text);
	border-color: var(--rdn-btn-alt-border);
}
.rdn-btn--alt:hover,
.rdn-btn--alt:focus-visible {
	background: var(--rdn-btn-alt-bg-hover);
	color: var(--rdn-btn-alt-text-hover);
	border-color: var(--rdn-btn-alt-border-hover);
}
.rdn-btn--alt:disabled,
.rdn-btn--alt.is-disabled {
	background: transparent;
	color: var(--rdn-btn-alt-text-disabled);
	border-color: var(--rdn-btn-alt-border-disabled);
}
.rdn-btn--alt .rdn-icon { width: 14px; height: 14px; }

.rdn-btn--block { display: flex; width: 100%; }

/* ---------------------------------------------------------------------------
   TEXT LINK ("READ MORE")
   --------------------------------------------------------------------------- */
.rdn-link {
	display: inline-block;
	font-family: var(--rdn-font-heading);
	font-size: var(--rdn-fs-btn);
	font-weight: var(--rdn-fw-btn);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--rdn-link);
	text-decoration: underline;
	text-decoration-color: var(--rdn-link-underline);
	text-underline-offset: 3px;
	transition: color var(--rdn-transition);
}
.rdn-link:hover,
.rdn-link:focus-visible { color: var(--rdn-link-hover); text-decoration-color: var(--rdn-link-hover); }
.rdn-link.is-disabled { color: var(--rdn-link-disabled); text-decoration-color: var(--rdn-link-disabled); pointer-events: none; cursor: not-allowed; }

/* ---------------------------------------------------------------------------
   INPUTS
   --------------------------------------------------------------------------- */
.rdn-field { display: flex; flex-direction: column; gap: 6px; }

.rdn-input {
	width: 100%;
	min-height: 44px;
	padding: 11px 14px;
	background: var(--rdn-input-bg);
	color: var(--rdn-input-text);
	border: var(--rdn-border-width) solid var(--rdn-input-border);
	border-radius: var(--rdn-radius);
	font-family: var(--rdn-font-body);
	font-size: 16px;
	line-height: 1.2;
	transition: border-color var(--rdn-transition);
}
.rdn-input::placeholder { color: var(--rdn-input-placeholder); }
.rdn-input:hover { border-color: var(--rdn-input-border-hover); }
.rdn-input:focus,
.rdn-input:focus-visible { outline: none; border-color: var(--rdn-input-border-focus); box-shadow: none; }

.rdn-input.is-error,
.rdn-input[aria-invalid="true"] { border-color: var(--rdn-input-border-error); }
.rdn-input:disabled { background: var(--rdn-input-bg-disabled); color: var(--rdn-muted); cursor: not-allowed; }

.rdn-input__error {
	font-size: var(--rdn-fs-meta);
	color: var(--rdn-input-error-text);
}

/* ---------------------------------------------------------------------------
   ICONS (referenced from the SVG sprite, see inc/icons.php)
   --------------------------------------------------------------------------- */
.rdn-icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: middle;
}
.rdn-icon--sm { width: 16px; height: 16px; }
.rdn-icon--lg { width: 32px; height: 32px; }

/* Category label / badge */
.rdn-category {
	display: inline-block;
	padding: 4px 10px;
	background: var(--rdn-category-bg);
	color: var(--rdn-category-text);
	font-family: var(--rdn-font-body);
	font-size: var(--rdn-fs-meta);
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.rdn-category--solid { background: var(--rdn-category-bg-solid); color: var(--rdn-category-text-solid); }