/* APPV1_APPOINTMENT_MOBILE_HEATMAP_R7A_20260905
   Approved mobile target: compact full-month availability heatmap,
   gold availability, grey booked, champagne closed, navy selected.
*/
:root{
  --gt-r7a-gold:#c7962f;
  --gt-r7a-gold-soft:#fbf1d6;
  --gt-r7a-gold-pale:#fff9ec;
  --gt-r7a-booked:#c6cbd0;
  --gt-r7a-booked-bg:#f0f1f2;
  --gt-r7a-closed:#e9d9bb;
  --gt-r7a-closed-bg:#f8f1e5;
  --gt-r7a-unavailable:#e6e7e7;
  --gt-r7a-navy:#173f69;
  --gt-r7a-line:#dfd1b8;
}

/* No green availability treatment anywhere in the booking stage. */
.gt-journey-panel .gt-google-live i{
  background:var(--gt-r7a-gold)!important;
  box-shadow:0 0 0 4px rgba(199,150,47,.13)!important;
}
.gt-journey-panel .gt-calendar-time-slot:not(.is-booked){
  background:var(--gt-r7a-gold-pale)!important;
  color:#77520b!important;
  border-color:#d8b367!important;
}
.gt-journey-panel .gt-calendar-time-slot.is-booked{
  background:var(--gt-r7a-booked-bg)!important;
  color:#81878d!important;
  border-color:#d9dcdf!important;
}
.gt-journey-panel .gt-calendar-time-slot.is-selected{
  background:var(--gt-r7a-navy)!important;
  border-color:var(--gt-r7a-navy)!important;
  color:#fff!important;
}

/* Heatmap segments inserted into each date button. */
.gt-r7a-day-heat{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2px;
  width:76%;
  max-width:34px;
  margin:2px auto 0;
}
.gt-r7a-segment{
  display:block;
  height:5px;
  border-radius:2px;
  background:var(--gt-r7a-unavailable);
}
.gt-r7a-segment.gt-r7a-available{background:var(--gt-r7a-gold)}
.gt-r7a-segment.gt-r7a-booked{background:var(--gt-r7a-booked)}
.gt-r7a-segment.gt-r7a-closed{background:var(--gt-r7a-closed)}
.gt-r7a-segment.gt-r7a-unavailable{background:var(--gt-r7a-unavailable)}
.gt-r7a-date-number{display:block;line-height:1}

.gt-calendar-day.gt-r7a-day-available:not(.is-selected){
  background:#fffdf7!important;
  color:var(--gt-r7a-navy)!important;
  border-color:#ddcda9!important;
}
.gt-calendar-day.gt-r7a-day-booked:not(.is-selected){
  background:#f5f6f6!important;
  color:#7d8388!important;
  border-color:#dcdfe1!important;
}
.gt-calendar-day.gt-r7a-day-closed:not(.is-selected){
  background:var(--gt-r7a-closed-bg)!important;
  color:#8a7451!important;
  border-color:#eadbc1!important;
}
.gt-calendar-day.gt-r7a-day-unavailable:not(.is-selected){
  background:#f4f4f3!important;
  color:#b1b2b2!important;
  border-color:#e6e6e4!important;
}
.gt-calendar-day.is-selected{
  background:var(--gt-r7a-navy)!important;
  color:#fff!important;
  border-color:var(--gt-r7a-navy)!important;
}
.gt-calendar-day.is-selected .gt-r7a-segment.gt-r7a-available{background:#f0ce83}
.gt-calendar-day.is-selected .gt-r7a-segment.gt-r7a-booked{background:#aeb9c5}
.gt-calendar-day.is-selected .gt-r7a-segment.gt-r7a-closed{background:#e6d6b7}
.gt-calendar-day.is-selected .gt-r7a-segment.gt-r7a-unavailable{background:#7c93aa}

/* Fancy colour choices — subtle faceted gemstone treatment. */
.gt-journey-option[data-r7a-fancy]{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-width:1px!important;
  border-color:rgba(23,63,105,.16)!important;
  color:#173f69!important;
}
.gt-journey-option[data-r7a-fancy]::before,
.gt-journey-option[data-r7a-fancy]::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
}
.gt-journey-option[data-r7a-fancy]::before{
  background:
    linear-gradient(135deg,rgba(255,255,255,.58) 0 28%,transparent 29% 56%,rgba(255,255,255,.24) 57% 100%),
    linear-gradient(45deg,transparent 0 38%,rgba(255,255,255,.28) 39% 61%,transparent 62% 100%);
}
.gt-journey-option[data-r7a-fancy]::after{
  inset:1px;
  border-radius:inherit;
  box-shadow:inset 0 0 22px rgba(255,255,255,.42);
}
.gt-journey-option[data-r7a-fancy="YELLOW"]{background:#f8e9a8!important}
.gt-journey-option[data-r7a-fancy="PINK"]{background:#f7dce5!important}
.gt-journey-option[data-r7a-fancy="BLUE"]{background:#dce8f5!important}
.gt-journey-option[data-r7a-fancy="GREEN"]{background:#deecdf!important}
.gt-journey-option[data-r7a-fancy="ORANGE"]{background:#f4dfc8!important}
.gt-journey-option[data-r7a-fancy="PURPLE"]{background:#e9e0f1!important}
.gt-journey-option[data-r7a-fancy="BROWN"]{background:#e8d8c7!important}
.gt-journey-option[data-r7a-fancy="RED"]{background:#f1d9da!important}
.gt-journey-option[data-r7a-fancy="OTHER"]{background:#fbf4e6!important}
.gt-journey-option[data-r7a-fancy].is-selected{
  border:2px solid var(--gt-r7a-gold)!important;
  box-shadow:0 8px 20px rgba(124,88,17,.13)!important;
  transform:translateY(-1px);
}

/* Compact status legend generated by R7A. */
.gt-r7a-legend{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 12px;
  font-size:12px;
  margin:4px 0 0;
}
.gt-r7a-legend span{display:inline-flex;align-items:center;gap:4px}
.gt-r7a-legend i{width:9px;height:9px;border-radius:3px;display:inline-block}
.gt-r7a-legend .available{background:var(--gt-r7a-gold)}
.gt-r7a-legend .booked{background:var(--gt-r7a-booked)}
.gt-r7a-legend .closed{background:var(--gt-r7a-closed)}
.gt-r7a-legend .unavailable{background:var(--gt-r7a-unavailable)}

/* After-hours is a compact card until deliberately expanded. */
.gt-r4-after-hours:not(.gt-r7a-expanded) .gt-r4-after-hours-form{
  display:none!important;
}
.gt-r4-after-hours .gt-r4-after-hours-copy{
  cursor:pointer;
}
.gt-r4-after-hours .gt-r4-after-hours-copy::after{
  content:"›";
  margin-left:auto;
  color:#8a650f;
  font-size:28px;
  line-height:1;
  transition:transform .18s ease;
}
.gt-r4-after-hours.gt-r7a-expanded .gt-r4-after-hours-copy::after{
  transform:rotate(90deg);
}

/* Long-question viewport fit: footer gets its own row and never covers choices. */
@media(max-width:760px){
  .gt-journey-stage[data-stage="0"].is-active.gt-r7a-question-fit{
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
    height:var(--gt-r7a-question-height,calc(100dvh - 160px))!important;
    max-height:var(--gt-r7a-question-height,calc(100dvh - 160px))!important;
    min-height:420px!important;
    overflow:hidden!important;
    padding-bottom:0!important;
  }
  .gt-journey-stage[data-stage="0"].is-active.gt-r7a-question-fit .gt-journey-question-frame{
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    padding:4px 10px 10px!important;
    scroll-padding-bottom:16px;
  }
  .gt-journey-stage[data-stage="0"].is-active.gt-r7a-question-fit>.gt-journey-stage-footer{
    position:static!important;
    bottom:auto!important;
    flex:0 0 auto!important;
    width:100%!important;
    z-index:5!important;
  }

  /* Compact month: full month remains visible without taking the screen. */
  .gt-calendar-stage.is-active,
  .gt-calendar-stage.is-active.gt-r5-one-screen{
    padding:42px 7px 54px!important;
  }
  .gt-calendar-heading{
    margin-bottom:3px!important;
  }
  .gt-calendar-heading h2{
    font-size:22px!important;
    line-height:1!important;
  }
  .gt-r4-calendar-card{
    padding:5px 6px!important;
  }
  .gt-calendar-month-head{
    height:32px!important;
    min-height:32px!important;
  }
  .gt-calendar-nav{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
  }
  .gt-calendar-month-label{font-size:17px!important}
  .gt-calendar-weekdays{min-height:18px!important}
  .gt-calendar-weekdays span{font-size:11px!important}
  .gt-calendar-grid{
    grid-template-rows:repeat(6,38px)!important;
    gap:2px!important;
  }
  .gt-calendar-day{
    height:38px!important;
    min-height:38px!important;
    padding:3px 1px 2px!important;
    border-radius:8px!important;
    font-size:13px!important;
  }
  .gt-calendar-legend{display:none!important}
  .gt-r7a-legend{font-size:10px!important;gap:4px 8px!important}

  /* Four columns like the approved mockup; three on very narrow phones. */
  .gt-calendar-time-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:4px!important;
  }
  .gt-calendar-time-slot{
    min-height:34px!important;
    height:34px!important;
    padding:2px 3px!important;
    font-size:13px!important;
  }
  .gt-calendar-time-slot .gt-slot-time{font-size:13px!important}
  .gt-calendar-time-slot.is-booked .gt-slot-status{
    font-size:8px!important;
    line-height:1!important;
  }

  /* After-hours compact bar directly under time grid. */
  .gt-r4-after-hours{
    margin-top:5px!important;
    padding:5px 7px!important;
    border-color:#d7b56e!important;
    background:#fffaf0!important;
  }
  .gt-r4-after-hours-copy{
    min-height:40px!important;
    display:flex!important;
    align-items:center!important;
  }
  .gt-r4-after-hours-copy strong{font-size:13px!important}
  .gt-r4-after-hours-copy h3{font-size:14px!important}
  .gt-r4-after-hours.gt-r7a-expanded .gt-r4-after-hours-form{
    display:grid!important;
  }

  /* Other appointment routes: no sticky controls may cover form content. */
  .gt-appt-manage-page .gt-card,
  .gt-customer-portal .gt-card{
    scroll-margin-bottom:72px;
  }
  .gt-appt-manage-page form,
  .gt-customer-portal form{
    max-width:100%!important;
  }
}

@media(max-width:350px){
  .gt-calendar-time-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}