/* =============================== */
/* OMEN PLAY – NAVIGATION FIX     */
/* Replace red underline with purple */
/* =============================== */

/* Base link reset */
a[href="#shop"],
a[href="#servers"]{
    position: relative !important;
    text-decoration: none !important;
    border-bottom: none !important;
    color: inherit !important;
    transition: all 0.3s ease !important;
}

/* Remove ANY existing red underline system */
a[href="#shop"]::before,
a[href="#shop"]::after,
a[href="#servers"]::before,
a[href="#servers"]::after{
    content: none !important;
    display: none !important;
    border: none !important;
    background: none !important;
}

/* Force our own purple underline effect */
a[href="#shop"]:hover,
a[href="#servers"]:hover{
    color: #d89cff !important;
}

/* SVG stroke color on hover */
a[href="#shop"]:hover svg path,
a[href="#servers"]:hover svg path{
    stroke: #c77dff !important;
}



/* =============================== */
/* CATEGORY TEXT STYLE FIX        */
/* =============================== */

.category-name{
    font-family: 'Fugaz One', sans-serif !important;
    color: #c77dff !important;
}

.category-products-count{
    font-family: 'Fugaz One', sans-serif !important;
    color: #d89cff !important;
}


/* =============================== */
/* PRODUCT CARD BORDER FIX        */
/* =============================== */

.product-preview-image-wrapper{
    border: 2px solid #c77dff !important;
    border-radius: 12px !important;
}



/* =============================== */
/* PRODUCT CARD FONT FIX          */
/* =============================== */

.product-preview-image-wrapper,
.product-preview-image-wrapper *{
    font-family: 'Fugaz One', sans-serif !important;
}

/* Hover border purple */
.product-preview-image-wrapper{
    transition: border 0.3s ease, box-shadow 0.3s ease !important;
}

.product-preview-image-wrapper:hover{
    border: 2px solid #c77dff !important;
    box-shadow: 0 0 15px rgba(199,125,255,0.6) !important;
}




/* =============================== */
/* BUTTON "Подробнее" FINAL STYLE */
/* =============================== */

.flex-shrink-0{
    background: transparent !important;
    color: #c77dff !important;
    border: 2px solid #c77dff !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}
/* Hover state */
.flex-shrink-0:hover{
    background: #c77dff !important;
    color: white !important;
}


/* =============================== */
/* BUTTON FINAL CLEAN STYLE       */
/* =============================== */

/* Target the real clickable button (usually parent <a> or button) */
.flex-shrink-0{
    pointer-events: none !important; /* disable styling as separate element */
}

/* Style parent link/button that contains "Подробнее" */
a:has(.flex-shrink-0),
button:has(.flex-shrink-0){
    background: transparent !important;
    border: 2px solid #c77dff !important;
    color: #c77dff !important;
    border-radius: 8px !important;
    padding: 10px 18px !important;
    transition: all 0.3s ease !important;
}

/* Hover: whole button purple */
a:has(.flex-shrink-0):hover,
button:has(.flex-shrink-0):hover{
    background: #c77dff !important;
    color: white !important;
    border-color: #c77dff !important;
}



/* ===================================== */
/* REMOVE INNER PURPLE RECTANGLE FIX    */
/* ===================================== */

/* Ensure inner span has NO background */
.flex-shrink-0{
    background: transparent !important;
    border: none !important;
}

/* Button text always white */
a:has(.flex-shrink-0),
button:has(.flex-shrink-0){
    color: white !important;
}

/* Keep hover fully purple without inner artifacts */
a:has(.flex-shrink-0):hover,
button:has(.flex-shrink-0):hover{
    background: #c77dff !important;
    color: white !important;
}



/* ===================================== */
/* FORCE WHITE TEXT INSIDE "Подробнее"   */
/* ===================================== */

/* The clickable container */
a:has(.flex-shrink-0),
button:has(.flex-shrink-0){
  color: #ffffff !important;
}

/* Every child inside the button (text + svg) */
a:has(.flex-shrink-0) *,
button:has(.flex-shrink-0) *{
  color: #ffffff !important;
}

/* Specifically the span text */
a:has(.flex-shrink-0) .flex-shrink-0,
button:has(.flex-shrink-0) .flex-shrink-0{
  color: #ffffff !important;
}

/* And SVG stroke if icon is inside the same button */
a:has(.flex-shrink-0) svg path,
button:has(.flex-shrink-0) svg path{
  stroke: #ffffff !important;
}

/* Hover keeps white text too */
a:has(.flex-shrink-0):hover,
button:has(.flex-shrink-0):hover,
a:has(.flex-shrink-0):hover *,
button:has(.flex-shrink-0):hover *{
  color: #ffffff !important;
}
a:has(.flex-shrink-0):hover svg path,
button:has(.flex-shrink-0):hover svg path{
  stroke: #ffffff !important;
}


/* ===================================== */
/* PRODUCT TITLE FONT + HOVER FIX       */
/* ===================================== */

.shop-product-name{
    font-family: 'Fugaz One', sans-serif !important;
    transition: color 0.3s ease !important;
}

/* Remove red hover and force purple */
.shop-product-name:hover{
    color: #c77dff !important;
}

/* If parent link controls hover color */
a:hover .shop-product-name{
    color: #c77dff !important;
}



/* ===================================== */
/* PRODUCT PRICE PURPLE FIX             */
/* ===================================== */

.shop-product-cost{
    font-family: 'Fugaz One', sans-serif !important;
    color: #c77dff !important;
    transition: color 0.3s ease !important;
}

/* Ensure parent hover does not turn it red */
a:hover .shop-product-cost,
.product-preview-image-wrapper:hover .shop-product-cost{
    color: #c77dff !important;
}



/* ===================================== */
/* CARD HOVER → TITLE PURPLE            */
/* ===================================== */

.product-preview-image-wrapper:hover .shop-product-name,
a:hover .shop-product-name{
    color: #c77dff !important;
}



/* ===================================== */
/* FULL CARD HOVER PURPLE (FINAL FIX)   */
/* ===================================== */

/* When hovering the entire card */
.card-body:hover .shop-product-name,
.card-body:hover .shop-product-cost{
    color: #c77dff !important;
}

/* Also if parent card container is hovered */
.card:hover .shop-product-name,
.card:hover .shop-product-cost{
    color: #c77dff !important;
}



/* ===================================== */
/* MAIN SHOP BUTTON PURPLE STYLE        */
/* ===================================== */

a.btn.btn-accent.rounded-pill[href="#shop"]{
    background: #c77dff !important;
    color: #ffffff !important;
    border: 2px solid #c77dff !important;
    transition: all 0.3s ease !important;
}

a.btn.btn-accent.rounded-pill[href="#shop"]:hover{
    background: #a35cff !important;
    border-color: #a35cff !important;
    color: #ffffff !important;
}



/* ===================================== */
/* NAVBAR RED LINE → PURPLE REPLACE     */
/* ===================================== */

/* Replace red underline drawn via ::after */
li.spirit-navbar-item::after,
li.spirit-navbar-item:hover::after,
li.spirit-navbar-item.active::after{
    background-color: #c77dff !important;
    border-color: #c77dff !important;
}

/* If color comes from variable */
li.spirit-navbar-item{
    --color-accent: #c77dff !important;
    --color-default: #c77dff !important;
}



/* ===================================== */
/* NAVBAR TEXT WHITE FIX                */
/* ===================================== */

a[href="#shop"],
a[href="#servers"]{
    color: #ffffff !important;
}

a[href="#shop"] svg path,
a[href="#servers"] svg path{
    stroke: #ffffff !important;
}

/* Keep white on hover */
a[href="#shop"]:hover,
a[href="#servers"]:hover{
    color: #ffffff !important;
}

a[href="#shop"]:hover svg path,
a[href="#servers"]:hover svg path{
    stroke: #ffffff !important;
}



/* ===================================== */
/* CART COUNTER CLICKABLE FIX           */
/* ===================================== */

.cart-counter{
    cursor: pointer !important;
    pointer-events: auto !important;
    display: inline-block !important;
    transition: all 0.2s ease !important;
}

.cart-counter:hover{
    transform: scale(1.1);
}



/* ===================================== */
/* HOME BUTTON PURPLE STYLE             */
/* ===================================== */

a.btn.btn-outline-accent.rounded-pill{
    border: 2px solid #c77dff !important;
    color: #c77dff !important;
    background: transparent !important;
    transition: all 0.3s ease !important;
}

a.btn.btn-outline-accent.rounded-pill:hover{
    background: #c77dff !important;
    color: #ffffff !important;
    border-color: #c77dff !important;
}



/* ===================================== */
/* CART AMOUNT PANEL HOVER PURPLE       */
/* ===================================== */

.amount{
    transition: all 0.3s ease !important;
}

.amount:hover{
    border: 2px solid #c77dff !important;
}

/* ===================================== */
/* CHECKOUT BUTTON PURPLE FIX           */
/* ===================================== */

a.btn-cart-checkout{
    background: #c77dff !important;
    border: 2px solid #c77dff !important;
    color: #ffffff !important;
    transition: all 0.3s ease !important;
}

a.btn-cart-checkout:hover{
    background: #a35cff !important;
    border-color: #a35cff !important;
    color: #ffffff !important;
}

/* ===================================== */
/* DELETE (TRASH) BUTTON PURPLE + WHITE ICON */
/* ===================================== */

/* If trash button is red via accent class */
button.btn-accent,
a.btn-accent{
    background: #c77dff !important;
    border-color: #c77dff !important;
    color: #ffffff !important;
}

/* Make trash SVG icon white */
button.btn-accent svg path,
a.btn-accent svg path{
    stroke: #ffffff !important;
}



/* ===================================== */
/* REMOVE BUTTON (btn-danger) PURPLE    */
/* ===================================== */

button.btn-danger{
    background: #c77dff !important;
    border: 2px solid #c77dff !important;
    color: #ffffff !important;
}

button.btn-danger:hover{
    background: #a35cff !important;
    border-color: #a35cff !important;
    color: #ffffff !important;
}

/* Ensure trash icon stays white */
button.btn-danger svg path{
    stroke: #ffffff !important;
}



/* ===================================== */
/* CART ACTION PANEL BORDER PURPLE FIX  */
/* ===================================== */

.cart-item-actions{
    border: 2px solid #c77dff !important;
    border-radius: 16px !important;
    padding: 8px 12px !important;
    transition: border 0.3s ease !important;
}



/* ===================================== */
/* CUSTOM CHECKBOX + TEXT COLOR FIX     */
/* ===================================== */

/* Base square */
.form-check-sign{
    width: 18px;
    height: 18px;
    border: 2px solid #c77dff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

/* Hidden checkmark */
.form-check-sign::after{
    content: "✔";
    font-size: 12px;
    color: #ffffff;
    display: none;
}

/* When active (using .active class or :checked sibling pattern) */
.form-check-sign.active{
    background: #c77dff !important;
}

.form-check-sign.active::after{
    display: block;
}

/* Bright white text after checkbox when active */
.form-check-sign.active + *{
    color: #ffffff !important;
}

/* Default text white */
.form-check-sign + *{
    color: #cccccc;
    transition: color 0.2s ease;
}

/* Agreement links bright red */
a.color-accent{
    color: #ff1e1e !important;
}

/* Arrow or separator white (assuming it's plain text node or span) */
.form-check-sign + * a + *{
    color: #ffffff !important;
}



/* ===================================== */
/* FORCE BRIGHT WHITE TEXT WHEN CHECKED */
/* ===================================== */

/* Most common structure: <label class="form-check-label"> ... <span class="form-check-sign"></span> TEXT ... </label> */
label.form-check-label:has(.form-check-sign.active),
label:has(.form-check-sign.active){
  color: #ffffff !important;
  opacity: 1 !important;
}

/* If there is a real checkbox input */
label.form-check-label:has(input[type="checkbox"]:checked),
label:has(input[type="checkbox"]:checked){
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Make all plain text inside label white, but keep agreement links red */
label.form-check-label:has(.form-check-sign.active) *,
label:has(.form-check-sign.active) *{
  color: #ffffff !important;
}

label.form-check-label:has(input[type="checkbox"]:checked) *,
label:has(input[type="checkbox"]:checked) *{
  color: #ffffff !important;
}

/* Keep links with .color-accent bright red even inside white label */
label.form-check-label a.color-accent,
label a.color-accent{
  color: #ff1e1e !important;
}



/* ===================================== */
/* AGREEMENT LINKS STAY BRIGHT RED      */
/* ===================================== */

/* When checkbox active */
label:has(.form-check-sign.active) a.color-accent,
label:has(input[type="checkbox"]:checked) a.color-accent{
    color: #ff0000 !important;
}

/* Even on hover keep bright red */
label:has(.form-check-sign.active) a.color-accent:hover,
label:has(input[type="checkbox"]:checked) a.color-accent:hover{
    color: #ff0000 !important;
}



/* ===================================== */
/* FULL CART BADGE CLICKABLE FIX        */
/* ===================================== */

/* Make entire badge clickable */
.cart-badge{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Ensure children do not block clicks */
.cart-badge *{
    pointer-events: none !important;
}

/* But allow counter hover effects if needed */
.cart-badge{
    pointer-events: auto !important;
}



/* ===================================== */
/* THEME SWITCH BUTTON FULL CLICK FIX   */
/* ===================================== */

.btn-switch-theme{
    cursor: pointer !important;
    pointer-events: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Prevent inner SVG from blocking clicks */
.btn-switch-theme *{
    pointer-events: none !important;
}