/* Telegram Mini App Cart - Fixed Design */

/* Reset and base container */
.page {
    background: var(--popover-bg-color);
    padding: 0;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

body {
    overflow-x: hidden; /* Prevent horizontal scroll on body */
}

/* Single-column layout with NO top padding */
#cart-content {
    display: flex;
    flex-direction: column;
    margin: 0 !important; /* Remove all margins to make lines go edge-to-edge */
    padding: 0 !important; /* Remove all padding too */
}

/* Remove all horizontal margins to make lines go edge to edge */
#delivery-status,
#order-summary,
#delivery-section {
    margin: 0 0 16px 0; /* REMOVED horizontal margins - lines now go edge to edge */
}

/* Product summary - fully dynamic sizing with NO margins or padding that cause spreading */
#cart-items {
    /* Remove ANY horizontal margins to make borders edge-to-edge */
    margin: 0 !important;
    padding: 0 !important;
}

/* Empty cart message styling */
.empty-message {
    text-align: center;
    padding: 60px 20px;
    color: var(--secondary-text-color);
    font-size: 16px;
    font-weight: 500;
    margin: 0; /* Reset margin for empty message */
}

/* FORCE override any margin on cart items - strongest selector */
body #cart-items .cart-item-container,
.page #cart-items .cart-item-container,
#cart-content #cart-items .cart-item-container {
    display: flex !important;
    align-items: center !important;
    padding: 12px 16px !important; /* Add horizontal padding to content, not container */
    border-bottom: 1px solid var(--divider-color) !important;
    margin: 0 !important; /* ABSOLUTELY NO margin */
    flex-wrap: nowrap !important;
    /* Force override any inherited styles */
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#cart-items .cart-item-container:last-child {
    border-bottom: none;
}

#cart-items .cart-item-image {
    width: 48px !important; /* Override index.css 56px */
    height: 48px !important; /* Override index.css 56px */
    border-radius: 8px !important; /* Override index.css 16px */
    margin-right: 12px;
}

#cart-items .cart-item-info-container {
    flex: 1;
    min-width: 0;
    padding: 0 !important; /* Override index.css padding */
}

#cart-items .cart-item-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 2px 0 !important; /* Override index.css margin */
}

#cart-items .cart-item-cost {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-color);
    margin: 2px 0 0 0 !important; /* Override index.css margin */
}

#cart-items .cart-item-quantity-container {
    display: flex;
    align-items: center;
    gap: 8px;
    height: auto !important; /* Override index.css height: 56px */
}

#cart-items .cart-item-quantity {
    min-width: 28px;
    height: 28px;
    padding: 8px 16px;
    text-align: center;
    font-weight: 500;
    font-size: 16px !important; /* Override index.css 13px */
    color: var(--text-color);
    background-color: var(--popover-bg-color) !important; /* Override index.css accent color */
    border-radius: 16px !important; /* Override index.css 14px */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important; /* Override index.css margin */
    line-height: normal !important; /* Override index.css line-height */
}

/* Telegram-native buttons */
.icon-button {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    background: var(--accent-color);
    color: var(--on-accent-color);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.icon-button:active {
    background: var(--accent-color-hover);
}

/* Promo section - COMPLETELY transparent background */
#promo-section {
    margin: 0 16px 16px 16px; /* Keep horizontal margin for content */
    background: transparent !important; /* Force transparent */
}

.promo-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: transparent !important; /* Force transparent */
}

.promo-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 4px;
}

#promo-section .promo-input-container {
    display: flex;
    gap: 8px;
    background: transparent !important; /* Force transparent */
}

/* FORCE transparent background for promo input - strongest selector */
body #promo-section .promo-input-container .promo-input,
.page #promo-section .promo-input-container .promo-input,
#promo-section .promo-input-container .promo-input,
body #promo-section .promo-input-container input,
.page #promo-section .promo-input-container input,
#promo-section .promo-input-container input {
    flex: 1 !important;
    padding: 12px 16px !important;
    background: transparent !important; /* ABSOLUTELY transparent */
    border: 1px solid var(--divider-color) !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    color: var(--text-color) !important;
    outline: none !important;
}

#promo-section .promo-input-container .promo-input:focus,
#promo-section .promo-input-container input:focus {
    border-color: var(--accent-color) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.promo-apply-btn {
    padding: 12px 20px;
    background: var(--accent-color);
    color: var(--on-accent-color);
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

/* Order summary without background - remove horizontal margins to make lines edge-to-edge */
.order-summary-info {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
    gap: 8px;
    /* Remove horizontal padding to make lines edge-to-edge like other sections */
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    color: var(--text-color);
    padding: 8px 16px; /* Add horizontal padding to content only, not container */
}

.summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    padding: 12px 16px 8px 16px; /* Add horizontal padding to content only, not container */
    /* Remove border-top line above "Итого" */
    border-top: none !important;
    margin-top: 8px;
    /* Make border edge-to-edge */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Improved delivery status - add horizontal padding for content */
#delivery-status {
    padding: 12px 16px !important; /* Add horizontal padding for content */
    background: var(--popover-bg-color);
    border-radius: 12px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#delivery-status.free {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
}

#delivery-status .delivery-cost {
    font-weight: 600;
    color: var(--accent-color);
}

#delivery-status.free .delivery-cost {
    color: white;
}

/* Delivery options - native Telegram style with light border frame */
.delivery-section {
    margin-bottom: 20px;
}

/* Hide delivery label AND section title - more specific selectors */
.delivery-label,
label.delivery-label,
.delivery-section .delivery-label,
.delivery-container .delivery-label,
#delivery-section .delivery-label,
#delivery-section label.delivery-label,
h3:contains("Выберите способ доставки"),
.delivery-text {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.delivery-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.delivery-btn {
    background: var(--popover-bg-color);
    border: 2px solid var(--divider-color);
    border-radius: 12px;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    display: block;
    width: 100%;
}

/* Компактный стиль для кнопок */
.delivery-btn.compact {
    padding: 12px 16px;
}

.delivery-btn.compact .delivery-btn-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.delivery-btn.compact .delivery-btn-icon {
    font-size: 18px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.delivery-btn.compact .delivery-btn-info {
    flex: 1;
    min-width: 0;
}

.delivery-btn.compact .delivery-btn-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.delivery-btn.compact .delivery-btn-price {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-color);
    flex-shrink: 0;
}

/* Стрелочка раскрытия */
.delivery-expand-icon {
    font-size: 12px;
    color: var(--secondary-text-color);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: 8px;
}

.delivery-btn.active .delivery-expand-icon {
    transform: rotate(180deg);
}

.delivery-btn:hover {
    border-color: var(--accent-color);
    background: var(--ripple-color);
}

.delivery-btn.active {
    border-color: var(--accent-color);
    background: var(--ripple-color);
}

/* Форма доставки с анимацией */
.delivery-form {
    overflow: hidden;
    transition: all 0.3s ease;
    max-height: 0;
    opacity: 0;
}

.delivery-form.show {
    max-height: 1000px;
    opacity: 1;
    margin-top: 12px;
}

/* Компактное содержимое формы */
.delivery-form-content.compact {
    padding: 16px;
    background: var(--popover-bg-color);
    border: 1px solid var(--divider-color);
    border-radius: 8px;
}

.delivery-details {
    margin-bottom: 12px;
}

.detail-text {
    font-size: 13px;
    color: var(--text-color);
    margin: 0 0 4px 0;
    line-height: 1.4;
}

.note-text {
    font-size: 11px;
    color: var(--secondary-text-color);
    line-height: 1.3;
    display: block;
    margin-top: 8px;
}

/* Компактные поля формы */
.form-fields.compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-fields.compact input,
.form-fields.compact select,
.form-fields.compact textarea {
    padding: 10px 12px;
    border: 1px solid var(--divider-color);
    border-radius: 6px;
    font-size: 13px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--popover-bg-color);
    color: var(--text-color);
    transition: border-color 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

.form-fields.compact input:focus,
.form-fields.compact select:focus,
.form-fields.compact textarea:focus {
    outline: none;
    border-color: var(--accent-color);
}

.form-fields.compact select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' 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 8px center;
    background-size: 14px;
    padding-right: 32px;
}

.form-fields.compact textarea {
    resize: vertical;
    min-height: 40px;
    font-family: inherit;
}

/* Темная тема для компактных элементов */
:root.dark .delivery-btn.compact {
    background: var(--popover-bg-color);
    border-color: var(--divider-color);
}

:root.dark .delivery-btn.compact .delivery-btn-title {
    color: var(--text-color);
}

:root.dark .delivery-form-content.compact {
    background: var(--popover-bg-color);
    border-color: var(--divider-color);
}

:root.dark .form-fields.compact input,
:root.dark .form-fields.compact select,
:root.dark .form-fields.compact textarea {
    background: var(--popover-bg-color);
    border-color: var(--divider-color);
    color: var(--text-color);
}

:root.dark .form-fields.compact select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
}

/* Remove all visual noise */
* {
    box-shadow: none !important;
}

/* Exception for delivery buttons border */
.delivery-buttons {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06) !important;
}

:root.dark .delivery-buttons {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

/* Hide cart summary - will use order-summary instead */
.cart-summary {
    display: none !important;
}

/* Loading states and skeleton screens */
.skeleton {
    background: linear-gradient(90deg, 
        var(--popover-bg-color) 25%, 
        transparent 50%, 
        var(--popover-bg-color) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

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

/* Telegram WebApp Main Button styling for inactive state */
/* Remove overly broad selectors that affect all buttons - only target Telegram main button */

/* These selectors are too broad and affect all buttons - REMOVE THEM */
/* 
.tg-main-button-disabled,
[data-main-button-disabled="true"],
body.tg-main-button-inactive,
body[data-main-button-active="false"] {
    --tg-color-scheme: dark !important;
}

body.tg-main-button-inactive,
body[data-main-button-active="false"] {
    --tg-theme-button-color: var(--divider-color) !important;
    --tg-theme-button-text-color: var(--tg-theme-secondary-bg-color, #666) !important;
}

body.tg-main-button-inactive .tg-main-button,
body[data-main-button-active="false"] .tg-main-button,
body.tg-main-button-inactive [class*="main-button"],
body[data-main-button-active="false"] [class*="main-button"],
body.tg-main-button-inactive [id*="main-button"],
body[data-main-button-active="false"] [id*="main-button"] {
    background-color: var(--divider-color) !important;
    color: var(--tg-theme-secondary-bg-color, #666) !important;
    opacity: 0.6 !important;
    pointer-events: none !important;
}
*/

/* Dark theme support for inactive button */
/* 
@media (prefers-color-scheme: dark) {
    body.tg-main-button-inactive,
    body[data-main-button-active="false"] {
        --tg-theme-button-color: var(--divider-color) !important;
        --tg-theme-button-text-color: var(--tg-theme-subtitle-text-color, #8e8e93) !important;
    }
    
    body.tg-main-button-inactive .tg-main-button,
    body[data-main-button-active="false"] .tg-main-button,
    body.tg-main-button-inactive [class*="main-button"],
    body[data-main-button-active="false"] [class*="main-button"],
    body.tg-main-button-inactive [id*="main-button"],
    body[data-main-button-active="false"] [id*="main-button"] {
        background-color: var(--divider-color) !important;
        color: var(--tg-theme-subtitle-text-color, #8e8e93) !important;
        opacity: 0.6 !important;
    }
}
*/

/* Override index.css cart content styles - strongest selectors */
#cart-content,
.page #cart-content,
body #cart-content {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important; /* Remove all margins to make lines go edge-to-edge */
    padding: 0 !important; /* Remove all padding too */
    max-height: none !important; /* Override index.css */
    overflow-y: visible !important; /* Override index.css */
    padding-bottom: 0 !important; /* Override index.css */
}

/* Override index.css cart items list styles */
#cart-items,
.page #cart-items,
body #cart-items,
.cart-items-list {
    /* Remove ANY horizontal margins to make borders edge-to-edge */
    margin: 0 !important;
    padding: 0 !important;
    min-height: auto !important; /* Override index.css */
}

/* Cart item containers - STRONGEST selectors to override index.css */
.cart-item-container,
body .cart-item-container,
.page .cart-item-container,
#cart-content .cart-item-container,
body #cart-content .cart-item-container,
.page #cart-content .cart-item-container,
body #cart-items .cart-item-container,
.page #cart-items .cart-item-container,
#cart-content #cart-items .cart-item-container {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important; /* Override index.css */
    padding: 12px 16px !important; /* Override index.css - Add horizontal padding to content, not container */
    border-bottom: 1px solid var(--divider-color) !important;
    margin: 0 !important; /* ABSOLUTELY NO margin - edge to edge lines - Override index.css */
    /* Force override any inherited styles */
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
} 

/* Simple fix for cart item margins - override index.css */
.cart-item-container {
    margin: 0 !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--divider-color) !important;
}

.cart-item-container:last-child {
    border-bottom: none !important;
}

/* Add padding to content inside cart items */
.cart-item-container .cart-item-image {
    margin-left: 16px !important;
}

.cart-item-container .cart-item-quantity-container {
    margin-right: 16px !important;
}

/* Reduce error message margin */
.field-error-message {
    margin-top: 0px !important;
    margin-bottom: 8px;
}