/* Pawcoins.
 *
 * Only the bits that are Pawcoins' own. The card itself reuses .fq-acc-card
 * from fiquantum_account, so the dashboard keeps one shape and one border
 * radius however many cards end up on it.
 *
 * The teal edge is the fourth brand colour, and the only one not already
 * carrying a meaning on this page: amber is the membership offer, navy is
 * structure, pink is delivery. */

/* THE CARD IS THE FIRST THING ON MY ACCOUNT, so it is allowed to look like
   something. A tinted panel with the coin on it reads as "your money" at a
   glance; the plain bordered box it replaced read as a notice. */
.fq-paw-card {
    position: relative;
    overflow: hidden;
    border: 0;
    border-left: 5px solid #2fbfa8;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(47, 191, 168, .18) 0%, rgba(47, 191, 168, 0) 60%),
        linear-gradient(135deg, #f4fffd 0%, #ffffff 55%);
    box-shadow: 0 6px 18px rgba(0, 32, 91, .07);
}

/* Once there is enough to spend, the card says so in colour before it says so
   in words - amber is the shop's "money back" signal everywhere else. */
.fq-paw-card.is-ready {
    border-left-color: #fdbb31;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(253, 187, 49, .22) 0%, rgba(253, 187, 49, 0) 60%),
        linear-gradient(135deg, #fffaf0 0%, #ffffff 55%);
}

.fq-paw-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.fq-paw-coin {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
}

.fq-paw-headtext {
    min-width: 0;
}

/* The card's own heading sits inside the flex row, so the margin the shared
   .fq-acc-card h3 rule gives it would push the coin out of line. */
.fq-paw-card .fq-paw-headtext h3 {
    margin: 0 0 2px;
    font-size: 1em;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .7;
}

/* The balance is the single number the customer opened this page to see. */
.fq-paw-balance {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    font-size: 1em;
}

.fq-paw-balance strong {
    font-size: 2.4em;
    line-height: 1;
    color: #00205b;
    font-weight: 800;
    /* Tabular figures so the number does not jiggle as it grows. */
    font-variant-numeric: tabular-nums;
}

.fq-paw-worth {
    opacity: .7;
    white-space: nowrap;
}

/* HOW CLOSE YOU ARE, which is the one thing a bare number cannot say. */
.fq-paw-bar {
    height: 10px;
    margin: 0 0 12px;
    border-radius: 999px;
    background: rgba(0, 32, 91, .09);
    overflow: hidden;
}

.fq-paw-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #2fbfa8 0%, #35d7bc 100%);
    /* Animated so a balance that has just gone up is SEEN to go up, and
       switched off for anyone who has asked for less movement. */
    transition: width .6s ease;
}

.fq-paw-card.is-ready .fq-paw-bar > span {
    background: linear-gradient(90deg, #fdbb31 0%, #ffd166 100%);
}

@media (prefers-reduced-motion: reduce) {
    .fq-paw-bar > span { transition: none; }
}

.fq-paw-note {
    margin: 0 0 10px;
    line-height: 1.55;
}

.fq-paw-note--ready {
    color: #7a4c00;
}

@media (max-width: 560px) {
    .fq-paw-coin { width: 48px; height: 48px; }
    .fq-paw-balance strong { font-size: 2em; }
}

/* wc_price() wraps the figure in its own span; stop it inheriting the big
   size from .fq-paw-balance strong above. */
.fq-paw-worth .woocommerce-Price-amount {
    font-size: 1em;
    font-weight: 400;
    color: inherit;
}

/* The receipt line. Sits under the order summary, quiet enough not to compete
   with "Order received" but coloured so it is not mistaken for small print. */
.fq-paw-earned {
    margin: 18px 0 0;
    padding: 12px 16px;
    border-radius: 8px;
    background: #f1fbf9;
    border: 1px solid rgba(47, 191, 168, .35);
    color: #0f4b43;
    text-align: center;
}

.fq-paw-earned strong {
    color: #00205b;
}

/* ── My Account -> Pawcoins: the statement ─────────────────────────────────── */

.fq-paw-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
    padding: 18px 20px;
    margin: 0 0 22px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 12px;
    background: #fff;
}

.fq-paw-balance {
    display: flex;
    align-items: baseline;
    gap: .4rem;
}

.fq-paw-n {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--global-palette1, #00205b);
    /* The figures in the table line up under each other; so should this. */
    font-variant-numeric: tabular-nums;
}

.fq-paw-u {
    font-size: .95rem;
    font-weight: 600;
    opacity: .6;
}

.fq-paw-facts { flex: 1 1 18rem; }
.fq-paw-facts p { margin: 0 0 .3rem; }
.fq-paw-facts p:last-child { margin-bottom: 0; }

.fq-paw-worth { font-size: 1.02rem; }
.fq-paw-quiet { font-size: .88rem; opacity: .72; line-height: 1.5; }

.fq-paw-empty {
    padding: 20px;
    border: 1px dashed rgba(0, 0, 0, .18);
    border-radius: 12px;
    opacity: .8;
    max-width: 40em;
}

/* A statement is the one place in the account where a table is right: four
   columns that must line up down the page so a customer can add them up. */
.fq-paw-scroll { overflow-x: auto; }

.fq-paw-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .93rem;
}

.fq-paw-table th {
    text-align: left;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    opacity: .55;
    padding: 0 14px 8px 0;
    border-bottom: 1.5px solid rgba(0, 0, 0, .14);
}

.fq-paw-table td {
    padding: 11px 14px 11px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    vertical-align: top;
}

.fq-paw-table th.fq-paw-num,
.fq-paw-table td.fq-paw-num {
    text-align: right;
    padding-right: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.fq-paw-table td.fq-paw-num { font-weight: 600; }

/* Earned reads as good news; spent and expired are simply quieter, not red.
   Money leaving a loyalty balance is the customer getting what they were
   promised, so it should not be coloured like a warning. */
.fq-paw-table td.is-in  { color: #1a6b35; }
.fq-paw-table td.is-out { opacity: .65; }

.fq-paw-foot {
    margin-top: 18px;
    font-size: .87rem;
    opacity: .75;
}

/* On a phone the four columns become four labelled lines per row - a table
   that scrolls sideways is a table nobody reads on a phone. */
@media (max-width: 600px) {
    .fq-paw-table thead { display: none; }
    .fq-paw-table, .fq-paw-table tbody, .fq-paw-table tr, .fq-paw-table td { display: block; width: auto; }

    .fq-paw-table tr {
        padding: 12px 0;
        border-bottom: 1px solid rgba(0, 0, 0, .1);
    }

    .fq-paw-table td {
        border: 0;
        padding: 2px 0;
        display: flex;
        justify-content: space-between;
        gap: 1rem;
    }

    .fq-paw-table td::before {
        content: attr(data-label);
        font-size: .72rem;
        letter-spacing: .06em;
        text-transform: uppercase;
        opacity: .55;
        flex: none;
    }

    .fq-paw-table td.fq-paw-num { text-align: right; }
    .fq-paw-n { font-size: 2rem; }
}