/* Tradeics Booking skin for Cal.diy (book.tradeics.com). Host: /opt/tradeics-brand/booking/assets/tradeics.css
   Injected by the tradeics-cal-brand sidecar (?v=N in conf/default.conf; bump on change, nginx reload).
   Values: tradeics-brand-standard.md. Cal tokens are overridden with html-qualified selectors so they beat :root/.dark. */
@import url("/tradeics-brand/kit/tx-kit.css");

html:root, html:not(.dark) {
  --cal-bg: #faf8f3; --cal-bg-muted: #fffdf9; --cal-bg-subtle: #f1eee6; --cal-bg-emphasis: #e7e3d8;
  --cal-text-emphasis: #0a0a0a; --cal-border-subtle: #ece8de;
}
html.dark {
  --cal-bg: #12110f; --cal-bg-muted: #141414; --cal-bg-subtle: #1f1f1f; --cal-bg-emphasis: #2b2a27;
  --cal-text-emphasis: #faf8f3; --cal-border-subtle: #ffffff14;
}
html:root, html.dark { --cal-brand: #ff7968 !important; --cal-brand-emphasis: #e85f4e !important; --cal-brand-text: #faf8f3 !important; }

/* Font */
html body, html body :where(button, input, textarea, select, h1, h2, h3, h4, p, span, a, label, div), html .font-cal, html .font-sans {
  font-family: var(--tx-font) !important;
}

/* Logos: our light logo is served by /api/logo; dark theme gets the cream logo instead of upstream's invert */
html.dark h3.logo img[src^="/api/logo"] { filter: none !important; content: url(/tradeics-brand/tradeics_booking_dark_logo.svg); }
html.dark h3.logo img[src*="type=icon"] { content: url(/tradeics-brand/tradeics_booking_dark_icon.svg); }
h3.logo img[src="/api/logo"] { height: 30px !important; }

/* Primary buttons: coral pill, cream text, coral shadow */
html body :is(button, a).bg-brand-default, html body [data-testid="confirm-book-button"], html body .tx-auth-card button[type="submit"] {
  background: #ff7968 !important; border: 1px solid #ff7968 !important; color: #faf8f3 !important;
  border-radius: 30px !important; min-height: 44px; box-shadow: 0 7px 10px rgba(255,120,78,.44) !important;
  cursor: pointer; transition: background-color .15s, color .15s, transform .05s;
}
html body :is(button, a).bg-brand-default:hover, html body [data-testid="confirm-book-button"]:hover, html body .tx-auth-card button[type="submit"]:hover {
  background: transparent !important; color: #ff7968 !important;
}
html body :is(button, a).bg-brand-default:active, html body [data-testid="confirm-book-button"]:active, html body .tx-auth-card button[type="submit"]:active { transform: translateY(2px); }
html body :is(button, a, input):focus-visible { box-shadow: 0 0 0 2px var(--cal-bg), 0 0 0 4px rgba(82,132,211,.7) !important; outline: none; }

/* Booker: raised card with shadow, pill time slots, round days */
.tx-booker-card { border-radius: 30px !important; border-color: transparent !important; box-shadow: var(--tx-card-shadow) !important; background: var(--cal-bg-muted) !important; overflow: hidden; }
html body [data-testid="time"] { border-radius: 30px !important; cursor: pointer; }
html body [data-testid="day"] { border-radius: 9999px !important; }
html body [data-testid="booker-container"] [role="radiogroup"], html body [data-testid^="toggle-group-item"] { border-radius: 9999px !important; }

/* Sign-in (auth pages): grid hidden, centred card, T mark + service name, pill inputs */
.tx-hide { display: none !important; }
.tx-auth-card { border-radius: 30px !important; border: 0 !important; box-shadow: var(--tx-card-shadow) !important; background: var(--cal-bg-muted) !important; }
.tx-auth-title { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 20px !important; font-weight: 600 !important; }
.tx-auth-title img { width: 28px; height: 28px; }
.tx-auth-card :is(input[type="email"], input[type="password"], input[type="text"]) { height: 54px !important; padding-left: 20px !important; }
.tx-auth-card :is(span, div):has(> input), .tx-auth-card div.rounded-lg:has(> span > input) { border-radius: 48px !important; }
.tx-auth-card button[type="submit"] { min-height: 56px !important; width: 100%; font-weight: 500; }
.tx-wordmark { position: fixed; top: 24px; left: 32px; z-index: 50; display: block; width: 150px; line-height: 0; }
.tx-wordmark img { width: 100%; height: auto; }
.tx-wordmark .tx-d, html.dark .tx-wordmark .tx-l { display: none; }
html.dark .tx-wordmark .tx-d { display: block; }
.tx-copy { position: fixed; bottom: 16px; left: 0; right: 0; text-align: center; color: #8a95a0; font: 400 12px/18px var(--tx-font); z-index: 5; }
@media (max-width: 640px) { .tx-wordmark { top: 16px; left: 16px; width: 108px; } }