﻿/* ===========================================================================
   v2-ucet.css – uživatelská sekce (client-info.aspx) v redesignu dno_cz_test
   Jen .v2 .acc-… (žádné zásahy do dno-v2.css). Tokeny, tlačítka (.btn-v2), .card, .fld, .alert-v2 a ikony přebírá z dno-v2.css.
   Části: 1 hlavička + záložky · 2 karty objednávek · 3 štítky stavů · 4 tabulka faktur · 5 reklamace + časová osa · 6 formulář reklamace · 7 propojení e-mailu · 8 prázdné stavy · 9 stránkování · 10 veřejný reklamační formulář (complaint.aspx)
   =========================================================================== */

/* 1. HLAVIČKA ÚČTU A ZÁLOŽKY ------------------------------------------------ */
.v2 .acc { padding-top: 12px; padding-bottom: 40px; }
.v2 .acc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 6px 0 16px; }
.v2 .acc-user { display: flex; align-items: center; gap: 14px; min-width: 0; }
.v2 .acc-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--c-brand-soft); color: var(--c-brand); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.v2 .acc-user-txt { min-width: 0; }
.v2 .acc-user-name { font-size: 22px; margin: 0; line-height: 1.2; overflow-wrap: anywhere; }
.v2 .acc-user-mail { margin-top: 2px; overflow-wrap: anywhere; }
.v2 .acc-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.v2 .acc-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--c-border); margin: 0 0 20px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.v2 .acc-tabs::-webkit-scrollbar { display: none; }
.v2 .acc-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 12px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-weight: 600; font-size: 15px; color: var(--c-muted); white-space: nowrap; flex: none; }
.v2 .acc-tabs a:hover { color: var(--c-text); }
.v2 .acc-tabs a.is-active { color: var(--c-brand); border-bottom-color: var(--c-brand); }
.v2 .acc-tabs .ico { color: inherit; }
@media (min-width: 768px) {
    .v2 .acc-user-name { font-size: 26px; }
    .v2 .acc-tabs a { padding: 12px 18px; font-size: 16px; }
}
.v2 .acc-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.v2 .acc-sec-head h2 { margin: 0; }
.v2 .acc-body > .alert-v2 { margin-bottom: 16px; }

/* 2. KARTY OBJEDNÁVEK --------------------------------------------------------- */
.v2 .acc-ord { margin-bottom: 14px; padding: 0; overflow: hidden; }
.v2 .acc-ord-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id badge" "total total"; gap: 8px 12px; align-items: center; padding: 14px 16px; background: var(--c-bg); border-bottom: 1px solid var(--c-border); }
.v2 .acc-ord-id { grid-area: id; min-width: 0; }
.v2 .acc-ord-no { font-size: 15px; color: var(--c-text); }
.v2 .acc-ord-no b { font-family: var(--font-head); font-size: 17px; }
.v2 .acc-ord-head .acc-badge { grid-area: badge; justify-self: end; }
.v2 .acc-ord-total { grid-area: total; display: flex; align-items: baseline; gap: 8px; }
.v2 .acc-ord-total .price { font-size: 18px; }
@media (min-width: 768px) {
    .v2 .acc-ord-head { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "id badge total"; padding: 14px 20px; }
    .v2 .acc-ord-total { flex-direction: column; align-items: flex-end; gap: 0; }
    .v2 .acc-ord-total .price { font-size: 20px; }
}
.v2 .acc-ord .alert-v2 { margin: 12px 16px 0; }
.v2 .acc-items { padding: 4px 16px; }
.v2 .acc-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "img body price" "img act act"; gap: 4px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--c-border); }
.v2 .acc-item:last-child { border-bottom: 0; }
.v2 .acc-item-img { grid-area: img; width: 56px; height: 56px; border: 1px solid var(--c-border); border-radius: var(--radius-s); display: flex; align-items: center; justify-content: center; background: #fff; overflow: hidden; color: var(--c-border-strong); }
.v2 .acc-item-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.v2 .acc-item-body { grid-area: body; min-width: 0; }
.v2 .acc-item-name { font-weight: 600; font-size: 15px; line-height: 1.3; }
.v2 .acc-item-price { grid-area: price; text-align: right; }
.v2 .acc-item-price .price { font-size: 16px; }
.v2 .acc-item-act { grid-area: act; display: flex; justify-content: flex-start; }
.v2 .acc-item-rk { min-height: 32px; font-size: 13px; color: var(--c-info) !important; padding: 0 6px; margin-left: -6px; }
.v2 .acc-item-rk:hover { color: var(--c-brand) !important; }
@media (min-width: 768px) {
    .v2 .acc-items { padding: 4px 20px; }
    .v2 .acc-item { grid-template-columns: 56px minmax(0, 1fr) 120px 130px; grid-template-areas: "img body price act"; }
    .v2 .acc-item-act { justify-content: flex-end; }
    .v2 .acc-item-rk { margin-left: 0; }
}
.v2 .acc-ord-foot { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px 16px; border-top: 1px solid var(--c-border); background: #fff; }
.v2 .acc-ord-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.v2 .acc-ord-meta span { display: inline-flex; align-items: center; gap: 4px; }
.v2 .acc-ord-meta .ico { color: var(--c-muted); }
.v2 .acc-ord-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.v2 .acc-ord-actions .btn-v2 { flex: 1 1 auto; }
@media (min-width: 768px) {
    .v2 .acc-ord-foot { flex-direction: row; align-items: center; justify-content: space-between; padding: 12px 20px 16px; }
    .v2 .acc-ord-actions .btn-v2 { flex: none; }
}

/* 3. ŠTÍTKY STAVŮ (objednávky index 3, reklamace index 26) ---------------------- */
.v2 .acc-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 16px; font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; background: var(--c-bg); border: 1px solid var(--c-border-strong); color: var(--c-text); max-width: 100%; }
.v2 .acc-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; opacity: .85; }
.v2 .acc-badge--ok { background: var(--c-cta-soft); border-color: #bfe3b5; color: var(--c-ok); }
.v2 .acc-badge--wait { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.v2 .acc-badge--pay { background: #eef3ff; border-color: #c7d7fb; color: #1e3a8a; }
.v2 .acc-badge--new { background: #eef3ff; border-color: #c7d7fb; color: #1e3a8a; }
.v2 .acc-badge--cancel { background: var(--c-brand-soft); border-color: #f5c2c4; color: #8a1a1f; }
.v2 .acc-badge--return { background: #f3f4f6; border-color: #d1d5db; color: #374151; }
@media (max-width: 479.98px) { .v2 .acc-badge { white-space: normal; text-align: left; } }

/* 4. TABULKA FAKTUR (na mobilu karty) ------------------------------------------- */
.v2 .acc-table-wrap { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-m); overflow: hidden; }
.v2 .acc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.v2 .acc-table th, .v2 .acc-table td { padding: 12px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--c-border); }
.v2 .acc-table thead th { background: var(--c-bg); font-size: 13px; color: var(--c-muted); font-weight: 600; white-space: nowrap; }
.v2 .acc-table tbody tr:last-child td { border-bottom: 0; }
.v2 .acc-table tbody tr:hover td { background: #fafbfc; }
.v2 .acc-table .r { text-align: right; }
.v2 .acc-table a { color: var(--c-info); }
.v2 .acc-table .btn-v2 { min-height: 34px; }
.v2 .acc-paid { display: inline-flex; align-items: center; gap: 4px; color: var(--c-ok); font-weight: 600; white-space: nowrap; }
@media (max-width: 767.98px) {
    .v2 .acc-table thead { display: none; }
    .v2 .acc-table, .v2 .acc-table tbody, .v2 .acc-table tr, .v2 .acc-table td { display: block; }
    .v2 .acc-table tr { padding: 10px 14px; border-bottom: 1px solid var(--c-border); }
    .v2 .acc-table tr:last-child { border-bottom: 0; }
    .v2 .acc-table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 0; border: 0; text-align: right; }
    .v2 .acc-table td::before { content: attr(data-label); color: var(--c-muted); font-size: 13px; text-align: left; flex: none; }
    .v2 .acc-table td[data-label="PDF"] { padding-top: 10px; }
    .v2 .acc-table td[data-label="PDF"]::before { content: none; }
    .v2 .acc-table td[data-label="PDF"] .btn-v2 { width: 100%; }
    .v2 .acc-table tbody tr:hover td { background: transparent; }
}

/* 5. REKLAMACE – KARTY A ČASOVÁ OSA --------------------------------------------- */
.v2 .acc-rk-card { margin-bottom: 14px; padding: 0; overflow: hidden; }
.v2 .acc-rk-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; padding: 14px 16px; background: var(--c-bg); border-bottom: 1px solid var(--c-border); }
.v2 .acc-rk-no { font-size: 15px; }
.v2 .acc-rk-no b { font-family: var(--font-head); font-size: 17px; }
.v2 .acc-rk-grid { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 16px; }
@media (min-width: 900px) { .v2 .acc-rk-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; padding: 20px; } .v2 .acc-rk-head { padding: 14px 20px; } }
.v2 .acc-dl { display: grid; grid-template-columns: 1fr; gap: 2px 16px; margin: 0; font-size: 14px; }
.v2 .acc-dl dt { color: var(--c-muted); font-size: 13px; margin-top: 8px; }
.v2 .acc-dl dd { margin: 0; }
.v2 .acc-dl dt:first-child { margin-top: 0; }
@media (min-width: 600px) { .v2 .acc-dl { grid-template-columns: 130px minmax(0, 1fr); gap: 8px 16px; } .v2 .acc-dl dt, .v2 .acc-dl dt:first-child { margin-top: 0; padding-top: 1px; } }
.v2 .acc-pre { white-space: pre-line; overflow-wrap: anywhere; }
.v2 .acc-rk-side { display: flex; flex-direction: column; gap: 14px; }
.v2 .acc-rk-days { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--c-bg); border-radius: var(--radius-m); font-size: 14px; }
.v2 .acc-rk-days .ico { flex: none; color: var(--c-info); margin-top: 2px; }
.v2 .acc-timeline { list-style: none; margin: 0; padding: 0 0 0 6px; position: relative; }
.v2 .acc-timeline::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: var(--c-border); }
.v2 .acc-timeline li { position: relative; display: flex; gap: 12px; padding: 0 0 14px; font-size: 14px; }
.v2 .acc-timeline li:last-child { padding-bottom: 0; }
.v2 .acc-tl-dot { position: relative; z-index: 1; flex: none; width: 12px; height: 12px; margin: 5px 0 0 0; border-radius: 50%; background: #fff; border: 2px solid var(--c-border-strong); font-size: 0; }
.v2 .acc-timeline li.is-current .acc-tl-dot { background: var(--c-brand); border-color: var(--c-brand); box-shadow: 0 0 0 4px var(--c-brand-soft); }
.v2 .acc-timeline li.is-current b { color: var(--c-text); }
.v2 .acc-tl-body { min-width: 0; }
.v2 .acc-tl-body b { font-weight: 600; color: var(--c-muted); }
.v2 .acc-timeline li.is-current .acc-tl-body b { color: var(--c-text); }

/* 6. FORMULÁŘ NOVÉ REKLAMACE ---------------------------------------------------- */
.v2 .acc-rk-item { margin-bottom: 14px; padding: 4px 16px; }
.v2 .acc-rk-item .acc-item { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "img body price"; }
.v2 .acc-rkform .bk-card-title { margin-top: 8px; }
.v2 .acc-rkform .bk-card-title:first-child { margin-top: 0; }
.v2 .acc-rkform .fld input.in-v2, .v2 .acc-rkform .fld select.in-v2 { width: 100%; }
.v2 .acc-rkform .fld textarea.in-v2 { width: 100%; height: auto; min-height: 110px; padding: 10px 12px; }
.v2 .acc-files { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@media (min-width: 600px) { .v2 .acc-files { grid-template-columns: 1fr 1fr; } }
.v2 .acc-file { display: block; width: 100%; font-size: 14px; padding: 7px 10px; border: 1px dashed var(--c-border-strong); border-radius: var(--radius-s); background: var(--c-bg); }
.v2 .acc-file:focus { outline: none; border-color: var(--c-info); }
.v2 .fld.is-error .acc-file { border-color: var(--c-brand); }
.v2 .acc-chk { margin: 4px 0 18px; }
.v2 .acc-chk-label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 14px; cursor: pointer; }
.v2 .acc-chk-label input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--c-cta); flex: none; }
.v2 .acc-rkform .bk-nav { margin-top: 8px; }
.v2 .acc-rkform input.btn-v2 { -webkit-appearance: none; appearance: none; }
.v2 .acc-rk-success { text-align: center; padding: 28px 20px; }
.v2 .acc-rk-success h3 { margin: 6px 0 10px; }
.v2 .acc-rk-success p { max-width: 560px; margin: 0 auto 16px; }
.v2 .acc-rk-success .alert-v2 { text-align: left; max-width: 560px; margin: 0 auto 16px; }
.v2 .acc-rk-success-act { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* 7. PROPOJENÍ OBJEDNÁVEK PODLE E-MAILU ------------------------------------------ */
.v2 .acc-link { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ico txt" "act act"; gap: 10px 14px; align-items: center; margin-bottom: 16px; background: #eef3ff; border-color: #c7d7fb; }
.v2 .acc-link-ico { grid-area: ico; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--c-info); display: inline-flex; align-items: center; justify-content: center; }
.v2 .acc-link-txt { grid-area: txt; font-size: 15px; overflow-wrap: anywhere; }
.v2 .acc-link-txt .muted { margin-top: 4px; }
.v2 .acc-link-act { grid-area: act; }
.v2 .acc-link-act input.btn-v2 { width: 100%; -webkit-appearance: none; appearance: none; }
@media (min-width: 768px) {
    .v2 .acc-link { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ico txt act"; }
    .v2 .acc-link-act input.btn-v2 { width: auto; }
}

/* 8. PRÁZDNÉ STAVY --------------------------------------------------------------- */
.v2 .acc-empty { text-align: center; padding: 36px 20px; }
.v2 .acc-empty .ico { color: var(--c-border-strong); margin-bottom: 10px; }
.v2 .acc-empty h3 { margin-bottom: 6px; }
.v2 .acc-empty p { max-width: 480px; margin: 0 auto 16px; }

/* 9. STRÁNKOVÁNÍ (nav.pager-v2 ze dno-v2.css, odkazy ?s=…&p=N#ClientOrderList) ------------ */
.v2 .acc-sec { scroll-margin-top: 80px; }   /* po skoku na kotvu zůstanou nad sekcí vidět záložky účtu (hlavička v praxi nepřekrývá, ověřeno 1280 i 390 px) */
.v2 .acc-pager { margin-top: 24px; }

/* 10. VEŘEJNÝ REKLAMAČNÍ FORMULÁŘ (complaint.aspx: Complaint.htm + ComplaintDone.htm, sdílí .acc-rkform a .acc-rk-success) ------------ */
.v2 .rk-page { max-width: 900px; padding-top: 12px; padding-bottom: 40px; }
.v2 .rk-head { margin-bottom: 10px; }
.v2 .rk-head h1 { margin: 0; font-size: 26px; }
.v2 .rk-intro { max-width: 760px; margin-bottom: 16px; }
.v2 .rk-page > .alert-v2 { margin-bottom: 16px; }
.v2 .rk-done-no { font-size: 17px; margin: 0 0 12px; }
.v2 .rk-done-no b { font-size: 22px; }
