/**
 * Savvy Rest Gift Card Enhancements - Recipient Fields
 * PW Gift Cards form field customization
 * Version: 2.0.0
 */

/* ==========================================
   RECIPIENT CONTAINER
   ========================================== */

#pwgc-purchase-container {
  background: linear-gradient(135deg, var(--gc-bg-cream) 0%, var(--gc-bg-white) 100%);
  padding: var(--gc-spacing-xl);
  border-radius: var(--gc-radius-lg);
  border: 2px solid var(--gc-border);
  margin-top: var(--gc-spacing-lg);
  margin-bottom: var(--gc-spacing-lg);
  box-shadow: 0 2px 12px var(--gc-shadow-sm);
  transition: opacity var(--gc-transition), max-height var(--gc-transition);
}

/* Ensure variations form is visible */
.product-type-pw-gift-card .variations_form,
.single-pw_gift_card .variations_form,
.postid-141995 .variations_form {
  display: block;
}

/* ==========================================
   FIELD CONTAINERS
   ========================================== */

.pwgc-field-container,
#pwgc-purchase-container .pwgc-field-container {
  margin-bottom: var(--gc-spacing-lg);
}

#pwgc-purchase-container .pwgc-field-container:last-child {
  margin-bottom: 0;
}

/* ==========================================
   LABELS WITH ICONS
   ========================================== */

.pwgc-label,
label[for="pwgc-to"],
label[for="pwgc-from"],
label[for="pwgc-message"],
#pwgc-purchase-container .pwgc-label {
  display: flex;
  align-items: center;
  gap: var(--gc-spacing-sm);
  font-family: var(--gc-font-family);
  font-size: var(--gc-font-size-lg);
  font-weight: var(--gc-font-weight-semibold);
  color: var(--gc-text);
  margin-bottom: var(--gc-spacing-sm);
}

/* Email icon for "Gift To" field */
label[for="pwgc-to"]::before {
  content: "📧";
  font-size: var(--gc-font-size-xl);
  line-height: 1;
}

/* Person icon for "From" field */
label[for="pwgc-from"]::before {
  content: "👤";
  font-size: var(--gc-font-size-xl);
  line-height: 1;
}

/* Message icon for "Message" field */
label[for="pwgc-message"]::before {
  content: "💬";
  font-size: var(--gc-font-size-xl);
  line-height: 1;
}

/* Add "(optional)" text to message label */
label[for="pwgc-message"]::after {
  content: "(optional)";
  font-size: var(--gc-font-size-sm);
  font-weight: var(--gc-font-weight-normal);
  color: var(--gc-text-secondary);
  font-style: italic;
  margin-left: 4px;
}

/* ==========================================
   INPUT FIELDS
   ========================================== */

.pwgc-input-text,
input#pwgc-to,
input#pwgc-from,
#pwgc-purchase-container .pwgc-input-text,
#pwgc-purchase-container #pwgc-to,
#pwgc-purchase-container #pwgc-from {
  width: 100%;
  font-size: var(--gc-font-size-md);
  padding: var(--gc-spacing-md) var(--gc-spacing);
  border: 2px solid var(--gc-border-light);
  border-radius: var(--gc-radius-sm);
  background: var(--gc-bg-pure-white);
  transition: all var(--gc-transition);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--gc-text);
  box-sizing: border-box;
}

.pwgc-input-text:focus,
input#pwgc-to:focus,
input#pwgc-from:focus,
#pwgc-purchase-container .pwgc-input-text:focus,
#pwgc-purchase-container #pwgc-to:focus,
#pwgc-purchase-container #pwgc-from:focus {
  outline: none;
  border-color: var(--gc-primary);
  box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.1);
}

/* ==========================================
   TEXTAREA - MESSAGE FIELD
   ========================================== */

#pwgc-message,
textarea#pwgc-message,
#pwgc-purchase-container #pwgc-message {
  width: 100%;
  min-height: 100px;
  font-size: var(--gc-font-size-md);
  padding: var(--gc-spacing-md) var(--gc-spacing);
  border: 2px solid var(--gc-border-light);
  border-radius: var(--gc-radius-sm);
  background: var(--gc-bg-pure-white);
  transition: all var(--gc-transition);
  resize: vertical;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--gc-text);
  line-height: var(--gc-line-height-normal);
  box-sizing: border-box;
}

#pwgc-message:focus,
textarea#pwgc-message:focus,
#pwgc-purchase-container #pwgc-message:focus {
  outline: none;
  border-color: var(--gc-primary);
  box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.1);
}

/* ==========================================
   PLACEHOLDER STYLING
   ========================================== */

#pwgc-purchase-container .pwgc-input-text::placeholder,
#pwgc-purchase-container #pwgc-message::placeholder {
  color: var(--gc-text-tertiary);
  opacity: 1;
}

/* ==========================================
   SUBTITLE/HELPER TEXT
   ========================================== */

.pwgc-subtitle,
#pwgc-purchase-container .pwgc-subtitle {
  font-size: var(--gc-font-size-sm);
  color: var(--gc-text-secondary);
  margin-top: 6px;
  font-style: italic;
}

.pwgc-character-count {
  font-size: var(--gc-font-size-sm);
  color: var(--gc-text-tertiary);
  text-align: right;
  margin-top: 4px;
}