:root {
    --ocean: #0077b6; --ocean-dark: #005f8a; --ocean-light: #90e0ef;
    --sand: #f4e8c1; --sand-light: #faf5e8;
    --green: #2d6a4f; --green-light: #52b788;
    --coral: #e76f51; --coral-dark: #c45a3c;
    --dark: #1a1a2e;
    --gray-100: #f8f9fa; --gray-200: #e9ecef; --gray-300: #dee2e6;
    --gray-400: #ced4da; --gray-500: #adb5bd; --gray-600: #6c757d;
    --gray-700: #495057; --gray-800: #343a40; --white: #ffffff;
    --shadow: 0 2px 12px rgba(0,0,0,0.08);
    --shadow-hover: 0 8px 30px rgba(0,0,0,0.12);
    --radius: 12px; --radius-sm: 8px;
    --transition: all 0.3s ease;
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; padding:0; font-family:var(--font); font-size:16px; line-height:1.6; color:var(--gray-800); background:var(--white); }
img { max-width:100%; height:auto; display:block; }
a { color:var(--ocean); text-decoration:none; transition:var(--transition); }
a:hover { color:var(--ocean-dark); }
h1,h2,h3,h4 { margin:0 0 0.5em; line-height:1.2; color:var(--dark); }
.container { max-width:1200px; margin:0 auto; padding:0 24px; }

.main-nav { position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(255,255,255,0.95); backdrop-filter:blur(10px); box-shadow:0 1px 8px rgba(0,0,0,0.06); transition:var(--transition); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:64px; }
.nav-logo { font-size:20px; font-weight:700; color:var(--dark) !important; }
.nav-menu { list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:8px; }
.nav-menu li a { display:block; padding:8px 16px; color:var(--gray-700); font-weight:500; font-size:15px; border-radius:var(--radius-sm); transition:var(--transition); }
.nav-menu li a:hover { color:var(--ocean); background:var(--gray-100); }
.nav-cta { background:var(--coral) !important; color:var(--white) !important; border-radius:var(--radius-sm) !important; font-weight:600 !important; }
.nav-cta:hover { background:var(--coral-dark) !important; }
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--dark); border-radius:2px; }

.hero { min-height:60vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--ocean),var(--green)); background-size:cover; background-position:center; position:relative; margin-top:64px; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(0,119,182,0.7),rgba(45,106,79,0.7)); display:flex; align-items:center; justify-content:center; }
.hero-content { text-align:center; color:var(--white); padding:40px 20px; }
.hero-content h1 { font-size:clamp(2rem,5vw,3.5rem); color:var(--white); margin-bottom:16px; text-shadow:0 2px 20px rgba(0,0,0,0.2); }
.hero-subtitle { font-size:clamp(1rem,2.5vw,1.3rem); opacity:0.9; margin-bottom:32px; font-weight:300; }
.btn-hero { display:inline-block; padding:16px 40px; background:var(--coral); color:var(--white) !important; border-radius:50px; font-size:18px; font-weight:600; transition:var(--transition); box-shadow:0 4px 20px rgba(231,111,81,0.4); }
.btn-hero:hover { background:var(--coral-dark); transform:translateY(-2px); box-shadow:0 6px 30px rgba(231,111,81,0.5); }

.section { padding:80px 0; }
.section-alt { background:var(--sand-light); }
.section-title { text-align:center; font-size:2rem; margin-bottom:8px; }
.section-subtitle { text-align:center; color:var(--gray-600); margin-bottom:48px; font-size:1.1rem; }
.section-cta { text-align:center; margin-top:40px; }

.btn { display:inline-block; padding:12px 28px; background:var(--ocean); color:var(--white) !important; border-radius:var(--radius-sm); font-weight:600; font-size:15px; border:2px solid transparent; cursor:pointer; transition:var(--transition); text-decoration:none; }
.btn:hover { background:var(--ocean-dark); transform:translateY(-1px); }
.btn-outline { background:transparent; color:var(--ocean) !important; border-color:var(--ocean); }
.btn-outline:hover { background:var(--ocean); color:var(--white) !important; }
.btn-large { padding:16px 36px; font-size:17px; }
.btn-full { width:100%; text-align:center; }

.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.card { background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:var(--transition); }
.card:hover { box-shadow:var(--shadow-hover); transform:translateY(-4px); }
.card-link { text-decoration:none !important; color:inherit !important; display:block; }
.card-image { aspect-ratio:3/2; overflow:hidden; background:var(--gray-200); }
.card-image img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s ease; }
.card:hover .card-image img { transform:scale(1.05); }
.card-image-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:3rem; background:var(--gray-100); }
.card-image-placeholder.large { min-height:300px; font-size:5rem; }
.card-body { padding:24px; }
.card-body h3 { font-size:1.2rem; margin-bottom:8px; }
.card-body p { color:var(--gray-600); font-size:0.95rem; margin-bottom:16px; }
.card-price { display:inline-block; background:var(--sand); color:var(--green); padding:4px 12px; border-radius:20px; font-weight:600; font-size:0.85rem; margin-bottom:8px; }
.card-badge { display:inline-block; background:var(--ocean-light); color:var(--ocean-dark); padding:2px 10px; border-radius:20px; font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }

.back-link { display:inline-block; margin-bottom:24px; color:var(--gray-600); font-weight:500; font-size:0.9rem; }
.back-link:hover { color:var(--ocean); }
.detail-layout { display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:start; }
.gallery-main { border-radius:var(--radius); overflow:hidden; background:var(--gray-100); }
.gallery-main img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.gallery-thumbs { display:flex; gap:8px; margin-top:12px; overflow-x:auto; padding-bottom:4px; }
.thumb { width:72px; height:54px; object-fit:cover; border-radius:var(--radius-sm); cursor:pointer; opacity:0.6; transition:var(--transition); border:2px solid transparent; flex-shrink:0; }
.thumb:hover, .thumb.active { opacity:1; border-color:var(--ocean); }
.detail-info h1 { font-size:1.8rem; margin-bottom:12px; }
.detail-price { font-size:1.3rem; color:var(--green); font-weight:700; margin-bottom:20px; }
.detail-description { color:var(--gray-700); line-height:1.8; margin-bottom:32px; }

.mini-calendar { background:var(--gray-100); border-radius:var(--radius); padding:20px; margin-bottom:24px; }
.mini-calendar h3 { font-size:1rem; margin-bottom:12px; }
.mini-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center; font-size:0.8rem; }
.mini-cal-header { font-weight:700; color:var(--gray-600); padding:4px; }
.mini-cal-day { padding:6px 2px; border-radius:4px; font-size:0.75rem; }
.mini-cal-day.available { background:#d4edda; color:var(--green); }
.mini-cal-day.unavailable { background:#f8d7da; color:#721c24; text-decoration:line-through; }
.mini-cal-day.empty { background:transparent; }
.mini-cal-day .rate { display:block; font-size:0.65rem; opacity:0.7; }

.filter-tabs { display:flex; gap:8px; margin-bottom:32px; overflow-x:auto; padding-bottom:4px; }
.filter-tab { padding:8px 20px; border-radius:50px; background:var(--gray-100); color:var(--gray-700); font-weight:500; font-size:0.9rem; white-space:nowrap; transition:var(--transition); text-decoration:none; }
.filter-tab:hover { background:var(--gray-200); color:var(--dark); }
.filter-tab.active { background:var(--ocean); color:var(--white); }

.booking-form .form-group { margin-bottom:20px; }
.booking-form label, .form-group label { display:block; font-weight:600; margin-bottom:6px; color:var(--gray-700); font-size:0.9rem; }
.booking-form input[type="text"], .booking-form input[type="email"], .booking-form input[type="tel"], .booking-form input[type="date"], .booking-form input[type="number"], .booking-form select, .booking-form textarea, .form-group input, .form-group select, .form-group textarea { width:100%; padding:12px 16px; border:2px solid var(--gray-300); border-radius:var(--radius-sm); font-family:var(--font); font-size:15px; transition:var(--transition); background:var(--white); }
.booking-form input:focus, .booking-form select:focus, .booking-form textarea:focus, .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:none; border-color:var(--ocean); box-shadow:0 0 0 3px rgba(0,119,182,0.1); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.booking-calendar { margin:20px 0; }
.booking-cal-wrapper { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.booking-cal-month { background:var(--gray-100); border-radius:var(--radius); padding:16px; }
.booking-cal-month h4 { text-align:center; margin-bottom:12px; font-size:0.95rem; }
.booking-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; text-align:center; font-size:0.82rem; }
.booking-cal-grid .day-header { font-weight:700; color:var(--gray-500); padding:4px; font-size:0.7rem; text-transform:uppercase; }
.booking-cal-grid .day-cell { padding:8px 2px; border-radius:6px; cursor:pointer; transition:var(--transition); }
.booking-cal-grid .day-cell:hover:not(.disabled):not(.empty) { background:var(--ocean-light); }
.booking-cal-grid .day-cell.selected { background:var(--ocean); color:var(--white); }
.booking-cal-grid .day-cell.in-range { background:rgba(0,119,182,0.15); }
.booking-cal-grid .day-cell.disabled { color:var(--gray-400); text-decoration:line-through; cursor:not-allowed; }
.booking-cal-grid .day-cell.empty { cursor:default; }
.booking-cal-grid .day-cell .cell-rate { display:block; font-size:0.6rem; opacity:0.7; margin-top:2px; }
.estimated-total { background:var(--sand-light); border:2px dashed var(--sand); padding:16px 20px; border-radius:var(--radius-sm); margin-bottom:24px; font-size:1.1rem; }
.estimated-total small { display:block; color:var(--gray-500); font-size:0.8rem; margin-top:4px; }

.booking-success { text-align:center; padding:60px 20px; }
.success-icon { font-size:4rem; margin-bottom:16px; }
.booking-success h2 { color:var(--green); margin-bottom:12px; }
.booking-success p { color:var(--gray-600); margin-bottom:24px; }

.cta-section { background:linear-gradient(135deg,var(--ocean),var(--green)); color:var(--white); text-align:center; }
.cta-section h2 { color:var(--white); font-size:2rem; margin-bottom:12px; }
.cta-section p { opacity:0.9; margin-bottom:28px; font-size:1.1rem; }

.about-text { font-size:1.1rem; line-height:1.8; color:var(--gray-700); text-align:center; }
.empty-state { text-align:center; padding:60px 20px; color:var(--gray-500); font-size:1.1rem; }

.flash { padding:14px 20px; border-radius:var(--radius-sm); margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; font-weight:500; animation:slideDown 0.3s ease; }
@keyframes slideDown { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
.flash-success { background:#d4edda; color:#155724; border:1px solid #c3e6cb; }
.flash-error { background:#f8d7da; color:#721c24; border:1px solid #f5c6cb; }
.flash-warning { background:#fff3cd; color:#856404; border:1px solid #ffeeba; }
.flash-close { cursor:pointer; font-size:1.3rem; line-height:1; opacity:0.6; margin-left:12px; }
.flash-close:hover { opacity:1; }

.site-footer { background:var(--dark); color:rgba(255,255,255,0.8); padding:60px 0 0; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px; padding-bottom:40px; }
.footer-col h4 { color:var(--white); margin-bottom:16px; font-size:1.1rem; }
.footer-col p { font-size:0.9rem; line-height:1.7; margin-bottom:8px; }
.footer-col ul { list-style:none; padding:0; margin:0; }
.footer-col ul li { margin-bottom:8px; }
.footer-col ul li a { color:rgba(255,255,255,0.7); font-size:0.9rem; }
.footer-col ul li a:hover { color:var(--white); }
.footer-col a { color:rgba(255,255,255,0.7); }
.footer-col a:hover { color:var(--white); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.1); padding:20px 0; text-align:center; font-size:0.85rem; color:rgba(255,255,255,0.5); }

/* Card images - fixed 3:2 aspect ratio, centered crop */
.card-image {
    position: relative;
    width: 100%;
    padding-top: 66.67%; /* 3:2 aspect ratio */
    overflow: hidden;
    background: #f0f0f0;
}
.card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.card-image-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    background: #e8f5e9;
}

/* Detail gallery - constrain and center */
.gallery-main {
    width: 100%;
    max-height: 500px;
    overflow: hidden;
    border-radius: 12px;
    background: #f0f0f0;
}
.gallery-main img {
    width: 100%;
    height: 100%;
    max-height: 500px;
    object-fit: cover;
    object-position: center;
    display: block;
}
.gallery-main .card-image-placeholder.large {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
}

/* Thumbnails */
.gallery-thumbs img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    object-position: center;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}
.gallery-thumbs img.active,
.gallery-thumbs img:hover {
    border-color: #0077b6;
}

@media (max-width:768px) {
    .nav-toggle { display:flex; }
    .nav-menu { display:none; position:absolute; top:64px; left:0; right:0; background:#fff; flex-direction:column; padding:16px 24px; box-shadow:0 8px 24px rgba(0,0,0,0.15); z-index:999; border-radius:0 0 12px 12px; }
    .nav-menu.active { display:flex; }
    .card-grid { grid-template-columns:repeat(2,1fr); gap:16px; }
    .detail-layout { grid-template-columns:1fr; gap:32px; }
    .footer-grid { grid-template-columns:1fr; gap:24px; }
    .booking-cal-wrapper { grid-template-columns:1fr; }
    .form-row { grid-template-columns:1fr; }
    .section { padding:48px 0; }
    .hero { min-height:50vh; }
}
@media (max-width:480px) {
    .card-grid { grid-template-columns:1fr; }
    .hero-content h1 { font-size:1.8rem; }
    .container { padding:0 16px; }
}

img.little-logo {
    width: 32px;
    height: 32px;
    position: relative;
    display: inline-block;
    margin-bottom: -6px;
}