/* offer.css: the Navratri offer landing page.
 *
 * Loaded by that page alone, through its own extra_css, so a promotion's
 * styling never reaches the rest of the site and the page can be retired by
 * deleting it. Every class is prefixed vh-offer-.
 *
 * The page borrows the site's components where it can -- vh-hero, vh-plan,
 * vh-check, vh-sec -- and this file only adds what a festive offer needs on
 * top of them: the deep rose of the season, a struck-through regular price,
 * and the ticket that totals the offer up at the end.
 */

:root {
  --vh-offer-rose: #9f1239;
  --vh-offer-rose-deep: #6b0d2a;
  --vh-offer-rose-lift: #be123c;
  --vh-offer-gold: #f0b429;
}

/* ---- hero --------------------------------------------------------------- */

/* The site's hero is navy. This one keeps its shape and its spacing and takes
   the season's colour instead, so the page reads as a promotion from the first
   glance without becoming a different site. */
.vh-offer-hero {
  background:
    radial-gradient(1200px 520px at 78% -10%, rgba(240, 180, 41, .22), transparent 62%),
    linear-gradient(150deg, #5c0a24 0%, #88133a 42%, #3e0a20 100%);
}

.vh-offer-flag {
  display: inline-flex;
  align-items: center;
  margin-bottom: 18px;
  padding: 7px 18px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff7ed;
  background: rgba(240, 180, 41, .18);
  border: 1px solid rgba(240, 180, 41, .46);
  border-radius: 999px;
}

.vh-offer-flag i {
  color: var(--vh-offer-gold);
}

/* The three prices in the hero: name, what it was, what it is now. They sit on
   one line from the small breakpoint up and stack on a phone, where the row
   would otherwise be too tight for the figures to stay readable. */
.vh-offer-flash {
  max-width: 520px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.vh-offer-flash li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.vh-offer-flash-name {
  flex: 1 1 auto;
  font-size: .98rem;
  color: rgba(255, 255, 255, .86);
}

.vh-offer-flash-was {
  font-size: .9rem;
  color: rgba(255, 255, 255, .5);
  text-decoration: line-through;
}

.vh-offer-flash-now {
  min-width: 92px;
  font-size: 1.16rem;
  font-weight: 800;
  color: var(--vh-offer-gold);
  text-align: right;
  white-space: nowrap;
}

.vh-offer-card-flag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 13px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vh-offer-rose);
  background: #fff1f2;
  border-radius: 999px;
}

/* ---- the strip under the hero -------------------------------------------- */

.vh-offer-strip-value {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--vh-offer-gold);
}

.vh-offer-strip-label {
  font-size: .82rem;
  color: rgba(255, 255, 255, .72);
}

/* ---- price cards --------------------------------------------------------- */

.vh-offer-lede {
  max-width: 620px;
}

/* Both badges sit in the top right corner, so the name needs the room kept
   clear for them. Without this the longest of the three, "Private Limited
   Company Registration", runs underneath its own saving. */
.vh-offer-plan .vh-plan-name {
  padding-right: 104px;
  min-height: 2.6em;
}

.vh-offer-save {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 4px 11px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vh-offer-rose);
  background: #fff1f2;
  border-radius: 999px;
}

.vh-offer-was {
  font-size: .88rem;
  color: #94a3b8;
}

.vh-offer-was s {
  text-decoration-thickness: 1.5px;
}

.vh-plan-featured .vh-offer-was {
  color: rgba(255, 255, 255, .62);
}

/* The note grows to fill whatever room the card has, which keeps the buttons
   on a line with each other however long the three notes are. */
.vh-offer-plan-note {
  flex: 1 1 auto;
  margin-bottom: 22px;
  font-size: .92rem;
  line-height: 1.75;
  color: #64748b;
}

.vh-plan-featured .vh-offer-plan-note {
  color: rgba(255, 255, 255, .8);
}

/* ---- what you get -------------------------------------------------------- */

/* The site's checklist styles its heading as h6, which is the level the pages
   using it happen to need. This page runs the list under its own h2, so its
   headings are h3 and need the same look given to them by name. */
.vh-check h3 {
  margin: 0 0 4px;
  font-size: .98rem;
  font-weight: 700;
  color: #0f172a;
}

/* ---- the quieter middle sections ----------------------------------------- */

.vh-offer-why {
  max-width: 680px;
  margin: 0 auto 14px;
  font-size: 1.04rem;
  line-height: 1.85;
  color: #64748b;
}

.vh-offer-why-strong {
  margin: 0;
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--vh-offer-rose);
}

/* ---- the closing section ------------------------------------------------- */

.vh-offer-close {
  color: #fff;
  background: linear-gradient(150deg, #5c0a24 0%, #88133a 46%, #3e0a20 100%);
}

.vh-offer-close .vh-title,
.vh-offer-close h2 {
  color: #fff;
}

.vh-offer-close .vh-eyebrow {
  color: var(--vh-offer-gold);
}

.vh-offer-close .vh-eyebrow::before {
  background: var(--vh-offer-gold);
}

.vh-offer-close-text {
  max-width: 560px;
  margin-bottom: 28px;
  font-size: 1.04rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, .84);
}

/* The offer totalled up, as a ticket. The notch down each side is two small
   circles in the page's own colour, which is why they are placed rather than
   drawn: a border cannot be cut away. */
.vh-offer-ticket {
  position: relative;
  padding: 26px 28px;
  color: #0f172a;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .3);
}

.vh-offer-ticket::before,
.vh-offer-ticket::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  background: #70102f;
  border-radius: 50%;
  transform: translateY(-50%);
}

.vh-offer-ticket::before {
  left: -10px;
}

.vh-offer-ticket::after {
  right: -10px;
}

.vh-offer-ticket-head {
  padding-bottom: 16px;
  border-bottom: 2px dashed #e2e8f0;
}

.vh-offer-ticket-flag {
  display: block;
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--vh-offer-rose);
}

.vh-offer-ticket-sub {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #94a3b8;
}

.vh-offer-ticket-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vh-offer-ticket-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid #f1f5f9;
}

.vh-offer-ticket-list li span {
  font-size: .94rem;
  color: #475569;
}

.vh-offer-ticket-list li strong {
  font-size: 1.12rem;
  color: var(--vh-offer-rose);
  white-space: nowrap;
}

.vh-offer-ticket-foot {
  margin: 16px 0 0;
  font-size: .88rem;
  color: #94a3b8;
  text-align: center;
}

/* ---- phones -------------------------------------------------------------- */

@media (max-width: 575.98px) {
  .vh-offer-flash li {
    flex-wrap: wrap;
    gap: 4px 10px;
  }

  .vh-offer-flash-name {
    flex: 1 1 100%;
  }

  .vh-offer-flash-now {
    min-width: 0;
    margin-left: auto;
  }

  .vh-offer-strip-value {
    font-size: 1.24rem;
  }

  /* The notch would sit off the side of a narrow screen, where the ticket runs
     the full width of the page. */
  .vh-offer-ticket::before,
  .vh-offer-ticket::after {
    display: none;
  }
}