* { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; max-width: 100%; overflow-x: hidden; overscroll-behavior-x: none; } /* Legacy --ui-* variables now alias to ThaiDai design tokens (tokens.css). * Both light and dark themes are inherited from [data-theme] on ; * see tokens.css for the source of truth. */ :root { --ui-bg: var(--td-bg); --ui-surface: var(--td-surface); --ui-surface-soft: var(--td-surface-2); --ui-text: var(--td-text); --ui-hint: var(--td-text-mute); --ui-primary: var(--td-gold); --ui-primary-strong: var(--td-gold-deep); --ui-primary-text: #1a1003; --ui-border: var(--td-line); --ui-shadow: var(--td-shadow); --ui-shadow-soft: var(--td-shadow-sm); --ui-danger: var(--td-danger); --ui-field-bg: var(--td-surface-2); --ui-field-bg-focus: var(--td-surface); --ui-service-hover: var(--td-surface-2); --ui-dock-btn-bg: var(--td-surface); --ui-dock-btn-bg-active: rgba(212,164,55,0.18); /* Tinted SVG icons toward gold so dock matches new accent. */ --ui-dock-icon-filter: brightness(0) saturate(100%) invert(74%) sepia(58%) saturate(478%) hue-rotate(2deg) brightness(91%) contrast(89%); --ui-register-accent-bg: rgba(212,164,55,0.10); --ui-register-accent-text: var(--td-gold); --ui-price-chip-text: var(--td-gold-soft); --ui-price-chip-bg-top: #1a2d4d; --ui-price-chip-bg-bottom: #0e1a30; --ui-price-chip-border: var(--td-gold); --ui-price-chip-shadow: rgba(0,0,0,0.32); --ui-price-chip-hover-shadow: rgba(212,164,55,0.32); --ui-price-chip-inner: rgba(212,164,55,0.18); } [data-theme="light"] { --ui-dock-btn-bg-active: rgba(168,127,31,0.16); --ui-dock-icon-filter: brightness(0) saturate(100%) invert(48%) sepia(95%) saturate(395%) hue-rotate(8deg) brightness(83%) contrast(86%); --ui-price-chip-text: var(--td-gold-deep); --ui-price-chip-bg-top: #fff8e7; --ui-price-chip-bg-bottom: #f0e3c4; --ui-price-chip-border: var(--td-gold); --ui-price-chip-inner: rgba(212,164,55,0.18); } body { font-family: var(--td-font-ui); background: var(--ui-bg); color: var(--ui-text); min-height: 100vh; padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); } #app, .page { width: 100%; max-width: 100%; overflow-x: hidden; } /* ─── Payment screen v3 (hero amount + radio methods + totals + CTA) */ .td-pay { padding: 6px 6px 80px; } .td-pay__hero { position: relative; padding: 28px 22px 24px; background: linear-gradient(160deg, #1f3a66 0%, #0e1a30 100%); border: 1px solid var(--td-gold); border-radius: 18px; text-align: center; margin-bottom: 22px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05); } .td-pay__hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(212,164,55,0.15), transparent 60%); pointer-events: none; } .td-pay__hero-lbl { position: relative; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--td-gold); margin-bottom: 12px; } .td-pay__hero-amount { position: relative; font-family: var(--td-font-display); font-weight: 600; letter-spacing: 0.02em; color: var(--td-gold); line-height: 1; margin-bottom: 12px; } .td-pay__hero-num { font-size: 56px; } .td-pay__hero-cur { font-size: 36px; font-weight: 500; margin-left: 8px; } .td-pay__hero-empty { font-size: 32px; color: var(--td-text-mute); } .td-pay__hero-sub { position: relative; font-size: 12px; color: var(--td-text-dim); letter-spacing: 0.04em; } .td-pay__label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--td-gold); margin-bottom: 10px; } .td-pay__methods { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; } .td-pay__method { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--td-surface); border: 1px solid var(--td-line); border-radius: 14px; width: 100%; text-align: left; cursor: pointer; font-family: var(--td-font-ui); color: var(--td-text); transition: all var(--td-anim-fast) ease; } .td-pay__method.is-selected { border-color: var(--td-gold); background: rgba(212,164,55,0.06); box-shadow: 0 0 0 3px rgba(212,164,55,0.10); } .td-pay__method-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--td-bg); border: 1px solid var(--td-line); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .td-pay__method-body { flex: 1; min-width: 0; } .td-pay__method-name { font-size: 14px; font-weight: 600; margin-bottom: 2px; } .td-pay__method-desc { font-size: 11px; color: var(--td-text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .td-pay__method-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--td-line); flex-shrink: 0; position: relative; } .td-pay__method.is-selected .td-pay__method-radio { border-color: var(--td-gold); } .td-pay__method.is-selected .td-pay__method-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--td-gold); } .td-pay__totals { background: var(--td-surface); border: 1px solid var(--td-line); border-radius: 14px; padding: 6px 16px; margin-bottom: 22px; } .td-pay__totals-row { display: flex; justify-content: space-between; padding: 12px 0; font-size: 14px; border-bottom: 1px solid var(--td-line-soft); } .td-pay__totals-row:last-child { border-bottom: 0; } .td-pay__totals-row.td-pay__totals-row--final { color: var(--td-gold); font-weight: 600; } .td-pay__totals-row .mono { font-family: var(--td-font-mono); } .td-pay__cta { display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; border-radius: 16px; border: 0; background: linear-gradient(180deg, var(--td-gold-soft) 0%, var(--td-gold) 100%); color: #1a1003; font-family: var(--td-font-ui); font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 12px 28px var(--td-gold-glow), inset 0 1px 0 rgba(255,255,255,0.3); } .td-pay__cta:hover { transform: translateY(-1px); } /* ─── Orders list v3 (filter chips + emoji icon + status pill) ─── */ .td-orders { padding: 6px 6px 80px; } .td-orders__chips { display: flex; gap: 6px; padding: 4px 0 14px; overflow-x: auto; scrollbar-width: none; } .td-orders__chips::-webkit-scrollbar { display: none; } .td-orders__chip { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--td-line); background: var(--td-surface); color: var(--td-text-dim); font-family: var(--td-font-ui); font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: all var(--td-anim-fast) ease; flex-shrink: 0; } .td-orders__chip:hover { color: var(--td-text); border-color: var(--td-gold-soft); } .td-orders__chip.is-active { background: var(--td-gold); color: #1a1003; border-color: var(--td-gold); font-weight: 600; } .td-orders__list { display: flex; flex-direction: column; gap: 0; } .td-orders__item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px 4px; background: transparent; border: 0; border-bottom: 1px solid var(--td-line-soft); font-family: var(--td-font-ui); color: var(--td-text); cursor: pointer; transition: background var(--td-anim-fast) ease; } .td-orders__item:last-child { border-bottom: 0; } .td-orders__item:hover { background: rgba(212,164,55,0.04); } .td-orders__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--td-surface); border: 1px solid var(--td-line); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .td-orders__body { flex: 1; min-width: 0; } .td-orders__name { font-size: 14px; font-weight: 600; color: var(--td-text); margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .td-orders__sub { font-size: 11px; color: var(--td-text-mute); display: flex; align-items: center; gap: 6px; } .td-orders__code { font-family: var(--td-font-mono); } .td-orders__sep { opacity: 0.5; } .td-orders__empty { padding: 60px 30px; text-align: center; } .td-orders__empty-art { font-size: 40px; margin-bottom: 14px; opacity: 0.7; } .td-orders__empty h3 { font-family: var(--td-font-display); font-size: 20px; margin: 0 0 6px; font-weight: 600; color: var(--td-text); } .td-orders__empty p { font-size: 13px; color: var(--td-text-mute); margin: 0; line-height: 1.5; } /* ─── Profile v3 (gold avatar + grouped rows + actions) ────────── */ .td-profile { padding: 0 6px 80px; } .td-profile__hero { text-align: center; padding: 0 0 18px; border-bottom: 1px solid var(--td-line-soft); margin-bottom: 16px; } .td-profile__avatar { display: inline-flex; align-items: center; justify-content: center; width: 78px; height: 78px; border-radius: 50%; background: linear-gradient(135deg, var(--td-gold-soft) 0%, var(--td-gold-deep) 100%); color: #1a1003; font-family: var(--td-font-display); font-size: 32px; font-weight: 700; box-shadow: 0 0 0 4px rgba(212,164,55,0.15), 0 12px 28px var(--td-gold-glow); margin-bottom: 14px; } .td-profile__name { font-family: var(--td-font-display); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--td-text); line-height: 1.1; } .td-profile__handle { font-family: var(--td-font-mono); font-size: 13px; color: var(--td-text-mute); margin-top: 4px; } .td-profile__group { margin-bottom: 18px; } .td-profile__group-h { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--td-text-mute); margin: 0 0 8px; } .td-profile__row { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: var(--td-surface); border: 1px solid var(--td-line); border-radius: 12px; margin-bottom: 6px; gap: 12px; } .td-profile__row-k { font-size: 13px; color: var(--td-text-dim); flex-shrink: 0; } .td-profile__row-v { font-size: 13px; color: var(--td-text); font-weight: 500; text-align: right; word-break: break-word; } .td-profile__row-v--mono { font-family: var(--td-font-mono); } .td-profile__row-v--gold { color: var(--td-gold); font-family: var(--td-font-mono); font-weight: 600; } .td-profile__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; } .td-profile__action { height: 46px; border-radius: 14px; border: 1px solid var(--td-line); background: var(--td-surface); color: var(--td-text); font-family: var(--td-font-ui); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color var(--td-anim-fast) ease, transform var(--td-anim-fast) ease; } .td-profile__action:hover { border-color: var(--td-gold-soft); transform: translateY(-1px); } .td-profile__action--gold { background: linear-gradient(180deg, var(--td-gold-soft) 0%, var(--td-gold) 100%); color: #1a1003; border-color: transparent; box-shadow: 0 6px 18px var(--td-gold-glow); } /* ─── Service Detail v3 (medallion + numbered docs + features) ──── */ .td-svc-detail { padding: 0 0 80px; } .td-svc-detail__hero { position: relative; padding: 28px 22px 22px; text-align: center; background: radial-gradient(120% 80% at 50% 0%, #1a2d4d 0%, var(--td-bg) 70%); border-bottom: 1px solid var(--td-line-soft); } [data-theme="light"] .td-svc-detail__hero { background: radial-gradient(120% 80% at 50% 0%, var(--td-surface-2) 0%, var(--td-bg) 75%); } .td-svc-detail__medallion { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 24px; background: linear-gradient(160deg, #1f3a66 0%, #0e1a30 100%); border: 1px solid var(--td-gold); box-shadow: 0 0 0 4px rgba(212,164,55,0.10), 0 16px 36px rgba(212,164,55,0.18), inset 0 1px 0 rgba(255,255,255,0.06); margin-bottom: 20px; } [data-theme="light"] .td-svc-detail__medallion { background: linear-gradient(160deg, var(--td-surface-2) 0%, var(--td-surface) 100%); } .td-svc-detail__tag-wrap { margin-bottom: 8px; } .td-svc-detail__tag { display: inline-block; padding: 4px 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(212,164,55,0.18); color: var(--td-gold); border: 1px solid rgba(212,164,55,0.35); border-radius: 999px; } .td-svc-detail__title { font-family: var(--td-font-display); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; color: var(--td-text); margin: 0 0 16px; } .td-svc-detail__meta-row { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; } .td-svc-detail__price { display: inline-flex; align-items: center; font-family: var(--td-font-mono); font-size: 14px; font-weight: 600; color: var(--td-gold); padding: 8px 14px; background: linear-gradient(180deg, #1a2d4d 0%, #0e1a30 100%); border: 1px solid var(--td-gold); border-radius: 10px; box-shadow: inset 0 1px 0 rgba(212,164,55,0.15); } [data-theme="light"] .td-svc-detail__price { background: linear-gradient(180deg, #fff8e7 0%, #f0e3c4 100%); color: var(--td-gold-deep); } .td-svc-detail__time { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--td-text-dim); } .td-svc-detail__time svg { color: var(--td-gold); } .td-svc-detail__section { padding: 18px 22px 4px; } .td-svc-detail__label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--td-gold); margin-bottom: 10px; } .td-svc-detail__text { font-size: 14px; line-height: 1.6; color: var(--td-text-dim); white-space: pre-wrap; word-wrap: break-word; } .td-svc-detail__text--rich { background: var(--td-surface); border: 1px solid var(--td-line); border-radius: 14px; padding: 14px 16px; color: var(--td-text); } .td-svc-detail__docs { list-style: none; margin: 0; padding: 0; } .td-svc-detail__docs li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--td-line-soft); font-size: 14px; color: var(--td-text); } .td-svc-detail__docs li:last-child { border-bottom: 0; } .td-svc-detail__doc-num { font-family: var(--td-font-mono); font-size: 11px; font-weight: 600; color: var(--td-gold); letter-spacing: 0.04em; min-width: 22px; padding-top: 2px; } .td-svc-detail__doc-text { flex: 1; line-height: 1.4; } .td-svc-detail__features { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .td-svc-detail__feat { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--td-surface); border: 1px solid var(--td-line); border-radius: 12px; font-size: 12px; color: var(--td-text); line-height: 1.3; } .td-svc-detail__feat-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--td-gold); color: #0a1426; font-size: 12px; font-weight: 700; flex-shrink: 0; } .td-svc-detail__cta { display: flex; align-items: center; justify-content: center; gap: 4px; width: calc(100% - 44px); margin: 24px 22px 0; height: 56px; border-radius: 16px; border: 0; background: linear-gradient(180deg, var(--td-gold-soft) 0%, var(--td-gold) 100%); color: #1a1003; font-family: var(--td-font-ui); font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 12px 28px var(--td-gold-glow), inset 0 1px 0 rgba(255,255,255,0.3); transition: transform var(--td-anim-fast) ease; } .td-svc-detail__cta:hover { transform: translateY(-1px); } .td-svc-detail__cta:active { transform: translateY(0); opacity: 0.92; } .td-svc-detail__register { margin: 24px 22px 0; padding: 16px; background: var(--td-surface); border: 1px solid rgba(212,164,55,0.3); border-radius: 16px; text-align: center; } .td-svc-detail__register-warn { font-size: 13px; color: var(--td-gold); margin-bottom: 12px; font-weight: 500; } .td-svc-detail__register .td-svc-detail__cta { margin: 0; width: 100%; height: 48px; } /* ─── Welcome / onboarding registration (full-screen, first launch) ── */ .td-welcome { position: fixed; inset: 0; z-index: 200; background: var(--td-bg); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 30px 22px calc(28px + env(safe-area-inset-bottom, 0px)); } .td-welcome::before { content: ''; position: absolute; inset: 0; background: radial-gradient(2px 2px at 18% 24%, rgba(232,196,106,0.55), transparent 50%), radial-gradient(1px 1px at 82% 18%, rgba(232,196,106,0.5), transparent 50%), radial-gradient(1.5px 1.5px at 32% 68%, rgba(232,196,106,0.4), transparent 50%), radial-gradient(1px 1px at 70% 60%, rgba(232,196,106,0.5), transparent 50%), radial-gradient(2px 2px at 90% 80%, rgba(232,196,106,0.4), transparent 50%); pointer-events: none; } .td-welcome__inner { position: relative; max-width: 380px; margin: 0 auto; text-align: center; } .td-welcome__medallion { width: 120px; height: 120px; border-radius: 50%; border: 2px solid var(--td-gold); background: var(--td-bg); margin: 14px auto 22px; overflow: hidden; box-shadow: 0 0 0 6px rgba(212,164,55,0.18), 0 20px 50px rgba(212,164,55,0.28), inset 0 1px 0 rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; position: relative; } .td-welcome__medallion img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .td-welcome__title { font-family: var(--td-font-display); font-size: 38px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 14px; color: var(--td-text); } .td-welcome__title em { display: block; font-style: italic; font-weight: 500; color: var(--td-gold); margin-top: 2px; } .td-welcome__sub { font-size: 14px; line-height: 1.5; color: var(--td-text-dim); margin: 0 0 28px; } .td-welcome__stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 28px; } .td-welcome__stat { background: var(--td-surface); border: 1px solid var(--td-line); border-radius: 14px; padding: 16px 8px 14px; text-align: center; box-shadow: var(--td-shadow-sm); } .td-welcome__stat-num { font-family: var(--td-font-display); font-size: 22px; font-weight: 600; color: var(--td-gold); letter-spacing: 0.01em; line-height: 1; margin-bottom: 6px; } .td-welcome__stat-lbl { font-size: 10px; color: var(--td-text-mute); text-transform: uppercase; letter-spacing: 0.1em; } .td-welcome__cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 56px; border-radius: 16px; border: none; background: linear-gradient(180deg, var(--td-gold-soft) 0%, var(--td-gold) 100%); color: #1a1003; font-family: var(--td-font-ui); font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 12px 28px var(--td-gold-glow), inset 0 1px 0 rgba(255,255,255,0.3); margin-bottom: 10px; transition: transform var(--td-anim-fast) ease; } .td-welcome__cta:hover { transform: translateY(-1px); } .td-welcome__cta:active { transform: translateY(0); opacity: 0.92; } .td-welcome__cta:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .td-welcome__skip { display: block; width: 100%; height: 50px; background: transparent; border: 1px solid var(--td-line); border-radius: 14px; color: var(--td-text-dim); font-family: var(--td-font-ui); font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color var(--td-anim-fast) ease, color var(--td-anim-fast) ease; } .td-welcome__skip:hover { border-color: var(--td-gold-soft); color: var(--td-text); } .td-welcome__legal { margin: 18px 0 0; font-size: 11px; line-height: 1.5; color: var(--td-text-mute); } [data-theme="light"] .td-welcome__medallion { background: linear-gradient(160deg, var(--td-surface-2) 0%, var(--td-surface) 100%); } /* ─── Catalog hero (v3 — design parity) ─────────────────────────── */ .td-cat-hero { position: relative; padding: 18px 18px 14px; background: radial-gradient(120% 80% at 50% 0%, #1a2d4d 0%, var(--td-bg) 70%); border-bottom: 1px solid var(--td-line); } [data-theme="light"] .td-cat-hero { background: radial-gradient(120% 80% at 50% 0%, var(--td-surface-2) 0%, var(--td-bg) 75%); } .td-cat-hero__top { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .td-cat-hero__brand { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; } .td-cat-hero__logo { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--td-gold); background: var(--td-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(212,164,55,0.16), 0 4px 14px rgba(212,164,55,0.20); } .td-cat-hero__logo img { width: 100%; height: 100%; object-fit: cover; } .td-cat-hero__name { font-family: var(--td-font-display); font-size: 17px; font-weight: 600; letter-spacing: 0.02em; color: var(--td-text); } .td-cat-hero__name em { font-style: italic; font-weight: 500; color: var(--td-gold); } .td-cat-hero__title { font-family: var(--td-font-display); font-size: 30px; font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; color: var(--td-text); margin: 4px 0 6px; } .td-cat-hero__title em { font-style: italic; font-weight: 500; color: var(--td-gold); } .td-cat-hero__sub { font-size: 13px; color: var(--td-text-dim); line-height: 1.5; max-width: 320px; margin: 0 0 12px; } .td-cat-hero__chips { display: flex; gap: 4px; padding: 2px 0; scrollbar-width: none; } .td-cat-hero__chips::-webkit-scrollbar { display: none; } .td-cat-hero__chip { display: inline-flex; align-items: center; justify-content: center; height: 26px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--td-line); background: var(--td-surface); color: var(--td-text-dim); font-family: var(--td-font-ui); font-size: 11px; font-weight: 500; letter-spacing: 0; white-space: nowrap; cursor: pointer; transition: all var(--td-anim-fast) ease; flex: 1 1 0; min-width: 0; } .td-cat-hero__chip:hover { color: var(--td-text); border-color: var(--td-gold-soft); } .td-cat-hero__chip.is-active { background: var(--td-gold); color: #1a1003; border-color: var(--td-gold); font-weight: 600; } .td-search-btn, .td-cat-hero .td-bell { position: static; flex-shrink: 0; } .td-search-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--td-surface); border: 1px solid var(--td-line); color: var(--td-text-dim); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--td-anim-fast) ease; } .td-search-btn:hover { border-color: var(--td-gold-soft); color: var(--td-gold); } .header h1 { font-family: var(--td-font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; text-align: center; color: var(--td-text); } .header p { font-size: 13px; color: var(--td-text-dim); margin-top: 6px; text-align: center; line-height: 1.45; } /* ─── Service list ─────────────────────────────────────────────── */ .services{ display:flex; flex-direction:column; gap:6px; padding:10px; width: 100%; max-width: 100%; overflow-x: hidden; } /* карточка услуги */ .services{ display:flex; flex-direction:column; gap: 8px; padding: 14px 16px 24px; } .service{ display: flex; align-items: center; gap: 12px; padding: 12px; width: 100%; text-align: left; font-family: var(--td-font-ui); border-radius: var(--td-card-radius); background: var(--td-surface); border: 1px solid var(--td-line); box-shadow: var(--td-shadow-sm); cursor: pointer; transition: border-color .2s ease, transform .15s ease, box-shadow .2s ease; } .service:hover{ border-color: var(--td-gold-soft); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.25); } .service:active{ transform: scale(.99); } .service.selected{ background: rgba(212,164,55,0.08); border-color: var(--td-gold); box-shadow: 0 0 0 3px rgba(212,164,55,0.12); } /* иконка — левый нижний угол */ .service-icon{ position: static; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 24px; border-radius: 12px; background: linear-gradient(160deg, var(--td-surface-2) 0%, var(--td-surface) 100%); border: 1px solid var(--td-line); flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } .service-icon svg { width: 26px; height: 26px; } /* текст — слева, по центру по вертикали как у цены */ .service-content{ position: static; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .service-title{ font-family: var(--td-font-ui); font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--td-text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; line-height: 1.2; } .service-title__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .service-tag { display: inline-block; padding: 1px 6px; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(212,164,55,0.18); color: var(--td-gold); border-radius: 4px; flex-shrink: 0; } .service-tag--new { background: rgba(92,209,232,0.16); color: var(--td-cyan); } .service-meta { font-size: 11px; color: var(--td-text-mute); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* цена — высота как у иконки (36px), правый нижний угол */ .service-price{ position: static; display: inline-flex; align-items: center; justify-content: center; font-family: var(--td-font-mono); font-weight: 600; font-size: 11px; padding: 7px 11px; text-align: center; white-space: nowrap; border-radius: 8px; border: 1px solid var(--ui-price-chip-border); color: var(--ui-price-chip-text); background: linear-gradient(180deg, var(--ui-price-chip-bg-top) 0%, var(--ui-price-chip-bg-bottom) 100%); box-shadow: inset 0 1px 0 var(--ui-price-chip-inner), 0 2px 6px var(--ui-price-chip-shadow); flex-shrink: 0; transition: box-shadow .25s ease; } .service-price:hover{ box-shadow: inset 0 1px 0 var(--ui-price-chip-inner), 0 6px 14px var(--ui-price-chip-hover-shadow); color: var(--ui-price-chip-text); } /* ─── Service detail page ───────────────────────────────────────── */ .page { display: none; } #listPage.active { display: block; padding: 0; } #detailPage { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--ui-surface); overflow-y: auto; overflow-x: hidden; width: 100%; max-width: 100vw; padding: 12px 16px calc(90px + env(safe-area-inset-bottom, 0px)); border-radius: 0 0 20px 20px; box-shadow: var(--ui-shadow); -webkit-overflow-scrolling: touch; } #detailPage.active { display: block; } #profilePage, #ordersPage, #paymentPage { position: fixed; top: 0; left: 0; right: 0; max-height: 85vh; z-index: 50; background: var(--ui-surface); overflow-y: auto; overflow-x: hidden; width: 100%; max-width: 100vw; padding: 12px 16px 32px; border-radius: 0 0 20px 20px; box-shadow: var(--ui-shadow); -webkit-overflow-scrolling: touch; } #profilePage.active, #ordersPage.active, #paymentPage.active { display: block; } .back-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0 16px 0; background: none; border: none; color: var(--ui-primary); font-size: 16px; cursor: pointer; font-family: inherit; } .back-btn-icon { width: 22px; height: 22px; opacity: 0.9; } .back-btn:active { opacity: 0.7; } .detail-title { font-family: var(--td-font-display); font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 14px; } .detail-price { display: inline-flex; align-items: center; font-family: var(--td-font-mono); font-size: 14px; font-weight: 600; color: var(--td-gold-soft); padding: 8px 14px; background: linear-gradient(180deg, #1a2d4d 0%, #0e1a30 100%); border: 1px solid var(--td-gold); border-radius: 10px; margin-bottom: 20px; box-shadow: inset 0 1px 0 rgba(212,164,55,0.15), 0 2px 6px rgba(0,0,0,0.3); } [data-theme="light"] .detail-price { background: linear-gradient(180deg, #fff8e7 0%, #f0e3c4 100%); color: var(--td-gold-deep); } .detail-section { margin-bottom: 20px; } .detail-section-label { font-size: 10px; font-weight: 700; color: var(--td-gold); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 10px; } .detail-section-content { font-size: 15px; line-height: 1.6; color: var(--ui-text); white-space: pre-wrap; } .detail-section-content ul { margin: 8px 0 0 16px; padding: 0; } .detail-section-content li { margin-bottom: 4px; } .detail-order-btn { width: 100%; padding: 14px; min-height: 52px; border-radius: 14px; border: none; background: linear-gradient(180deg, var(--td-gold-soft) 0%, var(--td-gold) 100%); color: #1a1003; font-family: var(--td-font-ui); font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 24px; touch-action: manipulation; box-shadow: 0 8px 24px var(--td-gold-glow), inset 0 1px 0 rgba(255,255,255,0.3); transition: transform var(--td-anim-fast) ease; } .detail-order-btn:hover { transform: translateY(-1px); } .detail-order-btn:active { transform: translateY(0); } /* Вторичный CTA (регистрация): те же размеры/отступы, акцент через смешивание с темой */ .detail-order-btn--register { background: var(--ui-primary-strong); color: var(--ui-primary-text); } @supports not (background: color-mix(in srgb, red, blue)) { .detail-order-btn--register { background: var(--ui-primary-strong); color: var(--ui-primary-text); } } .detail-register-block { background: var(--ui-register-accent-bg); border: 1px solid var(--ui-border); border-radius: 12px; padding: 14px 16px; margin-top: 24px; text-align: center; } .detail-register-block .warning { font-size: 14px; font-weight: 600; color: var(--ui-register-accent-text); margin-bottom: 10px; } .detail-register-block .btn { margin-top: 8px; } /* ─── Loading / empty ──────────────────────────────────────────── */ .loading { text-align: center; padding: 48px 16px; color: var(--ui-hint); font-size: 14px; } .spinner { width: 36px; height: 36px; border: 3px solid #d8e8f7; border-top-color: var(--ui-primary); border-radius: 50%; animation: spin 0.7s linear infinite; margin: 0 auto 12px; } @keyframes spin { to { transform: rotate(360deg); } } .error-msg { text-align: center; padding: 32px 16px; color: var(--ui-danger); font-size: 14px; } /* ─── Bottom dock menu ─────────────────────────────────────────── */ .dock { position: fixed; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); left: 12px; right: 12px; max-width: calc(100vw - 24px); z-index: 9999; display: flex; align-items: flex-end; justify-content: space-evenly; padding: 8px 12px; padding-bottom: 8px; min-height: 50px; border-radius: 18px; touch-action: manipulation; background: rgba(15,29,51,0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 12px 32px rgba(0,0,0,0.5); border: 1px solid var(--td-line); } [data-theme="light"] .dock { background: rgba(255,255,255,0.85); box-shadow: 0 12px 32px rgba(20,40,71,0.18); } .dock-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; width: 34px; flex-shrink: 0; border-radius: 8px; background: transparent; border: none; cursor: pointer; } .dock-item .dock-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; background: var(--ui-dock-btn-bg); border: 1px solid var(--td-line); transition: background var(--td-anim-fast) ease, border-color var(--td-anim-fast) ease; } .dock-item:hover .dock-btn, .dock-item:active .dock-btn, .dock-item.is-active .dock-btn { background: var(--ui-dock-btn-bg-active); border-color: var(--td-gold); } .dock-item.is-active .dock-label { color: var(--td-gold); } .dock-label { font-size: 9px; font-weight: 600; color: var(--td-text-mute); text-align: center; line-height: 1.1; white-space: nowrap; max-width: 70px; letter-spacing: 0.02em; text-transform: uppercase; } .dock-icon { width: 20px; height: 20px; object-fit: contain; display: block; filter: var(--ui-dock-icon-filter); } /* ─── Panel pages (profile, orders, payment) ────────────────────── */ .panel-content { padding: 16px; padding-top: 8px; } .panel-section { margin-bottom: 16px; } .panel-section-label { font-size: 12px; font-weight: 600; color: var(--ui-hint); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; } .panel-section-content { font-size: 15px; line-height: 1.6; color: var(--ui-text); } .panel-card { background: var(--ui-surface); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; border: 1px solid var(--ui-border); box-shadow: var(--ui-shadow-soft); } .orders-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .orders-card-service { font-size: 15px; font-weight: 500; color: var(--ui-text); } .orders-card-date { font-size: 13px; color: var(--ui-hint); flex-shrink: 0; } .panel-empty { text-align: center; padding: 32px 16px; color: var(--ui-hint); font-size: 14px; } .panel-link { color: var(--ui-primary); text-decoration: none; font-size: 15px; font-weight: 500; } .panel-link:active { opacity: 0.8; } /* ─── Registration form ──────────────────────────────────────────── */ #registrationPage { position: fixed; top: 0; left: 0; right: 0; max-height: 85vh; z-index: 50; background: var(--ui-surface); overflow-y: auto; overflow-x: hidden; width: 100%; max-width: 100vw; padding: 12px 16px 32px; border-radius: 0 0 20px 20px; box-shadow: var(--ui-shadow); -webkit-overflow-scrolling: touch; } #registrationPage.active { display: block; } .reg-form { padding: 4px 0 16px; } .reg-form-title { font-family: var(--td-font-display); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 6px; } .reg-form-hint { font-size: 13px; color: var(--td-text-dim); margin-bottom: 22px; line-height: 1.5; } .reg-error { color: var(--ui-danger); font-size: 13px; margin-bottom: 12px; } .reg-field { margin-bottom: 14px; } .reg-field label { display: block; font-size: 11px; font-weight: 600; color: var(--ui-hint); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; } .reg-field input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--ui-border); background: var(--ui-field-bg); color: var(--ui-text); font-size: 15px; font-family: inherit; outline: none; -webkit-appearance: none; } .reg-field input:focus { border-color: var(--ui-primary); background: var(--ui-field-bg-focus); box-shadow: 0 0 0 3px rgba(36,129,204,0.14); } .reg-submit-btn { width: 100%; padding: 14px; min-height: 52px; border-radius: 14px; border: none; background: linear-gradient(180deg, var(--td-gold-soft) 0%, var(--td-gold) 100%); color: #1a1003; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 12px; font-family: var(--td-font-ui); box-shadow: 0 8px 24px var(--td-gold-glow), inset 0 1px 0 rgba(255,255,255,0.3); transition: transform var(--td-anim-fast) ease; } .reg-submit-btn:hover { transform: translateY(-1px); } .reg-submit-btn:disabled { opacity: 0.6; } .reg-success { text-align: center; padding: 40px 16px; } .reg-success-icon { font-size: 48px; margin-bottom: 16px; } .reg-success-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; } .reg-success-text { font-size: 14px; color: var(--ui-hint); } /* ── Order success overlay ─────────────────────────────────────── */ .order-success-overlay { position: fixed; inset: 0; background: var(--td-bg); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 24px; animation: td-fade-in 200ms ease; } .order-success-card { text-align: center; max-width: 320px; width: 100%; } .order-success-icon { width: 110px; height: 110px; margin: 0 auto 24px; display: flex; align-items: center; justify-content: center; font-size: 0; } .order-success-icon::before { content: ''; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--td-gold-glow), transparent 60%); border: 2px solid var(--td-gold); box-shadow: 0 0 0 6px rgba(212,164,55,0.12), 0 12px 30px var(--td-gold-glow); display: block; position: relative; } .order-success-icon::after { content: '✓'; position: absolute; font-size: 56px; font-weight: 700; color: var(--td-gold); font-family: var(--td-font-display); line-height: 1; } .order-success-title { font-family: var(--td-font-display); font-size: 28px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 14px; color: var(--td-text); } .order-success-text { font-size: 14px; line-height: 1.6; color: var(--td-text-mute); margin-bottom: 32px; } .order-success-close { width: 100%; padding: 15px; min-height: 52px; border-radius: 14px; border: none; background: linear-gradient(180deg, var(--td-gold-soft) 0%, var(--td-gold) 100%); color: #1a1003; font-family: var(--td-font-ui); font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 24px var(--td-gold-glow), inset 0 1px 0 rgba(255,255,255,0.3); } .order-success-close:active { opacity: 0.85; } /* ── Profile rows ─────────────────────────────────────────────── */ .profile-rows { padding: 4px 0; } .profile-row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--ui-border); gap: 12px; } .profile-row:last-child { border-bottom: none; } .profile-key { font-size: 13px; color: var(--ui-hint); flex-shrink: 0; } .profile-val { font-size: 15px; color: var(--ui-text); text-align: right; word-break: break-all; } .profile-actions-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .profile-action-btn { flex: 1 1 0; min-width: 0; height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--ui-border); background: var(--ui-surface-soft); color: var(--ui-primary); font-size: 13px; font-weight: 600; line-height: 34px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: inherit; cursor: pointer; } .profile-action-btn--feedback { background: var(--ui-surface-soft); color: var(--ui-primary); } .profile-action-btn--review { background: linear-gradient(180deg, var(--td-gold-soft) 0%, var(--td-gold) 100%); color: #1a1003; border-color: transparent; box-shadow: 0 2px 8px var(--td-gold-glow); } .profile-action-btn:active { opacity: 0.85; transform: scale(0.98); } .profile-action-spacer { flex: 1 1 0; } /* ── Review modal ─────────────────────────────────────────────── */ .review-modal { position: fixed; inset: 0; z-index: 1200; background: rgba(2, 12, 26, 0.55); display: flex; align-items: flex-start; justify-content: center; padding: 0; } .review-modal-card { width: 100%; max-height: calc(100vh - env(safe-area-inset-top, 0px)); overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--ui-surface); border-radius: 0 0 18px 18px; margin-top: 0; padding: calc(env(safe-area-inset-top, 0px) + 2px) 10px calc(12px + env(safe-area-inset-bottom, 0px)); border-bottom: 1px solid var(--ui-border); } .review-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; } .review-modal-title { font-family: var(--td-font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--td-text); } .review-modal-close { border: none; background: transparent; color: var(--ui-hint); font-size: 18px; line-height: 1; padding: 4px; cursor: pointer; } .review-modal-hint { font-size: 12px; color: var(--ui-hint); margin-bottom: 10px; } .review-error { background: rgba(212, 75, 75, 0.12); border: 1px solid rgba(212, 75, 75, 0.26); color: #d44b4b; border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; font-size: 13px; } .review-field-label { display: block; font-size: 12px; color: var(--ui-hint); margin: 0 0 4px; } .review-input { width: 100%; border: 1px solid var(--ui-border); background: var(--ui-surface-soft); color: var(--ui-text); border-radius: 10px; padding: 8px 10px; font-size: 13px; line-height: 1.2; font-family: inherit; margin-bottom: 8px; } #reviewServiceSelect { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 28px; } #reviewServiceSelect option { white-space: nowrap; font-size: 13px; line-height: 1.15; } .review-textarea { min-height: 88px; resize: vertical; } .review-file-input { width: 100%; margin-bottom: 4px; font-size: 13px; color: var(--ui-hint); } .review-photo-name { font-size: 12px; color: var(--ui-hint); margin-bottom: 10px; } .review-actions { display: flex; gap: 6px; } .review-btn { flex: 1; height: 38px; border-radius: 10px; border: 1px solid transparent; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; } .review-btn-secondary { background: var(--ui-surface-soft); color: var(--ui-text); border-color: var(--ui-border); } .review-btn-primary { background: var(--ui-primary); color: var(--ui-primary-text); } .review-btn:disabled { opacity: 0.6; cursor: default; } /* ── Service survey modal ─────────────────────────────────────── */ .survey-modal { position: fixed; inset: 0; z-index: 1250; background: rgba(2, 12, 26, 0.42); display: flex; align-items: center; justify-content: center; padding: 18px; } .survey-modal-card { width: min(100%, 320px); background: var(--ui-surface); border-radius: 16px; border: 1px solid var(--ui-border); box-shadow: 0 16px 38px rgba(4, 16, 34, 0.24); padding: 14px 14px 12px; } .survey-modal-title { font-family: var(--td-font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--td-text); margin-bottom: 8px; } .survey-modal-question { font-size: 14px; color: var(--ui-text); line-height: 1.4; margin-bottom: 12px; } .survey-actions { display: flex; gap: 6px; justify-content: flex-end; } .survey-btn { min-width: 72px; height: 30px; border-radius: 9px; border: 1px solid transparent; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; } .survey-btn-secondary { background: var(--ui-surface-soft); color: var(--ui-text); border-color: var(--ui-border); } .survey-btn-primary { background: var(--ui-primary); color: var(--ui-primary-text); } .survey-btn:disabled { opacity: 0.55; cursor: default; } /* ── Orders sheet (full screen как услуги) ─────────────────────────── */ .orders-sheet { position: fixed; inset: 0; display: flex; flex-direction: column; z-index: 10001; background: var(--ui-surface); padding-top: env(safe-area-inset-top, 0px); overflow-x: hidden; } .orders-sheet-backdrop { display: none; } .orders-sheet-card { flex: 1; display: flex; flex-direction: column; min-height: 0; width: 100%; padding: 16px 16px calc(80px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .orders-sheet-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 0 12px; margin-bottom: 8px; border-bottom: 1px solid var(--ui-border); flex-shrink: 0; } .orders-sheet-title { font-family: var(--td-font-display); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; } .orders-sheet-close { background: none; border: none; font-size: 18px; color: var(--ui-hint); cursor: pointer; padding: 4px; } .orders-sheet-item { padding: 12px 0; border-bottom: 1px solid var(--ui-border); } .orders-sheet-item:last-child { border-bottom: none; } .orders-row { display: flex; align-items: center; gap: 12px; } .orders-row-name { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .orders-row-count { flex-shrink: 0; margin-left: auto; color: var(--ui-hint); font-size: 14px; } .orders-row-date { flex-shrink: 0; text-align: right; color: var(--ui-hint); font-size: 13px; } .orders-item-top { font-size: 15px; margin-bottom: 4px; } .orders-item-service { font-weight: 500; } .orders-item-meta { font-size: 13px; color: var(--ui-hint); } .orders-val { display: flex; align-items: center; gap: 8px; } .orders-dot-btn { background: var(--ui-surface-soft); border: none; border-radius: 8px; padding: 3px 8px; font-size: 13px; cursor: pointer; color: var(--ui-hint); letter-spacing: 1px; }