/*
--- anyrare_style.css ---
*/

/* 1. โหลดฟอนต์ Sarabun เพื่อให้มั่นใจว่ามีฟอนต์แสดงผลแน่นอน */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@400;700;800;900&display=swap');

/* =========================
   WIDGET HEADER (ป้ายชื่อ)
========================= */
.anyrare-widget-header {
    width: 100%;
    text-align: center;
    margin-top: 10px;
}

/* ป้ายชื่อ */
.anyrare-widget-title {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    color: black;
    background: #d3a24a;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    border-radius: 2px;
    padding: 6px 14px;

    transform: skewX(-15deg);

    text-shadow:
        0 0 8px rgba(255,255,255,1),
        0 0 12px rgba(255,255,255,0.8),
        0 0 16px rgba(255,255,255,0.6);
}

/* =========================
   WIDGET CONTAINER
========================= */
.anyrare-widget-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* =========================
   GRID
========================= */
.anyrare-grid {
    display: grid;
    grid-template-columns: repeat(var(--columns), var(--img-width));
    gap: 9px;
    padding: 10px 0;
    justify-content: center;
    width: 100%;
    max-width: 90%;
    margin: 0 auto;
}

/* =========================
   CARD (แก้ไขให้เป็น Link Block)
========================= */
.anyrare-card {
    width: var(--img-width);
    background: #e6d5c4;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    /* เพิ่ม: สไตล์สำหรับ Link ให้ดูเหมือน Card ปกติ */
    text-decoration: none !important; /* ลบขีดเส้นใต้ */
    color: inherit; /* สีตัวอักษรตามเดิม */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

/* เอฟเฟกต์ตอนชี้ทั้งการ์ด */
.anyrare-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* =========================
   THUMBNAIL WRAPPER (เปลี่ยนชื่อคลาสเดิมจาก Link เป็น Wrapper)
========================= */
.anyrare-thumb-wrapper {
    position: relative;
    display: block;
}

.anyrare-thumb-wrapper > img:not(.anyrare-thumb-icon) {
    width: 95%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    margin: 3px auto 8px;
    transition: transform 0.15s ease;
}

/* เมื่อ Hover ที่การ์ด ให้รูปขยายด้วย */
.anyrare-card:hover .anyrare-thumb-wrapper > img:not(.anyrare-thumb-icon) {
    transform: scale(1.03);
}

/* =========================
   ICON OVERLAY
========================= */
.anyrare-thumb-icon {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: #fff;
    padding: 1px;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
    z-index: 10;
}

/* =========================
   TITLE
========================= */
.anyrare-title {
    font-size: 10px;
    font-weight: bold;
    padding: 0 8px;
    line-height: 1.3;
    color: #333; /* กำหนดสีดำทับไว้ กันกลายเป็นสีลิงก์ */

    /* ล็อกไว้ 3 บรรทัด */
    height: calc(1.3em * 3);

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================
   PRICE (เฉพาะตอนมีราคา)
========================= */
.anyrare-card.has-price .anyrare-price {
    margin-top: auto;                 /* ดันลงล่างสุด */
    padding: 8px 6px 10px;

    background: linear-gradient(
        180deg,
        #5a3518 0%,
        #854511 50%,
        #c08a4a 100%
    );
    color: #fff;

    font-size: 11px;
    font-weight: bold;
    text-align: center;

    border-radius: 0 0 10px 10px;     /* มนเฉพาะด้านล่าง */
}

/* =========================
   BUTTON (ถ้ามี)
========================= */
.anyrare-btn {
    margin-top: auto;
    display: block;
    background: #854511;
    color: #fff;
    text-align: center;
    padding: 6px;
    margin: 5px 8px;
    border-radius: 6px;
    text-decoration: none;
}

/* =========================
   BADGES (SVG)
========================= */
.anyrare-badge-buy,
.anyrare-badge-bid {
    position: absolute;
    left: -3px;
    top: -3px;

    width: 30px;
    height: 30px;

    transform-origin: center;
    z-index: 6;
}

.anyrare-badge-bid {
    position: absolute;
    left: -6px;
    top: -1px;
    width: 30px;
    height: 30px;
    transform-origin: center;
    z-index: 6;
}

/* --- เพิ่ม: บังคับ Font ใน SVG --- */
.anyrare-badge-buy svg text,
.anyrare-badge-bid svg text {
    font-family: 'Sarabun', Arial, Helvetica, sans-serif !important;
}

.anyrare-badge-buy {
    animation: buyPulse 2s ease-in-out infinite;
}

.anyrare-badge-bid {
    animation: bidPulse 2s ease-in-out infinite;
    animation-delay: 0.8s;
}


.anyrare-badge-buy svg {
    width: 120%;
    height: 120%;
}

.anyrare-badge-bid svg {
    width: 150%;
    height: 150%;
}

/* สำหรับไอคอนซื้อ */
.anyrare-badge-buy svg {
    animation: rotateBuy 1.6s ease-in-out infinite;
}

/* สำหรับไอคอนประมูล */
.anyrare-badge-bid svg {
    animation: rotateBid 1.6s ease-in-out infinite;
}

/* หมุนซ้าย-ขวา สำหรับ "ซื้อได้เลย!" */
@keyframes rotateBuy {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(10deg); }
    100% { transform: rotate(0deg); }
}

@keyframes bidPulse {
    0%   { transform: rotate(-45deg) scale(0.4); opacity: .85; }
    50%  { transform: rotate(-25deg) scale(1); opacity: 1; }
    100% { transform: rotate(-25deg) scale(1); opacity: 1; }
    100% { transform: rotate(-45deg) scale(0.4); opacity: .85; }
}