/*
 * Премиальный B2B Калькулятор - Строгий стиль Legal Design
 */

:root {
    --cc-bg-main: #F5F5F0;
    --cc-charcoal: #2B2B2B;
    --cc-border: #D0D0D0;
    --cc-white: #FFFFFF;
}

#cc-app {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    background-color: transparent !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 auto !important;
    color: var(--cc-charcoal) !important;
}

#cc-app * { box-sizing: border-box !important; }

/* ЗАЩИТА ТЕКСТОВ ОТ ТЕМЫ TOWER */
#cc-app label, 
#cc-app h3, 
#cc-app .cc-zone-title, 
#cc-app .cc-group-label,
#cc-app .cc-card-title, 
#cc-app .cc-card-price, 
#cc-app .cc-segment span, 
#cc-app option,
#cc-app input, 
#cc-app select {
    color: var(--cc-charcoal) !important;
    -webkit-text-fill-color: var(--cc-charcoal) !important;
}

/* Исключения: белый текст на черном фоне */
#cc-app .cc-summary-box *, 
#cc-app .cc-segment input:checked + span {
    color: var(--cc-white) !important;
    -webkit-text-fill-color: var(--cc-white) !important;
}

.cc-modern-layout {
    display: grid !important;
    grid-template-columns: 1fr 380px !important;
    gap: 40px !important;
    align-items: start !important;
}

.cc-main-col { display: flex !important; flex-direction: column !important; gap: 30px !important; }

.cc-zone-card {
    background: var(--cc-bg-main) !important;
    border: 1px solid var(--cc-charcoal) !important;
    padding: 30px !important;
}

.cc-zone-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 25px !important;
    border-bottom: 2px solid var(--cc-charcoal) !important;
    padding-bottom: 10px !important;
}

.cc-zone-title {
    margin: 0 !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

.cc-controls-grid, .cc-inputs-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    margin-bottom: 25px !important;
}

.cc-group-label, .cc-control-group label, .cc-input-wrap label {
    display: block !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.cc-segmented {
    display: flex !important;
    background: #EAEAEA !important;
    padding: 4px !important;
}

.cc-segment {
    flex: 1 !important;
    position: relative !important;
    cursor: pointer !important;
    margin: 0 !important;
}

.cc-hidden-cb, .cc-segment input {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

.cc-segment span {
    display: block !important;
    text-align: center !important;
    padding: 10px 15px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.cc-segment input:checked + span {
    background: var(--cc-charcoal) !important;
}

.cc-input {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 1px solid var(--cc-charcoal) !important;
    background: var(--cc-white) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    outline: none !important;
    height: 46px !important;
}

.cc-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 15px !important;
    margin-top: 10px !important;
}

.cc-card {
    display: block !important;
    position: relative !important;
    border: 1px solid var(--cc-border) !important;
    background: var(--cc-white) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
}

.cc-card-content {
    padding: 15px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.cc-card-title {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
}

.cc-card-price {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
}

.cc-hidden-cb:checked + .cc-card-content {
    background: #E8E8E8 !important;
}

.cc-card:has(.cc-hidden-cb:checked) {
    border: 2px solid var(--cc-charcoal) !important;
}

.cc-sidebar-col { position: sticky !important; top: 30px !important; }

.cc-summary-box {
    background: var(--cc-charcoal) !important;
    padding: 40px 30px !important;
}

.cc-summary-title {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    opacity: 0.8 !important;
    margin-bottom: 15px !important;
}

.cc-summary-total {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    margin-bottom: 30px !important;
    line-height: 1 !important;
}

.cc-summary-split {
    border-top: 1px solid rgba(255,255,255,0.2) !important;
    padding-top: 20px !important;
    margin-bottom: 30px !important;
}

.cc-split-row {
    display: flex !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
    font-size: 0.95rem !important;
}

.cc-split-row span:last-child { font-weight: 700 !important; }

.cc-btn {
    background: var(--cc-white) !important;
    color: var(--cc-charcoal) !important;
    border: none !important;
    padding: 18px 24px !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    text-align: center !important;
}

.cc-btn:hover { background: #E0E0E0 !important; }

.cc-btn-outline {
    background: transparent !important;
    color: var(--cc-charcoal) !important;
    border: 2px solid var(--cc-charcoal) !important;
}

.cc-btn-outline:hover {
    background: var(--cc-charcoal) !important;
    color: var(--cc-white) !important;
}

.cc-btn-block { display: block !important; width: 100% !important; }

.cc-btn-remove {
    background: transparent !important;
    border: none !important;
    color: var(--cc-charcoal) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    opacity: 0.6 !important;
}

.cc-btn-remove:hover { opacity: 1 !important; }

@media (max-width: 900px) {
    .cc-modern-layout { grid-template-columns: 1fr !important; }
    .cc-sidebar-col { position: static !important; }
    .cc-controls-grid, .cc-inputs-grid { grid-template-columns: 1fr !important; }
}