Reservair/assets/css/RsvMainStyle.css

:root {
    --color-gray-50: oklch(0.985 0.002 247.839);  --color-gray-100: oklch(0.967 0.003 264.542);  --color-gray-200: oklch(0.928 0.006 264.531);  --color-gray-300: oklch(0.872 0.01 258.338);  --color-gray-400: oklch(0.707 0.022 261.325);  --color-gray-500: oklch(0.551 0.027 264.364);  --color-gray-600: oklch(0.446 0.03 256.802);  --color-gray-700: oklch(0.373 0.034 259.733);  --color-gray-800: oklch(0.278 0.033 256.848);  --color-gray-900: oklch(0.21 0.034 264.665);  --color-gray-950: oklch(0.13 0.028 261.692);

    --container-bg: var(--color-gray-50);
    --border: 1px solid var(--color-gray-300);
    --hover-bg: var(--color-blue-300);
    --dimm-bg: var(--color-gray-200);
    --selected-bg: var(--color-blue-400);

    --container-border-radius: 1rem;

    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 1rem;
    --s-4: 1.5rem;
    --s-5: 3rem;

    --color-blue-50: oklch(97% .014 254.604);
    --color-blue-100: oklch(93.2% .032 255.585);
    --color-blue-200: oklch(88.2% .059 254.128);
    --color-blue-300: oklch(80.9% .105 251.813);
    --color-blue-400: oklch(70.7% .165 254.624);
    --color-blue-500: oklch(62.3% .214 259.815);
    --color-blue-600: oklch(54.6% .245 262.881);
    --color-blue-700: oklch(48.8% .243 264.376);
    --color-blue-800: oklch(42.4% .199 265.638);
    --color-blue-900: oklch(37.9% .146 265.522);
    --color-blue-950: oklch(28.2% .091 267.935);


    --color-green-50: oklch(98.2% .018 155.826);
    --color-green-100: oklch(96.2% .044 156.743);
    --color-green-200: oklch(92.5% .084 155.995);
    --color-green-300: oklch(87.1% .15 154.449);
    --color-green-400: oklch(79.2% .209 151.711);
    --color-green-500: oklch(72.3% .219 149.579);
    --color-green-600: oklch(62.7% .194 149.214);
    --color-green-700: oklch(52.7% .154 150.069);
    --color-green-800: oklch(44.8% .119 151.328);
    --color-green-900: oklch(39.3% .095 152.535);
    --color-green-950: oklch(26.6% .065 152.934);

    --color-red-50: oklch(97.1% .013 17.38);
    --color-red-100: oklch(93.6% .032 17.717);
    --color-red-200: oklch(88.5% .062 18.334);
    --color-red-300: oklch(80.8% .114 19.571);
    --color-red-400: oklch(70.4% .191 22.216);
    --color-red-500: oklch(63.7% .237 25.331);
    --color-red-600: oklch(57.7% .245 27.325);
    --color-red-700: oklch(50.5% .213 27.518);
    --color-red-800: oklch(44.4% .177 26.899);
    --color-red-900: oklch(39.6% .141 25.723);
    --color-red-950: oklch(25.8% .092 26.042);
}


rsv-reservation-selector {
    border: var(--border);
    border-radius: var(--container-border-radius);
}

/* ----- Widget shell ----- */
/*.widget {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 2px 24px rgba(0, 0, 0, .07);
  overflow: hidden;
  color: #0f0f0f;
}

.widget-header {
  padding: 22px 28px 18px;
  border-bottom: 1px solid #f0f0f0;
}

.widget-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.widget-subtitle {
  font-size: 13px;
  color: #888;
  margin-top: 2px;
}

.widget-body {
  display: flex;
}

.widget-calendar {
  flex: 1;
  padding: 20px 24px;
  border-right: 1px solid #f0f0f0;
}

.widget-slots {
  width: 240px;
  padding: 20px 16px;
}

.widget-form {
  padding: 20px 24px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}*/



/* Nav arrows (prev / next month) */
.rsv-cal-btn-nav {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #e0e0e0;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s;
  color: #555;
}

.rsv-cal-btn-nav {
    outline: none;
}

.rsv-cal-btn-nav:hover {
  background: #f0f0f0;
}









/* WIDGET START */

.reservation-list {
    max-height: 300px;
    overflow-y: scroll;
    background-color: #f6f7f7;
    margin: 0 -12px 6px -12px;
}

.reservation-list li {
    margin: 0;
    padding: 8px 12px;
    color: #2c3338;
    box-shadow: inset 0 1px 0 rgba(0,0,0,.06);
}

.reservation-list li:hover .row-actions {
    position: static;
}

.reservation-list .row-actions {
    margin: 3px 0 0;
    padding: 0;
    font-size: 13px;
    line-height: 1.5;
}

/* WIDGET END */

.rsv-success-state {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rsv-reset-button {
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    font-family: var(--wp--preset--font-family--manrope);
}