/*
================================================

Space Vanta Theme 1.0

Module:
Cart Checkout

File:
public/cart/cs/checkout.css

Version:
1.2

Phase:
CART-FRAME-001

Purpose:

Primary Cart Action

Responsibilities:

- Checkout button visual hierarchy
- Checkout interaction state
- Checkout reflective motion
- Checkout responsive sizing

Does NOT handle:

- Checkout routing
- Checkout API
- Cart mutation
- Cart calculation

DNA:

Spatial
Geometric
Constructed
Restrained Metallic

================================================
*/


/* =================================================
01. PRIMARY ACTION
================================================= */

.sv-cart-summary__checkout {
  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 54px;

  padding:
    0 22px;

  box-sizing: border-box;

  overflow: hidden;

  border:
    1px solid
    rgba(61, 66, 72, 0.58);

  border-radius: 0;

  background:
    linear-gradient(
      145deg,
      rgba(231, 233, 235, 0.92),
      rgba(211, 214, 217, 0.76)
    );

  color:
    var(
      --sv-color-text-primary,
      #2D2D2B
    );

  font-family:
    inherit;

  font-size: 11px;

  line-height: 1;

  font-weight: 500;

  letter-spacing: 0.115em;

  text-transform: uppercase;

  text-align: center;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, 0.82),

    inset 0 -1px 0
      rgba(80, 86, 93, 0.12);

  transition:
    border-color
      var(--sv-transition-fast, 160ms ease),

    background-color
      var(--sv-transition-fast, 160ms ease),

    transform
      var(--sv-transition-fast, 160ms ease),

    box-shadow
      var(--sv-transition-fast, 160ms ease);
}


/* =================================================
02. INNER CONSTRUCTED EDGE
================================================= */

.sv-cart-summary__checkout::after {
  content: "";

  position: absolute;

  inset: 4px;

  border:
    1px solid
    rgba(255, 255, 255, 0.34);

  pointer-events: none;

  opacity: 0.82;
}


/* =================================================
03. METALLIC REFLECTION
================================================= */

.sv-cart-summary__checkout::before {
  content: "";

  position: absolute;

  top: -20%;

  bottom: -20%;

  left: -48%;

  width: 34%;

  background:
    linear-gradient(
      105deg,
      transparent,
      rgba(255, 255, 255, 0.52),
      transparent
    );

  transform:
    skewX(-18deg)
    translateX(0);

  pointer-events: none;

  opacity: 0.72;

  transition:
    transform
      720ms
      var(
        --sv-ease-brand,
        cubic-bezier(.22, .61, .36, 1)
      );
}


/* =================================================
04. HOVER
================================================= */

@media (hover: hover) and (pointer: fine) {

  .sv-cart-summary__checkout:hover {

    border-color:
      rgba(45, 48, 52, 0.76);

    background:
      linear-gradient(
        145deg,
        rgba(240, 241, 242, 0.96),
        rgba(218, 221, 224, 0.82)
      );

    box-shadow:
      inset 0 1px 0
        rgba(255, 255, 255, 0.88),

      inset 0 -1px 0
        rgba(80, 86, 93, 0.13);
  }


  .sv-cart-summary__checkout:hover::before {

    transform:
      skewX(-18deg)
      translateX(420%);
  }


  .sv-cart-summary__checkout:hover::after {

    opacity: 1;
  }
}


/* =================================================
05. ACTIVE
================================================= */

.sv-cart-summary__checkout:active {

  transform:
    translateY(1px);

  background:
    linear-gradient(
      145deg,
      rgba(218, 220, 222, 0.92),
      rgba(203, 206, 209, 0.78)
    );

  box-shadow:
    inset 0 1px 2px
      rgba(60, 65, 70, 0.10);
}


/* =================================================
06. LOADING
================================================= */

.sv-cart-summary__checkout[data-cart-checkout-loading="true"] {

  cursor: wait;

  opacity: 0.62;

  pointer-events: none;
}


/* =================================================
07. MOBILE
================================================= */

@media (max-width: 767px) {

  .sv-cart-summary__checkout {

    min-height: 52px;

    padding:
      0 18px;

    font-size: 10px;

    letter-spacing: 0.105em;
  }
}


/* =================================================
08. REDUCED MOTION
================================================= */

@media (prefers-reduced-motion: reduce) {

  .sv-cart-summary__checkout,
  .sv-cart-summary__checkout::before {

    transition: none;
  }
}