/* ===== oFinaczej – strona rezerwacji spotkań (moduł Appointment) w stylu strony głównej.
   Ładowane w <head> całej witryny Ofinaczej, ale każda reguła jest zawężona do stron spotkań. ===== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

.o_wappointment_wrap,.o_wappointment_wrap .btn,.o_wappointment_wrap .form-control,.o_wappointment_wrap .form-select,
.o_wappointment_wrap h1,.o_wappointment_wrap h2,.o_wappointment_wrap h3,.o_wappointment_wrap h4,.o_wappointment_wrap h5,.o_wappointment_wrap h6,
.ofs-hero{font-family:"Montserrat","Segoe UI",Arial,sans-serif}
.o_wappointment_wrap{
  --ofs-navy:#2C3347;--ofs-bordo:#8E2B5B;--ofs-rose:#C98BAA;--ofs-blush:#EED9E1;--ofs-mist:#F8F7F9;--ofs-line:#ebe4e8;
  --ofs-grad-accent:linear-gradient(135deg,#8E2B5B 0%,#C98BAA 100%);
  --bs-primary:#8E2B5B;--bs-primary-rgb:142,43,91;--bs-link-color:#8E2B5B;--bs-link-color-rgb:142,43,91;--bs-link-hover-color:#6f2047;
  background:var(--ofs-mist);color:var(--ofs-navy)}
.o_wappointment_wrap .text-primary{color:var(--ofs-bordo)!important}

/* nagłówek Odoo na stronach spotkań: biel → jasny róż, płynnie w hero (jak na stronie głównej) */
body:has(.ofs-hero) header#top,body:has(.ofs-hero) header#top .navbar{background:linear-gradient(180deg,#fff 0%,#f4ecf1 100%)!important;box-shadow:none!important;border-bottom:0!important}

/* ---------- hero ---------- */
.ofs-hero{position:relative;overflow:hidden;isolation:isolate;color:#fff;
  background:
    radial-gradient(700px 520px at 78% 48%,rgba(142,43,91,.55),transparent 62%),
    radial-gradient(420px 320px at 92% 12%,rgba(201,139,170,.28),transparent 70%),
    radial-gradient(520px 420px at 8% 95%,rgba(90,44,81,.55),transparent 70%),
    linear-gradient(160deg,#10162a 0%,#1a2034 45%,#2a1d33 100%)}
.ofs-hero .ofs-mgla{position:absolute;left:0;right:0;top:0;height:110px;pointer-events:none;
  background:linear-gradient(180deg,#f4ecf1 0%,rgba(244,236,241,.6) 22%,rgba(244,236,241,.2) 55%,rgba(244,236,241,0) 100%)}
.ofs-hero .ofs-in{position:relative;max-width:1140px;margin:0 auto;padding:110px 20px 64px}
.ofs-hero .ofs-eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.16em;font-weight:700;color:#f3c6db}
.ofs-hero h2{color:#fff;font-size:clamp(32px,4.6vw,56px);font-weight:800;line-height:1.05;margin:14px 0 0;letter-spacing:-.02em;text-shadow:0 10px 40px rgba(0,0,0,.35)}
.ofs-hero h2 em{font-style:normal;background:linear-gradient(90deg,#f7d3e3 0%,#e2a9c3 45%,#C98BAA 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ofs-hero .ofs-lead{font-size:17px;color:rgba(255,255,255,.82);margin:18px 0 26px;max-width:620px}
.ofs-hero .ofs-chips{display:flex;flex-wrap:wrap;gap:10px}
.ofs-hero .ofs-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;font-size:14px;font-weight:600;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px);color:#fff}
.ofs-hero .ofs-chip b{color:#f3c6db}
.ofs-hero .ofs-kroki{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px;max-width:860px}
.ofs-hero .ofs-krok{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.ofs-hero .ofs-nr{flex:0 0 36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:linear-gradient(135deg,#8E2B5B 0%,#C98BAA 100%);box-shadow:0 8px 20px rgba(142,43,91,.35)}
.ofs-hero .ofs-krok span{font-size:14px;line-height:1.3;color:rgba(255,255,255,.88)}
@media (max-width:767px){
  .ofs-hero .ofs-in{padding:84px 16px 44px}
  .ofs-hero .ofs-kroki{grid-template-columns:1fr}
}

/* ---------- karta z kalendarzem i panel boczny ---------- */
/* karta nachodzi na hero tylko na stronie wyboru terminu; formularz danych i potwierdzenie nie mają hero,
   więc dostają zwykły odstęp od nagłówka */
.o_wappointment_wrap:has(.ofs-hero)>.container-lg>.row{margin-top:-28px!important;position:relative;z-index:2}
.o_wappointment_wrap:not(:has(.ofs-hero)){padding-top:24px}
.o_wappointment_wrap .o_appointment_info,.o_wappointment_wrap .o_appointment_details_column_inner{
  background:#fff;border:1px solid var(--ofs-line);border-radius:22px;padding:26px;box-shadow:0 22px 50px rgba(44,51,71,.10)}
.o_wappointment_wrap .o_appointment_details_column_inner{position:sticky;top:110px}
.o_wappointment_wrap .o_appointment_info h1{font-weight:800;color:var(--ofs-navy)}
.o_wappointment_wrap .o_appointment_intro{font-size:15px;line-height:1.55}
.o_wappointment_wrap .o_appointment_intro a{color:var(--ofs-bordo);font-weight:700;text-decoration:none}

/* dni i godziny */
.o_wappointment_wrap .o_slot_day{border-radius:12px!important;font-weight:700;color:var(--ofs-navy);background:var(--ofs-blush);border-color:transparent!important;transition:transform .12s,box-shadow .12s}
.o_wappointment_wrap .o_slot_day:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(142,43,91,.18)}
.o_wappointment_wrap .o_slot_day.active,.o_wappointment_wrap .o_slot_hours.active{background:var(--ofs-grad-accent)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 10px 22px rgba(142,43,91,.30)}
.o_wappointment_wrap .o_slot_hours{border-radius:12px!important;font-weight:600;border:1.5px solid #d9d0d6!important;color:var(--ofs-navy)}
.o_wappointment_wrap .o_slot_hours:hover{border-color:var(--ofs-rose)!important;color:var(--ofs-bordo)}
.o_wappointment_wrap .o_today{color:var(--ofs-bordo)}

/* przyciski */
.o_wappointment_wrap .btn-primary,.o_wappointment_wrap .btn-primary:focus{
  background:var(--ofs-grad-accent)!important;border:0!important;color:#fff!important;border-radius:14px;font-weight:700;padding:.75rem 1.5rem;
  box-shadow:0 12px 26px rgba(142,43,91,.28);transition:transform .15s,box-shadow .15s}
.o_wappointment_wrap .btn-primary:hover{transform:translateY(-1px);box-shadow:0 16px 30px rgba(142,43,91,.34)}
.o_wappointment_wrap .btn-outline-primary{color:var(--ofs-bordo);border-color:var(--ofs-bordo);border-radius:14px}
.o_wappointment_wrap .btn-outline-primary:hover{background:var(--ofs-bordo);color:#fff}
.o_wappointment_wrap .form-control,.o_wappointment_wrap .form-select{border-radius:12px;border-color:#d9d0d6}
.o_wappointment_wrap .form-control:focus,.o_wappointment_wrap .form-select:focus{border-color:var(--ofs-rose);box-shadow:0 0 0 .2rem rgba(201,139,170,.25)}
.o_wappointment_wrap a:not(.btn){color:var(--ofs-bordo)}

/* brak polskiego tłumaczenia w Odoo 20: „Pick a Time” (szablon JS) → „Wybierz godzinę” */
.o_wappointment_wrap .h6:has(+ .o_slots_list){font-size:0}
.o_wappointment_wrap .h6:has(+ .o_slots_list)::before{content:"Wybierz godzinę";font-size:1rem}