/*
Theme Name: Blocksy Child
Description: Blocksy Child theme with floating WhatsApp & Call icons.
Author: Creative Themes
Template: blocksy
Text Domain: blocksy
Version: 1.0.0
*/

/* Floating Icons Container */
.floating-icons {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    display: none;
    flex-direction: column;
}

/* Default gap for all icons */
.icon-item {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Keep icon on left by default */
    background: #003366;
    border-radius: 0 5px 5px 0;
    padding: 8px;
    cursor: pointer;
    width: 50px;
    overflow: hidden;
    transition: width 0.5s ease-in-out;
    flex-direction: row; /* Default: icon on left */
}

.icon-item.open {
    width: 150px; /* Expand width */
    flex-direction: row-reverse; /* Move icon to right */
}

.icon-item span {
    color: white;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    margin-right: 8px; /* Space between text and icon */
}

.icon-item.open span {
    opacity: 1;
}

.icon-item i {
    transition: transform 0.5s ease-in-out;
}


/* Icon Image */
.icon-item img {
    width: 32px;
    height: 32px;
    filter: brightness(0) invert(1);
}

/* Icon Text */
.icon-text {
    color: white;
    font-size: 14px;
    margin-left: 10px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.icon-item:hover .icon-text {
    opacity: 1;
}

/* Show text on hover for desktop */
@media (min-width: 769px) {
  .icon-item:hover .icon-text {
    opacity: 1 !important;
  }
  .icon-item:hover {
    width: 140px !important;
  }
}


/* Add margin between icons */
.icon-item:not(:first-child) {
    margin-top: 6px; /* Adds gap above every icon except the first */
}


.icon-item:not(:last-child) {
    margin-bottom: 6px; /* Adds gap below every icon except the last */
}

/* Hover Effect */
.icon-item:hover {
    width: 140px;
}

.icon-item:hover {
    width: 140px;
}



/* === Custom Clean Social Icons in Header (Blocksy override) === */

/* Hide Blocksy default inline SVGs */
.ct-header-socials .ct-icon-container svg {
    display: none !important;
}

/* Standardize icon container */
.ct-header-socials .ct-icon-container {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-size: 85%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Facebook */
.ct-header-socials a[data-network="facebook"] .ct-icon-container {
    background-image: url('/wp-content/themes/blocksy-child/img/facebook.svg');
}

/* Instagram */
.ct-header-socials a[data-network="instagram"] .ct-icon-container {
    background-image: url('/wp-content/themes/blocksy-child/img/instagram.svg');
}

/* Twitter (or X) */
.ct-header-socials a[data-network="twitter"] .ct-icon-container,
.ct-header-socials a[data-network="x"] .ct-icon-container {
    background-image: url('/wp-content/themes/blocksy-child/img/twitter.svg');
}

/* YouTube */
.ct-header-socials a[data-network="youtube"] .ct-icon-container {
    background-image: url('/wp-content/themes/blocksy-child/img/Youtube.svg');
}

.ct-header-socials .ct-icon-container:hover {
    transform: scale(1.1);
    opacity: 0.8;
    transition: all 0.2s ease;
}

/* Add to the main .ct-icon-container rule */
transition: all 0.2s ease-in-out;


/* Custom WooCommerce Sale Badge - Top Right */
/* Make figure a positioned container */
.woocommerce ul.products li.product figure {
    position: relative;
}

/* Position the custom sale badge */
.woocommerce ul.products li.product figure .onsale.custom-sale-badge {
    background-color: #e00000 !important; /* Bright Red */
    color: #ffffff !important;            /* White Text */
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.2;
    text-transform: uppercase;
    position: absolute;
    top: 10px;
    right: 10px;
    left: auto;
    z-index: 20;
}


/* Single Product Page - Sale Badge Positioning */
.woocommerce div.product .ct-product-gallery-container {
    position: relative; /* Make gallery container the bounding box */
}

.woocommerce div.product .ct-product-gallery-container .onsale.custom-sale-badge {
    background-color: #e00000 !important; /* Bright Red */
    color: #ffffff !important;            /* White Text */
    font-weight: bold;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.2;
    text-transform: uppercase;
    position: absolute;
    top: 12px;
    right: 12px;
    left: auto;
    z-index: 30; /* keep above zoom icons */
}