/* Villa Aroo — custom styles.
   Tailwind utilities handle the layout and colors; only the few effects that
   utilities cannot express live here. */

:root {
    /* Only token missing from the page palette: the tone used for a field
       that needs correcting. */
    --danger: 6 58% 42%;
}

/* ---------------------------------------------------------------- Page shell
   The site should feel like an app on a phone: no rubber-band past the footer,
   no accidental text selection, nothing draggable, no sideways scroll. */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overscroll-behavior: none;
    /* The space for the scroll bar is always reserved, so the page never
       shifts sideways when a bar appears or an overlay locks the page. */
    scrollbar-gutter: stable;
}

body {
    overscroll-behavior: none;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

/* Typing and correcting what was typed must still work */
input,
textarea {
    -webkit-user-select: text;
    user-select: text;
}

/* Nothing can be dragged off the page */
img,
svg,
video,
a {
    -webkit-user-drag: none;
}

img,
video,
iframe {
    max-width: 100%;
}

/* Phones zoom into any field smaller than 16px, so keep the fields at 16 */
@media (max-width: 640px) {
    input,
    select,
    textarea {
        font-size: 16px;
    }
}

/* Overlays keep their own scrolling to themselves */
#mobileMenu,
#lightbox {
    overscroll-behavior: contain;
}

/* ------------------------------------------------------------- Scroll bar
   Square, slim and in the villa palette. Only the WebKit pseudo-elements are
   styled: setting scrollbar-color here would hand the bar back to the browser,
   which draws it as a rounded pill. */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: hsl(var(--muted));
}

::-webkit-scrollbar-thumb {
    background-color: hsl(var(--primary) / 0.7);
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background-color: hsl(var(--primary));
}

::-webkit-scrollbar-corner {
    background: hsl(var(--muted));
}

/* Firefox has no such pseudo-elements, so it gets the slim native bar. */
@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-width: thin;
        scrollbar-color: hsl(var(--primary) / 0.7) hsl(var(--muted));
    }
}

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

.wordmark {
    letter-spacing: 0.04em;
}

.eyebrow {
    letter-spacing: 0.3em;
}

/* ------------------------------------------------------------------- Focus */

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 2px solid hsl(var(--primary));
    outline-offset: 3px;
    border-radius: 3px;
}

/* --------------------------------------------------------- Animated underline */

.link-underline {
    position: relative;
}

.link-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.link-underline:hover::after,
.link-underline:focus-visible::after,
.link-underline[aria-current='page']::after {
    transform: scaleX(1);
}

/* ------------------------------------------------------------- Page opening
   Every page fades in as it loads, so arriving on it feels intentional. The
   animation ends on the normal, visible state, so nothing can stay hidden. */

@keyframes pageIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes headerIn {
    from {
        opacity: 0;
        transform: translateY(-14px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

main {
    animation: pageIn 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.site-header {
    animation: headerIn 760ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    main,
    .site-header {
        animation: none;
    }
}

/* --------------------------------------------------------------- Scroll reveal
   The finished, visible state is the plain CSS default. The hidden state is
   added by the script only once the observer is actually running, so content
   can never stay invisible. */

.reveal {
    transition:
        opacity 900ms cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1),
        clip-path 1100ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.reveal.is-hidden {
    opacity: 0;
    transform: translateY(24px);
}

.reveal.is-hidden.reveal-soft {
    transform: translateY(12px);
}

.reveal.is-hidden.reveal-zoom {
    transform: scale(1.04);
}

.reveal.is-hidden.reveal-left {
    transform: translateX(-30px);
}

.reveal.is-hidden.reveal-right {
    transform: translateX(30px);
}

/* Sideways reveals would widen a phone screen, so they lift instead */
@media (max-width: 767px) {
    .reveal.is-hidden.reveal-left,
    .reveal.is-hidden.reveal-right {
        transform: translateY(20px);
    }
}

/* Photo unveils upward from behind a soft mask */
.reveal.reveal-curtain {
    clip-path: inset(0 0 0 0);
}

.reveal.is-hidden.reveal-curtain {
    opacity: 0;
    transform: none;
    clip-path: inset(0 0 22% 0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.is-hidden {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        transition: none !important;
    }
}

/* ------------------------------------------------------------- Utility bits */

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

body.overlay-open {
    overflow: hidden;
}

/* Soft veil over large photos, keeps big images from looking flat */
.photo-veil::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        hsl(24 16% 8% / 0.55),
        hsl(24 16% 8% / 0.1) 45%,
        hsl(24 16% 8% / 0.35)
    );
    pointer-events: none;
}

/* ------------------------------------------------------------------ Hero
   Full-bleed footage behind the title. svh keeps phone browser bars from
   cutting the first screen. */

.hero-full {
    min-height: 100vh;
    min-height: 100svh;
}

.hero-short {
    min-height: 74vh;
    min-height: 74svh;
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Deep, even scrim plus a vignette: the footage stays visible while the
   wordmark, the buttons and the figures read cleanly on any screen. */
.hero-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            to top,
            hsl(24 18% 5% / 0.95) 0%,
            hsl(24 18% 5% / 0.8) 28%,
            hsl(24 18% 5% / 0.55) 55%,
            hsl(24 18% 5% / 0.62) 100%
        ),
        radial-gradient(
            125% 80% at 50% 38%,
            transparent 22%,
            hsl(24 18% 5% / 0.5) 100%
        );
}

/* Very fine film grain: keeps moving footage from looking flat or washy */
.hero-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.08;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
}

@keyframes heroZoom {
    from {
        transform: scale(1.08);
    }
    to {
        transform: scale(1);
    }
}

.hero-photo {
    animation: heroZoom 2600ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Very slow drift on the moving footage */
@keyframes heroDrift {
    from {
        transform: scale(1.08);
    }
    to {
        transform: scale(1);
    }
}

.hero-media {
    animation: heroDrift 16s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.parallax-layer {
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .hero-photo,
    .hero-media {
        animation: none;
    }

    .parallax-layer {
        transform: none !important;
    }
}

/* Scroll hint under the hero */
@keyframes scrollHint {
    0% {
        transform: scaleY(0);
        transform-origin: top center;
    }
    45% {
        transform: scaleY(1);
        transform-origin: top center;
    }
    55% {
        transform: scaleY(1);
        transform-origin: bottom center;
    }
    100% {
        transform: scaleY(0);
        transform-origin: bottom center;
    }
}

.scroll-hint span {
    animation: scrollHint 2600ms ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-hint span {
        animation: none;
        transform: scaleY(1);
    }
}

/* ------------------------------------------------------------- Page header
   Calm dark band that opens the inner pages, in the same palette. */

.page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(
            118% 88% at 10% -12%,
            hsl(var(--primary) / 0.55),
            transparent 58%
        ),
        radial-gradient(
            88% 70% at 96% 112%,
            hsl(var(--accent) / 0.3),
            transparent 62%
        );
}

/* ------------------------------------------------- Small clips inside content */

.clip-float {
    position: absolute;
    z-index: 2;
}

.clip-frame {
    overflow: hidden;
    border-radius: var(--radius);
    border: 5px solid hsl(var(--background));
    box-shadow: 0 18px 40px -18px hsl(var(--foreground) / 0.55);
}

/* --------------------------------------------------- Gallery filter (active) */

button.filter-active {
    background-color: hsl(var(--foreground));
    border-color: hsl(var(--foreground));
    color: hsl(var(--background));
}

/* ----------------------------------------------------------------- Lightbox */

.lightbox-media {
    max-height: 82vh;
    max-width: 100%;
}

/* ---------------------------------------------------------------- Accordion
   Answers are open by default in plain CSS. The script marks the list as ready
   and only then collapses them, so the text is always reachable. */

.faq-panel {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 480ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.faq-panel-inner {
    overflow: hidden;
    opacity: 1;
    transition: opacity 380ms ease 120ms;
}

.faq-list.is-ready .faq-panel {
    grid-template-rows: 0fr;
}

.faq-list.is-ready .faq-panel-inner {
    opacity: 0;
    transition-delay: 0ms;
}

.faq-list.is-ready .faq-item.is-open .faq-panel {
    grid-template-rows: 1fr;
}

.faq-list.is-ready .faq-item.is-open .faq-panel-inner {
    opacity: 1;
    transition-delay: 120ms;
}

.faq-list.no-anim .faq-panel,
.faq-list.no-anim .faq-panel-inner {
    transition: none;
}

.faq-icon {
    transition: transform 460ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.faq-item.is-open .faq-icon {
    transform: rotate(45deg);
}

.faq-trigger:hover .faq-icon {
    transform: scale(1.12);
}

.faq-item.is-open .faq-trigger:hover .faq-icon {
    transform: rotate(45deg) scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
    .faq-panel,
    .faq-panel-inner,
    .faq-icon {
        transition: none;
    }
}

/* --------------------------------------------------------- Clips in content
   A clip inside the page never starts on its own: the still frame is shown
   with a play button over it and the visitor decides when it runs. */

.video-play {
    position: relative;
}

.video-play-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: linear-gradient(
        to top,
        hsl(24 18% 5% / 0.5),
        hsl(24 18% 5% / 0.12) 55%,
        hsl(24 18% 5% / 0.28)
    );
    transition:
        background 400ms ease,
        opacity 400ms ease;
}

.video-play-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3.25rem;
    width: 3.25rem;
    border-radius: 999px;
    border: 1px solid hsl(0 0% 100% / 0.7);
    background: hsl(0 0% 100% / 0.18);
    backdrop-filter: blur(6px);
    color: hsl(0 0% 100%);
    transition:
        transform 400ms cubic-bezier(0.22, 0.61, 0.36, 1),
        background 300ms ease,
        opacity 300ms ease;
}

.video-play-sm .video-play-icon {
    height: 2.25rem;
    width: 2.25rem;
}

.video-play-btn:hover .video-play-icon,
.video-play-btn:focus-visible .video-play-icon {
    background: hsl(0 0% 100% / 0.32);
    transform: scale(1.08);
}

.video-play .icon-pause {
    display: none;
}

.video-play.is-playing .video-play-btn {
    background: transparent;
}

.video-play.is-playing .video-play-icon {
    opacity: 0;
    transform: scale(0.85);
}

.video-play.is-playing .video-play-btn:hover .video-play-icon,
.video-play.is-playing .video-play-btn:focus-visible .video-play-icon {
    opacity: 1;
    transform: scale(1);
}

.video-play.is-playing .icon-play {
    display: none;
}

.video-play.is-playing .icon-pause {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .video-play-btn,
    .video-play-icon {
        transition: none;
    }
}

/* ---------------------------------------------------------- Instagram grid
   A calm square grid of villa photos that opens the profile. */

.ig-tile img {
    transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ig-tile:hover img,
.ig-tile:focus-visible img {
    transform: scale(1.07);
}

@media (prefers-reduced-motion: reduce) {
    .ig-tile img {
        transition: none;
        transform: none !important;
    }
}

/* ---------------------------------------------------------------- Logotipi
   The logo file is dark line art on a transparent background, so on the dark
   surfaces — the hero, the phone menu and the footer — it is flipped to its
   light version instead of sitting on a plate. */

.logo-img {
    display: block;
    width: auto;
}

.logo-invert {
    filter: invert(1);
}

.site-header .logo-img {
    filter: invert(1) drop-shadow(0 2px 12px hsl(24 16% 8% / 0.45));
}

.site-header.is-solid .logo-img {
    filter: none;
}

/* ------------------------------------------------------------------- Header
   Transparent over the hero, then a soft solid bar once the page moves. */

.site-header {
    position: fixed;
    color: hsl(0 0% 100%);
}

.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: hsl(var(--background) / 0.9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    opacity: 0;
    transition:
        opacity 450ms ease,
        border-color 450ms ease;
    pointer-events: none;
}

.site-header.is-solid {
    color: hsl(var(--foreground));
}

.site-header.is-solid::before {
    opacity: 1;
    border-bottom-color: hsl(var(--border));
}

/* -------------------------------------------------------------- Phone menu
   Opens and closes with motion: the panel fades in, then the links arrive one
   after the other. Closed is the default, so it stays shut without motion. */

#mobileMenu {
    opacity: 0;
    transition: opacity 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

#mobileMenu.is-open {
    opacity: 1;
}

#mobileMenu > div {
    transform: translateY(-12px);
    transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

#mobileMenu.is-open > div {
    transform: none;
}

#mobileMenu nav a,
#mobileMenu nav + div > a,
#mobileMenu ul li {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 460ms cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 460ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

#mobileMenu.is-open nav a,
#mobileMenu.is-open nav + div > a,
#mobileMenu.is-open ul li {
    opacity: 1;
    transform: none;
}

#mobileMenu.is-open nav a:nth-child(1) {
    transition-delay: 90ms;
}
#mobileMenu.is-open nav a:nth-child(2) {
    transition-delay: 150ms;
}
#mobileMenu.is-open nav a:nth-child(3) {
    transition-delay: 210ms;
}
#mobileMenu.is-open nav a:nth-child(4) {
    transition-delay: 270ms;
}
#mobileMenu.is-open nav + div > a:nth-child(1) {
    transition-delay: 330ms;
}
#mobileMenu.is-open nav + div > a:nth-child(2) {
    transition-delay: 380ms;
}
#mobileMenu.is-open ul li:nth-child(1) {
    transition-delay: 430ms;
}
#mobileMenu.is-open ul li:nth-child(2) {
    transition-delay: 470ms;
}
#mobileMenu.is-open ul li:nth-child(3) {
    transition-delay: 510ms;
}

@media (prefers-reduced-motion: reduce) {
    #mobileMenu,
    #mobileMenu > div,
    #mobileMenu nav a,
    #mobileMenu nav + div > a,
    #mobileMenu ul li {
        transition: none;
        transform: none;
        opacity: 1;
    }
}

/* ===========================================================================
   Form controls
   The request form uses its own fields — a list that opens in place, two
   calendars and a counter — instead of the grey browser ones.
   =========================================================================== */

/* Anything marked hidden stays hidden, whatever else it is styled as */
[hidden] {
    display: none !important;
}

.field {
    position: relative;
}

.control {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.7rem;
    min-height: 3.4rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--background));
    padding: 0.85rem 1rem;
    text-align: left;
    font-size: 0.98rem;
    color: hsl(var(--foreground));
    transition:
        border-color 300ms ease,
        background 300ms ease;
}

.control:hover {
    border-color: hsl(var(--primary) / 0.55);
}

.control[aria-expanded='true'] {
    border-color: hsl(var(--primary));
}

.control-ico {
    height: 1.05rem;
    width: 1.05rem;
    flex: none;
    color: hsl(var(--primary));
}

.control-caret {
    margin-left: auto;
    height: 1rem;
    width: 1rem;
    flex: none;
    color: hsl(var(--muted-foreground));
    transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.control[aria-expanded='true'] .control-caret {
    transform: rotate(180deg);
}

.control .is-empty,
.is-placeholder {
    color: hsl(var(--muted-foreground) / 0.85);
}

/* A long choice never widens the field */
.control > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Text fields keep the same shell */
.form-input {
    width: 100%;
    min-height: 3.4rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--background));
    padding: 0.85rem 1rem;
    font-size: 0.98rem;
    color: hsl(var(--foreground));
    transition: border-color 300ms ease;
}

.form-input::placeholder {
    color: hsl(var(--muted-foreground) / 0.7);
}

.form-input:hover {
    border-color: hsl(var(--primary) / 0.55);
}

.form-input:focus {
    border-color: hsl(var(--primary));
}

textarea.form-input {
    min-height: 8rem;
    resize: vertical;
    line-height: 1.6;
}

/* A field that needs correcting */
.is-invalid,
.control.is-invalid,
.form-input.is-invalid {
    border-color: hsl(var(--danger));
    background: hsl(var(--danger) / 0.04);
}

.field-error {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: hsl(var(--danger));
}

.field-error svg {
    height: 0.95rem;
    width: 0.95rem;
    flex: none;
    margin-top: 0.1rem;
}

/* ------------------------------------------------------------- Choice list */

.select-list {
    position: absolute;
    z-index: 40;
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0.3rem;
    list-style: none;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--card));
    box-shadow: 0 24px 48px -24px hsl(var(--foreground) / 0.45);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition:
        opacity 220ms ease,
        transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.select-list.is-open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.select-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0.8rem;
    border-radius: 4px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 220ms ease;
}

.select-option:hover,
.select-option:focus-visible {
    background: hsl(var(--muted));
}

.select-option[aria-selected='true'] {
    color: hsl(var(--primary));
}

.select-option .opt-check {
    height: 1rem;
    width: 1rem;
    flex: none;
    opacity: 0;
    transition: opacity 200ms ease;
}

.select-option[aria-selected='true'] .opt-check {
    opacity: 1;
}

/* ---------------------------------------------------------------- Calendar */

.dp-pop {
    position: absolute;
    z-index: 45;
    top: calc(100% + 0.4rem);
    left: 0;
    width: min(19.5rem, calc(100vw - 2.5rem));
    padding: 0.85rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--card));
    box-shadow: 0 26px 52px -24px hsl(var(--foreground) / 0.5);
    opacity: 0;
    transform: translateY(-6px) scale(0.985);
    transform-origin: top left;
    pointer-events: none;
    transition:
        opacity 220ms ease,
        transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dp-pop.dp-flip {
    left: auto;
    right: 0;
    transform-origin: top right;
}

.dp-pop.is-open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.dp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.dp-title {
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.dp-nav {
    display: flex;
    height: 2.1rem;
    width: 2.1rem;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: hsl(var(--primary));
    transition: background 220ms ease;
}

.dp-nav:hover:not(:disabled) {
    background: hsl(var(--muted));
}

.dp-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.dp-ico {
    height: 1.05rem;
    width: 1.05rem;
}

.dp-week,
.dp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.dp-week {
    margin-bottom: 0.3rem;
}

.dp-week span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.6rem;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: hsl(var(--muted-foreground));
}

.dp-day {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.3rem;
    border-radius: 4px;
    font-size: 0.88rem;
    transition:
        background 200ms ease,
        color 200ms ease;
}

.dp-day:hover:not(:disabled) {
    background: hsl(var(--muted));
}

.dp-day:disabled {
    opacity: 0.28;
    cursor: not-allowed;
}

.dp-day.is-today {
    box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.45);
}

.dp-day.is-selected {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.dp-day.is-selected:hover {
    background: hsl(var(--primary));
}

.dp-note {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid hsl(var(--border));
    font-size: 0.74rem;
    line-height: 1.4;
    color: hsl(var(--muted-foreground));
}

@media (prefers-reduced-motion: reduce) {
    .select-list,
    .dp-pop,
    .control-caret {
        transition: none;
    }
}

/* ----------------------------------------------------------------- Counter */

.stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3.4rem;
    padding: 0.3rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--background));
    transition: border-color 300ms ease;
}

.stepper:hover {
    border-color: hsl(var(--primary) / 0.55);
}

.stepper button {
    display: flex;
    height: 2.6rem;
    width: 2.6rem;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: hsl(var(--primary));
    transition: background 220ms ease;
}

.stepper button:hover:not(:disabled) {
    background: hsl(var(--muted));
}

.stepper button:disabled {
    opacity: 0.32;
    cursor: not-allowed;
}

.stepper input {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: center;
    font-size: 1rem;
    color: hsl(var(--foreground));
}