/**
 * Terminbuchung – Styles
 * Side-by-side: Calendar left, Slots right
 * Inherits Elementor global CSS variables
 */

.tb-widget {
    --tb-primary: var(--e-global-color-primary, #2563eb);
    --tb-accent: var(--e-global-color-accent, #61ce70);
    --tb-text: var(--e-global-color-text, #1f2937);
    --tb-text-light: var(--e-global-color-text-secondary, #6b7280);
    --tb-border: rgba(0,0,0,0.08);
    --tb-radius: 8px;
    --tb-font: var(--e-global-typography-primary-font-family, inherit);
    --tb-transition: 0.2s ease;
    font-family: var(--tb-font);
    color: var(--tb-text);
    position: relative;
}
.tb-widget *, .tb-widget *::before, .tb-widget *::after { box-sizing: border-box; }

/* ─── Widget top-level layout ──────────────────── */
.tb-widget { display:flex; gap:0; align-items:stretch; }
.tb-content { flex:1; min-width:0; }

/* ─── Sidebar ──────────────────────────────────── */
.tb-sidebar {
    width:240px; flex-shrink:0;
    padding:28px 28px 28px 4px;
    border-right:1px solid var(--tb-border);
    margin-right:28px;
    display:flex; flex-direction:column; gap:0;
}
.tb-sidebar-logo { margin-bottom:16px; }
.tb-sidebar-logo-img {
    width:52px; height:52px; object-fit:contain;
    border-radius:8px; display:block;
}
.tb-sidebar-company {
    font-size:0.78em; color:var(--tb-text-light);
    font-weight:500; margin:0 0 6px; letter-spacing:0.02em;
}
.tb-sidebar-title {
    font-size:1.25em; font-weight:700; line-height:1.3;
    margin:0 0 14px; color:var(--tb-text);
}
.tb-sidebar-desc {
    font-size:0.88em; line-height:1.6;
    color:var(--tb-text-light); margin:0 0 24px;
}
.tb-sidebar-meta { margin-top:auto; }
.tb-sidebar-duration {
    display:inline-flex; align-items:center; gap:6px;
    font-size:0.88em; font-weight:500; color:var(--tb-text-light);
}
.tb-sidebar-duration svg { flex-shrink:0; }

/* ─── Main Layout ──────────────────────────────── */
.tb-main { display:grid; grid-template-columns:1fr 1fr; gap:0; min-height:340px; }
.tb-panel-left { padding:4px 24px 4px 0; border-right:1px solid var(--tb-border); position:relative; }
.tb-panel-right { padding:4px 0 4px 24px; display:flex; flex-direction:column; }

/* ─── Calendar Nav ─────────────────────────────── */
.tb-calendar-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.tb-month-label { font-weight:600; font-size:1.05em; letter-spacing:0.01em; }
.tb-nav-btn {
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; border:none; background:var(--tb-accent); color:#fff;
    cursor:pointer; border-radius:50%; transition:opacity var(--tb-transition); padding:0;
}
.tb-nav-btn:hover { opacity:0.85; }
.tb-nav-btn:disabled { opacity:0.4; cursor:default; }

/* ─── Weekdays ─────────────────────────────────── */
.tb-weekdays { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px; justify-items:center; }
.tb-weekdays span {
    text-align:center; font-size:0.75em; font-weight:600;
    color:var(--tb-text-light); padding:6px 0; text-transform:uppercase; letter-spacing:0.05em;
}

/* ─── Day Grid ─────────────────────────────────── */
.tb-days { display:grid; grid-template-columns:repeat(7,1fr); gap:6px 2px; justify-items:center; }
.tb-day {
    width:40px; height:40px; display:flex; align-items:center; justify-content:center;
    font-size:0.9em; border-radius:50%; border:none; background:none;
    color:var(--tb-text); cursor:default; transition:all var(--tb-transition); padding:0;
}
.tb-day.tb-empty { visibility:hidden; }
.tb-day.tb-past, .tb-day.tb-unavailable, .tb-day.tb-weekend { color:#b0b0b0; background:none !important; border:none !important; }
.tb-day.tb-today { font-weight:700; }
.tb-day.tb-has-slots {
    cursor:pointer; font-weight:600; color:var(--tb-text);
    background:color-mix(in srgb, var(--tb-accent) 30%, transparent) !important; border:none !important;
}
.tb-day.tb-has-slots:hover { background:color-mix(in srgb, var(--tb-accent) 50%, transparent) !important; }
.tb-day.tb-selected { background:var(--tb-accent) !important; color:#fff !important; }
.tb-day.tb-selected:hover { background:var(--tb-accent) !important; }

/* ─── Loading ──────────────────────────────────── */
.tb-loading {
    display:none; position:absolute; inset:0; background:rgba(255,255,255,0.85);
    align-items:center; justify-content:center; border-radius:var(--tb-radius); z-index:5;
}
.tb-widget.is-loading .tb-loading { display:flex; }
.tb-spinner {
    width:28px; height:28px; border:2.5px solid rgba(0,0,0,0.08);
    border-top-color:var(--tb-primary); border-radius:50%; animation:tb-spin 0.7s linear infinite;
}
@keyframes tb-spin { to{transform:rotate(360deg);} }

/* ─── Right Panel ──────────────────────────────── */
.tb-panel-right-title { font-weight:600; font-size:1.05em; margin:0 0 16px; padding:8px 0; letter-spacing:0.01em; }
.tb-slots-placeholder { display:flex; align-items:center; justify-content:center; flex:1; min-height:200px; }
.tb-slots-hint { color:var(--tb-text-light); font-size:0.9em; text-align:center; margin:0; }
.tb-slots-content { animation:tb-fadein 0.25s ease; }
.tb-selected-date { font-weight:600; margin:0 0 16px; font-size:1em; }
.tb-slot-list {
    display:flex; flex-direction:column; gap:8px;
    max-height:280px; overflow-y:auto; padding-right:4px;
}
.tb-slot-list::-webkit-scrollbar { width:4px; }
.tb-slot-list::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.12); border-radius:2px; }
.tb-slot-wrapper {
    display:flex; gap:8px; align-items:stretch;
    animation:tb-fadein 0.2s ease; animation-fill-mode:backwards;
}
.tb-slot {
    flex:1; padding:9px 10px; border:2px solid var(--tb-accent); border-radius:var(--tb-radius);
    background:#fff !important; color:var(--tb-accent); font-size:0.75em; font-weight:600;
    cursor:pointer; transition:all var(--tb-transition); font-family:var(--tb-font); text-align:center;
}
.tb-slot:hover { background:var(--tb-accent) !important; color:#fff !important; }
.tb-slot.tb-selected { background:var(--tb-accent) !important; color:#fff !important; flex:0 0 auto; }
.tb-slot-confirm {
    padding:9px 14px; background:var(--tb-primary); color:#fff; border:none;
    border-radius:var(--tb-radius); font-size:0.75em; font-weight:600; cursor:pointer;
    font-family:var(--tb-font); transition:opacity var(--tb-transition);
    white-space:nowrap; animation:tb-fadein 0.15s ease;
}
.tb-slot-confirm:hover { opacity:0.88; }

/* Stagger */
.tb-slot-wrapper:nth-child(1){animation-delay:0s}
.tb-slot-wrapper:nth-child(2){animation-delay:.03s}
.tb-slot-wrapper:nth-child(3){animation-delay:.06s}
.tb-slot-wrapper:nth-child(4){animation-delay:.09s}
.tb-slot-wrapper:nth-child(5){animation-delay:.12s}
.tb-slot-wrapper:nth-child(6){animation-delay:.15s}
.tb-slot-wrapper:nth-child(7){animation-delay:.18s}
.tb-slot-wrapper:nth-child(8){animation-delay:.21s}

/* ─── Transitions ──────────────────────────────── */
[data-step] { animation:tb-fadein 0.25s ease; }
@keyframes tb-fadein { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

/* ─── Back Button ──────────────────────────────── */
.tb-back-btn {
    display:inline-flex; align-items:center; gap:4px; background:var(--tb-accent); border:none;
    color:#fff; font-size:0.85em; cursor:pointer; padding:8px 12px;
    margin-bottom:16px; transition:opacity var(--tb-transition); font-family:var(--tb-font);
    border-radius:var(--tb-radius);
}
.tb-back-btn:hover { opacity:0.85; }

/* ─── Form ─────────────────────────────────────── */
.tb-form { max-width:500px; }
.tb-form-summary {
    display:flex; gap:12px; padding:12px 16px; background:rgba(0,0,0,0.03);
    border-radius:var(--tb-radius); margin-bottom:20px; font-size:0.9em; font-weight:500;
}
.tb-form-summary .tb-summary-time { color:var(--tb-primary); }

.tb-field-row { display:flex; gap:12px; }
.tb-field-half { flex:1; }
.tb-field { margin-bottom:14px; }
.tb-field label {
    display:block; font-size:0.85em; font-weight:500; margin-bottom:5px; color:var(--tb-text);
}
.tb-optional { font-weight:400; color:var(--tb-text-light); }
.tb-field input, .tb-field textarea {
    width:100%; padding:10px 12px; border:1.5px solid rgba(0,0,0,0.12);
    border-radius:var(--tb-radius); font-size:0.95em; font-family:var(--tb-font);
    color:var(--tb-text); background:#fff; transition:border-color var(--tb-transition); outline:none;
}
.tb-field input:focus, .tb-field textarea:focus { border-color:var(--tb-primary); }
.tb-field textarea { resize:vertical; min-height:70px; }
.tb-submit-btn {
    display:inline-flex; align-items:center; justify-content:center; width:100%;
    padding:12px 24px; background:var(--tb-primary); color:#fff; border:none;
    border-radius:var(--tb-radius); font-size:0.95em; font-weight:600; cursor:pointer;
    font-family:var(--tb-font); transition:opacity var(--tb-transition),transform var(--tb-transition); margin-top:4px;
}
.tb-submit-btn:hover { opacity:0.9; }
.tb-submit-btn:active { transform:scale(0.985); }
.tb-submit-btn:disabled { opacity:0.5; cursor:not-allowed; }

/* ─── Error ────────────────────────────────────── */
.tb-form-error {
    margin-top:12px; padding:10px 14px; background:#fef2f2;
    color:#991b1b; border-radius:var(--tb-radius); font-size:0.85em;
}

/* ─── Confirmation ─────────────────────────────── */
.tb-confirm { text-align:center; padding:40px 20px; }
.tb-confirm-icon { color:var(--tb-primary); margin-bottom:16px; }
.tb-confirm-icon svg { display:inline-block; }
.tb-confirm-title { font-weight:700; font-size:1.15em; margin:0 0 8px; }
.tb-confirm-details { font-weight:500; margin:0 0 4px; }
.tb-confirm-email { color:var(--tb-text-light); font-size:0.85em; margin:12px 0 0; }

/* ─── Responsive ───────────────────────────────── */
@media (max-width:768px) {
    .tb-widget { flex-direction:column; }
    .tb-sidebar {
        width:100%; padding:20px 0 20px;
        border-right:none; border-bottom:1px solid var(--tb-border);
        margin-right:0; margin-bottom:20px;
    }
    .tb-sidebar-title { font-size:1.1em; }
}
@media (max-width:600px) {
    .tb-main { grid-template-columns:1fr; }
    .tb-panel-left { padding:0 0 16px; border-right:none; border-bottom:1px solid var(--tb-border); }
    .tb-panel-right { padding:16px 0 0; }
    .tb-slot-list { flex-direction:row; flex-wrap:wrap; max-height:none; overflow:visible; }
    .tb-slot-wrapper { flex:0 0 auto; }
    .tb-slot { padding:10px 16px; }
    .tb-day { font-size:0.82em; width:34px; height:34px; }
    .tb-form { max-width:100%; }
    .tb-form-summary { flex-direction:column; gap:2px; }
    .tb-field-row { flex-direction:column; gap:0; }
}