/* Homepage redesign for a 50+ male audience, loaded after home-polish.css.
   Classic dating-prelander look: warm paper background, big Arial type,
   high contrast, yellow highlights and a chunky orange call-to-action.
   Remove the <link> in index.php to return to the previous design. */
:root {
  --l50-ink: #1c1c1c;
  --l50-text: #333;
  --l50-paper: #f5f0e6;
  --l50-card: #fff;
  --l50-line: #d8cfbf;
  --l50-red: #c62828;
  --l50-yellow: #ffd600;
  --l50-cta: #ff6d00;
  --l50-cta-top: #ff8f1f;
  --l50-cta-edge: #b44000;
  --l50-link: #0b57d0;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--l50-ink);
  background: var(--l50-paper);
}

/* Header: plain black bar with a yellow line. */
.navbar.bg-black {
  background: #111 !important;
  border-bottom: 4px solid var(--l50-yellow);
}
.main-nav .nav-item .nav-link {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}
.main-nav .nav-item .nav-link.nav-cta,
.main-nav .nav-item .nav-link.nav-cta:hover {
  background: var(--l50-cta);
  border-radius: 6px;
  box-shadow: 0 3px 0 var(--l50-cta-edge);
  color: #fff;
}
.main-nav .nav-item .nav-link.nav-cta:hover {
  background: var(--l50-cta-top);
}
@media (max-width: 992px) {
  .mobileMenu {
    background: #111;
  }
  .main-nav .nav-item .nav-link {
    border-bottom-color: #333;
  }
  .main-nav .nav-item .nav-link.active {
    color: var(--l50-yellow);
  }
}

/* Buttons: big, orange, raised, with an arrow. */
.btn {
  background: linear-gradient(var(--l50-cta-top), var(--l50-cta)) !important;
  border-radius: 8px;
  border-bottom: 5px solid var(--l50-cta-edge);
  box-shadow: 0 4px 12px rgb(0 0 0 / 25%);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgb(0 0 0 / 35%);
  letter-spacing: 0.02em;
}
.btn::after {
  content: "\25B6";
  margin-left: 10px;
  font-size: 0.7em;
}
.btn:hover {
  background: linear-gradient(#ffa040, var(--l50-cta-top)) !important;
}
.btn:active {
  border-bottom-width: 2px;
  transform: translateY(3px);
}
.btn:focus-visible,
.banner-btn-grp button:focus-visible,
.phone-hero-link:focus-visible,
.faq-item summary:focus-visible {
  outline: 3px solid var(--l50-link);
  outline-offset: 4px;
}
.phone-hero-btn,
.how-work-ticks .register-btn {
  animation: l50-pulse 1.8s ease-in-out infinite;
}
@keyframes l50-pulse {
  50% {
    transform: scale(1.04);
  }
}

/* Intro with the phones: warm dark backdrop instead of the green-black one. */
.phone-hero {
  background-color: #1d0d08;
  background-image: linear-gradient(rgb(40 12 6 / 84%), rgb(20 6 3 / 88%)), url("../images/bg.webp");
}
.phone-hero-btn {
  max-width: 340px;
  min-height: 64px;
  font-size: 22px;
}

/* Member numbers: plain boxes with a red edge and yellow-marked numbers. */
.activities-chat {
  background: var(--l50-card);
  background-image: none;
  border-bottom: 3px dashed var(--l50-line);
  padding: 32px 0 36px;
}
.activities-chat-thread {
  align-items: stretch;
  gap: 10px;
  font-family: Arial, Helvetica, sans-serif;
}
.chat-pill.chat-date {
  margin-bottom: 6px;
  padding: 4px 14px;
  border-radius: 4px;
  background: var(--l50-red);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  box-shadow: none;
}
.chat-bubble {
  max-width: none;
  padding: 14px 18px;
  border: 2px solid var(--l50-line);
  border-left: 8px solid var(--l50-red);
  border-radius: 6px;
  background: var(--l50-paper);
  color: var(--l50-ink);
  font-size: 21px;
  box-shadow: none;
}
.chat-in.chat-first {
  border-top-left-radius: 6px;
}
.chat-in.chat-first::before,
.chat-out.chat-first::before {
  content: none;
}
.chat-bubble strong {
  padding: 0 4px;
  background: linear-gradient(transparent 45%, var(--l50-yellow) 45%);
  font-size: 1.35em;
  font-weight: 900;
}
.chat-online::before {
  width: 13px;
  height: 13px;
  background: #1faa3a;
  box-shadow: 0 0 0 4px rgb(31 170 58 / 25%);
}
.chat-out,
.chat-out:hover {
  align-self: stretch;
  justify-content: center;
  text-align: center;
  margin-top: 16px;
  padding: 16px 20px;
  border: 0;
  border-bottom: 5px solid var(--l50-cta-edge);
  border-radius: 8px;
  background: linear-gradient(var(--l50-cta-top), var(--l50-cta));
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgb(0 0 0 / 35%);
  box-shadow: 0 4px 12px rgb(0 0 0 / 20%);
}
.chat-out:hover {
  background: linear-gradient(#ffa040, var(--l50-cta-top));
  color: #fff;
}
.chat-out.chat-first {
  border-top-right-radius: 8px;
}
.chat-ticks {
  color: #fff;
}
.chat-pill.chat-notice {
  margin-top: 8px;
  padding: 0;
  background: none;
  box-shadow: none;
  color: var(--l50-red);
  font-size: 16px;
  font-weight: 700;
}
@media (min-width: 992px) {
  .chat-bubble {
    font-size: 23px;
  }
  .chat-out {
    font-size: 24px;
  }
}

/* Intro text over the photo collage, then a white form card. */
.hookup-section {
  background: #141414;
}
.hookup-section .hookup-bg {
  opacity: 0.32;
}
.hookup-content h1 {
  margin-bottom: 10px;
  color: var(--l50-yellow);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
}
.hookup-content a {
  border-bottom: 4px solid var(--l50-yellow);
  color: #fff;
  font-weight: 900;
}
.hookup-content a:hover {
  color: var(--l50-yellow);
}
.hookup-content p,
.hookup-content p:first-of-type {
  color: #f1f1f1;
  font-size: 19px;
  line-height: 1.55;
  text-shadow: 0 1px 3px rgb(0 0 0 / 80%);
}
.hookup-content p:first-of-type {
  color: #fff;
  font-size: 21px;
  font-weight: 700;
}
@media (min-width: 992px) {
  .hookup-content h1 {
    font-size: 24px;
  }
  .hookup-content a {
    font-size: 52px;
  }
  .hookup-content p {
    font-size: 20px;
  }
  .hookup-content p:first-of-type {
    font-size: 23px;
  }
}

.hookup-form .banner-form-center {
  border: 4px solid var(--l50-yellow);
  border-radius: 10px;
  background: var(--l50-card);
  box-shadow: 0 14px 40px rgb(0 0 0 / 55%);
}
.hookup-form .banner-form-heading {
  background: var(--l50-red);
  border-radius: 6px 6px 0 0;
}
.hookup-form .banner-form-heading h2 {
  font-weight: 900;
  letter-spacing: 0.02em;
}
.hookup-form .banner-form-heading p {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}
.form-avatar {
  box-shadow: 0 0 0 3px var(--l50-yellow);
}
.form-chat .form-item-wrp {
  background: var(--l50-card);
  background-image: none;
  border-radius: 0 0 6px 6px;
}
.form-chat .banner-form-item:not(:last-child) {
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 2px dashed var(--l50-line);
}
.form-chat .banner-form-item label {
  display: block;
  margin: 0 0 12px;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--l50-ink);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
}
.form-chat .banner-form-item label::before {
  content: none;
}
.form-chat .banner-btn-grp button {
  min-height: 54px;
  border: 2px solid #bdb5a6;
  border-radius: 6px;
  background: var(--l50-paper);
  color: var(--l50-ink);
  font-size: 18px;
  font-weight: 700;
}
.form-chat .banner-btn-grp button:hover {
  border-color: var(--l50-ink);
  background: #fff6c2;
  color: var(--l50-ink);
}
.form-chat .banner-btn-grp button.active {
  border: 2px solid var(--l50-ink);
  background: var(--l50-yellow);
  color: var(--l50-ink);
}
.form-chat .banner-btn-grp button.active::before {
  color: var(--l50-ink);
}
.hookup-form .btn-small {
  min-height: 64px;
  font-size: 22px;
}
@media (min-width: 992px) {
  .form-chat .banner-form-item label {
    font-size: 21px;
  }
  .hookup-form .btn-small {
    min-height: 68px;
    font-size: 24px;
  }
}
@media (max-width: 575px) {
  .hookup-form .pref-toggle button {
    font-size: 17px;
  }
}

/* How it works: light section, red step labels, dark readable text. */
.how-work-ticks {
  background: var(--l50-paper);
  background-image: none;
  color: var(--l50-ink);
}
.how-work-ticks h2 {
  font-weight: 900;
  text-transform: uppercase;
}
.tick-intro {
  color: var(--l50-text);
  font-size: 20px;
}
.tick-row::before {
  background: var(--l50-line);
}
.tick-step img {
  box-shadow: 0 0 0 6px var(--l50-paper);
}
.tick-status,
.tick-read .tick-status {
  border-radius: 4px;
  background: var(--l50-red);
  color: #fff;
  font-size: 15px;
  text-transform: uppercase;
}
.tick-step h3 {
  font-size: 23px;
  font-weight: 900;
}
.tick-body > p:last-child {
  color: var(--l50-text);
  font-size: 19px;
}
.how-work-ticks .register-btn {
  max-width: 440px;
  min-height: 68px;
  font-size: 24px;
}
@media (min-width: 900px) {
  .tick-step img {
    box-shadow: 0 0 0 10px var(--l50-paper);
  }
  .tick-step h3 {
    font-size: 25px;
  }
  .tick-body > p:last-child {
    font-size: 20px;
  }
  .how-work-ticks .register-btn {
    max-width: 480px;
    min-height: 76px;
    font-size: 26px;
  }
}

/* FAQ: white section, bordered boxes, big plus signs, blue links. */
.faq-wrp {
  background: var(--l50-card);
  border-top: 3px dashed var(--l50-line);
  color: var(--l50-ink);
}
.faq-wrp h2 {
  font-weight: 900;
}
.faq-intro {
  color: var(--l50-text);
  font-size: 19px;
}
.faq-item {
  border: 2px solid var(--l50-line);
  border-radius: 6px;
  background: var(--l50-paper);
}
.faq-item[open] {
  border-color: var(--l50-ink);
  background: var(--l50-card);
}
.faq-item summary {
  padding: 18px 20px;
}
.faq-item summary::after {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--l50-red);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
}
.faq-item h3 {
  font-size: 21px;
  font-weight: 700;
}
.faq-item p {
  color: var(--l50-text);
  font-size: 19px;
}
.faq-item a {
  color: var(--l50-link);
}

/* Footer: same black as the header. */
.footer-wrp {
  background: #111;
  border-top: 4px solid var(--l50-yellow);
}
.footer-right-content .footer-menu li a {
  color: #ddd;
  font-size: 16px;
}
.footer-right-content .footer-menu li a:hover,
.footer-right-content p a {
  color: var(--l50-yellow);
}
.footer-right-content p {
  color: #aaa;
}

@media (prefers-reduced-motion: reduce) {
  .phone-hero-btn,
  .how-work-ticks .register-btn {
    animation: none;
  }
}