/* ==========================================================================
   Vassilia on the Beach – modern design (loaded after main.css)
   Sand & deep sea · Cormorant Garamond titles · Manrope text · rounded images
   ========================================================================== */
.design-modern {
	--teal: #13a89e;
	--teal-d: #0d7f78;
	--sea: #0c3a40;
	--sea-2: #0f4a51;
	--sand: #f5efe5;
	--sand-2: #ebe2d3;
	--ink: #14262a;
	--text: #4d5d60;
	--line: #e3dccf;
	--soft: var(--sand);
	--serif: "Cormorant Garamond", "Lora", Georgia, serif;
	--sans: "Manrope", "Roboto", "Helvetica Neue", Arial, sans-serif;
	--r: 22px;
	font: 400 16.5px/1.75 var(--sans);
	color: var(--text);
	background: #fffdf9;
}
.design-modern .m-only { display: revert; }
.design-modern h1, .design-modern h2, .design-modern h3, .design-modern h4 { font-weight: 500; letter-spacing: -.01em; }
.design-modern .eyebrow { display: block; font: 600 12px/1.2 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--teal); margin: 0 0 16px; }
.design-modern .eyebrow.center { text-align: center; }
.design-modern .sep { display: none; }
.design-modern .sec-title { font-size: clamp(40px, 5.4vw, 72px); line-height: 1.02; letter-spacing: -.02em; margin-bottom: 26px; }
.design-modern .lead-title { font: italic 400 clamp(22px, 2.3vw, 30px)/1.35 var(--serif); color: var(--sea); }
.design-modern .section { padding: 120px 0; }

/* Buttons */
.design-modern .btn { border-radius: 999px; padding: 14px 30px; font: 600 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; background: var(--sea); border-color: var(--sea); }
.design-modern .btn:hover { background: var(--teal); border-color: var(--teal); }
.design-modern .btn-ghost { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .7); backdrop-filter: blur(6px); }
.design-modern .btn-ghost:hover { background: #fff; color: var(--sea); border-color: #fff; }
.design-modern .btn-line { background: transparent; color: var(--sea); border-color: var(--sea); }
.design-modern .btn-line:hover { background: var(--sea); color: #fff; }

/* ---------- Header: transparent over the photo, white when scrolling ---------- */
.design-modern .site-header { background: transparent; }
.design-modern.has-hero .site-header { position: fixed; left: 0; right: 0; }
.design-modern .header-main { background: #fffdf9; border: 0; transition: background .35s, box-shadow .35s; }
.design-modern.has-hero .site-header:not(.scrolled) .header-main { background: linear-gradient(180deg, rgba(8, 28, 31, .55), rgba(8, 28, 31, 0)); }
.design-modern .site-header.scrolled .header-main { background: rgba(255, 253, 249, .96); backdrop-filter: blur(10px); box-shadow: 0 6px 30px rgba(12, 58, 64, .08); }
.design-modern .header-inner { max-width: 1360px; min-height: 96px; }
.design-modern .site-logo img { height: 74px; }
.design-modern.has-hero.logo-white .site-header:not(.scrolled) .site-logo img { filter: brightness(0) invert(1); }
.design-modern.has-hero:not(.logo-white) .site-header:not(.scrolled) .site-logo img { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .35)); }
.design-modern .site-header.scrolled .site-logo img { height: 58px; }
.design-modern .main-nav .menu > li > a { font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); padding: 14px 11px; }
.design-modern.has-hero .site-header:not(.scrolled) .main-nav .menu > li > a,
.design-modern.has-hero .site-header:not(.scrolled) .lang-dd-btn,
.design-modern.has-hero .site-header:not(.scrolled) .menu-toggle { color: #fff; }
.design-modern .main-nav .menu > li > a::after { bottom: 6px; height: 1px; background: currentColor; }
.design-modern .main-nav .menu > li:hover > a, .design-modern .main-nav .menu > li.is-active > a { color: var(--teal); }
.design-modern.has-hero .site-header:not(.scrolled) .main-nav .menu > li.is-active > a { color: #fff; }
.design-modern .sub-menu { border: 0; border-radius: 16px; padding: 12px; box-shadow: 0 24px 60px rgba(12, 58, 64, .16); }
.design-modern .sub-menu a { font: 500 14px/1.35 var(--sans); color: var(--ink); border-radius: 10px; padding: 9px 14px; }
.design-modern .sub-menu a:hover, .design-modern .sub-menu .is-active a { background: var(--sand); color: var(--teal-d); }
.design-modern .btn-book { border-radius: 999px; background: var(--teal); font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 13px 22px; }
.design-modern .btn-book:hover { background: #fff; color: var(--sea); }
.design-modern .site-header.scrolled .btn-book:hover { background: var(--sea); color: #fff; }
.design-modern .lang-dd-menu { border-radius: 14px; }
.design-modern .menu-toggle { font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.design-modern .topbar { background: var(--sea); }

/* ---------- Hero slider ---------- */
.design-modern .slider { height: 100vh; min-height: 620px; max-height: none; }
.design-modern .slider .slide::after { background: linear-gradient(180deg, rgba(8, 28, 31, .25) 0%, rgba(8, 28, 31, .05) 40%, rgba(8, 28, 31, .55) 100%); }
.design-modern .slide-caption { top: auto; bottom: 150px; transform: none; text-align: left; max-width: 1360px; margin: 0 auto; padding: 0 40px; }
.design-modern .slide-title { font: 500 clamp(48px, 8vw, 120px)/.95 var(--serif); letter-spacing: -.03em; max-width: 12ch; }
.design-modern .slide-sub { font: 400 clamp(16px, 1.5vw, 19px)/1.6 var(--sans); max-width: 46ch; opacity: .92; }
.design-modern .slide-btns { justify-content: flex-start; }
.design-modern .slider-arrow { top: auto; bottom: 64px; transform: none; border-radius: 50%; width: 54px; height: 54px; background: rgba(255, 255, 255, .1); backdrop-filter: blur(6px); }
.design-modern .slider-arrow.prev { left: auto; right: 110px; }
.design-modern .slider-arrow.next { right: 40px; }
.design-modern .slider-dots { justify-content: flex-start; left: 40px; right: auto; bottom: 86px; max-width: 1360px; }
.design-modern .slider-dots button { width: 34px; height: 3px; border-radius: 2px; border: 0; background: rgba(255, 255, 255, .45); }
.design-modern .slider-dots button.is-active { background: #fff; }
.design-modern .room-slider { height: 82vh; min-height: 520px; }
.design-modern .room-slider .slide::after { background: linear-gradient(180deg, rgba(8, 28, 31, .45), rgba(8, 28, 31, 0) 35%); }

/* Booking: floating card over the bottom of the photo */
.design-modern .booking-bar { background: transparent; padding: 0; position: relative; z-index: 5; margin-top: -48px; }
.design-modern .booking-bar .container { max-width: 1060px; }
.design-modern .booking-bar .booking { background: #fff; border-radius: 999px; padding: 12px 12px 12px 34px; box-shadow: 0 30px 70px rgba(12, 58, 64, .18); gap: 0; align-items: center; }
.design-modern .booking-bar .bk-field { padding: 4px 20px; border-right: 1px solid var(--line); }
.design-modern .bk-label { color: var(--teal-d); font: 600 11px/1 var(--sans); letter-spacing: .18em; }
.design-modern .booking input, .design-modern .booking select { border: 0; height: 34px; padding: 0; background: transparent; font: 500 15px/1 var(--sans); color: var(--ink); }
.design-modern .booking-bar .booking .bk-submit { height: 58px; margin-left: 14px; padding: 0 30px; }
.design-modern .room-book .booking input, .design-modern .room-book .booking select { border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; height: 48px; background: #fff; }
.design-modern .room-book .bk-submit { height: 52px; }

/* ---------- Relax ---------- */
.design-modern .relax-grid { grid-template-columns: 1fr 1.1fr; gap: 90px; align-items: center; }
.design-modern .relax-text p { font-size: 16.5px; }
.design-modern .relax-media { padding: 0 0 70px 60px; }
.design-modern .relax-media > img:first-child { border-radius: 260px 260px var(--r) var(--r); aspect-ratio: 4 / 5; }
.design-modern .relax-img-2 { position: absolute; left: 0; bottom: 0; width: 46%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); border: 8px solid #fffdf9; box-shadow: 0 30px 60px rgba(12, 58, 64, .18); }
.design-modern .tag-btn { left: auto; right: 24px; top: 24px; }

/* Tiles + Why */
.design-modern .tiles-why { grid-template-columns: 1fr; background: var(--sea); }
.design-modern .tiles { order: 2; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 0 40px 110px; max-width: 1360px; margin: 0 auto; width: 100%; }
.design-modern .tile { border-radius: var(--r); }
.design-modern .tile img { aspect-ratio: 4 / 5; }
.design-modern .tile figcaption { background: linear-gradient(0deg, rgba(8, 28, 31, .75), rgba(8, 28, 31, 0)); font: italic 500 28px/1 var(--serif); text-align: left; padding: 60px 26px 24px; }
.design-modern .why { order: 1; background: none !important; }
.design-modern .why::before { display: none; }
.design-modern .why-inner { max-width: 1360px; margin: 0 auto; padding: 120px 40px 60px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px; color: rgba(255, 255, 255, .78); }
.design-modern .why-inner .eyebrow, .design-modern .why-inner .sec-title { grid-column: 1; }
.design-modern .why-inner .lead-title { grid-column: 2; grid-row: 1 / span 2; color: #fff; align-self: end; margin-bottom: 26px; }
.design-modern .why-inner p:not(.eyebrow) { grid-column: 2; }
.design-modern .why-inner .btn { grid-column: 2; justify-self: start; background: var(--teal); border-color: var(--teal); }
.design-modern .why-inner .btn:hover { background: #fff; color: var(--sea); }
.design-modern .why-inner .eyebrow { color: #8fd8d1; }

/* Facilities */
.design-modern .fac { background: var(--sand); }
.design-modern .fac .fac-img { width: 140px; height: 140px; object-fit: cover; border-radius: 50%; background: #fff; padding: 14px; box-shadow: 0 16px 40px rgba(12, 58, 64, .1); }
.design-modern .fac .eyebrow { color: var(--teal); font-size: 12px; }
.design-modern .fac p { font-size: 19px; color: var(--ink); max-width: 640px; margin-left: auto; margin-right: auto; }

/* Rooms */
.design-modern .room-grid { gap: 30px; }
@media (min-width: 1101px) {
	.design-modern .rooms-home .container { max-width: 1360px; padding: 0 40px; }
	.design-modern .room-grid { grid-template-columns: repeat(5, 1fr); gap: 26px; }
	.design-modern .room-grid .room-card-name { font-size: 23px; }
}
.design-modern .room-card { background: transparent; position: relative; }
.design-modern .room-card-img { border-radius: var(--r); }
.design-modern .room-card-img img { aspect-ratio: 4 / 5; }
.design-modern .room-card-name { text-align: left; font: 500 27px/1.15 var(--serif); padding: 18px 2px 6px; color: var(--ink); }
.design-modern .room-card-more { display: inline-flex; align-items: center; gap: 8px; font: 600 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--teal-d); padding-left: 2px; }
.design-modern .room-card-more .vs-icon { width: 15px; height: 15px; transition: transform .3s; }
.design-modern .room-card:hover .room-card-more .vs-icon { transform: translateX(5px); }
.design-modern .room-strip { grid-auto-columns: minmax(270px, 1fr); }

/* Reviews */
.design-modern .reviews { background: #fffdf9; }
.design-modern .rev-card { border: 1px solid var(--line); border-radius: var(--r); padding: 38px 34px; background: #fff; }
.design-modern .rev-stars { color: var(--teal); }
.design-modern .rev-card blockquote { font: italic 400 21px/1.5 var(--serif); color: var(--ink); }
.design-modern .rev-card figcaption { font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--teal-d); }

/* Where we are */
.design-modern .where { max-width: 1360px; margin: 0 auto 120px; width: calc(100% - 80px); background: var(--sea); border-radius: 30px; overflow: hidden; }
.design-modern .where-map iframe { filter: grayscale(.4) contrast(1.05); }
.design-modern .where-info { padding: 80px 70px; color: rgba(255, 255, 255, .78); }
.design-modern .where-info .eyebrow { color: #8fd8d1; }
.design-modern .where-info h4 { font: italic 500 26px/1.2 var(--serif); }
.design-modern .where-info .btn { background: var(--teal); border-color: var(--teal); }
.design-modern .where-page { margin-top: 0; }

/* ---------- Footer ---------- */
.design-modern .site-footer { background: var(--sea); color: rgba(255, 255, 255, .7); display: flex; flex-direction: column; }
.design-modern .f-social { order: 1; background: var(--teal); }
.design-modern .f-social a { font: 600 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.design-modern .f-cols { order: 2; padding: 80px 0 50px; }
.design-modern .f-cols-grid { max-width: 1360px; padding: 0 40px; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 50px; }
.design-modern .f-col p { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.design-modern .f-col .vs-icon { color: #8fd8d1; margin-top: 5px; }
.design-modern .f-col a { color: rgba(255, 255, 255, .85); }
.design-modern .f-col a:hover { color: #8fd8d1; }
.design-modern .f-h { font: 600 12px/1 var(--sans) !important; letter-spacing: .2em; text-transform: uppercase; color: #fff; margin-bottom: 22px; }
.design-modern .f-logo-m img { height: 110px; width: auto; opacity: .95; margin-bottom: 18px; }
.design-modern.flogo-white .f-logo-m img { filter: brightness(0) invert(1); }
.design-modern .f-links { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 20px; }
.design-modern .f-links li { margin-bottom: 8px; font-size: 14.5px; }
.design-modern .f-col .btn { background: var(--teal); border-color: var(--teal); margin-top: 6px; }
.design-modern .f-col .btn:hover { background: #fff; color: var(--sea); }
.design-modern .f-mhte { margin-top: 16px; font-size: 13px; opacity: .7; }
.design-modern .f-almiriki { order: 3; background: var(--sea-2); border: 0; padding: 36px 0; }
.design-modern .f-alm-logo img { max-width: 180px; border-radius: 12px; background: #fff; padding: 10px; }
.design-modern .f-alm-title a { color: #fff; font-family: var(--serif); }
.design-modern .f-almiriki p { color: rgba(255, 255, 255, .7); }
.design-modern .footer-bottom { order: 4; max-width: 1360px; padding: 24px 40px; border-color: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .5); }
.design-modern .footer-bottom a { color: #8fd8d1; }

/* ---------- Inner pages ---------- */
.design-modern .page-hero { height: 68vh; min-height: 460px; align-items: flex-end; justify-content: flex-start; text-align: left; }
.design-modern .page-hero::after { background: linear-gradient(180deg, rgba(8, 28, 31, .5), rgba(8, 28, 31, .1) 40%, rgba(8, 28, 31, .6)); }
.design-modern .page-hero-inner { max-width: 1360px; padding: 0 40px 70px; width: 100%; }
.design-modern .page-hero h1 { font-size: clamp(46px, 7vw, 100px); line-height: .98; letter-spacing: -.03em; }
.design-modern .crumbs { font: 600 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.design-modern .page-title { padding: 160px 0 20px; }
.design-modern .prose h2 { font-size: clamp(32px, 3.6vw, 48px); }
.design-modern .prose h3 { font-size: clamp(24px, 2.4vw, 32px); }
.design-modern .prose .wp-block-image img { border-radius: var(--r); }
.design-modern .prose ul.icon-list { gap: 12px; }
.design-modern .prose ul.icon-list li { border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; background: #fff; font-size: 15px; color: var(--ink); }
.design-modern .vs-gallery { gap: 14px; }
.design-modern .vs-gallery a, .design-modern .masonry a, .design-modern .wp-block-gallery figure { border-radius: 16px; }
.design-modern .masonry { gap: 14px; }
.design-modern .room-title { font-size: clamp(40px, 5vw, 68px); line-height: 1; letter-spacing: -.02em; }
.design-modern .room-book { background: #fff; border: 1px solid var(--line); border-top: 0; border-radius: var(--r); box-shadow: 0 30px 60px rgba(12, 58, 64, .1); }
.design-modern .room-book-title { font: italic 500 32px/1 var(--serif); }
.design-modern .room-aside { top: 120px; }
.design-modern .others { background: var(--sand); }
.design-modern .contact-form { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 30px 60px rgba(12, 58, 64, .08); }
.design-modern .contact-form input:not([type=checkbox]), .design-modern .contact-form textarea { border-radius: 12px; border-color: var(--line); background: #fffdf9; }
.design-modern .contact-list .vs-icon { color: var(--teal); }
.design-modern .map-section iframe { border-radius: 0; }
.design-modern .cookie-bar { border-radius: 18px; border-top: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.design-modern .mobile-panel { background: #fffdf9; }
	.design-modern .mobile-panel nav > ul > li > a { font: 500 24px/1.2 var(--serif); }
	.design-modern.has-hero.menu-open .site-header .header-main { background: #fffdf9; }
	.design-modern.has-hero.menu-open .site-header .site-logo img { filter: none !important; }
	.design-modern.has-hero.menu-open .site-header .menu-toggle, .design-modern.has-hero.menu-open .site-header .lang-dd-btn { color: var(--ink); }
	.design-modern .relax-grid { grid-template-columns: 1fr; gap: 50px; }
	.design-modern .relax-media { padding: 0 0 60px 40px; }
	.design-modern .why-inner { grid-template-columns: 1fr; padding: 90px 30px 40px; }
	.design-modern .why-inner > * { grid-column: 1 !important; grid-row: auto !important; }
	.design-modern .tiles { padding: 0 30px 90px; }
	.design-modern .f-cols-grid { grid-template-columns: 1fr 1fr; }
	.design-modern .where { width: calc(100% - 40px); margin-bottom: 80px; }
}
@media (max-width: 760px) {
	.design-modern .section { padding: 80px 0; }
	.design-modern .header-inner { min-height: 76px; }
	.design-modern .site-logo img { height: 56px; }
	.design-modern .slider { height: 92vh; min-height: 560px; }
	.design-modern .slide-caption { bottom: 110px; padding: 0 22px; }
	.design-modern .slider-dots { left: 22px; bottom: 70px; }
	.design-modern .booking-bar { margin-top: -30px; }
	.design-modern .booking-bar .booking { border-radius: 24px; padding: 18px; grid-template-columns: 1fr 1fr; gap: 12px; }
	.design-modern .booking-bar .bk-field { border: 0; padding: 0; }
	.design-modern .booking-bar .booking .bk-submit { margin: 4px 0 0; height: 52px; }
	.design-modern .tiles { grid-template-columns: 1fr; gap: 16px; padding: 0 20px 70px; }
	.design-modern .tile img { aspect-ratio: 16 / 11; }
	.design-modern .why-inner { padding: 80px 22px 30px; }
	.design-modern .room-grid { grid-template-columns: 1fr 1fr; gap: 26px 14px; }
	.design-modern .room-grid .room-card-name { font-size: 19px; padding-top: 12px; }
	.design-modern .room-card-img { border-radius: 16px; }
	.design-modern .where { width: calc(100% - 24px); border-radius: 22px; }
	.design-modern .where-info { padding: 50px 26px; }
	.design-modern .f-cols-grid { grid-template-columns: 1fr; padding: 0 22px; gap: 34px; }
	.design-modern .page-hero { height: 56vh; min-height: 360px; }
	.design-modern .page-hero-inner { padding: 0 22px 44px; }
	.design-modern .footer-bottom { padding: 22px 22px 90px; }
	.design-modern .mb-call { background: var(--sea); }
	.design-modern .mb-book { background: var(--teal); }
	.design-modern .mobile-bar a { font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
}
.design-modern .rv-links .vs-icon { color: var(--teal); }