/*
|--------------------------------------------------------------------------
| Файл: /assets/css/app.css
|--------------------------------------------------------------------------
| Тайлбар:
| Gobi Cinema нийтийн веб сайтын үндсэн дизайн.
|
| Фонт:
| - Noto Serif        → киноны нэр, том гарчиг
| - Roboto Condensed  → UI, цэс, товч, мэдээлэл
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Google Fonts
|--------------------------------------------------------------------------
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;500;600;700;800&family=Roboto+Condensed:wght@300;400;500;600;700&display=swap');


/*
|--------------------------------------------------------------------------
| Root
|--------------------------------------------------------------------------
*/

:root {
    --font-display:
            'Noto Serif',
            Georgia,
            serif;

    --font-ui:
            'Roboto Condensed',
            Arial,
            sans-serif;


    /*
    |--------------------------------------------------------------------------
    | Background
    |--------------------------------------------------------------------------
    */

    --color-bg: #08090c;
    --color-bg-soft: #0d0f14;
    --color-bg-elevated: #12151b;
    --color-bg-card: #14171d;
    --color-bg-card-hover: #181c23;


    /*
    |--------------------------------------------------------------------------
    | Text
    |--------------------------------------------------------------------------
    */

    --color-text: #f4f4f2;
    --color-text-soft: #c8c9cc;
    --color-text-muted: #888d96;
    --color-text-faint: #626770;


    /*
    |--------------------------------------------------------------------------
    | Border
    |--------------------------------------------------------------------------
    */

    --color-border: rgba(255, 255, 255, 0.09);
    --color-border-strong: rgba(255, 255, 255, 0.16);


    /*
    |--------------------------------------------------------------------------
    | Brand
    |--------------------------------------------------------------------------
    */

    --color-accent: #dc2626;
    --color-accent-hover: #ef4444;
    --color-accent-dark: #991b1b;
    --color-accent-soft: rgba(220, 38, 38, 0.14);


    /*
    |--------------------------------------------------------------------------
    | Status
    |--------------------------------------------------------------------------
    */

    --color-success: #16a34a;
    --color-warning: #f59e0b;
    --color-danger: #dc2626;
    --color-info: #2563eb;


    /*
    |--------------------------------------------------------------------------
    | Layout
    |--------------------------------------------------------------------------
    */

    --container-width: 1440px;
    --container-padding: 32px;

    --header-height: 82px;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;


    /*
    |--------------------------------------------------------------------------
    | Shadow
    |--------------------------------------------------------------------------
    */

    --shadow-sm:
            0 8px 22px rgba(0, 0, 0, 0.18);

    --shadow-md:
            0 20px 50px rgba(0, 0, 0, 0.32);

    --shadow-lg:
            0 32px 90px rgba(0, 0, 0, 0.46);


    /*
    |--------------------------------------------------------------------------
    | Transition
    |--------------------------------------------------------------------------
    */

    --transition-fast: 160ms ease;
    --transition-normal: 240ms ease;
    --transition-slow: 380ms ease;
}


/*
|--------------------------------------------------------------------------
| Reset
|--------------------------------------------------------------------------
*/

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

html {
    margin: 0;
    padding: 0;

    scroll-behavior: smooth;

    background:
            var(--color-bg);
}

body {
    margin: 0;
    padding: 0;

    min-width: 320px;
    min-height: 100vh;

    background:
            var(--color-bg);

    color:
            var(--color-text);

    font-family:
            var(--font-ui);

    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.mobile-menu-open {
    overflow: hidden;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color:
            transparent;
}

button {
    border: 0;
}

a {
    color: inherit;

    text-decoration: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
}

::selection {
    background:
            var(--color-accent);

    color:
            #ffffff;
}


/*
|--------------------------------------------------------------------------
| Scrollbar
|--------------------------------------------------------------------------
*/

html {
    scrollbar-color:
            #333841
            #0a0b0f;
}

body::-webkit-scrollbar {
    width: 10px;
}

body::-webkit-scrollbar-track {
    background:
            #0a0b0f;
}

body::-webkit-scrollbar-thumb {
    background:
            #323740;

    border:
            2px solid #0a0b0f;

    border-radius:
            999px;
}

body::-webkit-scrollbar-thumb:hover {
    background:
            #454b56;
}


/*
|--------------------------------------------------------------------------
| Site
|--------------------------------------------------------------------------
*/

.cinema-site {
    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 100vh;

    overflow: clip;
}

.site-main {
    flex: 1;

    width: 100%;
}


/*
|--------------------------------------------------------------------------
| Container
|--------------------------------------------------------------------------
*/

.container {
    width:
            min(
                    calc(
                            100% - (
                            var(--container-padding) * 2
                            )
                    ),
                    var(--container-width)
            );

    margin-inline: auto;
}


/*
|--------------------------------------------------------------------------
| Typography
|--------------------------------------------------------------------------
*/

.display-title,
.movie-title,
.section-title,
.cinema-heading {
    font-family:
            var(--font-display);

    letter-spacing:
            -0.025em;
}

.display-title {
    font-size:
            clamp(
                    42px,
                    6vw,
                    92px
            );

    font-weight: 700;
    line-height: 1.02;
}

.section-title {
    margin-bottom: 0;

    font-size:
            clamp(
                    28px,
                    3vw,
                    42px
            );

    font-weight: 700;
    line-height: 1.15;
}

.section-kicker {
    margin-bottom: 8px;

    color:
            var(--color-accent-hover);

    font-family:
            var(--font-ui);

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}

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

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


/*
|--------------------------------------------------------------------------
| Generic section
|--------------------------------------------------------------------------
*/

.section {
    padding:
            76px 0;
}

.section--compact {
    padding:
            48px 0;
}

.section-header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 28px;

    margin-bottom: 30px;
}

.section-header__text {
    max-width: 720px;
}

.section-header__description {
    margin:
            10px 0 0;

    max-width: 620px;

    color:
            var(--color-text-muted);

    font-size: 17px;
}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.site-header {
    position: sticky;
    z-index: 1000;
    top: 0;

    width: 100%;

    background:
            rgba(8, 9, 12, 0.86);

    border-bottom:
            1px solid var(--color-border);

    -webkit-backdrop-filter:
            blur(18px);

    backdrop-filter:
            blur(18px);
}

.site-header__inner {
    display: flex;

    align-items: center;
    justify-content: space-between;

    width:
            min(
                    calc(
                            100% - (
                            var(--container-padding) * 2
                            )
                    ),
                    var(--container-width)
            );

    min-height:
            var(--header-height);

    margin-inline: auto;

    gap: 36px;
}


/*
|--------------------------------------------------------------------------
| Brand
|--------------------------------------------------------------------------
*/

.site-brand,
.footer-brand {
    display: inline-flex;

    align-items: center;

    flex-shrink: 0;

    gap: 11px;
}

.site-brand__mark,
.footer-brand__mark {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;
}

.site-brand__mark img,
.footer-brand__mark img {
    display: block;

    width: 42px;
    height: 42px;

    max-width: none;

    object-fit: contain;
}

.site-brand__text,
.footer-brand__text {
    display: flex;
    flex-direction: column;

    justify-content: center;

    line-height: 1;
}

.site-brand__name,
.footer-brand__name {
    color:
            #ffffff;

    font-family:
            var(--font-ui);

    font-size: 21px;
    font-weight: 700;

    letter-spacing: 0.075em;
}

.site-brand__sub,
.footer-brand__sub {
    margin-top: 4px;

    color:
            var(--color-text-muted);

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.32em;
}


/*
|--------------------------------------------------------------------------
| Desktop navigation
|--------------------------------------------------------------------------
*/

.site-nav {
    display: flex;

    align-items: center;
    justify-content: center;

    flex: 1;

    gap: 8px;
}

.site-nav__link {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding:
            0 17px;

    border-radius:
            var(--radius-sm);

    color:
            var(--color-text-soft);

    font-size: 15px;
    font-weight: 500;

    letter-spacing: 0.015em;

    transition:
            color var(--transition-fast),
            background var(--transition-fast);
}

.site-nav__link:hover {
    color:
            #ffffff;

    background:
            rgba(255, 255, 255, 0.045);
}

.site-nav__link.is-active {
    color:
            #ffffff;
}

.site-nav__link.is-active::after {
    position: absolute;

    right: 17px;
    bottom: 4px;
    left: 17px;

    height: 2px;

    border-radius:
            999px;

    background:
            var(--color-accent);

    content: '';
}


/*
|--------------------------------------------------------------------------
| Header actions
|--------------------------------------------------------------------------
*/

.site-header__actions {
    display: flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;
}

.header-booking-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding:
            0 19px;

    gap: 9px;

    border-radius:
            10px;

    background:
            var(--color-accent);

    color:
            #ffffff;

    font-size: 14px;
    font-weight: 600;

    letter-spacing: 0.02em;

    box-shadow:
            0 9px 24px rgba(220, 38, 38, 0.18);

    transition:
            background var(--transition-fast),
            transform var(--transition-fast),
            box-shadow var(--transition-fast);
}

.header-booking-button:hover {
    background:
            var(--color-accent-hover);

    transform:
            translateY(-1px);

    box-shadow:
            0 12px 28px rgba(220, 38, 38, 0.28);
}

.header-booking-button:active {
    transform:
            translateY(0);
}

.header-booking-button__icon {
    width: 18px;
    height: 18px;
}


/*
|--------------------------------------------------------------------------
| Mobile menu button
|--------------------------------------------------------------------------
*/

.mobile-menu-button {
    display: none;

    position: relative;

    width: 44px;
    height: 44px;

    padding: 0;

    align-items: center;
    justify-content: center;

    border-radius:
            10px;

    background:
            rgba(255, 255, 255, 0.055);

    cursor: pointer;
}

.mobile-menu-button span {
    position: absolute;

    width: 20px;
    height: 2px;

    border-radius:
            999px;

    background:
            #ffffff;

    transition:
            transform var(--transition-normal),
            opacity var(--transition-normal);
}

.mobile-menu-button span:nth-child(1) {
    transform:
            translateY(-6px);
}

.mobile-menu-button span:nth-child(2) {
    transform:
            translateY(0);
}

.mobile-menu-button span:nth-child(3) {
    transform:
            translateY(6px);
}

.mobile-menu-button.is-active span:nth-child(1) {
    transform:
            rotate(45deg);
}

.mobile-menu-button.is-active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-button.is-active span:nth-child(3) {
    transform:
            rotate(-45deg);
}


/*
|--------------------------------------------------------------------------
| Mobile navigation
|--------------------------------------------------------------------------
*/

.mobile-navigation {
    position: relative;
    z-index: 1002;

    width: 100%;

    background:
            #0d0f14;

    border-top:
            1px solid var(--color-border);

    border-bottom:
            1px solid var(--color-border);

    box-shadow:
            var(--shadow-md);
}

.mobile-navigation[hidden] {
    display: none;
}

.mobile-navigation__inner {
    display: flex;
    flex-direction: column;

    width:
            min(
                    calc(100% - 40px),
                    720px
            );

    margin-inline: auto;

    padding:
            14px 0 20px;
}

.mobile-navigation__link {
    display: flex;

    align-items: center;

    min-height: 52px;

    padding:
            0 10px;

    border-bottom:
            1px solid var(--color-border);

    color:
            var(--color-text-soft);

    font-size: 17px;
    font-weight: 500;
}

.mobile-navigation__link.is-active {
    color:
            #ffffff;
}

.mobile-navigation__booking {
    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 50px;

    margin-top: 16px;

    padding:
            0 20px;

    border-radius:
            10px;

    background:
            var(--color-accent);

    color:
            #ffffff;

    font-size: 16px;
    font-weight: 600;
}

.mobile-navigation-overlay {
    position: fixed;
    z-index: 990;

    inset: 0;

    width: 100%;
    height: 100%;

    padding: 0;

    background:
            rgba(0, 0, 0, 0.62);

    border: 0;

    cursor: default;

    -webkit-backdrop-filter:
            blur(4px);

    backdrop-filter:
            blur(4px);
}

.mobile-navigation-overlay[hidden] {
    display: none;
}


/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/

.btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding:
            0 22px;

    gap: 9px;

    border:
            1px solid transparent;

    border-radius:
            10px;

    cursor: pointer;

    font-family:
            var(--font-ui);

    font-size: 15px;
    font-weight: 600;

    line-height: 1;

    transition:
            background var(--transition-fast),
            border-color var(--transition-fast),
            color var(--transition-fast),
            transform var(--transition-fast);
}

.btn:hover {
    transform:
            translateY(-1px);
}

.btn:active {
    transform:
            translateY(0);
}

.btn-primary {
    background:
            var(--color-accent);

    color:
            #ffffff;
}

.btn-primary:hover {
    background:
            var(--color-accent-hover);
}

.btn-secondary {
    background:
            rgba(255, 255, 255, 0.07);

    border-color:
            var(--color-border-strong);

    color:
            #ffffff;
}

.btn-secondary:hover {
    background:
            rgba(255, 255, 255, 0.11);
}

.btn-outline {
    background:
            transparent;

    border-color:
            var(--color-border-strong);

    color:
            var(--color-text);
}

.btn-outline:hover {
    background:
            rgba(255, 255, 255, 0.055);
}

.btn-block {
    width: 100%;
}

.btn:disabled,
.btn.is-disabled {
    opacity: 0.45;

    cursor: not-allowed;

    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| Links
|--------------------------------------------------------------------------
*/

.text-link {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color:
            var(--color-text-soft);

    font-size: 15px;
    font-weight: 600;

    transition:
            color var(--transition-fast);
}

.text-link:hover {
    color:
            #ffffff;
}


/*
|--------------------------------------------------------------------------
| Badge
|--------------------------------------------------------------------------
*/

.badge {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 27px;

    padding:
            0 9px;

    border-radius:
            6px;

    background:
            rgba(255, 255, 255, 0.08);

    color:
            var(--color-text-soft);

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 0.03em;
}

.badge-age {
    border:
            1px solid rgba(255, 255, 255, 0.18);

    background:
            rgba(0, 0, 0, 0.36);

    color:
            #ffffff;
}

.badge-accent {
    background:
            var(--color-accent);

    color:
            #ffffff;
}


/*
|--------------------------------------------------------------------------
| Card
|--------------------------------------------------------------------------
*/

.card {
    border:
            1px solid var(--color-border);

    border-radius:
            var(--radius-md);

    background:
            var(--color-bg-card);

    box-shadow:
            var(--shadow-sm);
}


/*
|--------------------------------------------------------------------------
| Movie card base
|--------------------------------------------------------------------------
*/

.movie-card {
    position: relative;

    min-width: 0;
}

.movie-card__poster {
    position: relative;

    aspect-ratio:
            2 / 3;

    overflow: hidden;

    border-radius:
            var(--radius-md);

    background:
            var(--color-bg-elevated);

    box-shadow:
            var(--shadow-md);
}

.movie-card__poster img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
            transform var(--transition-slow),
            filter var(--transition-slow);
}

.movie-card:hover
.movie-card__poster img {
    transform:
            scale(1.035);
}

.movie-card__poster::after {
    position: absolute;

    inset: 0;

    background:
            linear-gradient(
                    to top,
                    rgba(0, 0, 0, 0.55),
                    transparent 40%
            );

    content: '';

    pointer-events: none;
}

.movie-card__body {
    padding:
            16px 3px 0;
}

.movie-card__title {
    margin:
            0;

    color:
            #ffffff;

    font-family:
            var(--font-display);

    font-size: 20px;
    font-weight: 650;
    line-height: 1.24;
}

.movie-card__meta {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap:
            6px 10px;

    margin-top:
            8px;

    color:
            var(--color-text-muted);

    font-size: 14px;
}

.movie-card__meta-separator {
    width: 3px;
    height: 3px;

    border-radius:
            50%;

    background:
            var(--color-text-faint);
}


/*
|--------------------------------------------------------------------------
| Forms
|--------------------------------------------------------------------------
*/

.form-group {
    margin-bottom:
            20px;
}

.form-label {
    display: block;

    margin-bottom:
            7px;

    color:
            var(--color-text-soft);

    font-size: 14px;
    font-weight: 600;
}

.form-control {
    display: block;

    width: 100%;
    min-height: 50px;

    padding:
            11px 14px;

    border:
            1px solid var(--color-border-strong);

    border-radius:
            10px;

    outline: none;

    background:
            rgba(255, 255, 255, 0.045);

    color:
            #ffffff;

    font-family:
            var(--font-ui);

    font-size: 16px;

    transition:
            border-color var(--transition-fast),
            background var(--transition-fast),
            box-shadow var(--transition-fast);
}

.form-control::placeholder {
    color:
            #666b74;
}

.form-control:hover {
    border-color:
            rgba(255, 255, 255, 0.24);
}

.form-control:focus {
    border-color:
            var(--color-accent);

    background:
            rgba(255, 255, 255, 0.06);

    box-shadow:
            0 0 0 3px
            rgba(220, 38, 38, 0.13);
}

textarea.form-control {
    min-height: 120px;

    resize: vertical;
}


/*
|--------------------------------------------------------------------------
| Global loading
|--------------------------------------------------------------------------
*/

.global-loading {
    position: fixed;
    z-index: 9999;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
            opacity var(--transition-normal),
            visibility var(--transition-normal);
}

.global-loading.is-visible {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}

.global-loading__backdrop {
    position: absolute;

    inset: 0;

    background:
            rgba(5, 6, 9, 0.78);

    -webkit-backdrop-filter:
            blur(8px);

    backdrop-filter:
            blur(8px);
}

.global-loading__content {
    position: relative;
    z-index: 1;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 16px;

    min-width: 190px;

    padding:
            27px 30px;

    border:
            1px solid var(--color-border);

    border-radius:
            var(--radius-md);

    background:
            var(--color-bg-elevated);

    box-shadow:
            var(--shadow-lg);
}

.global-loading__spinner {
    width: 34px;
    height: 34px;

    border:
            3px solid rgba(255, 255, 255, 0.13);

    border-top-color:
            var(--color-accent);

    border-radius:
            50%;

    animation:
            cinema-spinner 720ms linear infinite;
}

.global-loading__text {
    color:
            var(--color-text-soft);

    font-size: 15px;
    font-weight: 500;
}

@keyframes cinema-spinner {
    to {
        transform:
                rotate(360deg);
    }
}


/*
|--------------------------------------------------------------------------
| Empty state
|--------------------------------------------------------------------------
*/

.empty-state {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-height: 320px;

    padding:
            50px 24px;

    text-align: center;
}

.empty-state__title {
    margin-bottom:
            8px;

    font-family:
            var(--font-display);

    font-size: 28px;
    font-weight: 650;
}

.empty-state__text {
    max-width: 480px;

    margin:
            0;

    color:
            var(--color-text-muted);
}


/*
|--------------------------------------------------------------------------
| Alert
|--------------------------------------------------------------------------
*/

.alert {
    padding:
            15px 17px;

    border:
            1px solid var(--color-border);

    border-radius:
            10px;

    font-size: 15px;
}

.alert-danger {
    border-color:
            rgba(220, 38, 38, 0.3);

    background:
            rgba(220, 38, 38, 0.1);

    color:
            #fecaca;
}

.alert-success {
    border-color:
            rgba(22, 163, 74, 0.28);

    background:
            rgba(22, 163, 74, 0.1);

    color:
            #bbf7d0;
}

.alert-warning {
    border-color:
            rgba(245, 158, 11, 0.28);

    background:
            rgba(245, 158, 11, 0.1);

    color:
            #fde68a;
}


/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

.site-footer {
    margin-top:
            80px;

    border-top:
            1px solid var(--color-border);

    background:
            #08090c;
}

.site-footer__inner {
    width:
            min(
                    calc(
                            100% - (
                            var(--container-padding) * 2
                            )
                    ),
                    var(--container-width)
            );

    margin-inline: auto;
}

.site-footer__top {
    display: grid;

    grid-template-columns:
        minmax(260px, 1.5fr)
        repeat(
            3,
            minmax(140px, 0.7fr)
        );

    gap:
            60px;

    padding:
            62px 0 48px;
}

.site-footer__brand {
    max-width:
            360px;
}

.site-footer__description {
    margin:
            18px 0 0;

    max-width:
            330px;

    color:
            var(--color-text-muted);

    font-size: 13px;
    line-height: 1.65;
}

.site-footer__title {
    margin:
            4px 0 17px;

    color:
            #ffffff;

    font-family:
            var(--font-ui);

    font-size: 14px;
    font-weight: 700;

    letter-spacing:
            0.08em;

    text-transform:
            uppercase;
}

.site-footer__links {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.site-footer__links a {
    width: fit-content;

    color:
            var(--color-text-muted);

    font-size: 15px;

    transition:
            color var(--transition-fast);
}

.site-footer__links a:hover {
    color:
            #ffffff;
}

.site-footer__info {
    display: flex;
    flex-direction: column;

    gap: 6px;

    color:
            var(--color-text-muted);

    font-size: 13px;
}

.site-footer__bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    min-height: 74px;

    border-top:
            1px solid var(--color-border);

    color:
            var(--color-text-faint);

    font-size: 13px;
}

.site-footer__system {
    text-align: right;
}


/*
|--------------------------------------------------------------------------
| Utility
|--------------------------------------------------------------------------
*/

.hidden {
    display: none !important;
}

.sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip:
            rect(0, 0, 0, 0) !important;

    white-space:
            nowrap !important;

    border: 0 !important;
}

.no-wrap {
    white-space:
            nowrap;
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (
max-width: 1100px
) {
    :root {
        --container-padding:
                24px;
    }

    .site-header__inner {
        gap:
                20px;
    }

    .site-nav {
        gap:
                2px;
    }

    .site-nav__link {
        padding-inline:
                12px;
    }

    .site-footer__top {
        gap:
                36px;
    }
}


/*
|--------------------------------------------------------------------------
| Mobile navigation breakpoint
|--------------------------------------------------------------------------
*/

@media (
max-width: 991px
) {
    :root {
        --header-height:
                70px;
    }

    .site-nav {
        display: none;
    }

    .mobile-menu-button {
        display: inline-flex;
    }

    .header-booking-button {
        min-height:
                42px;

        padding-inline:
                15px;
    }

    .site-footer__top {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
                42px 30px;
    }

    .site-footer__brand {
        grid-column:
                1 / -1;
    }
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (
max-width: 767px
) {
    :root {
        --container-padding:
                18px;
    }

    body {
        font-size:
                15px;
    }

    .section {
        padding:
                52px 0;
    }

    .section--compact {
        padding:
                36px 0;
    }

    .section-header {
        align-items:
                flex-start;

        flex-direction:
                column;

        gap:
                14px;

        margin-bottom:
                24px;
    }

    .section-header__description {
        font-size:
                15px;
    }

    .site-brand__mark {
        width:
                38px;

        height:
                38px;

        flex-basis:
                38px;
    }

    .site-brand__mark img {
        width:
                38px;

        height:
                38px;
    }

    .site-brand__name {
        font-size:
                18px;
    }

    .site-brand__sub {
        font-size:
                9px;
    }

    .header-booking-button__icon {
        display: none;
    }

    .header-booking-button {
        min-height:
                40px;

        padding:
                0 13px;

        font-size:
                13px;
    }

    .movie-card__title {
        font-size:
                18px;
    }

    .site-footer {
        margin-top:
                55px;
    }

    .site-footer__top {
        grid-template-columns:
            1fr 1fr;

        gap:
                36px 24px;

        padding:
                44px 0 38px;
    }

    .site-footer__bottom {
        align-items:
                flex-start;

        flex-direction:
                column;

        justify-content:
                center;

        gap:
                5px;

        min-height:
                90px;

        padding:
                18px 0;
    }

    .site-footer__system {
        text-align:
                left;
    }
}


/*
|--------------------------------------------------------------------------
| Small mobile
|--------------------------------------------------------------------------
*/

@media (
max-width: 520px
) {
    :root {
        --container-padding:
                15px;
    }

    .site-header__inner {
        gap:
                10px;
    }

    .site-brand__text {
        display: none;
    }

    .site-brand__mark {
        width:
                40px;

        height:
                40px;

        flex-basis:
                40px;
    }

    .site-brand__mark img {
        width:
                40px;

        height:
                40px;
    }

    .site-header__actions {
        gap:
                7px;
    }

    .header-booking-button {
        padding-inline:
                12px;
    }

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

    .site-footer__brand {
        grid-column:
                auto;
    }
}


/*
|--------------------------------------------------------------------------
| Motion accessibility
|--------------------------------------------------------------------------
*/

@media (
prefers-reduced-motion: reduce
) {
    *,
    *::before,
    *::after {
        scroll-behavior:
                auto !important;

        animation-duration:
                0.01ms !important;

        animation-iteration-count:
                1 !important;

        transition-duration:
                0.01ms !important;
    }
}

/* Footer links */

.site-footer__link,
.site-footer a {
    font-size: 13px;
    line-height: 1.55;
}

.site-footer__column-title {
    font-size: 12px;
}

.site-footer__social-link {
    margin-top: 8px;
    display: inline-block;
}