/* Načítaj Inter Tight z Google Fonts (rovnaký font ako materský web www.dibeauty.sk). Bez tohto @import prehliadač v rezervačnej app padal na fallback Georgia/serif, lebo Inter Tight nie je nainštalovaný ako systémový font. */ @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&display=swap'); /* ============================================================= DiBeauTy – Rezervačný systém Súbor: dibeauty-rezervacie.css Umiestnenie: https://www.dibeauty.sk/assets/dibeauty-rezervacie.css Tento súbor je SAMOSTATNÉ CSS pre rezervačný systém. Neupravuje ani neprepisuje dibeauty-style-cleaned.css. Načítaj ho v rezervačnej stránky za pôvodným CSS: SEKCIE: 1. Premenné (farby, fonty, rozmery) 2. Reset & základné štýly 3. Typografia 4. Tlačidlá 5. Formulárové polia 6. Dlaždice procedúr 7. Spodná lišta (Sticky bar) 8. Kalendár – výber termínu 9. Popup / Modal 10. Stavové hlášky (úspech, chyba, info) 11. Krok-indikátor (Step indicator) 12. Načítavanie (Skeleton / Spinner) 13. Responzívnosť (Mobile) ============================================================= */ /* ───────────────────────────────────────────────────────────── 1. PREMENNÉ Zmeň hodnoty tu a zmena sa prejaví všade v aplikácii. ───────────────────────────────────────────────────────────── */ :root { /* Farby – prevzaté z dibeauty-style-cleaned.css */ --rez-primary: #1f6447; /* hlavná zelená – tlačidlá, aktívne prvky */ --rez-primary-hover: #427e4a; /* zelená pri hoveri */ --rez-primary-light: rgba(31, 100, 71, 0.08); /* jemné zelené pozadie aktívnej dlaždice */ --rez-primary-focus: rgba(31, 100, 71, 0.25); /* focus ring */ --rez-text: #191c1f; /* hlavný text */ --rez-text-muted: #464845; /* sekundárny text, popisky */ --rez-text-faint: #868686; /* pomocný text, placeholder */ --rez-text-inverse: #ffffff; /* biely text na tmavom pozadí */ --rez-bg: #fafafa; /* pozadie celej aplikácie */ --rez-surface: #f7f7f7; /* pozadie dlaždíc, kariet */ --rez-surface-hover: #f0f0f0; /* pozadie karty pri hoveri */ --rez-border: #d6d6d6; /* orámovanie prvkov */ --rez-divider: #e5e5e5; /* oddeľovač sekcií */ --rez-error: #dc3545; /* chyba / validácia */ --rez-error-light: rgba(220, 53, 69, 0.08); --rez-success: #198754; /* úspech / potvrdenie */ --rez-success-light: rgba(25, 135, 84, 0.08); --rez-warning: #ffc107; /* upozornenie */ --rez-warning-light: rgba(255, 193, 7, 0.12); /* Pozadie – textúra z hlavného webu (dočasne vypnutá: obrázok je príliš tmavý a zhoršuje čitateľnosť textu; nahradiť svetlejšou variantou alebo pattern-om) */ --rez-bg-texture: none; /* Fonty – rovnaké ako na hlavnom webe */ /* Pôvodne bol display font OrnamentalBud (serif) — nadpisy tak pôsobili nekonzistentne s telom textu. Zjednotené na Inter Tight pre celú appku. */ --rez-font-display: "Inter Tight", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --rez-font-body: "Inter Tight", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; /* Veľkosti textu – zodpovedajú Bootstrap veľkostiam pôvodného CSS */ --rez-text-xs: 0.875rem; /* 14px – drobné popisky */ --rez-text-sm: 1rem; /* 16px – tlačidlá, labely */ --rez-text-base: 1rem; /* 16px – telo textu */ --rez-text-lg: 1.25rem; /* 20px – podnadpisy */ --rez-text-h6: 1rem; /* h6 z pôvodného CSS */ --rez-text-h5: 1.25rem; /* h5 z pôvodného CSS */ --rez-text-h4: calc(1.275rem + 0.3vw); /* h4 z pôvodného CSS */ --rez-text-h3: calc(1.3rem + 0.6vw); /* h3 z pôvodného CSS */ --rez-text-h2: calc(1.325rem + 0.9vw); /* h2 z pôvodného CSS */ --rez-text-h1: calc(1.375rem + 1.5vw); /* h1 z pôvodného CSS */ /* Medzery */ --rez-space-1: 0.25rem; /* 4px */ --rez-space-2: 0.5rem; /* 8px */ --rez-space-3: 0.75rem; /* 12px */ --rez-space-4: 1rem; /* 16px */ --rez-space-5: 1.25rem; /* 20px */ --rez-space-6: 1.5rem; /* 24px */ --rez-space-8: 2rem; /* 32px */ --rez-space-10: 2.5rem; /* 40px */ --rez-space-12: 3rem; /* 48px */ /* Zaoblenie rohov */ --rez-radius-sm: 0.25rem; /* 4px */ --rez-radius-md: 0.375rem; /* 6px */ --rez-radius-lg: 0.5rem; /* 8px */ --rez-radius-xl: 0.75rem; /* 12px */ --rez-radius-full: 9999px; /* Tiene */ --rez-shadow-sm: 0 1px 3px rgba(25, 28, 31, 0.08); --rez-shadow-md: 0 4px 12px rgba(25, 28, 31, 0.10); --rez-shadow-lg: 0 8px 24px rgba(25, 28, 31, 0.14); --rez-shadow-modal: 0 12px 40px rgba(25, 28, 31, 0.20); /* Prechody */ --rez-transition: 0.15s ease-in-out; } /* ───────────────────────────────────────────────────────────── 2. RESET & ZÁKLADNÉ ŠTÝLY ───────────────────────────────────────────────────────────── */ .rez-app { font-family: var(--rez-font-body); font-size: var(--rez-text-base); color: var(--rez-text); background-color: var(--rez-bg); background-image: var(--rez-bg-texture); background-size: cover; background-attachment: fixed; min-height: 100vh; padding: var(--rez-space-6) var(--rez-space-4); -webkit-font-smoothing: antialiased; } /* Ak má iframe presvitať textúra materskej stránky, zmeň na: */ /* background-color: transparent; background-image: none; */ .rez-container { max-width: 860px; margin-inline: auto; width: 100%; } .rez-section { margin-bottom: var(--rez-space-8); } hr.rez-divider { border: none; border-top: 1px solid var(--rez-divider); margin: var(--rez-space-6) 0; } /* Skupinový nadpis sekcie */ .rez-section-title { font-family: var(--rez-font-display); font-size: var(--rez-text-h4); font-weight: 400; color: var(--rez-text); margin-bottom: var(--rez-space-4); line-height: 1.2; } .rez-section-subtitle { font-size: var(--rez-text-sm); color: var(--rez-text-muted); margin-bottom: var(--rez-space-4); } /* ───────────────────────────────────────────────────────────── 3. TYPOGRAFIA ───────────────────────────────────────────────────────────── */ .rez-h1 { font-family: var(--rez-font-display); font-size: var(--rez-text-h1); font-weight: 400; line-height: 1.2; color: var(--rez-text); margin: 0 0 var(--rez-space-4); } .rez-h2 { font-family: var(--rez-font-display); font-size: var(--rez-text-h2); font-weight: 400; line-height: 1.2; color: var(--rez-text); margin: 0 0 var(--rez-space-4); } .rez-h3 { font-family: var(--rez-font-display); font-size: var(--rez-text-h3); font-weight: 400; line-height: 1.2; color: var(--rez-text); margin: 0 0 var(--rez-space-3); } .rez-h4 { font-family: var(--rez-font-display); font-size: var(--rez-text-h4); font-weight: 400; line-height: 1.2; color: var(--rez-text); margin: 0 0 var(--rez-space-3); } .rez-h5 { font-family: var(--rez-font-body); font-size: var(--rez-text-h5); font-weight: 600; line-height: 1.3; color: var(--rez-text); margin: 0 0 var(--rez-space-2); } .rez-h6 { font-family: var(--rez-font-body); font-size: var(--rez-text-h6); font-weight: 600; line-height: 1.4; color: var(--rez-text); margin: 0 0 var(--rez-space-2); } .rez-text-muted { color: var(--rez-text-muted); font-size: var(--rez-text-sm); } .rez-text-faint { color: var(--rez-text-faint); font-size: var(--rez-text-xs); } .rez-text-small { font-size: var(--rez-text-xs); } a.rez-link { color: var(--rez-primary); text-decoration: none; transition: color var(--rez-transition); } a.rez-link:hover { color: var(--rez-primary-hover); text-decoration: underline; } /* ───────────────────────────────────────────────────────────── 4. TLAČIDLÁ ───────────────────────────────────────────────────────────── */ .rez-btn { display: inline-block; font-family: var(--rez-font-body); font-size: var(--rez-text-sm); font-weight: 500; line-height: 1.5; text-align: center; text-decoration: none; cursor: pointer; user-select: none; border: 1px solid transparent; border-radius: var(--rez-radius-md); padding: 0.375rem 0.875rem; transition: background-color var(--rez-transition), border-color var(--rez-transition), color var(--rez-transition), box-shadow var(--rez-transition); } .rez-btn:focus { outline: 0; box-shadow: 0 0 0 0.25rem var(--rez-primary-focus); } .rez-btn:disabled, .rez-btn.disabled { opacity: 0.55; pointer-events: none; cursor: not-allowed; } /* Primárne – plné zelené */ .rez-btn-primary { background-color: var(--rez-primary); border-color: var(--rez-primary); color: var(--rez-text-inverse); } .rez-btn-primary:hover, .rez-btn-primary:focus { background-color: var(--rez-primary-hover); border-color: var(--rez-primary-hover); color: var(--rez-text-inverse); } /* Sekundárne – obrys zelený */ .rez-btn-outline { background-color: transparent; border-color: var(--rez-primary); color: var(--rez-primary); } .rez-btn-outline:hover { background-color: var(--rez-primary-light); color: var(--rez-primary); } /* Neutrálne – sivé */ .rez-btn-neutral { background-color: var(--rez-surface); border-color: var(--rez-border); color: var(--rez-text-muted); } .rez-btn-neutral:hover { background-color: var(--rez-surface-hover); border-color: #aaa; color: var(--rez-text); } /* Veľkosť – veľké */ .rez-btn-lg { font-size: 1.125rem; padding: 0.5rem 1.25rem; border-radius: var(--rez-radius-lg); } /* Veľkosť – malé */ .rez-btn-sm { font-size: 0.875rem; padding: 0.25rem 0.625rem; border-radius: var(--rez-radius-sm); } /* Na plnú šírku */ .rez-btn-block { display: block; width: 100%; } /* ───────────────────────────────────────────────────────────── 5. FORMULÁROVÉ POLIA ───────────────────────────────────────────────────────────── */ .rez-form-group { margin-bottom: var(--rez-space-5); } .rez-label { display: block; font-family: var(--rez-font-body); font-size: var(--rez-text-sm); font-weight: 500; color: var(--rez-text); margin-bottom: var(--rez-space-2); } .rez-label .rez-required { color: var(--rez-error); margin-left: 2px; } .rez-input, .rez-select, .rez-textarea { display: block; width: 100%; font-family: var(--rez-font-body); font-size: var(--rez-text-base); font-weight: 400; color: var(--rez-text); background-color: #ffffff; border: 1px solid var(--rez-border); border-radius: var(--rez-radius-md); padding: 0.4375rem 0.75rem; line-height: 1.5; transition: border-color var(--rez-transition), box-shadow var(--rez-transition); -webkit-appearance: none; appearance: none; } .rez-input::placeholder, .rez-textarea::placeholder { color: var(--rez-text-faint); } .rez-input:focus, .rez-select:focus, .rez-textarea:focus { outline: none; border-color: var(--rez-primary); box-shadow: 0 0 0 0.2rem var(--rez-primary-focus); } /* Chybový stav */ .rez-input.rez-invalid, .rez-select.rez-invalid { border-color: var(--rez-error); background-color: rgba(220, 53, 69, 0.03); } .rez-input.rez-invalid:focus { box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); } .rez-error-msg { font-size: var(--rez-text-xs); color: var(--rez-error); margin-top: var(--rez-space-1); display: block; } /* Pomocný text pod polom */ .rez-hint { font-size: var(--rez-text-xs); color: var(--rez-text-faint); margin-top: var(--rez-space-1); display: block; } /* Telefón + email – dvojstĺpcové rozloženie */ .rez-form-row { display: grid; gap: var(--rez-space-4); grid-template-columns: 1fr 1fr; } /* Checkbox + text VOP/GDPR */ .rez-checkbox-group { display: flex; align-items: flex-start; gap: var(--rez-space-3); margin-top: var(--rez-space-4); } .rez-checkbox-group input[type="checkbox"] { width: 1.1em; height: 1.1em; margin-top: 0.15em; accent-color: var(--rez-primary); cursor: pointer; flex-shrink: 0; } .rez-checkbox-group label { font-size: var(--rez-text-xs); color: var(--rez-text-muted); line-height: 1.5; cursor: pointer; } /* ───────────────────────────────────────────────────────────── 6. DLAŽDICE PROCEDÚR ───────────────────────────────────────────────────────────── */ /* Mriežka dlaždíc */ .rez-tiles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: var(--rez-space-4); } /* Jednotlivá dlaždica */ .rez-tile { position: relative; background-color: var(--rez-surface); border: 2px solid var(--rez-border); border-radius: var(--rez-radius-xl); padding: var(--rez-space-5) var(--rez-space-4); cursor: pointer; user-select: none; transition: border-color var(--rez-transition), background-color var(--rez-transition), box-shadow var(--rez-transition), transform var(--rez-transition); box-shadow: var(--rez-shadow-sm); display: flex; flex-direction: column; gap: var(--rez-space-2); } .rez-tile:hover { border-color: var(--rez-primary-hover); box-shadow: var(--rez-shadow-md); transform: translateY(-1px); } /* Aktívna / označená dlaždica */ .rez-tile.active, .rez-tile[aria-pressed="true"] { border-color: var(--rez-primary); background-color: var(--rez-primary-light); box-shadow: var(--rez-shadow-md); } /* Zaškrtávacia ikona pri aktívnej dlaždici */ .rez-tile.active::after { content: "✓"; position: absolute; top: var(--rez-space-2); right: var(--rez-space-3); font-size: 0.85rem; font-weight: 700; color: var(--rez-primary); } /* Nedostupná dlaždica */ .rez-tile.disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; } .rez-tile-name { font-family: var(--rez-font-display); font-size: var(--rez-text-lg); font-weight: 400; color: var(--rez-text); line-height: 1.2; } .rez-tile-meta { display: flex; align-items: center; gap: var(--rez-space-3); margin-top: auto; } .rez-tile-price { font-family: var(--rez-font-body); font-size: var(--rez-text-base); font-weight: 600; color: var(--rez-primary); } .rez-tile-duration { font-size: var(--rez-text-xs); color: var(--rez-text-faint); } /* ───────────────────────────────────────────────────────────── 7. SPODNÁ LIŠTA – STICKY BAR ───────────────────────────────────────────────────────────── */ .rez-sticky-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background-color: #ffffff; border-top: 1px solid var(--rez-border); box-shadow: 0 -4px 16px rgba(25, 28, 31, 0.10); padding: var(--rez-space-3) var(--rez-space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--rez-space-4); transition: opacity var(--rez-transition); } /* Skrytý stav – žiadna procedúra nie je vybraná */ .rez-sticky-bar.hidden { opacity: 0; pointer-events: none; } .rez-sticky-bar-summary { display: flex; align-items: center; gap: var(--rez-space-5); } .rez-sticky-bar-total { font-family: var(--rez-font-body); font-size: var(--rez-text-lg); font-weight: 600; color: var(--rez-primary); } .rez-sticky-bar-time { font-size: var(--rez-text-sm); color: var(--rez-text-muted); } .rez-sticky-bar-label { font-size: var(--rez-text-xs); color: var(--rez-text-faint); display: block; } /* Odsadenie obsahu aby nekryla sticky bar */ .rez-app { padding-bottom: 100px; } /* ───────────────────────────────────────────────────────────── 8. KALENDÁR – VÝBER TERMÍNU ───────────────────────────────────────────────────────────── */ .rez-calendar { background-color: #ffffff; border: 1px solid var(--rez-border); border-radius: var(--rez-radius-xl); overflow: hidden; box-shadow: var(--rez-shadow-sm); } /* Hlavička – mesiac + navigačné šípky */ .rez-calendar-header { display: flex; align-items: center; justify-content: space-between; padding: var(--rez-space-4) var(--rez-space-5); background-color: var(--rez-primary); color: var(--rez-text-inverse); } .rez-calendar-header-title { font-family: var(--rez-font-display); font-size: var(--rez-text-h5); font-weight: 400; } .rez-calendar-nav-btn { background: none; border: none; color: var(--rez-text-inverse); font-size: 1.25rem; cursor: pointer; padding: var(--rez-space-1) var(--rez-space-2); border-radius: var(--rez-radius-sm); transition: background-color var(--rez-transition); line-height: 1; } .rez-calendar-nav-btn:hover { background-color: rgba(255,255,255,0.15); } /* Mená dní v týždni */ .rez-calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); background-color: var(--rez-surface); border-bottom: 1px solid var(--rez-divider); } .rez-calendar-weekday { text-align: center; font-size: var(--rez-text-xs); font-weight: 600; color: var(--rez-text-muted); padding: var(--rez-space-2) 0; text-transform: uppercase; letter-spacing: 0.03em; } /* Mriežka dní */ .rez-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background-color: var(--rez-divider); } /* Jeden deň */ .rez-calendar-day { background-color: #ffffff; min-height: 52px; padding: var(--rez-space-2); display: flex; flex-direction: column; gap: var(--rez-space-1); cursor: default; } /* Číslo dňa */ .rez-calendar-day-num { font-size: var(--rez-text-sm); font-weight: 400; color: var(--rez-text-muted); line-height: 1; } /* Voľné časové bloky v dni */ .rez-time-slot { font-size: 0.75rem; font-weight: 500; color: var(--rez-primary); background-color: var(--rez-primary-light); border-radius: var(--rez-radius-sm); padding: 1px 4px; cursor: pointer; transition: background-color var(--rez-transition); text-align: center; } .rez-time-slot:hover { background-color: rgba(31, 100, 71, 0.18); } /* Obsadený slot */ .rez-time-slot.booked { color: var(--rez-text-faint); background-color: var(--rez-surface); cursor: not-allowed; text-decoration: line-through; } /* Zablokovaný slot adminom */ .rez-time-slot.blocked { color: #aaa; background-color: #f0f0f0; cursor: not-allowed; } /* Aktuálny deň */ .rez-calendar-day.today .rez-calendar-day-num { color: var(--rez-primary); font-weight: 700; } /* Deň mimo aktuálneho mesiaca */ .rez-calendar-day.out-of-month { background-color: var(--rez-surface); } .rez-calendar-day.out-of-month .rez-calendar-day-num { color: var(--rez-text-faint); } /* ───────────────────────────────────────────────────────────── 9. POPUP / MODAL ───────────────────────────────────────────────────────────── */ /* Tmavý overlay */ .rez-modal-overlay { position: fixed; inset: 0; z-index: 200; background-color: rgba(25, 28, 31, 0.55); display: flex; align-items: center; justify-content: center; padding: var(--rez-space-4); opacity: 0; pointer-events: none; transition: opacity var(--rez-transition); } .rez-modal-overlay.open { opacity: 1; pointer-events: all; } /* Samotný panel modalu */ .rez-modal { background-color: #ffffff; border-radius: var(--rez-radius-xl); box-shadow: var(--rez-shadow-modal); padding: var(--rez-space-8); width: 100%; max-width: 480px; max-height: calc(100vh - 2 * var(--rez-space-4)); overflow-y: auto; overscroll-behavior: contain; transform: translateY(12px); transition: transform var(--rez-transition); } .rez-modal-overlay.open .rez-modal { transform: translateY(0); } .rez-modal-title { font-family: var(--rez-font-display); font-size: var(--rez-text-h4); font-weight: 400; color: var(--rez-text); margin-bottom: var(--rez-space-4); } /* Riadok s prehľadom v modali (napr. Dátum: ...) */ .rez-modal-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--rez-space-3); padding: var(--rez-space-2) 0; border-bottom: 1px solid var(--rez-divider); font-size: var(--rez-text-sm); } .rez-modal-row:last-of-type { border-bottom: none; } .rez-modal-row-label { color: var(--rez-text-muted); flex-shrink: 0; } .rez-modal-row-value { font-weight: 500; color: var(--rez-text); text-align: right; } /* Zvýraznený riadok ceny */ .rez-modal-row.total .rez-modal-row-value { font-size: var(--rez-text-lg); color: var(--rez-primary); } /* Tlačidlá v modali */ .rez-modal-actions { display: flex; gap: var(--rez-space-3); margin-top: var(--rez-space-6); flex-direction: row-reverse; } /* ───────────────────────────────────────────────────────────── 10. STAVOVÉ HLÁŠKY ───────────────────────────────────────────────────────────── */ .rez-alert { border-radius: var(--rez-radius-lg); padding: var(--rez-space-4) var(--rez-space-5); font-size: var(--rez-text-sm); display: flex; align-items: flex-start; gap: var(--rez-space-3); margin-bottom: var(--rez-space-4); } .rez-alert-icon { font-size: 1.1rem; line-height: 1.5; flex-shrink: 0; } .rez-alert-success { background-color: var(--rez-success-light); border: 1px solid rgba(25, 135, 84, 0.25); color: #0f5132; } .rez-alert-error { background-color: var(--rez-error-light); border: 1px solid rgba(220, 53, 69, 0.25); color: #842029; } .rez-alert-warning { background-color: var(--rez-warning-light); border: 1px solid rgba(255, 193, 7, 0.35); color: #664d03; } .rez-alert-info { background-color: rgba(31, 100, 71, 0.06); border: 1px solid rgba(31, 100, 71, 0.2); color: #0a3d25; } /* ───────────────────────────────────────────────────────────── 11. KROK-INDIKÁTOR (Step indicator) ───────────────────────────────────────────────────────────── */ .rez-steps { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: var(--rez-space-8); } .rez-step { display: flex; flex-direction: column; align-items: center; gap: var(--rez-space-1); position: relative; flex: 1; max-width: 160px; } /* Čiara medzi krokmi */ .rez-step:not(:last-child)::after { content: ""; position: absolute; top: 16px; left: calc(50% + 16px); right: calc(-50% + 16px); height: 2px; background-color: var(--rez-border); } .rez-step.done:not(:last-child)::after { background-color: var(--rez-primary); } /* Kruh kroku */ .rez-step-circle { width: 32px; height: 32px; border-radius: var(--rez-radius-full); border: 2px solid var(--rez-border); background-color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 600; color: var(--rez-text-faint); z-index: 1; transition: border-color var(--rez-transition), background-color var(--rez-transition), color var(--rez-transition); } .rez-step.active .rez-step-circle { border-color: var(--rez-primary); color: var(--rez-primary); } .rez-step.done .rez-step-circle { border-color: var(--rez-primary); background-color: var(--rez-primary); color: #ffffff; } .rez-step-label { font-size: var(--rez-text-xs); color: var(--rez-text-faint); text-align: center; } .rez-step.active .rez-step-label { color: var(--rez-primary); font-weight: 500; } .rez-step.done .rez-step-label { color: var(--rez-text-muted); } /* ───────────────────────────────────────────────────────────── 12. NAČÍTAVANIE – SKELETON & SPINNER ───────────────────────────────────────────────────────────── */ @keyframes rez-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .rez-skeleton { background: linear-gradient( 90deg, var(--rez-surface) 25%, var(--rez-surface-hover) 50%, var(--rez-surface) 75% ); background-size: 200% 100%; animation: rez-shimmer 1.5s ease-in-out infinite; border-radius: var(--rez-radius-md); } .rez-skeleton-tile { height: 120px; border-radius: var(--rez-radius-xl); } .rez-skeleton-text { height: 1em; margin-bottom: var(--rez-space-2); } .rez-skeleton-text.short { width: 60%; } .rez-skeleton-text.medium { width: 80%; } /* Spinner */ @keyframes rez-spin { to { transform: rotate(360deg); } } .rez-spinner { display: inline-block; width: 24px; height: 24px; border: 3px solid var(--rez-primary-light); border-top-color: var(--rez-primary); border-radius: var(--rez-radius-full); animation: rez-spin 0.7s linear infinite; } /* ───────────────────────────────────────────────────────────── 13. RESPONZÍVNOSŤ – MOBILE ───────────────────────────────────────────────────────────── */ /* Tablet a menší */ @media (max-width: 768px) { .rez-app { padding: var(--rez-space-4) var(--rez-space-3); padding-bottom: 110px; } .rez-tiles-grid { grid-template-columns: 1fr 1fr; gap: var(--rez-space-3); } .rez-form-row { grid-template-columns: 1fr; } .rez-sticky-bar { padding: var(--rez-space-3) var(--rez-space-4); flex-direction: column; gap: var(--rez-space-2); } .rez-sticky-bar-summary { justify-content: space-between; width: 100%; } .rez-modal { padding: var(--rez-space-5); } .rez-modal-actions { flex-direction: column; } .rez-modal-actions .rez-btn { width: 100%; } .rez-steps { gap: 0; } .rez-step-label { display: none; } } /* Malý mobil */ @media (max-width: 480px) { .rez-tiles-grid { grid-template-columns: 1fr; } .rez-calendar-day { min-height: 40px; padding: var(--rez-space-1); } .rez-calendar-day-num { font-size: 0.75rem; } } /* ───────────────────────────────────────────────────────────── Koniec súboru dibeauty-rezervacie.css ───────────────────────────────────────────────────────────── */