/* Hotero.ro – English pages (/en/), 25.10.2026. Same brand as the Romanian site: navy, gold, coral. */
:root { --navy:#0B192C; --navy2:#142A45; --gold:#D4AF37; --coral:#F26B4E; --coral2:#D9553A; --teal:#2BB5B1; --text:#1B2733; --muted:#5A6876; --line:#E3E8EE; --soft:#F5F7FA; --white:#FFFFFF; }
* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body { font-family:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; color:var(--text); background:var(--white); font-size:16px; line-height:1.65; }
a { color:#0B6E8F; }
img { max-width:100%; height:auto; }
.en-wrap { max-width:1120px; margin:0 auto; padding:0 16px; }

/* header */
.en-head { background:var(--navy); color:var(--white); border-bottom:3px solid var(--gold); }
.en-head .en-wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:68px; flex-wrap:wrap; }
.en-logo img { display:block; height:46px; width:auto; }
.en-nav { display:flex; align-items:center; gap:18px; flex-wrap:wrap; font-size:15px; }
.en-nav a { color:var(--white); text-decoration:none; font-weight:600; }
.en-nav a:hover { color:var(--gold); }
.en-nav a.en-lang { border:1px solid rgba(255,255,255,.35); border-radius:99px; padding:4px 12px; font-size:13.5px; }

/* hero */
.en-hero { background:linear-gradient(160deg, var(--navy) 0%, var(--navy2) 100%); color:var(--white); padding:44px 0 52px; }
.en-hero h1 { font-size:40px; line-height:1.15; margin:0 0 14px; font-weight:800; letter-spacing:-.5px; max-width:780px; }
.en-hero h1 span { color:var(--gold); }
.en-hero p { font-size:18px; max-width:700px; margin:0 0 22px; color:#D6DEE8; }
.en-btn { display:inline-block; background:var(--coral); color:var(--white); text-decoration:none; font-weight:700; padding:12px 22px; border-radius:12px; border:0; font-size:16px; cursor:pointer; }
.en-btn:hover { background:var(--coral2); color:var(--white); }
.en-btn-alb { background:transparent; border:1px solid rgba(255,255,255,.5); margin-left:8px; }
.en-hero-bara { display:flex; gap:22px; flex-wrap:wrap; margin-top:26px; font-size:14.5px; color:#C9D3DE; }
.en-hero-bara b { color:var(--white); }

/* sections */
.en-sec { padding:40px 0; }
.en-sec-gri { background:var(--soft); }
.en-sec h2 { font-size:28px; line-height:1.25; margin:0 0 8px; font-weight:800; }
.en-sec .en-sub { color:var(--muted); margin:0 0 22px; max-width:760px; }
.en-text { max-width:780px; }
.en-text h2 { margin-top:30px; }
.en-text h3 { font-size:20px; margin:24px 0 6px; }
.en-text p, .en-text li { font-size:16.5px; }

/* region cards */
.en-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:16px; }
.en-card { display:block; background:var(--white); border:1px solid var(--line); border-radius:16px; overflow:hidden; text-decoration:none; color:var(--text); transition:box-shadow .15s, transform .15s; }
.en-card:hover { box-shadow:0 8px 24px rgba(11,25,44,.12); transform:translateY(-2px); }
.en-card .en-foto { display:block; height:160px; background:#DDE4EC center/cover no-repeat; position:relative; }
.en-card .en-foto i { position:absolute; left:10px; top:10px; background:rgba(11,25,44,.82); color:var(--white); font-style:normal; font-size:12px; font-weight:700; padding:3px 9px; border-radius:99px; }
.en-card .en-txt { display:block; padding:12px 14px 16px; }
.en-card b { display:block; font-size:17px; line-height:1.3; margin:0 0 4px; }
.en-card small { display:block; color:var(--muted); font-size:14px; line-height:1.5; }

/* steps */
.en-pasi { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:16px; counter-reset:pas; }
.en-pas { background:var(--white); border:1px solid var(--line); border-radius:16px; padding:18px 18px 14px; }
.en-pas b { display:block; font-size:17px; margin:0 0 4px; }
.en-pas b:before { counter-increment:pas; content:counter(pas); display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--gold); color:var(--navy); font-weight:800; margin-right:10px; font-size:14px; }
.en-pas p { margin:0; color:var(--muted); font-size:15px; }

/* tips */
.en-sfaturi { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:14px 26px; }
.en-sfaturi div { border-left:3px solid var(--teal); padding:2px 0 2px 14px; }
.en-sfaturi b { display:block; font-size:16.5px; }
.en-sfaturi p { margin:2px 0 0; color:var(--muted); font-size:15px; }

/* notes and breadcrumbs */
.en-nota { background:#FFF7E6; border:1px solid #F3DDAA; border-radius:12px; padding:12px 14px; font-size:14.5px; color:#5B4300; }
.en-fir { font-size:14px; color:var(--muted); padding:14px 0 0; }
.en-fir a { color:var(--muted); }

/* footer */
.en-foot { background:var(--navy); color:#C9D3DE; padding:30px 0 34px; margin-top:20px; font-size:14.5px; border-top:3px solid var(--gold); }
.en-foot .en-wrap { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.en-foot a { color:var(--white); }
.en-foot b { color:var(--white); }

/* cookie note */
#en-cookie { position:fixed; left:16px; right:16px; bottom:16px; max-width:560px; margin:0 auto; background:var(--white); color:var(--text); border:1px solid var(--line); border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.18); padding:14px 16px; font-size:14px; display:none; z-index:50; }
#en-cookie button { margin-left:10px; padding:6px 14px; font-size:14px; }

@media (max-width:700px) {
	.en-hero { padding:30px 0 36px; }
	.en-hero h1 { font-size:29px; }
	.en-hero p { font-size:16.5px; }
	.en-sec { padding:30px 0; }
	.en-sec h2 { font-size:23px; }
	.en-logo img { height:38px; }
	.en-nav { gap:12px; font-size:14px; }
	.en-btn-alb { margin:10px 0 0; }
	.en-head .en-wrap { min-height:58px; flex-wrap:nowrap; }
	.en-nav a.en-nav-x { display:none; }
	.en-grid { grid-template-columns:1fr 1fr; gap:12px; }
	.en-card .en-foto { height:108px; }
	.en-card .en-txt { padding:10px 11px 12px; }
	.en-card b { font-size:15px; }
	.en-card small { font-size:13px; }
}
.en-card .en-foto-gol { background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 160' preserveAspectRatio='xMinYMax slice'%3E%3Ccircle cx='190' cy='46' r='16' fill='%23D4AF37' fill-opacity='.85'/%3E%3Cpath d='M0 160V112l48-34 36 22 52-50 44 38 30-20 58 46 40-30 52 36 40-26V160z' fill='%23ffffff' fill-opacity='.10'/%3E%3Cpath d='M0 160v-28l60-26 50 18 64-34 56 30 48-16 62 26 60-20V160z' fill='%232BB5B1' fill-opacity='.35'/%3E%3C/svg%3E") center bottom/cover no-repeat, linear-gradient(160deg, #0B192C 0%, #17365A 100%); }