/* ============================================================================
   SnipeZone — custom CSS for the SimplyBook booking page (theme: dainty)

   Paste into BOTH tabs under Custom Features → Custom CSS:
     • "Booking pages CSS" — served to the standalone booking page as
       /uploads/snipezone/custom_css/webpage.css
     • "Widget CSS"       — the only channel that reaches the embedded widget
   Measured, not assumed: with the file in the first tab only, `--sz-navy` resolves
   on snipezone.simplybook.it but is absent inside the iframe on /book, so nothing
   here applies there. Same content in both — the widget-only rules are prefixed
   `.is-widget`, a class the standalone page does not have, so they stay inert.

   Token source of truth: snipezone-website/src/app/globals.css (@theme).

   Scope discipline: the theme already generates ~460 colour rules out of five
   variables in Settings → Design → Themes & Colours, so colours are set THERE
   (see README) and this file only covers what Design cannot express —
   typography, radii, shadows, dead space, and two contrast fixes.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Slab:wght@600;700&display=swap');

:root {
  --sz-sans: 'Roboto', ui-sans-serif, system-ui, 'Helvetica Neue', Arial, sans-serif;
  --sz-slab: 'Roboto Slab', ui-serif, Georgia, serif;
  --sz-navy: #213065;      /* --color-brand-navy    → headings, links */
  --sz-purple: #752789;    /* --color-brand-purple  → primary CTA */
  --sz-primary: #6ec1e4;   /* --color-brand-primary → focus ring */
  --sz-accent: #61ce70;    /* --color-brand-accent  → success */
  --sz-ink: #171717;       /* site body text */
  /* site card: shadow-sm + ring-1 ring-black/5 */
  --sz-card: 0 1px 2px rgba(0, 0, 0, .05), inset 0 0 0 1px rgba(0, 0, 0, .06);
}

/* --- 1. Typography ---------------------------------------------------------
   The theme ships Mulish (buttons, step rail) and Helvetica Neue (body).
   The site is Roboto with Roboto Slab for page-level headings. */

body,
.txt, .cap, .badge, .help-block, .alert,
.btn, .form-control, input, select, textarea,
#sb-main-container #main #sb-timeline #steps-nav ul .step_info_item .content .title-small,
#sb-main-container #main #sb-timeline #steps-nav ul .step_info_item .content .title-sub {
  font-family: var(--sz-sans);
}

/* Page-level headings only — slab, like the site's section titles */
.header-title, .title-main, #sb_booking_header .title, h1, h2 {
  font-family: var(--sz-slab);
  font-weight: 700;
}

/* List item titles = the site's card h3: sans, 600, brand navy */
#sb-timeline #steps #steps-content .step-content .item.panel .title,
#sb-timeline #steps #steps-content .step-content .item.panel .title a,
#sb-timeline #steps #steps-content .step-content .item.panel .mobile-title .title,
.content-mode-list .title, .content-mode-list .title a {
  font-family: var(--sz-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--sz-navy);
}

/* The theme puts a 2px grey rule across the very top of the page. */
body {
  border-top: 0;
}

/* --- 2. Cards --------------------------------------------------------------
   Site cards are `rounded-2xl bg-white shadow-sm ring-1 ring-black/5`.
   The theme instead paints a 4px bar in the base colour down the left edge
   (border-color is set with !important, hence the width override here).
   To keep the bar as a brand accent instead, drop the border-left-width line
   and use:  border-left-color: var(--sz-purple) !important; */

#sb-main-container #main #sb-timeline #steps #steps-content .step-content .item.panel,
#sb-main-container #main #sb-timeline #steps #steps-content .paid-attribute-step .content-mode-list .item.panel {
  border-left-width: 0 !important;
  border-radius: 16px;
  box-shadow: var(--sz-card);
}

/* The same bar is drawn on the inner .tab wrapper on the service/provider steps. */
#sb-main-container #main #sb-timeline #steps #steps-content .step-content .item .tab,
#sb-main-container #main #sb-timeline #steps #steps-content .paid-attribute-step .content-mode-list .item .tab {
  border-left-width: 0;
  border-radius: 16px;
}

/* The theme leaves a 45px band between the month calendar and the day timeline,
   which reads as a break in the flow at 1440px. */
#sb-main-container #main #sb-timeline #steps #steps-content .datetime-step #sb_dateview_container {
  margin-bottom: 24px;
}

/* Calendar and timeline panels get the same rounding */
#sb-timeline #steps #steps-content .datetime-step #sb_dateview_container .top-date-select,
#sb-timeline #steps #steps-content .datetime-step #sb_timeview_container .timeline-wrapper,
.modal .modal-dialog .modal-content {
  border-radius: 16px;
}

/* --- 3. Menu and step rail ------------------------------------------------ */

/* Menu labels: measured 16px/600 with 20px of vertical padding. That suited
   one-word items; the bilingual names ("Takaisin sivustolle / Back to site") turn six
   of them into a wall, especially in the widget's narrow column. Not scoped to the
   widget — the labels are just as long on the standalone page. */
#sb-main-container #header .nav-wrapper #sb_menu .nav li a {
  font-size: 15px;
  line-height: 1.3;
  padding: 14px 0;
}


/* Only the dead space is touched here. The rail is deliberately shadowless and
   absolutely positioned in the desktop layout, so giving it a card treatment
   draws a second box inside the one already there. */
#sb-main-container #main #sb-timeline #steps-nav {
  margin-bottom: 24px;        /* theme: 70px of empty space under the rail */
}

/* Once a step is done the rail shows the chosen value, not the step name — and with
   bilingual service names ("Huone 1 · 15 €/h · Arkipäivät 00–17 / Weekdays") that is a
   lot of text in a ~130px column set at 16px/600. */
#sb-main-container #main #sb-timeline #steps-nav ul .step_info_item .content .title-small,
#sb-main-container #main #sb-timeline #steps-nav ul .step_info_item .content .title-sub {
  font-size: 13px;
  line-height: 1.35;
  font-weight: 500;
}

/* Let step labels wrap instead of truncating to "YKSITTÄI…" */
#sb-timeline #steps-nav li .content .title-small,
#sb-main-container #main #sb-timeline #steps-nav ul .step_info_item .content .title-small,
#sb-main-container #main #sb-timeline #steps-nav ul .step_info_item .content .title-sub {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* --- 4. Buttons ----------------------------------------------------------
   Colour comes from Design → Button colour. Shape/behaviour mirrors the site's
   `rounded-full … font-medium … hover:opacity-90`. Box model is left to the
   theme on purpose — the pills are already correctly sized. */

.btn,
.invoice-pay-page-grid form input[type='submit'],
.invoice-pay-page-grid form input[type='button'] {
  font-family: var(--sz-sans);
  font-weight: 500;
  letter-spacing: 0;
  transition: opacity .15s ease, background-color .15s ease;
}

#sb_booking_content .btn-bar .btn-round-mask,
#sb_booking_content .btn-bar .btn.select,
#sb_booking_content .btn-bar .btn.select.custom,
.wrap-client-info-view .client-info-view .btn-bar .btn,
#sb-main-container #main #client-login .custom-form .sign_button_wrap .btn {
  border-radius: 9999px;
}

.btn:hover,
.btn:focus {
  opacity: .9;
}

/* --- 5. Form fields ------------------------------------------------------
   Theme = Bootstrap 3 defaults (34px tall, 4px radius, blue focus glow).
   Site = `rounded-lg border px-4 py-3 … focus:border-brand-primary`. */

/* Scoped to #main on purpose: the same classes appear in the header's login dropdown,
   where the theme sizes inputs to exactly 35px inside a 320px panel. Restyling those
   pushes that panel around, and the header was never meant to be part of this. */
#main .form-group .form-control,
#main .form-group input,
#main .form-group select,
#main .form-group textarea,
#main #sb_login_form .form-control,
.timezone-modal .form-control,
#sb_google_translate .goog-te-combo {   /* language picker, if that feature is on */
  min-height: 44px;
  padding: 10px 14px;
  font-size: 15px;
  color: var(--sz-ink);
  background: #fff;
  border: 1px solid #d4d4d4;   /* the secondary colour is too faint for a field edge */
  border-radius: 8px;
  box-shadow: none;
}

#main .form-group .form-control:focus,
#main .form-group input:focus,
#main .form-group select:focus,
#main .form-group textarea:focus,
#main #sb_login_form .form-control:focus,
#sb_google_translate .goog-te-combo:focus {
  border-color: var(--sz-primary);
  box-shadow: 0 0 0 3px rgba(110, 193, 228, .25);
  outline: 0;
}

#main .form-group .control-label {
  font-weight: 500;
  color: var(--sz-ink);
}

/* Keyboard focus is otherwise invisible on links and pills. */
a:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--sz-purple);
  outline-offset: 2px;
}

/* --- 6. Time slots ------------------------------------------------------- */

#sb-timeline #steps #steps-content #sb_timeview_container .timeline-wrapper .time-slot .cell,
#sb-timeline #steps #steps-content #sb_timeview_container .as-table .timeline-wrapper #sb_time_slots_container .slot a,
#sb-timeline #steps #steps-content #sb_timeview_container .timeline-wrapper .grid-weekly-inner .top-inline-steps .btn {
  border-radius: 8px;
}

/* --- 7. Alerts and validation -------------------------------------------
   The theme derives info/warning/success from the base colour as
   `rgba(base, .3)`, which lands dark text on a mid-tone block. Danger and
   required-field markers use the pastel cancellation colour, which is under
   3:1 on white. Both fixed here; the cancellation colour is left alone in
   Design because it also tints weekend/holiday labels in the calendar. */

.alert {
  border-radius: 12px;
}

.alert-success {
  background: rgba(97, 206, 112, .14) !important;
  border-color: rgba(97, 206, 112, .5) !important;
  color: #14532d !important;
}

.alert-info {
  background: rgba(110, 193, 228, .16) !important;
  border-color: rgba(110, 193, 228, .55) !important;
  color: #0c4a6e !important;
}

.alert-warning {
  background: rgba(245, 158, 11, .14) !important;
  border-color: rgba(245, 158, 11, .5) !important;
  color: #78350f !important;
}

.alert-danger {
  background: rgba(220, 38, 38, .1) !important;
  border-color: rgba(220, 38, 38, .45) !important;
  color: #7f1d1d !important;
}

.has-error .help-block,
#sb_additional_fields .form-group .control-label.required:after {
  color: #dc2626;
}

/* --- 8. Embedded widget only --------------------------------------------
   The wrapper element carries `is-widget iframe` (not the body), so these rules
   apply inside the embed and are inert in the "Booking pages CSS" tab. They can be
   previewed: `preview.sh` loads the widget URL top-level, which renders that wrapper
   without a cross-origin frame.

   Nothing is hidden here on purpose. The widget keeps its full menu inside the embed:
   its items (memberships, gift cards, my bookings) open in-frame, which is better than
   our own cards leaving for the standalone domain, and "Takaisin sivustolle" is now a
   `target="_blank"` link, so it no longer loads a site into the frame. Menu content
   belongs in Settings → Website pages, not in CSS. The step-back "‹ Takaisin"
   (`#sb_back_button`) is wanted behaviour and is likewise untouched.

   What is left is one real defect. The login/sign-up dialog overflows the frame by a
   few pixels. The theme caps the
   dialog at `max-height: 90vh` plus `margin: 30px auto`, while widget.js expands the
   iframe to 90% of the *parent* viewport on `modalShown` — so the dialog can need
   81% of the parent viewport plus 60px of margin inside a frame that is only 90% of
   it. With `scrolling="no"` on the frame, the surplus is simply clipped. Tying both
   numbers to the frame's own height removes the guesswork: 12px margins plus
   `100vh - 24px` always adds up to exactly the frame. Also overrides the theme's
   Safari-only rule, which hardcodes 730px and 40px margins. */
.is-widget .modal .modal-dialog,
.is-widget .modal .timezone-modal.modal-dialog {
  margin: 12px auto !important;
  max-height: calc(100vh - 24px) !important;
  overflow-y: auto !important;
}

.is-widget .modal {
  overflow-y: auto !important;
}

/* The header's login / profile panel gets clipped on its left edge inside the embed.
   The theme gives it `min-width: 360px` and centres it on the avatar with
   `left: 50%; transform: translateX(-50%)`. On the standalone page the avatar sits in
   a wide header, so there is room either side; in the widget layout it sits in the
   narrow left column, so 180px of the panel lands at negative x — and the frame has
   `overflow-x: hidden`, so that half is simply gone. Anchor it to the avatar's left
   edge instead and let it shrink on narrow frames. */
.is-widget #sb-main-container #header .nav-wrapper .items-wrapper .nav-item .login-container .full-info {
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  min-width: 0 !important;
  max-width: none !important;
  width: min(360px, calc(100vw - 16px)) !important;
}

/* --- 9. Mobile ----------------------------------------------------------- */

@media (max-width: 767px) {
  #sb-main-container #main #sb-timeline #steps #steps-content .step-content .item.panel {
    padding: 16px;
    border-radius: 14px;
  }

  #sb-main-container #main #sb-timeline #steps-nav {
    margin-bottom: 16px;
  }
}