/* ============================================================
   TA Club — Admin Theme
   Premium membership design system (navy + gold)
   Built on Bootstrap 5. Zero-build (no Sass/Vite).
   ============================================================ */

/* ---- Avenir (self-hosted, extracted from Avenir.ttc) ---- */
@font-face { font-family:'Avenir'; font-style:normal; font-weight:300; font-display:swap; src:url('/assets/fonts/avenir-light.woff2') format('woff2'); }
@font-face { font-family:'Avenir'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/avenir-roman.woff2') format('woff2'); }
@font-face { font-family:'Avenir'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/avenir-medium.woff2') format('woff2'); }
@font-face { font-family:'Avenir'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/avenir-medium.woff2') format('woff2'); }
@font-face { font-family:'Avenir'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/avenir-heavy.woff2') format('woff2'); }
@font-face { font-family:'Avenir'; font-style:normal; font-weight:800; font-display:swap; src:url('/assets/fonts/avenir-black.woff2') format('woff2'); }

:root {
    /* Brand palette (from TA Club Brand Foundations) */
    --ta-navy:        #15263E;  /* Dark Blue — primary */
    --ta-navy-deep:   #0E1A2B;  /* Deeper navy for gradients */
    --ta-navy-soft:   #1E3354;
    --ta-sidebar-bg:  #162131;  /* Sidebar background */
    --ta-app-bg:      #F0EFED;  /* Content / page background */
    --ta-gold:        #C09247;  /* Gold Highlight — accent */
    --ta-gold-soft:   #C09247;
    --ta-gold-dark:   #C09247;
    --ta-charcoal:    #2B2B2B;
    --ta-grey-50:     #F6F7F9;  /* app background */
    --ta-grey-100:    #EEF0F3;
    --ta-grey-200:    #E4E7EC;
    --ta-grey-300:    #D5DAE1;
    --ta-grey-500:    #8A94A6;
    --ta-grey-600:    #5F6B7E;
    --ta-grey-700:    #3E4858;
    --ta-success:     #2E9E5B;
    --ta-success-bg:  #E6F4EC;
    --ta-warning:     #D9A328;
    --ta-warning-bg:  #FBF1DA;
    --ta-error:       #D64545;
    --ta-error-bg:    #FBE7E7;
    --ta-info:        #3B7DD8;
    --ta-info-bg:     #E6EEFA;

    /* Bootstrap overrides */
    --bs-primary: var(--ta-navy);
    --bs-body-bg: var(--ta-app-bg);
    --bs-body-color: var(--ta-grey-700);
    --bs-body-font-family: 'Avenir', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
    --bs-border-color: var(--ta-grey-200);

    --ta-sidebar-w: 248px;
    --ta-radius: .65rem;
    --ta-shadow-sm: 0 1px 2px rgba(16,28,48,.06), 0 1px 3px rgba(16,28,48,.05);
    --ta-shadow: 0 2px 8px rgba(16,28,48,.06), 0 6px 24px rgba(16,28,48,.05);
}

* { -webkit-font-smoothing: antialiased; }

body {
    font-family: var(--bs-body-font-family);
    background: var(--ta-app-bg);
    color: var(--ta-grey-700);
    font-size: .9rem;
}

h1, h2, h3, h4, h5, h6, .ta-display {
    font-family: 'Avenir', var(--bs-body-font-family);
    color: var(--ta-navy);
    font-weight: 700;
    letter-spacing: -.01em;
}

.text-navy   { color: var(--ta-navy) !important; }
.text-gold   { color: var(--ta-gold-dark) !important; }
.text-muted-2{ color: var(--ta-grey-500) !important; }
.bg-navy     { background: var(--ta-navy) !important; }
.bg-gold     { background: var(--ta-gold) !important; }
.fw-medium   { font-weight: 600 !important; }

/* Eyebrow label (e.g. "WEB ADMIN PANEL") */
.ta-eyebrow {
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ta-gold-dark);
    font-weight: 700;
}

/* ============================================================
   App shell — sidebar + topbar
   ============================================================ */
.ta-shell { display: flex; min-height: 100vh; }

.ta-sidebar {
    width: var(--ta-sidebar-w);
    min-width: var(--ta-sidebar-w);
    background: var(--ta-sidebar-bg);
    color: #C7D0DE;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}
.ta-sidebar__brand {
    display: flex; align-items: center; gap: .6rem;
    padding: 1.35rem 1.35rem 1rem;
}
.ta-sidebar__brand img { max-width: 100%; height: auto; display: block; }

/* Active merchant context block (merchant portal) */
.ta-merchant-ctx {
    display: flex; align-items: center; gap: .6rem;
    margin: 0 .75rem .25rem; padding: .6rem .7rem;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: .6rem;
}
.ta-merchant-ctx__logo {
    width: 36px; height: 36px; border-radius: 8px; flex: 0 0 36px;
    background: linear-gradient(135deg, var(--ta-gold-soft), var(--ta-gold)); color: var(--ta-navy-deep);
    display: grid; place-items: center; font-weight: 800; font-size: .72rem; font-family: 'Avenir';
}
.ta-merchant-ctx small { color: #8A94A6; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.ta-merchant-ctx span { color: #fff; font-size: .82rem; font-weight: 700; }

.ta-nav {
    padding: .5rem .75rem 1.5rem; overflow-y: auto; overflow-x: hidden; flex: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.16) transparent;
}
.ta-nav::-webkit-scrollbar { width: 6px; }
.ta-nav::-webkit-scrollbar-track { background: transparent; }
.ta-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 999px; }
.ta-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.24); }
.ta-nav__section {
    font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
    color: #6A7791; padding: 1rem .65rem .4rem; font-weight: 700;
}
.ta-nav__link {
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem .7rem; margin-bottom: .12rem;
    border-radius: .5rem; color: #B9C2D2; text-decoration: none;
    font-size: .855rem; font-weight: 600; transition: all .15s;
}
.ta-nav__link svg, .ta-nav__link i { width: 18px; flex: 0 0 18px; opacity: .85; }
.ta-nav__link:hover { background: rgba(255,255,255,.06); color: #fff; }
.ta-nav__link.active {
    background: #B6985D;
    color: #162131;
    box-shadow: 0 4px 12px rgba(182,152,93,.3);
}
.ta-nav__link.active svg, .ta-nav__link.active i { opacity: 1; }
.ta-nav__badge { margin-left: auto; font-size: .65rem; background: var(--ta-error); color:#fff; border-radius: 999px; padding: .05rem .4rem; }

.ta-sidebar__user {
    display: flex; align-items: center; gap: .6rem;
    margin: 0 .75rem .9rem; padding: .7rem .8rem;
    background: rgba(255,255,255,.10); border-radius: .6rem;
}
.ta-sidebar__user .ta-avatar { background: var(--ta-gold); color: var(--ta-navy-deep); }
.ta-sidebar__user small { color: #97A1B4; font-size: .68rem; }
.ta-sidebar__user span { color: #fff; font-size: .82rem; font-weight: 700; }

.ta-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.ta-topbar {
    height: 64px; background: #fff; border-bottom: 1px solid var(--ta-grey-200);
    display: flex; align-items: center; gap: 1rem;
    padding: 0 1.5rem; position: sticky; top: 0; z-index: 20;
}
.ta-topbar__title { display: flex; align-items: center; gap: .65rem; min-width: 200px; }
.ta-topbar__title h1 { font-size: 1.3rem; margin: 0; font-weight: 700; }
.ta-topbar__group { display: flex; align-items: center; gap: .6rem; min-width: 200px; justify-content: flex-end; }
.ta-topbar__search {
    flex: 1; max-width: 460px; margin: 0 auto; position: relative;
}
.ta-topbar__search input {
    width: 100%; border: 1px solid var(--ta-grey-200); background: var(--ta-app-bg);
    border-radius: 8px; padding: .5rem 1rem .5rem 2.4rem; font-size: .85rem;
}
.ta-topbar__search input:focus { outline: none; border-color: var(--ta-gold); box-shadow: 0 0 0 3px rgba(200,162,76,.15); }
.ta-topbar__search svg { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--ta-grey-500); }
.ta-icon-btn {
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ta-grey-200);
    background:#fff; display: grid; place-items: center; color: var(--ta-grey-600); position: relative;
    cursor: pointer;
}
.ta-icon-btn:hover { background: var(--ta-grey-50); color: var(--ta-navy); }
.ta-icon-btn .dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; background: var(--ta-error); border-radius: 50%; border: 2px solid #fff; }

.ta-clock {
    display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15;
    padding: .35rem .85rem; border-radius: .55rem; background: var(--ta-grey-50); border: 1px solid var(--ta-grey-200);
    white-space: nowrap;
}
.ta-clock .time { font-weight: 700; color: var(--ta-navy); font-size: .92rem; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.ta-clock .date { font-size: .66rem; color: var(--ta-grey-500); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }

.ta-content { padding: 1.6rem; flex: 1; background: var(--ta-app-bg); }

/* Notification dropdown (navbar bell) */
.ta-notif { position: relative; }
.ta-notif__panel {
    position: absolute; right: 0; top: calc(100% + 12px); width: 374px; max-width: 92vw;
    background:#fff; border:1px solid var(--ta-grey-200); border-radius: var(--ta-radius);
    box-shadow: var(--ta-shadow); z-index: 60; overflow: hidden;
    opacity:0; visibility:hidden; transform: translateY(-6px); transition: opacity .15s, transform .15s, visibility .15s;
}
.ta-notif__panel.show { opacity:1; visibility:visible; transform: translateY(0); }
.ta-notif__head { display:flex; align-items:center; justify-content:space-between; padding: .95rem 1rem .55rem; }
.ta-notif__head h4 { margin:0; font-size:1rem; }
.ta-notif__head a { font-size:.74rem; font-weight:700; color:var(--ta-gold-dark); text-decoration:none; }
.ta-notif__tabs { display:flex; gap:1.1rem; padding: 0 1rem; border-bottom:1px solid var(--ta-grey-100); }
.ta-notif__tabs a { padding:.5rem 0; font-size:.8rem; font-weight:600; color:var(--ta-grey-500); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px; display:flex; align-items:center; gap:.35rem; }
.ta-notif__tabs a.active { color:var(--ta-navy); border-bottom-color: var(--ta-gold); }
.ta-notif__tabs .cnt { background:var(--ta-grey-100); color:var(--ta-grey-600); font-size:.62rem; border-radius:999px; padding:.05rem .4rem; font-weight:700; }
.ta-notif__tabs a.active .cnt { background:var(--ta-gold); color:var(--ta-navy-deep); }
.ta-notif__sec { font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ta-grey-500); font-weight:700; padding:.65rem 1rem .25rem; }
.ta-notif__empty { display:flex; flex-direction:column; align-items:center; text-align:center; gap:.4rem; padding:2.6rem 1.5rem; }
.ta-notif__empty-ic { width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--ta-gold-soft); color:var(--ta-gold-dark); margin-bottom:.4rem; }
.ta-notif__empty-ttl { font-weight:700; color:var(--ta-navy); font-size:1rem; }
.ta-notif__empty-sub { color:var(--ta-grey-500); font-size:.85rem; max-width:340px; }
.ta-notif__list { max-height: 60vh; overflow-y:auto; }
.ta-notif__item { display:flex; gap:.7rem; align-items:flex-start; padding:.65rem 1rem; border-top:1px solid var(--ta-grey-100); text-decoration:none; }
.ta-notif__item:first-child { border-top:none; }
.ta-notif__item:hover { background: var(--ta-grey-50); }
.ta-notif__ic { width:38px; height:38px; border-radius:50%; flex:0 0 38px; display:grid; place-items:center; }
.ta-notif__bd { flex:1; min-width:0; }
.ta-notif__bd strong { display:block; color:var(--ta-navy); font-size:.83rem; font-weight:700; }
.ta-notif__bd p { margin:0; color:var(--ta-grey-600); font-size:.76rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ta-notif__bd .t { color:var(--ta-grey-500); font-size:.68rem; }
.ta-notif__udot { width:8px; height:8px; border-radius:50%; background:var(--ta-gold); margin-top:.45rem; flex:0 0 8px; }
.ta-notif__foot { padding:.75rem 1rem; text-align:center; border-top:1px solid var(--ta-grey-100); }
.ta-notif__foot a { color:var(--ta-gold-dark); font-weight:700; font-size:.82rem; text-decoration:none; }
.ic-gold  { background:rgba(200,162,76,.15); color:var(--ta-gold-dark); }
.ic-green { background:var(--ta-success-bg); color:var(--ta-success); }
.ic-red   { background:var(--ta-error-bg); color:var(--ta-error); }
.ic-navy  { background:var(--ta-grey-100); color:var(--ta-navy); }
.ic-info  { background:var(--ta-info-bg); color:var(--ta-info); }

/* ============================================================
   Avatars
   ============================================================ */
.ta-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 700; font-size: .8rem;
    background: var(--ta-grey-200); color: var(--ta-grey-700); flex: 0 0 auto;
    font-family: 'Avenir'; overflow: hidden;
}
.ta-avatar--sm { width: 30px; height: 30px; font-size: .7rem; }
.ta-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   Cards / panels
   ============================================================ */
.ta-card {
    background: #fff; border: 1px solid var(--ta-grey-200);
    border-radius: var(--ta-radius); box-shadow: var(--ta-shadow-sm);
}
.ta-card__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.1rem 1.25rem .25rem;
}
/* Bootstrap 5.3's .h6 utility sets color:var(--bs-heading-color)=inherit, which
   overrode our navy heading colour and made section titles look faded. Pin navy. */
.ta-card__head h3, .ta-card__head h2 { font-size: 1rem; margin: 0; color: var(--ta-navy); }
.ta-card__body { padding: 1.25rem; }

/* Stat / KPI card */
.ta-stat {
    background: #fff; border: 1px solid var(--ta-grey-200); border-radius: var(--ta-radius);
    padding: 1.15rem 1.25rem; box-shadow: var(--ta-shadow-sm); height: 100%;
    position: relative; overflow: hidden;
}
.ta-stat__label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ta-grey-500); font-weight: 700; }
.ta-stat__value { font-family: 'Avenir'; font-size: 1.85rem; font-weight: 700; color: var(--ta-navy); line-height: 1.1; margin-top: .35rem; }
.ta-stat__icon {
    position: absolute; top: 1.1rem; right: 1.1rem; width: 40px; height: 40px;
    border-radius: 10px; display: grid; place-items: center; background: var(--ta-grey-100); color: var(--ta-navy);
}
.ta-stat__icon.is-gold  { background: rgba(200,162,76,.14); color: var(--ta-gold-dark); }
.ta-stat__icon.is-green { background: var(--ta-success-bg); color: var(--ta-success); }
.ta-stat__icon.is-red   { background: var(--ta-error-bg); color: var(--ta-error); }
.ta-stat__delta { font-size: .76rem; font-weight: 700; margin-top: .45rem; display: inline-flex; align-items: center; gap: .25rem; }
.ta-stat__delta.up   { color: var(--ta-success); }
.ta-stat__delta.down { color: var(--ta-error); }

/* ============================================================
   Buttons (extends Bootstrap)
   ============================================================ */
.btn { font-weight: 600; border-radius: .5rem; font-size: .85rem; padding: .5rem 1rem; }
.btn-primary { background: var(--ta-navy); border-color: var(--ta-navy); }
.btn-primary:hover, .btn-primary:focus { background: var(--ta-navy-deep); border-color: var(--ta-navy-deep); }
.btn-gold { background: var(--ta-gold); border-color: var(--ta-gold); color: var(--ta-navy-deep); }
.btn-gold:hover { background: var(--ta-gold-dark); border-color: var(--ta-gold-dark); color: #fff; }
.btn-outline-navy { border: 1px solid var(--ta-grey-300); color: var(--ta-grey-700); background:#fff; }
.btn-outline-navy:hover { border-color: var(--ta-navy); color: var(--ta-navy); background:#F5F5F3; }
.btn-danger-soft { background: var(--ta-error); color: #fff; border: none; }
.btn-danger-soft:hover { background: var(--ta-error); color: #fff; }
.btn-sm { padding: .35rem .7rem; font-size: .78rem; }

/* ============================================================
   Badges — tiers & statuses
   ============================================================ */
.ta-pill {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .72rem; font-weight: 600; padding: .22rem .6rem; border-radius: 999px;
    letter-spacing: .02em; white-space: nowrap;
}
.ta-pill::before { display: none; }
.ta-pill--success { background: #22C55E; color: #FFFFFF; }
.ta-pill--warning { background: #F59E0B; color: #FFFFFF; }
.ta-pill--error   { background: var(--ta-error); color: #fff; }
.ta-pill--info    { background: var(--ta-info); color: #fff; }
.ta-pill--muted   { background: var(--ta-grey-600); color: #fff; }
.ta-pill--gold    { background: #B6985D; color: #FFFFFF; }
.ta-pill--new     { background: #818D97; color: #FFFFFF; }
.ta-pill--plain::before { display: none; }

/* Tier chips */
.ta-tier {
    display: inline-flex; align-items: center;
    font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    padding: .28rem .7rem; border-radius: 14px; border: 1px solid transparent;
}
.ta-tier--classic   { background: #F0EFED; color: #1A1A1A; border-color: rgba(26,26,26,.12); }
.ta-tier--silver    { background: #818D97; color: #FFFFFF; border-color:#818D97; }
.ta-tier--gold      { background: #B6985D; color: #1A1A1A; border-color:#B6985D; }
.ta-tier--platinum  { background: #162131; color: #E2C29A; border-color:#162131; }
.ta-tier--black     { background: #1A1A1A; color: #B6985D; border-color:#1A1A1A; }
.ta-tier-badge { height: 17px; width: auto; display: inline-block; vertical-align: middle; }

/* ============================================================
   Tables
   ============================================================ */
.ta-table-wrap { background: #fff; border: 1px solid var(--ta-grey-200); border-radius: var(--ta-radius); box-shadow: var(--ta-shadow-sm); overflow: hidden; }
.ta-table { width: 100%; margin: 0; border-collapse: collapse; }
.ta-table thead th {
    background: var(--ta-grey-50); color: var(--ta-grey-500);
    font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
    padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--ta-grey-200); white-space: nowrap;
}
.ta-table tbody td { padding: .8rem 1rem; border-bottom: 1px solid var(--ta-grey-100); vertical-align: middle; font-size: .84rem; color: var(--ta-grey-700); }
.ta-table tbody tr:last-child td { border-bottom: none; }
.ta-table tbody tr:hover { background: var(--ta-grey-50); }
.ta-table .ta-cell-user { display: flex; align-items: center; gap: .65rem; }
.ta-table .ta-cell-user strong { color: var(--ta-navy); font-weight: 700; font-size: .85rem; display:block; }
.ta-table .ta-cell-user small { color: var(--ta-grey-500); font-size: .72rem; }

.ta-toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding: 1rem 1.1rem; border-bottom: 1px solid var(--ta-grey-100); }
.ta-input, .ta-select {
    border: 1px solid var(--ta-grey-200); border-radius: .5rem; padding: .5rem .8rem; font-size: .83rem;
    background: #fff; color: var(--ta-grey-700);
    height: 40px; line-height: 1.4; box-sizing: border-box;
}
.ta-input:focus, .ta-select:focus { outline:none; border-color: var(--ta-gold); box-shadow: 0 0 0 3px rgba(200,162,76,.15); }
.ta-search-inline { position: relative; }
.ta-search-inline input { padding-left: 2.2rem; }
.ta-search-inline svg { position:absolute; left:.7rem; top:50%; transform: translateY(-50%); color: var(--ta-grey-500); }

.ta-pagination { display:flex; align-items:center; justify-content: space-between; padding: .9rem 1.1rem; border-top: 1px solid var(--ta-grey-100); }
.ta-pagination .pages { display:flex; gap:.25rem; }
.ta-pagination .pages a, .ta-pagination .pages span {
    min-width: 32px; height: 32px; display:grid; place-items:center; border-radius:.45rem;
    border:1px solid var(--ta-grey-200); color: var(--ta-grey-600); text-decoration:none; font-size:.8rem; font-weight:600;
}
.ta-pagination .pages .active { background: var(--ta-navy); color:#fff; border-color: var(--ta-navy); }

/* Row action buttons */
.ta-row-actions { display:flex; gap:.35rem; justify-content:flex-end; }
.ta-row-btn {
    font-size: .72rem; font-weight: 600; padding: .28rem .6rem; border-radius: .4rem; border: 1px solid var(--ta-grey-200);
    background:#fff; color: var(--ta-grey-600); cursor:pointer; text-decoration:none;
}
.ta-row-btn:hover { border-color: var(--ta-navy); color: var(--ta-navy); }
.ta-row-btn--gold { background: var(--ta-gold); border-color: var(--ta-gold); color: var(--ta-navy-deep); }
.ta-row-btn--danger { background: var(--ta-error); border-color: transparent; color: #fff; }

/* ============================================================
   Forms
   ============================================================ */
.ta-label { font-size: .75rem; font-weight: 700; color: var(--ta-grey-600); margin-bottom: .3rem; display:block; }
.ta-field { margin-bottom: 1rem; }
.form-control, .form-select { border-radius: .5rem; border-color: var(--ta-grey-200); font-size: .85rem; padding: .55rem .8rem; }
.form-control:focus, .form-select:focus { border-color: var(--ta-gold); box-shadow: 0 0 0 3px rgba(200,162,76,.15); }
.form-check-input:checked { background-color: var(--ta-gold); border-color: var(--ta-gold); }
.form-check-input:focus { border-color: var(--ta-gold); box-shadow: 0 0 0 .2rem rgba(192,146,71,.25); }
.form-switch .form-check-input:checked { background-color: var(--ta-success); border-color: var(--ta-success); }

/* ============================================================
   Settings tabs
   ============================================================ */
.ta-tabs { display:flex; gap: .25rem; border-bottom: 1px solid var(--ta-grey-200); margin-bottom: 1.5rem; }
.ta-tabs a {
    padding: .65rem 1rem; font-size: .85rem; font-weight: 600; color: var(--ta-grey-500);
    text-decoration:none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ta-tabs a:hover { color: var(--ta-navy); }
.ta-tabs a.active { color: var(--ta-navy); border-bottom-color: var(--ta-gold); }

/* ============================================================
   Tier cards (membership cards)
   ============================================================ */
.ta-tier-card {
    border-radius: 14px; padding: 1.1rem 1.2rem; color:#fff; min-height: 130px;
    display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden;
    box-shadow: var(--ta-shadow);
}
.ta-tier-card small { font-size: .58rem; letter-spacing: .2em; opacity: .8; }
.ta-tier-card .name { font-family:'Avenir'; font-weight:700; font-size:1.15rem; letter-spacing:.05em; }
.ta-tier-card .meta { font-size:.7rem; opacity:.85; }
.ta-tier-card .chip { width:26px; height:18px; border-radius:4px; background: rgba(255,255,255,.35); }
.ta-tier-card--classic  { background: linear-gradient(135deg,#EFE6D2,#D9C9A6); color:#5A4413; }
.ta-tier-card--silver   { background: linear-gradient(135deg,#D7DBE0,#AEB6C0); color:#33373D; }
.ta-tier-card--gold     { background: linear-gradient(135deg,#E7C76B,#B98E32); color:#43320C; }
.ta-tier-card--platinum { background: linear-gradient(135deg,#233A5E,#15263E); }
.ta-tier-card--black    { background: linear-gradient(135deg,#2A2A2A,#000); color:#D9C48E; }

/* ============================================================
   Misc helpers
   ============================================================ */
.ta-divider { height:1px; background: var(--ta-grey-200); margin: 1.25rem 0; border:0; }
.ta-progress { height: 7px; background: var(--ta-grey-100); border-radius: 999px; overflow:hidden; }
.ta-progress > span { display:block; height:100%; background: var(--ta-gold); border-radius:999px; }
.ta-bar-track { background: var(--ta-grey-100); border-radius: 6px; height: 8px; overflow: hidden; }
.ta-bar-track > span { display:block; height:100%; border-radius:6px; }

/* Vertical bar chart (CSS-only, mock data) */
.ta-chart { display:flex; align-items:flex-end; gap:.55rem; height:170px; padding-top:.5rem; }
.ta-chart .bar { flex:1; background: linear-gradient(180deg, var(--ta-navy-soft), var(--ta-navy)); border-radius: 5px 5px 0 0; min-height:4px; position:relative; }
.ta-chart .bar.is-gold { background: linear-gradient(180deg, var(--ta-gold-soft), var(--ta-gold)); }
.ta-chart-labels { display:flex; gap:.55rem; margin-top:.4rem; }
.ta-chart-labels span { flex:1; text-align:center; font-size:.66rem; color: var(--ta-grey-500); }

/* Grouped bar chart (e.g. New vs Active members) */
.ta-chart-group { flex:1; display:flex; align-items:flex-end; justify-content:center; gap:3px; height:100%; }
.ta-chart-group .bar { flex:0 0 9px; border-radius:4px 4px 0 0; min-height:4px; }
.ta-legend { display:flex; gap:1.1rem; align-items:center; }
.ta-legend span { display:inline-flex; align-items:center; gap:.4rem; font-size:.76rem; color:var(--ta-grey-600); font-weight:600; }
.ta-legend span::before { content:''; width:11px; height:11px; border-radius:3px; background:var(--lg, #ccc); }

/* Donut (conic gradient) */
.ta-donut { width: 150px; height: 150px; border-radius: 50%; position: relative; margin: 0 auto; }
.ta-donut::after { content:''; position:absolute; inset: 26px; background:#fff; border-radius:50%; }
.ta-donut__center { position:absolute; inset:0; display:grid; place-items:center; z-index:1; text-align:center; }

@media (max-width: 991px) {
    .ta-sidebar { position: fixed; left: 0; z-index: 1050; transform: translateX(-100%); transition: transform .2s; }
    .ta-sidebar.show { transform: translateX(0); }
    .ta-content { padding: 1rem; }
}

/* ============================================================
   MEMBER PORTAL — top navbar layout & consumer components
   ============================================================ */
.member-body { background: var(--ta-app-bg); min-height: 100vh; display: flex; flex-direction: column; }
.member-shell { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; width: 100%; }
.member-content { flex: 1 0 auto; }
.member-page { padding: 1.6rem 0 2.5rem; }

/* Top navbar */
.ta-topnav { background: var(--ta-sidebar-bg); height: 64px; position: sticky; top: 0; z-index: 40; }
.ta-topnav__inner { display: flex; align-items: center; gap: 1.25rem; height: 64px; }
.ta-topnav__brand { display: flex; align-items: center; flex: 0 0 auto; margin-right: .5rem; }
.ta-topnav__links { display: flex; align-items: center; gap: 1.6rem; flex: 1; }
.ta-topnav__links a {
    color: #C7D0DE; text-decoration: none; font-weight: 700; font-size: .85rem;
    padding: 1.1rem 0; transition: color .15s; white-space: nowrap; position: relative;
}
.ta-topnav__links a:hover { color: #fff; }
.ta-topnav__links a.active { color: var(--ta-gold-soft); }
.ta-topnav__links a.active::after { content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background: var(--ta-gold); border-radius:2px; }
.ta-topnav__right { display: flex; align-items: center; gap: .8rem; flex: 0 0 auto; }
.ta-topnav__search { position: relative; }
.ta-topnav__search input {
    width: 220px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);
    border-radius: 8px; color: #fff; font-size: .82rem; padding: .5rem .9rem .5rem 2.2rem;
}
.ta-topnav__search input::placeholder { color: #8A94A6; }
.ta-topnav__search input:focus { outline: none; border-color: var(--ta-gold); background: rgba(255,255,255,.10); }
.ta-topnav__search svg { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: #8A94A6; }
.ta-topnav__btn {
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12);
    background: transparent; color: #C7D0DE; display: grid; place-items: center; position: relative; cursor: pointer;
}
.ta-topnav__btn:hover { background: rgba(255,255,255,.06); color: #fff; }
.ta-topnav__btn .dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; background: var(--ta-error); border-radius: 50%; border: 2px solid var(--ta-sidebar-bg); }
.ta-topnav__user { display: flex; align-items: center; gap: .55rem; background: transparent; border: none; padding: 0; color: #fff; cursor: pointer; }
.ta-topnav__user .ta-avatar { background: linear-gradient(135deg,var(--ta-gold-soft),var(--ta-gold)); color: var(--ta-navy-deep); width: 40px; height: 40px; font-size: .8rem; }
.ta-topnav__user .name { display: block; font-size: .8rem; font-weight: 700; color: #fff; text-align: left; line-height: 1.1; }
.ta-topnav__user .tier { display: inline-block; font-size: .58rem; color: var(--ta-navy-deep); background: var(--ta-gold); font-weight: 800; letter-spacing: .08em; padding: .05rem .35rem; border-radius: 4px; margin-top: .15rem; }
@media (max-width: 960px){ .ta-topnav__links, .ta-topnav__search { display: none; } }

/* Member footer */
.member-footer { background: var(--ta-sidebar-bg); color: #8A94A6; font-size: .78rem; padding: 2.2rem 0; flex-shrink: 0; margin-top: 2.5rem; }
.member-footer .brand { color:#fff; font-weight:700; }
.member-footer a { color: #B9C2D2; text-decoration: none; }
.member-footer a:hover { color: #fff; }
.member-footer .signout { background:#fff; color: var(--ta-navy); border:none; border-radius:8px; font-weight:700; font-size:.8rem; padding:.5rem 1.1rem; text-decoration:none; }
.member-footer .signout:hover { background: var(--ta-gold-soft); }

/* Full-bleed dark hero band (page header on every member page) */
/* Plain title on the dark page — the blue gradient "box" behind the title is removed. */
.member-hero-band { background: transparent; color: #fff; padding: 1.9rem 0 1.1rem; }
.ta-modal__x { width:34px; height:34px; border-radius:50%; border:none; background: var(--ta-grey-100, #eef0f3); color: var(--ta-grey-600, #5F6B7E); display:grid; place-items:center; cursor:pointer; flex:0 0 34px; font-size:1rem; line-height:1; transition:background .15s ease, color .15s ease; }
.ta-modal__x:hover { background: var(--ta-grey-200, #e2e5ea); color: var(--ta-navy, #14233A); }
.member-hero-band h1 { color: #fff; font-size: 2.1rem; margin: 0; }
@media (max-width: 860px){ .member-hero-band h1 { font-size: 1.7rem; } }
@media (max-width: 576px){ .member-hero-band { padding: 1.2rem 0 1.4rem; } .member-hero-band h1 { font-size: 1.45rem; } }
.member-hero-band .lead { color: #9FB0C7; margin: .2rem 0 0; font-size: .9rem; }
.member-hero-band__stats { display: flex; flex-wrap: wrap; gap: 2.4rem; margin-top: 1.3rem; }
.member-hero-band__stat .v { font-size: 1.55rem; font-weight: 800; color: #fff; font-family: 'Avenir'; line-height: 1; }
.member-hero-band__stat .v.gold { color: var(--ta-gold-soft); }
.member-hero-band__stat .l { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: #8A94A6; font-weight: 700; margin-top: .35rem; }

/* Section heading */
.member-section-title { font-size: 1.2rem; font-weight: 800; color: var(--ta-navy); }

/* Member filter chips */
.member-chips { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.member-chip { border:1px solid var(--ta-grey-300); background:#fff; color:var(--ta-grey-600); font-weight:700; font-size:.8rem; padding:.4rem .9rem; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; gap:.4rem; }
.member-chip.active { background: var(--ta-navy); border-color: var(--ta-navy); color:#fff; }
.member-chip .cnt { background: rgba(0,0,0,.12); border-radius:999px; font-size:.66rem; padding:.02rem .4rem; }
.member-chip.active .cnt { background: rgba(255,255,255,.2); }

/* ============================================================
   Offer card (white, tier-colored media header)
   ============================================================ */
.ofr { background:#fff; border:1px solid var(--ta-grey-200); border-radius:14px; overflow:hidden; box-shadow: var(--ta-shadow-sm); height:100%; display:flex; flex-direction:column; }
.ofr__media { height:120px; position:relative; }
.ofr--gold     { background: linear-gradient(120deg,#C9A24C 0%, #8A6E3B 100%); }
.ofr--platinum { background: linear-gradient(120deg,#243B5E 0%, #15263E 100%); }
.ofr--black    { background: linear-gradient(120deg,#2A2A2A 0%, #000 100%); }
.ofr--navy, .ofr--all, .ofr--classic, .ofr--silver { background: linear-gradient(120deg,#1E3354 0%, #15263E 100%); }
.ofr__tier { position:absolute; top:.7rem; left:.7rem; background:#fff; color:var(--ta-navy); font-size:.62rem; font-weight:800; letter-spacing:.06em; padding:.22rem .6rem; border-radius:999px; }
.ofr__heart { position:absolute; top:.6rem; right:.6rem; width:30px; height:30px; border-radius:50%; background:#fff; border:none; color:var(--ta-grey-500); display:grid; place-items:center; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.ofr__heart.saved { background: var(--ta-error); color:#fff; }
.ofr__mediapill { position:absolute; bottom:.7rem; left:.7rem; font-size:.62rem; font-weight:800; letter-spacing:.06em; padding:.22rem .6rem; border-radius:999px; }
.ofr__mediapill.eligible { background: var(--ta-success); color:#fff; }
.ofr__lockbar { position:absolute; left:0; right:0; bottom:0; background: var(--ta-error); color:#fff; font-size:.74rem; font-weight:700; text-align:center; padding:.4rem; }
.ofr__body { padding:.85rem .95rem 1rem; display:flex; flex-direction:column; gap:.25rem; flex:1; }
.ofr__title { font-size:.95rem; font-weight:800; color:var(--ta-navy); line-height:1.25; font-family:'Avenir'; }
.ofr__merchant { font-size:.78rem; color:var(--ta-grey-500); }
.ofr__saves { font-size:.8rem; color:var(--ta-success); font-weight:700; margin-top:.2rem; }
.ofr__exp { font-size:.72rem; color:var(--ta-grey-500); }
.ofr__foot { margin-top:.7rem; }
.ofr__btn { display:block; width:100%; text-align:center; background:var(--ta-navy); color:#fff; border:none; font-weight:600; font-size:.8rem; padding:.55rem; border-radius:8px; text-decoration:none; }
.ofr__btn:hover { background:var(--ta-navy-deep); color:#fff; }
.ofr__btn--outline { background:#fff; border:1px solid var(--ta-grey-300); color:var(--ta-grey-600); }
.ofr__btn--outline:hover { border-color:var(--ta-navy); color:var(--ta-navy); background:#fff; }

/* Member summary (dark panel on My Card) */
.member-summary { background: var(--ta-sidebar-bg); border-radius:16px; color:#fff; padding:1.3rem 1.4rem; }
.member-summary .lbl { font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:#8A94A6; font-weight:800; }
.member-summary__row { padding:.55rem 0; border-bottom:1px solid rgba(255,255,255,.07); }
.member-summary__row:last-child { border-bottom:none; }
.member-summary__row .v { font-size:1.25rem; font-weight:800; font-family:'Avenir'; color:#fff; line-height:1; }
.member-summary__row .v.gold { color: var(--ta-gold-soft); }
.member-summary__row .l { font-size:.7rem; color:#8A94A6; margin-top:.15rem; }

/* KPI card with left accent (My Activity) */
.kpi-accent { background:#fff; border:1px solid var(--ta-grey-200); border-radius:12px; box-shadow:var(--ta-shadow-sm); padding:1.1rem 1.2rem; border-left:4px solid var(--ta-grey-300); height:100%; }
.kpi-accent.gold  { border-left-color: var(--ta-gold); }
.kpi-accent.green { border-left-color: var(--ta-success); }
.kpi-accent.navy  { border-left-color: var(--ta-navy); }
.kpi-accent.black { border-left-color: #1A1A1A; }
.kpi-accent .v { font-size:1.7rem; font-weight:800; color:var(--ta-navy); font-family:'Avenir'; line-height:1; }
.kpi-accent .l { font-size:.74rem; color:var(--ta-grey-500); margin-top:.3rem; }

/* Big membership card */
.membership-card { border-radius: 18px; padding: 1.5rem 1.6rem; color: #fff; min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--ta-shadow); position: relative; overflow: hidden; }
.membership-card--gold { background: linear-gradient(135deg, #E7C76B 0%, #B98E32 100%); color: #43320C; }
.membership-card .brand { font-family: 'Avenir'; font-weight: 800; letter-spacing: .25em; font-size: .8rem; opacity: .85; }
.membership-card .tier-name { font-family: 'Avenir'; font-weight: 800; font-size: 2.1rem; letter-spacing: .04em; }
.membership-card .holder { font-size: .9rem; font-weight: 700; }
.membership-card .num { font-family: 'Avenir'; letter-spacing: .2em; font-size: 1rem; margin-top: .4rem; }
.qr-box { background: #fff; border-radius: 14px; padding: 1rem; display: grid; place-items: center; }
.qr-box img, .qr-box svg { width: 100%; height: auto; }

/* Tier comparison table (dark) */
.tier-table { width: 100%; border-collapse: collapse; background: var(--ta-sidebar-bg); border-radius: 14px; overflow: hidden; color: #C7D0DE; }
.tier-table th, .tier-table td { padding: .8rem 1rem; text-align: center; border-bottom: 1px solid rgba(255,255,255,.06); font-size: .82rem; }
.tier-table thead th { background: rgba(255,255,255,.03); color: #fff; font-weight: 800; font-size: .8rem; }
.tier-table thead th.is-current { background: var(--ta-gold); color: var(--ta-navy-deep); }
.tier-table tbody td:first-child, .tier-table thead th:first-child { text-align: left; color: #9FB0C7; font-weight: 600; }
.tier-table tbody tr:last-child td { border-bottom: none; }
.tier-table .yes { color: var(--ta-gold-soft); font-weight: 800; }
.tier-table .no { color: #5A6678; }

/* Light info card */
.info-card { background:#fff; border:1px solid var(--ta-grey-200); border-radius: var(--ta-radius); box-shadow: var(--ta-shadow-sm); }

/* force white inputs inside every modal (override cream --bs-body-bg) */
.modal .form-control, .modal .form-select, .modal textarea, .modal .ta-input, .modal .ta-select { background-color: #fff; }
.modal .form-control:focus, .modal .form-select:focus { background-color: #fff; }

/* form inputs always white */
.form-control, .form-select, textarea.form-control { background-color: #fff; }
.form-control:focus, .form-select:focus { background-color: #fff; }

/* Branded dialogs (session-expired 419 + logout confirm) — ported from admin. */
.ta-confirm-overlay { position: fixed; inset: 0; z-index: 3100; align-items: center; justify-content: center; padding: 1rem; background: rgba(20,32,51,.55); }
.ta-confirm { width: 100%; max-width: 440px; }
.ta-confirm__msg { font-size:.95rem; line-height:1.55; color: var(--ta-navy, #14233A); margin:0; }
.ta-modal { border: none; border-radius: 16px; box-shadow: 0 24px 70px rgba(16,28,48,.25); overflow: hidden; background: #fff; color: var(--ta-grey-700); }
/* Light cards/modals live on the dark-themed member body; force dark text so
   Bootstrap .form-label (which inherits the light body colour) stays readable.
   Covers both the custom .ta-modal and Bootstrap .modal-content dialogs. */
.ta-modal, .modal-content, .info-card { color: var(--ta-grey-700); }
.ta-modal .form-label, .ta-modal label,
.modal-content .form-label, .modal-content label,
.info-card .form-label { color: var(--ta-grey-700); }
/* Global loading overlay (mirrors the admin app) — shown during Livewire commits. */
.ta-loading-overlay { position: fixed; inset: 0; z-index: 3000; display:flex; align-items: center; justify-content: center; background: rgba(10,15,23,.42); }
.ta-loading-card { background:#fff; border-radius:16px; padding:24px 32px; display:flex; flex-direction:column; align-items:center; gap:12px; box-shadow:0 18px 50px rgba(16,28,48,.28); }
.ta-loading-card__text { font-size:.82rem; font-weight:700; letter-spacing:.02em; color: var(--ta-navy); }
.ta-spinner { width:40px; height:40px; border:3.5px solid rgba(182,152,93,.25); border-top-color: var(--ta-gold); border-radius:50%; animation: ta-spin .7s linear infinite; }
@keyframes ta-spin { to { transform: rotate(360deg); } }

/* Skeleton loading — used for structured member content refreshes. Action
   buttons/forms keep their inline loading text so they stay lightweight. */
.ta-skel {
    display:block;
    border-radius:7px;
    background:linear-gradient(90deg,#e9ecef 25%,#f4f6f8 37%,#e9ecef 63%);
    background-size:400% 100%;
    animation:mskel 1.4s ease infinite;
}
.ta-skel-card { min-height:108px; padding:1.1rem 1.25rem; display:flex; flex-direction:column; gap:.65rem; }
.ta-skel--label { width:46%; height:10px; border-radius:999px; }
.ta-skel--value { width:58%; height:30px; }
.ta-skel--text { width:38%; height:11px; border-radius:999px; }
.ta-skel-list { display:flex; flex-direction:column; gap:.85rem; }
.ta-skel-list__row { display:grid; grid-template-columns:40px 1fr 86px; gap:.8rem; align-items:center; padding:.75rem 1rem; }
.ta-skel--avatar { width:40px; height:40px; border-radius:50%; }
.ta-skel--line { width:100%; height:14px; border-radius:999px; }
.ta-skel--line.short { width:86px; }
/* Livewire shows a wire:loading <tbody> as inline-block by default, which breaks the
   table column grid — skeleton cells collapse and slide out from under the header.
   Force a proper table row group whenever Livewire is showing it. */
.ta-table tbody[wire\:loading][style*="display: inline"],
.ta-table tbody[wire\:loading][style*="display:inline"] { display: table-row-group !important; }
/* Bare wire:loading shows an element as inline-block (Livewire default), collapsing
   these skeleton containers to content width. Force each back to its real display
   whenever Livewire is showing it (matched via the inline display it sets). */
.ta-skel-list[style*="display: inline"], .ta-skel-list[style*="display:inline"] { display: flex !important; }
.ta-skel-form[style*="display: inline"], .ta-skel-form[style*="display:inline"] { display: block !important; }
.row[data-ta-skeleton][style*="display: inline"], .row[data-ta-skeleton][style*="display:inline"] { display: flex !important; }
.ta-skel-row td { background:#fff; padding:.9rem 1rem !important; border-bottom:1px solid var(--ta-grey-100); vertical-align:middle; }
.ta-skel-row td .ta-skel--cell { height:14px; min-width:20px; border-radius:999px; }
.ta-skel-table-line { display:flex; align-items:center; gap:1rem; }
.ta-skel-table-line .ta-skel { height:14px; flex:0 0 auto; border-radius:999px; }
.ta-modal__head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding: 1.35rem 1.6rem 1rem; border-bottom: 1px solid var(--ta-grey-200, #e5e7eb); }
.ta-modal__head h3 { font-size:1.4rem; margin:0; font-weight:800; color: var(--ta-navy, #14233A); }
.ta-modal__body { padding: 1.3rem 1.6rem; }
.ta-modal__foot { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: 1.1rem 1.6rem 1.35rem; border-top: 1px solid var(--ta-grey-200, #e5e7eb); }
.ta-modal__foot .btn { min-width: 120px; padding:.6rem 1.2rem; }

/* ── Select2 (bootstrap-5 theme) tuned to match the app's inputs ── */
.select2-container--bootstrap-5 .select2-selection {
    min-height: 40px; border: 1px solid var(--ta-grey-200, #e5e7eb); border-radius: .5rem;
    background: #fff; color: var(--ta-grey-700, #374151); font-size: .83rem;
}
.select2-container--bootstrap-5 .select2-selection--single {
    display: flex; align-items: center; padding: .25rem .8rem;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    padding: 0; color: var(--ta-grey-700, #374151); line-height: 1.4;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder { color: var(--ta-grey-500, #6b7280); }
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--ta-gold, #C8A24C); box-shadow: 0 0 0 3px rgba(200,162,76,.15);
}
.select2-container--bootstrap-5 .select2-dropdown { border-color: var(--ta-gold, #C8A24C); border-radius: .5rem; }
.select2-container--bootstrap-5 .select2-results__option { font-size: .83rem; padding: .5rem .8rem; }
.select2-container--bootstrap-5 .select2-results__option--highlighted,
.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected],
.select2-container--bootstrap-5 .select2-results__option[data-selected="true"]:hover { background-color: var(--ta-gold, #C8A24C) !important; color: #fff !important; }
.select2-container--bootstrap-5 .select2-results__option--selected { background-color: rgba(200,162,76,.16) !important; color: var(--ta-grey-800, #1f2937) !important; }
.select2-container--bootstrap-5 .select2-search__field:focus { border-color: var(--ta-gold, #C8A24C); box-shadow: 0 0 0 3px rgba(200,162,76,.15); }
/* Dropdown is appended to <body>; keep it above BOTH the Bootstrap .modal overlay
   (z-index 1055) and the .ta-confirm-overlay used by the feedback modal + confirm
   dialogs (z-index 3100) — otherwise an open dropdown renders behind them and looks
   empty (the feedback category picker showed no options at all). */
.select2-container--open { z-index: 3200; }
/* Multi-select: one compact chip system for every Select2 multi field. */
.select2-container--bootstrap-5 .select2-selection--multiple { min-height: 35px; padding: 4px 5px; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered { display: flex !important; align-items: center; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0 !important; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search--inline { display: flex; align-items: center; height: 21px; margin: 0 !important; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search__field { height: 21px !important; margin: 0 !important; padding: 0 !important; font-size: .74rem; line-height: 21px; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice { display: inline-flex; align-items: center; min-height: 21px; margin: 0 !important; padding: 2px 6px; background: var(--ta-gold, #C8A24C); border: none; border-radius: 3px; color: #fff; font-size: .66rem !important; line-height: 17px; white-space: nowrap; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove { position: static; order: -1; margin: 0 3px 0 0; padding: 0; border: 0; background: transparent; color: #fff; font-size: .78rem; line-height: 1; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover { background: transparent; color: #fff; }