/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}


[hidden] {
    display: none !important;
}


html,
body {
    width: 100%;

    margin: 0;
    padding: 0;
}


body {
    background: #ffffff;
    color: #111;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
}


button {
    display: block;

    margin: 0;
    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

    appearance: none;
    -webkit-appearance: none;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}


img {
    display: block;
}



/* =========================================================
   PAGE
========================================================= */

.page {
    position: relative;

    width: 100%;
    max-width: 520px;

    margin: 0 auto;

    background: #ffffff;

    overflow: visible;
}



/* =========================================================
   HERO
========================================================= */

.hero {
    position: relative;

    width: 100%;
}



/* =========================================================
   TOP BLOCK STACK
========================================================= */

.top-block-stack {
    position: relative;

    width: 100%;
}


.top-block {
    display: block;

    width: 100%;
    height: auto;
}


.top-block-normal {
    position: relative;

    opacity: 1;

    transition:
        opacity .22s ease;
}


.top-block-confirmed {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .22s ease;
}


.page.is-accepted
.top-block-normal {
    opacity: 0;
}


.page.is-accepted
.top-block-confirmed {
    opacity: 1;
}



/* =========================================================
   YES BUTTON
========================================================= */

.yes-button {
    position: absolute;

    left: 56%;
    top: 68%;

    width: 40%;

    transform:
        translate(-50%, -50%);

    z-index: 10;
}


.yes-button img {
    display: block;

    width: 100%;
    height: auto;

    pointer-events: none;

    user-select: none;
    -webkit-user-drag: none;
}


.yes-normal {
    position: relative;

    opacity: 1;
}


.yes-hover {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    opacity: 0;
}



/* Hover до нажатия */

@media (hover: hover) {

    .page:not(.is-accepted)
    .yes-button:not(:disabled):hover
    .yes-normal {
        opacity: 0;
    }


    .page:not(.is-accepted)
    .yes-button:not(:disabled):hover
    .yes-hover {
        opacity: 1;
    }

}



/* После нажатия кнопка остаётся жёлтой */

.page.is-accepted
.yes-normal {
    opacity: 0;
}


.page.is-accepted
.yes-hover {
    opacity: 1;
}


.yes-button:not(:disabled):active {
    transform:
        translate(-50%, -50%)
        scale(.97);
}



/* =========================================================
   DIVIDER
========================================================= */

.divider {
    position: relative;

    width: 100%;

    aspect-ratio: 11.55 / 1;

    overflow: hidden;
}


.divider img {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: auto;

    transform:
        translateY(-32.1%);
}



/* =========================================================
   DATE SECTIONS
========================================================= */

.dates-section {
    position: relative;

    width: 100%;

    overflow: visible;
}


.dates-background {
    display: block;

    width: 100%;
    height: auto;

    transition:
        opacity .25s ease;
}



/* =========================================================
   BEFORE "ДА, ДАВАЙ"
========================================================= */

.page:not(.is-accepted)
.dates-background {
    opacity: .40;
}


.page:not(.is-accepted)
.date-card {
    opacity: .42;

    pointer-events: none;
}



/* =========================================================
   MAIN DATE GRID
========================================================= */

.dates-grid {
    position: absolute;

    left: 15%;
    right: 15%;

    top: 19%;

    bottom: 7%;


    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    grid-template-rows:
        auto
        auto
        auto;

    column-gap: 6%;

    align-content: space-between;

    z-index: 5;

    pointer-events: none;
}


.dates-grid
.date-card {
    pointer-events: auto;
}



/* =========================================================
   DATE CARD
========================================================= */

.date-card {
    position: relative;

    width: 100%;

    z-index: 5;

    transition:
        opacity .25s ease,
        transform .08s ease;
}


.date-card img {
    display: block;

    width: 100%;
    height: auto;

    pointer-events: none;

    user-select: none;
    -webkit-user-drag: none;
}



/*
   Inactive остаётся в flow и определяет
   физические размеры button.
*/

.date-inactive {
    position: relative;

    opacity: 1;
}



/*
   Active + Hover лежат точно поверх.
*/

.date-active,
.date-hover {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    opacity: 0;
}



/* =========================================================
   AFTER YES

   inactive → active
========================================================= */

.page.is-accepted
.date-inactive {
    opacity: 0;
}


.page.is-accepted
.date-active {
    opacity: 1;
}



/* =========================================================
   DATE HOVER
========================================================= */

@media (hover: hover) {

    .page.is-accepted
    .date-card:not(:disabled):hover
    .date-active {
        opacity: 0;
    }


    .page.is-accepted
    .date-card:not(:disabled):hover
    .date-hover {
        opacity: 1;
    }

}



/* =========================================================
   LEFT COLUMN SHIFT
========================================================= */

.card-left {
    transform:
        translateX(8%);
}



/* =========================================================
   29 DECEMBER
========================================================= */

.date-card-last {
    grid-column: 1 / 3;

    width: 47%;

    justify-self: center;

    transform:
        translateX(4%);
}



/* =========================================================
   HOVER MOVEMENT
========================================================= */

@media (hover: hover) {

    /*
       Правый ряд
    */

    .page.is-accepted
    .date-card:not(.card-left):not(.date-card-last):not(:disabled):hover {
        transform:
            translateY(-1px)
            rotate(-0.2deg);
    }


    /*
       Левый ряд сохраняет shift
    */

    .page.is-accepted
    .card-left:not(:disabled):hover {
        transform:
            translateX(8%)
            translateY(-1px)
            rotate(-0.2deg);
    }


    /*
       29 сохраняет shift
    */

    .page.is-accepted
    .date-card-last:not(:disabled):hover {
        transform:
            translateX(4%)
            translateY(-1px)
            rotate(-0.2deg);
    }

}



/* =========================================================
   CLICK / PRESS
========================================================= */

.page.is-accepted
.date-card:not(.card-left):not(.date-card-last):not(:disabled):active {
    transform:
        scale(.98);
}


.page.is-accepted
.card-left:not(:disabled):active {
    transform:
        translateX(8%)
        scale(.98);
}


.page.is-accepted
.date-card-last:not(:disabled):active {
    transform:
        translateX(4%)
        scale(.98);
}



/* =========================================================
   RUSSIAN DATE
========================================================= */

.russian-date-position {
    position: absolute;

    left: 29%;

    width: 42%;

    top: 46%;

    z-index: 5;
}



/* =========================================================
   CONFIRMATION STICKER
========================================================= */

.confirmation-sticker {
    position: absolute;

    width: clamp(
        62px,
        16%,
        82px
    );

    transform:
        translate(-50%, -50%)
        rotate(3deg);

    z-index: 100;

    cursor: pointer;

    transition:
        transform .08s ease,
        opacity .1s ease;
}


.confirmation-sticker img {
    display: block;

    width: 100%;
    height: auto;

    pointer-events: none;

    user-select: none;
    -webkit-user-drag: none;
}


.sticker-normal {
    position: relative;

    opacity: 1;
}


.sticker-hover {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    opacity: 0;
}



@media (hover: hover) {

    .confirmation-sticker:hover
    .sticker-normal {
        opacity: 0;
    }


    .confirmation-sticker:hover
    .sticker-hover {
        opacity: 1;
    }


    .confirmation-sticker:hover {
        transform:
            translate(-50%, -50%)
            rotate(1deg)
            scale(1.04);
    }

}


.confirmation-sticker:active {
    transform:
        translate(-50%, -50%)
        rotate(1deg)
        scale(.96);
}


.confirmation-sticker.is-sending {
    opacity: .5;

    pointer-events: none;
}



/* =========================================================
   CONFIRMATION BLOCK
========================================================= */

.confirmation-block {
    width: 100%;

    padding:
        28px
        2%
        30px;
}


.confirmation-block img {
    display: block;

    width: 100%;
    height: auto;

    animation:
        confirmation-in
        .35s
        ease;
}


@keyframes confirmation-in {

    from {
        opacity: 0;

        transform:
            translateY(7px)
            rotate(-.3deg);
    }


    to {
        opacity: 1;

        transform:
            translateY(0)
            rotate(0);
    }

}



/* =========================================================
   ERROR
========================================================= */

.send-error {
    margin:
        12px
        16px
        24px;

    font-family:
        Arial,
        sans-serif;

    font-size: 13px;
    line-height: 1.4;

    text-align: center;

    color: #9b302c;
}



/* =========================================================
   ACCESSIBILITY
========================================================= */

button:focus-visible {
    outline: 2px solid #111;

    outline-offset: 3px;
}



/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 350px) {

    .dates-grid {
        left: 13%;
        right: 13%;
    }


    .confirmation-sticker {
        width: 60px;
    }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        transition: none !important;

        animation: none !important;
    }

}