/* ============================================================
   Live Auction Display  v3.0.0 — live-auction-display.css
   ============================================================ */

/* ---------- Design Tokens ---------- */
.live-auction-display {
	--lad-primary:        #c0392b;
	--lad-header-bg:      #1a1a2e;
	--lad-winner-color:   #27ae60;
	--lad-font:           system-ui, sans-serif;

	--lad-surface:        #ffffff;
	--lad-surface-2:      #f7f8fa;
	--lad-border:         #e2e4e8;
	--lad-text:           #1a1a2e;
	--lad-text-muted:     #6b7280;
	--lad-radius:         10px;
	--lad-shadow:         0 2px 20px rgba(0,0,0,.10);
	--lad-ease:           0.2s ease;

	font-family:   var(--lad-font);
	color:         var(--lad-text);
	box-sizing:    border-box;
	background:    var(--lad-surface);
	border-radius: var(--lad-radius);
	box-shadow:    var(--lad-shadow);
	overflow:      hidden;
	max-width:     820px;
	margin:        0 auto;
}

.live-auction-display *, .live-auction-display *::before, .live-auction-display *::after {
	box-sizing: inherit;
}

/* ============================================================
   Result Banner
   ============================================================ */
.lad-result-banner {
	display:     flex;
	align-items: center;
	gap:         16px;
	padding:     20px 28px;
	font-size:   1rem;
	animation:   lad-slidein .4s ease;
}

.lad-result-banner--win  { background: var(--lad-winner-color); color: #fff; }
.lad-result-banner--lose { background: #f0f0f0; color: var(--lad-text); border-bottom: 1px solid var(--lad-border); }
.lad-result-banner--neutral { background: #f0f0f0; color: var(--lad-text-muted); border-bottom: 1px solid var(--lad-border); }

.lad-result-banner__icon { font-size: 2.2rem; flex-shrink: 0; line-height: 1; }

.lad-result-banner__text { display: flex; flex-direction: column; gap: 3px; }
.lad-result-banner__text strong { font-size: 1.2rem; font-weight: 800; }
.lad-result-banner__text span   { font-size: .9rem; opacity: .85; }

@keyframes lad-slidein {
	from { transform: translateY(-12px); opacity: 0; }
	to   { transform: translateY(0);     opacity: 1; }
}

/* ============================================================
   Header
   ============================================================ */
.lad-header {
	background: var(--lad-header-bg);
	color:      #fff;
	padding:    28px 32px 22px;
}

.lad-header__product {
	display:       flex;
	gap:           20px;
	align-items:   flex-start;
	margin-bottom: 20px;
}

.lad-header__img-wrap {
	width:           88px;
	height:          88px;
	border-radius:   8px;
	overflow:        hidden;
	flex-shrink:     0;
	background:      rgba(255,255,255,.1);
	display:         flex;
	align-items:     center;
	justify-content: center;
	position:        relative;
}

.lad-header__img {
	width: 100%; height: 100%;
	object-fit: cover;
	position: absolute; inset: 0;
}

.lad-header__img-ph { font-size: 2.2rem; }

.lad-header__info  { flex: 1; min-width: 0; }

.lad-header__name {
	font-size: 1.45rem; font-weight: 800;
	margin: 0 0 6px; line-height: 1.2;
}

.lad-header__desc {
	font-size: .9rem; opacity: .72;
	margin: 0 0 8px; line-height: 1.5;
}

.lad-header__starting {
	font-size: .87rem; opacity: .82;
}

/* ---------- Status Bar ---------- */
.lad-status-bar {
	display:         flex;
	gap:             16px;
	background:      rgba(0,0,0,.22);
	border-radius:   8px;
	padding:         14px 20px;
	align-items:     center;
	justify-content: space-between;
}

.lad-current-bid, .lad-timer { display: flex; flex-direction: column; gap: 3px; }
.lad-timer { align-items: flex-end; }

.lad-current-bid__label,
.lad-timer__label {
	font-size: .7rem; text-transform: uppercase;
	letter-spacing: .1em; opacity: .6;
}

.lad-current-bid__value {
	font-size: 2.1rem; font-weight: 900;
	color: var(--lad-primary); line-height: 1;
}

.lad-timer__value {
	font-size: 2.1rem; font-weight: 900;
	font-variant-numeric: tabular-nums; line-height: 1;
}

.lad-timer__value--urgent {
	color: #e74c3c;
	animation: lad-blink .7s step-start infinite;
}

@keyframes lad-blink { 50% { opacity: .3; } }

/* ============================================================
   Body
   ============================================================ */
.lad-body { padding: 28px 32px; }
.lad-main { max-width: 520px; margin: 0 auto; }

/* ============================================================
   Guest Panel
   ============================================================ */
.lad-guest-panel {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	text-align:     center;
	gap:            12px;
	padding:        16px 0 8px;
}

.lad-guest-panel__icon { font-size: 2.8rem; }

.lad-guest-panel__title {
	font-size: 1.2rem; font-weight: 700; margin: 0;
}

.lad-guest-panel__body {
	font-size: .93rem; color: var(--lad-text-muted);
	margin: 0; line-height: 1.55;
}

/* ============================================================
   Bid Form Panel
   ============================================================ */
.lad-form-panel { display: flex; flex-direction: column; gap: 16px; }

.lad-form-panel__greeting {
	font-size: .9rem; color: var(--lad-text-muted);
	padding-bottom: 4px;
	border-bottom: 1px solid var(--lad-border);
}

/* ---------- Bid Status ---------- */
.lad-bid-status {
	border-radius: 8px;
	padding:       12px 14px;
	font-size:     .88rem;
	line-height:   1.5;
	font-weight:   600;
}

.lad-bid-status--leading {
	background: #f0fdf4;
	border:     1px solid #86efac;
	color:      #15803d;
}

.lad-bid-status--outbid {
	background: #fffbeb;
	border:     1px solid #fcd34d;
	color:      #92400e;
}

/* ---------- Form ---------- */
.lad-form { display: flex; flex-direction: column; gap: 10px; }

.lad-label {
	font-size: .78rem; font-weight: 700;
	color: var(--lad-text-muted);
	text-transform: uppercase; letter-spacing: .06em;
}

.lad-input {
	width: 100%;
	padding: 11px 13px;
	border: 1.5px solid var(--lad-border);
	border-radius: 7px;
	font-size: .95rem;
	font-family: inherit;
	background: var(--lad-surface);
	color: var(--lad-text);
	transition: border-color var(--lad-ease), box-shadow var(--lad-ease);
	outline: none;
}

.lad-input:focus {
	border-color: var(--lad-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--lad-primary) 18%, transparent);
}

.lad-input:disabled { opacity: .45; cursor: not-allowed; }

.lad-input-row { display: flex; align-items: stretch; }

.lad-input-prefix {
	padding: 11px 10px 11px 13px;
	background: var(--lad-surface);
	border: 1.5px solid var(--lad-border);
	border-right: none;
	border-radius: 7px 0 0 7px;
	font-size: 1rem;
	color: var(--lad-text-muted);
	line-height: 1.45;
}

.lad-input-row .lad-input { border-radius: 0 7px 7px 0; }

.lad-form__error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #dc2626;
	border-radius: 7px;
	padding: 9px 13px;
	font-size: .85rem;
	line-height: 1.45;
}

/* ============================================================
   Buttons
   ============================================================ */
.lad-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: none;
	border-radius: 8px;
	font-family: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: filter var(--lad-ease), opacity var(--lad-ease), transform .1s;
	text-decoration: none;
}

.lad-btn:active:not(:disabled) { transform: scale(.98); }
.lad-btn:disabled               { opacity: .45; cursor: not-allowed; pointer-events: none; }

.lad-btn--submit {
	background: var(--lad-primary);
	color: #fff;
	padding: 13px 20px;
	font-size: .95rem;
	width: 100%;
}

.lad-btn--submit:hover:not(:disabled) { filter: brightness(1.1); }

.lad-btn--login {
	background: var(--lad-primary);
	color: #fff !important;
	padding: 13px 28px;
	font-size: .95rem;
	margin-top: 4px;
}

.lad-btn--login:hover { filter: brightness(1.1); }

.lad-btn--cart {
	background: var(--lad-winner-color);
	color: #fff;
	padding: 15px 24px;
	font-size: 1.05rem;
	width: 100%;
}

.lad-btn--cart:hover:not(:disabled) { filter: brightness(1.08); }

/* ============================================================
   Ended Panels
   ============================================================ */
.lad-ended-panel {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 8px 0;
}

.lad-ended-panel__title {
	font-size: 1.15rem;
	font-weight: 800;
	margin: 0;
}

.lad-ended-panel--win .lad-ended-panel__title  { color: var(--lad-winner-color); }
.lad-ended-panel--lose .lad-ended-panel__title { color: var(--lad-text-muted); }

.lad-ended-panel__body {
	font-size: .93rem;
	color: var(--lad-text-muted);
	margin: 0;
	line-height: 1.55;
}

.lad-ended-panel__body strong { color: var(--lad-text); }

.lad-ended-panel__error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #dc2626;
	border-radius: 7px;
	padding: 9px 13px;
	font-size: .85rem;
}

.lad-ended-panel__note {
	font-size: .78rem;
	color: var(--lad-text-muted);
	margin: 0;
	line-height: 1.5;
}

/* ============================================================
   Notices
   ============================================================ */
.lad-notice {
	border-radius: 8px;
	padding: 14px 16px;
	font-size: .9rem;
	line-height: 1.5;
}

.lad-notice--warn  { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }
.lad-notice--error { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 600px) {
	.lad-header { padding: 20px 20px 18px; }
	.lad-body   { padding: 22px 20px; }

	.lad-header__product { flex-direction: column; }

	.lad-current-bid__value,
	.lad-timer__value { font-size: 1.6rem; }

	.lad-result-banner { padding: 16px 20px; }
}