/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.5.1763110131
Updated: 2025-11-14 12:18:51

*/



.aspect169{
    aspect-ratio: 16/8!important;
    object-fit: cover!important;
}
.aspecting{
    aspect-ratio: 3/4.3!important;
}

/*category section design*/

.bg-video{
    position:absolute !important;
    top:0;
    left:0;
    width:100% !important;
    height:100% !important;
    object-fit:cover;
    object-position:center;
    z-index:0;
    opacity:1;
    transition:opacity .45s ease;
    pointer-events:none;
    max-width:none !important;
    max-height:none !important;
    display:block;
}
.bg-video.hide{
    opacity:0;
}
@media screen and (max-width:767px){
    .hover-item{
    position:relative;
    overflow:hidden;
    width: 50%!important;
    /*min-height:500px;*/
    aspect-ratio: 3/4!important;
    background-position: 94% center !important;
}
}
.hover-item{
    position:relative;
    overflow:hidden;
    min-height:500px;
}
.hover-item .content{
    position:absolute;
    left:0px;
    right:0px;
    padding:0px 15px!important;
    top:64%;
    transform:translateY(-50%);
    font-family: iransans!important;
    transition:.4s ease;
}
.hover-item .title{
    transition:.4s ease;
    font-family: iransans!important;
}
/* متن ها - دسکتاپ */
.hover-item .desc,
.hover-item .button1{
    opacity:0;
    transform:translateY(35px);
    font-family: iransans;
    transition:opacity .35s ease, transform .4s ease;
}
/* حالت هاور دسکتاپ */
.hover-item:hover .content{
    top:52%;
}
.hover-item:hover .desc,
.hover-item:hover .button1{
    opacity:1;
    transform:translateY(0px);
}
.bg-switcher{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    }

/* ================= موبایل ================= */
@media (max-width:767px){
.hover-item .desc{
    display: none!important;
}
    /* دیگر نیازی به بک‌گراند مشترک روی wrapper نیست و ویدیو هم نداریم */
    .bg-switcher{
        position:relative;
        overflow:visible;
        min-height:auto;
        background:#000 !important;
        display:block;
    }
    .bg-switcher::before{
        content:none;
    }

    /* همه ۶ آیتم زیر هم، هرکدام با بک‌گراند خودش */
    .hover-item{
        cursor:default;
        position:relative;
        overflow:hidden;
        padding:0;
        height:auto;
        min-height:auto;
        width:100%;
        background-size:cover;
        background-repeat:no-repeat;
        border-radius:0px;
    }

    /* لایه تیره روی هر آیتم برای خوانایی متن */
    .hover-item::before{
        content:'';
        position:absolute;
        inset:0;
        /*background:rgba(0,0,0,.45);*/
        pointer-events:none;
        z-index:1;
    }

    .hover-item .content{
        position:absolute;
        z-index:2;
        left:0;
        right:0;
        top:50%;
        transform:translateY(-50%);
    }

    /* در موبایل همه‌چیز از ابتدا ثابت و نمایان است */
    .hover-item .title,
    .hover-item .desc,
    .hover-item .button1{
        opacity:1 !important;
        transform:none !important;
        max-height:none !important;
        overflow:visible !important;
        transition:none !important;
    }
}




/* =========================================
   Cursor Grid Background
   ========================================= */

.cursor-grid-bg {
    position: relative !important;
    overflow: hidden !important;

    background: #ffffff !important;
    isolation: isolate;
}

/* لایه Canvas */
.cursor-grid-bg .cursor-grid-canvas {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    display: block !important;

    z-index: 0 !important;

    pointer-events: none !important;
}

/* محتوای اصلی کانتینر بالای Canvas */
.cursor-grid-bg > *:not(.cursor-grid-canvas) {
    position: relative;
    z-index: 1;
}

/* جلوگیری از انتخاب ناخواسته */
.cursor-grid-bg {
    -webkit-tap-highlight-color: transparent;
}




.section-title2{
    position: relative;
    display: inline-block;
    z-index: 0;
}
@media screen and (max-width:767px){
    .section-title2::before{
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    font-weight: 900;
    letter-spacing: 8px;
    color: rgba(255,255,255,0.15);
    white-space: nowrap;
    z-index: -1;
    pointer-events: none;
    text-transform: uppercase;
}
}
.section-title2::before{
    position: absolute;
    top: 62%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    font-weight: 900;
    letter-spacing: 8px;
    color: rgba(0,0,0,0.15);
    white-space: nowrap;
    z-index: -1;
    pointer-events: none;
    text-transform: uppercase;
}





/*عمومی کاستوم */
.direction-english{
    direction: ltr!important;
}
/*scroll*/
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: #f6f6f6;
	border-radius:2px!important;
backdrop-filter: blur( 10px );
-webkit-backdrop-filter: blur( 10px );
border:2px solid #fff;
}
  
::-webkit-scrollbar-thumb {
background: #000;
border:1px solid #eee;
height:10px;
border-radius:2px;
}
.khat2{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.heading-h3-product {
    height: 50px !important;
    overflow: hidden !important;
}
::selection {
  color: #ffcc29;
  background-color: #000;
}
.khat1 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media screen and (max-width:767px){
    .section-title1::before{
    font-size: 38px!important;
}
}
@media screen and (max-width:767px){
    .section-title::before{
    font-size: 38px!important;
}
}
@media screen and (max-width:1024px){
    .section-title1::before{
    font-size: 50px!important;
}
}
@media screen and (max-width:1024px){
    .section-title::before{
    font-size: 50px!important;
}
}
.section-title{
    position: relative;
    display: inline-block;
    z-index: 1;
}
.section-title::before{
    position: absolute;
    top: 62%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 65px;
    font-weight: 900;
    letter-spacing: 8px;
    color: rgba(255,255,255,0.08);
    white-space: nowrap;
    z-index: 0; /* پشت متن اصلی */
    pointer-events: none;
    text-transform: uppercase;
}
.section-title1{
    position: relative;
    display: inline-block;
    z-index: 1;
}
.section-title1::before{
    position: absolute;
    top: 62%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 65px;
    font-weight: 900;
    letter-spacing: 8px;
    color: rgba(0,0,0,0.08);
    white-space: nowrap;
    z-index: -1;
    pointer-events: none;
    text-transform: uppercase;
}
.container2{
    position: relative;
}

.container2::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(255,255,255,.3) 15%,
        #fff 40%,
        #fff 60%,
        rgba(255,255,255,.3) 85%,
        transparent
    );
}
@media screen and (max-width:767px)
{
    .container2::before{
        left: 0;
        top: auto!important;
        bottom: 0!important;
        width: 100%;
        height: 1px;
        background: linear-gradient(
            to right,
            transparent,
            rgba(255,255,255,.3) 15%,
            #fff 40%,
            #fff 60%,
            rgba(255,255,255,.3) 85%,
            transparent
        );
    }
}

.wantons3 { position: relative; } 
.wantons3::after { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0.01), rgba(255, 255, 255,1)); transition: opacity 0.3s ease; pointer-events: none; 
}
@media screen and (max-width:767px){
    .wantons3 { position: relative; } 
.wantons3::after { content: ""; position: absolute; bottom: 0!important; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.01), rgba(255, 255, 255,1))!important; transition: opacity 0.3s ease; pointer-events: none; 
}
}
@media screen and (max-width:767px){
    .wantons5 { position: relative; } 
.wantons5::after { content: ""; position: absolute; top: 0!important; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.01))!important; transition: opacity 0.3s ease; pointer-events: none; 
}
}
.wantons5 { position: relative; } 
.wantons5::after { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0.01) 0%, rgba(255, 255, 255,1) 70%); transition: opacity 0.3s ease; pointer-events: none; 
}

.wantons { position: relative; } 
.wantons::after { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0.01), rgba(255, 255, 255,1)); transition: opacity 0.3s ease; pointer-events: none; 
}
.wantons1{
    position: relative;
    overflow: hidden;
}
.wantons1 img{
    display: block;
    width: 100%;
}
.wantons1::after{
    content: "";
    object-fit: cover!important;
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0,1) 2%,
        rgba(0, 0, 0,0) 100%
    );
    pointer-events: none;
}
.img-gradient img{
    display: block;
    width: 100%;
}
.img-gradient::after{
    content: "";
    object-fit: cover!important;
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(255, 204, 41,1) 2%,
        rgba(255, 204, 41,0) 100%
    );
    pointer-events: none;
}









.tt-wrapper {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    direction: rtl;
    align-content: center;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
}

/* ============================================================
     بلوک توگل (سوییچ + برچسب‌های داخلی/خارجی)
  ============================================================ */
.toggle-block {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.toggle-label {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: #8a8a8a;
    font-weight: 300;
    transition: color .3s, font-weight .3s;
    user-select: none;
    cursor: pointer;
    white-space: nowrap;
}
.toggle-label.active {
    color: #ffcc29;
    font-weight: bold;
}
.toggle-label span {
    display: inline !important; /* همیشه دیده بشه، حتی تو کوچیک‌ترین گوشی */
}
.toggle-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    display: inline-block !important;
    background-color: currentColor;
    -webkit-mask-image: var(--icon-url);
    mask-image: var(--icon-url);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* ============================================================
     TOGGLE (از Uiverse - Praashoo7)
  ============================================================ */
.switch {
    font-size: 17px;
    position: relative;
    display: inline-block;
    width: 3.5em;
    height: 2em;
    flex-shrink: 0;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    box-shadow: inset 2px 5px 10px rgba(0,0,0,0.3);
    transition: .4s;
    border-radius: 5px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 1.4em;
    width: 0.1em;
    border-radius: 0px;
    left: 0.3em;
    bottom: 0.3em;
    background-color: white;
    transition: .4s;
}
.toggle-checkbox:checked + .slider {
    background-color: #ffcc29;
    box-shadow: inset 2px 5px 10px rgb(255, 217, 0);
}
.toggle-checkbox:checked + .slider:before {
    transform: translateX(2.8em) rotate(360deg);
}
.tabs-slot {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}
.tab-group {
    position: absolute;
    top: 0;
    right: 0 !important;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.tab-group.active-group {
    position: relative;
    visibility: visible;
    opacity: 1;
    display: flex;
    pointer-events: auto;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.tabs-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
}
.tabs-scroll::-webkit-scrollbar {
    display: none;
}

/* ============================================================
     TAB BUTTONS - نسخه افقی
  ============================================================ */
.radio-container {
    --tab-width: 120px;
    --main-color: #ffcc29;
    --main-color-opacity: #ffcc291c;
    --total-radio: 3; /* مقدار واقعی با JS ست میشه، این فقط fallback است */
    display: flex;
    flex-direction: row;
    position: relative;
    padding-bottom: 0.5rem;
    width: max-content; /* عرض واقعی = مجموع عرض همه‌ی تب‌ها، حتی نامرئی‌ها */
}
.radio-container input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    opacity: 0;
    position: absolute;
}
.radio-container .glider-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100%);
    height: 1px;
}
.radio-container .glider-container .glider {
    position: relative;
    width: calc(100% / var(--total-radio));
    height: 100%;
    background: linear-gradient( 90deg, rgba(0, 0, 0, 0) 0%, var(--main-color) 50%, rgba(0, 0, 0, 0) 100% );
    transition: transform 0.7s cubic-bezier(0.37, 1.95, 0.66, 0.56);
}
.radio-container .glider-container .glider::before {
    content: "";
    position: absolute;
    width: 60%;
    height: 300%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--main-color);
    filter: blur(10px);
}
.radio-container .glider-container .glider::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    background: linear-gradient( 0deg, var(--main-color-opacity) 0%, rgba(0, 0, 0, 0) 100% );
}

/* هر لیبل دقیقاً به اندازه‌ی var(--tab-width) فضا میگیره؛ آیکن بالا، متن پایین */
.radio-container label {
    cursor: pointer !important;
    position: relative !important;
    color: #8a8a8a !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: color 0.3s ease-in-out !important;
    flex: 0 0 var(--tab-width) !important;
    width: var(--tab-width) !important;
    max-width: var(--tab-width) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 6px !important;
    padding: 1rem 0.25rem 0.55rem 0.25rem !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
    font-size: 13px !important;
    scroll-snap-align: start;
}
.radio-container input:checked + label {
    color: var(--main-color) !important;
}
.radio-container .glider {
    transform: translateX(0); /* مقدار واقعی با JS ست میشه */
}
.tab-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-image: var(--icon-url);
    mask-image: var(--icon-url);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
.tab-content-slot {
    position: relative;
    width: 100%;
}
.tab-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    box-sizing: border-box;
    visibility: hidden;
    height: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-top: 60px;
    padding-bottom: 20px;
    pointer-events: none;
    border-radius: 0px;
    transition: opacity .2s ease;
}
.tab-content.tab-active {
    position: relative; /* همین یکی ارتفاع واقعی رو به .tab-content-slot میده */
    visibility: visible;
    height: auto;
    max-height: none;
    width: 100% !important;
    overflow: visible;
    opacity: 1;
    border-width: 1px;
    pointer-events: auto;
}
@media (max-width: 767px) {
    .tt-wrapper {
        gap: 10px;
        flex-wrap: nowrap;
    }
    .toggle-block {
        flex: 0 0 30%;
        max-width: 30%;
        gap: 5px;
        display: flex;
        flex-direction: column;
    }
    .slider:before{
    left: 1.3em!important;
    }
    .tabs-slot {
        flex: 0 0 68%;
        max-width: 68%;
    }
    .toggle-label {
        font-size: 11px;
    }
    .toggle-icon {
        width: 13px;
        height: 13px;
    }
    .switch {
        font-size: 13px;
        width: 5.5em!important;
    }

    .tabs-scroll,
    .radio-container {
        --tab-width: 75px;
        --visible-tabs: 4; /* اگه می‌خوای فقط 2 تا دیده بشه، بذار 2 */
    }
    .tabs-scroll {
        width: calc(var(--tab-width) * var(--visible-tabs));
        max-width: 100%;
    }

    .radio-container label {
        padding: 0.4rem 0.15rem !important;
        font-size: 11px !important;
        flex-direction: column!important;
        gap: 4px !important;
    }
    .tab-icon {
        width: 16px;
        height: 16px;
    }
    .tab-content {
        padding: 0px;
        border-radius: 0px;
    }
}

@media (max-width: 380px) {
    .toggle-block {
        flex: 0 0 32%;
        max-width: 32%;
    }
    .tabs-slot {
        flex: 0 0 65%;
        max-width: 65%;
    }

    .tabs-scroll,
    .radio-container {
        --tab-width: 68px;
        --visible-tabs: 3; /* گوشی‌های خیلی کوچیک، 2 تا دیده بشه */
    }
    .tabs-scroll {
        width: calc(var(--tab-width) * var(--visible-tabs));
    }

    .radio-container label {
        font-size: 10px !important;
    }
    .toggle-label {
        font-size: 10px;
    }
    /* توجه: دیگه اینجا متن داخلی/خارجی مخفی نمیشه؛ طبق خواسته‌ت همیشه دیده میشه */
}








/*border-lighting*/
  .shine-border {
    --mx: 50%;
    --my: 50%;
    --shine-color: 255, 204, 41;   /* رنگ نور */
    --shine-size: 160px;            /* شعاع نور */
    --shine-opacity: 0;             /* کنترل fade در JS */
    --border-width: 1.5px;          /* ضخامت قاب نوری */

    position: relative;
    isolation: isolate;
    border-radius: 1px;
    background: #1a1a1a;
    border: 0px solid rgba(255,255,255,0.08);
    transition: transform .2s ease;
  }

  .shine-border::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: var(--border-width);
    background: radial-gradient(
      var(--shine-size) circle at var(--mx) var(--my),
      rgba(var(--shine-color), 0.95),
      rgba(var(--shine-color), 0.15) 40%,
      transparent 70%
    );
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: var(--shine-opacity);
    transition: opacity .35s ease;
    pointer-events: none;
    z-index: 2;
  }

  /* یک هاله‌ی نرم بیرون هم اضافه می‌کنیم که حس نور واقعی‌تر بشه */
  .shine-border::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: radial-gradient(
      var(--shine-size) circle at var(--mx) var(--my),
      rgba(var(--shine-color), 0.18),
      transparent 60%
    );
    opacity: var(--shine-opacity);
    transition: opacity .35s ease;
    pointer-events: none;
    z-index: 0;
    filter: blur(6px);
  }
  /* ===================== پایان کلاس اصلی ===================== */

  .card {
    position: relative;
    z-index: 1;
    width: 260px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #ddd;
    cursor: pointer;
  }




/*product- attribiute section 4 cullem*/
.booster {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 30;
  --color-sensitivity: calc(var(--edge-sensitivity) + 20);
  --border-radius: 0px;
  --glow-padding: 40px;
  --cone-spread: 25;

  position: relative;
  border-radius: 0px;
  isolation: isolate;
  transform: translate3d(0, 0, 0.01px);
  display: grid;
  border: 1px solid rgb(255 255 255 / 15%);
  background: var(--card-bg, #120F17);
  overflow: visible;
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 1px 2px,
    rgba(0, 0, 0, 0.1) 0px 2px 4px,
    rgba(0, 0, 0, 0.1) 0px 4px 8px,
    rgba(0, 0, 0, 0.1) 0px 8px 16px,
    rgba(0, 0, 0, 0.1) 0px 16px 32px,
    rgba(0, 0, 0, 0.1) 0px 32px 64px;
}

.booster::before,
.booster::after,
.booster > .edge-light {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0px;
  transition: opacity 0.25s ease-out;
  z-index: -1;
}

.booster:not(:hover):not(.sweep-active)::before,
.booster:not(:hover):not(.sweep-active)::after,
.booster:not(:hover):not(.sweep-active) > .edge-light {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}

/* لبه‌ی رنگی mesh-gradient */
.booster::before {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg, #120F17) 0 100%) padding-box,
    linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
    var(--gradient-one, radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-two, radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-three, radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-four, radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-five, radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-six, radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-seven, radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-base, linear-gradient(#c299ff 0 100%)) border-box;
  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center,
      black calc(var(--cone-spread) * 1%),
      transparent calc((var(--cone-spread) + 15) * 1%),
      transparent calc((100 - var(--cone-spread) - 15) * 1%),
      black calc((100 - var(--cone-spread)) * 1%)
    );
}

/* پرشدگی رنگی نزدیک لبه‌ها */
.booster::after {
  border: 1px solid transparent;
  background:
    var(--gradient-one, radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-two, radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-three, radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-four, radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-five, radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-six, radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-seven, radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-base, linear-gradient(#c299ff 0 100%)) padding-box;
  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  mask-composite: subtract, add, add, add, add, add;
  opacity: calc(var(--fill-opacity, 0.5) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode: soft-light;
}

/* لایه‌ی درخشش بیرونی (Glow) */
.booster > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  pointer-events: none;
  z-index: 1;
  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%
    );
  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
}

.booster > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: 0px;
  box-shadow:
    inset 0 0 0 1px var(--glow-color, hsl(40deg 80% 80% / 100%)),
    inset 0 0 1px 0 var(--glow-color-60, hsl(40deg 80% 80% / 60%)),
    inset 0 0 3px 0 var(--glow-color-50, hsl(40deg 80% 80% / 50%)),
    inset 0 0 6px 0 var(--glow-color-40, hsl(40deg 80% 80% / 40%)),
    inset 0 0 15px 0 var(--glow-color-30, hsl(40deg 80% 80% / 30%)),
    inset 0 0 25px 2px var(--glow-color-20, hsl(40deg 80% 80% / 20%)),
    inset 0 0 50px 2px var(--glow-color-10, hsl(40deg 80% 80% / 10%)),
    0 0 1px 0 var(--glow-color-60, hsl(40deg 80% 80% / 60%)),
    0 0 3px 0 var(--glow-color-50, hsl(40deg 80% 80% / 50%)),
    0 0 6px 0 var(--glow-color-40, hsl(40deg 80% 80% / 40%)),
    0 0 15px 0 var(--glow-color-30, hsl(40deg 80% 80% / 30%)),
    0 0 25px 2px var(--glow-color-20, hsl(40deg 80% 80% / 20%)),
    0 0 50px 2px var(--glow-color-10, hsl(40deg 80% 80% / 10%));
}

.booster-inner {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
  z-index: 1;
}