/* ==========================================================================
   Mindtropic — Shopify-like checkout skin for the WooCommerce block checkout
   (rounded/pill fields, clean layout, trust + conversion elements)
   Loaded only on the cart/checkout pages.
   ========================================================================== */

:root {
  --mt-navy: #070b1c;
  --mt-line: #e3e6ef;
  --mt-line-focus: #111a44;
  --mt-muted: #5b6472;
  --mt-radius-field: 999px;   /* full-round field ends */
  --mt-radius-card: 20px;
}

/* Give the whole checkout Poppins + comfortable rhythm */
.woocommerce-checkout .wc-block-checkout,
.woocommerce-cart .wc-block-cart {
  font-family: 'Poppins', system-ui, sans-serif;
  color: var(--mt-navy);
}

/* --- Section headings (Contact / Shipping / Payment) --- */
.wc-block-components-checkout-step__title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title {
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  color: var(--mt-navy) !important;
}

/* --- FULL-ROUND fields: wrappers, inputs, selects, comboboxes --- */
.wc-block-components-text-input,
.wc-block-components-select,
.wc-block-components-combobox,
.wc-block-components-address-form .wc-block-components-text-input,
.wc-block-components-address-form .wc-block-components-combobox {
  border-radius: var(--mt-radius-field) !important;
  overflow: visible;
}

.wc-block-components-text-input input,
.wc-block-components-text-input input.wc-block-components-text-input__input,
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"],
.wc-block-checkout input[type="number"],
.wc-block-components-select .wc-block-components-select__container,
.wc-block-components-combobox .components-form-token-field__input,
.wc-block-components-combobox-control input,
.wc-block-components-country-input input,
.wc-block-components-state-input input {
  border-radius: var(--mt-radius-field) !important;
  border: 1.5px solid var(--mt-line) !important;
  padding-left: 22px !important;
  padding-right: 22px !important;
  min-height: 52px !important;
  background: #fff !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* the block wrapper draws its own border — round + soften it */
.wc-block-components-text-input {
  border-radius: var(--mt-radius-field) !important;
}
.wc-block-components-text-input::before,
.wc-block-components-text-input::after { border-radius: var(--mt-radius-field) !important; }

/* floating label sits a touch further in to clear the rounded corner */
.wc-block-components-text-input label,
.wc-block-components-text-input.is-active label {
  left: 22px !important;
}

/* Focus state — navy ring, Shopify-clean */
.wc-block-components-text-input input:focus,
.wc-block-components-combobox-control input:focus,
.wc-block-checkout input:focus,
.wc-block-checkout select:focus {
  border-color: var(--mt-line-focus) !important;
  box-shadow: 0 0 0 3px rgba(17,26,68,.12) !important;
  outline: none !important;
}

/* Select / country dropdowns rounded too */
.wc-block-components-combobox,
.wc-block-components-combobox-control {
  border-radius: var(--mt-radius-field) !important;
}

/* --- Order summary card (Shopify-style clean panel) --- */
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-sidebar {
  background: #fff;
  border: 1.5px solid var(--mt-line);
  border-radius: var(--mt-radius-card);
  padding: 8px 4px;
  position: sticky;
  top: 20px;
}

/* --- Payment method option: rounded card, highlight when selected --- */
.wc-block-components-radio-control__option {
  border: 1.5px solid var(--mt-line) !important;
  border-radius: 16px !important;
  padding: 16px 18px 16px 44px !important;
  margin-bottom: 10px;
  transition: border-color .15s ease, background .15s ease;
}
.wc-block-components-radio-control__option--checked {
  border-color: var(--mt-navy) !important;
  background: #f7f8fc !important;
}

/* --- Place order button: full-round, bold, navy --- */
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.wc-block-components-checkout-place-order-button {
  border-radius: var(--mt-radius-field) !important;
  min-height: 58px !important;
  background: var(--mt-navy) !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  letter-spacing: .01em;
  box-shadow: 0 12px 30px -10px rgba(7,11,28,.5);
  transition: transform .15s ease, filter .15s ease;
}
.wc-block-components-checkout-place-order-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

/* Coupon toggle + misc rounding */
.wc-block-components-panel > h2 > button,
.wc-block-components-totals-coupon__button { border-radius: 999px !important; }

/* --- Country / State comboboxes: the actual bordered box is
   `.components-combobox-control__suggestions-container > .components-flex`
   (WooCommerce ships it at border-radius:2px = the "petak" look). Force it to
   match the pill text fields. --- */
.wc-block-components-combobox,
.wc-block-components-combobox .components-combobox-control__suggestions-container,
.wc-block-components-combobox .components-form-token-field,
.wc-block-components-combobox .components-base-control__field {
  border-radius: var(--mt-radius-field) !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.wc-block-components-combobox .components-combobox-control__suggestions-container > .components-flex {
  border: 1.5px solid var(--mt-line) !important;
  border-radius: var(--mt-radius-field) !important;
  min-height: 52px !important;
  height: auto !important;
  padding-left: 22px !important;
  padding-right: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.wc-block-components-combobox.is-active .components-combobox-control__suggestions-container > .components-flex,
.wc-block-components-combobox .components-combobox-control__suggestions-container > .components-flex:focus-within {
  border-color: var(--mt-line-focus) !important;
  box-shadow: 0 0 0 3px rgba(17,26,68,.12) !important;
}

.wc-block-components-combobox input,
.wc-block-components-combobox .components-combobox-control__input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 46px !important;
  padding-left: 0 !important;
}

/* Catch-all: any native select / select container in the checkout -> pill */
.wc-block-checkout select,
.wc-block-components-form select,
.wc-block-components-select__container,
.wc-block-components-select .wc-block-components-select__select {
  border-radius: var(--mt-radius-field) !important;
  border: 1.5px solid var(--mt-line) !important;
  min-height: 52px !important;
  height: auto !important;
  padding-left: 22px !important;
  padding-right: 40px !important;
  background-color: #fff !important;
}

/* ==========================================================================
   Trust + conversion elements (rendered by page.php on the checkout)
   ========================================================================== */
.mt-co-reviews {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap;
  background: #fff8d6;
  border: 1.5px solid #f4e9a1;
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 600; font-size: 15px; color: var(--mt-navy);
  margin-bottom: 14px;
}
.mt-co-reviews .mt-co-stars { color: #f5b301; letter-spacing: 2px; font-size: 17px; }
.mt-co-reviews .mt-co-muted { color: var(--mt-muted); font-weight: 500; }

.mt-co-cod {
  text-align: center;
  background: var(--mt-navy);
  color: #F4F517;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 14px;
  border-radius: 999px;
  padding: 12px 18px;
  margin-bottom: 22px;
}

.mt-co-trust {
  margin-top: 26px;
  border-top: 1.5px dashed var(--mt-line);
  padding-top: 22px;
  text-align: center;
}
.mt-co-trust-title {
  font-size: 12px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mt-muted); margin-bottom: 16px;
}
.mt-co-logos {
  display: flex; align-items: center; justify-content: center;
  gap: 26px; flex-wrap: wrap; margin-bottom: 14px;
}
.mt-co-logos img { height: 52px; width: auto; object-fit: contain; }
.mt-co-trust-line {
  font-size: 12.5px; font-weight: 600; color: var(--mt-muted);
  line-height: 1.7;
}

/* trust strip full width above the checkout columns */
.mt-co-topbar { margin-bottom: 6px; }

@media (max-width: 600px) {
  .mt-co-logos { gap: 16px; }
  .mt-co-logos img { height: 40px; }
  .wc-block-components-text-input input { min-height: 48px !important; }
}