/* =========================
   assets/main.css
   ========================= */

/* 1) Global Reset + Box‐Sizing */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 2) Body */
body {
  font-family: Helvetica, Arial, sans-serif;
  background: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 6px 6px 6px;
}

/* 3) Card Container */
.card {
  display: flex;
  background: #fff;
  width: 100%;
  max-width: 900px;
  min-height: 450px;      /* allows desktop height but is flexible */
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
  border: 2px solid rgba(0,0,0,0.1);
  overflow: hidden;
  position: relative;
}

/* 4) Calendly Ribbon */
.calendly-ribbon {
  position: absolute;
  top: 0;
  right: 0;
  width: 260px;
  height: 52px;
  background: none;
  pointer-events: none;
  z-index: 10;
}
.calendly-ribbon span {
  display: flex;               /* turn the span into a flex container */
  justify-content: center;     /* horizontal centering */
  align-items: center;         /* vertical centering */
  text-align: center;          /* fallback for older browsers */
  white-space: nowrap;         /* prevent wrapping onto multiple lines */
  font-size: 1.2rem;           /* base size for desktop */
  padding: 10px 0;             /* vertical padding */
}
.calendly-ribbon span {
  display: block;
  background: #485059;
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  font-family: inherit;
  position: absolute;
  right: -105px;
  top: 14px;
  width: 285px;
  padding: 11px 0 11px 0;
  text-align: center;
  transform: rotate(45deg);
  box-shadow: 2 4px 10px 0 rgba(70,70,90,0.09);
  letter-spacing: 0;
  line-height: 0.80;
}
.calendly-ribbon span small {
  display: block;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
  margin-top: -2px;
}

/* 5) Left Column */
.left {
  display: flex;
  flex-direction: column;
  width: 50%;
  border-right: 1px solid #e0e0e0;
  padding: 26px;
}
.seeklogo {
  width: 92px;
  height: 32px;
  display: block;
}
.label {
  margin-top: 38px;
  font-size: 16px;
  color: #555;
}
h1 {
  margin: 7px 0 24px;
  font-size: 24px;
}
.meta {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 16px;
  margin-bottom: auto;
}
.meta .item {
  display: flex;
  align-items: center;
  color: #555;
  font-size: 16px;
}
.meta .item svg {
  margin-right: 10px;
  fill: #1877f2;
  width: 19px;
  height: 19px;
}

/* 6) Right Column */
.right {
  width: 50%;
  padding: 32px 19px 19px 19px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.schedule-title {
  font-size: 1.20rem;
  font-weight: 550;
  margin-bottom: 32px;
  margin-top: 0;
  color: #23272f;
  letter-spacing: -0.5px;
  text-align: left;
  width: 100%;
  line-height: 1.25;
}

/* 7) Steps Bar */
.steps-bar-wrapper {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin-bottom: 32px;
  height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.steps-bar-img {
  width: 100%;
  max-width: 420px;
  height: 85px; /* Adjust if needed so icon circles are 28px high */
  display: block;
  margin: 0 auto;
  object-fit: contain;
}
.steps-labels {
  position: absolute;
  top: 46px; /* just below the image, adjust if needed */
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 19px;
  color: #9199ad;
  margin-top: 4px;
  font-weight: 400;
  pointer-events: none;
}
.step-label {
  text-align: center;
  width: 33.333%;
}
.step-label:first-child { text-align: left; }
.step-label:last-child  { text-align: right; }
.step-label:nth-child(2){ text-align: center; }

/* 8) Info Box */
.info {
  background: rgb(255, 253, 230);
  border: 1px solid #fee3a0;
  border-radius: 3px;
  color: #222831;
  padding: 16px;
  font-size: 14px;
  margin-bottom: 24px;
  line-height: 1.4;
  width: 100%;
  text-align: left;
  justify-content: left;
  align-items: left;
}

/* 9) Continue Button */
#openPopup {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px;
  background: #1877f2;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
}
#openPopup:hover {
  background: #165fbe;
}
#openPopup svg {
  margin-right: 8px;
  fill: #fff;
  width: 20px;
  height: 20px;
}

/* 10) Bottom Links */
.links {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  width: 100%;
}
.links a {
  color: #1877f2;
  text-decoration: none;
}

/* =========================
   MODAL (older styling)
   ========================= */

/* 11) Backdrop */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  display: none;           /* Shown via JS */
  justify-content: center;
  align-items: center;
  padding: 16px;
  z-index: 1000;
}

/* 12) Modal Container */
.modal {
  width: 100%;
  max-width: 1000px;
  height: 100%;
  max-height: 711px;
  background: #fff;
  border-radius: 1px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
  overflow: hidden;
  font-size: 14px;
}

/* 13) Title Bar */
.title-bar {
  background: #e5e5e5;
  padding: 6px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #333;
}
.title-bar .icons span {
  margin-left: 8px;
  cursor: pointer;
  user-select: none;
}

/* 14) Browser Bar */
.browser-bar {
  background: #f5f6f7;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #333;
  border-bottom: 1px solid #d1d5da;
}
.browser-bar .lock-icon {
  width: 12px;
  height: 12px;
  margin-right: 6px;
  fill: #4CAF50;
}
.browser-bar .secure {
  font-size: 12px;
  color: #4CAF50;
  margin-right: 8px;
}
.browser-bar .url {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 15) Content Area + Full‐Height Iframe */
/*    ↓ THIS PART WAS CHANGED */
.content-area {
  background: #fff;
  height: calc(100% - 72px); /* subtract title-bar (40px) + browser-bar (32px) */
  overflow-y: auto;          /* let iframe scroll internally */
}
.content-area iframe {
  width: 100%;    /* force iframe to fill full width */
  height: 100%;   /* force iframe to fill full height */
  border: none;
  display: block;
}

/* 16) Ensure #iframeContainer fills its parent (.content-area) */
#iframeContainer {
  width: 100%;
  height: 100%;
}

/* =========================
   Responsive Tweaks
   ========================= */
@media (max-width: 820px) {
  .card {
    flex-direction: column;
  }
  .left, .right {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
  }
  .right {
    border-bottom: none;
    padding: 24px 12px;
  }
  .calendly-ribbon {
    width: 120px;
  }
  .calendly-ribbon span {
    right: -48px;
    width: 200px;
    font-size: 14px;
  }
}

@media (max-width: 580px) {
  .modal {
    max-width: 100%;
    height: 100%;
    border-radius: 0;
  }
  .content-area {
    height: calc(100% - 72px);
  }
  .right {
    padding: 16px 4px;
  }
  .calendly-ribbon span {
    right: -30px;
    width: 125px;
    font-size: 11px;
  }
  .calendly-ribbon span {
    font-size: 1rem;            /* smaller on mobile */
    padding: 8px 0;
  }
}