/* Modern Form Styles - Inspired by Taiwan.com design */

/* ============================================
   CSS VARIABLES - Easy Color Customization
   ============================================ */

:root {
    /* Form Input Colors */
    --form-input-bg: #ffffff;
    --form-input-bg-hover: #ffffff;
    --form-input-bg-focus: #ffffff;
    --form-input-bg-disabled: #f5f5f5;
    
    --form-input-border: rgba(0, 0, 0, 0.2);
    --form-input-border-hover: rgba(0, 0, 0, 0.3);
    --form-input-border-focus: rgba(0, 0, 0, 0.4);
    
    --form-input-text: #000000;
    --form-input-placeholder: rgba(0, 0, 0, 0.5);
    
    --form-input-shadow-focus: rgba(0, 0, 0, 0.1);
    
    /* Error States */
    --form-error-color: #ff6b6b;
    --form-error-bg: rgba(255, 107, 107, 0.1);
    --form-error-shadow: rgba(255, 107, 107, 0.2);
    
    /* Success States */
    --form-success-color: #51cf66;
    --form-success-shadow: rgba(81, 207, 102, 0.2);
    
    /* Icon Colors */
    --form-icon-color: rgba(0, 0, 0, 0.5);
    
    /* Label Colors */
    --form-label-color: var(--text-color);
    --form-label-required-color: #ff6b6b;
    
    /* Button Colors - Primary (Purple Gradient) */
    --btn-primary-bg-start: #667eea;
    --btn-primary-bg-end: #764ba2;
    --btn-primary-text: #ffffff;
    --btn-primary-shadow: rgba(102, 126, 234, 0.3);
    --btn-primary-shadow-hover: rgba(102, 126, 234, 0.4);
    
    /* Button Colors - Submit (Green Gradient) */
    --btn-submit-bg-start: #56ab2f;
    --btn-submit-bg-end: #a8e063;
    --btn-submit-shadow: rgba(86, 171, 47, 0.3);
    --btn-submit-shadow-hover: rgba(86, 171, 47, 0.4);
    
    /* Select Dropdown Arrow */
    --form-select-arrow-color: #000000;
    
    /* Form Spacing */
    --form-input-padding: 14px 16px;
    --form-input-border-radius: 8px;
    --form-button-border-radius: 8px;
}

/* Light Theme Variant */
.light-theme {
    --form-input-bg: #ffffff;
    --form-input-bg-hover: #ffffff;
    --form-input-bg-focus: #ffffff;
    --form-input-bg-disabled: #f5f5f5;
    
    --form-input-border: rgba(0, 0, 0, 0.2);
    --form-input-border-hover: rgba(0, 0, 0, 0.3);
    --form-input-border-focus: rgba(0, 0, 0, 0.4);
    
    --form-input-text: #000000;
    --form-input-placeholder: rgba(0, 0, 0, 0.5);
    
    --form-input-shadow-focus: rgba(0, 0, 0, 0.1);
    
    --form-icon-color: rgba(0, 0, 0, 0.5);
    --form-label-color: #000000;
    
    --form-select-arrow-color: #000000;
}

/* ============================================
   FORM INPUT STYLES
   ============================================ */

/* Base input and textarea styling - EXCLUDING radio and checkbox */
input:not([type="radio"]):not([type="checkbox"]),
select,
textarea {
    /* Background and borders */
    background-color: var(--form-input-bg);
    border: 1px solid var(--form-input-border);
    border-radius: var(--form-input-border-radius);
    
    /* Text styling */
    color: var(--form-input-text);
    /* font-size removed - inherits from parent/page styles */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    
    /* Spacing */
    padding: var(--form-input-padding);
    
    /* Box model */
    width: 100%;
    box-sizing: border-box;
    
    /* Transitions for smooth interactions */
    transition: all 0.3s ease;
    
    /* Remove default appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* Outline */
    outline: none;
}

/* Placeholder styling */
input:not([type="radio"]):not([type="checkbox"])::placeholder,
select::placeholder,
textarea::placeholder {
    color: var(--form-input-placeholder);
    opacity: 1;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
}

/* Focus state */
input:not([type="radio"]):not([type="checkbox"]):focus,
select:focus,
textarea:focus {
    background-color: var(--form-input-bg-focus);
    border-color: var(--form-input-border-focus);
    box-shadow: 0 0 0 3px var(--form-input-shadow-focus);
}

/* Hover state */
input:not([type="radio"]):not([type="checkbox"]):hover,
select:hover,
textarea:hover {
    background-color: var(--form-input-bg-hover);
    border-color: var(--form-input-border-hover);
}

/* Disabled state */
input:not([type="radio"]):not([type="checkbox"]):disabled,
select:disabled,
textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--form-input-bg-disabled);
}

/* Textarea specific styling */
textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

/* Select box specific styling */
select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23000000' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px;
    padding-right: 40px;
}

/* ============================================
   ICON SUPPORT
   ============================================ */

/* Input with icon wrapper (optional) */
.input-with-icon {
    position: relative;
    display: block;
    margin-bottom: 16px;
}

.input-with-icon input,
.input-with-icon select,
.input-with-icon textarea {
    padding-left: 45px;
}

.input-with-icon .input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--form-icon-color);
    pointer-events: none;
    font-size: 18px;
}

.input-with-icon textarea + .input-icon {
    top: 20px;
    transform: none;
}

/* ============================================
   FORM STRUCTURE
   ============================================ */

/* Form group styling */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--form-label-color);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.form-group label.required::after {
    content: " *";
    color: var(--form-label-required-color);
}

/* ============================================
   SPECIAL INPUT STYLING
   ============================================ */


.indollar {
    /* SVG height increased: 20px → 30px */
    /* Text position adjusted: y="15" → y="20" */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22px" height="30px"><text x="8" y="23" style="font-family: Helvetica, Arial, sans-serif;font-size: 20px;">$</text></svg>');
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 28px !important;
}

/* ============================================
   VALIDATION STATES
   ============================================ */

/* Error state */
input.error,
select.error,
textarea.error {
    border-color: var(--form-error-color);
    background-color: var(--form-error-bg);
}

input.error:focus,
select.error:focus,
textarea.error:focus {
    box-shadow: 0 0 0 3px var(--form-error-shadow);
}

.error-message {
    display: block;
    margin-top: 6px;
    color: var(--form-error-color);
    font-size: 13px;
}

/* Success state */
input.success,
select.success,
textarea.success {
    border-color: var(--form-success-color);
}

input.success:focus,
select.success:focus,
textarea.success:focus {
    box-shadow: 0 0 0 3px var(--form-success-shadow);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Responsive adjustments */
@media only screen and (max-width: 768px) {
    input:not([type="radio"]):not([type="checkbox"]),
    select,
    textarea {
        /* Font size inherits from page - no fixed size */
        padding: 12px 14px;
    }
    
    .form-group {
        margin-bottom: 16px;
    }
}

/* ============================================
   OTHER INPUT TYPES
   ============================================ */

/* Checkbox and Radio styling - RESTORE DEFAULT APPEARANCE */
input[type="checkbox"],
input[type="radio"] {
    /* Reset to browser defaults */
    width: auto;
    padding: 0;
    margin-right: 8px;
    cursor: pointer;
    
    /* Restore default appearance */
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
    
    /* Remove any inherited styles */
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* File input styling */
input[type="file"] {
    padding: 10px;
    background-color: var(--form-input-bg);
    border: 2px dashed var(--form-input-border);
    cursor: pointer;
}

input[type="file"]:hover {
    border-color: var(--form-input-border-hover);
    background-color: var(--form-input-bg-hover);
}

/* ============================================
   MODERN BUTTON STYLES
   ============================================ */

/* Modern button styling to complement the form */
.btn-modern {
    background: linear-gradient(135deg, var(--btn-primary-bg-start) 0%, var(--btn-primary-bg-end) 100%);
    border: none;
    border-radius: var(--form-button-border-radius);
    color: var(--btn-primary-text);
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px var(--btn-primary-shadow);
}

.btn-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--btn-primary-shadow-hover);
}

.btn-modern:active {
    transform: translateY(0);
}

.btn-modern:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Green submit button variant */
.btn-submit {
    background: linear-gradient(135deg, var(--btn-submit-bg-start) 0%, var(--btn-submit-bg-end) 100%);
    box-shadow: 0 4px 15px var(--btn-submit-shadow);
}

.btn-submit:hover {
    box-shadow: 0 6px 20px var(--btn-submit-shadow-hover);
}