/*
Theme Name: Hostiko Child
 Theme URI: https://hostingclown.com
 Description: Child theme for Hostiko with HostingClown customizations
 Author: HostingClown
 Template: hostiko
 Version: 1.0.0
*/
 ===============================
   Custom HostingClown Product Page Styles
   =============================== */

/* Product Title (Main Heading) */
.product_title {
  color: #025cfb; /* Blue heading */
  font-weight: 700;
}

/* Subheadings in description */
.woocommerce-product-details__short-description h2,
.woocommerce-product-details__short-description h3 {
  color: #ff7d1a; /* Orange subheading */
  font-weight: 600;
}

/* Add to Cart Button */
.single_add_to_cart_button {
  background-color: #025cfb !important;
  color: #fff !important;
  border-radius: 8px !important; /* Rounded corners */
  padding: 12px 24px !important;
  font-weight: bold !important;
  transition: 0.3s ease;
}
.single_add_to_cart_button:hover {
  background-color: #ff7d1a !important;
}

/* Variation dropdown label */
.woocommerce div.product form.cart .variations label {
  color: #025cfb !important;   /* Blue label */
  font-weight: 600;
}

/* Variation dropdown field */
.woocommerce div.product form.cart .variations select {
  border: 2px solid #025cfb !important;
  border-radius: 6px;
  padding: 6px 10px;
  background-color: #f9f9f9 !important;
  color: #333;
}

/* Variation dropdown hover effect */
.woocommerce div.product form.cart .variations select:hover {
  border-color: #ff7d1a !important;
  background-color: #fff7f0 !important;
  color: #ff7d1a !important;
}

/* Product tabs (Description, Additional Information) */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: #025cfb !important;
  font-weight: 600;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: #ff7d1a !important;
  font-weight: 700 !important;
}

/* Product price */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: #ff7d1a !important;
  font-weight: bold !important;
}
/* ===============================
   Header Cart Icon Styling
   =============================== */

/* Default background */
.site-header-cart .cart-contents,
.header-cart a.cart-contents {
  background-color: #025cfb !important; /* Blue */
  color: #fff !important;
  border-radius: 50%; /* Optional round icon */
  padding: 8px 12px;
  transition: 0.3s ease;
}

/* Hover effect */
.site-header-cart .cart-contents:hover,
.header-cart a.cart-contents:hover {
  background-color: #ff7d1a !important; /* Orange */
  color: #fff !important;
}
/* ===============================
   Header Cart Button Styling (Hostiko)
   =============================== */

.navbar-area .navbar-area-2 .cart-btn .btn,
.navbar .shop-cart-area a {
  background-color: #025cfb !important; /* Blue */
  color: #fff !important;
  border-radius: 6px;
  padding: 8px 14px;
  transition: 0.3s ease;
}

.navbar-area .navbar-area-2 .cart-btn .btn:hover,
.navbar .shop-cart-area a:hover {
  background-color: #ff7d1a !important; /* Orange */
  color: #fff !important;
}
/* ===============================
   Force Override Header Cart Background
   =============================== */

/* Cart wrapper background */
.navbar .shop-cart-area,
.navbar-area .cart-btn {
  background-color: #025cfb !important; /* Blue */
  border-radius: 6px;
  transition: 0.3s ease;
}

/* Cart wrapper hover */
.navbar .shop-cart-area:hover,
.navbar-area .cart-btn:hover {
  background-color: #ff7d1a !important; /* Orange */
}

/* Cart icon inside */
.navbar .shop-cart-area a,
.navbar-area .cart-btn .btn {
  color: #fff !important;
}
/* ===============================
   Force Override Header Cart Styling
   =============================== */

/* Default cart background */
.site-header-cart .cart-contents,
.header-cart a.cart-contents {
  background: none !important;        /* Remove image/sprite */
  background-color: #025cfb !important; /* Blue */
  color: #fff !important;
  border-radius: 50% !important;
  padding: 8px 12px !important;
  transition: 0.3s ease !important;
}

/* Hover effect */
.site-header-cart .cart-contents:hover,
.header-cart a.cart-contents:hover {
  background: none !important;        /* Remove hover sprite */
  background-color: #ff7d1a !important; /* Orange */
  color: #fff !important;
}
/* Remove Hostiko cart sprite and apply custom colors */
.site-header-cart .cart-contents,
.header-cart a.cart-contents {
  background-image: none !important;   /* Kill the sprite */
  background-color: #025cfb !important; /* Blue default */
  color: #fff !important;
  border-radius: 50% !important;
  padding: 8px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hover state */
.site-header-cart .cart-contents:hover,
.header-cart a.cart-contents:hover {
  background-image: none !important;   /* Kill hover sprite */
  background-color: #ff7d1a !important; /* Orange */
  color: #fff !important;
}
/* Force header cart background to blue */
.header-cart a.cart-contents,
.navbar-area .navbar-area-2 .cart-btn .btn,
.shop-cart-area a {
    background: #025cfb !important; /* Blue */
    color: #fff !important;
    border-radius: 50% !important;
    padding: 8px 12px !important;
    transition: 0.3s ease;
}

/* Hover effect */
.header-cart a.cart-contents:hover,
.navbar-area .navbar-area-2 .cart-btn .btn:hover,
.shop-cart-area a:hover {
    background: #ff7d1a !important; /* Orange */
    color: #fff !important;
}
/* Checkout Thank You Page Heading Colors */
.woocommerce-order-details h2,
.woocommerce-customer-details h2,
.woocommerce-order-overview h2,
.woocommerce-bacs-bank-details h2 {
  color: #025cfb !important;
  font-weight: 700;
  border-bottom: 2px solid #025cfb;
  padding-bottom: 4px;
}
/* Checkout Page: Place Order Button Styling */
.woocommerce-checkout #place_order {
    background-color: #025cfb !important;
    color: #fff !important;
    font-weight: bold !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 12px 24px !important;
    transition: 0.3s ease;
}
.woocommerce-checkout #place_order:hover {
    background-color: #ff7d1a !important;
    color: #fff !important;
}