.product-3d-viewer {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    background: #f4f4f4;
    touch-action: none;
}

.product-3d-viewer canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.viewer-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /*z-index: 100;*/
    background: #fff;
    opacity: 1;
    visibility: visible;
    transition:
        opacity .35s ease,
        visibility .35s ease;
}

.viewer-loading.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* -----------------------------------------
   Loading Inner
----------------------------------------- */
.viewer-loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* -----------------------------------------
   Spinner
----------------------------------------- */
.viewer-loading-spinner {
    width: 34px;
    height: 34px;
    margin-bottom: 14px;
    border: 2px solid rgba(0,0,0,.10);
    border-top-color: #333;
    border-radius: 50%;
    animation:
        viewerLoadingSpin .8s linear infinite;
}

@keyframes viewerLoadingSpin {
    to {
        transform: rotate(360deg);
    }
}

/* -----------------------------------------
   Text
----------------------------------------- */
.viewer-loading-text {
    font-size: 13px;
    font-weight: 500;
    color: #444;
    line-height: 1.6;
}

/* -----------------------------------------
   Progress
----------------------------------------- */
.viewer-loading-progress {
    margin-top: 5px;
    font-size: 11px;
    color: #999;
    font-variant-numeric: tabular-nums;
}

.product-3d-viewer {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    background: #f4f4f4;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
    /*z-index: -10;*/
}

.product-3d-viewer.is-dragging {
    cursor: grabbing;
}

.product-3d-viewer canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}

@media (max-width: 768px) {
    .product-3d-viewer {
        height: 400px;
    }
}

/* =========================================
   3D VIEWER CONFIGURATOR
========================================= */
.viewer-configurator {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 30;
    direction: rtl;
}

/* -----------------------------------------
   Toggle Button
----------------------------------------- */
.viewer-config-toggle {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 14px;
    background: rgba(255,255,255,.82);
    color: #252525;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.viewer-config-toggle:hover {
    background: rgb(255 255 255 / 0);
}

.viewer-configurator.is-open .viewer-config-toggle {
    color: #fff;
    box-shadow: 0 8px 25px rgba(0,0,0,.22);
}

/* -----------------------------------------
   Panel
----------------------------------------- */
.viewer-config-panel {
    position: absolute;
    right: 0;
    bottom: 58px;
    width: 255px;
    padding: 17px;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 5px;
    background: rgba(255,255,255,.90);
    box-shadow: 0 15px 20px rgba(0,0,0,.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform:
        translateY(10px)
        scale(.96);
    transform-origin: bottom right;
    transition:
        opacity .22s ease,
        transform .22s ease,
        visibility .22s ease;
}

.viewer-configurator.is-open .viewer-config-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform:
        translateY(0)
        scale(1);
}

/* -----------------------------------------
   Header
----------------------------------------- */
.viewer-config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.viewer-config-title {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    line-height: 1.4;
}

.viewer-config-subtitle {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    color: #999;
}

.viewer-config-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #888;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition:
        background .2s ease,
        color .2s ease;
}

.viewer-config-close:hover {
    background: rgba(0,0,0,.06);
    color: #222;
}

/* -----------------------------------------
   Tabs
----------------------------------------- */
.viewer-config-tabs {
    display: flex;
    padding: 4px;
    margin-bottom: 17px;
    border-radius: 11px;
    background: rgba(0,0,0,.055);
    gap: 3px;
}

.viewer-config-tab {
    flex: 1;
    height: 34px;
    padding: 0 7px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #888;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition:
        background .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}

.viewer-config-tab:hover {
    color: #333;
}

.viewer-config-tab.active {
    background: #fff;
    color: #222;
    box-shadow: 0 2px 7px rgba(0,0,0,.08);
}

/* -----------------------------------------
   Tab Content
----------------------------------------- */
.viewer-config-content {
    display: none;
    min-height: 58px;
    animation: configTabFade .2s ease;
}

.viewer-config-content.active {
    display: block;
}

@keyframes configTabFade {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* -----------------------------------------
   Color Title
----------------------------------------- */
.color-group-title {
    margin-bottom: 11px;
    font-size: 12px;
    font-weight: 600;
    color: #444;
}

/* -----------------------------------------
   Swatches
----------------------------------------- */
.color-swatches {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.profile-color, .glass-color {
    position: relative;
    width: 25px;
    height: 25px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--swatch-color);
    cursor: pointer;
    box-shadow: 0 2px 7px rgba(0,0,0,.15);
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.profile-color:hover,
.glass-color:hover {
    transform: scale(1.14);
    box-shadow: 0 4px 12px rgba(0,0,0,.20);
}

.profile-color.active,
.glass-color.active {
    transform: scale(1.08);
    box-shadow: 0 3px 9px rgba(0,0,0,.18);
}

/* Active check mark */
.profile-color.active::before,
.glass-color.active::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform:
        translate(-50%, -58%)
        rotate(45deg);
    filter:
        drop-shadow(0 1px 2px rgba(0,0,0,.45));
    pointer-events: none;
    z-index: 2;
}

/* Border around very light colors */
.profile-color::after,
.glass-color::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

/* -----------------------------------------
   Mobile
----------------------------------------- */
@media (max-width: 768px) {
    .viewer-configurator {
        right: 14px;
        bottom: 14px;
    }
    .viewer-config-panel {
        width: 230px;
        bottom: 54px;
    }
    .viewer-config-toggle {
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }
    .viewer-config-tab {
        font-size: 10px;
    }
}

/* =========================================================
  3D VIEWER - ROTATION HINT
========================================================= */
   .viewer-rotate-hint {
       position: absolute;
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
       z-index: 20;
       display: flex;
       flex-direction: column;
       align-items: center;
       pointer-events: none;
       opacity: 0;
       transition:
           opacity .45s ease,
           transform .45s ease;
   }

/*
|--------------------------------------------------------------------------
| Visible
|--------------------------------------------------------------------------
*/
.viewer-rotate-hint.is-visible {
    opacity: 1;
}

/*
|--------------------------------------------------------------------------
| Icon
|--------------------------------------------------------------------------
*/
.viewer-rotate-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 108px;
    height: 44px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 8px 25px rgba(0,0,0,.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/*
|--------------------------------------------------------------------------
| 360 Text
|--------------------------------------------------------------------------
*/
.rotate-360 {
    font-size: 13px;
    font-weight: 600;
    color: #444;
    line-height: 1;
    white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| Arrows
|--------------------------------------------------------------------------
*/
.rotate-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    color: #555;
    opacity: .75;
}

.rotate-arrow-left {
    transform: translateX(1px);
}

.rotate-arrow-right {
    transform: translateX(-1px);
}

/*
|--------------------------------------------------------------------------
| Text
|--------------------------------------------------------------------------
*/
.viewer-rotate-text {
    margin-top: 10px;
    padding: 5px 10px;
    border-radius: 6px;
    background: rgba(255,255,255,.78);
    color: #555;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(0,0,0,.07);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/*
|--------------------------------------------------------------------------
| Subtle left/right movement
|--------------------------------------------------------------------------
*/
@keyframes viewerRotateHintMove {
    0% {
        transform: translateX(0);
    }
    15% {
        transform: translateX(-9px);
    }
    30% {
        transform: translateX(9px);
    }
    45% {
        transform: translateX(-7px);
    }
    60% {
        transform: translateX(7px);
    }
    75% {
        transform: translateX(-3px);
    }
    90% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(0);
    }
}

/*
|--------------------------------------------------------------------------
| Hide after interaction
|--------------------------------------------------------------------------
*/
.viewer-rotate-hint.is-hidden {
    opacity: 0;
    transform:
        translate(-50%, -50%)
        scale(.94);
    visibility: hidden;
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/
@media (max-width: 576px) {
    .viewer-rotate-icon {
        min-width: 96px;
        height: 40px;
        gap: 5px;
    }
    .rotate-360 {
        font-size: 12px;
    }
    .rotate-arrow {
        font-size: 20px;
    }
    .viewer-rotate-text {
        font-size: 10px;
    }
}

/* حالت بسته: مشکی */
.viewer-config-toggle svg {
    fill: #000;
    transition: fill 0.25s ease;
}

.viewer-config-toggle svg path {
    fill: inherit; /* اگر path ها fill جداگانه دارند */
}

/* حالت باز: قرمز */
.viewer-configurator.is-open .viewer-config-toggle svg {
    fill: #cc0000;
}