/*
 * Runtime CSS for the horoscope pages.
 *
 * common-details.css styles the Semantic UI dropdown's APPEARANCE (borders,
 * item height, colours) but relies on Semantic's own stylesheet for the
 * show/hide and positioning, and that library is not shipped here. These rules
 * supply only what is missing, so common-details.css stays byte-identical to the
 * supplied mockup and can be re-synced without losing them — the same split as
 * leadership-list.css alongside top-leadership.css.
 */

/* ── Category bar ────────────────────────────────────────────────────────── */
/* The mockup's own page had a global `ul { list-style: none }` reset that this
   site does not apply to `.plinks`, so the category bar rendered with bullet
   points between every item. The dropdown copy of the same list is already
   reset elsewhere, which is why only the inline row showed them. */
.hp_wrap .h_toplinks .plinks,
.hp_wrap .h_toplinks .plinks li,
.hp_wrap .h_toplinks .mycommon_dropdown ul,
.hp_wrap .h_toplinks .mycommon_dropdown li {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* The control is the positioning context for its menu. */
.formpage .ui.selection.dropdown { position: relative; cursor: pointer; }

/* Closed by default; opened by React adding `.visible`. */
.formpage .ui.selection.dropdown > .menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 5px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.formpage .ui.selection.dropdown.visible > .menu { display: block; }

/* The hidden native input Semantic uses to carry the value. */
.formpage .ui.selection.dropdown > input.search {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

/* `.text` shows the selection; `.text.default` the placeholder. */
.formpage .ui.selection.dropdown > .text {
  display: flex;
  align-items: center;
  height: 100%;
  pointer-events: none;
}

.formpage .ui.selection.dropdown .menu .item.selected { background: #f3f7ff; }

/* Tooltips are hover-only in the design; keep them keyboard reachable too. */
.formpage .mytooltip { position: relative; display: inline-flex; }
.formpage .mytooltip .tooltip_content { display: none; }
.formpage .mytooltip:hover .tooltip_content,
.formpage .mytooltip:focus-within .tooltip_content { display: block; }

/* A field in error: the design ships `.error_msg.d-none` and un-hides it. */
.formpage .error_msg { display: flex; }

/* Submitting state — the design has no spinner, so dim and block instead. */
.formpage .btnrow button[disabled] { opacity: 0.6; pointer-events: none; }

/* Explains the sign-in / choose-a-plan detour on a form page. The mockups have
   no equivalent — their forms always succeed. */
.formpage .form_notice {
  margin: 0 0 18px;
  padding: 11px 15px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 19px;
}
.formpage .form_notice.ok { background: #e8f6ee; color: #0f6b3f; border: 1px solid #bfe6d0; }
.formpage .form_notice.error { background: #fdecec; color: #a8161b; border: 1px solid #f5c6c6; }

/* Native date inputs ignore `placeholder` and print "dd/mm/yyyy", which loses
   the design's own prompt. The type cannot be swapped to text while empty —
   that destroys the field's editing state — so the native text is hidden while
   the field is empty and the real placeholder is painted over it. Once focused
   the native segments come back, because that is what the reader is editing.

   `!important` is required, not decorative: common-details.css sets
   `.input.datepicker { color: #000 !important }`, which no amount of
   specificity can beat. */
.formpage .new_inputlabel { position: relative; }
.formpage .input.datepicker.is-empty { color: transparent !important; }
.formpage .input.datepicker.is-empty:focus { color: #000 !important; }
.formpage .input.datepicker::-webkit-calendar-picker-indicator { opacity: 1; }

/* Matches the sibling fields' ::placeholder exactly — same 15px inset as the
   input's own padding, same size, family and colour — so the date field does
   not read as a different kind of control. */
.formpage .datepicker_ph {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: rgb(117, 117, 117);
  font-size: 14px;
  font-family: inherit;
  line-height: normal;
  white-space: nowrap;
  overflow: hidden;
  max-width: calc(100% - 50px);
}
.formpage .input.datepicker:focus + .datepicker_ph { display: none; }

/* Keyboard cursor in a dropdown. Deliberately NOT `.item.active`: the design
   uses that for the chosen option and paints a blue tick on it, so reusing it
   would tick whatever row the arrow keys happened to be resting on. */
.formpage .ui.selection.dropdown .menu .item.kb_focus,
.ui.selection.dropdown .menu .item.kb_focus { background: #eef3fd; }
.formpage .ui.selection.dropdown .menu .item.disabled,
.ui.selection.dropdown .menu .item.disabled { color: #909090; cursor: default; }

/* The category bar's dropdowns must sit above the page.
   The design gives the search panel z-index 2 — and the period tabs below it
   are absolutely positioned headings at z-index 2 as well. Same level, and the
   tabs come later in the DOM, so they painted straight through the open panel:
   "Tomorrow's Horoscope" landed across the search field. 60 matches the level
   the design already uses for its select menus. */
.hp_wrap .h_toplinks .rbox .horoscopes_search .search_box,
.hp_wrap .h_toplinks .rbox .dropdown-menu.mycommon_dropdown {
  z-index: 60;
}

/* Which period a category tab is showing.
   Sits under the hero sub-heading; the design has no slot for it because its
   static pages only ever showed one period. */
.hp_wrap .pagewise_search .hero_period {
  display: inline-block;
  margin: 6px 0 2px;
  padding: 4px 14px;
  border-radius: 30px;
  background: #FFF5F8;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: #C8001F;
}

/* The period a sign card's reading covers.
   Distinct from the zodiac range above it, which says who the sign covers —
   the two were being read as the same thing. */
.hp_wrap .greed_section .cardbox .card_period {
  display: inline-block;
  /* Clear of the accent rule that follows it. */
  margin: 4px 0 8px;
  padding: 2px 12px;
  border-radius: 30px;
  background: #FFF5F8;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  color: #C8001F;
}