/* Checkout-only presentation. Loaded after shop.css on comprar.php. */
.shop-checkout {
  background: radial-gradient(circle at 78% 10%, #16375a 0, transparent 34%), #071321;
  color: #f4f8ff;
}

.shop-checkout .shop-announcement {
  min-height: 34px;
  background: #0e2340;
  border-color: #254567;
  color: #c2d6ef;
}

.shop-checkout .shop-header {
  background: rgba(7, 20, 36, .94);
  border-color: #2a4668;
}

.shop-checkout .shop-nav { min-height: 68px; }
.shop-checkout .shop-cart { background: #153555; border-color: #3973a8; }
.shop-checkout .shop-breadcrumb { margin: 22px 0 10px; }
.shop-checkout .shop-guest-page { padding-bottom: 68px; }

.shop-checkout .shop-guest-head {
  display: grid;
  align-items: start;
  gap: 21px;
  margin: 18px 0 25px;
}

.shop-checkout .shop-guest-head > div:first-child > span,
.shop-checkout .shop-guest-card-head > span,
.shop-checkout .shop-guest-summary-label {
  color: #83bcff;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .13em;
}

.shop-checkout .shop-guest-head h1 {
  max-width: 740px;
  margin: 8px 0;
  font-size: clamp(34px, 8vw, 54px);
  line-height: 1.06;
  letter-spacing: -.055em;
}

.shop-checkout .shop-guest-head p {
  max-width: 600px;
  color: #b6c9e2;
  font-size: 15px;
  line-height: 1.55;
}

.shop-checkout .shop-guest-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
}

.shop-checkout .shop-guest-steps b {
  min-width: 0;
  border: 1px solid #345675;
  border-radius: 10px;
  background: #112740;
  padding: 10px 11px;
  color: #a9d1ff;
  font-size: 12px;
}

.shop-checkout .shop-guest-steps b:first-child {
  border-color: #5a95d0;
  background: #1a3c62;
}

.shop-checkout .shop-guest-steps small {
  color: #d2e2f5;
  font-size: 10px;
  line-height: 1.15;
}

.shop-checkout .shop-guest-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 17px;
}

.shop-checkout .shop-guest-main { gap: 17px; }
.shop-checkout .shop-guest-card,
.shop-checkout .shop-guest-summary {
  min-width: 0;
  border: 1px solid #315272;
  border-radius: 18px;
  background: linear-gradient(145deg, #132c48, #0d1e33 68%);
  box-shadow: 0 20px 50px #030a17a3;
}

.shop-checkout .shop-guest-card { padding: clamp(21px, 3vw, 36px); }
.shop-checkout .shop-guest-card-head h2 {
  margin: 7px 0;
  font-size: clamp(22px, 4vw, 27px);
  line-height: 1.18;
}

.shop-checkout .shop-guest-card-head p {
  max-width: 600px;
  color: #b7c9df;
  font-size: 13px;
  line-height: 1.6;
}

.shop-checkout .shop-guest-fields {
  grid-template-columns: minmax(0, 1fr);
  gap: 17px;
  margin-top: 24px;
}

.shop-checkout .shop-guest-fields label { color: #ecf4ff; font-size: 13px; }
.shop-checkout .shop-guest-fields input {
  min-height: 53px;
  border-color: #426488;
  background: #081a2d;
  font-size: 15px;
}

.shop-checkout .shop-guest-fields input::placeholder { color: #8198b3; }
.shop-checkout .shop-guest-info {
  align-items: flex-start;
  gap: 14px;
  margin-top: 21px;
  border-color: #3973a4;
  border-radius: 12px;
  background: #12375a;
  padding: 16px;
}

.shop-checkout .shop-guest-info > span {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: #26577e;
  color: #d5eaff;
  font: 20px/1 sans-serif;
}

.shop-checkout .shop-guest-info strong {
  display: block;
  margin-bottom: 4px;
  color: #eaf6ff;
  font-size: 14px;
}

.shop-checkout .shop-guest-info p {
  color: #c3dcf5;
  font-size: 12px;
  line-height: 1.6;
}

.shop-checkout .shop-guest-divider { margin: 30px 0; background: #385676; }
.shop-checkout .shop-guest-method {
  margin: 21px 0;
  border-color: #5d9ada;
  border-radius: 12px;
  background: #1a4269;
  padding: 17px;
}

.shop-checkout .shop-guest-method strong { font-size: 15px; }
.shop-checkout .shop-guest-method small { color: #c0d7ef; font-size: 11px; }
.shop-checkout .shop-guest-method > b { color: #77edc4; }
.shop-checkout .shop-guest-submit {
  min-height: 56px;
  border-color: #84beff;
  background: linear-gradient(125deg, #3b8ef8, #2665da);
  font-size: 15px;
}

.shop-checkout .shop-guest-consent { color: #a8bbd3; font-size: 11px; line-height: 1.45; }
.shop-checkout #guest-error { margin: 15px 0 0; }
.shop-checkout .shop-guest-provider-notice { color: #d2e4f7; }

.shop-checkout .shop-guest-summary {
  position: static;
  order: -1;
  overflow: hidden;
}

.shop-checkout .shop-guest-summary-label {
  border-bottom: 1px solid #315272;
  padding: 13px 17px;
}

.shop-checkout .shop-guest-product {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 16px 17px;
}

.shop-checkout .shop-guest-product img {
  width: 76px;
  aspect-ratio: 1;
  border-radius: 9px;
  object-fit: cover;
}

.shop-checkout .shop-guest-product small { margin: 0; font-size: 9px; }
.shop-checkout .shop-guest-product h2 { font-size: 18px; line-height: 1.2; }
.shop-checkout .shop-guest-product p { color: #a9c0db; font-size: 11px; }
.shop-checkout .shop-guest-summary ul { gap: 10px; padding: 14px 17px; }
.shop-checkout .shop-guest-summary li { color: #b0c4dc; font-size: 12px; }
.shop-checkout .shop-guest-summary li strong { text-align: right; font-size: 12px; }
.shop-checkout .shop-guest-total { align-items: center; padding: 15px 17px 5px; }
.shop-checkout .shop-guest-total span { color: #d4e4f7; font-weight: 800; }
.shop-checkout .shop-guest-total strong { color: #fff; font-size: 27px; }
.shop-checkout .shop-guest-summary > p { padding: 0 17px 17px; color: #a6bbd4; font-size: 11px; }
.shop-checkout .shop-guest-support { padding: 14px 17px; }

.shop-checkout .shop-guest-pix-grid { grid-template-columns: minmax(0, 1fr); }
.shop-checkout .shop-guest-qr { width: min(100%, 250px); min-height: 0; aspect-ratio: 1; justify-self: center; }
.shop-checkout .shop-guest-code textarea { min-height: 112px; font-size: 12px; }
.shop-checkout .shop-guest-wait { color: #d0e4ff; }

.shop-checkout .shop-guest-success-mark {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  margin-bottom: 15px;
  border: 1px solid #55bb97;
  border-radius: 15px;
  background: #174739;
  color: #98f5d1;
  font-size: 27px;
  font-weight: 900;
}

.shop-checkout .shop-guest-success > span { color: #8af4ca; }
.shop-checkout .shop-guest-success h2 { font-size: clamp(28px, 5vw, 36px); line-height: 1.12; }
.shop-checkout .shop-guest-success > p { color: #c4d6eb; line-height: 1.55; }
.shop-checkout .shop-guest-key {
  grid-template-columns: minmax(0, 1fr);
  gap: 15px;
  border-color: #419a80;
  border-radius: 12px;
  background: #113d37;
  padding: 19px;
}

.shop-checkout .shop-guest-key small { display: block; margin-bottom: 7px; color: #a3f4d7; }
.shop-checkout .shop-guest-key strong { display: block; color: #fff; font-size: 17px; letter-spacing: .03em; }
.shop-checkout .shop-guest-key .shop-secondary { min-height: 42px; }
.shop-checkout .shop-guest-success .shop-guest-key-help { margin: -9px 0 21px; font-size: 12px; }
.shop-checkout .shop-guest-email-note { border-color: #4978aa; background: #143758; }
.shop-checkout .shop-guest-success-actions { display: grid; gap: 10px; }

.shop-checkout a:focus-visible,
.shop-checkout button:focus-visible,
.shop-checkout textarea:focus-visible {
  outline: 3px solid #a8d4ff;
  outline-offset: 3px;
}

@media (min-width: 560px) {
  .shop-checkout .shop-guest-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-checkout .shop-guest-key { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .shop-checkout .shop-guest-key .shop-secondary { width: auto; }
  .shop-checkout .shop-guest-success-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 840px) {
  .shop-checkout .shop-guest-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .shop-checkout .shop-guest-steps { width: 360px; }
  .shop-checkout .shop-guest-layout { grid-template-columns: minmax(0, 1.6fr) minmax(310px, .8fr); gap: 24px; }
  .shop-checkout .shop-guest-summary { position: sticky; top: 92px; order: 0; }
  .shop-checkout .shop-guest-product { display: block; padding: 20px; }
  .shop-checkout .shop-guest-product img { width: 100%; aspect-ratio: 1.8; }
  .shop-checkout .shop-guest-product small { margin-top: 17px; font-size: 10px; }
  .shop-checkout .shop-guest-product h2 { font-size: 21px; }
  .shop-checkout .shop-guest-summary ul { padding: 17px 20px; }
  .shop-checkout .shop-guest-total { padding-inline: 20px; }
  .shop-checkout .shop-guest-summary > p { padding-inline: 20px; }
  .shop-checkout .shop-guest-support { padding-inline: 20px; }
  .shop-checkout .shop-guest-pix-grid { grid-template-columns: 220px minmax(0, 1fr); }
  .shop-checkout .shop-guest-qr { width: 220px; }
}

@media (max-width: 559px) {
  .shop-checkout .shop-announcement { gap: 8px; font-size: 9px; }
  .shop-checkout .shop-nav { min-height: 60px; }
  .shop-checkout .shop-guest-head { margin-top: 13px; }
  .shop-checkout .shop-guest-head p { font-size: 13px; }
  .shop-checkout .shop-guest-steps b { padding: 9px 7px; font-size: 11px; }
  .shop-checkout .shop-guest-steps small { font-size: 9px; }
  .shop-checkout .shop-guest-card { padding: 20px 17px; }
  .shop-checkout .shop-guest-info { padding: 13px; }
  .shop-checkout .shop-guest-info > span { width: 30px; height: 30px; font-size: 17px; }
  .shop-checkout .shop-guest-method { padding: 13px; }
  .shop-checkout .shop-guest-method > b { font-size: 9px; }
  .shop-checkout .shop-guest-success-actions .shop-primary span { margin-left: auto; }
}
