/* Activity public page CSS — extracted from design10.html */
/* Total blocks: 18 */

/* === SECTION: GLOBAL (base + variables) === */

/* =================================================

V6 GENERAL CSS

================================================= */


*,
*::before,
*::after{


box-sizing:border-box;


}


html{


scroll-behavior:smooth;


}


body{


margin:0;


font-family:'Inter',Arial,sans-serif;


background:#ffffff;


color:#1f2933;


}


img{


max-width:100%;


display:block;


}


a{


text-decoration:none;


color:inherit;


}


button{


font-family:inherit;


}


/* ==============================
COLORS
============================== */


:root{


--orange:#ff8a00;


--orange-light:#ffad42;


--blue:#0077b6;


--green:#008f68;


--dark:#16252b;


--text:#596570;


--light:#f4f8f7;


--white:#ffffff;


--shadow:

0 20px 50px rgba(0,0,0,.12);


--radius:

24px;


}


/* ==============================
TYPOGRAPHY
============================== */


h1,
h2,
h3,
h4{


margin:0;


font-weight:700;


}


p{


font-size:16px;


line-height:1.75;


color:var(--text);


}


/* ==============================
GLOBAL BUTTON
============================== */


.v6-button{


display:inline-flex;


align-items:center;


justify-content:center;


gap:10px;


padding:15px 32px;


border-radius:40px;


background:var(--orange);


color:white;


font-weight:700;


border:none;


cursor:pointer;


transition:.3s, box-shadow .15s ease;


}


.v6-button:hover{
box-shadow:
0 15px 35px rgba(255,138,0,.35);
}


/* ==============================
COMMON WRAPPER
============================== */


.v6-wrapper{


width:100%;


max-width:1200px;


margin:auto;


padding-left:20px;


padding-right:20px;


}


.v6-section{


padding:90px 0;


}


.v6-title{


font-size:42px;


line-height:1.2;


margin-bottom:25px;


}


/* ==============================
MOBILE
============================== */


@media(max-width:900px){


.v6-title{


font-size:32px;


}


.v6-section{


padding:60px 0;


}


}


/* === SECTION: HERO (activity-detail-hero) === */

/* =====================================
ACTIVITY DETAIL HERO PREMIUM V1
OUTDOOR EXPERIENCE MARKETPLACE
===================================== */


/* Fundalul vine din pagina: coperta activitatii, imaginea de header a
   organizatorului, sau nimic — si atunci rămâne degradeul de mai jos. Aici era
   o fotografie fixa de pe Unsplash, aceeasi la toate activitatile fara
   coperta. Degradeul rămâne si sub imagine, ca plasa de siguranta daca nu se
   incarca. */

.activity-detail-hero{


position:relative;

height:680px;

overflow:hidden;

background:

linear-gradient(
160deg,
var(--dark) 0%,
var(--blue) 100%
);

/* Dupa scurtatura, nu in ea: scurtatura `background` pune culoarea pe
   transparent, iar imaginea din pagina inlocuieste doar `background-image`.
   Asa, o imagine care nu se incarca lasa un fundal inchis, nu unul alb. */
background-color:var(--dark);

background-size:cover;

background-position:center;

display:flex;

align-items:flex-end;


}


.activity-detail-hero-container{


max-width:1200px;

width:100%;

margin:auto;

padding:60px 20px;


}


/* BADGE */


.activity-verified-badge{


display:inline-flex;

align-items:center;

gap:8px;

padding:9px 18px;

border-radius:30px;

background:rgba(0,153,26,.9);

color:white;

font-size:13px;

font-weight:700;

margin-bottom:25px;

box-shadow:

0 10px 25px rgba(0,153,26,.3);


}


/* TITLE */


.activity-detail-hero h1{


max-width:850px;

font-size:56px;

line-height:1.1;

font-weight:800;

color:white;

margin:0 0 25px;


}


/* META */


.activity-hero-meta{


display:flex;

flex-wrap:wrap;

gap:18px;

color:white;

font-size:15px;

margin-bottom:30px;


}


.activity-hero-meta span{


display:flex;

align-items:center;

gap:8px;


}


/* TAGS */


.activity-hero-tags{


display:flex;

flex-wrap:wrap;

gap:12px;

margin-bottom:35px;


}


.activity-hero-tags span{


padding:9px 18px;

border-radius:30px;

background:rgba(255,255,255,.15);

border:1px solid rgba(255,255,255,.25);

backdrop-filter:blur(8px);

color:white;

font-size:13px;

font-weight:600;


}


/* BUTTON AREA */


.activity-hero-actions{


display:flex;

align-items:center;

gap:20px;


}


.activity-primary-btn{


padding:17px 38px;

border-radius:40px;

background:

linear-gradient(
135deg,
#FFBE00,
#FF7F00
);


color:white;

font-weight:800;

font-size:15px;

text-decoration:none;

box-shadow:

0 15px 35px rgba(255,127,0,.35);

transition:.3s, box-shadow .15s ease;


}


/* Clasa e folosita si pe <a>, si pe <button> („Trimite un mesaj"). Fara
   `background` si `font`, butonul primea fundalul gri implicit al browserului si
   fontul lui de sistem — gri cu text alb, aproape ilizibil peste hero. */
.activity-secondary-btn{

display:inline-flex;

align-items:center;

gap:8px;

padding:16px 30px;

border-radius:40px;

border:2px solid rgba(255,255,255,.5);

background:rgba(255,255,255,.10);

color:white;

font:inherit;

font-weight:700;

line-height:1;

text-decoration:none;

cursor:pointer;

backdrop-filter:blur(5px);

transition:background .2s ease, border-color .2s ease;

}


.activity-secondary-btn:hover{

background:rgba(255,255,255,.22);

border-color:#fff;

color:#fff;

}


.activity-secondary-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }


/* FLOAT INFO */


.activity-floating-info{


position:absolute;

right:40px;

bottom:50px;

background:white;

border-radius:30px;

padding:25px 30px;

box-shadow:

0 20px 50px rgba(0,0,0,.2);

width:270px;


}


/* =============================================================================
   CASETA CU PRETUL (din hero) si INIMA din coltul din dreapta sus
   ========================================================================== */

/* Caseta arata o singura informatie, deci se aseaza in coloana si centrat —
   randurile pereche „eticheta / valoare" de dinainte n-au ce potrivi aici. */
.activity-floating-price{
display:flex;
flex-direction:column;
align-items:center;
gap:2px;
text-align:center;
padding:22px 26px;
}

.activity-price-prefix{
font-size:13px;
font-weight:600;
color:#8a9aa3;
text-transform:uppercase;
letter-spacing:.04em;
}

/* Suma si moneda merg impreuna, asezate pe linia de baza a cifrei */
.activity-price-value{
display:flex;
align-items:baseline;
justify-content:center;
gap:6px;
flex-wrap:wrap;
}

.activity-price-amount{
font-size:40px;
font-weight:800;
line-height:1.05;
color:#17252b;
letter-spacing:-.02em;
}

/* „La cerere" e text, nu cifra: la 40px ar iesi din caseta */
.activity-price-amount--request{
font-size:22px;
line-height:1.25;
}

.activity-price-currency{
font-size:15px;
font-weight:700;
color:#FF7F00;
}

.activity-price-note{
margin-top:6px;
font-size:12.5px;
color:#8a9aa3;
line-height:1.4;
}

/* Nota organizatorului despre pret. Litera mai mica si o linie subtire
   deasupra: e o conditie atasata cifrei, nu inca o cifra. */
.activity-price-terms{
margin-top:12px;
padding-top:10px;
border-top:1px solid #eef1f3;
width:100%;
font-size:11.5px;
line-height:1.45;
color:#67787f;
}

/* Inima: colt dreapta sus, peste imaginea de fundal. Rotunda si translucida, ca
   sa se vada pe orice fotografie. */
.activity-fav-corner{
position:absolute;
top:26px;
right:40px;
z-index:3;
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(255,255,255,.45);
border-radius:50%;
background:rgba(15,23,42,.35);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
color:#fff;
font-size:18px;
cursor:pointer;
transition:background .2s ease, border-color .2s ease, transform .15s ease;
}
.activity-fav-corner:hover{
background:rgba(15,23,42,.55);
border-color:#fff;
transform:scale(1.06);
}
.activity-fav-corner:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* Salvata: inima plina, in rosu */
.activity-fav-corner.is-fav{ color:#ff4d6d; }

@media (max-width: 900px) {
    .activity-fav-corner{ top:18px; right:18px; width:44px; height:44px; font-size:17px; }
}


.activity-floating-info h3{


font-size:18px;

margin:0 0 15px;

color:#17252b;


}


.activity-floating-row{


display:flex;

justify-content:space-between;

padding:12px 0;

border-bottom:1px solid #edf2f5;

font-size:14px;


}


.activity-floating-row:last-child{


border-bottom:none;


}


.activity-floating-row strong{


color:#17252b;


}


.activity-floating-row span{


color:#667085;


}


@media(max-width:900px){


.activity-detail-hero{


height:auto;

min-height:650px;

/* Hero-ul e display:flex (rand). Sub 900px caseta "Informatii rapide" iese din
   position:absolute si reintra in flux ca flex item — fara column ar fi strivita
   langa text si ar depasi ecranul. */
flex-direction:column;

}


.activity-detail-hero h1{


font-size:38px;


}


.activity-floating-info{


position:relative;

right:auto;

bottom:auto;

margin-top:40px;

/* width:auto ar da latime pe continut (flex item) — o fortam pe toata latimea */
width:100%;

box-sizing:border-box;


}


/* Caseta cu pretul face exceptie de la latimea plina de mai sus. Intinsa cat
   tot randul, cu 30px de rotunjire si 26px de padding, ajungea sa atinga
   marginile ecranului si sa arate cat un card intreg, pentru o singura cifra.
   Ramane centrata, cu latimea data de continut pana la o limita. */
.activity-floating-price{
width:auto;
/* Nu doar o limita in pixeli: pe un ecran de 360px containerul are exact 320px,
   deci o limita de 320px ar lasa-o tot lipita de margini. Procentul ii da loc
   sa respire la orice latime. */
max-width:min(320px, 88%);
margin-left:auto;
margin-right:auto;
margin-top:28px;
padding:18px 24px;
border-radius:22px;
}

.activity-floating-price .activity-price-amount{
font-size:34px;
}

.activity-floating-price .activity-price-amount--request{
font-size:19px;
}


.activity-hero-actions{


flex-direction:column;

align-items:flex-start;


}


}


@media(max-width:600px){


.activity-detail-hero-container{


padding:40px 20px;


}


.activity-detail-hero h1{


font-size:32px;


}


}


/* === SECTION: INTRO (activity-intro-section) === */

/* =====================================
ACTIVITY INTRO SECTION PREMIUM
SECTION 2
===================================== */


.activity-intro-section{


padding:100px 20px;

background:#ffffff;


}


.activity-intro-container{


max-width:1200px;

margin:auto;


}


.activity-intro-grid{


display:grid;

grid-template-columns:1.2fr .8fr;

gap:70px;

align-items:start;


}


/* LEFT CONTENT */


.activity-intro-label{


display:inline-flex;

padding:8px 18px;

border-radius:30px;

background:rgba(0,153,26,.10);

color:#00991A;

font-size:13px;

font-weight:700;

margin-bottom:20px;


}


.activity-intro-content h2{


font-size:42px;

line-height:1.2;

font-weight:800;

color:#17252b;

margin:0 0 25px;


}


.activity-intro-content p{


font-size:17px;

line-height:1.8;

color:#667085;

margin-bottom:20px;


}


.activity-story-highlight{


margin-top:35px;

padding:30px;

border-left:4px solid #00991A;

background:#f7faf8;

border-radius:0 25px 25px 0;


}


.activity-story-highlight strong{


display:block;

font-size:20px;

color:#17252b;

margin-bottom:10px;


}


.activity-story-highlight span{


font-size:15px;

line-height:1.7;

color:#667085;


}


/* RIGHT DETAILS */


.activity-info-panel{


background:

linear-gradient(
135deg,
#f5faf8,
#f3f8ff
);


border-radius:35px;

padding:35px;


}


.activity-info-title{


font-size:24px;

font-weight:800;

color:#17252b;

margin-bottom:25px;


}


.activity-info-row{


display:flex;

align-items:center;

gap:18px;

padding:18px 0;

border-bottom:1px solid rgba(0,0,0,.06);


}


.activity-info-row:last-child{


border-bottom:none;


}


.activity-info-icon{


width:52px;

height:52px;

background:white;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:23px;

box-shadow:

0 8px 20px rgba(0,0,0,.06);


}


.activity-info-text strong{


display:block;

font-size:16px;

color:#17252b;


}


.activity-info-text span{


font-size:14px;

color:#667085;


}


@media(max-width:900px){


.activity-intro-grid{


grid-template-columns:1fr;


}


.activity-intro-content h2{


font-size:34px;


}


}


/* === SECTION: SUITABILITY (activity-suitability-section) === */

/* =====================================
ACTIVITY SUITABILITY SECTION PREMIUM
SECTION 3
===================================== */


.activity-suitability-section{


padding:100px 20px;

background:

linear-gradient(
135deg,
#f5faf8,
#ffffff
);


}


.activity-suitability-container{


max-width:1200px;

margin:auto;


}


.activity-suitability-header{


text-align:center;

margin-bottom:55px;


}


.activity-suitability-label{


display:inline-flex;

padding:8px 18px;

border-radius:30px;

background:rgba(255,127,0,.12);

color:#FF7F00;

font-size:13px;

font-weight:700;

margin-bottom:18px;


}


.activity-suitability-header h2{


font-size:42px;

font-weight:800;

color:#17252b;

margin:0 0 15px;


}


.activity-suitability-header p{


max-width:700px;

margin:auto;

font-size:16px;

line-height:1.7;

color:#667085;


}


/* PROFILE GRID */


.activity-profile-grid{
--row-cols:4;
--row-gap:22px;
}


.activity-profile{


background:white;

border-radius:30px;

padding:30px 25px;

text-align:center;

box-shadow:

0 10px 30px rgba(0,0,0,.06);

transition:.3s;


}


.activity-profile:hover{


transform:translateY(-6px);

box-shadow:

0 18px 40px rgba(0,0,0,.12);


}


.activity-profile-icon{


width:70px;

height:70px;

border-radius:50%;

margin:auto auto 20px;

display:flex;

align-items:center;

justify-content:center;

font-size:32px;


}


.activity-profile-icon.green{


background:rgba(0,153,26,.12);

}


.activity-profile-icon.blue{


background:rgba(0,102,171,.12);

}


.activity-profile-icon.orange{


background:rgba(255,127,0,.12);

}


.activity-profile-icon.yellow{


background:rgba(255,190,0,.18);

}


.activity-profile h3{


font-size:19px;

font-weight:800;

color:#17252b;

margin:0 0 10px;


}


.activity-profile p{


font-size:14px;

line-height:1.6;

color:#667085;

margin:0;


}


/* LEVEL AREA */


.activity-level-box{


margin-top:60px;

display:grid;

grid-template-columns:1fr 1fr;

gap:30px;


}


.activity-level-card{


padding:35px;

border-radius:35px;


}


.activity-level-card.good{


background:

linear-gradient(
135deg,
#eaf8ef,
#ffffff
);

border:1px solid rgba(0,153,26,.15);


}


.activity-level-card.warning{


background:

linear-gradient(
135deg,
#fff6e8,
#ffffff
);

border:1px solid rgba(255,127,0,.15);


}


.activity-level-card h3{


font-size:25px;

font-weight:800;

color:#17252b;

margin:0 0 18px;


}


.activity-level-card ul{


padding:0;

margin:0;

list-style:none;


}


.activity-level-card li{


padding:10px 0;

font-size:15px;

color:#667085;

display:flex;

gap:10px;


}


@media(max-width:900px){


.activity-profile-grid{
--row-cols:2;
--row-gap:22px;
}


.activity-level-box{


grid-template-columns:1fr;


}


}


@media(max-width:600px){


.activity-profile-grid{
--row-cols:1;
--row-gap:22px;
}


.activity-suitability-header h2{


font-size:32px;


}


}


/* === SECTION: JOURNEY (experience-journey-section) === */

/* =====================================
EXPERIENCE JOURNEY PREMIUM
SECTION 4 ALTERNATIVE
===================================== */


.experience-journey-section{

padding:100px 20px;

background:
linear-gradient(
135deg,
#f5faf8,
#ffffff
);

}


.experience-journey-container{

max-width:1200px;

margin:auto;

}


.experience-journey-header{

text-align:center;

margin-bottom:60px;

}


.experience-journey-label{

display:inline-flex;

padding:8px 18px;

border-radius:30px;

background:rgba(255,127,0,.12);

color:#FF7F00;

font-size:13px;

font-weight:700;

margin-bottom:18px;

}


.experience-journey-header h2{

font-size:42px;

font-weight:800;

color:#17252b;

margin:0 0 15px;

}


.experience-journey-header p{

max-width:700px;

margin:auto;

color:#667085;

font-size:16px;

line-height:1.7;

}


/* MAIN */

.experience-journey-content{

display:grid;

grid-template-columns:.9fr 1.1fr;

gap:60px;

align-items:center;

}


/* IMAGE */


/* Fundalul are trei variante, hotarate in pagina dupa ce a incarcat
   organizatorul. Imaginea in sine vine prin `--journey-img`, pusa inline pe
   element; inainte era o fotografie de pe Unsplash scrisa aici, deci aceeasi
   la toate activitatile din site. */

.experience-journey-image{

height:620px;

border-radius:40px;

overflow:hidden;

position:relative;

/* Varianta fara nimic: fundal colorat din paleta. */
background:

linear-gradient(
160deg,
var(--dark),
var(--blue)
);

/* Dupa scurtatura — vezi nota de la `.activity-detail-hero`. Variantele de mai
   jos isi rescriu `background`, deci isi repeta si culoarea: o scurtatura
   `background` duce culoarea inapoi pe transparent. */
background-color:var(--dark);

background-size:cover;

background-position:center;

}


/* Fotografia activitatii — umple spatiul, cu umbra de jos pentru caseta. */
.experience-journey-image--photo{

background:

linear-gradient(
0deg,
rgba(0,0,0,.45),
transparent
),

var(--journey-img);

background-color:var(--dark);

background-size:cover;

background-position:center;

}


/* Logoul organizatorului — intreg si centrat, nu decupat sa umple. Un logo
   intins pe 620px ar fi tăiat sau deformat. */
.experience-journey-image--logo{

background:

linear-gradient(
0deg,
rgba(0,0,0,.45),
transparent
),

var(--journey-img),

linear-gradient(
160deg,
var(--dark),
var(--blue)
);

background-color:var(--dark);

background-size:cover, min(45%, 260px) auto, cover;

background-position:center, center 40%, center;

background-repeat:no-repeat, no-repeat, no-repeat;

}


.experience-journey-image-box{

position:absolute;

bottom:35px;

left:35px;

right:35px;

background:rgba(255,255,255,.95);

border-radius:25px;

padding:25px;

}


.experience-journey-image-box strong{

display:block;

font-size:20px;

color:#17252b;

margin-bottom:8px;

}


.experience-journey-image-box span{

font-size:14px;

color:#667085;

}


/* STEPS */


.experience-journey-steps{

display:flex;

flex-direction:column;

gap:25px;

}


.experience-step{

display:flex;

gap:25px;

padding:25px;

border-radius:30px;

background:white;

box-shadow:

0 10px 30px rgba(0,0,0,.06);

transition:.3s;

}


.experience-step:hover{

transform:translateX(8px);

}


.experience-step-number{

width:60px;

height:60px;

border-radius:50%;

background:

linear-gradient(
135deg,
#00991A,
#0066AB
);

color:white;

font-size:20px;

font-weight:800;

display:flex;

align-items:center;

justify-content:center;

flex-shrink:0;

}


.experience-step-content h3{

font-size:21px;

margin:0 0 8px;

color:#17252b;

}


.experience-step-content span{

font-size:13px;

color:#00991A;

font-weight:700;

}


.experience-step-content p{

margin:10px 0 0;

font-size:15px;

line-height:1.6;

color:#667085;

}


/* RESPONSIVE */


@media(max-width:900px){


.experience-journey-content{

grid-template-columns:1fr;

}


.experience-journey-image{

height:450px;

}


.experience-journey-header h2{

font-size:32px;

}


}


/* === SECTION: EQUIPMENT (activity-equipment-section) === */

/* =====================================
ACTIVITY EQUIPMENT SECTION PREMIUM
SECTION 5
===================================== */


.activity-equipment-section{

padding:100px 20px;

background:#ffffff;

}


.activity-equipment-container{

max-width:1200px;

margin:auto;

}


.activity-equipment-header{

text-align:center;

margin-bottom:60px;

}


.activity-equipment-label{

display:inline-flex;

padding:8px 18px;

border-radius:30px;

background:rgba(0,153,26,.10);

color:#00991A;

font-size:13px;

font-weight:700;

margin-bottom:18px;

}


.activity-equipment-header h2{

font-size:42px;

font-weight:800;

color:#17252b;

margin:0 0 15px;

}


.activity-equipment-header p{

max-width:700px;

margin:auto;

font-size:16px;

line-height:1.7;

color:#667085;

}


/* MAIN GRID */


.activity-equipment-grid{
--row-cols:2;
--row-gap:35px;
}


/* BOXES */


.activity-equipment-box{


border-radius:35px;

padding:40px;

position:relative;

overflow:hidden;


}


.activity-equipment-box.included{


background:

linear-gradient(
135deg,
#eaf8ef,
#ffffff
);


border:1px solid rgba(0,153,26,.15);


}


.activity-equipment-box.bring{


background:

linear-gradient(
135deg,
#fff6e8,
#ffffff
);


border:1px solid rgba(255,127,0,.15);


}


.activity-equipment-box h3{


font-size:28px;

font-weight:800;

color:#17252b;

/*margin:0 0 25px;*/
margin:0;


}


.activity-equipment-box-header{


display:flex;

align-items:center;

gap:15px;

margin-bottom:25px;


}


.activity-equipment-box-icon{


width:60px;

height:60px;

border-radius:50%;

background:white;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

box-shadow:

0 10px 25px rgba(0,0,0,.08);
border: 1px solid rgba(255, 127, 0, .15);

}


/* ITEMS */


.activity-equipment-list{


display:flex;

flex-direction:column;

gap:15px;


}


.activity-equipment-item{


display:flex;

align-items:center;

gap:15px;

font-size:15px;

color:#344054;


}


.activity-equipment-item-icon{


width:34px;

height:34px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:15px;

font-weight:800;


}


.included .activity-equipment-item-icon{


background:#00991A;

color:white;


}


.bring .activity-equipment-item-icon{


background:#fff;

color:white;
border: 1px solid rgba(255, 127, 0, .15);

}


/* BOTTOM ADVICE */


.activity-equipment-advice{


margin-top:45px;

padding:30px 35px;

border-radius:30px;

background:

linear-gradient(
135deg,
#17252b,
#0066AB
);

display:flex;

align-items:center;

gap:25px;

color:white;


}


.activity-equipment-advice-icon{


width:60px;

height:60px;

background:rgba(255,255,255,.15);

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;


}


.activity-equipment-advice strong{


display:block;

font-size:20px;

margin-bottom:8px;


}


.activity-equipment-advice span{


font-size:15px;

line-height:1.6;

color:rgba(255,255,255,.85);


}


@media(max-width:900px){


.activity-equipment-grid{
--row-cols:1;
--row-gap:35px;
}


.activity-equipment-header h2{


font-size:32px;


}


.activity-equipment-box{


padding:30px;


}


}


/* === SECTION: GALLERY (activity-gallery-section) === */

/* =====================================
ACTIVITY GALLERY PREMIUM
SECTION 6
===================================== */

.activity-gallery-section{

padding:100px 20px;

background:

linear-gradient(
135deg,
#f8fafb,
#ffffff
);

}

.activity-gallery-container{

max-width:1280px;
margin:auto;

}

/* HEADER */

.activity-gallery-header{

display:flex;
justify-content:space-between;
align-items:end;
gap:40px;
margin-bottom:45px;

}

.activity-gallery-title small{

display:inline-block;
padding:8px 18px;
border-radius:30px;
background:rgba(0,102,171,.10);
color:#0066AB;
font-weight:700;
font-size:13px;
margin-bottom:18px;

}

.activity-gallery-title h2{

font-size:44px;
margin:0 0 12px;
color:#17252b;
font-weight:800;

}

.activity-gallery-title p{

max-width:650px;
color:#667085;
line-height:1.7;

}

.activity-gallery-btn{

padding:15px 30px;
border-radius:40px;
text-decoration:none;
background:#17252b;
color:white;
font-weight:700;
transition:.3s;

}

.activity-gallery-btn:hover{

background:#00991A;

}

/* GRID */

.activity-gallery-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr;

grid-template-rows:260px 260px;

gap:18px;

}

.activity-gallery-item{

position:relative;

overflow:hidden;

border-radius:30px;

cursor:pointer;

}

.activity-gallery-item img{

width:100%;
height:100%;
object-fit:cover;

transition:.5s;

}

.activity-gallery-item:hover img{

transform:scale(1.08);

}

.activity-gallery-item:before{

content:"";

position:absolute;
inset:0;

background:

linear-gradient(
0deg,
rgba(0,0,0,.45),
transparent
);

opacity:0;
transition:.35s;

}

.activity-gallery-item:hover:before{

opacity:1;

}

.activity-gallery-item span{

position:absolute;

left:25px;
bottom:22px;

color:white;

font-size:18px;

font-weight:700;

opacity:0;

transition:.35s;

}

.activity-gallery-item:hover span{

opacity:1;

}

.activity-gallery-large{

grid-row:span 2;

}

/* Se afiseaza doar primul bloc: imaginea mare plus pana la 4 miniaturi. Restul
   raman in DOM pentru lightbox si pentru caruselul de pe mobil.
   Selectorul include grid-ul pentru ca mai jos exista un reset
   `button.activity-gallery-item{display:block}`. */
.activity-gallery-grid > .activity-gallery-item.gallery-extra{

display:none;

}

/* Sub 5 imagini celulele ramase se redistribuie, ca sa nu apara goluri */
.activity-gallery-grid--1 > .activity-gallery-large{

grid-column:span 3;

}

.activity-gallery-grid--2 > .activity-gallery-item:nth-child(2){

grid-column:span 2;

grid-row:span 2;

}

.activity-gallery-grid--3 > .activity-gallery-item:nth-child(2),

.activity-gallery-grid--3 > .activity-gallery-item:nth-child(3){

grid-column:span 2;

}

.activity-gallery-grid--4 > .activity-gallery-item:nth-child(4){

grid-column:span 2;

}

/* Badge "+N" peste ultima miniatura vizibila, ca in WhatsApp.
   z-index peste :before (gradientul de hover) si peste caption. */
.activity-gallery-item .org-gallery-more{

position:absolute;

inset:0;

z-index:3;

display:flex;

align-items:center;

justify-content:center;

background:rgba(0,0,0,.55);

color:#fff;

font-size:34px;

font-weight:800;

letter-spacing:-.02em;

opacity:1;

transition:background .3s;

}

.activity-gallery-item:hover .org-gallery-more{

background:rgba(0,0,0,.65);

}

/* RESPONSIVE */

@media(max-width:900px){

.activity-gallery-header{

flex-direction:column;
align-items:flex-start;

}

/* Imaginea mare trece pe toata latimea, miniaturile raman 2x2 */
.activity-gallery-grid{

grid-template-columns:repeat(2,1fr);
grid-template-rows:220px 220px 220px;

}

.activity-gallery-large{

grid-row:span 1;
grid-column:span 2;

}

.activity-gallery-grid--1 > .activity-gallery-large,

.activity-gallery-grid--2 > .activity-gallery-item:nth-child(2),

.activity-gallery-grid--3 > .activity-gallery-item:nth-child(2),

.activity-gallery-grid--3 > .activity-gallery-item:nth-child(3),

.activity-gallery-grid--4 > .activity-gallery-item:nth-child(4){

grid-column:span 2;
grid-row:span 1;

}

.activity-gallery-title h2{

font-size:34px;

}

}


/* Pe mobil galeria devine carusel: o imagine pe ecran, cu sageti si swipe.
   Aici se vad toate imaginile, deci badge-ul "+N" nu mai are rost. */
@media(max-width:600px){

.activity-gallery-grid{

display:flex;

gap:14px;

overflow-x:auto;

scroll-snap-type:x mandatory;

/* Loc pentru umbra si coltul rotunjit la marginea derularii */
padding:8px 16px 20px;

/* Fara asta snap-ul deruleaza automat si spatiul lasat pentru umbra dispare */
scroll-padding-inline:16px;

margin:-8px -16px -20px;

scrollbar-width:none;

-ms-overflow-style:none;

}

.activity-gallery-grid::-webkit-scrollbar{

display:none;

}

/* Patrat, nu 4:3 — cu portret si peisaj amestecate decupeaza cel mai echilibrat */
.activity-gallery-grid > .activity-gallery-item{

flex:0 0 100%;

scroll-snap-align:start;

aspect-ratio:1 / 1;

height:auto;

}

/* Aceeasi specificitate ca regula de ascundere de mai sus, ca sa o invinga */
.activity-gallery-grid > .activity-gallery-item.gallery-extra{

display:block;

}

.activity-gallery-item .org-gallery-more{

display:none;

}

}


/* === SECTION: REVIEWS (activity-reviews-section) === */

/* =====================================
ACTIVITY REVIEWS PREMIUM
SECTION 7
===================================== */


.activity-reviews-section{

padding:100px 20px;

background:#ffffff;

}


.activity-reviews-container{

max-width:1200px;

margin:auto;

}


.activity-reviews-header{

text-align:center;

margin-bottom:55px;

}


.activity-reviews-label{

display:inline-flex;

padding:8px 18px;

border-radius:30px;

background:rgba(255,190,0,.15);

color:#d48800;

font-size:13px;

font-weight:700;

margin-bottom:18px;

}


.activity-reviews-header h2{

font-size:42px;

font-weight:800;

color:#17252b;

margin:0 0 15px;

}


.activity-reviews-header p{

max-width:650px;

margin:auto;

color:#667085;

line-height:1.7;

}


/* SUMMARY */


.activity-rating-summary{

display:grid;

grid-template-columns:.7fr 1.3fr;

gap:40px;

margin-bottom:55px;

}


.activity-rating-box{

background:

linear-gradient(
135deg,
#17252b,
#0066AB
);

border-radius:35px;

padding:40px;

color:white;

text-align:center;

}


.activity-rating-number{

font-size:70px;

font-weight:900;

line-height:1;

}


.activity-stars{

font-size:28px;

color:#FFBE00;

margin:15px 0;

}


.activity-rating-box span{

font-size:14px;

color:rgba(255,255,255,.8);

}


/* CATEGORIES */


.activity-rating-details{

display:grid;

gap:18px;

}


.activity-rating-line{

display:flex;

align-items:center;

gap:20px;

}


.activity-rating-line strong{

width:130px;

font-size:15px;

color:#344054;

}


.activity-progress{

height:10px;

flex:1;

background:#edf2f5;

border-radius:20px;

overflow:hidden;

}


.activity-progress span{

display:block;

height:100%;

background:

linear-gradient(
90deg,
#00991A,
#73CD08
);

border-radius:20px;

}


/* REVIEW CARDS */


.activity-review-grid{
--row-cols:3;
--row-gap:25px;
}


.activity-review-card{

background:#f8fafb;

border-radius:30px;

padding:30px;

position:relative;

}


.activity-review-stars{

color:#FFBE00;

font-size:18px;

margin-bottom:18px;

}


.activity-review-card p{

font-size:15px;

line-height:1.7;

color:#475467;

font-style:italic;

}


.activity-review-user{

display:flex;

align-items:center;

gap:15px;

margin-top:25px;

}


.activity-review-avatar{

width:48px;

height:48px;

border-radius:50%;

background:

linear-gradient(
135deg,
#00991A,
#0066AB
);

display:flex;

align-items:center;

justify-content:center;

color:white;

font-weight:800;

}


.activity-review-user strong{

display:block;

color:#17252b;

}


.activity-review-user span{

font-size:13px;

color:#667085;

}


@media(max-width:900px){


.activity-rating-summary{

grid-template-columns:1fr;

}


.activity-review-grid{
--row-cols:1;
--row-gap:25px;
}


.activity-reviews-header h2{

font-size:32px;

}

}


/* === SECTION: ORGANIZER (organizer-section) === */

/* =====================================
ORGANIZER PROFILE PREMIUM
SECTION 8
===================================== */


.organizer-section{

padding:100px 20px;

background:

linear-gradient(
135deg,
#f5faf8,
#ffffff,
#f3f8ff
);

}


.organizer-container{

max-width:1200px;

margin:auto;

}


.organizer-header{

text-align:center;

margin-bottom:55px;

}


.organizer-label{

display:inline-flex;

padding:8px 18px;

border-radius:30px;

background:rgba(0,102,171,.10);

color:#0066AB;

font-size:13px;

font-weight:700;

margin-bottom:18px;

}


.organizer-header h2{

font-size:42px;

font-weight:800;

color:#17252b;

margin:0 0 15px;

}


.organizer-header p{

max-width:700px;

margin:auto;

color:#667085;

line-height:1.7;

}


/* MAIN PROFILE */


.organizer-profile{

background:white;

border-radius:40px;

padding:45px;

box-shadow:

0 20px 50px rgba(0,0,0,.08);

display:grid;

grid-template-columns:.8fr 1.2fr;

gap:50px;

}


/* LEFT */


.organizer-main{

text-align:center;

border-right:1px solid #edf2f5;

padding-right:40px;

}


.organizer-logo{

width:120px;

height:120px;

border-radius:50%;

margin:auto;

background:

linear-gradient(
135deg,
#00991A,
#0066AB
);


display:flex;

align-items:center;

justify-content:center;

font-size:45px;

color:white;

font-weight:900;

margin-bottom:25px;

}


.organizer-main h3{

font-size:28px;

margin:0 0 10px;

color:#17252b;

}


.organizer-location{

font-size:15px;

color:#667085;

margin-bottom:20px;

}


.organizer-badges{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:10px;

}


.organizer-badges span{

padding:8px 15px;

border-radius:30px;

background:#f5f8f9;

font-size:13px;

font-weight:700;

color:#344054;

}


/* RIGHT */


.organizer-description h3{

font-size:26px;

margin:0 0 15px;

color:#17252b;

}


.organizer-description p{

font-size:16px;

line-height:1.8;

color:#667085;

}


/* STATS */


.organizer-stats{
--row-cols:4;
--row-gap:15px;


margin:35px 0;
}


.organizer-stat{

background:#f8fafb;

padding:20px;

border-radius:22px;

text-align:center;

}


.organizer-stat strong{

display:block;

font-size:26px;

color:#17252b;

}


.organizer-stat span{

font-size:13px;

color:#667085;

}


/* ACTIVITIES */


.organizer-tags{

display:flex;

flex-wrap:wrap;

gap:12px;

margin-top:25px;

}


.organizer-tags span{

padding:10px 18px;

border-radius:30px;

background:

rgba(0,153,26,.08);

color:#00991A;

font-size:14px;

font-weight:700;

}


/* CTA */


.organizer-action{


margin-top:35px;

display:flex;

gap:15px;

flex-wrap:wrap;

}


.organizer-primary-btn{

padding:16px 35px;

border-radius:40px;

background:

linear-gradient(
135deg,
#FFBE00,
#FF7F00
);


color:white;

font-weight:800;

text-decoration:none;

}


.organizer-secondary-btn{

padding:16px 35px;

border-radius:40px;

border:2px solid #17252b;

color:#17252b;

font-weight:700;

text-decoration:none;

}


@media(max-width:900px){


.organizer-profile{

grid-template-columns:1fr;

}


.organizer-main{

border-right:none;

border-bottom:1px solid #edf2f5;

padding:0 0 35px;

}


.organizer-stats{
--row-cols:2;
--row-gap:15px;
}


.organizer-header h2{

font-size:32px;

}


}


/* === SECTION: LOCATION (activity-location-section) === */

/* =====================================
LOCATION + NEARBY EXPERIENCES
SECTION 9
===================================== */


.activity-location-section{

padding:100px 20px;

background:#ffffff;

}


.activity-location-container{

max-width:1200px;

margin:auto;

}


.activity-location-header{

text-align:center;

margin-bottom:55px;

}


.activity-location-label{

display:inline-flex;

padding:8px 18px;

border-radius:30px;

background:rgba(0,153,26,.12);

color:#00991A;

font-size:13px;

font-weight:700;

margin-bottom:18px;

}


.activity-location-header h2{

font-size:42px;

font-weight:800;

color:#17252b;

margin:0 0 15px;

}


.activity-location-header p{

max-width:700px;

margin:auto;

color:#667085;

line-height:1.7;

}


/* LOCATION GRID */


.activity-location-grid{

display:grid;

grid-template-columns:1.2fr .8fr;

gap:35px;

align-items:stretch;

}


/* MAP */


.activity-map{

height:480px;

border-radius:35px;

overflow:hidden;

background:

linear-gradient(
135deg,
#dceef7,
#eaf8ef
);

position:relative;

display:flex;

align-items:center;

justify-content:center;

}


.activity-map-placeholder{

text-align:center;

}


.activity-map-placeholder div{

width:80px;

height:80px;

border-radius:50%;

background:#00991A;

display:flex;

align-items:center;

justify-content:center;

font-size:35px;

color:white;

margin:auto auto 20px;

box-shadow:

0 15px 30px rgba(0,153,26,.3);

}


.activity-map-placeholder strong{

font-size:22px;

color:#17252b;

display:block;

}


.activity-map-placeholder span{

color:#667085;

font-size:14px;

}


/* INFO */


.activity-location-info{

display:flex;

flex-direction:column;

gap:20px;

}


.location-card{

background:#f8fafb;

border-radius:28px;

padding:25px;

display:flex;

gap:18px;

align-items:flex-start;

}


.location-icon{

width:50px;

height:50px;

border-radius:50%;

background:white;

display:flex;

align-items:center;

justify-content:center;

font-size:23px;

flex-shrink:0;

}


.location-card h3{

margin:0 0 7px;

font-size:18px;

color:#17252b;

}


.location-card p{

margin:0;

font-size:14px;

line-height:1.6;

color:#667085;

}


/* NEARBY */


.nearby-title{

margin-top:65px;

margin-bottom:30px;

}


.nearby-title h3{

font-size:30px;

color:#17252b;

margin:0 0 10px;

}


.nearby-title p{

color:#667085;

}


.nearby-grid{
--row-cols:4;
--row-gap:20px;
}


.nearby-card{

background:white;

border-radius:25px;

overflow:hidden;

box-shadow:

0 10px 30px rgba(0,0,0,.07);

transition:.3s;

}


.nearby-card:hover{

transform:translateY(-5px);

}


.nearby-image{

height:150px;

background-size:cover;

background-position:center;

}


.nearby-content{

padding:20px;

}


.nearby-content h4{

margin:0 0 8px;

font-size:17px;

color:#17252b;

}


.nearby-content span{

font-size:13px;

color:#00991A;

font-weight:700;

}


@media(max-width:900px){


.activity-location-grid{

grid-template-columns:1fr;

}


.nearby-grid{
--row-cols:2;
--row-gap:20px;
}


.activity-location-header h2{

font-size:32px;

}

}


@media(max-width:600px){


.nearby-grid{
--row-cols:1;
--row-gap:20px;
}


}


/* === SECTION: OFFER (offer-section) === */

/* =====================================
REQUEST OFFER PREMIUM
SECTION 10
===================================== */


.offer-section{

padding:100px 20px;

background:

linear-gradient(
135deg,
#17252b,
#0066AB
);

}


.offer-container{

max-width:1200px;

margin:auto;

}


.offer-wrapper{

display:grid;

grid-template-columns:.8fr 1.2fr;

gap:50px;

/* Coloana din stanga porneste de sus, la acelasi nivel cu formularul.
   Centrata, plutea in mijloc pentru ca formularul e mult mai inalt. */
align-items:start;

}


/* LEFT */


.offer-content{

color:white;

}


.offer-badge{

display:inline-flex;

padding:8px 18px;

border-radius:30px;

background:rgba(255,255,255,.15);

font-size:13px;

font-weight:700;

margin-bottom:20px;

}


.offer-content h2{

font-size:45px;

font-weight:800;

margin:0 0 20px;

line-height:1.2;

}


.offer-content p{

font-size:17px;

line-height:1.7;

color:rgba(255,255,255,.8);

/* Distanta pana la cele trei motive de dedesubt. O dadea `.offer-benefits`,
   blocul vechi, prin `margin-top`; acum vine de aici, ca pe pagina
   organizatorului, unde o da `.org-request-text`. */

margin:0 0 35px;

}


/* FORM */


.offer-form{

background:white;

border-radius:35px;

padding:40px;

box-shadow:

0 25px 60px rgba(0,0,0,.25);

}


.offer-form h3{

font-size:28px;

margin:0 0 10px;

color:#17252b;

}


.offer-form-subtitle{

color:#667085;

font-size:14px;

margin-bottom:30px;

}


.offer-row{

display:grid;

grid-template-columns:1fr 1fr;

gap:18px;

}


.offer-field{

margin-bottom:18px;

}


/* `display:grid` de mai sus bate regula implicita a browserului pentru
   [hidden], deci randul cu ziua si ora rezervarii trebuie ascuns explicit. */
.offer-row[hidden]{

display:none;

}

.offer-field[hidden]{

display:none;

}


.offer-field label{

display:block;

font-size:13px;

font-weight:700;

color:#344054;

margin-bottom:8px;

}


.offer-field input,
.offer-field select,
.offer-field textarea{


width:100%;

padding:15px 18px;

border-radius:15px;

border:1px solid #e4e7ec;

font-size:14px;

outline:none;

box-sizing:border-box;

}


.offer-field textarea{

height:110px;

resize:none;

}


.offer-field input:focus,
.offer-field select:focus,
.offer-field textarea:focus{


border-color:#00991A;


}


.offer-submit{


width:100%;

padding:17px;

border:0;

border-radius:40px;

background:

linear-gradient(
135deg,
#FFBE00,
#FF7F00
);

color:white;

font-size:16px;

font-weight:800;

cursor:pointer;

}


.offer-note{

text-align:center;

font-size:13px;

color:#667085;

margin-top:15px;

}


@media(max-width:900px){


.offer-wrapper{

grid-template-columns:1fr;

}


.offer-content h2{

font-size:34px;

}


.offer-row{

grid-template-columns:1fr;

}


}


/* === SECTION: FAQ (faq-section) === */

/* =====================================
FAQ + SAFETY PREMIUM
SECTION 11
===================================== */


.faq-section{

padding:100px 20px;

background:

linear-gradient(
135deg,
#f8fafb,
#ffffff
);

}


.faq-container{

max-width:1200px;

margin:auto;

}


.faq-header{

text-align:center;

margin-bottom:60px;

}


.faq-label{

display:inline-flex;

padding:8px 18px;

border-radius:30px;

background:rgba(0,153,26,.12);

color:#00991A;

font-size:13px;

font-weight:700;

margin-bottom:18px;

}


.faq-header h2{

font-size:42px;

font-weight:800;

color:#17252b;

margin:0 0 15px;

}


.faq-header p{

max-width:700px;

margin:auto;

color:#667085;

line-height:1.7;

}


.faq-content{

display:grid;

grid-template-columns:.8fr 1.2fr;

gap:50px;

align-items:start;

}


/* SAFETY */


.safety-box{

background:

linear-gradient(
135deg,
#17252b,
#0066AB
);

padding:40px;

border-radius:35px;

color:white;

}


.safety-box h3{

font-size:28px;

margin:0 0 25px;

}


.safety-list{

display:flex;

flex-direction:column;

gap:18px;

}


.safety-item{

display:flex;

gap:15px;

align-items:flex-start;

}


.safety-icon{

width:42px;

height:42px;

border-radius:50%;

background:rgba(255,255,255,.15);

display:flex;

align-items:center;

justify-content:center;

flex-shrink:0;

}


.safety-item strong{

display:block;

margin-bottom:5px;

}


.safety-item span{

font-size:14px;

color:rgba(255,255,255,.75);

line-height:1.5;

}


/* FAQ */


.faq-list{

display:flex;

flex-direction:column;

gap:15px;

}


.faq-item{

background:white;

border-radius:25px;

padding:25px 30px;

box-shadow:

0 10px 30px rgba(0,0,0,.06);

}


.faq-question{

display:flex;

justify-content:space-between;

align-items:center;

font-size:17px;

font-weight:800;

color:#17252b;

}


.faq-plus{

width:35px;

height:35px;

border-radius:50%;

background:#f1f5f6;

display:flex;

align-items:center;

justify-content:center;

color:#00991A;

font-size:22px;

}


.faq-answer{

margin-top:15px;

font-size:15px;

line-height:1.7;

color:#667085;

}


/* RESPONSIVE */


@media(max-width:900px){


.faq-content{

grid-template-columns:1fr;

}


.faq-header h2{

font-size:32px;

}


}


/* === SECTION: TRUST (trust-system-section) === */

/* =====================================
ORGANIZER TRUST BADGES
GLOBAL COMPONENT
===================================== */


.trust-system-section{

padding:90px 20px;

background:#ffffff;

}


.trust-system-container{

max-width:1100px;

margin:auto;

}


.trust-system-header{

text-align:center;

margin-bottom:50px;

}


.trust-system-header h2{

font-size:40px;

font-weight:800;

color:#17252b;

margin-bottom:15px;

}


.trust-system-header p{

color:#667085;

max-width:650px;

margin:auto;

line-height:1.7;

}


.trust-levels{
--row-cols:3;
--row-gap:25px;
}


.trust-card{


background:white;

border-radius:35px;

padding:35px 25px;

text-align:center;

box-shadow:

0 12px 35px rgba(0,0,0,.07);

border:1px solid #edf2f5;

transition:.3s;


}


.trust-card:hover{

transform:translateY(-8px);

}


.trust-icon{


width:80px;

height:80px;

border-radius:50%;

margin:auto auto 20px;

display:flex;

align-items:center;

justify-content:center;

font-size:35px;

}


.trust-icon.green{

background:rgba(0,153,26,.12);

}


.trust-icon.blue{

background:rgba(0,102,171,.12);

}


.trust-icon.gold{

background:rgba(255,190,0,.18);

}


.trust-card h3{

font-size:22px;

margin:0 0 10px;

color:#17252b;

}


.trust-card p{

font-size:14px;

line-height:1.6;

color:#667085;

}


.trust-card ul{

list-style:none;

padding:0;

margin:20px 0 0;

text-align:left;

}


.trust-card li{

padding:8px 0;

font-size:14px;

color:#344054;

}


.trust-card li:before{

content:"✓";

color:#00991A;

font-weight:800;

margin-right:10px;

}


@media(max-width:900px){

.trust-levels{
--row-cols:1;
--row-gap:25px;
}

}


/* === SECTION: SAME ORGANIZER (same-organizer-section) === */

/* =====================================
SAME ORGANIZER EXPERIENCES
SECTION 13
===================================== */


.same-organizer-section{

padding:90px 20px;

background:#ffffff;

}


.same-organizer-container{

max-width:1200px;

margin:auto;

}


.same-organizer-header{

display:flex;

justify-content:space-between;

align-items:end;

margin-bottom:40px;

}


.same-organizer-title{

}


.same-organizer-label{

display:inline-flex;

padding:7px 16px;

border-radius:30px;

background:rgba(0,153,26,.12);

color:#00991A;

font-size:13px;

font-weight:700;

margin-bottom:15px;

}


.same-organizer-title h2{

font-size:38px;

color:#17252b;

margin:0 0 10px;

font-weight:800;

}


.same-organizer-title p{

color:#667085;

margin:0;

}


.same-organizer-link{

color:#0066AB;

font-weight:700;

text-decoration:none;

font-size:14px;

}


.same-organizer-grid{
--row-cols:4;
--row-gap:22px;
}


.same-organizer-card{

background:white;

border-radius:30px;

overflow:hidden;

box-shadow:

0 12px 35px rgba(0,0,0,.08);

transition:.3s;

}


.same-organizer-card:hover{

transform:translateY(-6px);

}


.same-organizer-image{

height:210px;

background-size:cover;

background-position:center;

position:relative;

}


.same-organizer-badge{

position:absolute;

top:15px;

left:15px;

background:white;

padding:7px 14px;

border-radius:30px;

font-size:12px;

font-weight:700;

color:#00991A;

}


.same-organizer-content{

padding:22px;

}


.same-organizer-content h3{

font-size:19px;

margin:0 0 10px;

color:#17252b;

}


.same-organizer-meta{

font-size:13px;

color:#667085;

margin-bottom:15px;

}


.same-organizer-price{

font-weight:800;

font-size:18px;

color:#0066AB;

}


@media(max-width:1000px){

.same-organizer-grid{
--row-cols:2;
--row-gap:22px;
}

}


@media(max-width:600px){

.same-organizer-grid{
--row-cols:1;
--row-gap:22px;
}


.same-organizer-header{

display:block;

}


}


/* === SECTION: NEARBY (nearby-area-section) === */

/* =====================================
NEARBY AREA EXPERIENCES
SECTION 14
===================================== */


.nearby-area-section{


padding:100px 20px;


background:


linear-gradient(
135deg,
#f5faf8,
#ffffff,
#f2f8ff
);


}


.nearby-area-container{


max-width:1200px;


margin:auto;


}


.nearby-area-header{


text-align:center;


margin-bottom:50px;


}


.nearby-area-label{


display:inline-flex;


padding:8px 18px;


border-radius:30px;


background:

rgba(0,102,171,.12);


color:#0066AB;


font-size:13px;


font-weight:700;


margin-bottom:18px;


}


.nearby-area-header h2{


font-size:42px;


font-weight:800;


color:#17252b;


margin:0 0 15px;


}


.nearby-area-header p{


max-width:700px;


margin:auto;


color:#667085;


line-height:1.7;


}


/* DESTINATION BOX */


.destination-highlight{


background:


linear-gradient(
135deg,
#17252b,
#0066AB
);


border-radius:35px;


padding:35px;


color:white;


display:flex;


justify-content:space-between;


align-items:center;


margin-bottom:45px;


}


.destination-left h3{


font-size:32px;


margin:0 0 10px;


}


.destination-left p{


margin:0;


color:rgba(255,255,255,.8);


}


.destination-stats{


display:flex;


gap:30px;


}


.destination-stat{


text-align:center;


}


.destination-stat strong{


display:block;


font-size:28px;


}


.destination-stat span{


font-size:13px;


color:rgba(255,255,255,.75);


}


/* GRID */


.nearby-area-grid{
--row-cols:3;
--row-gap:25px;
}


.nearby-area-card{


background:white;


border-radius:32px;


overflow:hidden;


box-shadow:


0 12px 35px rgba(0,0,0,.08);


transition:.3s;


}


.nearby-area-card:hover{


transform:translateY(-6px);


}


.nearby-area-image{


height:230px;


background-size:cover;


background-position:center;


position:relative;


}


.nearby-area-distance{


position:absolute;


top:15px;


right:15px;


background:white;


padding:8px 14px;


border-radius:30px;


font-size:12px;


font-weight:700;


color:#0066AB;


}


.nearby-area-content{


padding:25px;


}


.nearby-area-category{


font-size:12px;


font-weight:700;


color:#00991A;


margin-bottom:10px;


}


.nearby-area-content h3{


font-size:21px;


margin:0 0 10px;


color:#17252b;


}


.nearby-area-content p{


font-size:14px;


line-height:1.6;


color:#667085;


margin-bottom:20px;


}


.nearby-area-footer{


display:flex;


justify-content:space-between;


align-items:center;


}


.nearby-area-rating{


font-size:14px;


font-weight:700;


}


.nearby-area-btn{


color:#0066AB;


font-size:14px;


font-weight:800;


text-decoration:none;


}


@media(max-width:900px){


.destination-highlight{


display:block;


}


.destination-stats{


margin-top:25px;


}


.nearby-area-grid{
--row-cols:1;
--row-gap:25px;
}


.nearby-area-header h2{


font-size:32px;


}


}


/* === SECTION: RECOMMENDED (recommended-section) === */

/* =====================================
PERSONALIZED RECOMMENDATIONS
SECTION 15
===================================== */


.recommended-section{


padding:100px 20px;


background:


linear-gradient(
135deg,
#ffffff,
#f5faf8,
#f2f8ff
);


}


.recommended-container{


max-width:1200px;


margin:auto;


}


.recommended-header{


display:flex;


justify-content:space-between;


align-items:end;


margin-bottom:45px;


}


.recommended-label{


display:inline-flex;


padding:7px 16px;


border-radius:30px;


background:


rgba(255,127,0,.12);


color:#FF7F00;


font-size:13px;


font-weight:700;


margin-bottom:15px;


}


.recommended-header h2{


font-size:40px;


font-weight:800;


color:#17252b;


margin:0 0 10px;


}


.recommended-header p{


margin:0;


color:#667085;


}


.recommended-link{


color:#0066AB;


font-weight:700;


font-size:14px;


text-decoration:none;


}


/* GRID */


.recommended-grid{
--row-cols:4;
--row-gap:22px;
}


/* CARD */


.recommended-card{


background:white;


border-radius:30px;


overflow:hidden;


box-shadow:


0 12px 35px rgba(0,0,0,.08);


transition:.3s;


}


.recommended-card:hover{


transform:translateY(-7px);


}


.recommended-image{


height:220px;


background-size:cover;


background-position:center;


position:relative;


}


.recommended-tag{


position:absolute;


top:15px;


left:15px;


background:white;


padding:7px 14px;


border-radius:30px;


font-size:12px;


font-weight:800;


color:#FF7F00;


box-shadow:


0 5px 15px rgba(0,0,0,.08);


}


.recommended-content{


padding:22px;


}


.recommended-category{


font-size:12px;


font-weight:700;


color:#0066AB;


margin-bottom:10px;


}


.recommended-content h3{


font-size:20px;


color:#17252b;


margin:0 0 10px;


}


.recommended-reason{


background:


rgba(0,153,26,.08);


border-radius:15px;


padding:10px;


font-size:12px;


color:#00991A;


font-weight:600;


margin-bottom:15px;


}


.recommended-info{


display:flex;


justify-content:space-between;


align-items:center;


}


.recommended-rating{


font-size:14px;


font-weight:700;


}


.recommended-price{


font-size:16px;


font-weight:800;


color:#0066AB;


}


@media(max-width:1000px){


.recommended-grid{
--row-cols:2;
--row-gap:22px;
}


}


@media(max-width:600px){


.recommended-grid{
--row-cols:1;
--row-gap:22px;
}


.recommended-header{


display:block;


}


.recommended-header h2{


font-size:32px;


}


}


/* === SECTION: STICKY BOOKING BAR === */

/* =====================================
STICKY BOOKING BAR
APPEARS AFTER SCROLL
===================================== */


.sticky-booking-bar{


position:fixed;


left:50%;


bottom:-120px;


transform:translateX(-50%);


width:min(1100px, calc(100% - 40px));


background:

rgba(255,255,255,.95);


backdrop-filter:blur(15px);


border-radius:25px;


padding:15px 22px;


display:flex;


align-items:center;


justify-content:space-between;


gap:25px;


box-shadow:


0 20px 60px rgba(0,0,0,.18);


border:1px solid rgba(0,0,0,.05);


z-index:9999;


transition:.45s ease;


}


.sticky-booking-bar.active{


bottom:25px;


}


.sticky-left{


display:flex;


align-items:center;


gap:15px;


}


.sticky-icon{


width:48px;


height:48px;


border-radius:15px;


background:


linear-gradient(
135deg,
#00991A,
#0066AB
);


display:flex;


align-items:center;


justify-content:center;


color:white;


font-size:22px;


}


.sticky-title{


font-weight:800;


font-size:16px;


color:#17252b;


}


.sticky-meta{


font-size:13px;


color:#667085;


margin-top:4px;


}


.sticky-info{


display:flex;


gap:18px;


align-items:center;


font-size:14px;


color:#344054;


}


.sticky-info strong{


color:#17252b;


}


.sticky-btn{


padding:14px 30px;


border-radius:40px;


background:


linear-gradient(
135deg,
#FFBE00,
#FF7F00
);


color:white;


font-weight:800;


text-decoration:none;


white-space:nowrap;


box-shadow:


0 10px 25px rgba(255,127,0,.3);


transition:.3s, box-shadow .15s ease;


}


@media(max-width:800px){


.sticky-booking-bar{


width:calc(100% - 24px);


bottom:-150px;


padding:12px;


border-radius:22px;


}


.sticky-booking-bar.active{


bottom:12px;


}


.sticky-left{


display:none;


}


.sticky-info{


font-size:13px;


}


.sticky-info span:nth-child(2),
.sticky-info span:nth-child(3){


display:none;


}


.sticky-btn{


padding:14px 20px;


}


}


/* === Gallery item as <button> — reset native styles + preserve design === */
button.activity-gallery-item {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    display: block;
    width: 100
}
/* === Gallery item as <button> — reset native styles + preserve design === */
button.activity-gallery-item {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    display: block;
    width: 100%;
}
button.activity-gallery-item:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
}


/* === FAQ accordion (starea colapsata/expandata) === */
.faq-item .faq-answer {
    display: none;
    animation: faqSlide .2s ease;
}
.faq-item.is-open .faq-answer {
    display: block;
}
.faq-item .faq-question {
    cursor: pointer;
    user-select: none;
}
.faq-item .faq-plus {
    transition: transform .2s ease, background .2s ease, color .2s ease;
}
.faq-item.is-open .faq-plus {
    transform: rotate(45deg);
    background: #00991A;
    color: #fff;
}
@keyframes faqSlide {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* === Override public.css h1..h6 color pt containere cu fundal inchis === */
.safety-box,
.safety-box h1,
.safety-box h2,
.safety-box h3,
.safety-box h4,
.safety-box h5,
.safety-box h6,
.safety-box p,
.safety-box strong,
.safety-box span,
/* Doar h3-ul din caseta inchisa "Zona ...", NU si titlurile cardurilor albe
   din aceeasi sectiune (inainte era `.nearby-area-section h3`, care le prindea
   pe toate si le facea invizibile pe fundal alb). */
.nearby-area-section .destination-highlight h3,
.offer-section h2 {
    color: #fff !important;
}


/* === Owner preview banner (activitate ne-publicata vizibila proprietarului) === */
.ap-owner-preview-bar {
    position: sticky;
    top: 0;
    z-index: 500;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    padding: 10px 20px;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
    font-size: 14px;
}
.ap-owner-preview-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.ap-owner-preview-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.05em;
}
.ap-owner-preview-status strong {
    background: rgba(0,0,0,0.2);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
}
.ap-owner-preview-status--draft strong          { background: rgba(148,163,184,0.45); }
.ap-owner-preview-status--pending_review strong { background: rgba(30,64,175,0.5); }
.ap-owner-preview-status--paused strong         { background: rgba(120,53,15,0.45); }
.ap-owner-preview-status--archived strong       { background: rgba(30,41,59,0.5); }
.ap-owner-preview-msg {
    flex: 1;
    min-width: 200px;
    opacity: 0.95;
}
.ap-owner-preview-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #fff;
    color: #d97706;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.ap-owner-preview-btn:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
    color: #b45309;
}


/* =====================================
   DISPONIBILITATE (activity-schedule)
   ===================================== */
.activity-schedule-section { padding: 90px 0; background: #f8fafc; }
.activity-schedule-container { max-width: 1200px; margin: auto; padding: 0 20px; }

.activity-schedule-header { text-align: center; margin-bottom: 45px; }
.activity-schedule-label {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 30px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 18px;
}
.activity-schedule-header h2 {
    font-size: 40px;
    line-height: 1.15;
    color: #17252b;
    margin: 0 0 14px;
}
.activity-schedule-header p {
    max-width: 680px;
    margin: 0 auto;
    color: #667085;
}

.activity-schedule-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
    margin-bottom: 35px;
}

.activity-schedule-card {
    background: #fff;
    border-radius: 22px;
    padding: 22px 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    border-left: 5px solid #00991A;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.activity-schedule-card--limited   { border-left-color: #f59e0b; }
.activity-schedule-card--full      { border-left-color: #94a3b8; opacity: .75; }
.activity-schedule-card--cancelled { border-left-color: #ef4444; opacity: .6; }

.activity-schedule-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.activity-schedule-when { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.activity-schedule-when strong {
    font-size: 17px;
    color: #17252b;
    font-weight: 800;
    line-height: 1.3;
}
.activity-schedule-valid { font-size: 12px; color: #94a3b8; }
.activity-schedule-name {
    font-size: 13px;
    color: #0077b6;
    font-weight: 600;
}

.activity-schedule-status {
    flex-shrink: 0;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: #dcfce7;
    color: #166534;
    white-space: nowrap;
}
.activity-schedule-status--limited   { background: #fef3c7; color: #92400e; }
.activity-schedule-status--full      { background: #e2e8f0; color: #475569; }
.activity-schedule-status--cancelled { background: #fee2e2; color: #991b1b; }

.activity-schedule-times {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    background: #f8fafc;
    border-radius: 12px;
}
.activity-schedule-time-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 14px;
}
.activity-schedule-time-day {
    min-width: 44px;
    font-weight: 700;
    color: #17252b;
    font-size: 13px;
}
.activity-schedule-time-vals { color: #475569; }

.activity-schedule-note {
    margin: 0;
    font-size: 13px;
    color: #667085;
    line-height: 1.6;
}

.activity-schedule-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}
.activity-schedule-seats { font-size: 13px; color: #667085; }
.activity-schedule-price { font-size: 17px; font-weight: 800; color: #17252b; }

.activity-schedule-cta {
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 15px 34px;
    border-radius: 40px;
    background: linear-gradient(135deg, #FFBE00, #FF7F00);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 15px 35px rgba(255,127,0,.3);
    transition: transform .2s ease, box-shadow .15s ease;
}

@media (max-width: 900px) {
    .activity-schedule-section { padding: 60px 0; }
    .activity-schedule-header h2 { font-size: 30px; }
    .activity-schedule-grid { grid-template-columns: 1fr; }
}


/* =====================================
   FORMULAR CERERE (oferta / rezervare)
   ===================================== */
.offer-alert {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 18px;
    border-radius: 14px;
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.55;
}
.offer-alert--ok  { background: #dcfce7; color: #14532d; border: 1px solid #86efac; }
.offer-alert--err { background: #fee2e2; color: #7f1d1d; border: 1px solid #fca5a5; }
.offer-alert i { font-size: 18px; margin-top: 1px; flex-shrink: 0; }
.offer-alert strong { display: block; }
.offer-account-hint { margin: 6px 0 0; font-size: 13px; opacity: .9; }
.offer-account-hint a { color: inherit; font-weight: 700; text-decoration: underline; }

.offer-logged-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #eff6ff;
    border-radius: 12px;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
}

.offer-type-switch {
    display: flex;
    gap: 6px;
    padding: 5px;
    background: #f1f5f9;
    border-radius: 999px;
    margin-bottom: 20px;
}
.offer-type-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all .18s ease;
}
.offer-type-btn:hover { color: #0f172a; }
.offer-type-btn.is-active {
    background: #fff;
    color: #0077b6;
    box-shadow: 0 2px 8px rgba(15,23,42,.1);
}

.offer-req { color: #ef4444; }

.offer-form textarea,
.offer-form select,
.offer-form input {
    font-family: inherit;
}

.activity-schedule-book {
    display: inline-block;
    margin-top: 10px;
    padding: 9px 18px;
    border-radius: 999px;
    background: #17252b;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    transition: background .18s ease, transform .18s ease, box-shadow .15s ease;
}
.activity-schedule-book:hover {
    background: #0077b6;
    color: #fff;
}

@media (max-width: 640px) {
    .offer-type-switch { flex-direction: column; border-radius: 16px; }
    .offer-type-btn { border-radius: 12px; }
}

/* =============================================================================
   RECENZII — stare goala, raspuns furnizor, formular de adaugare
   Paleta preluata din sectiunea existenta: #FFBE00 stele, #f8fafb carduri,
   #475467 text secundar.
   ========================================================================== */

/* ---------- Stare goala (nicio recenzie aprobata) ---------- */
.ar-empty {
    text-align: center;
    padding: 50px 24px;
    background: #f8fafb;
    border-radius: 30px;
    color: #475467;
}
.ar-empty i { font-size: 32px; color: #cbd5e1; margin-bottom: 14px; display: block; }
.ar-empty p { font-size: 15px; margin: 0; }

/* ---------- Raspunsul furnizorului sub o recenzie ---------- */
.ar-provider-reply {
    margin-top: 18px;
    padding: 16px 18px;
    background: #ffffff;
    border-left: 3px solid #16a34a;
    border-radius: 0 14px 14px 0;
}
.ar-provider-reply-head {
    font-size: 13px;
    font-weight: 700;
    color: #16a34a;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ar-provider-reply p {
    font-size: 14px !important;
    font-style: normal !important;
    color: #475467;
    margin: 0;
}

/* ---------- Zona de formular ---------- */
.ar-form-wrap {
    max-width: 760px;
    margin: 50px auto 0;
}

.ar-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 14px;
    font-size: 14.5px;
    line-height: 1.6;
    margin-bottom: 20px;
}
.ar-alert i { margin-top: 2px; font-size: 16px; }
.ar-alert--ok  { background: #dcfce7; color: #14532d; }
.ar-alert--err { background: #fee2e2; color: #991b1b; }

/* Prompt pentru vizitatorii nelogati */
.ar-login-prompt {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 28px;
    background: #f8fafb;
    border-radius: 24px;
}
.ar-login-prompt > i { font-size: 26px; color: #94a3b8; margin-top: 4px; }
.ar-login-prompt strong { display: block; font-size: 18px; color: #101828; margin-bottom: 6px; }
.ar-login-prompt p { font-size: 14.5px; color: #475467; margin: 0 0 16px; line-height: 1.6; }
.ar-login-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Starea recenziei proprii */
.ar-status {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 20px;
    border-radius: 16px;
    margin-bottom: 22px;
}
.ar-status > i { font-size: 20px; margin-top: 2px; }
.ar-status strong { display: block; font-size: 15.5px; margin-bottom: 4px; }
.ar-status p { margin: 0; font-size: 14px; line-height: 1.6; opacity: .85; }
.ar-status--pending  { background: #fef3c7; color: #78350f; }
.ar-status--approved { background: #dcfce7; color: #14532d; }
.ar-status--rejected { background: #fee2e2; color: #991b1b; }

/* ---------- Formularul ---------- */
.ar-form {
    background: #f8fafb;
    border-radius: 24px;
    padding: 32px;
}
.ar-form h3 { font-size: 22px; color: #101828; margin: 0 0 10px; }
.ar-form-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: #16a34a;
    font-weight: 600;
    margin-bottom: 24px;
}

.ar-field { margin-bottom: 22px; }
.ar-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #101828;
    margin-bottom: 10px;
}
.ar-req { color: #dc2626; }

.ar-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.6;
    color: #101828;
    resize: vertical;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ar-form textarea:focus {
    outline: none;
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22,163,74,.12);
}
.ar-hint { display: block; margin-top: 6px; font-size: 12.5px; color: #94a3b8; }

/* ---------- Input cu stele ----------
   Radio-urile sunt in DOM de la 5 la 1, iar randul e inversat vizual cu
   row-reverse. Asa, `~` prinde stelele cu valoare mai MICA decat cea aleasa,
   care sunt exact cele afisate la stanga ei. Nu e nevoie de JS.
   ------------------------------------------------------------------------ */
.ar-stars-input {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
}
.ar-stars-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.ar-stars-input label {
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
    color: #dbe2ea;
    transition: color .12s ease, transform .12s ease;
    user-select: none;
}
.ar-stars-input--lg label { font-size: 34px; }

/* Aprinde steaua curenta + toate cele de dinaintea ei (la stanga vizual) */
.ar-stars-input input:checked ~ label,
.ar-stars-input label:hover,
.ar-stars-input label:hover ~ label { color: #FFBE00; }
.ar-stars-input label:hover { transform: scale(1.12); }

/* Stelele sunt imagini, nu caractere, deci `color` nu le mai aprinde. Fiecare
   eticheta le tine pe amandoua — stinsa si aprinsa — si se arata una singura.
   Selectorii raman aceiasi, deci purtarea e neschimbata: alegerea si trecerea
   cu mausul aprind steaua curenta si pe toate cele dinaintea ei.

   Inaltimea in `em` se ia dupa `font-size`-ul etichetei, care ramane masura
   marimii: 26px de obicei, 34px la nota principala. */
.ar-stars-input .ar-star {
    height: 1em;
    width: auto;
    display: inline-block;
    vertical-align: -.1em;
}
.ar-stars-input .ar-star--on { display: none; }

.ar-stars-input input:checked ~ label .ar-star--on,
.ar-stars-input label:hover .ar-star--on,
.ar-stars-input label:hover ~ label .ar-star--on { display: inline-block; }

.ar-stars-input input:checked ~ label .ar-star--off,
.ar-stars-input label:hover .ar-star--off,
.ar-stars-input label:hover ~ label .ar-star--off { display: none; }

/* Inelul de focus pentru navigare cu tastatura */
.ar-stars-input input:focus-visible + label {
    outline: 2px solid #16a34a;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Cele 4 sub-scoruri */
.ar-subscores {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 24px;
    padding: 20px;
    background: #fff;
    border-radius: 18px;
    margin-bottom: 24px;
}
.ar-subscore {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ar-subscore-label { font-size: 14px; color: #475467; font-weight: 600; }

/* ---------- Butoane ---------- */
.ar-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border: none;
    border-radius: 999px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ar-btn--primary {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    color: #fff;
}
.ar-btn--primary:hover {
    box-shadow: 0 10px 24px rgba(22,163,74,.28);
    color: #fff;
}
.ar-btn--ghost {
    background: #fff;
    color: #101828;
    border: 1px solid #e2e8f0;
}
.ar-btn--ghost:hover { background: #f1f5f9; color: #101828; }
.ar-submit { margin-top: 4px; }

.ar-moderation-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    font-size: 13px;
    color: #94a3b8;
}

/* ---------- Mobil ---------- */
@media (max-width: 640px) {
    .ar-form { padding: 22px; border-radius: 18px; }
    .ar-subscores { grid-template-columns: 1fr; padding: 16px; }
    .ar-subscore { flex-direction: column; align-items: flex-start; gap: 6px; }
    .ar-stars-input--lg label { font-size: 30px; }
    .ar-login-prompt { flex-direction: column; padding: 22px; }
    .ar-login-actions .ar-btn { flex: 1 1 auto; justify-content: center; }
}

/* Link catre lista completa de recenzii, sub grila celor 3 afisate */
.ar-see-all { text-align: center; margin-top: 32px; }
.ar-see-all .ar-btn { padding: 13px 30px; }

/* Butonul de editare din cardul de status + actiunile formularului */
.ar-status .ar-edit-toggle { margin-top: 14px; padding: 10px 20px; font-size: 13.5px; }
.ar-form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Butonul care deschide formularul de recenzie */
.ar-open-wrap { text-align: center; padding: 8px 0; }
.ar-open-wrap .ar-btn { padding: 14px 32px; font-size: 15px; }
.ar-open-hint { margin: 12px 0 0; font-size: 13.5px; color: #94a3b8; }

/* --- Card "experiente in zona": elemente adaugate peste designul static --- */
.nearby-area-card { position: relative; }

/* Distanta calculata haversine, peste imagine */
.nearby-area-distance { z-index: 2; }

/* Cand activitatea n-are rating, aratam numele organizatorului in locul lui */
.nearby-area-provider {
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
}

/* Iconita categoriei din chip */
.nearby-area-category i { font-size: 11px; margin-right: 4px; opacity: .85; }

/* Butonul e <span> (cardul intreg e link prin .card-link-overlay), deci
   pastram aspectul de link fara sa imbricam <a> in <a>. */
.nearby-area-btn { cursor: pointer; }

/* Grila mica din sectiunea hartii: cardul e link, iar imaginea poate lipsi */
a.nearby-card { text-decoration: none; color: inherit; display: block; }
.nearby-image-fallback {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; color: #cbd5e1; font-size: 26px;
}
.nearby-content span i { margin-right: 5px; opacity: .8; }

/* --- Corectii card zona (verificate in browser) --- */

/* Titlul cardului: fundal alb, deci text inchis. Explicit, ca sa nu mai poata
   fi acoperit de vreo regula pe .nearby-area-section h3. */
.nearby-area-card .nearby-area-content h3 { color: #17252b; }

/* Eticheta cu judetul statea la dreapta, exact peste inima de favorite
   (masurat: badge 332-400px, inima 361-401px). O mutam la stanga. */
.nearby-area-card .nearby-area-distance {
    right: auto;
    left: 15px;
}


/* =============================================================================
   HOVER PENTRU BUTOANELE PORTOCALII

   Toate folosesc acelasi degrade, deci si raspunsul la hover e acelasi, scris
   o singura data.

   `color:#fff` nu e de prisos: in public.css exista `a:hover { color: ... }`,
   iar `a:hover` (0,1,1) bate `.activity-primary-btn` (0,1,0). Fara el, textul
   alb al butoanelor-link se facea verde inchis la trecerea cu mouse-ul si
   aproape nu se mai citea pe portocaliu.
   ========================================================================== */
.activity-primary-btn:hover,
.organizer-primary-btn:hover,
.activity-schedule-cta:hover,
.offer-submit:hover,
.sticky-btn:hover {
    background: linear-gradient(135deg, #FF9500, #E05F00);
    color: #fff;
    box-shadow: 0 16px 38px rgba(224, 95, 0, .55);
}

.activity-primary-btn:active,
.organizer-primary-btn:active,
.activity-schedule-cta:active,
.offer-submit:active,
.sticky-btn:active {
    transform: translateY(0);
    box-shadow: 0 6px 16px rgba(224, 95, 0, .45);
}

/* Butoanele astea nu aveau nicio tranzitie, deci schimbarea aparea brusc */
.organizer-primary-btn,
.offer-submit {
    transition: background .2s ease, box-shadow .2s ease, transform .15s ease;
}


/*********************************************/
@media (max-width: 600px) {
    .activity-floating-price{
		margin-bottom:15px;
	}
	.activity-price-terms {
		margin-top: 0px; 
		padding-top: 0px;
	}
	.activity-equipment-advice {
		padding: 30px 15px;
	}
	.activity-equipment-advice-icon img{
		width:30px;
		height:30px;
		display: inline-block;
        margin: 5px;
	}
	.activity-equipment-advice-icon{
		width:40px;
		height:40px;
		line-height:40px;
	}
}

/*********************************************/