/* ============================================================ Ραντεβού — Design System Light / Dark μέσω data-theme στο ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } /* Το [hidden] πρέπει να νικά κάθε display (π.χ. .modal{display:grid}) */ [hidden] { display: none !important; } :root { color-scheme: light; --font: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --bg: #f4f6fb; --surface: #ffffff; --surface-2: #f8fafc; --surface-3: #eef1f7; --text: #0f172a; --text-2: #52607a; /* Το «αχνό» κείμενο (ετικέτες, ώρες, κεφαλίδες πίνακα) πρέπει να διαβάζεται: 4.8:1 πάνω σε λευκό — το παλιό #94a3b8 έπιανε μόλις 2.6:1. */ --muted: #64748b; --border: #e4e8f0; --border-2: #cbd5e1; --accent: #6366f1; --accent-strong: #4f46e5; --accent-soft: #eef2ff; --accent-ring: rgba(99, 102, 241, .22); --grad: linear-gradient(135deg, #6366f1, #8b5cf6 55%, #a855f7); --ok: #10b981; --ok-strong: #047857; --ok-soft: #d6f5e8; --warn: #f59e0b; --warn-strong: #b45309; --warn-soft: #fdf4dc; --danger: #ef4444; --danger-strong: #b91c1c; --danger-soft: #fee2e2; --shadow-1: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 6px rgba(15, 23, 42, .04); --shadow-2: 0 10px 30px -10px rgba(15, 23, 42, .18); --shadow-pop: 0 18px 50px -12px rgba(15, 23, 42, .28); --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px; --sidebar-w: 248px; --cal-off: repeating-linear-gradient(-45deg, transparent 0 7px, rgba(100, 116, 139, .07) 7px 9px); --cal-work-bg: #ffffff; } html[data-theme="dark"] { color-scheme: dark; --bg: #0b1121; --surface: #141c33; --surface-2: #0f1628; --surface-3: #1b2542; --text: #e6eaf3; --text-2: #9aa8c4; --muted: #7c8aa6; --border: #232f4f; --border-2: #33415f; --accent: #818cf8; --accent-strong: #a5b4fc; --accent-soft: rgba(99, 102, 241, .17); --accent-ring: rgba(129, 140, 248, .3); --ok-soft: rgba(16, 185, 129, .16); --ok-strong: #34d399; --warn-soft: rgba(245, 158, 11, .16); --warn-strong: #fbbf24; --danger-soft: rgba(239, 68, 68, .16); --danger-strong: #f87171; --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 10px 30px -10px rgba(0, 0, 0, .5); --shadow-pop: 0 18px 50px -12px rgba(0, 0, 0, .6); --cal-off: repeating-linear-gradient(-45deg, transparent 0 7px, rgba(148, 163, 184, .06) 7px 9px); --cal-work-bg: #141c33; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.5; min-height: 100dvh; -webkit-font-smoothing: antialiased; } /* Κλίμακα τυπογραφίας: τίτλος σελίδας 26 (24 στο κινητό), τίτλος ενότητας 16, κείμενο 15, μικρό 13. Λίγα μεγέθη = ήρεμη σελίδα. */ h1, h2, h3, h4 { line-height: 1.25; letter-spacing: -.015em; } h1 { font-size: 26px; font-weight: 800; } h2 { font-size: 20px; font-weight: 750; } h3 { font-size: 16px; font-weight: 700; } small { font-size: 13px; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } img, svg { display: block; } ::selection { background: var(--accent); color: #fff; } @media (max-width: 640px) { h1 { font-size: 24px; } } /* Ορατή εστίαση από πληκτρολόγιο — παντού, χωρίς να ενοχλεί το ποντίκι. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } .btn:focus-visible, .input:focus-visible, .select:focus-visible, .textarea:focus-visible, .nav-item:focus-visible, .bb-item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); } /* Επεξήγηση κάτω από ρύθμιση/πεδίο — μία πρόταση, ίδια παντού. Η μοναδική πηγή για το .hint είναι εδώ· το settings.css έχει ακόμα ένα αντίγραφο με τις ίδιες τιμές (προς αφαίρεση) — γι' αυτό οι τιμές είναι ταυτόσημες, ώστε το αποτέλεσμα να μην αλλάζει από τη σειρά φόρτωσης. */ .hint { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-2); line-height: 1.45; } .hint em { font-style: italic; color: var(--muted); } .field > .hint { margin-top: -1px; } .icon { width: 20px; height: 20px; flex: none; } .icon-sm { width: 16px; height: 16px; } .icon-lg { width: 26px; height: 26px; } .text-2 { color: var(--text-2); } .muted { color: var(--muted); } .flex-1 { flex: 1; } .inline-form { display: inline; } .row-link { cursor: pointer; } @media (max-width: 700px) { .hide-sm { display: none; } } /* ============================================================ Layout */ .shell { display: flex; min-height: 100dvh; } .sidebar { width: var(--sidebar-w); flex: none; position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; padding: 20px 14px 16px; gap: 14px; border-right: 1px solid var(--border); background: var(--surface); } .brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px; } .brand-mark { width: 38px; height: 38px; border-radius: 12px; background: var(--grad); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 16px -6px rgba(99, 102, 241, .55); } .brand-mark .icon { width: 22px; height: 22px; } .brand-name { font-size: 19px; font-weight: 800; letter-spacing: -.02em; } .btn-new { width: 100%; } .nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; } /* Ομάδες μενού: «Καθημερινά» / «Περισσότερα» — μικρή αχνή ετικέτα, όχι γραμμή. */ .nav-group { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 12px 12px 4px; } .nav-group:first-child { padding-top: 2px; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; color: var(--text-2); font-weight: 600; font-size: 14px; transition: background .15s, color .15s; } .nav-item:hover { background: var(--surface-2); color: var(--text); } .nav-item.on { background: var(--accent-soft); color: var(--accent-strong); } .sidebar-foot { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border); padding-top: 12px; } .sidebar-foot-btns { display: flex; gap: 6px; } .sidebar-foot-btns > .btn, .sidebar-foot-btns > form { flex: 1; } .sidebar-foot-btns > form > .btn { width: 100%; } /* Ο χρήστης: όνομα επιχείρησης + «Ρυθμίσεις» από κάτω — όλο το chip οδηγεί εκεί. */ .user-chip { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; padding: 4px 6px 4px 4px; border-radius: 10px; transition: background .15s; } .user-chip:hover { background: var(--surface-2); } .user-chip-txt { display: grid; min-width: 0; line-height: 1.25; } .user-chip-name { font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-chip-sub { font-size: 11.5px; color: var(--muted); font-weight: 600; } .user-chip:hover .user-chip-sub { color: var(--accent-strong); } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .content { width: 100%; max-width: 1240px; margin: 0 auto; padding: 26px 26px 80px; flex: 1; } .mobile-top { display: none; position: sticky; top: 0; z-index: 40; align-items: center; justify-content: space-between; padding: 10px 14px; background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .bottombar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--border); padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); grid-template-columns: 1fr 1fr auto 1fr 1fr; align-items: center; gap: 4px; } .bb-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px 5px; border-radius: 10px; color: var(--muted); font-size: 11px; font-weight: 650; line-height: 1.2; -webkit-tap-highlight-color: transparent; } .bb-item .icon { width: 22px; height: 22px; transition: transform .15s; } .bb-item:active .icon { transform: scale(.9); } .bb-item.on { color: var(--accent-strong); } /* Ενεργή καρτέλα: το εικονίδιο κάθεται σε απαλό «μαξιλαράκι» — φαίνεται και με μια ματιά. */ .bb-item.on .icon { background: var(--accent-soft); border-radius: 9px; padding: 3px; width: 30px; height: 26px; margin: -2px 0; } .bb-fab { width: 54px; height: 54px; border-radius: 18px; background: var(--grad); color: #fff; display: grid; place-items: center; margin-top: -22px; box-shadow: 0 10px 22px -6px rgba(99, 102, 241, .6); transition: transform .15s; } .bb-fab:active { transform: scale(.93); } .bb-fab .icon { width: 24px; height: 24px; } @media (max-width: 1023px) { .sidebar { display: none; } .mobile-top { display: flex; } .bottombar { display: grid; } /* 16px πλάγιο περιθώριο: το ίδιο υποθέτουν και τα άλλα φύλλα στιλ (π.χ. settings.css). */ .content { padding: 18px 16px calc(96px + env(safe-area-inset-bottom)); } } /* ============================================================ Page header Κάθε σελίδα ξεκινά ίδια: τίτλος + μία πρόταση αριστερά, η κύρια ενέργεια δεξιά. */ .page-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 24px; flex-wrap: wrap; } .page-head-txt { flex: 1; min-width: 200px; } .page-head-txt h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .page-head-txt h1 .badge { font-size: 13px; padding: 3px 10px; } .page-head-txt p { color: var(--text-2); font-size: 14px; margin-top: 4px; } .page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } @media (max-width: 640px) { .page-head { margin-bottom: 18px; gap: 10px; } .page-head-txt { min-width: 0; flex-basis: 100%; } .page-actions .btn-primary { flex: 1; } } /* ============================================================ Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px; border: 1px solid transparent; font-weight: 650; font-size: 14px; white-space: nowrap; transition: transform .12s, box-shadow .15s, background .15s, border-color .15s, filter .15s; user-select: none; } .btn:active { transform: scale(.97); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); } .btn:disabled { opacity: .55; pointer-events: none; } /* Τρία επίπεδα: primary (ντεγκραντέ — ΕΝΑ ανά οθόνη), soft (δεύτερη ενέργεια), ghost (όλα τα υπόλοιπα). */ .btn-primary { background: var(--grad); color: #fff; box-shadow: 0 5px 16px -6px rgba(99, 102, 241, .55); } .btn-primary:hover { filter: brightness(1.07); transform: translateY(-1px); } .btn-ghost { border-color: var(--border); color: var(--text); background: var(--surface); } .btn-ghost:hover { background: var(--surface-2); border-color: var(--border-2); } .btn-soft { background: var(--accent-soft); color: var(--accent-strong); } .btn-soft:hover { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); } .btn-danger { background: var(--danger); color: #fff; } .btn-danger:hover { filter: brightness(1.08); } .btn-danger-soft { background: var(--danger-soft); color: var(--danger-strong); } .btn-icon { width: 40px; padding: 0; } .btn-sm { height: 33px; padding: 0 11px; font-size: 13px; border-radius: 10px; } .btn-sm.btn-icon { width: 33px; } .btn-block { width: 100%; } .link-btn { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-strong); font-weight: 650; font-size: 13.5px; padding: 4px 0; } .link-btn:hover { text-decoration: underline; } /* ============================================================ Forms */ .field { display: grid; gap: 6px; margin-bottom: 16px; } .field > label { font-size: 13px; font-weight: 650; color: var(--text-2); } .input, .textarea, .select { width: 100%; border: 1px solid var(--border-2); background: var(--surface); color: var(--text); border-radius: 11px; font-size: 15px; font-family: inherit; transition: border-color .15s, box-shadow .15s; } /* Ίδιο ύψος με τα κουμπιά (40px), ώστε φίλτρα και ενέργειες να ευθυγραμμίζονται. */ .input, .select { height: 40px; } .input { padding: 0 12px; } .select { padding: 0 12px; } .textarea { padding: 10px 12px; resize: vertical; min-height: 80px; } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .input::placeholder, .textarea::placeholder { color: var(--muted); } select.select, select.input { appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; } input[type="date"].input, input[type="time"].input { padding-right: 8px; } html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="time"] { color-scheme: dark; } .field .err { color: var(--danger-strong); font-size: 13px; } .input.is-err, .textarea.is-err { border-color: var(--danger); } .form-errors { background: var(--danger-soft); color: var(--danger-strong); border-radius: var(--r); padding: 10px 14px; font-size: 13.5px; margin-bottom: 16px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 12px; } @media (max-width: 560px) { .grid-3 { grid-template-columns: 1fr 1fr; } } /* Switch */ .switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; } .switch input { position: absolute; opacity: 0; } .switch .track { width: 42px; height: 24px; border-radius: 999px; background: var(--border-2); transition: background .18s; position: relative; } .switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s; } .switch input:checked + .track { background: var(--accent); } .switch input:checked + .track::after { transform: translateX(18px); } /* Segmented */ .seg { display: inline-flex; background: var(--surface-3); border-radius: 12px; padding: 3px; gap: 2px; } .seg > button, .seg > a { border-radius: 9px; padding: 7px 14px; font-weight: 650; font-size: 13px; color: var(--text-2); transition: background .15s, color .15s, box-shadow .15s; display: inline-flex; align-items: center; gap: 6px; } .seg > .on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); } /* Duration chips */ .dur-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: -6px 0 14px; } .dur-chips button { padding: 4px 12px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); font-size: 12.5px; font-weight: 650; transition: background .12s, color .12s; } .dur-chips button:hover, .dur-chips button.on { background: var(--accent-soft); color: var(--accent-strong); } /* ============================================================ Cards */ /* Μία κάρτα, ένα επίπεδο σκιάς: απαλό περίγραμμα + ίσα-ίσα σκιά. */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); } .card-pad { padding: 20px; } /* Κεφαλίδα κάρτας: τίτλος (+ μετρητής) αριστερά, ενέργειες δεξιά, αναδίπλωση στο κινητό. */ .card-head { display: flex; align-items: center; gap: 8px 10px; padding: 14px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .card-head h3 { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .card-head h3 .badge { font-size: 12px; } .card-head > .icon { color: var(--text-2); } .card-head > .btn, .card-head > .card-head-actions { margin-left: auto; } .card-head > .btn + .btn { margin-left: 0; } .card-head-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .card-pad > h3:first-child { margin-bottom: 14px; } .hover-lift { transition: transform .15s, box-shadow .15s, border-color .15s; } .hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--border-2); } /* ============================================================ Badges / chips / avatar */ /* Ένα χρώμα ανά κατάσταση, ίδιο παντού: προγραμματισμένο=accent, ολοκληρωμένο=πράσινο, σε αναμονή/δεν ήρθε=πορτοκαλί, ακυρωμένο=γκρι με διαγραφή. */ .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 650; line-height: 1.4; border-radius: 999px; padding: 3px 10px; white-space: nowrap; } .badge .icon { width: 13px; height: 13px; } .badge-scheduled { background: var(--accent-soft); color: var(--accent-strong); } .badge-completed, .badge-ok { background: var(--ok-soft); color: var(--ok-strong); } .badge-cancelled { background: var(--surface-3); color: var(--muted); text-decoration: line-through; } .badge-no_show, .badge-warn { background: var(--warn-soft); color: var(--warn-strong); } .badge-danger { background: var(--danger-soft); color: var(--danger-strong); } .badge-neutral { background: var(--surface-3); color: var(--text-2); } .badge-pending { background: var(--warn-soft); color: var(--warn-strong); } .avatar { width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid; place-items: center; font-weight: 750; font-size: 13px; color: #fff; background: var(--av, #6366f1); } .avatar-sm { width: 30px; height: 30px; border-radius: 9px; font-size: 11px; } .avatar-lg { width: 58px; height: 58px; border-radius: 17px; font-size: 20px; } .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; } /* ============================================================ Tables */ /* Πίνακες = γραμμές με καθαρό διαχωριστικό, άνετο ύψος και hover. */ .tbl-wrap { overflow-x: auto; } .tbl { width: 100%; border-collapse: collapse; } .tbl th { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--muted); padding: 12px 16px 10px; white-space: nowrap; } .tbl td { padding: 12px 16px; border-top: 1px solid var(--border); vertical-align: middle; } .tbl tr.row-link td { height: 60px; } .tbl tbody tr { transition: background .12s; } .tbl tbody tr:hover { background: var(--surface-2); } .tbl tbody tr.row-link:focus-within { background: var(--surface-2); } .tbl .cell-main { font-weight: 650; } .tbl .cell-sub { font-size: 13px; color: var(--text-2); } /* ============================================================ Menus & tooltips */ .menu { position: absolute; z-index: 90; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; box-shadow: var(--shadow-pop); padding: 6px; min-width: 190px; animation: pop .14s ease; } .menu button, .menu a { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 11px; border-radius: 9px; font-size: 14px; font-weight: 550; } .menu button:hover, .menu a:hover { background: var(--surface-2); } .menu .danger { color: var(--danger-strong); } .menu-sep { height: 1px; background: var(--border); margin: 5px 4px; } .tip { position: fixed; z-index: 120; pointer-events: none; background: #0f172a; color: #fff; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 8px; box-shadow: var(--shadow-2); transform: translate(-50%, calc(-100% - 8px)); white-space: nowrap; animation: fade-in .12s ease; } html[data-theme="dark"] .tip { background: #e2e8f0; color: #0f172a; } /* ============================================================ Modals / sheets */ .modal-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(2, 6, 23, .48); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fade-in .16s ease; } .modal { position: fixed; inset: 0; z-index: 81; display: grid; place-items: center; padding: 18px; overflow-y: auto; } .modal-card { width: min(560px, 100%); max-height: min(92dvh, 780px); overflow-y: auto; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-pop); padding: 22px; animation: pop .18s cubic-bezier(.2, 1.2, .4, 1); } .modal-sm { width: min(410px, 100%); text-align: center; } .modal-sm h3 { margin-bottom: 6px; } .modal-sm .modal-actions { justify-content: center; margin-top: 18px; } .modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .modal-actions { display: flex; align-items: center; gap: 8px; margin-top: 18px; } .confirm-icon { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 16px; display: grid; place-items: center; background: var(--danger-soft); color: var(--danger-strong); } .confirm-icon.info { background: var(--accent-soft); color: var(--accent-strong); } @media (max-width: 640px) { .modal { padding: 0; align-items: end; } .modal-card { width: 100%; max-height: 94dvh; border-radius: 22px 22px 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); animation: slide-up .22s cubic-bezier(.2, 1, .3, 1); } .modal-sm { border-radius: 22px 22px 0 0; } } .sheet { position: fixed; z-index: 85; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-pop); padding: 8px; animation: slide-up .2s cubic-bezier(.2, 1, .3, 1); } .sheet-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border-radius: 13px; font-size: 15px; font-weight: 600; } .sheet-item:hover { background: var(--surface-2); } .sheet-item.danger { color: var(--danger-strong); } .sheet form { margin: 0; } /* Κεφαλίδα του φύλλου «Μενού»: ποιος είναι συνδεδεμένος → Ρυθμίσεις. */ .sheet-user { display: flex; align-items: center; gap: 11px; padding: 10px 14px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--border); } .sheet-user .user-chip-txt { flex: 1; } .sheet-user .user-chip-name { font-size: 14.5px; } .sheet-user .user-chip-sub { font-size: 12px; } /* ============================================================ Toasts */ .toasts { position: fixed; z-index: 130; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; } @media (max-width: 640px) { .toasts { top: 14px; bottom: auto; left: 14px; right: 14px; align-items: center; } } /* Toast: εικονίδιο + μία γραμμή, χωρίς περίγραμμα — μόνο η σκιά το ξεχωρίζει. */ .toast { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-pop); padding: 11px 16px 11px 14px; font-size: 14px; font-weight: 600; max-width: 380px; animation: toast-in .25s cubic-bezier(.2, 1.1, .4, 1); } .toast.out { animation: toast-out .2s ease forwards; } .toast .icon { width: 20px; height: 20px; } .toast-ok .icon { color: var(--ok); } .toast-error .icon { color: var(--danger); } .toast-info .icon { color: var(--accent); } /* ============================================================ Empty state */ /* Κενή κατάσταση: φιλική, με μία πρόταση και (αν χρειάζεται) ένα κουμπί. */ .empty { text-align: center; padding: 40px 20px; } .empty-ico { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 18px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); } .empty-ico .icon { width: 26px; height: 26px; } .empty h3 { margin-bottom: 4px; } .empty p { color: var(--text-2); font-size: 14px; line-height: 1.55; max-width: 360px; margin: 0 auto; } .empty p + .btn, .empty p + div { margin-top: 16px; } /* ============================================================ Search */ .search-wrap { position: relative; } .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .search-icon .icon { width: 17px; height: 17px; } .input-search { padding-left: 38px; } .search-results { left: 0; right: 0; top: calc(100% + 6px); max-height: 300px; overflow-y: auto; } .search-item { display: flex; align-items: center; gap: 10px; } .search-item small { color: var(--muted); } .search-item .flex-1 { min-width: 0; } /* Client chip (μέσα στο modal) */ .client-chip { display: flex; align-items: center; gap: 10px; background: var(--accent-soft); border-radius: 12px; padding: 8px 10px; } .client-chip-info { flex: 1; min-width: 0; display: grid; } .client-chip-info small { font-size: 12px; } .quick-client { margin-top: 10px; padding: 12px; border: 1.5px dashed var(--border-2); border-radius: 14px; } /* Διαθέσιμες ώρες (chips) */ .slots-field { margin-bottom: 12px; } .slot-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 148px; overflow-y: auto; padding: 2px; margin: -2px; } .slot-chip { min-width: 62px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; transition: border-color .12s, background .12s, color .12s, transform .12s; } .slot-chip:hover { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); } .slot-chip:active { transform: scale(.95); } .slot-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 4px 12px -4px var(--accent-ring); } .slot-chip.past { opacity: .42; } .slot-chip.past.on { opacity: 1; } .slot-empty { font-size: 13px; color: var(--muted); padding: 4px 0; } /* Κεφαλίδα πεδίου με διακόπτη δεξιά (π.χ. «Ώρα ραντεβού» + καρτέλες) */ .field-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; } .field-head > label { margin: 0; } .seg-sm > button { padding: 5px 11px; font-size: 12.5px; } /* Επιλογή βήματος ωρών — παράκαμψη μόνο για το τρέχον ραντεβού */ .step-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 9px; } .step-label { font-size: 12.5px; color: var(--muted); } .step-chip { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 12.5px; font-weight: 650; transition: border-color .12s, background .12s, color .12s; } .step-chip:hover { border-color: var(--accent); color: var(--accent-strong); } .step-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); } /* Ελεύθερα διαστήματα «από–έως» */ .gap-list { display: flex; flex-direction: column; gap: 6px; max-height: 168px; overflow-y: auto; padding: 2px; margin: -2px; } .gap-item { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); transition: border-color .12s, background .12s; } .gap-item:hover { border-color: var(--accent); background: var(--accent-soft); } .gap-range { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .gap-meta { font-size: 12.5px; color: var(--muted); } .free-time-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .free-time-row > label { font-size: 13.5px; font-weight: 600; white-space: nowrap; margin: 0; } .free-time-row > input { max-width: 160px; } .am-hint { font-size: 13px; color: var(--text-2); margin: 10px 2px 12px; min-height: 18px; } .am-hint.ok { color: var(--ok-strong, var(--accent-strong)); font-weight: 600; } .am-hint.warn { color: var(--warn-strong); font-weight: 600; } .am-conflict { display: flex; align-items: center; gap: 8px; background: var(--warn-soft); color: var(--warn-strong); border-radius: 11px; padding: 9px 12px; font-size: 13.5px; font-weight: 600; margin-bottom: 12px; } /* ============================================================ Dashboard */ .dash-hero { margin-bottom: 20px; } .dash-hero h1 { margin-bottom: 2px; } .dash-hero p { color: var(--text-2); font-size: 14px; } /* Κάρτες αριθμών: ένα περίγραμμα, καμία σκιά/κίνηση — ξεχωρίζει μόνο το χρωματιστό πλακίδιο του εικονιδίου. Ίδιο στιλ στην Αρχική, στα Στατιστικά και στην καρτέλα πελάτη. */ .stat-grid, .stats-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; } @media (max-width: 900px) { .stat-grid, .stats-cards { grid-template-columns: repeat(2, 1fr); } } .stat-card { display: flex; gap: 12px; align-items: center; padding: 14px 16px; box-shadow: none; } .stat-card.hover-lift:hover { transform: none; box-shadow: none; border-color: var(--border); } .stat-ico { width: 42px; height: 42px; border-radius: 13px; flex: none; display: grid; place-items: center; color: #fff; background: var(--grad); } .stat-ico.teal { background: linear-gradient(135deg, #0ea5e9, #14b8a6); } .stat-ico.amber { background: linear-gradient(135deg, #f59e0b, #f97316); } .stat-ico.pink { background: linear-gradient(135deg, #ec4899, #f43f5e); } .stat-num { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; } .stat-lbl { font-size: 13px; color: var(--text-2); font-weight: 600; margin-top: 2px; } .dash-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; } @media (max-width: 980px) { .dash-cols { grid-template-columns: 1fr; } } /* Σύνοψη ανά υπάλληλο: ωράριο + μπάρα με ραντεβού & κενά */ .today-overview { display: flex; flex-direction: column; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--border); } .res-strip-off { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); } .res-strip-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .res-strip-name { font-weight: 700; font-size: 14px; flex: 1; min-width: 0; } .res-strip-repo { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface-3); border-radius: 999px; padding: 2px 8px; } .res-strip-span { font-weight: 700; font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; } .strip-bar { position: relative; height: 26px; border-radius: 8px; background: var(--surface-2); background-image: var(--cal-off); overflow: hidden; } .strip-work { position: absolute; top: 0; bottom: 0; background: var(--cal-work-bg); } .strip-gap { position: absolute; top: 3px; bottom: 3px; border-radius: 5px; z-index: 2; border: 1.4px dashed color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); cursor: pointer; transition: background .13s; } .strip-gap:hover { background: color-mix(in srgb, var(--accent) 26%, transparent); } .strip-appt { position: absolute; top: 2px; bottom: 2px; border-radius: 5px; z-index: 3; cursor: pointer; min-width: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); transition: transform .1s, filter .1s; } .strip-appt:hover { transform: scaleY(1.12); z-index: 4; filter: brightness(1.08); } /* Ολοκληρωμένο / ακυρωμένο: ξεχωρίζουν από ΜΟΤΙΒΟ, όχι από ξεθώριασμα — με opacity .32 το ραντεβού απλώς εξαφανιζόταν και δεν διαβαζόταν η μέρα. */ .strip-appt.done { opacity: .85; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38); } .strip-appt.skip { opacity: .7; background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .45) 0 3px, transparent 3px 6px); } .strip-now { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--danger); z-index: 5; pointer-events: none; } .strip-now::before { content: ""; position: absolute; top: -2px; left: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); } .res-strip-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 5px; font-size: 11px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; } .res-strip-free { color: var(--text-2); text-align: center; flex: 1; } .today-list { display: flex; flex-direction: column; } .today-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; min-height: 60px; border-top: 1px solid var(--border); transition: background .12s; } .today-item:hover { background: var(--surface-2); } .today-item.past { opacity: .62; } .today-time { font-weight: 750; font-variant-numeric: tabular-nums; width: 68px; flex: none; font-size: 14px; } .today-time small { display: block; font-weight: 550; color: var(--muted); font-size: 11.5px; } .today-info { flex: 1; min-width: 0; } .today-info .nm { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .type-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); font-weight: 600; } .today-actions { display: flex; gap: 4px; } .now-sep { display: flex; align-items: center; gap: 8px; padding: 2px 20px; color: var(--danger); font-size: 11px; font-weight: 700; } .now-sep::before, .now-sep::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: var(--danger); opacity: .5; } /* Γενέθλια πελατών */ .bday-card { margin-bottom: 16px; border-color: color-mix(in srgb, #ec4899 40%, var(--border)); } .bday-emoji { font-size: 20px; line-height: 1; } .bday-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--border); flex-wrap: wrap; } .bday-item .info { flex: 1; min-width: 150px; } .bday-item .nm { font-weight: 650; } .bday-item .sub { font-size: 12.5px; color: var(--text-2); } .bday-actions { display: flex; gap: 6px; align-items: center; } .bday-send.sent { background: var(--ok-soft); color: var(--ok-strong); pointer-events: none; } .bday-soon { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--border); font-size: 12.5px; } .bday-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-weight: 600; transition: border-color .13s, color .13s; } .bday-chip:hover { border-color: var(--accent); color: var(--accent-strong); } .bday-chip small { color: var(--muted); } /* Διακόπτης αποστολής email στο modal ραντεβού */ .am-email-row { border-top: 1px solid var(--border); } .am-email-ico { width: 34px; height: 34px; border-radius: 11px; flex: none; display: grid; place-items: center; color: #fff; background: var(--grad); } /* Κατάσταση SMTP στις ρυθμίσεις */ .smtp-state { display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; border-radius: 13px; margin-bottom: 6px; } .smtp-state div { display: grid; gap: 2px; } .smtp-state small { font-size: 12.5px; opacity: .9; } .smtp-state code { font-size: 12px; background: rgba(127, 127, 127, .16); padding: 1px 5px; border-radius: 5px; } .smtp-state.ok { background: var(--ok-soft); color: var(--ok-strong); } .smtp-state.off { background: var(--warn-soft); color: var(--warn-strong); } .notif-kinds { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; } /* Μηνύματα πελατών (πλευρά επαγγελματία) */ .nav-badge { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 750; line-height: 19px; text-align: center; margin-left: auto; } /* Ήρεμη ειδοποίηση: ένα χρώμα, χωρίς παλμό ή σκιά — ο μετρητής λέει ό,τι χρειάζεται. */ .msg-alert { display: flex; align-items: center; gap: 13px; padding: 12px 16px; margin-bottom: 16px; border-radius: var(--r-lg); background: var(--accent-soft); color: var(--accent-strong); transition: background .14s; } .msg-alert:hover { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); } .msg-alert-ico { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; color: #fff; background: var(--accent); } .msg-alert-txt { flex: 1; min-width: 0; display: grid; } .msg-alert-txt small { color: var(--text-2); font-size: 12.5px; } .msg-item { display: flex; gap: 13px; padding: 16px 20px; border-top: 1px solid var(--border); transition: opacity .24s, transform .24s, height .24s, padding .24s; } .msg-item:first-child { border-top: 0; } .msg-item.unread { background: color-mix(in srgb, var(--accent) 6%, transparent); } .msg-item.msg-gone { opacity: 0; transform: translateX(-24px); height: 0 !important; padding: 0 20px; overflow: hidden; } .msg-main { flex: 1; min-width: 0; } .msg-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .msg-subject { font-size: 15px; } .msg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex: none; } .msg-date { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .msg-from { font-size: 13px; color: var(--text-2); margin-top: 2px; display: flex; align-items: center; gap: 7px; } /* Το ίδιο όνομα κλάσης ζει και στη Διαχείριση (με εσοχή) — εδώ το κείμενο ξεκινά κάτω από τον τίτλο. */ .msg-item .msg-body { font-size: 14px; margin: 8px 0 10px; padding: 0; white-space: pre-line; line-height: 1.55; } .msg-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } /* Αιτήματα σε αναμονή (έγκριση από τον επαγγελματία) */ .pending-card { margin-bottom: 16px; border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); } .pending-card .card-head { color: var(--warn-strong); } .pending-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--border); flex-wrap: wrap; } .pending-info { flex: 1; min-width: 160px; } .pending-info .nm { font-weight: 650; } .pending-info .sub { font-size: 12.5px; color: var(--text-2); } .pending-actions { display: flex; gap: 6px; } /* Σήμα online κράτησης: το ξεχωρίζει από όσα καταχώρησε ο επαγγελματίας */ .online-mark { display: inline-grid; place-items: center; vertical-align: -2px; width: 16px; height: 16px; margin-left: 5px; flex: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); } .online-mark .icon { width: 11px; height: 11px; } .cal-appt .online-mark { width: 14px; height: 14px; margin-left: 4px; background: none; color: inherit; } .cal-appt .online-mark .icon { width: 12px; height: 12px; } .cal-mpill .online-mark { width: 12px; height: 12px; margin-left: 2px; background: none; color: var(--ap); } .cal-mpill .online-mark .icon { width: 10px; height: 10px; } .online-badge { display: inline-flex; align-items: center; gap: 5px; margin-right: auto; margin-left: 10px; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: 11.5px; font-weight: 700; } /* Περασμένα ραντεβού χωρίς κατάσταση — ξεκαθάρισμα με ένα κλικ */ .nav-badge-warn { background: var(--warn); color: #fff; } .bb-dot { position: absolute; top: 4px; right: 50%; margin-right: -16px; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); border: 2px solid var(--surface); box-sizing: content-box; } .bb-dot.msg { background: var(--danger); } .bb-item { position: relative; } .review-card { margin-bottom: 16px; border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); } .review-card .card-head { color: var(--warn-strong); } .review-card .card-head h3 { flex: 1; } .review-lead { font-size: 13px; color: var(--text-2); padding: 0 20px 10px; } .review-list { max-height: 460px; overflow-y: auto; } .review-more { font-size: 12.5px; color: var(--muted); padding: 11px 20px; border-top: 1px solid var(--border); } /* «Αργότερα»: μένει ο τίτλος με τον μετρητή, φεύγει ο όγκος */ .review-card.collapsed .review-lead, .review-card.collapsed .review-list, .review-card.collapsed .review-more { display: none; } .review-card.collapsed #review-collapse svg { transform: rotate(-90deg); } .review-item { display: grid; gap: 4px 12px; align-items: center; grid-template-columns: auto 1fr auto; padding: 12px 20px; border-top: 1px solid var(--border); transition: opacity .2s, transform .2s; } .review-item.done { opacity: 0; transform: translateX(26px); } .review-info { min-width: 0; } .review-info .nm { font-weight: 650; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .review-info .sub { font-size: 12.5px; color: var(--text-2); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .review-info .sub strong { color: var(--text); font-weight: 650; } /* Η τελίτσα του τύπου δεν ξεκόβει ποτέ από το όνομά του */ .review-type { display: inline-flex; align-items: center; gap: 5px; } .review-saved { font-size: 12.5px; margin-top: 5px; padding: 6px 9px; border-radius: 9px; background: var(--surface-2); color: var(--text-2); white-space: pre-line; } .review-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .review-acts .rv-note.on { color: var(--accent-strong); background: var(--accent-soft); } .review-note { grid-column: 1 / -1; display: grid; gap: 8px; margin-top: 8px; } .review-note-acts { display: flex; gap: 7px; } @media (max-width: 720px) { .review-item { grid-template-columns: auto 1fr; } .review-acts { grid-column: 1 / -1; justify-content: flex-start; margin-top: 6px; } } /* «Επόμενο: …» — ζει μέσα στην κάρτα του σημερινού προγράμματος, ως πρώτη γραμμή. */ .next-hint { display: flex; align-items: center; gap: 10px; background: var(--accent-soft); padding: 10px 20px; color: var(--accent-strong); font-weight: 600; font-size: 13.5px; } .next-hint .icon { width: 17px; height: 17px; } /* Όταν το επόμενο ραντεβού είναι άλλη μέρα, πάει ΚΑΤΩ από τη λίστα, διακριτικό — πάνω από το «Ελεύθερη μέρα» διάβαζε σαν αντίφαση. */ .next-hint.next-hint-foot { background: transparent; border-top: 1px solid var(--border); color: var(--text-2); font-weight: 500; } .next-hint.next-hint-foot strong { color: var(--text); font-weight: 700; } @media (max-width: 640px) { .next-hint { padding: 9px 14px; font-size: 13px; } } /* Mini ημερολόγιο */ .mini-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .mini-cal-head strong { font-size: 15px; text-transform: capitalize; } .mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .mini-dow { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--muted); padding: 4px 0; } .mini-day { position: relative; aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; transition: background .12s, color .12s, transform .12s; } .mini-day.heat { background: color-mix(in srgb, var(--heat, transparent) var(--heat-amt, 12%), var(--surface)); } html[data-theme="dark"] .mini-day.heat { background: color-mix(in srgb, var(--heat, transparent) calc(var(--heat-amt, 12%) + 6%), var(--surface)); } .mini-day:hover { background: var(--accent-soft); color: var(--accent-strong); transform: scale(1.08); } .mini-day.dim { opacity: .32; } .mini-day.today { box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent-strong); } .mini-day.has::after { content: ""; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 4.5px; height: 4.5px; border-radius: 50%; background: var(--accent); } .mini-day.many::after { width: 14px; border-radius: 3px; } .mini-day.off { color: var(--muted); text-decoration: line-through; } .quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .quick-btn { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; background: var(--surface-2); font-weight: 650; font-size: 13.5px; text-align: left; transition: background .13s, color .13s; } .quick-btn .icon { color: var(--accent); } .quick-btn:hover { background: var(--accent-soft); color: var(--accent-strong); } /* ============================================================ Ημερολόγιο */ .cal-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .cal-title { font-size: 19px; font-weight: 800; letter-spacing: -.015em; flex: 1; min-width: 180px; text-transform: capitalize; } .cal-nav { display: flex; align-items: center; gap: 4px; } .cal-datejump { position: relative; overflow: hidden; } .cal-datejump input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .cal-scroll { overflow-x: auto; overscroll-behavior-x: contain; } .cal-day-grid { display: flex; gap: 10px; min-width: fit-content; } .cal-gutter { width: 48px; flex: none; position: relative; } .cal-gutter-inner { position: relative; } .cal-hour-lbl { position: absolute; right: 6px; transform: translateY(-50%); font-size: 11px; font-weight: 650; color: var(--muted); font-variant-numeric: tabular-nums; } .cal-col { flex: 1; min-width: 250px; max-width: 520px; } .cal-col.single { max-width: none; } .cal-col-head { display: flex; align-items: center; gap: 8px; padding: 0 4px 8px; font-weight: 700; font-size: 14px; } .cal-col-head .cnt { margin-left: auto; } .cal-col-body { position: relative; border-radius: var(--r-lg); background: var(--surface-2); background-image: var(--cal-off); border: 1px solid var(--border); overflow: hidden; } .cal-work { position: absolute; left: 0; right: 0; background: var(--cal-work-bg); } .cal-hline { position: absolute; left: 0; right: 0; height: 1px; background: var(--border); opacity: .55; } .cal-timeoff { position: absolute; left: 4px; right: 4px; z-index: 3; border-radius: 10px; background: repeating-linear-gradient(-45deg, transparent 0 8px, var(--warn-soft) 8px 16px); border: 1.5px dashed var(--warn); color: var(--warn-strong); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 650; text-align: center; padding: 4px; } .cal-gap { position: absolute; left: 5px; right: 5px; z-index: 4; border: 1.5px dashed color-mix(in srgb, var(--accent) 60%, transparent); border-radius: 11px; background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--accent-strong); display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 650; cursor: pointer; transition: background .15s, border-color .15s; } .cal-gap:hover { background: var(--accent-soft); border-color: var(--accent); } .cal-gap .icon { width: 15px; height: 15px; } .cal-gap.tiny { font-size: 0; } .cal-gap.tiny .icon { width: 13px; height: 13px; } .cal-appt { position: absolute; z-index: 5; left: 5px; right: 5px; border-radius: 11px; padding: 5px 8px 5px 11px; overflow: hidden; cursor: pointer; /* ΑΔΙΑΦΑΝΟ γέμισμα: αναμειγνύεται με το φόντο του θέματος αντί για διαφάνεια. Η διαφάνεια έσβηνε το χρώμα πάνω στις γραμμές του πλέγματος και έκανε τα ραντεβού δυσδιάκριτα — ειδικά όταν η μέρα είναι γεμάτη. */ background: color-mix(in srgb, var(--ap) 20%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ap) 42%, transparent); transition: transform .13s, box-shadow .13s, filter .13s; display: flex; flex-direction: column; gap: 1px; } .cal-appt::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ap); } .cal-appt:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); z-index: 6; background: color-mix(in srgb, var(--ap) 30%, var(--surface)); border-color: var(--ap); } .cal-appt .t { font-size: 11px; font-weight: 750; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--ap) 70%, var(--text)); } .cal-appt .n { font-size: 12.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-appt .k { font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-appt.compact { flex-direction: row; align-items: center; gap: 6px; padding-top: 2px; padding-bottom: 2px; } .cal-appt.compact .k { display: none; } /* Ολοκληρωμένο: ξεχωρίζει από το ✓ και μια ήπια απόχρωση, ΟΧΙ από ξεθώριασμα. */ .cal-appt.done { background: color-mix(in srgb, var(--ap) 11%, var(--surface)); } .cal-appt.done .n::after { content: " ✓"; color: var(--ok-strong); font-weight: 800; } .cal-appt.noshow { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ap) 10%, var(--surface)) 0 7px, color-mix(in srgb, var(--ap) 18%, var(--surface)) 7px 14px); border-style: dashed; } .cal-appt.noshow .n { text-decoration: line-through; text-decoration-thickness: 1.5px; } .cal-now { position: absolute; left: 0; right: 0; z-index: 7; height: 2px; background: var(--danger); pointer-events: none; } .cal-now::before { content: ""; position: absolute; left: -1px; top: -3.5px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); animation: pulse 2s infinite; } .cal-closed-note { padding: 26px 12px; text-align: center; color: var(--muted); font-size: 13.5px; font-weight: 600; } /* Εβδομάδα */ .cal-week-grid { display: flex; gap: 6px; min-width: 860px; } .cal-wday { flex: 1; min-width: 0; } .cal-wday-head { text-align: center; padding: 4px 2px 8px; font-size: 12.5px; font-weight: 700; color: var(--text-2); border-radius: 10px; cursor: pointer; } .cal-wday-head strong { display: block; font-size: 16px; color: var(--text); } .cal-wday-head:hover { background: var(--accent-soft); } .cal-wday-head.today strong { color: var(--accent-strong); } .cal-wday-head .wcnt { font-size: 10.5px; color: var(--muted); font-weight: 650; } .cal-lanes { display: flex; } .cal-lane { flex: 1; position: relative; min-width: 0; } .cal-lane + .cal-lane { border-left: 1px dashed var(--border); } .cal-week .cal-appt { left: 2px; right: 2px; padding: 3px 4px 3px 7px; border-radius: 8px; } .cal-week .cal-appt .t { font-size: 9.5px; } .cal-week .cal-appt .n { font-size: 11px; } .cal-week .cal-appt .k { display: none; } /* Μήνας */ .cal-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; } .cal-mdow { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); padding: 2px 0 6px; } .cal-mday { min-height: 104px; border-radius: 13px; background: var(--surface); border: 1px solid var(--border); padding: 7px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; transition: transform .13s, box-shadow .13s, border-color .13s; text-align: left; } .cal-mday:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--accent); } .cal-mday.dim { opacity: .45; } .cal-mday.today { border-color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); } /* Θερμοχάρτης φόρτου: πράσινο (ελεύθερη) → κόκκινο (γεμάτη) */ .cal-mday.heat { background: color-mix(in srgb, var(--heat, transparent) var(--heat-amt, 14%), var(--surface)); } html[data-theme="dark"] .cal-mday.heat { background: color-mix(in srgb, var(--heat, transparent) calc(var(--heat-amt, 14%) + 6%), var(--surface)); } .cal-mday.closed { background: var(--surface-2); background-image: var(--cal-off); } .heat-legend { display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; margin-top: 14px; font-size: 12px; font-weight: 600; color: var(--text-2); } .heat-bar { width: 150px; max-width: 40vw; height: 10px; border-radius: 6px; background: linear-gradient(90deg, #10b981, #f59e0b, #ef4444); } .heat-legend-sep { width: 1px; height: 16px; background: var(--border-2); margin: 0 4px; } .heat-closed-key { display: inline-flex; align-items: center; gap: 6px; } .heat-closed-key i { width: 16px; height: 12px; border-radius: 4px; background: var(--surface-2); background-image: var(--cal-off); border: 1px solid var(--border); } .cal-mday-top { display: flex; align-items: center; justify-content: space-between; } .cal-mday-num { font-weight: 750; font-size: 13.5px; } .cal-mday.today .cal-mday-num { background: var(--accent); color: #fff; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; } .cal-mcnt { font-size: 10.5px; font-weight: 750; color: var(--accent-strong); background: var(--accent-soft); border-radius: 999px; padding: 1px 7px; } .cal-mpill { display: flex; align-items: center; gap: 5px; font-size: 10.8px; font-weight: 650; border-radius: 6px; padding: 1.5px 5px; background: color-mix(in srgb, var(--ap) 17%, var(--surface)); color: var(--text); white-space: nowrap; overflow: hidden; } .cal-mpill i { width: 6px; height: 6px; border-radius: 50%; background: var(--ap); flex: none; } .cal-mpill span { overflow: hidden; text-overflow: ellipsis; } .cal-mmore { font-size: 10.5px; color: var(--muted); font-weight: 650; } .cal-moff { font-size: 10.5px; font-weight: 700; color: var(--warn-strong); background: var(--warn-soft); border-radius: 6px; padding: 1.5px 6px; align-self: flex-start; } @media (max-width: 760px) { .cal-month { gap: 4px; } .cal-mday { min-height: 58px; padding: 5px; border-radius: 10px; } .cal-mpill, .cal-mmore { display: none; } .cal-mday-dots { display: flex; gap: 2.5px; flex-wrap: wrap; } .cal-mday-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } .cal-moff { font-size: 8.5px; padding: 1px 4px; } } @media (min-width: 761px) { .cal-mday-dots { display: none; } } .legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; font-size: 12.5px; color: var(--text-2); font-weight: 600; } .legend span { display: inline-flex; align-items: center; gap: 6px; } /* ============================================================ Πελάτες */ .client-cards { display: none; } @media (max-width: 760px) { .clients-table { display: none; } .client-cards { display: flex; flex-direction: column; } } .client-card { display: flex; align-items: center; gap: 12px; padding: 13px 16px; min-height: 64px; border-top: 1px solid var(--border); transition: background .12s; } .client-card:active { background: var(--surface-2); } .client-card:first-child { border-top: 0; } .client-card .info { flex: 1; min-width: 0; } .client-card .nm { font-weight: 700; } .client-card .sub { font-size: 12.5px; color: var(--text-2); display: flex; gap: 10px; flex-wrap: wrap; } .profile-head { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; } .profile-head .info { flex: 1; min-width: 220px; } .contact-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .contact-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px; font-size: 13px; font-weight: 600; color: var(--text-2); transition: border-color .13s, color .13s; } .contact-chip:hover { border-color: var(--accent); color: var(--accent-strong); } .contact-chip .icon { width: 15px; height: 15px; } .hist-item { display: flex; gap: 14px; padding: 13px 20px; border-top: 1px solid var(--border); } .hist-when { width: 108px; flex: none; } .hist-when .d { font-weight: 700; font-size: 13.5px; } .hist-when .t { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; } .hist-body { flex: 1; min-width: 0; } .hist-notes { font-size: 13px; color: var(--text-2); margin-top: 3px; white-space: pre-line; } .hist-side { display: flex; align-items: center; gap: 8px; } .year-sep { padding: 9px 20px 4px; font-size: 12px; font-weight: 800; color: var(--muted); border-top: 1px solid var(--border); letter-spacing: .04em; } .save-ind { font-size: 12.5px; color: var(--ok-strong); font-weight: 650; opacity: 0; transition: opacity .2s; } .save-ind.show { opacity: 1; } /* ============================================================ Λίστα ραντεβού */ /* Φίλτρα: μία γραμμή στον υπολογιστή, στοίβα στο κινητό (dashboard.css). */ .filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; } .filters .select { width: auto; min-width: 140px; font-size: 14px; } .filters .search-wrap { flex: 1; min-width: 200px; } .filters .input { font-size: 14px; } .chip-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } .chip-row a { padding: 7px 13px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 13px; font-weight: 650; color: var(--text-2); transition: all .13s; } .chip-row a:hover { border-color: var(--accent); color: var(--accent-strong); } .chip-row a.on { background: var(--accent); border-color: var(--accent); color: #fff; } .day-group-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 8px; font-weight: 750; font-size: 14px; text-transform: capitalize; background: var(--surface-2); } .day-group-head:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; } .day-group-head .badge { font-size: 11px; } .appt-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 60px; border-top: 1px solid var(--border); transition: background .12s; } .appt-row:hover { background: var(--surface-2); } .appt-row:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); } .appt-row .when { width: 92px; flex: none; font-weight: 750; font-variant-numeric: tabular-nums; font-size: 14px; } .appt-row .when small { display: block; color: var(--muted); font-weight: 550; font-size: 12px; } .appt-row .who { flex: 1; min-width: 0; } .appt-row .who .nm { font-weight: 650; } .appt-row .side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .summary-line { display: flex; gap: 14px; flex-wrap: wrap; color: var(--text-2); font-size: 13.5px; font-weight: 600; margin-bottom: 12px; } .summary-line strong { color: var(--text); } /* ============================================================ Ρυθμίσεις */ .set-tabs { margin-bottom: 18px; overflow-x: auto; } .set-tabs .seg { min-width: max-content; } .set-pane[hidden] { display: none; } .item-row { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-top: 1px solid var(--border); } .item-row:first-child { border-top: 0; } .item-row .info { flex: 1; min-width: 0; } .item-row .nm { font-weight: 700; } .item-row .sub { font-size: 13px; color: var(--text-2); } .color-swatches { display: flex; gap: 8px; flex-wrap: wrap; } .color-swatches button { width: 30px; height: 30px; border-radius: 10px; border: 2.5px solid transparent; transition: transform .12s, border-color .12s; } .color-swatches button:hover { transform: scale(1.12); } .color-swatches button.on { border-color: var(--text); transform: scale(1.12); } /* Γραμμή ρύθμισης με διακόπτη */ .opt-row { display: flex; align-items: center; gap: 14px; padding: 14px 0 2px; margin-top: 6px; border-top: 1px solid var(--border); } .opt-row .info { flex: 1; min-width: 0; } .opt-row .nm { font-weight: 650; font-size: 14px; } .opt-row .sub { font-size: 13px; color: var(--text-2); margin-top: 2px; } /* Φωτογραφίες στις ρυθμίσεις */ .photo-row { display: flex; align-items: center; gap: 14px; } .photo-preview { width: 70px; height: 70px; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden; background: var(--surface-3); color: var(--muted); border: 1px solid var(--border); } .photo-preview img { width: 100%; height: 100%; object-fit: cover; } .photo-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .photo-actions .btn { cursor: pointer; } .staff-thumb { width: 42px; height: 42px; border-radius: 50%; flex: none; object-fit: cover; display: grid; place-items: center; color: #fff; font-weight: 750; font-size: 15px; } .staff-thumb-empty { display: grid; place-items: center; } /* Επιλογέας θέματος σελίδας κρατήσεων */ .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 9px; } .theme-card { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 5px; padding: 14px 8px 12px; border-radius: 15px; border: 1.5px solid var(--border); background: var(--surface); font-size: 12.5px; font-weight: 650; color: var(--text); transition: transform .15s cubic-bezier(.2,1.2,.4,1), border-color .15s, box-shadow .15s; } .theme-card small { font-size: 11px; color: var(--text-2); font-weight: 550; } /* Μικρογραφία διάταξης: μικρό «wireframe» της πραγματικής σελίδας */ .tp { position: relative; display: block; width: 100%; height: 62px; margin-bottom: 6px; border-radius: 8px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); } .tp i { position: absolute; display: block; background: var(--border-2); border-radius: 2px; } .tp .tp-photo { background: var(--tc); } .tp .tp-block { background: color-mix(in srgb, var(--tc) 30%, var(--border-2)); } /* κλασικό: φωτογραφία-κύκλος κέντρο, γραμμές, μπλοκ */ .tp-classic .tp-photo { width: 14px; height: 14px; border-radius: 50%; top: 6px; left: 50%; margin-left: -7px; } .tp-classic .tp-line { width: 30px; height: 3px; top: 24px; left: 50%; margin-left: -15px; } .tp-classic .tp-line.short { width: 18px; top: 30px; margin-left: -9px; } .tp-classic .tp-block { width: 70%; height: 9px; left: 15%; top: 38px; } .tp-classic .tp-block:last-child { top: 50px; } /* γυάλινο: διάφανα πάνελ πάνω σε ντεγκραντέ */ .tp-glass { background: linear-gradient(135deg, var(--tc), var(--tc2)); } .tp-glass .tp-photo { width: 14px; height: 14px; border-radius: 50%; top: 7px; left: 50%; margin-left: -7px; background: rgba(255,255,255,.85); } .tp-glass .tp-line { display: none; } .tp-glass .tp-block { width: 38%; height: 20px; top: 27px; left: 8%; background: rgba(255,255,255,.4); } .tp-glass .tp-block:last-child { left: 54%; } /* πανό: φαρδύ εξώφυλλο επάνω */ .tp-banner .tp-photo { width: 100%; height: 26px; top: 0; left: 0; border-radius: 0; } .tp-banner .tp-line { width: 22px; height: 3px; top: 15px; left: 6px; background: rgba(255,255,255,.9); } .tp-banner .tp-line.short { display: none; } .tp-banner .tp-block { width: 88%; height: 10px; left: 6%; top: 32px; } .tp-banner .tp-block:last-child { top: 46px; } /* δίστηλο */ .tp-split .tp-photo { width: 26px; height: 16px; top: 7px; left: 6px; } .tp-split .tp-line { width: 20px; height: 3px; top: 27px; left: 6px; } .tp-split .tp-line.short { width: 14px; top: 33px; } .tp-split .tp-block { width: 44%; height: 46px; top: 7px; right: 6px; left: auto; } .tp-split .tp-block:last-child { display: none; } /* μωσαϊκό: πλέγμα φωτογραφιών επάνω */ .tp-mosaic .tp-photo { width: 26px; height: 24px; top: 4px; left: 5px; } .tp-mosaic .tp-line { width: 12px; height: 11px; top: 4px; left: 34px; background: var(--tc); opacity: .7; } .tp-mosaic .tp-line.short { width: 12px; height: 11px; top: 17px; left: 34px; } .tp-mosaic .tp-block { width: 82%; height: 10px; left: 9%; top: 34px; } .tp-mosaic .tp-block:last-child { top: 47px; } /* λιτό: μικρό avatar αριστερά, γραμμές */ .tp-minimal .tp-photo { width: 9px; height: 9px; top: 7px; left: 6px; border-radius: 2px; } .tp-minimal .tp-line { width: 26px; height: 3px; top: 10px; left: 19px; } .tp-minimal .tp-line.short { display: none; } .tp-minimal .tp-block { width: 88%; height: 12px; left: 6%; top: 24px; } .tp-minimal .tp-block:last-child { top: 40px; height: 8px; width: 40%; } /* κάρτα-ήρωας */ .tp-cardhero .tp-photo { width: 88%; height: 30px; top: 5px; left: 6%; border-radius: 7px; } .tp-cardhero .tp-line { width: 20px; height: 3px; top: 26px; left: 12px; background: rgba(255,255,255,.9); } .tp-cardhero .tp-line.short { display: none; } .tp-cardhero .tp-block { width: 40%; height: 13px; top: 41px; left: 6%; border-radius: 99px; } .tp-cardhero .tp-block:last-child { left: 54%; } /* περιοδικό: τίτλος αριστερά, εικόνα δεξιά */ .tp-magazine .tp-photo { width: 20px; height: 30px; top: 6px; right: 6px; left: auto; border-radius: 0; } .tp-magazine .tp-line { width: 30px; height: 5px; top: 8px; left: 6px; } .tp-magazine .tp-line.short { width: 20px; height: 3px; top: 18px; } .tp-magazine .tp-block { width: 88%; height: 9px; left: 6%; top: 40px; border-radius: 0; } .tp-magazine .tp-block:last-child { top: 51px; } /* νέον */ .tp-neon { background: #0a0f1e; border-color: var(--tc); } .tp-neon .tp-photo { width: 13px; height: 13px; border-radius: 50%; top: 6px; left: 50%; margin-left: -6px; box-shadow: 0 0 8px var(--tc); } .tp-neon .tp-line { width: 26px; height: 3px; top: 24px; left: 50%; margin-left: -13px; background: var(--tc2); } .tp-neon .tp-line.short { display: none; } .tp-neon .tp-block { width: 38%; height: 18px; top: 33px; left: 8%; border: 1px solid var(--tc); background: transparent; } .tp-neon .tp-block:last-child { left: 54%; } /* συμπαγές */ .tp-compact .tp-photo { width: 8px; height: 8px; top: 5px; left: 5px; border-radius: 2px; } .tp-compact .tp-line { width: 20px; height: 2px; top: 8px; left: 16px; } .tp-compact .tp-line.short { display: none; } .tp-compact .tp-block { width: 90%; height: 6px; left: 5%; top: 18px; } .tp-compact .tp-block:last-child { top: 27px; } .tp-compact::after { content: ""; position: absolute; left: 5%; right: 5%; top: 36px; height: 6px; background: var(--border-2); border-radius: 2px; box-shadow: 0 9px 0 var(--border-2), 0 18px 0 var(--border-2); } .theme-card:hover { transform: translateY(-3px); border-color: var(--tc); box-shadow: var(--shadow-2); } .theme-card.on { border-color: var(--tc); box-shadow: inset 0 0 0 1.5px var(--tc); } .theme-card.on::after { content: ""; position: absolute; inset: 0; background: var(--tc); opacity: .07; } .theme-dots { display: flex; gap: -6px; } .theme-dots i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--surface); margin-left: -7px; box-shadow: 0 1px 3px rgba(0,0,0,.15); } .theme-dots i:first-child { margin-left: 0; } /* Γκαλερί στις ρυθμίσεις */ .gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; } .gal-cell { position: relative; aspect-ratio: 4 / 3; border-radius: 11px; overflow: hidden; border: 1px solid var(--border); } .gal-cell img { width: 100%; height: 100%; object-fit: cover; } .gal-del { position: absolute; top: 5px; right: 5px; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: rgba(2, 6, 23, .62); color: #fff; opacity: 0; transition: opacity .15s, background .15s; } .gal-cell:hover .gal-del { opacity: 1; } .gal-del:hover { background: var(--danger); } @media (hover: none) { .gal-del { opacity: 1; } } /* Διεύθυνση σελίδας κρατήσεων */ .slug-row { display: flex; align-items: center; gap: 0; } .slug-prefix { flex: none; max-width: 45%; padding: 0 10px; height: 40px; display: inline-flex; align-items: center; border: 1px solid var(--border); border-right: 0; border-radius: 11px 0 0 11px; background: var(--surface-3); color: var(--text-2); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .slug-row .input { border-radius: 0 11px 11px 0; min-width: 0; } .slug-row .input:disabled { background: var(--surface-2); color: var(--text-2); cursor: not-allowed; } .booking-live { margin-top: 12px; padding: 12px 14px; border-radius: 13px; background: var(--accent-soft); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .booking-url { flex: 1; min-width: 180px; font-weight: 700; font-size: 13.5px; color: var(--accent-strong); word-break: break-all; } .booking-live-actions { display: flex; gap: 6px; } .data-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; } @media (max-width: 860px) { .data-grid { grid-template-columns: 1fr; } } .data-grid .card-pad { display: flex; flex-direction: column; gap: 8px; } .data-grid h3 { margin-top: 2px; } .data-grid p { font-size: 13.5px; flex: 1; } .data-grid .btn { margin-top: 4px; } .data-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: var(--grad); margin-bottom: 4px; } .data-ico.teal { background: linear-gradient(135deg, #0ea5e9, #14b8a6); } .data-ico.amber { background: linear-gradient(135deg, #f59e0b, #f97316); } /* Υπηρεσίες ανά θέση/υπάλληλο */ .svc-picker { padding: 4px 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; } .svc-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: 13.5px; } .svc-head .muted { font-size: 12px; } .svc-chips { display: flex; flex-wrap: wrap; gap: 6px; } .svc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 12.5px; font-weight: 650; color: var(--text-2); transition: border-color .13s, background .13s, color .13s; } .svc-chip:hover { border-color: var(--accent); color: var(--accent-strong); } .svc-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); } .res-card { margin-bottom: 16px; } .hours-day { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--border); } .hours-day-name { width: 92px; flex: none; font-weight: 650; font-size: 13.5px; padding-top: 8px; } .hours-rows { flex: 1; display: flex; flex-direction: column; gap: 6px; } .hours-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .hours-row .input { width: 108px; height: 36px; font-size: 13.5px; } .hours-closed { color: var(--muted); font-size: 13px; font-weight: 600; padding-top: 8px; } .hours-add { align-self: flex-start; } /* ============================================================ Στατιστικά Οι κάρτες αριθμών (.stats-cards) μοιράζονται το στιλ του .stat-grid πιο πάνω. */ .stats-charts { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; } .stats-charts + .stats-charts { margin-top: 16px; } .stats-charts > * { min-width: 0; } .stats-col { display: flex; flex-direction: column; gap: 16px; } @media (max-width: 980px) { .stats-charts { grid-template-columns: 1fr; } } .chart-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .chart-head h3 { flex: 1; } .chart-box svg { width: 100%; height: auto; display: block; } .st-table-scroll { max-height: 300px; overflow-y: auto; } .st-range { margin-bottom: 20px; } .st-range .input { width: auto; } .chart-legend { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .chart-legend .row { display: flex; align-items: center; gap: 9px; font-size: 13.5px; } .chart-legend .row .flex-1 { font-weight: 600; } .chart-legend .val { font-weight: 750; font-variant-numeric: tabular-nums; } .chart-tip-target { cursor: pointer; } /* ============================================================ Login Μία κάρτα στο κέντρο: σήμα, μία πρόταση αξίας, τρία οφέλη, φόρμα. Χωρίς επινοημένα νούμερα — μόνο ό,τι ισχύει για κάθε λογαριασμό. */ .login-body { min-height: 100dvh; display: grid; place-items: center; padding: 20px; position: relative; } .login-bg { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; } .login-blob { position: absolute; border-radius: 50%; filter: blur(64px); will-change: transform; } .login-blob.b1 { width: 460px; height: 460px; background: #6366f1; opacity: .35; top: -150px; left: -130px; animation: drift-a 24s ease-in-out infinite; } .login-blob.b2 { width: 400px; height: 400px; background: #a855f7; opacity: .3; bottom: -150px; right: -110px; animation: drift-b 30s ease-in-out infinite; } html[data-theme="dark"] .login-blob { opacity: .28; } .login-card { position: relative; z-index: 1; width: min(440px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-pop); padding: 32px 30px 26px; } .login-card .brand { justify-content: center; margin-bottom: 18px; padding: 0; } .login-card h1 { font-size: 24px; text-align: center; margin-bottom: 6px; } .login-lead { color: var(--text-2); font-size: 14.5px; text-align: center; margin-bottom: 18px; line-height: 1.5; } .login-perks { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; } .login-perks li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-2); font-weight: 550; } .login-perks .icon { width: 18px; height: 18px; color: var(--ok); flex: none; } .remember-row { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 18px; font-size: 13.5px; color: var(--text-2); } .remember-row label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; } .remember-row input { width: 16px; height: 16px; accent-color: var(--accent); } .login-foot { margin-top: 18px; text-align: center; font-size: 13px; color: var(--muted); line-height: 1.6; } .login-foot a { color: var(--text-2); font-weight: 600; } .login-foot a:hover { color: var(--accent-strong); } @media (max-width: 480px) { .login-body { padding: 14px; align-items: start; padding-top: 32px; } .login-card { padding: 26px 20px 22px; } } /* ============================================================ Δημόσιες κρατήσεις */ /* --- Τα 10 θέματα ------------------------------------------------------- Κάθε θέμα είναι ξεχωριστή ΔΙΑΤΑΞΗ: αλλάζει η θέση της φωτογραφίας, η θέση και το στήσιμο της γκαλερί, ο τρόπος που δείχνουν οι υπηρεσίες και ο δείκτης βημάτων. Η λειτουργικότητα μένει ίδια παντού. */ .bk-body { --bk-1: #5b5bf6; --bk-2: #a21cf0; --bk-3: #06d6f7; --bk-radius: 22px; --bk-blur: 64px; --accent: var(--bk-1); --accent-strong: color-mix(in srgb, var(--bk-1) 78%, #000); --accent-soft: color-mix(in srgb, var(--bk-1) 13%, var(--surface)); --accent-ring: color-mix(in srgb, var(--bk-1) 32%, transparent); --grad: linear-gradient(135deg, var(--bk-1), var(--bk-2)); } html[data-theme="dark"] .bk-body { --accent-strong: color-mix(in srgb, var(--bk-1) 62%, #fff); --accent-soft: color-mix(in srgb, var(--bk-1) 22%, var(--surface)); } .bk-body[data-bk-theme="glass"] { --bk-1: #7c3aed; --bk-2: #0ea5e9; --bk-3: #f472b6; --bk-radius: 24px; } .bk-body[data-bk-theme="ocean"] { --bk-1: #0074c8; --bk-2: #00bcd4; --bk-3: #3fc8ff; --bk-radius: 16px; } .bk-body[data-bk-theme="emerald"] { --bk-1: #00a86b; --bk-2: #12d98a; --bk-3: #a3e635; --bk-radius: 18px; } .bk-body[data-bk-theme="amber"] { --bk-1: #f08c00; --bk-2: #ffb703; --bk-3: #ff5d8f; --bk-radius: 20px; } .bk-body[data-bk-theme="noir"] { --bk-1: #b8912f; --bk-2: #e9cf8a; --bk-3: #8b8f9a; --bk-radius: 4px; --bk-blur: 84px; } .bk-body[data-bk-theme="rose"] { --bk-1: #f2166b; --bk-2: #ff5a5f; --bk-3: #ffb01f; --bk-radius: 28px; } .bk-body[data-bk-theme="magazine"] { --bk-1: #c2410c; --bk-2: #1f2937; --bk-3: #eab308; --bk-radius: 2px; } .bk-body[data-bk-theme="neon"] { --bk-1: #00f5d4; --bk-2: #7b2ff7; --bk-3: #ff2e97; --bk-radius: 14px; } .bk-body[data-bk-theme="compact"] { --bk-1: #0ea5e9; --bk-2: #334155; --bk-3: #64748b; --bk-radius: 10px; } .bk-body .bk-aura i { opacity: .5; } html[data-theme="dark"] .bk-body .bk-aura i { opacity: .38; } .bk-body .bk-card { border-radius: var(--bk-radius); } .bk-body .bk-service, .bk-body .bk-staff-card { border-radius: calc(var(--bk-radius) * .62); } .bk-body .bk-time, .bk-body .bk-day, .bk-body .bk-mday { border-radius: calc(var(--bk-radius) * .5); } /* Η στήλη γίνεται grid ώστε τα θέματα να αναδιατάσσουν τα κομμάτια */ .bk-wrap { display: flex; flex-direction: column; } .bk-head { order: 1; } .bk-gallery { order: 2; } .bk-card { order: 3; } .bk-foot { order: 5; } /* ---------- Αρχικό μενού της σελίδας κρατήσεων ---------- Τρεις δρόμοι αντί για έναν: κράτηση, ακύρωση, επικοινωνία. Κάθε «pane» είναι .bk-card, ώστε να παίρνει αυτούσια τη διακόσμηση κάθε θέματος — και επειδή φαίνεται ΕΝΑ κάθε φορά, δεν συγκρούονται στις grid διατάξεις. */ .bk-choices { display: flex; flex-direction: column; gap: 10px; } .bk-choice { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px 16px; border-radius: calc(var(--bk-radius, 16px) * .62); border: 1px solid var(--border); background: var(--surface); transition: border-color .15s, transform .15s, box-shadow .15s; animation: bk-rise .4s cubic-bezier(.2,.9,.3,1) var(--d, 0ms) both; } .bk-choice:nth-child(1) { --d: 40ms; } .bk-choice:nth-child(2) { --d: 110ms; } .bk-choice:nth-child(3) { --d: 180ms; } .bk-choice:hover { border-color: var(--bk-1, var(--accent)); transform: translateY(-2px); box-shadow: 0 10px 24px -14px var(--bk-1, var(--accent)); } .bk-choice:active { transform: translateY(0); } .bk-choice-ico { width: 46px; height: 46px; border-radius: 14px; flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--bk-1, #6366f1), var(--bk-2, #8b5cf6)); } .bk-choice-ico.cancel { background: linear-gradient(135deg, #ef4444, #f97316); } .bk-choice-ico.contact { background: linear-gradient(135deg, #10b981, #14b8a6); } .bk-choice-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .bk-choice-txt strong { font-size: 15.5px; } .bk-choice-txt small { font-size: 12.5px; color: var(--text-2); line-height: 1.45; } .bk-choice-go { color: var(--muted); flex: none; } /* «Πίσω στην αρχή» — ίδια θέση σε κάθε pane, ώστε να μη χρειάζεται ψάξιμο. */ .bk-home { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 12px; padding: 6px 12px 6px 8px; border-radius: 999px; font-size: 13px; font-weight: 650; color: var(--text-2); background: var(--surface-3); border: 1px solid transparent; transition: color .14s, border-color .14s; } .bk-home:hover { color: var(--text); border-color: var(--border-2); } /* ---------- Ποιος είναι συνδεδεμένος ---------- */ .bk-account { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-3); } .bk-account-photo, .bk-account-avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; object-fit: cover; } .bk-account-avatar { display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; background: linear-gradient(135deg, var(--bk-1, #6366f1), var(--bk-2, #8b5cf6)); } .bk-account-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .bk-account-txt small { font-size: 11.5px; color: var(--muted); } .bk-account-txt strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bk-account-txt em { font-size: 11px; color: var(--muted); font-style: normal; } .bk-account-out { flex: none; } @media (max-width: 420px) { .bk-account-out span { display: none; } .bk-choice { padding: 14px 13px; gap: 11px; } .bk-choice-ico { width: 40px; height: 40px; border-radius: 12px; } .bk-choice-txt strong { font-size: 14.5px; } .bk-choice-txt small { font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .bk-choice { animation: none; } .bk-choice:hover { transform: none; } } .bk-photo-wrap { display: block; width: 96px; margin: 0 auto 12px; position: relative; } .bk-photo { width: 96px; height: 96px; margin: 0; display: block; border-radius: 50%; } /* ---------- 1. Κλασικό (indigo): φωτογραφία κέντρο, δαχτυλίδι ---------- */ [data-bk-theme="indigo"] .bk-photo-wrap::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: conic-gradient(from 0deg, var(--bk-1), var(--bk-2), var(--bk-3), var(--bk-1)); animation: spin 9s linear infinite; } [data-bk-theme="indigo"] .bk-photo { position: relative; } /* ---------- 2. Γυάλινο: διάφανα πάνελ πάνω σε ζωντανό ντεγκραντέ ---------- */ .bk-body[data-bk-theme="glass"] { --surface: rgba(255, 255, 255, .16); --surface-2: rgba(255, 255, 255, .10); --surface-3: rgba(255, 255, 255, .16); --border: rgba(255, 255, 255, .30); --border-2: rgba(255, 255, 255, .42); --text: #fff; --text-2: rgba(255, 255, 255, .84); --muted: rgba(255, 255, 255, .66); --accent-soft: rgba(255, 255, 255, .22); --accent-strong: #fff; --shadow-1: 0 8px 24px rgba(15, 23, 42, .18); --shadow-2: 0 18px 44px rgba(15, 23, 42, .28); background: linear-gradient(125deg, #6d28d9, #0ea5e9 38%, #db2777 72%, #f59e0b); background-size: 320% 320%; animation: glass-flow 22s ease-in-out infinite; } [data-bk-theme="glass"] .bk-aura, [data-bk-theme="glass"] .bk-motion b { mix-blend-mode: overlay; } [data-bk-theme="glass"] .bk-card, [data-bk-theme="glass"] .bk-service, [data-bk-theme="glass"] .bk-staff-card, [data-bk-theme="glass"] .bk-contact-btn, [data-bk-theme="glass"] .bk-time, [data-bk-theme="glass"] .bk-day, [data-bk-theme="glass"] .bk-mday { -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); } [data-bk-theme="glass"] .bk-head h1 { text-shadow: 0 2px 14px rgba(0, 0, 0, .28); } [data-bk-theme="glass"] .bk-photo { border: 3px solid rgba(255, 255, 255, .6); } [data-bk-theme="glass"] .btn-primary { background: rgba(255, 255, 255, .92); color: #4c1d95; } [data-bk-theme="glass"] .bk-shot { border-color: rgba(255, 255, 255, .4); } @keyframes glass-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ---------- 3. Πανό (ocean): εξώφυλλο πλήρους πλάτους, όνομα επάνω ---------- */ [data-bk-theme="ocean"] .bk-head { position: relative; padding: 0; margin-bottom: 16px; border-radius: var(--bk-radius); overflow: hidden; min-height: 190px; display: flex; flex-direction: column; justify-content: flex-end; background: var(--grad); } [data-bk-theme="ocean"] .bk-photo-wrap { width: 100%; margin: 0; position: absolute; inset: 0; } [data-bk-theme="ocean"] .bk-photo { width: 100%; height: 100%; border-radius: 0; object-fit: cover; filter: brightness(.62); } [data-bk-theme="ocean"] .bk-head h1, [data-bk-theme="ocean"] .bk-head p { position: relative; z-index: 1; color: #fff; padding: 0 18px; } [data-bk-theme="ocean"] .bk-head h1 { font-size: 26px; text-align: left; } [data-bk-theme="ocean"] .bk-head p { text-align: left; opacity: .9; } [data-bk-theme="ocean"] .bk-contact { position: relative; z-index: 1; justify-content: flex-start; padding: 0 18px 18px; } [data-bk-theme="ocean"] .bk-contact-btn { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .35); color: #fff; } [data-bk-theme="ocean"] .bk-contact-btn .icon { color: #fff; } [data-bk-theme="ocean"] .bk-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; overflow: visible; } [data-bk-theme="ocean"] .bk-shot { width: auto; height: 92px; } /* ---------- 4. Δίστηλο (emerald): πληροφορίες αριστερά, κράτηση δεξιά ---------- */ @media (min-width: 900px) { [data-bk-theme="emerald"] .bk-wrap { display: grid; width: min(940px, 100%); grid-template-columns: 290px 1fr; gap: 24px; align-items: start; } [data-bk-theme="emerald"] .bk-head { grid-column: 1; order: 0; text-align: left; position: sticky; top: 24px; } [data-bk-theme="emerald"] .bk-head h1 { text-align: left; } [data-bk-theme="emerald"] .bk-head p { text-align: left; } [data-bk-theme="emerald"] .bk-photo-wrap { margin: 0 0 14px; } [data-bk-theme="emerald"] .bk-contact { justify-content: flex-start; } [data-bk-theme="emerald"] .bk-gallery { grid-column: 1; order: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow: visible; } [data-bk-theme="emerald"] .bk-shot { width: auto; height: 84px; } [data-bk-theme="emerald"] .bk-card { grid-column: 2; order: 0; } [data-bk-theme="emerald"] .bk-foot { grid-column: 1 / -1; } } [data-bk-theme="emerald"] .bk-photo { border-radius: 20px; width: 100%; height: 150px; object-fit: cover; } [data-bk-theme="emerald"] .bk-photo-wrap { width: 100%; max-width: 220px; } /* ---------- 5. Μωσαϊκό (amber): η γκαλερί είναι το εξώφυλλο ---------- */ [data-bk-theme="amber"] .bk-gallery { order: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 78px; gap: 7px; overflow: visible; margin-bottom: 0; } [data-bk-theme="amber"] .bk-shot { width: auto; height: 100%; } [data-bk-theme="amber"] .bk-shot:first-child { grid-column: span 2; grid-row: span 2; } [data-bk-theme="amber"] .bk-head { margin-top: -34px; } [data-bk-theme="amber"] .bk-photo-wrap { width: 76px; } [data-bk-theme="amber"] .bk-photo { width: 76px; height: 76px; border: 4px solid var(--bg); box-shadow: var(--shadow-2); } [data-bk-theme="amber"] .bk-head h1 { font-size: 20px; } /* ---------- 6. Λιτό (noir): τυπογραφικό, γκαλερί στο τέλος ---------- */ [data-bk-theme="noir"] .bk-head { display: flex; align-items: center; gap: 14px; text-align: left; border-bottom: 1px solid var(--border); padding-bottom: 16px; } [data-bk-theme="noir"] .bk-photo-wrap { width: 54px; margin: 0; flex: none; } [data-bk-theme="noir"] .bk-photo { width: 54px; height: 54px; border-radius: 2px; } [data-bk-theme="noir"] .bk-head h1 { text-align: left; font-size: 17px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; } [data-bk-theme="noir"] .bk-head p { text-align: left; font-size: 12px; letter-spacing: .04em; } [data-bk-theme="noir"] .bk-contact { justify-content: flex-start; margin-left: auto; margin-top: 0; } [data-bk-theme="noir"] .bk-gallery { order: 6; margin: 18px 0 0; } [data-bk-theme="noir"] .bk-shot { border-radius: 0; width: 120px; height: 88px; } [data-bk-theme="noir"] .bk-card { border-radius: 0; border-left: 3px solid var(--bk-1); } [data-bk-theme="noir"] .bk-h { letter-spacing: .04em; text-transform: uppercase; font-size: 14px; } /* ---------- 7. Κάρτα (rose): μεγάλη φωτογραφία-κάρτα με το όνομα μέσα ---------- */ [data-bk-theme="rose"] .bk-head { position: relative; border-radius: 28px; overflow: hidden; min-height: 230px; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 18px; margin-bottom: 16px; background: var(--grad); box-shadow: var(--shadow-2); } [data-bk-theme="rose"] .bk-photo-wrap { position: absolute; inset: 0; width: 100%; margin: 0; } [data-bk-theme="rose"] .bk-photo { width: 100%; height: 100%; border-radius: 0; object-fit: cover; filter: brightness(.68) saturate(1.2); } [data-bk-theme="rose"] .bk-head h1 { position: relative; z-index: 1; color: #fff; font-size: 27px; letter-spacing: -.03em; } [data-bk-theme="rose"] .bk-head p { position: relative; z-index: 1; color: rgba(255, 255, 255, .9); } [data-bk-theme="rose"] .bk-contact { position: relative; z-index: 1; } [data-bk-theme="rose"] .bk-contact-btn { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .4); color: #fff; } [data-bk-theme="rose"] .bk-contact-btn .icon { color: #fff; } [data-bk-theme="rose"] .bk-shot { border-radius: 20px; } [data-bk-theme="rose"] .bk-shot:nth-child(odd) { transform: rotate(-1.8deg); } [data-bk-theme="rose"] .bk-shot:nth-child(even) { transform: rotate(1.8deg); } /* ---------- 8. Περιοδικό (magazine): τίτλος αριστερά, εικόνα δεξιά ---------- */ [data-bk-theme="magazine"] .bk-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; text-align: left; border-top: 4px solid var(--bk-2); border-bottom: 1px solid var(--border); padding: 14px 0 18px; } [data-bk-theme="magazine"] .bk-photo-wrap { grid-column: 2; grid-row: 1 / span 3; width: 108px; margin: 0; align-self: start; } [data-bk-theme="magazine"] .bk-photo { width: 108px; height: 132px; border-radius: 0; object-fit: cover; } [data-bk-theme="magazine"] .bk-head h1 { text-align: left; font-size: 30px; line-height: 1.05; letter-spacing: -.035em; grid-column: 1; } [data-bk-theme="magazine"] .bk-head p { text-align: left; grid-column: 1; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; } [data-bk-theme="magazine"] .bk-contact { justify-content: flex-start; grid-column: 1; } [data-bk-theme="magazine"] .bk-contact-btn { border-radius: 0; } [data-bk-theme="magazine"] .bk-gallery { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; overflow: visible; } [data-bk-theme="magazine"] .bk-shot { width: auto; height: 100px; border-radius: 0; } [data-bk-theme="magazine"] .bk-card { border-radius: 0; } [data-bk-theme="magazine"] .bk-h { font-size: 20px; letter-spacing: -.02em; } /* ---------- 9. Νέον: σκούρο με φωτεινά περιγράμματα ---------- */ .bk-body[data-bk-theme="neon"] { --surface: #0b1020; --surface-2: #10172c; --surface-3: #16203a; --bg: #060814; --border: #1f2b4d; --border-2: #2c3a63; --text: #e8f1ff; --text-2: #9fb2d4; --muted: #6b7fa6; --accent-soft: rgba(0, 245, 212, .14); --accent-strong: #00f5d4; background: radial-gradient(1200px 600px at 50% -10%, #131c3a, #060814 60%); } [data-bk-theme="neon"] .bk-card { border: 1px solid var(--bk-1); box-shadow: 0 0 0 1px rgba(0, 245, 212, .12), 0 0 34px -8px rgba(0, 245, 212, .5); } [data-bk-theme="neon"] .bk-head h1 { color: #fff; text-shadow: 0 0 18px rgba(0, 245, 212, .55), 0 0 40px rgba(123, 47, 247, .4); } [data-bk-theme="neon"] .bk-photo { border: 2px solid var(--bk-1); box-shadow: 0 0 26px -4px var(--bk-1); } [data-bk-theme="neon"] .bk-service:hover, [data-bk-theme="neon"] .bk-staff-card:hover { box-shadow: 0 0 22px -6px var(--bk-1); } [data-bk-theme="neon"] .bk-time:hover { box-shadow: 0 0 16px -4px var(--bk-1); } [data-bk-theme="neon"] .bk-contact-btn { border-color: var(--bk-2); } [data-bk-theme="neon"] .bk-shot { border-color: var(--bk-2); box-shadow: 0 0 18px -8px var(--bk-2); } [data-bk-theme="neon"] .btn-primary { box-shadow: 0 0 24px -6px var(--bk-1); } /* ---------- 10. Συμπαγές: πυκνό, όλα σε μία ματιά ---------- */ [data-bk-theme="compact"] .bk-wrap { width: min(520px, 100%); } [data-bk-theme="compact"] .bk-head { display: flex; align-items: center; gap: 11px; text-align: left; margin-bottom: 10px; } [data-bk-theme="compact"] .bk-photo-wrap { width: 44px; margin: 0; flex: none; } [data-bk-theme="compact"] .bk-photo { width: 44px; height: 44px; border-radius: 12px; } [data-bk-theme="compact"] .bk-head h1 { text-align: left; font-size: 16.5px; } [data-bk-theme="compact"] .bk-head p { text-align: left; font-size: 12px; margin-top: 1px; } [data-bk-theme="compact"] .bk-contact { margin: 0 0 0 auto; } [data-bk-theme="compact"] .bk-contact-btn { padding: 6px 11px; font-size: 12px; } [data-bk-theme="compact"] .bk-gallery { gap: 5px; margin-bottom: 10px; } [data-bk-theme="compact"] .bk-shot { width: 84px; height: 62px; } [data-bk-theme="compact"] .bk-card { padding: 14px; } [data-bk-theme="compact"] .bk-h { font-size: 15px; margin-bottom: 8px; } [data-bk-theme="compact"] .bk-sub { display: none; } /* ===================== Εμφάνιση υπηρεσιών (ανά θέμα) ===================== */ /* tiles: πλακίδια σε πλέγμα */ [data-bk-services="tiles"] .bk-services { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } [data-bk-services="tiles"] .bk-service { flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; } [data-bk-services="tiles"] .bk-service-bar { width: 100%; height: 4px; top: 0; bottom: auto; } [data-bk-services="tiles"] .bk-check-box { position: absolute; top: 12px; right: 12px; } [data-bk-services="tiles"] .bk-price { align-self: flex-start; font-size: 17px; } @media (max-width: 420px) { [data-bk-services="tiles"] .bk-services { grid-template-columns: 1fr; } } /* pills: συμπαγή «κουμπάκια» */ [data-bk-services="pills"] .bk-services { flex-direction: row; flex-wrap: wrap; } [data-bk-services="pills"] .bk-service { flex: 1 1 46%; padding: 11px 14px; border-radius: 999px; gap: 9px; } [data-bk-services="pills"] .bk-service-bar { display: none; } [data-bk-services="pills"] .bk-service-main small { display: none; } [data-bk-services="pills"] .bk-service::after { content: attr(data-dur); font-size: 11.5px; color: var(--text-2); font-weight: 650; } /* numbered: αριθμημένη λίστα χωρίς κουτιά */ [data-bk-services="numbered"] .bk-services { counter-reset: svc; gap: 0; } [data-bk-services="numbered"] .bk-service { counter-increment: svc; background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 12px 4px 12px 34px; } [data-bk-services="numbered"] .bk-service::before { content: counter(svc, decimal-leading-zero); position: absolute; left: 2px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 750; color: var(--bk-1); letter-spacing: .04em; } [data-bk-services="numbered"] .bk-service-bar { display: none; } [data-bk-services="numbered"] .bk-service:hover { transform: none; background: var(--accent-soft); } [data-bk-services="numbered"] .bk-service.on { background: var(--accent-soft); box-shadow: none; } /* ===================== Δείκτης βημάτων (ανά θέμα) ===================== */ /* dots: μόνο κουκκίδες */ [data-bk-steps="dots"] .bk-steps { justify-content: center; gap: 8px; } [data-bk-steps="dots"] .bk-steps li span { display: none; } [data-bk-steps="dots"] .bk-steps li { flex: 0 0 auto; } [data-bk-steps="dots"] .bk-steps li i { width: 9px; height: 9px; border-radius: 50%; font-size: 0; color: transparent; } [data-bk-steps="dots"] .bk-steps li.on i { width: 26px; border-radius: 999px; } /* bar: γραμμή προόδου */ [data-bk-steps="bar"] .bk-steps { gap: 0; height: 4px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin-bottom: 20px; } [data-bk-steps="bar"] .bk-steps li { flex: 1; height: 100%; } [data-bk-steps="bar"] .bk-steps li i, [data-bk-steps="bar"] .bk-steps li span { display: none; } [data-bk-steps="bar"] .bk-steps li.on, [data-bk-steps="bar"] .bk-steps li.done { background: var(--bk-1); } /* text: διακριτικό κείμενο «Βήμα 2 από 4» */ [data-bk-steps="text"] .bk-steps { gap: 6px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; } [data-bk-steps="text"] .bk-steps li i { display: none; } [data-bk-steps="text"] .bk-steps li { flex: 0 0 auto; color: var(--muted); } [data-bk-steps="text"] .bk-steps li:not(.on) span { opacity: .45; } [data-bk-steps="text"] .bk-steps li + li::before { content: "·"; margin-right: 6px; color: var(--muted); } @keyframes spin { to { transform: rotate(360deg); } } @keyframes bk-beat { 0%,100% { transform: scale(1); } 30% { transform: scale(1.16); } 45% { transform: scale(1); } } .bk-body { min-height: 100dvh; padding: 26px 16px 40px; background: var(--bg); overflow-x: hidden; } /* Απαλή αύρα φόντου — ζωντανεύει τη σελίδα χωρίς να τραβά την προσοχή */ .bk-aura { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .bk-aura i { position: absolute; display: block; border-radius: 50%; filter: blur(var(--bk-blur, 64px)); opacity: .34; will-change: transform; } .bk-aura i:nth-child(1) { width: 420px; height: 420px; background: var(--bk-1); top: -170px; left: -130px; animation: drift-a 26s ease-in-out infinite; } .bk-aura i:nth-child(2) { width: 340px; height: 340px; background: var(--bk-2); bottom: -150px; right: -120px; animation: drift-b 32s ease-in-out infinite; animation-delay: -9s; } .bk-aura i:nth-child(3) { width: 260px; height: 260px; background: var(--bk-3); top: 18%; right: -90px; animation: drift-c 29s ease-in-out infinite; animation-delay: -5s; opacity: .22; } html[data-theme="dark"] .bk-aura i { opacity: .26; } html[data-theme="dark"] .bk-aura i:nth-child(3) { opacity: .18; } .bk-wrap, .bk-theme { position: relative; z-index: 1; } /* --- Κινούμενα στοιχεία φόντου (διακριτικά, στα χρώματα του θέματος) --- */ .bk-motion { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .bk-motion b { position: absolute; display: block; background: var(--bk-1); opacity: .3; will-change: transform; } /* Κλασικό: μικρά αστεράκια που ανεβαίνουν αργά */ [data-bk-theme="indigo"] .bk-motion b { width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 10px var(--bk-2); animation: bk-float-up linear infinite; } /* Γυάλινο: μεγάλες απαλές φυσαλίδες φωτός */ [data-bk-theme="glass"] .bk-motion b { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .3); opacity: .5; animation: bk-float-up linear infinite; } /* Κάρτα: φυσαλίδες με περίγραμμα */ [data-bk-theme="rose"] .bk-motion b { width: 16px; height: 16px; border-radius: 50%; background: transparent; border: 2px solid var(--bk-2); opacity: .35; animation: bk-float-up linear infinite; } /* Δίστηλο: «φυλλαράκια» που στροβιλίζονται */ [data-bk-theme="emerald"] .bk-motion b { width: 13px; height: 13px; border-radius: 60% 12% 60% 12%; background: var(--bk-2); opacity: .32; animation: bk-leaf-fall linear infinite; } /* Μωσαϊκό: λαμπερές κουκκίδες που τρεμοπαίζουν */ [data-bk-theme="amber"] .bk-motion b { width: 8px; height: 8px; border-radius: 50%; background: var(--bk-2); box-shadow: 0 0 12px var(--bk-3); animation: bk-float-up linear infinite, bk-glow 3s ease-in-out infinite; } /* Πανό: οριζόντια «κύματα» που κυλούν */ [data-bk-theme="ocean"] .bk-motion b { height: 2px; width: 180px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--bk-2), transparent); opacity: .34; animation: bk-drift-x linear infinite; } /* Λιτό & Περιοδικό: λεπτές διαγώνιες λάμψεις */ [data-bk-theme="noir"] .bk-motion b, [data-bk-theme="magazine"] .bk-motion b { width: 1px; height: 120px; background: linear-gradient(180deg, transparent, var(--bk-2), transparent); opacity: .3; transform: rotate(18deg); animation: bk-float-up linear infinite; } /* Νέον: φωτεινές γραμμές που ανεβαίνουν */ [data-bk-theme="neon"] .bk-motion b { width: 2px; height: 70px; border-radius: 2px; background: linear-gradient(180deg, transparent, var(--bk-1), transparent); opacity: .5; box-shadow: 0 0 14px var(--bk-1); animation: bk-float-up linear infinite; } /* Συμπαγές: ελάχιστες, πολύ διακριτικές κουκκίδες */ [data-bk-theme="compact"] .bk-motion b { width: 5px; height: 5px; border-radius: 50%; opacity: .22; animation: bk-float-up linear infinite; } @keyframes bk-float-up { 0% { transform: translateY(104dvh) scale(.85); } 100% { transform: translateY(-14dvh) scale(1.05); } } @keyframes bk-leaf-fall { 0% { transform: translateY(-12dvh) rotate(0deg); } 100% { transform: translateY(106dvh) rotate(420deg); } } @keyframes bk-drift-x { 0% { transform: translateX(-30vw); } 100% { transform: translateX(120vw); } } @keyframes bk-glow { 0%, 100% { opacity: .22; } 50% { opacity: .55; } } /* Είσοδος σελίδας: σταδιακή εμφάνιση. Καθαρά CSS (χωρίς εξάρτηση από JS) — αν σκάσει το script, το περιεχόμενο παραμένει ορατό αντί να μείνει κρυφό. */ .bk-head { animation: bk-rise .5s cubic-bezier(.2,.9,.3,1) both; } .bk-card { animation: bk-rise .55s cubic-bezier(.2,.9,.3,1) .1s both; } .bk-foot { animation: bk-rise .5s ease .25s both; } @keyframes bk-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* Είσοδος βήματος */ .bk-in { animation: bk-step-in .32s cubic-bezier(.2,.9,.3,1); } @keyframes bk-step-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } } .bk-theme { position: fixed; top: 14px; right: 14px; z-index: 20; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); transition: color .13s, border-color .13s; } .bk-theme:hover { color: var(--accent-strong); border-color: var(--accent); } .bk-wrap { width: min(560px, 100%); margin: 0 auto; } .bk-head { text-align: center; margin-bottom: 18px; } .bk-mark { width: 48px; height: 48px; border-radius: 15px; margin: 0 auto 12px; background: var(--grad); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 20px -8px rgba(99, 102, 241, .6); } .bk-mark .icon { width: 26px; height: 26px; } .bk-photo { width: 88px; height: 88px; border-radius: 50%; margin: 0 auto 12px; object-fit: cover; display: block; border: 3px solid var(--surface); box-shadow: 0 10px 26px -10px rgba(15, 23, 42, .45); } html[data-theme="dark"] .bk-photo { border-color: var(--surface-3); } .bk-head h1 { font-size: 22px; } .bk-sub { font-size: 13px; color: var(--text-2); margin: -8px 0 12px; } /* Κουμπιά επικοινωνίας (κλήση / οδηγίες) */ .bk-contact { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; } .bk-contact-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 13.5px; font-weight: 650; color: var(--text); box-shadow: var(--shadow-1); transition: transform .14s cubic-bezier(.2,1.3,.4,1), border-color .14s, color .14s; } .bk-contact-btn:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--accent-strong); } .bk-contact-btn:active { transform: scale(.96); } .bk-contact-btn .icon { color: var(--accent); } /* Γκαλερί επιχείρησης */ .bk-gallery { display: flex; gap: 8px; overflow-x: auto; padding: 0 2px 8px; margin-bottom: 16px; scroll-snap-type: x proximity; } .bk-shot { flex: none; width: 148px; height: 108px; padding: 0; border-radius: calc(var(--bk-radius) * .5); overflow: hidden; scroll-snap-align: start; border: 1px solid var(--border); box-shadow: var(--shadow-1); transition: transform .18s cubic-bezier(.2,1.2,.4,1), box-shadow .18s; animation: bk-rise .45s cubic-bezier(.2,.9,.3,1) var(--d, 0ms) both; } .bk-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .bk-shot:hover { transform: translateY(-3px) rotate(-.6deg); box-shadow: var(--shadow-2); } .bk-shot:hover img { transform: scale(1.07); } /* Lightbox */ .bk-lightbox { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 20px; background: rgba(2, 6, 23, .86); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade-in .18s ease; } .bk-lightbox img { max-width: min(94vw, 1100px); max-height: 86dvh; border-radius: 14px; box-shadow: var(--shadow-pop); animation: pop .24s cubic-bezier(.2, 1.2, .4, 1); } .bk-lb-close, .bk-lb-nav { position: absolute; z-index: 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .14s, transform .14s; } .bk-lb-close:hover, .bk-lb-nav:hover { background: rgba(255, 255, 255, .3); transform: scale(1.08); } .bk-lb-close { top: 16px; right: 16px; } .bk-lb-nav.prev { left: 12px; } .bk-lb-nav.next { right: 12px; } @media (max-width: 520px) { .bk-lb-nav { bottom: 18px; top: auto; } .bk-lb-nav.prev { left: 25%; } .bk-lb-nav.next { right: 25%; } } .bk-head p { color: var(--text-2); font-size: 13.5px; margin-top: 5px; } .bk-head a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .bk-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-2); padding: 20px; } .bk-steps { display: flex; align-items: center; gap: 6px; list-style: none; padding: 0; margin: 0 0 18px; } .bk-steps li { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; color: var(--muted); font-size: 12px; font-weight: 650; } .bk-steps li i { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 750; background: var(--surface-3); color: var(--muted); transition: background .15s, color .15s; } .bk-steps li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bk-steps li.on { color: var(--accent-strong); } .bk-steps li.on i { background: var(--accent); color: #fff; } .bk-steps li.done i { background: var(--ok-soft); color: var(--ok-strong); } @media (max-width: 460px) { .bk-steps { justify-content: center; gap: 10px; } .bk-steps li span { display: none; } .bk-steps li { flex: 0 0 auto; } /* συνδετική γραμμή ανάμεσα στα βήματα, για να διαβάζεται η πορεία */ .bk-steps li + li::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--border-2); margin-right: 4px; order: -1; } .bk-steps li.on::before, .bk-steps li.done::before { background: var(--accent); } } .bk-h { font-size: 17px; margin-bottom: 14px; } .bk-back { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); font-size: 13px; font-weight: 600; margin-bottom: 10px; } .bk-back:hover { color: var(--accent-strong); } .bk-services { display: flex; flex-direction: column; gap: 9px; } .bk-service { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); text-align: left; transition: transform .13s, border-color .13s, box-shadow .13s; } .bk-service { animation: bk-rise .4s cubic-bezier(.2,.9,.3,1) var(--d, 0ms) both; } .bk-service:hover { transform: translateY(-2px); border-color: var(--sv); box-shadow: var(--shadow-2); } .bk-service:active { transform: scale(.99); } .bk-service.on { border-color: var(--sv); background: color-mix(in srgb, var(--sv) 10%, var(--surface)); box-shadow: 0 0 0 1px var(--sv) inset; } .bk-service-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--sv); } /* Τετραγωνάκι επιλογής (πολλαπλή επιλογή υπηρεσιών) */ .bk-check-box { width: 22px; height: 22px; border-radius: 7px; flex: none; border: 1.8px solid var(--border-2); display: grid; place-items: center; color: transparent; background: var(--surface); transition: background .15s, border-color .15s, color .15s, transform .15s; } .bk-service.on .bk-check-box { background: var(--sv); border-color: var(--sv); color: #fff; transform: scale(1.06); } .bk-service-main { flex: 1; min-width: 0; display: grid; gap: 2px; } .bk-service-main strong { font-size: 15px; font-weight: 700; } .bk-service-main small { font-size: 12.5px; color: var(--text-2); } .bk-price { font-weight: 750; font-size: 15px; color: var(--text); } .bk-chev { color: var(--muted); flex: none; } /* Καλάθι επιλεγμένων υπηρεσιών */ .bk-cart { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px; border-radius: 14px; background: var(--accent-soft); animation: bk-rise .3s cubic-bezier(.2,.9,.3,1); } .bk-cart-info { flex: 1; min-width: 0; display: grid; } .bk-cart-info strong { font-size: 14px; color: var(--accent-strong); } .bk-cart-info span { font-size: 12.5px; color: var(--text-2); } /* Επιλογή συνεργάτη */ .bk-staff { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; } .bk-staff-card { display: grid; justify-items: center; gap: 3px; padding: 14px 8px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface-2); transition: transform .13s, border-color .13s, box-shadow .13s; animation: bk-rise .4s cubic-bezier(.2,.9,.3,1) var(--d, 0ms) both; } .bk-staff-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-2); } .bk-staff-card.on { border-color: var(--accent); background: var(--accent-soft); } .bk-staff-card strong { font-size: 13.5px; font-weight: 700; text-align: center; } .bk-staff-card small { font-size: 11px; color: var(--text-2); text-align: center; } .bk-staff-photo { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; margin-bottom: 5px; display: grid; place-items: center; color: #fff; font-weight: 750; font-size: 20px; } .bk-staff-initials { display: grid; place-items: center; } .bk-staff-any { width: 62px; height: 62px; border-radius: 50%; margin-bottom: 5px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); } .bk-summary { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; background: var(--surface-2); border-radius: 11px; padding: 10px 12px; margin-bottom: 14px; font-size: 13.5px; color: var(--text-2); } .bk-summary.strong { background: var(--accent-soft); color: var(--accent-strong); display: block; line-height: 1.6; } .bk-days-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .bk-days-nav strong { font-size: 14px; text-transform: capitalize; } .bk-days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(58px, 1fr); gap: 7px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; } .bk-day { scroll-snap-align: start; display: grid; gap: 1px; justify-items: center; padding: 9px 4px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); transition: border-color .13s, background .13s, transform .13s; } .bk-day small { font-size: 10.5px; color: var(--muted); font-weight: 650; } .bk-day strong { font-size: 17px; font-weight: 750; } .bk-day em { font-size: 10px; font-style: normal; color: var(--muted); font-weight: 600; } .bk-day:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-2px); } .bk-day.on { background: var(--accent); border-color: var(--accent); } .bk-day.on small, .bk-day.on strong, .bk-day.on em { color: #fff; } .bk-day.off { opacity: .3; cursor: not-allowed; } /* Προβολή «ολόκληρος ο μήνας» — κανονικό πλέγμα ημερολογίου */ .bk-month-grid { grid-auto-flow: row; grid-template-columns: repeat(7, 1fr); grid-auto-columns: auto; gap: 5px; overflow: visible; } .bk-wd { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--muted); padding-bottom: 2px; } .bk-mday { position: relative; aspect-ratio: 1 / 1; display: grid; align-content: center; justify-items: center; gap: 3px; border: 1px solid var(--border); background: var(--surface); border-radius: 12px; transition: border-color .13s, background .13s, transform .13s; animation: bk-pop .26s cubic-bezier(.2,1.2,.4,1) var(--d, 0ms) both; } .bk-mday strong { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } /* Τελίτσα «υπάρχει διαθεσιμότητα» */ .bk-mday i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); } .bk-mday:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-2px); } .bk-mday.today { border-color: var(--accent); } .bk-mday.today strong { color: var(--accent-strong); } .bk-mday.on { background: var(--accent); border-color: var(--accent); } .bk-mday.on strong { color: #fff; } .bk-mday.on i { background: #fff; } .bk-mday.off { opacity: .28; cursor: not-allowed; } .bk-mday.off i { visibility: hidden; } /* Γραμμή επιλεγμένης ημέρας — πάντα πάνω από τις ώρες */ .bk-datebar { display: flex; align-items: stretch; gap: 6px; margin-bottom: 10px; } .bk-datebar-nav { flex: 0 0 auto; width: 38px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); border-radius: 11px; color: var(--text-2); transition: border-color .13s, background .13s, color .13s; } .bk-datebar-nav:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-strong); } .bk-datebar-nav:disabled { opacity: .35; cursor: not-allowed; } .bk-datebar-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent-strong); font-size: 13.5px; text-align: left; transition: filter .13s; } .bk-datebar-main:hover { filter: brightness(1.04); } .bk-datebar-main strong { flex: 1; min-width: 0; font-size: 14px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bk-datebar-hint { font-size: 11.5px; opacity: .8; } .bk-datebar-chev { width: 15px; height: 15px; transition: transform .18s; } .bk-datebar.open .bk-datebar-chev { transform: rotate(180deg); } @media (max-width: 420px) { .bk-datebar-hint { display: none; } .bk-month-grid { gap: 4px; } .bk-mday strong { font-size: 14px; } } .bk-times { margin-top: 14px; } .bk-hint { font-size: 13px; color: var(--text-2); margin-bottom: 9px; } .bk-loading { font-size: 13px; color: var(--muted); } .bk-time-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 7px; } .bk-time { padding: 11px 6px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; transition: background .12s, border-color .12s, color .12s, transform .12s; animation: bk-pop .28s cubic-bezier(.2,1.2,.4,1) var(--d, 0ms) both; } @keyframes bk-pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } } .bk-time:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); transform: translateY(-1px); } .bk-time:active { transform: scale(.96); } .bk-fine { font-size: 11.5px; color: var(--muted); text-align: center; margin-top: 12px; line-height: 1.5; } .bk-empty { color: var(--muted); font-size: 14px; text-align: center; padding: 20px 0; } .bk-done { text-align: center; } .bk-check { width: 62px; height: 62px; border-radius: 50%; margin: 4px auto 14px; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok-strong); animation: pop .3s cubic-bezier(.2, 1.4, .4, 1); } .bk-check .icon { width: 32px; height: 32px; } .bk-check.pending { background: var(--warn-soft); color: var(--warn-strong); } /* Χαρούμενη «λάμψη» γύρω από το τικ */ .bk-check::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--ok); opacity: 0; animation: bk-ring .9s ease-out .18s; } .bk-check { position: relative; } .bk-check.pending::after { border-color: var(--warn); } @keyframes bk-ring { 0% { opacity: .7; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.35); } } /* Κονφετί στην επιβεβαίωση */ .bk-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 135; overflow: hidden; } .bk-confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: bk-fall linear forwards; } @keyframes bk-fall { 0% { transform: translateY(-10px) rotate(0deg); opacity: 1; } 100% { transform: translateY(102dvh) rotate(680deg); opacity: .85; } } .bk-done h2 { font-size: 20px; margin-bottom: 14px; } .bk-receipt { text-align: left; border: 1px solid var(--border); border-radius: 13px; overflow: hidden; margin-bottom: 12px; } .bk-receipt div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; font-size: 13.5px; } .bk-receipt div + div { border-top: 1px solid var(--border); } .bk-receipt span { color: var(--text-2); } .bk-receipt strong { text-align: right; } /* Μήνυμα προς το κατάστημα — μόνο η οθόνη επιτυχίας έμεινε ως ξεχωριστό στοιχείο· η φόρμα ζει πλέον μέσα στο δικό της .bk-card (αρχικό μενού). */ .bk-msg-done { padding: 22px 16px; text-align: center; display: grid; gap: 4px; animation: pop .3s cubic-bezier(.2,1.2,.4,1); } .bk-msg-done small { color: var(--text-2); font-size: 13px; } .bk-msg-check { width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 6px; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok-strong); } .bk-foot { text-align: center; font-size: 11.5px; color: var(--muted); margin-top: 18px; } @media (max-width: 520px) { .bk-body { padding: 18px 12px 32px; } .bk-card { padding: 16px 14px; border-radius: 18px; } .bk-head h1 { font-size: 19px; } } /* Σελίδες σφαλμάτων */ /* Σελίδες σφάλματος: φιλικές, με ένα κουμπί επιστροφής. Μέσα στην εφαρμογή (συνδεδεμένος χρήστης) κάθονται στο κέντρο του περιεχομένου· έξω, στο κέντρο της οθόνης. */ .error-body { min-height: 100dvh; display: grid; place-items: center; padding: 20px; } .error-card { text-align: center; max-width: 420px; margin: 40px auto; } .error-card h2 { margin-top: 6px; } .error-card p { margin: 8px 0 18px; } .error-code { font-size: 64px; font-weight: 800; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .error-ico { width: 60px; height: 60px; margin: 0 auto 8px; border-radius: 20px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); } .error-ico .icon { width: 28px; height: 28px; } /* ============================================================ Animations */ @keyframes pop { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes slide-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } } @keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } } @keyframes toast-out { to { opacity: 0; transform: translateY(6px) scale(.97); } } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .45); } 50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); } } @keyframes drift-a { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(46px, 34px) scale(1.09); } 66% { transform: translate(-28px, 52px) scale(.95); } } @keyframes drift-b { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-50px, -28px) scale(1.07); } 66% { transform: translate(34px, -44px) scale(.93); } } @keyframes drift-c { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-40px, 42px) scale(1.12); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .login-blob, .home-blob { animation: none !important; } } /* Θέμα toggle εικονίδια */ html[data-theme="light"] .theme-sun { display: none; } html[data-theme="dark"] .theme-moon { display: none; } /* Scrollbars */ @media (pointer: fine) { ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 8px; border: 2.5px solid var(--bg); } ::-webkit-scrollbar-track { background: transparent; } } /* ══════════════════════════════════════════════════════════════════════ Δημόσια αρχική σελίδα (home.html) ══════════════════════════════════════════════════════════════════════ */ .home-body { background: var(--bg); color: var(--text); overflow-x: hidden; } .home-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1120px; margin: 0 auto; padding: 18px 22px; position: relative; z-index: 3; } .home-top-actions { display: flex; align-items: center; gap: 10px; } .btn-lg { padding: 12px 22px; font-size: 15px; border-radius: 13px; } /* ── Hero ── */ .home-hero { position: relative; padding: 46px 22px 64px; overflow: hidden; } .home-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; z-index: 0; } .home-blob.b1 { width: 420px; height: 420px; background: var(--accent); top: -140px; left: -110px; } .home-blob.b2 { width: 380px; height: 380px; background: #a855f7; top: -60px; right: -120px; opacity: .38; } .hero-inner { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; text-align: center; } .hero-badge { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-1); } .home-hero h1 { margin: 18px 0 0; font-size: clamp(32px, 6.2vw, 54px); line-height: 1.1; letter-spacing: -.02em; font-weight: 800; } .home-hero h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-sub { margin: 18px auto 0; max-width: 620px; font-size: clamp(15px, 2.4vw, 18px); color: var(--text-2); line-height: 1.62; } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; } .hero-note { margin-top: 16px; font-size: 13px; color: var(--muted); } /* ── Πλέγμα δυνατοτήτων ── */ .home-features { max-width: 1120px; margin: 0 auto; padding: 8px 22px 64px; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); } .feat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-1); } .feat-ico { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-strong); margin-bottom: 12px; } .feat h3 { margin: 0 0 6px; font-size: 16.5px; font-weight: 700; } .feat p { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.6; } /* ── Ενότητες με GIF ── */ .section-head { text-align: center; max-width: 640px; margin: 0 auto 40px; } .section-head h2 { margin: 0 0 8px; font-size: clamp(24px, 4.4vw, 34px); font-weight: 800; letter-spacing: -.015em; } .section-head p { margin: 0; color: var(--text-2); font-size: 15.5px; } .home-demos { max-width: 1120px; margin: 0 auto; padding: 26px 22px 40px; } .demo-row { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 38px; align-items: center; margin-bottom: 58px; } .demo-row.reverse .demo-text { order: 2; } .demo-step { display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; color: var(--accent-strong); background: var(--accent-soft); border-radius: 999px; padding: 4px 11px; margin-bottom: 12px; } .demo-text h3 { margin: 0 0 10px; font-size: clamp(19px, 3vw, 24px); font-weight: 750; line-height: 1.25; } .demo-text p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.66; } .demo-shot { margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-2); background: var(--surface); } .demo-shot img { display: block; width: 100%; height: auto; } /* ── Κινητό ── */ .home-mobile { max-width: 1120px; margin: 0 auto; padding: 30px 22px 60px; } .phone-row { display: flex; flex-wrap: wrap; gap: 34px; justify-content: center; } .phone { margin: 0; text-align: center; width: 232px; } .phone-screen { border-radius: 30px; overflow: hidden; border: 8px solid #10131c; background: #10131c; box-shadow: var(--shadow-pop); } .phone-screen img { display: block; width: 100%; height: auto; } .phone figcaption { margin-top: 12px; font-size: 13.5px; color: var(--text-2); font-weight: 600; } /* ── Κλείσιμο & υποσέλιδο ── */ .home-cta { max-width: 1120px; margin: 0 auto 52px; padding: 46px 22px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-1); } .home-cta h2 { margin: 0 0 8px; font-size: clamp(22px, 4vw, 30px); font-weight: 800; } .home-cta p { margin: 0 0 22px; color: var(--text-2); } .home-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; max-width: 1120px; margin: 0 auto; padding: 22px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; } @media (max-width: 860px) { .demo-row { grid-template-columns: 1fr; gap: 20px; margin-bottom: 46px; } .demo-row.reverse .demo-text { order: 0; } .home-hero { padding: 30px 18px 46px; } .home-top { padding: 14px 18px; } .phone { width: 200px; } } /* ══════════════════════════════════════════════════════════════════════ Νομικές σελίδες (πολιτική απορρήτου) & οδηγός χρήσης ══════════════════════════════════════════════════════════════════════ */ .legal-body { background: var(--bg); } .legal-wrap { max-width: 820px; margin: 0 auto; padding: 12px 22px 72px; } .legal-wrap > h1 { font-size: clamp(26px, 5vw, 38px); font-weight: 800; letter-spacing: -.02em; margin: 22px 0 4px; } .legal-wrap.in-app { padding-left: 0; padding-right: 0; } .legal { color: var(--text-2); font-size: 15px; line-height: 1.72; } .legal h2 { color: var(--text); font-size: 20px; font-weight: 750; margin: 34px 0 10px; letter-spacing: -.01em; } .legal h3 { color: var(--text); font-size: 16px; font-weight: 700; margin: 22px 0 8px; } .legal p { margin: 0 0 12px; } .legal ul { margin: 0 0 14px; padding-left: 22px; } .legal li { margin-bottom: 7px; } .legal a { color: var(--accent-strong); } .legal code { background: var(--surface-3); border-radius: 5px; padding: 1px 6px; font-size: 13px; color: var(--text); } .legal-updated { font-size: 13.5px; color: var(--muted); margin-bottom: 20px; } .legal-note, .legal-warn { display: flex; gap: 11px; align-items: flex-start; border-radius: var(--r); padding: 13px 15px; margin: 16px 0 22px; font-size: 14px; } .legal-note { background: var(--accent-soft); color: var(--accent-strong); } .legal-warn { background: var(--warn-soft); color: var(--warn-strong); } .legal-note code, .legal-warn code { background: rgba(255,255,255,.55); } .legal-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); margin: 14px 0 18px; } .legal-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; } .legal-card h3 { margin-top: 0; } .legal-card p { margin: 0; font-size: 14px; } .legal-table-wrap, .legal-table { display: block; } .legal-table { width: 100%; border-collapse: collapse; margin: 6px 0 20px; font-size: 13.5px; display: block; overflow-x: auto; white-space: normal; } .legal-table thead th { text-align: left; font-weight: 700; color: var(--text); background: var(--surface-3); padding: 9px 12px; border-bottom: 1px solid var(--border); } .legal-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; } .legal-table tbody tr:last-child td { border-bottom: 0; } /* ── Οδηγός ── */ .guide { max-width: 780px; } .guide-step { display: flex; gap: 16px; margin-bottom: 30px; } .guide-num { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-weight: 800; font-size: 15px; box-shadow: 0 6px 16px -6px var(--accent-ring); } .guide-body { flex: 1; min-width: 0; } .guide-body h2 { margin: 4px 0 8px; font-size: 19px; font-weight: 750; } .guide-body p { margin: 0 0 10px; color: var(--text-2); font-size: 14.5px; line-height: 1.68; } .guide-body ul { margin: 0 0 14px; padding-left: 20px; color: var(--text-2); font-size: 14.5px; line-height: 1.66; } .guide-body li { margin-bottom: 6px; } .guide-two { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 4px 0 14px; } .guide-mini { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; } .guide-mini h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 15px; font-weight: 700; } .guide-mini p { margin: 0; font-size: 13.5px; } .guide-tip { display: flex; gap: 9px; align-items: flex-start; background: var(--accent-soft); color: var(--accent-strong); border-radius: var(--r); padding: 11px 14px; font-size: 14px !important; } .guide-end { text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 34px 22px; margin-top: 8px; } .guide-end h2 { margin: 0 0 6px; font-size: 22px; font-weight: 800; } .guide-end p { margin: 0 0 18px; color: var(--text-2); } /* ── Κάρτα καλωσορίσματος στον πίνακα ── */ .welcome-card { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 20px; margin-bottom: 16px; background: var(--accent-soft); border-color: transparent; box-shadow: none; } .welcome-ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; } .welcome-body { flex: 1; min-width: 220px; } .welcome-body h2 { margin: 0 0 4px; font-size: 17px; font-weight: 750; } .welcome-body p { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.6; } .foot-link { color: var(--muted); font-size: 13px; } .foot-link:hover { color: var(--accent-strong); } .login-legal { margin-top: 16px; text-align: center; font-size: 13px; } .login-legal a { color: var(--muted); } /* ── Επιλογή πολλαπλών υπηρεσιών στο modal ραντεβού ── */ .type-chips { display: flex; flex-wrap: wrap; gap: 7px; max-height: 152px; overflow-y: auto; padding: 2px; margin: -2px; } .type-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; text-align: left; transition: border-color .12s, background .12s, box-shadow .12s; } .type-chip:hover { border-color: var(--accent); background: var(--accent-soft); } .type-chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); box-shadow: inset 0 0 0 1px var(--accent); } .type-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; } .type-nm { white-space: nowrap; } .type-meta { color: var(--muted); font-weight: 500; font-size: 12px; white-space: nowrap; } .type-chip.on .type-meta { color: var(--accent-strong); opacity: .8; } .type-order { width: 17px; height: 17px; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 800; } .type-summary { font-size: 12.5px; font-weight: 650; color: var(--accent-strong); } /* ── Προτροπή εγκατάστασης εφαρμογής ── */ .pwa-banner { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: 12px 14px; max-width: 560px; margin: 0 auto; animation: pwaIn .32s cubic-bezier(.2,.8,.3,1); } @keyframes pwaIn { from { opacity: 0; transform: translateY(14px); } } .pwa-banner > .icon { flex: 0 0 auto; color: var(--accent); width: 24px; height: 24px; } .pwa-banner > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pwa-banner strong { font-size: 14px; } .pwa-banner span { font-size: 12.5px; color: var(--text-2); line-height: 1.45; } .pwa-x { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; color: var(--muted); font-size: 14px; line-height: 1; } .pwa-x:hover { background: var(--surface-3); color: var(--text); } @media (max-width: 720px) { .pwa-banner { bottom: 76px; } } /* ── Ειδοποιήσεις συσκευής στις Ρυθμίσεις ── */ .push-box { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; margin: 14px 0 18px; background: var(--surface-2); } .push-head { display: flex; gap: 12px; align-items: flex-start; } .push-head > .icon { color: var(--accent); flex: 0 0 auto; } .push-head strong { display: block; font-size: 14.5px; } .push-head small { display: block; color: var(--text-2); font-size: 13px; margin-top: 2px; } .push-hint { margin: 10px 0 0; font-size: 13px; color: var(--text-2); line-height: 1.55; } .push-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .push-devices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .push-dev { font-size: 12px; color: var(--text-2); background: var(--surface-3); border-radius: 999px; padding: 3px 10px; } /* ── Ενημέρωση για cookies ── */ .consent { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70; max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: 16px 18px; animation: pwaIn .3s cubic-bezier(.2,.8,.3,1); } .consent-body { flex: 1; min-width: 260px; } .consent-body strong { display: block; font-size: 14.5px; margin-bottom: 4px; } .consent-body p { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.55; } .consent-body a { color: var(--accent-strong); } .consent-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* Στο κινητό υπάρχει κάτω μπάρα πλοήγησης — το banner δεν πρέπει να την κρύβει. */ @media (max-width: 720px) { .consent { bottom: 76px; } } @media (max-width: 560px) { .consent { flex-direction: column; align-items: stretch; } .consent-actions .btn { flex: 1; } } /* ── Δημόσια σελίδα επικοινωνίας ── */ .contact-wrap { max-width: 640px; margin: 0 auto; padding: 18px 22px 72px; } .contact-wrap > h1 { font-size: clamp(26px, 5vw, 36px); font-weight: 800; letter-spacing: -.02em; margin: 20px 0 6px; } .contact-lead { color: var(--text-2); font-size: 15.5px; line-height: 1.6; margin: 0 0 26px; } .contact-form { display: flex; flex-direction: column; gap: 4px; } .contact-fine { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 6px 0 14px; } .contact-fine a { color: var(--accent-strong); } .contact-done { text-align: center; padding: 60px 20px; } .contact-done-ico { display: inline-flex; align-items: center; justify-content: center; width: 66px; height: 66px; border-radius: 50%; background: var(--ok-soft); color: var(--ok-strong); margin-bottom: 18px; } .contact-done h1 { font-size: 26px; font-weight: 800; margin: 0 0 8px; } .contact-done p { color: var(--text-2); margin: 0 0 22px; } /* ── Μηνύματα επικοινωνίας στη Διαχείριση ── */ .msg-list { display: flex; flex-direction: column; } .msg-row { border-top: 1px solid var(--border); } .msg-row:first-child { border-top: 0; } .msg-row > summary { display: flex; align-items: center; gap: 12px; padding: 13px 20px; cursor: pointer; list-style: none; } .msg-row > summary::-webkit-details-marker { display: none; } .msg-row > summary:hover { background: var(--surface-2); } .msg-row.unread > summary { background: var(--accent-soft); } .msg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .msg-subj { font-weight: 650; font-size: 14.5px; color: var(--text); } .msg-row.unread .msg-subj { font-weight: 800; } /* Περιορισμένα στο .msg-row: τα ίδια ονόματα ζουν και στη σελίδα Μηνύματα (.msg-item), όπου η κουκκίδα είναι κόκκινη. */ .msg-row .msg-from { font-size: 12.5px; color: var(--muted); } .msg-row .msg-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; } .msg-body { padding: 0 20px 16px 62px; } .msg-text { margin: 0 0 12px; font-size: 14px; line-height: 1.62; color: var(--text-2); background: var(--surface-2); border-radius: var(--r); padding: 12px 14px; white-space: pre-wrap; word-break: break-word; } .msg-contact { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* ---------- Ταυτοποίηση πελάτη στη σελίδα κρατήσεων ---------- */ .bk-lead { font-size: 14.5px; color: var(--text-2); margin: 0 0 16px; } /* Κουμπί «Συνέχεια με Google». Δύο εκδοχές, όπως τις ορίζει η ίδια η Google: ανοιχτή σε φωτεινό φόντο και σκούρα σε σκοτεινό. Ένα μόνιμα λευκό κουμπί πάνω σε σκούρα σελίδα «καίει» τα μάτια και μοιάζει ξένο σώμα. Τα χρώματα είναι τα επίσημα του brand και δεν παράγονται από τις μεταβλητές του θέματος: το σήμα της Google πρέπει να παραμένει αναγνωρίσιμο σε κάθε παλέτα καταστήματος. */ .bk-google { background: #fff; color: #1f1f1f; border: 1px solid #dadce0; display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; padding: 12px 16px; } .bk-google:hover { background: #f7f8f8; border-color: #c9ccd1; } html[data-theme="dark"] .bk-google { background: #131314; color: #e3e3e3; border-color: #8e918f; } html[data-theme="dark"] .bk-google:hover { background: #1e1f20; border-color: #a8abaa; } /* Το επίσημο «G» της Google ως inline SVG — όχι το εικονίδιο του Chrome. */ .bk-google-mark { width: 18px; height: 18px; flex: none; display: block; } .bk-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted); font-size: 13px; } .bk-or::before, .bk-or::after { content: ""; flex: 1; height: 1px; background: var(--border); } .bk-code-input { font-size: 26px; letter-spacing: .32em; text-align: center; font-weight: 700; } /* ---------- «Τα ραντεβού σου» στη σελίδα κρατήσεων ---------- */ .bk-mine { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; background: var(--surface-3); } .bk-mine-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; } .bk-mine-head strong { font-size: 14px; } .bk-mine-head .muted { font-size: 12px; } .bk-mine-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13.5px; } .bk-mine-row:first-child { border-top: 0; } .bk-mine-row .info { flex: 1; min-width: 0; } .bk-mine-row .when { font-weight: 650; } .bk-mine-row .what { color: var(--text-2); font-size: 12.5px; } /* ---------- Ειδοποιήσεις Telegram στις Ρυθμίσεις ---------- */ .tg-mark { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, #37aee2, #1e96c8); } .tg-mark svg { width: 20px; height: 20px; } .tg-pair { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); } /* Λευκό φόντο πάντα: σε σκούρο θέμα το QR δεν διαβάζεται από την κάμερα. */ .tg-qr { width: 148px; height: 148px; flex: none; padding: 8px; background: #fff; border-radius: 10px; } .tg-qr svg { width: 100%; height: 100%; display: block; } .tg-pair-txt { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .tg-pair-txt strong { font-size: 14px; } .tg-pair-txt p { font-size: 13px; color: var(--text-2); margin: 0; } .tg-pair-txt .muted { font-size: 12px; } @media (max-width: 520px) { /* Στο κινητό το QR δεν χρησιμεύει — το Telegram ανοίγει με ένα πάτημα. */ .tg-qr { display: none; } } /* ---------- Οριστική διαγραφή λογαριασμού ---------- */ .danger-box { border: 1px solid var(--danger); border-radius: 12px; padding: 16px 18px; background: color-mix(in srgb, var(--danger) 8%, transparent); } .danger-box strong { color: var(--danger); } .danger-box ul { margin: 10px 0 10px 18px; padding: 0; line-height: 1.9; font-size: 14px; } .danger-box p { margin: 0; font-size: 14px; } .del-zone { border-top: 1px solid var(--border); margin-top: 22px; padding-top: 18px; } .del-zone h3 { font-size: 15px; color: var(--danger); margin: 0 0 4px; } .del-zone p { font-size: 13px; color: var(--text-2); margin: 0 0 12px; } /* ---------- Κουμπί αντιγραφής μέσα στα chips στοιχείων ---------- */ .contact-chip { padding: 0; overflow: hidden; } .contact-chip > a, .contact-chip > span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 4px 6px 13px; color: inherit; } .chip-copy { display: inline-flex; align-items: center; justify-content: center; width: 30px; align-self: stretch; flex: none; cursor: pointer; border: 0; border-left: 1px solid var(--border); background: transparent; color: var(--muted); transition: background .13s, color .13s; } .chip-copy:hover { background: var(--surface-3); color: var(--accent-strong); } .chip-copy .icon { width: 14px; height: 14px; } /* Σύντομη πράσινη επιβεβαίωση — χωρίς να μετακινηθεί τίποτα στη σελίδα. */ .chip-copy.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); } /* ---------- Πιθανά διπλότυπα πελατών ---------- */ .dup-card { margin-bottom: 16px; } .dup-card .card-head h3 { font-size: 15px; font-variant-numeric: tabular-nums; } .dup-row { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 12px 0; border-top: 1px solid var(--border); } .dup-row:first-of-type { border-top: 0; } .dup-info { flex: 1; min-width: 0; } .dup-name { font-weight: 650; font-size: 14px; } .dup-meta { font-size: 12.5px; color: var(--text-2); margin-top: 2px; } .dup-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); } /* ---------- Αναλογίες στηλών ---------- Ήταν inline styles, που νικούσαν το media query του .dash-cols και άφηναν δύο στήλες στο κινητό — η σελίδα ξεχείλιζε οριζόντια. Ως κλάσεις, η μικρή οθόνη τις ακυρώνει κανονικά. */ .dash-cols.cols-1-1_5 { grid-template-columns: 1fr 1.5fr; } .dash-cols.cols-1_2-1 { grid-template-columns: 1.2fr 1fr; } @media (max-width: 980px) { .dash-cols.cols-1-1_5, .dash-cols.cols-1_2-1 { grid-template-columns: 1fr; } } /* ---------- Διόρθωση οριζόντιας υπερχείλισης σε κινητό ---------- Τα παιδιά ενός grid έχουν εξ ορισμού min-width:auto, οπότε δεν συρρικνώνονται κάτω από το πλάτος του περιεχομένου τους — και η σελίδα ξεχείλιζε πλάγια. */ .dash-cols > * { min-width: 0; } @media (max-width: 560px) { /* Το ιστορικό ραντεβού σε στενή οθόνη: η ημερομηνία πάνω, τα υπόλοιπα κάτω, αντί για τρεις στήλες που δεν χωράνε. */ .hist-item { flex-wrap: wrap; gap: 8px 12px; padding: 12px 14px; } .hist-when { width: auto; } .hist-body { flex: 1 1 100%; min-width: 0; } .hist-side { margin-left: auto; } .year-sep { padding-left: 14px; padding-right: 14px; } } /* Αναλογίες για .stat-grid — ήταν inline και νικούσαν το media query, αφήνοντας 3-4 στήλες στο κινητό. */ .stat-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .stat-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .stat-grid > * { min-width: 0; } @media (max-width: 900px) { .stat-grid.cols-3, .stat-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .stat-grid, .stat-grid.cols-3, .stat-grid.cols-4 { grid-template-columns: 1fr; } } @media (max-width: 460px) { /* Η κεφαλίδα κάρτας με τίτλο + κουμπί δεν χωρά σε στενή οθόνη — αναδιπλώνεται αντί να σπρώχνει τη σελίδα πλάγια. */ .card-head { flex-wrap: wrap; padding: 14px 16px; row-gap: 8px; } .card-head > .btn { margin-left: auto; } } /* Ώρα που προκύπτει μοιράζοντας τις υπηρεσίες σε δύο άτομα — διακριτικό σημάδι, ώστε ο χρήστης να ξέρει ότι θα τον εξυπηρετήσουν διαδοχικά δύο άνθρωποι. */ .slot-chip.split { border-style: dashed; } .slot-chip.split::after { content: "··"; margin-left: 4px; opacity: .65; letter-spacing: -1px; } /* ---------- Γραμματοσειρά της δημόσιας σελίδας κρατήσεων ---------- Ορίζεται από τον επαγγελματία και ισχύει ΜΟΝΟ εκεί — η εφαρμογή του κρατά πάντα τη δική της, ώστε να μένει ευανάγνωστη στη δουλειά. */ .bk-body { font-family: var(--bk-font, inherit); } /* ---------- Θέμα + γραμματοσειρά δίπλα-δίπλα ---------- */ .look-cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: start; } .look-cols > * { min-width: 0; } @media (max-width: 900px) { .look-cols { grid-template-columns: 1fr; } } /* Και οι δύο στήλες κυλιόμενες: με 16 θέματα και 30 γραμματοσειρές θα έπιαναν ολόκληρη την οθόνη και η υπόλοιπη σελίδα θα γινόταν αθέατη. */ .pick-scroll { max-height: 380px; overflow-y: auto; padding: 2px 6px 2px 2px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; } .pick-scroll::-webkit-scrollbar { width: 10px; } .pick-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; } .pick-scroll::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; } /* Το πλέγμα θεμάτων μέσα στο κουτί κύλισης δεν χρειάζεται δικό του ύψος. */ .pick-scroll .theme-grid { margin: 0; } /* Κεφαλίδα ομάδας — δείχνει και πόσες επιλογές έχει, ώστε να μη νομίζει κανείς ότι λείπουν. Κολλάει στην κορυφή κατά την κύλιση. */ .pick-head { position: sticky; top: 0; z-index: 2; padding: 8px 10px 6px; margin: 0 -2px; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); } .pick-head:not(:first-child) { border-top: 1px solid var(--border); margin-top: 4px; } .font-card { display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; padding: 11px 13px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); transition: border-color .13s, background .13s; } .font-card:hover { border-color: var(--accent); background: var(--accent-soft); } .font-card.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); } /* Το δείγμα κληρονομεί τη γραμματοσειρά της κάρτας — αυτό ΕΙΝΑΙ η προεπισκόπηση. */ .font-sample { font-size: 17px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Η ετικέτα μένει στη γραμματοσειρά της εφαρμογής — αλλιώς θα άλλαζε κι αυτή και δεν θα ξεχώριζε το δείγμα από την περιγραφή του. */ .font-meta { display: flex; flex-direction: column; text-align: right; flex: none; max-width: 46%; font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif; } .font-meta strong { font-size: 12.5px; } .font-meta small { font-size: 11px; color: var(--text-2); } @media (max-width: 520px) { .font-card { flex-direction: column; align-items: flex-start; gap: 4px; } .font-meta { text-align: left; max-width: 100%; flex-direction: row; gap: 8px; align-items: baseline; } } /* Αποτυχία φόρτωσης μέσα σε ενότητα — εξηγεί αντί να αφήνει κενό. */ .load-error { font-size: 13px; color: var(--danger); padding: 14px 20px; margin: 0; } .load-error .link-btn { color: var(--accent-strong); margin-left: 4px; } /* Νέα θέματα σελίδας κρατήσεων — παλέτα και στρογγυλότητα. Οι διατάξεις (preview/services/steps) επαναχρησιμοποιούνται από τα υπάρχοντα. */ .bk-body[data-bk-theme="sand"] { --bk-1: #b08968; --bk-2: #ddb892; --bk-3: #7f5539; --bk-radius: 18px; } .bk-body[data-bk-theme="forest"] { --bk-1: #1b7a4b; --bk-2: #2fae6a; --bk-3: #9bd17c; --bk-radius: 16px; } .bk-body[data-bk-theme="plum"] { --bk-1: #7b2d5e; --bk-2: #b5179e; --bk-3: #e0aaff; --bk-radius: 20px; } .bk-body[data-bk-theme="mono"] { --bk-1: #52525b; --bk-2: #71717a; --bk-3: #a1a1aa; --bk-radius: 8px; } .bk-body[data-bk-theme="sunset"] { --bk-1: #f4661b; --bk-2: #ff8fa3; --bk-3: #ffc857; --bk-radius: 26px; } .bk-body[data-bk-theme="ice"] { --bk-1: #3aa6d8; --bk-2: #8ecae6; --bk-3: #caf0f8; --bk-radius: 22px; } /* ============================================================ Καμπανάκι ειδοποιήσεων Ένα πάνελ, δύο σημεία εκκίνησης: sidebar (υπολογιστής) και μπάρα κορυφής (κινητό). Στο κινητό γίνεται φύλλο από κάτω, γιατί ένα αιωρούμενο dropdown δίπλα σε δάχτυλο είναι δύσχρηστο. */ .bell-btn { position: relative; } .bell-btn.has-unread { color: var(--accent-strong); } .bell-dot { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 800; line-height: 18px; text-align: center; border: 2px solid var(--surface); pointer-events: none; } .bell-backdrop { background: rgba(2, 6, 23, .35); z-index: 78; } @media (min-width: 1024px) { .bell-backdrop { display: none !important; } } .bell-panel { position: fixed; z-index: 79; left: 14px; bottom: 76px; width: min(370px, calc(100vw - 28px)); max-height: min(70vh, 560px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); overflow: hidden; animation: pop .16s cubic-bezier(.2, 1.2, .4, 1); } .bell-head { display: flex; align-items: center; gap: 6px; padding: 12px 10px 12px 16px; border-bottom: 1px solid var(--border); } .bell-head strong { font-size: 15px; } .bell-list { overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; } .bell-empty { padding: 30px 20px; text-align: center; color: var(--text-2); font-size: 13.5px; line-height: 1.6; } .bell-row { display: flex; align-items: flex-start; gap: 11px; padding: 12px 16px; border-bottom: 1px solid var(--border); color: inherit; text-align: left; width: 100%; transition: background .13s; } .bell-row:last-child { border-bottom: 0; } .bell-row:hover { background: var(--surface-2); } .bell-row.unread { background: color-mix(in srgb, var(--accent) 7%, transparent); } .bell-row.unread:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } .bell-row.unread .bell-txt strong::after { content: ""; display: inline-block; vertical-align: middle; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: 6px; } .bell-ico { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); } .bell-ico.bell-booking { background: var(--accent-soft); color: var(--accent-strong); } .bell-ico.bell-cancel { background: var(--danger-soft); color: var(--danger-strong); } .bell-ico.bell-message { background: var(--ok-soft); color: var(--ok-strong); } .bell-ico.bell-pending { background: var(--warn-soft); color: var(--warn-strong); } .bell-ico.bell-client { background: var(--accent-soft); color: var(--accent-strong); } .bell-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .bell-txt strong { font-size: 13.5px; font-weight: 700; } .bell-txt small { font-size: 12.5px; color: var(--text-2); line-height: 1.45; } .bell-txt time { font-size: 11.5px; color: var(--muted); } .bell-foot { border-top: 1px solid var(--border); padding: 8px 12px; display: flex; justify-content: center; } @media (max-width: 1023px) { .bell-panel { left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-height: 78dvh; border-radius: var(--r-xl) var(--r-xl) 0 0; border-left: 0; border-right: 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); animation: slide-up .2s cubic-bezier(.2, 1, .3, 1); } } @keyframes slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } } /* Περιορισμένος πελάτης: το σήμα πρέπει να φαίνεται με μια ματιά στην καρτέλα. */ .blocked-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: 16px; border-radius: var(--r); background: var(--warn-soft); color: var(--warn-strong); font-size: 13.5px; line-height: 1.5; } .blocked-note .icon { flex: none; margin-top: 1px; } /* ---------- Ακύρωση ραντεβού από τη δημόσια σελίδα ---------- Ξεχωρίζει από το «στείλε μήνυμα»: κόκκινο εικονίδιο, ώστε ο πελάτης να το βρίσκει αμέσως όταν το ψάχνει και να μην το πατάει κατά λάθος όταν δεν. */ .bk-cx-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 12px 13px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); transition: border-color .14s, transform .14s, background .14s; } .bk-cx-row:hover:not(.off) { border-color: var(--bk-1, var(--accent)); transform: translateY(-1px); } .bk-cx-row.off { opacity: .62; cursor: not-allowed; background: var(--surface-3); } .bk-cx-row .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .bk-cx-row .when { font-weight: 700; font-size: 14px; } .bk-cx-row .what { color: var(--text-2); font-size: 12.5px; } .bk-cx-row .what.warn { color: var(--warn-strong); font-weight: 600; } .bk-cx-go { color: var(--muted); flex: none; } .bk-reasons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .bk-reason { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 13.5px; font-weight: 600; color: var(--text-2); transition: all .14s; animation: bk-rise .32s cubic-bezier(.2,.9,.3,1) var(--d, 0ms) both; } .bk-reason:hover { border-color: var(--bk-1, var(--accent)); color: var(--text); } .bk-reason.on { background: var(--bk-1, var(--accent)); border-color: var(--bk-1, var(--accent)); color: #fff; } @media (prefers-reduced-motion: reduce) { .bk-reason { animation: none; } } /* Λόγος ακύρωσης όπως τον έδωσε ο πελάτης — στο modal και στο ιστορικό. */ .cancel-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; margin-bottom: 14px; border-radius: var(--r); background: var(--danger-soft); color: var(--danger-strong); font-size: 13px; line-height: 1.5; } .cancel-note .icon { flex: none; margin-top: 2px; } .hist-notes.cancelled { color: var(--danger-strong); font-weight: 600; } /* Σήμανση επιβεβαιωμένου κινητού στο πελατολόγιο (κοινό με την καρτέλα) */ .ph-ok { color: var(--ok-strong); vertical-align: -3px; display: inline-block; } .ph-unverified { font-size: 12px; align-self: center; }