/* APPV1_APPOINTMENT_MOBILE_SEAMLESS_R7_20260905
   Mobile-first appointment route audit. Scoped to appointment/customer surfaces.
*/
:root{
  --gt-r7-navy:#173b63;
  --gt-r7-available:#e8f4ea;
  --gt-r7-available-ink:#285c36;
  --gt-r7-booked:#edf0f2;
  --gt-r7-booked-ink:#68727c;
  --gt-r7-closed:#f4ead8;
  --gt-r7-closed-ink:#7c6237;
  --gt-r7-line:#e5d9c6;
}

/* Shared appointment readability */
.gt-journey-panel,
.gt-customer-portal,
.gt-appt-manage-page,
.gt-r4-auth-modal,
.gt-r5b-signedout{
  font-size:16px;
}
.gt-journey-panel button,
.gt-journey-panel input,
.gt-journey-panel select,
.gt-journey-panel textarea,
.gt-customer-portal button,
.gt-customer-portal input,
.gt-customer-portal select,
.gt-customer-portal textarea{
  font-size:16px;
}

/* Status colours retain text/aria semantics; colour is supplemental. */
.gt-calendar-day.is-selectable{
  background:var(--gt-r7-available)!important;
  color:var(--gt-r7-available-ink)!important;
  border-color:#bcd9c2!important;
}
.gt-calendar-day.is-selected{
  background:var(--gt-r7-navy)!important;
  color:#fff!important;
  border-color:var(--gt-r7-navy)!important;
}
.gt-calendar-day.is-unavailable{
  background:#f1f2f2!important;
  color:#8b9197!important;
  border-color:#e3e5e6!important;
}
.gt-calendar-day.is-closed-day{
  background:var(--gt-r7-closed)!important;
  color:var(--gt-r7-closed-ink)!important;
  border-color:#dfcaa3!important;
}
.gt-calendar-time-slot:not(.is-booked){
  background:var(--gt-r7-available)!important;
  color:var(--gt-r7-available-ink)!important;
  border-color:#bcd9c2!important;
}
.gt-calendar-time-slot.is-booked{
  background:var(--gt-r7-booked)!important;
  color:var(--gt-r7-booked-ink)!important;
  border-color:#d8dde1!important;
}
.gt-calendar-time-slot.is-selected{
  background:var(--gt-r7-navy)!important;
  color:#fff!important;
  border-color:var(--gt-r7-navy)!important;
}

@media(max-width:760px){
  /* Route-level overflow safety */
  html,body{max-width:100%!important;overflow-x:hidden!important}
  .gt-journey-panel,
  .gt-customer-portal,
  .gt-appt-manage-page,
  .gt-portal-shell,
  .gt-r4-auth-dialog,
  .gt-r5b-signedout-shell{
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  /* Maximise readable information: larger type, tighter spacing. */
  .gt-journey-panel{font-size:16px!important}
  .gt-journey-copy h1,.gt-journey-copy h2{font-size:24px!important;line-height:1.02!important}
  .gt-journey-question h2{font-size:22px!important;line-height:1.05!important;margin:4px 0 6px!important}
  .gt-journey-question p,.gt-journey-copy p{font-size:15px!important;line-height:1.28!important}
  .gt-journey-kicker,.gt-journey-question-count{font-size:14px!important}
  .gt-journey-option,.gt-journey-entry-card{font-size:16px!important}

  /* Landing = compact app grid, no decorative/duplicate content. */
  .gt-journey-entry-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    padding:6px 10px 10px!important;
    align-content:start!important;
  }
  .gt-journey-entry-card{
    min-height:50px!important;
    height:50px!important;
    padding:7px 9px!important;
    border-radius:12px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    line-height:1.08!important;
  }
  .gt-journey-entry-card .gt-journey-card-mark,
  .gt-journey-entry-card small,
  .gt-journey-entry-card b{
    display:none!important;
  }
  .gt-journey-entry-card strong{
    font-size:15px!important;
    line-height:1.08!important;
  }
  .gt-journey-entry .gt-journey-copy{
    padding:8px 12px 4px!important;
    margin:0!important;
  }
  .gt-journey-entry .gt-journey-copy p:not(.gt-journey-kicker){
    display:none!important;
  }
  .gt-journey-back-link{
    position:sticky!important;
    bottom:8px!important;
    z-index:20!important;
    margin:8px 10px!important;
    min-height:44px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:#fffdf8!important;
    border:1px solid var(--gt-r7-line)!important;
    border-radius:999px!important;
  }

  /* Progress becomes compact app progress. */
  .gt-journey-progress{
    min-height:42px!important;
    height:42px!important;
    padding:3px 8px!important;
    gap:3px!important;
  }
  .gt-journey-progress button{
    min-height:36px!important;
    padding:2px 4px!important;
  }
  .gt-journey-progress button b{font-size:13px!important}
  .gt-journey-progress button span{font-size:11px!important}

  /* Questionnaire: stage scrolls naturally, action bar stays reachable. */
  .gt-journey-stage[data-stage="0"].is-active{
    overflow-y:auto!important;
    padding-bottom:66px!important;
  }
  .gt-journey-question-frame{
    padding:4px 10px 8px!important;
    overflow:visible!important;
  }
  .gt-journey-question{
    padding:5px 0!important;
  }
  .gt-journey-options{
    gap:6px!important;
  }
  .gt-journey-option{
    min-height:44px!important;
    padding:7px 9px!important;
    border-radius:10px!important;
  }
  .gt-journey-options.gt-r7-many-options{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
  }
  .gt-journey-options.gt-r7-many-options .gt-journey-option{
    min-height:42px!important;
    padding:5px 4px!important;
    font-size:14px!important;
    line-height:1.05!important;
    text-align:center!important;
    justify-content:center!important;
  }
  .gt-journey-large-input{
    min-height:46px!important;
    font-size:16px!important;
  }
  .gt-journey-question>[data-question-next]{
    display:none!important;
  }
  .gt-journey-stage[data-stage="0"]>.gt-journey-stage-footer{
    position:sticky!important;
    bottom:0!important;
    z-index:40!important;
    min-height:56px!important;
    height:56px!important;
    padding:6px 10px!important;
    margin:0!important;
    background:rgba(255,253,248,.97)!important;
    border-top:1px solid var(--gt-r7-line)!important;
    display:flex!important;
    gap:7px!important;
    align-items:center!important;
  }
  .gt-journey-stage[data-stage="0"]>.gt-journey-stage-footer button{
    min-height:44px!important;
    height:44px!important;
    font-size:15px!important;
    flex:1 1 0!important;
  }
  .gt-r7-question-skip{
    background:#fff!important;
    color:#6d675e!important;
    border:1px solid #ded5c7!important;
  }

  /* Mobile Date & Time: no nested time scrolling. */
  .gt-calendar-stage.is-active,
  .gt-calendar-stage.is-active.gt-r5-one-screen{
    position:relative!important;
    inset:auto!important;
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:44px 8px 58px!important;
    display:block!important;
  }
  .gt-calendar-heading{
    margin:0 0 4px!important;
  }
  .gt-calendar-heading h2{
    font-size:22px!important;
    margin:0!important;
  }
  .gt-calendar-heading p{display:none!important}
  .gt-r4-calendar-scheduler{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:6px!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
  .gt-r4-calendar-card,
  .gt-r4-times-card{
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    padding:6px!important;
    overflow:visible!important;
  }
  .gt-calendar-month-head{min-height:28px!important}
  .gt-calendar-nav{width:36px!important;height:36px!important;min-height:36px!important}
  .gt-calendar-month-label{font-size:16px!important}
  .gt-calendar-weekdays span{font-size:11px!important}
  .gt-calendar-grid{
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
    grid-template-rows:repeat(6,27px)!important;
    gap:2px!important;
  }
  .gt-calendar-day{
    min-height:27px!important;
    height:27px!important;
    padding:0!important;
    font-size:13px!important;
    border-radius:7px!important;
  }
  .gt-calendar-legend{
    min-height:18px!important;
    gap:7px!important;
    font-size:10px!important;
    flex-wrap:wrap!important;
    margin-top:3px!important;
  }
  .gt-calendar-times-head{
    min-height:30px!important;
    margin:0!important;
  }
  .gt-calendar-times-head h3{
    font-size:18px!important;
    margin:0!important;
  }
  .gt-calendar-times-head p,
  .gt-google-live,
  .gt-r4-live-note,
  #gtJourneyAvailabilityHelp{
    display:none!important;
  }
  .gt-calendar-times{
    min-height:0!important;
    max-height:none!important;
    height:auto!important;
    overflow:visible!important;
  }
  .gt-calendar-time-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:4px!important;
    overflow:visible!important;
  }
  .gt-calendar-time-slot{
    min-height:36px!important;
    height:36px!important;
    padding:3px 4px!important;
    border-radius:8px!important;
    font-size:14px!important;
    line-height:1!important;
  }
  .gt-calendar-time-slot .gt-slot-time{font-size:14px!important;font-weight:700!important}
  .gt-calendar-time-slot:not(.is-booked) .gt-slot-status{display:none!important}
  .gt-calendar-time-slot.is-booked .gt-slot-status{font-size:9px!important;display:block!important}
  .gt-r4-after-hours{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    margin:6px 0 0!important;
    padding:6px!important;
    gap:5px!important;
    overflow:visible!important;
    border-radius:12px!important;
  }
  .gt-r4-after-hours-copy{
    min-height:28px!important;
    gap:5px!important;
  }
  .gt-r4-moon{font-size:20px!important}
  .gt-r4-after-hours-copy strong{font-size:14px!important}
  .gt-r4-after-hours-copy h3{font-size:15px!important;margin:0!important}
  .gt-r4-after-hours-copy p{display:none!important}
  .gt-r4-after-hours-form{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:5px!important;
  }
  .gt-r4-after-hours-form label{margin:0!important}
  .gt-r4-after-hours-form label span{font-size:11px!important}
  .gt-r4-after-hours-form input{
    min-height:38px!important;
    height:38px!important;
    font-size:14px!important;
    padding:4px 6px!important;
  }
  .gt-r4-after-hours-message{grid-column:1/-1!important}
  .gt-r4-after-hours-submit{
    grid-column:1/-1!important;
    min-height:42px!important;
    height:42px!important;
    font-size:14px!important;
  }
  .gt-calendar-footer{
    position:sticky!important;
    bottom:0!important;
    min-height:50px!important;
    height:50px!important;
    background:rgba(255,253,248,.98)!important;
    z-index:45!important;
  }

  /* Account/list/detail/manage/reschedule/cancel/messages full-route audit. */
  .gt-customer-portal{font-size:16px!important}
  .gt-portal-shell{padding-left:10px!important;padding-right:10px!important}
  .gt-portal-page-head{padding:14px 4px!important}
  .gt-portal-page-head h1{font-size:26px!important;line-height:1.05!important}
  .gt-portal-page-head p{font-size:15px!important;line-height:1.35!important}
  .gt-portal-nav{
    display:flex!important;
    gap:5px!important;
    overflow-x:auto!important;
    white-space:nowrap!important;
    scrollbar-width:none;
    padding-bottom:4px!important;
  }
  .gt-portal-nav a{min-height:42px!important;display:inline-flex!important;align-items:center!important;font-size:14px!important}
  .gt-appointment-list,.gt-appt-manage-grid{
    grid-template-columns:1fr!important;
    gap:9px!important;
  }
  .gt-card{max-width:100%!important;box-sizing:border-box!important}
  .gt-appointment-card{padding:13px!important}
  .gt-appointment-card h3{font-size:20px!important}
  .gt-appt-actions,.gt-appt-calendar-links,.gt-r5b-confirm-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
  }
  .gt-appt-actions a,.gt-appt-actions button,
  .gt-appt-calendar-links a,.gt-r5b-confirm-actions a{
    min-height:44px!important;
    font-size:14px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
  }
  .gt-appt-field input,.gt-appt-field select,.gt-appt-field textarea{
    width:100%!important;
    max-width:100%!important;
    min-height:46px!important;
    font-size:16px!important;
    box-sizing:border-box!important;
  }
  .gt-appt-field textarea{min-height:96px!important}
  .gt-appt-slots{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    max-height:none!important;
    overflow:visible!important;
  }
  .gt-appt-slot{min-height:44px!important;font-size:15px!important}

  /* Auth handoff stays inside phone viewport. */
  .gt-r4-auth-dialog{
    width:calc(100vw - 16px)!important;
    max-width:calc(100vw - 16px)!important;
    max-height:calc(100dvh - 16px)!important;
    overflow-y:auto!important;
    padding:14px!important;
  }
  .gt-r4-auth-dialog h2{font-size:23px!important}
  .gt-r4-auth-dialog p{font-size:15px!important}
  .gt-r4-auth-dialog iframe{
    width:100%!important;
    max-width:100%!important;
    min-height:420px!important;
  }

  .gt-r5b-signedout{padding:26px 10px!important}
  .gt-r5b-signedout h1{font-size:30px!important}
}

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