/**
 * Cart / Checkout / My Account redesign (live since 5.9.44).
 *
 * Goal: the same modern, professional card system as the product detail
 * redesign (5.9.43): uniform white cards, generous spacing, aligned rows,
 * theme colors only. Nothing is removed and no text is added.
 *
 * What it covers
 * - Cart page: head, cart table, cart actions, empty state.
 * - Checkout page: head, 3-step indicator, EDD form (fieldsets, fields,
 *   payment options, purchase button layout), trust row.
 * - My Account page: the .emc-account panel (login card for visitors via
 *   [edd_login]; orders via [purchase_history], downloads via
 *   [download_history], profile via [edd_profile_editor] for customers).
 *   Companion PHP (includes/account-panel.php) injects the panel into the
 *   blank /account/ page; this file only styles it.
 *
 * Selector honesty (read before deploy)
 * - CONFIRMED from the theme templates (7.5.3 copy): .ef-checkout-head,
 *   .ef-checkout-steps, .ef-checkout-wrap, .ef-cart-actions, .ef-empty,
 *   .ef-checkout-trust. Live 7.5.4 classes are unverified until the
 *   post-deploy visual check.
 * - CONFIRMED from the live plugin: #edd_checkout_form_wrap (already
 *   targeted by storefront-polish) and body.page-cart / body.page-checkout.
 * - BEST-EFFORT from EDD conventions (unverified in 3.7.3 markup):
 *   #edd_profile_editor_form, .edd-cart,
 *   #edd_payment_mode_select .edd-gateway-option. If a selector misses,
 *   its rule simply does not apply; the generic table/form rules below
 *   still cover the same elements.
 * - VERIFIED via EDD docs (easydigitaldownloads.com/docs/shortcodes-overview):
 *   [purchase_history], [download_history], [edd_profile_editor], and
 *   [edd_login] exist in current EDD. Their tables are styled by the
 *   generic .emc-account table rules below.
 * - Failure mode is harmless: a missed selector leaves that part
 *   unstyled, never broken.
 *
 * Rules
 * - Theme colors only: navy #0b1120, indigo #6366f1, violet #8b5cf6,
 *   purple #7c3aed/#6d28d9, gold #f59e0b, neutral grays.
 * - No display:none, no content: text, no new colors, nothing removed.
 * - Buy/purchase button COLORS are owned by storefront-polish (theme
 *   gradient since 5.9.43); this file only sets their layout.
 */

/* ============ 1. Page canvas (cart + checkout) ============ */
body.page-cart main.ef-content,
body.page-checkout main.ef-content {
  background: #f8fafc;
  padding-bottom: 48px;
}

/* ============ 2. Page head ============ */
body.page-cart .ef-checkout-head,
body.page-checkout .ef-checkout-head {
  padding: 36px 0 8px;
  text-align: center;
}
body.page-cart .ef-checkout-head .ef-eyebrow,
body.page-checkout .ef-checkout-head .ef-eyebrow {
  display: inline-block;
  background: #eef2ff;
  color: #6366f1;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
}
body.page-cart .ef-checkout-head h1,
body.page-checkout .ef-checkout-head h1 {
  color: #0b1120;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1.15;
  margin: 16px 0 8px;
}
body.page-cart .ef-checkout-head p,
body.page-checkout .ef-checkout-head p {
  color: #64748b;
  max-width: 640px;
  margin: 0 auto;
}

/* ============ 3. Step indicator (checkout) ============ */
body.page-checkout .ef-checkout-steps {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 24px 0;
}
body.page-checkout .ef-checkout-steps .step {
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 999px;
}
body.page-checkout .ef-checkout-steps .step.active {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}

/* ============ 4. Main card wrap ============ */
body.page-cart .ef-checkout-wrap,
body.page-checkout .ef-checkout-wrap {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(11, 17, 32, 0.06);
  padding: 28px 32px;
  margin-top: 8px;
}

/* ============ 5. Tables inside cart / checkout / account ============ */
.ef-checkout-wrap table,
.emc-account table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
.ef-checkout-wrap table th,
.emc-account table th {
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid #e2e8f0;
}
.ef-checkout-wrap table td,
.emc-account table td {
  padding: 14px 12px;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: middle;
}
.ef-checkout-wrap table tr:last-child td,
.emc-account table tr:last-child td {
  border-bottom: none;
}

/* ============ 6. Checkout form ============ */
#edd_checkout_form_wrap fieldset {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 22px 24px;
  margin: 0 0 20px;
}
#edd_checkout_form_wrap legend {
  color: #0b1120;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 0 8px;
}
#edd_checkout_form_wrap label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: #0b1120;
  margin: 14px 0 6px;
}
#edd_checkout_form_wrap input[type="text"],
#edd_checkout_form_wrap input[type="email"],
#edd_checkout_form_wrap input[type="password"],
#edd_checkout_form_wrap select,
#edd_checkout_form_wrap textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 1rem;
  box-sizing: border-box;
}
#edd_checkout_form_wrap input:focus,
#edd_checkout_form_wrap select:focus,
#edd_checkout_form_wrap textarea:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}
#edd_payment_mode_select .edd-gateway-option {
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
#edd_checkout_form_wrap #edd-purchase-button {
  margin-top: 8px;
}

/* ============ 7. Cart actions ============ */
body.page-cart .ef-cart-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}
body.page-cart .ef-cart-actions .ef-btn {
  flex: 1;
  text-align: center;
  min-width: 220px;
}

/* ============ 8. Trust row (checkout) ============ */
body.page-checkout .ef-checkout-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}
body.page-checkout .ef-checkout-trust > div {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 2px 16px rgba(11, 17, 32, 0.06);
  padding: 20px;
  text-align: center;
}
body.page-checkout .ef-checkout-trust strong {
  color: #0b1120;
}
body.page-checkout .ef-checkout-trust p {
  color: #64748b;
  margin: 4px 0 0;
}

/* ============ 9. Empty states ============ */
body.page-cart .ef-empty,
body.page-checkout .ef-empty {
  text-align: center;
  padding: 40px 20px;
}
body.page-cart .ef-empty p,
body.page-checkout .ef-empty p {
  color: #64748b;
  margin-bottom: 20px;
}

/* ============ 10. My Account panel ============ */
.emc-account {
  max-width: 1280px;
  margin: 0 auto;
  padding: 36px 0 48px;
}
.emc-account-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(11, 17, 32, 0.06);
  padding: 28px 32px;
  margin-bottom: 24px;
}
.emc-account-card h2 {
  color: #0b1120;
  font-size: 1.35rem;
  margin: 0 0 16px;
}
.emc-account-card p {
  color: #64748b;
}
.emc-account-login {
  max-width: 480px;
  margin: 0 auto;
}
.emc-account-login label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: #0b1120;
  margin: 14px 0 6px;
}
.emc-account-login input[type="text"],
.emc-account-login input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 1rem;
  box-sizing: border-box;
}
.emc-account-login input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}
#edd_profile_editor_form label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: #0b1120;
  margin: 14px 0 6px;
}
#edd_profile_editor_form input[type="text"],
#edd_profile_editor_form input[type="email"],
#edd_profile_editor_form input[type="password"],
#edd_profile_editor_form select {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 1rem;
  box-sizing: border-box;
}

/* ============ 11. Responsive ============ */
@media (max-width: 900px) {
  body.page-checkout .ef-checkout-trust {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  body.page-cart .ef-checkout-wrap,
  body.page-checkout .ef-checkout-wrap,
  .emc-account-card {
    padding: 20px;
  }
  body.page-cart .ef-cart-actions .ef-btn {
    min-width: 100%;
  }
  #edd_checkout_form_wrap fieldset {
    padding: 18px;
  }
}

/* ============ 12. Account design pass 2 (5.9.46) ============ */
/* Welcome card: tinted, so the panel opens with a designed header */
.emc-account > .emc-account-card:first-child {
  background: linear-gradient(135deg, #eef2ff, #f5f3ff);
  border-color: #c7d2fe;
}
/* Section titles inside cards */
.emc-account-card h2 {
  padding-bottom: 12px;
  border-bottom: 2px solid #e2e8f0;
}
/* Profile editor: fieldsets become borderless sections, legends
   become section titles (removes the basic bordered-box look) */
#edd_profile_editor_form fieldset {
  border: none;
  padding: 0;
  margin: 0 0 24px;
}
#edd_profile_editor_form legend {
  color: #0b1120;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 0;
  margin-bottom: 4px;
}
/* Profile + login submit buttons: theme gradient */
#edd_profile_editor_form input[type="submit"],
#edd_profile_editor_form button[type="submit"],
.emc-account-login input[type="submit"],
.emc-account-login button[type="submit"] {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #ffffff;
  font-weight: 800;
  font-size: 1rem;
  padding: 14px 28px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.35);
  margin-top: 16px;
}
/* Account tables: indigo links, soft row hover */
.emc-account table a {
  color: #6366f1;
  font-weight: 600;
  text-decoration: none;
}
.emc-account table tr:hover td {
  background: #f8fafc;
}
/* Active state: ring around the Account button while on /account/ */
body.emc-on-account .ef-header__actions .ef-btn--outline {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35), 0 4px 14px rgba(99, 102, 241, 0.35);
}