/* ================== ROOT ================== */

:root {
    --tg-bg: #121a22;
    --tg-card: #22303c;
    --tg-blue: #3390ec;
    --tg-green: #31b545;
    --tg-border: #3e5262;
    --tg-soft: #b2bcc4;
}


/* ================== BASE ================== */

* {
    box-sizing: border-box;
}

body {
    background:
        radial-gradient(circle at top left, rgba(51, 144, 236, 0.12), transparent 34%),
        linear-gradient(180deg, #121a22 0%, #17232d 100%);
    color: white;
    font-family: sans-serif;
    margin: 0;
    padding: 10px;
}


/* ================== INPUT / SELECT ================== */

input,
select {
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}

.input-field {
    width: 100%;
    background: var(--tg-card);
    border: 1px solid #455a64;
    color: white;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 14px;
    height: 44px;
    display: flex;
    align-items: center;
}

select.input-field {
    padding-right: 35px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
}


/* ================== GRID ================== */

#favorites-grid {
    padding-bottom: 20px;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-bottom: 100px;
}


/* ================== SORT ================== */

.sort-container {
    margin-bottom: 15px;
    padding: 0 10px;
}

.sort-wrapper {
    position: relative;
}

#sort-select {
    width: 100%;
    background: var(--tg-card);
    border: 1px solid #455a64;
    color: white;
    padding: 10px 35px 10px 10px;
    border-radius: 8px;
    font-size: 14px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* Убираем вторую стрелку */
.custom-select::after {
    display: none;
}

.sort-icon {
    display: none;
}


/* ================== CARD ================== */

.card {
    background: linear-gradient(180deg, #273744 0%, #202d38 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
    animation: cardIn 0.22s ease both;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.card:active {
    transform: scale(0.98);
    border-color: rgba(51, 144, 236, 0.45);
}


/* ================== IMAGE ================== */

.img-wrap {
    background: #0d1319;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 121px;
    overflow: hidden;
}

.img-wrap img {
    max-width: 98%;
    max-height: 98%;
    object-fit: contain;
    transition: transform 0.22s ease;
}

.card:active .img-wrap img {
    transform: scale(1.03);
}

.image-placeholder {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    border: 1px solid rgba(96, 145, 185, 0.35);
    background: linear-gradient(145deg, rgba(51, 144, 236, 0.16), rgba(44, 195, 120, 0.12));
    color: rgba(230, 241, 250, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.detail-image-wrap .image-placeholder {
    width: 116px;
    height: 116px;
    border-radius: 22px;
    font-size: 18px;
}


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

.info {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.name {
    font-size: 0.85em;
    color: #b2bcc4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.stock {
    font-size: 12px;
    font-weight: bold;
}

.stock.in {
    color: #31b545;
}

.stock.out {
    color: #ff5252;
}

.price {
    font-weight: bold;
    font-size: 1.1em;
}

.flavor-count {
    color: #b2bcc4;
    font-size: 12px;
}

.buy-btn {
    margin-top: 6px;
}


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

.buy-btn {
    width: 100%;
    background: linear-gradient(135deg, #3390ec, #2577c7);
    color: white;
    border: none;
    padding: 8px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
}

.buy-btn:active {
    transform: scale(0.95);
    transition: transform 0.1s;
}

.main-btn {
    width: 100%;
    background: linear-gradient(135deg, #31b545, #28a53b);
    color: white;
    border: none;
    padding: 14px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
}

.cancel-btn {
    background: linear-gradient(135deg, #ff4d4f, #d9363e);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.cancel-btn:hover {
    opacity: 0.9;
}

.cancel-btn:active {
    transform: scale(0.95);
}


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

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 14px 14px;
    background: rgba(18, 26, 34, 0.9);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    z-index: 10;
}

#cart-footer,
#fav-cart-footer {
    min-height: 52px;
    box-shadow: 0 10px 24px rgba(49, 181, 69, 0.28);
}

#fav-cart-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background: var(--tg-bg);
    border-top: 1px solid var(--tg-card);
    z-index: 1000;
}


/* ================== MODAL ================== */

.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--tg-bg);
    z-index: 100;
    overflow-y: auto;
}

.modal-content {
    padding: 20px 20px 120px;
}

.modal-header {
    font-size: 20px;
    font-weight: bold;
    color: var(--tg-blue);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.back-btn {
    background: none;
    border: none;
    color: #b2bcc4;
    font-size: 24px;
    cursor: pointer;
}

#image-modal {
    display: none;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
}

.skeleton-card {
    min-height: 230px;
    background: linear-gradient(90deg, #22303c 0%, #2d3d4b 45%, #22303c 100%);
    background-size: 220% 100%;
    border-radius: 12px;
    animation: skeletonMove 1.15s ease-in-out infinite;
}

.empty-state {
    grid-column: 1 / -1;
    min-height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    color: var(--tg-soft);
    background: rgba(34, 48, 60, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 20px;
}

.empty-state-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(51, 144, 236, 0.14);
    color: var(--tg-blue);
    font-size: 24px;
}

@keyframes skeletonMove {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ================== LABEL ================== */

.label {
    font-size: 12px;
    color: #b2bcc4;
    margin-bottom: 5px;
    display: block;
}

.checkout-error {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid #ff6b6b;
    border-radius: 8px;
    background: rgba(255, 107, 107, 0.12);
    color: #ffd6d6;
    font-size: 13px;
    line-height: 1.35;
}


/* ================== INPUT GROUP ================== */

.input-group {
    margin-bottom: 15px;
    position: relative;
}


/* ================== CATEGORIES ================== */

.categories {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 0;
    margin-bottom: 10px;
    scrollbar-width: none;
}

.categories::-webkit-scrollbar {
    display: none;
}

.cat-btn {
    background: var(--tg-card);
    color: white;
    border: 1px solid #455a64;
    padding: 8px 15px;
    border-radius: 8px;
    white-space: nowrap;
    cursor: pointer;
    font-size: 14px;
    transition: 0.2s;
}

.cat-btn.active {
    border-color: var(--tg-blue);
    color: var(--tg-blue);
}


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

.profile-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    background: var(--tg-card);
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 10px;
    cursor: pointer;
}

.profile-menu-item:active {
    background: #344656;
}

.profile-link-item {
    color: white;
    text-decoration: none;
}

.profile-language {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--tg-card);
    padding: 12px 15px;
    border: 1px solid #455a64;
    border-radius: 8px;
    margin-bottom: 10px;
}

.language-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    min-width: 126px;
}

.language-toggle button {
    border: 1px solid #455a64;
    border-radius: 8px;
    background: #18232c;
    color: #b2bcc4;
    padding: 8px 10px;
    font-weight: bold;
    cursor: pointer;
}

.language-toggle button.active {
    border-color: var(--tg-blue);
    background: var(--tg-blue);
    color: white;
}

.manager-btn-wrapper {
    margin-top: 20px;
    padding: 0 10px;
}

.manager-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #248bcf;
    text-decoration: none;
    padding: 12px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 15px;
    width: 100%;
    color: white;
}

.privacy-consent {
    margin-top: 10px;
    color: #b2bcc4;
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
}

.privacy-consent a {
    color: var(--tg-blue);
    font-weight: bold;
    text-decoration: none;
}

.faq-list {
    display: grid;
    gap: 10px;
}

.faq-item {
    background: var(--tg-card);
    border: 1px solid #455a64;
    border-radius: 8px;
    padding: 12px;
}

.faq-item b {
    display: block;
    margin-bottom: 6px;
}

.faq-item p {
    color: #b2bcc4;
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
}

.age-modal {
    z-index: 12000;
}

.age-content {
    max-width: 420px;
    margin: 70px auto 0;
    text-align: center;
}

.age-content p {
    color: #b2bcc4;
    line-height: 1.45;
}

.age-exit-btn,
.repeat-order-btn {
    width: 100%;
    border: 1px solid #455a64;
    border-radius: 8px;
    background: transparent;
    color: #b2bcc4;
    padding: 11px;
    font-weight: bold;
    margin-top: 8px;
}

.repeat-order-btn {
    color: white;
    border-color: var(--tg-blue);
}


/* ================== FAVORITES ================== */

.fav-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.8);
    color: #888;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    z-index: 2;
    transition: 0.2s;
}

.fav-btn.active {
    color: #ff5252;
    background: white;
}


/* ================== PRODUCT DETAIL ================== */

.product-group-card {
    cursor: pointer;
}

.product-detail {
    position: relative;
}

.detail-fav {
    top: 22px;
    right: 22px;
}

.detail-image-wrap {
    background: #0f151b;
    border: 1px solid #455a64;
    border-radius: 10px;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.detail-image-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.detail-info {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.detail-info .name {
    display: block;
    -webkit-line-clamp: unset;
    color: white;
    font-size: 16px;
    text-align: left;
}

.flavor-section {
    margin-top: 20px;
}

.flavor-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.flavor-btn {
    background: transparent;
    color: #b2bcc4;
    border: 1px solid #455a64;
    border-radius: 8px;
    min-height: 38px;
    padding: 8px 10px;
    font-size: 13px;
    cursor: pointer;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.flavor-btn.active {
    background: var(--tg-blue);
    border-color: var(--tg-blue);
    color: white;
}

.flavor-btn[data-empty="true"] {
    opacity: 0.45;
}

.detail-buy {
    margin-top: 20px;
    min-height: 46px;
}


/* ================== QTY ================== */

.qty-ctrl {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #455a64;
    border-radius: 8px;
    padding: 5px;
}

.qty-btn {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    font-weight: bold;
    width: 25px;
    cursor: pointer;
}

.qty-btn:active {
    color: var(--tg-blue);
}


/* ================== CART ================== */

.cart-item {
    font-size: 14px;
    display: flex;
    align-items: center;
    background: var(--tg-card);
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.cart-item img {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 5px;
    object-fit: contain;
}

.cart-thumb-wrap {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-image-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    font-size: 9px;
}


/* ================== REMOVE ================== */

.remove-icon {
    color: #888;
    cursor: pointer;
    font-size: 18px;
    margin-left: 10px;
}

.remove-icon:hover {
    color: #ff5252;
}


/* ================== FLY ANIMATION ================== */

.fly-image {
    position: fixed;
    z-index: 9999;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    pointer-events: none;
    transition: all 0.7s ease-in-out;
}


/* ================== PRICE ROW ================== */

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}


/* ================== STOCK BADGE ================== */

.stock-badge {
    font-size: 11px;
    padding: 4px 7px;
    border-radius: 8px;
    font-weight: 600;
    white-space: nowrap;
}

.stock-badge.in {
    background: rgba(49, 181, 69, 0.15);
    color: #31b545;
}

.stock-badge.out {
    background: none;
    color: #ff5252;
}


/* ================== STATUS BADGE ================== */

.status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
}

.status-pending {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}

.status-confirmed {
    background: rgba(33, 150, 243, 0.15);
    color: #2196f3;
}

.status-completed {
    background: rgba(49, 181, 69, 0.15);
    color: #31b545;
}

.status-shipped {
    background: rgba(36, 139, 207, 0.18);
    color: #6bbcff;
}

.status-rejected {
    background: rgba(255, 82, 82, 0.15);
    color: #ff5252;
}


/* ================== COMMENT ================== */

.comment-field {
    width: 100%;
    max-width: 100%;
    background: var(--tg-card);
    border: 1px solid #455a64;
    color: white;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    min-height: 80px;
    resize: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}

.comment-field:focus,
.comment-field:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

input, textarea {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
    pointer-events: auto !important;
}