/* Cashback Tracker member area.

   Same two rules as frontend.css:
   1. No font-family. The theme owns typeface; this file owns size, weight,
      leading and colour.
   2. No fixed container width. A width in pixels here competes with the
      theme's own container and one of them loses on every install.

   The palette is the one defined on :root in frontend.css, which is always
   enqueued alongside this file. Nothing here re-declares a colour, so the
   account and a shop page cannot drift apart. */

/* --- Shell ---------------------------------------------------------------

   Single column first, rail second. The rail is a CONTAINER query, not a
   media query: the account renders inside whatever column a theme hands it -
   often beside the theme's own sidebar - and the viewport width says nothing
   about how wide that column actually is.

   Mobile-first is the safe failure direction. A browser that never matches
   the query shows the band, which is complete and usable; the reverse would
   be a rail with nowhere to sit. */
/* Two elements, and they are not interchangeable. The WRAP is the container;
   the LAYOUT inside it is what the query styles. A container query only ever
   reaches descendants of its container, so a grid declared on the wrap itself
   is dropped by every browser without a word. */
.cbtrkr_account_wrap{container-type: inline-size; margin-bottom: 25px; color: var(--cbtrkr-ink-2)}
.cbtrkr_account_wrap *{box-sizing: border-box}
.cbtrkr_account_wrap_narrow{max-width: 480px; width: 100%}

/* WooCommerce's My Account template draws its own left rail. Ours inside it
   would be a rail in a rail, and the container there is wide enough that a
   width test would confidently get it wrong - so the opt-out is explicit and
   reaches container-type itself. */
.cbtrkr_account_borrowed{container-type: normal}

/* A reading width, the same one the shop directory takes. Rows are one line
   each: at 1600px the amount ends up half a screen from the name it belongs
   to, and the eye has to travel the whole way to pair them. max-width, never
   width, so a narrower theme column still governs. */
.cbtrkr_account_layout{display: block; margin: 0 auto; max-width: 1100px; width: 100%}
.cbtrkr_account_rail{display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px}
.cbtrkr_account_body{min-width: 0}

@container (min-width: 720px){
    .cbtrkr_account_layout{display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 32px; align-items: start}
    /* Sticky so the balance and the nav stay with the member through a long
       history. top clears the admin bar and most fixed theme headers. */
    .cbtrkr_account_rail{position: sticky; top: 40px; margin-bottom: 0}
}

/* --- Rhythm --------------------------------------------------------------

   One gap between blocks, one gap between a heading and what it introduces.
   Declared here rather than per block so a new part cannot invent a third
   spacing, and zeroed on the last child so a tab never ends in dead space. */
.cbtrkr_account_body > *{margin-bottom: 24px}
.cbtrkr_account_body > *:last-child{margin-bottom: 0}

/* --- Cards ---------------------------------------------------------------- */
.cbtrkr_account_card{background: var(--cbtrkr-surface); border: 1px solid var(--cbtrkr-border); border-radius: var(--cbtrkr-radius); box-shadow: var(--cbtrkr-shadow); padding: 18px 20px}
.cbtrkr_account_label{color: var(--cbtrkr-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; line-height: 1.4; text-transform: uppercase}

/* --- Balance card --------------------------------------------------------- */
.cbtrkr_account_balance_card{background: var(--cbtrkr-surface-2)}
.cbtrkr_account_hero{color: var(--cbtrkr-ink); font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 5px 0 0}
.cbtrkr_account_hero_note{color: var(--cbtrkr-muted); font-size: 13px; line-height: 1.5; margin-top: 5px}
.cbtrkr_account_hero_note b{color: var(--cbtrkr-ink-2); font-weight: 600}

/* --- Navigation ----------------------------------------------------------- */
.cbtrkr_account_nav{display: flex; flex-wrap: wrap; gap: 2px}
.cbtrkr_account_navitem{border-radius: var(--cbtrkr-radius-sm); color: var(--cbtrkr-ink-2); display: block; font-size: 15px; line-height: 1.4; padding: 10px 12px; text-decoration: none}
.cbtrkr_account_navitem:hover{background: var(--cbtrkr-surface-2); color: var(--cbtrkr-ink)}
.cbtrkr_account_navitem_on{background: var(--cbtrkr-surface-2); box-shadow: inset 2px 0 0 var(--cbtrkr-accent, #FB7F36); color: var(--cbtrkr-ink); font-weight: 600}

/* An action, not a destination. It never takes the accent and never takes the
   _on treatment - there is no "current" sign-out. */
.cbtrkr_account_signout{color: var(--cbtrkr-muted)}
.cbtrkr_account_signout:hover{background: var(--cbtrkr-surface-2); color: var(--cbtrkr-ink-2)}

@container (min-width: 720px){
    .cbtrkr_account_nav{flex-direction: column; flex-wrap: nowrap}
    /* The rule is column-only. Below 720px the nav is a horizontal row, where
       a border above one item separates it from nothing and reads as a stray
       line through the middle of the tabs. */
    .cbtrkr_account_signout{border-top: 1px solid var(--cbtrkr-border); margin-top: 6px; padding-top: 14px}
}

/* --- Statistics ----------------------------------------------------------- */
.cbtrkr_account_stats{display: flex; flex-wrap: wrap; gap: 12px}
.cbtrkr_account_stat{background: var(--cbtrkr-surface); border: 1px solid var(--cbtrkr-border); border-radius: var(--cbtrkr-radius); flex: 1 1 140px; padding: 14px 16px}
.cbtrkr_account_stat_value{color: var(--cbtrkr-ink); font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; margin-top: 3px}

/* --- Section headings ----------------------------------------------------- */
/* A heading belongs to what follows it, so it sits close to that and far from
   whatever it was separated from. :first-child covers a tab that opens on one. */
.cbtrkr_account_sec{align-items: baseline; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; margin: 34px 0 12px}
.cbtrkr_account_body > .cbtrkr_account_sec:first-child{margin-top: 0}
.cbtrkr_account_sec + *{margin-top: 0}
.cbtrkr_account_sec_title{color: var(--cbtrkr-ink); font-size: 17px; font-weight: 600; line-height: 1.3; margin: 0}
.cbtrkr_account_link{color: var(--cbtrkr-accent, #FB7F36); font-size: 14px; text-decoration: none}
.cbtrkr_account_link:hover{text-decoration: underline}

/* --- Activity rows -------------------------------------------------------

   A row, not a table row. Four columns of a table shrink until they overflow
   a phone; a flex row wraps its own right-hand column underneath instead, and
   needs no `content:` labels to stay readable when it does. */
.cbtrkr_account_rows{background: var(--cbtrkr-surface); border: 1px solid var(--cbtrkr-border); border-radius: var(--cbtrkr-radius); overflow: hidden}
.cbtrkr_account_row{align-items: center; border-bottom: 1px solid var(--cbtrkr-border); display: flex; gap: 13px; padding: 13px 16px}
.cbtrkr_account_row:last-child{border-bottom: 0}

.cbtrkr_account_row_chip{align-items: center; background: var(--cbtrkr-surface); border: 1px solid var(--cbtrkr-border); border-radius: var(--cbtrkr-radius-sm); color: var(--cbtrkr-muted); display: flex; flex: 0 0 40px; height: 40px; justify-content: center; overflow: hidden; width: 40px}
.cbtrkr_account_row_chip img{height: 100%; object-fit: contain; width: 100%}
.cbtrkr_account_row_chip_text{background: var(--cbtrkr-surface-2); font-size: 12px; font-weight: 700; letter-spacing: .02em}
.cbtrkr_account_row_chip_glyph{background: var(--cbtrkr-surface-2); color: var(--cbtrkr-muted)}
.cbtrkr_account_row_chip_glyph svg{display: block}

.cbtrkr_account_row_main{flex: 1; min-width: 0}
.cbtrkr_account_row_title{color: var(--cbtrkr-ink); display: block; font-size: 15px; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.cbtrkr_account_row_title a{color: inherit; text-decoration: none}
.cbtrkr_account_row_title a:hover{color: var(--cbtrkr-accent, #FB7F36)}
.cbtrkr_account_row_meta{color: var(--cbtrkr-muted); display: block; font-size: 12.5px; line-height: 1.45; margin-top: 2px}

.cbtrkr_account_row_right{align-items: flex-end; display: flex; flex-direction: column; gap: 5px; text-align: right; white-space: nowrap}
.cbtrkr_account_amount{color: var(--cbtrkr-ink); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums}
.cbtrkr_account_amount_in{color: #0a7c3f}
.cbtrkr_account_amount_out{color: var(--cbtrkr-ink)}
/* Struck through and grey, never red: this money never moved, and red is what
   the row above it uses for money that did. */
.cbtrkr_account_amount_void{color: var(--cbtrkr-muted); font-weight: 600; text-decoration: line-through; text-decoration-color: var(--cbtrkr-border)}
.cbtrkr_account_row_void_note{color: var(--cbtrkr-muted); display: block; font-size: 12.5px; line-height: 1.45; margin-top: 3px}

/* --- Status badges -------------------------------------------------------

   One vocabulary. The payout table used to carry a second, keyed on its own
   status integer, so the same five pills were defined twice. */
.cbtrkr_account_status{border-radius: 999px; display: inline-block; font-size: 11.5px; font-weight: 600; line-height: 1.6; padding: 2px 9px; white-space: nowrap}
.cbtrkr_account_status_pending{background: #fdf3e0; color: #8a6415}
.cbtrkr_account_status_progress{background: #e9f0fb; color: #12508a}
.cbtrkr_account_status_available{background: #e8f6ec; color: #0a6b2c}
.cbtrkr_account_status_declined{background: #fbeaea; color: #8a1f22}
.cbtrkr_account_status_settled{background: var(--cbtrkr-surface-2); color: var(--cbtrkr-muted)}

/* --- Empty states --------------------------------------------------------- */
.cbtrkr_account_empty{background: var(--cbtrkr-surface-2); border: 1px solid var(--cbtrkr-border); border-radius: var(--cbtrkr-radius); padding: 26px 24px}
.cbtrkr_account_empty_title{color: var(--cbtrkr-ink); font-size: 16px; font-weight: 600; line-height: 1.35; margin-bottom: 5px}
.cbtrkr_account_empty_text{font-size: 14px; line-height: 1.6; max-width: 52ch}
.cbtrkr_account_empty .cbtrkr_account_button{margin-top: 16px}

/* --- Notices -------------------------------------------------------------- */
.cbtrkr_account_notice{background: var(--cbtrkr-surface-2); border: 1px solid var(--cbtrkr-border); border-left: 3px solid var(--cbtrkr-muted); border-radius: var(--cbtrkr-radius-sm); font-size: 14px; line-height: 1.5; padding: 14px 16px}
.cbtrkr_account_notice_ok{border-left-color: #0a7c3f}

/* --- Pager ---------------------------------------------------------------- */
.cbtrkr_account_pager{align-items: center; display: flex; flex-wrap: wrap; gap: 10px}
.cbtrkr_account_pager_link{border: 1px solid var(--cbtrkr-border); border-radius: var(--cbtrkr-radius-sm); color: var(--cbtrkr-ink-2); display: inline-block; font-size: 14px; line-height: 1.4; padding: 8px 14px; text-decoration: none}
.cbtrkr_account_pager_link:hover{border-color: var(--cbtrkr-muted); color: var(--cbtrkr-ink)}
.cbtrkr_account_pager_off{color: var(--cbtrkr-muted); opacity: .55; pointer-events: none}
.cbtrkr_account_pager_at{color: var(--cbtrkr-muted); font-size: 13px}

/* --- Forms ---------------------------------------------------------------- */
.cbtrkr_account_form{background: var(--cbtrkr-surface); border: 1px solid var(--cbtrkr-border); border-radius: var(--cbtrkr-radius); box-shadow: var(--cbtrkr-shadow); padding: 20px}
.cbtrkr_account_form fieldset{border: 0; margin: 0 0 16px; padding: 0}
.cbtrkr_account_form legend{padding: 0}
.cbtrkr_account_field{margin-bottom: 16px}
.cbtrkr_account_field .cbtrkr_account_label{margin-bottom: 5px}
.cbtrkr_account_input{background: var(--cbtrkr-surface); border: 1px solid var(--cbtrkr-border); border-radius: var(--cbtrkr-radius-sm); color: var(--cbtrkr-ink); font-size: 15px; line-height: 1.4; max-width: 100%; padding: 10px 12px; width: 100%}
.cbtrkr_account_input:focus{border-color: var(--cbtrkr-accent, #FB7F36); outline: 0}
.cbtrkr_account_input_short{max-width: 220px}
.cbtrkr_account_hint{color: var(--cbtrkr-muted); display: block; font-size: 12.5px; line-height: 1.5; margin-top: 5px}

/* A field and its copy button read as one control, so they share an edge. */
.cbtrkr_account_copy{display: flex; gap: 8px}
.cbtrkr_account_copy .cbtrkr_account_input{flex: 1 1 auto; min-width: 0}
.cbtrkr_account_copy_btn{background: var(--cbtrkr-surface); border: 1px solid var(--cbtrkr-border); border-radius: var(--cbtrkr-radius-sm); color: var(--cbtrkr-ink); cursor: pointer; flex: 0 0 auto; font-size: 14px; font-weight: 600; line-height: 1.4; padding: 10px 16px}
.cbtrkr_account_copy_btn:hover{border-color: var(--cbtrkr-muted)}
.cbtrkr_account_copy_btn.cbtrkr_is_done{background: #e8f6ec; border-color: #b6e0c4; color: #0a6b2c}
.cbtrkr_account_rules{font-size: 14px; line-height: 1.6; margin: 0; padding-left: 18px}
.cbtrkr_account_rules li{margin-bottom: 3px}

/* --- Payout method cards --------------------------------------------------

   Deliberately NOT display:none here. frontend.js hides the groups the member
   did not choose; with no JavaScript at all every group stays visible and the
   form still submits, which is the failure direction that leaves a member
   able to request their money. */
.cbtrkr_account_method_fields{margin-bottom: 4px}
.cbtrkr_account_methods{display: flex; flex-wrap: wrap; gap: 10px}
.cbtrkr_account_method_card{align-items: flex-start; background: var(--cbtrkr-surface); border: 1px solid var(--cbtrkr-border); border-radius: var(--cbtrkr-radius-sm); cursor: pointer; display: flex; flex: 1 1 210px; gap: 10px; padding: 13px 14px}
.cbtrkr_account_method_card:hover{border-color: var(--cbtrkr-muted)}
.cbtrkr_account_method_card.cbtrkr_is_on{border-color: var(--cbtrkr-accent, #FB7F36); box-shadow: inset 0 0 0 1px var(--cbtrkr-accent, #FB7F36)}
.cbtrkr_account_method_card input{margin: 3px 0 0}
.cbtrkr_account_method_body{min-width: 0}
.cbtrkr_account_method_name{color: var(--cbtrkr-ink); display: block; font-size: 15px; font-weight: 600; line-height: 1.35}
.cbtrkr_account_method_body .cbtrkr_account_hint{margin-top: 3px}

/* --- Buttons -------------------------------------------------------------- */
.cbtrkr_account_button{background: var(--cbtrkr-accent, #FB7F36); border: 0; border-radius: var(--cbtrkr-radius-sm); color: #fff; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 600; line-height: 1.4; padding: 11px 20px; text-align: center; text-decoration: none}
.cbtrkr_account_button:hover{color: #fff; opacity: .9}
.cbtrkr_account_button_block{display: block; margin-top: 14px; width: 100%}

/* --- Logged out and not-yet-open ------------------------------------------ */
.cbtrkr_account_gate{padding: 26px 24px}
.cbtrkr_account_gate_title{color: var(--cbtrkr-ink); font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0 0 6px}
.cbtrkr_account_gate_text{color: var(--cbtrkr-muted); font-size: 14px; line-height: 1.6}
.cbtrkr_account_gate_foot{border-top: 1px solid var(--cbtrkr-border); font-size: 14px; margin-top: 18px; padding-top: 16px}
/* wp_login_form() emits core's own markup, which no theme styles consistently
   and which arrives here as three bare paragraphs. */
.cbtrkr_account_loginform{margin-top: 18px}
.cbtrkr_account_loginform p{margin: 0 0 14px}
.cbtrkr_account_loginform label{color: var(--cbtrkr-ink-2); display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px}
.cbtrkr_account_loginform input[type="text"], .cbtrkr_account_loginform input[type="password"]{background: var(--cbtrkr-surface); border: 1px solid var(--cbtrkr-border); border-radius: var(--cbtrkr-radius-sm); color: var(--cbtrkr-ink); font-size: 15px; line-height: 1.4; padding: 10px 12px; width: 100%}
.cbtrkr_account_loginform .login-remember label{display: inline; font-weight: 400}
.cbtrkr_account_loginform .login-remember input{margin-right: 6px}
.cbtrkr_account_loginform input[type="submit"]{background: var(--cbtrkr-accent, #FB7F36); border: 0; border-radius: var(--cbtrkr-radius-sm); color: #fff; cursor: pointer; font-size: 15px; font-weight: 600; line-height: 1.4; padding: 11px 20px; width: 100%}

/* --- [cashback-balance] --------------------------------------------------- */
.cbtrkr_account_actions{margin-top: 12px}
.cbtrkr_account_balancebox{background: var(--cbtrkr-surface); border: 1px solid var(--cbtrkr-border); border-radius: var(--cbtrkr-radius); box-shadow: var(--cbtrkr-shadow); margin-bottom: 20px; padding: 18px 20px}
.cbtrkr_account_balancebox .cbtrkr_account_balance{margin-bottom: 12px}
.cbtrkr_account_balance_label{color: var(--cbtrkr-muted); display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase}
.cbtrkr_account_balance_value{color: var(--cbtrkr-ink); display: block; font-size: 21px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; margin-top: 3px}