/* Additions for the EU site. Loaded after style.css so it can only add to,
   never fight with, the shared design. */

/* ---- Language switcher -------------------------------------------------- */
#langSw { position: relative; display: flex; align-items: center; }

.lang-btn {
  display: flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 10px; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--txt); cursor: pointer; line-height: 1;
}
.lang-btn:hover { border-color: var(--txt); }
.lang-caret { transition: transform .15s ease; flex-shrink: 0; }
.lang-menu.open ~ .lang-btn .lang-caret,
#langSw:has(.lang-menu.open) .lang-caret { transform: rotate(180deg); }

.lang-menu {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 90;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
  padding: 6px; min-width: 240px;
  max-height: 60vh; overflow-y: auto;
  /* Two columns, because 22 languages in one list is a scroll nobody
     finishes. Grid rather than CSS `columns`: multi-column fragments the
     boxes of interactive children, which leaves some links with an
     unreliable hit area. */
  display: none;
  grid-template-columns: 1fr 1fr; gap: 2px;
}
.lang-menu.open { display: grid; }
.lang-menu a {
  display: flex; align-items: baseline; gap: 7px;
  padding: 7px 9px; border-radius: 7px;
  font-size: 13px; color: var(--txt); text-decoration: none;
}
.lang-menu a:hover { background: var(--panel); }
.lang-menu a.active { background: var(--txt); color: #fff; }
.lang-menu a.active .lang-code { color: #fff; opacity: .75; }
.lang-code {
  font-size: 10px; font-weight: 800; letter-spacing: .5px;
  color: var(--mut); min-width: 20px;
}
.lang-name { font-weight: 500; }

@media (max-width: 720px) {
  .lang-menu { grid-template-columns: 1fr; min-width: 180px; }
  .lang-btn .lang-name { display: none; }
  /* The switcher sits at the LEFT end of .actions on a phone, so a menu
     anchored to its right edge hangs off the side of the screen and the
     language codes are unreachable. Anchor it to the left edge instead, and
     cap it so it can never reach past the viewport either way. */
  .lang-menu, #curSw .lang-menu {
    left: 0; right: auto;
    max-width: calc(100vw - 24px);
  }
}

/* ---- Prices ------------------------------------------------------------- */
/* The approximate figure for the six non-euro Member States. Deliberately
   quiet: the euro amount is the one that gets charged. */
.px-sec, .px-sec-line { color: var(--mut); font-weight: 500; }
.px-sec { font-size: .82em; }
.px-sec-line { display: block; font-size: 12px; margin-top: 2px; }

/* ---- Country picker ----------------------------------------------------- */
.country-row { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; }
.country-row label { font-size: 12px; font-weight: 700; color: var(--mut);
  text-transform: uppercase; letter-spacing: .6px; }
.country-row select {
  padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px;
  font: inherit; font-size: 14px; background: #fff; color: var(--txt);
}
.ship-hint { font-size: 12px; color: var(--mut); line-height: 1.5; }

/* ---- Romania notice ----------------------------------------------------- */
.ro-notice {
  position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 120;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  max-width: 760px; margin: 0 auto;
  background: #0a0a0a; color: #fff;
  padding: 14px 18px; border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
  font-size: 14px; line-height: 1.5;
}
.ro-notice span { flex: 1 1 260px; }
.ro-notice .ro-go {
  background: #fff; color: #0a0a0a; padding: 9px 16px; border-radius: 9px;
  font-weight: 700; text-decoration: none; font-size: 13px; white-space: nowrap;
}
.ro-notice .ro-stay {
  background: none; border: 1px solid rgba(255, 255, 255, .35); color: #fff;
  padding: 9px 14px; border-radius: 9px; font: inherit; font-size: 13px;
  cursor: pointer; white-space: nowrap;
}

/* ---- Product page tabs rebuilt as lists --------------------------------- */
.pdp-list { margin: 0 0 12px; padding-left: 20px; }
.pdp-list li { margin: 0 0 7px; line-height: 1.6; }
.pdp-law { color: var(--mut); font-size: 13px; margin-top: 10px; }

/* ---- Forms shared by checkout, custom and contact ----------------------- */
.mf-form { display: grid; gap: 14px; }
.mf-row { display: grid; gap: 6px; }
.mf-row.two { grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .mf-row.two { grid-template-columns: 1fr; } }
.mf-row label { font-size: 13px; font-weight: 600; color: var(--txt); }
.mf-row input, .mf-row select, .mf-row textarea {
  padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px;
  font: inherit; font-size: 14px; background: #fff; width: 100%;
  box-sizing: border-box;
}
.mf-row input:focus, .mf-row select:focus, .mf-row textarea:focus {
  outline: none; border-color: var(--txt);
}
.mf-row .hint { font-size: 12px; color: var(--mut); }
.mf-err { color: #b42318; font-size: 13px; }
.mf-ok { color: #027a48; font-size: 13px; }

.mf-check { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; }
.mf-check input { margin-top: 3px; }

.biz-box {
  border: 1px solid var(--line); border-radius: 11px;
  padding: 14px; background: var(--panel); display: grid; gap: 12px;
}

.vat-note {
  background: #eef6ff; border: 1px solid #cfe3ff; color: #1f4e79;
  border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.6;
}

/* ---- Long-form legal pages ---------------------------------------------- */
.legal { max-width: 780px; margin: 0 auto; padding: 26px 0 60px; }
.legal h1 { font-size: 30px; margin: 0 0 8px; }
.legal .updated { color: var(--mut); font-size: 13px; margin-bottom: 28px; }
.legal h2 { font-size: 19px; margin: 34px 0 10px; }
.legal h3 { font-size: 16px; margin: 22px 0 8px; }
.legal p, .legal li { line-height: 1.75; color: var(--txt); }
.legal ul, .legal ol { padding-left: 22px; }
.legal li { margin-bottom: 7px; }
.legal table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.legal th, .legal td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.legal th { font-weight: 700; background: var(--panel); }
.legal .box {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 11px; padding: 16px 18px; margin: 18px 0;
}
.legal .box p:last-child { margin-bottom: 0; }
.legal dl { margin: 0; }
.legal dt { font-weight: 700; margin-top: 14px; }
.legal dd { margin: 4px 0 0; color: var(--mut); }
.legal .toc { columns: 2; column-gap: 28px; }
@media (max-width: 620px) { .legal .toc { columns: 1; } }

/* ---- Order tracking ----------------------------------------------------- */
.track-steps { list-style: none; padding: 0; margin: 22px 0; }
.track-steps li {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; color: var(--mut); font-size: 15px;
}
.track-steps li .dot {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--line); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.track-steps li.done { color: var(--txt); }
.track-steps li.done .dot { background: var(--txt); border-color: var(--txt); color: #fff; }
.track-steps li.now { font-weight: 800; color: var(--txt); }

/* ---- Admin -------------------------------------------------------------- */
.adm-wrap { max-width: 1180px; margin: 0 auto; padding: 24px 0 60px; }
.adm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; margin-bottom: 26px; }
.adm-card { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: #fff; }
.adm-card .k { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--mut); }
.adm-card .v { font-size: 26px; font-weight: 800; margin-top: 6px; }
.adm-card .s { font-size: 12px; color: var(--mut); margin-top: 4px; }
.adm-alert { border-radius: 11px; padding: 13px 16px; margin-bottom: 10px; font-size: 14px; line-height: 1.6; }
.adm-alert.critical { background: #fef3f2; border: 1px solid #fecdca; color: #b42318; }
.adm-alert.warning { background: #fffbeb; border: 1px solid #fde68a; color: #b45309; }
.adm-alert.info { background: #eef6ff; border: 1px solid #cfe3ff; color: #1f4e79; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.adm-table th, .adm-table td { padding: 10px 9px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.adm-table th { background: var(--panel); font-weight: 700; white-space: nowrap; }
.adm-table tr:hover td { background: #fcfcfd; }
.adm-pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.adm-pill.paid { background: #eef6ff; color: #1f4e79; }
.adm-pill.shipped { background: #fffbeb; color: #b45309; }
.adm-pill.delivered { background: #ecfdf3; color: #166534; }
.adm-pill.cancelled { background: #f4f4f5; color: #6b7280; }
.adm-btn {
  padding: 6px 11px; border: 1px solid var(--line); border-radius: 7px;
  background: #fff; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.adm-btn:hover { border-color: var(--txt); }
.adm-btn.primary { background: var(--txt); color: #fff; border-color: var(--txt); }
.adm-scroll { overflow-x: auto; }


/* ---- Checkout ------------------------------------------------------------
   Lifted from the Romanian checkout page so the two look identical; the
   address-autocomplete rules are gone, because the EU form is a plain
   international address rather than a lookup against the Romanian locality
   database. */

#ck-wrap{max-width:680px;margin:0 auto;padding:40px 16px 80px}
#ck-title{font-size:26px;font-weight:900;letter-spacing:-0.5px;margin-bottom:6px}
#ck-sub{color:var(--mut);font-size:14px;margin-bottom:28px}
#ck-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:320px;gap:16px;color:var(--mut);font-size:14px}
.ck-spinner{width:36px;height:36px;border:3px solid var(--line);border-top-color:#111;border-radius:50%;animation:spin 0.7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#ck-error{display:none;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:16px;color:#991b1b;font-size:14px;margin-bottom:20px}
#ck-form{min-height:200px}
#ck-back{display:inline-flex;align-items:center;gap:6px;color:var(--mut);font-size:13px;text-decoration:none;margin-bottom:20px}
#ck-back:hover{color:var(--txt)}
#ck-order-summary{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:24px;font-size:13px}
#ck-order-summary .ck-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--line)}
#ck-order-summary .ck-row:last-child{border-bottom:none;font-weight:700;font-size:14px;padding-top:10px;margin-top:4px}
#ck-order-summary .ck-name{color:var(--txt);max-width:75%;line-height:1.3}
#ck-order-summary .ck-price{color:var(--txt);white-space:nowrap;font-weight:600}
#ck-address{margin-bottom:24px}
#ck-address h3{font-size:16px;font-weight:800;margin:0 0 4px}
#ck-address .ck-af-sub{color:var(--mut);font-size:13px;margin-bottom:16px}
.ck-af{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ck-af label{display:flex;flex-direction:column;font-size:12px;font-weight:600;color:var(--mut);gap:5px}
.ck-af label.full,.ck-af .full{grid-column:1 / -1}
.ck-af input,.ck-af select{padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:inherit;background:var(--bg);color:var(--txt)}
.ck-af input:focus,.ck-af select:focus{outline:none;border-color:#111}
.ck-af input.needsel{border-color:#dc2626;background:#fef2f2}
.ck-af input[readonly]{background:var(--panel);color:var(--mut)}
.ck-phone{display:flex;align-items:stretch}
.ck-phone .pfx{display:flex;align-items:center;padding:0 12px;border:1px solid var(--line);border-right:none;border-radius:8px 0 0 8px;background:var(--panel);color:var(--txt);font-size:14px;font-weight:700;white-space:nowrap}
.ck-phone input{border-radius:0 8px 8px 0!important;flex:1}
.ck-phone input.needsel{border-color:#dc2626;background:#fef2f2}
.ck-ac{position:relative;display:flex;flex-direction:column}
.ck-sug{position:absolute;top:100%;left:0;right:0;z-index:20;background:var(--bg);border:1px solid var(--line);border-top:none;border-radius:0 0 8px 8px;max-height:220px;overflow:auto;box-shadow:0 8px 20px rgba(0,0,0,.08);display:none}
.ck-sug.open{display:block}
.ck-sug div{padding:9px 12px;font-size:14px;cursor:pointer;border-bottom:1px solid var(--line)}
.ck-sug div:hover,.ck-sug div.active{background:var(--panel)}
.ck-sug .sug-noop{color:var(--mut);cursor:default;font-style:italic}
.ck-sug .sug-noop:hover{background:none}
.ck-af input:disabled{background:var(--panel);opacity:.55;cursor:not-allowed}
.ck-af-ok{font-size:11px;color:#16a34a;font-weight:600}
.ck-af-err{color:#991b1b;font-size:13px;margin:12px 0 0;display:none}
.ck-af-btn{margin-top:18px;width:100%;padding:14px;background:#111;color:#fff;border:none;border-radius:9px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit}
.ck-af-btn:hover{background:#000}
.ck-af-btn:disabled{opacity:.5;cursor:not-allowed}
.ck-cb{flex-direction:row!important;align-items:flex-start;gap:8px!important;font-weight:500!important;color:var(--txt)!important;font-size:13px!important;cursor:pointer}
.ck-cb input{width:auto;margin-top:2px}
.da-status{margin-top:12px;font-size:13px;font-weight:600}
.da-status.ok{color:#16a34a}
.da-status.warn{color:#92400e}
#ck-pay-title{font-size:16px;font-weight:800;margin:24px 0 14px;padding-top:20px;border-top:1px solid var(--line)}
.ck-el{margin-bottom:16px}
.promo-row{display:flex;gap:8px;margin-bottom:6px}
.promo-row input{flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:inherit;background:var(--bg);color:var(--txt);text-transform:uppercase}
.promo-row input:focus{outline:none;border-color:#111}
.promo-btn{padding:10px 18px;background:var(--panel);border:1px solid var(--line);border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;color:var(--txt);white-space:nowrap}
.promo-btn:hover{border-color:#111}
.promo-msg{font-size:12px;font-weight:600;margin-bottom:12px;min-height:16px}
.promo-msg.ok{color:#16a34a}.promo-msg.err{color:#dc2626}
.pay-error{color:#991b1b;font-size:13px;margin-bottom:10px;min-height:16px}
#pay-btn{width:100%}
#biz-fields{display:none;flex-direction:column;gap:8px;margin-bottom:12px}
#biz-fields.show{display:flex}
.biz-input{padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:inherit;background:var(--bg);color:var(--txt)}
.biz-input:focus{outline:none;border-color:#111}
#biz-cui{text-transform:uppercase}
.ck-sec{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:16px}
.ck-sec-t{font-size:15px;font-weight:800;margin:0 0 14px}
@media(max-width:520px){.ck-af{grid-template-columns:1fr}}


/* ---- Header breakpoint ----------------------------------------------------
   The Romanian site switches to the hamburger below 700px. This build adds a
   language switcher to the same row, and several languages spell the nav items
   at twice the length of the Romanian ones — "Straßenverkleidungen",
   "Φέρινγκ δρόμου", "Owiewki drogowe". At 700–940px that combination overflows
   and the labels collide with the search field, so the switch happens earlier
   here. Below 940px: hamburger. Below 1040px: no search box in the header
   (it is still on the products page). */
@media (max-width: 940px) {
  nav.primary { display: none; }
  .ham-btn { display: inline-flex; }
}
@media (max-width: 1040px) {
  header.main .search { display: none; }
}


/* ---- Header: logo size and the JS-driven fit ------------------------------
   The wordmark is wider than the Romanian square mark and is set a little
   larger here, as asked. The nav then has less room, and the Bulgarian
   labels alone run 806px against 692px in English, so a fixed breakpoint is
   always wrong for some language: fitHeader() in app.js measures the real
   widths and sets these classes. The media queries below stay as the
   no-JavaScript floor. */
header.main .logo img { height: 30px; }
.ham-top .logo img { height: 28px; }
@media (max-width: 700px) {
  header.main .logo img { height: 24px; }
}

/* Clasele antetului stau acum in style.css, comun cu site-ul RO. */

/* ---- Scriere de la dreapta la stanga (araba, ebraica) ---------------------
   `dir="rtl"` pe <html> intoarce singur textul, alinierea si ordinea
   elementelor flex si grid. Ce ramane de corectat sunt lucrurile pozitionate
   explicit pe stanga sau pe dreapta, si sagetile, care arata in partea
   gresita cand sensul citirii se inverseaza. */
.mf-rtl .lang-menu            { right: auto; left: 0; }
.mf-rtl .nav-dd-menu          { left: auto; right: 0; }
.mf-rtl .search svg           { left: auto; right: 11px; }
.mf-rtl .search input         { padding: 10px 36px 10px 14px; }
.mf-rtl .product .ribbon      { left: auto; right: 10px; }
.mf-rtl .product .stock       { right: auto; left: 10px; }
.mf-rtl .pdp-lb-close         { right: auto; left: 22px; }
.mf-rtl .wa-float,
.mf-rtl .fab-custom           { right: auto; left: 20px; }
.mf-rtl .info-content ul,
.mf-rtl .info-content ol,
.mf-rtl .legal ul,
.mf-rtl .legal ol             { padding-left: 0; padding-right: 22px; }
.mf-rtl .ham-links a::after   { content: "ƒ9"; }   /* ‹ in loc de › */

/* Sagetile scrise in text ("Vezi toate →") arata invers dupa inversarea
   sensului. Le intoarcem prin transformare, ca sa nu fie nevoie de alt text
   in dictionar. */
.mf-rtl [data-i18n$="_more"],
.mf-rtl .see-all,
.mf-rtl .sec-head .lnk        { unicode-bidi: plaintext; }

@media (max-width: 720px) {
  .mf-rtl .lang-menu          { left: auto; right: 0; }
}