/* ================================================================
   KA MY PLAN: styles
   Part 1: the hearts on calendar cards and the event page
   Part 2: the bar at the bottom of the screen
   Part 3: the My Plan panel
   Classes are repeated in places (".ka-save.ka-save") on purpose, so
   these beat the theme's and Events Manager's button styles.
   ================================================================ */


/* ================================================================
   PART 1: HEARTS
   ================================================================ */

/* The drawing itself: an outline, filled orange once saved */
.ka-heart {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}

.is-saved .ka-heart {
  fill: #FF6900;
  stroke: #FF6900;
}

/* A little bounce when something is saved */
.is-popping .ka-heart {
  transform: scale(1.25);
}

/* ---------- On calendar cards: top-right corner ---------- */

.ka-v2 .ka-card[data-event-id] {
  position: relative;
}

/* Room on the right so long titles wrap before the heart */
.ka-v2 .ka-card[data-event-id] .ka-card-text {
  padding-right: 34px;
}

/* 44px square, so it's easy to tap, even though the heart is smaller */
.ka-v2 button.ka-save.ka-save--card.ka-save--card {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px;
  box-shadow: none !important;
  color: #003e51 !important;
  cursor: pointer;
}

.ka-v2 button.ka-save.ka-save--card.ka-save--card:hover .ka-heart {
  stroke: #FF6900;
}

/* Featured cards with a photo: the heart sits on the photo's corner,
   on a white circle so it shows on any picture */
.ka-v2 .ka-card--featured:has(.ka-card-photo) button.ka-save.ka-save--card.ka-save--card {
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 62, 81, 0.2) !important;
}

.ka-v2 .ka-card--featured:has(.ka-card-photo) .ka-card-text {
  padding-right: 4px;
}

/* On desktop the featured photo is on the left, so the heart moves to
   the card's top-right instead */
@media (min-width: 700px) {
  .ka-v2 .ka-card--featured:has(.ka-card-photo) button.ka-save.ka-save--card.ka-save--card {
    top: 8px;
    right: 8px;
    background: transparent !important;
    box-shadow: none !important;
  }

  .ka-v2 .ka-card--featured:has(.ka-card-photo) .ka-card-text {
    padding-right: 34px;
  }
}

/* ---------- On the event page: a "Save" pill next to Add to Calendar ---------- */

.ka-event button.ka-save.ka-save--page.ka-save--page {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin: 0;
  padding: 8px 16px;
  background: #fff !important;
  border: 1.5px solid #CFE3EA !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: #003e51 !important;
  font-family: inherit;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
}

.ka-event button.ka-save.ka-save--page.ka-save--page .ka-heart {
  width: 18px;
  height: 18px;
  stroke: #FF6900;
}

.ka-event button.ka-save.ka-save--page.ka-save--page.is-saved {
  background: #FFF6EF !important;
  border-color: #FF6900 !important;
}


/* ================================================================
   PART 2: THE BAR AT THE BOTTOM OF THE SCREEN
   Its distance from the bottom is set by the script, so it sits just
   above the Raptive sticky ad when that ad is showing.
   ================================================================ */

.ka-plan-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9990; /* above the page, below pop-ups like the panel */
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  pointer-events: none; /* only the button itself catches taps */
}

.ka-plan-bar[hidden] {
  display: none;
}

.ka-plan-bar button.ka-plan-bar-button.ka-plan-bar-button {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  max-width: 520px;
  min-height: 52px;
  margin: 0 auto;
  padding: 10px 18px;
  background: #003e51 !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 20px rgba(0, 62, 81, 0.3) !important;
  color: #fff !important;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 16px !important;
  font-weight: 700;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: left;
  cursor: pointer;
}

.ka-plan-bar-button span:nth-child(2) {
  flex: 1;
}

.ka-plan-bar-button .ka-heart {
  fill: #FF6900;
  stroke: #FF6900;
}

/* Desktop: a smaller pill in the bottom-right corner instead of a full bar */
@media (min-width: 900px) {
  .ka-plan-bar {
    left: auto;
    padding: 16px 20px;
  }

  .ka-plan-bar button.ka-plan-bar-button.ka-plan-bar-button {
    width: auto;
    min-width: 260px;
  }
}


/* ================================================================
   PART 3: THE MY PLAN PANEL
   Phones: slides up and fills most of the screen.
   Desktop: a panel on the right side.
   ================================================================ */

/* Stop the page behind the panel from scrolling while it's open */
html.ka-plan-open,
html.ka-plan-open body {
  overflow: hidden;
}

.ka-plan-panel {
  position: fixed;
  inset: 0;
  z-index: 100000; /* above everything, including the theme's header */
  font-family: 'Nunito', system-ui, sans-serif;
}

.ka-plan-panel[hidden] {
  display: none;
}

.ka-plan-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 30, 40, 0.5);
}

.ka-plan-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 92vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 0 18px calc(24px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-radius: 20px 20px 0 0;
  color: #003e51;
}

@media (min-width: 700px) {
  .ka-plan-sheet {
    top: 0;
    left: auto;
    width: 440px;
    max-height: none;
    border-radius: 0;
    padding: 0 24px 32px;
  }
}

/* The header stays visible while the list scrolls */
.ka-plan-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -18px;
  padding: 18px 18px 12px;
  background: #fff;
  border-bottom: 1px solid #E0E9EC;
}

@media (min-width: 700px) {
  .ka-plan-head {
    margin: 0 -24px;
    padding: 22px 24px 14px;
  }
}

.ka-plan-panel h2.ka-plan-title {
  margin: 0 !important;
  color: #003e51 !important;
  font-family: inherit !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  outline: none;
}

.ka-plan-panel button.ka-plan-close.ka-plan-close {
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  background: #F4F8FA !important;
  border: 0 !important;
  border-radius: 999px;
  color: #003e51 !important;
  font-size: 26px !important;
  line-height: 1;
  cursor: pointer;
}

/* ---------- The saved events ---------- */

.ka-plan-empty {
  margin: 18px 0;
  color: #3D6B7A;
  font-size: 16px;
  line-height: 1.5;
}

/* Each day: the light blue band from the calendar */
.ka-plan-panel h3.ka-plan-day {
  margin: 18px 0 6px !important;
  padding: 9px 12px;
  background: #E1F2F9;
  border-radius: 10px;
  color: #003e51 !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.ka-plan-items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ka-plan-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 10px 0 10px 12px;
  border-bottom: 1px solid #E0E9EC;
}

.ka-plan-item-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ka-plan-item-time {
  color: #1E7F72;
  font-size: 13px;
  font-weight: 800;
}

.ka-plan-panel a.ka-plan-item-title {
  color: #003e51 !important;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  text-decoration: none !important;
}

.ka-plan-item-where {
  color: #3D6B7A;
  font-size: 13.5px;
}

.ka-plan-panel button.ka-plan-remove.ka-plan-remove {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: 1.5px solid #CFE3EA !important;
  border-radius: 999px;
  color: #3D6B7A !important;
  font-size: 20px !important;
  line-height: 1;
  cursor: pointer;
}

/* ---------- The email form ---------- */

.ka-plan-form {
  margin-top: 22px;
  padding: 16px;
  background: #FFF6EF;
  border-radius: 14px;
}

.ka-plan-form[hidden] {
  display: none;
}

.ka-plan-panel h3.ka-plan-form-title {
  margin: 0 0 4px !important;
  color: #003e51 !important;
  font-family: inherit !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.ka-plan-form-note {
  margin: 0 0 12px !important;
  color: #3D6B7A;
  font-size: 14px;
  line-height: 1.45;
}

.ka-plan-label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 800;
}

/* 16px text: anything smaller makes iPhones zoom in on the box */
.ka-plan-panel input.ka-plan-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  margin: 0 0 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1.5px solid #CFE3EA;
  border-radius: 10px;
  color: #003e51;
  font-family: inherit;
  font-size: 16px;
}

.ka-plan-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}

.ka-plan-check input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: #FF6900;
}

/* The spam trap: moved off screen, never shown to people */
.ka-plan-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ka-plan-panel button.ka-plan-send.ka-plan-send {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 12px 18px;
  background: #C43A00 !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-family: inherit;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
}

.ka-plan-panel button.ka-plan-send.ka-plan-send:hover {
  background: #FF6900 !important;
}

.ka-plan-panel button.ka-plan-send.ka-plan-send:disabled {
  opacity: 0.7;
  cursor: wait;
}

.ka-plan-status {
  margin: 10px 0 0 !important;
  color: #1E7F72;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.ka-plan-status:empty {
  display: none;
}

.ka-plan-status.is-error {
  color: #B3261E;
}

/* ---------- The plan sponsor: the route-sponsor style card ---------- */

.ka-plan-sponsor-card {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  padding: 12px;
  background: #FFF6DA;
  border: 2px solid #FBD872;
  border-radius: 14px;
}

.ka-plan-sponsor-photo {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 10px;
}

.ka-plan-sponsor-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ka-plan-sponsor-label {
  color: #7A5B00;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ka-plan-sponsor-name {
  font-size: 16px;
  font-weight: 800;
}

.ka-plan-sponsor-offer {
  font-size: 14px;
  line-height: 1.4;
}

.ka-plan-panel a.ka-plan-sponsor-button {
  align-self: flex-start;
  margin-top: 6px;
  padding: 6px 16px;
  background: #fff !important;
  border: 2px solid #003e51;
  border-radius: 999px;
  color: #003e51 !important;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none !important;
}

.ka-plan-panel button.ka-plan-clear.ka-plan-clear {
  display: block;
  margin: 18px auto 0;
  padding: 8px 12px;
  background: transparent !important;
  border: 0 !important;
  color: #3D6B7A !important;
  font-family: inherit;
  font-size: 14px !important;
  font-weight: 700;
  text-decoration: underline;
  text-transform: none !important;
  cursor: pointer;
}

/* The ring around a heart after it's tapped: only for keyboard users,
   who need it to see where they are. Taps and clicks don't show it. */
button.ka-save:focus:not(:focus-visible) {
  outline: none;
}

button.ka-save:focus-visible {
  outline: 3px solid #5bc2e7;
  outline-offset: 2px;
}