/* ═══════════════════════════════════════════════════════════════════
   Lupita Premium — UX Upgrades v2.2
   Toast / WC Blocks Checkout / My Account / Login & Register
   Conservative version: visual styling only, no layout overrides
   that break WC Blocks' built-in DOM structure.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Toast: rich content (qty + product name) ─── */
.toast {
  background: linear-gradient(135deg, #1A1A1A 0%, #2A2A2A 100%);
  padding: 14px 18px;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.05) inset;
  min-width: 280px;
  max-width: 380px;
  align-items: flex-start;
  gap: 12px;
}
.toast i {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}
#toast-message {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.toast__qty {
  font-size: 13px;
  font-weight: 800;
  color: #4ADE80;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.toast__name {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ═══════════════════════════════════════════════════════════════════
   WOOCOMMERCE BLOCKS CHECKOUT — visual polish only
   (We DON'T override WC's grid/flex layout — it already does 2 cols)
   ═══════════════════════════════════════════════════════════════════ */

/* Inputs: subtle border + focus ring */
.wc-block-components-text-input input,
.wc-block-components-combobox input,
.wc-block-components-checkout-step input[type="text"],
.wc-block-components-checkout-step input[type="email"],
.wc-block-components-checkout-step input[type="tel"],
.wc-block-components-checkout-step select {
  border-radius: 10px !important;
  border-color: var(--color-border) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-combobox input:focus,
.wc-block-components-checkout-step input:focus,
.wc-block-components-checkout-step select:focus {
  border-color: var(--color-fucsia) !important;
  box-shadow: 0 0 0 3px rgba(0,163,224,0.12) !important;
  outline: none !important;
}

/* Floating label color when focused */
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus ~ label {
  color: var(--color-fucsia) !important;
}

/* Step headings: stronger typography */
.wc-block-components-checkout-step__title,
.wc-block-components-title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title {
  font-weight: 800 !important;
  letter-spacing: -0.01em;
}

/* Order summary line items: tighter spacing */
.wc-block-components-order-summary-item__quantity {
  background: var(--color-fucsia) !important;
  color: white !important;
  border: 2px solid white !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 6px rgba(0,163,224,0.3);
}

.wc-block-components-order-summary-item__image img {
  border-radius: 8px !important;
}

/* Total: highlight in brand color */
.wc-block-components-totals-footer-item,
.wc-block-components-totals-item--total .wc-block-components-totals-item__value {
  color: var(--color-fucsia) !important;
  font-weight: 800 !important;
}

/* Place order button: brand color + shadow */
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout-actions-block button.wc-block-components-button {
  background: var(--color-fucsia) !important;
  color: white !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 18px rgba(0,163,224,0.3) !important;
  transition: all 0.2s ease !important;
}

.wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-checkout-actions-block button.wc-block-components-button:hover {
  background: var(--color-primary-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,163,224,0.4) !important;
}

/* Selected payment method */
.wc-block-components-radio-control__option--checked {
  background: rgba(0,163,224,0.04) !important;
}

/* Login / coupon collapsible panels */
.wc-block-components-panel__button {
  font-weight: 600 !important;
  color: var(--color-fucsia) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   MY ACCOUNT — Modern layout
   ═══════════════════════════════════════════════════════════════════ */

/* Container width and breathing room */
.woocommerce-account .woocommerce {
  margin: var(--space-6) 0;
}

/* ─── Two-column layout on desktop (logged-in My Account only) ─── */
@media (min-width: 900px) {
  body.woocommerce-account.logged-in .woocommerce {
    display: grid !important;
    grid-template-columns: 280px minmax(0, 1fr) !important;
    gap: 24px !important;
    align-items: start !important;
  }
}

/* Login / register page is full-bleed: no grid, no margin */
body.woocommerce-account:not(.logged-in) .woocommerce {
  margin: 0 !important;
  display: block !important;
}

/* ─── Sidebar nav ─── */
.woocommerce-account .woocommerce-MyAccount-navigation {
  width: 100% !important;
  float: none !important;
  margin: 0 0 var(--space-4) 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  margin: 0 !important;
  padding: var(--space-3) !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  flex-wrap: nowrap;
}

@media (max-width: 899px) {
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: none;
  width: 100%;
}

@media (max-width: 899px) {
  .woocommerce-account .woocommerce-MyAccount-navigation ul li {
    width: auto;
    flex: 0 0 auto;
  }
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li::before,
.woocommerce-account .woocommerce-MyAccount-navigation ul li::marker {
  content: none !important;
  display: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-decoration: none !important;
  transition: all 0.15s ease;
  white-space: nowrap;
}

/* Inject FontAwesome icons via ::before based on WC class names */
.woocommerce-account .woocommerce-MyAccount-navigation-link a::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 15px;
  width: 18px;
  text-align: center;
  color: var(--color-text-muted);
  transition: color 0.15s ease;
  display: inline-block;
}
.woocommerce-MyAccount-navigation-link--dashboard a::before { content: "\f015"; }
.woocommerce-MyAccount-navigation-link--orders a::before { content: "\f291"; }
.woocommerce-MyAccount-navigation-link--downloads a::before { content: "\f019"; }
.woocommerce-MyAccount-navigation-link--edit-address a::before { content: "\f3c5"; }
.woocommerce-MyAccount-navigation-link--payment-methods a::before { content: "\f09d"; }
.woocommerce-MyAccount-navigation-link--edit-account a::before { content: "\f007"; }
.woocommerce-MyAccount-navigation-link--customer-logout a::before { content: "\f2f5"; }

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--color-bg);
  color: var(--color-fucsia);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover::before {
  color: var(--color-fucsia);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  background: linear-gradient(135deg, var(--color-fucsia), var(--color-primary-dark));
  color: white;
  box-shadow: 0 4px 12px rgba(0,163,224,0.3);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a::before {
  color: white;
}

@media (min-width: 900px) {
  .woocommerce-MyAccount-navigation-link--customer-logout a {
    margin-top: 6px;
    border-top: 1px solid var(--color-border-light);
    padding-top: 14px !important;
    color: #DC2626 !important;
  }
  .woocommerce-MyAccount-navigation-link--customer-logout a::before {
    color: #DC2626 !important;
  }
}

/* ─── Content area ─── */
.woocommerce-account .woocommerce-MyAccount-content {
  width: 100% !important;
  float: none !important;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: 14px;
  padding: var(--space-6);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  min-width: 0;
}

@media (max-width: 600px) {
  .woocommerce-account .woocommerce-MyAccount-content {
    padding: var(--space-4);
  }
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.woocommerce-MyAccount-content p {
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.woocommerce-MyAccount-content p strong { color: var(--color-text); }

/* ─── Welcome banner ─── */
.lupita-account-welcome {
  background: linear-gradient(135deg, var(--color-fucsia), var(--color-primary-dark));
  color: white;
  border-radius: 12px;
  padding: 20px;
  margin: 0 0 20px 0;
  position: relative;
  overflow: hidden;
}
.lupita-account-welcome::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%);
  border-radius: 50%;
}
.lupita-account-welcome h2 {
  color: white !important;
  font-size: 20px !important;
  margin: 0 0 4px 0 !important;
  font-weight: 800;
}
.lupita-account-welcome p {
  color: rgba(255,255,255,0.85) !important;
  font-size: 14px;
  margin: 0 !important;
}

/* ─── Dashboard quick-action cards ─── */
.lupita-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.lupita-dashboard__card {
  background: linear-gradient(135deg, #FFFFFF, var(--color-bg));
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  padding: 20px;
  text-decoration: none !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.25s ease;
  color: var(--color-text);
}
.lupita-dashboard__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  border-color: var(--color-fucsia);
}
.lupita-dashboard__card i {
  font-size: 22px;
  color: var(--color-fucsia);
  margin-bottom: 6px;
}
.lupita-dashboard__card-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--color-text);
}
.lupita-dashboard__card-desc {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* WC tables (orders, etc.) */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account table.shop_table {
  border: 1px solid var(--color-border-light) !important;
  border-radius: 10px !important;
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
}

.woocommerce-account table.shop_table th {
  background: var(--color-bg) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  padding: 12px !important;
}

.woocommerce-account table.shop_table td {
  padding: 12px !important;
  font-size: 13px !important;
  border-top: 1px solid var(--color-border-light) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LOGIN / REGISTER — Beautiful Split Layout
   ═══════════════════════════════════════════════════════════════════ */

/* Auth page full-bleed (the woocommerce.php template now renders
   us inside .container--full so we already span the viewport). */
.lupita-auth {
  width: 100%;
  min-height: calc(100vh - var(--header-height) - var(--bottom-nav-height) - 60px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-bg);
  overflow: hidden;
}

@media (max-width: 900px) {
  .lupita-auth {
    grid-template-columns: 1fr;
    min-height: auto;
  }
}

/* ─── Brand panel (left) ─── */
.lupita-auth__brand {
  background: linear-gradient(135deg, var(--color-fucsia) 0%, var(--color-primary-dark) 100%);
  color: white;
  padding: 60px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.lupita-auth__brand::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
  border-radius: 50%;
}

.lupita-auth__brand::after {
  content: '';
  position: absolute;
  bottom: -150px;
  left: -150px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  border-radius: 50%;
}

.lupita-auth__brand-content {
  position: relative;
  z-index: 1;
  max-width: 460px;
  margin: 0 auto;
  width: 100%;
}

.lupita-auth__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: white !important;
  text-decoration: none !important;
}
.lupita-auth__logo i { font-size: 24px; }

.lupita-auth__title {
  font-size: 36px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 16px 0;
  color: white;
}

@media (max-width: 1100px) {
  .lupita-auth__title { font-size: 30px; }
}

.lupita-auth__subtitle {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,0.9);
  margin: 0 0 32px 0;
}

.lupita-auth__benefits {
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.lupita-auth__benefits li { list-style: none; }

.lupita-auth__benefit {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: rgba(255,255,255,0.95);
}

.lupita-auth__benefit i {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}

@media (max-width: 900px) {
  .lupita-auth__brand {
    padding: 32px 20px;
    text-align: center;
  }
  .lupita-auth__benefits { display: none; }
  .lupita-auth__subtitle { margin-bottom: 0; }
  .lupita-auth__logo { justify-content: center; }
  .lupita-auth__title { font-size: 24px; }
}

/* ─── Form panel (right) ─── */
.lupita-auth__form-wrap {
  padding: 60px 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
}

@media (max-width: 900px) {
  .lupita-auth__form-wrap { padding: 32px 20px; }
}

.lupita-auth__form { width: 100%; max-width: 400px; }

/* ─── Tabs ─── */
.lupita-auth__tabs {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
  background: var(--color-bg-alt);
  padding: 4px;
  border-radius: 12px;
}

.lupita-auth__tab {
  flex: 1;
  background: none;
  border: none;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.15s ease;
  font-family: inherit;
}
.lupita-auth__tab--active {
  background: white;
  color: var(--color-fucsia);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.lupita-auth__panel { display: none; }
.lupita-auth__panel--active { display: block; }

.lupita-auth__heading {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 6px 0;
  color: var(--color-text);
}
.lupita-auth__lede {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0 0 24px 0;
}

/* ─── Input fields with icon ─── */
.lupita-auth__field {
  position: relative;
  margin-bottom: 14px;
}
.lupita-auth__field i:not(.fa-eye):not(.fa-eye-slash) {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: 15px;
  pointer-events: none;
  transition: color 0.15s ease;
  z-index: 1;
}
.lupita-auth__field input.input-text,
.lupita-auth__field input[type="text"],
.lupita-auth__field input[type="email"],
.lupita-auth__field input[type="password"] {
  width: 100%;
  height: 50px;
  padding: 0 16px 0 46px;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  font-size: 15px;
  background: white;
  transition: all 0.15s ease;
  font-family: inherit;
  color: var(--color-text);
  box-sizing: border-box;
}
.lupita-auth__field input:focus {
  outline: none;
  border-color: var(--color-fucsia);
  box-shadow: 0 0 0 3px rgba(0,163,224,0.12);
}
.lupita-auth__field:focus-within i:not(.fa-eye):not(.fa-eye-slash) {
  color: var(--color-fucsia);
}

.lupita-auth__password-toggle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px 6px;
  font-size: 14px;
  transition: color 0.15s ease;
  z-index: 2;
}
.lupita-auth__password-toggle:hover { color: var(--color-fucsia); }

.lupita-auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 18px 0;
  font-size: 13px;
  flex-wrap: wrap;
  gap: 8px;
}
.lupita-auth__row label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-secondary);
  cursor: pointer;
  margin: 0;
  font-weight: 500;
}
.lupita-auth__row label input { accent-color: var(--color-fucsia); }
.lupita-auth__row a {
  color: var(--color-fucsia);
  font-weight: 600;
  text-decoration: none;
}
.lupita-auth__row a:hover { text-decoration: underline; }

/* Submit button */
.lupita-auth__submit {
  width: 100%;
  height: 50px;
  background: linear-gradient(135deg, var(--color-fucsia), var(--color-primary-dark)) !important;
  color: white !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 6px 18px rgba(0,163,224,0.3);
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
}
.lupita-auth__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,163,224,0.4);
}

.lupita-auth__hint {
  font-size: 13px;
  color: var(--color-text-muted);
  text-align: center;
  margin: 16px 0 0 0;
}
.lupita-auth__hint a {
  color: var(--color-fucsia);
  font-weight: 600;
  text-decoration: none;
}
.lupita-auth__hint a:hover { text-decoration: underline; }

/* WC notices inside auth */
.lupita-auth .woocommerce-notices-wrapper { margin-bottom: 16px; }
.lupita-auth .woocommerce-error,
.lupita-auth .woocommerce-message,
.lupita-auth .woocommerce-info {
  border-radius: 10px !important;
  border: none !important;
  font-size: 13px !important;
  margin: 0 0 16px 0 !important;
  padding: 12px 16px !important;
}

/* Hide WC's default form-row labels (we use placeholders) */
.lupita-auth .lupita-auth__form .woocommerce-form-row > label:not(.woocommerce-form__label-for-checkbox) {
  display: none;
}
.lupita-auth .woocommerce-form-row {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  float: none !important;
}