/* ============================================================
   YITH Booking – Calendar  |  JVmedia / Kaj
   Kaikki säännöt alkavat .ybc-calendar / .ybc-cartbar -luokalla,
   jotta teeman ja Elementorin nappi-, linkki- ja tekstityylit eivät vuoda sisään.
   ============================================================ */

.ybc-calendar,
.ybc-cartbar,
.ybc-quick {
	--ybc-bg:         #1a1a1a;
	--ybc-surface:    #242424;
	--ybc-text:       #e0e0e0;
	--ybc-text-muted: #8a8a8a;
	--ybc-accent:     #4caf50;
	--ybc-available:  #1f1f1f;
	--ybc-avail-text: #ffffff;
	--ybc-unavail-bg: #2b2b2b;
	--ybc-border:     #3a3a3a;
	--ybc-now:        #4caf50;
	--ybc-on-accent:  #ffffff;
	--ybc-subtle:     #1a1a1a;
	--ybc-stripe:     rgba(255, 255, 255, .12);
	--ybc-stripe-strong: rgba(255, 255, 255, .25);
	--ybc-hover-amount: 28%;
	--ybc-selected-amount: 20%;
	--ybc-shadow:     0 12px 32px rgba(0, 0, 0, .45);
	--ybc-danger:     #f2a0a0;
	--ybc-danger-border: rgba(229, 85, 85, .5);
	--ybc-danger-bg:  rgba(229, 85, 85, .12);
	--ybc-radius:     10px;
	--ybc-label-w:    180px;
	--ybc-cell-w:     60px;
	--ybc-cell-h:     66px;
}

/* ---- Vaalea teema (AINAGolf) ---- */
.ybc-calendar.ybc-theme-light,
.ybc-cartbar.ybc-theme-light,
.ybc-quick.ybc-theme-light {
	--ybc-bg:            #ffffff;
	--ybc-surface:       #ffffff;
	--ybc-border:        #dde3e8;
	--ybc-text:          #1f2a30;
	--ybc-text-muted:    #6b7780;
	--ybc-accent:        #216480;
	--ybc-now:           #6dd000;
	--ybc-available:     #ffffff;
	--ybc-avail-text:    #1f2a30;
	--ybc-unavail-bg:    #f1f3f5;
	--ybc-subtle:        #f5f7f9;
	--ybc-stripe:        rgba(31, 42, 48, .05);
	--ybc-stripe-strong: rgba(31, 42, 48, .18);
	--ybc-hover-amount:  10%;
	--ybc-selected-amount: 12%;
	--ybc-shadow:        0 10px 30px rgba(16, 42, 56, .16);
	--ybc-danger:        #b42318;
	--ybc-danger-border: #f1b8b3;
	--ybc-danger-bg:     #fef3f2;
}

.ybc-calendar.ybc-theme-light {
	border: 1px solid var(--ybc-border);
}

.ybc-calendar {
	font-family: var(--e-global-typography-text-font-family, inherit), sans-serif;
}

/* ---- Nollaus teeman tyyleille ---- */
.ybc-calendar {
	position:      relative;
	padding:       16px;
	background:    var(--ybc-bg);
	border-radius: var(--ybc-radius);
	color:         var(--ybc-text);
	font-family:   inherit;
	font-size:     14px;
	line-height:   1.3;
	text-align:    left;
	box-sizing:    border-box;
}

.ybc-calendar *,
.ybc-calendar *::before,
.ybc-calendar *::after,
.ybc-cartbar *,
.ybc-cartbar *::before,
.ybc-cartbar *::after {
	box-sizing: border-box;
}

.ybc-calendar [hidden],
.ybc-cartbar[hidden] {
	display: none !important;
}

.ybc-calendar p,
.ybc-calendar ul,
.ybc-cartbar ul {
	margin:  0;
	padding: 0;
}

.ybc-calendar a,
.ybc-cartbar a {
	text-decoration: none !important;
	box-shadow:      none;
}

.ybc-calendar button,
.ybc-cartbar button {
	margin:         0;
	min-height:     0;
	width:          auto;
	font-family:    inherit;
	font-size:      inherit;
	font-weight:    inherit;
	line-height:    1.2;
	letter-spacing: normal;
	text-transform: none;
	text-shadow:    none;
	box-shadow:     none;
	-webkit-appearance: none;
	appearance:     none;
}

.ybc-calendar small,
.ybc-cartbar small {
	font-size: inherit;
}

/* ---- Ohjaimet ---- */
.ybc-calendar .ybc-controls {
	display:       flex;
	align-items:   center;
	gap:           10px;
	margin-bottom: 16px;
	flex-wrap:     wrap;
}

.ybc-calendar .ybc-date-nav {
	display: flex;
	gap:     4px;
}

.ybc-calendar .ybc-btn {
	position:        relative;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	height:          36px;
	padding:         0 14px;
	background:      var(--ybc-surface);
	border:          1px solid var(--ybc-border);
	border-radius:   6px;
	color:           var(--ybc-text);
	font-size:       14px;
	line-height:     1;
	cursor:          pointer;
	transition:      border-color .15s;
}

.ybc-calendar .ybc-btn:hover:not(:disabled) {
	border-color: var(--ybc-text-muted);
	background:   var(--ybc-surface);
	color:        var(--ybc-text);
}

.ybc-calendar .ybc-btn:disabled {
	opacity: .4;
	cursor:  default;
}

.ybc-calendar .ybc-btn--icon {
	width:     36px;
	padding:   0;
	font-size: 18px;
}

/* Näkymän vaihto */
.ybc-calendar .ybc-switch {
	display:       inline-flex;
	margin-left:   auto;
	padding:       3px;
	background:    var(--ybc-subtle);
	border:        1px solid var(--ybc-border);
	border-radius: 8px;
	gap:           2px;
}

.ybc-calendar .ybc-switch__btn,
.ybc-calendar .ybc-switch__btn:hover {
	display:       inline-flex;
	align-items:   center;
	gap:           6px;
	height:        28px;
	padding:       0 10px;
	background:    transparent;
	border:        0;
	border-radius: 6px;
	color:         var(--ybc-text-muted);
	font-size:     13px;
	cursor:        pointer;
}

.ybc-calendar .ybc-switch__btn:hover {
	color: var(--ybc-text);
}

.ybc-calendar .ybc-switch__btn.is-active,
.ybc-calendar .ybc-switch__btn.is-active:hover {
	background: var(--ybc-surface);
	color:      var(--ybc-text);
	box-shadow: 0 0 0 1px var(--ybc-border);
}

.ybc-calendar .ybc-btn--datepicker {
	overflow:    hidden;
}

.ybc-calendar .ybc-date-input {
	position: absolute;
	inset:    0;
	width:    100%;
	height:   100%;
	margin:   0;
	padding:  0;
	border:   0;
	opacity:  0;
	cursor:   pointer;
}

.ybc-calendar .ybc-date-label,
.ybc-calendar .ybc-date-label:hover {
	display:       inline-flex;
	align-items:   center;
	gap:           6px;
	padding:       4px 8px;
	margin-left:   -8px;
	background:    transparent;
	border:        0;
	border-radius: 6px;
	color:         var(--ybc-text);
	font-size:     16px;
	font-weight:   600;
	cursor:        pointer;
}

.ybc-calendar .ybc-date-label::after {
	content:      '';
	width:        6px;
	height:       6px;
	margin-top:   -3px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform:    rotate(45deg);
	opacity:      .55;
}

.ybc-calendar .ybc-date-label:hover,
.ybc-calendar .ybc-date-label[aria-expanded="true"] {
	background: var(--ybc-subtle);
}

.ybc-calendar .ybc-date-label::first-letter {
	text-transform: uppercase;
}

/* ---- Runko ---- */
.ybc-calendar .ybc-body {
	position:   relative;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--ybc-border) transparent;
}

.ybc-calendar .ybc-body::-webkit-scrollbar        { height: 8px; }
.ybc-calendar .ybc-body::-webkit-scrollbar-track  { background: transparent; }
.ybc-calendar .ybc-body::-webkit-scrollbar-thumb  { background: var(--ybc-border); border-radius: 4px; }

.ybc-calendar .ybc-view.is-loading {
	opacity:        .45;
	pointer-events: none;
}

.ybc-calendar .ybc-loading {
	position:        absolute;
	inset:           0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	z-index:         5;
	min-height:      120px;
}

.ybc-calendar .ybc-spinner {
	width:            30px;
	height:           30px;
	border:           3px solid var(--ybc-border);
	border-top-color: var(--ybc-accent);
	border-radius:    50%;
	animation:        ybc-spin .7s linear infinite;
}

@keyframes ybc-spin { to { transform: rotate(360deg); } }

.ybc-calendar .ybc-message {
	margin-bottom: 12px;
	padding:       10px 14px;
	border-radius: 6px;
	background:    var(--ybc-danger-bg);
	border:        1px solid var(--ybc-danger-border);
	color:         var(--ybc-danger);
}

.ybc-calendar .ybc-empty {
	padding: 24px 0;
	color:   var(--ybc-text-muted);
}

.ybc-calendar.is-busy .ybc-view {
	cursor: progress;
}

/* ---- Aikajana (desktop) ---- */
.ybc-calendar .ybc-grid {
	display:               grid;
	grid-template-columns: var(--ybc-label-w) repeat(var(--ybc-cols), minmax(var(--ybc-cell-w), 1fr));
	width:                 100%;
	min-width:             calc(var(--ybc-label-w) + var(--ybc-cols) * var(--ybc-cell-w));
}

.ybc-calendar .ybc-grid__corner,
.ybc-calendar .ybc-grid__label {
	position:   sticky;
	left:       0;
	z-index:    3;
	background: var(--ybc-bg);
}

.ybc-calendar .ybc-grid__hour {
	padding:     0 0 8px;
	text-align:  center;
	font-size:   13px;
	color:       var(--ybc-text-muted);
	font-variant-numeric: tabular-nums;
}

.ybc-calendar .ybc-grid__category {
	grid-column:    1 / -1;
	padding:        14px 0 8px;
	font-size:      11px;
	font-weight:    700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align:     left;
	color:          var(--ybc-text-muted);
}

.ybc-calendar .ybc-grid__label {
	display:     flex;
	align-items: center;
	min-width:   0;
	padding:     0 12px 0 0;
	min-height:  var(--ybc-cell-h);
}

.ybc-calendar .ybc-grid__label a {
	display:       block;
	overflow:      hidden;
	color:         var(--ybc-text);
	font-size:     14px;
	font-weight:   600;
	white-space:   nowrap;
	text-overflow: ellipsis;
}

.ybc-calendar .ybc-grid__label a:hover {
	color: var(--ybc-accent);
}

/* Solut: viivat oikealle ja alas, ensimmäiselle sarakkeelle/riville myös vasen/ylä.
   Ei negatiivisia marginaaleja → ei turhaa vaakaskrollia. */
.ybc-calendar .ybc-cell {
	position:        relative;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             3px;
	height:          var(--ybc-cell-h);
	min-width:       0;
	background:      var(--ybc-available);
	border-right:    1px solid var(--ybc-border);
	border-bottom:   1px solid var(--ybc-border);
	overflow:        hidden;
	user-select:     none;
}

.ybc-calendar .ybc-cell.is-col-first { border-left: 1px solid var(--ybc-border); }
.ybc-calendar .ybc-cell.is-row-first { border-top:  1px solid var(--ybc-border); }

.ybc-calendar .ybc-cell__time {
	font-size:   13px;
	font-weight: 700;
	line-height: 1;
	color:       var(--ybc-avail-text);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ybc-calendar .ybc-cell__sub {
	font-size:   11px;
	line-height: 1;
	color:       var(--ybc-accent);
	white-space: nowrap;
}

.ybc-calendar .ybc-cell--available {
	cursor:     pointer;
	transition: background .1s;
}

.ybc-calendar .ybc-cell--available:hover,
.ybc-calendar .ybc-cell--available:focus-visible,
.ybc-calendar .ybc-cell.is-preview {
	background: color-mix(in srgb, var(--ybc-accent) var(--ybc-hover-amount), var(--ybc-available));
	outline:    none;
}

.ybc-calendar .ybc-cell.is-selected {
	box-shadow: inset 0 0 0 2px var(--ybc-accent);
}

.ybc-calendar .ybc-cell--unavailable {
	background-color: var(--ybc-unavail-bg);
	background-image: repeating-linear-gradient(135deg, var(--ybc-stripe) 0 6px, transparent 6px 12px);
}

.ybc-calendar .ybc-cell--unavailable .ybc-cell__time {
	color:   var(--ybc-text-muted);
	opacity: .7;
}

.ybc-calendar .ybc-cell--unavailable .ybc-cell__sub {
	color:       var(--ybc-text-muted);
	font-weight: 600;
}

.ybc-calendar .ybc-cell--unavailable.is-past {
	background-image: none;
	opacity:          .5;
}

.ybc-calendar .ybc-cell--incart {
	background:   var(--ybc-accent);
	border-color: color-mix(in srgb, var(--ybc-accent) 70%, #000);
	cursor:       pointer;
}

.ybc-calendar .ybc-cell--incart.is-end {
	border-right-color: var(--ybc-border);
}

.ybc-calendar .ybc-cell--incart .ybc-cell__time,
.ybc-calendar .ybc-cell--incart .ybc-cell__sub {
	color: var(--ybc-on-accent);
}

.ybc-calendar .ybc-cell--incart .ybc-cell__sub {
	font-weight: 600;
}

.ybc-calendar .ybc-cell--incart:hover,
.ybc-calendar .ybc-cell--incart:focus-visible {
	filter:  brightness(1.08);
	outline: none;
}

.ybc-calendar .ybc-cell.is-now::before {
	content:    '';
	position:   absolute;
	top:        0;
	bottom:     0;
	left:       0;
	width:      2px;
	background: var(--ybc-now);
}

/* ---- Listanäkymä (mobiili) ---- */
.ybc-calendar .ybc-chips {
	display:       flex;
	flex-wrap:     wrap;
	gap:           8px;
	margin-bottom: 16px;
}

.ybc-calendar .ybc-chip {
	padding:       10px 16px;
	background:    var(--ybc-surface);
	border:        1px solid var(--ybc-border);
	border-radius: 999px;
	color:         var(--ybc-text);
	font-size:     14px;
	font-weight:   600;
	cursor:        pointer;
}

.ybc-calendar .ybc-chip:hover {
	background: var(--ybc-surface);
	color:      var(--ybc-text);
}

.ybc-calendar .ybc-chip.is-active,
.ybc-calendar .ybc-chip.is-active:hover {
	background:   var(--ybc-text);
	border-color: var(--ybc-text);
	color:        var(--ybc-bg);
}

.ybc-calendar .ybc-times {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	gap:                   8px;
}

.ybc-calendar .ybc-time {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             4px;
	min-height:      56px;
	padding:         8px;
	background:      var(--ybc-surface);
	border:          1px solid var(--ybc-border);
	border-radius:   8px;
	color:           var(--ybc-avail-text);
	font-size:       15px;
	font-weight:     700;
	font-variant-numeric: tabular-nums;
}

.ybc-calendar .ybc-time small {
	font-size:   12px;
	font-weight: 500;
	color:       var(--ybc-accent);
}

.ybc-calendar .ybc-time--available {
	cursor: pointer;
}

.ybc-calendar .ybc-time--available:hover {
	background: var(--ybc-surface);
	color:      var(--ybc-avail-text);
}

.ybc-calendar .ybc-time--available.is-selected,
.ybc-calendar .ybc-time--available.is-preview {
	border-color: var(--ybc-accent);
	box-shadow:   inset 0 0 0 1px var(--ybc-accent);
}

.ybc-calendar .ybc-time--unavailable {
	background:      transparent;
	color:           var(--ybc-text-muted);
	font-weight:     500;
	opacity:         .55;
}

.ybc-calendar .ybc-time--unavailable small {
	color: var(--ybc-text-muted);
}

.ybc-calendar .ybc-time--incart,
.ybc-calendar .ybc-time--incart:hover {
	grid-column:  span 2;
	background:   var(--ybc-accent);
	border-color: var(--ybc-accent);
	color:        var(--ybc-on-accent);
	cursor:       pointer;
}

.ybc-calendar .ybc-time--incart small {
	color: var(--ybc-on-accent);
}

/* ---- Selite ---- */
.ybc-calendar .ybc-legend {
	display:         flex;
	justify-content: flex-end;
	flex-wrap:       wrap;
	gap:             16px;
	margin-top:      14px;
	font-size:       12px;
	color:           var(--ybc-text-muted);
}

.ybc-calendar .ybc-legend span {
	display:     inline-flex;
	align-items: center;
	gap:         6px;
}

.ybc-calendar .ybc-swatch {
	display:       inline-block;
	width:         14px;
	height:        14px;
	border:        1px solid var(--ybc-border);
	border-radius: 3px;
}

.ybc-calendar .ybc-swatch--available   { background: var(--ybc-available); border-color: var(--ybc-text-muted); }
.ybc-calendar .ybc-swatch--unavailable { background: var(--ybc-unavail-bg) repeating-linear-gradient(135deg, var(--ybc-stripe-strong) 0 2px, transparent 2px 4px); }
.ybc-calendar .ybc-swatch--incart      { background: var(--ybc-accent); border-color: var(--ybc-accent); }

.ybc-calendar.ybc-calendar--list .ybc-legend {
	justify-content: flex-start;
}

/* ---- Kestovalikko ---- */
.ybc-calendar .ybc-popover {
	position:      absolute;
	z-index:       20;
	width:         320px;
	max-width:     calc(100% - 16px);
	padding:       16px;
	background:    var(--ybc-surface);
	border:        1px solid var(--ybc-border);
	border-radius: var(--ybc-radius);
	box-shadow:    var(--ybc-shadow);
	color:         var(--ybc-text);
	text-align:    left;
}

.ybc-calendar .ybc-popover.ybc-popover--sheet {
	position:      fixed;
	left:          0 !important;
	right:         0;
	top:           auto !important;
	bottom:        0;
	width:         auto;
	max-width:     none;
	padding:       18px 16px calc(18px + env(safe-area-inset-bottom));
	border-radius: 16px 16px 0 0;
	z-index:       100000;
	animation:     ybc-sheet-in .18s ease-out;
}

@keyframes ybc-sheet-in {
	from { transform: translateY(24px); opacity: 0; }
	to   { transform: none; opacity: 1; }
}

.ybc-calendar .ybc-pop__head {
	display:         flex;
	justify-content: space-between;
	align-items:     flex-start;
	gap:             12px;
	margin-bottom:   14px;
}

.ybc-calendar .ybc-pop__head strong {
	display:     block;
	font-size:   15px;
	font-weight: 700;
	color:       var(--ybc-text);
}

.ybc-calendar .ybc-pop__head span {
	display:   block;
	margin-top: 2px;
	font-size: 13px;
	color:     var(--ybc-text-muted);
}

.ybc-calendar .ybc-pop__close,
.ybc-calendar .ybc-pop__close:hover {
	padding:     0 4px;
	background:  none;
	border:      0;
	color:       var(--ybc-text-muted);
	font-size:   22px;
	line-height: 1;
	cursor:      pointer;
}

.ybc-calendar .ybc-pop__title {
	margin-bottom:  8px;
	font-size:      11px;
	font-weight:    700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color:          var(--ybc-text-muted);
}

.ybc-calendar .ybc-pop__durs {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
	gap:                   6px;
}

.ybc-calendar .ybc-dur {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            4px;
	padding:        10px 4px;
	background:     var(--ybc-subtle);
	border:         1px solid var(--ybc-border);
	border-radius:  8px;
	color:          var(--ybc-text);
	cursor:         pointer;
	overflow:       hidden;
}

.ybc-calendar .ybc-dur span {
	font-size:   15px;
	font-weight: 700;
	line-height: 1;
}

.ybc-calendar .ybc-dur small {
	font-size:   11px;
	line-height: 1.1;
	color:       var(--ybc-text-muted);
	white-space: nowrap;
}

.ybc-calendar .ybc-dur:hover:not(:disabled),
.ybc-calendar .ybc-dur:focus-visible {
	background:   var(--ybc-subtle);
	border-color: var(--ybc-accent);
	color:        var(--ybc-text);
	outline:      none;
}

.ybc-calendar .ybc-dur.is-current {
	border-color: var(--ybc-accent);
	background:   color-mix(in srgb, var(--ybc-accent) var(--ybc-selected-amount), var(--ybc-bg));
}

.ybc-calendar .ybc-dur:disabled {
	opacity: .35;
	cursor:  not-allowed;
}

.ybc-calendar .ybc-pop__remove,
.ybc-calendar .ybc-pop__remove:hover {
	display:       block;
	width:         100%;
	margin-top:    10px;
	padding:       10px;
	background:    none;
	border:        1px solid var(--ybc-danger-border);
	border-radius: 8px;
	color:         var(--ybc-danger);
	font-size:     13px;
	text-align:    center;
	cursor:        pointer;
}

/* ---- Korin alapalkki ---- */
.ybc-cartbar {
	position:       fixed;
	left:           0;
	right:          0;
	bottom:         0;
	z-index:        99999;
	padding:        0 12px calc(12px + env(safe-area-inset-bottom));
	color:          var(--ybc-text);
	font-size:      14px;
	line-height:    1.3;
	text-align:     left;
	pointer-events: none;
	animation:      ybc-sheet-in .2s ease-out;
}

.ybc-cartbar .ybc-cartbar__inner {
	max-width:      760px;
	margin:         0 auto;
	background:     var(--ybc-surface);
	border:         1px solid var(--ybc-border);
	border-radius:  12px;
	box-shadow:     var(--ybc-shadow);
	overflow:       hidden;
	pointer-events: auto;
}

.ybc-cartbar.is-busy .ybc-cartbar__inner {
	opacity: .7;
}

.ybc-cartbar .ybc-cartbar__list {
	list-style:    none;
	max-height:    40vh;
	padding:       6px 0;
	overflow-y:    auto;
	border-bottom: 1px solid var(--ybc-border);
}

.ybc-cartbar .ybc-cartbar__list li {
	display:     flex;
	align-items: center;
	gap:         12px;
	margin:      0;
	padding:     8px 16px;
	list-style:  none;
}

.ybc-cartbar .ybc-cartbar__list li > span:first-child {
	flex: 1;
}

.ybc-cartbar .ybc-cartbar__price {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.ybc-cartbar .ybc-cartbar__item-actions {
	display: inline-flex;
	gap:     6px;
}

.ybc-cartbar .ybc-cartbar__edit,
.ybc-cartbar .ybc-cartbar__remove {
	display:       inline-flex;
	align-items:   center;
	gap:           5px;
	padding:       6px 10px;
	background:    transparent;
	border:        1px solid var(--ybc-border);
	border-radius: 6px;
	color:         var(--ybc-text);
	font-size:     12px;
	font-weight:   600;
	line-height:   1;
	white-space:   nowrap;
	cursor:        pointer;
}

.ybc-cartbar .ybc-cartbar__edit:hover {
	background:   transparent;
	border-color: var(--ybc-accent);
	color:        var(--ybc-text);
}

.ybc-cartbar .ybc-cartbar__remove {
	border-color: var(--ybc-danger-border);
	color:        var(--ybc-danger);
}

.ybc-cartbar .ybc-cartbar__remove:hover {
	background:   var(--ybc-danger-bg);
	border-color: var(--ybc-danger);
	color:        var(--ybc-danger);
}

.ybc-cartbar .ybc-cartbar__hint {
	margin-left: auto;
	font-size:   12px;
	color:       var(--ybc-text-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}

.ybc-cartbar .ybc-cartbar__row {
	display:     flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         12px;
	padding:     10px 10px 10px 16px;
}

.ybc-cartbar .ybc-cartbar__toggle,
.ybc-cartbar .ybc-cartbar__toggle:hover {
	display:     flex;
	align-items: baseline;
	gap:         10px;
	flex:        1;
	padding:     4px 0;
	background:  none;
	border:      0;
	color:       var(--ybc-text);
	text-align:  left;
	cursor:      pointer;
}

.ybc-cartbar .ybc-cartbar__count {
	font-weight: 700;
}

.ybc-cartbar .ybc-cartbar__total {
	color: var(--ybc-text-muted);
	font-variant-numeric: tabular-nums;
}

.ybc-cartbar .ybc-cartbar__actions {
	display:     flex;
	align-items: center;
	gap:         8px;
}

.ybc-cartbar .ybc-cartbar__link,
.ybc-cartbar .ybc-cartbar__link:hover {
	padding: 10px 12px;
	color:   var(--ybc-text);
}

.ybc-cartbar .ybc-cartbar__checkout,
.ybc-cartbar .ybc-cartbar__checkout:hover {
	padding:       11px 18px;
	background:    var(--ybc-accent);
	border-radius: 8px;
	color:         var(--ybc-on-accent);
	font-weight:   700;
	white-space:   nowrap;
}

.ybc-cartbar .ybc-cartbar__checkout:hover {
	filter: brightness(1.08);
}

body.ybc-has-cartbar {
	padding-bottom: 96px;
}

/* ---- Kapeat näytöt ---- */
@media (max-width: 640px) {
	.ybc-calendar {
		padding:       12px;
		--ybc-label-w: 112px;
		--ybc-cell-w:  58px;
	}

	.ybc-calendar .ybc-grid__label a {
		font-size: 13px;
	}

	.ybc-calendar .ybc-switch__btn span {
		display: none;
	}

	/* Päivämäärä omalle rivilleen, napit samalle riville */
	.ybc-calendar .ybc-date-label {
		order: 3;
	}

	.ybc-calendar .ybc-controls::after {
		content:    '';
		order:      2;
		flex-basis: 100%;
	}

	.ybc-cartbar .ybc-cartbar__row {
		padding: 10px 12px;
	}

	.ybc-cartbar .ybc-cartbar__list li {
		flex-wrap: wrap;
		gap:       6px 12px;
	}

	.ybc-cartbar .ybc-cartbar__item-actions {
		width: 100%;
	}

	.ybc-cartbar .ybc-cartbar__actions {
		width: 100%;
	}

	.ybc-cartbar .ybc-cartbar__checkout {
		flex:       1;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ybc-calendar .ybc-popover--sheet,
	.ybc-cartbar {
		animation: none;
	}
}

/* ---- Korissa olevan varauksen muokkausvihje ---- */
.ybc-calendar .ybc-cell__edit,
.ybc-calendar .ybc-time__edit {
	display:     inline-flex;
	align-items: center;
	gap:         4px;
}

.ybc-calendar .ybc-cell__edit {
	padding:       2px 6px;
	border-radius: 999px;
	background:    rgba(0, 0, 0, .22);
	font-size:     10px;
}

.ybc-calendar .ybc-cell--incart:hover .ybc-cell__edit,
.ybc-calendar .ybc-cell--incart:focus-visible .ybc-cell__edit {
	background: rgba(0, 0, 0, .35);
}

.ybc-calendar .ybc-icon-edit {
	flex: none;
}

/* Vaalea teema: valittu simulaattori brändivärillä */
.ybc-calendar.ybc-theme-light .ybc-chip.is-active,
.ybc-calendar.ybc-theme-light .ybc-chip.is-active:hover {
	background:   var(--ybc-accent);
	border-color: var(--ybc-accent);
	color:        var(--ybc-on-accent);
}

/* ---- Päivävalitsin ---- */
.ybc-calendar .ybc-datepop {
	position:      absolute;
	top:           64px;
	right:         16px;
	z-index:       30;
	width:         300px;
	max-width:     calc(100% - 32px);
	padding:       14px;
	background:    var(--ybc-surface);
	border:        1px solid var(--ybc-border);
	border-radius: var(--ybc-radius);
	box-shadow:    var(--ybc-shadow);
	animation:     ybc-dp-in .14s ease-out;
}

@keyframes ybc-dp-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

.ybc-calendar .ybc-dp__head {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	margin-bottom:   10px;
}

.ybc-calendar .ybc-dp__head strong {
	font-size:   15px;
	font-weight: 700;
	color:       var(--ybc-text);
}

.ybc-calendar .ybc-dp__nav,
.ybc-calendar .ybc-dp__nav:hover {
	width:         32px;
	height:        32px;
	padding:       0;
	background:    transparent;
	border:        1px solid var(--ybc-border);
	border-radius: 6px;
	color:         var(--ybc-text);
	font-size:     18px;
	line-height:   1;
	cursor:        pointer;
}

.ybc-calendar .ybc-dp__nav:hover:not(:disabled) {
	background: var(--ybc-subtle);
}

.ybc-calendar .ybc-dp__nav:disabled {
	opacity: .3;
	cursor:  default;
}

.ybc-calendar .ybc-dp__grid {
	display:               grid;
	grid-template-columns: repeat(7, 1fr);
	gap:                   3px;
}

.ybc-calendar .ybc-dp__wd {
	padding:        4px 0 6px;
	text-align:     center;
	font-size:      11px;
	font-weight:    700;
	text-transform: uppercase;
	color:          var(--ybc-text-muted);
}

.ybc-calendar .ybc-dp__day,
.ybc-calendar .ybc-dp__day:hover {
	position:      relative;
	aspect-ratio:  1;
	padding:       0;
	background:    transparent;
	border:        1px solid transparent;
	border-radius: 8px;
	color:         var(--ybc-text);
	font-size:     14px;
	font-weight:   500;
	font-variant-numeric: tabular-nums;
	cursor:        pointer;
}

.ybc-calendar .ybc-dp__day:hover:not(:disabled) {
	background: var(--ybc-subtle);
	border-color: var(--ybc-border);
}

.ybc-calendar .ybc-dp__day.is-today {
	border-color: var(--ybc-accent);
	font-weight:  700;
}

.ybc-calendar .ybc-dp__day.is-selected,
.ybc-calendar .ybc-dp__day.is-selected:hover {
	background:   var(--ybc-accent);
	border-color: var(--ybc-accent);
	color:        var(--ybc-on-accent);
	font-weight:  700;
}

.ybc-calendar .ybc-dp__day.has-cart::after {
	content:       '';
	position:      absolute;
	left:          50%;
	bottom:        4px;
	width:         5px;
	height:        5px;
	margin-left:   -2.5px;
	border-radius: 50%;
	background:    var(--ybc-accent);
}

.ybc-calendar .ybc-dp__day.is-selected.has-cart::after {
	background: var(--ybc-on-accent);
}

.ybc-calendar .ybc-dp__day:disabled {
	color:  var(--ybc-text-muted);
	opacity: .35;
	cursor: default;
}

.ybc-calendar .ybc-dp__quicks {
	display:     flex;
	gap:         6px;
	margin-top:  12px;
	padding-top: 12px;
	border-top:  1px solid var(--ybc-border);
}

.ybc-calendar .ybc-dp__quick,
.ybc-calendar .ybc-dp__quick:hover {
	flex:          1;
	padding:       8px;
	background:    var(--ybc-subtle);
	border:        1px solid var(--ybc-border);
	border-radius: 6px;
	color:         var(--ybc-text);
	font-size:     13px;
	font-weight:   600;
	cursor:        pointer;
}

.ybc-calendar .ybc-dp__quick:hover:not(:disabled) {
	border-color: var(--ybc-accent);
}

.ybc-calendar .ybc-dp__quick:disabled {
	opacity: .4;
	cursor:  default;
}

.ybc-calendar .ybc-dp__note {
	margin-top: 10px;
	font-size:  12px;
	color:      var(--ybc-text-muted);
	text-align: center;
}

@media (max-width: 640px) {
	.ybc-calendar .ybc-datepop {
		left:  12px;
		right: 12px;
		top:   96px;
		width: auto;
		max-width: none;
	}
}

/* ---- Listanäkymä: Kaikki simulaattorit ---- */
.ybc-calendar .ybc-list__category {
	margin:         4px 0 -4px;
	font-size:      11px;
	font-weight:    700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color:          var(--ybc-text-muted);
}

.ybc-calendar .ybc-list__group + .ybc-list__group,
.ybc-calendar .ybc-list__category + .ybc-list__group {
	margin-top: 18px;
}

.ybc-calendar .ybc-list__group + .ybc-list__category {
	margin-top: 22px;
}

.ybc-calendar .ybc-list__name {
	margin:      0 0 8px;
	padding:     0;
	font-family: inherit;
	font-size:   15px;
	font-weight: 700;
	line-height: 1.3;
	color:       var(--ybc-text);
	text-transform: none;
	letter-spacing: normal;
}

.ybc-calendar .ybc-list__group .ybc-empty {
	padding: 4px 0 0;
}

/* ---- Aikajana pystyssä (tunnit riveinä, simulaattorit sarakkeina) ---- */
.ybc-calendar.ybc-calendar--vgrid .ybc-body {
	overflow: visible; /* sarakkeet mahtuvat leveyteen; sallii otsikkorivin "sticky"-käytöksen */
}

.ybc-calendar .ybc-vgrid {
	display:               grid;
	grid-template-columns: 52px repeat(var(--ybc-cols), minmax(0, 1fr));
	width:                 100%;
}

.ybc-calendar .ybc-vgrid__corner,
.ybc-calendar .ybc-vgrid__head {
	position:   sticky;
	top:        0;
	z-index:    4;
	background: var(--ybc-bg);
}

.ybc-calendar .ybc-vgrid__head {
	display:        flex;
	align-items:    flex-end;
	justify-content: center;
	min-width:      0;
	padding:        6px 4px 8px;
	text-align:     center;
}

.ybc-calendar .ybc-vgrid__head a {
	display:            -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow:           hidden;
	color:              var(--ybc-text);
	font-size:          13px;
	font-weight:        700;
	line-height:        1.2;
	word-break:         break-word;
}

.ybc-calendar .ybc-vgrid__hour {
	display:     flex;
	align-items: center;
	padding-right: 8px;
	font-size:   12px;
	font-weight: 600;
	color:       var(--ybc-text-muted);
	font-variant-numeric: tabular-nums;
}

.ybc-calendar .ybc-vgrid .ybc-cell {
	height: 48px;
}

.ybc-calendar .ybc-vgrid .ybc-cell__sub {
	font-size: 12px;
}

/* Korissa oleva jakso yhtenäisenä palkkina pystysuunnassa */
.ybc-calendar .ybc-vgrid .ybc-cell--incart {
	border-right-color: var(--ybc-border);
}

.ybc-calendar .ybc-vgrid .ybc-cell--incart:not(.is-end) {
	border-bottom-color: color-mix(in srgb, var(--ybc-accent) 70%, #000);
}

/* Nykyhetki vaakaviivana solun yläreunassa */
.ybc-calendar .ybc-vgrid .ybc-cell.is-now::before {
	top:    0;
	left:   0;
	right:  0;
	bottom: auto;
	width:  auto;
	height: 2px;
}

@media (max-width: 640px) {
	.ybc-calendar .ybc-vgrid {
		grid-template-columns: 44px repeat(var(--ybc-cols), minmax(0, 1fr));
	}

	.ybc-calendar .ybc-vgrid__head a {
		font-size: 12px;
	}

	.ybc-calendar .ybc-vgrid .ybc-cell__sub {
		font-size: 11px;
	}

	.ybc-calendar .ybc-vgrid .ybc-cell__edit span {
		display: none; /* kapeassa solussa pelkkä kynäkuvake */
	}
}

/* Kapea näyttö: ohjainrivi mahtuu yhdelle riville kolmella näkymänapilla */
@media (max-width: 640px) {
	.ybc-calendar .ybc-controls {
		gap: 6px;
	}

	.ybc-calendar .ybc-btn--today {
		padding: 0 10px;
	}

	.ybc-calendar .ybc-switch__btn,
	.ybc-calendar .ybc-switch__btn:hover {
		padding: 0 8px;
	}
}

/* ---- Logot nimien tilalla ---- */
.ybc-calendar img.ybc-logo {
	display:    block;
	max-width:  100%;
	height:     auto;
	margin:     0;
	padding:    0;
	border:     0;
	border-radius: 0;
	box-shadow: none;
	object-fit: contain;
}

/* Aikajana (vaaka): logo rivin vasemmassa reunassa */
.ybc-calendar .ybc-grid__label.has-logo a {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           100%;
	height:          100%;
	padding:         8px 0;
}

.ybc-calendar .ybc-grid__label img.ybc-logo {
	max-height: 46px;
	max-width:  150px;
}

.ybc-calendar .ybc-grid__label.has-logo a:hover img.ybc-logo {
	opacity: .8;
}

/* Aikajana (pysty): logo sarakkeen otsikossa */
.ybc-calendar .ybc-vgrid__head.has-logo {
	align-items: center;
	height:      56px;
	padding:     6px;
}

.ybc-calendar .ybc-vgrid__head.has-logo a {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           100%;
	height:          100%;
}

.ybc-calendar .ybc-vgrid__head img.ybc-logo {
	max-height: 40px;
}

/* Lista: logo simulaattorivalinnassa ja ryhmän otsikossa */
.ybc-calendar .ybc-chip.has-logo {
	display:     inline-flex;
	align-items: center;
	height:      44px;
	padding:     6px 16px;
}

.ybc-calendar .ybc-chip img.ybc-logo {
	max-height: 28px;
	max-width:  120px;
}

/* Valittu logo-chip: pidetään tausta vaaleana, jotta logo erottuu; valinta näkyy reunuksena */
.ybc-calendar .ybc-chip.has-logo.is-active,
.ybc-calendar .ybc-chip.has-logo.is-active:hover,
.ybc-calendar.ybc-theme-light .ybc-chip.has-logo.is-active,
.ybc-calendar.ybc-theme-light .ybc-chip.has-logo.is-active:hover {
	background:   var(--ybc-surface);
	border-color: var(--ybc-accent);
	box-shadow:   0 0 0 2px var(--ybc-accent);
	color:        var(--ybc-text);
}

.ybc-calendar .ybc-list__name.has-logo {
	margin-bottom: 10px;
}

.ybc-calendar .ybc-list__name img.ybc-logo {
	max-height: 36px;
	max-width:  180px;
}

@media (max-width: 640px) {
	.ybc-calendar .ybc-grid__label img.ybc-logo {
		max-width:  96px;
		max-height: 38px;
	}

	.ybc-calendar .ybc-vgrid__head.has-logo {
		height:  48px;
		padding: 4px 2px;
	}

	.ybc-calendar .ybc-vgrid__head img.ybc-logo {
		max-height: 32px;
	}
}

/* ---- Pikavaraus ---- */
.ybc-quick {
	color:       var(--ybc-text);
	font-family: var(--e-global-typography-text-font-family, inherit), sans-serif;
	text-align:  left;
}

.ybc-quick *,
.ybc-quick *::before,
.ybc-quick *::after {
	box-sizing: border-box;
}

.ybc-quick [hidden] {
	display: none !important;
}

.ybc-quick .ybc-quick__picker {
	padding:       28px 24px;
	background:    var(--ybc-bg);
	border:        1px solid var(--ybc-border);
	border-radius: var(--ybc-radius);
	text-align:    center;
}

.ybc-quick .ybc-quick__title {
	margin:         0 0 18px;
	padding:        0;
	font-family:    inherit;
	font-size:      20px;
	font-weight:    700;
	line-height:    1.3;
	letter-spacing: normal;
	text-transform: none;
	color:          var(--ybc-text);
}

.ybc-quick .ybc-quick__locs {
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap:                   10px;
	max-width:             860px;
	margin:                0 auto;
}

.ybc-quick .ybc-quick__loc,
.ybc-quick .ybc-quick__loc:hover {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             8px;
	min-height:      56px;
	margin:          0;
	padding:         12px 16px;
	background:      var(--ybc-surface);
	border:          1px solid var(--ybc-border);
	border-radius:   10px;
	box-shadow:      none;
	color:           var(--ybc-text);
	font-family:     inherit;
	font-size:       16px;
	font-weight:     700;
	line-height:     1.2;
	letter-spacing:  normal;
	text-transform:  none;
	cursor:          pointer;
	transition:      border-color .15s, box-shadow .15s, transform .15s;
}

.ybc-quick .ybc-quick__loc svg {
	flex:  none;
	color: var(--ybc-accent);
}

.ybc-quick .ybc-quick__loc:hover,
.ybc-quick .ybc-quick__loc:focus-visible {
	border-color: var(--ybc-accent);
	box-shadow:   0 0 0 1px var(--ybc-accent);
	outline:      none;
	transform:    translateY(-1px);
}

.ybc-quick .ybc-quick__loc.is-current {
	border-color: var(--ybc-accent);
	box-shadow:   0 0 0 2px var(--ybc-accent);
}

.ybc-quick .ybc-quick__bar {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	flex-wrap:       wrap;
	gap:             8px 16px;
	margin-bottom:   10px;
	padding:         10px 16px;
	background:      var(--ybc-subtle);
	border:          1px solid var(--ybc-border);
	border-radius:   var(--ybc-radius);
}

.ybc-quick .ybc-quick__place {
	display:     inline-flex;
	align-items: center;
	gap:         8px;
	font-size:   16px;
	color:       var(--ybc-text);
}

.ybc-quick .ybc-quick__place svg {
	color: var(--ybc-accent);
}

.ybc-quick .ybc-quick__change,
.ybc-quick .ybc-quick__change:hover {
	display:        inline-flex;
	align-items:    center;
	margin:         0;
	padding:        8px 14px;
	background:     var(--ybc-surface);
	border:         1px solid var(--ybc-border);
	border-radius:  8px;
	box-shadow:     none;
	color:          var(--ybc-accent);
	font-family:    inherit;
	font-size:      14px;
	font-weight:    700;
	letter-spacing: normal;
	text-transform: none;
	cursor:         pointer;
}

.ybc-quick .ybc-quick__change:hover {
	border-color: var(--ybc-accent);
}

@media (max-width: 640px) {
	.ybc-quick .ybc-quick__picker {
		padding: 20px 14px;
	}

	.ybc-quick .ybc-quick__title {
		font-size: 18px;
	}

	.ybc-quick .ybc-quick__locs {
		grid-template-columns: 1fr 1fr;
	}

	.ybc-quick .ybc-quick__bar {
		padding: 8px 12px;
	}
}

/* ---- Alapalkki: huomautus eri paikkakunnista ---- */
.ybc-cartbar .ybc-cartbar__notice {
	display:     flex;
	align-items: flex-start;
	gap:         8px;
	padding:     10px 16px;
	background:  #fff7e6;
	border-bottom: 1px solid #f3d38a;
	color:       #7a4b00;
	font-size:   13px;
	line-height: 1.4;
}

.ybc-cartbar.ybc-theme-dark .ybc-cartbar__notice {
	background:   #3a2e12;
	border-color: #6b5420;
	color:        #f5d48a;
}

.ybc-cartbar .ybc-cartbar__notice svg {
	flex:       none;
	margin-top: 1px;
}

/* ============================================================
   Pikavaraus: värillinen laatikko (sininen pohja, valkoiset ruudut)
   ============================================================ */
.ybc-quick.ybc-quick--boxed {
	--ybc-box-bg:     #216480;
	--ybc-box-incart: #6dd000;
	--ybc-box-text:   #ffffff;
	--ybc-box-soft:   rgba(255, 255, 255, .14);
	--ybc-box-line:   rgba(255, 255, 255, .22);
	padding:          24px;
	background:       var(--ybc-box-bg);
	border-radius:    14px;
	color:            var(--ybc-box-text);
}

/* Paikkakunnan valinta */
.ybc-quick--boxed .ybc-quick__picker {
	padding:    4px 0;
	background: transparent;
	border:     0;
}

.ybc-quick--boxed .ybc-quick__title {
	color: var(--ybc-box-text);
}

.ybc-quick--boxed .ybc-quick__loc,
.ybc-quick--boxed .ybc-quick__loc:hover {
	background:   #ffffff;
	border-color: #ffffff;
	color:        var(--ybc-box-bg);
}

.ybc-quick--boxed .ybc-quick__loc svg {
	color: var(--ybc-box-bg);
}

.ybc-quick--boxed .ybc-quick__loc:hover,
.ybc-quick--boxed .ybc-quick__loc:focus-visible,
.ybc-quick--boxed .ybc-quick__loc.is-current {
	border-color: var(--ybc-box-incart);
	box-shadow:   0 0 0 2px var(--ybc-box-incart);
}

/* Paikkakuntapalkki */
.ybc-quick--boxed .ybc-quick__bar {
	margin-bottom: 14px;
	padding:       0 0 14px;
	background:    transparent;
	border:        0;
	border-bottom: 1px solid var(--ybc-box-line);
	border-radius: 0;
}

.ybc-quick--boxed .ybc-quick__place,
.ybc-quick--boxed .ybc-quick__place svg {
	color: var(--ybc-box-text);
}

.ybc-quick--boxed .ybc-quick__place {
	font-size: 18px;
}

.ybc-quick--boxed .ybc-quick__change,
.ybc-quick--boxed .ybc-quick__change:hover {
	background:   #ffffff;
	border-color: #ffffff;
	color:        var(--ybc-box-bg);
}

/* Kalenteri laatikon sisällä: läpinäkyvä pohja, valkoiset ruudut */
.ybc-quick--boxed .ybc-calendar {
	/* Kiinteät nimisarakkeet ym. samalla pohjavärillä. !important, koska adminin väriasetukset
	   tulostetaan sivulle inline-tyylinä samalla tarkkuudella ja ohittaisivat tämän. */
	--ybc-bg: var(--ybc-box-bg) !important;
	padding:    0;
	background: transparent;
	border:     0;
}

.ybc-quick--boxed .ybc-calendar .ybc-date-label,
.ybc-quick--boxed .ybc-calendar .ybc-date-label:hover,
.ybc-quick--boxed .ybc-calendar .ybc-grid__hour,
.ybc-quick--boxed .ybc-calendar .ybc-grid__category,
.ybc-quick--boxed .ybc-calendar .ybc-grid__label a,
.ybc-quick--boxed .ybc-calendar .ybc-vgrid__hour,
.ybc-quick--boxed .ybc-calendar .ybc-vgrid__head a,
.ybc-quick--boxed .ybc-calendar .ybc-list__category,
.ybc-quick--boxed .ybc-calendar .ybc-list__name,
.ybc-quick--boxed .ybc-calendar .ybc-empty,
.ybc-quick--boxed .ybc-calendar .ybc-legend {
	color: var(--ybc-box-text);
}

.ybc-quick--boxed .ybc-calendar .ybc-grid__hour,
.ybc-quick--boxed .ybc-calendar .ybc-grid__category,
.ybc-quick--boxed .ybc-calendar .ybc-vgrid__hour,
.ybc-quick--boxed .ybc-calendar .ybc-list__category,
.ybc-quick--boxed .ybc-calendar .ybc-legend {
	opacity: .85;
}

.ybc-quick--boxed .ybc-calendar .ybc-date-label:hover,
.ybc-quick--boxed .ybc-calendar .ybc-date-label[aria-expanded="true"] {
	background: var(--ybc-box-soft);
}

.ybc-quick--boxed .ybc-calendar .ybc-btn,
.ybc-quick--boxed .ybc-calendar .ybc-btn:hover:not(:disabled) {
	background:   #ffffff;
	border-color: #ffffff;
	color:        var(--ybc-box-bg);
}

.ybc-quick--boxed .ybc-calendar .ybc-btn:disabled {
	opacity: .45;
}

.ybc-quick--boxed .ybc-calendar .ybc-switch {
	background:   var(--ybc-box-soft);
	border-color: transparent;
}

.ybc-quick--boxed .ybc-calendar .ybc-switch__btn,
.ybc-quick--boxed .ybc-calendar .ybc-switch__btn:hover {
	color: rgba(255, 255, 255, .85);
}

.ybc-quick--boxed .ybc-calendar .ybc-switch__btn.is-active,
.ybc-quick--boxed .ybc-calendar .ybc-switch__btn.is-active:hover {
	background: #ffffff;
	color:      var(--ybc-box-bg);
	box-shadow: none;
}

/* Aikaruudut */
.ybc-quick--boxed .ybc-calendar .ybc-cell {
	border-color: var(--ybc-box-bg);
}

.ybc-quick--boxed .ybc-calendar .ybc-cell--available {
	background: #ffffff;
}

.ybc-quick--boxed .ybc-calendar .ybc-cell--available:hover,
.ybc-quick--boxed .ybc-calendar .ybc-cell--available:focus-visible,
.ybc-quick--boxed .ybc-calendar .ybc-cell.is-preview {
	background: color-mix(in srgb, var(--ybc-box-incart) 22%, #ffffff);
}

.ybc-quick--boxed .ybc-calendar .ybc-cell.is-selected {
	box-shadow: inset 0 0 0 3px var(--ybc-box-incart);
}

.ybc-quick--boxed .ybc-calendar .ybc-cell--unavailable {
	background-color: var(--ybc-box-soft);
	background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .10) 0 6px, transparent 6px 12px);
}

.ybc-quick--boxed .ybc-calendar .ybc-cell--unavailable .ybc-cell__time,
.ybc-quick--boxed .ybc-calendar .ybc-cell--unavailable .ybc-cell__sub {
	color:   rgba(255, 255, 255, .8);
	opacity: 1;
}

.ybc-quick--boxed .ybc-calendar .ybc-cell--unavailable.is-past {
	background-color: rgba(255, 255, 255, .06);
	opacity:          1;
}

.ybc-quick--boxed .ybc-calendar .ybc-cell--unavailable.is-past .ybc-cell__time {
	color: rgba(255, 255, 255, .45);
}

/* Korissa: erottuva korostusväri (oletus AINAGolfin vihreä) */
.ybc-quick--boxed .ybc-calendar .ybc-cell--incart,
.ybc-quick--boxed .ybc-calendar .ybc-time--incart,
.ybc-quick--boxed .ybc-calendar .ybc-time--incart:hover {
	background:   var(--ybc-box-incart);
	border-color: var(--ybc-box-bg);
}

.ybc-quick--boxed .ybc-calendar .ybc-cell--incart .ybc-cell__time,
.ybc-quick--boxed .ybc-calendar .ybc-cell--incart .ybc-cell__sub,
.ybc-quick--boxed .ybc-calendar .ybc-time--incart,
.ybc-quick--boxed .ybc-calendar .ybc-time--incart small {
	color: #10331f;
}

.ybc-quick--boxed .ybc-calendar .ybc-cell__edit {
	background: rgba(0, 0, 0, .12);
}

.ybc-quick--boxed .ybc-calendar .ybc-swatch--available   { background: #ffffff; border-color: #ffffff; }
.ybc-quick--boxed .ybc-calendar .ybc-swatch--unavailable { background: var(--ybc-box-soft) repeating-linear-gradient(135deg, rgba(255, 255, 255, .35) 0 2px, transparent 2px 4px); border-color: var(--ybc-box-line); }
.ybc-quick--boxed .ybc-calendar .ybc-swatch--incart      { background: var(--ybc-box-incart); border-color: var(--ybc-box-incart); }

/* Pysty-aikajana */
.ybc-quick--boxed .ybc-calendar .ybc-vgrid .ybc-cell--incart:not(.is-end) {
	border-bottom-color: color-mix(in srgb, var(--ybc-box-incart) 75%, #000);
}

/* Lista */
.ybc-quick--boxed .ybc-calendar .ybc-chip,
.ybc-quick--boxed .ybc-calendar .ybc-chip:hover {
	background:   var(--ybc-box-soft);
	border-color: transparent;
	color:        var(--ybc-box-text);
}

.ybc-quick--boxed .ybc-calendar .ybc-chip.is-active,
.ybc-quick--boxed .ybc-calendar .ybc-chip.is-active:hover {
	background:   #ffffff;
	border-color: #ffffff;
	color:        var(--ybc-box-bg);
	box-shadow:   none;
}

.ybc-quick--boxed .ybc-calendar .ybc-chip.has-logo,
.ybc-quick--boxed .ybc-calendar .ybc-chip.has-logo:hover {
	background: #ffffff;
}

.ybc-quick--boxed .ybc-calendar .ybc-chip.has-logo.is-active {
	box-shadow: 0 0 0 3px var(--ybc-box-incart);
}

.ybc-quick--boxed .ybc-calendar .ybc-time {
	border-color: #ffffff;
}

.ybc-quick--boxed .ybc-calendar .ybc-time--unavailable {
	background:   transparent;
	border-color: var(--ybc-box-line);
	color:        rgba(255, 255, 255, .7);
	opacity:      1;
}

.ybc-quick--boxed .ybc-calendar .ybc-time--unavailable small {
	color: rgba(255, 255, 255, .7);
}

.ybc-quick--boxed .ybc-calendar .ybc-time--available.is-selected,
.ybc-quick--boxed .ybc-calendar .ybc-time--available.is-preview {
	border-color: var(--ybc-box-incart);
	box-shadow:   inset 0 0 0 2px var(--ybc-box-incart);
}

/* Logot sinisellä pohjalla valkoisen taustan päällä */
.ybc-quick--boxed .ybc-calendar .ybc-grid__label.has-logo a,
.ybc-quick--boxed .ybc-calendar .ybc-vgrid__head.has-logo a,
.ybc-quick--boxed .ybc-calendar .ybc-list__name.has-logo {
	display:       inline-flex;
	align-items:   center;
	justify-content: center;
	width:         auto;
	height:        auto;
	padding:       6px 10px;
	background:    #ffffff;
	border-radius: 8px;
}

.ybc-quick--boxed .ybc-calendar .ybc-vgrid__head.has-logo a {
	width:   100%;
	padding: 4px;
}

/* Aikajanan logot yhtä leveinä valkoisina laattoina, logo keskellä */
.ybc-quick--boxed .ybc-calendar .ybc-grid__label.has-logo {
	padding: 5px 10px 5px 0;
}

.ybc-quick--boxed .ybc-calendar .ybc-grid__label.has-logo a {
	width:   100%;
	height:  100%;
	padding: 6px 12px;
}

@media (max-width: 640px) {
	.ybc-quick.ybc-quick--boxed {
		padding:       16px 12px;
		border-radius: 10px;
	}
}

/* ---- Käynnissä oleva tunti alennuksella ---- */
.ybc-calendar .ybc-cell--live,
.ybc-calendar .ybc-time--live {
	--ybc-live: #c2410c;
	box-shadow: inset 0 3px 0 var(--ybc-live);
}

.ybc-calendar .ybc-cell--live .ybc-cell__sub,
.ybc-calendar .ybc-time--live small {
	color:       var(--ybc-live);
	font-weight: 700;
}

.ybc-calendar .ybc-cell--live::after,
.ybc-calendar .ybc-time--live::after {
	content:        'NYT';
	position:       absolute;
	top:            5px;
	right:          5px;
	padding:        1px 4px;
	border-radius:  3px;
	background:     var(--ybc-live);
	color:          #fff;
	font-size:      8px;
	font-weight:    800;
	letter-spacing: .04em;
	line-height:    1.3;
}

.ybc-calendar .ybc-time--live {
	position: relative;
}

.ybc-calendar .ybc-pop__live {
	margin-bottom: 12px;
	padding:       8px 10px;
	border-radius: 8px;
	background:    #fff4ec;
	border:        1px solid #f7c8a6;
	color:         #7c2d12;
	font-size:     13px;
	line-height:   1.4;
}

.ybc-calendar.ybc-theme-dark .ybc-pop__live {
	background:   #3b2414;
	border-color: #7c3a14;
	color:        #fbd5b5;
}

.ybc-cartbar .ybc-cartbar__badge {
	display:       inline-block;
	padding:       1px 6px;
	border-radius: 4px;
	background:    #c2410c;
	color:         #fff;
	font-size:     11px;
	font-weight:   700;
	vertical-align: 1px;
}

/* ---- Menneet tunnit (tänään) ---- */
.ybc-calendar .ybc-cell--unavailable.is-past .ybc-cell__sub,
.ybc-calendar .ybc-time--unavailable.is-past small {
	color:       var(--ybc-text-muted);
	font-weight: 500;
}

.ybc-calendar .ybc-cell--unavailable.is-past-booked,
.ybc-calendar .ybc-time--unavailable.is-past-booked {
	background-color: var(--ybc-unavail-bg);
	background-image: repeating-linear-gradient(135deg, var(--ybc-stripe) 0 6px, transparent 6px 12px);
}

.ybc-calendar .ybc-time--unavailable.is-past {
	opacity: .45;
}

.ybc-quick--boxed .ybc-calendar .ybc-cell--unavailable.is-past-booked {
	background-color: var(--ybc-box-soft);
	background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .10) 0 6px, transparent 6px 12px);
}

.ybc-quick--boxed .ybc-calendar .ybc-cell--unavailable.is-past .ybc-cell__sub {
	color: rgba(255, 255, 255, .55);
}