/*
Theme Name: Villa Nord
Theme URI: https://villanord.ee
Author: Villa Nord
Author URI: https://villanord.ee
Description: Luxury Seaside Villa one-page booking theme for Villa Nord, Northern Estonia.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: villa-nord
Tags: one-page, hotel, booking, luxury, full-width-template
*/

/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-padding-top: 80px; scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; scroll-behavior: smooth; background: #fff; color: #1f2937; -webkit-font-smoothing: antialiased; }

/* Typography */
.font-serif, .font-heading { font-family: 'Playfair Display', serif; }
.font-body { font-family: 'Inter', sans-serif; }

/* Nav */
.backdrop-blur-custom { backdrop-filter: blur(12px); background-color: #ffffff; }

/* Mobile Menu */
#mobile-menu { display: none; background-color: #ffffff; }
#mobile-menu.is-open { display: flex; }

/* Hover Lift */
.hover-lift { transition: transform 0.25s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -12px rgba(0,0,0,0.1); }

/* Hero */
.hero-gradient { background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.55)); }
.hero-content { opacity: 0; transform: translateY(16px); animation: heroFade 0.9s ease forwards; animation-delay: 0.2s; }
@keyframes heroFade { to { opacity: 1; transform: translateY(0); } }

/* Reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.75s ease, transform 0.75s ease; will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Success messages */
.villa-nord-success { background-color: #dcfce7; border: 1px solid #22c55e; color: #166534; padding: 1rem; border-radius: 0.75rem; margin-bottom: 1.5rem; text-align: center; }

/* Language switch buttons */
.lang-switch { appearance: none; border: 0; background: transparent; color: #374151; cursor: pointer; }
.lang-switch.is-active { background-color: #92400e !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(146,64,14,0.18); }
.lang-switch:not(.is-active) { background: transparent !important; color: #374151 !important; }
.lang-switch:not(.is-active):hover { background-color: #f3f4f6 !important; }

/* ─── Room Slider ─── */
.vn-room-slider { position: relative; overflow: hidden; width: 100%; }
.vn-room-slides { display: flex; transition: transform 0.45s ease; will-change: transform; width: 100%; }
.vn-room-slide { flex: 0 0 100%; width: 100%; min-width: 100%; position: relative; }
.vn-room-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vn-slide-prev, .vn-slide-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.45); border: none; color: #fff; font-size: 1.6rem; cursor: pointer; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; z-index: 10; transition: background .2s; line-height: 1; padding: 0; }
.vn-slide-prev { left: 10px; }
.vn-slide-next { right: 10px; }
.vn-slide-prev:hover, .vn-slide-next:hover { background: rgba(0,0,0,0.70); }
.vn-slide-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 10; }
.vn-slide-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5); border: none; cursor: pointer; padding: 0; transition: background .2s; }
.vn-slide-dot.is-active, .vn-slide-dot:hover { background: #fff; }

/* ─── Gallery Hover Overlay ─── */
.vn-gallery-item { position: relative; overflow: hidden; cursor: pointer; }
.vn-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; display: block; }
.vn-gallery-item:hover img { transform: scale(1.06); }
.vn-gallery-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 50%); opacity: 0; transition: opacity 0.35s ease; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; pointer-events: none; }
.vn-gallery-item:hover .vn-gallery-overlay, .vn-gallery-item:focus-within .vn-gallery-overlay { opacity: 1; }
.vn-gallery-overlay-title { color: #fff; font-size: .9rem; font-weight: 600; line-height: 1.3; }
.vn-gallery-overlay-desc { color: rgba(255,255,255,.8); font-size: .75rem; margin-top: 3px; line-height: 1.35; }

/* ─── Lightbox ─── */
#vn-lightbox { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.93); flex-direction: column; align-items: center; justify-content: center; }
#vn-lightbox.is-open { display: flex; }
#vn-lightbox-img { max-width: 90vw; max-height: 78vh; object-fit: contain; border-radius: 8px; display: block; }
#vn-lightbox-caption { text-align: center; color: #fff; margin-top: 14px; max-width: 640px; padding: 0 20px; }
#vn-lightbox-caption-title { font-weight: 600; font-size: 1rem; }
#vn-lightbox-caption-desc { font-size: .85rem; opacity: .75; margin-top: 4px; }
#vn-lightbox-counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.55); font-size: .78rem; letter-spacing: .1em; }
#vn-lightbox-close { position: absolute; top: 16px; right: 22px; background: none; border: none; color: #fff; font-size: 2.4rem; cursor: pointer; line-height: 1; opacity: .75; padding: 0; }
#vn-lightbox-close:hover { opacity: 1; }
#vn-lightbox-prev, #vn-lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.15); border: none; color: #fff; font-size: 2.8rem; cursor: pointer; border-radius: 50%; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0; transition: background .2s; }
#vn-lightbox-prev { left: 16px; }
#vn-lightbox-next { right: 16px; }
#vn-lightbox-prev:hover, #vn-lightbox-next:hover { background: rgba(255,255,255,0.30); }

/* ─── Booking Pricing Display ─── */
.vn-booking-pricing { background: #f8f6f2; border: 1px solid #e5d9c7; border-radius: 14px; padding: 24px 28px; margin-top: 28px; }
.vn-booking-pricing-row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid #ede5d8; }
.vn-booking-pricing-row:last-child { border-bottom: none; padding-bottom: 0; }
.vn-booking-pricing-label { font-weight: 600; color: #7c2d12; font-size: .95rem; }
.vn-booking-pricing-amount { color: #374151; font-size: .9rem; text-align: right; }