/**
 * FYOOL — Order received (thank-you) page.
 * Loaded only on the order-received endpoint.
 */

/* ─── Outer wrapper ─────────────────────────────────────────────────────── */
.fy-woo-page--order-received .fy-thankyou {
  /* Fill the standard 1200px page column (provided by .fy-woo-page-inner) so
     the thank-you content lines up with the header and every other page,
     instead of a narrower, centred 1080px block. */
  max-width: none;
  margin: 0;
  padding: 0 0 60px;
  font-family: 'Barlow', sans-serif;
  color: var(--text);
}

/* ─── Success header ────────────────────────────────────────────────────── */
.fy-thankyou-header {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--green-soft, #f0fdf4);
  border: 1px solid #bbf7d0;
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 32px;
}

.fy-thankyou-header__icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fy-thankyou-header__heading {
  font-size: 20px;
  font-weight: 700;
  color: #15803d;
  margin: 0 0 4px;
  line-height: 1.2;
}

.fy-thankyou-header__sub {
  font-size: 14px;
  color: #166534;
  margin: 0;
}

/* ─── Two-column body ───────────────────────────────────────────────────── */
.fy-thankyou-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: start;
}

/* ─── Main column — items + addresses ──────────────────────────────────── */
.fy-thankyou-main .woocommerce-order-details,
.fy-thankyou-main .woocommerce-customer-details {
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  padding: 24px 28px;
  margin-bottom: 24px;
}

.fy-thankyou-main .woocommerce-order-details__title,
.fy-thankyou-main .woocommerce-column__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}

/* Items table */
.fy-thankyou-main .woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.fy-thankyou-main .woocommerce-table--order-details thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted, #6b7280);
  padding: 0 0 10px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}

.fy-thankyou-main .woocommerce-table--order-details thead th:last-child {
  text-align: right;
}

.fy-thankyou-main .woocommerce-table--order-details tbody td {
  padding: 14px 0;
  vertical-align: middle;
  border-bottom: 1px solid var(--border, #e5e7eb);
}

.fy-thankyou-main .woocommerce-table--order-details tbody .product-name {
  font-weight: 600;
}

.fy-thankyou-main .woocommerce-table--order-details tbody .product-name .product-quantity {
  font-weight: 400;
  color: var(--muted, #6b7280);
}

.fy-thankyou-main .woocommerce-table--order-details tbody .product-total {
  text-align: right;
  white-space: nowrap;
}

/* Totals footer */
.fy-thankyou-main .woocommerce-table--order-details tfoot th,
.fy-thankyou-main .woocommerce-table--order-details tfoot td {
  padding: 8px 0;
  font-size: 14px;
}

.fy-thankyou-main .woocommerce-table--order-details tfoot td {
  text-align: right;
}

.fy-thankyou-main .woocommerce-table--order-details tfoot tr:last-child th,
.fy-thankyou-main .woocommerce-table--order-details tfoot tr:last-child td {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  padding-top: 14px;
  border-top: 2px solid var(--border, #e5e7eb);
}

/* Addresses */
.fy-thankyou-main .woocommerce-customer-details address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

.fy-thankyou-main .woocommerce-customer-details--phone,
.fy-thankyou-main .woocommerce-customer-details--email {
  margin: 4px 0 0;
  color: var(--muted, #6b7280);
  font-size: 13px;
}

/* When both billing + shipping are shown, use a 2-col sub-grid.
   WooCommerce layout CSS applies float:left/right + width:48% to .col-1/.col-2
   via .woocommerce .col2-set .col-* — reset those so the grid tracks take over.
   The col2-set clearfix ::before/::after also become grid items; suppress them. */
.fy-thankyou-main .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.fy-thankyou-main .woocommerce-columns--addresses .col-1,
.fy-thankyou-main .woocommerce-columns--addresses .col-2 {
  float: none;
  width: auto;
}

.fy-thankyou-main .woocommerce-columns--addresses::before,
.fy-thankyou-main .woocommerce-columns--addresses::after {
  content: none;
  display: none;
}

/* ─── Aside — summary card ──────────────────────────────────────────────── */
.fy-thankyou-aside {
  position: sticky;
  top: 24px;
}

.fy-ty-card {
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  padding: 24px 28px;
  margin-bottom: 16px;
}

.fy-ty-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}

/* Meta definition list */
.fy-ty-meta {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fy-ty-meta__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
}

.fy-ty-meta__row dt {
  color: var(--muted, #6b7280);
  flex-shrink: 0;
}

.fy-ty-meta__row dd {
  margin: 0;
  text-align: right;
  color: var(--text);
  word-break: break-word;
}

.fy-ty-meta__row--total {
  padding-top: 12px;
  border-top: 1px solid var(--border, #e5e7eb);
  margin-top: 4px;
}

.fy-ty-meta__row--total dt,
.fy-ty-meta__row--total dd {
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
}

/* ─── CTA links ─────────────────────────────────────────────────────────── */
.fy-ty-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fy-ty-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue, #1e90ff);
  text-decoration: none;
  transition: opacity 0.15s;
}

.fy-ty-cta--muted {
  color: var(--muted, #6b7280);
}

.fy-ty-cta:hover {
  opacity: 0.75;
}

/* ─── Failed order card ─────────────────────────────────────────────────── */
.fy-thankyou-failed {
  background: var(--error-soft, #fef2f2);
  border: 1px solid #fecaca;
  border-radius: 14px;
  padding: 40px 36px;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

.fy-thankyou-failed__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--error, #ef4444);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  margin: 0 auto 16px;
}

.fy-thankyou-failed__heading {
  font-size: 20px;
  font-weight: 700;
  color: #b91c1c;
  margin: 0 0 8px;
}

.fy-thankyou-failed__body {
  font-size: 14px;
  color: #7f1d1d;
  margin: 0 0 24px;
  line-height: 1.6;
}

.fy-thankyou-failed__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.fy-ty-btn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s;
}

.fy-ty-btn--primary {
  background: var(--error, #ef4444);
  color: #fff;
  border: none;
}

.fy-ty-btn--ghost {
  background: transparent;
  color: var(--error, #ef4444);
  border: 1px solid #fca5a5;
}

.fy-ty-btn:hover {
  opacity: 0.85;
}

/* ─── Payment-gateway injection area ───────────────────────────────────── */
/* Content injected by woocommerce_thankyou_{method} sits below the columns */
.fy-woo-page--order-received .woocommerce-order > *:not(.fy-thankyou-header):not(.fy-thankyou-body):not(.fy-thankyou-failed) {
  margin-top: 24px;
}

/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .fy-thankyou-body {
    grid-template-columns: 1fr;
  }

  .fy-thankyou-aside {
    position: static;
    order: -1; /* Summary card above items on mobile */
  }

  .fy-thankyou-main .woocommerce-columns--addresses {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .fy-thankyou-header {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }

  .fy-thankyou-main .woocommerce-order-details,
  .fy-thankyou-main .woocommerce-customer-details,
  .fy-ty-card {
    padding: 18px 16px;
  }
}