/* 
 * A more appealing and professional stylesheet for forms.
 */

/* Defines the container for each form section (Personal, Delivery, etc.) */
.form-section {
    padding-top: 2rem; /* pt-8 */
    margin-top: 2rem; /* mt-8 */
    border-top: 1px solid #e5e7eb; /* border-t border-gray-200 */
}

/* Removes the top border and padding from the very first section */
.form-section:first-child {
    padding-top: 0;
    margin-top: 0;
    border-top: none;
}

/* The core style for our new input fields */
.form-input-professional {
    /* Reset browser defaults */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: none;
    
    /* Custom style */
    width: 100%;
    margin-left: 0.75rem; /* ml-3 */
    padding: 0.5rem 0.25rem; /* py-2 px-1 */
    font-size: 1rem;
    color: #111827; /* text-gray-900 */
    border-bottom: 2px solid #e5e7eb; /* border-b-2 border-gray-200 */
    transition: border-color 0.3s ease-in-out;
}

/* The style when a user clicks into the input */
.form-input-professional:focus {
    outline: none;
    box-shadow: none;
    border-bottom-color: #f97316; /* border-orange-500 */
}

/* Styles for the placeholder text */
.form-input-professional::placeholder {
    color: #9ca3af; /* placeholder-gray-400 */
}

/* Special styles for read-only fields */
.form-input-professional[readonly] {
    color: #6b7280; /* text-gray-600 */
    cursor: not-allowed;
    border-bottom-style: dashed; /* Indicates it's not a standard editable field */
}


/* === NEW STYLES FOR THE WALLET REDEEM FORM === */

/* Container for the inline coupon form */
.redeem-form-container {
    display: flex;
    align-items: center;
    border-bottom: 2px solid #e5e7eb; /* A subtle line underneath */
    padding-bottom: 0.5rem; /* pb-2 */
}

/* The input field for the coupon code */
.redeem-form-input {
    /* Reset browser defaults */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    flex-grow: 1; /* Takes up the available space */
    border: none;
    background-color: transparent;
    font-size: 1.125rem; /* text-lg */
    color: #1f2937; /* text-gray-800 */
    padding: 0.5rem 0.25rem; /* py-2 px-1 */
}

.redeem-form-input:focus {
    outline: none;
    box-shadow: none;
}

.redeem-form-input::placeholder {
    color: #9ca3af; /* placeholder-gray-400 */
}