/**
 * Kind Cities Inline ZIP Button Styles
 * 
 * Handles the visual transformation of buttons into ZIP collectors
 * Maintains Divi button aesthetics while providing smooth transitions
 * 
 * @package KindCities
 * @since 1.0.0
 */

/* Base button preparation */
.kc-inline-zip-button {
    position: relative;
    overflow: hidden;
    transition: all 0.15s ease-in-out;
    opacity: 1;
}

/* Transition states for smooth animations */
.kc-inline-zip-button.kc-inline-zip-transitioning {
    opacity: 0;
    transition: opacity 0.06s ease;
}

.kc-inline-zip-button.kc-inline-zip-fade-in {
    animation: kcFadeIn 0.06s ease forwards;
}

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

/* Active state - when button is transformed */
.kc-inline-zip-button.kc-inline-zip-active {
    min-width: 280px !important;
    padding: 0 !important;
    background-color: #fff !important;
    background-image: none !important;
    position: relative;
    height: clamp(50px, 100%, 60px) !important; /* Constrain height between 50-60px */
    min-height: 50px !important;
    max-height: 60px !important;
}

/* Divi specific fixes - maintain button height */
.et_pb_button.kc-inline-zip-button.kc-inline-zip-active {
    line-height: 1 !important;
    height: clamp(50px, 100%, 60px) !important;
}

/* Force white background on hover for active buttons */
.kc-inline-zip-button.kc-inline-zip-active:hover {
    background-color: #fff !important;
    background-image: none !important;
    opacity: 1 !important;
}

/* Override Divi button hover states */
.et_pb_button.kc-inline-zip-button.kc-inline-zip-active:hover,
.et_pb_module .kc-inline-zip-button.kc-inline-zip-active:hover,
.et_pb_button_module_wrapper .kc-inline-zip-button.kc-inline-zip-active:hover {
    background-color: #fff !important;
    background-image: none !important;
    color: inherit !important;
    transform: none !important;
}

/* Ensure button maintains its border */
.kc-inline-zip-button.kc-inline-zip-active {
    border-color: inherit;
}

/* ZIP form container - full button area */
.kc-inline-zip-form {
    display: flex;
    align-items: stretch;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    padding-left: 20px;
    margin: 0;
    z-index: 1;
}

/* ZIP input field - account for button position */
.kc-inline-zip-input {
    width: 100%;
    height: 100%;
    padding: 0 50px 0 0; /* Right padding for circular button, left handled by container */
    border: none !important;
    background: transparent;
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    outline: none !important;
    box-shadow: none !important;
    margin: 0;
    line-height: normal;
}

/* Remove all focus styles */
.kc-inline-zip-input:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.kc-inline-zip-input::placeholder {
    color: currentColor;
    opacity: 0.7;
}

/* Submit button - circular design like original */
.kc-inline-zip-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 4px;
    top: 4px;
    bottom: 4px;
    width: auto;
    aspect-ratio: 1;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: #f39c12; /* Orange/amber color like in the images */
    color: #fff;
    cursor: pointer;
    transition: all 0.1s ease;
    flex-shrink: 0;
    z-index: 2;
}

.kc-inline-zip-submit:hover:not(:disabled) {
    background: #e67e22;
    transform: scale(1.00);
}

.kc-inline-zip-submit:active:not(:disabled) {
    transform: scale(1.0);
}

.kc-inline-zip-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Arrow icon - much larger */
.kc-inline-zip-icon {
    width: 65%;
    height: 65%;
    display: block;
}

/* Message display */
.kc-inline-zip-message {
    position: absolute;
    bottom: -25px;
    left: 0;
    right: 0;
    font-size: 12px;
    text-align: center;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 10;
}

/* Error state */
.kc-inline-zip-button.kc-inline-zip-error .kc-inline-zip-message {
    background: #ff4444;
    color: white;
    opacity: 1;
    transform: translateY(0);
}

.kc-inline-zip-button.kc-inline-zip-error .kc-inline-zip-input {
    animation: shake 0.5s ease-in-out;
}

/* Success state */
.kc-inline-zip-button.kc-inline-zip-success .kc-inline-zip-message {
    background: #4CAF50;
    color: white;
    opacity: 1;
    transform: translateY(0);
}

/* Processing state */
.kc-inline-zip-button.kc-inline-zip-processing .kc-inline-zip-submit {
    position: relative;
}

.kc-inline-zip-button.kc-inline-zip-processing .kc-inline-zip-submit .kc-inline-zip-icon {
    opacity: 0;
}

.kc-inline-zip-button.kc-inline-zip-processing .kc-inline-zip-submit::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid;
    border-color: #fff #fff #fff transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Animations */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Mobile responsiveness */
@media (max-width: 767px) {
    .kc-inline-zip-button.kc-inline-zip-active {
        min-width: 240px !important;
    }
    
    .kc-inline-zip-input {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0 55px 0 15px; /* Adjust for mobile button */
    }
    
    .kc-inline-zip-submit {
        min-width: 32px;
        max-width: 40px;
        right: 3px;
    }
    
    .kc-inline-zip-icon {
        width: 60%;
        height: 60%;
    }
    
    .kc-inline-zip-message {
        bottom: -25px;
        font-size: 11px;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .kc-inline-zip-submit {
        background: rgba(0, 0, 0, 0.3);
    }
    
    .kc-inline-zip-submit:hover:not(:disabled) {
        background: rgba(0, 0, 0, 0.4);
    }
}

/* Specific Divi button compatibility */
.et_pb_button.kc-inline-zip-button.kc-inline-zip-active {
    line-height: normal !important;
}

.et_pb_button.kc-inline-zip-button .kc-inline-zip-form {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
}

/* Ensure proper stacking */
.kc-inline-zip-button {
    z-index: 1;
}

.kc-inline-zip-button.kc-inline-zip-active {
    z-index: 10;
}

/* Focus styles for accessibility */
.kc-inline-zip-input:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: -2px;
}

.kc-inline-zip-submit:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .kc-inline-zip-submit {
        border: 2px solid currentColor;
    }
    
    .kc-inline-zip-input {
        border-bottom: 2px solid currentColor;
    }
}