/* CSS Variables */
:root {
  --demo-brand-primary: #fb0404;
  --demo-brand-primary-dark: #d10303;
  --demo-text-primary: #1a1a1a;
  --demo-text-secondary: #666;
  --demo-border-color: #e5e5e5;
  --demo-bg-light: #f8f8f8;
  --demo-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --demo-shadow-lg: -4px 0 20px rgba(0, 0, 0, 0.15);
}

/* Hide product category on gift product page */
.single-product .product_meta {
  display: none !important;
}

.single-product {
  .entry-summary {
    .stock {
      display: none;
    }
  }
}

.single-product {
  form.cart {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;

    .vou_pay_your_price_labels_wrap {
      width: 100%;
    }

    .form-row.validate-required {
      width: 100%;
    }

    .vou_pay_your_price_labels_wrap {
      width: 100%;
    }

    .woo-vou-fields-main-wrapper {
      width: 100%;
    }

    .woo-vou-recipient-fields {
      td.label {
        background: transparent !important;
      }
    }
  }
}

/* Gift Card Fields Styling */
.demo-gift-fields {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--demo-border-color);

  p {
    margin-bottom: 16px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  label {
    display: block;
    font-weight: 500;
    color: var(--demo-text-primary);
    margin-bottom: 6px;
    font-size: 14px;
  }

  input[type="text"],
  textarea {
    width: 100%;
    max-width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--demo-border-color);
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    color: var(--demo-text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;

    &:focus {
      outline: none;
      border-color: var(--demo-brand-primary);
      box-shadow: 0 0 0 3px rgba(251, 4, 4, 0.1);
    }
  }

  textarea {
    resize: vertical;
    min-height: 80px;
  }
}

.demo-gift-amount-wrapper {
  margin-bottom: 20px;

  label {
    display: block;
    font-weight: 500;
    color: var(--demo-text-primary);
    margin-bottom: 8px;
    font-size: 14px;
  }

  input[type="number"] {
    width: 100%;
    max-width: 200px;
    padding: 10px 12px;
    border: 1px solid var(--demo-border-color);
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    color: var(--demo-text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;

    &:focus {
      outline: none;
      border-color: var(--demo-brand-primary);
      box-shadow: 0 0 0 3px rgba(251, 4, 4, 0.1);
    }
  }
}