/* ── Cada Grande Event Calendar Widget ── */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@500;600&family=Montserrat:wght@600&family=Space+Grotesk:ital,wght@0,400;0,700;1,700&display=swap');

/* ── Reset & scope ── */
.cgcal-wrap *, .cgcal-wrap *::before, .cgcal-wrap *::after { box-sizing: border-box; }

.cgcal-wrap {
  display: flex;
  flex-direction: column;
  gap: 28px;
  font-family: "Geist", Arial, Helvetica, sans-serif;
  color: #111112;
}

/* ── Hero ── */
.cgcal-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.cgcal-title-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cgcal-month-label {
  margin: 0;
  color: #111112;
  font-family: "Montserrat", "Geist", Arial, Helvetica, sans-serif;
  font-size: clamp(72px, 12vw, 180px);
  font-weight: 600;
  line-height: 0.85;
  letter-spacing: -0.08em;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
}

/* ── Nav buttons ── */
.cgcal-nav { display: flex; align-items: center; gap: 12px; }

.cgcal-nav-button {
  appearance: none;
  border: 1px solid #d4d7dc;
  background: #fff;
  color: #111112;
  font-family: "Geist", Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  width: 52px; height: 52px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 180ms ease, transform 180ms ease;
}
.cgcal-nav-button:hover { background: #f4f5f6; transform: translateY(-1px); }
.cgcal-nav-button:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

/* ── Calendar container ── */
.cgcal-calendar {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid #d8dadd;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}

/* ── Weekday header row ── */
.cgcal-weekdays,
.cgcal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cgcal-weekday {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #d8dadd;
  border-bottom: 1px solid #d8dadd;
  color: #111112;
  font-family: "Geist", Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #fff;
}
.cgcal-weekday:last-child { border-right: none; }

/* ── Day cells ── */
.cgcal-day {
  position: relative;
  min-height: 100px;
  padding: 11px 11px 14px;
  border-right: 1px solid #d8dadd;
  border-bottom: 1px solid #d8dadd;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  isolation: isolate;
  transition: background-color 240ms ease, box-shadow 280ms ease;
}
/* Remove right border on last column, bottom border on last row */
.cgcal-day:nth-child(7n) { border-right: none; }
.cgcal-grid .cgcal-day:nth-last-child(-n+7) { border-bottom: none; }

.cgcal-day.is-muted    { background: #fafafa; }
.cgcal-day.has-reserved {
  background: #fcfcfc;
  box-shadow: inset 0 0 0 1px rgba(176,166,154,0.42), inset 0 0 34px rgba(216,207,195,0.3);
}

/* Today highlight via inline style (color controllable from Elementor) */
.cgcal-day.is-today { /* box-shadow set inline per widget instance */ }

/* ── Date number ── */
.cgcal-date {
  position: relative;
  z-index: 2;
  align-self: flex-end;
  color: #111112;
  font-family: "Geist", Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  transition: opacity 160ms ease-out, transform 240ms cubic-bezier(0.22,1,0.36,1);
  transform-origin: top right;
  user-select: none;
  pointer-events: none;
}
.cgcal-day.is-muted .cgcal-date { color: #b8bcc3; }

/* Fade date out when trigger is hovered/open */
.cgcal-day.is-open:hover .cgcal-date,
.cgcal-day.is-open.is-request-open .cgcal-date {
  opacity: 0;
  transform: scale(0.82);
}

/* ── Trinkets (pill / trigger) container ── */
.cgcal-trinkets {
  position: absolute;
  top: 8px; right: 8px; bottom: 8px; left: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  isolation: isolate;
  contain: paint;
  clip-path: inset(0 round 12px);
  -webkit-clip-path: inset(0 round 12px);
  perspective: 1200px;
  pointer-events: none;
  z-index: 1;
}
.cgcal-day.is-open .cgcal-trinkets { pointer-events: auto; z-index: 3; }
.cgcal-day.is-open.is-request-open .cgcal-trinkets {
  overflow: visible;
  contain: none;
  clip-path: none;
  -webkit-clip-path: none;
}

/* ── Reserved Pill ── */
.cgcal-pill {
  --pill-x: 0px; --pill-y: 0px; --pill-rotate: 0deg;
  --pill-lean: 0deg; --pill-rotate-x: 0deg; --pill-scale: 1;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  min-height: 42px;
  padding: 10px 22px;
  border-radius: 999px;
  font-family: "Space Grotesk", "Geist", Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: lowercase;
  white-space: nowrap;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
  transform-origin: center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform: translate3d(var(--pill-x),var(--pill-y),0) rotate(var(--pill-rotate)) rotate(var(--pill-lean)) rotateX(var(--pill-rotate-x)) scale(var(--pill-scale));
  transition: transform 340ms cubic-bezier(0.22,1,0.36,1);
}

.cgcal-pill.is-reserved {
  --pill-scale-base: 0.65;
  width: auto;
  max-width: calc(100% - 4px);
  min-height: calc(56px * 0.65);
  min-width: 0;
  justify-content: flex-start;
  padding: 0 calc(32px * 0.65) 0 calc(52px * 0.65);
  color: #1d1d1f;
  font-family: "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: calc(17px * 0.65);
  font-weight: 600;
  font-style: normal;
  line-height: 1.24;
  letter-spacing: -0.022em;
  text-transform: none;
  border: 0;
  border-radius: calc(28px * 0.65);
  background: rgba(232,232,237,0.72);
  box-shadow: inset 0 0 0.5px 0 rgba(0,0,0,0.11);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  cursor: default;
  pointer-events: none;
  touch-action: auto;
}

.cgcal-pill.is-reserved::before {
  content: "";
  position: absolute;
  top: 50%; left: calc(14px * 0.65);
  width: calc(24px * 0.65); height: calc(24px * 0.65);
  border-radius: 50%;
  border: calc(1.6px * 0.65) solid #1d1d1f;
  background: transparent;
  transform: translateY(-50%);
}
.cgcal-pill.is-reserved::after {
  content: "";
  position: absolute;
  top: 50%; left: calc(21px * 0.65);
  width: calc(10px * 0.65); height: calc(10px * 0.65);
  background-image: linear-gradient(#1d1d1f,#1d1d1f), linear-gradient(#1d1d1f,#1d1d1f);
  background-repeat: no-repeat;
  background-position: center;
  background-size: calc(10px * 0.65) calc(2px * 0.65), calc(2px * 0.65) calc(10px * 0.65);
  transform: translateY(-50%) rotate(45deg);
}

/* ── + Open Trigger ── */
.cgcal-open-trigger {
  --bubble-scale: 0.65;
  --bubble-size: calc(56px * var(--bubble-scale));
  --enter-width: calc(128px * var(--bubble-scale));
  --icon-size: calc(24px * var(--bubble-scale));
  --icon-stroke: calc(1.6px * var(--bubble-scale));
  appearance: none; border: 0;
  position: absolute; top: 0; right: 0; left: auto;
  width: var(--bubble-size); min-width: var(--bubble-size); height: var(--bubble-size);
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(232,232,237,0.72);
  box-shadow: inset 0 0 0.5px 0 rgba(0,0,0,0.11);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  opacity: 0; visibility: hidden; pointer-events: auto; cursor: pointer;
  overflow: hidden;
  transform: translate3d(0,0,0) scale(0);
  transform-origin: top right;
  transition:
    visibility 0s linear 360ms, opacity 120ms linear 0ms,
    transform 400ms cubic-bezier(0.3,2,0.5,1) 0ms,
    top 260ms cubic-bezier(0.22,1,0.36,1) 0ms,
    right 260ms cubic-bezier(0.22,1,0.36,1) 0ms,
    width 260ms cubic-bezier(0.22,1,0.36,1) 0ms,
    min-width 260ms cubic-bezier(0.22,1,0.36,1) 0ms,
    padding 260ms cubic-bezier(0.22,1,0.36,1) 0ms,
    border-radius 260ms cubic-bezier(0.22,1,0.36,1) 0ms,
    background-color 220ms ease 0ms, box-shadow 220ms ease 0ms;
  will-change: transform, opacity;
  z-index: 2;
}

/* Show + on hover (desktop) */
@media (hover: hover) and (pointer: fine) {
  .cgcal-day.is-open:hover .cgcal-open-trigger,
  .cgcal-day.is-open.is-request-open .cgcal-open-trigger {
    opacity: 1; visibility: visible;
    transform: translate3d(0,0,0) scale(1);
    transition:
      visibility 0s linear 0ms, opacity 120ms linear 0ms,
      transform 400ms cubic-bezier(0.3,2,0.5,1) 0ms,
      top 260ms cubic-bezier(0.22,1,0.36,1) 0ms,
      right 260ms cubic-bezier(0.22,1,0.36,1) 0ms,
      width 260ms cubic-bezier(0.22,1,0.36,1) 0ms,
      min-width 260ms cubic-bezier(0.22,1,0.36,1) 0ms,
      padding 260ms cubic-bezier(0.22,1,0.36,1) 0ms,
      border-radius 260ms cubic-bezier(0.22,1,0.36,1) 0ms,
      background-color 220ms ease 0ms, box-shadow 220ms ease 0ms;
  }
  .cgcal-day.is-open:hover .cgcal-open-trigger-icon,
  .cgcal-day.is-open.is-request-open .cgcal-open-trigger-icon {
    opacity: 1; transform: scale(1);
  }
  /* Date fades on hover */
  .cgcal-day.is-open:hover .cgcal-date { opacity: 0; transform: scale(0.82); }
}

/* Mobile: show trigger on touch (JS adds .is-touch-active) */
.cgcal-day.is-open.is-touch-active .cgcal-open-trigger {
  opacity: 1; visibility: visible;
  transform: translate3d(0,0,0) scale(1);
  transition: visibility 0s linear 0ms, opacity 120ms linear 0ms, transform 400ms cubic-bezier(0.3,2,0.5,1) 0ms;
}
.cgcal-day.is-open.is-touch-active .cgcal-open-trigger-icon { opacity: 1; transform: scale(1); }
.cgcal-day.is-open.is-touch-active .cgcal-date { opacity: 0; transform: scale(0.82); }

/* ── Trigger icon (+ sign) ── */
.cgcal-open-trigger-icon {
  position: relative;
  width: var(--icon-size); height: var(--icon-size);
  border-radius: 50%;
  border: var(--icon-stroke) solid #1d1d1f;
  opacity: 0; transform: scale(0.72);
  transition: opacity 140ms ease-out 240ms, transform 180ms cubic-bezier(0.22,1,0.36,1) 240ms;
}
.cgcal-open-trigger-icon::before,
.cgcal-open-trigger-icon::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: calc(10px * var(--bubble-scale)); height: calc(2px * var(--bubble-scale));
  border-radius: 999px; background: #1d1d1f;
  transform: translate(-50%, -50%);
}
.cgcal-open-trigger-icon::after { transform: translate(-50%,-50%) rotate(90deg); }

/* ── Trigger label ("Enter") ── */
.cgcal-open-trigger-label {
  --label-inset: calc(2px * var(--bubble-scale));
  position: absolute;
  top: var(--label-inset); right: var(--label-inset); left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(100% - var(--label-inset) * 2);
  height: calc(100% - var(--label-inset) * 2);
  padding: 0 calc(8px * var(--bubble-scale));
  box-sizing: border-box;
  border: var(--icon-stroke) solid #1d1d1f;
  border-radius: calc(14px * var(--bubble-scale));
  color: #1d1d1f;
  font-family: "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: -0.03em;
  white-space: nowrap;
  opacity: 0; transform: scale(0.86); transform-origin: top right;
  pointer-events: none;
  transition: opacity 150ms ease-out 0ms, transform 200ms cubic-bezier(0.22,1,0.36,1) 0ms;
}

/* When request is ready (phone entered) → show Enter label, hide + icon */
.cgcal-day.is-open.is-request-open.is-request-ready .cgcal-open-trigger {
  top: 8px; right: 8px;
  width: var(--enter-width); min-width: var(--enter-width);
  padding: 0 10px;
  border-radius: calc(18px * var(--bubble-scale));
  background: rgba(232,232,237,0.72);
  box-shadow: inset 0 0 0.5px 0 rgba(0,0,0,0.11);
}
.cgcal-day.is-open.is-request-open .cgcal-open-trigger {
  background: transparent; box-shadow: none;
}
.cgcal-day.is-open.is-request-open.is-request-ready .cgcal-open-trigger-icon {
  opacity: 0; transform: scale(0.72); transition-delay: 0ms;
}
.cgcal-day.is-open.is-request-open.is-request-ready .cgcal-open-trigger-label {
  opacity: 1; transform: scale(1); transition-delay: 80ms;
}

/* ── Request Popup ── */
.cgcal-request-popup {
  --bubble-size: calc(56px * 0.65);
  --popup-radius: calc(var(--bubble-size) / 2);
  --start-x: 0.24; --start-y: 0.24;
  position: absolute; top: 0; right: 0;
  width: min(296px, calc(100vw - 32px));
  min-height: calc(var(--bubble-size) + 108px);
  display: flex; flex-direction: column; justify-content: flex-start;
  gap: 10px; padding: 18px;
  border-radius: var(--popup-radius);
  background: rgba(232,232,237,0.84);
  box-shadow: inset 0 0 0.5px 0 rgba(0,0,0,0.11), 0 8px 24px rgba(17,17,18,0.08);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  overflow: hidden; isolation: isolate;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate3d(0,0,0) scaleX(var(--start-x)) scaleY(var(--start-y));
  transform-origin: calc(100% - var(--bubble-size)/2) calc(var(--bubble-size)/2);
  transition:
    visibility 0s linear 360ms,
    opacity 140ms ease-out 0ms,
    transform 420ms cubic-bezier(0.22,1,0.36,1) 0ms,
    border-radius 420ms cubic-bezier(0.22,1,0.36,1) 0ms;
  will-change: transform, opacity; z-index: 1;
}
.cgcal-request-popup::before {
  content: ""; position: absolute; top: 0; right: 0;
  width: var(--bubble-size); height: var(--bubble-size); border-radius: 50%;
  background: rgba(232,232,237,0.92);
  box-shadow: inset 0 0 0.5px 0 rgba(0,0,0,0.11); z-index: 0;
}
.cgcal-request-popup > * { position: relative; z-index: 1; opacity: 0; transform: translateY(8px);
  transition: opacity 180ms ease-out 110ms, transform 240ms cubic-bezier(0.22,1,0.36,1) 110ms; }

/* Open state */
.cgcal-day.is-open.is-request-open { overflow: visible; z-index: 8; }
.cgcal-day.is-open.is-request-open .cgcal-request-popup {
  opacity: 1; visibility: visible; pointer-events: auto; border-radius: 18px;
  transform: translate3d(0,0,0) scaleX(1) scaleY(1);
  transition:
    visibility 0s linear 0ms, opacity 160ms ease-out 0ms,
    transform 420ms cubic-bezier(0.22,1,0.36,1) 0ms,
    border-radius 420ms cubic-bezier(0.22,1,0.36,1) 0ms;
}
.cgcal-day.is-open.is-request-open .cgcal-request-popup > * { opacity: 1; transform: translateY(0); }

/* ── Popup content ── */
.cgcal-request-title {
  margin: 0;
  padding-left: 6px; padding-right: calc(var(--bubble-size) + 14px);
  color: #1d1d1f;
  font-family: "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px; font-weight: 600; line-height: 1.15; letter-spacing: -0.022em;
}

.cgcal-request-input {
  width: 100%; box-sizing: border-box;
  min-height: 48px; margin-top: 6px; padding: 10px 14px;
  border: 0; border-radius: 12px;
  background: rgba(255,255,255,0.94);
  box-shadow: inset 0 0 0 1px rgba(17,17,18,0.08);
  color: #1d1d1f;
  font-family: "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em;
  outline: none;
  transition: box-shadow 150ms ease;
}
.cgcal-request-input::placeholder { color: rgba(29,29,31,0.56); }
.cgcal-request-input:focus {
  box-shadow: inset 0 0 0 1px rgba(17,17,18,0.08), 0 0 0 2px rgba(0,113,227,0.18);
}

.cgcal-request-note {
  margin: 0; padding-left: 6px; padding-right: 10px;
  color: rgba(29,29,31,0.72);
  font-family: "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em;
}

/* Success state */
.cgcal-day.is-success .cgcal-request-popup {
  border-radius: 18px !important;
}
.cgcal-success-msg {
  margin: 0; padding: 4px 6px;
  color: #1d1d1f;
  font-family: "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em;
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .cgcal-day { min-height: 90px; }
  .cgcal-month-label { font-size: clamp(52px, 10vw, 120px); }
}
@media (max-width: 479px) {
  .cgcal-day { min-height: 64px; padding: 7px 7px 10px; }
  .cgcal-date { font-size: 14px; }
  .cgcal-weekday { font-size: 11px; min-height: 32px; }
  .cgcal-month-label { font-size: clamp(38px, 13vw, 80px); }
}