/* fixelli theme for service.fixelli.ro — makes the booking app look like the main site (index.fixelli.ro).
   Loaded after style.css / admin.css. Only colours, type, shapes and the shared header/footer are changed:
   every class and id the app's JavaScript uses is left as it is. Re-applied by theme/apply_theme.py. */

@font-face { font-family: "Jost"; src: url("fonts/jost-latin.woff2") format("woff2"); font-weight: 300 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; src: url("fonts/jost-latin-ext.woff2") format("woff2"); font-weight: 300 800; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --orange: #5c6b3c; --orange-dark: #47532e; --orange-soft: #eef0e6;
  --ink: #232427; --soft: #f4f3ef; --line: #e5e4df; --muted: #5a5c60; --radius: 2px;
  --fx-dark: #26282b; --fx-olive-l: #b9c79a; --fx-hdr: 186px;
}
body { font-family: "Jost", "Helvetica Neue", Arial, sans-serif; font-size: 17px; color: #5a5c60; }
h1, h2, h3, h4, .card h3, .panel h3, .acc-card h3 { color: var(--ink); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ---------- shapes & buttons like the main site ---------- */
.btn { border-radius: 2px; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; font-size: 14px; }
.btn-sm { font-size: 12.5px; }
.btn-dark { background: var(--fx-dark); }
.btn-dark:hover { background: var(--orange); }
.btn-orange:hover { background: var(--orange-dark); }
.btn-outline { border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn[disabled], .btn[disabled]:hover { background: #e6e5df; color: #8a8b87; border-color: #e6e5df; }
.tag { border-radius: 2px; font-weight: 600; letter-spacing: .16em; padding: 5px 10px; }
.input { border-radius: 2px; border-color: var(--line); }
.input:focus { border-color: var(--ink); box-shadow: none; }
.panel, .card, .acc-card, .vchoice, .svc, .day, .slot, .note, .summary-box, .secure, .alert, .code-box, .empty-box, .tot, .code, .booked-by { border-radius: 2px; }
.svc .ic { border-radius: 2px; background: var(--fx-dark); }
.progress i, .steps-mini i { border-radius: 0; height: 4px; }
.hero-card { border-radius: 2px; }

/* ---------- type: uppercase headings like the main site ---------- */
.hero h1, .page h1, .section h2.title, .done h1, .legal h1 { text-transform: uppercase; letter-spacing: .005em; font-weight: 700; line-height: 1; }
.hero h1 { font-size: clamp(42px, 7vw, 82px); line-height: 1.08; } /* room for the comma under Ț/Ș */
.page h1 { font-size: clamp(30px, 4.4vw, 50px); }
.section h2.title { font-size: clamp(28px, 3.4vw, 42px); }
.card h3, .how h4, .panel h3, .acc-card h3, .reschedule h3, .legal h2 { text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
.eyebrow, .field > span, .summary-box small { letter-spacing: .14em; font-weight: 600; }
.vchoice, .svc b, .day b, .slot, .status-pill, .pill { font-weight: 600; }
.hero p.lead, .card p { color: var(--muted); }
.dot, .how .n { background: var(--orange); font-weight: 600; }
.how .n { border-radius: 0; background: none; color: var(--orange); width: auto; height: auto; justify-content: flex-start; font-size: 14px; letter-spacing: .12em; }
.how .n::before { content: "0"; }
.how > div { border-top: 2px solid var(--ink); padding-top: 18px; }

/* hero card: the real workshop instead of the flat illustration */
.hero-card { background: linear-gradient(180deg, rgba(20,22,18,.15), rgba(20,22,18,.82)), url("fx-workshop.jpg") center / cover; min-height: 460px; }
.hero-card .blob, .hero-card .mid > svg { display: none; }
.hero-card .mid { margin-top: auto; }
.hero-card h2 { text-transform: uppercase; font-weight: 700; letter-spacing: .01em; }
.steps3 div { border-radius: 2px; font-weight: 600; letter-spacing: .04em; }
.section.soft, .note, .summary-box { background: var(--soft); }
.card.dark { background: var(--orange); border-color: var(--orange); }
.card.dark .icon { color: #fff; }
.card.dark p { color: rgba(255,255,255,.88); }

/* ---------- shared header (same as index.fixelli.ro) ---------- */
header.fx-header { position: sticky; top: 0; z-index: 50; background: #fff; backdrop-filter: none; border-bottom: 1px solid var(--line); }
.fx-bar { background: var(--fx-dark); color: #fff; }
.fx-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; position: relative; }
.fx-logo { flex: none; display: block; }
.fx-logo img { width: 112px; height: auto; display: block; }
.fx-actions { display: flex; align-items: center; gap: 16px; flex: none; }
.fx-phone { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 500; font-size: 15px; }
.fx-phone:hover { color: var(--fx-olive-l); }
.fx-phone svg { width: 18px; height: 18px; }
.fx-header .burger, .fx-header .fx-burger { display: none; width: 44px; height: 44px; border: 1.5px solid rgba(255,255,255,.25); border-radius: 2px; color: #fff; align-items: center; justify-content: center; background: none; }
.fx-nav { border-top: 0; }
.fx-nav-in { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.fx-nav a { display: block; padding: 15px 15px; font-size: 16px; color: var(--ink); text-decoration: none; position: relative; }
.fx-nav a::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 9px; height: 2px; background: var(--orange); transform: scaleX(0); transition: transform .25s; }
.fx-nav a:hover::after, .fx-nav a.on::after { transform: scaleX(1); }
.fx-sub { background: var(--soft); border-top: 1px solid var(--line); }
.fx-sub-in { display: flex; align-items: center; gap: 6px 22px; min-height: 52px; flex-wrap: wrap; }
.fx-sub-title { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); margin-right: auto; }
.fx-sub a, .fx-sub button.link { font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; background: none; padding: 6px 0; }
.fx-sub a:hover, .fx-sub button.link:hover { color: var(--orange); }
.fx-sub .btn { min-height: 38px; }

/* riding cargo bike (same drawing as the main site) */
.fx-ride { flex: 1; align-self: stretch; position: relative; overflow: hidden; min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.fx-ride::after { content: ""; position: absolute; left: 0; right: 0; bottom: 14px; border-bottom: 1px dashed rgba(255,255,255,.12); }
.fx-lane { position: absolute; inset: 0; animation: fx-ride 22s linear infinite; }
.fx-bike { position: absolute; right: 0; bottom: 12px; width: 112px; height: auto; color: rgba(255,255,255,.72); overflow: visible; }
.fx-bike .b-body { animation: fx-bump .9s ease-in-out infinite; }
.fx-bike .b-box { fill: rgba(185,199,154,.28); stroke: var(--fx-olive-l); }
.fx-bike .b-box-line { stroke: var(--fx-olive-l); opacity: .7; }
.fx-bike .b-wheel { transform-box: fill-box; transform-origin: center; animation: fx-spin .8s linear infinite; }
.fx-bike .b-speed { opacity: .5; animation: fx-speed .9s ease-in-out infinite; }
@keyframes fx-ride { from { transform: translateX(-100%); } to { transform: translateX(112px); } }
@keyframes fx-spin { to { transform: rotate(360deg); } }
@keyframes fx-bump { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.8px); } }
@keyframes fx-speed { 0%, 100% { opacity: .15; transform: translateX(0); } 50% { opacity: .55; transform: translateX(-3px); } }

/* mobile menu */
.fx-header .mobile-menu { display: none; border-top: 1px solid var(--line); background: #fff; padding: 8px 0 18px; max-height: calc(100vh - 70px); overflow-y: auto; }
.fx-header .mobile-menu.open { display: block; }
.fx-header .mobile-menu .wrap { display: flex; flex-direction: column; gap: 0; }
.fx-header .mobile-menu .item, .fx-header .mobile-menu a.item { display: block; text-align: left; padding: 14px 0; border-radius: 0; background: none !important; border-bottom: 1px solid var(--line);
  font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); text-decoration: none; }
.fx-header .mobile-menu .fx-m-label { margin-top: 18px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.fx-header .mobile-menu .btn { margin-top: 16px; }

/* RO / EN switch (as on the main site); the active language comes from html[data-fx-lang] */
.fx-lang { display: inline-flex; border: 1.5px solid rgba(255,255,255,.22); border-radius: 2px; overflow: hidden; flex: none; }
.fx-lang a { padding: 5px 10px; font-size: 13px; font-weight: 600; letter-spacing: .08em; line-height: 1.4; color: rgba(255,255,255,.62); text-decoration: none; }
.fx-lang a:hover { color: #fff; }
html:not([data-fx-lang="en"]) .fx-lang a[data-lang="ro"], html[data-fx-lang="en"] .fx-lang a[data-lang="en"] { background: #fff; color: var(--fx-dark); }
.fx-header .mobile-menu .fx-m-lang { margin-top: 18px; }
.fx-m-lang .fx-lang { border-color: var(--line); }
.fx-m-lang .fx-lang a { padding: 8px 16px; color: var(--muted); }
.fx-m-lang .fx-lang a:hover { color: var(--ink); }
html:not([data-fx-lang="en"]) .fx-m-lang a[data-lang="ro"], html[data-fx-lang="en"] .fx-m-lang a[data-lang="en"] { background: var(--fx-dark); color: #fff; }
@media (max-width: 960px) {
  .fx-top { height: 68px; }
  .fx-nav, .fx-sub, .fx-ride, .fx-phone span { display: none; }
  .fx-header .burger, .fx-header .fx-burger { display: inline-flex; }
}
@media (min-width: 961px) { .fx-header .mobile-menu { display: none !important; } }
@media (max-width: 520px) {
  .fx-top { gap: 10px; }
  .fx-logo img { width: 90px; }
  .fx-actions { gap: 8px; }
  .fx-actions .btn-sm { min-height: 40px; padding: 0 12px; font-size: 11.5px; letter-spacing: .06em; }
  .fx-header .burger, .fx-header .fx-burger { width: 40px; height: 40px; }
  .fx-actions .fx-lang { display: none; }  /* in the menu instead */
}
@media (max-width: 360px) { .fx-phone { display: none; } }

/* ---------- shared footer ---------- */
footer.fx-footer { background: var(--fx-dark); color: rgba(255,255,255,.72); padding: 70px 0 26px; font-size: 15px; margin-top: auto; }
.fx-footer .fx-ftr { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.fx-footer img { width: 112px; height: auto; margin-bottom: 18px; display: block; }
.fx-footer h4 { color: #fff; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; font-weight: 700; }
.fx-footer p { margin: 0 0 1em; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.72); }
.fx-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.fx-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.fx-footer a:hover { color: #fff; }
.fx-footer .fx-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 50px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: rgba(255,255,255,.5); }
@media (max-width: 960px) { .fx-footer .fx-ftr { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .fx-footer .fx-ftr { grid-template-columns: 1fr; } }

/* ---------- workshop panel (admin): same header colours, app layout unchanged ---------- */
body.adm header { background: var(--fx-dark); border-bottom: 0; backdrop-filter: none; }
body.adm header .bar .logo { width: 112px; height: 50px; background: url("fixelli-logo-light.webp") left center / 112px auto no-repeat; }
body.adm header .bar .logo > * { display: none; }
body.adm header .who, body.adm header #who { color: #fff; }
body.adm header .who .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
body.adm header .who .btn-outline:hover { background: #fff; color: var(--ink); }
body.adm header .who .fx-lang { margin-right: 4px; }
@media (max-width: 520px) {   /* phone: logo + RO/EN + sign-out must fit in one row */
  body.adm header .bar .logo { width: 84px; background-size: 84px auto; flex: none; }
  body.adm header #who { display: none; }
  body.adm header .who { gap: 8px; }
}
body.adm header .tabs { background: #fff; border-bottom: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
  .fx-lane, .fx-bike .b-wheel, .fx-bike .b-body, .fx-bike .b-speed { animation: none !important; }
  .fx-lane { transform: translateX(-35%); }
}