/**
 * Payment Box Component
 *
 * Styles for payment method additional fields and details.
 *
 * @package Hafo\Checkout
 * @version 1.0.0
 */


/* Payment Box (Additional Fields) */

.wc_payment_method .payment_box {
    margin-top: var(--hafo-checkout-spacing-md);
    margin-left: 28px;
    padding: var(--hafo-checkout-spacing-lg);
    background-color: var(--hafo-checkout-background, #f9fafb);
    border: 1px solid var(--hafo-checkout-border);
    border-radius: var(--hafo-checkout-radius-md);
    font-size: var(--hafo-checkout-font-size-sm);
    color: var(--hafo-checkout-text);
    line-height: 1.6;
}

.wc_payment_method .payment_box p {
    margin: 0 0 var(--hafo-checkout-spacing-sm) 0;
}

.wc_payment_method .payment_box p:last-child {
    margin-bottom: 0;
}

.wc_payment_method .payment_box fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.wc_payment_method .payment_box ul,
.wc_payment_method .payment_box ol {
    margin: var(--hafo-checkout-spacing-sm) 0;
    padding-left: var(--hafo-checkout-spacing-lg);
}

.wc_payment_method .payment_box li {
    list-style: disc;
    margin-bottom: var(--hafo-checkout-spacing-xs);
}


/* Payment Box Inputs */

.wc_payment_method .payment_box input[type="text"],
.wc_payment_method .payment_box input[type="email"],
.wc_payment_method .payment_box input[type="tel"],
.wc_payment_method .payment_box input[type="number"],
.wc_payment_method .payment_box select,
.wc_payment_method .payment_box textarea {
    width: 100%;
    padding: var(--hafo-checkout-spacing-md);
    font-size: var(--hafo-checkout-font-size-base);
    font-family: inherit;
    color: var(--hafo-checkout-text);
    background-color: var(--hafo-checkout-secondary, #fff);
    border: 1px solid var(--hafo-checkout-border);
    border-radius: var(--hafo-checkout-radius-md);
    margin-top: var(--hafo-checkout-spacing-xs);
    box-sizing: border-box;
}

.wc_payment_method .payment_box input:focus,
.wc_payment_method .payment_box select:focus,
.wc_payment_method .payment_box textarea:focus {
    outline: none;
    border-color: var(--hafo-checkout-primary);
    box-shadow: 0 0 0 2px rgb(30 58 138 / 10%);
}


/* Credit Card Form Styling */

.wc_payment_method .payment_box .form-row {
    margin-bottom: var(--hafo-checkout-spacing-md);
}

.wc_payment_method .payment_box .form-row:last-child {
    margin-bottom: 0;
}

.wc_payment_method .payment_box label {
    display: block;
    margin-bottom: var(--hafo-checkout-spacing-xs);
    font-weight: var(--hafo-checkout-font-weight-medium);
    color: var(--hafo-checkout-text);
    font-size: var(--hafo-checkout-font-size-sm);
}

.wc_payment_method .payment_box .form-row .input-wrapper {
    position: relative;
}

.wc_payment_method .payment_box .card-number,
.wc_payment_method .payment_box .card-expiry,
.wc_payment_method .payment_box .card-cvc {
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 32px;
    padding-right: 48px;
}

.wc_payment_method .payment_box .card-number {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z'/%3E%3C/svg%3E");
}

.wc_payment_method .payment_box .card-expiry {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM9 10H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2z'/%3E%3C/svg%3E");
}

.wc_payment_method .payment_box .card-cvc {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E");
}


/* Bank Transfer (iDEAL) Specific Styling */

.wc_payment_method .payment_box .ideal-row {
    margin-bottom: var(--hafo-checkout-spacing-md);
}

.wc_payment_method .payment_box .ideal-select {
    width: 100%;
    padding: var(--hafo-checkout-spacing-md);
    font-size: var(--hafo-checkout-font-size-base);
    font-family: inherit;
    color: var(--hafo-checkout-text);
    background-color: var(--hafo-checkout-secondary, #fff);
    border: 1px solid var(--hafo-checkout-border);
    border-radius: var(--hafo-checkout-radius-md);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 24px;
}

.wc_payment_method .payment_box .ideal-select:focus {
    outline: none;
    border-color: var(--hafo-checkout-primary);
    box-shadow: 0 0 0 2px rgb(30 58 138 / 10%);
}


/* Klarna Specific Styling */

.wc_payment_method .payment_box .klarna-info {
    padding: var(--hafo-checkout-spacing-md);
    background-color: #fff;
    border: 1px solid var(--hafo-checkout-border);
    border-radius: var(--hafo-checkout-radius-md);
    margin-bottom: var(--hafo-checkout-spacing-md);
}

.wc_payment_method .payment_box .klarna-info p {
    margin: 0;
    font-size: var(--hafo-checkout-font-size-sm);
    color: var(--hafo-checkout-text);
}

.wc_payment_method .payment_box .klarna-logo {
    max-height: 24px;
    margin-bottom: var(--hafo-checkout-spacing-sm);
    display: block;
}


/* Validation States */

.wc_payment_method .payment_box input.input-text.error,
.wc_payment_method .payment_box select.error {
    border-color: var(--hafo-checkout-error);
    box-shadow: 0 0 0 2px rgb(220 38 38 / 10%);
}

.wc_payment_method .payment_box input.input-text.error:focus,
.wc_payment_method .payment_box select.error:focus {
    box-shadow: 0 0 0 2px rgb(220 38 38 / 20%);
}

.wc_payment_method .payment_box .woocommerce-error {
    margin: var(--hafo-checkout-spacing-sm) 0;
    padding: var(--hafo-checkout-spacing-md);
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--hafo-checkout-radius-md);
    color: var(--hafo-checkout-error);
    font-size: var(--hafo-checkout-font-size-sm);
}

.wc_payment_method .payment_box .woocommerce-error li {
    list-style: none;
    margin: 0;
}


/* Loading State */

.wc_payment_method .payment_box .processing {
    opacity: 0.6;
    pointer-events: none;
}

.wc_payment_method .payment_box .processing::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 2px solid var(--hafo-checkout-border);
    border-top-color: var(--hafo-checkout-primary);
    border-radius: 50%;
    animation: hafo-spin 0.8s linear infinite;
}

@keyframes hafo-spin {
    to {
        transform: rotate(360deg);
    }
}


/* Place Order Button Styling */

.hafo-multistep-checkout .woocommerce-checkout-payment .place-order {
    margin-top: var(--hafo-checkout-spacing-xl);
}

.hafo-multistep-checkout .woocommerce-checkout-payment .place-order .button {
    width: 100%;
    padding: var(--hafo-checkout-spacing-lg) var(--hafo-checkout-spacing-xl);
    font-size: var(--hafo-checkout-font-size-lg);
    font-weight: var(--hafo-checkout-font-weight-semibold);
    background-color: var(--hafo-checkout-primary);
    color: #fff;
    border: none;
    border-radius: var(--hafo-checkout-radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
}

.hafo-multistep-checkout .woocommerce-checkout-payment .place-order .button:hover {
    background-color: var(--hafo-checkout-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--hafo-checkout-shadow-md);
}

.hafo-multistep-checkout .woocommerce-checkout-payment .place-order .button:active {
    transform: translateY(0);
    box-shadow: var(--hafo-checkout-shadow-sm);
}

.hafo-multistep-checkout .woocommerce-checkout-payment .place-order .button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}


/* Secure Payment Badge */

.hafo-multistep-checkout .woocommerce-checkout-payment .secure-payment {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--hafo-checkout-spacing-sm);
    margin-top: var(--hafo-checkout-spacing-md);
    padding-top: var(--hafo-checkout-spacing-md);
    border-top: 1px solid var(--hafo-checkout-border);
}

.hafo-multistep-checkout .woocommerce-checkout-payment .secure-payment svg {
    width: 16px;
    height: 16px;
    fill: var(--hafo-checkout-text-muted);
}

.hafo-multistep-checkout .woocommerce-checkout-payment .secure-payment span {
    font-size: var(--hafo-checkout-font-size-xs);
    color: var(--hafo-checkout-text-muted);
}


/* Mobile Responsive */

@media (max-width: 768px) {
    .wc_payment_method .payment_box {
        margin-left: 0;
        padding: var(--hafo-checkout-spacing-md);
    }
    
    .wc_payment_method .payment_box input[type="text"],
    .wc_payment_method .payment_box input[type="email"],
    .wc_payment_method .payment_box input[type="tel"],
    .wc_payment_method .payment_box input[type="number"],
    .wc_payment_method .payment_box select,
    .wc_payment_method .payment_box textarea {
        padding: var(--hafo-checkout-spacing-sm) var(--hafo-checkout-spacing-md);
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    .hafo-multistep-checkout .woocommerce-checkout-payment .place-order .button {
        padding: var(--hafo-checkout-spacing-md) var(--hafo-checkout-spacing-lg);
        font-size: var(--hafo-checkout-font-size-base);
    }
}