/*================================================================================
	Item Name: Materialize - Material Design Admin Template
	Version: 3.1
	Author: GeeksLabs
	Author URL: http://www.themeforest.net/user/geekslabs
================================================================================

NOTE:
------
PLACE HERE YOUR OWN CSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/* ============================================================================
   MyAccount payment-methods modernisation
   ----------------------------------------------------------------------------
   Everything below is scoped under .ma-payment (added to the MyAccount
   paymentMethods template). The MyAccount theme loads BOTH Materialize and
   Bootstrap; Materialize strips input borders and hides native checkboxes,
   which made the Ezidebit card / direct-debit fields hard to see. These rules
   re-assert clear, modern, accessible form controls for the payment area only —
   no field names, markup contracts, or gateway behaviour are changed, and the
   shared gateway templates / staff / cart screens are untouched.
   ============================================================================ */

.ma-payment {
    --ma-pay-border: #cbd5e1;
    --ma-pay-border-strong: #94a3b8;
    --ma-pay-text: #1f2933;
    --ma-pay-muted: #5b6573;
    --ma-pay-accent: #2563eb;
    --ma-pay-accent-soft: rgba(37, 99, 235, 0.15);
    --ma-pay-radius: 8px;
    color: var(--ma-pay-text);
    max-width: 100%;
}

/* The loaded gateway form (card or bank) sits in a clean panel so it reads as a
   distinct, trustworthy step rather than loose fields on the page. */
.ma-payment .paymentGatewayEntry {
    background: #fff;
    border: 1px solid #e4e9f0;
    border-radius: 12px;
    padding: 22px 20px 12px;
    margin-top: 18px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}

/* Keep the Bootstrap grid the forms use from overflowing the content area. */
.ma-payment .row { margin-left: 0; margin-right: 0; }
.ma-payment .payment_content,
.ma-payment .card-form { max-width: 100%; }
.ma-payment [class*="col-"] { padding-left: 10px; padding-right: 10px; }

/* Breathing room between fields (the templates lay fields out as bare grid
   columns with no .form-group, so space them directly). */
.ma-payment .card-form > [class*="col-"],
.ma-payment .payment_content > .row > [class*="col-"],
.ma-payment .paymentGatewayEntry [class*="col-"] {
    margin-bottom: 16px;
}

/* Labels — clear hierarchy and contrast (override Materialize's floating label
   colour/positioning, including the template's .no-float helper). */
.ma-payment label,
.ma-payment .no-float {
    display: block;
    position: static;
    transform: none;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ma-pay-muted);
    margin: 0 0 6px;
    letter-spacing: 0.01em;
}

/* Text / number inputs and selects — Materialize renders these as borderless
   underlines; re-assert a visible bordered control with a clear focus ring. */
.ma-payment .form-control,
.ma-payment input[type="text"],
.ma-payment input[type="number"],
.ma-payment input[type="email"],
.ma-payment input[type="tel"],
.ma-payment input[type="password"],
.ma-payment select,
.ma-payment textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: auto;
    min-height: 44px;
    padding: 10px 12px;
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    color: var(--ma-pay-text);
    background-color: #fff;
    border: 1px solid var(--ma-pay-border);
    border-radius: var(--ma-pay-radius);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.ma-payment select {
    /* Restore a dropdown caret (appearance:none removes the native one). */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235b6573' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
}
.ma-payment .form-control:hover,
.ma-payment select:hover { border-color: var(--ma-pay-border-strong); }

.ma-payment .form-control:focus,
.ma-payment input[type="text"]:focus,
.ma-payment input[type="number"]:focus,
.ma-payment select:focus,
.ma-payment textarea:focus {
    outline: 0;
    border-color: var(--ma-pay-accent);
    box-shadow: 0 0 0 3px var(--ma-pay-accent-soft);
}
.ma-payment .form-control::placeholder { color: #9aa5b1; }

/* The card-number field carries a brand-logo background sprite — keep its left
   padding so the typed number never sits under the logo. */
.ma-payment input.cardNumber { padding-left: 54px; }

/* Native checkboxes (Save Card, Make Primary, recurring opts, use-card-on-file):
   Materialize hides bare checkboxes (position:absolute; opacity:0) and draws a
   fake box via the label's ::before/::after. Force the real control visible as a
   native checkbox, and suppress Materialize's pseudo box — otherwise, because the
   Bootstrap .form-check-label is unpositioned, that absolute pseudo escapes to the
   nearest positioned ancestor (the .card) and renders a stray box in the top-left
   corner. !important on position/left/opacity guarantees we beat Materialize. */
.ma-payment input[type="checkbox"],
.ma-payment input[type="radio"]:not(.payment-type) {
    position: static !important;
    left: auto !important;
    opacity: 1 !important;
    pointer-events: auto;
    -webkit-appearance: auto;
    appearance: auto;
    width: 18px;
    height: 18px;
    margin: 0 8px 0 0;
    vertical-align: middle;
    accent-color: var(--ma-pay-accent);
}
.ma-payment .form-check-label::before,
.ma-payment .form-check-label::after,
.ma-payment label > input[type="checkbox"] + span::before,
.ma-payment label > input[type="checkbox"] + span::after {
    content: none !important;
    display: none !important;
}
/* Bootstrap form-switch/form-check rows render with a leading-indent the native
   checkbox no longer needs; align them as a simple inline control + label. */
.ma-payment .form-check {
    padding-left: 0;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}
.ma-payment .form-check .form-check-input { float: none; margin-left: 0; }
.ma-payment .form-check-label { margin: 0; }
.ma-payment .card-radio-button {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 4px;
    font-size: 14px;
    color: var(--ma-pay-text);
    margin-left: 0 !important;
    padding: 10px 12px;
    background: #f7f9fc;
    border: 1px solid #e4e9f0;
    border-radius: var(--ma-pay-radius);
}

/* Action buttons within the payment area — modest, consistent affordances. */
.ma-payment .btn {
    border-radius: var(--ma-pay-radius);
    font-weight: 600;
    padding: 10px 18px;
}
.ma-payment .btn-primary {
    background-color: var(--ma-pay-accent);
    border-color: var(--ma-pay-accent);
}
.ma-payment .btn-primary:hover,
.ma-payment .btn-primary:focus {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
}

/* Validation / error + unavailable-payment messages — visible, accessible,
   high-contrast (the card-errors container is empty until JS fills it). */
.ma-payment [id$="-card-errors"]:not(:empty),
.ma-payment .text-danger:not(:empty) {
    display: block;
    margin: 4px 0 0;
    padding: 12px 14px;
    background: #fdecea;
    border: 1px solid #f5c2c0;
    border-radius: var(--ma-pay-radius);
    color: #8a1c13;
    font-size: 14px;
}
.ma-payment [id$="-card-errors"] h4 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: #8a1c13;
}
.ma-payment [id$="-card-errors"] ul { margin: 0; padding-left: 18px; }
.ma-payment .alert { border-radius: var(--ma-pay-radius); }

/* Saved-card chooser: clearer selected / hover / keyboard-focus states layered
   on top of the template's base card styles. */
.ma-payment .payment-method-card { outline: none; }
.ma-payment .payment-method-card:focus-within {
    border-color: var(--ma-pay-accent);
    box-shadow: 0 0 0 3px var(--ma-pay-accent-soft);
}
.ma-payment .payment-method-card.selected {
    background-color: #ecfdf3;
    border-color: #12b76a;
    box-shadow: 0 2px 6px rgba(18, 183, 106, 0.22);
}
.ma-payment .payment-method-card.selected .payment-card-label::after {
    content: '✓';
    display: inline-block;
    margin-left: 6px;
    color: #12b76a;
    font-weight: 700;
}

/* Accepted-card brand chips spacing inside the scoped form. */
.ma-payment .accepted-cards-list { margin-top: 6px; }

/* Keep the expiry month + year on the SAME line at every width. The theme loads
   Materialize after Bootstrap, and Materialize's non-flex .row wins — so Bootstrap
   col-6's flex-basis is inert and the two selects collapse onto separate lines on
   narrow screens. Force the expiry inner row (the only .row inside .card-form) to
   be a flex row with two equal cells. */
.ma-payment .card-form .row {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 12px;
    margin: 0;
}
.ma-payment .card-form .row > [class*="col-"] {
    flex: 1 1 50%;
    max-width: 50%;
    width: auto;
    float: none;
    padding: 0;
    margin-bottom: 0;
}

/* Responsive: only tighten padding on the narrow content area; no column-width
   overrides (Bootstrap handles the stacking). */
@media (max-width: 600px) {
    .ma-payment .paymentGatewayEntry { padding: 16px 14px 8px; }
    .ma-payment .col-12 { padding-left: 12px !important; padding-right: 12px !important; }
}