/* ============================================================================
   canjear.html — in-house bono redemption page. Reuses .btn / product-card /
   cart-drawer / modal-* classes from styles.css, bonos.css, cart.css; this
   file only adds what's genuinely new: the gate card and the balance banner.
   ========================================================================== */

/* .cart-btn / .btn both set their own `display` (flex/inline-flex), which has
   the same specificity as the UA [hidden] rule and can win the cascade
   depending on stylesheet order — pin it explicitly so the `hidden` attribute
   this page toggles on #cart-button/#house-logout-btn always actually hides
   them (same class of bug as the earlier .admin-modal/.admin-modal-lg fix). */
#cart-button[hidden], #house-logout-btn[hidden] { display: none !important; }

.house-gate-card {
  max-width: 440px;
  background: var(--white);
  border-radius: var(--r-xl);
  padding: 36px 32px;
  box-shadow: var(--shadow-md);
  margin-top: 12px;
}
.house-gate-card h1 { font-size: 26px; color: var(--navy); margin: 8px 0 6px; }
.house-gate-card p { font-size: 14px; color: var(--muted); margin-bottom: 22px; }
.house-gate-card form { text-align: left; }
.house-gate-card label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.house-gate-card .admin-input { width: 100%; margin-bottom: 14px; }
.house-gate-card .btn-primary { width: 100%; justify-content: center; }

/* Minimal input style so this page doesn't need to load assets/admin.css. */
.admin-input {
  padding: 11px 14px; border-radius: 10px; border: 1.5px solid var(--border);
  font-size: 14px; font-family: inherit; color: var(--text); background: var(--white);
  transition: border-color .2s;
}
.admin-input:focus { outline: none; border-color: var(--blue); }

.house-balance-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--grad-b); color: var(--white);
  border-radius: var(--r-lg); padding: 18px 24px; margin-bottom: 28px;
}
.house-balance-banner .hbb-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.7); }
.house-balance-banner .hbb-amount { font-size: 26px; font-weight: 800; font-family: 'Plus Jakarta Sans', sans-serif; }
.house-balance-banner .hbb-code { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 2px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.house-balance-banner .hbb-expiry { font-size: 12.5px; color: rgba(255,255,255,.75); }
.house-balance-banner.hbb-empty { background: var(--off); color: var(--navy); }
.house-balance-banner.hbb-empty .hbb-label,
.house-balance-banner.hbb-empty .hbb-code,
.house-balance-banner.hbb-empty .hbb-expiry { color: var(--muted); }

/* Redemption result inside .modal-success (from cart.css) */
.house-result-remaining { font-size: 13px; color: var(--muted); margin-top: 4px; }
.house-result-groups { text-align: left; margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
.house-result-group { font-size: 13px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.house-result-group:last-child { border-bottom: none; }

/* Delivery-email outcome line in the success screen. */
.email-result {
  text-align: left; font-size: 13.5px; line-height: 1.5; border-radius: 10px;
  padding: 12px 14px; margin: 16px 0 4px;
}
.email-result b { word-break: break-all; }
.email-result.ok { background: #EAF6EF; color: #1B7A43; }
.email-result.warn { background: #FDF0EC; color: #B5451B; }

/* --------------------------- checkout: delivery email block --------------------------- *
   Sits between the item summary and the confirm button in the redemption
   checkout modal (assets/canjear.js openCheckout()) — the redeemer has no
   account, so this is the only address their codes will ever reach. */
.email-block {
  margin: 4px 28px 8px; padding: 18px 20px; border-radius: 14px;
  background: linear-gradient(180deg, #F7F9FF 0%, #F3F6FC 100%);
  border: 1px solid #E4E9F7;
}
.email-block-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.email-block-icon {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  background: var(--grad-b); color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 16px;
}
.email-block-head h4 { font-size: 14.5px; color: var(--navy); margin: 0 0 3px; }
.email-block-head p { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.5; }
.email-block-fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.email-block-fields.single { grid-template-columns: 1fr; }
.email-field label { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.email-field .admin-input { width: 100%; background: var(--white); }
.email-match-hint { font-size: 12px; margin-top: 8px; min-height: 16px; font-weight: 500; }
.email-match-hint.ok { color: #1B7A43; }
.email-match-hint.bad { color: #B5451B; }

@media (max-width: 560px) {
  .email-block { margin: 4px 16px 8px; padding: 16px; }
  .email-block-fields { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .house-gate-card { padding: 28px 22px; }
}