#tt-bk-widget.tt-bk {
--tt-dark: #14313D;
--tt-dark-2: #1C4150;
--tt-orange: #F26A1F;
--tt-orange-dark: #D4570F;
--tt-green: #2F7A5C;
--tt-bg: #F2F5F5;
--tt-card: #FFFFFF;
--tt-border: #DCE3E4;
--tt-text: #1A2B33;
--tt-text-soft: #55676D;
--tt-danger-bg: #FBEFEA;
--tt-danger-text: #8A4A2E;
--tt-radius: 16px;
all: initial;
font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
display: block;
width: 100%;
color: var(--tt-text);
-webkit-font-smoothing: antialiased;
}
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');
#tt-bk-widget, #tt-bk-widget *, #tt-bk-widget *::before, #tt-bk-widget *::after {
box-sizing: border-box;
}
#tt-bk-widget h1, #tt-bk-widget h2, #tt-bk-widget h3, #tt-bk-widget p,
#tt-bk-widget ul, #tt-bk-widget li, #tt-bk-widget button, #tt-bk-widget input,
#tt-bk-widget label, #tt-bk-widget a {
margin: 0; padding: 0; font: inherit; color: inherit; text-align: left;
}
#tt-bk-widget .tt-bk-card {
/* Ei korttia – täysleveä sivuosio, tausta periytyy sivun omasta taustasta */
}
/* ---------- Header ---------- */
#tt-bk-widget .tt-bk-header {
background: linear-gradient(135deg, var(--tt-dark) 0%, var(--tt-dark-2) 100%);
padding: 30px 28px 24px;
color: #fff;
}
#tt-bk-widget .tt-bk-header h1 {
font-family: 'Space Grotesk', sans-serif;
font-size: 23px;
font-weight: 700;
line-height: 1.3;
color: #ffffff;
}
#tt-bk-widget .tt-bk-header p {
font-size: 14px;
color: #C7D3D6;
margin-top: 6px;
}
/* ---------- Progress (sama "putki" -idea kuin liidilomakkeessa) ---------- */
#tt-bk-widget .tt-bk-progress-wrap { padding: 18px 28px 4px; }
#tt-bk-widget .tt-bk-progress-track {
position: relative; height: 6px; background: #E2E9EA; border-radius: 4px; margin: 14px 6px 8px;
}
#tt-bk-widget .tt-bk-progress-fill {
position: absolute; top: 0; left: 0; height: 100%; width: 0%;
background: var(--tt-orange); border-radius: 4px;
transition: width 0.45s cubic-bezier(.4,0,.2,1);
}
#tt-bk-widget .tt-bk-lens {
position: absolute; top: 50%; left: 0%; width: 20px; height: 20px;
transform: translate(-50%, -50%); border-radius: 50%;
background: var(--tt-orange); border: 3px solid #fff;
box-shadow: 0 0 0 2px var(--tt-orange), 0 2px 6px rgba(20,49,61,0.35);
transition: left 0.45s cubic-bezier(.4,0,.2,1);
}
#tt-bk-widget .tt-bk-steps {
display: flex; justify-content: space-between; font-size: 11px; font-weight: 600;
color: var(--tt-text-soft); padding: 0 2px 16px; letter-spacing: 0.02em;
}
#tt-bk-widget .tt-bk-steps span.is-active { color: var(--tt-orange-dark); }
#tt-bk-widget .tt-bk-steps span.is-done { color: var(--tt-green); }
/* ---------- Screens ---------- */
#tt-bk-widget .tt-bk-screens { padding: 4px 28px 28px; }
#tt-bk-widget .tt-bk-screen[hidden] { display: none !important; }
#tt-bk-widget .tt-bk-screen { animation: tt-bk-fade 0.35s ease; }
@keyframes tt-bk-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
#tt-bk-widget .tt-bk-intro-lead {
font-size: 14.5px; color: var(--tt-text-soft); line-height: 1.55; margin: 10px 0 20px;
}
#tt-bk-widget .tt-bk-benefit-title {
font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 600; margin: 6px 0 14px;
}
#tt-bk-widget ul.tt-bk-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
#tt-bk-widget ul.tt-bk-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.45; }
#tt-bk-widget ul.tt-bk-list li::before {
content: ''; flex: 0 0 auto; width: 8px; height: 8px; margin-top: 6px; border-radius: 2px;
background: var(--tt-orange); transform: rotate(45deg);
}
#tt-bk-widget .tt-bk-question {
font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 600; line-height: 1.35; margin-bottom: 6px;
}
#tt-bk-widget .tt-bk-question-help { font-size: 13.5px; color: var(--tt-text-soft); margin-bottom: 20px; }
#tt-bk-widget .tt-bk-choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
#tt-bk-widget .tt-bk-choice-row.tt-bk-choice-row-3 { grid-template-columns: repeat(3, 1fr); }
#tt-bk-widget .tt-bk-mt { margin-top: 16px; }
#tt-bk-widget button.tt-bk-choice {
cursor: pointer; border: 1.5px solid var(--tt-border); background: var(--tt-bg);
border-radius: 12px; padding: 16px 12px; font-weight: 600; font-size: 15px; text-align: center;
transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
#tt-bk-widget button.tt-bk-choice:hover { border-color: var(--tt-orange); background: #FFF1E8; }
#tt-bk-widget button.tt-bk-choice:active { transform: scale(0.98); }
#tt-bk-widget button.tt-bk-choice:focus-visible { outline: 2px solid var(--tt-orange); outline-offset: 2px; }
#tt-bk-widget button.tt-bk-choice.tt-bk-yes:hover { border-color: var(--tt-green); background: #EEF6F1; }
#tt-bk-widget .tt-bk-back {
display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600;
color: var(--tt-text-soft); cursor: pointer; background: none; border: none; padding: 6px 0; margin-bottom: 6px;
}
#tt-bk-widget .tt-bk-back:hover { color: var(--tt-dark); }
/* ---------- "Varaa aika itsellesi" -aluevalinta ---------- */
#tt-bk-widget .tt-bk-region-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
#tt-bk-widget button.tt-bk-region-card {
cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px;
border: 1.5px solid var(--tt-border); background: var(--tt-bg); border-radius: 12px; padding: 16px;
transition: border-color .15s ease, background .15s ease;
}
#tt-bk-widget button.tt-bk-region-card:hover { border-color: var(--tt-orange); background: #FFF1E8; }
#tt-bk-widget button.tt-bk-region-card:focus-visible { outline: 2px solid var(--tt-orange); outline-offset: 2px; }
#tt-bk-widget .tt-bk-region-name { display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 16px; }
#tt-bk-widget .tt-bk-region-sub { display: block; font-size: 12.5px; color: var(--tt-text-soft); margin-top: 8px; }
#tt-bk-widget .tt-bk-region-arrow { font-size: 18px; color: var(--tt-orange); }
/* ---------- Viikkokalenteri ---------- */
#tt-bk-widget .tt-bk-recap {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
background: var(--tt-bg); border: 1px solid var(--tt-border); border-radius: 10px;
padding: 10px 14px; font-size: 13.5px; margin-bottom: 16px;
}
#tt-bk-widget .tt-bk-recap b { font-weight: 600; }
#tt-bk-widget .tt-bk-recap a { color: var(--tt-orange-dark); font-weight: 600; cursor: pointer; text-decoration: underline; }
#tt-bk-widget .tt-bk-week-nav {
display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
#tt-bk-widget .tt-bk-week-label { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 14.5px; }
#tt-bk-widget button.tt-bk-nav-arrow {
cursor: pointer; border: 1.5px solid var(--tt-border); background: #fff; border-radius: 8px;
width: 32px; height: 32px; font-size: 16px; font-weight: 700; color: var(--tt-dark);
}
#tt-bk-widget button.tt-bk-nav-arrow:hover:not(:disabled) { border-color: var(--tt-orange); color: var(--tt-orange-dark); }
#tt-bk-widget button.tt-bk-nav-arrow:disabled { opacity: 0.35; cursor: default; }
#tt-bk-widget .tt-bk-week-grid {
display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin: 0 -4px 8px; padding-left: 4px; padding-right: 4px;
}
#tt-bk-widget .tt-bk-day-col { flex: 0 0 auto; width: 96px; display: flex; flex-direction: column; gap: 6px; }
#tt-bk-widget .tt-bk-day-label {
text-align: center; font-size: 11.5px; font-weight: 600; color: var(--tt-text-soft);
padding-bottom: 6px; border-bottom: 2px solid var(--tt-border);
}
#tt-bk-widget .tt-bk-day-label .tt-bk-daynum { display: block; font-size: 14px; color: var(--tt-text); margin-top: 1px; }
#tt-bk-widget .tt-bk-day-col.is-today .tt-bk-day-label { border-bottom-color: var(--tt-orange); color: var(--tt-orange-dark); }
#tt-bk-widget button.tt-bk-slot {
cursor: pointer; border: 1.5px solid var(--tt-border); background: #EAF4EE; color: var(--tt-green);
border-radius: 8px; padding: 8px 2px; font-weight: 600; font-size: 11.5px; text-align: center; white-space: nowrap;
transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
#tt-bk-widget button.tt-bk-slot:hover { background: var(--tt-green); color: #fff; border-color: var(--tt-green); }
#tt-bk-widget button.tt-bk-slot:active { transform: scale(0.96); }
#tt-bk-widget button.tt-bk-slot.is-booked {
cursor: default; background: #F1F3F3; color: #A9B4B6; border-color: var(--tt-border); text-decoration: line-through;
}
#tt-bk-widget button.tt-bk-slot.is-booked:hover { background: #F1F3F3; color: #A9B4B6; }
#tt-bk-widget .tt-bk-day-none {
font-size: 11.5px; color: #A9B4B6; text-align: center; padding: 10px 2px; border: 1.5px dashed var(--tt-border); border-radius: 8px;
}
#tt-bk-widget .tt-bk-week-empty {
font-size: 13.5px; color: var(--tt-text-soft); text-align: center; padding: 14px; background: var(--tt-bg);
border-radius: 10px; border: 1px solid var(--tt-border);
}
/* ---------- Yhteystiedot ---------- */
#tt-bk-widget .tt-bk-field { margin-bottom: 16px; }
#tt-bk-widget .tt-bk-field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
#tt-bk-widget .tt-bk-field input {
width: 100%; padding: 13px 14px; border: 1.5px solid var(--tt-border); border-radius: 10px;
font-size: 15px; background: #fff; transition: border-color .15s ease;
}
#tt-bk-widget .tt-bk-field input:focus { outline: none; border-color: var(--tt-orange); }
#tt-bk-widget .tt-bk-field .tt-bk-error { display: none; font-size: 12.5px; color: var(--tt-danger-text); margin-top: 6px; font-weight: 500; }
#tt-bk-widget .tt-bk-field.has-error input { border-color: var(--tt-danger-text); }
#tt-bk-widget .tt-bk-field.has-error .tt-bk-error { display: block; }
#tt-bk-widget .tt-bk-primary {
width: 100%; display: block; box-sizing: border-box; cursor: pointer; background: var(--tt-orange); color: #fff; border: none;
border-radius: 10px; padding: 15px 18px; font-weight: 600; font-size: 15.5px; text-align: center; text-decoration: none;
transition: background .15s ease, transform .1s ease;
}
#tt-bk-widget .tt-bk-primary:hover { background: var(--tt-orange-dark); color: #fff; }
#tt-bk-widget .tt-bk-primary:active { transform: scale(0.99); }
#tt-bk-widget button.tt-bk-primary:disabled { opacity: 0.6; cursor: default; }
#tt-bk-widget .tt-bk-privacy { font-size: 12px; color: var(--tt-text-soft); margin-top: 12px; line-height: 1.5; }
#tt-bk-widget .tt-bk-privacy a { color: var(--tt-text-soft); text-decoration: underline; }
#tt-bk-widget .tt-bk-icon-circle {
width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
#tt-bk-widget .tt-bk-icon-circle.is-warn { background: var(--tt-danger-bg); }
#tt-bk-widget .tt-bk-icon-circle.is-ok { background: #EAF4EE; }
#tt-bk-widget .tt-bk-result-title { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 700; margin-bottom: 10px; }
#tt-bk-widget .tt-bk-result-body { font-size: 14.5px; color: var(--tt-text-soft); line-height: 1.55; margin-bottom: 4px; }
#tt-bk-widget .tt-bk-result-contact { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--tt-border); font-size: 14px; }
#tt-bk-widget .tt-bk-result-contact a { color: var(--tt-dark); font-weight: 600; text-decoration: none; }
@media (max-width: 400px) {
#tt-bk-widget .tt-bk-header { padding: 24px 20px 20px; }
#tt-bk-widget .tt-bk-progress-wrap { padding: 16px 20px 4px; }
#tt-bk-widget .tt-bk-screens { padding: 4px 20px 22px; }
#tt-bk-widget .tt-bk-header h1 { font-size: 22px; }
}