/* General form container styling */
.form-container {
    max-width: 600px !important;
    margin: 0 auto !important;
    padding: 20px !important;
    border: 1px solid #00FFFF !important; /* Thin cyan border around the module */
    border-radius: 5px !important; /* Optional: slight rounding for a polished look */
    /* Removed font-family to inherit Radikal from global styles */
}

/* Progress bar styling */
.progress-bar-container {
    width: 100% !important;
    background-color: #e0e0e0 !important;
    border-radius: 5px !important;
    margin-bottom: 20px !important;
}

.progress-bar {
    height: 10px !important;
    background-color: #00FFFF !important; /* Pure cyan color */
    border-radius: 5px !important;
    transition: width 0.3s ease !important;
}

/* Form styling */
form {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

/* Label styling for amount form */
#giftCardAmountForm label {
    font-size: 16px !important;
    color: #333 !important;
    margin-bottom: 5px !important;
}

/* Input styling for all text, email, number, date inputs, and textarea */
.form-container input[type="text"],
.form-container input[type="email"],
.form-container input[type="number"],
.form-container input[type="date"],
.form-container textarea {
    width: 100% !important;
    padding: 14px 12px !important; /* Increased vertical padding to make inputs taller */
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
    transition: border-color 0.3s ease !important;
}

.form-container input[type="text"]:focus,
.form-container input[type="email"]:focus,
.form-container input[type="number"]:focus,
.form-container input[type="date"]:focus,
.form-container textarea:focus {
    border-color: #00FFFF !important; /* Pure cyan color for focus state */
    outline: none !important;
}

/* Style for the calendar picker indicator (WebKit browsers) */
.form-container input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer !important;
    filter: invert(66%) sepia(99%) saturate(747%) hue-rotate(160deg) brightness(105%) contrast(101%) !important; /* Approximates #00FFFF */
}

/* Placeholder styling */
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="number"]::placeholder,
input[type="date"]::placeholder,
textarea::placeholder {
    color: #999 !important;
}

/* Textarea specific styling */
.form-container textarea {
    min-height: 120px !important; /* Increased height for textarea */
    resize: vertical !important;
}

/* Radio group styling */
.radio-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.radio-option {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}

/* Custom button-based selection styling */
.radio-button {
    padding: 8px 16px !important;
    background-color: #E0E0E0 !important; /* Light grey for unselected state */
    color: black !important;
    border: none !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    transition: background-color 0.3s ease !important;
}

.radio-button.active {
    background-color: #99FFFF !important; /* Even lighter shade of cyan for selected state */
}

.radio-button:hover:not(.active) {
    background-color: #CCFFFF !important; /* Even lighter cyan for hover effect on unselected buttons */
}

/* Button group styling */
.button-group {
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
}

/* Button styling */
button {
    padding: 12px 24px !important;
    background-color: #00FFFF !important; /* Pure cyan color */
    color: black !important;
    border: none !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    font-size: 16px !important;
    transition: background-color 0.3s ease !important;
}

button:hover {
    background-color: #00E0E0 !important; /* Slightly darker pure cyan for hover effect */
}

button:disabled {
    background-color: #cccccc !important;
    cursor: not-allowed !important;
}

/* Previous button specific styling */
#prevButton {
    background-color: #D3D3D3 !important; /* Light grey */
}

#prevButton:hover {
    background-color: #B0B0B0 !important; /* Slightly darker grey for hover effect */
}

#prevButton:disabled {
    background-color: #cccccc !important;
}

/* Question styling */
.question {
    display: none !important;
}

.question.fade-in {
    display: block !important;
}

.hidden {
    display: none !important;
}

/* Message preview styling */
.message-preview {
    background-color: #f9f9f9 !important;
    padding: 15px !important;
    border-radius: 5px !important;
    margin-bottom: 15px !important;
    font-size: 12px !important;
    /* Removed font-style: italic */
}

/* Thank you message styling */
#thank-you {
    text-align: center !important;
    font-size: 18px !important;
    color: #333 !important;
}