/* ==========================================================================
   Design tokens
   The two palettes mirror the light/dark themes of the source design.
   ========================================================================== */

:root {
    --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --container: 1240px;
    --gutter: 40px;

    /* brand colours — identical in both themes */
    --teal: #0E9C9C;
    --teal-dark: #0B7E7E;
    --blue: #2E90D9;
    --blue-dark: #2278BE;
    --green: #8cc04b;
    --green-dark: #71A438;
    --purple: #7C3AED;
    --success: #1F9D57;
    --star: #F5A623;

    --page-bg: #F1F4F7;
    --bar-bg: rgba(255, 255, 255, 0.85);
    --panel: #ffffff;
    --panel-border: #EAEEF2;
    --card-border: #E7ECF0;
    --seg-bg: #F4F6F8;
    --text: #1F2E3D;
    --text-2: #5A6B7B;
    --muted: #93A1B0;
    --row-border: #F1F4F7;
    --hover-row: #F7F9FB;
    --input-bg: #ffffff;
    --input-border: #E2E8EE;
    --ctrl-bg: #ffffff;
    --ctrl-border: #E2E8EE;
    --dd-bg: #ffffff;
    --dd-border: #EEF1F4;
    --tag-bg: #E7F5F5;
    --img-bg: #EEF2F5;
    --footer-bg: #F1F4F7;
    --pre-bg: #EAF3FB;
    --pre-border: #D3E6F5;
    --card-hover-border: #D6DEE6;
    --card-hover-shadow: 0 16px 34px -20px rgba(38, 55, 74, 0.32);

    /* accent tiles (icon chips) */
    --accent-blue-bg: #EAF0FE;
    --accent-blue-fg: #2E90D9;
    --accent-purple-bg: #F0E9FE;
    --accent-purple-fg: #7C3AED;
    --accent-amber-bg: #FBF1E1;
    --accent-amber-fg: #C67A1B;
    --accent-orange-bg: #FBF1E1;
    --accent-orange-fg: #E0912E;
    --accent-teal-bg: #E7F5F5;
    --accent-teal-fg: #0E9C9C;
    --accent-red-bg: #FDEEEF;
    --accent-red-fg: #D83A54;
    --accent-rose-bg: #FDEEEF;
    --accent-rose-fg: #E8455E;
    --accent-violet-bg: #ECECFB;
    --accent-violet-fg: #5757C9;
    --accent-green-bg: #E7F6EE;
    --accent-green-fg: #1F9D57;

    /* catalogue type badges */
    --type-kg-bg: #E1F3F3;
    --type-kg-fg: #0B7E7E;
    --type-kg-color: #0E9C9C;
    --type-nursery-bg: #FBF1E1;
    --type-nursery-fg: #C67A1B;
    --type-nursery-color: #E0912E;
    --type-center-bg: #EAF0FE;
    --type-center-fg: #2E90D9;
    --type-center-color: #2E90D9;
    --type-dev-bg: #ECECFB;
    --type-dev-fg: #5757C9;
    --type-dev-color: #6C6CE5;
    --type-sport-bg: #E7F6EE;
    --type-sport-fg: #1F9D57;
    --type-sport-color: #1F9D57;
    --type-art-bg: #FBEBE2;
    --type-art-fg: #C15A34;
    --type-art-color: #D9734E;
    --type-music-bg: #ECECFB;
    --type-music-fg: #5757C9;
    --type-music-color: #6C6CE5;
    --type-lang-bg: #EAF0FE;
    --type-lang-fg: #2E90D9;
    --type-lang-color: #2E90D9;
}

[data-bs-theme='dark'] {
    --page-bg: #101922;
    --bar-bg: rgba(16, 25, 34, 0.85);
    --panel: #1B2A38;
    --panel-border: #263644;
    --card-border: #263644;
    --seg-bg: #18262F;
    --text: #EAF0F5;
    --text-2: #9DAAB6;
    --muted: #6D7B88;
    --row-border: #22323F;
    --hover-row: #22323F;
    --input-bg: #22333F;
    --input-border: #2C3E4B;
    --ctrl-bg: #22333F;
    --ctrl-border: #2C3E4B;
    --dd-bg: #1F303E;
    --dd-border: #2C3E4B;
    --tag-bg: #123333;
    --img-bg: #22333F;
    --footer-bg: #101922;
    --pre-bg: #16283A;
    --pre-border: #22364A;
    --card-hover-border: #33495B;
    --card-hover-shadow: 0 16px 34px -20px rgba(0, 0, 0, 0.6);

    --accent-blue-bg: #182642;
    --accent-blue-fg: #7CA4F5;
    --accent-purple-bg: #251C3D;
    --accent-purple-fg: #A98BF5;
    --accent-amber-bg: #3A2E17;
    --accent-amber-fg: #E7A94A;
    --accent-orange-bg: #3A2E17;
    --accent-orange-fg: #E7A94A;
    --accent-teal-bg: #123333;
    --accent-teal-fg: #3FD0D0;
    --accent-red-bg: #3A1F26;
    --accent-red-fg: #F0748A;
    --accent-rose-bg: #3A1F26;
    --accent-rose-fg: #F0748A;
    --accent-violet-bg: #252540;
    --accent-violet-fg: #9C9CF2;
    --accent-green-bg: #12301F;
    --accent-green-fg: #4DD48A;

    --type-kg-bg: #123333;
    --type-kg-fg: #3FD0D0;
    --type-nursery-bg: #3A2E17;
    --type-nursery-fg: #E7A94A;
    --type-center-bg: #182642;
    --type-center-fg: #7CA4F5;
    --type-dev-bg: #252540;
    --type-dev-fg: #9C9CF2;
    --type-sport-bg: #12301F;
    --type-sport-fg: #4DD48A;
    --type-art-bg: #33221A;
    --type-art-fg: #EE9067;
    --type-music-bg: #252540;
    --type-music-fg: #9C9CF2;
    --type-lang-bg: #182642;
    --type-lang-fg: #7CA4F5;
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font);
    background: var(--page-bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--teal);
    text-decoration: none;
}

a:hover {
    color: var(--teal-dark);
}

h1,
h2,
h3 {
    margin: 0;
    letter-spacing: -0.01em;
}

button {
    font-family: inherit;
}

img {
    display: block;
}

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.is-hidden {
    display: none !important;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Material Symbols */
.msi {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   Accent tiles
   ========================================================================== */

.accent-blue { --accent-bg: var(--accent-blue-bg); --accent-fg: var(--accent-blue-fg); }
.accent-purple { --accent-bg: var(--accent-purple-bg); --accent-fg: var(--accent-purple-fg); }
.accent-amber { --accent-bg: var(--accent-amber-bg); --accent-fg: var(--accent-amber-fg); }
.accent-orange { --accent-bg: var(--accent-orange-bg); --accent-fg: var(--accent-orange-fg); }
.accent-teal { --accent-bg: var(--accent-teal-bg); --accent-fg: var(--accent-teal-fg); }
.accent-red { --accent-bg: var(--accent-red-bg); --accent-fg: var(--accent-red-fg); }
.accent-rose { --accent-bg: var(--accent-rose-bg); --accent-fg: var(--accent-rose-fg); }
.accent-violet { --accent-bg: var(--accent-violet-bg); --accent-fg: var(--accent-violet-fg); }
.accent-green { --accent-bg: var(--accent-green-bg); --accent-fg: var(--accent-green-fg); }

.icon-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--accent-bg);
    color: var(--accent-fg);
}

.icon-tile .msi {
    font-size: 22px;
}

.icon-tile--sm {
    width: 34px;
    height: 34px;
    border-radius: 9px;
}

.icon-tile--sm .msi {
    font-size: 19px;
}

.icon-tile--lg {
    width: 46px;
    height: 46px;
    border-radius: 13px;
}

.icon-tile--lg .msi {
    font-size: 24px;
}

/* ==========================================================================
   Catalogue type badges
   ========================================================================== */

.type-kg { --type-bg: var(--type-kg-bg); --type-fg: var(--type-kg-fg); --type-color: var(--type-kg-color); }
.type-nursery { --type-bg: var(--type-nursery-bg); --type-fg: var(--type-nursery-fg); --type-color: var(--type-nursery-color); }
.type-center { --type-bg: var(--type-center-bg); --type-fg: var(--type-center-fg); --type-color: var(--type-center-color); }
.type-dev { --type-bg: var(--type-dev-bg); --type-fg: var(--type-dev-fg); --type-color: var(--type-dev-color); }
.type-sport { --type-bg: var(--type-sport-bg); --type-fg: var(--type-sport-fg); --type-color: var(--type-sport-color); }
.type-art { --type-bg: var(--type-art-bg); --type-fg: var(--type-art-fg); --type-color: var(--type-art-color); }
.type-music { --type-bg: var(--type-music-bg); --type-fg: var(--type-music-fg); --type-color: var(--type-music-color); }
.type-lang { --type-bg: var(--type-lang-bg); --type-fg: var(--type-lang-fg); --type-color: var(--type-lang-color); }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 12.5px;
    padding: 6px 12px;
    border-radius: 20px;
}

.badge .msi {
    font-size: 16px;
}

.badge--type {
    background: var(--type-bg);
    color: var(--type-fg);
}

.badge--rating {
    background: var(--tag-bg);
    color: var(--text-2);
    padding: 6px 11px;
}

.badge--rating b {
    color: var(--text);
    font-weight: 800;
}

.badge--rating .msi {
    font-size: 16px;
    color: var(--star);
}

.badge--sm {
    font-size: 12px;
    padding: 5px 11px;
}

.badge--sm .msi {
    font-size: 15px;
}

.tag {
    background: var(--tag-bg);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 8px;
}

/* ==========================================================================
   Buttons & form controls
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 10px;
    padding: 0 20px;
    height: 42px;
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.btn .msi {
    font-size: 19px;
}

.btn--green {
    background: var(--green);
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(134, 188, 37, 0.5);
}

.btn--green:hover {
    background: var(--green-dark);
    color: #fff;
}

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

.btn--blue:hover {
    background: var(--blue-dark);
    color: #fff;
}

.btn--ghost {
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--card-border);
}

.btn--ghost:hover {
    background: var(--hover-row);
    color: var(--text);
}

.btn--outline {
    background: var(--ctrl-bg);
    color: var(--text);
    border: 1px solid var(--ctrl-border);
    padding: 0 16px;
    gap: 7px;
}

.btn--outline:hover {
    background: var(--hover-row);
    color: var(--text);
}

.btn--outline .msi {
    color: var(--green);
}

.btn--control {
    height: 46px;
    background: var(--ctrl-bg);
    color: var(--green);
    border: 1px solid var(--ctrl-border);
    border-radius: 12px;
    padding: 0 16px;
    font-size: 14px;
}

.btn--icon {
    width: 46px;
    height: 46px;
    padding: 0;
    flex: 0 0 auto;
    background: var(--ctrl-bg);
    border: 1px solid var(--ctrl-border);
    border-radius: 12px;
    color: var(--text-2);
}

.btn--hero {
    height: auto;
    padding: 16px 26px;
    border-radius: 14px;
    font-size: 15.5px;
    gap: 9px;
}

.btn--hero .msi {
    font-size: 20px;
}

.btn--hero.btn--green {
    box-shadow: 0 12px 26px -10px rgba(134, 188, 37, 0.5);
}

.btn--icon .msi {
    font-size: 24px;
}

.btn--card {
    flex: 1;
    height: auto;
    padding: 12px 16px;
    border-radius: 12px;
}

.btn--pill {
    height: auto;
    padding: 9px 16px;
    font-size: 13px;
}

.btn:disabled {
    cursor: not-allowed;
}

.field {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 46px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 12px;
    padding: 0 14px;
}

.field .msi {
    font-size: 20px;
    color: var(--muted);
    flex: 0 0 auto;
}

.field__input {
    width: 100%;
    border: none;
    outline: none;
    padding: 0;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: var(--text);
}

.field--grow {
    flex: 1;
    min-width: 240px;
}

.field--static {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

/* ==========================================================================
   Dropdown (language / country pickers)
   ========================================================================== */

.dropdown {
    position: relative;
}

.dropdown__toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    background: transparent;
    color: var(--text-2);
    border: none;
    padding: 0 8px;
    font-weight: 700;
    font-size: 12.5px;
    cursor: pointer;
}

.dropdown__toggle .msi {
    font-size: 17px;
}

.dropdown__toggle .dropdown__caret {
    font-size: 16px;
    color: var(--muted);
}

.dropdown__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 190px;
    background: var(--dd-bg);
    border: 1px solid var(--dd-border);
    border-radius: 12px;
    box-shadow: 0 18px 40px -18px rgba(20, 30, 40, 0.45);
    padding: 6px;
    z-index: 50;
    display: none;
    flex-direction: column;
}

.dropdown.is-open .dropdown__menu {
    display: flex;
}

.dropdown__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    background: none;
    border: none;
    text-align: left;
}

.dropdown__item:hover {
    background: var(--hover-row);
    color: var(--text);
}

.dropdown__item.is-active {
    font-weight: 700;
    color: var(--teal);
}

.dropdown__item .msi {
    font-size: 18px;
}

.dropdown__item-check {
    visibility: hidden;
}

.dropdown__item.is-active .dropdown__item-check {
    visibility: visible;
}

.dropdown__flag {
    font-size: 17px;
    line-height: 1;
}

.dropdown__menu--narrow {
    width: 170px;
}

.dropdown__country {
    display: flex;
    align-items: center;
    gap: 9px;
}

/* ==========================================================================
   Top bar
   ========================================================================== */

.topbar {
    background: var(--pre-bg);
    border-bottom: 1px solid var(--pre-border);
}

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.topbar__phone {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 800;
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
}

.topbar__phone .msi {
    font-size: 17px;
    color: var(--blue);
}

.topbar__tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topbar__divider {
    width: 1px;
    height: 16px;
    background: var(--panel-border);
}

.theme-toggle {
    width: 30px;
    height: 30px;
    background: transparent;
    color: var(--text-2);
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.theme-toggle .msi {
    font-size: 18px;
}

/* The icon shows the theme the button switches *to*: a moon while in light. */
[data-bs-theme='light'] .theme-toggle__light,
[data-bs-theme='dark'] .theme-toggle__dark {
    display: none;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--bar-bg);
    border-bottom: 1px solid var(--panel-border);
    backdrop-filter: blur(8px);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.site-header__left {
    display: flex;
    align-items: center;
    gap: 34px;
}

.site-header__logo {
    height: 38px;
    width: auto;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.site-nav__link {
    padding: 9px 13px;
    border-radius: 9px;
    font-weight: 700;
    font-size: 14px;
    color: var(--text-2);
}

.site-nav__link:hover {
    background: var(--hover-row);
    color: var(--text);
}

.site-header__right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-header__toggle {
    display: none;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    background: var(--ctrl-bg);
    border: 1px solid var(--ctrl-border);
    border-radius: 10px;
    color: var(--text-2);
    cursor: pointer;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    background: var(--footer-bg);
    border-top: 1px solid var(--panel-border);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 32px;
    padding-top: 44px;
    padding-bottom: 28px;
}

.site-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.site-footer__logo {
    height: 40px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
}

.site-footer__about {
    font-size: 13.5px;
    color: var(--text-2);
    font-weight: 500;
    line-height: 1.55;
    max-width: 280px;
}

.site-footer__socials {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.social {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--ctrl-bg);
    border: 1px solid var(--ctrl-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-2);
}

.social .msi {
    font-size: 20px;
}

.site-footer__col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.site-footer__col-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.site-footer__link {
    font-size: 14px;
    color: var(--text-2);
    font-weight: 600;
}

.site-footer__link:hover {
    color: var(--text);
}

.site-footer__bottom {
    border-top: 1px solid var(--panel-border);
}

.site-footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 18px;
    padding-bottom: 18px;
}

.site-footer__copy,
.site-footer__legal a {
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
}

.site-footer__legal {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.site-footer__legal a {
    font-weight: 600;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991px) {
    :root {
        --gutter: 20px;
    }

    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        background: var(--panel);
        border-bottom: 1px solid var(--panel-border);
        padding: 10px var(--gutter) 16px;
    }

    .site-header.is-open .site-nav {
        display: flex;
    }

    .site-header__toggle {
        display: flex;
    }

    .site-header__inner {
        position: relative;
    }

    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    /* The same link stays reachable inside the collapsed navigation. */
    .site-header__demo {
        display: none;
    }
}

@media (max-width: 575px) {
    .site-footer__grid {
        grid-template-columns: 1fr;
    }
}