/* ================================================================
   ROOT
================================================================ */

:root {
  /*
     * Colors taken from the KD Super Speciality Hospital logo.
     */

  --red: #e03020;
  --red-dark: #c91f16;

  --orange: #f57b20;

  --yellow: #f5c21a;

  --charcoal: #202020;

  --text: #242424;
  --muted: #737373;

  --line: #e8e8e8;

  --white: #ffffff;
}

/* ================================================================
   RESET
================================================================ */

* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  background: var(--white);
}

body {
  margin: 0;
  padding: 0;

  background: var(--white);

  color: var(--text);

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

/* ================================================================
   PAGE
================================================================ */

.appointment-page {
  width: 100%;
  min-height: 100vh;

  display: flex;
  flex-direction: column;

  overflow: hidden;
}

/* ================================================================
   HEADER
================================================================ */

.appointment-header {
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 32px 24px 18px;
}

.hospital-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
}

.hospital-logo img {
  display: block;

  width: auto;
  max-width: 210px;
  max-height: 72px;

  object-fit: contain;
}

/* ================================================================
   INTRO
================================================================ */

.appointment-intro {
  width: min(720px, calc(100% - 40px));

  margin: 28px auto 0;

  text-align: center;
}

/* Small status */

.appointment-status {
  margin: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  color: #777;

  font-size: 12px;
  line-height: 1.4;

  font-weight: 600;

  letter-spacing: 0.01em;
}

.status-line {
  width: 7px;
  height: 7px;

  flex: 0 0 7px;

  border-radius: 50%;

  background: var(--orange);
}

/* Heading */

.appointment-intro h1 {
  margin: 17px 0 0;

  color: var(--charcoal);

  font-size: clamp(32px, 4vw, 48px);

  line-height: 1.08;

  letter-spacing: -0.035em;

  font-weight: 700;
}

/* Description */

.appointment-description {
  max-width: 610px;

  margin: 18px auto 0;

  color: var(--muted);

  font-size: 15px;

  line-height: 1.7;

  font-weight: 400;
}

/* Almost done */

.appointment-almost {
  margin: 8px auto 0;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.6;
}

.appointment-almost strong {
  color: var(--red);

  font-weight: 700;
}

/* ================================================================
   FULL WIDTH GRAPHIC
================================================================ */

.appointment-graphic-section {
  width: 100%;

  /*
     * The image itself is allowed to touch both edges
     * of the viewport.
     */

  margin-top: 34px;

  overflow: hidden;

  display: flex;
  justify-content: center;
}

.appointment-graphic {
  display: block;

  width: 100%;
  height: auto;

  /*
     * Prevents accidental inline-image spacing.
     */

  vertical-align: middle;
}
.appointment-graphic {
  width: 8%;
  height: auto;
}

/* ================================================================
   CONTACT SECTION
================================================================ */

.appointment-contact {
  width: min(760px, calc(100% - 40px));

  margin: 30px auto 0;

  padding-top: 27px;

  border-top: 1px solid var(--line);

  text-align: center;
}

/* Heading */

.contact-eyebrow {
  margin: 0 0 5px;

  color: var(--red);

  font-size: 11px;

  font-weight: 800;

  line-height: 1.4;

  text-transform: uppercase;

  letter-spacing: 0.12em;
}

.contact-heading h2 {
  margin: 0;

  color: var(--charcoal);

  font-size: 25px;

  line-height: 1.2;

  letter-spacing: -0.025em;

  font-weight: 700;
}

.contact-heading > p:last-child {
  margin: 7px auto 0;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.6;
}

/* ================================================================
   CONTACT OPTIONS
================================================================ */

.contact-options {
  width: 100%;

  margin-top: 20px;

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 14px;

  text-align: left;
}

/*
 * These deliberately aren't giant cards.
 *
 * They're lightweight bordered actions so the page still feels
 * like a hospital information page rather than a SaaS landing page.
 */

.contact-option {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 13px;

  padding: 15px 16px;

  border: 1px solid var(--line);

  border-radius: 10px;

  background: var(--white);

  text-decoration: none;

  transition:
    border-color 160ms ease,
    transform 160ms ease;
}

.contact-option:hover {
  border-color: #d1d1d1;

  transform: translateY(-2px);
}

.contact-option:focus-visible {
  outline: 2px solid var(--red);

  outline-offset: 3px;
}

/* Icon */

.contact-icon {
  width: 40px;
  height: 40px;

  flex: 0 0 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;
}

.contact-icon svg {
  width: 21px;
  height: 21px;
}

/* Phone */

.phone-icon {
  color: var(--red);

  background: rgba(224, 48, 32, 0.08);
}

/* Email */

.email-icon {
  color: var(--orange);

  background: rgba(245, 123, 32, 0.1);
}

/* Text */

.contact-content {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}

.contact-label {
  color: #858585;

  font-size: 10px;

  line-height: 1.3;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.1em;
}

.contact-value {
  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  color: var(--charcoal);

  font-size: 14px;

  line-height: 1.45;

  font-weight: 650;
}

/* Arrow */

.contact-arrow {
  margin-left: auto;

  color: #999;

  font-size: 18px;

  line-height: 1;

  transition:
    color 160ms ease,
    transform 160ms ease;
}

.contact-option:hover .contact-arrow {
  color: var(--red);

  transform: translate(2px, -2px);
}

/* ================================================================
   BACK HOME
================================================================ */

.back-home {
  margin: 22px auto 0;

  display: inline-flex;

  align-items: center;

  gap: 7px;

  color: var(--charcoal);

  font-size: 13px;

  line-height: 1.4;

  font-weight: 650;

  text-decoration: none;
}

.back-home span {
  color: var(--red);

  transition: transform 160ms ease;
}

.back-home:hover span {
  transform: translateX(-3px);
}

.back-home:focus-visible {
  outline: 2px solid var(--red);

  outline-offset: 4px;
}

/* ================================================================
   FOOTER
================================================================ */

.appointment-footer {
  margin-top: 30px;

  padding: 0 20px 25px;

  color: #aaa;

  text-align: center;

  font-size: 11px;

  line-height: 1.5;
}

/* ================================================================
   TABLET
================================================================ */

@media (max-width: 800px) {
  .appointment-header {
    padding-top: 26px;
  }

  .appointment-intro {
    margin-top: 22px;
  }

  .appointment-graphic-section {
    margin-top: 28px;
  }

  .appointment-contact {
    margin-top: 26px;
  }
}

/* ================================================================
   MOBILE
================================================================ */

@media (max-width: 600px) {
  .appointment-header {
    padding: 22px 20px 12px;
  }

  .hospital-logo img {
    max-width: 170px;
    max-height: 60px;
  }

  .appointment-intro {
    width: calc(100% - 34px);

    margin-top: 20px;
  }

  .appointment-status {
    max-width: 330px;

    font-size: 10px;
  }

  .appointment-intro h1 {
    margin-top: 14px;

    font-size: 32px;

    line-height: 1.1;
  }

  .desktop-only {
    display: none;
  }

  .appointment-description {
    margin-top: 14px;

    font-size: 14px;

    line-height: 1.65;
  }

  .appointment-almost {
    margin-top: 7px;

    font-size: 13px;
  }

  /*
     * Still full-width on mobile.
     */

  .appointment-graphic-section {
    margin-top: 24px;
  }

  .appointment-contact {
    width: calc(100% - 34px);

    margin-top: 24px;

    padding-top: 23px;
  }

  .contact-heading h2 {
    font-size: 22px;
  }

  .contact-heading > p:last-child {
    font-size: 13px;
  }

  .contact-options {
    grid-template-columns: 1fr;

    gap: 10px;

    margin-top: 17px;
  }

  .contact-option {
    padding: 13px 14px;
  }

  .contact-icon {
    width: 38px;
    height: 38px;

    flex-basis: 38px;
  }

  .contact-value {
    font-size: 13px;
  }

  .appointment-footer {
    margin-top: 24px;

    padding-bottom: 20px;
  }
}

/* ================================================================
   VERY SMALL MOBILE
================================================================ */

@media (max-width: 380px) {
  .appointment-intro h1 {
    font-size: 29px;
  }

  .appointment-description {
    font-size: 13px;
  }

  .contact-heading h2 {
    font-size: 21px;
  }
}