/**
 * Account Page Styles
 */

/* Account Container */
.account {
    /* Container styles if needed */
}

/* Section Title */
.account__section-title {
    font-family: "Maax Bold";
    font-weight: 400;
    font-size: 1.75rem;
    line-height: 1.2;
    margin: 0 0 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-black);
}

.account__section-title + .account__row {
    margin-top: 0;
}

.account__row + .account__section-title,
.account__row--boxed + .account__section-title,
.accordion + .account__section-title,
.account__row + .account__section-heading,
.account__row--boxed + .account__section-heading,
.accordion + .account__section-heading {
    margin-top: 3rem;
}

/* Account Row */
.account__row {
    margin-bottom: 1.5rem;
}

.account__row--boxed {
    border: 1px solid var(--color-gray-mid);
    border-radius: 6px;
    padding: 12px;
    background: var(--color-gray-light);
}

.account__row--boxed + .account__row--boxed {
    margin-top: 1rem;
}

/* Account Label & Value */
.account__label {
    font-family: "Maax Medium";
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.account__value {
    /* Value container styles */
}

/* Email View/Edit Sections */
.account__email-view {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.account__email-display.is-placeholder {
    color: var(--color-text-2);
}

.account__email-edit {
    /* Edit form styles */
}

.account__field-label {
    display: block;
    margin: 0 0 0.35rem;
    font-family: "Maax Medium";
    font-weight: 400;
    font-size: 0.9375rem;
    color: var(--color-text);
}

.account__email-edit .input {
    margin-bottom: 0.5rem;
}

.account__email-help {
    margin: 0 0 0.75rem;
    color: var(--color-text-2);
    font-size: 0.9375rem;
}

/* Password Edit Section */
.account__password-edit {
    /* Password form styles */
}

.account__password-edit .input {
    margin-bottom: 0.5rem;
}

/* Newsletter */
.account__newsletter-status {
    margin: 0 0 1rem;
    font-family: "Maax Medium";
    font-weight: 400;
    color: var(--color-text);
}

.account__newsletter-email {
    width: 100%;
    margin-bottom: 0.5rem;
}

.account__newsletter-hint {
    margin: 0 0 1rem;
    color: var(--color-text-2);
    font-size: 0.9375rem;
}

/* Custom Checkbox (BEM) */
.account__checkbox {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.5rem 0;
    user-select: none;
}

.account__checkbox-input {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-black);
    border-radius: 3px;
    background: var(--color-white);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.account__checkbox-input:checked {
    background: var(--color-black);
    border-color: var(--color-black);
}

.account__checkbox-input:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 11px;
    border: solid var(--color-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.account__checkbox-input:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
}

.account__checkbox-input:disabled {
    cursor: not-allowed;
}

.account__checkbox-label {
    font-family: "Maax Medium";
    font-weight: 400;
    font-size: 15px;
    color: var(--color-text);
}

.account__checkbox-mark {
    display: none;
}

/* Form Messages
   Shared feedback styling now lives in css/base/utilities.css. */

/* Account Actions */
.account__actions {
    margin-top: 1rem;
}

.account__actions .button {
    background: var(--color-black);
    color: var(--color-white);
}

.account__actions .button:hover {
    background: var(--color-gray-dark);
}

/* Account Buttons (specific action buttons) */
.account__email-edit-btn,
.account__email-save-btn,
.account__password-update-btn {
    background: var(--color-black);
    color: var(--color-white);
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

.account__email-edit-btn:hover,
.account__email-save-btn:hover,
.account__password-update-btn:hover {
    background: var(--color-gray-dark);
}

.account__email-edit-btn:focus-visible,
.account__email-save-btn:focus-visible,
.account__password-update-btn:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
}

.account__email-cancel-btn {
    background: transparent;
    color: var(--color-black);
    padding: 0;
    border: none;
    text-decoration: underline;
    box-shadow: none;
    cursor: pointer;
}

.account__email-cancel-btn:hover {
    text-decoration: underline;
    background: transparent;
}

/* Logged-Out Auth Wall */
.account__auth-wall-title {
    font-family: "Maax Bold";
    font-weight: 400;
    font-size: 1.75rem;
    line-height: 1.2;
    margin: 0 0 0.75rem;
}

.account__auth-wall-copy {
    margin: 0 0 1.25rem;
    color: var(--color-text-2);
}

.account__auth-wall-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Order History Grid */
#order-history-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Order History Item */
.order-history-item {
    border-bottom: 1px solid var(--color-line-3);
    padding: 16px 0 16px 12px;
    background: var(--color-background);
    transition: background-color 0.2s ease;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.order-history-item:last-child {
    border-bottom: none;
}

.order-history-item__date {
    font-family: "Maax Medium";
    font-weight: 400;
    font-size: 14px;
    color: var(--color-text-2);
    flex-shrink: 0;
    width: 120px;
}

.order-history-item__summary {
    font-size: 16px;
    color: var(--color-text);
    line-height: 1.4;
    flex: 1;
    min-width: 0;
}

.order-history-item__amount {
    font-family: "Maax Bold";
    font-weight: 400;
    font-size: 16px;
    color: var(--color-text);
    flex-shrink: 0;
}

.order-history-item__link {
    display: inline-block;
    font-family: "Maax Medium";
    font-weight: 400;
    font-size: 14px;
    color: var(--color-text);
    text-decoration: none;
    border: 1px solid var(--color-line);
    padding: 8px 16px;
    border-radius: 4px;
    transition: all 0.2s ease;
    text-align: center;
}

.order-history-item__link:hover {
    background: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
}

/* Loading, Empty, and Error States */
#order-history-loading,
#order-history-empty,
#order-history-error {
    padding: 40px 20px;
    text-align: center;
    color: var(--color-text-2);
}

#order-history-empty p:first-child,
#order-history-error p:first-child {
    font-family: "Maax Medium";
    font-weight: 400;
    color: var(--color-text);
    margin-bottom: 8px;
}

#order-history-error {
    color: var(--color-red);
}

/* Responsive Design */
@media (max-width: 640px) {
    .order-history-item {
        flex-wrap: wrap;
        gap: 8px 16px;
        padding: 14px 0;
    }

    .order-history-item__date {
        width: auto;
    }

    .order-history-item__summary {
        flex-basis: 100%;
        order: 3;
    }
}