/* ============================================================================
   KYC ELAVON CONVERGE - STYLESHEET
   ============================================================================
   
   Structure (DOM flow, top to bottom):
   
   1. CLASSIC CHECKOUT
      1a. Gateway Label & Card Icons
      1b. Saved Cards List
      1c. New Card Form (inputs, logos, expiry/cvv)
      1d. Save Card Checkbox
   
   2. BLOCKS CHECKOUT
      2a. Gateway Label & Card Icons
   
   3. MY ACCOUNT - SAVED CARDS
      3a. Wrapper & Card List
      3b. Card Actions (delete, fallback)
      3c. Add New Card Form
   
   4. ADMIN
      4a. Toggle Switch
   
   ============================================================================ */


/* ============================================================================
   1. CLASSIC CHECKOUT
   ============================================================================ */

/* -- 1a. Gateway Label & Card Icons ------------------------------------------
   The payment method label row: "Credit Card [visa][mc][amex][diners]"
   Rendered by WC_KYC_elavon_Gateway::get_icon() inside WooCommerce <label>
   -------------------------------------------------------------------------- */

#payment > ul > li.wc_payment_method.payment_method_kyc_elavon_converge.active-payment > label {
    margin-bottom: 10px;
}

.kyc-elavon-payment-gateway-card-icons {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.kyc-elavon-payment-gateway-card-icons img.kyc-elavon-payment-gateway-icon {
    height: 30px;
    width: auto;
}

/* -- 1b. Saved Cards List ----------------------------------------------------
   Radio options for saved cards + "Use a new card" + delete button
   Rendered by kyc_elavon_payment_fields() in kyc-elavon-checkout.php
   -------------------------------------------------------------------------- */

.saved-card-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-type-icon {
    margin-right: 10px;
}

.kyc-elavon-checkout-delete-card {
    background: none;
    border: 1px solid #ccc;
    color: #999;
    font-size: 16px;
    line-height: 1;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.kyc-elavon-checkout-delete-card:hover {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

/* -- 1c. New Card Form -------------------------------------------------------
   Card number, expiry, CVV inputs and inline card brand logos
   Rendered by kyc_elavon_payment_fields() in kyc-elavon-checkout.php
   -------------------------------------------------------------------------- */

.kyc-elavon-form {
    border-radius: 5px;
    width: 100%;
    margin-top: 10px;
}

.kyc-elavon-form fieldset {
    border-width: 0;
    padding: 0;
}

.kyc-elavon-form h3 {
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kyc-elavon-input-label {
    line-height: 20px;
    letter-spacing: 0.3px;
    padding-left: 13.92px;
    font-size: 12px;
    color: rgb(115, 115, 115);
    font-weight: 400;
    display: block;
    margin-bottom: 5px;
}

.kyc-elavon-form input[type="text"] {
    width: calc(100% - 10px);
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    height: 47px;
}

.kyc-elavon-form input::placeholder {
    color: #ccc;
}

.kyc-elavon-form input:focus {
    outline: none;
    border-color: #007bff;
}

.kyc-elavon-form .woocommerce-invalid input,
input.wpcf7-not-valid,
.woocommerce-invalid {
    border-color: #cc292b !important;
    color: #cc292b !important;
}

/* Card number input with brand logos overlay */
.kyc-elavon-form .card-input-wrapper {
    position: relative;
}

.kyc-elavon-form .card-logos {
    position: absolute;
    right: 22px;
    top: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

.kyc-elavon-form .card-logos img,
.kyc-elavon-form .card-logos svg {
    margin-left: 3px;
    width: 30px;
    height: auto;
}

/* Expiry + CVV side by side */
.kyc-elavon-form .expiration-security {
    display: flex;
    justify-content: space-between;
}

.kyc-elavon-form .expiration-security div {
    width: 48%;
}

/* CVV icon overlay */
.kyc-elavon-form .card-cvv-wrapper {
    position: relative;
}

.kyc-elavon-form .kyc-cvv-logo {
    width: 41px !important;
    position: absolute;
    top: 29px;
    right: 13px;
}

.kyc-elavon-form svg.p-CardCvcIcons-svg {
    height: 1.95em;
    width: 1.95em;
}

/* -- 1d. Save Card Checkbox --------------------------------------------------
   "Save payment information to my account for future purchases."
   Used in both classic checkout and blocks checkout
   -------------------------------------------------------------------------- */

.kyc-elavon-optin-row {
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.kyc-elavon-optin-checkbox {
    width: auto;
    margin-right: 10px;
    vertical-align: middle;
}

.kyc-elavon-optin-label {
    display: inline;
    font-size: .9em;
    font-weight: 700;
    margin-bottom: .4em;
    vertical-align: middle;
    cursor: pointer;
}


/* ============================================================================
   2. BLOCKS CHECKOUT
   ============================================================================ */

/* -- 2a. Gateway Label & Card Icons ------------------------------------------
   "Credit Card [visa][mc][amex][diners][discover][jcb]"
   Rendered by PaymentMethodLabelWithIcon in kyc-elavon-payment-blocks.js
   -------------------------------------------------------------------------- */

.payment-method-label-icon {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.payment-method-label {
    margin-right: 10px;
    font-size: 16px;
    white-space: nowrap;
}

.kyc-elavon-block-card-icons {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.kyc-elavon-block-card-icons img {
    height: 35px;
    width: auto;
}


/* ============================================================================
   3. MY ACCOUNT - SAVED CARDS
   ============================================================================ */

/* -- 3a. Wrapper & Card List -------------------------------------------------
   /my-account/saved-cards/ page
   Rendered by kyc-elavon-template-saved-cards.php
   -------------------------------------------------------------------------- */

/* Navigation icon for "Payment Details" menu item */
.woocommerce-MyAccount-navigation-link--saved-cards a::before {
    content: "" !important;
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    margin-right: 0.5em;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.kyc-elavon-wrapper {
    max-width: 800px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
}

.kyc-elavon-saved-card-option {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 4px;
}

.kyc-elavon-card-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* -- 3b. Card Actions (delete, fallback) ------------------------------------- */

.kyc-elavon-card-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto;
}

.kyc-elavon-delete-card {
    margin-left: auto;
    padding: 5px 15px;
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.kyc-elavon-delete-card:hover {
    background-color: #c82333;
}

.kyc-elavon-fallback-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.kyc-elavon-fallback-input {
    margin: 0;
}

.kyc-elavon-fallback-label {
    font-size: 14px;
    color: #666;
}

/* -- 3c. Add New Card Form ---------------------------------------------------
   Form at bottom of saved cards page to tokenize and save a new card
   -------------------------------------------------------------------------- */

.kyc-elavon-card-input-wrapper {
    margin-bottom: 20px;
}

.kyc-elavon-input-field {
    position: relative;
}

.kyc-elavon-card-logos {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 5px;
}

.kyc-elavon-expiration-security {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.kyc-elavon-expiry-wrapper,
.kyc-elavon-cvv-wrapper {
    flex: 1;
}

.kyc-elavon-cvv-input-group {
    position: relative;
}

.kyc-elavon-cvv-logo {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

/* Override input sizing inside my-account wrapper */
.kyc-elavon-wrapper .kyc-elavon-form input[type="text"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

#kyc-elavon-add-card-button {
    background-color: #2271b1;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#kyc-elavon-add-card-button:hover {
    background-color: #135e96;
}