/**
 * RaytaHost Photocard Maker — Download Page (modern, standalone)
 */

/* ------------------------------------------------------------------ Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ------------------------------------------------------------------ Root tokens */
:root {
	--rpc-bg:          #0d0f14;
	--rpc-surface:     #161a23;
	--rpc-surface-2:   #1e2330;
	--rpc-border:      rgba(255,255,255,0.07);
	--rpc-accent:      #6c63ff;
	--rpc-accent-h:    #8b85ff;
	--rpc-accent-glow: rgba(108,99,255,0.35);
	--rpc-text:        #e8eaf0;
	--rpc-text-muted:  #7c8497;
	--rpc-text-dim:    #4a5068;
	--rpc-success:     #34d399;
	--rpc-category:    #f59e0b;
	--rpc-radius:      12px;
	--rpc-radius-sm:   8px;
	--rpc-radius-lg:   20px;
	--rpc-header-h:    56px;
	--rpc-controls-w:  300px;
	--rpc-transition:  0.2s cubic-bezier(0.4,0,0.2,1);
}

/* ------------------------------------------------------------------ Base */
html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body.raytahost-pc-download-body {
	background: var(--rpc-bg);
	color: var(--rpc-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Inter", "Helvetica Neue", Arial, sans-serif;
	line-height: 1.5;
	min-height: 100vh;
	overflow-x: hidden;
}

/* ------------------------------------------------------------------ Header */
.rpc-dl-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: var(--rpc-header-h);
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 20px;
	background: rgba(13,15,20,0.85);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--rpc-border);
	z-index: 100;
}

.rpc-dl-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--rpc-text-muted);
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	border-radius: var(--rpc-radius-sm);
	padding: 6px 10px;
	transition: color var(--rpc-transition), background var(--rpc-transition);
	white-space: nowrap;
}

.rpc-dl-back:hover {
	color: var(--rpc-text);
	background: var(--rpc-surface-2);
}

.rpc-dl-back svg { width: 16px; height: 16px; flex-shrink: 0; }

.rpc-dl-header-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--rpc-text-muted);
	min-width: 0;
	overflow: hidden;
}

.rpc-dl-site {
	font-weight: 600;
	color: var(--rpc-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 180px;
}

.rpc-dl-sep { color: var(--rpc-text-dim); }
.rpc-dl-header-spacer { flex: 1; }

/* ------------------------------------------------------------------ Main */
.rpc-dl-main {
	padding-top: calc( var(--rpc-header-h) + 28px );
	padding-bottom: 60px;
	min-height: 100vh;
}

/* ------------------------------------------------------------------ Meta bar */
.rpc-dl-meta-bar {
	max-width: 1100px;
	margin: 0 auto 28px;
	padding: 0 24px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.rpc-dl-meta-category {
	display: inline-block;
	background: rgba(245,158,11,0.15);
	color: var(--rpc-category);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 100px;
	padding: 3px 10px;
	margin-bottom: 8px;
	border: 1px solid rgba(245,158,11,0.25);
}

.rpc-dl-meta-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--rpc-text);
	line-height: 1.3;
	max-width: 600px;
}

.rpc-dl-meta-date {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--rpc-text-muted);
	margin-top: 8px;
}

.rpc-dl-meta-date svg { width: 13px; height: 13px; }

.rpc-dl-meta-locked-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 500;
	color: var(--rpc-text-dim);
	background: var(--rpc-surface);
	border: 1px solid var(--rpc-border);
	border-radius: 100px;
	padding: 6px 14px;
	white-space: nowrap;
	flex-shrink: 0;
}

.rpc-dl-meta-locked-badge svg { width: 13px; height: 13px; color: var(--rpc-text-dim); }

/* ------------------------------------------------------------------ Content layout */
.rpc-dl-content {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: 1fr var(--rpc-controls-w);
	gap: 28px;
	align-items: start;
}

/* ------------------------------------------------------------------ Canvas area */
.rpc-dl-canvas-wrap {
	background: var(--rpc-surface);
	border: 1px solid var(--rpc-border);
	border-radius: var(--rpc-radius-lg);
	padding: 24px;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

/*
 * The scaler's width/height are set inline (in px) by JS to the exact
 * *scaled* size of the card. It must NOT be a flex/centering container
 * itself: a `transform: scale()` on the canvas inside it does not shrink
 * the canvas's layout box, so centering that oversized box would crop
 * the card instead of showing it shrunk to fit. Centering happens one
 * level up, on .rpc-dl-canvas-wrap, against the scaler's correct box.
 */
.rpc-dl-canvas-scaler {
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
}

.rpc-dl-canvas {
	display: block;
	transform-origin: top left;
	box-shadow:
		0 0 0 1px rgba(255,255,255,0.04),
		0 8px 48px rgba(0,0,0,0.6),
		0 0 80px rgba(108,99,255,0.08);
	border-radius: 4px;
}

.rpc-dl-layer { pointer-events: none; }
.rpc-dl-text  { pointer-events: none; }

/* ------------------------------------------------------------------ Controls panel */
.rpc-dl-controls {
	position: sticky;
	top: calc( var(--rpc-header-h) + 20px );
}

.rpc-dl-controls-inner {
	background: var(--rpc-surface);
	border: 1px solid var(--rpc-border);
	border-radius: var(--rpc-radius-lg);
	overflow: hidden;
}

/* ------------------------------------------------------------------ Download CTA */
.rpc-dl-cta-block {
	padding: 24px 20px 20px;
}

.rpc-dl-btn-download {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 14px 20px;
	background: linear-gradient(135deg, var(--rpc-accent) 0%, #8b6ef5 100%);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	border: none;
	border-radius: var(--rpc-radius);
	cursor: pointer;
	font-family: inherit;
	letter-spacing: 0.01em;
	transition: transform var(--rpc-transition), box-shadow var(--rpc-transition), opacity var(--rpc-transition);
	box-shadow: 0 4px 24px var(--rpc-accent-glow);
	position: relative;
	overflow: hidden;
}

.rpc-dl-btn-download::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 60%);
	pointer-events: none;
}

.rpc-dl-btn-download:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 8px 36px var(--rpc-accent-glow);
}

.rpc-dl-btn-download:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: 0 2px 12px var(--rpc-accent-glow);
}

.rpc-dl-btn-download:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

.rpc-dl-btn-download svg { width: 18px; height: 18px; flex-shrink: 0; }

.rpc-dl-cta-hint {
	text-align: center;
	font-size: 11px;
	color: var(--rpc-text-dim);
	margin-top: 10px;
	letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------ Divider */
.rpc-dl-divider {
	height: 1px;
	background: var(--rpc-border);
	margin: 0;
}

/* ------------------------------------------------------------------ Option blocks (controls) */
.rpc-dl-option-block {
	padding: 16px 20px;
}

.rpc-dl-option-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--rpc-text-muted);
	margin-bottom: 10px;
}

/* ------------------------------------------------------------------ Font size stepper */
.rpc-dl-stepper-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.rpc-dl-stepper-btn {
	width: 32px;
	height: 32px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--rpc-surface-2);
	border: 1px solid var(--rpc-border);
	border-radius: var(--rpc-radius-sm);
	color: var(--rpc-text);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background var(--rpc-transition), border-color var(--rpc-transition);
	flex-shrink: 0;
	font-family: inherit;
}

.rpc-dl-stepper-btn:hover {
	background: var(--rpc-accent);
	border-color: var(--rpc-accent);
}

.rpc-dl-font-size-input {
	flex: 1;
	min-width: 0;
	background: var(--rpc-surface-2);
	border: 1px solid var(--rpc-border);
	border-radius: var(--rpc-radius-sm);
	color: var(--rpc-text);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	padding: 6px 8px;
	outline: none;
	font-family: inherit;
}

.rpc-dl-font-size-input:focus {
	border-color: var(--rpc-accent);
	box-shadow: 0 0 0 2px var(--rpc-accent-glow);
}

/* ------------------------------------------------------------------ Font family select */
.rpc-dl-select {
	width: 100%;
	background: var(--rpc-surface-2);
	border: 1px solid var(--rpc-border);
	border-radius: var(--rpc-radius-sm);
	color: var(--rpc-text);
	font-size: 13px;
	padding: 8px 10px;
	cursor: pointer;
	outline: none;
	font-family: inherit;
	appearance: auto;
}

.rpc-dl-select:focus {
	border-color: var(--rpc-accent);
	box-shadow: 0 0 0 2px var(--rpc-accent-glow);
}

/* ------------------------------------------------------------------ Color swatches */
.rpc-dl-color-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.rpc-dl-swatch {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 2px solid transparent;
	cursor: pointer;
	padding: 0;
	outline: none;
	transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
	flex-shrink: 0;
}

.rpc-dl-swatch:hover {
	transform: scale(1.2);
	box-shadow: 0 0 0 3px var(--rpc-accent-glow);
}

.rpc-dl-swatch-active {
	border-color: var(--rpc-accent) !important;
	box-shadow: 0 0 0 3px var(--rpc-accent-glow) !important;
	transform: scale(1.15);
}

.rpc-dl-swatch-custom-wrap {
	position: relative;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
}

.rpc-dl-swatch-custom {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 2px dashed var(--rpc-border);
	cursor: pointer;
	padding: 0;
	background: transparent;
	outline: none;
	overflow: hidden;
	display: block;
}

.rpc-dl-swatch-custom:hover {
	border-color: var(--rpc-accent);
}

/* ------------------------------------------------------------------ Toggle switch (Bangla date) */
.rpc-dl-toggle-row {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	user-select: none;
}

.rpc-dl-toggle-row input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.rpc-dl-toggle-switch {
	position: relative;
	width: 38px;
	height: 22px;
	background: var(--rpc-surface-2);
	border: 1px solid var(--rpc-border);
	border-radius: 100px;
	flex-shrink: 0;
	transition: background var(--rpc-transition), border-color var(--rpc-transition);
}

.rpc-dl-toggle-switch::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	background: var(--rpc-text-dim);
	border-radius: 50%;
	transition: transform 0.2s, background 0.2s;
}

.rpc-dl-toggle-row input:checked ~ .rpc-dl-toggle-switch {
	background: var(--rpc-accent);
	border-color: var(--rpc-accent);
}

.rpc-dl-toggle-row input:checked ~ .rpc-dl-toggle-switch::after {
	transform: translateX(16px);
	background: #fff;
}

.rpc-dl-toggle-label {
	font-size: 13px;
	color: var(--rpc-text-muted);
}

.rpc-dl-toggle-row:has(input:checked) .rpc-dl-toggle-label {
	color: var(--rpc-text);
}

/* ------------------------------------------------------------------ Progress overlay */
.rpc-dl-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.7);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;
}

.rpc-dl-overlay[hidden] { display: none; }

.rpc-dl-overlay-box {
	background: var(--rpc-surface);
	border: 1px solid var(--rpc-border);
	border-radius: var(--rpc-radius-lg);
	padding: 40px 48px;
	text-align: center;
	box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}

.rpc-dl-overlay-box p {
	font-size: 15px;
	color: var(--rpc-text-muted);
	margin-top: 20px;
}

/* ------------------------------------------------------------------ Spinner */
.rpc-dl-spinner {
	width: 44px;
	height: 44px;
	border: 3px solid var(--rpc-surface-2);
	border-top-color: var(--rpc-accent);
	border-radius: 50%;
	animation: rpc-spin 0.7s linear infinite;
	margin: 0 auto;
}

@keyframes rpc-spin {
	to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------ Entrance animations */
.rpc-dl-meta-bar   { animation: rpc-fade-up 0.4s ease both; }
.rpc-dl-content    { animation: rpc-fade-up 0.5s 0.06s ease both; }

@keyframes rpc-fade-up {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------------ Responsive */
@media ( max-width: 860px ) {
	.rpc-dl-content {
		grid-template-columns: 1fr;
	}

	.rpc-dl-controls {
		position: static;
	}
}

@media ( max-width: 520px ) {
	.rpc-dl-header { padding: 0 12px; gap: 8px; }
	.rpc-dl-main   { padding-top: calc( var(--rpc-header-h) + 16px ); }
	.rpc-dl-meta-bar, .rpc-dl-content { padding: 0 12px; }
	.rpc-dl-meta-title { font-size: 18px; }
	.rpc-dl-site { max-width: 100px; }
}