/* 
Theme Name: Alkalined Child
Theme URI: https://discoverweb.solutions
Description: Alkalined Child is a child theme of Alkalined
Author: Discover Web Solutions
Author URI: https://discoverweb.solutions
Template: alkalined
Version: 2.0.0
Text Domain: alkalined-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
*/

:root{
  --alk-blue:   #36AFC5;
  --alk-bottle: #36AFC5;
  --alk-bottle-dk:#365e9a;
  --alk-ink:    #1f2937;
  --alk-muted:  #8a97a3;
  --alk-tint:   #f2fafc;
  --alk-tint-bd:#d7edf2;
  --alk-field-bd:#dbe4ea;
  --alk-focus:  #bfe4ec;
  --alk-card-bd:#e8edf1;
  --alk-radius: 8px;
  --alk-radius-lg: 14px;
  --alk-shadow: 0 6px 22px rgba(30,60,90,.05);
}

h1,h2,h3,h4,h5,h6 {
    color: inherit;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    margin-block-end: 0.5rem;
	margin-block-start: 2rem;
}

ol, ul {
	padding-top: 1em;
	padding-bottom: 1em;
}

table {
    margin-top: 1em;
}

/* =============================================================================
   1. SECTION CARDS  — the wrappers that carry the visible borders
   ============================================================================= */

/* --- CART: all three section boxes --- */
body.woocommerce-cart .elementor-widget-woocommerce-cart .e-cart-section{
  border:1px solid var(--alk-card-bd) !important;
  border-radius: var(--alk-radius-lg) !important;
  box-shadow: var(--alk-shadow) !important;
  background:#fff !important;
}
/* Totals box gets the pale-blue gradient to stand out */
body.woocommerce-cart .elementor-widget-woocommerce-cart .e-cart-totals.e-cart-section{
  background: linear-gradient(180deg, var(--alk-tint), #ffffff) !important;
  border-color: var(--alk-tint-bd) !important;
}



/* --- CHECKOUT: the four section wrappers --- */
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page .col-1,
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page .col-2,
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page .woocommerce-additional-fields,
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page .e-coupon-box,
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page .e-checkout__order_review{
  border:1px solid var(--alk-card-bd) !important;
  border-radius: var(--alk-radius-lg) !important;
  box-shadow: var(--alk-shadow) !important;
  background:#fff !important;
}
/* Order review wrapper gets the pale-blue gradient */
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page .e-checkout__order_review{
  background: linear-gradient(180deg, var(--alk-tint), #ffffff) !important;
  border-color: var(--alk-tint-bd) !important;
}
/* Kill any double border on the inner elements now that wrappers are the card */
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page #order_review,
body.woocommerce-cart .elementor-widget-woocommerce-cart .woocommerce-cart-form,
body.woocommerce-cart .elementor-widget-woocommerce-cart .cart_totals{
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}

/* =============================================================================
   2. BUTTONS
   ============================================================================= */

/* Primary CTAs: Proceed to checkout + Place order — solid Bottle Blue */
body.woocommerce-cart .elementor-widget-woocommerce-cart .wc-proceed-to-checkout a.checkout-button.button,
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page #payment #place_order{
  background-color: var(--alk-bottle) !important;
  color:#fff !important;
  border:0 !important;
  border-radius: var(--alk-radius) !important;
  font-weight:700 !important;
  letter-spacing:.02em;
  padding:15px 24px !important;
  transition:background-color .15s ease;
}
body.woocommerce-cart .elementor-widget-woocommerce-cart .wc-proceed-to-checkout a.checkout-button.button:hover,
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page #payment #place_order:hover{
  background-color: var(--alk-bottle-dk) !important;
}
@media (min-width: 601px) {
	body.woocommerce-cart .elementor-widget-woocommerce-cart .wc-proceed-to-checkout {
       width: 50%;
       margin: auto;
	}
}

/* Secondary buttons: Update cart + Apply coupon — soft blue, Bottle-Blue text */
body.woocommerce-cart .elementor-widget-woocommerce-cart button[name="update_cart"],
body.woocommerce-cart .elementor-widget-woocommerce-cart .coupon .button,
body.woocommerce-cart .elementor-widget-woocommerce-cart .coupon .e-apply-coupon{
  background-color:#eef4f6 !important;
  color: var(--alk-bottle) !important;
  border:1px solid var(--alk-tint-bd) !important;
  border-radius: var(--alk-radius) !important;
  font-weight:700 !important;
}
body.woocommerce-cart .elementor-widget-woocommerce-cart button[name="update_cart"]:hover,
body.woocommerce-cart .elementor-widget-woocommerce-cart .coupon .button:hover,
body.woocommerce-cart .elementor-widget-woocommerce-cart .coupon .e-apply-coupon:hover{
  background-color:#e2eef1 !important;
}

/* =============================================================================
   3. FORM FIELDS
   ============================================================================= */
body.woocommerce-cart .elementor-widget-woocommerce-cart input.qty,
body.woocommerce-cart .elementor-widget-woocommerce-cart #coupon_code,
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page .input-text,
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page textarea,
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page .select2-container .select2-selection--single{
  border:1px solid var(--alk-field-bd) !important;
  border-radius: var(--alk-radius) !important;
  transition:border-color .15s ease, box-shadow .15s ease;
}
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page .select2-container .select2-selection--single{
  height:44px !important; display:flex; align-items:center; padding:0 6px;
}
body.woocommerce-cart .elementor-widget-woocommerce-cart input.qty:focus,
body.woocommerce-cart .elementor-widget-woocommerce-cart #coupon_code:focus,
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page .input-text:focus,
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page textarea:focus,
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page .select2-container--focus .select2-selection--single{
  border-color: var(--alk-blue) !important;
  box-shadow:0 0 0 2px var(--alk-focus) !important;
  outline:0 !important;
}

/* =============================================================================
   4. CART — text details
   ============================================================================= */

/* "Added to your cart" notice */
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info{
  background: var(--alk-tint) !important;
  border:1px solid var(--alk-tint-bd) !important;
  border-top:3px solid var(--alk-blue) !important;
  border-radius: var(--alk-radius-lg) !important;
  color:#2b5b64 !important;
}
body.woocommerce-cart .woocommerce-message::before,
body.woocommerce-cart .woocommerce-info::before{ color: var(--alk-blue) !important; }

/* Table header micro-labels */
body.woocommerce-cart .elementor-widget-woocommerce-cart table.cart thead th{
  text-transform:uppercase !important;
  font-size:11px !important;
  letter-spacing:.09em !important;
  color: var(--alk-muted) !important;
}

/* Product name in Bottle Blue */
body.woocommerce-cart .elementor-widget-woocommerce-cart table.cart td.product-name a{
  color: var(--alk-bottle) !important;
  font-weight:500 !important;
}

/* Grand total in Bottle Blue */
body.woocommerce-cart .elementor-widget-woocommerce-cart .cart_totals .order-total .amount,
body.woocommerce-cart .elementor-widget-woocommerce-cart .cart_totals .order-total th{
  color: var(--alk-bottle) !important;
  font-size:16px !important;
}

/* =============================================================================
   5. CHECKOUT — text details
   ============================================================================= */

/* Re-colour the order summary via Elementor's own variables (kills the teal) */
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page{
  --order-summary-items-color: var(--alk-ink);
  --order-summary-totals-color: var(--alk-ink);
}

/* Section headings ("Billing Details", "Your Order") in Bottle Blue */
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page .woocommerce-billing-fields h3,
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page #order_review_heading{
  color: var(--alk-bottle) !important;
  letter-spacing:.01em;
}

/* Required asterisks in Alkaline Blue */
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page .required{
  color: var(--alk-blue) !important; border:0 !important;
}

/* Grand total in Bottle Blue (overrides the neutral variable above) */
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page .woocommerce-checkout-review-order-table .order-total .amount,
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page .woocommerce-checkout-review-order-table .order-total th{
  color: var(--alk-bottle) !important;
  font-size:16px !important;
}

/* Payment box — lighter than the order card (Stripe iframe stays as-is) */
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page #payment{
  background:#fbfcfd !important;
  border:1px solid var(--alk-tint-bd) !important;
  border-radius:12px !important;
}

/* Remove the default <fieldset> "groove" border around the Stripe card element.
   (The card inputs themselves are in Stripe's iframe and stay untouched.) */
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page #wc-stripe-upe-form,
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page .wc-upe-form.wc-payment-form{
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
  min-inline-size:auto;
}

/* "Have a coupon?" toggle link */
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page .woocommerce-form-coupon-toggle a,
body.woocommerce-checkout .elementor-widget-woocommerce-checkout-page .showcoupon{
  color: var(--alk-blue) !important;
}

/* Woocommerce Messages */
/* 1. Convert Woo notices to Flexbox for perfect vertical centering */
.woocommerce-message, 
.woocommerce-info, 
.woocommerce-error {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 15px; /* Adds breathing room if text and button bump into each other on mobile */
}

/* 2. Override the old float method and push the button to the far right */
.woocommerce-message .button, 
.woocommerce-info .button, 
.woocommerce-error .button {
    float: none !important;
    margin-left: auto !important;
    margin-bottom: 0 !important;
}

/* 3. Vertically center the checkmark/alert icon on the left */
.woocommerce-message::before, 
.woocommerce-info::before, 
.woocommerce-error::before {
    top: 50% !important;
    transform: translateY(-50%) !important;
}