/* Start:/local/templates/fc/css/googlefonts.css?177373219315672*/
/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v44/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWtE6F15M.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v44/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWvU6F15M.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v44/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWtU6F15M.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v44/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWuk6F15M.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* hebrew */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v44/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWu06F15M.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* math */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v44/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWxU6F15M.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v44/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqW106F15M.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v44/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWtk6F15M.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v44/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWt06F15M.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v44/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWuU6F.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v44/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu1aB.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v44/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu1aB.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v44/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu1aB.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v44/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu1aB.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* hebrew */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v44/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu1aB.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* math */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v44/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTVOmu1aB.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v44/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTUGmu1aB.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v44/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu1aB.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v44/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v44/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/robotoflex/v30/NaNNepOXO_NexZs0b5QrzlOHb8wCikXpYqmZsWI-__OGbt8jZktqc2V3Zs0KvDLdBP8SBZtOs2IifRuUZQMsPJtUsR4DEK6cULNeUx9XgTnH37Ha_FIAp4Fm0PP1hw45DntW2x0wZGzhPmr1YNMYKYn9_1IQXGwJAiUJVUMdN5YUW4O8HtSoXjC79QRyaLshNDUf3e0O-gn5rrZCu20YNau1OPF80A.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/robotoflex/v30/NaNNepOXO_NexZs0b5QrzlOHb8wCikXpYqmZsWI-__OGbt8jZktqc2V3Zs0KvDLdBP8SBZtOs2IifRuUZQMsPJtUsR4DEK6cULNeUx9XgTnH37Ha_FIAp4Fm0PP1hw45DntW2x0wZGzhPmr1YNMYKYn9_1IQXGwJAiUJVUMdN5YUW4O8HtSoXjC79QRyaLshNDUf3e0O-gn5rrZCu20YNau8OPF80A.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/robotoflex/v30/NaNNepOXO_NexZs0b5QrzlOHb8wCikXpYqmZsWI-__OGbt8jZktqc2V3Zs0KvDLdBP8SBZtOs2IifRuUZQMsPJtUsR4DEK6cULNeUx9XgTnH37Ha_FIAp4Fm0PP1hw45DntW2x0wZGzhPmr1YNMYKYn9_1IQXGwJAiUJVUMdN5YUW4O8HtSoXjC79QRyaLshNDUf3e0O-gn5rrZCu20YNau7OPF80A.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/robotoflex/v30/NaNNepOXO_NexZs0b5QrzlOHb8wCikXpYqmZsWI-__OGbt8jZktqc2V3Zs0KvDLdBP8SBZtOs2IifRuUZQMsPJtUsR4DEK6cULNeUx9XgTnH37Ha_FIAp4Fm0PP1hw45DntW2x0wZGzhPmr1YNMYKYn9_1IQXGwJAiUJVUMdN5YUW4O8HtSoXjC79QRyaLshNDUf3e0O-gn5rrZCu20YNau3OPF80A.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/robotoflex/v30/NaNNepOXO_NexZs0b5QrzlOHb8wCikXpYqmZsWI-__OGbt8jZktqc2V3Zs0KvDLdBP8SBZtOs2IifRuUZQMsPJtUsR4DEK6cULNeUx9XgTnH37Ha_FIAp4Fm0PP1hw45DntW2x0wZGzhPmr1YNMYKYn9_1IQXGwJAiUJVUMdN5YUW4O8HtSoXjC79QRyaLshNDUf3e0O-gn5rrZCu20YNau2OPF80A.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/robotoflex/v30/NaNNepOXO_NexZs0b5QrzlOHb8wCikXpYqmZsWI-__OGbt8jZktqc2V3Zs0KvDLdBP8SBZtOs2IifRuUZQMsPJtUsR4DEK6cULNeUx9XgTnH37Ha_FIAp4Fm0PP1hw45DntW2x0wZGzhPmr1YNMYKYn9_1IQXGwJAiUJVUMdN5YUW4O8HtSoXjC79QRyaLshNDUf3e0O-gn5rrZCu20YNau4OPE.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* End */


/* Start:/local/templates/fc/css/style.css?177744759360084*/
/* ─────────────────── RESET & TOKENS ─────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

:root {
    --bg: #F5F6F8;
    --surface: #FFFFFF;
    --surface2: #F0F2F5;
    --border: #E8EAF0;
    --border2: #D0D4DF;

    --text: #333;
    --muted: #64748B;
    --subtle: #94A3B8;

    --secondary: hsla(38, 91%, 55%, 1);
    --secondary2: hsla(38, 82%, 48%, 1);
    --secondary-a: hsla(38, 91%, 55%, .1);
    --secondary-b: hsla(38, 91%, 55%, .2);

    --primary: hsla(224, 81%, 57%, 1);
    --primary2: hsla(224, 66%, 49%, 1);
    --primary-aa: hsla(224, 81%, 57%, .05);
    --primary-a: hsla(224, 81%, 57%, .1);
    --primary-b: hsla(224, 81%, 57%, .2);
    --primary-c: hsla(224, 81%, 57%, .3);

    --green: #16A34A;
    --green-a: rgba(22, 163, 74, .08);
    --red: #DC2626;
    --red-a: rgba(220, 38, 38, .08);

    --sh-xs: 0 1px 2px rgba(15, 17, 23, .06);
    --sh-s: 0 2px 8px rgba(15, 17, 23, .07), 0 1px 3px rgba(15, 17, 23, .04);
    --sh-m: 0 6px 24px rgba(15, 17, 23, .09), 0 2px 8px rgba(15, 17, 23, .05);
    --sh-l: 0 16px 56px rgba(15, 17, 23, .13), 0 6px 20px rgba(15, 17, 23, .07);

    --r-s: 4px;
    --r: 8px;
    --r-lg: 12px;
    --r-xl: 18px;
    --wrap: 1340px;
    --nav-h: 68px;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    min-height: 100vh;
    overflow-x: hidden
}

::selection {
    background: var(--primary-a);
    color: var(--text)
}

::-webkit-scrollbar {
    width: 5px
}

::-webkit-scrollbar-track {
    background: transparent
}

::-webkit-scrollbar-thumb {
    background: var(--border2);
    border-radius: var(--r);
}

a {
    text-decoration: none;
    color: inherit
}

/* ─────────────────── LAYOUT ─────────────────── */
.wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 24px 40px 0 40px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .wrap {
        padding: 24px 20px 0 20px;
    }
}

@media (max-width: 480px) {
    .wrap {
        padding: 24px 16px 0 16px;
    }
}

/* ─────────────────── NAV ─────────────────── */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    height: var(--nav-h);
    background: var(--surface);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border);
}

.nav.nav-bottom {
    top: auto;
    bottom: 0;

    @media (min-width: 901px) {
        display: none;
    }

    .nav-links {
        display: flex;
        flex-grow: 1;

        .nav-link {
            display: flex;
            gap: 8px;
            flex-grow: 1;
            align-items: center;
            justify-content: center;
        }
    }
}

.nav-inner {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 40px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 0;
}

@media (max-width: 900px) {
    .nav-inner {
        padding: 0 20px
    }
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    text-decoration: none;
    margin-right: 40px
}

.logo-mark {
    width: 36px;
    height: 36px;
    border-radius: var(--r);
    /*background: var(--primary);*/
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-mark img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.logo-mark svg {
    width: 18px;
    height: 18px
}

.logo-word {
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.4px;
    color: var(--text)
}

.logo-word em {
    font-style: normal;
    color: var(--muted);
    font-weight: 700
}

/* Desktop links */
.nav-links {
    display: flex;
    align-items: center;
    gap: 2px
}

@media (max-width: 900px) {
    .nav-links {
        display: none
    }
}

.nav-link {
    padding: 7px 14px;
    border-radius: var(--r);
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    transition: all .15s;
    border: none;
    background: none;
    font-family: 'DM Sans', sans-serif;
    white-space: nowrap;
}

.nav-link:hover {
    color: var(--text);
    background: var(--surface2)
}

.nav-link.active {
    color: var(--primary);
    background: var(--primary-a);
    font-weight: 600
}

/* Spacer */
.nav-gap {
    flex: 1
}

/* Right side */
.nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0
}

.nav-addr {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--muted);
    margin-right: 4px
}

@media (max-width: 600px) {
    .nav-addr {
        display: none
    }
}

/* Burger */
.burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--r);
    border: 1.5px solid var(--border2);
    background: var(--surface);
    cursor: pointer;
    color: var(--text);
}

@media (max-width: 900px) {
    .burger {
        display: flex;
        padding: 6px;
        height: fit-content;
    }
}

/* Mobile Drawer */
.drawer-mask {
    position: fixed;
    inset: 0;
    z-index: 190;
    background: rgba(0, 0, 0, .35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}

.drawer-mask.open {
    opacity: 1;
    pointer-events: all
}

.drawer {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    z-index: 195;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 8px 16px 16px;
    transform: translateY(-4px);
    opacity: 0;
    pointer-events: none;
    transition: all .2s;
    box-shadow: var(--sh-m);
}

.drawer.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all
}

.drawer-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    border-radius: var(--r-lg);
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    transition: all .15s;
}

.drawer-link:hover, .drawer-link.active {
    background: var(--primary-a);
    color: var(--primary)
}

.drawer-sep {
    height: 1px;
    background: var(--border);
    margin: 8px 0
}

/* ─────────────────── BUTTONS ─────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    border-radius: var(--r);
    border: none;
    cursor: pointer;
    transition: all .18s;
    text-decoration: none;
    padding: 10px 20px;
    white-space: nowrap;
    line-height: 1;
}

.btn-primary {
    background: var(--primary);
    color: #fff
}

.btn-primary:hover {
    background: var(--primary2);
    box-shadow: 0 4px 18px rgba(59, 106, 234, .32);
    transform: translateY(-1px)
}

.btn-orange {
    background: var(--secondary);
    color: #fff
}

.btn-orange:hover {
    background: var(--secondary2);
    box-shadow: 0 4px 18px rgba(245, 168, 35, .38);
    transform: translateY(-1px)
}

.btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1.5px solid var(--border2)
}

.btn-ghost:hover {
    border-color: var(--primary);
    color: var(--primary)
}

.btn-soft {
    background: var(--primary-a);
    color: var(--primary);
    border: 1.5px solid var(--primary-b)
}

.btn-soft:hover {
    background: rgba(59, 106, 234, .14)
}

.btn-muted {
    background: var(--surface2);
    color: var(--muted);
    border: 1.5px solid var(--border)
}

.btn-muted:hover {
    color: var(--text);
    border-color: var(--border2)
}

.btn-sm {
    padding: 6px 12px;
    min-height: 32px;
    font-size: 13px;
    border-radius: var(--r);
}

.btn-lg {
    padding: 13px 26px;
    font-size: 15px;
    border-radius: var(--r-lg);
}

.btn-full {
    width: 100%
}

.btn:disabled, .btn[disabled] {
    opacity: .38;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important
}

/* ─────────────────── TAGS ─────────────────── */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px 6px 8px;
    border-radius: var(--r);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    line-height: 1.6
}

.tag-green {
    background: var(--green-a);
    color: var(--green)
}

.tag-orange {
    background: var(--secondary-a);
    color: var(--secondary)
}

.tag-red {
    background: var(--red-a);
    color: var(--red)
}

.tag-blue {
    background: var(--primary-a);
    color: var(--primary)
}

.tag-gray {
    background: var(--surface2);
    color: var(--muted);
    border: 1px solid var(--border)
}

/* ─────────────────── PAGES ─────────────────── */
.page {
    display: none;
    min-height: 100vh;
    padding-top: var(--nav-h)
}

.page.active {
    display: block;
    animation: fadeUp .22s ease both
}

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

/* ─────────────────── CATALOG: HERO ─────────────────── */
.hero {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 16px 0;
}

.hero-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    flex-grow: 1;
}

.hero-left {
    flex: 1;
    min-width: 280px;

    .hist-accordion {
        max-width: 400px;

        .hist-accordion-title, .hist-row-name {
            color: var(--muted);
        }
    }
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--primary-a);
    border: 1px solid var(--primary-b);
    border-radius: var(--r);
    padding: 6px 12px 6px 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: .3px;
    margin-bottom: 16px;
}

.hero-title {
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    font-size: 36px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.5px;
    margin-bottom: 10px;
    color: var(--text)
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 26px
    }
}

.hero-sub {
    margin-top: 6px;
    font-size: 15px;
    color: var(--muted);
    line-height: 1.6;
    max-width: 480px
}

/* My abonement strip (for auth users) */
.my-strip {
    background: linear-gradient(90deg, var(--primary-a), rgba(59, 106, 234, .02));
    border: 1.5px solid var(--primary-b);
    border-radius: var(--r);
    padding: 14px 20px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.my-strip-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--primary)
}

.my-strip-name {
    font-weight: 700;
    font-size: 14px
}

.my-strip-meta {
    font-size: 13px;
    color: var(--muted)
}

/* Promo banner */
.promo-banner {
    background: linear-gradient(105deg, var(--secondary) 0%, #F0931A 100%);
    border-radius: var(--r-lg);
    padding: 22px 26px;
    color: #fff;
    flex-shrink: 0;
    width: 320px;
    position: relative;
    overflow: hidden;
}

@media (max-width: 1000px) {
    .promo-banner {
        width: 100%
    }
}

.promo-banner::after {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

.promo-banner-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    opacity: .8;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.promo-banner-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.promo-banner-sub {
    font-size: 13px;
    opacity: .85;
    margin-bottom: 18px;
    line-height: 1.5
}

.promo-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .2);
    border: 1.5px solid rgba(255, 255, 255, .35);
    color: #fff;
    padding: 9px 18px;
    border-radius: var(--r);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .18s;
    font-family: 'DM Sans', sans-serif;
}

.promo-banner-btn:hover {
    background: rgba(255, 255, 255, .3)
}

/* ─────────────────── CATALOG: MAIN ─────────────────── */
.cat-body {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 36px 40px 80px;
    display: grid;
    grid-template-columns:224px 1fr;
    gap: 36px;
    align-items: start;
}

@media (max-width: 1100px) {
    .cat-body {
        grid-template-columns:194px 1fr;
        gap: 24px;
        padding: 28px 20px 80px
    }
}

@media (max-width: 768px) {
    .cat-body {
        grid-template-columns:1fr;
        padding: 0 0 16px
    }
}

/* ─────────────────── SIDEBAR ─────────────────── */
.sidebar {
    position: sticky;
    top: calc(var(--nav-h) + 20px)
}

.sidebar_auth {
    position: sticky;
    top: calc(var(--nav-h) + 16px);
    max-height: calc(100vh - var(--nav-h) - 32px);
    overflow-y: auto;
    scrollbar-width: none
}

.sidebar_auth::-webkit-scrollbar {
    display: none
}

@media (max-width: 768px) {
    .sidebar {
        display: none
    }
}

.sb-section {
    margin-bottom: 28px
}

.sb-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--subtle);
    margin-bottom: 8px;
    padding: 0 8px;
}

.sb-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--r);
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    border: none;
    background: none;
    font-family: 'DM Sans', sans-serif;
    text-align: left;
    transition: all .15s;
}

.sb-item:hover {
    color: var(--text);
    background: var(--surface2)
}

.sb-item.active {
    color: var(--primary);
    background: var(--primary-a);
    font-weight: 600
}

.sb-item .ico {
    width: 16px;
    height: 16px;
    border-radius: var(--r);
    background: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 10px;
    transition: background .15s
}

.sb-item.active .ico {
    background: var(--primary-a)
}

.sb-cnt {
    margin-left: auto;
    font-size: 12px;
    color: var(--subtle);
    font-weight: 400
}

.sb-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0 16px
}

/* ─────────────────── MOBILE CHIPS ─────────────────── */
.mob-chips {
    display: none;
    gap: 4px;
    overflow-x: auto;
    padding: 16px 16px 0;
    scrollbar-width: none;
}

.mob-chips::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 30px 0 10px -20px var(--bg),
    inset -30px 0 10px -20px var(--bg);
    border-radius: inherit; /* Чтобы тень повторяла скругление родителя */
    pointer-events: none; /* КЛЮЧЕВОЙ МОМЕНТ: проброс кликов сквозь слой тени */
}

.personal-container {
    @media (max-width: 900px) {
        padding: 0 16px 16px;
        margin: 0 -16px;
    }
}

.mob-chips.mob-chips-personal {
    display: flex;
    padding: 0;
    margin-bottom: 16px;

    @media (max-width: 900px) {
        padding: 0 16px 16px;
        margin: 0 -16px;
    }
}

.personal-container {
    overflow: auto;
}

.mob-chips::-webkit-scrollbar {
    display: none
}

@media (max-width: 768px) {
    .mob-chips {
        display: flex
    }
}

.chip {
    flex-shrink: 0;
    padding: 7px 15px;
    border-radius: var(--r);
    font-size: 13px;
    font-weight: 500;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: all .15s;
    font-family: 'DM Sans', sans-serif;
    white-space: nowrap;
}

.chip.active {
    border-color: var(--primary);
    background: var(--primary-a);
    color: var(--primary);
    font-weight: 600
}

/* ─────────────────── CARDS GRID ─────────────────── */
.grid-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px
}

@media (max-width: 768px) {
    .grid-head {
        padding: 12px 16px 0
    }
}

.grid-count {
    font-size: 13px;
    color: var(--muted)
}

.grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 16px
}

@media (max-width: 1240px) {
    .grid {
        grid-template-columns:repeat(2, 1fr)
    }
}

@media (max-width: 768px) {
    .grid {
        grid-template-columns:1fr;
        padding: 0 16px;
        gap: 12px
    }
}

/* ─────────────────── AB CARD ─────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 16px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all .2s;
}

.card:hover {
    border-color: var(--border2);
    box-shadow: var(--sh-m);
    transform: translateY(-2px)
}

.card.promo, .ab-hero-card.expired {
    border-color: var(--primary-b);
    background: linear-gradient(145deg, var(--primary-aa) 0%, var(--surface) 65%);
}

.card-badge {
    position: absolute;
    top: 16px;
    right: 16px
}

.card-name {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 12px;
    padding-right: 100px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
}

.card-price {
    font-family: 'Open Sans', sans-serif;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: var(--text);
    margin-bottom: 4px;
    letter-spacing: -.5px;
}

.card-price em {
    font-family: 'DM Sans', sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 400;
    color: var(--muted);
    font-style: normal
}

.card-old {
    font-size: 13px;
    color: var(--subtle);
    text-decoration: line-through;
    margin-bottom: 6px
}

.card-note {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.55;
    margin-bottom: 12px
}

.card-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px
}

.card-expand-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: none;
    background: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    transition: color .15s;
    margin-bottom: 0;
}

.card-expand-btn svg {
    transition: transform .2s
}

.card.open .card-expand-btn svg {
    transform: rotate(180deg)
}

.card-details {
    display: none;
    margin-top: 14px;
    border-top: 1px solid var(--border);
    padding-top: 14px;
    animation: fadeUp .18s ease
}

.card.open .card-details {
    display: block
}

.card-desc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.65;
    margin-bottom: 12px
}

.card-feats {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 0
}

.card-feat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted)
}

.card-footer {
    margin-top: auto;
    padding-top: 16px;
}

/* ─────────────────── MODAL ─────────────────── */

.overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(15, 17, 23, .45);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s;
}

.overlay.open {
    opacity: 1;
    pointer-events: all
}

.modal {
    background: var(--surface);
    border-radius: var(--r-xl);
    z-index: 501;
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--sh-l);
    transform: scale(.96) translateY(10px);
    transition: transform .22s cubic-bezier(.34, 1.2, .64, 1);
}

.overlay.open .modal {
    transform: scale(1) translateY(0)
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    position: relative;
    background-color: #fff;
    padding: 20px;
}

@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.mclose {
    width: 32px;
    height: 32px;
    border-radius: var(--r);
    border: none;
    background: var(--surface2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    transition: all .15s;
    flex-shrink: 0;
}

.mclose:hover {
    background: var(--border);
    color: var(--text)
}

.mtitle {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.3px
}

/* ===== ШАГИ АВТОРИЗАЦИИ ===== */
.auth-step {
    text-align: center;
}

.auth-step h2 {
    margin-bottom: 15px;
    color: #333;
    font-size: 24px;
}

.auth-step p {
    color: #666;
    margin-bottom: 25px;
    font-size: 14px;
}

/* ===== ФОРМЫ ===== */
.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-size: 14px;
    font-weight: 500;
}

#code-form .form-group{
    text-align: center;

    input {
        max-width: 150px;
        font-size: 20px;
        letter-spacing: 10px;
        text-align: center;
        padding-left: 25px;
    }
}

.form-group input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 16px;
    transition: all 0.3s;
    box-sizing: border-box;
}

.form-group input:focus {
    border-color: #667eea;
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-group input.error {
    border-color: #dc3545;
}

/* Маска для телефона */
.phone-mask {
    letter-spacing: 0.5px;
}

/* ===== ОШИБКИ И УВЕДОМЛЕНИЯ ===== */
.error {
    color: #dc3545;
    font-size: 14px;
    margin-top: 5px;
    text-align: center;
    animation: shake 0.5s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.success-message {
    text-align: center;
    padding: 20px 0;
}

.success-message h2 {
    color: #28a745;
    margin-bottom: 15px;
}

/* ===== ТАЙМЕР ===== */
#timer {
    font-weight: bold;
    color: #667eea;
}

/* ===== КНОПКА АВТОРИЗАЦИИ НА САЙТЕ ===== */
.auth-button-container {
    position: relative;
    display: inline-block;
}

/* Для незалогиненного пользователя */
.auth-login-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 50px;
    color: white;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.auth-login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.auth-login-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* ─────────────────── PURCHASE MODAL ─────────────────── */

/* ─────────────────── FORM ─────────────────── */
.mh {
    padding: 26px 28px 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px
}

.mb {
    padding: 20px 28px 28px
}

.fg {
    margin-bottom: 16px
}

.cd-pointer {
    color: var(--blue);
    cursor: pointer;
    font-weight: 600;
}

.cd-next-code {
    text-align: center;
    font-size: 14px;
    color: var(--muted);
}

.for-other-label {
    font-size: 14px;
    font-weight: 600
}

.for-other-label2 {
    font-size: 14px;
    color: var(--muted);
    margin-top: 2px
}

.flabel {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
    text-align: center;
}

.finput {
    width: 100%;
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    padding: 12px 14px;
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    outline: none;
    transition: all .18s;
}

.finput:focus {
    border-color: var(--primary);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--primary-a)
}

.finput::placeholder {
    color: var(--subtle)
}

.pur-box {
    background: var(--surface2);
    border-radius: var(--r);
    padding: 18px;
    margin-bottom: 18px;
}

.pur-box-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--primary);
    margin-bottom: 10px
}

.pur-name {
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: -.2px
}

.pur-metas {
    display: flex;
    gap: 20px;
    flex-wrap: wrap
}

.pur-meta {
    display: flex;
    flex-direction: column;
    gap: 3px
}

.pur-meta-k {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--subtle)
}

.pur-meta-v {
    font-size: 14px;
    font-weight: 700
}

.pur-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border2)
}

.pur-total-k {
    font-size: 14px;
    color: var(--muted)
}

.pur-total-v {
    font-family: 'Open Sans', sans-serif;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.4px
}

.sub-note {
    background: rgba(59, 106, 234, .05);
    border: 1px solid rgba(59, 106, 234, .18);
    border-radius: var(--r);
    padding: 12px 14px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 16px
}

.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid var(--border)
}

.toggle {
    width: 44px;
    height: 24px;
    border-radius: var(--r-lg);
    background: var(--border2);
    position: relative;
    cursor: pointer;
    transition: background .18s;
    flex-shrink: 0
}

.toggle.on {
    background: var(--primary)
}

.toggle::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: var(--r);
    background: #fff;
    top: 3px;
    left: 3px;
    transition: left .18s;
    box-shadow: var(--sh-xs)
}

.toggle.on::after {
    left: 23px
}

.chklist {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border)
}

.chkrow {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 9px 0;
    cursor: pointer
}

.chk {
    width: 20px;
    height: 20px;
    border-radius: var(--r);
    border: 2px solid var(--border2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    transition: all .18s;
    cursor: pointer
}

.chk.on {
    background: var(--primary);
    border-color: var(--primary)
}

.chk-lbl {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.55
}

.chk-lbl a {
    color: var(--primary)
}

.chk-lbl a:hover {
    text-decoration: underline
}

.pay-area {
    margin-top: 20px
}

.pay-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 12px;
    color: var(--subtle);
    margin-top: 10px
}

/* ─────────────────── SUCCESS PAGE ─────────────────── */
.success-pg {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--nav-h));
    padding: 40px 20px
}

.success-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 48px 44px;
    max-width: 480px;
    width: 100%;
    text-align: center;
    box-shadow: var(--sh-m);
}

.success-menu {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap
}

@media (max-width: 520px) {
    .success-card {
        padding: 32px 24px
    }
}

.success-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--green-a);
    border: 2px solid rgba(22, 163, 74, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    animation: pop .45s cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes pop {
    from {
        transform: scale(0);
        opacity: 0
    }
    to {
        transform: scale(1);
        opacity: 1
    }
}

.success-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.4px;
    margin-bottom: 10px
}

.success-sub {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.65;
    margin-bottom: 28px
}

.success-info {
    background: var(--surface2);
    border-radius: var(--r);
    padding: 14px 18px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
    margin-top: 20px
}



/* Для залогиненного пользователя */
.auth-profile-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px 8px 8px;
    background: white;
    border: 2px solid #667eea;
    border-radius: 50px;
    color: #333;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.auth-profile-btn:hover {
    background: #f8f9ff;
    border-color: #764ba2;
}

.auth-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 16px;
    text-transform: uppercase;
}

.auth-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.auth-user-name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Выпадающее меню */
.auth-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 220px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.auth-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.auth-dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 20px;
    width: 16px;
    height: 16px;
    background: white;
    transform: rotate(45deg);
    border-radius: 3px;
    box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.05);
}

.auth-dropdown-menu {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.auth-dropdown-menu li {
    margin: 0;
    padding: 0;
}

.auth-dropdown-menu li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: #333;
    text-decoration: none;
    transition: background 0.2s ease;
    font-size: 14px;
}

.auth-dropdown-menu li a:hover {
    background: #f5f5f5;
}

.auth-dropdown-menu li a svg {
    width: 18px;
    height: 18px;
    fill: #667eea;
}

.auth-dropdown-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 8px 0;
}

.auth-logout-btn {
    color: #dc3545 !important;
}

.auth-logout-btn svg {
    fill: #dc3545 !important;
}

/* Бейдж для количества заказов */
.badge {
    display: inline-block;
    padding: 2px 8px;
    background: #667eea;
    color: white;
    border-radius: 50px;
    font-size: 12px;
    margin-left: auto;
}

/* Скелетон для загрузки */
.auth-button-skeleton {
    width: 120px;
    height: 40px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 50px;
}

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

/* Toast уведомления */
.toast-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 15px 25px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    transform: translateX(400px);
    animation: slideInRight 0.3s forwards;
    z-index: 10000;
}

.toast-notification.success {
    border-left: 4px solid #28a745;
}

.toast-notification.error {
    border-left: 4px solid #dc3545;
}

.toast-notification.info {
    border-left: 4px solid #17a2b8;
}

@keyframes slideInRight {
    to { transform: translateX(0); }
}

/* Медиа-запросы для мобильных */
@media (max-width: 768px) {
    .overlay {
        padding: 4px;
    }
    .modal-content {
        margin: 0% auto;
        width: 100%;
        padding: 16px;
    }

    .auth-login-btn span,
    .auth-user-name {
        display: none;
    }

    .auth-login-btn {
        padding: 10px;
        border-radius: 50%;
    }

    .auth-profile-btn {
        padding: 8px;
    }

    .auth-profile-btn span {
        display: none;
    }

    .auth-dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
    }

    .auth-dropdown.show {
        transform: translateY(0);
    }

    .auth-dropdown::before {
        display: none;
    }
}

@media screen and (max-width: 580px){
    .mh {
       padding: 8px 8px 0;
    }

    .mb {
        padding: 16px 8px 8px;
    }
}

/* ─────────────────── SUCCESS PAGE ─────────────────── */
.success-pg {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--nav-h));
    padding: 40px 20px
}

.success-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 48px 44px;
    max-width: 480px;
    width: 100%;
    text-align: center;
    box-shadow: var(--sh-m);
}

.success-menu {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap
}

@media (max-width: 520px) {
    .success-card {
        padding: 32px 24px
    }
}

.success-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--green-a);
    border: 2px solid rgba(22, 163, 74, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    animation: pop .45s cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes pop {
    from {
        transform: scale(0);
        opacity: 0
    }
    to {
        transform: scale(1);
        opacity: 1
    }
}

.success-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.4px;
    margin-bottom: 10px
}

.success-sub {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.65;
    margin-bottom: 28px
}

.success-info {
    background: var(--surface2);
    border-radius: var(--r);
    padding: 14px 18px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
    margin-top: 20px
}

/* ─────────────────── CABINET PAGE ─────────────────── */
.cab-wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 40px 40px 80px;
    display: grid;
    grid-template-columns:260px 1fr;
    gap: 32px;
    align-items: start
}

@media (max-width: 1100px) {
    .cab-wrap {
        grid-template-columns:220px 1fr;
        gap: 16px;
        padding: 32px 20px 80px
    }
}

@media (max-width: 768px) {
    .cab-wrap {
        grid-template-columns:1fr;
        padding: 16px 16px 60px
    }
}

.cab-sidebar-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    position: sticky;
    top: calc(var(--nav-h) + 20px)
}

.cab-user-block {
    padding: 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px
}

.cab-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--r-lg);
    background: var(--primary-a);
    border: 1.5px solid rgba(59, 106, 234, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--primary)
}

.cab-phone {
    font-weight: 700;
    font-size: 14px
}

.phone-step-muted {
    color: var(--muted);
    font-size: 14px;
    margin-bottom: 20px
}

strong.text {
    color: var(--text);
}

.cab-since {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px
}

.cab-nav {
    padding: 8px
}

.cab-nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 12px;
    border-radius: var(--r);
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    border: none;
    background: none;
    font-family: 'DM Sans', sans-serif;
    text-align: left;
    transition: all .15s;
}

.cab-nav-item:hover {
    color: var(--text);
    background: var(--surface2)
}

.cab-nav-item.active {
    color: var(--primary);
    background: var(--primary-a);
    font-weight: 600
}

.cab-nav-item.danger {
    color: var(--red)
}

.cab-nav-item.danger:hover {
    background: var(--red-a)
}

.cab-nav-sep {
    height: 1px;
    background: var(--border);
    margin: 6px 8px
}

/* Cabinet sections */
.cab-sect {
    display: none
}

.cab-sect.active {
    display: block;
    animation: fadeUp .2s ease
}

.cab-sect-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.3px;
    margin-bottom: 22px
}

/* My card in cabinet */
.my-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 22px;
    margin-bottom: 14px
}

.my-card.expired {
    opacity: .7;
}

.my-card-grid {
    display: grid;
    grid-template-columns:1fr 1fr 1fr;
    gap: 14px;
    background: var(--surface2);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px
}

.my-card-grid-head {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--subtle);
    font-weight: 700;
    margin-bottom: 4px
}

.my-card-grid-body {
    font-weight: 700;
    font-size: 14px
}

.my-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px
}

.my-card-name {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 3px
}

.my-card-sub {
    font-size: 13px;
    color: var(--muted)
}

.prog {
    height: 6px;
    background: var(--border);
    border-radius: var(--r-s);
    overflow: hidden;
    margin-bottom: 8px
}

.prog-fill {
    height: 100%;
    background: var(--primary);
    border-radius: var(--r-s);
    transition: width .6s
}

.prog-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 14px
}

.stats-strip-next {
    padding: 8px;
}

.auto-note {
    border: 1px solid var(--primary-a);
    background: var(--surface2);
    border-radius: var(--r);
    padding: 10px 14px;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.auto-note strong {
    color: var(--text)
}

.my-card-acts {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

/* History table */
.hist-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden
}

.hist-footer {
    margin-top: 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    background: var(--surface2);
    border-radius: 10px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.55
}

.hist-table {
    width: 100%;
    border-collapse: collapse
}

.hist-table thead tr {
    border-bottom: 1px solid var(--border);
}

.hist-table th {
    padding: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--subtle);
    text-align: left
}

.hist-table td {
    padding: 8px;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;

    .abon-name {
        font-weight: 600;
    }

    .abon-date {
        color: var(--muted);
        font-weight: 500;
    }

    .btn, .abon-date {
        margin-top: 4px;
    }
}

.hist-table tbody tr:last-child td {
    border-bottom: none
}

.hist-table tbody tr:hover td {
    background: var(--bg)
}

@media (max-width: 700px) {
    .hist-wrap {
        overflow-x: auto
    }
}

/* Guest state */
.guest-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--nav-h));
    padding: 40px 20px
}

.guest-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 52px 44px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow: var(--sh-m)
}

@media (max-width: 520px) {
    .guest-card {
        padding: 36px 24px;
        border-radius: var(--r-lg)
    }
}

.guest-icon {
    font-size: 52px;
    margin-bottom: 20px;
    display: block
}

.guest-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.3px;
    margin-bottom: 10px
}

.guest-sub {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.65;
    margin-bottom: 28px
}

/* ─────────────────── PROMO PAGE ─────────────────── */
.promo-pg-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 44px 40px 80px
}

@media (max-width: 900px) {
    .promo-pg-wrap {
        padding: 32px 20px 60px
    }
}

@media (max-width: 480px) {
    .promo-pg-wrap {
        padding: 24px 16px 60px
    }
}

.promo-pg-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.4px;
    margin-bottom: 8px
}

.promo-pg-sub {
    font-size: 15px;
    color: var(--muted);
    margin-bottom: 36px
}

.promo-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 26px;
    margin-bottom: 16px;
    display: flex;
    gap: 20px;
    align-items: flex-start
}

@media (max-width: 600px) {
    .promo-item {
        flex-direction: column;
        gap: 14px
    }
}

.promo-item-ico {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: var(--primary-a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0
}

.promo-item-body {
    flex: 1;
    min-width: 0
}

.promo-item-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--primary);
    margin-bottom: 6px
}

.promo-item-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.2px;
    margin-bottom: 6px
}

.promo-item-desc {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.65;
    margin-bottom: 16px
}

.promo-push {
    background: linear-gradient(100deg, var(--primary-a), rgba(59, 106, 234, .03));
    border: 1.5px solid var(--primary-b);
    border-radius: var(--r-lg);
    padding: 24px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.promo-push-text {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 4px
}

.promo-push-sub {
    font-size: 14px;
    color: var(--muted)
}

/* ─────────────────── FOOTER ─────────────────── */
.footer {
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding: 16px 0 16px 0;
    @media (max-width: 900px) {
        padding: 16px 0 calc(16px + var(--nav-h)) 0;
    }
}

.footer-inner {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap
}

@media (max-width: 768px) {
    .footer-inner {
        padding: 0 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px
    }
}

.footer-links {
    display: flex;
    gap: 24px;
    flex-wrap: wrap
}

.footer-link {
    font-size: 13px;
    color: var(--muted);
    transition: color .15s
}

.footer-link:hover {
    color: var(--text)
}

.footer-c {
    font-size: 13px;
    color: var(--subtle)
}

/* ─────────────────── HOME PAGE ─────────────────── */
.home-wrap {
    max-width: 640px;
    margin: 0 auto;
    padding: 24px 40px 16px
}

@media (max-width: 900px) {
    .home-wrap {
        padding: 18px 20px 12px
    }
}

@media (max-width: 480px) {
    .home-wrap {
        padding: 14px 16px 10px
    }
}

/* greeting */
.home-greeting {
    margin-bottom: 14px
}

.home-greeting-time {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 5px
}

.home-greeting-name {
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.4px
}

/* ── ACTIVE AB CARD (compact) ── */
.ab-hero-card {
    background: var(--primary);
    border-radius: var(--r-lg);
    padding: 16px;
    color: #fff;
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ab-hero-card.mini {
    padding: 4px;
    margin-bottom: 0px;
}

.ab-hero-card::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    pointer-events: none;
}

/* Top row: name + badge */
.ab-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ab-hero-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    opacity: .7;
    margin-bottom: 2px
}

.ab-hero-name {
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1.2;

}

.ab-hero-sub {
    font-size: 11px;
    opacity: .65;
    margin-top: 1px
}

.ab-hero-badge {
    background: rgba(255, 255, 255, .18);
    border-radius: var(--r);
    padding: 3px 9px;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0
}

/* Stats inline row */
.ab-hero-stats {
    display: flex;
    gap: 4px;
}

.ab-hero-stat {
    background: rgba(255, 255, 255, .11);
    border-radius: var(--r);
    padding: 6px 10px;
    flex: 1;
    min-width: 0
}

.ab-hero-stat-k {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    opacity: .6;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.ab-hero-stat-v {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1px;
}

.ab-hero-stat-u {
    font-size: 9px;
    opacity: .6;
    margin-top: 1px
}

/* Progress */
.ab-hero-prog-row {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    opacity: .6;
    margin-bottom: 4px
}

.ab-hero-prog {
    height: 3px;
    background: rgba(255, 255, 255, .2);
    border-radius: var(--r-s);
    overflow: hidden;
    margin-bottom: 8px
}

.ab-hero-prog-fill {
    height: 100%;
    background: #fff;
    border-radius: var(--r-s);
    transition: width .6s
}

@media (max-width: 600px) {
    .ab-hero-prog-row, .ab-hero-prog {
        display: none
    }
}

/* Action buttons */
.ab-hero-actions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap
}

.ab-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: var(--r);
    font-size: 12px;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    transition: all .18s;
    border: none;
    white-space: nowrap;
}

.ab-hero-btn-white {
    background: #fff;
    color: var(--primary)
}

.ab-hero-btn-white:hover {
    background: rgba(255, 255, 255, .9)
}

.ab-hero-btn-outline {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .25)
}

.ab-hero-btn-outline:hover {
    background: rgba(255, 255, 255, .18)
}

/* ── EXPIRED AB CARD (compact) ── */
.ab-expired-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 14px 16px;
    margin-bottom: 10px;
}

.ab-expired-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px
}

.ab-expired-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--red-a);
    border: 1px solid rgba(220, 38, 38, .18);
    color: var(--red);
    padding: 3px 8px;
    border-radius: var(--r);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    flex-shrink: 0;
}

.ab-expired-name {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.2px;
    margin-bottom: 1px
}

.ab-expired-meta {
    font-size: 11px;
    color: var(--muted)
}

.ab-expired-stats {
    display: flex;
    gap: 6px;
    margin-bottom: 12px
}

.ab-expired-stat {
    background: var(--surface2);
    border-radius: var(--r);
    padding: 6px 10px;
    flex: 1
}

.ab-expired-stat-k {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--subtle);
    margin-bottom: 2px
}

.ab-expired-stat-v {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 800
}

.ab-expired-cta {
    background: var(--primary-a);
    border: 1.5px solid var(--primary-b);
    border-radius: var(--r);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ab-expired-cta-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 2px
}

.ab-expired-cta-name {
    font-weight: 700;
    font-size: 13px
}

.ab-expired-cta-price {
    font-size: 11px;
    color: var(--muted)
}

.ab-expired-cta-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0
}

.ab-expired-cta-val {
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 800
}

/* ── HISTORY ACCORDION ── */
.hist-accordion {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 10px
}

.hist-accordion-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    cursor: pointer;
    user-select: none;
    transition: background .15s;
}

.hist-accordion-head:hover {
    background: var(--surface2)
}

.hist-accordion-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px
}

.hist-accordion-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--subtle);
    background: var(--surface2);
    padding: 2px 7px;
    border-radius: var(--r-lg);
}

.hist-accordion-chev {
    color: var(--muted);
    transition: transform .22s;
    flex-shrink: 0
}

.hist-accordion.open .hist-accordion-chev {
    transform: rotate(180deg)
}

.hist-accordion-body {
    display: none;
    border-top: 1px solid var(--border)
}

.hist-accordion.open .hist-accordion-body {
    display: block;
}

.hist-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--border)
}

.hist-row:last-child {
    border-bottom: none
}

.hist-row-ico {
    width: 28px;
    height: 28px;
    border-radius: var(--r);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.hist-row-ico.back-blue-a {
    background: var(--blue-a);
}

@media (max-width: 480px) {
    .hist-row-ico {
        display: none
    }
}

.hist-row-body {
    flex: 1;
    min-width: 0
}

.hist-row-name {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.hist-row-date {
    font-size: 11px;
    color: var(--subtle);
    margin-top: 1px
}

.hist-row-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0
}

.hist-row-price {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 700
}

.hist-row-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: var(--r);
    font-size: 11px;
    font-weight: 600;
    border: 1.5px solid var(--primary-b);
    background: var(--primary-a);
    color: var(--primary);
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    white-space: nowrap;
    transition: all .15s;
}

.hist-row-btn:hover {
    background: var(--primary-b)
}

.hist-accordion-footer {
    padding: 9px 16px;
    background: var(--surface2);
    border-top: 1px solid var(--border);
    text-align: center
}

/* ─────────────────── UTILS ─────────────────── */
.hidden {
    display: none !important
}

.divider {
    height: 1px;
    background: var(--border);
    margin: 16px 0
}

.sr {
    font-size: 12px;
    color: var(--subtle);
    text-align: center;
    line-height: 1.6
}

.hist-accordion {
    margin-bottom: 0;

    .hist-accordion-title, .hist-row-name {
        color: var(--muted);
    }
}

.top-divider {
    border-top: 1px solid var(--border);
}

h2.catalog-h2 {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.3px;
}

.shedule-bottom {
    font-size: 12px;
    color: var(--muted);
}

.mt14px {
    margin-top: 14px;
}

.loading-icon {
    animation: spin 2s linear infinite;
    display: inline-block; /* важно для вращения */
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
} 
/* End */


/* Start:/local/templates/fc/components/bitrix/menu/top/style.min.css?1774273493490*/
ul.left-menu{list-style:none;margin:0;padding:0;margin-bottom:8px;position:relative}ul.left-menu li{padding:10px 16px;background:#f5f5f5 url(/local/templates/fc/components/bitrix/menu/top/images/left_menu_bg.gif) top repeat-x}ul.left-menu li a{font-size:100%;color:#bc262c;font-weight:bold;text-decoration:none}ul.left-menu li a:visited{color:#bc262c}ul.left-menu li a:hover{color:#bc262c}ul.left-menu li a.selected:link,ul.left-menu li a.selected:visited,ul.left-menu li a.selected:active,ul.left-menu li a.selected:hover{color:#fc8d3d}
/* End */


/* Start:/local/templates/fc/components/bitrix/menu/mobile_bottom/style.min.css?1774259773490*/
ul.left-menu{list-style:none;margin:0;padding:0;margin-bottom:8px;position:relative}ul.left-menu li{padding:10px 16px;background:#f5f5f5 url(/local/templates/fc/components/bitrix/menu/mobile_bottom/images/left_menu_bg.gif) top repeat-x}ul.left-menu li a{font-size:100%;color:#bc262c;font-weight:bold;text-decoration:none}ul.left-menu li a:visited{color:#bc262c}ul.left-menu li a:hover{color:#bc262c}ul.left-menu li a.selected:link,ul.left-menu li a.selected:visited,ul.left-menu li a.selected:active,ul.left-menu li a.selected:hover{color:#fc8d3d}
/* End */


/* Start:/local/templates/fc/components/bitrix/menu/mobile/style.min.css?1774270673490*/
ul.left-menu{list-style:none;margin:0;padding:0;margin-bottom:8px;position:relative}ul.left-menu li{padding:10px 16px;background:#f5f5f5 url(/local/templates/fc/components/bitrix/menu/mobile/images/left_menu_bg.gif) top repeat-x}ul.left-menu li a{font-size:100%;color:#bc262c;font-weight:bold;text-decoration:none}ul.left-menu li a:visited{color:#bc262c}ul.left-menu li a:hover{color:#bc262c}ul.left-menu li a.selected:link,ul.left-menu li a.selected:visited,ul.left-menu li a.selected:active,ul.left-menu li a.selected:hover{color:#fc8d3d}
/* End */


/* Start:/local/templates/fc/components/bitrix/menu/bottom/style.min.css?1774275161490*/
ul.left-menu{list-style:none;margin:0;padding:0;margin-bottom:8px;position:relative}ul.left-menu li{padding:10px 16px;background:#f5f5f5 url(/local/templates/fc/components/bitrix/menu/bottom/images/left_menu_bg.gif) top repeat-x}ul.left-menu li a{font-size:100%;color:#bc262c;font-weight:bold;text-decoration:none}ul.left-menu li a:visited{color:#bc262c}ul.left-menu li a:hover{color:#bc262c}ul.left-menu li a.selected:link,ul.left-menu li a.selected:visited,ul.left-menu li a.selected:active,ul.left-menu li a.selected:hover{color:#fc8d3d}
/* End */
/* /local/templates/fc/css/googlefonts.css?177373219315672 */
/* /local/templates/fc/css/style.css?177744759360084 */
/* /local/templates/fc/components/bitrix/menu/top/style.min.css?1774273493490 */
/* /local/templates/fc/components/bitrix/menu/mobile_bottom/style.min.css?1774259773490 */
/* /local/templates/fc/components/bitrix/menu/mobile/style.min.css?1774270673490 */
/* /local/templates/fc/components/bitrix/menu/bottom/style.min.css?1774275161490 */