/* woo-blocks.css — Tripzao WooCommerce Block Cart + Checkout v1.3.2
   Targets WC Block-specific classes to apply TZPM design system.
   WC functionality (payment/validation/AJAX) stays 100% WC-native. */

:root {
  --font-sans: 'Plus Jakarta Sans', sans-serif;
  --font-bn: 'Hind Siliguri', sans-serif;
  --font-display: 'Fraunces', serif;
  --ink-900: #0a1226; --ink-700: #1f2937; --ink-600: #374151;
  --ink-500: #6b7280; --ink-400: #9ca3af; --ink-300: #d1d5db;
  --ink-200: #e5e7eb; --ink-100: #f1f5f9;
  --blue-950: #03112b; --blue-900: #071a3d; --blue-800: #0a2452;
  --blue-700: #0f3275; --blue-600: #1040a0; --blue-500: #1d4ed8;
  --blue-50: #eff6ff;
  --yellow-500: #f7ba17; --yellow-400: #fcd34d; --yellow-50: #fffbeb;
  --coral-500: #ef4444; --mint-500: #22c55e; --mint-100: #dcfce7;
  --bg: #f8fafc; --bg-soft: #f1f5f9;
  --shadow-sm: 0 1px 4px rgba(10,18,38,.07), 0 2px 8px rgba(10,18,38,.05);
  --shadow-md: 0 4px 16px rgba(10,18,38,.10), 0 2px 8px rgba(10,18,38,.06);
  --shadow-lg: 0 8px 32px rgba(10,18,38,.13), 0 2px 8px rgba(10,18,38,.06);
}

/* ═══════════════════════════════════════════════
   PAGE WRAPPER — cart and checkout pages
═══════════════════════════════════════════════ */

.woocommerce-cart .site-main,
.woocommerce-checkout .site-main {
  background: var(--bg);
  padding: 0 0 60px;
}

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  font-family: var(--font-sans);
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  color: var(--ink-900);
}

@media (min-width: 768px) {
  .wp-block-woocommerce-cart,
  .wp-block-woocommerce-checkout { padding: 0 24px !important; }
}

/* ═══════════════════════════════════════════════
   LAYOUT — 2-column (items left, summary right)
═══════════════════════════════════════════════ */

.wc-block-cart,
.wc-block-checkout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 20px !important;
  align-items: start !important;
}

@media (min-width: 1024px) {
  .wc-block-cart,
  .wc-block-checkout {
    grid-template-columns: 1.7fr 1fr !important;
    gap: 28px !important;
  }
}

.wc-block-cart__main,
.wc-block-checkout__main {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
  position: sticky !important;
  top: 20px;
}

/* ═══════════════════════════════════════════════
   CART ITEMS
═══════════════════════════════════════════════ */

.wc-block-cart-items {
  background: #fff;
  border-radius: 20px;
  border: 1px solid var(--ink-100);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.wc-block-cart-items__header {
  display: none; /* hide default table headers */
}

.wc-block-cart-item {
  display: grid !important;
  grid-template-columns: 80px 1fr auto !important;
  gap: 14px !important;
  padding: 16px !important;
  border-bottom: 1px solid var(--ink-100) !important;
  align-items: center !important;
  transition: background .15s ease;
}

.wc-block-cart-item:last-child { border-bottom: 0 !important; }
.wc-block-cart-item:hover { background: var(--bg-soft); }

/* Item image */
.wc-block-cart-item__image {
  width: 80px !important;
  height: 80px !important;
  flex-shrink: 0;
}

.wc-block-cart-item__image a,
.wc-block-cart-item__image img {
  width: 80px !important;
  height: 80px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  display: block;
}

/* Product info */
.wc-block-cart-item__product {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wc-block-components-product-name,
.wc-block-components-product-name a {
  font-family: var(--font-bn) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--ink-900) !important;
  letter-spacing: -.005em;
  line-height: 1.3 !important;
  text-decoration: none !important;
}

.wc-block-components-product-metadata {
  font-size: 12px !important;
  color: var(--ink-500) !important;
  font-family: var(--font-sans) !important;
}

/* Product price */
.wc-block-components-product-price {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.wc-block-components-product-price .price {
  font-family: var(--font-sans) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  color: var(--ink-900) !important;
  letter-spacing: -.01em;
}

.wc-block-components-product-price del {
  font-size: 12px !important;
  color: var(--ink-400) !important;
  font-weight: 500 !important;
}

/* Quantity selector */
.wc-block-components-quantity-selector {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  background: var(--bg-soft) !important;
  border: 1.5px solid var(--ink-200) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  height: 36px !important;
}

.wc-block-components-quantity-selector__button {
  width: 36px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  color: var(--ink-700) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  transition: background .15s ease !important;
  flex-shrink: 0;
}

.wc-block-components-quantity-selector__button:hover:not(:disabled) {
  background: var(--blue-50) !important;
  color: var(--blue-700) !important;
}

.wc-block-components-quantity-selector__button:disabled {
  opacity: .3 !important;
  cursor: not-allowed !important;
}

.wc-block-components-quantity-selector__input {
  width: 40px !important;
  text-align: center !important;
  border: none !important;
  border-left: 1px solid var(--ink-200) !important;
  border-right: 1px solid var(--ink-200) !important;
  background: #fff !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--ink-900) !important;
  height: 34px !important;
  padding: 0 !important;
  -moz-appearance: textfield !important;
}

/* Remove button */
.wc-block-cart-item__remove-link {
  font-family: var(--font-sans) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--coral-500) !important;
  text-decoration: none !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  transition: background .15s ease !important;
  display: inline-block;
  margin-top: 4px;
}

.wc-block-cart-item__remove-link:hover {
  background: #fee2e2 !important;
  color: #dc2626 !important;
}

/* ═══════════════════════════════════════════════
   ORDER SUMMARY (right column)
═══════════════════════════════════════════════ */

.wc-block-cart__totals-wrapper,
.wc-block-components-order-summary,
.wp-block-woocommerce-cart-totals-block {
  background: #fff !important;
  border-radius: 22px !important;
  border: 1px solid var(--ink-100) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden !important;
}

/* Summary heading */
.wc-block-components-order-summary__button,
.wc-block-cart-order-summary-heading__title {
  font-family: var(--font-bn) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--ink-900) !important;
  padding: 18px 20px !important;
  border-bottom: 1px solid var(--ink-100) !important;
  display: block;
}

/* Summary rows */
.wc-block-components-totals-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px 20px !important;
  font-family: var(--font-sans) !important;
  font-size: 13.5px !important;
  border-bottom: 1px solid var(--ink-100) !important;
}

.wc-block-components-totals-item:last-child { border-bottom: 0 !important; }

.wc-block-components-totals-item__label {
  color: var(--ink-600) !important;
  font-weight: 500 !important;
  font-family: var(--font-sans) !important;
}

.wc-block-components-totals-item__value {
  font-weight: 700 !important;
  color: var(--ink-900) !important;
  font-family: var(--font-sans) !important;
}

/* Grand total row */
.wc-block-components-totals-footer-item {
  background: linear-gradient(135deg, var(--blue-50), #fff) !important;
  padding: 16px 20px !important;
  border-top: 2px solid var(--blue-100) !important;
  border-bottom: 0 !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-family: var(--font-bn) !important;
  font-weight: 700 !important;
  color: var(--blue-700) !important;
  font-size: 14px !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--ink-900) !important;
  letter-spacing: -.02em;
}

/* Discount row */
.wc-block-components-totals-discount .wc-block-components-totals-item__value,
.wc-block-components-totals-coupon__values {
  color: var(--mint-500) !important;
}

/* ═══════════════════════════════════════════════
   COUPON FORM
═══════════════════════════════════════════════ */

.wc-block-components-totals-coupon {
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--ink-100) !important;
}

.wc-block-components-totals-coupon__form {
  display: flex !important;
  gap: 8px !important;
}

.wc-block-components-totals-coupon__form .wc-block-components-text-input,
.wc-block-components-totals-coupon__input {
  flex: 1 !important;
}

.wc-block-components-totals-coupon__button {
  background: var(--blue-700) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 0 16px !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  height: 44px !important;
  flex-shrink: 0;
  transition: background .15s ease !important;
}

.wc-block-components-totals-coupon__button:hover {
  background: var(--blue-800) !important;
}

/* ═══════════════════════════════════════════════
   CHECKOUT BUTTON (proceed to checkout)
═══════════════════════════════════════════════ */

.wc-block-cart__submit-container {
  padding: 16px 20px !important;
}

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-proceed-to-checkout-block a {
  width: 100% !important;
  background: linear-gradient(135deg, var(--yellow-400), var(--yellow-500)) !important;
  color: var(--ink-900) !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 15px !important;
  font-family: var(--font-bn) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-align: center !important;
  display: block !important;
  letter-spacing: -.01em;
  box-shadow: 0 4px 12px rgba(247,186,23,.4) !important;
  transition: filter .15s ease !important;
  text-decoration: none !important;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block a:hover {
  filter: brightness(1.05) !important;
}

/* ═══════════════════════════════════════════════
   CHECKOUT — FORM FIELDS
═══════════════════════════════════════════════ */

.wc-block-components-checkout-step {
  background: #fff !important;
  border-radius: 20px !important;
  border: 1px solid var(--ink-100) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 20px !important;
  margin-bottom: 14px !important;
}

.wc-block-components-checkout-step__title {
  font-family: var(--font-bn) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  color: var(--ink-900) !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.wc-block-components-checkout-step__index {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: var(--blue-700) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  flex-shrink: 0;
}

/* Text inputs */
.wc-block-components-text-input,
.wc-block-components-select {
  position: relative !important;
}

.wc-block-components-text-input input,
.wc-block-components-text-input.is-active input,
.wc-block-components-country-input input,
.wc-block-components-state-input input {
  width: 100% !important;
  height: 48px !important;
  padding: 0 14px !important;
  border: 1.5px solid var(--ink-200) !important;
  border-radius: 12px !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ink-900) !important;
  background: #fff !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
  outline: none !important;
}

.wc-block-components-text-input input:focus {
  border-color: var(--blue-600) !important;
  box-shadow: 0 0 0 3px rgba(15,50,117,.1) !important;
}

.wc-block-components-text-input label,
.wc-block-components-country-input label,
.wc-block-components-state-input label {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--ink-500) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Address fields grid */
.wc-block-components-address-form {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

.wc-block-components-address-form .wc-block-components-address-form__first-name,
.wc-block-components-address-form .wc-block-components-address-form__last-name { grid-column: span 1; }

.wc-block-components-address-form .wc-block-components-address-form__address_1,
.wc-block-components-address-form .wc-block-components-address-form__email,
.wc-block-components-address-form .wc-block-components-address-form__phone { grid-column: span 2; }

/* ═══════════════════════════════════════════════
   PAYMENT METHODS
═══════════════════════════════════════════════ */

.wc-block-components-payment-methods {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.wc-block-components-payment-method-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 13px 16px !important;
  border: 1.5px solid var(--ink-200) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
  background: var(--bg-soft) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink-900) !important;
}

.wc-block-components-payment-methods input[type="radio"]:checked + .wc-block-components-payment-method-label,
.wc-block-components-payment-method--active .wc-block-components-payment-method-label {
  border-color: var(--blue-700) !important;
  background: var(--blue-50) !important;
  color: var(--blue-700) !important;
}

/* Payment radio */
.wc-block-components-payment-method-label::before {
  content: '' !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: 2px solid var(--ink-300) !important;
  flex-shrink: 0;
  transition: all .15s ease !important;
}

.wc-block-components-payment-method--active .wc-block-components-payment-method-label::before {
  border-color: var(--blue-700) !important;
  background: var(--blue-700) !important;
  box-shadow: inset 0 0 0 3px #fff !important;
}

/* ═══════════════════════════════════════════════
   CHECKOUT ORDER SUMMARY (right)
═══════════════════════════════════════════════ */

.wc-block-checkout-order-summary {
  background: #fff !important;
  border-radius: 22px !important;
  border: 1px solid var(--ink-100) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden !important;
}

.wc-block-checkout-order-summary-cart-items .wc-block-components-product-image {
  width: 56px !important;
  height: 56px !important;
}

.wc-block-checkout-order-summary-cart-items .wc-block-components-product-image img {
  border-radius: 10px !important;
  width: 56px !important;
  height: 56px !important;
  object-fit: cover !important;
}

/* Summary header */
.wc-block-checkout-order-summary-cart-items__title {
  font-family: var(--font-bn) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 16px 18px !important;
  background: linear-gradient(180deg, var(--blue-900), var(--blue-800)) !important;
  color: #fff !important;
  margin: 0 !important;
}

/* ═══════════════════════════════════════════════
   NOTICES — errors / info messages
═══════════════════════════════════════════════ */

.wc-block-components-notice-banner {
  border-radius: 12px !important;
  border: none !important;
  font-family: var(--font-bn) !important;
  font-size: 13.5px !important;
  padding: 12px 16px !important;
  margin-bottom: 14px !important;
}

.wc-block-components-notice-banner.is-error {
  background: #fef2f2 !important;
  color: var(--coral-500) !important;
  border-left: 3px solid var(--coral-500) !important;
}

.wc-block-components-notice-banner.is-success {
  background: var(--mint-100) !important;
  color: #166534 !important;
  border-left: 3px solid var(--mint-500) !important;
}

.wc-block-components-notice-banner.is-info {
  background: var(--blue-50) !important;
  color: var(--blue-700) !important;
  border-left: 3px solid var(--blue-700) !important;
}

/* ═══════════════════════════════════════════════
   CHECKBOX (terms, create account)
═══════════════════════════════════════════════ */

.wc-block-components-checkbox .wc-block-components-checkbox__input {
  width: 18px !important;
  height: 18px !important;
  border-radius: 5px !important;
  border: 1.5px solid var(--ink-300) !important;
  accent-color: var(--blue-700) !important;
}

.wc-block-components-checkbox__label {
  font-family: var(--font-bn) !important;
  font-size: 13px !important;
  color: var(--ink-600) !important;
  line-height: 1.5 !important;
}

/* ═══════════════════════════════════════════════
   LOADING SPINNER override
═══════════════════════════════════════════════ */

.wc-block-components-spinner {
  border-top-color: var(--blue-700) !important;
}

/* ═══════════════════════════════════════════════
   EMPTY CART STATE
═══════════════════════════════════════════════ */

.wp-block-woocommerce-empty-cart-block {
  text-align: center;
  padding: 60px 20px;
  background: #fff;
  border-radius: 20px;
  border: 1px solid var(--ink-100);
  box-shadow: var(--shadow-sm);
}

.wc-block-cart__empty-cart__title {
  font-family: var(--font-bn) !important;
  font-weight: 700 !important;
  color: var(--ink-700) !important;
}

/* Shop now button in empty cart */
.wp-block-woocommerce-empty-cart-block .wp-block-button__link {
  background: var(--blue-700) !important;
  border-radius: 12px !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  padding: 12px 24px !important;
}

/* ═══════════════════════════════════════════════
   CROSS-SELL section (below cart)
═══════════════════════════════════════════════ */

.wp-block-woocommerce-product-collection {
  margin-top: 32px;
}

.wp-block-woocommerce-product-collection h2 {
  font-family: var(--font-bn) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  color: var(--ink-900) !important;
  margin-bottom: 18px !important;
}

/* ═══════════════════════════════════════════════
   MOBILE — bottom CTA bar for checkout button
═══════════════════════════════════════════════ */

@media (max-width: 767px) {
  .wp-block-woocommerce-proceed-to-checkout-block {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 10px 16px 16px;
    margin: 0 -16px;
    border-top: 1px solid var(--ink-200);
    z-index: 50;
    box-shadow: 0 -4px 16px rgba(10,18,38,.08);
  }
}