/* ==========================================================
   PROJECT XAMUCO

   File: checkout.css

   Version: 1.0.0

   Description: Checkout Page
========================================================== */

/* ======================================================
   CHECKOUT PAGE
====================================================== */

.checkout-page {
  background: var(--color-background);
}

/* ======================================================
   CHECKOUT
====================================================== */

.checkout {
  min-height: 100svh;
}

/* ======================================================
   LAYOUT
====================================================== */

.checkout__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(24rem, 0.8fr);

  min-height: calc(100svh - var(--header-height));
}

/* ======================================================
   FORM
====================================================== */

.checkout__form {
  padding: var(--space-4xl) var(--space-3xl);

  background: var(--color-background);
}

.checkout__form-inner {
  width: min(100%, 42rem);

  margin-inline: auto;
}

/* ======================================================
   INTRO
====================================================== */

.checkout__intro {
  margin-bottom: var(--space-4xl);
}

.checkout__intro .eyebrow {
  display: inline-block;

  margin-bottom: var(--space-lg);
}

.checkout__title {
  font-size: clamp(3.5rem, 6vw, 5.5rem);

  line-height: 0.95;

  color: var(--color-primary);

  text-transform: uppercase;
}

/* ======================================================
   SECTION
====================================================== */

.checkout__section {
  margin-bottom: var(--space-3xl);
}

.checkout__section-title {
  margin-bottom: var(--space-lg);

  font-size: var(--fs-xl);

  color: var(--color-dark);
}

.checkout__section-copy {
  margin-top: calc(var(--space-sm) * -1);

  margin-bottom: var(--space-lg);

  font-size: var(--fs-sm);

  line-height: 1.6;
}

/* ======================================================
   EXPRESS PAYMENT
====================================================== */

.checkout__express {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: var(--space-md);
}

.checkout__express-button {
  min-height: 3.5rem;

  padding: var(--space-md);

  font: inherit;

  cursor: not-allowed;

  color: var(--color-background);

  background: var(--color-black);

  border: 0;

  opacity: 0.65;
}

/* ======================================================
   DIVIDER
====================================================== */

.checkout__divider {
  display: flex;

  align-items: center;

  gap: var(--space-lg);

  margin-top: var(--space-xl);
}

.checkout__divider::before,
.checkout__divider::after {
  content: "";

  flex: 1;

  height: 1px;

  background: rgba(71, 0, 0, 0.18);
}

.checkout__divider span {
  font-size: var(--fs-sm);

  color: var(--color-dark);

  opacity: 0.6;
}

/* ======================================================
   GRID
====================================================== */

.checkout__grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: var(--space-md);
}

.checkout__grid--three {
  grid-template-columns:
    0.8fr
    1fr
    1fr;
}

/* ======================================================
   FIELD
====================================================== */

.checkout__field {
  display: flex;

  flex-direction: column;

  gap: var(--space-sm);

  margin-bottom: var(--space-md);
}

.checkout__field label {
  font-size: var(--fs-sm);

  color: var(--color-dark);
}

.checkout__field input,
.checkout__field select {
  width: 100%;

  min-height: 3.5rem;

  padding: 0 var(--space-md);

  font: inherit;

  color: var(--color-dark);

  background: rgba(255, 255, 255, 0.35);

  border: 1px solid rgba(71, 0, 0, 0.2);

  outline: none;

  transition:
    border-color var(--transition-normal) var(--ease-out),
    background-color var(--transition-normal) var(--ease-out);
}

.checkout__field input:focus,
.checkout__field select:focus {
  border-color: var(--color-primary);

  background: rgba(255, 255, 255, 0.6);
}

/* ======================================================
   SHIPPING OPTION
====================================================== */

.checkout__shipping-option {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: var(--space-xl);

  padding: var(--space-lg) var(--space-md);

  color: var(--color-dark);

  border: 1px solid var(--color-primary);
}

.checkout__shipping-option > div {
  display: flex;

  flex-direction: column;

  gap: var(--space-xs);
}

.checkout__shipping-option span {
  font-size: var(--fs-sm);

  opacity: 0.65;
}

/* ======================================================
   MERCADO PAGO · CARD PAYMENT BRICK
====================================================== */

.checkout__payment-brick {
  width: 100%;

  min-height: 20rem;
}

/* ======================================================
   SUBMIT
====================================================== */

.checkout__submit {
  width: 100%;

  justify-content: center;
}

.checkout__submit:disabled {
  cursor: not-allowed;

  opacity: 0.5;
}

/* ======================================================
   LEGAL
====================================================== */

.checkout__legal {
  margin-top: var(--space-lg);

  font-size: var(--fs-sm);

  line-height: 1.6;

  text-align: center;

  opacity: 0.65;
}

/* ======================================================
   SUMMARY
====================================================== */

.checkout__summary {
  position: relative;

  padding: var(--space-4xl) var(--space-3xl);

  background: rgba(71, 0, 0, 0.06);

  border-left: 1px solid rgba(71, 0, 0, 0.12);
}

.checkout__summary-inner {
  position: sticky;

  top: calc(var(--header-height) + var(--space-xl));

  width: min(100%, 34rem);
}

/* ======================================================
   PRODUCT
====================================================== */

.checkout__product {
  display: grid;

  grid-template-columns:
    5rem
    1fr
    auto;

  align-items: center;

  gap: var(--space-lg);

  margin-bottom: var(--space-2xl);
}

/* ======================================================
   PRODUCT ART
====================================================== */

.checkout__product-art {
  position: relative;

  width: 5rem;

  aspect-ratio: 1 / 1;

  padding: var(--space-xs);

  background: var(--color-background);

  border: 1px solid rgba(71, 0, 0, 0.12);
}

.checkout__product-image,
.checkout__product-label {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;
}

.checkout__product-quantity {
  position: absolute;

  top: -0.6rem;
  right: -0.6rem;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 1.6rem;
  height: 1.6rem;

  font-size: var(--fs-xs);

  color: var(--color-background);

  background: var(--color-dark);

  border-radius: 50%;
}

/* ======================================================
   PRODUCT INFO
====================================================== */

.checkout__product-info h2 {
  margin-bottom: var(--space-xs);

  font-size: var(--fs-md);

  color: var(--color-dark);
}

.checkout__product-info p {
  margin: 0;

  font-size: var(--fs-sm);

  opacity: 0.65;
}

/* ======================================================
   PRODUCT PRICE
====================================================== */

.checkout__product-price {
  white-space: nowrap;

  color: var(--color-dark);
}

/* ======================================================
   TOTALS
====================================================== */

.checkout__totals {
  margin: 0;

  padding-top: var(--space-xl);

  border-top: 1px solid rgba(71, 0, 0, 0.18);
}

.checkout__totals > div {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: var(--space-xl);

  padding-block: var(--space-sm);
}

.checkout__totals dt,
.checkout__totals dd {
  margin: 0;
}

.checkout__totals dd {
  text-align: right;
}

/* ======================================================
   TOTAL
====================================================== */

.checkout__total {
  margin-top: var(--space-md);

  padding-top: var(--space-lg) !important;

  border-top: 1px solid rgba(71, 0, 0, 0.18);
}

.checkout__total dt,
.checkout__total dd {
  font-size: var(--fs-xl);

  color: var(--color-dark);
}

/* ======================================================
   CHECKOUT QUANTITY
====================================================== */

.checkout__quantity {
  display: flex;

  align-items: center;

  gap: var(--space-sm);

  margin-top: var(--space-md);
}

.checkout__quantity-button {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 2rem;
  height: 2rem;

  padding: 0;

  cursor: pointer;

  font: inherit;

  color: var(--color-dark);

  background: transparent;

  border: 1px solid rgba(71, 0, 0, 0.25);
}

.checkout__quantity-value {
  min-width: 2rem;

  text-align: center;
}

/* ======================================================
   COUPON
====================================================== */

.checkout__coupon {
  margin-bottom: var(--space-2xl);
}

.checkout__coupon label {
  display: block;

  margin-bottom: var(--space-sm);

  font-size: var(--fs-sm);

  color: var(--color-dark);
}

.checkout__coupon-form {
  display: grid;

  grid-template-columns: 1fr auto;

  gap: var(--space-sm);
}

.checkout__coupon-form input {
  min-width: 0;

  min-height: 3rem;

  padding-inline: var(--space-md);

  font: inherit;

  color: var(--color-dark);

  background: var(--color-background);

  border: 1px solid rgba(71, 0, 0, 0.2);

  outline: none;
}

.checkout__coupon-button {
  padding-inline: var(--space-lg);

  cursor: pointer;

  font: inherit;

  color: var(--color-background);

  background: var(--color-dark);

  border: 0;
}

.checkout__coupon-message {
  min-height: 1.3rem;

  margin-top: var(--space-sm);

  font-size: var(--fs-sm);
}

.checkout__quantity-button:disabled {
  cursor: not-allowed;

  opacity: 0.35;
}

.checkout__discount-row dd {
  color: var(--color-primary);
}

.checkout__coupon-message {
  line-height: 1.5;
}

/* ======================================================
   AGE CONFIRMATION
====================================================== */

.checkout__age-confirmation {
  display: flex;

  align-items: flex-start;

  gap: var(--space-md);

  margin-bottom: var(--space-xl);

  cursor: pointer;
}

.checkout__age-confirmation input {
  flex: 0 0 auto;

  width: 1rem;
  height: 1rem;

  margin-top: 0.25rem;
}

.checkout__age-confirmation span {
  font-size: var(--fs-sm);

  line-height: 1.6;

  color: var(--color-dark);
}