/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* === Modern WooCommerce Blocks Checkout Styling === */


/* Place Order Button */
.wc-block-checkout__place-order-button,
.wc-block-components-checkout-place-order-button {
  display: inline-block;
  width: 100%;
  background: linear-gradient(135deg, #007cba, #005b99);
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  border: none;
  border-radius: 10px;
  padding: 1rem 1.5rem;
  font-size: 16px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 5px 15px rgba(0, 124, 186, 0.3);
}

.cart-subtotal {display: none;}

tr.order-total td strong {
    font-weight: bold;
}

#place_order.button.alt {margin-top:20px;}

/* =========================
   Floating labels (WooCommerce Checkout)
     ========================= */

.woocommerce-checkout .form-row.flabel {
  position: relative;
}

/* The label becomes the floating "placeholder" */
.woocommerce-checkout .form-row.flabel > label {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0 6px;
  background: #fff; /* match input background */
  pointer-events: none;
  transition: 0.15s ease;
  opacity: 0.75;
  z-index: 2;
}

/* Float when focused or filled */
.woocommerce-checkout .form-row.flabel.is-focused > label,
.woocommerce-checkout .form-row.flabel.has-value > label {
  top: -8px;
  transform: none;
  font-size: 12px !important;
  opacity: 1;
}

/* Add top padding so input text doesn't collide with label */
.woocommerce-checkout .form-row.flabel input.input-text,
.woocommerce-checkout .form-row.flabel textarea,
.woocommerce-checkout .form-row.flabel select {
  padding-top: 22px;
}

/* Optional: make placeholder subtle (label is the main cue now) */
.woocommerce-checkout .form-row.flabel input::placeholder,
.woocommerce-checkout .form-row.flabel textarea::placeholder {
  opacity: 0.35;
}


/* =========================
   Live Activity
     ========================= */

.checkout-live-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid #d8f3e6;
  border-radius: 999px;
  background: #f3faf6;
  font-size: 14px;
}

/* Pulsing dot */
.checkout-live-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #19c37d;
  position: relative;
}

.checkout-live-dot::after{
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  background: rgba(25,195,125,0.25);
  animation: checkoutPulse 1.6s ease-out infinite;
}

@keyframes checkoutPulse{
  0%   { transform: scale(0.6); opacity: 0.8; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

.checkout-live-count {
  display: inline-block;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.checkout-live-count.bump {
  transform: scale(1.15);
  opacity: 0.7;
}

@media (max-width: 767px) {

  /* Make product column take more space */
  .woocommerce-checkout-review-order-table td.product-name {
    width: 70%;
  }

  /* Push subtotal to the right */
  .woocommerce-checkout-review-order-table td.product-total {
    width: 30%;
    text-align: right;
    padding-left: 15px;
    white-space: nowrap;
  }
  .woocommerce-checkout-review-order-table th.product-total,
  .woocommerce-checkout-review-order-table td.product-total {
    text-align: left;
    padding-left: 0;
  }

}

@media (max-width: 767px) {

  /* Stripe payment method icons: make smaller + align with label */
  #payment .payment_methods label .wc-stripe-card-icons-container{
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: 8px !important;
	margin-top: 4px;
    vertical-align: middle !important;
  }

  #payment .payment_methods label 
  .wc-stripe-card-icons-container img.wc-stripe-card-icon{
    height: 18px !important;
    width: auto !important;
  }

}

/* Hide the whole billing country field visually, but keep it in the form for Stripe */
#billing_country_field {
  display: none !important;
}