/*
 * Mictlan Online - tienda de Tibia Coins (plugin Gesior Shop System)
 * 2026-10-10
 *
 * Por que un CSS aparte y no en el tema: estas paginas las sirve el PLUGIN (/points y
 * /points?system=paypal), asi que un bloque <style> en una plantilla NO valdria para la otra.
 * Va en assets/ y lo enlazan las dos. /plugins/ se sirve por HTTP (comprobado).
 *
 * La paleta NO se inventa: son las variables que el tema ya define en :root (mictlan.css),
 * con su valor de respaldo por si alguna pagina no cargara ese fichero:
 *   --gold #c9a227   --gold-light #e8c766   --gold-deep #8a6d1a
 *   --text #d9d4c8   --text-dim #9a9184     --ink #070a04
 * La tipografia tampoco: el tema ya carga Cinzel (display) e Inter (texto) de Google Fonts.
 *
 * Todo va con prefijo .mc- para no chocar con MyAAC ni con el plugin.
 */

.mc-store {
	--mc-gold:  var(--gold, #c9a227);
	--mc-goldl: var(--gold-light, #e8c766);
	--mc-goldd: var(--gold-deep, #8a6d1a);
	--mc-text:  var(--text, #d9d4c8);
	--mc-dim:   var(--text-dim, #9a9184);
	--mc-line:  rgba(201, 162, 39, .30);
	--mc-line2: rgba(201, 162, 39, .16);
	--mc-display: var(--font-display, 'Cinzel', Georgia, serif);
	--mc-body: var(--font-body, 'Inter', 'Segoe UI', Arial, sans-serif);

	color: var(--mc-text);
	font-family: var(--mc-body);
	text-align: left;
}

/* ---------------------------------------------------------- cabecera */
.mc-head {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	padding: 4px 0 22px;
	border-bottom: 1px solid var(--mc-line2);
}

.mc-head__mark {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	border: 1px solid var(--mc-line);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 40%, rgba(201, 162, 39, .22), rgba(0, 0, 0, .55) 70%);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, .35) inset;
}

.mc-head__mark img {
	width: 34px;
	height: 34px;
	image-rendering: pixelated;
}

.mc-head__text { flex: 1 1 260px; min-width: 220px; }

.mc-eyebrow {
	display: block;
	font-size: .70rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--mc-gold);
	margin-bottom: 4px;
}

.mc-title {
	margin: 0 0 6px;
	font-family: var(--mc-display);
	font-weight: 700;
	font-size: clamp(1.7rem, 4vw, 2.3rem);
	line-height: 1.05;
	color: var(--mc-goldl);
	text-shadow: 0 2px 10px rgba(0, 0, 0, .65);
}

.mc-lead {
	margin: 0;
	font-size: .90rem;
	line-height: 1.5;
	color: var(--mc-dim);
	max-width: 56ch;
}

/* cartera */
.mc-wallet {
	flex: 0 0 auto;
	min-width: 232px;
	padding: 13px 16px 12px;
	border: 1px solid var(--mc-line);
	border-radius: 6px;
	background: linear-gradient(180deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, .16));
}

.mc-wallet__title {
	display: block;
	font-size: .66rem;
	letter-spacing: .20em;
	text-transform: uppercase;
	color: var(--mc-gold);
	margin-bottom: 9px;
}

.mc-wallet__row {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 5px 0;
}

.mc-wallet__row + .mc-wallet__row { border-top: 1px solid var(--mc-line2); }

.mc-wallet__row img { width: 22px; height: 22px; image-rendering: pixelated; }

.mc-wallet__name { flex: 1 1 auto; font-size: .82rem; color: var(--mc-dim); }

.mc-wallet__val {
	font-family: var(--mc-display);
	font-size: 1.02rem;
	color: var(--mc-goldl);
}

/* ---------------------------------------------------------- pestanas */
.mc-tabs {
	display: flex;
	flex-wrap: wrap;
	margin: 20px 0 24px;
	border-bottom: 1px solid var(--mc-line2);
}

.mc-tabs a {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 10px 22px 9px;
	text-decoration: none;
	color: var(--mc-dim);
	font-size: .92rem;
	border-bottom: 2px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}

.mc-tabs a small { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.mc-tabs a:hover { color: var(--mc-goldl); }
.mc-tabs a.is-on { color: var(--mc-goldl); border-bottom-color: var(--mc-gold); }

/* ---------------------------------------------------------- paso */
/* Sin la numeracion "01"/"02": el bloque es solo el titulo y la explicacion. */
.mc-step { margin: 0 0 20px; }

.mc-step__t {
	margin: 0 0 3px;
	font-family: var(--mc-display);
	font-weight: 700;
	font-size: 1.28rem;
	color: var(--mc-goldl);
}

.mc-step__d { margin: 0; font-size: .86rem; color: var(--mc-dim); }

/* ---------------------------------------------------------- tarjetas */
.mc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
	gap: 18px;
	margin: 0 0 26px;
}

.mc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 26px 18px 18px;
	text-decoration: none;
	color: inherit;
	background: linear-gradient(180deg, #191c13 0%, #0e1008 100%);
	border: 1px solid var(--mc-line);
	border-radius: 6px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
	transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.mc-card:hover,
.mc-card:focus-visible {
	transform: translateY(-3px);
	border-color: rgba(232, 199, 102, .72);
	box-shadow: 0 12px 26px rgba(0, 0, 0, .5), 0 0 0 1px rgba(232, 199, 102, .22) inset;
	outline: none;
}

.mc-card.is-best {
	border-color: rgba(232, 199, 102, .62);
	background: linear-gradient(180deg, #221f10 0%, #12100a 100%);
	box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 0 22px rgba(201, 162, 39, .10);
}

.mc-card__coin {
	width: 34px;
	height: 34px;
	image-rendering: pixelated;
	margin-bottom: 4px;
	filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .55));
}

.mc-card__num {
	font-family: var(--mc-display);
	font-weight: 700;
	font-size: 2.35rem;
	line-height: 1;
	color: var(--mc-goldl);
	text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}

.mc-card__unit { font-size: .84rem; color: var(--mc-dim); margin-top: 2px; }

.mc-card__ratio {
	font-size: .74rem;
	letter-spacing: .04em;
	color: rgba(201, 162, 39, .85);
}

.mc-card__price {
	width: 100%;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--mc-line);
	text-align: center;
	font-family: var(--mc-display);
	font-weight: 700;
	font-size: 1.12rem;
	color: var(--mc-text);
}

.mc-card__cta {
	margin-top: 10px;
	padding: 7px 20px;
	border: 1px solid var(--mc-line);
	border-radius: 999px;
	font-size: .76rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mc-goldl);
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.mc-card:hover .mc-card__cta,
.mc-card:focus-visible .mc-card__cta {
	background: linear-gradient(180deg, var(--mc-goldl), var(--mc-gold));
	border-color: var(--mc-gold);
	color: #17130a;
}

.mc-badge {
	position: absolute;
	top: -11px;
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 13px;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--mc-goldl), var(--mc-gold));
	color: #1a1405;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}

/* ---------------------------------------------------------- notas y errores */
.mc-note {
	margin: 0 0 18px;
	padding: 11px 15px;
	border-left: 3px solid var(--mc-gold);
	border-radius: 0 4px 4px 0;
	background: rgba(201, 162, 39, .08);
	font-size: .87rem;
	line-height: 1.5;
	color: var(--mc-text);
}

.mc-note a { color: var(--mc-goldl); font-weight: 600; }

/* ---------------------------------------------------------- metodos de pago */
.mc-pay { margin: 6px 0 0; padding-top: 18px; border-top: 1px solid var(--mc-line2); }

.mc-pay__t {
	display: block;
	font-size: .66rem;
	letter-spacing: .20em;
	text-transform: uppercase;
	color: var(--mc-gold);
	margin-bottom: 10px;
}

/* el bloque de pasarelas del plugin trae sus propias clases: se domestican aqui */
.mc-pay__row { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.mc-pay__row .floating-box { float: none !important; margin-left: 0 !important; }
.mc-pay__row .floating-logo-box { height: auto !important; line-height: 1 !important; }
.mc-pay__row .info-box { height: auto !important; margin-top: 6px; font-size: .78rem; color: var(--mc-dim); }

/* ---------------------------------------------------------- pagina de pago */
.mc-summary {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 0 20px;
	padding: 16px 18px;
	border: 1px solid var(--mc-line);
	border-radius: 6px;
	background: linear-gradient(180deg, rgba(201, 162, 39, .10), rgba(0, 0, 0, .22));
}

.mc-summary__coin { width: 40px; height: 40px; image-rendering: pixelated; flex: 0 0 auto; }
.mc-summary__coins {
	font-family: var(--mc-display);
	font-weight: 700;
	font-size: 1.55rem;
	line-height: 1;
	color: var(--mc-goldl);
}
.mc-summary__lbl { font-size: .78rem; color: var(--mc-dim); }
.mc-summary__price {
	margin-left: auto;
	font-family: var(--mc-display);
	font-weight: 700;
	font-size: 1.35rem;
	color: var(--mc-text);
}

/* el formulario del plugin, con nuestra ropa */
.mc-form { margin: 0; }
.mc-form__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.mc-form label { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mc-gold); }
.mc-form select,
.mc-form input[type="text"] {
	padding: 8px 11px;
	min-width: 150px;
	color: var(--mc-text);
	background: #0d0f08;
	border: 1px solid var(--mc-line);
	border-radius: 4px;
	font-family: var(--mc-body);
	font-size: .92rem;
}
.mc-form input[type="text"][disabled] { opacity: .65; cursor: not-allowed; }
.mc-form input[type="image"] { margin-top: 6px; }

.mc-steps-text { margin: 0 0 18px; padding-left: 20px; font-size: .86rem; line-height: 1.7; color: var(--mc-dim); }
.mc-steps-text b { color: var(--mc-text); }

/* terminos */
.mc-terms {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	padding: 18px 20px;
	border: 1px solid var(--mc-line);
	border-radius: 6px;
	background: rgba(0, 0, 0, .26);
}
.mc-terms__box {
	width: 100%;
	height: 210px;
	padding: 12px;
	color: var(--mc-dim);
	background: #0d0f08;
	border: 1px solid var(--mc-line2);
	border-radius: 4px;
	font-family: var(--mc-body);
	font-size: .82rem;
	line-height: 1.6;
	resize: vertical;
}
.mc-terms__cta { margin-top: 16px; text-align: center; }
.mc-terms__cta input[type="submit"] {
	padding: 10px 34px;
	cursor: pointer;
	color: #17130a;
	background: linear-gradient(180deg, var(--mc-goldl), var(--mc-gold));
	border: 1px solid var(--mc-gold);
	border-radius: 999px;
	font-family: var(--mc-body);
	font-size: .80rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.mc-terms__cta input[type="submit"]:hover { filter: brightness(1.08); }

/* ---------------------------------------------------------- modal (Mi historial) */
/* Sin JS, la pestana es un enlace normal a /gifts/history (el JS le quita el salto). */
.mc-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 22px;
}

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

.mc-modal__bg {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .74);
}

.mc-modal__box {
	position: relative;
	width: 100%;
	max-width: 880px;
	max-height: 84vh;
	overflow: auto;
	padding: 20px 24px 24px;
	background: linear-gradient(180deg, #171a12 0%, #0d0f08 100%);
	border: 1px solid var(--mc-gold);
	border-radius: 6px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .72), 0 0 0 1px rgba(232, 199, 102, .18) inset;
}

.mc-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--mc-line2);
}

.mc-modal__t {
	margin: 0;
	font-family: var(--mc-display);
	font-weight: 700;
	font-size: 1.28rem;
	color: var(--mc-goldl);
}

.mc-modal__x {
	width: 34px;
	height: 34px;
	line-height: 1;
	font-size: 20px;
	cursor: pointer;
	color: var(--mc-goldl);
	background: transparent;
	border: 1px solid var(--mc-line);
	border-radius: 4px;
	transition: background .15s ease;
}

.mc-modal__x:hover { background: rgba(201, 162, 39, .16); }

.mc-modal__body { color: var(--mc-text); font-size: .9rem; }

/* el titulo lo pone el modal: el h1 del historial sobra dentro */
.mc-modal__body h1 { display: none; }

.mc-modal__body h2 {
	margin: 16px 0 8px;
	font-family: var(--mc-display);
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--mc-goldl);
}

.mc-modal__body table { width: 100%; border-collapse: collapse; }

.mc-modal__body td {
	padding: 7px 9px;
	border-bottom: 1px solid var(--mc-line2);
	font-size: .84rem;
	vertical-align: top;
}

.mc-modal__body thead td {
	color: var(--mc-gold);
	font-size: .74rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.mc-modal__body tbody tr:hover td { background: rgba(201, 162, 39, .05); }

.mc-modal__body i { color: var(--mc-dim); }

/* ---------------------------------------------------------- acciones (pago hecho / cancelado) */
.mc-actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 6px;
}

.mc-action {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	text-decoration: none;
	color: var(--mc-goldl);
	background: linear-gradient(180deg, #191c13 0%, #0e1008 100%);
	border: 1px solid var(--mc-line);
	border-radius: 6px;
	font-size: .84rem;
	letter-spacing: .10em;
	text-transform: uppercase;
	transition: border-color .16s ease, transform .16s ease;
}

.mc-action:hover {
	border-color: rgba(232, 199, 102, .70);
	transform: translateY(-2px);
}

.mc-action img {
	width: 22px;
	height: 22px;
	image-rendering: pixelated;
}

/* la nota del aviso: dorada si todo fue bien, roja si se cancela */
.mc-note--ok { border-left-color: var(--mc-gold); }
.mc-note--bad { border-left-color: #c0392b; }

/* ---------------------------------------------------------- movil */
/* A 2 columnas la tercera tarjeta (la del BONUS) se queda sola media fila y se ve coja:
   `:last-child:nth-child(odd)` la estira a lo ancho de las dos. Por debajo de 561px, una columna. */
@media (max-width: 860px) and (min-width: 561px) {
	.mc-grid { grid-template-columns: repeat(2, 1fr); }
	.mc-grid > .mc-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

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

@media (max-width: 720px) {
	.mc-head { flex-direction: column; align-items: stretch; }
	.mc-head__mark { margin: 0 auto; }
	.mc-head__text { text-align: center; }
	.mc-lead { margin: 0 auto; }
	.mc-wallet { min-width: 0; }
	.mc-summary__price { margin-left: 0; }
	.mc-card__num { font-size: 2rem; }
}