/* ============================================================
   Metta Pic v14.5 — Cart · Checkout · Chat FAB · Soft shadows
   ============================================================ */

:root {
  --mp-navy: #07152f;
  --mp-orange: #ff6b35;
  --mp-shadow-navy: 0 6px 20px rgba(7, 21, 47, 0.07);
  --mp-shadow-orange: 0 4px 14px rgba(255, 107, 53, 0.08);
  --mp-shadow-soft: 0 3px 12px rgba(0, 0, 0, 0.04);
  --mp-shadow-white: 0 2px 8px rgba(255, 255, 255, 0.5);
}

/* ---- Soft micro-shadows on cards/boxes ---- */
.mp-pcard,
.product-card,
.mp-product-info-box,
.mp-val,
.trust-item,
.mp-article,
.category-tile,
.mp-cart-items,
.mp-cart-summary,
.form-card,
.summary-card,
.cart-list,
.faq-item,
.mp-contact-card {
  box-shadow: var(--mp-shadow-navy), var(--mp-shadow-soft) !important;
  border-color: #e4e9f0 !important;
}
.mp-pcard:hover,
.product-card:hover {
  box-shadow: 0 14px 36px rgba(7, 21, 47, 0.1), 0 0 0 1px rgba(255, 107, 53, 0.06) !important;
}
.mp-custom-chip,
.mp-var-total {
  box-shadow: 0 8px 24px rgba(7, 21, 47, 0.18) !important;
}
.mp-hero2-hcard {
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

/* ---- CART PAGE ---- */
body.woocommerce-cart .mp-cart-item h2,
body.woocommerce-cart .mp-cart-item h2 a,
.mp-cart-item h2,
.mp-cart-item h2 a {
  color: #07152f !important;
}
.mp-cart-summary,
.cart .summary-card,
.woocommerce-cart .cart_totals,
.woocommerce-cart .cart-collaterals .cart_totals {
  background: #fff !important;
  border: 1px solid #e4e9f0 !important;
  border-radius: 18px !important;
  box-shadow: var(--mp-shadow-navy) !important;
  padding: 20px !important;
}
.mp-cart-summary h2,
.cart_totals h2,
.cart_totals .shop_table th,
.woocommerce-cart .cart-subtotal th,
.woocommerce-cart .order-total th {
  color: #07152f !important;
  font-weight: 800 !important;
}
.woocommerce-cart .order-total strong,
.woocommerce-cart .order-total .amount,
.mp-cart-summary .order-total .amount {
  color: #07152f !important;
  font-weight: 900 !important;
}
/* Proceed to checkout / update cart buttons */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart a.checkout-button,
.woocommerce-cart .button.checkout,
.mp-cart-summary .checkout-button,
.woocommerce-cart button[name="update_cart"],
.woocommerce-cart .button[name="update_cart"],
.cart .button {
  background: #07152f !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  min-height: 48px !important;
  box-shadow: 0 8px 22px rgba(7, 21, 47, 0.2) !important;
  transition: background .2s, transform .15s !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart a.checkout-button:hover,
.cart .button:hover {
  background: #ff6b35 !important;
  color: #fff !important;
  transform: translateY(-1px);
}
/* Fixed bottom bar on cart/checkout mobile */
.mp-cart-sticky,
.mp-checkout-sticky,
.woocommerce-cart .mp-sticky-checkout,
.woocommerce-checkout .mp-sticky-checkout,
body.woocommerce-cart .mp-bottom-bar,
body.woocommerce-checkout .mp-bottom-bar {
  background: #fff !important;
  border-top: 1px solid #e4e9f0 !important;
  box-shadow: 0 -8px 28px rgba(7, 21, 47, 0.1) !important;
  border-radius: 18px 18px 0 0 !important;
}
.mp-cart-sticky .button,
.mp-checkout-sticky .button,
.mp-bottom-bar .button,
.mp-bottom-bar a.checkout-button {
  background: #07152f !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
}
.mp-cart-sticky .amount,
.mp-bottom-bar .amount {
  color: #07152f !important;
  font-weight: 900 !important;
}

/* ---- CHECKOUT ---- */
.woocommerce-checkout .form-card,
.woocommerce-checkout .summary-card,
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review {
  background: #fff !important;
  border: 1px solid #e4e9f0 !important;
  border-radius: 18px !important;
  box-shadow: var(--mp-shadow-navy) !important;
}
.woocommerce-checkout h3,
.woocommerce-checkout .form-row label,
.woocommerce-checkout label {
  color: #07152f !important;
  font-weight: 800 !important;
}
.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  border: 1.5px solid #d5dce8 !important;
  border-radius: 12px !important;
  color: #07152f !important;
  background: #fff !important;
}
.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  border-color: #ff6b35 !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.12) !important;
}
#place_order,
.woocommerce-checkout button#place_order,
.woocommerce-checkout .place-order .button {
  background: #07152f !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  min-height: 52px !important;
  box-shadow: 0 10px 28px rgba(7, 21, 47, 0.22) !important;
}
#place_order:hover {
  background: #ff6b35 !important;
}

/* Field labels with SVG icons (checkout + cart coupon) */
.woocommerce-checkout .form-row-first > label,
.woocommerce-checkout .form-row-last > label,
.woocommerce-checkout .form-row-wide > label,
.woocommerce-billing-fields label,
.woocommerce-shipping-fields label,
.woocommerce-additional-fields label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  margin-bottom: 6px !important;
}
/* Icon via mask on ::before for common fields */
.woocommerce-checkout #billing_first_name_field > label::before,
.woocommerce-checkout #billing_last_name_field > label::before,
.woocommerce-checkout #shipping_first_name_field > label::before {
  content: '' !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  background-color: #07152f !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat !important;
}
.woocommerce-checkout #billing_phone_field > label::before,
.woocommerce-checkout #billing_email_field > label::before {
  content: '' !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  background-color: #07152f !important;
}
.woocommerce-checkout #billing_phone_field > label::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}
.woocommerce-checkout #billing_email_field > label::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E") center / contain no-repeat !important;
}
.woocommerce-checkout #billing_address_1_field > label::before,
.woocommerce-checkout #billing_city_field > label::before,
.woocommerce-checkout #billing_state_field > label::before,
.woocommerce-checkout #billing_postcode_field > label::before {
  content: '' !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  background-color: #07152f !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

/* ---- CHAT / SUPPORT FAB ---- */
.mp-support-fab,
#mp-support-fab {
  background: #07152f !important;
  background-image: linear-gradient(145deg, #0c1f45 0%, #07152f 100%) !important;
  color: #fff !important;
  border: 2px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 8px 28px rgba(7, 21, 47, 0.35),
    0 0 0 4px rgba(255, 107, 53, 0.15) !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
}
.mp-support-fab:hover {
  background: #ff6b35 !important;
  background-image: none !important;
  box-shadow: 0 10px 32px rgba(255, 107, 53, 0.4) !important;
  transform: scale(1.06) !important;
}
.mp-support-fab-inner svg,
.mp-support-fab svg {
  stroke: #fff !important;
  color: #fff !important;
}
.mp-support-popup {
  background: rgba(7, 21, 47, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 20px 50px rgba(7, 21, 47, 0.4) !important;
  border-radius: 20px !important;
}
.mp-support-step h3 { color: #fff !important; }
.mp-support-step p { color: rgba(255, 255, 255, 0.65) !important; }
.mp-support-action {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  border-radius: 14px !important;
}
.mp-support-action:hover {
  background: rgba(255, 107, 53, 0.2) !important;
  border-color: rgba(255, 107, 53, 0.35) !important;
}
.mp-chat-submit,
.mp-chat-send-form button {
  background: #ff6b35 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
}
.mp-chat-submit:hover {
  background: #e85a28 !important;
}
.mp-support-step input,
.mp-support-step textarea {
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
  border-radius: 12px !important;
}
.mp-support-step input:focus,
.mp-support-step textarea:focus {
  border-color: #ff6b35 !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2) !important;
}

/* ---- Mobile responsive cart/checkout ---- */
@media (max-width: 900px) {
  .commerce-grid,
  .checkout-layout,
  .woocommerce-cart .woocommerce,
  .woocommerce-checkout .col2-set {
    display: block !important;
  }
  .mp-cart-summary,
  .summary-card,
  .cart_totals {
    margin-top: 16px !important;
    position: static !important;
  }
  .mp-cart-item {
    grid-template-columns: 72px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  .mp-cart-image {
    width: 72px !important;
    height: 72px !important;
  }
  .woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
  #place_order {
    width: 100% !important;
    font-size: 14px !important;
  }
  .mp-support-fab {
    width: 52px !important;
    height: 52px !important;
    bottom: 80px !important;
  }
  .form-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .mp-cart-item h2 {
    font-size: 13px !important;
  }
  .mp-support-popup {
    width: calc(100vw - 24px) !important;
  }
}