/* ==========================================================================
   Workspace details redesign — "Workspace Details Redesign" mockup.

   Scope: the three sections the mockup covers (Space Details, General
   Details, Office Timing) and the right-hand enquiry rail. Every other
   section on the details page — Amenities, About, Near By, FAQs, the
   similar-workspaces rail — is deliberately untouched and keeps its
   existing styles.
   ========================================================================== */

:root {
  --wd-navy: #03356b;
  --wd-orange: #ff8a00;
  --wd-ink: #1a2b3b;
  --wd-muted: #54606f;
  --wd-line: #e1eaf3;
  --wd-line-soft: #edf1f5;
  --wd-tint: #edf1f5;
  --wd-panel: #f8fafc;
  --wd-open: #2e9e5b;
  --wd-open-bg: #e8f5ee;
  --wd-hold: #8a5a1e;
  --wd-hold-bg: #fff7ed;
  --wd-closed: #8a95a1;
  --wd-closed-bg: #f1f4f8;
  --wd-grid-line: #e6ecf2;
}

/* --------------------------------------------------------------------------
   Section shell — the mockup stacks its sections 28px apart and puts the
   title on the page background rather than inside a card.
   -------------------------------------------------------------------------- */

.wd-section {
  padding-bottom: 28px;
}

.wd-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.wd-section__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--wd-navy);
  margin: 0;
  line-height: 1.25;
}

.wd-section__note {
  font-size: 12px;
  color: var(--wd-closed);
}

@media (max-width: 575.98px) {
  .wd-section__title {
    font-size: 20px;
  }
}

/* --------------------------------------------------------------------------
   Space Details — seating option cards
   -------------------------------------------------------------------------- */

.wd-seats {
  display: grid;
  gap: 12px;
}

.wd-seat {
  background: #fff;
  border: 1.5px solid var(--wd-line);
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr) auto;
  align-items: stretch;
}

.wd-seat__media {
  position: relative;
  min-height: 150px;
  background-color: var(--wd-tint);
  overflow: hidden;
}

.wd-seat__media img,
.wd-seat__media picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wd-seat__media picture img {
  width: 100%;
  height: 100%;
}

.wd-seat__body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wd-seat__title-row {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.wd-seat__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--wd-navy);
  margin: 0;
  line-height: 1.25;
}

.wd-pill {
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 50px;
  white-space: nowrap;
}

.wd-pill--available {
  color: var(--wd-open);
  background: var(--wd-open-bg);
}

.wd-pill--request {
  color: var(--wd-hold);
  background: var(--wd-hold-bg);
}

.wd-seat__desc {
  font-size: 13.5px;
  color: var(--wd-muted);
  line-height: 1.55;
  margin: 0 0 12px;
  max-width: 520px;
}

.wd-facts {
  margin-top: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.wd-fact {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--wd-navy);
  background: var(--wd-tint);
  padding: 5px 12px;
  border-radius: 6px;
  font-weight: 500;
  white-space: nowrap;
}

.wd-fact__label {
  color: var(--wd-muted);
}

.wd-fact__value {
  font-weight: 600;
}

.wd-seat__aside {
  flex: 0 0 auto;
  padding: 16px 20px;
  background: var(--wd-panel);
  border-left: 1px solid var(--wd-line-soft);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  min-width: 196px;
}

.wd-seat__price {
  text-align: right;
}

.wd-seat__price-label {
  display: block;
  font-size: 10.5px;
  color: var(--wd-muted);
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.wd-seat__price-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.wd-seat__amount {
  font-size: 22px;
  font-weight: 700;
  color: var(--wd-navy);
  line-height: 1;
}

.wd-seat__unit {
  font-size: 11.5px;
  color: var(--wd-muted);
}

.wd-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wd-navy);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  padding: 11px 26px;
  border-radius: 9px;
  white-space: nowrap;
  border: none;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease;
  cursor: pointer;
}

.wd-btn-primary:hover,
.wd-btn-primary:focus {
  background: var(--wd-orange);
  color: var(--wd-navy);
}

@media (max-width: 900px) {
  .wd-seat {
    grid-template-columns: 1fr;
  }

  .wd-seat__aside {
    align-items: stretch;
    border-left: none;
    border-top: 1px solid var(--wd-line-soft);
    min-width: 0;
  }

  .wd-seat__price {
    text-align: left;
  }

  .wd-seat__price-row {
    justify-content: flex-start;
  }

  .wd-btn-primary {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   General Details — the four-up stat strip. The 1px grid gap doubles as the
   cell divider so the strip stays clean at any number of rows.
   -------------------------------------------------------------------------- */

.wd-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--wd-line-soft);
  border: 1px solid var(--wd-line);
  border-radius: 14px;
  overflow: hidden;
}

.wd-stat {
  background: #fff;
  padding: 16px 20px;
  min-width: 0;
}

.wd-stat__label {
  display: block;
  font-size: 11.5px;
  color: var(--wd-muted);
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

.wd-stat__value-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.wd-stat__value {
  font-size: 19px;
  font-weight: 700;
  color: var(--wd-navy);
  line-height: 1.2;
}

.wd-stat__link {
  font-size: 12px;
  font-weight: 600;
  color: var(--wd-orange);
  white-space: nowrap;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.wd-stat__link:hover,
.wd-stat__link:focus {
  color: var(--wd-navy);
}

@media (max-width: 900px) {
  .wd-stats {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .wd-stats {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Office Timing
   -------------------------------------------------------------------------- */

.wd-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 50px;
  color: var(--wd-closed);
  background: var(--wd-closed-bg);
}

.wd-status--open {
  color: var(--wd-open);
  background: var(--wd-open-bg);
}

.wd-status__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* .wd-timing {
  border-top: 2px solid var(--wd-navy);
  padding-top: 22px;
} */

.wd-timing__hours {
  font-size: 30px;
  font-weight: 700;
  color: var(--wd-navy);
  line-height: 1.15;
  margin-bottom: 6px;
  text-wrap: pretty;
}

.wd-timing__meta {
  font-size: 14px;
  color: var(--wd-muted);
  margin-bottom: 24px;
}

.wd-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--wd-grid-line);
  border-radius: 10px;
  overflow: hidden;
}

.wd-week__day {
  background: #fff;
  padding: 14px 10px;
}

.wd-week__day--today {
  background: var(--wd-tint);
}

.wd-week__name {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--wd-muted);
  margin-bottom: 6px;
}

.wd-week__day--today .wd-week__name {
  color: var(--wd-navy);
}

.wd-week__hours {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--wd-muted);
  line-height: 1.35;
}

.wd-week__day--today .wd-week__hours {
  font-weight: 600;
  color: var(--wd-navy);
}

.wd-week__day--closed .wd-week__hours,
.wd-week__day--today.wd-week__day--closed .wd-week__hours {
  color: #6b7684;
}

@media (max-width: 900px) {
  .wd-week {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .wd-timing__hours {
    font-size: 28px;
  }
}

@media (max-width: 560px) {
  .wd-week {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wd-timing__hours {
    font-size: 24px;
  }
}

/* --------------------------------------------------------------------------
   Enquiry rail
   -------------------------------------------------------------------------- */

.wd-rail {
  display: grid;
  gap: 16px;
}

/* Expert assistance card */

.wd-expert {
  background: var(--wd-navy);
  border-radius: 16px;
  padding: 15px;
  position: relative;
  overflow: hidden;
  border: none;
}

.wd-expert__glow {
  position: absolute;
  top: -90px;
  right: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 138, 0, 0.22) 0%,
    rgba(255, 138, 0, 0) 64%
  );
  pointer-events: none;
}

.wd-expert__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.wd-expert__avatar {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--wd-tint);
  border: 2px solid rgba(255, 255, 255, 0.35);
}

.wd-expert__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wd-expert__names {
  min-width: 0;
}

/* Outbids the global `.Space-details h5` rule this card sits inside. */
.wd-expert .wd-expert__title {
  display: block;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

.wd-expert__subtitle {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  margin-top: 2px;
}

.wd-expert__copy {
  position: relative;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 16px;
}

.wd-expert__actions {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.wd-expert__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 10px 6px;
  border-radius: 9px;
  transition: background-color 0.25s ease, color 0.25s ease;
  cursor: pointer;
}

.wd-expert__btn:hover,
.wd-expert__btn:focus {
  background: #fff;
  color: var(--wd-navy);
}

.wd-expert__btn--accent {
  background: var(--wd-orange);
  border-color: var(--wd-orange);
  color: var(--wd-navy);
  font-weight: 700;
}

.wd-expert__btn--accent:hover,
.wd-expert__btn--accent:focus {
  background: #fff;
  border-color: #fff;
  color: var(--wd-navy);
}

.wd-expert__btn svg {
  flex: 0 0 auto;
}

/* Quote card */

.wd-quote {
  background: #fff;
  border: 1px solid var(--wd-line);
  border-radius: 16px;
  padding: 22px;
}

/* Outbids the global `.Space-details h5` rule this card sits inside. */
.wd-quote .wd-quote__title {
  font-size: 19px;
  font-weight: 700;
  color: var(--wd-navy);
  margin: 0 0 3px;
}

.wd-quote__copy {
  font-size: 13px;
  color: var(--wd-muted);
  margin: 0 0 16px;
  line-height: 1.5;
}

.wd-quote__fields {
  display: grid;
  gap: 9px;
  margin-bottom: 16px;
}

.wd-quote__row {
  display: grid;
  grid-template-columns: 1fr 96px;
  gap: 9px;
}

.wd-input {
  border: 1px solid var(--wd-line);
  border-radius: 9px;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--wd-ink);
  outline: none;
  min-width: 0;
  width: 100%;
  background: #fff;
}

.wd-input::placeholder {
  color: var(--wd-closed);
}

.wd-input:focus {
  border-color: var(--wd-navy);
}

.wd-quote__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--wd-navy);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 13px 20px;
  border-radius: 9px;
  margin-bottom: 10px;
  border: none;
  transition: background-color 0.25s ease, color 0.25s ease;
  cursor: pointer;
}

.wd-quote__submit:hover,
.wd-quote__submit:focus {
  background: var(--wd-orange);
  color: var(--wd-navy);
}

.wd-quote__ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: 1px solid var(--wd-line);
  background: #fff;
  color: var(--wd-navy);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 9px;
  transition: background-color 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
}

.wd-quote__ghost:hover,
.wd-quote__ghost:focus {
  border-color: var(--wd-navy);
  background: var(--wd-tint);
}

/* Inline quote / visit panel — the fields the buttons used to open in a modal
   now expand in place, directly above the button that opened them. The reused
   step components bring Bootstrap form chrome, so it is normalised here to the
   card's own input look. */

.wd-panel {
  text-align: left;
}

.wd-panel__back {
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--wd-muted);
  cursor: pointer;
}

.wd-panel__back:hover,
.wd-panel__back:focus {
  color: var(--wd-orange);
}

.wd-panel__done {
  background: var(--wd-open-bg);
  color: var(--wd-open);
  border-radius: 9px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 4px;
}

/* Flow toggle — the segmented control that picks quote vs visit. */

.wd-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--wd-tint);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 16px;
}

.wd-toggle__btn {
  border: none;
  background: none;
  border-radius: 999px;
  padding: 9px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--wd-muted);
  line-height: 1.3;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.wd-toggle__btn:hover,
.wd-toggle__btn:focus {
  color: var(--wd-navy);
}

.wd-toggle__btn--on,
.wd-toggle__btn--on:hover,
.wd-toggle__btn--on:focus {
  background: var(--wd-navy);
  color: #fff;
}

/* One action button under whichever form the toggle selected. */
.wd-quote__action {
  gap: 8px;
  margin-top: 4px;
  margin-bottom: 0;
}

.wd-quote__action:disabled {
  opacity: 0.7;
  cursor: default;
}

/* Both second-step forms share one grid cell. The inactive one is taken out of
   flow rather than unmounted — the card then hugs the form on screen, with no
   dead space under it, while whatever was typed on the other tab is kept. */
.wd-panel__stack {
  display: grid;
}

.wd-panel__stack > * {
  grid-area: 1 / 1;
  min-width: 0;
}

.wd-tabpane {
  display: none;
}

.wd-tabpane--on {
  display: block;
}

/* Field chrome */

.wd-panel .form-control,
.wd-panel .form-select,
.wd-panel textarea.form-control {
  border: 1px solid var(--wd-line);
  border-radius: 9px;
  padding: 11px 14px;
  font-size: 13.5px;
  color: var(--wd-ink);
  box-shadow: none;
  width: 100%;
}

.wd-panel .form-control:focus,
.wd-panel .form-select:focus {
  border-color: var(--wd-navy);
  box-shadow: none;
}

.wd-panel .form-control::placeholder {
  color: var(--wd-closed);
}

.wd-panel .form-check-input {
  box-shadow: none;
}

/* react-phone-input-2 renders its own shell; match the other fields. */
.wd-panel .react-tel-input {
  width: 100%;
}

.wd-panel .react-tel-input .form-control {
  width: 100%;
  height: auto;
  padding-left: 52px;
}

.wd-panel .react-tel-input .flag-dropdown,
.wd-panel .react-tel-input .selected-flag {
  border-radius: 9px 0 0 9px;
  background: var(--wd-tint);
  border-color: var(--wd-line);
}

/* Consent rows and the OTP grid are narrower here than in the dialog. */
.wd-panel .waLabelBlock,
.wd-panel .termsLabel,
.wd-panel .termsLine {
  font-size: 12.5px;
}

.wd-panel .waRow,
.wd-panel .termsRow {
  margin-bottom: 0.75rem;
}

.wd-panel .otp-input {
  width: 2.4rem;
}

.wd-panel .otp-input-container {
  justify-content: space-between;
}

/* All four slots on one row inside the narrow rail, as the wider form has
   them: equal columns, tightened gap and padding so the labels still fit. */
.wd-panel .time-slot-wrapper {
  flex-wrap: nowrap;
  gap: 6px;
}

.wd-panel .time-slot-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 2px;
  font-size: 11.5px;
  line-height: 1.2;
  white-space: nowrap;
  border-radius: 10px;
}

.wd-panel .label {
  font-size: 12.5px;
  color: var(--wd-muted);
  margin-bottom: 8px;
}

.wd-panel .schedule-box p {
  font-size: 12.5px;
}

.wd-panel .alert {
  font-size: 12.5px;
  padding: 10px 12px;
}

.wd-panel .text-danger.small {
  font-size: 11.5px;
}

/* Assurances */

.wd-assurances {
  background: var(--wd-tint);
  border-radius: 16px;
  padding: 20px 22px;
  border: none;
}

.wd-assurances__list {
  display: grid;
  gap: 11px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wd-assurances__item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13px;
  color: var(--wd-ink);
  line-height: 1.5;
}

.wd-assurances__check {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--wd-open);
  color: #fff;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* The shared phone field (react-phone-input-2) inside the enquiry rail. The
   control is restyled to match .wd-input so the card reads as one form, and the
   component's own bottom margin is dropped because the grid supplies the gap. */
.wd-quote__phone .react-tel-input,
.wd-quote__phone > .mb-3 {
  margin-bottom: 0 !important;
}

.wd-quote__phone .react-tel-input .form-control {
  width: 100%;
  height: auto;
  border: 1px solid var(--wd-line);
  border-radius: 9px;
  padding: 11px 14px 11px 48px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--wd-ink);
  background: #fff;
}

.wd-quote__phone .react-tel-input .form-control:focus {
  border-color: var(--wd-navy);
  box-shadow: none;
}

.wd-quote__phone .react-tel-input .flag-dropdown,
.wd-quote__phone .react-tel-input .selected-flag {
  border: none;
  border-radius: 9px 0 0 9px;
  background: transparent;
}