/* ===== Markesi Apartments — Static CSS ===== */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&family=Playfair+Display:wght@400;700&display=swap');

:root{
  --background:#ffffff;
  --foreground:#22272e;
  --muted:#f1f4f7;
  --muted-foreground:#646e7a;
  --border:#dde3ea;
  --primary:#0e7fbf;
  --primary-foreground:#ffffff;
  --accent:#d6ecf7;
  --midnight:#1c2733;
  --midnight-foreground:#f2f2f2;
  --radius:.5rem;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 4px 12px rgba(0,0,0,.1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Open Sans',sans-serif;
  color:var(--foreground);
  background:var(--background);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{font-family:'Playfair Display',serif;font-weight:400;line-height:1.2}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

.container{max-width:1200px;margin:0 auto;padding:0 1rem}
.text-center{text-align:center}
.muted{color:var(--muted-foreground)}

/* ===== Header ===== */
.header{position:sticky;top:0;z-index:50}
.topbar{background: #3084b9;color:var(--midnight-foreground);font-size:.85rem;padding:.5rem 0}
.topbar .container{display:flex;align-items:center;gap:.5rem}
.topbar svg{width:14px;height:14px}

.nav{background:#0b6198;backdrop-filter:blur(6px);color:var(--midnight-foreground)}
.nav .container{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem}
.logo img{height:40px}
.menu-toggle{display:none;color:#fff}
.menu-toggle svg{width:24px;height:24px}

.nav-list{display:flex;align-items:center;gap:.25rem}
.nav-list a,.nav-list .has-sub > button{
  display:block;padding:.5rem .75rem;color:var(--midnight-foreground);
  transition:color .2s;font-size:.95rem;
}
.nav-list a:hover,.nav-list .has-sub > button:hover{color:var(--primary)}
.nav-list a.active{color:var(--primary)}
.has-sub{position:relative}
.has-sub > button{display:flex;align-items:center;gap:.25rem}
.submenu{
  position:absolute;top:100%;left:0;background:var(--midnight);
  min-width:220px;padding:.5rem 0;border-radius:4px;
  box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .2s,visibility .2s,transform .2s;
}
.has-sub:hover .submenu,.has-sub:focus-within .submenu{
  opacity:1;visibility:visible;transform:translateY(0);
}
.submenu a{padding:.5rem 1rem}
.submenu a:hover{background:rgba(14,127,191,.2)}

@media (max-width:1023px){
  .menu-toggle{display:block}
  .nav-list{
    display:none;flex-direction:column;align-items:stretch;gap:0;
    width:100%;border-top:1px solid rgba(255,255,255,.1);
    padding-bottom:.5rem;
  }
  .nav-list.open{display:flex}
  .nav .container{flex-wrap:wrap}
  .has-sub > button{width:100%;justify-content:space-between}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;background:transparent;padding-left:1rem;display:none;
  }
  .has-sub.open .submenu{display:block}
}

/* ===== Hero slider ===== */
.slider{position:relative;height:500px;overflow:hidden}
@media (min-width:768px){.slider{height:600px}}
.slide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1s;
}
.slide.active{opacity:1}
.slide::before{content:"";position:absolute;inset:0;background:rgba(28,39,51,.5)}
.slide-content{position:relative;height:100%;display:flex;align-items:center;color:#fff}
.slide-content .container{max-width:1200px;width:100%}
.slide-inner{max-width:600px}
.slide-inner h1{font-size:2rem;margin-bottom:1rem}
@media (min-width:768px){.slide-inner h1{font-size:3rem}}
.slide-inner p{font-size:1.1rem;opacity:.9}
.slider-dots{
  position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);
  display:flex;gap:.5rem;z-index:10;
}
.dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.5);transition:background .2s}
.dot.active{background:var(--primary)}

/* ===== Page hero ===== */
.page-hero{background:#3084b9;color:var(--midnight-foreground);padding:4rem 0;text-align:center}
.page-hero h1{font-size:2rem;margin-bottom:.75rem}
@media (min-width:768px){.page-hero h1{font-size:2.5rem}}
.page-hero p{opacity:.8;max-width:42rem;margin:0 auto}

/* ===== Sections ===== */
section{padding:4rem 0}
section.bg-muted{background:var(--muted)}
.max-w-3xl{max-width:48rem;margin:0 auto}

h2.section-title{font-size:1.875rem;margin-bottom:1.5rem;text-align:center}

/* ===== Amenities grid ===== */
.amenities-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media (min-width:640px){.amenities-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.amenities-grid{grid-template-columns:repeat(4,1fr)}}
.amenity-card{
  background:#fff;border-radius:var(--radius);padding:1.5rem;text-align:center;
  box-shadow:var(--shadow-sm);transition:box-shadow .2s;
}
.amenity-card:hover{box-shadow:var(--shadow-md)}
.amenity-card svg{width:40px;height:40px;color:var(--primary);margin:0 auto 1rem}
.amenity-card h3{font-family:'Open Sans',sans-serif;font-weight:600;font-size:1rem;margin-bottom:.5rem}
.amenity-card p{font-size:.875rem;color:var(--muted-foreground)}

/* ===== Lists ===== */
.bullet-list li{display:flex;gap:.5rem;color:var(--muted-foreground);margin-bottom:.5rem}
.bullet-list li::before{content:"•";color:var(--primary);font-weight:bold}

/* ===== Bank cards ===== */
.bank-card{background:var(--muted);border-radius:var(--radius);padding:1.5rem;margin-bottom:1.5rem}
.bank-card h3{font-family:'Open Sans',sans-serif;font-weight:700;margin-bottom:.75rem}
.bank-card p{color:var(--muted-foreground);margin-bottom:.25rem}

/* ===== Gallery ===== */
.filter-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:2.5rem}
.filter-btn{padding:.5rem 1rem;border-radius:var(--radius);font-size:.875rem;background:var(--muted);color:var(--muted-foreground);transition:background .2s}
.filter-btn:hover{background:var(--accent)}
.filter-btn.active{background:var(--primary);color:#fff}
.gallery-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:640px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}
.gallery-item{aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius);cursor:pointer}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.gallery-item:hover img{transform:scale(1.05)}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;background:rgba(28,39,51,.85);z-index:100;
  display:none;align-items:center;justify-content:center;padding:1rem;
}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:90vh;border-radius:var(--radius)}

/* ===== Contact form ===== */
.contact-form{display:grid;grid-template-columns:1fr;gap:1.5rem;max-width:48rem;margin:0 auto}
@media (min-width:768px){.contact-form{grid-template-columns:1fr 1fr}}
.form-group{margin-bottom:1rem}
.form-group label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.25rem}
.form-group input,.form-group textarea{
  width:100%;border:1px solid var(--border);border-radius:var(--radius);
  padding:.5rem .75rem;background:#fff;color:var(--foreground);font-family:inherit;font-size:.95rem;
  outline:none;transition:border-color .2s,box-shadow .2s;
}
.form-group input:focus,.form-group textarea:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(14,127,191,.25)}
.form-group textarea{resize:none;min-height:140px}
.btn-submit{
  background:var(--primary);color:#fff;padding:.6rem 1.5rem;border-radius:var(--radius);
  font-weight:500;transition:opacity .2s;display:inline-block;
}
.btn-submit:hover{opacity:.9}
.text-right{text-align:right}

.map-section{height:400px}
.map-section iframe{width:100%;height:100%;border:0}

/* ===== Skyros page ===== */
.skyros-img{float:right;margin:0 0 1rem 1.5rem;max-width:400px;width:100%}
@media (max-width:767px){.skyros-img{float:none;margin:0 0 1rem 0;max-width:100%}}
.skyros-content p{margin-bottom:1rem;text-align:justify;color:var(--muted-foreground)}
.skyros-content strong{color:var(--foreground)}

/* CTA */
.cta{background:var(--muted);padding:3rem 0}
.cta .container{display:flex;flex-direction:column;align-items:center;gap:1.5rem;text-align:center}
@media (min-width:768px){.cta .container{flex-direction:row;text-align:left}}
.cta svg{width:48px;height:48px;color:var(--primary);flex-shrink:0}
.cta h2{font-size:1.25rem;margin-bottom:.25rem}

/* ===== Footer ===== */
footer .footer-main{background:var(--midnight);color:var(--midnight-foreground);padding:2rem 0}
footer .footer-main .container{display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:1rem;font-size:.875rem}
@media (min-width:768px){footer .footer-main .container{flex-direction:row}}
footer .footer-main a{transition:color .2s}
footer .footer-main a:hover{color:var(--primary)}
footer .footer-main ul{display:flex;gap:1rem}
footer .espa{background:#fff;padding:1rem 0;display:flex;justify-content:center}
footer .espa img{max-width:720px;max-height:90px;width:auto}

/* utilities */
.mb-2{margin-bottom:.5rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.mt-8{margin-top:2rem}
.mt-12{margin-top:3rem}
.bold{font-weight:700}
.underline{text-decoration:underline}
.rounded-img{border-radius:var(--radius);box-shadow:var(--shadow-md)}


.features-section {
  background: #f4f4f4;
  padding: 60px 0;
  text-align: center; /* κεντράρει τίτλο */
}

.section-title {
  text-align: center;
  margin-bottom: 50px;
  font-size: 28px;
  font-weight: 600;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center; /* ΚΕΝΤΡΑΡΕΙ όλο το grid */
  gap: 40px 100px;
}

.feature-item {
  display: flex;
  align-items: center;
  text-align: left; /* κρατάει το κείμενο σωστό δίπλα στο icon */
  gap: 20px;
  max-width: 350px;
}

.feature-item .icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #3084b9;
  box-shadow: 0 0 0 6px rgba(0,0,0,0.03);
}

.feature-item h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.feature-item p {
  margin: 5px 0 0;
  color: #777;
  font-size: 14px;
}

@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
}

.facts-section {
  width: 100%;
  padding: 80px 20px;
background: url("../images/partner_bg.png") center/cover no-repeat;
position: relative;
  color: #fff;
}

/* overlay για να φαίνεται το κείμενο */
.facts-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.facts-section .container {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.section-title {
  font-weight: 600;
  letter-spacing: 1px;
}

.facts-content p {
  font-size: 16px;
}

.booking-section {
  padding: 60px 0;
  background: #f7f7f7;
}

.section-title {
  text-align: center;
  margin-bottom: 40px;
}

.booking-wrapper {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

/* LEFT TABS */
.booking-tabs {
  width: 200px;
}

.tab-btn {
  display: block;
  width: 100%;
  padding: 15px;
  border: none;
  background: #eee;
  margin-bottom: 10px;
  cursor: pointer;
  text-align: left;
  font-weight: 500;
}

.tab-btn.active {
  background: #3084b9;
  color: #fff;
}

/* RIGHT CONTENT */
.booking-content {
  flex: 1;
  background: #fff;
  padding: 30px;
  border-radius: 6px;
}

/* tabs */
.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

/* FORM */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.form-grid .full {
  grid-column: span 2;
}

.booking-form input,
.booking-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
}

.form-submit {
  text-align: right;
  margin-top: 20px;
}

.form-submit button {
  background: #3084b9;
  color: #fff;
  padding: 10px 25px;
  border: none;
  cursor: pointer;
}

@media (max-width: 768px) {
  .booking-wrapper {
    flex-direction: column;
  }

  .booking-tabs {
    width: 100%;
    display: flex;
  }

  .tab-btn {
    flex: 1;
    text-align: center;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-grid .full {
    grid-column: span 1;
  }
}

.lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
}

.lightbox-img {
  max-width: 90%;
  max-height: 80%;
}

.lightbox .close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
}

.lightbox .prev,
.lightbox .next {
  position: absolute;
  top: 50%;
  font-size: 40px;
  color: white;
  background: none;
  border: none;
  cursor: pointer;
  transform: translateY(-50%);
}

.lightbox .prev { left: 30px; }
.lightbox .next { right: 30px; }