/* Phlex Utilities - Grid, Typography, and Spacing */
/* Standalone CSS file to replace React SCSS dependencies */

/* ============================================
   Grid System
   ============================================ */

.container {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.row {
  box-sizing: border-box;
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: -0.25rem;
  margin-left: -0.25rem;
}

.row.reverse {
  flex-direction: row-reverse;
}

.col.reverse {
  flex-direction: column-reverse;
}

.col-xs,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
  box-sizing: border-box;
  flex: 0 0 auto;
  padding-right: 0.25rem;
  padding-left: 0.25rem;
}

.col-xs {
  flex-grow: 1;
  flex-basis: 0;
  max-width: 100%;
}

.col-xs-1 {
  flex-basis: 8.33333333%;
  max-width: 8.33333333%;
}

.col-xs-2 {
  flex-basis: 16.66666667%;
  max-width: 16.66666667%;
}

.col-xs-3 {
  flex-basis: 25%;
  max-width: 25%;
}

.col-xs-4 {
  flex-basis: 33.33333333%;
  max-width: 33.33333333%;
}

.col-xs-5 {
  flex-basis: 41.66666667%;
  max-width: 41.66666667%;
}

.col-xs-6 {
  flex-basis: 50%;
  max-width: 50%;
}

.col-xs-7 {
  flex-basis: 58.33333333%;
  max-width: 58.33333333%;
}

.col-xs-8 {
  flex-basis: 66.66666667%;
  max-width: 66.66666667%;
}

.col-xs-9 {
  flex-basis: 75%;
  max-width: 75%;
}

.col-xs-10 {
  flex-basis: 83.33333333%;
  max-width: 83.33333333%;
}

.col-xs-11 {
  flex-basis: 91.66666667%;
  max-width: 91.66666667%;
}

.col-xs-12 {
  flex-basis: 100%;
  max-width: 100%;
}

/* ============================================
   Typography Utilities
   ============================================ */

/* Font Sizes */
.size-small {
  font-size: 0.57rem;
  line-height: 0.75rem;
}

.size-normal {
  font-size: 0.67rem;
  line-height: 1rem;
}

.size-medium {
  font-size: 0.86rem;
  line-height: 1.25rem;
}

.size-large {
  font-size: 1.2rem;
  line-height: 1.5rem;
}

.size-huge {
  font-size: 1.9rem;
  line-height: 2.25rem;
}

/* Font Weights */
.weight-400,
.normal {
  font-weight: 400;
}

.weight-500,
.semibold {
  font-weight: 500;
  font-stretch: 95%;
}

.weight-600 {
  font-weight: 600;
}

.weight-700,
.bold,
strong,
b {
  font-weight: 700;
}

/* Line Heights */
.line-0-75 {
  line-height: 0.75rem;
}

.line-1 {
  line-height: 1rem;
}

.line-1-25 {
  line-height: 1.25rem;
}

.line-1-5 {
  line-height: 1.5rem;
}

.line-1-75 {
  line-height: 1.75rem;
}

/* Text Alignment */
.text-align-left {
  text-align: left;
}

.text-align-center {
  text-align: center;
}

.text-align-right {
  text-align: right;
}

/* Font families */
.compact {
  font-family: "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.stencil {
  font-family: "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-weight: 700;
}

/* Text Styles */
.uppercase {
  text-transform: uppercase;
}

.italic {
  font-style: italic;
}

.underlined {
  text-decoration: underline;
}

.nowrap {
  white-space: nowrap;
}

.ellipsis {
  text-overflow: ellipsis;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

/* ============================================
   Spacing Utilities - Padding
   ============================================ */

.padding-hairline {
  padding: 1px;
}

.padding-0-125 {
  padding: 0.125rem;
}

.padding-0-25 {
  padding: 0.25rem;
}

.padding-0-5 {
  padding: 0.5rem;
}

.padding-0-75 {
  padding: 0.75rem;
}

.padding-1 {
  padding: 1rem;
}

.padding-1-25 {
  padding: 1.25rem;
}

.padding-1-5 {
  padding: 1.5rem;
}

.padding-2 {
  padding: 2rem;
}

.padding-3 {
  padding: 3rem;
}

.padding-4 {
  padding: 4rem;
}

.padding-5 {
  padding: 5rem;
}

/* Directional Padding */
.padding-top {
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

.padding-right {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
}

.padding-bottom {
  padding-top: 0;
  padding-right: 0;
  padding-left: 0;
}

.padding-left {
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
}

.padding-x {
  padding-top: 0;
  padding-bottom: 0;
}

.padding-y {
  padding-left: 0;
  padding-right: 0;
}

.padding-top-0 {
  padding-top: 0;
}

.padding-right-0 {
  padding-right: 0;
}

.padding-bottom-0 {
  padding-bottom: 0;
}

.padding-left-0 {
  padding-left: 0;
}

/* ============================================
   Spacing Utilities - Margin
   ============================================ */

.margin-auto {
  margin: auto;
}

.margin-auto-x {
  margin-left: auto;
  margin-right: auto;
}

.margin-auto-y {
  margin-top: auto;
  margin-bottom: auto;
}

.margin-hairline {
  margin: 1px;
}

.margin-0-125 {
  margin: 0.125rem;
}

.margin-0-25 {
  margin: 0.25rem;
}

.margin-0-5 {
  margin: 0.5rem;
}

.margin-0-75 {
  margin: 0.75rem;
}

.margin-1 {
  margin: 1rem;
}

.margin-1-25 {
  margin: 1.25rem;
}

.margin-1-5 {
  margin: 1.5rem;
}

.margin-2 {
  margin: 2rem;
}

.margin-3 {
  margin: 3rem;
}

.margin-4 {
  margin: 4rem;
}

.margin-5 {
  margin: 5rem;
}

/* Directional Margin */
.margin-top {
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}

.margin-right {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
}

.margin-bottom {
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;
}

.margin-left {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
}

.margin-x {
  margin-top: 0;
  margin-bottom: 0;
}

.margin-y {
  margin-left: 0;
  margin-right: 0;
}

.margin-top-0 {
  margin-top: 0;
}

.margin-top-0-5 {
  margin-top: 0.5rem;
}

.margin-right-0 {
  margin-right: 0;
}

.margin-bottom-0 {
  margin-bottom: 0;
}

.margin-left-0 {
  margin-left: 0;
}

/* ============================================
   Child Margins (for spacing between children)
   ============================================ */

.child-margins-x-0-125 > * + * {
  margin-left: 0.125rem;
}

.child-margins-x-0-25 > * + * {
  margin-left: 0.25rem;
}

.child-margins-x-0-5 > * + * {
  margin-left: 0.5rem;
}

.child-margins-x-0-75 > * + * {
  margin-left: 0.75rem;
}

.child-margins-x-1 > * + * {
  margin-left: 1rem;
}

.child-margins-x-1-25 > * + * {
  margin-left: 1.25rem;
}

.child-margins-x-1-5 > * + * {
  margin-left: 1.5rem;
}

.child-margins-x-2 > * + * {
  margin-left: 2rem;
}

.child-margins-y-0-125 > * + * {
  margin-top: 0.125rem;
}

.child-margins-y-0-25 > * + * {
  margin-top: 0.25rem;
}

.child-margins-y-0-5 > * + * {
  margin-top: 0.5rem;
}

.child-margins-y-0-75 > * + * {
  margin-top: 0.75rem;
}

.child-margins-y-1 > * + * {
  margin-top: 1rem;
}

.child-margins-y-1-25 > * + * {
  margin-top: 1.25rem;
}

.child-margins-y-1-5 > * + * {
  margin-top: 1.5rem;
}

.child-margins-y-2 > * + * {
  margin-top: 2rem;
}

/* ============================================
   Layout Utilities - Site Wrapper
   ============================================ */

.site-wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100%;
}

.site-wrapper__main {
  flex-grow: 1;
  flex-shrink: 0;
}

.site-wrapper__footer {
  flex-shrink: 0;
}

/* ============================================
   Logo Styles
   ============================================ */

.logo {
  svg {
    width: auto;
    height: 2rem;
  }
  img {
    width: auto;
    height: 2rem;
  }
}

.logo--small {
  svg {
    height: 1rem;
  }
  img {
    height: 1rem;
  }
}

/* ============================================
   Header Styles
   ============================================ */

.header {
  position: relative;
  padding: 3rem 0 1rem;
  margin-bottom: 1rem;
}

.header:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background-color: #e2ecf6;
  z-index: -1;
}

.header:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  transform: skewY(-4deg);
  background-color: #e2ecf6;
  z-index: -1;
}

.header--purple:before {
  background-color: #39235d;
}

.header--purple:after {
  background-color: #39235d;
}

/* ============================================
   Stats Styles
   ============================================ */

.stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: -0.25rem -1rem;
}

.stats__item {
  position: relative;
  padding: 0.25rem 1rem;
  white-space: nowrap;
  font-size: 0.86rem;
  line-height: 1.25rem;
}

.stats__item:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0.25rem;
  bottom: 0.25rem;
  width: 1px;
  background-color: #a1a7bb;
}

.stats__item:first-child:before {
  display: none;
}

@media (max-width: 767px) {
  .stats__item {
    font-size: 0.67rem;
    line-height: 1rem;
  }
  
  .stats__item:before {
    display: none;
  }
}

/* ============================================
   Card Styles
   ============================================ */

.card {
  position: relative;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.75rem #e2ecf6, 0 1px 1px 1px #e2ecf6;
  background-color: white;
}

/* ============================================
   Suggestion Section Styles
   ============================================ */

.responsive-suggestion-card {
  display: flex;
  flex-direction: row;
}

@media (max-width: 767px) {
  .responsive-suggestion-card {
    flex-direction: column;
  }
}

.responsive-suggestion-card_left {
  flex: 1;
  padding: 1.5rem;
  border-right: 1px solid #e0e2e9;
}

@media (max-width: 767px) {
  .responsive-suggestion-card_left {
    padding-bottom: 0px;
    border-right: none;
  }
}

.repurchase-icon-container {
  width: 480px;
}

@media (max-width: 767px) {
  .repurchase-icon-container {
    width: 100%;
  }
}

#how-to-prepare-link-left {
  display: block;
}

@media (max-width: 767px) {
  #how-to-prepare-link-left {
    display: none;
  }
}

#how-to-prepare-link-right {
  display: none;
}

@media (max-width: 767px) {
  #how-to-prepare-link-right {
    display: block;
  }
}

.promotions-banner-container {
  background-color: white;
  width: 100%;
  padding-top: 3.5rem;
  padding-bottom: 2rem;
  min-height: 18rem;
  position: relative;
}

.repurchase-graphic {
  display: block;
  position: absolute;
  right: -50px;
  top: 50px;
  max-width: 400px;
  width: auto;
  height: auto;
}

@media (max-width: 991px) {
  .repurchase-graphic {
    display: none;
  }
}

.desktop-1-5-padding {
  padding: 1.5rem;
}

@media (max-width: 767px) {
  .desktop-1-5-padding {
    padding: 0px;
  }
}

.flex-1 {
  flex: 1;
}

.itemLinkContainer {
  padding: 0 1.5rem 1rem 1.5rem;
}

@media (max-width: 767px) {
  .itemLinkContainer {
    padding: 1rem;
    padding-top: 0;
  }
}

.itemLink {
  display: block;
  position: relative;
  background: #e2ecf6;
  color: #ff6b35;
  font-size: 1.25rem;
  line-height: 1.5rem;
  text-align: center;
  font-weight: 500;
  padding: 0.5rem 2rem;
  border-radius: 256px;
  text-decoration: none;
}

.itemLink.filled {
  background: #ff6b35;
  color: white;
}

.itemLink.underline {
  text-decoration: underline;
}

.itemLink > img {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
}

/* ============================================
   Design Tokens Import
   ============================================
   Design tokens and accessibility colors are in design_tokens.css
   which should be loaded before this file in the layout.
*/

/* ============================================
   Inline Icon Text Styles (matches React)
   ============================================ */

.inline-icon-text {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

@media (max-width: 767px) {
  .inline-icon-text {
    justify-content: center;
  }
}

.inline-icon-text--start {
  justify-content: flex-start;
}

.inline-icon-text__icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.inline-icon-text__text {
  margin-left: 0.125rem;
}

/* ============================================
   Select Component Styles
   ============================================ */

.select__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 20px;
  vertical-align: middle;
}

.select__icon > * {
  transform: translateY(-5px);
  vertical-align: middle;
}

.mobile-hide {
  display: none;
}

@media (min-width: 576px) {
  .mobile-hide {
    display: inline;
  }
}

.rotate-180 {
  transform: rotate(180deg);
}

/* ============================================
   Result Summary Component Styles
   ============================================ */

.result-summary-title {
  vertical-align: text-bottom;
  font-weight: 500;
  margin-bottom: 5px;
  position: relative;
  bottom: 1px;
}

.result-summary-order-number {
  color: #626e8e;
  vertical-align: text-bottom;
  font-weight: 500;
  margin-bottom: 5px;
  position: relative;
  bottom: 1px;
  font: inherit;
}

.color-dark {
  color: #1a1a1a;
}

/* ============================================
   Accessibility Utilities
   ============================================ */

/* Screen reader only - visually hidden but accessible to assistive technology */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}