@font-face {
    font-family: 'Gabriela';
    src: url('/assets/Gabriela-Regular.ttf');
}

/* Mobile-based styles first */

:root {
    --c-text1: #3B200E;
    --c-text-hint: #867970;
    --section-gap: 5rem;
    --header-mb: 2.25rem;
    --font-size-base: 1rem;
    --font-size-plus: calc(var(--font-size-base) + 2px);
    --font-size-minus: calc(var(--font-size-base) - 1px);
    --font-size-header: 1.65rem;
    --s1-gap: 0px;
    --s1-shift: 4rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Gabriela', serif;
    color: var(--c-text1);
}

body {
    background: #F2F4F5 url('/assets/background.png') repeat-y top/100%;
    text-align: center;
}

main {
    padding: 0 2rem;
    max-width: 800px;
    margin: 0 auto;
}

h2 {
    margin: 0 auto var(--header-mb);
    text-transform: uppercase;
    font-size: var(--font-size-header);
}

h2, h3 {
    font-weight: normal;
}

section {
    margin-top: var(--section-gap);
    font-size: var(--font-size-base);
}

p, span {
    line-height: 150%;
}

p {
    max-width: 480px;
    margin: 0 auto;
}

img {
    max-width: 100%;
}

.m_icon {
    --size: 4.375rem;
    width: var(--size);
    height: var(--size);
}

.border_img {
    border: 2px solid white;
    width: 90%;
    display: block;
    margin: 0 auto;
}

.m_auto {
    margin: 0 auto;
}

.text-center {
    text-align: center;
}

.s1__1 {
    --img-width: 47svw;
    display: flex;
    justify-content: center;
    height: calc(var(--img-width) / 0.7057 + var(--s1-shift) + 10px);
}

.s1__center {
    position: relative;
}

.s1__1 img {
    width: var(--img-width);
    position: absolute;
    max-width: unset;
}

.s1__1 img:nth-child(1) {
    right: calc(var(--s1-gap) / 2);
}

.s1__1 img:nth-child(2) {
    left: calc(var(--s1-gap) / 2);
    top: calc(var(--s1-shift));
}

.s1__2 {
    margin-top: 2.5rem;
    font-size: var(--font-size-header);
}

.s1__3 {
    width: 3rem;
    height: 3rem;
}

.s1__4 {
    font-size: var(--font-size-minus);
}


.s2 .calendar__header {
    margin-top: 2.625rem;
}

.calendar__header {
    margin-bottom: 2rem;
    font-size: calc(var(--font-size-header) - 0.275rem);
}

.calendar__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    max-width: 365px;
    margin: 0 auto;
    row-gap: 7px;
}

.calendar__day-names {
    font-size: var(--font-size-plus);
    display: contents;
}

.calendar__week {
    display: contents;
}

.calendar__target-point {
    position: relative;
}

.calendar__target {
    position: absolute;
    width: 2.75rem;
    height: 2.25rem;
    transform: translate(-65%, -21%);
}


.timing__item {
    margin-top: 2.5rem;
}

.timing__time {
    margin-top: 1.4375rem;
    margin-bottom: 0.25rem;
    font-size: calc(var(--font-size-base) + 1px);
}


.place__images {
    margin-top: 1.875rem;
}

.place__images img:not(:first-child) {
    margin-top: 1.3125rem;
}


.wishes__items > *:not(:first-child) {
    margin-top: 1.5rem;
}

.wishes__items img {
    width: 2.625rem;
    height: 2.625rem;
}


.s6 .m_icon {
    margin-top: 0.9375rem;
}


.s7 .deadline {
    margin-bottom: 2.75rem;
}

.form {
    --input-padding: 8px;
    text-align: left;
    font-size: var(--font-size-base);
}

.form__field-label {
    --mb: 1.35rem;
    margin-top: 1.25rem;
    display: block;
    margin-bottom: var(--mb);
    font-size: 17px;
}

.form__field-label.before-input-text {
    margin-bottom: calc(var(--mb) - 0.27rem);
}

.form input[type=text],
.form input[type=password] {
    outline: 0;
    border: 0;
    border-bottom: 1px solid var(--c-text1);
    padding: 0.15rem var(--input-padding);
    font-size: var(--font-size-base);
    background: transparent;
    width: 100%;
    transition: 0.25s border-bottom-color;
}

.form input[type=text]:focus,
.form input[type=password]:focus {
    border-bottom-color: var(--c-text-hint);
}

.form__field-group > div {
    display: flex;
    align-items: center;
    gap: var(--input-padding);
    line-height: 1;
}

.form__field-group > div:not(:first-child) {
    margin-top: calc(var(--input-padding) + 7px);
}

.form__styled-radio {
    input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }
    label {
        --figure-size: 18px;
        --figure-border-width: 1.5px;
        cursor: pointer;
        user-select: none;
        position: relative;
        padding-left: calc(var(--figure-size) + var(--input-padding));
    }

    /* внешний круг */
    label::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: var(--figure-size);
        height: var(--figure-size);
        border-radius: 50%;
        border: var(--figure-border-width) solid var(--c-text1);   /* цвет рамки */
        background: transparent;         /* фон круга */
        box-sizing: border-box;
    }

    /* внутренний заполненный круг (видим только когда checked) */
    label::after {
        content: "";
        position: absolute;
        left: calc(var(--figure-border-width) * 2);
        top: 50%;
        transform: translateY(-50%);
        width: calc(var(--figure-size) - (4 * var(--figure-border-width)));
        height: calc(var(--figure-size) - (4 * var(--figure-border-width)));
        border-radius: 50%;
        background: transparent;  /* цвет точки по умолчанию */
        transition: background .12s;
    }

    /* когда input checked — меняем цвет точки и рамки */
    input[type="radio"]:checked + label::before {
        /* border-color: #1e90ff;    рамка при активном состоянии */
    }
    input[type="radio"]:checked + label::after {
        background: #8A5836;      /* цвет точки */
    }
}

.form__styled-checkbox {
    input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    label {
        --figure-size: 16px;
        --figure-border-width: 1.5px;
        position: relative;
        padding-left: calc(var(--figure-size) + var(--input-padding));
        cursor: pointer;
        user-select: none;
    }

    /* квадратная рамка */
    label::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: var(--figure-size);
        height: var(--figure-size);
        border: var(--figure-border-width) solid var(--c-text1); /* цвет рамки */
        background: transparent;       /* фон */
        box-sizing: border-box;
        border-radius: 2px;
    }

    /* галка (псевдоэлемент) */
    label::after {
        content: "";
        position: absolute;
        left: calc(var(--figure-border-width) * 2);
        top: 50%;
        transform: translateY(-50%) scale(0);
        width: calc(var(--figure-size) - (4 * var(--figure-border-width)));
        height: calc(var(--figure-size) - (4 * var(--figure-border-width)));
        background: #fff;
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 10%, 85% 0, 45% 62%);
        /* альтернативно можно использовать background-image SVG */
        transition: transform .12s ease;
    }

    /* при checked — меняем цвет фона/рамки и показываем галку */
    input[type="checkbox"]:checked + label::before {
        background: #8A5836;    /* цвет заполнения */
        border-color: #8A5836;  /* цвет рамки */
    }
    input[type="checkbox"]:checked + label::after {
        transform: translateY(-50%) scale(1);
        background: #fff;       /* цвет галки (внутри) */
    }
}

.form input[type=submit] {
    background: #634D3E;
    border: 2px solid #CAB09F;
    font-size: var(--font-size-base);
    border-radius: 0;
    padding: 0.75rem 2.25rem;
    color: #FFF9E5;
    cursor: pointer;
    transition: .05s background;
    word-break: break-all;
}

.form input[type=submit]:hover {
    background: #7e614e;
}

.form .input-wrapper {
    margin-top: 2.5rem;
    text-align: center;
}


.s8 h2 {
    font-size: calc(var(--font-size-header) - 0.1rem);
    text-transform: capitalize;
    margin-bottom: 2.35rem;
}

.s8__3 {
    margin: 1.25rem auto;
}

.s8__4 {
    margin-top: 2.25rem;
}

footer {
    background-color: #EDEFF0;
    padding: 0.5rem;
    margin-top: 6rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    a {
        font-size: 12px;
        text-decoration: none;
        color: #646464;

        &:visited {
            color: #646464;
        }
    }
}


@media screen and (min-width: 550px) {
    .s1__1 { --img-width: 38svw; }
    .border_img { width: 85%; }
}

@media screen and (min-width: 700px) {
    :root { --s1-gap: 1rem; }
    .s1__1 { --img-width: 34svw; }
    .border_img { width: 75%; }
}

@media screen and (min-width: 880px) {
    :root {
        --section-gap: 8rem;
        --header-mb: 4.0625rem;
        --font-size-base: 1.125rem;
        --font-size-plus: calc(var(--font-size-base) + 2px);
        --font-size-minus: calc(var(--font-size-base) - 1px);
        --font-size-header: 2.125rem;
        --s1-shift: 8rem;
        --s1-gap: 3.6rem;
    }

    body {
        background: #F2F4F5 url('/assets/background-desktop.png') repeat-y top/100%;
    }

    .border_img { width: 68%; }
    .m_icon { --size: 5.625rem; }
    .s1__1 { --img-width: 261px;  }
    .s1__3 { width: 5rem; height: 5rem; }
    .s2 .calendar__header { margin-top: 4.0625rem; }
    .calendar__header { margin-bottom: 2.625rem; }
    .calendar__target { transform: translate(-70%, -17%) scale(1.5); }
    .timing__item { margin-top: 4.0625rem; }
    .wishes__items img { width: 3.75rem; height: 3.75rem; }
    .place__images { margin-top: 3.8rem; }
    .s6 .m_icon { margin-top: 2.25rem; }
    .s7 .deadline { margin-bottom: 3.5rem; }
    .form .input-wrapper { margin-top: 4rem; }
    .s8 h2 { font-size: calc(var(--font-size-header) - 0.25rem); }
    footer { margin-top: 8rem; }
}

/* Контейнер уведомлений (фиксированное положение вверху центра) */
.toast {
  position: fixed;
  top: 4rem;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background: rgba(202, 176, 159, 0.95); /* цвет фона — подберите */
  color: #855B40;
  border: 2px solid #624D3E; /* рамка */
  padding: 1rem 2rem;
  border-radius: 0px;
  box-shadow: 0 6px 18px rgba(62, 49, 40, 0.25);
  font-size: var(--font-size-plus);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  max-width: 90%;
  text-align: center;
  transition: opacity 250ms ease, transform 250ms ease;
}

/* Видимая версия */
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;

}

/* Малый экран — уменьшаем размер текста */
@media (max-width: 480px) {
  .toast { padding: 1rem 1.5rem; top: 3rem; }
}