/* ==========================================================================
   GK Swatches – Modern & Premium UI
   Refactored with GanjehKala Design Tokens
   ========================================================================== */

/* --- Skeleton Loader (Modernized) --- */
@keyframes gk-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.shimmer-bg {
    background-color: var(--gk-surface, #f3f4f6); /* هماهنگ با پس زمینه باکس‌ها */
    position: relative;
    overflow: hidden;
}
.shimmer-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    animation: gk-shimmer 1.5s infinite;
}

.gk-swatch-skeleton {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.gk-swatch-skeleton-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}
.skeleton-title {
    height: 14px;
    width: 70px;
    border-radius: var(--gk-radius-sm, 4px);
}
.skeleton-items {
    display: flex;
    gap: var(--gk-swatch-gap, 10px);
}
.skeleton-swatch {
    height: var(--gk-swatch-size, 32px);
    border-radius: var(--gk-radius, 8px);
}
.skeleton-items .skeleton-swatch:nth-child(1) { width: 40px; }
.skeleton-items .skeleton-swatch:nth-child(2) { width: 48px; }
.skeleton-items .skeleton-swatch:nth-child(3) { width: 36px; }

/* Hide native selects safely */
.variations_form.gk-hide-native table.variations {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0,0,0,0) !important; clip-path: inset(50%) !important;
    border: 0 !important; white-space: nowrap !important;
}

/* Containers */
.gk-swatch-mount {
    min-height: 80px;
    display: flex;
    flex-direction: column;
    gap: 16px; /* فاصله بهتر بین ویژگی‌های مختلف */
}
.gk-swatch-group {
    margin: 4px 0 0;
    max-width: 100%; min-width: 0;
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.gk-swatch-title {
    font-size: 0.95em;
    font-weight: 600;
    color: var(--gk-text, #374151);
    line-height: 1.4; user-select: none;
}
.gk-swatch-items {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--gk-swatch-gap);
    max-width: 100%; min-width: 0;
}

/* Base swatch reset & Text Swatches (Modern Look) */
.gk-swatch-mount .gk-swatch,
.variations_form .gk-swatch {
    all: unset;
    box-sizing: border-box !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    cursor: pointer !important;

    width: auto !important; min-width: 0 !important; max-width: 100%;
    flex: 0 0 auto !important;

    height: calc(var(--gk-swatch-size) + 4px) !important; /* متناسب سازی ارتفاع */
    padding: 0 16px !important;
    border-radius: var(--gk-radius, 8px) !important; /* گوشه های استاندارد به جای کاملا گرد */

    border: 1px solid var(--gk-border-color, #e5e7eb) !important;
    background: var(--gk-surface, #ffffff) !important;
    color: var(--gk-text, #4b5563) !important;

    font-size: 0.9em !important;
    font-weight: 500 !important;
    line-height: 1 !important; vertical-align: middle !important;

    transition: all var(--gk-duration-fast, 0.2s) ease !important;
    -webkit-tap-highlight-color: transparent;
}

/* Hover State */
.gk-swatch-mount .gk-swatch:hover,
.variations_form .gk-swatch:hover {
    border-color: var(--gk-primary) !important;
    color: var(--gk-primary) !important;
    background: var(--gk-background, #ffffff) !important;
}

/* Active State (خط قرمز: استفاده از رنگ برند) */
.gk-swatch-mount .gk-swatch[aria-checked="true"],
.variations_form .gk-swatch[aria-checked="true"] {
    border-color: var(--gk-primary) !important;
    background: var(--gk-primary) !important;
    color: #ffffff !important; /* متن سفید برای خوانایی روی رنگ برند */
    box-shadow: var(--gk-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05)) !important;
}

/* Focus State */
.gk-swatch-mount .gk-swatch:focus-visible,
.variations_form .gk-swatch:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--gk-background, #fff), 0 0 0 4px var(--gk-primary) !important;
}

/* Disabled State */
.gk-swatch-mount .gk-swatch.is-disabled,
.variations_form .gk-swatch.is-disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    background: var(--gk-surface, #f3f4f6) !important;
    border-color: var(--gk-border-color, #e5e7eb) !important;
    color: #9ca3af !important;
    /* ایجاد خط مورب برای حس ناموجود بودن در سواچ متنی */
    background-image: linear-gradient(to top right, transparent calc(50% - 1px), #d1d5db, transparent calc(50% + 1px)) !important;
}
.gk-swatch-mount .gk-swatch.is-disabled:hover {
    box-shadow: none !important;
}

/* Color circles (Modern Ring Effect) */
.gk-swatch-mount .gk-swatch.is-color,
.variations_form .gk-swatch.is-color {
    padding: 0 !important;
    border-radius: 50% !important; /* سواچ رنگ همیشه گرد است */
    border: 1px solid rgba(0,0,0,0.08) !important;
    background-image: none !important; /* حذف خط مورب پیش‌فرض */

    width: var(--gk-swatch-size) !important;
    height: var(--gk-swatch-size) !important;
    min-width: var(--gk-swatch-size) !important;
    max-width: var(--gk-swatch-size) !important;
    flex: 0 0 var(--gk-swatch-size) !important;

    background-color: var(--gk-swatch-color, #f4f4f4) !important;
    color: transparent !important;
    position: relative;
}

/* Hover for Color */
.gk-swatch-mount .gk-swatch.is-color:hover,
.variations_form .gk-swatch.is-color:hover {
    transform: scale(1.05);
    box-shadow: var(--gk-shadow-sm) !important;
    border-color: rgba(0,0,0,0.15) !important;
}

/* Active State for Color (Ring Offset) */
.gk-swatch-mount .gk-swatch.is-color[aria-checked="true"],
.variations_form .gk-swatch.is-color[aria-checked="true"] {
    transform: scale(1);
    /* استایل مدرن حلقه با استفاده از رنگ برند */
    box-shadow: 0 0 0 2px var(--gk-background, #ffffff), 0 0 0 4px var(--gk-primary) !important;
    border-color: transparent !important;
}

/* Disabled for Color */
.gk-swatch-mount .gk-swatch.is-color.is-disabled,
.variations_form .gk-swatch.is-color.is-disabled {
    filter: grayscale(100%) opacity(0.5);
    background-image: linear-gradient(to top right, transparent calc(50% - 1px), rgba(0,0,0,0.3), transparent calc(50% + 1px)) !important;
}

/* Image swatches */
.gk-swatch-mount .gk-swatch.is-image,
.variations_form .gk-swatch.is-image {
    padding: 0 !important;
    border-radius: var(--gk-radius, 8px) !important;
    overflow: hidden !important;
    background-image: none !important;

    width: calc(var(--gk-swatch-size) + 12px) !important;
    height: calc(var(--gk-swatch-size) + 12px) !important;
    min-width: calc(var(--gk-swatch-size) + 12px) !important;
    max-width: calc(var(--gk-swatch-size) + 12px) !important;
    flex: 0 0 calc(var(--gk-swatch-size) + 12px) !important;
    border: 1px solid var(--gk-border-color, #e5e7eb) !important;
}

.gk-swatch-mount .gk-swatch.is-image img,
.variations_form .gk-swatch.is-image img {
    display: block; width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--gk-duration-slow, 0.4s) ease;
}

.gk-swatch-mount .gk-swatch.is-image:hover img {
    transform: scale(1.1);
}

.gk-swatch-mount .gk-swatch.is-image[aria-checked="true"],
.variations_form .gk-swatch.is-image[aria-checked="true"] {
    box-shadow: 0 0 0 2px var(--gk-background, #ffffff), 0 0 0 4px var(--gk-primary) !important;
    border-color: transparent !important;
}

.gk-swatch-mount .gk-swatch.is-image.is-disabled,
.variations_form .gk-swatch.is-image.is-disabled {
    filter: grayscale(100%) opacity(0.5);
}

/* Wrapping & text */
.gk-swatch-mount .gk-swatch,
.variations_form .gk-swatch {
    word-break: break-word;
}

/* Responsive */
@media (max-width: 420px) {
    .gk-swatch-mount {
        gap: 12px;
    }
    .gk-swatch-mount .gk-swatch:not(.is-color):not(.is-image) {
        padding: 0 12px !important;
        font-size: 0.85em !important;
    }
}


/* Term-meta driven swatches: keep the actual saved term color visible in every context. */
.gk-swatch-mount .gk-swatch.is-color,
.variations_form .gk-swatch.is-color {
    background: var(--gk-swatch-color, #f4f4f4) !important;
    background-color: var(--gk-swatch-color, #f4f4f4) !important;
}
.gk-swatch-mount .gk-swatch .gk-tooltip,
.variations_form .gk-swatch .gk-tooltip {
    position: absolute;
    inset-inline-start: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(50%);
    white-space: nowrap;
    background: #111827;
    color: #fff;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    line-height: 1.6;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 5;
}
.gk-swatch-mount .gk-swatch:hover .gk-tooltip,
.variations_form .gk-swatch:hover .gk-tooltip {
    opacity: 1;
    transform: translateX(50%) translateY(-2px);
}

/* v1.7.5: selected variation value beside title + reliable tooltips */
.gk-swatch-mount .gk-swatch-title,
.variations_form .gk-swatch-title {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}
.gk-swatch-mount .gk-swatch-title-text,
.variations_form .gk-swatch-title-text {
    display: inline-flex !important;
    align-items: center !important;
}
.gk-swatch-mount .gk-swatch-selected-label,
.variations_form .gk-swatch-selected-label {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 1.4em !important;
    color: var(--gk-primary, #0f766e) !important;
    font-size: .95em !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
}
.gk-swatch-mount .gk-swatch-selected-label:not(:empty)::before,
.variations_form .gk-swatch-selected-label:not(:empty)::before {
    content: ":";
    color: var(--gk-text-muted, #6b7280);
    font-weight: 700;
    margin-inline-end: 5px;
}
.gk-swatch-mount .gk-swatch-selected-label:empty,
.variations_form .gk-swatch-selected-label:empty {
    display: none !important;
}
.gk-swatch-mount .gk-swatch,
.variations_form .gk-swatch {
    position: relative !important;
}
.gk-swatch-mount .gk-swatch.has-tooltip,
.variations_form .gk-swatch.has-tooltip {
    overflow: visible !important;
}
.gk-swatch-mount .gk-swatch.is-image.has-tooltip img,
.variations_form .gk-swatch.is-image.has-tooltip img {
    border-radius: inherit !important;
    clip-path: inset(0 round inherit);
}
.gk-swatch-mount .gk-swatch .gk-tooltip,
.variations_form .gk-swatch .gk-tooltip {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    inset-inline-start: auto !important;
    bottom: calc(100% + 10px) !important;
    transform: translateX(-50%) translateY(6px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: max-content !important;
    max-width: 220px !important;
    white-space: nowrap !important;
    background: var(--gk-tooltip-bg, #111827) !important;
    color: var(--gk-tooltip-color, #ffffff) !important;
    border-radius: 999px !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 99999 !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .18) !important;
    transition: opacity .18s ease, visibility .18s ease, transform .18s ease !important;
}
.gk-swatch-mount .gk-swatch .gk-tooltip::after,
.variations_form .gk-swatch .gk-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--gk-tooltip-bg, #111827);
}
.gk-swatch-mount .gk-swatch:hover .gk-tooltip,
.gk-swatch-mount .gk-swatch:focus-visible .gk-tooltip,
.variations_form .gk-swatch:hover .gk-tooltip,
.variations_form .gk-swatch:focus-visible .gk-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
}