/*!
 * ============================================================
 *  Módulo de Donaciones - Theme DEVIANS
 *  Estructura basada en un módulo de referencia, re-skineada
 *  100% a la paleta del template (cian + dorado, fondo oscuro).
 *  Todo está scopeado bajo .devians-donation para no chocar
 *  con los estilos del resto del template.
 * ============================================================
 */

.devians-donation {
	/* Paleta tomada del theme devians (override.css) */
	--d-bg:           #02070d;
	--d-bg2:          #03111c;
	--d-panel:        #07121f;
	--d-line:         rgba(0, 210, 255, .16);
	--d-line-strong:  rgba(255, 190, 80, .35);
	--d-text:         #f3f8ff;
	--d-muted:        #94b9c9;
	--d-gold:         #f4bf62;
	--d-gold-light:   #ffe5a0;
	--d-cyan:         #10c8ff;
	--d-card:         rgba(255, 255, 255, .04);
	--d-card-hover:   rgba(255, 255, 255, .06);
	--d-grad-gold:    linear-gradient(180deg, #ffe5a0 0%, #c87921 100%);
	--d-grad-accent:  linear-gradient(90deg, #10c8ff, #f4bf62);
	--d-radius:       8px;
	--d-radius-pill:  999px;

	color: var(--d-text);
	font-family: "PT Sans", "Segoe UI", Arial, sans-serif;
}

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

/* ===== Panel principal ===== */
.devians-donation .donation-panel {
	background: linear-gradient(180deg, rgba(10, 24, 39, .96), rgba(5, 12, 21, .98));
	border: 1px solid var(--d-line);
	border-radius: var(--d-radius);
	overflow: hidden;
	box-shadow: 0 18px 42px rgba(0, 0, 0, .32);
	position: relative;
}

.devians-donation .donation-panel-body {
	padding: 0;
	position: relative;
	z-index: 2;
}

/* ===== Header ===== */
.devians-donation .donation-header {
	background: linear-gradient(180deg, rgba(0, 210, 255, .075), rgba(255, 190, 80, .02));
	padding: 26px 28px;
	display: flex;
	align-items: center;
	gap: 14px;
	border-bottom: 1px solid rgba(0, 210, 255, .14);
	position: relative;
	overflow: hidden;
}

.devians-donation .donation-header::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(0, 210, 255, .10), transparent);
	animation: deviansDonationShine 4s infinite;
}

@keyframes deviansDonationShine {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

.devians-donation .donation-header i {
	font-size: 30px;
	color: var(--d-gold);
	position: relative;
	z-index: 1;
}

.devians-donation .donation-header h3 {
	font-family: "Cinzel", Georgia, serif;
	font-size: 24px;
	font-weight: 700;
	color: #fff;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	position: relative;
	z-index: 1;
}

/* ===== Tabs ===== */
.devians-donation .donation-tabs {
	display: flex;
	background: rgba(2, 8, 14, .55);
	border-bottom: 1px solid var(--d-line);
}

.devians-donation .donation-tab {
	flex: 1;
	padding: 14px 18px;
	background: transparent;
	color: var(--d-muted);
	font-family: "PT Sans", sans-serif;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	border: none;
	cursor: pointer;
	transition: all .15s ease-in;
	position: relative;
	border-right: 1px solid var(--d-line);
}

.devians-donation .donation-tab:last-child { border-right: none; }

.devians-donation .donation-tab::after {
	content: '';
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 0;
	background: var(--d-grad-accent);
	transition: height .15s ease-in;
}

.devians-donation .donation-tab:hover {
	color: var(--d-gold-light);
	background: rgba(0, 210, 255, .06);
}

.devians-donation .donation-tab.active {
	color: var(--d-gold-light);
	background: rgba(0, 210, 255, .10);
}

.devians-donation .donation-tab.active::after { height: 3px; }
.devians-donation .donation-tab i { margin-right: 6px; }

/* ===== Contenido de tabs ===== */
.devians-donation .donation-content { padding: 32px; }
.devians-donation .donation-tab-content { display: none; }
.devians-donation .donation-tab-content.active {
	display: block;
	animation: deviansFadeIn .3s ease;
}

@keyframes deviansFadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ===== Info Grid ===== */
.devians-donation .info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}

.devians-donation .info-card {
	background: var(--d-card);
	border: 1px solid var(--d-line);
	border-radius: var(--d-radius);
	padding: 28px;
	text-align: center;
	transition: all .15s ease-in;
}

.devians-donation .info-card:hover {
	border-color: var(--d-line-strong);
	transform: translateY(-4px);
	box-shadow: 0 14px 26px rgba(0, 190, 255, .12);
}

.devians-donation .info-icon {
	width: 64px; height: 64px;
	margin: 0 auto 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--d-radius);
	font-size: 30px;
}

.devians-donation .info-icon.gold {
	background: linear-gradient(135deg, rgba(0, 210, 255, .15) 0%, rgba(255, 190, 80, .15) 100%);
	color: var(--d-gold);
	border: 1px solid var(--d-line-strong);
}

.devians-donation .info-card h4 {
	font-family: "Cinzel", Georgia, serif;
	font-size: 18px;
	color: var(--d-gold-light);
	margin: 0 0 10px;
}

.devians-donation .info-card p {
	color: var(--d-muted);
	font-size: 13px;
	line-height: 1.7;
	margin: 0;
}

/* ===== Métodos de pago ===== */
.devians-donation .payment-methods {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
}

.devians-donation .payment-card {
	background: var(--d-card);
	border: 1px solid var(--d-line);
	border-radius: var(--d-radius);
	padding: 28px;
	text-align: center;
	cursor: pointer;
	transition: all .15s ease-in;
}

.devians-donation .payment-card:hover {
	border-color: var(--d-line-strong);
	transform: translateY(-4px);
	box-shadow: 0 14px 26px rgba(0, 190, 255, .12);
}

.devians-donation .payment-card:active { transform: translateY(-2px) scale(.98); }

.devians-donation .payment-icon {
	width: 72px; height: 72px;
	margin: 0 auto 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgba(0, 210, 255, .12) 0%, rgba(255, 190, 80, .12) 100%);
	border: 1px solid var(--d-line-strong);
	border-radius: var(--d-radius);
	font-size: 30px;
	color: var(--d-gold);
}

.devians-donation .payment-card h4 {
	font-family: "Cinzel", Georgia, serif;
	font-size: 18px;
	color: var(--d-gold-light);
	margin: 0 0 10px;
}

.devians-donation .payment-card p {
	color: var(--d-muted);
	font-size: 13px;
	line-height: 1.7;
	margin: 0 0 14px;
}

.devians-donation .payment-bonus,
.devians-donation .payment-fee,
.devians-donation .payment-warning {
	display: inline-block;
	padding: 5px 14px;
	border-radius: var(--d-radius-pill);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
}

.devians-donation .payment-bonus {
	background: linear-gradient(135deg, rgba(0, 210, 255, .25) 0%, rgba(255, 190, 80, .25) 100%);
	color: var(--d-gold-light);
	border: 1px solid var(--d-gold);
}

.devians-donation .payment-fee {
	background: transparent;
	color: var(--d-cyan);
	border: 1px solid rgba(0, 210, 255, .45);
}

.devians-donation .payment-warning {
	background: rgba(255, 190, 80, .12);
	color: var(--d-gold-light);
	border: 1px solid var(--d-line-strong);
}

/* ===== Modal ===== */
.devians-donation .payment-modal,
.payment-modal {
	display: none;
	position: fixed;
	z-index: 9999;
	inset: 0;
	width: 100%; height: 100%;
	background-color: rgba(0, 0, 0, .85);
	align-items: center;
	justify-content: center;
	animation: deviansFadeIn .3s ease;
}

.payment-modal .payment-modal-content {
	font-family: "PT Sans", "Segoe UI", Arial, sans-serif;
	color: #f3f8ff;
	background: linear-gradient(180deg, rgba(10, 24, 39, .98), rgba(5, 12, 21, .99));
	border: 1px solid rgba(255, 190, 80, .35);
	border-radius: 8px;
	padding: 0;
	max-width: 600px;
	width: 90%;
	max-height: 90vh;
	overflow-y: auto;
	position: relative;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .8), 0 0 60px rgba(0, 190, 255, .18);
	animation: deviansSlideUp .3s ease;
}

@keyframes deviansSlideUp {
	from { opacity: 0; transform: translateY(30px); }
	to   { opacity: 1; transform: translateY(0); }
}

.payment-modal .payment-modal-close {
	position: absolute;
	top: 18px; right: 18px;
	width: 40px; height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 210, 255, .15);
	color: #ffe5a0;
	font-size: 22px;
	font-weight: 700;
	border: 1px solid rgba(255, 190, 80, .35);
	border-radius: 8px;
	cursor: pointer;
	transition: all .15s ease-in;
	z-index: 10;
	line-height: 1;
}

.payment-modal .payment-modal-close:hover {
	background: rgba(0, 210, 255, .30);
	border-color: #f4bf62;
	transform: rotate(90deg);
}

.payment-modal .modal-header {
	background: linear-gradient(180deg, rgba(0, 210, 255, .12), rgba(255, 190, 80, .04));
	padding: 26px 28px;
	padding-right: 80px;
	border-bottom: 1px solid rgba(255, 190, 80, .35);
	display: flex;
	align-items: center;
	gap: 14px;
	position: relative;
}

.payment-modal .modal-header i { font-size: 30px; color: #f4bf62; }

.payment-modal .modal-header h3 {
	font-family: "Cinzel", Georgia, serif;
	font-size: 24px;
	font-weight: 700;
	color: #ffe5a0;
	margin: 0;
	flex: 1;
}

.payment-modal .modal-bonus {
	padding: 5px 14px;
	background: linear-gradient(135deg, rgba(0, 210, 255, .25) 0%, rgba(255, 190, 80, .25) 100%);
	color: #ffe5a0;
	border: 1px solid #f4bf62;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	white-space: nowrap;
}

.payment-modal .modal-body { padding: 28px; }

.payment-modal .modal-description {
	color: #94b9c9;
	font-size: 13px;
	line-height: 1.7;
	margin-bottom: 28px;
	padding: 14px;
	background: rgba(0, 210, 255, .05);
	border-left: 3px solid #f4bf62;
	border-radius: 8px;
}

.payment-modal .modal-details {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 28px;
}

.payment-modal .detail-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(0, 210, 255, .16);
	border-radius: 8px;
	gap: 14px;
	transition: all .15s ease-in;
}

.payment-modal .detail-row:hover {
	border-color: rgba(255, 190, 80, .35);
	background: rgba(255, 255, 255, .06);
}

.payment-modal .detail-row.highlight {
	background: linear-gradient(135deg, rgba(0, 210, 255, .12) 0%, rgba(255, 190, 80, .12) 100%);
	border-color: rgba(255, 190, 80, .35);
}

.payment-modal .detail-label {
	color: #ffe5a0;
	font-weight: 600;
	font-size: 13px;
	min-width: 140px;
}

.payment-modal .detail-value {
	color: #f3f8ff;
	font-size: 13px;
	flex: 1;
	text-align: right;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}

.payment-modal .detail-value.link {
	color: #10c8ff;
	text-decoration: none;
	word-break: break-all;
	position: relative;
	cursor: pointer;
}
.payment-modal .detail-value.link:hover { color: #ffe5a0; text-decoration: underline; }

.payment-modal .btn-copy {
	padding: 5px 10px;
	background: rgba(0, 210, 255, .10);
	color: #10c8ff;
	border: 1px solid rgba(0, 210, 255, .35);
	border-radius: 8px;
	cursor: pointer;
	font-size: 11px;
	transition: all .15s ease-in;
	display: flex;
	align-items: center;
	gap: 6px;
}
.payment-modal .btn-copy:hover { background: rgba(0, 210, 255, .20); transform: translateY(-1px); }
.payment-modal .btn-copy:active { transform: translateY(0) scale(.95); }

.payment-modal .modal-warning,
.payment-modal .modal-note {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 14px;
}

.payment-modal .modal-warning {
	background: rgba(255, 190, 80, .14);
	border: 1px solid rgba(255, 190, 80, .35);
	color: #ffe5a0;
}

.payment-modal .modal-note {
	background: rgba(0, 210, 255, .10);
	border: 1px solid rgba(0, 210, 255, .30);
	color: #dff8ff;
	margin-bottom: 0;
}

.payment-modal .modal-warning i,
.payment-modal .modal-note i { font-size: 18px; }

/* Scrollbar del modal */
.payment-modal .payment-modal-content::-webkit-scrollbar { width: 8px; }
.payment-modal .payment-modal-content::-webkit-scrollbar-track {
	background: rgba(2, 8, 14, .6);
	border-radius: 8px;
}
.payment-modal .payment-modal-content::-webkit-scrollbar-thumb {
	background: rgba(0, 210, 255, .35);
	border-radius: 8px;
}
.payment-modal .payment-modal-content::-webkit-scrollbar-thumb:hover { background: #f4bf62; }

/* ===== Calculadora ===== */
.devians-donation .calculator-container { max-width: 600px; margin: 0 auto; }

.devians-donation .calculator-header { text-align: center; margin-bottom: 32px; }
.devians-donation .calculator-header i { font-size: 30px; color: var(--d-gold); margin-bottom: 14px; }
.devians-donation .calculator-header h4 {
	font-family: "Cinzel", Georgia, serif;
	font-size: 22px;
	color: var(--d-gold-light);
	margin: 0 0 10px;
}
.devians-donation .calculator-header p { color: var(--d-muted); font-size: 13px; margin: 0; }

.devians-donation .calculator-form {
	background: var(--d-card);
	border: 1px solid var(--d-line);
	border-radius: var(--d-radius);
	padding: 28px;
	margin-bottom: 28px;
}

.devians-donation .form-group { margin-bottom: 20px; }
.devians-donation .form-group:last-of-type { margin-bottom: 0; }

.devians-donation .form-group label {
	display: block;
	color: var(--d-gold-light);
	font-weight: 600;
	margin-bottom: 10px;
	font-size: 13px;
}
.devians-donation .form-group label i { margin-right: 6px; color: var(--d-gold); }

.devians-donation .form-control {
	width: 100%;
	height: 44px;
	padding: 10px 14px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--d-line);
	border-radius: var(--d-radius);
	color: var(--d-text);
	font-size: 15px;
	transition: all .15s ease-in;
}
.devians-donation select.form-control { height: 44px; }
.devians-donation .form-control option { background: #03111c; color: #f3f8ff; }

.devians-donation .form-control:focus {
	outline: none;
	border-color: var(--d-line-strong);
	box-shadow: 0 0 0 3px rgba(0, 210, 255, .10);
}

.devians-donation .btn-calculate {
	width: 100%;
	padding: 13px 28px;
	background: var(--d-grad-gold);
	color: #120905;
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 1px;
	border: 1px solid rgba(255, 232, 168, .34);
	border-radius: var(--d-radius);
	cursor: pointer;
	transition: all .15s ease-in;
	margin-top: 20px;
	box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
}
.devians-donation .btn-calculate:hover {
	transform: translateY(-2px);
	box-shadow: 0 0 0 1px rgba(255, 228, 153, .22), 0 18px 30px rgba(0, 190, 255, .18);
}
.devians-donation .btn-calculate:active { transform: translateY(0); }
.devians-donation .btn-calculate i { margin-right: 10px; }

.devians-donation .calculator-result {
	background: linear-gradient(135deg, rgba(0, 210, 255, .12) 0%, rgba(255, 190, 80, .12) 100%);
	border: 1px solid var(--d-line-strong);
	border-radius: var(--d-radius);
	padding: 32px;
	text-align: center;
	margin-bottom: 28px;
}

.devians-donation .result-icon { font-size: 56px; color: var(--d-gold); margin-bottom: 14px; }
.devians-donation .result-amount {
	font-family: "Cinzel", Georgia, serif;
	font-size: 40px;
	font-weight: 700;
	color: var(--d-gold-light);
	margin-bottom: 10px;
}
.devians-donation .result-text { color: var(--d-muted); font-size: 15px; }
.devians-donation .result-text strong { color: var(--d-gold); }

.devians-donation .exchange-rates {
	background: var(--d-card);
	border: 1px solid var(--d-line);
	border-radius: var(--d-radius);
	padding: 20px;
}
.devians-donation .exchange-rates h5 {
	font-family: "Cinzel", Georgia, serif;
	font-size: 15px;
	color: var(--d-gold-light);
	margin: 0 0 14px;
}
.devians-donation .exchange-rates h5 i { margin-right: 6px; color: var(--d-gold); }

.devians-donation .rates-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 10px;
}
.devians-donation .rate-item { color: var(--d-muted); font-size: 13px; padding: 5px 0; }
.devians-donation .rate-item strong { color: var(--d-gold); margin-right: 6px; }

/* ===== Proceso ===== */
.devians-donation .process-steps {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 32px;
}

.devians-donation .step-card {
	display: flex;
	gap: 20px;
	background: var(--d-card);
	border: 1px solid var(--d-line);
	border-radius: var(--d-radius);
	padding: 28px;
	transition: all .15s ease-in;
}
.devians-donation .step-card:hover { border-color: var(--d-line-strong); transform: translateX(4px); }

.devians-donation .step-number {
	flex-shrink: 0;
	width: 48px; height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--d-grad-gold);
	color: #120905;
	font-family: "Cinzel", Georgia, serif;
	font-size: 22px;
	font-weight: 700;
	border-radius: var(--d-radius);
}

.devians-donation .step-content h4 {
	font-family: "Cinzel", Georgia, serif;
	font-size: 18px;
	color: var(--d-gold-light);
	margin: 0 0 10px;
}
.devians-donation .step-content h4 i { margin-right: 6px; color: var(--d-gold); }
.devians-donation .step-content p { color: var(--d-muted); font-size: 13px; line-height: 1.7; margin: 0; }
.devians-donation .step-content strong { color: var(--d-gold); }

.devians-donation .important-notice {
	display: flex;
	gap: 14px;
	background: linear-gradient(135deg, rgba(0, 210, 255, .08) 0%, rgba(255, 190, 80, .08) 100%);
	border: 1px solid var(--d-line-strong);
	border-radius: var(--d-radius);
	padding: 28px;
}
.devians-donation .important-notice > i { flex-shrink: 0; font-size: 26px; color: var(--d-gold); }
.devians-donation .important-notice h5 {
	font-family: "Cinzel", Georgia, serif;
	font-size: 18px;
	color: var(--d-gold-light);
	margin: 0 0 10px;
}
.devians-donation .important-notice ul { list-style: none; padding: 0; margin: 0; }
.devians-donation .important-notice li {
	color: var(--d-muted);
	font-size: 13px;
	line-height: 1.7;
	padding-left: 20px;
	position: relative;
	margin-bottom: 6px;
}
.devians-donation .important-notice li::before {
	content: '•';
	position: absolute;
	left: 0;
	color: var(--d-gold);
	font-weight: 700;
}
.devians-donation .important-notice strong { color: var(--d-gold); }

/* ===== Animación pulse en bonus ===== */
@keyframes deviansPulse { 0%,100% { opacity: 1; } 50% { opacity: .7; } }
.devians-donation .payment-bonus,
.payment-modal .modal-bonus { animation: deviansPulse 2s infinite; }

/* ===== Foco accesible ===== */
.devians-donation .payment-card:focus,
.devians-donation .donation-tab:focus,
.devians-donation .btn-calculate:focus,
.payment-modal .btn-copy:focus {
	outline: 2px solid var(--d-gold);
	outline-offset: 2px;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
	.devians-donation .donation-tabs { flex-wrap: wrap; }
	.devians-donation .donation-tab { flex: 1 1 50%; font-size: 11px; padding: 10px; }
	.devians-donation .donation-content { padding: 18px; }
	.devians-donation .donation-header { padding: 18px; }
	.devians-donation .donation-header h3 { font-size: 19px; }
	.devians-donation .info-grid,
	.devians-donation .payment-methods { grid-template-columns: 1fr; }
	.devians-donation .step-card { flex-direction: column; align-items: center; text-align: center; padding: 18px; }
	.devians-donation .important-notice { flex-direction: column; text-align: center; padding: 18px; }
	.devians-donation .important-notice li { text-align: left; }
	.devians-donation .calculator-form,
	.devians-donation .calculator-result { padding: 18px; }
	.devians-donation .result-amount { font-size: 28px; }
	.devians-donation .rates-grid { grid-template-columns: 1fr; }
	.payment-modal .payment-modal-content { width: 95%; max-height: 95vh; }
	.payment-modal .modal-header { flex-wrap: wrap; padding: 18px; }
	.payment-modal .modal-body { padding: 18px; }
	.payment-modal .detail-row { flex-direction: column; align-items: flex-start; gap: 10px; }
	.payment-modal .detail-label { min-width: auto; }
	.payment-modal .detail-value { width: 100%; text-align: left; justify-content: flex-start; word-break: break-word; }
	.payment-modal .btn-copy { margin-left: 0; }
}