/* PPCP Advanced Cards — hosted Card Fields styling.
 * Field borders/padding live INSIDE the PayPal iframes (set via the CardFields
 * `style` object in JS); this stylesheet only handles layout, labels and the
 * CVV icon. Design mirrors the PayPal Checkout reference UI. */

#ppcp-cc-fields {
    display: flex;
    flex-wrap: wrap;
    max-width: 450px;
    gap: 0 16px;
    align-items: flex-start;
    margin-top: 10px;
}

.wpg-paypal-cc-field {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.wpg-paypal-cc-field.full-width {
    flex: 1 1 100%;
}

.wpg-paypal-cc-field.half-width {
    flex: 1 1 calc(50% - 8px);
}

.wpg-paypal-cc-field:not(:last-child) {
    margin-bottom: 6px;
}

/* Each hosted field renders an auto-sized PayPal iframe. The visible box
 * (border/background/focus/valid states) is drawn by the SDK INSIDE the iframe
 * via the CardFields `style` object, so these host divs stay border-less to
 * avoid a doubled box. */
.wpg-paypal-cc-field > div[id^="ppcp-cc-"],
.wpg-cvc-wrapper > div[id^="ppcp-cc-"] {
    width: 100%;
}

/* Labels are revealed once the fields have rendered (see JS). */
.wpg-paypal-cc-field label {
    margin-left: 8px;
    font-weight: 600;
    color: #515151;
    margin-bottom: 0;
    display: none;
}

#ppcp-cc-fields.ppcp-cc-ready .wpg-paypal-cc-field label {
    display: block;
}

/* CVV field + overlaid brand icon. */
.wpg-cvc-wrapper {
    position: relative;
    width: 100%;
}

.wpg-ppcp-card-cvv-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    padding: 8px 8px 14px;
    z-index: 999;
    pointer-events: none;
}

#ppcp-cc-fields.ppcp-cc-ready .wpg-ppcp-card-cvv-icon {
    display: flex;
}

.wpg-card-cvc-icon {
    height: 1.95em;
    width: 1.95em;
}

.ppcp-cc-sandbox-notice {
    margin: 5px 0 15px 8px;
    font-size: 13px;
}

@media (max-width: 480px) {
    .wpg-paypal-cc-field.half-width {
        flex: 1 1 100%;
    }
}