/* Phase B1: slide-out cart drawer. Restyles WooCommerce own native
   mini-cart classes (mini_cart_item, woocommerce-mini-cart__total,
   woocommerce-mini-cart__buttons, remove_from_cart_button) via
   descendant selectors only -- the mini-cart template itself is never
   forked. Phase B2 (auth modal) styles will be appended to this same
   file. */

.ecl-no-scroll { overflow: hidden; }

.ecl-cart-drawer { position: fixed; inset: 0; z-index: 10000; visibility: hidden; pointer-events: none; }
.ecl-cart-drawer.is-open { visibility: visible; pointer-events: auto; }

.ecl-cart-drawer__backdrop {
  position: absolute; inset: 0; background: rgba(10, 16, 30, 0.5);
  opacity: 0; transition: opacity 260ms ease;
}
.ecl-cart-drawer.is-open .ecl-cart-drawer__backdrop { opacity: 1; }

.ecl-cart-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 100%; max-width: 420px;
  background: #fff; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 280ms ease;
  box-shadow: -8px 0 24px rgba(10, 16, 30, 0.12);
}
.ecl-cart-drawer.is-open .ecl-cart-drawer__panel { transform: translateX(0); }

.ecl-cart-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--ecl-hairline);
}
.ecl-cart-drawer__title { font-family: var(--ecl-font-primary); font-size: 17px; font-weight: 800; color: var(--ecl-ink); margin: 0; display: flex; align-items: center; gap: 8px; }
.ecl-cart-drawer__close { border: none; background: var(--ecl-surface); width: 32px; height: 32px; border-radius: 999px; font-size: 14px; cursor: pointer; color: var(--ecl-ink); }

.ecl-cart-drawer__inner { flex: 1; overflow-y: auto; padding: 20px 24px; }

.ecl-cart-drawer__inner .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; }
.ecl-cart-drawer__inner .mini_cart_item {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px solid var(--ecl-hairline); position: relative;
}
.ecl-cart-drawer__inner .mini_cart_item img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.ecl-cart-drawer__inner .mini_cart_item a:not(.remove_from_cart_button) {
  font-family: var(--ecl-font-primary); font-size: 13.5px; font-weight: 700; color: var(--ecl-ink); text-decoration: none;
}
.ecl-cart-drawer__inner .remove_from_cart_button {
  position: absolute; top: 14px; right: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--ecl-surface); color: var(--ecl-meta-gray); font-size: 12px; text-decoration: none;
}

.ecl-cart-drawer__qty { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; border: 1px solid var(--ecl-border-gray); border-radius: 999px; padding: 2px; }
.ecl-cart-drawer__qty-btn { width: 22px; height: 22px; border: none; background: var(--ecl-surface); border-radius: 999px; font-size: 12px; color: var(--ecl-navy); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ecl-cart-drawer__qty-value { font-family: var(--ecl-font-primary); font-size: 12.5px; font-weight: 700; min-width: 14px; text-align: center; }

.ecl-cart-drawer__inner .woocommerce-mini-cart__empty-message { color: var(--ecl-meta-gray); text-align: center; padding: 40px 0; }

.ecl-cart-drawer__inner .woocommerce-mini-cart__total {
  display: flex; justify-content: space-between; font-family: var(--ecl-font-primary); font-weight: 800; font-size: 15px; color: var(--ecl-ink);
  padding-top: 16px; margin-top: 8px; border-top: 1px solid var(--ecl-hairline);
}

.ecl-cart-drawer__inner .woocommerce-mini-cart__buttons { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 0; }
.ecl-cart-drawer__inner .woocommerce-mini-cart__buttons a {
  display: block; text-align: center; height: 44px; line-height: 44px; border-radius: 999px;
  font-family: var(--ecl-font-primary); font-size: 13.5px; font-weight: 700; text-decoration: none;
}
.ecl-cart-drawer__inner .woocommerce-mini-cart__buttons a.wc-forward:not(.checkout) { border: 1px solid var(--ecl-border-gray); color: var(--ecl-ink); }
.ecl-cart-drawer__inner .woocommerce-mini-cart__buttons a.checkout { background: var(--ecl-navy); color: #fff; }
.ecl-cart-drawer__inner .woocommerce-mini-cart__buttons a.checkout:hover { color: #fff; background: var(--ecl-navy-deep); }

@media (max-width: 480px) {
  .ecl-cart-drawer__panel { max-width: 100%; }
}


/* Phase B2: quick login/register modal. Same overlay/panel pattern as
   the cart drawer above, centered instead of side-anchored. */

.ecl-auth-modal { position: fixed; inset: 0; z-index: 10001; visibility: hidden; pointer-events: none; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ecl-auth-modal.is-open { visibility: visible; pointer-events: auto; }

.ecl-auth-modal__backdrop { position: absolute; inset: 0; background: rgba(10, 16, 30, 0.5); opacity: 0; transition: opacity 260ms ease; }
.ecl-auth-modal.is-open .ecl-auth-modal__backdrop { opacity: 1; }

.ecl-auth-modal__panel {
  position: relative; background: #fff; border-radius: 16px; width: 100%; max-width: 400px; padding: 32px 28px 28px;
  transform: translateY(12px) scale(0.98); opacity: 0; transition: transform 260ms ease, opacity 260ms ease;
}
.ecl-auth-modal.is-open .ecl-auth-modal__panel { transform: translateY(0) scale(1); opacity: 1; }

.ecl-auth-modal__close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border: none; background: var(--ecl-surface); border-radius: 999px; font-size: 13px; color: var(--ecl-ink); cursor: pointer; }

.ecl-auth-modal__title { font-family: var(--ecl-font-primary); font-size: 19px; font-weight: 800; color: var(--ecl-ink); margin: 0 0 20px; }

.ecl-auth-modal__tabs { display: flex; gap: 4px; background: var(--ecl-tint-navy); border-radius: 999px; padding: 4px; margin: 0 0 20px; max-width: max-content; }
.ecl-auth-modal__tab { border: none; background: none; height: 34px; padding: 0 16px; border-radius: 999px; font-family: var(--ecl-font-primary); font-size: 12.5px; font-weight: 700; color: var(--ecl-body-gray); cursor: pointer; }
.ecl-auth-modal__tab.is-active { background: var(--ecl-navy); color: #fff; }

.ecl-auth-modal__notice { font-size: 13px; border-radius: 8px; padding: 0; margin: 0; transition: padding 160ms ease; }
.ecl-auth-modal__notice:not(:empty) { padding: 10px 14px; margin-bottom: 16px; }
.ecl-auth-modal__notice.is-error { background: #FDECEC; color: var(--ecl-sale-red); }
.ecl-auth-modal__notice.is-success { background: #E8F7EE; color: #1E7A45; }

.ecl-auth-modal__form { display: flex; flex-direction: column; gap: 16px; }
.ecl-auth-modal__field-inline { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--ecl-meta-gray); }
.ecl-auth-modal__field-inline a { color: var(--ecl-navy); }
.ecl-auth-modal__submit { width: 100%; height: 46px; }
.ecl-auth-modal__submit:disabled { opacity: 0.6; cursor: default; }