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


.profile-page {

    padding:
        max(
            16px,
            var(--tg-content-safe-area-inset-top, 0px)
        )
        16px;

    padding-bottom: calc(
        90px +
        var(
            --tg-content-safe-area-inset-bottom,
            env(safe-area-inset-bottom, 0px)
        )
    );

}



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


.profile-header {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 20px;

}



.profile-avatar {

    width: 64px;

    height: 64px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 26px;

    font-weight: bold;

}



.profile-user-info h1 {

    margin: 0;

    font-size: 22px;

}



.profile-username {

    margin-top: 5px;

    opacity: 0.7;

    font-size: 14px;

}



/* =========================================================
   STATISTICS
   ========================================================= */


.profile-stats {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

    margin-bottom: 20px;

}



.profile-stat {

    padding: 16px;

    border-radius: 14px;

    text-align: center;

}



.profile-stat-value {

    font-size: 20px;

    font-weight: 700;

}



.profile-stat-label {

    margin-top: 5px;

    font-size: 13px;

    opacity: 0.7;

}



/* =========================================================
   SECTIONS
   ========================================================= */


.profile-section {

    margin-bottom: 20px;

}



.profile-section h2 {

    font-size: 18px;

    margin-bottom: 12px;

}



/* =========================================================
   REFERRAL
   ========================================================= */


.referral-box {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.referral-link {

    padding: 12px;

    border-radius: 10px;

    overflow-wrap: anywhere;

    font-size: 14px;

}



.profile-secondary-text {

    margin-top: 10px;

    font-size: 14px;

    opacity: 0.7;

}



/* =========================================================
   BUTTONS
   ========================================================= */


.profile-actions {

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.profile-button {

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 48px;

    border-radius: 12px;

    text-decoration: none;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

}



.profile-button.primary {

    width: 100%;

}



.profile-button.secondary {

    border: none;

}



.profile-button.admin {

    width: 100%;

}



/* =========================================================
   ACTIVE ORDERS HORIZONTAL SCROLL
   ========================================================= */


.active-orders-scroll {
    display: flex;
    flex-direction: row;

    gap: 12px;

    overflow-x: auto;
    overflow-y: hidden;

    width: 100%;

    padding-bottom: 8px;

    scroll-snap-type: x mandatory;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
}

.active-orders-scroll::-webkit-scrollbar {
    display: none;
}

.active-orders-scroll .product-card {
    flex: 0 0 180px;

    width: 180px;
    min-width: 180px;

    scroll-snap-align: start;
}


.active-orders-scroll::-webkit-scrollbar {

    display: none;

}



.active-order-card {

    flex:

    0 0 auto;

    width: 260px;

    border-radius: 14px;

    padding: 14px;

}



.active-order-title {

    font-size: 16px;

    font-weight: 700;

    margin-bottom: 8px;

}



.active-order-status {

    font-size: 14px;

    margin-bottom: 8px;

}



.active-order-total {

    font-size: 17px;

    font-weight: 700;

}



/* =========================================================
   BOTTOM NAVIGATION
   ========================================================= */


.bottom-navigation {

    position: fixed;

    bottom: var(
        --tg-content-safe-area-inset-bottom,
        env(safe-area-inset-bottom, 0px)
    );

    left: 0;

    right: 0;

    height: 70px;

    display: flex;

    justify-content: space-around;

    align-items: center;

}



.bottom-nav-button {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    font-size: 12px;

}



.bottom-nav-icon {

    font-size: 22px;

    line-height: 22px;

}



.bottom-nav-text {

    margin-top: 3px;

}

.profile-price-old {
    text-decoration: line-through;
    opacity: 0.55;
    margin-right: 8px;
}

.profile-price-new {
    font-weight: 600;
}


.product-order-status {
    margin: 4px 0 0;
    font-size: 13px;
    opacity: 0.7;
}

/* =========================================================
   БОРДОВОЕ ОФОРМЛЕНИЕ ПРОФИЛЯ
   ========================================================= */

:root {
    --profile-accent: #72383D;
    --profile-text: #322D29;
}

/* Заголовок «Активные заказы» */
.active-orders-section h2 {
    color: var(--profile-accent) !important;
}

/* Кнопки «Telegram-канал» и «Мои заказы» */
.profile-button.primary {
    background: #72383D !important;
    color:  #FFFFFF !important;
    border: 1px solid #72383D !important;
    border-radius: 10px;
    box-sizing: border-box;
}

/* Эффект нажатия */
.profile-button.primary:active {
    background: #C9C9C9 !important;
}

/* Профиль — кнопка «Скопировать ссылку» */
@media (max-width: 699px) {
    .profile-page #copy-referral-button {
        color: #72383D !important;
    }
}