/**
 * Zimswitch COPY&PAY Widget Styling
 * Custom styles for the Zimswitch payment widget to match portal design
 */

/* Zimswitch widget container - responsive min-height */
#zimswitchWidgetContainer {
    min-height: 300px;
}

@media (min-width: 40rem) {
    #zimswitchWidgetContainer {
        min-height: 350px;
    }
}

/* Zimswitch widget form styling */
#zimswitchWidgetContainer .wpwl-form {
    max-width: 100%;
}

/* Widget input fields - matching portal input style */
#zimswitchWidgetContainer .wpwl-control {
    font-size: var(--text-sm) !important;
    color: var(--color-gray-900) !important;
    background-color: var(--color-white) !important;
    transition-property: all !important;
    transition-timing-function: var(--default-transition-timing-function) !important;
    transition-duration: var(--default-transition-duration) !important;
}

@media (min-width: 40rem) {
    #zimswitchWidgetContainer .wpwl-control {
        font-size: var(--text-base) !important;
    }
}

#zimswitchWidgetContainer .wpwl-control:focus {
    border-color: transparent !important;
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--color-blue-500) !important;
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}

/* Widget labels - matching portal label style */
#zimswitchWidgetContainer .wpwl-label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    display: block;
}

@media (min-width: 40rem) {
    #zimswitchWidgetContainer .wpwl-label {
        font-size: var(--text-sm);
        margin-bottom: calc(var(--spacing) * 2);
    }
}

/* Widget groups (form fields) - responsive spacing */
#zimswitchWidgetContainer .wpwl-group {
    margin-bottom: calc(var(--spacing) * 4);
}

@media (min-width: 40rem) {
    #zimswitchWidgetContainer .wpwl-group {
        margin-bottom: calc(var(--spacing) * 5);
    }
}

/* Submit button - matching portal button style */
#zimswitchWidgetContainer .wpwl-button-pay {
    background: linear-gradient(to right in oklab, var(--color-blue-600), var(--color-indigo-600)) !important;
    color: var(--color-white) !important;
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 5) !important;
    border-radius: var(--radius-lg) !important;
    font-weight: var(--font-weight-bold) !important;
    width: 100% !important;
    border: none !important;
    cursor: pointer !important;
    transition-property: all !important;
    transition-duration: .3s !important;
    transition-timing-function: var(--ease-in-out) !important;
    font-size: var(--text-base) !important;
    --tw-shadow: var(--shadow-lg) !important;
    box-shadow: var(--tw-shadow) !important;
}

@media (min-width: 40rem) {
    #zimswitchWidgetContainer .wpwl-button-pay {
        padding: calc(var(--spacing) * 4) calc(var(--spacing) * 6) !important;
        font-size: var(--text-base) !important;
    }
}

@media (hover: hover) {
    #zimswitchWidgetContainer .wpwl-button-pay:hover {
        background: linear-gradient(to right in oklab, var(--color-blue-700), var(--color-indigo-700)) !important;
        transform: scale(1.05) !important;
    }
}

#zimswitchWidgetContainer .wpwl-button-pay:active {
    transform: scale(1) !important;
}

#zimswitchWidgetContainer .wpwl-button-pay:focus {
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--color-blue-300) !important;
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}

/* Card brand icons - responsive sizing */
#zimswitchWidgetContainer .wpwl-brand {
    max-width: calc(var(--spacing) * 10);
    height: auto;
}

@media (min-width: 40rem) {
    #zimswitchWidgetContainer .wpwl-brand {
        max-width: calc(var(--spacing) * 12);
    }
}

/* Hide unnecessary widget elements */
#zimswitchWidgetContainer .wpwl-group-mobilePhoneNumber,
#zimswitchWidgetContainer .wpwl-group-mobilePhoneCountryCode {
    display: none !important;
}

/* Widget container background */
#zimswitchWidgetContainer .wpwl-container {
    background: transparent;
    padding: 0;
}

/* Loading spinner in widget container */
#zimswitchWidgetContainer .animate-spin {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
}

@media (min-width: 40rem) {
    #zimswitchWidgetContainer .animate-spin {
        width: calc(var(--spacing) * 12);
        height: calc(var(--spacing) * 12);
    }
}