/* =====================================================================
   Download Gate — ελεγχόμενη διανομή X6 AI (r83 · 2026-09-08)
   Εγγραφή με email → κωδικός → λήψη με προσωρινό σύνδεσμο → ενεργοποίηση.
   Φορτώνεται ΜΟΝΟ στο page-templates/template-download.php (inc/enqueue.php).
   Χρησιμοποιεί τα tokens του main.css (--accent, --surface, --border …).
   ===================================================================== */

/* -------- Ροή 6 βημάτων (icon strip) -------- */
.gate-flow {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0;
	position: relative;
	margin: 8px 0 34px;
	padding: 26px 8px 18px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.gate-flow::before {                /* γραμμή σύνδεσης */
	content: "";
	position: absolute; left: 8%; right: 8%; top: 62px;
	height: 2px;
	background: linear-gradient(90deg, rgba(20,184,166,.1), rgba(20,184,166,.55), rgba(20,184,166,.1));
}
.gate-flow::after {                 /* κινούμενος παλμός πάνω στη γραμμή */
	content: "";
	position: absolute; top: 58px; left: 8%;
	width: 10px; height: 10px; border-radius: 50%;
	background: var(--accent-soft);
	box-shadow: 0 0 14px 4px rgba(94,234,212,.55);
	animation: gate-travel 6s linear infinite;
}
@keyframes gate-travel { 0% { left: 8%; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { left: calc(92% - 10px); opacity: 0; } }

.gate-flow__step {
	position: relative; z-index: 1;
	display: flex; flex-direction: column; align-items: center; text-align: center;
	gap: 10px; padding: 0 6px;
	color: var(--text-muted); font-size: .78rem; line-height: 1.3;
}
.gate-flow__step strong { display: block; color: var(--text); font-size: .82rem; margin-bottom: 2px; }
.gate-flow__n {
	position: absolute; top: -18px;
	font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em;
	color: var(--accent-hover);
}

/* -------- Animated icons -------- */
.gi {
	width: 72px; height: 72px; flex-shrink: 0;
	display: grid; place-items: center;
	border-radius: 20px;
	background: radial-gradient(circle at 30% 25%, rgba(20,184,166,.22), rgba(15,23,42,.9) 70%);
	border: 1px solid rgba(20,184,166,.28);
	box-shadow: 0 0 0 0 rgba(20,184,166,.0);
	transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.gi svg { width: 38px; height: 38px; overflow: visible; }
.gi svg .st {
	fill: none; stroke: var(--accent-soft); stroke-width: 1.9;
	stroke-linecap: round; stroke-linejoin: round;
	stroke-dasharray: 120; stroke-dashoffset: 120;
}
.gi svg .fl { fill: rgba(94,234,212,.18); opacity: 0; transition: opacity .6s .5s; }
.is-in .gi svg .st { animation: gi-draw 1.1s var(--ease) forwards; }
.is-in .gi svg .fl { opacity: 1; }
.gate-flow__step:nth-child(2) .gi svg .st { animation-delay: .15s; }
.gate-flow__step:nth-child(3) .gi svg .st { animation-delay: .3s; }
.gate-flow__step:nth-child(4) .gi svg .st { animation-delay: .45s; }
.gate-flow__step:nth-child(5) .gi svg .st { animation-delay: .6s; }
.gate-flow__step:nth-child(6) .gi svg .st { animation-delay: .75s; }
@keyframes gi-draw { to { stroke-dashoffset: 0; } }

.gi:hover, .gate-step:hover .gi {
	transform: translateY(-4px) scale(1.04);
	border-color: rgba(94,234,212,.75);
	box-shadow: 0 10px 30px rgba(20,184,166,.28), 0 0 0 6px rgba(20,184,166,.08);
}
.gi--pulse { animation: gi-pulse 2.8s ease-in-out infinite; }
@keyframes gi-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(20,184,166,.0); }
	50%      { box-shadow: 0 0 0 10px rgba(20,184,166,.10), 0 0 24px rgba(20,184,166,.25); }
}
.gi--float { animation: gi-float 4s ease-in-out infinite; }
@keyframes gi-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.gi--warm { background: radial-gradient(circle at 30% 25%, rgba(249,115,22,.25), rgba(15,23,42,.9) 70%); border-color: rgba(249,115,22,.35); }
.gi--warm svg .st { stroke: #FDBA74; }
.gi--warm svg .fl { fill: rgba(249,115,22,.18); }
.gi--ok { background: radial-gradient(circle at 30% 25%, rgba(0,214,143,.25), rgba(15,23,42,.9) 70%); border-color: rgba(0,214,143,.4); }
.gi--ok svg .st { stroke: #6EE7B7; }
.gi--ok svg .fl { fill: rgba(0,214,143,.18); }

/* -------- Κάρτες πύλης -------- */
.gate-grid { grid-template-columns: 1.1fr 1.1fr .8fr; }
.gate-card__step {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em;
	color: var(--accent-hover);
}
.gate-card__step i {
	display: inline-grid; place-items: center;
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--grad-accent); color: #000; font-style: normal; font-weight: 700; font-size: .72rem;
}
.gate-form label { display: block; font-size: .8rem; color: var(--text-muted); margin: 12px 0 6px; }
.gate-form input, .gate-form select {
	width: 100%; padding: 13px 14px; box-sizing: border-box;
	background: rgba(2,6,23,.75); color: var(--text);
	border: 1px solid var(--border); border-radius: var(--radius-sm);
	font: inherit; font-size: 1rem; transition: border-color .2s, box-shadow .2s;
}
.gate-form input:focus, .gate-form select:focus {
	outline: none; border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(20,184,166,.18);
}
.gate-form input.code { font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.gate-form .btn { width: 100%; justify-content: center; margin-top: 16px; }
.gate-form .btn[disabled] { opacity: .55; cursor: wait; }
.gate-form .btn .spin {
	display: none; width: 16px; height: 16px; border-radius: 50%;
	border: 2px solid rgba(0,0,0,.25); border-top-color: #000;
	animation: spin .8s linear infinite;
}
.gate-form .btn.is-busy .spin { display: inline-block; }
.gate-form .btn.is-busy .btn__icon { display: none; }

.gate-msg {
	display: none; margin-top: 14px; padding: 12px 14px;
	border-radius: var(--radius-sm); font-size: .9rem; line-height: 1.45;
	animation: gate-fade .35s var(--ease);
}
.gate-msg.ok  { display: block; background: rgba(0,214,143,.10); color: #6EE7B7; border-left: 3px solid var(--success); }
.gate-msg.err { display: block; background: rgba(255,71,71,.10); color: #FCA5A5; border-left: 3px solid var(--danger); }
.gate-msg.info{ display: block; background: rgba(20,184,166,.10); color: var(--accent-soft); border-left: 3px solid var(--accent); }
@keyframes gate-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.gate-avail { font-size: .8rem; color: var(--text-dim); margin-top: 6px; min-height: 1.1em; }
.gate-avail.on { color: var(--success); }
.gate-fine { color: var(--text-dim); font-size: .76rem; line-height: 1.45; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); }

/* -------- Απαιτήσεις / QR -------- */
.gate-req { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; width: 100%; text-align: left; }
.gate-req li { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; color: var(--text-muted); }
.gate-req li::before { content: "◆"; color: var(--accent); font-size: .7rem; margin-top: 4px; }
.gate-req strong { color: var(--text); font-weight: 500; }

/* -------- Αναλυτικές οδηγίες (6 κάρτες) -------- */
.gate-steps {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px;
}
.gate-step {
	position: relative;
	display: flex; gap: 16px; align-items: flex-start;
	padding: 22px 22px 22px 20px;
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
	transition: border-color .3s, transform .3s var(--ease);
	opacity: 0; transform: translateY(14px);
}
.is-in .gate-step { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease), border-color .3s; }
.is-in .gate-step:nth-child(2) { transition-delay: .08s; }
.is-in .gate-step:nth-child(3) { transition-delay: .16s; }
.is-in .gate-step:nth-child(4) { transition-delay: .24s; }
.is-in .gate-step:nth-child(5) { transition-delay: .32s; }
.is-in .gate-step:nth-child(6) { transition-delay: .40s; }
.gate-step:hover { border-color: var(--border-strong); }
.gate-step .gi { width: 58px; height: 58px; border-radius: 16px; }
.gate-step .gi svg { width: 30px; height: 30px; }
.gate-step__n {
	position: absolute; top: 12px; right: 16px;
	font-family: var(--font-mono); font-size: 1.4rem; font-weight: 800; color: rgba(20,184,166,.18);
}
.gate-step h4 { margin: 0 0 6px; font-size: 1rem; color: var(--text); }
.gate-step p { margin: 0; font-size: .88rem; color: var(--text-muted); line-height: 1.5; }
.gate-step code {
	font-family: var(--font-mono); font-size: .8rem; color: var(--accent-soft);
	background: rgba(20,184,166,.08); padding: 1px 6px; border-radius: 4px;
	white-space: nowrap;
}

/* -------- Ζώνη ασφάλειας -------- */
.gate-security {
	margin-top: 26px; padding: 18px 22px;
	display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; justify-content: center;
	background: rgba(20,184,166,.05); border: 1px dashed rgba(20,184,166,.3); border-radius: var(--radius);
}
.gate-security span { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--text-muted); }
.gate-security svg { width: 18px; height: 18px; fill: none; stroke: var(--accent-hover); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* -------- Responsive -------- */
@media (max-width: 1100px) { .gate-grid { grid-template-columns: 1fr 1fr; } .gate-grid .download-card--qr { grid-column: 1 / -1; } }
@media (max-width: 960px) {
	.gate-flow { grid-template-columns: repeat(3, 1fr); row-gap: 34px; padding-top: 34px; }
	.gate-flow::before, .gate-flow::after { display: none; }
	.gate-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.gate-grid, .gate-steps { grid-template-columns: 1fr; }
	.gate-flow { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.gate-flow::after, .gi--pulse, .gi--float { animation: none; }
	.gi svg .st { stroke-dashoffset: 0; animation: none; }
	.gi svg .fl { opacity: 1; }
	.gate-step { opacity: 1; transform: none; }
}

/* r88 (2026-09-15) — Βήμα 1β: επιβεβαίωση κινητού με SMS OTP */
.gate-otp { margin-top: 18px; padding-top: 16px; border-top: 1px dashed rgba(255,255,255,.14); }
.gate-otp[hidden] { display: none !important; }
.gate-form .gate-otp input#x6gOtpCode { font-family: var(--font-mono); font-size: 1.3rem; letter-spacing: .35em; text-align: center; text-transform: none; }
.gate-otp__row { display: flex; gap: 10px; flex-wrap: wrap; }
.gate-form .gate-otp__row .btn { flex: 1 1 180px; margin-top: 12px; }
.gate-form .gate-otp__row .btn--ghost[disabled] { opacity: .5; cursor: default; }