/* UKPO R8.3.55 / v22.1.109 — Member Activities + My Bookings UX redesign.
   Presentation / interaction hierarchy only. Existing booking/payment/cancellation logic is preserved. */

.r8355-booking-tabs{display:flex;gap:8px;margin:10px 0 12px;padding:4px;border:1px solid #d9e7ec;border-radius:14px;background:#f4f8fa}
.r8355-booking-tabs button{flex:1;min-width:0;border:0;border-radius:10px;background:transparent;color:#546b76;padding:10px 8px;font:inherit;font-weight:850;cursor:pointer;white-space:nowrap}
.r8355-booking-tabs button.active{background:#fff;color:#0b879b;box-shadow:0 2px 8px rgba(19,63,79,.10)}
.r8355-booking-tabs .r8355-tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;margin-left:4px;padding:0 6px;border-radius:999px;background:#e4eff3;color:#49646e;font-size:10px;font-weight:900}
.r8355-booking-tabs button.active .r8355-tab-count{background:#0d91a6;color:#fff}
.r8355-tab-empty{margin:10px 0;padding:18px 14px;border:1px dashed #c8dce4;border-radius:14px;background:#f9fbfc;color:#667b85;text-align:center;font-weight:750}
.r8355-status-chip{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:900;white-space:nowrap}
.r8355-status-confirmed{background:#e9f8f1;color:#267257}
.r8355-status-progress{background:#fff3d8;color:#8a5b00}
.r8355-status-completed{background:#eaf3ff;color:#315f9d}
.r8355-status-checked{background:#e4f7f1;color:#147159}
.r8355-status-noshow{background:#fde9eb;color:#a73543}
.r8355-booking-more{margin-top:8px;border:1px solid #d8e5ea;border-radius:11px;background:#fbfcfd;overflow:hidden}
.r8355-booking-more>summary{list-style:none;cursor:pointer;padding:9px 11px;color:#55707b;font-size:11px;font-weight:850;display:flex;align-items:center;justify-content:space-between}
.r8355-booking-more>summary::-webkit-details-marker{display:none}
.r8355-booking-more>summary:after{content:'⌄';font-size:13px;transition:transform .16s ease}
.r8355-booking-more[open]>summary:after{transform:rotate(180deg)}
.r8355-booking-more-body{padding:0 9px 9px}
.r8355-booking-more-body .inline-checkin-actions{margin-top:0!important}
.r8355-booking-more-body>.btn{width:100%;margin-top:7px!important}

@media (max-width:900px){
  /* Activities: first layer answers What / When / Where / Spaces / My price / Action. */
  #activitiesList .r8355-activity-card,
  #bookingsList .r8355-booking-card,
  #waitlistBookingsBlock .ukpo-waitlist-booking-card-v21{
    margin:0 0 10px!important;
    padding:13px!important;
    border-radius:16px!important;
    box-shadow:0 3px 12px rgba(21,55,68,.055)!important;
  }
  #activitiesList .r8355-activity-card .activity-card-top,
  #bookingsList .r8355-booking-card .activity-card-top{
    gap:8px!important;
    align-items:flex-start!important;
    margin-bottom:8px!important;
  }
  #activitiesList .r8355-activity-card .activity-card-top .section-title,
  #bookingsList .r8355-booking-card .activity-card-top>b{
    flex:1;min-width:0;
    font-size:17px!important;
    line-height:1.22!important;
    letter-spacing:-.01em;
  }
  #activitiesList .r8355-activity-card .detail-chevron,
  #bookingsList .r8355-booking-card .detail-chevron{font-size:24px!important;color:#82959e!important;line-height:1!important}

  #activitiesList .r8355-activity-card .meta,
  #bookingsList .r8355-booking-card .meta{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:5px 8px;
    margin:0 0 9px!important;
    color:#506773!important;
    font-size:12px!important;
    line-height:1.35!important;
  }
  #activitiesList .r8355-activity-card .meta>span,
  #bookingsList .r8355-booking-card .meta>span{display:block!important;min-width:0}
  #activitiesList .r8355-activity-card .meta>.r8355-meta-venue,
  #bookingsList .r8355-booking-card .meta>.r8355-meta-venue{grid-column:1/-1}
  #activitiesList .r8355-activity-card .meta>.r8355-meta-availability{
    grid-column:1/-1;
    width:max-content;max-width:100%;
    padding:5px 9px;border-radius:999px;
    background:#eef8f5;color:#236b55;font-weight:850;
  }
  #activitiesList .r8355-activity-card .meta>.r8355-meta-courts{color:#68808b}

  /* Multi-tier prices and equipment/credit explanations move to Activity Details. */
  #activitiesList .r8355-activity-card .activity-fee-summary,
  #activitiesList .r8355-activity-card .activity-equipment-note,
  #activitiesList .r8355-activity-card .tap-detail-hint{display:none!important}
  #activitiesList .r8355-activity-card .your-activity-fee{
    display:flex!important;align-items:center!important;justify-content:space-between!important;
    margin:8px 0!important;padding:8px 10px!important;border-radius:10px!important;
    background:#edf8f2!important;color:#245f4d!important;border:0!important;
  }
  #activitiesList .r8355-activity-card .your-activity-fee span{font-size:11px!important;font-weight:800!important}
  #activitiesList .r8355-activity-card .your-activity-fee b{font-size:17px!important;color:#1b6b52!important}
  #activitiesList .r8355-activity-card>.btn{
    width:100%!important;min-height:43px!important;margin-top:3px!important;border-radius:11px!important;font-size:13px!important;font-weight:900!important;
  }

  /* My Bookings: first layer shows booking state, time/location, payment and cancellation deadline. */
  #bookingsList .r8355-booking-card .activity-equipment-note,
  #bookingsList .r8355-booking-card .tap-detail-hint{display:none!important}
  #bookingsList .r8355-booking-card .booking-payment-summary{
    margin:6px 0!important;padding:8px 10px!important;border-radius:10px!important;
    display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:2px 10px!important;align-items:center!important;
    background:#f3f8fa!important;border:0!important;
  }
  #bookingsList .r8355-booking-card .booking-payment-summary span{font-size:10px!important;color:#637984!important}
  #bookingsList .r8355-booking-card .booking-payment-summary b{font-size:12px!important;color:#24495a!important;text-align:right}
  #bookingsList .r8355-booking-card .booking-payment-summary small{grid-column:1/-1;font-size:10px!important;color:#6c7f87!important;margin-top:2px!important}
  #bookingsList .r8355-booking-card .booking-attendance-patch{background:#eef8f5!important}
  #bookingsList .r8355-booking-card .activity-cancel-state{
    margin:6px 0!important;padding:8px 10px!important;border-radius:10px!important;
    display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;
  }
  #bookingsList .r8355-booking-card .activity-cancel-state b,
  #bookingsList .r8355-booking-card .activity-cancel-state span{font-size:10px!important;line-height:1.3!important}
  #bookingsList .r8355-view-booking{
    width:100%!important;min-height:42px!important;margin:8px 0 0!important;border-radius:11px!important;font-size:12px!important;font-weight:900!important;
  }
  #bookingsList .r8355-booking-card>.google-calendar-btn,
  #bookingsList .r8355-booking-card>.inline-checkin-actions,
  #bookingsList .r8355-booking-card>button.btn.red{display:none!important}

  .r8355-booking-tabs{position:sticky;top:calc(var(--ukpo-safe-top,0px) + 66px);z-index:6;background:#f4f8fa}
}

@media (max-width:430px){
  .r8355-booking-tabs{gap:4px;padding:3px}
  .r8355-booking-tabs button{padding:9px 5px;font-size:11px}
  .r8355-booking-tabs .r8355-tab-count{min-width:18px;height:18px;font-size:9px;padding:0 5px}
  #activitiesList .r8355-activity-card .meta,
  #bookingsList .r8355-booking-card .meta{grid-template-columns:1fr 1fr}
}

/* R8.3.56 durable Past booking history */
.r8356-history-list{display:grid;gap:10px;margin-top:2px}
.r8356-history-card{border:1px solid #dbe6eb;border-radius:16px;background:#fff;padding:13px;box-shadow:0 3px 12px rgba(21,55,68,.05)}
.r8356-history-top{display:flex;gap:10px;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.r8356-history-top h3{margin:0;color:#172b48;font-size:16px;line-height:1.28;flex:1;min-width:0}
.r8356-history-meta{display:grid;grid-template-columns:1fr 1fr;gap:5px 8px;color:#526a76;font-size:12px;line-height:1.35}
.r8356-history-meta .wide{grid-column:1/-1}
.r8356-history-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#f3f8fa;border-radius:10px;padding:9px 10px;margin-top:9px;color:#5f7680;font-size:11px}
.r8356-history-summary b{color:#24495a;font-size:12px;text-align:right}
.r8356-history-view{width:100%;margin-top:8px!important;border-radius:11px!important}
.r8356-hist-cancelled{background:#eef1f3;color:#63727a}
.r8356-history-modal{display:none;position:fixed;inset:0;z-index:2147483600;background:rgba(9,24,45,.58);align-items:center;justify-content:center;padding:18px}
.r8356-history-modal.open{display:flex}
.r8356-history-dialog{width:min(520px,100%);max-height:min(84vh,720px);overflow:auto;background:#fff;border-radius:20px;padding:18px;box-shadow:0 24px 70px rgba(0,0,0,.24)}
.r8356-history-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.r8356-history-head h2{margin:0;color:#172b48;font-size:20px}
.r8356-history-head button{border:0;background:#edf3f5;border-radius:10px;width:36px;height:36px;font-size:20px;cursor:pointer}
.r8356-history-detail-title h3{margin:9px 0 12px;color:#172b48;font-size:18px;line-height:1.3}
.r8356-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.r8356-detail-grid>div{background:#f6f9fa;border:1px solid #e2ebee;border-radius:11px;padding:10px}
.r8356-detail-grid>div.wide{grid-column:1/-1}
.r8356-detail-grid small{display:block;color:#738690;font-size:10px;margin-bottom:4px}
.r8356-detail-grid b{display:block;color:#263f4f;font-size:12px;line-height:1.4}
#r8356HistoryClose{width:100%;margin-top:14px}
@media(max-width:430px){.r8356-history-card{padding:12px}.r8356-history-top h3{font-size:15px}.r8356-history-meta{grid-template-columns:1fr}.r8356-history-meta .wide{grid-column:auto}.r8356-detail-grid{grid-template-columns:1fr}.r8356-detail-grid>div.wide{grid-column:auto}}