/* Az admin felület közös kinézete — oldalsávos, nyugodt, megbízható (Minup-szintű). A JS által használt osztály/id-nevek NEM változnak; csak a megjelenés újult. A ".van-oldalsav" osztályt a fejlecEpites teszi a -ra, ha van oldalsáv (a belépő oldalon nincs — az marad középre igazított kártya). */ :root { --fo-szin: #2563eb; --fo-sotet: #1d4ed8; --fo-halvany: #eef4ff; --fo-halvany-2: #dce8ff; --tinta: #101828; --tinta-lagy: #475467; --halvany: #667085; --lap: #ffffff; --hatter: #f6f7f9; --keret: #e6e8ec; --keret-eros: #d5d9e0; --oldalsav-sz: 252px; --sugar: 12px; --sugar-kicsi: 9px; --sugar-nagy: 16px; --arnyek-1: 0 1px 2px rgba(16,24,40,.06); --arnyek-2: 0 1px 3px rgba(16,24,40,.08), 0 8px 24px -16px rgba(16,24,40,.22); --gyors: 150ms cubic-bezier(.2,.7,.3,1); /* Szemantikus z-index skála */ --z-oldalsav: 20; --z-lebego: 40; --z-fedo: 50; } * { box-sizing: border-box; } body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; margin: 0; background: var(--hatter); color: var(--tinta); line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--fo-szin); } /* ---------- Alap konténer (belépő oldalhoz is) ---------- */ .doboz { max-width: 1100px; margin: 0 auto; padding: 16px; } .doboz.keskeny { max-width: 420px; margin: 56px auto; background: var(--lap); border: 1px solid var(--keret); border-radius: var(--sugar-nagy); padding: 28px; box-shadow: var(--arnyek-2); } h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 18px; color: var(--tinta); text-wrap: balance; } h2 { font-size: 14px; font-weight: 700; margin: 22px 0 8px; color: var(--tinta-lagy); } /* ================= OLDALSÁVOS ELRENDEZÉS (RÉGI, kék oldalsáv) ================= */ .van-oldalsav .doboz { max-width: 1200px; margin: 0; padding: 30px 40px 56px; margin-left: var(--oldalsav-sz); } @media (max-width: 1280px) { .van-oldalsav .doboz { padding: 26px 28px 48px; } } /* ================= ÚJ VÁZHOZ IGAZÍTÁS (TERV-5 F0, 2. fele) ================= Amíg oldalanként áll át a rendszer, a body VAGY 'van-oldalsav' (fenti, régi kék oldalsáv), VAGY 'f-vaz' (fresha.css, fekete ikonsáv) osztályt kap — a kettő nem ugyanaz az elrendezés. A body.f-vaz már padding-left-tel foglalja a helyet az ikonsávnak (lásd fresha.css), ezért itt a .doboz-nak NEM kell margin-left — csak a régi szélesség/térköz marad, hogy a tartalom (kártyák, táblázatok, űrlapok) ugyanúgy nézzen ki, mint eddig. A :where() szándékosan 0 specificitású, hogy az oldalankénti egyedi ".doboz { max-width: … }" felülírások (pl. uj-foglalas.html) továbbra is érvényesüljenek. */ :where(body.f-vaz) .doboz { max-width: 1200px; margin: 0; padding: 30px 40px 56px; } @media (max-width: 1280px) { :where(body.f-vaz) .doboz { padding: 26px 28px 48px; } } /* Az oldalsáv maga (#fejlec.fejlec) — fixen a bal szélen, teljes magasságban */ .van-oldalsav .fejlec { position: fixed; top: 0; left: 0; bottom: 0; width: var(--oldalsav-sz); background: var(--lap); border-right: 1px solid var(--keret); display: flex; flex-direction: column; padding: 18px 14px; gap: 6px; z-index: var(--z-oldalsav); overflow-y: auto; } /* Logó / márkafej az oldalsáv tetején */ .oldalsav-fejlec { display: flex; align-items: center; gap: 9px; padding: 6px 10px 12px; } .logo { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 19px; color: var(--fo-szin); } .logo-pont { width: 22px; height: 22px; border-radius: 50%; border: 4px solid var(--fo-szin); flex: none; } /* Aktuális üzlet doboza (kontextus) */ .uzlet-doboz { margin: 0 4px 8px; padding: 10px 12px; background: var(--hatter); border: 1px solid var(--keret); border-radius: var(--sugar-kicsi); } .uzlet-doboz .cimke { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--halvany); } .uzlet-doboz .nev-sor { font-weight: 700; font-size: 14px; margin-top: 2px; color: var(--tinta); } #uzlet-valaszto { width: 100%; margin: 6px 0 0; padding: 8px 10px; font-size: 14px; border: 1px solid var(--keret-eros); border-radius: var(--sugar-kicsi); background: var(--lap); } /* Menü — függőleges, ikonos */ .menu { display: flex; flex-direction: column; gap: 3px; } .menu a { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--tinta-lagy); padding: 10px 12px; border-radius: var(--sugar-kicsi); font-size: 15px; font-weight: 600; transition: background var(--gyors), color var(--gyors); } .menu a svg { width: 18px; height: 18px; flex: none; color: var(--halvany); transition: color var(--gyors); } .menu a:hover { background: var(--hatter); color: var(--tinta); } .menu a:hover svg { color: var(--tinta-lagy); } .menu a:focus-visible { outline: 2px solid var(--fo-szin); outline-offset: 2px; } .menu a.aktiv-menu { background: var(--fo-halvany); color: var(--fo-sotet); } .menu a.aktiv-menu svg { color: var(--fo-szin); } /* Oldalsáv alsó rész: felhasználó + kilépés, a menü alá tolva */ .oldalsav-lab { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--keret); display: flex; flex-direction: column; gap: 10px; } .felhasznalo { display: flex; align-items: center; gap: 10px; padding: 4px 6px; } .avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--fo-halvany); color: var(--fo-sotet); font-weight: 800; font-size: 14px; } .felhasznalo .nev { font-weight: 700; font-size: 14px; color: var(--tinta); line-height: 1.2; } .fejlec-jobb { display: contents; } /* a régi struktúra ne bontsa el az elrendezést */ .mellek { font-size: 13px; color: var(--halvany); } /* ---------- Fejléc a régi (nem oldalsávos) esetre — tartalék ---------- */ .fejlec:not(.van-oldalsav .fejlec) { } /* ---------- Űrlap-elemek ---------- */ label { font-size: 14px; font-weight: 600; color: var(--tinta-lagy); display: block; } input[type=text], input[type=email], input[type=tel], input[type=password], input[type=date], input[type=time], input[type=number], select { width: 100%; padding: 11px 12px; border: 1.5px solid var(--keret-eros); border-radius: var(--sugar-kicsi); font-size: 15px; font-family: inherit; margin: 6px 0 14px; background: var(--lap); color: var(--tinta); transition: border-color var(--gyors), box-shadow var(--gyors); } input:focus, select:focus { outline: none; border-color: var(--fo-szin); box-shadow: 0 0 0 3px var(--fo-halvany-2); } /* A helyőrző-szöveg is olvasható kontrasztú (a böngésző alapértéke túl halvány). */ input::placeholder { color: var(--halvany); opacity: 1; } .van-oldalsav .fejlec-jobb select, .uzlet-doboz select { width: 100%; } /* ---------- Gombok ---------- */ .gomb { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--fo-szin); color: #fff; border: 1.5px solid var(--fo-szin); border-radius: var(--sugar-kicsi); padding: 9px 15px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; transition: filter var(--gyors), transform var(--gyors), background var(--gyors), box-shadow var(--gyors); box-shadow: var(--arnyek-1); } .gomb:hover { filter: brightness(1.05); transform: translateY(-1px); } /* F07-08: a régi outline a fő szín 14%-os halványítása volt (#dce8ff) — 1.23:1 fehéren, a WCAG 2.4.11 minimuma 3:1. A telített árnyalat 6.70:1. */ .gomb:focus-visible { outline: 3px solid var(--fo-sotet); outline-offset: 2px; } .gomb:active { transform: none; } .gomb:disabled { opacity: .5; cursor: default; transform: none; filter: none; box-shadow: none; } /* Másodlagos (halvány) gomb: szürke keret, fehér */ .gomb-szurke { background: var(--lap); color: var(--tinta-lagy); border-color: var(--keret-eros); box-shadow: none; } .gomb-szurke:hover { background: var(--hatter); color: var(--tinta); filter: none; } .gomb-piros { background: #d92d20; border-color: #d92d20; } .gomb-piros:hover { background: #b42318; filter: none; } .kuldes { width: 100%; padding: 13px; font-size: 16px; border-radius: var(--sugar); } /* Csak képernyőolvasónak: nincs látható felülete, de a kisegítő fában ott van. (A [hidden] / display:none a képernyőolvasó elől IS elrejtene.) */ .csak-olvasonak { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Link kinézetű, de valódi GOMB (F07-15): művelethez href="#" helyett ez jár. */ .szoveg-gomb { background: none; border: 0; padding: 0; font: inherit; color: var(--fo-szin); text-decoration: underline; cursor: pointer; } .szoveg-gomb:hover { color: var(--fo-sotet); } .szoveg-gomb:focus-visible { outline: 3px solid var(--fo-sotet); outline-offset: 2px; border-radius: 3px; } .szoveg-gomb:disabled { opacity: .5; cursor: default; } /* ---------- Táblázat (foglalás-lista, beállítások) ---------- F07-12: a széles táblázatok (10 oszlopos fizetési lista) mobilon az EGÉSZ oldalt megtolták oldalra. A burkoló (admin.js tablaBurkolo) korlátozza a görgetést a táblázatra — ugyanaz a minta, mint a .f-muszak-tabla-wrap. */ .tabla-gorgeto { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; } .tabla-gorgeto:focus-visible { outline: 3px solid var(--fo-sotet); outline-offset: 2px; border-radius: var(--sugar); } .tabla { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--lap); border: 1px solid var(--keret); border-radius: var(--sugar); overflow: hidden; box-shadow: var(--arnyek-1); } .tabla th, .tabla td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--keret); font-size: 14px; } .tabla th { color: var(--halvany); font-weight: 700; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; background: var(--hatter); } .tabla tr:last-child td { border-bottom: 0; } .tabla tbody tr:hover td, .tabla tr:hover td { background: #fbfcfe; } /* Lemondott sor: halványabb, de olvasható (WCAG AA). Az állapotot a "lemondva" jelvény hordozza — nem csak a szín, így színvakoknak is egyértelmű. */ .tabla tr.lemondva td { color: var(--halvany); } .tabla tr.lemondva td:nth-child(2) { text-decoration: line-through; text-decoration-color: var(--keret-eros); } .cimke { font-size: 12px; font-weight: 600; background: #f2f4f7; color: var(--tinta-lagy); border-radius: 999px; padding: 3px 10px; } /* ---------- Napi rács (naptárnézet) ---------- */ .racs-nezet { display: flex; gap: 10px; overflow-x: auto; align-items: stretch; background: var(--lap); border: 1px solid var(--keret); border-radius: var(--sugar); padding: 12px; box-shadow: var(--arnyek-1); } .ora-skala { flex: 0 0 46px; position: relative; } .ora-skala div { position: absolute; right: 8px; font-size: 12px; color: var(--halvany); transform: translateY(-50%); font-variant-numeric: tabular-nums; } .oszlop { flex: 1 1 168px; min-width: 168px; position: relative; background: var(--hatter); border: 1px solid var(--keret); border-radius: var(--sugar-kicsi); } /* FIGYELEM: a height itt és a naptar.js fejlecMagas konstansa EGYEZZEN (56px), különben az óra-skála elcsúszik az oszlopokhoz képest. */ .oszlop-fejlec { display: flex; align-items: center; gap: 8px; text-align: left; font-size: 14px; font-weight: 700; height: 56px; padding: 0 10px; background: var(--lap); border-bottom: 1px solid var(--keret); border-radius: var(--sugar-kicsi) var(--sugar-kicsi) 0 0; color: var(--tinta); } .oszlop-fejlec .mellek { font-weight: 500; } .oszlop-fejlec.kikapcsolt { opacity: .55; } /* Oszlop-fejléc monogram-köre (A1) — az admin.js 189. sorának mintájára, de saját osztállyal */ .oszlop-avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--fo-halvany); color: var(--fo-sotet); font-weight: 800; font-size: 11px; } .oszlop-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .oszlop-nev { font-weight: 700; font-size: 13px; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oszlop-info .mellek { font-size: 11px; } .oszlop-test { position: relative; } .nyitva-sav { position: absolute; left: 0; right: 0; background: var(--lap); } .zarva-felirat { position: absolute; top: 40%; width: 100%; text-align: center; color: var(--halvany); font-size: 14px; } /* Foglalás-kártya (A2): pasztell színkódolás a megnevezés hash-e alapján — halvány háttér + hozzá illő sötét szöveg + 3px erősebb bal szegély. */ .foglalas-blokk { position: absolute; left: 5px; right: 5px; border-radius: 7px; padding: 5px 8px 6px; font-size: 12px; line-height: 1.3; overflow: hidden; cursor: pointer; box-shadow: var(--arnyek-1); transition: filter var(--gyors), transform var(--gyors); } .foglalas-blokk:hover { filter: brightness(1.03); transform: translateY(-1px); } .blokk-idosav { font-weight: 700; font-size: 11px; font-variant-numeric: tabular-nums; } .blokk-vendeg { font-weight: 700; font-size: 12px; } .blokk-telefon { font-size: 11px; opacity: .85; font-variant-numeric: tabular-nums; } .blokk-szolg { font-size: 11px; opacity: .75; margin-top: 1px; } .pasztell-1 { background: #e6f7ec; color: #146c43; border-left: 3px solid #34a869; } .pasztell-2 { background: #e8f1fe; color: #1d4ed8; border-left: 3px solid #3b82f6; } .pasztell-3 { background: #f3ecfe; color: #6d28d9; border-left: 3px solid #8b5cf6; } .pasztell-4 { background: #fef8e2; color: #92400e; border-left: 3px solid #eab308; } .pasztell-5 { background: #fdeef3; color: #be185d; border-left: 3px solid #ec4899; } .pasztell-6 { background: #e3faf8; color: #0f766e; border-left: 3px solid #14b8a6; } /* ---------- Mini hónap-naptár az oldalsávban (A4) ---------- */ .mini-naptar { margin: 2px 4px 10px; padding: 10px 8px; background: var(--hatter); border: 1px solid var(--keret); border-radius: var(--sugar-kicsi); } .mini-naptar-fejlec { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 8px; } .mini-naptar-cim { font-size: 12px; font-weight: 700; color: var(--tinta); text-transform: capitalize; } /* F07-14: 22px érintési cél — a WCAG 2.2 „Target Size (Minimum)" 24×24-et vár. */ .mini-naptar-nyil { width: 26px; height: 26px; flex: none; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--keret-eros); background: var(--lap); color: var(--tinta-lagy); border-radius: 6px; cursor: pointer; transition: border-color var(--gyors), background var(--gyors), color var(--gyors); } .mini-naptar-nyil:hover { border-color: var(--fo-szin); background: var(--fo-halvany); color: var(--fo-szin); } .mini-naptar-nyil svg { width: 12px; height: 12px; } .mini-naptar-hetfejlec, .mini-naptar-racs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .mini-naptar-hetfejlec { margin-bottom: 4px; } /* F07-14: 9px volt a rendszer legkisebb szövege — 11px-re nőtt (a rács bírja). */ .mini-naptar-hetfejlec span { text-align: center; font-size: 11px; font-weight: 700; color: var(--halvany); text-transform: uppercase; } .mini-nap { aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center; position: relative; border: 0; background: transparent; border-radius: 6px; font-family: inherit; font-size: 11px; font-weight: 600; color: var(--tinta); cursor: pointer; font-variant-numeric: tabular-nums; transition: background var(--gyors), color var(--gyors); } .mini-nap:hover:not(.aktiv) { background: var(--fo-halvany-2); } .mini-nap.ma:not(.aktiv) { color: var(--fo-szin); font-weight: 800; } .mini-nap.aktiv { background: var(--fo-szin); color: #fff; } @media (max-width: 860px) { .mini-naptar { display: none; } } /* Az új f-vaz keretben nincs széles oldalsáv — a mini-naptár a tartalom tetejére kerül, ott csak korlátozott szélességgel fér el (F2-ben költözik végleges helyére, a Fresha-naptár eszközsorába). */ :where(body.f-vaz) .mini-naptar { max-width: 280px; margin: 0 0 12px; background: #fff; } /* ---------- Nap-lapozó (naptár oldal saját stílusa kiegészítve) ---------- */ .nap-lapozo { align-items: center; } /* ---------- Üzenetsávok + megerősítő doboz ---------- */ .uzenet { padding: 13px 16px; border-radius: var(--sugar-kicsi); margin-top: 14px; font-size: 15px; border: 1px solid transparent; } .siker { background: #ecfdf3; color: #05603a; border-color: #a6f4c5; } .hiba { background: #fef3f2; color: #b42318; border-color: #fecaca; } .figyelem { background: #fffaeb; color: #b54708; border-color: #fedf89; } .megerosites { background: #fffaeb; border: 1px solid #fedf89; border-radius: var(--sugar-kicsi); padding: 14px 16px; margin-top: 12px; color: #93370d; } .megerosites ul { margin: 8px 0; padding-left: 20px; font-size: 14px; } /* ---------- Kapcsolat-sáv (F07-06) ---------- Az admin.js api()-ja rakja ki, ha a szerver nem érhető el vagy értelmezhetetlen választ ad. Azért az oldal TETEJÉN, fixen, hogy akkor is látszódjon, ha a hívó oldalon nincs saját hibaág (spinner-ragadás, néma betöltés). */ .kapcsolat-sav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-fedo); display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 11px 16px; background: #b42318; color: #fff; font-size: 14px; font-weight: 600; box-shadow: var(--arnyek-2); } .kapcsolat-sav-gomb { background: #fff; color: #b42318; border: 0; border-radius: var(--sugar-kicsi); padding: 6px 14px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .kapcsolat-sav-gomb:hover { background: #fee4e2; } /* ================= MOBIL: az oldalsáv felülre kerül ================= */ @media (max-width: 860px) { .van-oldalsav .fejlec { position: static; width: auto; height: auto; flex-direction: column; border-right: 0; border-bottom: 1px solid var(--keret); padding: 12px; } .van-oldalsav .doboz { margin-left: 0; padding: 18px 16px 40px; } .oldalsav-fejlec { padding: 2px 6px 8px; } .menu { flex-direction: row; flex-wrap: wrap; } .menu a { padding: 8px 12px; } .oldalsav-lab { flex-direction: row; align-items: center; justify-content: space-between; border-top: 0; padding-top: 8px; margin-top: 8px; } } @media (prefers-reduced-motion: reduce) { .gomb, .foglalas-blokk, .menu a, input, select { transition: none; } .gomb:hover, .foglalas-blokk:hover { transform: none; } /* F07-17: a betöltés-pörgő végtelen animációja mozgásérzékenységnél zavaró — helyette lassú halványulás jelzi, hogy dolgozunk. */ .porgo { animation: porgo-halvanyul 1.4s ease-in-out infinite; } } @keyframes porgo-halvanyul { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } /* ---------- Nagy kontrasztú (forced-colors) mód ---------- F07-08: Windows nagy kontrasztú módban a böngésző lecseréli a színeket, és a saját outline-színünk eltűnhet. A rendszer saját kiemelőszínét kérjük. */ @media (forced-colors: active) { .gomb:focus-visible, .szoveg-gomb:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; } } /* ================= ÚJ KÖZÖS ELEMEK (tartalmi csiszolás) ================= */ /* Ezeket az admin oldalak közösen használják: betöltés-jelző, üres állapot, modális ablak, állapot-jelvények, kisebb sor-gomb. Az osztálynevek stabilak. */ /* ---------- Állapot-jelvények (aktív / lemondva / kikapcsolva) ---------- */ .jelveny { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px 3px 8px; line-height: 1.5; white-space: nowrap; } .jelveny::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .jelveny.zold { background: #ecfdf3; color: #067647; } .jelveny.szurke { background: #f2f4f7; color: var(--halvany); } .jelveny.piros { background: #fef3f2; color: #b42318; } /* ---------- Kisebb sor-gomb (táblázatok műveleteihez) ---------- */ .gomb-kicsi { padding: 6px 12px; font-size: 13px; } /* ---------- Betöltés-jelző (pörgő + felirat) ---------- */ .betolt { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 44px 20px; color: var(--halvany); font-size: 14px; } .porgo { width: 20px; height: 20px; border: 2.5px solid var(--keret-eros); border-top-color: var(--fo-szin); border-radius: 50%; animation: porgo-forog .7s linear infinite; flex: none; } @keyframes porgo-forog { to { transform: rotate(360deg); } } /* ---------- Üres állapot (nincs még adat) ---------- */ .ures { text-align: center; padding: 40px 24px; color: var(--tinta-lagy); background: var(--lap); border: 1px dashed var(--keret-eros); border-radius: var(--sugar); } .ures .ikon { width: 42px; height: 42px; margin: 0 auto 12px; color: var(--halvany); } .ures .ikon svg { width: 100%; height: 100%; } .ures .cim { font-weight: 700; font-size: 15px; color: var(--tinta); margin-bottom: 4px; } .ures p { margin: 0 auto; max-width: 360px; font-size: 14px; line-height: 1.5; } /* ---------- Modális ablak (fátyol + középre igazított doboz) ---------- */ .fatyol { position: fixed; inset: 0; background: rgba(16,24,40,.45); z-index: var(--z-fedo); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; animation: fatyol-be var(--gyors) forwards; } @keyframes fatyol-be { to { opacity: 1; } } .modal { background: var(--lap); border: 1px solid var(--keret); border-radius: var(--sugar-nagy); box-shadow: var(--arnyek-2); padding: 22px 24px; width: 100%; max-width: 400px; transform: translateY(8px) scale(.985); animation: modal-be var(--gyors) forwards; } @keyframes modal-be { to { transform: none; } } .modal h2 { margin: 0 0 12px; font-size: 18px; color: var(--tinta); } .modal p { margin: 6px 0; font-size: 14px; color: var(--tinta-lagy); } .modal .gombsor { display: flex; gap: 8px; margin-top: 18px; justify-content: flex-end; } @media (prefers-reduced-motion: reduce) { .fatyol, .modal { animation: none; opacity: 1; transform: none; } }