/* ============================================================ Ραντεβού — 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; --muted: #94a3b8; --border: #e2e8f0; --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: #fdf0d2; --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: #64748b; --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; } 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: 17px; font-weight: 700; } 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; } .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: 3px; flex: 1; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px; 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; align-items: center; gap: 8px; border-top: 1px solid var(--border); padding-top: 12px; } .user-chip { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; } .user-chip-name { font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .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; border-radius: 10px; color: var(--muted); font-size: 10.5px; font-weight: 650; } .bb-item.on { color: var(--accent-strong); } .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; } .content { padding: 18px 14px calc(96px + env(safe-area-inset-bottom)); } } /* ============================================================ Page header */ .page-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; } .page-head-txt { flex: 1; min-width: 200px; } .page-head-txt p { color: var(--text-2); font-size: 14px; margin-top: 3px; } .page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* ============================================================ 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; } .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 { filter: brightness(1.03); } .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: 14px; } .field > label { font-size: 13px; font-weight: 650; color: var(--text-2); } .input, .textarea, .select { width: 100%; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 11px; font-size: 15px; font-family: inherit; transition: border-color .15s, box-shadow .15s; } .input { height: 42px; 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: 12.5px; } .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: 14px; } .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: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border); } .card-head h3 { flex: 1; } .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 */ .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 650; 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 { background: var(--ok-soft); color: var(--ok-strong); } .badge-cancelled { background: var(--surface-3); color: var(--muted); text-decoration: line-through; } .badge-no_show { background: var(--warn-soft); color: var(--warn-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 */ .tbl-wrap { overflow-x: auto; } .tbl { width: 100%; border-collapse: collapse; } .tbl th { text-align: left; font-size: 12px; font-weight: 700; color: var(--muted); padding: 12px 16px 8px; white-space: nowrap; } .tbl td { padding: 12px 16px; border-top: 1px solid var(--border); vertical-align: middle; } .tbl tbody tr { transition: background .12s; } .tbl tbody tr:hover { background: var(--surface-2); } .tbl .cell-main { font-weight: 650; } .tbl .cell-sub { font-size: 12.5px; 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; } /* ============================================================ 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 { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-2); padding: 11px 16px; 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: 19px; height: 19px; } .toast-ok .icon { color: var(--ok); } .toast-error .icon { color: var(--danger); } /* ============================================================ Empty state */ .empty { text-align: center; padding: 42px 20px; } .empty-ico { width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 20px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); } .empty-ico .icon { width: 30px; height: 30px; } .empty h3 { margin-bottom: 4px; } .empty p { color: var(--text-2); font-size: 14px; max-width: 340px; margin: 0 auto 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; } .am-hint { font-size: 13px; color: var(--text-2); margin: 10px 2px 12px; min-height: 18px; } .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); } .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; } @media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } } .stat-card { display: flex; gap: 13px; align-items: center; padding: 16px; } /* Διακριτική «είσοδος» των καρτών — δίνει ζωντάνια χωρίς να κουράζει */ .stat-grid > .stat-card { animation: bk-rise .45s cubic-bezier(.2,.9,.3,1) both; } .stat-grid > .stat-card:nth-child(2) { animation-delay: .06s; } .stat-grid > .stat-card:nth-child(3) { animation-delay: .12s; } .stat-grid > .stat-card:nth-child(4) { animation-delay: .18s; } .stat-card .stat-ico { transition: transform .25s cubic-bezier(.2,1.3,.4,1); } .stat-card:hover .stat-ico { transform: scale(1.08) rotate(-4deg); } .stat-ico { width: 44px; height: 44px; border-radius: 14px; flex: none; display: grid; place-items: center; color: #fff; background: var(--grad); box-shadow: 0 6px 14px -6px rgba(99, 102, 241, .5); } .stat-ico.teal { background: linear-gradient(135deg, #0ea5e9, #14b8a6); box-shadow: 0 6px 14px -6px rgba(20, 184, 166, .5); } .stat-ico.amber { background: linear-gradient(135deg, #f59e0b, #f97316); box-shadow: 0 6px 14px -6px rgba(245, 158, 11, .5); } .stat-ico.pink { background: linear-gradient(135deg, #ec4899, #f43f5e); box-shadow: 0 6px 14px -6px rgba(236, 72, 153, .5); } .stat-num { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; } .stat-lbl { font-size: 12.5px; color: var(--text-2); font-weight: 600; } .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); } .strip-appt.done { opacity: .58; } .strip-appt.skip { opacity: .32; filter: grayscale(.6); } .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; 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: 14px 16px; margin-bottom: 16px; border-radius: var(--r-lg); background: var(--accent-soft); color: var(--accent-strong); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); transition: transform .14s, box-shadow .14s; animation: bk-rise .45s cubic-bezier(.2,.9,.3,1) both; } .msg-alert:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } .msg-alert-ico { width: 42px; height: 42px; border-radius: 13px; flex: none; display: grid; place-items: center; color: #fff; background: var(--grad); animation: bk-beat 2.6s ease-in-out infinite; } .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: 15px 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: 12.5px; color: var(--text-2); margin-top: 2px; display: flex; align-items: center; gap: 7px; } .msg-body { font-size: 14px; margin: 8px 0 10px; white-space: pre-line; } .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: 6px; right: 50%; margin-right: -16px; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); } .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); border-radius: 13px; padding: 11px 14px; margin-bottom: 16px; color: var(--accent-strong); font-weight: 600; font-size: 14px; } /* 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: 10px; } .quick-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); font-weight: 650; font-size: 13.5px; text-align: left; transition: transform .13s, border-color .13s, background .13s; } .quick-btn:hover { transform: translateY(-2px); border-color: var(--accent); 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) 55%, transparent); border-radius: 11px; background: 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 10px; overflow: hidden; cursor: pointer; background: var(--ap-bg); 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: 3.5px; background: var(--ap); } .cal-appt:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); z-index: 6; } .cal-appt .t { font-size: 11px; font-weight: 700; color: var(--ap-txt); opacity: .85; font-variant-numeric: tabular-nums; } .cal-appt .n { font-size: 12.5px; font-weight: 700; 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 { filter: saturate(.55) opacity(.75); } .cal-appt.done .n::after { content: " ✓"; color: var(--ok-strong); } .cal-appt.noshow { filter: grayscale(.8) opacity(.6); } .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: var(--ap-bg); 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; border-top: 1px solid var(--border); } .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; } /* ============================================================ Λίστα ραντεβού */ .filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; } .filters .select { width: auto; min-width: 130px; height: 37px; font-size: 13.5px; } .filters .search-wrap { flex: 1; min-width: 180px; } .filters .input { height: 37px; font-size: 13.5px; } .chip-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } .chip-row a { padding: 6px 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: 16px 4px 8px; font-weight: 750; font-size: 14px; text-transform: capitalize; } .day-group-head .badge { font-size: 11px; } .appt-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); transition: background .12s; } .appt-row:hover { background: var(--surface-2); } .appt-row:first-child { border-top: 0; } .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: 11.5px; } .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; } /* ============================================================ Ρυθμίσεις */ .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: 12.5px; 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: 12.5px; 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: 42px; 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 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; } @media (max-width: 900px) { .stats-cards { grid-template-columns: repeat(2, 1fr); } } .stats-charts { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; } @media (max-width: 980px) { .stats-charts { grid-template-columns: 1fr; } } .chart-box svg { width: 100%; height: auto; display: block; } .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; overflow: hidden; } .login-blob { position: absolute; border-radius: 50%; filter: blur(64px); z-index: 0; will-change: transform; pointer-events: none; } .login-blob.b1 { width: 460px; height: 460px; background: #6366f1; opacity: .55; top: -150px; left: -130px; animation: drift-a 24s ease-in-out infinite; } .login-blob.b2 { width: 400px; height: 400px; background: #a855f7; opacity: .5; bottom: -150px; right: -110px; animation: drift-b 30s ease-in-out infinite; } .login-blob.b3 { width: 300px; height: 300px; background: #22d3ee; opacity: .28; top: -90px; right: 9%; animation: drift-c 27s ease-in-out infinite; } html[data-theme="dark"] .login-blob { opacity: .4; } .login-card { position: relative; z-index: 1; width: min(920px, 100%); display: grid; grid-template-columns: 1.1fr 1fr; border-radius: 26px; overflow: hidden; box-shadow: var(--shadow-pop); background: var(--surface); } .login-side { background: linear-gradient(150deg, #4f46e5, #7c3aed 55%, #a855f7); color: #fff; padding: 44px 40px; display: flex; flex-direction: column; position: relative; overflow: hidden; } .login-side::after { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(600px 300px at 110% 110%, rgba(255,255,255,.16), transparent 60%); } .login-side .brand-name { color: #fff; } .login-side h2 { font-size: 26px; margin: auto 0 10px; line-height: 1.3; position: relative; z-index: 1; } .login-side p { opacity: .85; font-size: 14.5px; position: relative; z-index: 1; } .login-float { position: relative; z-index: 1; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 15px; padding: 11px 14px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 10px; margin-top: 22px; } .login-float .icon { width: 17px; height: 17px; } .login-form { padding: 44px 38px; display: flex; flex-direction: column; justify-content: center; } .login-form h1 { font-size: 23px; margin-bottom: 4px; } .login-form > p { color: var(--text-2); font-size: 14px; margin-bottom: 22px; } .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; } @media (max-width: 800px) { .login-card { grid-template-columns: 1fr; } .login-side { padding: 30px 28px; min-height: 190px; } .login-side h2 { font-size: 20px; } .login-float { display: none; } } /* ============================================================ Δημόσιες κρατήσεις */ /* --- Τα 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-msg-card { order: 4; } .bk-foot { order: 5; } .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-msg-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; grid-row: 1 / span 3; order: 0; } [data-bk-theme="emerald"] .bk-msg-card { grid-column: 2; order: 1; } [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-msg-card { margin-top: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: calc(var(--bk-radius) * .8); box-shadow: var(--shadow-1); overflow: hidden; animation: bk-rise .5s cubic-bezier(.2,.9,.3,1) .18s both; } .bk-msg-toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 16px; text-align: left; } .bk-msg-ico { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; color: #fff; background: var(--grad); } .bk-msg-lead { flex: 1; min-width: 0; display: grid; } .bk-msg-lead strong { font-size: 14.5px; } .bk-msg-lead small { font-size: 12.5px; color: var(--text-2); } .bk-msg-chev { color: var(--muted); transition: transform .2s; } .bk-msg-toggle.open .bk-msg-chev { transform: rotate(180deg); } .bk-msg-form { padding: 0 16px 16px; animation: bk-rise .3s cubic-bezier(.2,.9,.3,1); } .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; } .error-code { font-size: 64px; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ============================================================ 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; } } /* Θέμα 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; } }