/* Monobank Installments Plugin Styles */

.monobank-installments-selector {
    margin: 15px 0;
    padding: 0;
    border: none;
    background: transparent;
}

.monobank-payment-method-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 12px;
}

.monobank-icon {
    width: 32px;
    height: 32px;
    background: url('../images/monobank.png') no-repeat center center;
    background-size: contain;
    display: block;
    flex-shrink: 0;
}

/* Fallback if SVG is not available */
.monobank-icon:before {
    content: "";
    width: 32px;
    height: 32px;
    background: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 10px;
    position: absolute;
    z-index: -1;
}


.monobank-installments-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}

.monobank-parts-selector {
    position: relative;
}

.monobank-parts-selector select {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 7px 35px 7px 15px;
    font-size: 14px;
    color: #495057;
    appearance: none;
    cursor: pointer;
    min-width: 120px;
}

.monobank-parts-selector:after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    width: 13px;
    height: 8px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="8" viewBox="0 0 13 8" fill="none"><path d="M12.742 1.31616C12.7459 1.1442 12.6945 0.975337 12.5948 0.833043C12.4952 0.690749 12.3522 0.582096 12.1859 0.522191C12.0196 0.462286 11.8382 0.454104 11.6669 0.498784C11.4956 0.543463 11.343 0.638784 11.2301 0.771493L6.75599 5.83511L2.28345 0.771493C2.21386 0.679691 2.12551 0.602809 2.02386 0.545662C1.9222 0.488515 1.80944 0.452334 1.6927 0.439384C1.57595 0.426434 1.45773 0.436995 1.34539 0.470405C1.23305 0.503815 1.129 0.559353 1.03982 0.633544C0.950648 0.707735 0.87831 0.798978 0.827188 0.901561C0.776067 1.00414 0.747354 1.11586 0.742824 1.2297C0.738293 1.34355 0.757989 1.45707 0.800806 1.56317C0.843624 1.66926 0.908572 1.76565 0.991588 1.84628L6.10755 7.64366C6.18768 7.7347 6.28714 7.8078 6.39923 7.85793C6.51133 7.90806 6.63333 7.93402 6.75677 7.93402C6.88022 7.93402 7.00222 7.90806 7.11432 7.85793C7.22641 7.8078 7.32597 7.7347 7.4061 7.64366L12.527 1.84628C12.6611 1.69983 12.7372 1.51199 12.742 1.31616Z" fill="black"/></svg>');
    background-repeat: no-repeat;
    background-size: 13px 8px;
    background-position: center;
}

.monobank-payment-info {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    color: #6c757d;
    line-height: 1.4;
}

.monobank-payment-details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.monobank-monthly-amount {
    font-weight: 600;
    color: #000;
}

.monobank-separator {
    color: #adb5bd;
}

.monobank-total-info {
    color: #6c757d;
}

.monobank-payment-method {
    margin: 0;
    padding: 0;
}

.monobank-description {
    margin-bottom: 15px;
    font-size: 14px;
    color: #6c757d;
}

/* Inline styles for payment method label */
.monobank-inline-controls {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 15px;
}

.monobank-inline-controls .monobank-icon {
    width: 24px;
    height: 24px;
    background-image: url('../images/monobank.png');
    background-size: 24px 24px;
}

.monobank-inline-controls .monobank-parts-selector {
    position: relative;
}

.monobank-payment-info-inline {
    display: block;
    margin-top: 8px; /* Offset for radio button */
}

.payment_box.payment_method_monobank_installments {
    display: none !important;
}

.monobank-payment-details-inline {
    display: flex;
    gap: 7px;
    align-items: center;
    font-size: 14px;
    color: #6c757d;
    white-space: nowrap;
    padding-left: 20px;
}


.monobank-parts-display-inline {
    color: #6c757d;
}

.monobank-total-info-inline {
    color: #6c757d;
}

.monobank-parts-select-inline {
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 7px 25px 7px 15px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #495057;
    appearance: none;
    cursor: pointer;
    min-width: 100px;
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
}

.monobank-order-info {
    background: #f9f9f9;
    padding: 15px;
    margin: 15px 0;
    border-left: 4px solid #0073aa;
}

.monobank-order-info h3 {
    margin-top: 0;
    color: #0073aa;
}

.monobank-meta-box {
    line-height: 1.6;
}

.monobank-meta-box p {
    margin: 8px 0;
}

/* Admin panel styles */
.monobank-admin .nav-tab-wrapper {
    margin-bottom: 20px;
}

.monobank-admin .tab-content {
    background: #fff;
    padding: 20px;
    border: 1px solid #ccd0d4;
    border-top: none;
}


/* Responsive design */
@media (max-width: 768px) {
    .monobank-installments-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .monobank-parts-selector select {
        min-width: 100px;
    }
    
    .monobank-payment-details {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .monobank-separator {
        display: none;
    }
    
    /* Inline elements responsive */
    .monobank-inline-controls {
        margin-left: 8px;
        gap: 8px;
    }
    
    .monobank-payment-details-inline {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .monobank-payment-info-inline {
        padding-left: 20px;
    }
    
    .monobank-parts-select-inline {
        min-width: 90px;
        font-size: 12px;
        padding: 5px 20px 5px 8px;
    }
}