/* Mis Tarjetas -- ported 1:1 from the mobile app's own card design
   (dashboard/app/mercocaribe-app/src/components/account/MyCardsSection.jsx
   + src/styles/global.css --mc-* tokens), so the web My Account tab looks
   identical to what the app already shows users. */

.mca-tarjetas-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 6px;
}

.mca-tarjeta-tile {
    all: unset;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 280px;
    max-width: 100%;
    border-radius: 14px;
    padding: 16px 20px;
    cursor: pointer;
    font-family: inherit;
}

/* ISO/IEC 7810 ID-1 card ratio (~1.586:1, the same width:height a real
   bank card has), so the tile actually reads as a card instead of a tall
   content-driven box. */
.mca-tarjeta-tile:not(.mca-tarjeta-tile--add) {
    aspect-ratio: 1.586 / 1;
    background: linear-gradient(135deg, #0B303A, #00816D);
    color: #fff;
    transition: transform .15s, box-shadow .15s;
}

.mca-tarjeta-tile:not(.mca-tarjeta-tile--add):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(11, 48, 58, .25);
}

.mca-tarjeta-tile:not(.mca-tarjeta-tile--add):active {
    transform: scale(.97);
}

.mca-tarjeta-tile__icon {
    font-size: 18px;
    line-height: 1;
}

.mca-tarjeta-tile__label {
    font-size: 10.5px;
    font-weight: 600;
    opacity: .75;
    margin-top: 12px;
    letter-spacing: .5px;
}

.mca-tarjeta-tile__number {
    font-size: 14px;
    font-weight: 700;
    margin-top: 2px;
    letter-spacing: .5px;
}

.mca-tarjeta-tile__balance {
    font-size: 17px;
    font-weight: 700;
    /* auto instead of a fixed margin: pins it to the card's bottom edge
       regardless of the fixed aspect-ratio height above, instead of adding
       a gap that would push the card taller than the ratio allows. */
    margin-top: auto;
}

/* "Agregar Tarjeta" -- same dashed-placeholder treatment as the app's
   "Añadir tarjeta" tile. */
.mca-tarjeta-tile--add {
    min-width: 92px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1.5px dashed #E0E0E0;
    color: #7E7E7E;
    text-decoration: none;
    transition: border-color .15s, color .15s;
}

.mca-tarjeta-tile--add:hover {
    border-color: #C6C6C6;
    color: #666666;
}

.mca-tarjeta-tile__add-icon {
    font-size: 20px;
    line-height: 1;
}

.mca-tarjeta-tile__add-label {
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}

.mca-tarjetas-error {
    color: #7E7E7E;
    padding: 20px 0;
}

/* Popup (magnific-popup inline) */
.mca-tarjeta-popup {
    background: #fff;
    max-width: 480px;
    width: 90%;
    margin: 40px auto;
    padding: 30px;
    border-radius: 15px;
    position: relative;
}

.mca-tarjeta-popup__close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text, #7E7E7E);
}

.mca-tarjeta-popup__header {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color, #ececec);
}

.mca-tarjeta-popup__header h3 {
    margin: 0 0 6px;
    color: var(--color-heading, #253D4E);
}

.mca-tarjeta-popup__credit {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-brand, #3BB77E);
}

.mca-tarjeta-popup__ops {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
}

.mca-tarjeta-popup__op {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color, #ececec);
}

.mca-tarjeta-popup__op:last-child {
    border-bottom: none;
}

.mca-tarjeta-popup__op-main {
    min-width: 0;
    flex: 1;
}

.mca-tarjeta-popup__op-description {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-heading, #253D4E);
    line-height: 1.35;
}

.mca-tarjeta-popup__op-date {
    color: var(--color-text, #7E7E7E);
    font-size: 12px;
    margin-top: 4px;
}

.mca-tarjeta-popup__op-amount {
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}

/* These are loyalty.history ledger lines (already-settled point
   issue/use deltas, not a payment with a pending/failed lifecycle), so the
   only distinction that matters is the sign of the net amount. */
.mca-tarjeta-popup__op-amount--positive { color: #3BB77E; }
.mca-tarjeta-popup__op-amount--negative { color: #E74C3C; }

.mca-tarjeta-popup__loading,
.mca-tarjeta-popup__empty,
.mca-tarjeta-popup__error {
    text-align: center;
    padding: 30px 0;
    color: var(--color-text, #7E7E7E);
}

/* Cards are fixed-width (280px) with max-width:100% + flex-wrap + gap, so they reflow
   naturally at any viewport without percentage-based breakpoints. Only the
   popup needs a narrow-screen adjustment. */
@media (max-width: 480px) {
    .mca-tarjeta-popup {
        padding: 20px;
    }
}

/* Hard ceiling on desktop matching the 1.586:1 ratio at the card's own
   280px width (280 / 1.586 ~= 176.5px, rounded up for a little slack) --
   aspect-ratio already produces this naturally, but this keeps the card
   from ever growing taller than a real card's proportions if content
   ever pushes past what aspect-ratio alone would hold to. */
@media (min-width: 481px) {
    .mca-tarjeta-tile:not(.mca-tarjeta-tile--add) {
        max-height: 187px;
    }
}

/* "Verificar Tarjeta" tile is a <button>, unlike the "Agregar Tarjeta" <a>. */
.mca-tarjeta-tile--verify {
    cursor: pointer;
}

/* Cards this account ran out of Documento ID tries on. */
.mca-tarjetas-notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 18px;
    margin-bottom: 16px;
    border-radius: 12px;
    border: 1px solid #F5C2C0;
    background: #FDF0EF;
    color: #8A2C25;
    font-size: 14px;
    line-height: 1.45;
}

.mca-tarjetas-notice i {
    font-size: 18px;
    line-height: 1.3;
}

.mca-tarjetas-notice p {
    margin: 4px 0 0;
}

.mca-tarjetas-notice a {
    color: inherit;
    text-decoration: underline;
}

.mca-tarjeta-verify__intro,
.mca-tarjeta-verify__warning {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--color-text, #7E7E7E);
}

.mca-tarjeta-verify__warning {
    font-weight: 600;
    color: #8A2C25;
}

.mca-tarjeta-verify__form label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--color-heading, #253D4E);
}

.mca-tarjeta-verify__form input {
    width: 100%;
    box-sizing: border-box;
}

.mca-tarjeta-verify__message {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.45;
}

.mca-tarjeta-verify__message a {
    color: inherit;
    text-decoration: underline;
}

.mca-tarjeta-verify__message--info { background: #F2F3F4; color: #253D4E; }
.mca-tarjeta-verify__message--success { background: #DEF9EC; color: #1E6B47; }
.mca-tarjeta-verify__message--error { background: #FDF0EF; color: #8A2C25; }

/* Not verified yet (or locked): light yellow instead of the brand gradient,
   flagged on top, no balance - see mca_tarjetas_link_status(). */
.mca-tarjeta-tile.mca-tarjeta-tile--pending:not(.mca-tarjeta-tile--add) {
    position: relative;
    background: #FFF6D8;
    border: 1.5px solid #F1D88A;
    color: #5C4A0F;
}

.mca-tarjeta-tile.mca-tarjeta-tile--pending:not(.mca-tarjeta-tile--add):hover {
    box-shadow: 0 8px 20px rgba(160, 125, 20, .18);
}

.mca-tarjeta-tile__flag {
    position: absolute;
    top: -10px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #F5C445;
    color: #3D2F00;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

.mca-tarjeta-tile__flag i {
    font-size: 11px;
    line-height: 1;
}

.mca-tarjeta-tile__flag--locked {
    background: #E9A39E;
    color: #5A1712;
}

.mca-tarjeta-tile__balance--pending {
    font-size: 13px;
    font-weight: 600;
}

/* Room for the flag poking out above the first row of cards. */
.mca-tarjetas-grid {
    padding-top: 10px;
}

/* "Verifícala" for cards not on the list - a text link, not another tile. */
.mca-tarjetas-verify-other {
    margin: 14px 0 0;
    font-size: 14px;
    color: var(--color-text, #7E7E7E);
}

.mca-tarjetas-verify-other .mca-tarjeta-tile--verify {
    all: unset;
    cursor: pointer;
    font-weight: 600;
    color: var(--color-brand, #3BB77E);
    text-decoration: underline;
}

/* Tile contents are <span>s (a <button> may only hold inline content, and
   <div>s in it gave wpautop a line to break on) - laid out as blocks. */
.mca-tarjeta-tile__label,
.mca-tarjeta-tile__number,
.mca-tarjeta-tile__balance {
    display: block;
}