/* ==========================================================================
   بخش تعاملی «آناتومی فرش» — کلاس‌ها با پیشوند ra- ایزوله شده‌اند
   تا با استایل‌های عمومی سایت (مثل .btn, .card) تداخل نکنند
   ========================================================================== */
.rug-anatomy-section {
    padding: 60px 0;
    background: linear-gradient(135deg, #f8f7f3, #eeece5);
}
.rug-anatomy-section body.ra-lock { overflow: hidden; }

.ra-card {
    width: min(1100px, 100%);
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e8e3d9;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(10,31,46,.1);
}
.ra-header { text-align: center; padding: 34px 18px 12px; }
.ra-header h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; color: var(--color-primary-dark); }
.ra-header p { margin: 9px 0 0; color: var(--color-muted); font-size: .9rem; }

.ra-visual { position: relative; width: min(760px, 100%); margin: auto; }
.ra-visual > img { display: block; width: 100%; height: auto; }

.ra-hotspot {
    position: absolute;
    width: 84px; height: 84px;
    border-radius: 50%;
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 3;
    padding: 0;
    transform: translate(-50%, -50%);
    transition: transform .2s, filter .2s;
}
.ra-hotspot:hover { transform: translate(-50%, -50%) scale(1.07); }
.ra-hotspot:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }
.ra-hotspot.ra-active { filter: brightness(1.15); }

/* مختصات زیر با اندازه‌گیری دقیق مرکز هر دایره روی خود تصویر محاسبه شده‌اند
   (نه حدس تقریبی) تا محل لمس دقیقاً روی خود دایره باشد */
.ra-h1{left:9.6%;top:12%}.ra-h2{left:9.4%;top:23.2%}
.ra-h3{left:9.3%;top:35.8%}.ra-h4{left:9.3%;top:48.1%}
.ra-h5{left:9.1%;top:62.3%}.ra-h6{left:9.2%;top:77.6%}
.ra-h7{left:72.8%;top:16.6%}.ra-h8{left:73%;top:30.6%}
.ra-h9{left:73.2%;top:46.2%}.ra-h10{left:73.2%;top:61.9%}
.ra-h11{left:75.6%;top:82%}

.ra-legend { text-align: center; padding: 0 18px 30px; color: var(--color-muted); font-size: .8rem; }

/* پس‌زمینه + پاپ‌آپ */
.ra-modal {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: 18px;
    background: rgba(10,31,46,.75);
    backdrop-filter: blur(9px);
    opacity: 0; visibility: hidden;
    transition: opacity .28s, visibility .28s;
}
.ra-modal.ra-open { opacity: 1; visibility: visible; }
.ra-modal-box {
    width: min(650px, 100%); max-height: 92vh; overflow: auto;
    background: #fff; border-radius: 30px; padding: 25px;
    position: relative;
    box-shadow: 0 35px 110px rgba(0,0,0,.34);
    transform: translateY(28px) scale(.94); opacity: 0;
    transition: transform .34s cubic-bezier(.2,.8,.2,1), opacity .25s;
}
.ra-modal.ra-open .ra-modal-box { transform: none; opacity: 1; }

.ra-close {
    position: absolute; top: 14px; left: 14px;
    width: 42px; height: 42px; border: 0; border-radius: 50%;
    background: #f1eee7; font-size: 1.5rem; cursor: pointer; z-index: 4;
    line-height: 1;
}
.ra-close:hover { background: #e7e1d6; }

.ra-zoom-img {
    width: 205px; height: 205px; border-radius: 50%; object-fit: cover;
    display: block; margin: 8px auto 19px;
    border: 6px solid var(--color-accent);
    box-shadow: 0 16px 42px rgba(0,0,0,.18);
}
.ra-modal-box h3 { text-align: center; margin: 0 0 13px; font-size: 1.6rem; color: var(--color-primary-dark); }
.ra-modal-box p { font-size: .96rem; line-height: 1.95; color: #4d4d4d; margin: 0 0 14px; }
.ra-modal-box p strong { color: var(--color-primary-dark); }
.ra-modal-box p.ra-care {
    background: #f7ecd3;
    border-right: 3px solid var(--color-accent);
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 20px;
}
.ra-modal-box p.ra-care strong { color: #8a6a1f; }

.ra-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ra-actions button {
    border: 0; border-radius: 14px; padding: 11px 19px;
    font: inherit; cursor: pointer;
    transition: transform .18s, box-shadow .18s;
}
.ra-actions button:hover { transform: translateY(-2px); box-shadow: 0 7px 20px rgba(0,0,0,.1); }
.ra-share { background: var(--color-primary-dark); color: #fff; }
.ra-copy { background: #eeeae1; color: #333; }

/* دایره‌ی در حال پرواز از نقطه کلیک تا پاپ‌آپ */
.ra-flying-circle {
    position: fixed; z-index: 1500; border-radius: 50%; object-fit: cover;
    border: 6px solid var(--color-accent);
    box-shadow: 0 18px 45px rgba(0,0,0,.25);
    pointer-events: none; will-change: left, top, width, height, transform;
    transition: left .52s cubic-bezier(.22,.85,.25,1),
                top .52s cubic-bezier(.22,.85,.25,1),
                width .52s cubic-bezier(.22,.85,.25,1),
                height .52s cubic-bezier(.22,.85,.25,1),
                transform .52s cubic-bezier(.22,.85,.25,1);
}
.ra-modal.ra-preparing .ra-modal-box { transform: translateY(15px) scale(.985); opacity: 1; }
.ra-modal.ra-preparing .ra-zoom-img { visibility: hidden; }

.ra-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px);
    background: var(--color-dark); color: #fff; padding: 11px 18px; border-radius: 12px;
    opacity: 0; pointer-events: none; transition: .25s; z-index: 2000; font-size: .85rem;
}
.ra-toast.ra-show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 600px) {
    .rug-anatomy-section { padding: 0 0 40px; }
    .ra-card { border-radius: 0; }
    .ra-header { padding-top: 26px; }
    .ra-hotspot { width: 62px; height: 62px; }
    .ra-modal-box { padding: 20px; border-radius: 23px; }
    .ra-zoom-img { width: 150px; height: 150px; }
    .ra-modal-box p { font-size: .92rem; }
}