/* =========================================================
   CASH & CARRY - ACCOUNT PAGE
   ========================================================= */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #f5f7f6;
    color: #17201c;
    font-family: Arial, Helvetica, sans-serif;
}


/* =========================================================
   HEADER
   ========================================================= */

.account-header {
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #e3e8e5;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.account-header-inner {
    max-width: 1400px;
    min-height: 76px;
    margin: auto;
    padding: 0 25px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}


/* Logo */

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

    text-decoration: none;
    color: #111;
}

.account-logo-box {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: #11823b;
    color: #ffffff;

    font-size: 20px;
    font-weight: 800;

    box-shadow: 0 5px 15px rgba(17, 130, 59, 0.22);
}

.account-logo-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.account-logo-text strong {
    color: #11823b;
    font-size: 20px;
}

.account-logo-text span {
    color: #7b827e;
    font-size: 11px;
}


/* Header buttons */

.account-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.account-header-btn,
.account-home-btn {
    min-height: 40px;
    padding: 0 15px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    border-radius: 8px;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    transition: 0.25s ease;
}

.account-header-btn {
    background: #f0f8f3;
    color: #11823b;
    border: 1px solid #d9eade;
}

.account-header-btn:hover {
    background: #11823b;
    color: #ffffff;
}

.account-home-btn {
    background: #11823b;
    color: #ffffff;
}

.account-home-btn:hover {
    background: #0b682f;
    transform: translateY(-1px);
}


/* =========================================================
   MAIN
   ========================================================= */

.account-page {
    min-height: calc(100vh - 76px);
    padding: 30px 20px 60px;
}

.account-container {
    max-width: 1200px;
    margin: auto;
}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.account-breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 24px;

    color: #777f7b;
    font-size: 13px;
}

.account-breadcrumb a {
    color: #11823b;
    text-decoration: none;
    font-weight: 600;
}

.account-breadcrumb a:hover {
    text-decoration: underline;
}

.account-breadcrumb strong {
    color: #303934;
}


/* =========================================================
   HEADING
   ========================================================= */

.account-heading {
    margin-bottom: 28px;
}

.account-heading h1 {
    margin: 0 0 7px;

    color: #17221c;

    font-size: 32px;
    line-height: 1.2;
}

.account-heading p {
    margin: 0;

    color: #747d78;

    font-size: 14px;
}


/* =========================================================
   ACCOUNT LAYOUT
   ========================================================= */

.account-layout {
    display: grid;

    grid-template-columns: 265px minmax(0, 1fr);

    gap: 22px;

    align-items: start;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.account-sidebar {
    background: #ffffff;

    border: 1px solid #e3e9e5;
    border-radius: 14px;

    overflow: hidden;

    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.035);
}


/* Mini profile */

.account-profile-mini {
    padding: 20px;

    display: flex;
    align-items: center;
    gap: 12px;

    border-bottom: 1px solid #edf0ee;

    background: #fbfcfb;
}

.profile-avatar {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    border-radius: 50%;

    background: #11823b;
    color: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;
    font-weight: 800;

    overflow: hidden;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-profile-mini h3 {
    margin: 0 0 4px;

    color: #202a25;

    font-size: 14px;
}

.account-profile-mini p {
    margin: 0;

    color: #818984;

    font-size: 11px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    max-width: 160px;
}


/* Menu */

.account-menu {
    padding: 8px;
}

.account-menu-item,
.account-menu-link {
    width: 100%;
    min-height: 44px;

    padding: 0 13px;

    display: flex;
    align-items: center;
    gap: 11px;

    border: none;
    border-radius: 8px;

    background: transparent;

    color: #59635e;

    text-decoration: none;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition: 0.2s ease;

    text-align: left;
}

.account-menu-item:hover,
.account-menu-link:hover {
    background: #f0f8f3;
    color: #11823b;
}

.account-menu-item.active {
    background: #eaf6ef;
    color: #11823b;
}

.account-menu-item span:first-child,
.account-menu-link span:first-child {
    width: 22px;
    text-align: center;
}

.logout-item {
    margin-top: 8px;

    border-top: 1px solid #edf0ee;
    border-radius: 0 0 8px 8px;

    color: #d64545;
}

.logout-item:hover {
    background: #fff0f0;
    color: #d64545;
}


/* =========================================================
   CONTENT
   ========================================================= */

.account-content {
    min-width: 0;
}

.account-section {
    display: none;

    background: #ffffff;

    border: 1px solid #e3e9e5;
    border-radius: 14px;

    padding: 25px;

    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.035);

    animation: accountFade 0.25s ease;
}

.account-section.active {
    display: block;
}

@keyframes accountFade {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.account-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 25px;

    padding-bottom: 18px;

    border-bottom: 1px solid #edf0ee;
}

.account-section-header h2 {
    margin: 0 0 5px;

    color: #202a25;

    font-size: 20px;
}

.account-section-header p {
    margin: 0;

    color: #7b837f;

    font-size: 13px;
}


/* =========================================================
   PROFILE
   ========================================================= */

.profile-top {
    display: flex;
    align-items: center;

    gap: 16px;

    margin-bottom: 28px;
}

.large-profile-avatar {
    width: 80px;
    height: 80px;

    flex: 0 0 80px;

    border-radius: 50%;

    background: #11823b;
    color: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 28px;
    font-weight: 800;

    overflow: hidden;

    box-shadow: 0 5px 18px rgba(17, 130, 59, 0.18);
}

.large-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-top h3 {
    margin: 0 0 5px;

    font-size: 18px;
    color: #222c27;
}

.profile-top p {
    margin: 0 0 9px;

    color: #808883;

    font-size: 12px;
}

.change-avatar-btn {
    padding: 0;

    border: none;
    background: transparent;

    color: #11823b;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}

.change-avatar-btn:hover {
    text-decoration: underline;
}


/* =========================================================
   FORM
   ========================================================= */

.form-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.form-group {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.form-full {
    grid-column: 1 / -1;
}

.form-group label {
    color: #39433e;

    font-size: 12px;
    font-weight: 700;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;

    border: 1px solid #dce3df;
    border-radius: 8px;

    background: #ffffff;

    color: #28312c;

    outline: none;

    font-family: inherit;
    font-size: 13px;

    transition: 0.2s ease;
}

.form-group input,
.form-group select {
    height: 44px;

    padding: 0 12px;
}

.form-group textarea {
    padding: 12px;

    resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #11823b;

    box-shadow:
        0 0 0 3px rgba(17, 130, 59, 0.08);
}

.field-error {
    min-height: 14px;

    color: #d33c3c;

    font-size: 11px;
}


/* Form actions */

.form-actions {
    margin-top: 25px;

    padding-top: 20px;

    border-top: 1px solid #edf0ee;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 10px;
}

.cancel-profile-btn,
.save-profile-btn {
    min-height: 42px;

    padding: 0 18px;

    border-radius: 8px;

    font-family: inherit;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition: 0.2s ease;
}

.cancel-profile-btn {
    border: 1px solid #d8dfdb;

    background: #ffffff;

    color: #5f6863;
}

.cancel-profile-btn:hover {
    background: #f5f7f6;
}

.save-profile-btn {
    border: 1px solid #11823b;

    background: #11823b;

    color: #ffffff;
}

.save-profile-btn:hover {
    background: #0c682f;

    transform: translateY(-1px);
}


/* Message */

.profile-message {
    display: none;

    margin-top: 18px;

    padding: 11px 13px;

    border-radius: 8px;

    font-size: 12px;
}

.profile-message.success {
    display: block;

    background: #eaf7ef;
    border: 1px solid #ccebd7;

    color: #11823b;
}

.profile-message.error {
    display: block;

    background: #fff0f0;
    border: 1px solid #f3cccc;

    color: #c43636;
}


/* =========================================================
   ORDERS INFO
   ========================================================= */

.account-info-card {
    padding: 20px;

    display: flex;
    align-items: center;

    gap: 16px;

    border: 1px solid #e1e9e4;
    border-radius: 11px;

    background: #f8fbf9;
}

.info-card-icon {
    width: 54px;
    height: 54px;

    flex: 0 0 54px;

    border-radius: 12px;

    background: #eaf6ef;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 24px;
}

.account-info-card h3 {
    margin: 0 0 6px;

    color: #26312b;

    font-size: 15px;
}

.account-info-card p {
    margin: 0;

    color: #78827c;

    font-size: 12px;

    line-height: 1.6;
}

.view-all-btn {
    min-height: 38px;

    padding: 0 13px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;

    background: #f0f8f3;
    border: 1px solid #d9eade;

    color: #11823b;

    text-decoration: none;

    font-size: 12px;
    font-weight: 700;
}

.view-all-btn:hover {
    background: #11823b;
    color: #ffffff;
}


/* =========================================================
   ADDRESSES
   ========================================================= */

.add-address-btn {
    min-height: 39px;

    padding: 0 14px;

    border: 1px solid #11823b;
    border-radius: 8px;

    background: #11823b;
    color: #ffffff;

    font-family: inherit;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}

.add-address-btn:hover {
    background: #0c682f;
}


/* Address card */

.address-card {
    padding: 18px;

    margin-bottom: 13px;

    border: 1px solid #e0e7e3;
    border-radius: 11px;

    background: #ffffff;
}

.address-card.default-address {
    border-color: #bcdcc9;
    background: #fbfefc;
}

.address-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 12px;
}

.address-type {
    color: #27322d;

    font-size: 13px;
    font-weight: 800;
}

.default-badge {
    padding: 5px 9px;

    border-radius: 15px;

    background: #eaf6ef;
    color: #11823b;

    font-size: 10px;
    font-weight: 700;
}

.address-card h3 {
    margin: 0 0 7px;

    color: #303934;

    font-size: 14px;
}

.address-card p {
    margin: 4px 0;

    color: #717a75;

    font-size: 12px;

    line-height: 1.5;
}

.address-actions {
    display: flex;
    gap: 8px;

    margin-top: 13px;
}

.address-actions button {
    border: none;

    background: transparent;

    color: #11823b;

    font-family: inherit;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}

.address-actions button:hover {
    text-decoration: underline;
}

.address-actions button:last-child {
    color: #d14343;
}


/* Add address form */

.add-address-form {
    display: none;

    margin-top: 20px;

    padding: 20px;

    border: 1px dashed #bdd4c5;
    border-radius: 11px;

    background: #fbfdfc;
}

.add-address-form.show {
    display: block;
}

.add-address-form h3 {
    margin: 0 0 18px;

    color: #26312b;

    font-size: 16px;
}

.address-form-actions {
    margin-top: 20px;

    display: flex;
    justify-content: flex-end;

    gap: 9px;
}

.cancel-address-btn,
.save-address-btn {
    min-height: 40px;

    padding: 0 16px;

    border-radius: 8px;

    font-family: inherit;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}

.cancel-address-btn {
    border: 1px solid #d7dfda;

    background: #ffffff;

    color: #59625d;
}

.save-address-btn {
    border: 1px solid #11823b;

    background: #11823b;

    color: #ffffff;
}

.save-address-btn:hover {
    background: #0c682f;
}


/* =========================================================
   SECURITY
   ========================================================= */

.security-card {
    padding: 18px;

    margin-bottom: 22px;

    display: flex;
    align-items: center;

    gap: 14px;

    border-radius: 11px;

    background: #f7fbf8;

    border: 1px solid #e0eae4;
}

.security-icon {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: #eaf6ef;

    font-size: 22px;
}

.security-card h3 {
    margin: 0 0 5px;

    color: #28322d;

    font-size: 15px;
}

.security-card p {
    margin: 0;

    color: #7a837e;

    font-size: 12px;

    line-height: 1.5;
}


/* =========================================================
   PREFERENCES
   ========================================================= */

.preference-list {
    display: flex;
    flex-direction: column;

    border: 1px solid #e3e9e5;

    border-radius: 11px;

    overflow: hidden;
}

.preference-item {
    min-height: 78px;

    padding: 16px 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    border-bottom: 1px solid #edf0ee;
}

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

.preference-item h3 {
    margin: 0 0 5px;

    color: #2b352f;

    font-size: 14px;
}

.preference-item p {
    margin: 0;

    color: #7c8580;

    font-size: 11px;

    line-height: 1.5;
}


/* Toggle */

.switch {
    width: 45px;
    height: 24px;

    flex: 0 0 45px;

    position: relative;

    display: inline-block;
}

.switch input {
    width: 0;
    height: 0;

    opacity: 0;
}

.slider {
    position: absolute;

    inset: 0;

    cursor: pointer;

    border-radius: 20px;

    background: #cfd7d2;

    transition: 0.25s ease;
}

.slider::before {
    content: "";

    width: 18px;
    height: 18px;

    position: absolute;

    left: 3px;
    top: 3px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);

    transition: 0.25s ease;
}

.switch input:checked + .slider {
    background: #11823b;
}

.switch input:checked + .slider::before {
    transform: translateX(21px);
}


/* =========================================================
   FOOTER
   ========================================================= */

.account-footer {
    background: #15231b;

    color: #ffffff;
}

.account-footer-inner {
    max-width: 1200px;

    margin: auto;

    padding: 35px 20px;

    display: flex;
    justify-content: space-between;

    gap: 30px;
}

.account-footer-inner strong {
    font-size: 19px;
}

.account-footer-inner p {
    margin: 7px 0 0;

    color: #b8c2bc;

    font-size: 12px;
}

.footer-links {
    display: flex;
    align-items: center;

    gap: 20px;

    flex-wrap: wrap;
}

.footer-links a {
    color: #dce5df;

    text-decoration: none;

    font-size: 12px;
}

.footer-links a:hover {
    color: #6ed495;
}

.footer-bottom {
    padding: 16px 20px;

    border-top: 1px solid rgba(255,255,255,0.1);

    text-align: center;

    color: #aeb8b2;

    font-size: 11px;
}


/* =========================================================
   RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 900px) {

    .account-layout {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 15px;
    }

    .account-section {
        padding: 20px;
    }

    .account-profile-mini {
        padding: 15px;
    }

    .account-menu-item,
    .account-menu-link {
        padding: 0 9px;
        font-size: 12px;
    }

}


/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .account-header-inner {
        min-height: 68px;
        padding: 0 14px;
    }

    .account-logo-box {
        width: 40px;
        height: 40px;

        font-size: 16px;
    }

    .account-logo-text strong {
        font-size: 16px;
    }

    .account-logo-text span {
        display: none;
    }

    .account-header-actions {
        gap: 5px;
    }

    .account-header-btn,
    .account-home-btn {
        min-height: 36px;
        padding: 0 9px;

        font-size: 11px;
    }

    .account-header-btn:first-child {
        display: none;
    }


    .account-page {
        padding: 20px 12px 40px;
    }

    .account-heading h1 {
        font-size: 26px;
    }


    .account-layout {
        display: block;
    }


    /* Sidebar becomes horizontal menu */

    .account-sidebar {
        margin-bottom: 15px;
    }

    .account-profile-mini {
        padding: 13px 15px;
    }

    .account-menu {
        display: flex;

        overflow-x: auto;

        padding: 7px;

        scrollbar-width: none;
    }

    .account-menu::-webkit-scrollbar {
        display: none;
    }

    .account-menu-item,
    .account-menu-link {
        width: auto;

        min-width: max-content;

        min-height: 38px;

        padding: 0 11px;

        white-space: nowrap;
    }

    .logout-item {
        margin-top: 0;

        border-top: none;
    }


    .account-section {
        padding: 17px;

        border-radius: 11px;
    }

    .account-section-header {
        align-items: flex-start;

        flex-direction: column;
    }


    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-full {
        grid-column: auto;
    }


    .profile-top {
        margin-bottom: 20px;
    }

    .large-profile-avatar {
        width: 65px;
        height: 65px;

        flex-basis: 65px;

        font-size: 23px;
    }


    .form-actions {
        justify-content: stretch;
    }

    .cancel-profile-btn,
    .save-profile-btn {
        flex: 1;
    }


    .view-all-btn,
    .add-address-btn {
        width: 100%;
    }


    .account-info-card {
        align-items: flex-start;
    }


    .address-form-actions {
        justify-content: stretch;
    }

    .cancel-address-btn,
    .save-address-btn {
        flex: 1;
    }


    .preference-item {
        padding: 15px;
    }

    .preference-item h3 {
        font-size: 13px;
    }

    .preference-item p {
        font-size: 10px;
    }


    .account-footer-inner {
        padding: 28px 15px;

        flex-direction: column;
    }

    .footer-links {
        gap: 14px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .account-logo-text {
        display: none;
    }

    .account-home-btn {
        padding: 0 8px;
    }

    .account-page {
        padding-left: 9px;
        padding-right: 9px;
    }

    .account-heading h1 {
        font-size: 23px;
    }

    .account-section {
        padding: 14px;
    }

    .account-menu-item,
    .account-menu-link {
        padding: 0 9px;

        font-size: 11px;
    }

    .account-menu-item span:first-child,
    .account-menu-link span:first-child {
        width: auto;
    }

    .security-card {
        align-items: flex-start;

        padding: 14px;
    }

}