/*
 * Overviu widget theme template
 * =============================
 *
 * Copy this file into your site's own CSS and change what you need. It restyles <overviu-calendar> and
 * <overviu-search> from the outside; nothing has to change in the tags themselves.
 *
 * There are three layers, from quickest to most precise:
 *
 *   1. Attributes on the tag:  theme="dark"  months="2"  button-text="Book now"  lang="hu"
 *   2. The --overviu-* variables below (colours, corners, spacing, type)
 *   3. ::part() rules, further down, for anything the variables don't reach
 *
 * Where a default comes from: your own value here wins; then, for the primary colour, its text colour and the
 * typeface, your Overviu branding (Settings → Branding); then the neutral defaults listed below.
 *
 * Every value below is the widget's default, so this file as it stands changes nothing except those three branded
 * values: delete the lines you don't want to set. The variables and parts are the widgets' public styling API and
 * only change in a major version. Class names inside the widgets (ovw-…) are not part of it.
 */

/* ---------------------------------------------------------------------------------------------------------------
 * 1. Variables
 * ------------------------------------------------------------------------------------------------------------ */

overviu-calendar,
overviu-search {
  /* Typeface, by name. Default: your branding font, then the visitor's system font.
     To take your page's own typeface without naming it, see the "box" part below. */
  --overviu-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Buttons and selected dates. Default: your branding colour, else this. */
  --overviu-color-primary: #18181b;

  /* Text on the primary colour. Default: chosen to suit your branding colour, else this. */
  --overviu-color-primary-text: #ffffff;

  /* Main text. */
  --overviu-color-text: #1f2937;

  /* Hints, weekday names, the note under the button. */
  --overviu-color-muted: #6b7280;

  /* The box. */
  --overviu-color-background: #ffffff;

  /* Borders and dividers. */
  --overviu-color-border: #e5e7eb;

  /* Dates that can't be picked. */
  --overviu-color-unavailable: #d1d5db;

  /* Corners of the box. */
  --overviu-radius: 12px;

  /* Corners of buttons. */
  --overviu-radius-button: 999px;

  /* Corners of a day in the calendar. 50% is a circle. */
  --overviu-radius-day: 50%;

  /* Corners of the search bar. 999px is a pill. */
  --overviu-radius-bar: 999px;

  /* Padding of the box and the gaps inside it. */
  --overviu-spacing: 16px;

  /* Base text size. Everything inside scales with it. */
  --overviu-font-size: 15px;

  /* Shadow of the box. "none" removes it. */
  --overviu-shadow: 0 1px 3px rgb(0 0 0 / .08);
}

/*
 * theme="dark" changes these defaults (the others stay as above). Set your own the same way, for dark widgets only:
 */

overviu-calendar[theme="dark"],
overviu-search[theme="dark"] {
  --overviu-color-primary: #f4f4f5;
  --overviu-color-primary-text: #18181b;
  --overviu-color-text: #f3f4f6;
  --overviu-color-muted: #9ca3af;
  --overviu-color-background: #18181b;
  --overviu-color-border: #3f3f46;
  --overviu-color-unavailable: #52525b;
  --overviu-shadow: 0 1px 3px rgb(0 0 0 / .5);
}

/* ---------------------------------------------------------------------------------------------------------------
 * 2. Parts
 *
 * Each rule below is an example, not a default: keep the ones you want. Write overviu-search::part(…) for the
 * search box, or both selectors separated by a comma.
 * ------------------------------------------------------------------------------------------------------------ */

/* box: the whole widget. It is at most 26em wide (48em with months="2"); this lets it fill its column.
   "font-family: inherit" here takes your page's own typeface (a variable can't carry "inherit"). */
overviu-calendar::part(box) {
  max-width: none;
  font-family: inherit;
}

/* header: the check-in and check-out dates at the top. */
overviu-calendar::part(header) {
  background: #f9fafb;
}

/* month: one month, its title and its grid. */
overviu-calendar::part(month) {
  padding: 0 4px;
}

/* day: every day in the calendar. */
overviu-calendar::part(day) {
  font-weight: 500;
}

/* day-selected: the check-in and check-out days. */
overviu-calendar::part(day-selected) {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #18181b;
}

/* day-in-range: the days between them. */
overviu-calendar::part(day-in-range) {
  font-weight: 700;
}

/* day-unavailable: days that can't be picked. */
overviu-calendar::part(day-unavailable) {
  text-decoration: none;
  opacity: .4;
}

/* guests: the guest picker. */
overviu-calendar::part(guests) {
  border-style: dashed;
}

/* price: the price lines (calendar only). */
overviu-calendar::part(price) {
  font-size: .95em;
}

/* total: the total line inside the price. */
overviu-calendar::part(total) {
  font-size: 1.2em;
}

/* button: the Continue button. */
overviu-calendar::part(button) {
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* error: why a stay can't be booked, or that the calendar couldn't be loaded. */
overviu-calendar::part(error) {
  color: #9a3412;
}

/* ---------------------------------------------------------------------------------------------------------------
 * 3. The search bar's parts
 *
 * <overviu-search> is one pill with Where, When and Who where it has at least 40em of room, and a compact pill that
 * opens a sheet where it has less. Its calendar and guest rows also take the month, day and guests parts above.
 * ------------------------------------------------------------------------------------------------------------ */

/* bar: the pill itself, in both shapes. It is at most 51em wide; this lets it fill its column. */
overviu-search::part(bar) {
  max-width: none;
}

/* cell: Where, When and Who in the wide bar. */
overviu-search::part(cell) {
  padding-block: .8em;
}

/* search-button: the round button at the end of the wide bar. */
overviu-search::part(search-button) {
  width: 3.25em;
  height: 3.25em;
}

/* popover: what opens under a cell: the towns, the calendar, the guest rows. */
overviu-search::part(popover) {
  box-shadow: 0 20px 50px rgb(0 0 0 / .25);
}

/* sheet: the dialog the compact pill opens. Its search button is the button part. */
overviu-search::part(sheet) {
  border-radius: 0;
}