/* Easy Paw — кабінет: каркас свій (my-account.php, navigation.php), решта — штатні шаблони WooCommerce, стилізовані за їхніми класами */

/* page.css сюди не автопідвантажується (functions.php:get_page_slug()) — відступ дубльовано */
.page-content { padding-bottom: 60px; }

.page-content__title { margin-bottom: var(--gap-xl); }

/* ── Картка (по аналогії з checkout-card, свій клас — окремий бандл стилів) */
.account-card {
    padding: var(--gap-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
}

/* ── Каркас сторінки ────────────────────────────────────────────────────── */
.account-page__layout {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-xl);
}

.account-page__sidebar {
    flex: 0 0 260px;
    width: 260px;
    position: sticky;
    top: var(--gap-lg);
}

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

/* 680px — таби показують одну колонку за раз, тож ширина під саму форму; рамку знімає лише картка логіну */
.account-page__auth { max-width: 680px; margin: 0 auto; }

.account-page__auth.account-card { border: 0; }

/* ── Навігація (woocommerce/myaccount/navigation.php) ──────────────────── */
.account-nav__list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    list-style: none;
    padding: var(--gap-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
}

.account-nav__link {
    display: block;
    padding: 10px var(--gap-md);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-weight: var(--fw-bold);
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}

.account-nav__link:hover { background: var(--color-bg-alt); color: var(--color-text); }

.account-nav__item.is-active .account-nav__link {
    background: var(--color-accent-light);
    color: var(--color-primary);
}

/* Конкретний пункт стилізуємо за динамічним класом від wc_get_account_menu_item_classes() */
.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: var(--gap-xs); border-top: 1px solid var(--color-border); padding-top: var(--gap-xs); }

/* ── Вітання/опис на дашборді (dashboard.php) ──────────────────────────── */
.woocommerce-MyAccount-content > p { color: var(--color-text-muted); line-height: 1.6; }
.woocommerce-MyAccount-content > p + p { margin-top: var(--gap-md); }
.woocommerce-MyAccount-content a { color: var(--color-primary); font-weight: var(--fw-bold); }
.woocommerce-MyAccount-content a:hover { color: var(--color-accent); }

/* ── Логін / реєстрація (form-login.php, немодифікований) ──────────────── */
/* Таби додає js/pages/account.js:authTabs(); без JS (.has-tabs немає) обидві колонки видимі — прогресивне покращення */
.account-auth-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: var(--gap-lg);
    padding: 4px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-alt);
}

.account-auth-tabs__btn {
    flex: 1 1 0%;
    padding: 10px var(--gap-md);
    border: 0;
    border-radius: var(--radius-pill);
    background: none;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

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

.account-auth-tabs__btn.is-active {
    background: var(--color-primary);
    color: var(--color-white);
}

#customer_login {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xl);
}

#customer_login.has-tabs h2 { display: none; }

#customer_login.has-tabs .u-column1,
#customer_login.has-tabs .u-column2 {
    display: none;
    width: 100%;
}

#customer_login.has-tabs.is-login .u-column1,
#customer_login.has-tabs.is-register .u-column2 {
    display: block;
}

#customer_login .u-column1,
#customer_login .u-column2 {
    flex: 1 1 260px;
    min-width: 0;
}

#customer_login h2 {
    margin-bottom: var(--gap-lg);
    color: var(--color-text);
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
}

.account-page__auth > h2:first-child {
    margin-bottom: var(--gap-lg);
    color: var(--color-text);
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
}

/* ── Поля форм (login/register/edit-account/edit-address — спільні класи) */
.form-row { width: 100%; margin: 0 0 var(--gap-md); }

.form-row label {
    display: block;
    margin-bottom: var(--gap-xs);
    color: var(--color-text);
    font-weight: var(--fw-bold);
}

.form-row label .required { color: var(--color-sale); text-decoration: none; }

.form-row .input-text,
.form-row select,
.form-row textarea {
    width: 100%;
    padding: 12px 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--fs-body);
}

.form-row .input-text:focus,
.form-row select:focus,
.form-row textarea:focus {
    border-color: var(--color-primary);
    outline: none;
}

.form-row.woocommerce-invalid .input-text { border-color: var(--color-sale); }

/* float, не flex — штатна розмітка form-edit-account.php розраховує на float + <div class="clear"> */
.woocommerce-form-row--first,
.woocommerce-form-row--last {
    float: left;
    width: calc(50% - var(--gap-lg) / 2);
}

.woocommerce-form-row--first { margin-right: var(--gap-lg); }

.clear { clear: both; }

.woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    margin: var(--gap-sm) auto;
    font-weight: var(--fw-normal);
    cursor: pointer;
}

/* Центрування всіх елементів, не лише тексту: колонка-flex + вужчий .form-row */
.woocommerce-form-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.woocommerce-form-login .form-row { max-width: 360px; }

/* !important — woocommerce.css стилізує чекбокс напряму */
.woocommerce-form__input-checkbox {
    display: inline-block !important;
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    width: 16px !important;
    height: 16px !important;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.woocommerce-LostPassword { margin-top: var(--gap-sm); font-size: var(--fs-small); }
.woocommerce-LostPassword a { color: var(--color-primary); }

fieldset {
    margin-top: var(--gap-lg);
    padding-top: var(--gap-lg);
    border: 0;
    border-top: 1px solid var(--color-border);
}

fieldset legend {
    margin-bottom: var(--gap-md);
    color: var(--color-text);
    font-weight: var(--fw-bold);
}

/* !important — woocommerce.css стилізує button.button напряму */
.woocommerce-button,
.woocommerce-Button,
.button {
    display: inline-block;
    padding: 12px 28px !important;
    border: 0;
    border-radius: var(--radius-pill) !important;
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    font-family: inherit;
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}

.woocommerce-button:hover,
.woocommerce-Button:hover,
.button:hover {
    background: var(--color-accent) !important;
    transform: translateY(-1px);
}

/* ── Замовлення (orders.php) ────────────────────────────────────────────── */
.woocommerce-orders-table {
    width: 100%;
    border-collapse: collapse;
}

.woocommerce-orders-table__header {
    padding-bottom: var(--gap-sm);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--fs-small);
    font-weight: var(--fw-normal);
    text-align: left;
}

.woocommerce-orders-table__cell {
    padding: var(--gap-md) var(--gap-sm) var(--gap-md) 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    vertical-align: middle;
}

.woocommerce-orders-table__cell-order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
}

.woocommerce-orders-table__cell-order-actions .button {
    padding: 8px 18px !important;
    font-size: var(--fs-small);
}

.woocommerce-pagination { display: flex; gap: var(--gap-sm); margin-top: var(--gap-lg); }

/* ── Деталі замовлення (view-order.php → order/order-details.php) ──────── */
.woocommerce-order-details,
.woocommerce-customer-details {
    margin-top: var(--gap-lg);
    padding: var(--gap-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-alt);
}

.woocommerce-order-details__title,
.woocommerce-column__title {
    margin-bottom: var(--gap-lg);
    color: var(--color-text);
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
}

.woocommerce-table--order-details {
    width: 100%;
    border-collapse: collapse;
}

.woocommerce-table--order-details thead th {
    padding-bottom: var(--gap-sm);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--fs-small);
    font-weight: var(--fw-normal);
    text-align: left;
}

.woocommerce-table--order-details .product-total { text-align: right; }

.woocommerce-table--order-details tbody td,
.woocommerce-table--order-details tbody th {
    padding: var(--gap-md) 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    text-align: left;
    vertical-align: top;
}

.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td {
    padding: var(--gap-sm) 0;
    text-align: left;
    font-weight: var(--fw-normal);
}

.woocommerce-table--order-details tfoot td { text-align: right; }

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
    padding-top: var(--gap-md);
    border-top: 1px dashed var(--color-border);
    color: var(--color-text);
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
}

.woocommerce-columns--addresses {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-lg);
}

.woocommerce-column--billing-address,
.woocommerce-column--shipping-address {
    flex: 1 1 240px;
}

.woocommerce-customer-details address {
    color: var(--color-text-muted);
    font-style: normal;
    line-height: 1.6;
}

/* ── Адреси (my-address.php) ────────────────────────────────────────────── */
.woocommerce-Address {
    margin-top: var(--gap-lg);
    padding: var(--gap-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-alt);
}

.woocommerce-Address-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--gap-sm);
}

.woocommerce-Address-title h2 { color: var(--color-text); font-size: var(--fs-h4); font-weight: var(--fw-bold); }
.woocommerce-Address-title .edit { color: var(--color-primary); font-weight: var(--fw-bold); }

.woocommerce-Address address { color: var(--color-text-muted); font-style: normal; line-height: 1.6; }

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .account-page__layout { flex-direction: column; }

    .account-page__sidebar { position: static; width: 100%; flex: 1 1 auto; }

    .account-nav__list { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 767px) {
    .account-card { padding: var(--gap-md); }

    #customer_login { flex-direction: column; gap: var(--gap-lg); }

    .woocommerce-form-row--first,
    .woocommerce-form-row--last {
        float: none;
        width: 100%;
        margin-right: 0;
    }
}