/* ================================================================
   KA MY PLAN: styles
   Part 1: the Save buttons on calendar cards and the event page
   Part 2: the bar at the bottom of the screen
   Part 2B: the explainer above lists, and the first-save nudge
   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: a "Save" pill in the card's top row ---------- */

/* The script puts the time line and the Save button side by side in a
   new row at the top of the card's text, so the title below keeps the
   card's full width */
.ka-v2 .ka-card-toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.ka-v2 .ka-card-toprow .ka-card-kicker {
  min-width: 0;
}

/* The pill: white with a navy outline heart and the word "Save" */
.ka-v2 button.ka-save.ka-save--card.ka-save--card {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  min-height: 0;
  margin: 0;
  padding: 0 12px;
  background: #fff !important;
  border: 1.5px solid #CBD6DA !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: #003e51 !important;
  font-family: inherit;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap;
  cursor: pointer;
}

/* The pill is 32px tall to fit the row, but this invisible edge makes
   the area you can tap about 44px, which is easier on a phone */
.ka-v2 button.ka-save.ka-save--card.ka-save--card::before {
  content: '';
  position: absolute;
  inset: -6px -4px;
}

.ka-v2 button.ka-save.ka-save--card.ka-save--card .ka-heart {
  width: 15px;
  height: 15px;
}

.ka-v2 button.ka-save.ka-save--card.ka-save--card:hover {
  border-color: #FF6900 !important;
}

/* Saved: peach with an orange heart and the word "Saved" */
.ka-v2 button.ka-save.ka-save--card.ka-save--card.is-saved {
  background: #FFF1E8 !important;
  border-color: #FF6900 !important;
  color: #C43A00 !important;
}

/* Backup: a card without a time line keeps the button in its own
   top-right corner */
.ka-v2 .ka-card[data-event-id] {
  position: relative;
}

.ka-v2 .ka-card > button.ka-save.ka-save--card.ka-save--card {
  position: absolute;
  top: 10px;
  right: 10px;
}

/* ---------- 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 wider, taller bar centered at the bottom of the screen */
@media (min-width: 900px) {
  .ka-plan-bar {
    padding: 0 24px 20px;
  }

  .ka-plan-bar button.ka-plan-bar-button.ka-plan-bar-button {
    max-width: 680px;
    min-height: 64px;
    padding: 14px 28px;
    font-size: 19px !important;
  }

  .ka-plan-bar-button .ka-heart {
    width: 26px;
    height: 26px;
  }
}


/* ================================================================
   PART 2B: THE EXPLAINER ABOVE LISTS, AND THE FIRST-SAVE NUDGE
   ================================================================ */

/* The explainer: a peach strip above the first list of events,
   the same peach as a saved button, so the two look connected */
.ka-plan-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 820px;
  margin: 0 auto 14px;
  padding: 10px 4px 10px 12px;
  box-sizing: border-box;
  background: #FFF1E8;
  border: 1.5px solid #FFD2B8;
  border-radius: 14px;
  color: #003e51;
  font-family: 'Nunito', system-ui, sans-serif;
}

.ka-plan-hint-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
}

.ka-plan-hint-icon .ka-heart,
.ka-plan-nudge .ka-heart {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  fill: #FF6900;
  stroke: #FF6900;
}

/* Doubled class: beats the theme's large paragraph size */
p.ka-plan-hint-text.ka-plan-hint-text {
  flex: 1;
  min-width: 0;
  margin: 0 !important;
  color: #003e51 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

/* The × to dismiss it: a 44px square, easy to tap */
button.ka-plan-hint-close.ka-plan-hint-close {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #3D6B7A !important;
  font-size: 24px !important;
  line-height: 1;
  cursor: pointer;
}

@media (min-width: 700px) {
  p.ka-plan-hint-text.ka-plan-hint-text {
    font-size: 15px !important;
  }
}

/* The nudge: a white note that fades in just above the bar for a few
   seconds. The script sets how far up it sits. */
.ka-plan-nudge {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 80px;
  z-index: 9991;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 520px;
  margin: 0 auto;
  padding: 12px 14px;
  box-sizing: border-box;
  background: #fff;
  border: 1.5px solid #FFD2B8;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 62, 81, 0.18);
  color: #003e51;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.ka-plan-nudge.is-showing {
  opacity: 1;
  transform: none;
}

/* Desktop: the nudge stays centered, just above the centered bar */


/* ================================================================
   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;
}