/* ===============================
   PANINI – ORDERBEKRÄFTELSE FORM
   Gäller bara orderbekräftelsesidan
   =============================== */
.page-order-confirmation {
  --brand-primary: #41656a;   /* Panini grönblå knappfärg (från din modal) */
  --brand-dark:    #2F3A3E;   /* Mörk text */
  --brand-mid:     #73828a;   /* Sekundär text/ikoner (från tidigare Panini-dialoger) */
  --brand-soft:    #dee3e7;   /* Ljus kant/bakgrund (från tidigare) */
  --surface:       #ffffff;   /* Kort-bakgrund */
  --border:        #dee3e7;   /* Kantlinjer (matchar din modal) */
  --ok:            #B6C8C2;   /* Payment badge (från din CSS) */
  --warn:          #41656a;   /* Refund badge (från din CSS) */
  --muted:         #878787;
  font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ====== Layout/kort ====== */
.page-order-confirmation .checkout-modal-container {
  padding: 32px 16px;
}
@media (min-width: 992px) {
  .page-order-confirmation .checkout-modal {
    max-width: 860px;
    margin: 0 auto;
  }
}
.page-order-confirmation .checkout-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* ====== Rubriker, text, länkar ====== */
.page-order-confirmation #ps_checkout .panel__title,
.page-order-confirmation #ps_checkout .tabpanel__title {
  color: var(--brand-dark);
  font-weight: 700;
  font-size: 18px;
  border-bottom: 1px solid #EDF2F7;
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.page-order-confirmation #ps_checkout,
.page-order-confirmation #ps_checkout p,
.page-order-confirmation #ps_checkout dd,
.page-order-confirmation #ps_checkout dt {
  color: var(--brand-dark);
}
.page-order-confirmation #ps_checkout a {
  color: var(--brand-dark);
  text-decoration: underline;
  font-weight: 600;
}

/* ====== Info-grid justeringar ====== */
.page-order-confirmation #ps_checkout .panel__infos,
.page-order-confirmation #ps_checkout .tabpanel__infos {
  grid-column-gap: 20px;
  grid-row-gap: 10px;
}
@media (min-width: 780px) {
  .page-order-confirmation #ps_checkout .panel__infos dd,
  .page-order-confirmation #ps_checkout .tabpanel__infos dd {
    text-align: left;
    font-weight: 600;
  }
}

/* ====== Dölj tekniska rader (enbart här) ====== */
.page-order-confirmation #ps_checkout [data-grid-area="environment"],
.page-order-confirmation #ps_checkout [data-grid-area="environment"] + dd,
.page-order-confirmation #ps_checkout [data-grid-area="card-liability"],
.page-order-confirmation #ps_checkout [data-grid-area="card-liability"] + dd {
  display: none !important;
}

/* ====== Tabbar och paneler som “kort” ====== */
.page-order-confirmation #ps_checkout .tab {
  border: 1px solid #E5EBF3;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  padding: 16px 14px;
}
.page-order-confirmation #ps_checkout .tabpanel-wrapper {
  border: 1px solid #E5EBF3;
  border-radius: 0 10px 10px 10px;
  padding: 18px 16px;
}
@media (max-width: 780px) {
  .page-order-confirmation #ps_checkout [role="tablist"] {
    position: static;
    height: auto;
    max-height: none;
    display: block;
    overflow: visible;
    margin-bottom: 10px;
  }
  .page-order-confirmation #ps_checkout .tabs { padding-left: 0; display: block; }
  .page-order-confirmation #ps_checkout .tab {
    border-radius: 10px;
    margin-bottom: 8px;
    border: 1px solid #E5EBF3;
  }
  .page-order-confirmation #ps_checkout .tabpanel-wrapper {
    border-radius: 10px;
  }
}

/* ====== Badges (harmoniserade, rundade) ====== */
.page-order-confirmation #ps_checkout .badge {
  border-radius: 999px !important;
  padding: 6px 10px;
  font-weight: 600;
  line-height: 1;
}
.page-order-confirmation #ps_checkout .badge.badge-payment { background-color: var(--ok); color:#fff; }
.page-order-confirmation #ps_checkout .badge.badge-refund  { background-color: var(--warn); color:#fff; }

/* Valfritt: dölj sandbox-badge här */
.page-order-confirmation #ps_checkout .badge.badge-paypal-environment-sandbox { display: none !important; }

/* ====== Knappar ====== */
.page-order-confirmation .checkout-modal-button,
.page-order-confirmation .checkout-modal-button .btn {
  background: var(--brand-primary);
  color: #fff !important;
  border-radius: 10px;
  padding: 14px 16px;
  font-weight: 700;
  letter-spacing: .2px;
  border: 0;
  transition: transform .02s ease-in, opacity .15s ease-in-out;
}
.page-order-confirmation .checkout-modal-button:hover { opacity: .92; }
.page-order-confirmation .checkout-modal-button:active { transform: translateY(1px); }

/* ===============================
   PRODUKT/TOTALTABELL – FÖRBÄTTRING
   =============================== */

/* 1) Gör tabellen visuellt konsekvent och läsbar */
.page-order-confirmation .order-confirmation table,
.page-order-confirmation .cart-summary table,
.page-order-confirmation .order-items table,
.page-order-confirmation table.table,
.page-order-confirmation .order-confirmation-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  font-size: 15px;
}
.page-order-confirmation table thead th {
  text-transform: none;
  font-weight: 700;
  color: var(--brand-mid);
  border-bottom: 1px solid var(--border);
  padding: 10px 8px;
  white-space: nowrap;
}
.page-order-confirmation table tbody td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--soft, #eef3f6);
  vertical-align: top;
}
.page-order-confirmation table tfoot th,
.page-order-confirmation table tfoot td {
  padding: 10px 8px;
  border-top: 1px solid var(--border);
  font-weight: 700;
}

/* 2) Kolumnbredder (vanligt i orderrader) */
.page-order-confirmation table .col-product,
.page-order-confirmation table th.col-product { width: 44%; }
.page-order-confirmation table .col-qty,
.page-order-confirmation table th.col-qty       { width: 12%; text-align: center; }
.page-order-confirmation table .col-price,
.page-order-confirmation table th.col-price     { width: 22%; text-align: right; }
.page-order-confirmation table .col-total,
.page-order-confirmation table th.col-total     { width: 22%; text-align: right; }

/* 3) Gör siffror högerställda (pris/summa), namn vänster */
.page-order-confirmation table td.col-price,
.page-order-confirmation table td.col-total,
.page-order-confirmation table td.text-right { text-align: right; }
.page-order-confirmation table td.col-product,
.page-order-confirmation table td.text-left  { text-align: left; }

/* 4) Säker mobilhantering: horisontell scroll för tabeller (ingen sönderbruten layout) */
.page-order-confirmation .order-confirmation table,
.page-order-confirmation .cart-summary table,
.page-order-confirmation .order-items table,
.page-order-confirmation table.table,
.page-order-confirmation .order-confirmation-table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.page-order-confirmation table thead,
.page-order-confirmation table tbody,
.page-order-confirmation table tfoot {
  width: 100%;
}

/* 5) Radrader: lite mjukare visuell rytm */
.page-order-confirmation table tbody tr:hover {
  background: #fafcfd;
}

/* 6) “Totals”-box (om totals listas utanför tabellen) */
.page-order-confirmation .order-totals,
.page-order-confirmation .order-summary-totals {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  background: #fcfdff;
}
.page-order-confirmation .order-totals .line,
.page-order-confirmation .order-summary-totals .line {
  display: flex; justify-content: space-between; padding: 6px 0;
}
.page-order-confirmation .order-totals .line.total,
.page-order-confirmation .order-summary-totals .line.total {
  font-weight: 800; border-top: 1px solid var(--border); margin-top: 6px; padding-top: 10px;
}