/* =============================================
   WooSwipe – Frontend Styles
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');

.woo-swipe-app {
    --ws-card-bg:    #ffffff;
    --ws-text:       #1a1a1a;
    --ws-muted:      rgba(0,0,0,.45);
    --ws-like:       #ff2d78;
    --ws-nope:       #4a9eff;
    --ws-link:       #1a1a1a;
    --ws-radius:     20px;
    --ws-shadow:     0 16px 48px rgba(0,0,0,.14);

    font-family: 'DM Sans', sans-serif;
    background: transparent;
    padding: 24px 0 16px;
    max-width: 420px;
    margin: 0 auto;
    user-select: none;
}

/* Dark theme (opt-in via theme="dark") */
.woo-swipe-app.theme-dark {
    --ws-card-bg:    #1a1a1a;
    --ws-text:       #f0f0f0;
    --ws-muted:      rgba(255,255,255,.45);
    --ws-link:       #f5f5f5;
    --ws-shadow:     0 32px 80px rgba(0,0,0,.6);
}

/* ---- Header ---- */
.woo-swipe-header { text-align: center; margin-bottom: 24px; }

.woo-swipe-title {
    font-family: 'Syne', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--ws-text);
    margin: 0 0 4px;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.woo-swipe-subtitle {
    color: var(--ws-muted);
    font-size: .85rem;
    margin: 0 0 16px;
    font-weight: 300;
}

.woo-swipe-counters {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.woo-swipe-count-likes,
.woo-swipe-count-nopes {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: .82rem;
    font-weight: 500;
    background: rgba(255,255,255,.06);
    color: var(--ws-muted);
    transition: all .3s;
}

.woo-swipe-count-likes .num { color: var(--ws-like); font-weight: 700; }
.woo-swipe-count-nopes .num { color: var(--ws-nope); font-weight: 700; }

/* ---- Stage ---- */
.woo-swipe-stage {
    position: relative;
    height: 460px;
    margin-bottom: 20px;
    perspective: 1000px;
}

/* ---- Card ---- */
.woo-swipe-card {
    position: absolute;
    inset: 0;
    background: var(--ws-card-bg);
    border-radius: var(--ws-radius);
    box-shadow: var(--ws-shadow);
    overflow: hidden;
    cursor: grab;
    transition: transform .08s ease-out, box-shadow .2s;
    touch-action: none;
    will-change: transform;
}

.woo-swipe-card:active { cursor: grabbing; }

.woo-swipe-card.is-back {
    transform: scale(.94) translateY(14px);
    z-index: 0;
    pointer-events: none;
}

.woo-swipe-card.is-front {
    z-index: 1;
    transform: scale(1) translateY(0);
}

/* Swipe stamps */
.woo-swipe-stamp {
    position: absolute;
    top: 24px;
    padding: 8px 20px;
    border-radius: 8px;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: .06em;
    opacity: 0;
    pointer-events: none;
    transition: opacity .1s;
    z-index: 10;
    border: 3px solid;
    transform: rotate(-18deg);
}

.woo-swipe-stamp.stamp-like {
    left: 20px;
    color: var(--ws-like);
    border-color: var(--ws-like);
    background: rgba(255,45,120,.1);
    transform: rotate(-18deg);
}

.woo-swipe-stamp.stamp-nope {
    right: 20px;
    color: var(--ws-nope);
    border-color: var(--ws-nope);
    background: rgba(74,158,255,.1);
    transform: rotate(18deg);
}

/* Product image */
.woo-swipe-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    background: #111;
    transition: opacity .3s;
}

.woo-swipe-img-dots {
    display: flex;
    justify-content: center;
    gap: 5px;
    position: absolute;
    top: 280px;
    left: 0; right: 0;
    z-index: 2;
}

.ws-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.4);
    transition: background .2s;
    cursor: pointer;
}
.ws-dot.active { background: #fff; }

/* Product info */
.woo-swipe-info {
    padding: 16px 18px 18px;
}

.woo-swipe-product-name {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--ws-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Flyout label during drag */
.woo-swipe-card.dragging-right .stamp-like { opacity: 1; }
.woo-swipe-card.dragging-left .stamp-nope  { opacity: 1; }

/* ---- Actions ---- */
.woo-swipe-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 12px;
}

.woo-swipe-btn {
    border: none;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, background .2s;
    flex-shrink: 0;
}

.woo-swipe-btn:hover  { transform: scale(1.12); }
.woo-swipe-btn:active { transform: scale(.94); }

.woo-swipe-btn svg { display: block; }

.woo-swipe-btn-nope {
    width: 72px; height: 72px;
    background: rgba(74,158,255,.12);
    color: var(--ws-nope);
    box-shadow: 0 6px 20px rgba(74,158,255,.18);
}
.woo-swipe-btn-nope svg { width: 36px; height: 36px; }
.woo-swipe-btn-nope:hover { background: rgba(74,158,255,.22); box-shadow: 0 8px 28px rgba(74,158,255,.3); }

.woo-swipe-btn-like {
    width: 72px; height: 72px;
    background: var(--ws-like);
    color: #fff;
    box-shadow: 0 8px 28px rgba(255,45,120,.45);
}
.woo-swipe-btn-like svg { width: 36px; height: 36px; }
.woo-swipe-btn-like:hover { background: #ff1a6a; box-shadow: 0 10px 36px rgba(255,45,120,.6); }

.woo-swipe-btn-link {
    border-radius: 50px;
    padding: 0 22px;
    height: 46px;
    background: #f0f0f0;
    color: #1a1a1a;
    font-family: 'DM Sans', sans-serif;
    font-size: .9rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    white-space: nowrap;
    letter-spacing: .01em;
}
.woo-swipe-btn-link:hover { background: #e4e4e4; box-shadow: 0 6px 16px rgba(0,0,0,.15); }

/* ---- Hints ---- */
.woo-swipe-hints {
    display: flex;
    justify-content: space-between;
    padding: 0 8px;
    font-size: 16px;
    color: var(--ws-muted);
    letter-spacing: .01em;
    font-weight: 500;
}

.hint-nope { color: var(--ws-nope); }
.hint-like { color: var(--ws-like); }

/* ---- Loader ---- */
.woo-swipe-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--ws-muted);
    gap: 16px;
}

.woo-swipe-spinner {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.1);
    border-top-color: var(--ws-like);
    animation: ws-spin .8s linear infinite;
}

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

/* ---- Empty ---- */
.woo-swipe-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--ws-text);
    gap: 12px;
    text-align: center;
    padding: 24px;
}

.woo-swipe-empty-icon { font-size: 3rem; }

.woo-swipe-btn-restart {
    margin-top: 8px;
    padding: 10px 28px;
    background: var(--ws-like);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-family: 'DM Sans', sans-serif;
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform .15s, box-shadow .2s;
    box-shadow: 0 6px 20px rgba(255,45,120,.35);
}
.woo-swipe-btn-restart:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(255,45,120,.5); }

/* ---- Fly-out animation ---- */
.woo-swipe-card.flying-right {
    animation: ws-fly-right .45s cubic-bezier(.55,.06,.68,.19) forwards;
}
.woo-swipe-card.flying-left {
    animation: ws-fly-left .45s cubic-bezier(.55,.06,.68,.19) forwards;
}

@keyframes ws-fly-right {
    to { transform: translateX(120%) rotate(20deg); opacity: 0; }
}
@keyframes ws-fly-left {
    to { transform: translateX(-120%) rotate(-20deg); opacity: 0; }
}

/* ---- Responsive ---- */
@media (max-width: 480px) {
    .woo-swipe-app { padding: 20px 14px 16px; border-radius: 16px; }
    .woo-swipe-stage { height: 420px; }
    .woo-swipe-img { height: 260px; }
    .woo-swipe-title { font-size: 1.4rem; }
}