/*
 * Checkout skeleton: replaces the logo splash on /checkout while Flutter
 * starts. Inserted by checkout_skeleton.js and removed by removeSplashFromWeb()
 * in index.html once Flutter takes over.
 *
 * Mirrors CheckoutLoadingPage in lib/features/checkout/checkout_loading_page.dart (the
 * skeletonized address step and order summary inside CheckoutPageSmall and
 * CheckoutPageLarge), so the handoff to Flutter does not move content. Sizes
 * are logical pixels from that layout; keep both in sync. Like the Flutter
 * skeleton, fills and outlines take one container color (surfaceSecondary),
 * so there are no borders.
 */

@font-face {
  font-family: "RethinkSans";
  src: url("assets/assets/fonts/RethinkSans-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

#checkout-skeleton {
  display: none;
}

.checkout-skeleton #splash {
  display: none;
}

/* Flutter's VisualDensity: standard on Android/iOS, compact elsewhere. */
.checkout-skeleton #checkout-skeleton {
  --cs-icon-button: 48px;
  --cs-field: 44px;
  --cs-choice: 44px;
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  color: #161615;
  font-family: "RethinkSans", system-ui, sans-serif;
}

.checkout-skeleton.cs-compact #checkout-skeleton {
  --cs-icon-button: 40px;
  --cs-field: 36px;
  --cs-choice: 36px;
}

#checkout-skeleton * {
  box-sizing: border-box;
}

/* Skeletonizer ShimmerEffect: surfaceBrandPrimaryLit -> surfacePrimary. */
.cs-bone {
  border-radius: 999px;
  background: linear-gradient(100deg, #f7f9e6 40%, #ffffff 50%, #f7f9e6 60%) #f7f9e6;
  background-size: 200% 100%;
  background-attachment: fixed;
  animation: cs-shimmer 1.5s linear infinite;
}

@keyframes cs-shimmer {
  from { background-position: 150% 0; }
  to { background-position: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-bone { animation: none; }
}

/* Text bones are about 80% of the font size, centered in the line box. */
.cs-text {
  display: flex;
  align-items: center;
}

.cs-text > .cs-bone {
  width: var(--w);
  max-width: 100%;
}

.cs-h1 { height: 31px; }
.cs-h1 > .cs-bone { height: 19px; }
.cs-h2 { height: 24px; }
.cs-h2 > .cs-bone { height: 14px; }
.cs-h3 { height: 20px; }
.cs-h3 > .cs-bone { height: 13px; }
.cs-body2 { height: 18px; }
.cs-body2 > .cs-bone { height: 11px; }
.cs-label { height: 16px; }
.cs-label > .cs-bone { height: 10px; }

/* Header (not skeletonized in Flutter either). */
.cs-header {
  padding: 12px 16px;
}

.cs-header-start {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cs-back {
  display: grid;
  place-items: center;
  width: var(--cs-icon-button);
  height: var(--cs-icon-button);
}

.cs-logo,
.cs-header-end {
  display: none;
}

.cs-stepper {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-step {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cs-step::after {
  content: "";
  display: block;
  height: 4px;
  margin-top: 4px;
  border-radius: 4px;
  background: #e9e6dc;
}

.cs-step.is-active::after {
  background: #b0c801;
}

.cs-divider {
  height: 1px;
  background: #f2f2f2;
}

/* Body: address step column with footer, order summary panel when large. */
.cs-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

.cs-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.cs-scroll {
  flex: 1;
  overflow: hidden;
  padding: 8px 16px;
}

.cs-form {
  max-width: 620px;
  margin: 0 auto;
  container-type: inline-size;
}

.cs-summary-card {
  position: relative;
  height: 56px;
  margin-bottom: 20px;
  border-radius: 12px;
  background: #f3f1e8;
}

.cs-at {
  position: absolute;
}

.cs-circle {
  width: 24px;
  height: 24px;
}

.cs-login {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 40px;
  margin-bottom: 6px;
}

.cs-pair {
  display: flex;
  flex-direction: column;
  column-gap: 12px;
}

.cs-pair > * {
  flex: 1;
  min-width: 0;
}

/* ResponsiveFormFieldPair: side by side from a 500px container width. */
@container (min-width: 500px) {
  .cs-pair {
    flex-direction: row;
  }
}

.cs-field-group {
  margin-bottom: 12px;
}

.cs-field-group > .cs-label {
  margin-bottom: 4px;
}

/* Layout slot stays 44px; compact density draws a 36px field at its top. */
.cs-field {
  height: 44px;
}

.cs-field > div {
  display: flex;
  align-items: center;
  height: var(--cs-field);
  padding: 0 16px;
  border-radius: 8px;
  background: #f3f1e8;
}

.cs-field .cs-bone {
  width: var(--w);
  max-width: 100%;
  height: 11px;
}

.cs-section-divider {
  display: flex;
  align-items: center;
  height: 32px;
}

.cs-section-divider::before {
  content: "";
  flex: 1;
  height: 1px;
  background: #f3f1e8;
}

.cs-choices {
  display: flex;
  gap: 12px;
  margin: 8px 0 12px;
}

.cs-choices > .cs-bone {
  flex: 1;
  height: var(--cs-choice);
  border-radius: 8px;
}

.cs-manual {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 48px;
  margin: 8px 0;
  padding: 0 8px;
  border-radius: 8px;
  background: #f3f1e8;
}

.cs-link {
  height: 26px;
  padding: 4px 8px;
}

.cs-centered {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-footer {
  display: flex;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow: inset 0 1px #f2f2f2;
}

/* Disabled CustomButton.icon, as rendered by the loaded checkout. */
.cs-button {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 40px;
  padding: 0 15px 0 12px;
  border-radius: 8px;
  background: #f3f1e8;
  color: #d5cbbf;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
}

.cs-panel {
  display: none;
}

@media (min-width: 600px) {
  .cs-header {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    box-shadow: inset 0 -1px #f2f2f2;
  }

  .cs-header + .cs-divider {
    display: none;
  }

  .cs-header-start,
  .cs-header-end {
    display: flex;
    flex: 0 0 190px;
  }

  .cs-logo {
    display: block;
    width: 72px;
    height: 28px;
    object-fit: contain;
  }

  .cs-stepper {
    flex: 1;
    max-width: 650px;
    margin: 0 auto;
  }

  .cs-scroll {
    padding: 32px 48px;
  }

  /* Columns hug the split: the form ends 48px before the middle. */
  .cs-form {
    max-width: 520px;
    margin: 0 0 0 auto;
  }

  .cs-summary-card {
    display: none;
  }

  .cs-choices {
    margin-bottom: 18px;
  }

  .cs-footer {
    justify-content: flex-end;
    padding: 20px 48px;
  }

  .cs-button {
    flex: none;
  }

  .cs-panel {
    position: relative;
    display: block;
    flex: 1;
    min-width: 0;
    background: #f3f1e8;
  }

  .cs-panel-content {
    position: absolute;
    inset: 32px 0 auto;
    height: 310px;
  }

  /* Above Flutter's 1000px tablet end the header row is capped at two 616px columns with
     48px insets, and summary rows keep CheckoutValues.largeColumnContentMaxWidth beside the
     split. 1000.02px also covers fractional widths without the newer range syntax. */
  @media (min-width: 1000.02px) {
    .cs-header {
      padding: 16px max(48px, calc(50% - 568px));
    }

    .cs-panel-content {
      left: 48px;
      width: min(calc(100% - 96px), 520px);
    }
  }

  .cs-quantity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 85px;
    height: 40px;
    padding: 0 4px;
  }

  .cs-panel .cs-field {
    position: absolute;
    top: 205px;
    right: 113px;
    left: 12px;
  }
}