/* ============================================================
   Ο ΛΟΓΑΡΙΑΣΜΟΣ ΜΟΥ  (My Account)
   ============================================================ */

/* The [hidden] attribute must win over flex/grid display rules */
.account [hidden] {
    display: none !important;
}

.account {
    padding-top: 56px;
    padding-bottom: 120px;
}

/* ---- Head: title + subtitle + tabs ---- */
.account__head {
    text-align: center;
    margin-bottom: 64px;
}

.account__title {
    margin: 0 0 40px;
    color: var(--color-black);
    font-family: var(--font-primary);
    font-size: 50px;
    font-weight: var(--font-weight-extralight);
    letter-spacing: 1.5px;
    line-height: 1;
    text-transform: uppercase;
}

.account__subtitle {
    margin: 0 0 32px;
    color: var(--color-black);
    font-family: var(--font-primary);
    font-size: 24px;
    font-weight: var(--font-weight-extralight);
    letter-spacing: 0.72px;
    text-transform: uppercase;
}

.account__tabs {
    display: inline-flex;
    gap: 12px;
}

.account__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 350px;
    max-width: 44vw;
    height: 48px;
    border: 1px solid var(--color-gray-100);
    color: var(--color-black);
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.account__tab.is-active,
.account__tab:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* ============================================================
   DETAILS TAB
   ============================================================ */
.account__details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 105px;
    align-items: start;
}

.account-details__heading,
.account-password__heading {
    margin: 0 0 32px;
    color: var(--color-black);
    font-family: var(--font-primary);
    font-size: 22px;
    font-weight: var(--font-weight-extralight);
    letter-spacing: 0.66px;
    text-transform: uppercase;
}

.account-details__form,
.account-password__view,
.account-password__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Field */
.account-field {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--color-off-white);
}

.account-field input {
    width: 100%;
    height: 48px;
    padding: 0 24px;
    border: none;
    background: transparent;
    color: var(--color-black);
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: var(--font-weight-extralight);
    letter-spacing: 0.48px;
    outline: none;
}

.account-field input::placeholder {
    color: var(--color-gray-300);
}

.account-field input:not([readonly]):focus {
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

/* pencil edit button inside a field */
.account-field__edit {
    position: absolute;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

/* address + postcode row */
.account-field-row {
    display: flex;
    gap: 8px;
}

.account-field--wide {
    flex: 1;
}

.account-field--narrow {
    width: 150px;
    flex-shrink: 0;
}

/* field with a red arrow action (current password) */
.account-field--with-action {
    padding-right: 0;
}

.account-field--with-action input {
    padding-right: 60px;
}

.account-field__go {
    position: absolute;
    right: 0;
    top: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    border: none;
    cursor: pointer;
}

/* Buttons */
.btn-account-save,
.btn-account-change {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 28px;
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-account-change {
    margin-top: 4px;
    align-self: flex-start;
}

.btn-account-save:hover,
.btn-account-change:hover {
    background: var(--color-primary-light);
}

.btn-account-cancel {
    background: none;
    border: none;
    color: var(--color-black);
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-color: var(--color-primary);
    text-underline-offset: 3px;
    cursor: pointer;
}

.account-details__actions,
.account-password__actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 6px;
}

.account-password__feedback {
    margin: 8px 0 0;
    font-family: var(--font-primary);
    font-size: 14px;
}

.account-password__feedback.is-error { color: var(--color-primary); }
.account-password__feedback.is-success { color: #2e7d32; }

/* ============================================================
   ORDERS TAB
   ============================================================ */
.account__orders {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 64px;
}

.account-orders__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-gray-100);
    color: var(--color-black);
    font-family: var(--font-primary);
    font-size: 22px;
    font-weight: var(--font-weight-extralight);
    letter-spacing: 0.66px;
    text-transform: uppercase;
}

.account-orders__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.account-orders__col:not(.is-open) .account-orders__toggle svg {
    transform: rotate(180deg);
}

.account-orders__col:not(.is-open) .account-orders__body {
    display: none;
}

.account-orders__empty {
    color: var(--color-gray-500);
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: var(--font-weight-light);
}

/* Order card */
.account-order {
    position: relative;
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.account-order__image {
    flex: 0 0 161px;
    width: 161px;
    height: 158px;
    background: var(--color-off-white);
    overflow: hidden;
}

.account-order__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
    display: block;
}

.account-order__info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 2px;
}

.account-order__title {
    margin: 0;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: var(--font-weight-regular);
    letter-spacing: 0.48px;
    line-height: 1.1;
}

.account-order__title a {
    color: inherit;
    text-decoration: none;
}

.account-order__title a:hover { color: var(--color-primary); }

.account-order__qty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 28px;
    border: 1px solid var(--color-gray-100);
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: var(--font-weight-extralight);
    color: var(--color-black);
}

.account-order__price {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.account-order__old {
    color: var(--color-primary);
    font-weight: var(--font-weight-extralight);
    font-size: 13px;
    text-decoration: line-through;
}

.account-order__new {
    color: var(--color-black);
    font-weight: var(--font-weight-regular);
    font-size: 13px;
}

.account-order__dimension {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-black);
    font-weight: var(--font-weight-extralight);
    font-size: 13px;
}

.account-order__dimension-icon svg {
    width: 32px;
    height: 15px;
    display: block;
}

.account-order__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    align-self: stretch;
    gap: 16px;
    flex-shrink: 0;
}

.account-order__edit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.account-order__status {
    color: var(--color-gray-700);
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: var(--font-weight-extralight);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    .account {
        padding-top: 32px;
        padding-bottom: 50px;
    }

    .account__head {
        margin-bottom: 40px;
    }

    .account__title {
        font-size: clamp(28px, 8vw, 40px);
        letter-spacing: 1px;
    }

    .account__subtitle {
        font-size: clamp(18px, 5vw, 22px);
        margin-bottom: 24px;
    }

    /* Two tabs share the row width (Figma mobile) */
    .account__tabs {
        display: flex;
        width: 100%;
        gap: 8px;
    }

    .account__tab {
        width: auto;
        max-width: none;
        flex: 1 1 0;
        min-width: 0;
        height: clamp(40px, 11vw, 48px);
        font-size: clamp(11px, 3.2vw, 14px);
        letter-spacing: 1px;
        padding: 0 8px;
    }

    /* Stack the two columns */
    .account__details,
    .account__orders {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    /* Order card fits the narrow column: image + info side by side,
       the pencil/status meta wraps to a full-width row below. */
    .account-order {
        flex-wrap: wrap;
        gap: 8px 16px;
    }

    .account-order__image {
        flex: 0 0 120px;
        width: 120px;
        height: 118px;
    }

    .account-order__info {
        flex: 1 1 0;
        gap: 8px;
    }

    .account-order__meta {
        flex: 1 0 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        align-self: auto;
        gap: 12px;
        margin-top: 0;
    }

    .account-order__status {
        white-space: nowrap;
        font-size: 11px;
        letter-spacing: 0.8px;
    }
}