.account-page {
    padding-block: 30px 80px;
}

.account-page__title {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 700;
    line-height: 32px;
    color: var(--color-text);
    margin: 0 0 30px;
}

.account {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}

.account__sidebar {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Нотиси WC (збереження профілю тощо) ─────────────────────────────────── */
.account-page .woocommerce-message,
.account-page .woocommerce-info,
.account-page .woocommerce-error {
    list-style: none;
    margin: 0 0 20px;
    padding: 14px 20px;
    border: 1px solid var(--color-border);
    border-left: 3px solid #5eb166;
    border-radius: var(--radius);
    background: #fff;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text);
}

.account-page .woocommerce-error {
    border-left-color: var(--color-accent);
}

.account-page .woocommerce-info {
    border-left-color: #009de0;
}

.account-page .woocommerce-message a,
.account-page .woocommerce-info a,
.account-page .woocommerce-error a {
    color: #009de0;
}

.account__content {
    flex: 1 1 auto;
    min-width: 0;
}

.woocommerce-MyAccount-content a:not(.button) {
    color: #009de0;
    transition: color var(--transition);
}

.woocommerce-MyAccount-content a:not(.button):hover {
    color: var(--color-accent);
}

/* ── Картка профілю ────────────────────────────────────────────────────────── */
.account-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
    padding: 20px;
}

.account-card__top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.account-card__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-bg-alt);
}

.account-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-card__avatar .account-avatar__placeholder {
    width: 24px;
    height: 24px;
}

.account-card__phone {
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text);
}

.account-card__stats {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 20px;
}

.account-card__stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.account-card__stat-value {
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
}

.account-card__stat-label {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-muted);
}

/* ── Меню кабінету ─────────────────────────────────────────────────────────── */
.account-nav {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
    padding: 10px;
}

.account-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.account-nav li {
    margin: 0;
}

.account-nav a {
    display: block;
    padding: 11px 14px;
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-size: 15px;
    color: var(--color-text);
    text-decoration: none;
    transition: var(--transition);
}

.account-nav a:hover {
    background: var(--color-bg-alt);
}

.account-nav .current-menu-item > a,
.account-nav .current_page_item > a,
.account-nav .account-nav__link--current {
    background: var(--color-bg-alt);
    font-weight: 500;
}

/* ── Контент: налаштування профілю ─────────────────────────────────────────── */
.account-profile {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Аватар ─────────────────────────────────────────────────────────────────── */
.account-avatar {
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
    padding: 20px;
}

.account-avatar__photo-group {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1 1 50%;
}

.account-avatar__img {
    position: relative;
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
}

.account-avatar__photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-bg-alt);
}

.account-avatar__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-avatar__placeholder {
    width: 40px;
    height: 40px;
    color: var(--color-muted);
}

.account-avatar__panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.account-avatar__edit,
.account-phone__edit {
    border: none;
    background: none;
    padding: 0;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    color: #009de0;
    cursor: pointer;
    transition: var(--transition);
}

.account-avatar__edit {
    align-self: flex-start;
}

.account-avatar__edit:hover,
.account-phone__edit:hover {
    color: var(--color-accent);
}

.account-avatar__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.account-avatar__actions[hidden] {
    display: none;
}

.account-avatar__upload,
.account-avatar__save,
.account-phone__save,
.account-section__save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 20px;
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid var(--color-accent);
    background: var(--color-accent);
    color: #fff;
}

.account-avatar__upload:hover,
.account-avatar__save:hover,
.account-phone__save:hover,
.account-section__save:hover {
    opacity: 0.9;
}

.account-avatar__save[hidden] {
    display: none;
}

.account-avatar__delete {
    position: absolute;
    top: -4px;
    right: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: #fff;
    color: var(--color-text);
    cursor: pointer;
    transition: var(--transition);
}

.account-avatar__delete svg {
    width: 12px;
    height: 12px;
}

.account-avatar__delete:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.account-avatar__delete[hidden] {
    display: none;
}

.account-avatar__hint {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-muted);
    margin: 0;
}

.account-avatar__message {
    font-family: var(--font-body);
    font-size: 13px;
    margin: 0;
    color: var(--color-text);
}

.account-avatar__message--error {
    color: var(--color-accent);
}

.account-avatar__message--success {
    color: #5eb166;
}

/* ── Телефон (в секції аватара) ────────────────────────────────────────────── */
.account-phone {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 50%;
    padding-left: 20px;
    border-left: 1px solid var(--color-border);
}

.account-phone__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.account-phone__view {
    display: flex;
    align-items: center;
}

.account-phone__view[hidden] {
    display: none;
}

.account-phone__form {
    display: flex;
    align-items: center;
    gap: 12px;
}

.account-phone__form[hidden] {
    display: none;
}

.account-phone__input {
    flex: 1 1 auto;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--color-text);
    transition: var(--transition);
}

.account-phone__input:focus {
    border-color: var(--color-accent);
    outline: none;
}

.account-phone__message {
    font-family: var(--font-body);
    font-size: 13px;
    margin: 0;
    color: var(--color-text);
}

.account-phone__message--error {
    color: var(--color-accent);
}

.account-phone__message--success {
    color: #5eb166;
}

/* ── Секція даних ──────────────────────────────────────────────────────────── */
.account-section {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
    padding: 20px;
}

.account-section__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.account-section__title {
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    color: var(--color-text);
    margin: 0;
}

.account-section__edit {
    border: none;
    background: none;
    padding: 0;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    color: #009de0;
    cursor: pointer;
    transition: var(--transition);
}

.account-section__edit:hover {
    color: var(--color-accent);
}

.account-section__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.account-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.account-field__label {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-muted);
}

.account-field__required {
    color: var(--color-accent);
}

.account-field__value {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--color-text);
}

.account-field__input {
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--color-text);
    transition: var(--transition);
}

.account-field__input:focus {
    border-color: var(--color-accent);
    outline: none;
}

.account-field__input-wrap {
    position: relative;
}

.account-field__input-wrap .account-field__input {
    width: 100%;
    padding-right: 44px;
}

.account-field__eye {
    position: absolute;
    right: 12px;
    top: 20px; /* половина висоти .account-field__input (40px) — фіксовано, бо
                  WC password-strength-meter.js вставляє .woocommerce-password-strength
                  всередину .account-field__input-wrap і "top: 50%" з'їжджав би вниз */
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--color-muted);
    display: flex;
    align-items: center;
    transition: color var(--transition);
}

.account-field__eye:hover {
    color: var(--color-text);
}

.account-field__eye svg:last-child {
    display: none;
}

.account-field__eye.is-active svg:first-child {
    display: none;
}

.account-field__eye.is-active svg:last-child {
    display: block;
}

.account-section__grid[hidden] {
    display: none;
}

.account-section__form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.account-section__form[hidden] {
    display: none;
}

.account-section__fieldset {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border: none;
    padding: 0;
    margin: 0;
}

.account-section__legend {
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text);
    padding: 0;
}

.account-section__hint {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-muted);
    margin: 0;
}

.account-section__message {
    font-family: var(--font-body);
    font-size: 13px;
    margin: 0;
    color: var(--color-text);
}

.account-section__message--error {
    color: var(--color-accent);
}

.account-section__message--success {
    color: #5eb166;
}

.account-section__save {
    align-self: flex-start;
}

/* ── Статус замовлення ─────────────────────────────────────────────────────── */
.order-status-badge {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-muted);
}

.order-status-badge--completed {
    color: #5eb166;
}

.order-status-badge--processing {
    color: #009de0;
}

.order-status-badge--cancelled,
.order-status-badge--failed,
.order-status-badge--refunded {
    color: var(--color-accent);
}

/* ── Кнопки дій (оплатити/скасувати/пагінація) ────────────────────────────── */
.account-order__action,
.account__content .woocommerce-pagination a,
.account__content .woocommerce-Button.wc-forward,
.account-order-body .order-actions-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    transition: var(--transition);
}

.account-order__action:hover,
.account__content .woocommerce-pagination a:hover,
.account__content .woocommerce-Button.wc-forward:hover,
.account-order-body .order-actions-button:hover {
    border-color: var(--color-text);
}

.account-order__action--pay,
.account-order-body .order-actions-button.pay {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: #fff;
}

.account-order__action--pay:hover,
.account-order-body .order-actions-button.pay:hover {
    opacity: 0.9;
    border-color: var(--color-accent);
}

/* ── Історія замовлень: список карток ─────────────────────────────────────── */
.account-orders {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.account-order {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
    padding: 20px;
    transition: var(--transition);
}

.account-order:hover {
    border-color: var(--color-text);
}

.account-order__row {
    display: flex;
    align-items: center;
    gap: 20px;
    text-decoration: none;
}

.account-order__row > * {
    flex: 1 1 0;
    min-width: 0;
}

.account-order__thumb,
.account-order__arrow {
    flex: 0 0 auto;
}

.account-order__thumb {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-bg-alt);
}

.account-order__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-order__number {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
}

.account-order__date,
.account-order__items {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-muted);
}

.account-order__total {
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    text-align: right;
}

.account-order__arrow {
    width: 20px;
    height: 20px;
    color: var(--color-muted);
    transform: rotate(-90deg);
    transition: var(--transition);
}

.account-order:hover .account-order__arrow {
    color: var(--color-text);
}

.account-order__actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--color-border);
}

/* ── Деталі замовлення: заголовок ──────────────────────────────────────────── */
.account-order-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
    padding: 20px;
    margin-bottom: 20px;
}

.account-order-header__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.account-order-header__number {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.account-order-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text);
}

.account-order-header__meta-label {
    color: var(--color-muted);
}

/* ── Деталі замовлення: історія статусів ──────────────────────────────────── */
.account-order-notes {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
    padding: 20px;
    margin-bottom: 20px;
}

.account-order-notes__title {
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    color: var(--color-text);
    margin: 0 0 16px;
}

.account-order-notes__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.account-order-notes__item {
    display: flex;
    gap: 10px;
}

.account-order-notes__bar {
    flex: 0 0 auto;
    width: 5px;
    align-self: stretch;
    border-radius: 50px;
    background: #5eb166;
}

.account-order-notes__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.account-order-notes__text p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text);
}

.account-order-notes__date {
    margin: 0;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--color-muted);
}

/* ── Деталі замовлення: товари, підсумки, адреси ──────────────────────────── */
.account-order-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.woocommerce-order-details,
.woocommerce-customer-details {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
    padding: 20px;
}

.woocommerce-order-details__title,
.woocommerce-customer-details .woocommerce-column__title {
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    color: var(--color-text);
    margin: 0 0 16px;
}

.woocommerce-table--order-details {
    width: 100%;
    border: none;
    margin: 0;
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
    border-top: 1px solid var(--color-border);
    padding: 12px 0;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text);
}

.woocommerce-table--order-details thead th {
    border-top: none;
    padding-top: 0;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-muted);
}

.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td {
    font-weight: 500;
}

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 700;
    border-top: 1px solid var(--color-border);
}

.woocommerce-table--order-details .product-quantity {
    font-weight: 400;
    color: var(--color-muted);
}

.woocommerce-columns--2.woocommerce-columns--addresses {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.woocommerce-columns--2.woocommerce-columns--addresses::before,
.woocommerce-columns--2.woocommerce-columns--addresses::after {
    content: none;
    display: none;
}

.woocommerce-columns--2.woocommerce-columns--addresses .col-1,
.woocommerce-columns--2.woocommerce-columns--addresses .col-2 {
    float: none;
    width: 100%;
}

.woocommerce-customer-details address {
    font-style: normal;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text);
}

.woocommerce .woocommerce-customer-details address {
    border: none;
    border-bottom-width: 0;
    border-right-width: 0;
    border-radius: 0;
    padding: 0;
}

.woocommerce-customer-details--phone,
.woocommerce-customer-details--email {
    margin: 4px 0 0;
}

/* ── Адаптація ─────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .account {
        flex-direction: column;
    }

    .account__sidebar {
        flex: 1 1 auto;
        width: 100%;
    }

    .account__content {
        width: 100%;
    }

    .woocommerce-account .woocommerce-MyAccount-content {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .account-page {
        padding-block: 20px 60px;
    }

    .account-page__title {
        font-size: 22px;
        line-height: 1.3;
        margin-bottom: 20px;
    }

    .account-section__grid {
        grid-template-columns: 1fr;
    }

    .account-section__form,
    .account-section__fieldset {
        gap: 14px;
    }

    .account-section__save {
        align-self: stretch;
    }

    .account-avatar {
        flex-direction: column;
        align-items: flex-start;
    }

    .account-avatar__photo-group {
        width: 100%;
    }

    .account-avatar__panel {
        width: 100%;
    }

    .account-avatar__actions {
        flex-wrap: wrap;
        width: 100%;
    }

    .account-avatar__upload,
    .account-avatar__save {
        flex: 1;
    }

    .account-phone {
        width: 100%;
        padding-left: 0;
        padding-top: 20px;
        border-left: none;
        border-top: 1px solid var(--color-border);
    }

    .account-phone__form {
        flex-wrap: wrap;
    }

    .account-phone__input {
        flex: 1 1 100%;
    }

    .account-phone__save {
        flex: 1;
    }

    .account-order {
        padding: 15px;
    }

    .account-order__row {
        flex-wrap: wrap;
        gap: 10px 15px;
    }

    .account-order__row > * {
        flex: 1 1 120px;
    }

    .account-order__total {
        text-align: left;
    }

    .account-order__arrow {
        display: none;
    }

    .account-order-header__top {
        flex-wrap: wrap;
        gap: 10px;
    }

    .woocommerce-columns--2.woocommerce-columns--addresses {
        grid-template-columns: 1fr;
    }
}

/* TMEK BONUS — My Account "Bonus history" page (BEM) */

.bonus-history__balance {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 20px 24px;
	background: linear-gradient(135deg, #1d2b4f 0%, #2c4170 100%);
	color: #fff;
	border-radius: 12px;
	margin-bottom: 20px;
}

.bonus-history__balance-label {
	font-size: 14px;
	opacity: .8;
	flex: 1 1 100%;
	order: -1;
	margin-bottom: 4px;
}

.bonus-history__balance-value {
	font-size: 44px;
	font-weight: 800;
	line-height: 1;
}

.bonus-history__balance-unit {
	font-size: 16px;
	opacity: .8;
}

.bonus-history__tier {
	margin-bottom: 24px;
}

.bonus-history__tier-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 8px;
}

.bonus-history__tier-name {
	font-size: 18px;
}

.bonus-history__tier-rate {
	color: #666;
	font-size: 14px;
}

.bonus-history__progress {
	height: 10px;
	background: #e7e9ef;
	border-radius: 6px;
	overflow: hidden;
}

.bonus-history__progress-bar {
	height: 100%;
	background: linear-gradient(90deg, #f0a500, #ffce4f);
	border-radius: 6px;
	transition: width .4s ease;
}

.bonus-history__progress-text {
	margin: 8px 0 0;
	font-size: 13px;
	color: #555;
}

.bonus-history__table {
	width: 100%;
}

.bonus-history__amount.is-positive {
	color: #1d7c34;
	font-weight: 600;
}

.bonus-history__amount.is-negative {
	color: #b32d2e;
	font-weight: 600;
}

.bonus-history__pagination {
	margin-top: 16px;
}

/* TMEK BONUS — shortcode accordion cards (Figma design) */

.bonus-history__intro {
	font-size: 14px;
	line-height: 20px;
	color: #111;
	margin-bottom: 20px;
}

.bonus-history__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* ── Картка (згорнута) ──────────────────────────────────── */

.bonus-history__card.accordion {
	background: #fff;
	border: 1px solid #eaeaea;
	border-radius: 5px;
	overflow: hidden;
}

.bonus-history__card .accordion__button {
	display: flex;
	align-items: center;
	gap: 50px;
	width: 100%;
	padding: 20px;
	background: transparent;
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	line-height: 20px;
	color: #111;
	text-align: left;
	box-sizing: border-box;
}

.bonus-history__card-info {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	gap: 15px;
	align-items: center;
}

.bonus-history__card-title {
	flex: 1 1 0;
	min-width: 0;
	color: #111;
	font-weight: 400;
}

.bonus-history__card-date {
	flex: 1 1 0;
	min-width: 0;
	color: #909090;
}

.bonus-history__card-net {
	flex: 1 1 0;
	min-width: 0;
	font-weight: 600;
	color: #909090;
	text-align: right;
}

.bonus-history__card .accordion__icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	transition: transform 0.3s;
}

.bonus-history__card.active .accordion__icon {
	transform: scaleY(-1);
}

.bonus-history__card .accordion__content {
	transition: height 0.3s ease;
}

/* ── Картка (розгорнута — деталі) ───────────────────────── */

.bonus-history__details {
	padding: 0 20px 20px;
}

.bonus-history__details-inner {
	border-right: 1px solid #eaeaea;
	padding-right: 20px;
}

.bonus-history__detail-row {
	display: flex;
	gap: 10px;
	align-items: baseline;
	font-size: 14px;
	line-height: 20px;
}

.bonus-history__detail-row + .bonus-history__detail-row {
	margin-top: 10px;
}

.bonus-history__detail-label {
	flex: 1 1 0;
	min-width: 0;
	color: #909090;
}

.bonus-history__detail-value {
	flex-shrink: 0;
	color: #111;
	white-space: nowrap;
	text-align: right;
}

.bonus-history__detail-value--green {
	color: #5eb166;
}

.bonus-history__order-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 20px;
	font-size: 14px;
	line-height: 20px;
	color: #009de0;
	text-decoration: none;
}

.bonus-history__order-link:hover {
	text-decoration: underline;
}

.bonus-history__order-link-arrow {
	font-size: 16px;
	line-height: 1;
}

/* ── Адаптація ──────────────────────────────────────────── */

@media (max-width: 767px) {
	.bonus-history__card .accordion__button {
		gap: 15px;
		padding: 15px;
	}

	.bonus-history__card-date,
	.bonus-history__card-net {
		display: none;
	}

	.bonus-history__details {
		padding: 0 15px 15px;
	}

	.bonus-history__details-inner {
		border-right: none;
		padding-right: 0;
	}
}