/**
 * PAYUNi Credit Card iframe Payment Styles
 *
 * @package wpbr-payuni-pro
 */

/* Prevent payment method radio from showing when iframe receives focus or autofill triggers */
li.payment_method_payuni-pro-credit > input[type="radio"],
li.payment_method_payuni-pro-credit-subscription > input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
}

#payuni-credit-form,
#wpbr-payuni-pro-credit-form {
    display: block;
    width: 100%;
    margin: 20px 0;
}

#payuni-credit-form .form-row,
#wpbr-payuni-pro-credit-form .form-row {
    margin-bottom: 15px;
}

#payuni-credit-form label,
#wpbr-payuni-pro-credit-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #333;
}

#payuni-card-no,
#payuni-card-exp,
#payuni-card-cvc,
#wpbr-payuni-pro-card-no,
#wpbr-payuni-pro-card-exp,
#wpbr-payuni-pro-card-cvc {
    width: 100% !important;
    min-height: 45px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px 12px;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

#payuni-card-no:hover,
#payuni-card-exp:hover,
#payuni-card-cvc:hover,
#wpbr-payuni-pro-card-no:hover,
#wpbr-payuni-pro-card-exp:hover,
#wpbr-payuni-pro-card-cvc:hover {
    border-color: #999;
}

/* Focus state - will be applied by SDK */
.form-input-focus {
    border-color: #0485ff !important;
    outline: 0;
    -webkit-box-shadow: 0 0 0 0.2rem rgba(4, 133, 255, 0.25);
    box-shadow: 0 0 0 0.2rem rgba(4, 133, 255, 0.25);
}

/* Card number full width */
.payuni-card-no-wrapper {
    float: none;
    clear: both;
    width: 100%;
    margin-bottom: 15px;
}

/* Expiry and CVC in two columns.
   SDK 會在自己的目標容器寫 inline width，所以這裡不能讓欄位被壓到 0，
   寬度不足時改成換行而不是塌成直排文字。 */
.payuni-card-details {
    display: flex;
    flex-wrap: wrap;
    clear: both;
    width: 100%;
    gap: 15px;
}

.payuni-card-exp-wrapper,
.payuni-card-cvc-wrapper {
    flex: 1 1 140px;
    min-width: 140px;
}

/* Responsive */
@media (max-width: 768px) {
    .payuni-card-details {
        flex-direction: column;
        gap: 15px;
    }
}

/* Loading state */
#payuni-credit-form.loading,
#wpbr-payuni-pro-credit-form.loading {
    opacity: 0.6;
    pointer-events: none;
}

#payuni-credit-form.loading::after,
#wpbr-payuni-pro-credit-form.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #0485ff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Error state */
#payuni-card-no.error,
#payuni-card-exp.error,
#payuni-card-cvc.error,
#wpbr-payuni-pro-card-no.error,
#wpbr-payuni-pro-card-exp.error,
#wpbr-payuni-pro-card-cvc.error {
    border-color: #e2401c;
}

/* Iframe containers */
#payuni-card-no iframe,
#payuni-card-exp iframe,
#payuni-card-cvc iframe,
#wpbr-payuni-pro-card-no iframe,
#wpbr-payuni-pro-card-exp iframe,
#wpbr-payuni-pro-card-cvc iframe {
    width: 100% !important;
    max-width: 100%;
    border: none;
    display: block;
}

/* Message container after credit card fields */
#payuni-credit-messages,
#wpbr-payuni-pro-credit-messages {
    margin-top: 15px;
}

#payuni-credit-messages .woocommerce-error,
#payuni-credit-messages .woocommerce-message,
#payuni-credit-messages .woocommerce-info,
#wpbr-payuni-pro-credit-messages .woocommerce-error,
#wpbr-payuni-pro-credit-messages .woocommerce-message,
#wpbr-payuni-pro-credit-messages .woocommerce-info {
    margin-bottom: 0;
}

/* Saved payment methods */
.wc-payuni-pro-credit-saved-payment-methods {
    margin: 15px 0;
}

.wc-payuni-pro-credit-saved-payment-methods ul.woocommerce-SavedPaymentMethods {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
}

.wc-payuni-pro-credit-saved-payment-methods .woocommerce-SavedPaymentMethods-token {
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f9f9f9;
    transition: all 0.3s ease;
}

.wc-payuni-pro-credit-saved-payment-methods .woocommerce-SavedPaymentMethods-token:hover {
    background: #fff;
    border-color: #999;
}

.wc-payuni-pro-credit-saved-payment-methods .woocommerce-SavedPaymentMethods-tokenInput {
    margin-right: 8px;
}

.wc-payuni-pro-credit-saved-payment-methods .woocommerce-SavedPaymentMethods-new {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f0f8ff;
}

/* Hide new card form when saved method is selected */
#payuni-credit-form.payuni-saved-method-selected,
#wpbr-payuni-pro-credit-form.payuni-saved-method-selected {
    display: none;
}

/* PAYUNi 約定信用卡同意區塊（核取方塊與文案皆由 SDK 提供）
   Grid 兩欄兩列：checkbox 與主標籤同列並垂直置中，備註排在標籤下方。 */
.payuni-token-type-area {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    clear: both;
    width: 100%;
    column-gap: 8px;
    row-gap: 2px;
    margin-top: 15px;
}

/* 收到 useTokenType 事件前保持隱形，但仍留在版面中讓 SDK 量得到寬度。 */
.payuni-token-type-area.is-pending {
    visibility: hidden;
    height: 0;
    margin-top: 0;
    overflow: hidden;
}

.payuni-token-type {
    grid-column: 1;
    grid-row: 1;
    display: block;
    line-height: 1.5;
}

/* 抵銷主題可能加在 checkbox 上的預設邊距，避免置中被推歪 */
.payuni-token-type input[type="checkbox"] {
    margin: 0;
    vertical-align: middle;
}

/* 讓 label 與備註直接成為 grid 的子項，才能各自落在正確的格子 */
.payuni-token-type-content {
    display: contents;
}

.payuni-token-type-label {
    grid-column: 2;
    grid-row: 1;
    display: block;
    margin: 0;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
}

/* PAYUNi 官方文案以備註呈現，弱化視覺強度 */
.payuni-token-type-text {
    grid-column: 2;
    grid-row: 2;
    display: block;
    margin: 0;
    font-size: 0.85em;
    font-weight: normal;
    line-height: 1.5;
    color: #8a8a8a;
    cursor: pointer;
}

/* Save payment method checkbox */
.woocommerce-SavedPaymentMethods-saveNew,
.wc-payuni-pro-credit-new-payment-method-form {
    margin-top: 15px;
}

.woocommerce-SavedPaymentMethods-saveNew label {
    display: inline-block;
    margin-left: 5px;
    font-weight: normal;
}


/* ==========================================================================
   Saved Payment Methods
   ========================================================================== */

/* Hide list markers that some themes (like Blocksy) add */
.woocommerce-SavedPaymentMethods {
	list-style: none !important;
}

.woocommerce-SavedPaymentMethods-token,
.woocommerce-SavedPaymentMethods-new {
	list-style: none !important;
}

.woocommerce-SavedPaymentMethods-token::before,
.woocommerce-SavedPaymentMethods-new::before,
.woocommerce-SavedPaymentMethods-token::marker,
.woocommerce-SavedPaymentMethods-new::marker {
	display: none !important;
	content: none !important;
}