/*
 * 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;
}

/* Account pages that END in the newsletter band: the band brings its own 120px padding-block,
   so the container contributes nothing — and the band's padding is trimmed by the cap offset
   (below) so the comp's rule -> "VISADA…" cap distance lands at exactly 120 (2286:5136). */
.pv-account--flush {
    padding-bottom: 0;
}

/* Solved by measurement: the comp puts 120px between the closing rail and the eyebrow's CAP top,
   and the eyebrow's line box eats the rest. */
.pv-account--flush + .pv-newsletter .pv-newsletter__content {
    padding-top: 114.65px;
}

/* 2286:5136: the crumb row (grape mark top) sits at y104 — 16 under the 88px header; the global
   crumb shell keeps 12 for the hero-band pages, so only the account context overrides it. */
.pv-account .pv-breadcrumbs ol {
    padding-top: 16px;
}

/* 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).
   The crumb shell keeps 24px under its row; 34.5 + that 24 + the title's 6.16px line-box cap
   offset = the comp's 64.5 crumb-row-bottom -> title-cap gap (y120.5 -> y185). */
.pv-account__layout {
    padding-top: 34.5px;
}

/* ---- Shared heading ----------------------------------------------------- */
.pv-account__title {
    margin: 0 0 24px;
    font-size: 24px;
    font-weight: 700;
    font-style: italic;
    /* 2286:5150: 24/30.72, tracking 1.2 */
    line-height: 30.72px;
    letter-spacing: 1.2px;
    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.
   Horizontal geometry lives entirely in the template's <colgroup> (measured x 0/161/306/448/628),
   so cells carry no inline padding of their own. */
.pv-orders th {
    padding: 12px 0;
    text-align: left;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.6px;
    color: var(--juoda);
    border-bottom: 1px solid var(--sub);
}

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

.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 (Figma 2286:5136) --------------------------------------- */
/* The design's "ghost" table: the header labels and both hairline rails stay when there is
   nothing to list — everything in the frame is --sub #e4dedb except the CTA. Column x offsets
   0/161/306/398/(513)/674 measured off Group 5107; the --sub variant slots PRENUMERATA back in
   when subscriptions return (LEGAL-1). */
.pv-orders-ghost {
    display: grid;
    grid-template-columns: 161px 145px 92px 276px auto;
    margin-top: 53px; /* title baseline -> label CAP top = 64 (Ž sits above the cap line) */
    font-size: 12px;
    line-height: 15.36px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--sub);
}

.pv-orders-ghost--sub {
    grid-template-columns: 161px 145px 92px 115px 161px auto;
}

.pv-orders-rule {
    margin: 13px 0 0; /* label ink bottom -> rule = 16 */
    border: 0;
    border-top: 1px solid var(--sub);
}

/* The closing rail: the empty block above it already ends in its own 64px padding. */
.pv-orders-rule--close {
    margin-top: 0;
}

.pv-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* rule stroke centre -> icon 80 (the hr paints its 1px below the comp's centre-aligned
       stroke, so the padding gives back the half-pixel); CTA bottom -> closing rule 64 */
    padding: 79.5px 16px 64px;
    text-align: center;
}

.pv-empty-state__heading {
    /* icon bottom -> CAP top = 32. Measured against a plain cap, not the string's ink top: the
       Ė in "NĖRA" overhangs the cap line and made a 36.5px gap read as 32. */
    margin: 26.5px 0 0;
    font-size: 24px;
    font-weight: 600;
    line-height: 30.72px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    /* 2287:5656: the heading is #e4dedb like the rest of the ghost furniture — decorative by
       design (the CTA below is the actionable element), so the AA miss is accepted, same call
       as breadcrumbs P13. */
    color: var(--sub);
}

.pv-empty-state__cta {
    /* heading ink bottom -> button top = 40 (minus the line box's ~7px descent) */
    margin-top: 33px;
}

/* ---- 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;
    }
}