/* =========================================================
   RR Audiocar — Página /compra-recibida/ (Thank you)
   Standalone CSS — no depende de otros archivos del theme.
   ========================================================= */

.rr-thankyou{
  --rt-red: #75AADB;
  --rt-red-dark: #23699D;
  --rt-red-soft: #F5FBFF;
  --rt-ink: #0f172a;
  --rt-text: #1f2937;
  --rt-muted: #6b7280;
  --rt-line: #e5e7eb;
  --rt-line-soft: #f1f3f6;
  --rt-bg: #f7f8fa;
  --rt-surface: #ffffff;
  --rt-success: #10b981;
  --rt-success-bg: #ecfdf5;
  --rt-success-dark: #047857;
  --rt-warn-bg: #fef3c7;
  --rt-warn-dark: #8A6A00;

  max-width: 880px;
  margin: 32px auto 48px;
  padding: 0 16px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--rt-text);
  line-height: 1.5;
}

.rr-thankyou *,
.rr-thankyou *::before,
.rr-thankyou *::after{
  box-sizing: border-box;
}

/* =====================================
   HEADER — Éxito grande
   ===================================== */
.rr-thankyou__header{
  text-align: center;
  padding: 48px 24px;
  background: var(--rt-surface);
  border-radius: 20px;
  border: 1px solid var(--rt-line);
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
  margin-bottom: 24px;
}

.rr-thankyou__icon{
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rr-thankyou__icon--success{
  background: var(--rt-success-bg);
  color: var(--rt-success-dark);
}
.rr-thankyou__icon--fail{
  background: #EEF8FF;
  color: #2F7DBA;
}
.rr-thankyou__icon svg{
  width: 40px;
  height: 40px;
}

.rr-thankyou__title{
  margin: 0 0 12px;
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 800;
  color: var(--rt-ink);
  letter-spacing: -.02em;
  line-height: 1.15;
}
.rr-thankyou__lead{
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--rt-text);
}
.rr-thankyou__email-note{
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--rt-muted);
}

/* =====================================
   OVERVIEW — 4 tiles
   ===================================== */
.rr-thankyou__overview{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.rr-thankyou__tile{
  background: var(--rt-surface);
  border: 1px solid var(--rt-line);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rr-thankyou__tile-label{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--rt-muted);
  font-weight: 700;
}
.rr-thankyou__tile-value{
  font-size: 16px;
  font-weight: 800;
  color: var(--rt-ink);
}
.rr-thankyou__tile-value--total{
  color: var(--rt-red);
  font-size: 18px;
}
@media (max-width: 720px){
  .rr-thankyou__overview{ grid-template-columns: repeat(2, 1fr); }
}

/* =====================================
   BACS — Transferencia
   ===================================== */
.rr-thankyou__bacs{
  background: var(--rt-surface);
  border: 1px solid var(--rt-line);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(15,23,42,.04);
}
.rr-thankyou__bacs h2{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 800;
  color: var(--rt-ink);
}
.rr-thankyou__bacs h2 svg{
  width: 24px;
  height: 24px;
  color: var(--rt-red);
}

.rr-thankyou__bacs-card{
  background: var(--rt-bg);
  border: 1px solid var(--rt-line);
  border-radius: 12px;
  padding: 6px 18px;
  margin-bottom: 20px;
}
.rr-thankyou__bacs-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--rt-line);
}
.rr-thankyou__bacs-row:last-child{ border-bottom: 0; }
.rr-thankyou__bacs-row span{
  color: var(--rt-muted);
  font-size: 13.5px;
  font-weight: 600;
}
.rr-thankyou__bacs-row strong{
  font-size: 14.5px;
  color: var(--rt-ink);
  font-weight: 800;
  font-family: "SF Mono", "Cascadia Mono", "Roboto Mono", "Courier New", monospace;
  letter-spacing: .01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.rr-thankyou__bacs-row--total{
  border-top: 2px solid var(--rt-line);
  border-bottom: 0 !important;
  margin-top: 4px;
  padding-top: 16px;
}
.rr-thankyou__bacs-row--total span{
  font-size: 15px;
  color: var(--rt-ink);
  font-weight: 800;
}
.rr-thankyou__bacs-amount{
  font-size: 24px !important;
  color: var(--rt-red) !important;
  font-family: inherit !important;
}

.rr-thankyou__copy-btn{
  background: var(--rt-red-soft);
  border: 0;
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: background .15s, transform .15s;
}
.rr-thankyou__copy-btn:hover{
  background: var(--rt-red);
  transform: scale(1.05);
}

/* =====================================
   PASOS A SEGUIR
   ===================================== */
.rr-thankyou__steps-heading{
  margin: 24px 0 16px;
  font-size: 18px;
  font-weight: 800;
  color: var(--rt-ink);
}
.rr-thankyou__steps{
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rr-thankyou__steps li{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  background: var(--rt-bg);
  border: 1px solid var(--rt-line);
  border-radius: 12px;
}
.rr-thankyou__step-num{
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: var(--rt-red);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 4px 10px rgba(117, 170, 219, .25);
}
.rr-thankyou__steps li > div{
  flex: 1 1 auto;
}
.rr-thankyou__steps strong{
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--rt-ink);
  margin-bottom: 4px;
}
.rr-thankyou__steps p{
  margin: 0;
  font-size: 13.5px;
  color: var(--rt-text);
  line-height: 1.5;
}
.rr-thankyou__steps a{
  color: var(--rt-red);
  font-weight: 700;
  text-decoration: none;
}
.rr-thankyou__steps a:hover{
  text-decoration: underline;
}

.rr-thankyou__bacs-tip{
  background: var(--rt-warn-bg);
  border-left: 4px solid #f59e0b;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--rt-warn-dark);
  line-height: 1.5;
}
.rr-thankyou__bacs-tip strong{ color: var(--rt-warn-dark); }

/* =====================================
   DETALLE DEL PEDIDO (tabla)
   ===================================== */
.rr-thankyou__details{
  background: var(--rt-surface);
  border: 1px solid var(--rt-line);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(15,23,42,.04);
}
.rr-thankyou__details h2{
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 800;
  color: var(--rt-ink);
}

.rr-thankyou__table{
  width: 100%;
  border-collapse: collapse;
}
.rr-thankyou__table thead th{
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--rt-muted);
  font-weight: 700;
  padding: 8px 0;
  border-bottom: 1px solid var(--rt-line);
}
.rr-thankyou__table tbody td{
  padding: 14px 0;
  border-bottom: 1px solid var(--rt-line-soft);
  vertical-align: middle;
}
.rr-thankyou__table tbody td:first-child{
  display: flex;
  align-items: center;
  gap: 14px;
}
.rr-thankyou__table img{
  width: 48px;
  height: 48px;
  object-fit: contain;
  border: 1px solid var(--rt-line);
  border-radius: 8px;
  background: #fff;
  flex-shrink: 0;
}
.rr-thankyou__table strong{
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--rt-ink);
  line-height: 1.3;
}
.rr-thankyou__table em{
  font-style: normal;
  font-size: 13px;
  color: var(--rt-muted);
}

.rr-thankyou__table tfoot tr{
  font-size: 14px;
}
.rr-thankyou__table tfoot th{
  text-align: left;
  padding: 10px 0;
  font-weight: 500;
  color: var(--rt-muted);
  border-bottom: 1px dashed var(--rt-line-soft);
}
.rr-thankyou__table tfoot td{
  padding: 10px 0;
  border-bottom: 1px dashed var(--rt-line-soft);
}
.rr-thankyou__table-order_total th,
.rr-thankyou__table-order_total td{
  padding-top: 16px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--rt-ink) !important;
  border-bottom: 0 !important;
}

.rr-text-right{ text-align: right !important; }

/* =====================================
   DIRECCIONES
   ===================================== */
.rr-thankyou__addresses{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.rr-thankyou__address{
  background: var(--rt-surface);
  border: 1px solid var(--rt-line);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(15,23,42,.04);
}
.rr-thankyou__address h3{
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 800;
  color: var(--rt-ink);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.rr-thankyou__address address{
  font-style: normal;
  font-size: 14px;
  color: var(--rt-text);
  line-height: 1.6;
}
@media (max-width: 640px){
  .rr-thankyou__addresses{ grid-template-columns: 1fr; }
}

/* =====================================
   CTA FINAL
   ===================================== */
.rr-thankyou__cta{
  text-align: center;
  background: linear-gradient(135deg, #F5FBFF, #E9F6FF);
  border: 1px solid #D7EEFF;
  border-radius: 16px;
  padding: 32px 24px;
  margin-bottom: 24px;
}
.rr-thankyou__cta h2{
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 800;
  color: var(--rt-ink);
}
.rr-thankyou__cta p{
  margin: 0 0 20px;
  color: var(--rt-text);
}
.rr-thankyou__cta-buttons{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* =====================================
   BOTONES
   ===================================== */
.rr-thankyou .rr-btn-primary,
.rr-thankyou .rr-btn-secondary,
.rr-thankyou .rr-btn-outline,
.rr-thankyou .rr-btn-whatsapp{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 14.5px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background .15s, color .15s, transform .05s, box-shadow .15s;
}
.rr-thankyou .rr-btn-primary:active,
.rr-thankyou .rr-btn-secondary:active{ transform: translateY(1px); }

.rr-thankyou .rr-btn-primary{
  background: var(--rt-red);
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(117, 170, 219, .22);
}
.rr-thankyou .rr-btn-primary:hover{ background: var(--rt-red-dark); color: #fff !important; }

.rr-thankyou .rr-btn-whatsapp{
  background: #25D366;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(37,211,102,.25);
}
.rr-thankyou .rr-btn-whatsapp:hover{ background: #1ea854; color: #fff !important; }

.rr-thankyou .rr-btn-secondary{
  background: var(--rt-ink);
  color: #fff !important;
}
.rr-thankyou .rr-btn-secondary:hover{ background: #000; }

.rr-thankyou .rr-btn-outline{
  background: transparent;
  color: var(--rt-ink) !important;
  border: 1px solid var(--rt-line);
}
.rr-thankyou .rr-btn-outline:hover{ background: var(--rt-bg); border-color: var(--rt-muted); }

/* =====================================
   FAILED STATE
   ===================================== */
.rr-thankyou__failed{
  text-align: center;
  padding: 48px 24px;
  background: var(--rt-surface);
  border: 1px solid var(--rt-line);
  border-radius: 20px;
}
.rr-thankyou__failed h1{
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 800;
  color: var(--rt-ink);
}
.rr-thankyou__failed p{ margin: 0 0 20px; color: var(--rt-text); }
.rr-thankyou__actions{
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* =====================================
   EMPTY (sin pedido)
   ===================================== */
.rr-thankyou__empty{
  text-align: center;
  padding: 64px 24px;
  background: var(--rt-surface);
  border: 1px dashed var(--rt-line);
  border-radius: 16px;
}
.rr-thankyou__empty h1{ margin: 0 0 12px; font-size: 26px; font-weight: 800; color: var(--rt-ink); }

/* =====================================
   MOBILE
   ===================================== */
@media (max-width: 640px){
  .rr-thankyou{ margin: 16px auto 32px; padding: 0 12px; }
  .rr-thankyou__header{ padding: 32px 16px; }
  .rr-thankyou__bacs,
  .rr-thankyou__details,
  .rr-thankyou__cta{ padding: 20px 16px; }
  .rr-thankyou__icon{ width: 64px; height: 64px; }
  .rr-thankyou__icon svg{ width: 30px; height: 30px; }
  .rr-thankyou__bacs-row{
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .rr-thankyou__bacs-row strong{ font-size: 16px; }
  .rr-thankyou__cta-buttons{ flex-direction: column; }
  .rr-thankyou__cta-buttons a{ width: 100%; }
}