/* Smartphoneshop.dk - Confirmation 2.0
   Progressive enhancement of DanDomain's native receipt page.
   Native order data stays in the DOM; only presentation is rebuilt. */

body.ss-confirmation-page {
  --ss-confirm-ink:#11181c;
  --ss-confirm-muted:#66777c;
  --ss-confirm-border:#dbe5e7;
  --ss-confirm-soft:#f5f8f8;
  --ss-confirm-soft-teal:#eef9f9;
  --ss-confirm-teal:#00adb5;
  --ss-confirm-teal-dark:#008e95;
  --ss-confirm-yellow:#fed766;
  background:#f4f7f7;
}

body.ss-confirmation-page .site-content {
  padding-top:26px !important;
  padding-bottom:64px !important;
  background:#f4f7f7 !important;
}

body.ss-confirmation-page .site-main-content {
  max-width:1180px !important;
  margin:0 auto !important;
  padding-bottom:0 !important;
}

body.ss-confirmation-page .site-main-content > .row {
  margin:0 !important;
}

body.ss-confirmation-page .site-main-content > .row > [class*="col-"] {
  width:100% !important;
  max-width:none !important;
  float:none !important;
  padding:0 !important;
}

body.ss-confirmation-page .ss-confirmation-root,
body.ss-confirmation-page .ss-confirmation-shell,
body.ss-confirmation-page .ss-confirmation-shell * {
  box-sizing:border-box;
}

.ss-confirmation-shell {
  width:100%;
  color:var(--ss-confirm-ink);
  font-family:"Open Sans",Arial,sans-serif;
}

.ss-confirmation-shell h1,
.ss-confirmation-shell h2,
.ss-confirmation-shell strong {
  color:var(--ss-confirm-ink);
}

.ss-confirmation-shell h1,
.ss-confirmation-shell h2 {
  font-family:"Reddit Sans","Open Sans",Arial,sans-serif;
  letter-spacing:-.025em;
}

.ss-confirmation-eyebrow {
  display:block;
  margin:0 0 7px;
  color:var(--ss-confirm-teal-dark);
  font-size:11px;
  font-weight:850;
  letter-spacing:.08em;
  line-height:1.2;
  text-transform:uppercase;
}

/* Success state */
.ss-confirmation-hero {
  padding:34px 38px 30px;
  border:1px solid #cfe0e2;
  border-radius:18px;
  background:#fff;
  box-shadow:0 14px 36px rgba(17,24,28,.055);
  text-align:center;
}

.ss-confirmation-success-icon {
  display:flex;
  width:58px;
  height:58px;
  margin:0 auto 17px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--ss-confirm-teal);
  color:#fff;
  font-size:24px;
  box-shadow:0 10px 24px rgba(0,173,181,.2);
}

.ss-confirmation-hero h1 {
  margin:0;
  font-size:30px;
  font-weight:850;
  line-height:1.13;
}

.ss-confirmation-hero__order {
  margin:8px 0 0;
  color:var(--ss-confirm-ink);
  font-size:16px;
  font-weight:700;
}

.ss-confirmation-hero__email {
  margin:6px 0 0;
  color:var(--ss-confirm-muted);
  font-size:13px;
  line-height:1.55;
}

.ss-confirmation-facts {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  max-width:880px;
  margin:25px auto 0;
  text-align:left;
}

.ss-confirmation-facts article {
  min-height:112px;
  padding:16px 17px;
  border:1px solid var(--ss-confirm-border);
  border-radius:12px;
  background:#fbfcfc;
}

.ss-confirmation-facts article > span {
  display:block;
  margin-bottom:5px;
  color:var(--ss-confirm-muted);
  font-size:11px;
  font-weight:700;
}

.ss-confirmation-facts article > strong {
  display:block;
  font-size:15px;
  font-weight:800;
  line-height:1.3;
}

.ss-confirmation-facts article > small {
  display:block;
  margin-top:6px;
  color:var(--ss-confirm-muted);
  font-size:10.5px;
  line-height:1.45;
}

/* Main reassurance area */
.ss-confirmation-main-grid {
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr);
  gap:18px;
  margin-top:18px;
}

.ss-confirmation-card,
.ss-confirmation-section {
  border:1px solid var(--ss-confirm-border);
  border-radius:16px;
  background:#fff;
  box-shadow:0 10px 26px rgba(17,24,28,.04);
}

.ss-confirmation-card {
  padding:24px 26px;
}

.ss-confirmation-card h2,
.ss-confirmation-section h2 {
  margin:0;
  font-size:20px;
  font-weight:830;
  line-height:1.25;
}

.ss-confirmation-timeline {
  position:relative;
  margin:21px 0 0;
  padding:0;
  list-style:none;
}

.ss-confirmation-timeline::before {
  position:absolute;
  top:17px;
  bottom:18px;
  left:16px;
  width:2px;
  background:#e5ecee;
  content:"";
}

.ss-confirmation-timeline li {
  position:relative;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:13px;
  min-height:56px;
  padding:0 0 16px;
}

.ss-confirmation-timeline li:last-child { padding-bottom:0; }

.ss-confirmation-timeline__marker {
  position:relative;
  z-index:1;
  display:flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  border:2px solid #dbe5e7;
  border-radius:50%;
  background:#fff;
  color:#fff;
  font-size:11px;
}

.ss-confirmation-timeline li.is-done .ss-confirmation-timeline__marker {
  border-color:var(--ss-confirm-teal);
  background:var(--ss-confirm-teal);
}

.ss-confirmation-timeline li strong {
  display:block;
  padding-top:1px;
  font-size:13px;
  font-weight:800;
  line-height:1.35;
}

.ss-confirmation-timeline li span:not(.ss-confirmation-timeline__marker) {
  display:block;
  margin-top:3px;
  color:var(--ss-confirm-muted);
  font-size:11.5px;
  line-height:1.45;
}

.ss-confirmation-support .ss-confirmation-info-row {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:11px 0;
  border-bottom:1px solid #edf1f2;
  color:var(--ss-confirm-muted);
  font-size:11.5px;
  line-height:1.45;
}

.ss-confirmation-support .ss-confirmation-info-row:first-of-type { margin-top:13px; }
.ss-confirmation-support .ss-confirmation-info-row:last-of-type { border-bottom:0; }
.ss-confirmation-support .ss-confirmation-info-row strong { max-width:65%; text-align:right; font-size:11.5px; }
.ss-confirmation-support .ss-confirmation-info-row--stack { display:block; }
.ss-confirmation-support .ss-confirmation-info-row--stack strong { display:block; max-width:none; margin-top:5px; text-align:left; font-weight:650; }
.ss-confirmation-support__actions { margin-top:17px; }

/* Generic sections */
.ss-confirmation-section {
  margin-top:18px;
  padding:24px 26px;
}

.ss-confirmation-section__head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:22px;
  margin-bottom:18px;
}

.ss-confirmation-section__head p,
.ss-confirmation-aftercare p {
  margin:5px 0 0;
  color:var(--ss-confirm-muted);
  font-size:12px;
  line-height:1.55;
}

.ss-confirmation-text-link {
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  gap:7px;
  color:var(--ss-confirm-teal-dark) !important;
  font-size:11.5px;
  font-weight:800;
  text-decoration:none !important;
}

.ss-confirmation-text-link:hover { text-decoration:underline !important; }

/* Native DanDomain order block, retained as source of truth */
.ss-confirmation-order__content {
  overflow:hidden;
  border:1px solid #e1e8ea;
  border-radius:12px;
  background:#fff;
}

.ss-confirmation-native-order {
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:#fff !important;
  box-shadow:none !important;
}

.ss-confirmation-native-order table,
.ss-confirmation-native-order.table {
  width:100% !important;
  margin:0 !important;
  border:0 !important;
  border-collapse:collapse !important;
  background:#fff !important;
}

.ss-confirmation-native-order th,
.ss-confirmation-native-order td {
  padding:14px 12px !important;
  border:0 !important;
  border-bottom:1px solid #edf1f2 !important;
  background:#fff !important;
  color:var(--ss-confirm-ink) !important;
  font-size:11.5px !important;
  line-height:1.45 !important;
  vertical-align:top !important;
}

.ss-confirmation-native-order th {
  color:var(--ss-confirm-muted) !important;
  font-size:10.5px !important;
  font-weight:750 !important;
  text-transform:none !important;
}

.ss-confirmation-native-order tr:last-child td { border-bottom:0 !important; }
.ss-confirmation-native-order img { max-width:58px !important; height:auto !important; border-radius:7px; }
.ss-confirmation-native-order a { color:var(--ss-confirm-ink) !important; font-weight:700; text-decoration:none !important; }
.ss-confirmation-native-order a:hover { color:var(--ss-confirm-teal-dark) !important; }
.ss-confirmation-native-order strong { font-weight:800 !important; }

.ss-confirmation-native-order .panel,
.ss-confirmation-native-order .panel-border,
.ss-confirmation-native-order .modules,
.ss-confirmation-native-order .m-cart {
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:#fff !important;
  box-shadow:none !important;
}

.ss-confirmation-order-fallback {
  margin:0;
  padding:18px;
  color:var(--ss-confirm-muted);
  font-size:12px;
}

/* Post-purchase guides */
.ss-confirmation-guide-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.ss-confirmation-guide-card {
  display:flex;
  gap:13px;
  min-height:126px;
  padding:17px;
  border:1px solid #e1e8ea;
  border-radius:12px;
  background:#fbfcfc;
}

.ss-confirmation-guide-card__icon {
  display:flex;
  width:34px;
  height:34px;
  flex:0 0 34px;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:var(--ss-confirm-soft-teal);
  color:var(--ss-confirm-teal-dark);
  font-size:14px;
}

.ss-confirmation-guide-card strong {
  display:block;
  margin:1px 0 5px;
  font-size:12.5px;
  font-weight:800;
  line-height:1.35;
}

.ss-confirmation-guide-card p {
  margin:0;
  color:var(--ss-confirm-muted);
  font-size:11px;
  line-height:1.5;
}

/* Soft commercial layer - deliberately below confirmation/order/help */
.ss-confirmation-aftercare {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  background:linear-gradient(135deg,#f2fbfb 0%,#fff 72%);
}

.ss-confirmation-aftercare__copy { max-width:670px; }
.ss-confirmation-aftercare__actions { display:flex; flex:0 0 auto; gap:9px; }

.ss-confirmation-primary-btn,
.ss-confirmation-secondary-btn {
  display:inline-flex;
  min-height:42px;
  align-items:center;
  justify-content:center;
  padding:0 16px;
  border-radius:9px;
  font-size:11.5px;
  font-weight:800;
  line-height:1.2;
  text-align:center;
  text-decoration:none !important;
}

.ss-confirmation-primary-btn {
  border:1px solid var(--ss-confirm-teal) !important;
  background:var(--ss-confirm-teal) !important;
  color:#fff !important;
  box-shadow:0 7px 16px rgba(0,173,181,.14);
}

.ss-confirmation-primary-btn:hover { border-color:var(--ss-confirm-teal-dark) !important; background:var(--ss-confirm-teal-dark) !important; color:#fff !important; }

.ss-confirmation-secondary-btn {
  border:1px solid #d4dfe1 !important;
  background:#fff !important;
  color:#53666c !important;
}

.ss-confirmation-secondary-btn:hover { border-color:#bfcdd0 !important; color:var(--ss-confirm-ink) !important; }

/* Confirmation header should no longer send the customer back to an emptied cart. */
body.ss-confirmation-page .ss-checkout-back-link { color:#c7d1d3 !important; }

@media (max-width:900px) {
  .ss-confirmation-main-grid { grid-template-columns:1fr; }
  .ss-confirmation-facts { grid-template-columns:1fr; }
  .ss-confirmation-facts article { min-height:0; }
  .ss-confirmation-guide-grid { grid-template-columns:1fr; }
  .ss-confirmation-aftercare { display:block; }
  .ss-confirmation-aftercare__actions { margin-top:17px; }
}

@media (max-width:620px) {
  body.ss-confirmation-page .site-content { padding-top:14px !important; padding-bottom:36px !important; }
  body.ss-confirmation-page .site-main-content { padding-left:10px !important; padding-right:10px !important; }
  .ss-confirmation-hero { padding:26px 16px 21px; border-radius:14px; }
  .ss-confirmation-success-icon { width:50px; height:50px; margin-bottom:14px; font-size:20px; }
  .ss-confirmation-hero h1 { font-size:24px; }
  .ss-confirmation-hero__order { font-size:14px; }
  .ss-confirmation-facts { margin-top:20px; }
  .ss-confirmation-card,
  .ss-confirmation-section { padding:19px 16px; border-radius:14px; }
  .ss-confirmation-section__head { display:block; }
  .ss-confirmation-section__head .ss-confirmation-text-link { margin-top:12px; }
  .ss-confirmation-aftercare__actions { flex-direction:column; }
  .ss-confirmation-primary-btn,
  .ss-confirmation-secondary-btn { width:100%; }
  .ss-confirmation-order__content { overflow-x:auto; }
  .ss-confirmation-native-order { min-width:620px; }
}

/* Confirmation 2.0 v1.1 - date-based fulfillment plan */
.ss-confirmation-delivery-plan {
  margin-top:18px;
}

.ss-confirmation-delivery-intro {
  margin:0 0 14px;
  color:var(--ss-confirm-muted);
  font-size:12px;
  line-height:1.55;
}

.ss-confirmation-delivery-intro strong {
  color:var(--ss-confirm-ink);
  font-weight:800;
}

.ss-confirmation-delivery-groups {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.ss-confirmation-delivery-group {
  min-width:0;
  padding:15px 16px;
  border:1px solid #dfe8ea;
  border-radius:12px;
  background:#fbfcfc;
}

.ss-confirmation-delivery-group.is-held {
  border-color:#cfe5e7;
  background:var(--ss-confirm-soft-teal);
}

.ss-confirmation-delivery-group__head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding-bottom:10px;
  border-bottom:1px solid #e8eef0;
}

.ss-confirmation-delivery-group__head > span {
  color:var(--ss-confirm-teal-dark);
  font-size:10.5px;
  font-weight:850;
  letter-spacing:.045em;
  line-height:1.35;
  text-transform:uppercase;
}

.ss-confirmation-delivery-group__head > strong {
  flex:0 0 auto;
  font-size:12.5px;
  font-weight:850;
  line-height:1.35;
  text-align:right;
}

.ss-confirmation-delivery-items {
  margin:11px 0 0;
  padding:0;
  list-style:none;
}

.ss-confirmation-delivery-items li {
  position:relative;
  margin:0;
  padding:4px 0 4px 14px;
  color:#405158;
  font-size:11px;
  line-height:1.4;
}

.ss-confirmation-delivery-items li::before {
  position:absolute;
  top:10px;
  left:1px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--ss-confirm-teal);
  content:"";
}

.ss-confirmation-delivery-items li.is-more {
  color:var(--ss-confirm-muted);
  font-weight:700;
}

.ss-confirmation-delivery-group > small {
  display:block;
  margin-top:10px;
  padding-top:9px;
  border-top:1px solid #e8eef0;
  color:var(--ss-confirm-muted);
  font-size:10.5px;
  line-height:1.45;
}

.ss-confirmation-delivery-plan--held .ss-confirmation-delivery-group {
  max-width:100%;
}

/* Make the converted delivery note in the native order slightly calmer. */
.ss-confirmation-native-order td {
  word-break:normal !important;
}

@media (max-width:720px) {
  .ss-confirmation-delivery-groups {
    grid-template-columns:1fr;
  }

  .ss-confirmation-delivery-group__head {
    display:block;
  }

  .ss-confirmation-delivery-group__head > strong {
    display:block;
    margin-top:4px;
    text-align:left;
  }
}


/* Confirmation 2.0 v1.3 - explicit Taastrup pickup location */
.ss-confirmation-pickup-notice {
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:0 0 14px;
  padding:14px 15px;
  border:1px solid #bcdfe2;
  border-left:4px solid var(--ss-confirm-teal);
  border-radius:12px;
  background:#f3fbfb;
}

.ss-confirmation-pickup-notice__icon {
  display:flex;
  flex:0 0 30px;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--ss-confirm-teal);
  color:#fff;
  font-size:14px;
}

.ss-confirmation-pickup-notice strong {
  display:block;
  margin:0 0 2px;
  color:var(--ss-confirm-ink);
  font-size:13px;
  font-weight:850;
  line-height:1.35;
}

.ss-confirmation-pickup-notice p {
  margin:0;
  color:var(--ss-confirm-ink);
  font-size:12px;
  font-weight:750;
  line-height:1.45;
}

.ss-confirmation-pickup-notice small {
  display:block;
  margin-top:5px;
  color:#5f6f75;
  font-size:10.5px;
  line-height:1.45;
}

.ss-confirmation-fact--pickup {
  border-color:#c8e4e6 !important;
  background:#f7fcfc !important;
}

@media (max-width:720px) {
  .ss-confirmation-pickup-notice { padding:13px; }
}