/* ==========================================================================
   1. ROOT & BASIC STYLES
   ========================================================================== */

:root{
  /* Culori */
  --color-background:#FFFFFF; /* Fundal principal - alb */
  --color-background-alt:#F8F6F4; /* Fundal secundar - bej deschis */
  --color-text:#333333; /* Text principal - gri închis */
  --color-text-muted:#666666; /* Text secundar */
  --color-accent:#A07C5B; /* Culoare de accent - auriu/maro cald */
  --color-accent-hover:#8a6a4c; /* Accent la hover */
  --color-headings:#2B2B2B; /* Culoare titluri */
  --widget-color:#b18e6d;
  --whatsapp-color:#3eac66;

  /* Tipografie */
  --font-body:'Montserrat', sans-serif;
  --font-heading:'Playfair Display', serif;

  /* Layout */
  --max-width:1140px;
  --header-height:80px;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%;font-family:var(--font-body);color:var(--color-text);background-color:var(--color-background);font-size:16px;line-height:1.6}

h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);color:var(--color-headings);font-weight:700;margin-bottom:1rem}
h1{font-size:3rem;line-height:1.2}
h2{font-size:2.5rem;text-align:center}
h3{font-size:1.5rem}
p{margin-bottom:1rem}

a{color:var(--color-accent);text-decoration:none;transition:color .2s ease-in-out}
a:hover{color:var(--color-accent-hover)}

.container{width:90%;max-width:var(--max-width);margin:0 auto}

/* ==========================================================================
   2. HEADER & NAVIGATION
   ========================================================================== */

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background-color:rgba(255,255,255,.9);
  border-bottom:1px solid #EAEAEA;
  height:var(--header-height);
}

/* Fallback pentru browsere fără backdrop-filter */
@supports not (backdrop-filter: blur(8px)){
  .site-header{background-color:rgba(255,255,255,.95)}
}

.header-inner{display:flex;justify-content:space-between;align-items:center;height:100%;max-width:var(--max-width);margin:0 auto;padding:0 15px}

.logo img{height:60px}

.main-nav .menu{list-style:none;display:flex;gap:1.5rem}

.menu>li{position:relative}

/* Butoane navigație */
.menu>li>button{
  background:none;border:0;font-family:var(--font-body);font-size:1rem;font-weight:500;cursor:pointer;padding:8px 0;position:relative;color:var(--color-text)
}
.menu>li>button::after{
  content:'';position:absolute;width:0;height:2px;bottom:0;left:50%;background-color:var(--color-accent);transition:all .3s ease;transform:translateX(-50%)
}
.menu>li>button:hover::after,.menu>li:hover>button::after{width:100%}

/* Submenu */
.submenu{
  display:none;position:absolute;top:100%;left:0;background-color:var(--color-background);border:1px solid #EAEAEA;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.08);padding:.5rem;min-width:200px;z-index:110
}
.submenu a{display:block;padding:.75rem 1rem;color:var(--color-text);border-radius:6px;white-space:nowrap}
.submenu a:hover{background-color:var(--color-background-alt);color:var(--color-accent)}
.menu>li:hover .submenu,.menu>li:focus-within .submenu{display:block}

/* Nav toggle / hamburger */
.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:30px;height:22px;position:relative;padding:0}
.hamburger,
.hamburger::before,
.hamburger::after{
  display:block;width:100%;height:3px;background-color:var(--color-text);border-radius:3px;transition:transform .3s,opacity .3s,background-color .3s;
  content:""
}
.hamburger::before,
.hamburger::after{position:absolute;left:0}
.hamburger::before{top:-8px}
.hamburger::after{bottom:-8px}

.nav-toggle.open .hamburger{background-color:transparent}
.nav-toggle.open .hamburger::before{transform:translateY(8px) rotate(45deg)}
.nav-toggle.open .hamburger::after{transform:translateY(-8px) rotate(-45deg)}

/* ==========================================================================
   3. HERO SECTION
   ========================================================================== */

.hero{position:relative;width:100%;height:calc(100vh - 100px);overflow:hidden}

/* Container slideshow */
.slideshow-container{position:absolute;top:0;left:0;width:100%;height:100%}

/* Slide */
.mySlides{
  display:none;width:100%;height:100%;background-size:cover;background-position:center -130px;transition:opacity 1.5s ease-in-out;position:absolute;top:0;left:0
}
.fade{animation-name:fade;animation-duration:1.5s}
@keyframes fade{from{opacity:.4}to{opacity:1}}

/* Hero content */
.hero-content{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;color:#fff;text-align:center;text-shadow:2px 2px 4px rgba(0,0,0,.7);width:90%;max-width:800px
}
.hero-content h1{color:#fff}

/* Dots */
.dot-container{text-align:center;position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:20}
.dot{cursor:pointer;height:12px;width:12px;margin:0 4px;background-color:#bbb;border-radius:50%;display:inline-block;transition:background-color .6s ease}
.active,.dot:hover{background-color:#717171}

/* ==========================================================================
   4. ABOUT SECTION
   ========================================================================== */

.about-section{padding:80px 0;background-color:var(--color-background)}
.about-container{display:flex;align-items:center;gap:60px}
.about-image{flex:1}
.about-image img{width:100%;height:auto;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.1)}
.about-text{flex:1}
.about-text h2{text-align:left}

.cta-button{
  display:inline-block;background-color:var(--color-accent);color:#fff;padding:14px 32px;border-radius:8px;font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:1px;transition:transform .3s,box-shadow .3s,background-color .3s;border:0;cursor:pointer;margin-top:1rem
}
.cta-button:hover{background-color:var(--color-accent-hover);transform:translateY(-3px);box-shadow:0 8px 15px rgba(0,0,0,.15)}

/* ==========================================================================
   5. GALLERY - MASONRY FIX FINAL
   ========================================================================== */

.gallery-wrap{padding:80px 0;background-color:var(--color-background)}
.gallery-wrap h2{margin-bottom:40px;text-align:center}

.masonry{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px;padding:0 15px;grid-auto-rows:5px;background-color:var(--color-background)
}

.masonry-item{
  position:relative;display:block;overflow:hidden;border-radius:8px;background-color:#000;box-shadow:0 4px 6px rgba(0,0,0,.1);transition:transform .3s ease,box-shadow .3s ease;will-change:transform,box-shadow
}
.masonry-item img{display:block;width:100%;height:100%;object-fit:cover;border-radius:8px;vertical-align:bottom}
.masonry-item:hover{transform:translateY(-5px) scale(1.01);box-shadow:0 8px 25px rgba(0,0,0,.2);z-index:2;cursor:pointer}

.gallery-filters{text-align:center;margin-bottom:30px}
.filter-btn{background:#eee;border:0;border-radius:20px;padding:8px 18px;margin:0 6px;cursor:pointer;font-size:15px;transition:background-color .25s}
.filter-btn:hover{background:#ddd}
.filter-btn.active{background:#333;color:#fff}

/* ==========================================================================
   6. REVIEWS SECTION
   ========================================================================== */

.reviews-section{padding:80px 0;background-color:var(--color-background-alt)}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:40px}
.review-card{
  background-color:#fff;padding:30px;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,.05);display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s;will-change:transform,box-shadow
}
.review-card:hover{transform:translateY(-5px);box-shadow:0 8px 25px rgba(0,0,0,.1)}

.review-header{display:flex;align-items:center;margin-bottom:15px;gap:15px}
.client-avatar{width:60px;height:60px;border-radius:50%;object-fit:cover}
.client-info h3{margin:0;font-family:var(--font-body);font-weight:700;font-size:1.1rem}
.stars{color:#FFC107;font-size:1rem}
.review-text{font-style:italic;color:var(--color-text-muted)}
.review-text::before{content:'“';font-family:var(--font-heading);font-size:3rem;color:#EAEAEA;float:left;margin-right:5px;line-height:.8}

/* ==========================================================================
   7. CONTACT SECTION
   ========================================================================== */

.contact{padding:80px 0}
.contact-form{display:grid;gap:20px;max-width:700px;margin:40px auto 0}
.contact-form input,.contact-form textarea{padding:15px;border-radius:8px;border:1px solid #ddd;width:100%;font-family:var(--font-body);font-size:1rem}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(160,124,91,.2)}
.contact-form button{width:100%}

.consent-checkbox label{display:flex;align-items:center;gap:8px;cursor:pointer}
.consent-checkbox input[type="checkbox"]{width:auto;height:auto;flex-shrink:0;transform:scale(1.2);margin:0;cursor:pointer}
.consent-checkbox span{display:inline-block}
.consent-checkbox a{text-decoration:none}
.consent-checkbox a:hover{text-decoration:underline}

/* ==========================================================================
   8. FOOTER
   ========================================================================== */

.site-footer{background-color:var(--color-headings);color:#A9A9A9;padding:40px 0}
.footer-inner{max-width:var(--max-width);margin:0 auto;padding:0 15px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-inner .social a{color:#fff;margin-left:1.5rem;font-size:1.1rem}
.footer-inner .social img{transform:scale(1)}
.footer-inner .social a:hover{color:var(--color-accent)}
.footer-inner .social a:hover img{transform:scale(1.2);transition:transform .2s ease-in-out}

/* ==========================================================================
   9. LIGHTBOX
   ========================================================================== */

.lightbox{
  position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.85);display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;z-index:1000
}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:90vw;max-height:90vh;border-radius:8px}
.lightbox .close{position:absolute;top:20px;right:30px;font-size:40px;color:#fff;background:transparent;border:0;cursor:pointer}
.lightbox .prev,.lightbox .next{position:absolute;top:50%;transform:translateY(-50%);font-size:3rem;color:#fff;background:rgba(0,0,0,.2);border:0;padding:10px 20px;cursor:pointer;border-radius:8px;transition:background-color .2s}
.lightbox .prev{left:20px}
.lightbox .next{right:20px}
.lightbox .prev:hover,.lightbox .next:hover{background:rgba(0,0,0,.5)}

/* ==========================================================================
   10. RESPONSIVE DESIGN
   ========================================================================== */

/* Breakpoint 992px */
@media (max-width:992px){
  h1{font-size:2.5rem}
  h2{font-size:2rem}
  .hero h1{font-size:2.8rem}
  .about-container{flex-direction:column;text-align:center}
  .about-text h2{text-align:center}
  .review-grid{grid-template-columns:1fr 1fr}
  /* Accordion columns -> single col */
  .columns2{grid-template-columns:1fr;display:block;gap:0}
}

/* Breakpoint 768px */
@media (max-width:768px){
  .nav-toggle{display:block;z-index:1000}
  .main-nav .menu{
    display:none;flex-direction:column;position:fixed;top:0;right:0;width:80%;height:100vh;background-color:#fff;box-shadow:-5px 0 15px rgba(0,0,0,.1);padding:100px 30px 30px;align-items:flex-start;transform:translateX(100%);transition:transform .3s ease-in-out
  }
  .main-nav .menu.open{display:flex;transform:translateX(0)}
  .menu>li .submenu{position:static;box-shadow:none;border:0;padding-left:1rem;display:none;flex-direction:column}
  .menu>li.open>.submenu{display:flex}
  .review-grid{grid-template-columns:1fr}
  .footer-inner{flex-direction:column;text-align:center}
  .footer-inner .social a{margin:0 .75rem}
  .pricing-container{grid-template-columns:1fr}
  .extra-services{grid-template-columns:1fr;max-width:90%}
  .subnav ul{gap:1rem !important; font-size:smaller;}
  .discount-items{flex-direction:column;gap:15px}
}

/* ==========================================================================
   SECTION TITLES, FAQ, PRICING, SUBNAV, DISCOUNT, WHATSAPP WIDGET (extras)
   ========================================================================== */

.section-title{text-align:center;color:#3a3a3a;font-size:2.5em;margin-bottom:10px;border-bottom:3px solid #b9775d;display:block;padding-bottom:5px}
.section-subtitle{text-align:center;font-size:1.1em;color:#777;margin-bottom:40px}
hr{border:none;border-top:1px solid #ddd;margin:60px 0}

/* Accordion / FAQ */
.accordion-container{max-width:1200px;margin:0 auto}
.columns2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.accordion-item{background:#fff;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,.1);overflow:hidden;margin-bottom:20px}
.accordion-header{width:100%;padding:20px;background:#fff;color:#333;border:0;text-align:left;font-size:1.1em;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background-color .3s;font-weight:bold}
.accordion-header:hover{background-color:#f0f0f0}
.icon{font-size:1.2em;transition:transform .3s;color:#ff5a5f}
.accordion-header[aria-expanded="true"] .icon{transform:rotate(45deg)}
.accordion-content{max-height:0;overflow:hidden;padding:0 20px;transition:max-height .3s ease-in-out,padding .3s ease-in-out}
.accordion-content p{padding-bottom:20px;margin:0;color:#555;animation:fadeIn .5s ease-out}
.accordion-content li li{margin-left:2em}

/* Pricing / cards */
.pricing-container{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-bottom:60px}
.pricing-card{background:#fff;border-radius:12px;padding:30px;text-align:center;box-shadow:0 4px 15px rgba(0,0,0,.05);transition:transform .3s,box-shadow .3s;position:relative;border:1px solid #eee}
.pricing-card:hover{transform:translateY(-10px);box-shadow:0 8px 25px rgba(0,0,0,.1)}
.recommended{border:3px solid #ff5a5f;background-color:#fff8f8}
.tag{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background-color:#ff5a5f;color:#fff;padding:5px 15px;border-radius:50px;font-weight:bold;font-size:.85em;box-shadow:0 2px 5px rgba(0,0,0,.2)}
.card-header h3{margin:10px 0 20px;font-size:1.8em;color:#ff5a5f}
.card-header i{color:#ff5a5f;font-size:2.5em;margin-bottom:10px}
.price{font-size:3.5em;font-weight:bold;color:#333;margin-bottom:25px;display:flex;align-items:flex-start;gap:5px}
.price .value{order:1}
.currency{font-size:.5em;font-weight:normal;color:#555;line-height:1;order:2}
.features{list-style:none;padding:0;text-align:left;margin-bottom:30px}
.features li{margin-bottom:12px;font-size:1em;color:#555}
.features li i{margin-right:10px}
.features .fa-check-circle{color:#37d67a}
.features .excluded{opacity:.6;text-decoration:line-through}
.features .fa-times-circle{color:#d63737}

/* Buttons */
.btn{display:block;padding:12px 20px;border-radius:5px;text-decoration:none;font-weight:bold;transition:background-color .3s;margin-top:15px}
.btn-primary{background:#555;color:#fff}
.btn-primary:hover{background:#333}
.btn-secondary{background:#ff5a5f;color:#fff;border:1px solid #ff5a5f}
.btn-secondary:hover{background:#e04e52}

/* Extra services */
.extra-title{text-align:center;font-size:1.5em;margin-top:60px;margin-bottom:20px;color:#3a3a3a}
.extra-services{display:grid;grid-template-columns:1fr 1fr;max-width:600px;margin:0 auto 40px;gap:1px;background-color:#ddd;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.extra-item{display:flex;justify-content:space-between;padding:15px;background:#fff}
.service-name{font-weight:600}
.service-price{color:#ff5a5f;font-weight:bold}

/* Subnav */
.subnav{background-color:#ece0d4;border-bottom:1px solid #ddd;position:sticky;top:0;z-index:90;padding:.5rem 0}
.subnav ul{list-style:none;display:flex;justify-content:center;margin:0;padding:0;gap:2rem}
.subnav a{text-decoration:none;color:#333;font-weight:500;transition:color .2s ease}
.subnav a:hover{color:#b39363}

/* Scroll-margin for anchors */
#pricing{scroll-margin-top:50px}
#photos{scroll-margin-top:120px}

/* Discount items */
.discount-items{display:flex;justify-content:space-between;gap:20px;padding:10px 0}
.discount-item{flex:1;min-width:0;box-sizing:border-box;border:1px solid #ddd;border-radius:8px;padding:20px;text-align:center;transition:transform .3s ease-in-out,box-shadow .3s ease-in-out;box-shadow:0 4px 6px rgba(0,0,0,.1);z-index:1}
.discount-item:hover{transform:translateY(-5px);border:1px solid #cfaa8a;box-shadow:0 10px 20px rgba(0,0,0,.2)}
.discount-value{color:#A07C5B}

/* WhatsApp widget */
#whatsapp-trigger{position:fixed;bottom:25px;right:25px;width:60px;height:60px;background-color:var(--widget-color);color:#fff;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:28px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.2);z-index:1000;transition:transform .2s ease-in-out,opacity .3s ease-in-out}
#whatsapp-trigger:hover{transform:scale(1.1);background-color:var(--whatsapp-color)}

#whatsapp-chat-widget{
  position:fixed;bottom:25px;right:25px;width:340px;background:#fff;border-radius:10px;box-shadow:0 5px 15px rgba(0,0,0,.25);z-index:1000;font-family:Arial,sans-serif;overflow:hidden;opacity:0;transform:scale(.95);visibility:hidden;transition:all .3s ease-in-out
}
#whatsapp-chat-widget.show{opacity:1;transform:scale(1);visibility:visible}
.chat-widget-header{background-color:var(--widget-color);color:#fff;padding:15px 20px;display:flex;justify-content:space-between;align-items:center}
.chat-widget-header h4{margin:0;font-size:18px}
.chat-widget-header .close-btn{background:none;border:0;color:#fff;font-size:24px;cursor:pointer;line-height:1}
.chat-widget-body{padding:20px;background-color:#f7f7f7}
.chat-widget-body p{margin:0 0 15px 0;font-size:15px;line-height:1.5;color:#333}
.chat-widget-footer a{display:flex;align-items:center;justify-content:center;padding:12px;background-color:var(--whatsapp-color);color:#fff;text-decoration:none;font-weight:bold;border-radius:5px;transition:background-color .2s;font-size:16px}
.chat-widget-footer a:hover{background-color:#128C7E}
.chat-widget-footer a svg{width:20px;height:20px;margin-right:10px}

.cta-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 coloane egale */
  gap: 15px; /* spațiu între butoane */
}

.cta-section .btn {
  width: 100%; /* butonul ocupă întreaga lățime a coloanei */
  text-align: center;
}
.cta-section .btn:last-child {
  grid-column: 1 / -1; /* ocupă toate coloanele */
}
/* Două coloane */
.col2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 coloane egale */
  gap: 20px; /* spațiu între elemente */
}

@media (max-width: 768px) {
  .col2 {
    grid-template-columns: 1fr; /* 1 coloană pe mobil */
  }
}

/* Trei coloane */
.col3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 coloane egale */
  gap: 20px; /* spațiu între elemente */
}

@media (max-width: 992px) {
  .col3 {
    grid-template-columns: repeat(2, 1fr); /* 2 coloane pe tablet */
  }
}

@media (max-width: 768px) {
  .col3 {
    grid-template-columns: 1fr; /* 1 coloană pe mobil */
  }
}