/* ================================================================
   KA MY PLAN: styles
   Part 1: the Save buttons on calendar cards, saveable blocks 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 saveable blocks: a "Save" pill ---------- */

/* Saveable blocks are any block the team switched on in the block
   sidebar (see includes/blocks.php). The pill looks the same as on
   calendar cards. Where it sits depends on the block (see
   addBlockButtons() in my-plan.js): the top-right corner of boxes and
   groups, the end of the text in paragraphs and headings, and its own
   line under lists. */
button.ka-save.ka-save--block.ka-save--block {
  position: relative;
  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: 0 1px 3px rgba(0, 62, 81, 0.12) !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;
}

/* A bigger tap area on phones, like the card pill */
button.ka-save.ka-save--block.ka-save--block::before {
  content: '';
  position: absolute;
  inset: -6px -4px;
}

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

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

button.ka-save.ka-save--block.ka-save--block.is-saved {
  background: #FFF1E8 !important;
  border-color: #FF6900 !important;
  color: #C43A00 !important;
}

/* Boxes, groups, images: in the top-right corner */
.ka-plan-block {
  position: relative;
}

.ka-plan-block > button.ka-save.ka-save--block:not(.ka-save--inline) {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

/* If a box starts with a heading, keep its words from running under
   the pill */
.ka-plan-block > button.ka-save--block + :is(h1, h2, h3, h4, h5, h6) {
  padding-right: 96px;
}

/* Paragraphs and headings: at the end of the text, like a last word.
   It keeps its own 13px size, even inside a big heading. */
button.ka-save.ka-save--block.ka-save--inline {
  margin-left: 8px;
  vertical-align: middle;
  top: -1px;
}

/* Lists: on its own line just below */
.ka-plan-after {
  margin: 6px 0 16px;
}

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