/* =========================================================
   Enjoy United FC — v6 əlavə komponentlər (app.css-dən sonra yüklənir)
   ========================================================= */

/* ---------- Qeydiyyat ---------- */
.steps.steps-3 { grid-template-columns: repeat(3, 1fr); max-width: 640px; margin-inline: auto; }
.reg6 .form-card h2 { font-size: clamp(1.25rem, 2.4vw, 1.65rem); letter-spacing: -.02em; }
.reg6 .form-card h2.h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.parent-chip { display: flex; align-items: center; gap: .6rem; background: #fff; border: 1px solid var(--line-l); border-radius: 999px; padding: .55rem 1rem; width: fit-content; max-width: 100%; font-size: .95rem; }
.parent-chip i { color: #0a7d3b; font-size: 1.15rem; }
.price-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; background: #000; color: #fff; border-radius: 22px; padding: 1rem 1.25rem; }
.price-bar[hidden] { display: none; }
.price-bar small { display: block; color: #A8A8A3; font-size: .8rem; }
.price-bar b { font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; }
@media (max-width: 575.98px) { .price-bar { grid-template-columns: 1fr; gap: .35rem; } .price-bar > div { display: flex; justify-content: space-between; align-items: baseline; } }
.slot-check.is-full span { opacity: .45; cursor: not-allowed; text-decoration: line-through; text-decoration-thickness: 1px; }
.slot-check.is-full:hover span { border-color: transparent; }
.done-card .done-ic { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 1.25rem; display: grid; place-items: center; background: #000; color: #fff; font-size: 2.2rem; }
.done-card .review dl > div, .done-card dl.review > div { display: grid; grid-template-columns: 40% 1fr; padding: .6rem 0; border-bottom: 1px solid var(--line-l); }
.done-card dt { font-weight: 500; color: #6E6E69; } .done-card dd { margin: 0; font-weight: 600; }

/* ---------- Heyət və qollar (panel) ---------- */
.lineup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .6rem; }
.lineup-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; border: 1.5px solid var(--line-l, #E3E3DE); border-radius: 14px; padding: .5rem .7rem; background: #fff; transition: border-color .2s, background .2s; }
.lineup-row.is-on { border-color: #000; background: #F2F2EE; }
.lineup-main { display: flex; align-items: center; gap: .6rem; flex: 1; margin: 0; cursor: pointer; min-width: 0; }
.lineup-main .num { display: grid; place-items: center; min-width: 2rem; height: 2rem; border-radius: 50%; background: #000; color: #fff; font-weight: 700; font-size: .85rem; }
.lineup-main .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lineup-row .goal { display: flex; align-items: center; gap: .3rem; color: #6E6E69; } .lineup-row .goal input { width: 58px; text-align: center; }

/* ---------- Çempionat (ictimai) ---------- */
.league6 .season { display: inline-block; font-size: .4em; vertical-align: middle; padding: .35em .9em; border-radius: 999px; border: 1.5px solid #000; letter-spacing: 0; margin-left: .4rem; }
.league6 .nav-pills .btn { min-width: 5.5rem; font-family: var(--f-display); font-weight: 700; }
.l6-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; }
.l6-kpi { background: #fff; border-radius: 22px; padding: 1.1rem 1.25rem; border: 1px solid var(--line-l); display: flex; flex-direction: column; gap: .2rem; }
.l6-kpi span { color: #6E6E69; font-size: .9rem; } .l6-kpi b { font-family: var(--f-display); font-size: clamp(1.8rem, 3.5vw, 2.8rem); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.l6-kpi.is-dark { background: #000; color: #fff; } .l6-kpi.is-dark span { color: #A8A8A3; }
@media (max-width: 991.98px) { .l6-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575.98px) { .l6-kpis { grid-template-columns: repeat(2, 1fr); } }
.l6-h { font-size: 1.15rem; margin: 0 0 1rem; display: flex; align-items: baseline; gap: .6rem; } .l6-h small { color: #8A8A85; font-family: var(--f-body); font-weight: 500; font-size: .85rem; }
.l6-card { background: #fff; border-radius: 24px; border: 1px solid var(--line-l); padding: .5rem 1rem; }
.l6-table thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: #8A8A85; font-weight: 600; border-bottom: 1.5px solid #000; padding-block: .9rem; }
.l6-table td { padding-block: .8rem; border-color: var(--line-l); } .l6-table tbody tr:last-child td { border-bottom: 0; }
.l6-table .num { width: 64px; } .jersey { display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: #000; color: #fff; font-family: var(--f-display); font-weight: 700; font-size: .85rem; }
.l6-table .stat { font-family: var(--f-display); font-weight: 700; font-variant-numeric: tabular-nums; } .l6-table .stat.is-goal { color: #0a7d3b; }
.l6-scorers { list-style: none; margin: 0; padding: 0; background: #fff; border-radius: 24px; border: 1px solid var(--line-l); }
.l6-scorers li { display: grid; grid-template-columns: 1.8rem 1fr 64px 2rem; gap: .7rem; align-items: center; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line-l); }
.l6-scorers li:last-child { border: 0; } .l6-scorers .rk { font-family: var(--f-display); font-weight: 700; color: #8A8A85; } .l6-scorers li:first-child .rk { color: #000; }
.l6-scorers .nm { font-weight: 600; line-height: 1.2; } .l6-scorers .nm small { display: block; font-weight: 400; color: #8A8A85; font-size: .8rem; }
.l6-scorers .bar { height: 6px; border-radius: 6px; background: var(--fog); overflow: hidden; } .l6-scorers .bar i { display: block; height: 100%; background: #000; border-radius: 6px; }
.l6-scorers b { font-family: var(--f-display); text-align: right; }
.l6-matches { display: grid; gap: .7rem; }
.l6-match { display: grid; grid-template-columns: 110px 1fr auto; gap: 1rem; align-items: center; background: #fff; border-radius: 22px; border: 1px solid var(--line-l); padding: 1rem 1.3rem; border-left: 6px solid #CFCFCB; }
.l6-match.r-Q { border-left-color: #0a7d3b; } .l6-match.r-M { border-left-color: #c0392b; } .l6-match.r-H { border-left-color: #8A8A85; }
.l6-match .when b { display: block; } .l6-match .when small, .l6-match .vs small { color: #8A8A85; }
.l6-match .vs strong { font-size: 1.1rem; } .l6-match .vs small { display: block; } .l6-match .vs p { margin: .4rem 0 0; color: #4a4a46; font-size: .95rem; }
.l6-match .res { text-align: right; } .l6-match .score { display: block; font-family: var(--f-display); font-weight: 800; font-size: 1.7rem; letter-spacing: -.03em; line-height: 1; } .l6-match .res i { font-style: normal; font-size: .8rem; color: #6E6E69; }
@media (max-width: 575.98px) { .l6-match { grid-template-columns: 1fr auto; } .l6-match .when { grid-column: 1 / -1; display: flex; gap: .6rem; align-items: baseline; } }

/* ---------- Ödəniş kabineti ---------- */
.debt-banner { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; text-decoration: none; color: #7a1f14; background: #fdecea; border: 1.5px solid #e8b4ad; border-radius: 16px; padding: .8rem 1.1rem; margin-bottom: 1.25rem; }
.debt-banner:hover { background: #fbe0dc; color: #7a1f14; } .debt-banner > i:first-child { font-size: 1.2rem; color: #c0392b; } .debt-banner span { flex: 1; min-width: 220px; } .debt-banner em { font-style: normal; font-weight: 700; }
.pay-hero { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; border-radius: 26px; padding: 1.5rem 1.75rem; margin-bottom: 1.5rem; background: #000; color: #fff; }
.pay-hero.is-debt { background: linear-gradient(135deg, #1a0a08, #7a1f14); } .pay-hero.is-ok { background: linear-gradient(135deg, #04140a, #0a5a2c); }
.pay-hero .ph-ic { font-size: 2.2rem; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); }
.pay-hero .ph-main small { display: block; color: rgba(255,255,255,.7); } .pay-hero .ph-main b { display: block; font-family: var(--f-display); font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.1; letter-spacing: -.03em; } .pay-hero .ph-main span { color: rgba(255,255,255,.75); font-size: .95rem; }
.pay-hero .ph-note { flex: 1; min-width: 240px; color: rgba(255,255,255,.85); font-size: .98rem; }
.kid-card { background: #fff; border: 1px solid var(--line-l, #E3E3DE); border-radius: 22px; padding: 1.1rem 1.25rem; height: 100%; }
.kid-card .kc-top { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; } .kid-card .kc-top b { display: block; line-height: 1.2; }
.kid-card .avatar { width: 44px; height: 44px; border-radius: 50%; background: #000; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .9rem; }
.kid-card .kc-row { display: flex; justify-content: space-between; gap: .6rem; padding: .45rem 0; border-top: 1px solid var(--line-l, #E3E3DE); font-size: .95rem; } .kid-card .kc-row span { color: #6E6E69; }
.kid-card.is-dark { background: #000; color: #fff; display: flex; flex-direction: column; justify-content: center; gap: .3rem; } .kid-card.is-dark small { color: #A8A8A3; } .kid-card .big { font-family: var(--f-display); font-size: 2.1rem; letter-spacing: -.03em; }
.inv-list { display: grid; gap: .6rem; }
.inv { display: grid; grid-template-columns: 1fr auto auto; gap: .5rem 1rem; align-items: center; padding: .9rem 1.1rem; border-radius: 16px; border: 1.5px solid var(--line-l, #E3E3DE); background: #fff; }
.inv.is-late { border-color: #e8b4ad; background: #fffafa; }
.inv-main b { display: block; } .inv-main span { color: #6E6E69; font-size: .9rem; } .inv-main em { font-style: normal; font-size: .75rem; font-weight: 700; color: #c0392b; margin-left: .4rem; text-transform: uppercase; letter-spacing: .05em; }
.inv-amt { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; text-align: right; } .inv-amt small { display: block; font-family: var(--f-body); font-weight: 400; color: #8A8A85; font-size: .75rem; }
.inv-claim { grid-column: 1 / -1; display: none; grid-template-columns: 160px 1fr auto; gap: .5rem; padding-top: .5rem; border-top: 1px dashed var(--line-l, #E3E3DE); }
.inv-claim.show { display: grid; }
@media (max-width: 575.98px) { .inv { grid-template-columns: 1fr auto; } .inv-act { grid-column: 1 / -1; } .inv-claim { grid-template-columns: 1fr; } }

/* ---------- Qəbz ---------- */
.receipt-body { background: #F2F2EE; padding: 2rem 1rem; }
.receipt { max-width: 640px; margin: 0 auto; background: #fff; border-radius: 24px; padding: 2rem; border: 1px solid #E3E3DE; }
.receipt header { display: flex; gap: 1rem; align-items: center; padding-bottom: 1.2rem; border-bottom: 2px solid #000; } .receipt header img { background: #000; border-radius: 12px; padding: 4px; } .receipt header small { display: block; color: #6E6E69; line-height: 1.4; }
.receipt h1 { font-size: 1.4rem; margin: 1.4rem 0 1rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; } .receipt h1 span { font-size: .9rem; font-family: var(--f-body); color: #6E6E69; font-weight: 600; }
.receipt dl > div { display: grid; grid-template-columns: 40% 1fr; padding: .55rem 0; border-bottom: 1px solid #E3E3DE; } .receipt dt { color: #6E6E69; font-weight: 500; } .receipt dd { margin: 0; font-weight: 600; }
.receipt .total { display: flex; justify-content: space-between; align-items: baseline; background: #000; color: #fff; border-radius: 16px; padding: 1rem 1.25rem; margin: 1.4rem 0 1rem; } .receipt .total b { font-family: var(--f-display); font-size: 1.8rem; }
.receipt .foot { color: #6E6E69; font-size: .85rem; }
@media print { .no-print { display: none !important; } .receipt-body { background: #fff; padding: 0; } .receipt { border: 0; } }

/* ---------- Ağıllı idarə paneli ---------- */
.ins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .75rem; }
.ins { display: grid; grid-template-columns: auto 1fr; gap: .2rem .85rem; align-items: center; text-decoration: none; color: inherit; border: 1.5px solid var(--line-l, #E3E3DE); border-radius: 18px; padding: .9rem 1rem; background: #fff; transition: transform .2s, border-color .2s, box-shadow .2s; }
.ins:hover { transform: translateY(-2px); border-color: #000; box-shadow: 0 14px 30px -22px rgba(0,0,0,.5); color: inherit; }
.ins .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; background: #F2F2EE; grid-row: span 2; }
.ins .tx b { display: block; line-height: 1.3; font-size: .97rem; } .ins .tx small { display: block; color: #6E6E69; font-size: .84rem; line-height: 1.35; margin-top: .15rem; }
.ins em { grid-column: 2; font-style: normal; font-weight: 700; font-size: .82rem; }
.ins-danger { border-color: #e8b4ad; background: #fffafa; } .ins-danger .ic { background: #fdecea; color: #c0392b; }
.ins-warn .ic { background: #fff4de; color: #b26a00; } .ins-info .ic { background: #e7f0fb; color: #1f5fa8; } .ins-ok .ic { background: #e4f5ea; color: #0a7d3b; }