/**
 * GiftKida Instant Pre-Upload — Progress bar & UI styles
 *
 * Companion styles for gk-pre-upload.js
 * Loaded as a separate stylesheet by class-themecomplete-epo-scripts.php
 */

/* ─── Progress widget container ─────────────────────────────────────────── */
.gk-uprog {
	display:        none;
	margin:         10px 0 4px;
	padding:        12px 14px;
	border-radius:  9px;
	border:         1.5px solid transparent;
	font-size:      13px;
	font-family:    inherit;
	line-height:    1.4;
	box-sizing:     border-box;
}

.gk-uprog.s-uploading {
	display:      block;
	border-color: #2271b1;
	background:   #f0f6fc;
}
.gk-uprog.s-done {
	display:      block;
	border-color: #00a32a;
	background:   #f0fff4;
}
.gk-uprog.s-error {
	display:      block;
	border-color: #d63638;
	background:   #fff0f0;
}

/* ─── File name row ─────────────────────────────────────────────────────── */
.gk-uprog__name {
	font-weight:   600;
	color:         #1d2327;
	margin-bottom: 6px;
	overflow:      hidden;
	text-overflow: ellipsis;
	white-space:   nowrap;
	max-width:     100%;
}

/* ─── Bar + percentage row ──────────────────────────────────────────────── */
.gk-uprog__row {
	display:       flex;
	align-items:   center;
	gap:           9px;
	margin-bottom: 5px;
}

/* Track (background) */
.gk-uprog__track {
	flex:          1;
	height:        8px;
	background:    #d0d5dd;
	border-radius: 10px;
	overflow:      hidden;
	box-shadow:    inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Animated fill */
.gk-uprog__fill {
	height:        100%;
	width:         0%;
	border-radius: 10px;
	background:    linear-gradient(90deg, #2271b1 0%, #0ea5e9 100%);
	transition:    width 0.2s ease-out;
}

.s-done  .gk-uprog__fill { background: #00a32a; width: 100% !important; }
.s-error .gk-uprog__fill { background: #d63638; }

/* Percentage label */
.gk-uprog__pct {
	min-width:   44px;
	text-align:  right;
	font-size:   12px;
	font-weight: 700;
	color:       #2271b1;
	flex-shrink: 0;
}
.s-done  .gk-uprog__pct { color: #00a32a; }
.s-error .gk-uprog__pct { color: #d63638; }

/* ─── Status message ────────────────────────────────────────────────────── */
.gk-uprog__msg {
	font-size: 12px;
	color:     #646970;
}
.s-uploading .gk-uprog__msg { color: #2271b1; }
.s-done      .gk-uprog__msg { color: #00a32a; font-weight: 600; }
.s-error     .gk-uprog__msg { color: #d63638; font-weight: 500; }

/* ─── Retry button (visible only on error) ──────────────────────────────── */
.gk-uprog__retry {
	display:       none;
	margin-top:    6px;
	padding:       4px 12px;
	font-size:     12px;
	cursor:        pointer;
	border:        1px solid #d63638;
	border-radius: 4px;
	background:    #fff;
	color:         #d63638;
	font-family:   inherit;
	line-height:   1.5;
}
.s-error .gk-uprog__retry    { display: inline-block; }
.gk-uprog__retry:hover        { background: #d63638; color: #fff; }
.gk-uprog__retry:focus        { outline: 2px solid #d63638; outline-offset: 1px; }

/* ─── Add-to-Cart lock overlay ──────────────────────────────────────────── */
.gk-cart-locked .single_add_to_cart_button,
.gk-cart-locked button[type="submit"].cart,
.gk-cart-locked input[type="submit"].cart {
	pointer-events: none !important;
	opacity:        0.5;
	cursor:         not-allowed !important;
}

.gk-cart-locked .single_add_to_cart_button::after,
.gk-cart-locked button[type="submit"].cart::after {
	content:     " (uploading photo\2026)";
	font-size:   0.82em;
	font-weight: normal;
	opacity:     0.9;
}

/* ─── Spinner ───────────────────────────────────────────────────────────── */
@keyframes gk-spin {
	to { transform: rotate(360deg); }
}

.gk-spin {
	display:          inline-block;
	width:            12px;
	height:           12px;
	border:           2px solid rgba(34, 113, 177, 0.25);
	border-top-color: #2271b1;
	border-radius:    50%;
	animation:        gk-spin 0.7s linear infinite;
	vertical-align:   middle;
	margin-right:     5px;
}