/* =========================================
   SKELETON SYSTEM (new, base building blocks)
   Will be extended for catalog, product page, reviews, blog.
   ========================================= */
@keyframes skeleton-pulse {
    0% { opacity: 0.55; }
    50% { opacity: 1; }
    100% { opacity: 0.55; }
}

.skeleton {
    background: linear-gradient(90deg, #141414 0%, #1c1c1c 50%, #141414 100%);
    border-radius: 4px;
    animation: skeleton-pulse 1.4s ease-in-out infinite;
}

.skeleton-text { height: 12px; width: 100%; margin-bottom: 8px; border-radius: 3px; }
.skeleton-image { width: 100%; aspect-ratio: 1 / 1; border-radius: 4px 4px 0 0; }

.skeleton-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.skeleton-card .card-info { gap: 6px; }

/* =========================================
   LOADING / EMPTY / ERROR STATES (new, generic)
   ========================================= */
.state-block {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    text-align: center;
    color: var(--text-secondary);
}
.state-block i { font-size: 28px; color: var(--accent-gold); }
.state-block.state-error i { color: #ef5350; }
.state-block .state-title { color: #fff; font-size: 15px; font-weight: 500; }
.state-block .state-desc { font-size: 13px; color: #777; }
.state-action-btn {
    margin-top: 6px;
    background: transparent;
    border: 1px solid #333;
    color: #fff;
    padding: 10px 22px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.3s;
}
.state-action-btn:hover { background: var(--accent-gold); color: #000; border-color: var(--accent-gold); }

/* =========================================
   TOAST / NOTIFICATIONS (new, reusable)
   ========================================= */
.toast-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9000;
    pointer-events: none;
}
.toast {
    background: #151515;
    border: 1px solid #333;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    opacity: 0;
    transform: translateY(10px);
    transition: 0.3s ease;
}
.toast--visible { opacity: 1; transform: translateY(0); }
.toast--success { border-color: var(--accent-gold); }
.toast--error { border-color: #ef5350; }

/* =========================================
   VERIFIED CUSTOMER BADGE ("Поціновувач чаю")
   Small seal + checkmark next to a customer's name, wherever a real
   customer's name is shown publicly (account page, review cards, home
   review teaser) — see js/components/verified-badge.js. Hover shows the
   tooltip on desktop (pure CSS); touch devices toggle it on tap via
   .vc-open, added by initVerifiedBadgeTaps().
   ========================================= */
.verified-check {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: default;
    outline: none;
    vertical-align: middle;
    margin-left: 8px;
    top: -2.5px;
}
/* Seal: two overlapping rounded squares, 45deg apart, forming an
   8-point scalloped sunburst — matches the classic "verified" badge
   shape (e.g. X/Twitter). Gold gradient matches the pagination/order-
   total accent already used elsewhere on the site. The markup still
   carries a third <i class="vc-c"> for backwards compatibility; it is
   simply hidden here rather than touching every call site. */
.verified-check .vc-seal { position: absolute; inset: 1px; }
.verified-check .vc-seal i {
    position: absolute; inset: 0; border-radius: 10%;
    background: linear-gradient(145deg, var(--accent-gold-hover), var(--accent-gold));
}
.verified-check .vc-seal .vc-b { transform: rotate(45deg); }
.verified-check .vc-seal .vc-c { display: none; }
/* Checkmark: inline SVG using the standard wide-checkmark path
   (M5 13l4 4L19 7 in a 24x24 viewbox) instead of a border-trick box
   rotated 45deg — that trick always yields a *square* bounding box
   after rotation, regardless of the pre-rotation rectangle's aspect
   ratio, so it could never reproduce a flatter, wider-than-tall
   checkmark shape (verified against a pixel measurement of the X/
   Twitter reference badge: check ≈0.57 seal-width / ≈0.40 seal-height).
   Sized down slightly further per final review for a more compact,
   less bulky look inside the smaller 8-point seal. */
.verified-check .vc-tick {
    position: absolute; top: 50%; left: 50%; width: 9px; height: 6.4px;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0.4px 0.6px 0 rgba(120, 80, 20, 0.5));
    z-index: 2;
}
.verified-check .vc-tick svg { width: 100%; height: 100%; display: block; }
.verified-tip {
    position: absolute; bottom: calc(100% + 7px); left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #151515; border: 1px solid #2a2a2a; color: #fff;
    font-size: 11px; font-weight: 500; letter-spacing: 0.2px;
    padding: 5px 10px; border-radius: 6px; white-space: nowrap;
    pointer-events: none; opacity: 0; visibility: hidden; z-index: 20;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.verified-check:hover .verified-tip,
.verified-check:focus .verified-tip,
.verified-check.vc-open .verified-tip {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}