/* calc/assets/css/calculators/clothing-size.css */

:root {
    --c-purple-main: #6D28D9;
    --c-purple-light: #F3E8FF;
    --c-gradient-card: linear-gradient(135deg, #7C3AED 0%, #4C1D95 100%);
    --tape-bg: #FCD34D;
    --tape-tick: #78350F;
}

/* === HEADER & LAYOUT === */
.clothing-page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden; /* Глобальная защита от горизонтального скролла */
}

.clothing-page .calc-header { margin-bottom: 32px; border-bottom: 1px solid var(--border-color, #E5E7EB); padding-bottom: 24px; }
.clothing-page .subtitle { color: var(--text-secondary, #6B7280); margin-top: 12px; max-width: 800px; line-height: 1.6; font-size: 16px; }

.clothing-page .calc-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; margin-bottom: 40px; width: 100%; }
@media (min-width: 900px) { .clothing-page .calc-grid { grid-template-columns: 1.2fr 1fr; } }

/* === LEFT CARD: INPUTS === */
.clothing-page .section-label { display: block; font-size: 15px; font-weight: 700; margin-bottom: 12px; color: var(--text-primary, #111827); }

.clothing-page .gender-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 32px; width: 100%; }
.clothing-page .gender-card { cursor: pointer; position: relative; }
.clothing-page .gender-card input { display: none; }
.clothing-page .gender-content {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px; background: #fff; border: 2px solid #E5E7EB; border-radius: 12px;
    font-weight: 600; font-size: 15px; color: #6B7280; transition: all 0.2s; width: 100%; box-sizing: border-box;
}
.clothing-page .gender-content i { font-size: 20px; }
.clothing-page .gender-card input:checked + .gender-content {
    border-color: var(--c-purple-main); background: var(--c-purple-light); color: var(--c-purple-main);
    box-shadow: 0 4px 12px rgba(109, 40, 217, 0.15); transform: translateY(-2px);
}

/* TAPE SLIDER (KILLER FEATURE 1) */
.clothing-page .tape-group { margin-bottom: 32px; width: 100%; }
.clothing-page .label-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 12px; }
.clothing-page .range-val { font-size: 24px; font-weight: 800; color: var(--c-purple-main); line-height: 1; }

.clothing-page .tape-wrapper {
    position: relative; height: 44px; display: flex; align-items: center; width: 100%; box-sizing: border-box;
    background: var(--tape-bg); border-radius: 8px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
    background-image: 
        repeating-linear-gradient(to right, transparent, transparent 9px, var(--tape-tick) 9px, var(--tape-tick) 10px),
        repeating-linear-gradient(to right, transparent, transparent 49px, var(--tape-tick) 49px, var(--tape-tick) 51px);
    background-size: 100% 12px, 100% 24px; background-repeat: no-repeat; background-position: bottom left, bottom left;
}

.clothing-page .tape-slider {
    -webkit-appearance: none; width: 100%; background: transparent; cursor: pointer; margin: 0; z-index: 2;
}
.clothing-page .tape-slider:focus { outline: none; }
.clothing-page .tape-slider::-webkit-slider-runnable-track { width: 100%; height: 44px; background: transparent; border: none; }
.clothing-page .tape-slider::-moz-range-track { width: 100%; height: 44px; background: transparent; border: none; }

.clothing-page .tape-slider::-webkit-slider-thumb {
    -webkit-appearance: none; height: 56px; width: 16px;
    background: #EF4444; border-radius: 4px; border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4); margin-top: -6px; transition: transform 0.1s;
}
.clothing-page .tape-slider::-moz-range-thumb {
    height: 56px; width: 16px; background: #EF4444; border-radius: 4px; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.clothing-page .tape-slider:active::-webkit-slider-thumb { transform: scale(1.1); }
.clothing-page .helper-text { font-size: 13px; color: #6B7280; margin-top: 8px; }

/* === RIGHT CARD: RESULT === */
.clothing-page .card--clothing {
    background: var(--c-gradient-card); color: #fff; border: none; width: 100%; box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(109, 40, 217, 0.25); transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative; overflow: hidden; padding: 32px; border-radius: 24px;
}
.clothing-page .card--clothing::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%); pointer-events: none;
}
@media (min-width: 900px) { .clothing-page .sticky-card { position: sticky; top: 24px; } }

.clothing-page .tag-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
.clothing-page .tag-header h2 { margin: 0; font-size: 16px; letter-spacing: 3px; color: rgba(255,255,255,0.8); font-family: monospace; }

.clothing-page .main-size-box { text-align: center; margin-bottom: 32px; }
.clothing-page .main-size-box .size-label { font-size: 14px; opacity: 0.8; display: block; margin-bottom: 8px; text-transform: uppercase; font-weight: 600; letter-spacing: 1px;}
.clothing-page .main-size-box .size-val { font-size: 80px; font-weight: 800; color: #fff; line-height: 1; text-shadow: 0 4px 20px rgba(0,0,0,0.3); }

.clothing-page .summary-divider { height: 1px; background: rgba(255,255,255,0.15); margin: 32px 0; }

.clothing-page .details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 32px; width: 100%; }
.clothing-page .detail-box {
    background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 16px;
    display: flex; flex-direction: column; align-items: center; text-align: center;
}
.clothing-page .detail-box span { font-size: 12px; color: rgba(255,255,255,0.8); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.clothing-page .detail-box strong { font-size: 28px; font-weight: 800; color: #fff; line-height: 1; }

.clothing-page .tag-barcode {
    height: 40px; width: 100%; margin-top: 24px; opacity: 0.5;
    background-image: 
        repeating-linear-gradient(to right, 
        #fff 0, #fff 2px, transparent 2px, transparent 4px,
        #fff 4px, #fff 8px, transparent 8px, transparent 10px,
        #fff 10px, #fff 12px, transparent 12px, transparent 16px,
        #fff 16px, #fff 22px, transparent 22px, transparent 24px);
}

/* === SEO CONTENT === */
.clothing-page .icon-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; font-size: 22px; font-weight: 800; color: #111827; line-height: 1.3; }
.clothing-page .header-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0; font-size: 24px; }

.clothing-page .purple-icon { color: var(--c-purple-main); background: var(--c-purple-light); }
.clothing-page .yellow-icon { color: #D97706; background: #FEF3C7; }
.clothing-page .blue-icon { color: #2563EB; background: #EFF6FF; }

.clothing-page .formulas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 32px 0; width: 100%; }
.clothing-page .formula-card { background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; padding: 24px; display: flex; flex-direction: column; transition: transform 0.2s; box-shadow: 0 4px 6px rgba(0,0,0,0.02); width: 100%; box-sizing: border-box;}
.clothing-page .formula-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.06); }
.clothing-page .formula-header { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.clothing-page .formula-card h3 { margin: 0; font-size: 18px; font-weight: 700; color: #111827; }
.clothing-page .badge { padding: 6px 12px; border-radius: 99px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.clothing-page .badge-purple { background: var(--c-purple-main); color: #fff; }
.clothing-page .badge-white { background: #F3F4F6; color: #111827; }
.clothing-page .math-expression { background: var(--c-purple-light); color: var(--c-purple-main); border-radius: 12px; padding: 12px 16px; font-weight: 700; text-align: center; margin-bottom: 16px; font-size: 15px; border: 1px solid rgba(109, 40, 217, 0.1);}
.clothing-page .formula-card p { font-size: 14px; color: #6B7280; margin: 0; line-height: 1.5; font-weight: 500; }

/* === АДАПТИВНАЯ СЕО ТАБЛИЦА === */
.clothing-page .seo-table-wrapper { margin: 40px 0; background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; padding: 24px; width: 100%; box-sizing: border-box;}
.clothing-page .seo-table-wrapper h3 { margin: 0 0 20px 0; font-size: 18px; font-weight: 700; color: #111827;}
.clothing-page .table-scroll-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ВАЖНО: скролл внутри таблицы, не ломает экран */
.clothing-page .seo-table { width: 100%; border-collapse: collapse; min-width: 500px; }
.clothing-page .seo-table th { background: #F9FAFB; padding: 12px; text-align: left; font-size: 13px; color: #6B7280; text-transform: uppercase; border-bottom: 2px solid #E5E7EB; }
.clothing-page .seo-table td { padding: 12px; border-bottom: 1px solid #F3F4F6; font-size: 15px; color: #111827; font-weight: 500; }
.clothing-page .seo-table tr:last-child td { border-bottom: none; }

.clothing-page .calc-description p { font-size: 16px; line-height: 1.7; color: var(--text-secondary); margin-bottom: 24px; }
.clothing-page .calc-description strong { color: var(--text-primary); }

.clothing-page .soft-divider { border: none; height: 1px; background: linear-gradient(90deg, transparent, #E5E7EB, transparent); margin: 48px 0; }

/* Дизайн FAQ */
.clothing-page .faq-item[open] { border-color: var(--c-purple-main); box-shadow: 0 4px 20px rgba(109, 40, 217, 0.1); }
.clothing-page .faq-item[open] summary { color: var(--c-purple-main); background: var(--c-purple-light); }

/* === БЛОК РЕКОМЕНДАЦИЙ (ВНИЗУ) === */
.clothing-page .bottom-recommendations { margin-top: 60px; padding-top: 40px; border-top: 1px solid #E5E7EB; width: 100%; }
/* Переопределяем стиль сайдбара, чтобы он красиво лег в горизонтальную сетку снизу */
.clothing-page .bottom-recommendations .sidebar-related h3 { margin-bottom: 24px; font-size: 22px; }
.clothing-page .bottom-recommendations .related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }

/* Адаптив */
@media (max-width: 900px) {
    .clothing-page .formulas-grid { grid-template-columns: 1fr; }
    .clothing-page .icon-heading { font-size: 20px; align-items: flex-start; }
    .clothing-page .header-icon { width: 40px; height: 40px; font-size: 20px; }
    .clothing-page .card--clothing { padding: 24px; }
    .clothing-page .main-size-box .size-val { font-size: 64px; }
    .clothing-page .bottom-recommendations .related-grid { grid-template-columns: 1fr; }
}