/* styles.css - цветна, детска и респонсив визия */

/* Variables */
:root{
  --bg: linear-gradient(180deg,#fffbf2 0%, #fff9ff 100%);
  --card:#ffffff;
  --muted:#6b7280;
  --accent1:#ff5bb5;   /* циклама */
  --accent2:#ffd166;   /* жълто */
  --accent3:#60c2ff;   /* синьо */
  --accent4:#7ef3a6;   /* зелено */
  --shadow: 0 6px 22px rgba(16,24,40,0.08);
  --radius:18px;
  --max:1200px;
  --gap:18px;
  font-family: 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial;
}

/* Basic reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: var(--bg);
  color:#0b1724;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Layout */
.wrap{max-width:var(--max); margin:0 auto; padding:20px}

/* Header */
.site-header{background:transparent; position:sticky; top:0; z-index:50; padding:10px 0}
.header-inner{display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; gap:12px; text-decoration:none; color:inherit; align-items:center}
.logo-mark{
  width:56px; height:56px; border-radius:12px;
  background: linear-gradient(135deg,var(--accent1),var(--accent3));
  color:white; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-family:'Baloo 2', cursive; font-size:26px; box-shadow: var(--shadow);
}
.brand-title{font-weight:800; font-family:'Baloo 2', cursive; font-size:18px}
.brand-sub{font-size:12px; color:var(--muted)}

/* Nav */
.main-nav{display:flex; gap:12px; align-items:center}
.main-nav ul{list-style:none; display:flex; gap:12px; margin:0; padding:0}
.main-nav a{color:#0b1724; text-decoration:none; padding:8px 12px; border-radius:12px; font-weight:600}
.main-nav a:hover{background:rgba(11,23,36,0.06)}
.btn-book{background:linear-gradient(90deg,var(--accent2),var(--accent1)); color:#081226; padding:8px 12px; border-radius:12px; font-weight:800; text-decoration:none}

/* Mobile toggle */
.nav-toggle{display:none; background:transparent; border:0; font-size:22px}

/* HERO */
.hero{padding:28px 0}
.hero-inner{display:grid; grid-template-columns:1fr 360px; gap:20px; align-items:start}
.hero-left h1{font-family:'Baloo 2', cursive; font-size:36px; margin:0 0 8px; color:#0b1724}
.lead{color:var(--muted); margin:0 0 14px}
.hero-cta{display:flex; gap:10px}
.btn-primary{background:linear-gradient(90deg,var(--accent3),var(--accent1)); color:white; padding:12px 16px; border-radius:12px; text-decoration:none; font-weight:800}
.btn-ghost{background:transparent; border:2px solid rgba(11,23,36,0.06); padding:10px 14px; border-radius:12px; text-decoration:none; color:var(--muted)}
.quick-prices{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
.qp-item{background:linear-gradient(180deg,#fff,#fff); border-radius:12px; padding:10px; box-shadow:var(--shadow); min-width:160px}
.qp-price{font-weight:800; color:var(--accent2)}

/* Right side cards */
.card{background:var(--card); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow)}
.contact-card h3{margin:0 0 6px}
.contact-list{list-style:none; padding:0; margin:6px 0}
.features-card{margin-top:12px; display:grid; grid-template-columns:1fr; gap:10px}
.feature{display:flex; gap:10px; align-items:center}
.feature .emoji{font-size:28px}
.feature .text{font-weight:700}

/* Sections */
.section{padding:26px 0}
.section h2{font-family:'Baloo 2', cursive; margin:0 0 10px}
.muted{color:var(--muted)}

/* Services grid */
.cards-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:12px}
.service-card{background:linear-gradient(180deg,#fff,#fff); border-radius:16px; padding:16px; box-shadow:var(--shadow); text-align:left}
.service-card .card-emoji{font-size:34px}
.service-card h3{margin:6px 0}
.service-card .price-list{padding-left:18px; margin:8px 0}
.service-card .small{color:var(--muted); font-size:14px}
.service-card.accent{background:linear-gradient(135deg,#fff1f8,#fff8ff)}

/* Note box */
.note-box{margin-top:18px; background:linear-gradient(90deg,#fff,#fff); padding:12px; border-radius:12px; box-shadow:var(--shadow)}

/* Gallery */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px}
.photo img{width:100%; height:100%; object-fit:cover; border-radius:12px}

/* Contact layout */
.contact-wrap{display:grid; grid-template-columns:1fr 420px; gap:20px}
.contact-right input, .contact-right textarea{width:100%; padding:10px; border-radius:8px; border:1px solid #e6e6e6; font-size:14px}
.fullwidth{width:100%}
.tag{display:inline-block; padding:8px 10px; border-radius:999px; background:linear-gradient(90deg,var(--accent3),var(--accent4)); color:#041018; font-weight:700; text-decoration:none}

/* Footer */
.site-footer{margin-top:26px; padding:28px 0}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:20px}
.logo-mark.big{width:72px; height:72px; font-size:32px; border-radius:14px}
.footer-contacts p{margin:4px 0}

/* Responsive */
@media (max-width:1024px){
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .hero-inner{grid-template-columns:1fr}
  .contact-wrap{grid-template-columns:1fr}
}

@media (max-width:700px){
  .main-nav ul{display:none}
  .nav-toggle{display:block}
  .cards-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr}
  .wrap{padding:14px}
  .hero-left h1{font-size:28px}
}