html {
  background: var(--wp--preset--color--background);
}

body {
  background: radial-gradient(
    circle at right 15%,              
    rgba(142, 154, 236, 0.4) 0%,     
    rgba(142, 154, 236, 0) 25%       
  ),
  radial-gradient(
    circle at left 85%,               
    rgba(142, 154, 236, 0.4) 0%,     
    rgba(142, 154, 236, 0) 25%       
  );
  min-height: 100vh;
}

// Common WooCommerce input field styling
.woocommerce,
.wc-block-components-form,
.woocommerce-page {
  input[type=email], 
  input[type=number], 
  input[type=password], 
  input[type=tel], 
  input[type=text], 
  input[type=url],
  input[type=search],
  input[type=date],
  textarea,
  select {
    padding: 1em;
    color: var(--wp--preset--color--foreground);
    background: transparent;
    border: 1px solid var(--wp--preset--color--foreground);
    border-radius: 12px;
    transition: border-color 0.3s, box-shadow 0.3s;
    
    &::placeholder {
      color: var(--wp--preset--color--foreground);
      opacity: 0.7;
    }
    
    &:hover {
      border-color: var(--wp--preset--color--foreground);
    }
    
    &:focus {
      outline: none;
      border-color: var(--wp--preset--color--foreground);
      box-shadow: 0 0 0 1px var(--wp--preset--color--foreground);
    }
  }
  
  // Special styling for select fields
  select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 6l5 5 5-5 2 1-7 7-7-7z' fill='%23FAF7EF'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1em top 50%;
    padding-right: 2.5em;
    
    option {
      background-color: var(--wp--preset--color--background);
      color: var(--wp--preset--color--foreground);
    }
  }
  
  // Textarea specific styling
  textarea {
    min-height: 100px;
    resize: vertical;
  }
  
  // Checkbox and radio styling
  input[type=checkbox],
  input[type=radio] {
    position: relative;
    width: 1.25em;
    height: 1.25em;
    margin-right: 0.5em;
    background: transparent;
    border: 1px solid var(--wp--preset--color--foreground);
    cursor: pointer;
    
    &:checked {
      background-color: var(--wp--preset--color--foreground);
      border-color: var(--wp--preset--color--foreground);
      
      &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 0.5em;
        height: 0.5em;
        background-color: var(--wp--preset--color--background);
        border-radius: 1px;
      }
    }
    
    &:focus {
      outline: none;
      box-shadow: 0 0 0 1px var(--wp--preset--color--foreground);
    }
  }
  
  input[type=radio] {
    border-radius: 50%;
    
    &:checked::after {
      border-radius: 50%;
    }
  }
  
  // Error state styling
  .woocommerce-invalid,
  .woocommerce-invalid-required-field,
  .has-error {
    input[type=email], 
    input[type=number], 
    input[type=password], 
    input[type=tel], 
    input[type=text], 
    input[type=url],
    input[type=search],
    input[type=date],
    textarea,
    select {
      border-color: var(--wp--preset--color--foreground);
      border-width: 2px;
      
      &:focus {
        box-shadow: 0 0 0 1px var(--wp--preset--color--foreground);
      }
    }
  }
  
  .woocommerce-error {
    background-color: rgba(250, 247, 239, 0.1);
    border-left: 3px solid var(--wp--preset--color--foreground);
    color: var(--wp--preset--color--foreground);
    padding: 1em 1.5em;
    margin-bottom: 2em;
    border-radius: 4px;
    
    li {
      list-style: none;
      margin-left: 0;
    }
  }
  
  // Validation error messages
  .woocommerce-error,
  .woocommerce-message {
    margin: 0 0 2em;
    padding: 1em 1.5em;
    border-radius: 4px;
    
    &::before {
      margin-right: 0.5em;
    }
  }
  
  span.required {
    color: var(--wp--preset--color--foreground);
    opacity: 0.8;
  }
}

// Specific class for WooCommerce components
.wc-block-components-form {
  .wc-block-components-text-input,
  .wc-block-components-select {
    input[type=email], 
    input[type=number], 
    input[type=password], 
    input[type=tel], 
    input[type=text], 
    input[type=url],
    select {
      padding: 1em;
      color: var(--wp--preset--color--foreground);
      background: transparent;
      border: 1px solid var(--wp--preset--color--foreground);
      border-radius: 12px;
      
      &::placeholder {
        color: var(--wp--preset--color--foreground);
        opacity: 0.7;
      }
      
      &:hover {
        border-color: var(--wp--preset--color--foreground);
      }
      
      &:focus {
        outline: none;
        border-color: var(--wp--preset--color--foreground);
        box-shadow: 0 0 0 1px var(--wp--preset--color--foreground);
      }
    }
  }
  
  // Style the combobox
  .wc-block-components-combobox .wc-block-components-combobox-control {
    input.components-combobox-control__input {
      padding: 1em;
      color: var(--wp--preset--color--foreground);
      background: transparent;
      border: 1px solid var(--wp--preset--color--foreground);
      border-radius: 12px;
      
      &:hover, &:focus {
        border-color: var(--wp--preset--color--foreground);
      }
    }
  }
  
  // Error states for WC blocks
  .has-error {
    input, select, textarea {
      border-color: var(--wp--preset--color--foreground);
      border-width: 2px;
    }
    
    .wc-block-components-validation-error {
      color: var(--wp--preset--color--foreground);
      font-size: 0.875em;
      margin-top: 0.5em;
    }
  }
}

// Fix for variable products dropdown
.woocommerce div.product form.cart .variations select,
.single-product div.product table.variations select {
  padding: 1em;
  color: var(--wp--preset--color--foreground);
  background-color: transparent;
  border: 1px solid var(--wp--preset--color--foreground);
  border-radius: 12px;
  min-width: 150px;
}

// Fix for cart quantity inputs
.woocommerce .quantity .qty {
  padding: 0.7em;
  text-align: center;
}

// Form labels
.woocommerce form .form-row label,
.wc-block-components-form .wc-block-components-text-input label {
  color: var(--wp--preset--color--foreground);
  margin-bottom: 0.5em;
  display: block;
  margin-left: .5em
}

// Form validation indicators
.woocommerce form .form-row {
  &.woocommerce-validated {
    input.input-text {
      border-color: var(--wp--preset--color--foreground);
      border-width: 2px;
      
      &:focus {
        box-shadow: 0 0 0 1px var(--wp--preset--color--foreground);
      }
    }
  }
  
  &.woocommerce-invalid {
    input.input-text {
      border-color: var(--wp--preset--color--foreground);
      border-width: 2px;
      
      &:focus {
        box-shadow: 0 0 0 1px var(--wp--preset--color--foreground);
      }
    }
  }
  
  .woocommerce-input-wrapper {
    .description {
      background: rgba(250, 247, 239, 0.1);
      border-radius: 3px;
      color: var(--wp--preset--color--foreground);
      padding: 0.5em 1em;
      margin: 0.5em 0 0;
      font-size: 0.875em;
    }
  }
}

// Button styles for consistency
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wc-block-components-button:not(.is-link) {
  border: 1px solid var(--wp--preset--color--foreground);
  border-radius: 0.85em;
  padding: .75em 1.5em;
  background-color: transparent;
  color: var(--wp--preset--color--foreground);
  transition: all 0.25s ease;
  font-weight: normal;
  
  &:hover {
    background-color: var(--wp--preset--color--foreground);
    color: var(--wp--preset--color--background);
    text-decoration: none;
  }
  
  &.alt {
    background-color: var(--wp--preset--color--foreground);
    color: var(--wp--preset--color--background);
    
    &:hover {
      background-color: transparent;
      color: var(--wp--preset--color--foreground);
    }
  }
}

// Notices and messages
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
  border-radius: 4px;
  background-color: rgba(250, 247, 239, 0.1);
  border-left: 3px solid var(--wp--preset--color--foreground);
  color: var(--wp--preset--color--foreground);
  padding: 1em 1.5em;
  margin-bottom: 2em;
  
  a {
    color: var(--wp--preset--color--foreground);
    font-weight: 600;
    text-decoration: underline;
    
    &:hover {
      text-decoration: none;
    }
  }
}

// Make sure error feedback text uses foreground color
.wc-block-components-notice-banner,
.woocommerce-error {
  color: var(--wp--preset--color--foreground);
  
  &.is-error,
  &.is-info,
  &.is-success,
  &.is-warning {
    border-left-color: var(--wp--preset--color--foreground);
  }
}

#coming-soon-footer-banner {
  background: black;
  color: var(--wp--preset--color--foreground);
}

.wc-block-components-title.wc-block-components-title {
  font-size: 38px;
  margin-bottom: 1rem;
}

.wc-block-components-notice-banner.is-error {
  background-color: black;
  border-color: white;
}

.wc-blocks-components-select .wc-blocks-components-select__select {
  border: 1px solid var(--wp--preset--color--foreground);
  border-radius: 12px;
  color: var(--wp--preset--color--foreground);
}

.wc-blocks-components-select .wc-blocks-components-select__label {
  color: var(--wp--preset--color--foreground);
}

.wc-blocks-components-select .wc-blocks-components-select__container {
  background: transparent;
  color: var(--wp--preset--color--foreground);
  border: 1px solid var(--wp--preset--color--foreground);
  border: none;
  border-radius: 12px;
}

.wc-blocks-components-select .wc-blocks-components-select__expand {
  fill: var(--wp--preset--color--foreground) !important;
}

.wc-block-components-form .wc-block-components-text-input.has-error label, .wc-block-components-text-input.has-error label {
  color: var(--wp--preset--color--foreground);
}

.wc-block-components-form .wc-block-components-text-input input[type=email]:focus, .wc-block-components-form .wc-block-components-text-input input[type=number]:focus, .wc-block-components-form .wc-block-components-text-input input[type=password]:focus, .wc-block-components-form .wc-block-components-text-input input[type=tel]:focus, .wc-block-components-form .wc-block-components-text-input input[type=text]:focus, .wc-block-components-form .wc-block-components-text-input input[type=url]:focus, .wc-block-components-text-input input[type=email]:focus, .wc-block-components-text-input input[type=number]:focus, .wc-block-components-text-input input[type=password]:focus, .wc-block-components-text-input input[type=tel]:focus, .wc-block-components-text-input input[type=text]:focus, .wc-block-components-text-input input[type=url]:focus {
  background-color: var(--wp--preset--color--background);
}

.wc-block-components-form .wc-block-components-text-input input[type=email]:focus, .wc-block-components-form .wc-block-components-text-input input[type=number]:focus, .wc-block-components-form .wc-block-components-text-input input[type=password]:focus, .wc-block-components-form .wc-block-components-text-input input[type=tel]:focus, .wc-block-components-form .wc-block-components-text-input input[type=text]:focus, .wc-block-components-form .wc-block-components-text-input input[type=url]:focus, .wc-block-components-text-input input[type=email]:focus, .wc-block-components-text-input input[type=number]:focus, .wc-block-components-text-input input[type=password]:focus, .wc-block-components-text-input input[type=tel]:focus, .wc-block-components-text-input input[type=text]:focus, .wc-block-components-text-input input[type=url]:focus {
  color: var(--wp--preset--color--foreground);
}

@media (max-width: 480px) {
  .wp-block-woocommerce-checkout.alignwide.wc-block-checkout {
    padding-inline: 3rem;
  }
  [data-block-name="woocommerce/page-content-wrapper"] {
    display: none;
  }
}

.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .wc-block-components-button:not(.is-link) {
  background-color: var(--wp--preset--color--foreground);
  color: var(--wp--preset--color--background);
  text-transform: uppercase;
  transition: all 0.125s ease-in-out;
  &:hover {
    background-color: white;
    color: black;
  }
}