/* ==========================================================================
   Oxyum Site — customer portal
   Loaded only on the login page and inside the account area.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons (outside the block editor's button block)
   -------------------------------------------------------------------------- */

.ox-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 22px;
	border-radius: var(--wp--custom--radius--pill);
	border: 1px solid var(--wp--preset--color--line);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--wp--custom--duration--base) ease,
	            border-color var(--wp--custom--duration--base) ease,
	            color var(--wp--custom--duration--base) ease;
}

.ox-btn:hover {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--contrast);
}

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

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

.ox-btn--small {
	padding: 7px 14px;
	font-size: var(--wp--preset--font-size--x-small);
}

/* --------------------------------------------------------------------------
   Form fields
   -------------------------------------------------------------------------- */

.ox-field,
.ox-login p {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0 0 18px;
}

.ox-field label,
.ox-login label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--muted-bright);
}

.ox-field input,
.ox-login input[type="text"],
.ox-login input[type="email"],
.ox-login input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	background: var(--wp--preset--color--base-raised);
	border: 1px solid var(--wp--preset--color--surface-2);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	transition: border-color var(--wp--custom--duration--fast) ease,
	            box-shadow var(--wp--custom--duration--fast) ease;
}

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

.ox-field__hint {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

.ox-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 20px;
}

@media (max-width: 600px) {
	.ox-form__grid { grid-template-columns: minmax(0, 1fr); }
}

.ox-form__legend {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--tight);
	margin: 34px 0 18px;
	padding-top: 26px;
	border-top: 1px solid var(--wp--preset--color--surface-2);
}

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

.ox-login {
	background: linear-gradient(180deg, rgba(23, 23, 23, .92), rgba(10, 10, 10, .92));
	border: 1px solid var(--wp--preset--color--surface-2);
	border-radius: var(--wp--custom--radius--xl);
	padding: 32px;
	box-shadow: var(--wp--preset--shadow--lifted);
}

.ox-login .login-remember {
	flex-direction: row;
	align-items: center;
	gap: 9px;
}

.ox-login .login-remember label {
	font-weight: 400;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.ox-login .login-remember input {
	width: auto;
	accent-color: var(--wp--preset--color--accent);
}

.ox-login .login-submit { margin-bottom: 0; }

.ox-login input[type="submit"] {
	width: 100%;
	padding: 13px 22px;
	border: 1px solid var(--wp--preset--color--accent-strong);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--accent-strong);
	color: #fff;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	cursor: pointer;
	transition: background var(--wp--custom--duration--base) ease;
}

.ox-login input[type="submit"]:hover {
	background: var(--wp--preset--color--accent);
}

.ox-login__links {
	margin: 22px 0 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.ox-login__links a { color: var(--wp--preset--color--accent-soft); }
.ox-login__sep { color: var(--wp--preset--color--line); margin: 0 4px; }
.ox-login__hello { margin-top: 0; }

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

.ox-notice {
	border-radius: var(--wp--custom--radius--md);
	padding: 13px 16px;
	margin-bottom: 22px;
	font-size: var(--wp--preset--font-size--small);
	border: 1px solid transparent;
}

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

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

/* --------------------------------------------------------------------------
   Portal shell
   -------------------------------------------------------------------------- */

.ox-portal__hello {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--muted-bright);
	margin: 0 0 24px;
}

.ox-portal__nav {
	border-bottom: 1px solid var(--wp--preset--color--surface-2);
	margin-bottom: 36px;
	overflow-x: auto;
}

.ox-portal__nav ul {
	display: flex;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: max-content;
}

.ox-portal__nav a {
	display: block;
	padding: 12px 16px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--muted);
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	transition: color var(--wp--custom--duration--fast) ease,
	            border-color var(--wp--custom--duration--fast) ease;
}

.ox-portal__nav a:hover { color: var(--wp--preset--color--contrast); }

.ox-portal__nav a.is-current {
	color: var(--wp--preset--color--contrast);
	border-bottom-color: var(--wp--preset--color--accent);
}

.ox-portal__nav-out { margin-left: auto; }
.ox-portal__nav-out a { color: var(--wp--preset--color--muted); }

/* --------------------------------------------------------------------------
   Dashboard tiles
   -------------------------------------------------------------------------- */

.ox-portal__tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

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

@media (max-width: 480px) {
	.ox-portal__tiles { grid-template-columns: minmax(0, 1fr); }
}

.ox-tile {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px;
	border: 1px solid var(--wp--preset--color--surface-2);
	border-radius: var(--wp--custom--radius--lg);
	background: linear-gradient(180deg, rgba(23, 23, 23, .9), rgba(10, 10, 10, .9));
	transition: border-color var(--wp--custom--duration--base) ease,
	            transform var(--wp--custom--duration--base) ease;
}

.ox-tile:hover {
	border-color: var(--wp--preset--color--accent-deep);
	transform: translateY(-2px);
}

.ox-tile__value {
	font-size: 34px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: var(--wp--custom--tracking--display);
	color: var(--wp--preset--color--contrast);
}

.ox-tile__label {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* --------------------------------------------------------------------------
   Data tables
   -------------------------------------------------------------------------- */

.ox-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.ox-table th,
.ox-table td {
	padding: 15px 18px;
	text-align: left;
	border-bottom: 1px solid var(--wp--preset--color--surface-2);
	vertical-align: middle;
}

.ox-table thead th {
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--wide);
	color: var(--wp--preset--color--muted);
	font-weight: 500;
	border-bottom-color: var(--wp--preset--color--line);
	white-space: nowrap;
}

.ox-table td { color: var(--wp--preset--color--muted-bright); }
.ox-table tbody tr:last-child td { border-bottom: none; }
.ox-table tbody tr:hover td { background: rgba(23, 23, 23, .5); }

.ox-key {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--surface-2);
	border-radius: var(--wp--custom--radius--sm);
	padding: 5px 9px;
	color: var(--wp--preset--color--accent-soft);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Status badges
   -------------------------------------------------------------------------- */

.ox-badge {
	display: inline-block;
	padding: 4px 11px;
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	border: 1px solid transparent;
	white-space: nowrap;
}

.ox-badge--active,
.ox-badge--complete {
	background: rgba(22, 101, 52, .22);
	border-color: rgba(22, 101, 52, .6);
	color: #86EFAC;
}

.ox-badge--pending {
	background: rgba(202, 138, 4, .18);
	border-color: rgba(202, 138, 4, .55);
	color: #FDE68A;
}

.ox-badge--expired,
.ox-badge--cancelled,
.ox-badge--failed {
	background: rgba(207, 46, 46, .14);
	border-color: rgba(207, 46, 46, .45);
	color: #FCA5A5;
}

.ox-badge--neutral {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted-bright);
}

/* --------------------------------------------------------------------------
   Empty states
   -------------------------------------------------------------------------- */

.ox-empty {
	border: 1px dashed var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	padding: 44px 28px;
	text-align: center;
	background: rgba(10, 10, 10, .5);
}

.ox-empty__title {
	margin: 0 0 6px;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}

.ox-empty__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}