/* Cream + burgundy color scheme (paper background, accent panels) */
:root {
    --sm-paper: #F7EEE7;
    --sm-accent: #A80306;
    --sm-accent-deep: #750000;
    --sm-champagne: #C9B8A9;
    --sm-ink: #2D1715;

    /* Retint the template's red accent to burgundy site-wide (buttons, subtitles, heart, etc.) */
    --clr-att: #750000 !important;
    --clr-att-hover: #4d0000 !important;
    --heart-color: #750000 !important;
}

html, body, .sm-page {
    background-color: var(--sm-paper);
}

/* All buttons: a distinct burgundy shade, independent of --clr-att (which also colors
   subtitles, borders and the contact icons elsewhere, and should stay as-is). */
.sm-btn {
    background-color: #631927 !important;
}
.sm-btn:hover {
    background-color: #4a131d !important;
}

.sm-section-type-1 {
    background-color: var(--sm-paper) !important;
}

/* Beige paper texture on every section, including the cover, except the burgundy contact panel */
.sm-page > section:not(.sm-contact) {
    background-image: url('./background-white.jpg') !important;   /* jpg: same texture, 175KB vs 2.3MB png */
    background-repeat: repeat !important;
}

/* Burgundy accent panel: countdown timer box only (not the RSVP "Анкета гостя" head box) */
.sm-time .sm-box.background-paint-background {
    background-color: var(--sm-accent-deep) !important;
    background-image: url('./background-red.jpg') !important;
    background-repeat: repeat !important;
    color: var(--sm-paper) !important;
}

.sm-time .sm-box.background-paint-background .sm-title,
.sm-time .sm-box.background-paint-background .sm-subtitle,
.sm-time .sm-box.background-paint-background .sm-text,
.sm-time .sm-box.background-paint-background [class*="sm-time__item"] {
    color: var(--sm-paper) !important;
}

/* RSVP "Анкета гостя" head box: not burgundy. Transparent on desktop (sits on the beige
   section), but a beige paper card on mobile so it keeps a visible background there. */
@media (min-width: 501px) {
    .sm-questionnaire .sm-box.background-paint-background {
        background: transparent !important;
        color: var(--sm-ink) !important;
    }
}

@media (max-width: 500px) {
    .sm-questionnaire .sm-box.background-paint-background {
        background: #F7EEE7 url('./background-white.jpg') repeat !important;
        color: var(--sm-ink) !important;
    }
    .sm-questionnaire .sm-box.background-paint-background .sm-title,
    .sm-questionnaire .sm-box.background-paint-background .sm-text,
    .sm-questionnaire .sm-box.background-paint-background .sm-questionnaire__date {
        color: var(--sm-ink) !important;
    }

    /* RSVP form: transparent background on mobile instead of a solid white card. */
    .sm-questionnaire-form .sm-form.background-paint-background {
        background: transparent !important;
    }
}

/* RSVP text inputs: darker text/placeholder so typed answers stay readable against the
   card's paper texture. */
.sm-questionnaire .sm-form__input,
.sm-questionnaire input.sm-form__input {
    color: #1a0d0a !important;
}
.sm-questionnaire .sm-form__input::placeholder {
    color: rgba(26, 13, 10, 0.6) !important;
    opacity: 1 !important;
}

/* Oval cover photo inside an ornate burgundy frame drawn as inline SVG (two ovals, two
   half-ovals between them, and dots in the side gaps). B&W photo kept. */
.sm-ornate-photo {
    position: relative;
    width: 300px !important;
    margin: 14px auto 0 !important;
    aspect-ratio: 480 / 640;
    background: transparent !important;
}

@media (min-width: 501px) {
    .sm-ornate-photo {
        width: 360px !important;
    }
}

/* Opaque backdrop sized to the OVAL frame itself (not the whole rectangular box) — the
   decorative wave line behind the section would otherwise show through the corners outside
   the oval, but a plain rectangular patch there was too big/visibly boxy. Own layer (not the
   container's background) so the clip-path only crops the backdrop, not the frame's stroke. */
.sm-ornate-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--sm-paper);
    background-image: url('./background-white.jpg');
    background-repeat: repeat;
    clip-path: ellipse(48.6% 49% at 50% 50%);   /* matches the outer oval stroke (rx 232/480, ry 312/640), plus a hair to cover its stroke width */
}

.sm-ornate-photo img.sm-ornate-photo__photo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: grayscale(100%);
    clip-path: ellipse(43.5% 45% at 50% 50%);                /* fills just inside the inner oval */
    z-index: 1;
}

.sm-ornate-photo .sm-ornate-photo__frame {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2;
    overflow: visible;
    pointer-events: none;
}

/* Appearance animation: the two central half-ovals draw from the top/bottom centre outward
   toward the side dots, then the dots pop in when the lines arrive. */
@keyframes sm-draw-mid {
    from { stroke-dasharray: 0 100; stroke-dashoffset: -50; }
    to   { stroke-dasharray: 100 0.01; stroke-dashoffset: 0; }
}
@keyframes sm-dot-in {
    0%   { opacity: 0; transform: scale(0.1); }
    60%  { opacity: 1; transform: scale(1.3); }
    100% { opacity: 1; transform: scale(1); }
}
.sm-ornate-photo__frame .sm-ornate-mid {
    animation: sm-draw-mid 1.6s ease-in-out 1.2s both;
}
.sm-ornate-photo__frame .sm-ornate-dot {
    transform-box: fill-box;
    transform-origin: center;
    animation: sm-dot-in 0.5s ease-out 2.7s both;
}

/* Burgundy accent panel: contacts section */
.sm-contact {
    background-color: var(--sm-accent-deep) !important;
    background-image: url('./background-red.jpg') !important;
    background-repeat: repeat !important;
}

.sm-contact .sm-title,
.sm-contact .sm-text,
.sm-contact__info,
.sm-contact__info a {
    color: var(--sm-paper) !important;
}

.sm-contact_soc svg path {
    fill: var(--sm-paper) !important;
}

/* "Связаться" button: light paper color so it reads against the dark burgundy contact panel,
   instead of the standard burgundy button (which would blend in). */
.sm-contact .sm-btn {
    background-color: var(--sm-paper) !important;
    color: var(--sm-accent-deep) !important;
    border-color: var(--sm-paper) !important;
}
.sm-contact .sm-btn:hover {
    background-color: #ffffff !important;
}

/* Thin flowing "ribbon" decor lines. Stroke color is baked into data-URI background-images,
   so recolor via filter. Contrast the background: burgundy on the light (beige) sections... */
[class*="sm-decor"]::before {
    filter: brightness(0.70) saturate(1.2) !important;
}

/* ...and light paper on the dark burgundy contact section. */
section.sm-contact::before {
    filter: brightness(0) invert(1) sepia(0.2) saturate(0.5) brightness(1.05) !important;
}

/* Date/heart block: too dominant/oversized next to the rest of the page — shrink 1.5x.
   `zoom` (not transform:scale) so the block's reserved layout space shrinks along with its
   rendered size, instead of leaving an empty gap behind a visually-smaller box. */
.sm-datetime .sm-date-table {
    zoom: 0.6667;
}

/* All real photos on the site in black & white (not just the cover shot). !important because
   the vendor CSS has a higher-specificity `.sm-thanks .sm-thanks__image img{filter:none}` rule
   at some breakpoints that would otherwise win over this. */
.sm-location__image img,
.sm-contact_photo img,
.sm-questionnaire-image img,
.sm-footer__image img,
.sm-thanks__image img {
    filter: grayscale(100%) !important;
}

/* Calendar (datetime card): date numbers in italic */
.sm-datetime .sm-date-table .sm-date-main {
    font-style: italic !important;
}

/* Greeting/"letter" section replaced by a single full-width photo (letter.png). */
.sm-datetime.sm-letter-photo {
    padding: 0 !important;
}
.sm-datetime.sm-letter-photo::before,
.sm-datetime.sm-letter-photo::after {
    display: none !important;
    content: none !important;
}
.sm-letter-photo__img {
    display: block;
    width: 100%;
    height: auto;
}

/* Timing schedule: stack the entries in a single vertical column (not a row), centered in the card */
.sm-timing .sm-timing__items {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 30px !important;
}

.sm-timing .sm-timing__item {
    width: 100% !important;      /* the template pins these to a fixed row width; reset it */
    align-self: center !important;
    text-align: center !important;
    translate: none !important;  /* kill the ±100px sideways entrance shift (keeps it centered) */
    /* rows start hidden and rise into place when the section scrolls into view. NOTE: no
       CSS transition here — a transition on opacity sits above !important in the cascade and
       froze the value; a keyframe animation (below) reveals them cleanly instead. */
    opacity: 0;
    transform: translateY(16px);
}

/* Rectangular frame around the timing card — house 3-line style: one thick outer line
   (3x) + two thin inner lines with a paper "лощина" groove between them. */
.sm-timing .sm-container {
    box-sizing: border-box !important;
    max-width: 520px !important;
    width: calc(100% - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border: 3px solid var(--sm-accent-deep) !important;      /* outer thick line (3x) */
    padding: 45px 25px !important;
    box-shadow:
        inset 0 0 0 4px var(--sm-paper),
        inset 0 0 0 5px var(--sm-accent-deep),               /* inner line 1 */
        inset 0 0 0 7px var(--sm-paper),                     /* groove */
        inset 0 0 0 8px var(--sm-accent-deep) !important;    /* inner line 2 */
}

/* Drop the flowing wave ribbon behind the timing card — it read like a strike-through over
   the numbers. The rectangular frame is this section's decoration instead. */
.sm-timing::before {
    background-image: none !important;
}

/* The heading + subtitle stay put (always visible, no entrance movement). */
.sm-timing .sm-title,
.sm-timing .sm-subtitle {
    opacity: 1 !important;
}
/* The time rows reveal (fade + rise, staggered) when the section scrolls into view — main.js
   adds .sm-anim-in when the section enters the viewport, independent of the RSVP button. */
@keyframes sm-timing-reveal {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.sm-timing.sm-anim-in .sm-timing__item {
    animation: sm-timing-reveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.sm-timing.sm-anim-in .sm-timing__item:nth-child(1) { animation-delay: 0.05s; }
.sm-timing.sm-anim-in .sm-timing__item:nth-child(2) { animation-delay: 0.15s; }
.sm-timing.sm-anim-in .sm-timing__item:nth-child(3) { animation-delay: 0.25s; }
.sm-timing.sm-anim-in .sm-timing__item:nth-child(4) { animation-delay: 0.35s; }

/* CSS "тиснение" (emboss / letterpress) on the countdown-timer card: a pressed inner frame
   line plus engraved text, so the cream text/numbers look stamped into the burgundy panel. */
.sm-time .sm-box.background-paint-background {
    position: relative;
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.30),
        inset 0 -2px 5px rgba(0, 0, 0, 0.16),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}
/* Embossed frame on the burgundy card: pressed grooves rendered with VERTICAL-only
   light/shadow (dark inner-top, light just below) so every edge is pressed uniformly — no
   concave-in-one-corner / convex-in-another bias that diagonal lighting causes.
   ::before = thick outer line (3x), ::after = thin inner line. */
.sm-time .sm-box.background-paint-background::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 2px;
    border: 3px solid rgba(0, 0, 0, 0.09);           /* soft line, not a hard drawn border */
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.38),         /* soft blurred shadow = pressed, not bevel */
        inset 0 -1px 2px rgba(255, 236, 224, 0.08),
        0 1px 1px rgba(255, 236, 224, 0.10);
    pointer-events: none;
}
.sm-time .sm-box.background-paint-background::after {
    content: "";
    position: absolute;
    inset: 22px;
    border-radius: 1px;
    border: 1px solid rgba(0, 0, 0, 0.11);
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.26),
        0 1px 0 rgba(255, 236, 224, 0.08);
    pointer-events: none;
}
.sm-time .sm-box.background-paint-background .sm-title,
.sm-time .sm-box.background-paint-background .sm-subtitle,
.sm-time .sm-box.background-paint-background .sm-time__item_number,
.sm-time .sm-box.background-paint-background .sm-time__item__title,
.sm-time .sm-box.background-paint-background .sm-timer-time_number-span {
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45), 0 -1px 1px rgba(255, 255, 255, 0.14);
}

/* Wishes slider: the vendor CSS pins the slider wrap to a fixed 420px width, which on
   viewports narrower than that pushes the next-arrow (positioned at the wrap's right edge)
   past the visible edge of the screen — untappable on most phones. Make it responsive instead,
   capped at the original 420px on wider screens. */
.sm-wishes .sm-slider-wrap {
    width: 100% !important;
    max-width: 420px !important;
}

/* iOS Safari can wait ~300ms to disambiguate a tap from the start of a double-tap-zoom gesture
   on plain elements; manipulation tells it this element is only ever tapped, not zoomed. */
.sm-wishes .sm-arrow {
    touch-action: manipulation;
}

/* Wishes carousel paging (see main.js initWishesCarousel — plain hand-rolled JS, not Slick).
   All items are stacked in the same CSS Grid cell, so the container's height always matches
   the tallest one (no resize jump when paging between different-length wish texts); only the
   active item is visible. */
.sm-wishes__content-slider {
    display: grid;
}
.sm-wishes__content-slider .sm-wishes__content-item {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease;
}
.sm-wishes__content-slider .sm-wishes__content-item.sm-wish-active {
    opacity: 1;
    visibility: visible;
}

/* Dress-code gallery photos: kill the lingering blue outline/tap-highlight left behind after
   tapping a photo or closing the Fancybox lightbox. On touch the ring comes back via
   :focus-visible (not :focus), so cover that and the inner <img> too. */
.sm-dresscode .sm-photo,
.sm-dresscode .sm-photo img {
    -webkit-tap-highlight-color: transparent !important;
}
.sm-dresscode .sm-photo:focus,
.sm-dresscode .sm-photo:focus-visible,
.sm-dresscode .sm-photo:active,
.sm-dresscode .sm-photo img:focus,
.sm-dresscode .sm-photo img:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Countdown timer digits: keep each digit box fixed in place — no more sliding in from the
   side on activation, only a fade (the item-aright/item-aleft slide is neutralized here).
   The 00 -> value change is instead a per-digit reel driven by main.js adding/removing
   .sm-timer-reel-start/.sm-timer-reel-in on .sm-timer-time_number-span. */
.sm-time .sm-time__item_number.item-animation {
    transform: none !important;
    translate: none !important;
}
.sm-time .sm-timer-time_number {
    overflow: hidden;
}
.sm-timer-time_number-span {
    display: inline-block;
}
.sm-timer-time_number-span.sm-timer-reel-start {
    transform: translateY(-60%);
    opacity: 0;
}
.sm-timer-time_number-span.sm-timer-reel-in {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
    transform: translateY(0);
    opacity: 1;
}

/* Thank-you modal («Будем рады вас видеть!» / «Спасибо за ваш ответ!»): no photo, just the
   date + message. Hidden rather than removed from the markup so the builder JS that hydrates
   [data-sm-src] inside it keeps finding its node. */
#thankYouMessage .sm-thanks__image {
    display: none !important;
}

/* Closing card (footer): drop the animated GIF heart under the photo, and put the same
   rectangular 3-line frame around the PHOTO only (not the whole slide). */
.sm-footer .sm-footer__image::before {
    display: none !important;
    content: none !important;
}
.sm-footer .sm-footer__image {
    box-sizing: border-box !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 30px auto 0 !important;
    padding: 8px !important;
    border: 3px solid var(--sm-accent-deep) !important;
    box-shadow:
        inset 0 0 0 4px var(--sm-paper),
        inset 0 0 0 5px var(--sm-accent-deep),
        inset 0 0 0 7px var(--sm-paper),
        inset 0 0 0 8px var(--sm-accent-deep) !important;
}
/* The vendor's own sizing technique for this image (.sm-img at width:100%/fixed height,
   with the <img> absolutely positioned to fill it) has no in-flow intrinsic size, so it
   collapsed the fit-content box above to zero width — frame with no visible photo. Switch to
   a plain sized <img> instead so fit-content has something real to measure. */
.sm-footer .sm-footer__image .sm-img {
    position: static !important;
    width: auto !important;
    height: auto !important;
}
.sm-footer .sm-footer__image .sm-img img {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: min(460px, 58vh) !important;
    object-fit: contain !important;
}