/*
 * Customer-account pages (PLAN §6.9) — personal info + address book, purchase history, order
 * detail. Figma nodes 2279:4996 / 2286:4847 / 2286:5136 / 2287:6017 / 2287:5657. Reuses the shared
 * field (.pv-field / .input) + auth button (.pv-auth__btn) classes; everything else is account-scoped.
 * All colours come from tokens.css. Info-card box/building + reload/download glyphs are not yet
 * exported (Figma MCP blocked) — neutral placeholders used; see report.
 */

.pv-account {
    padding-bottom: 64px;
}

/* Single full-width column aligned to the container gutter — navigation lives in the header
   profile dropdown (components/_profile_menu.html.twig), not a left sidebar (Figma 2287:6017). */
.pv-account__layout {
    padding-top: 24px;
}

/* ---- Shared heading ----------------------------------------------------- */
.pv-account__title {
    margin: 0 0 24px;
    font-size: 24px;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 1px;
    color: var(--ryski-raudona);
}

/* ---- Personal-information form ------------------------------------------ */
.pv-account__main {
    min-width: 0;
}

.pv-account__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 558px;
}

.pv-account__email {
    display: flex;
    align-items: center;
    height: 46px;
    padding: 0 24px;
    border-radius: 48px;
    background: var(--neutrali-pilka);
    font-size: 14px;
    font-weight: 700;
    color: var(--juoda);
}

.pv-account__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.pv-account__addresses {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pv-account__address {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    border: 0;
}

.pv-account__address-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pv-account__address-title {
    margin: 0;
    padding: 0;
    font-size: 14px;
    /* Figma: regular weight, 0.7px tracking (not bold). */
    font-weight: 400;
    letter-spacing: 0.7px;
    color: var(--juoda);
}

.pv-account__address-del {
    border: 0;
    background: none;
    padding: 0;
    font-size: 13px;
    color: var(--ryski-raudona);
    cursor: pointer;
}

.pv-account__default {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--sub-pilka-shade);
}

.pv-account__default input {
    accent-color: var(--ryski-raudona);
}

.pv-account__add {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: none;
    padding: 0;
    font-size: 14px;
    /* Figma: dark label + a SOLID red disc (not red-outline text). */
    color: var(--juoda);
    cursor: pointer;
}

.pv-account__add-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ryski-raudona);
    color: var(--balta);
    font-size: 14px;
    line-height: 1;
}

.pv-account__divider {
    margin: 4px 0;
    border: 0;
    border-top: 1px dashed var(--sub);
}

/* Invoice toggle switch */
.pv-account__toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600; /* Figma label is semibold */
    color: var(--juoda);
    cursor: pointer;
}

.pv-account__toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Figma 2279:4996: flat 48×16 track with an oblong 24×10 white pill knob (no shadow). */
.pv-account__toggle-track {
    position: relative;
    flex: none;
    width: 48px;
    height: 16px;
    border-radius: 24px;
    background: var(--neutrali-pilka);
    transition: background 0.15s;
}

.pv-account__toggle-knob {
    position: absolute;
    top: 3px;
    left: 2px;
    width: 24px;
    height: 10px;
    border-radius: 24px;
    background: var(--balta);
    transition: transform 0.15s;
}

.pv-account__toggle input:checked + .pv-account__toggle-track {
    background: var(--ryski-raudona);
}

.pv-account__toggle input:checked + .pv-account__toggle-track .pv-account__toggle-knob {
    transform: translateX(20px);
}

.pv-account__company {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pv-account__check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.3;
    color: var(--juoda);
    cursor: pointer;
}

.pv-account__check input {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 8px;
    accent-color: var(--ryski-raudona);
}

.pv-account__submit {
    margin-top: 8px;
}

/* ---- Orders table ------------------------------------------------------- */
.pv-orders {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

/* Figma 2287:6017 / 2390:7736: header labels are dark + regular weight, with the same light rule
   as the row dividers; data cells are semibold; row pitch 92px; content flush to the heading edge. */
.pv-orders th {
    padding: 12px 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: var(--juoda);
    border-bottom: 1px solid var(--sub);
}

.pv-orders td {
    padding: 24px 12px;
    font-weight: 600;
    border-bottom: 1px solid var(--sub);
    vertical-align: middle;
}

.pv-orders th:first-child,
.pv-orders td:first-child {
    padding-left: 0;
}

.pv-orders th:last-child,
.pv-orders td:last-child {
    padding-right: 0;
}

.pv-orders__status.is-cancelled {
    color: var(--ryski-raudona-shade);
}

.pv-orders__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.pv-orders__repeat {
    width: auto;
    height: 44px; /* match the 44px detail-arrow circle beside it (Figma) */
    gap: 8px;
    padding: 0 28px;
    white-space: nowrap;
}

/* Per-row subscription cancel — outline pill default, solid red on hover (Figma 2390:7736). */
.pv-orders__cancel {
    width: auto;
    height: 44px; /* match the 44px detail-arrow circle (Figma) */
    padding: 0 18px;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.pv-orders__cancel:hover {
    background: var(--ryski-raudona);
    border-color: var(--ryski-raudona);
    color: var(--balta);
    opacity: 1;
}

.pv-orders__cancelled {
    font-size: 14px;
    font-weight: 600;
    color: var(--ryski-raudona-shade);
    white-space: nowrap;
}

.pv-orders__detail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--sub);
    border-radius: 50%;
}

/* ---- Pagination --------------------------------------------------------- */
.pv-account-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
}

.pv-account-pagination__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 6px;
    border-radius: 50%;
    font-size: 14px;
    color: var(--juoda);
    text-decoration: none;
}

.pv-account-pagination__page.is-active {
    background: var(--juoda);
    color: var(--balta);
}

.pv-account-pagination__next {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--juoda);
    text-decoration: none;
}

/* ---- Empty state -------------------------------------------------------- */
.pv-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 64px 16px;
    text-align: center;
}

.pv-empty-state__icon {
    opacity: 0.35;
}

.pv-empty-state__heading {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--juoda);
}

.pv-empty-state__cta {
    width: auto;
    padding: 0 32px;
}

/* ---- Order detail ------------------------------------------------------- */
.pv-account__detail {
    display: grid;
    grid-template-columns: minmax(0, 558px) 332px;
    justify-content: space-between;
    gap: 40px;
    align-items: start;
}

.pv-account__detail-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pv-orderbanner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    border-radius: 24px;
    /* #127a52 (not --taskas-online #07c881 = 2.2:1 for white text): AA banner green. */
    background: #127a52;
    color: var(--balta);
}

.pv-orderbanner--cancelled {
    /* --ryski-raudona-band (white text 4.84:1) not raw --ryski-raudona (4.2:1). */
    background: var(--ryski-raudona-band);
}

.pv-orderbanner__id {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pv-orderbanner__nr {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.pv-orderbanner__date {
    margin: 2px 0 0;
    font-size: 12px;
    opacity: 0.9;
}

.pv-orderbanner__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
}

.pv-account__detail-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.pv-account__detail-actions .pv-auth__btn {
    gap: 10px;
}

.pv-account__detail-actions form {
    display: contents;
}

.pv-infocard {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 24px;
    background: var(--neutrali-pilka);
}

.pv-infocard--tall {
    align-items: flex-start;
}

.pv-infocard__icon {
    flex: none;
    margin-top: 2px;
}

.pv-infocard__icon--ph {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--sub);
}

.pv-infocard__body {
    min-width: 0;
}

.pv-infocard__title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--juoda);
    word-break: break-word;
}

.pv-infocard__line {
    margin: 4px 0 0;
    font-size: 12px;
    /* #616161 (not --sub-pilka #969696 = 2.5:1) — AA on the #f0ebe9 infocard. */
    color: #616161;
}

/* ---- Detail summary rail ------------------------------------------------ */
.pv-account__summary {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pv-summary__title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.5px;
    /* --ryski-raudona-shade (not raw --ryski-raudona = 4.2:1 on the white summary rail): AA fix. */
    color: var(--ryski-raudona-shade);
}

.pv-summary__title span {
    /* Figma: the '(N prekės)' count is lowercase + dark (base h2 uppercase must be reset). */
    text-transform: none;
    color: var(--juoda);
    font-style: normal;
    font-weight: 400;
}

.pv-summary__line {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sub);
}

.pv-summary__thumb {
    position: relative;
    flex: none;
}

/* Scoped to .pv-account: unscoped, this rule is imported after checkout.css's own
   .pv-summary__qty and silently overrode it on /uzsakymas, where the scoped
   .pv-checkout .pv-summary__qty only sets top/right and so could not restore the size. */
.pv-account .pv-summary__qty {
    position: absolute;
    top: -6px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--ryski-raudona);
    color: var(--balta);
    font-size: 11px;
    font-weight: 600;
}

.pv-summary__info {
    flex: 1;
    min-width: 0;
}

.pv-summary__name {
    margin: 0;
    /* Figma: regular 14px (not the 15/600 it was inheriting). */
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--juoda);
}

.pv-summary__freq {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--sub-pilka-shade);
}

.pv-summary__price {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.pv-summary__totals {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pv-summary__row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600; /* Figma: all three totals rows are uniformly semibold */
}

.pv-summary__row--grand {
    margin-top: 4px;
    /* Figma has no divider before the grand total (only line-item dividers). */
    font-weight: 600;
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
    .pv-account__detail {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .pv-orders thead {
        display: none;
    }

    .pv-orders tr {
        display: block;
        margin-bottom: 16px;
        border: 1px solid var(--sub);
        border-radius: 16px;
        padding: 8px 12px;
    }

    .pv-orders td {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding: 8px 0;
        border-bottom: 0;
    }

    .pv-orders td::before {
        content: attr(data-label);
        font-size: 12px;
        color: var(--sub-pilka);
    }

    .pv-orders__actions {
        justify-content: space-between;
    }

    .pv-account__detail-actions {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}