/* Souper Shop — Frontend Styles v1.2.0 */

:root { --ss-accent: #ff6b35; --ss-radius: 8px; }

/* Honeypot */
.ss-hp-field { position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none; }

/* Error */
.ss-error { color:#c0392b;font-size:12px;border:1px solid #f5b7b1;background:#fdedec;padding:6px 10px;border-radius:4px; }

/* ── Button base ── */
.ss-btn {
    display:inline-flex;align-items:center;gap:8px;
    padding:12px 24px;border-radius:var(--ss-radius);
    font-family:inherit;font-size:15px;font-weight:600;letter-spacing:.02em;
    cursor:pointer;border:2px solid var(--ss-accent);text-decoration:none;
    transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
    line-height:1;white-space:nowrap;
}
.ss-btn:focus-visible { outline:3px solid var(--ss-accent);outline-offset:3px; }

.ss-btn--solid { background:var(--ss-accent);color:#fff!important; }
.ss-btn--solid:hover { background:color-mix(in srgb,var(--ss-accent) 85%,#000);transform:translateY(-2px);box-shadow:0 6px 20px color-mix(in srgb,var(--ss-accent) 35%,transparent);text-decoration:none; }
.ss-btn--solid:active { transform:translateY(0);box-shadow:none; }

.ss-btn--ghost { background:transparent;color:var(--ss-accent)!important; }
.ss-btn--ghost:hover { background:color-mix(in srgb,var(--ss-accent) 8%,transparent);transform:translateY(-2px);text-decoration:none; }

.ss-btn--sold { display:inline-flex;align-items:center;padding:10px 20px;border-radius:var(--ss-radius);background:#ddd;color:#999;font-size:14px;font-weight:600;border:2px solid #ddd;cursor:default;text-transform:uppercase;letter-spacing:.08em; }

@keyframes ss-wiggle {
    0%   { transform:rotate(0deg) translateY(-2px); }
    25%  { transform:rotate(-3deg) translateY(-2px); }
    50%  { transform:rotate(3deg) translateY(-2px); }
    75%  { transform:rotate(-2deg) translateY(-2px); }
    100% { transform:rotate(0deg) translateY(-2px); }
}
.ss-btn--wiggle:hover { animation:ss-wiggle .4s ease forwards; }

.ss-icon { width:18px;height:18px;flex-shrink:0; }

/* Buy wrap */
.ss-buy-wrap { display:inline-flex;align-items:center;gap:16px;flex-wrap:wrap; }
.ss-price { font-size:20px;font-weight:700;color:#222; }

/* ── Bid wrap ── */
.ss-bid-wrap { max-width:560px; }

/* Top bid display */
.ss-top-bid-display {
    display:flex;align-items:center;gap:10px;
    padding:10px 16px;margin-bottom:12px;
    background:color-mix(in srgb,var(--ss-accent) 8%,#fff);
    border:1.5px solid color-mix(in srgb,var(--ss-accent) 30%,transparent);
    border-radius:var(--ss-radius);
    font-size:14px;
}
.ss-top-bid-display--empty { color:#888;font-style:italic; }
.ss-top-bid-icon { font-size:18px;line-height:1; }
.ss-top-bid-label { display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:#888;font-weight:600; }
.ss-top-bid-value { font-size:18px;font-weight:700;color:var(--ss-accent); }
.ss-bid-count { margin-left:auto;font-size:12px;color:#888;white-space:nowrap; }

/* Bid form */
.ss-bid-form {
    margin-top:14px;background:#fff;
    border:2px solid var(--ss-accent);border-radius:12px;padding:24px;
    animation:ss-slide-in .22s ease;
}
@keyframes ss-slide-in { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

.ss-bid-intro { margin:0 0 18px;color:#555;font-style:italic;line-height:1.6;border-left:3px solid var(--ss-accent);padding-left:12px; }

.ss-form { display:flex;flex-direction:column;gap:14px; }
.ss-field-row { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
@media(max-width:480px){.ss-field-row{grid-template-columns:1fr;}}

.ss-field { display:flex;flex-direction:column;gap:5px; }
.ss-field label { font-size:12px;font-weight:700;color:#333;text-transform:uppercase;letter-spacing:.05em; }
.ss-field label em { font-weight:400;text-transform:none;color:#999;letter-spacing:0;font-size:12px; }
.ss-field label small { font-size:12px;font-weight:400;text-transform:none;color:#888;letter-spacing:0; }

.ss-field input[type="text"],
.ss-field input[type="email"],
.ss-field input[type="number"],
.ss-field textarea {
    padding:10px 14px;border:1.5px solid #ddd;border-radius:6px;
    font-size:15px;font-family:inherit;color:#222;background:#fafafa;
    transition:border-color .15s;width:100%;box-sizing:border-box;
}
.ss-field input:focus,.ss-field textarea:focus { outline:none;border-color:var(--ss-accent);background:#fff; }
.ss-field textarea { resize:vertical;min-height:66px; }

.ss-amount-wrap { display:flex;align-items:stretch; }
.ss-currency { display:flex;align-items:center;padding:0 12px;background:var(--ss-accent);color:#fff;font-weight:700;font-size:15px;border-radius:6px 0 0 6px;border:1.5px solid var(--ss-accent); }
.ss-amount-wrap input[type="number"] { border-radius:0 6px 6px 0;border-left:none;flex:1; }

.ss-form-footer { display:flex;align-items:center;gap:16px;flex-wrap:wrap; }
.ss-form-note { margin:0;font-size:12px;color:#999;line-height:1.5;max-width:220px; }

.ss-form-result { padding:14px 16px;border-radius:6px;font-weight:600;font-size:14px;line-height:1.5; }
.ss-form-result.success { background:#eafaf1;color:#1e8449;border:1.5px solid #a9dfbf; }
.ss-form-result.error   { background:#fdedec;color:#c0392b;border:1.5px solid #f5b7b1; }

@keyframes ss-shake {
    0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)}
}
.ss-shake { animation:ss-shake .4s ease; }