/* ==========================================================================
   Advanced Contact Form 7 Widget Styles
   ========================================================================== */

/* Main Container & Form Sizing */
.aeo-cf7-container {
    box-sizing: border-box;
    width: 100%;
}

.aeo-cf7-container form {
    margin: 0;
    padding: 0;
    width: 100%;
}

/* Hide Labels Hack - hides label text while keeping inputs visible */
.aeo-cf7-hide-labels label {
    font-size: 0 !important;
    color: transparent !important;
}
.aeo-cf7-hide-labels label * {
    font-size: initial;
}

/* Label Spacing */
.aeo-cf7-container label {
    display: inline-block;
    width: 100%;
}

.aeo-cf7-label-text {
    display: block;
}

/* Inputs & Textareas Base Styles */
.aeo-cf7-container input[type="text"],
.aeo-cf7-container input[type="email"],
.aeo-cf7-container input[type="tel"],
.aeo-cf7-container input[type="number"],
.aeo-cf7-container input[type="url"],
.aeo-cf7-container input[type="date"],
.aeo-cf7-container input[type="password"],
.aeo-cf7-container textarea,
.aeo-cf7-container select {
    width: 100% !important;
    box-sizing: border-box;
    outline: none;
    transition: all 0.3s ease;
    display: block;
}

/* Checkbox & Radio Buttons Base Container */
.aeo-cf7-container .wpcf7-checkbox,
.aeo-cf7-container .wpcf7-radio {
    display: block;
    margin-bottom: 10px;
}

.aeo-cf7-container .wpcf7-list-item {
    margin: 0 15px 10px 0;
    display: inline-block;
}

/* Custom Checkboxes */
.aeo-cf7-custom-checkbox input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: pointer;
    vertical-align: middle;
    outline: none;
    transition: all 0.2s ease;
}

.aeo-cf7-custom-checkbox input[type="checkbox"]:checked::before {
    content: "";
    display: block;
    width: 35%;
    height: 60%;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -15%;
}

/* Custom Radio Buttons */
.aeo-cf7-custom-radio input[type="radio"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    box-sizing: border-box;
    cursor: pointer;
    vertical-align: middle;
    outline: none;
    transition: all 0.2s ease;
}

.aeo-cf7-custom-radio input[type="radio"]:checked::before {
    content: "";
    display: block;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background-color: currentColor;
}

/* Custom Dropdown Arrow */
.aeo-cf7-custom-arrow select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    padding-right: 40px !important;
}

/* File Upload Button Styling */
.aeo-cf7-container input[type="file"] {
    padding: 10px 0;
}

.aeo-cf7-container input[type="file"]::file-selector-button {
    cursor: pointer;
    transition: all 0.3s ease;
}

.aeo-cf7-container input[type="file"]::-webkit-file-upload-button {
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Submit Button & Wrapper */
.wpcf7-submit-wrapper {
    width: 100%;
}

/* Submit Button & Wrapper */
.aeo-cf7-container .wpcf7-submit {
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Submit Button Width Layouts */
.aeo-cf7-submit-width-full .wpcf7-submit {
    width: 100%;
    display: flex;
}

.aeo-cf7-submit-width-auto .wpcf7-submit {
    width: auto;
    display: inline-flex;
}

/* Submit Image Button resets */
.aeo-cf7-submit-image .wpcf7-submit {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.aeo-cf7-submit-image .wpcf7-submit img {
    display: block;
    height: auto;
    margin: 0 auto;
}

/* Submit Button Hover Animations */
.aeo-cf7-container .wpcf7-submit:active {
    transform: translateY(1px) scale(0.98);
}

/* Response Output Messages */
.aeo-cf7-container .wpcf7-response-output {
    margin: 20px 0 0 0 !important;
    padding: 15px !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-radius: 4px;
    font-size: 15px;
    box-sizing: border-box;
}

/* validation tip */
.aeo-cf7-container span.wpcf7-not-valid-tip {
    display: block;
    font-size: 13px;
    margin-top: 5px;
    padding: 5px 10px;
    border-radius: 3px;
}

/* Hide WPCF7 standard spinner */
.aeo-cf7-container .wpcf7-spinner,
.aeo-cf7-container .ajax-loader {
    display: none !important;
}

/* Custom Loader Spinner on Submit Button */
.aeo-cf7-button-loading {
    position: relative;
    pointer-events: none;
}

.aeo-cf7-spinner {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

/* Circle Spinner */
.aeo-cf7-spinner-circle {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: currentColor;
    animation: aeo-spin 0.8s linear infinite;
}

/* Dots Spinner */
.aeo-cf7-spinner-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.aeo-cf7-spinner-dots span {
    width: 5px;
    height: 5px;
    background-color: currentColor;
    border-radius: 50%;
    display: inline-block;
    animation: aeo-bounce 1.4s infinite ease-in-out both;
}

.aeo-cf7-spinner-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.aeo-cf7-spinner-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

/* Pulse Spinner */
.aeo-cf7-spinner-pulse {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: currentColor;
    animation: aeo-pulse 1s infinite ease-in-out;
}

/* Spinner Animations */
@keyframes aeo-spin {
    to { transform: rotate(360deg); }
}

@keyframes aeo-bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1.0); }
}

@keyframes aeo-pulse {
    0% { transform: scale(0.2); opacity: 0.8; }
    100% { transform: scale(1.4); opacity: 0; }
}

/* Animations (Fade In, Slide Up/Down, Zoom In) */
.aeo-cf7-anim-fade-in {
    animation: amnaFadeIn 0.5s ease forwards;
}

.aeo-cf7-anim-slide-up {
    animation: amnaSlideUp 0.5s ease forwards;
}

.aeo-cf7-anim-slide-down {
    animation: amnaSlideDown 0.5s ease forwards;
}

.aeo-cf7-anim-zoom-in {
    animation: amnaZoomIn 0.5s ease forwards;
}

@keyframes amnaFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes amnaSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes amnaSlideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes amnaZoomIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Multi Column Layout Controls Support */
.aeo-cf7-container .wpcf7-form .row,
.aeo-cf7-container .wpcf7-form .form-row,
.aeo-cf7-container .wpcf7-form .grid,
.aeo-cf7-container .wpcf7-form .aeo-grid,
.aeo-cf7-container .wpcf7-form [style*="display: flex"],
.aeo-cf7-container .wpcf7-form [style*="display: grid"] {
    display: flex;
    flex-wrap: wrap;
}

/* Responsive columns stacking at Mobile Breakpoint */
@media (max-width: 767px) {
    .aeo-cf7-stack-tablet .wpcf7-form .row > *,
    .aeo-cf7-stack-tablet .wpcf7-form .form-row > *,
    .aeo-cf7-stack-tablet .wpcf7-form [style*="display: flex"] > *,
    .aeo-cf7-stack-tablet .wpcf7-form [style*="display: grid"] > * {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media (max-width: 1024px) {
    .aeo-cf7-stack-desktop .wpcf7-form .row > *,
    .aeo-cf7-stack-desktop .wpcf7-form .form-row > *,
    .aeo-cf7-stack-desktop .wpcf7-form [style*="display: flex"] > *,
    .aeo-cf7-stack-desktop .wpcf7-form [style*="display: grid"] > * {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    .aeo-cf7-stack-mobile .wpcf7-form .row > *,
    .aeo-cf7-stack-mobile .wpcf7-form .form-row > *,
    .aeo-cf7-stack-mobile .wpcf7-form [style*="display: flex"] > *,
    .aeo-cf7-stack-mobile .wpcf7-form [style*="display: grid"] > * {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Floating Labels Styling */
.aeo-cf7-floating-labels .wpcf7-form-control-wrap {
    position: relative;
    display: block;
}

.aeo-cf7-floating-labels label {
    position: relative;
}

.aeo-cf7-floating-labels label span.wpcf7-form-control-wrap {
    margin-top: 15px;
}

.aeo-cf7-floating-label-active {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    transition: all 0.2s ease;
    background-color: transparent;
    padding: 0 4px;
}

.aeo-cf7-floating-label-active.floated {
    top: 0;
    transform: translateY(-50%) scale(0.85);
    background-color: #fff;
    left: 8px;
}

/* Glassmorphism Styling */
.aeo-cf7-glassmorphism input[type="text"],
.aeo-cf7-glassmorphism input[type="email"],
.aeo-cf7-glassmorphism input[type="tel"],
.aeo-cf7-glassmorphism input[type="number"],
.aeo-cf7-glassmorphism input[type="url"],
.aeo-cf7-glassmorphism input[type="date"],
.aeo-cf7-glassmorphism input[type="password"],
.aeo-cf7-glassmorphism textarea,
.aeo-cf7-glassmorphism select {
    background-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(var(--aeo-glass-blur, 8px)) !important;
    -webkit-backdrop-filter: blur(var(--aeo-glass-blur, 8px)) !important;
    border: 1px solid rgba(255, 255, 255, var(--aeo-glass-opacity, 0.2)) !important;
}

/* Input Icons Styling */
.aeo-cf7-has-icons .wpcf7-form-control-wrap {
    position: relative;
}

.aeo-cf7-input-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aeo-cf7-icon-position-left .aeo-cf7-input-icon {
    left: 12px;
}

.aeo-cf7-icon-position-right .aeo-cf7-input-icon {
    right: 12px;
}

/* Padding adjusts for inputs with icons */
.aeo-cf7-icon-position-left input {
    padding-left: var(--aeo-icon-padding, 40px) !important;
}

.aeo-cf7-icon-position-right input {
    padding-right: var(--aeo-icon-padding, 40px) !important;
}

/* Submit Button Icon Styling */
.aeo-submit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
}

.aeo-submit-icon svg,
.aeo-submit-icon i {
    width: 1em;
    height: 1em;
    display: block;
    fill: currentColor;
}
