/* ============================================================
   DEWPOINT — OPEN PLAY CHECKOUT / PAYMENT / SUCCESS

   Owns:
   - Open Play court selection presentation
   - Open Play details/review presentation
   - Open Play checkout/payment presentation
   - Open Play payment QR presentation
   - Open Play success presentation
   - Open Play responsive/mobile clearance

   Extracted from dewpoint-app.css.
   Component-owned CSS. No override layer.
   ============================================================ */

/* =========================================================
   OPEN PLAY CHECKOUT — COURT BOOKING STYLE
   ========================================================= */

.openplay-checkout-page,
.openplay-select-stage{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.openplay-grid-scroll{
  overflow-x:auto;
  padding-bottom:4px;
}

.openplay-schedule-grid{
  display:grid;
  min-width:680px;
  gap:7px;
  align-items:stretch;
}

.openplay-grid-head{
  background: #ffffff;
  border-radius:12px;
  padding:12px 8px;
  text-align:center;
  font-size:13px;
  font-weight:800;
  color: #1d3557;
}

.openplay-grid-head.time{
  color: #1d3557;
}

.openplay-slot-time{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:58px;
  color: #1d3557;
  font-size:13px;
}

.openplay-slot{
  border:1px solid #d7dee8;
  border-radius:13px;
  min-height:58px;
  padding:8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  background: #ffffff;
  cursor:pointer;
}

.openplay-slot b{
  font-size:12px;
}

.openplay-slot small{
  font-size:10px;
  color: #1d3557;
}

.openplay-slot.available:hover{
  border-color:#d7dee8;
  background: #ffffff;
}

.openplay-slot.picked{
  color: #1d3557;
  border-color:transparent;
  background: #ffffff;
  box-shadow: none;

    border: 2px solid #1d3557;}

.openplay-slot.picked small,
.openplay-slot.picked b{
  color: #1d3557;
}

.openplay-slot.unavailable{
  opacity:.42;
  cursor:not-allowed;
  background: #ffffff;
}

.openplay-details-form{
  margin-bottom:96px;
}

.openplay-form-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}

.openplay-form-grid label,
.openplay-message-field{
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:12px;
  font-weight:700;
  color: #1d3557;
}

.openplay-form-grid input,
.openplay-form-grid select,
.openplay-message-field textarea{
  border:1px solid #d7dee8;
  border-radius:12px;
  padding:11px 12px;
  background: #ffffff;
  color: #1d3557;
}

.openplay-message-field{
  margin-top:14px;
}

.openplay-message-field textarea{
  min-height:92px;
  resize:vertical;
}

.openplay-floating-summary{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  width:min(900px,calc(100% - 42px));
  z-index:30;
  background: #ffffff;
  border:1px solid #d7dee8;
  box-shadow: none;
  border-radius:22px;
  padding:14px 16px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:16px;
  align-items:center;
}

.openplay-floating-summary > div:first-child{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.openplay-floating-summary small{
  font-size:10px;
  letter-spacing:.09em;
  color: #1d3557;
}

.openplay-floating-summary b{
  color: #1d3557;
}

.openplay-floating-summary span,
.openplay-floating-summary em{
  font-size:11px;
  color: #1d3557;
  font-style:normal;
}

.openplay-floating-total{
  text-align:right;
}

.openplay-floating-total strong{
  display:block;
  font-size:22px;
  color: #1d3557;
}

.openplay-floating-summary > button,
.openplay-continue-button,
.openplay-confirm-booking{
  border:0;
  background: #ffffff !important;
  color: #1d3557 !important;
}

.openplay-review-layout,
.openplay-payment-layout{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr);
  gap:18px;
  align-items:start;
}

.openplay-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:15px 0 24px;
}

.openplay-detail-grid article{
  border:1px solid #d7dee8;
  background: #ffffff;
  border-radius:14px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.openplay-detail-grid article small{
  font-size:10px;
  letter-spacing:.08em;
  color: #1d3557;
}

.openplay-detail-grid article b{
  color: #1d3557;
}

.openplay-detail-grid article span{
  color: #1d3557;
  font-size:12px;
}

.openplay-checkout-lines{
  margin:14px 0 24px;
}

.openplay-payment-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:14px 0 22px;
}

.openplay-payment-options button{
  position:relative;
  min-height:82px;
  border:1px solid #d7dee8;
  border-radius:14px;
  background: #ffffff;
  text-align:left;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.openplay-payment-options button.active{
  border: 2px solid #1d3557;
  background: #ffffff;

    color: #1d3557;}

.openplay-payment-options button:disabled{
  opacity:.42;
}

.openplay-payment-options button i{
  position:absolute;
  right:12px;
  top:12px;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background: #ffffff;
  color: #1d3557;
  font-style:normal;
}

.openplay-owner-account{
  margin:14px 0 22px;
  padding:14px;
  border:2px solid #d7dee8;
  border-radius:14px;
  background: #ffffff;
  display:grid;
  grid-template-columns:42px 1fr auto;
  align-items:center;
  gap:12px;
}

.openplay-owner-account > span{
  width:38px;
  height:38px;
  border-radius:12px;
  background: #ffffff;
  color: #1d3557;
  display:grid;
  place-items:center;
  font-weight:900;
}

.openplay-owner-account div{
  display:flex;
  flex-direction:column;
}

.openplay-owner-account small{
  color: #1d3557;
}

.openplay-owner-account i{
  color: #1d3557;
  font-style:normal;
  font-size:20px;
}

.openplay-terms,
.openplay-final-confirm{
  display:flex;
  align-items:flex-start;
  gap:11px;
  border: 1px solid #d7dee8;
  border-radius:14px;
  padding:14px;
  background: #ffffff;
  margin:10px 0 16px;
  cursor:pointer;
}

.openplay-terms input,
.openplay-final-confirm input{
  margin-top:3px;
  width:18px;
  height:18px;
  accent-color:#1d3557;
}

.openplay-terms span,
.openplay-final-confirm span{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.openplay-terms small,
.openplay-final-confirm small{
  color: #1d3557;
}

.openplay-continue-button,
.openplay-confirm-booking{
  width:100%;
  min-height:48px;
  border-radius:13px;
  font-size:14px;
  font-weight:800;
}

.openplay-review-side{
  position:sticky;
  top:92px;
}

.openplay-review-message{
  border-top:1px solid #d7dee8;
  margin-top:13px;
  padding-top:13px;
}

.openplay-review-message small{
  font-size:10px;
  letter-spacing:.08em;
  color: #1d3557;
}

.openplay-review-message p{
  margin:6px 0 0;
  line-height:1.5;
  color: #1d3557;
}

.openplay-checkout-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
}

.openplay-hold-clock{
  padding:10px 16px;
  border-radius:14px;
  background: #ffffff;
  display:grid;
  grid-template-columns:auto auto;
  column-gap:9px;
  align-items:center;

    border: 1px solid #d7dee8;}

.openplay-hold-clock small{
  grid-column:1/-1;
  font-size:9px;
  letter-spacing:.1em;
  color: #1d3557;
}

.openplay-hold-clock b{
  font-size:22px;
  color: #1d3557;
}

.openplay-hold-clock span{
  font-size:11px;
  color: #1d3557;
}

.openplay-hold-clock.urgent{
  background: #ffffff;

    border: 1px solid #1d3557;}

.openplay-hold-clock.urgent b{
  color: #1d3557;
}

.openplay-payment-summary{
  position:sticky;
  top:92px;
}

.openplay-success-page{
  max-width:720px;
  margin:20px auto;
}

.openplay-success-card{
  text-align:center;
  padding:42px 32px!important;

    background: #ffffff;}

.openplay-success-card .success-check{
  width:64px;
  height:64px;
  margin:0 auto 16px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background: #ffffff;
  color: #1d3557;
  font-size:32px;
  font-weight:900;

    border: 2px solid #1d3557;}

.openplay-success-card h2{
  color: #1d3557;
  font-size:28px;
  margin:7px 0 8px;
}

.openplay-success-card p{
  max-width:520px;
  margin:0 auto;
  color: #1d3557;
  line-height:1.55;
}

.openplay-success-details{
  margin:22px auto 0;
  max-width:440px;
  border: 1px solid #d7dee8;
  border-radius:15px;
  background: #ffffff;
  padding:15px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

@media(max-width:900px){
  .openplay-form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .openplay-review-layout,
  .openplay-payment-layout{
    grid-template-columns:1fr;
  }

  .openplay-review-side,
  .openplay-payment-summary{
    position:static;
  }
}

@media(max-width:700px){
  .openplay-detail-grid,
  .openplay-payment-options{
    grid-template-columns:1fr;
  }

  .openplay-form-grid{
    grid-template-columns:1fr 1fr;
  }

  .openplay-floating-summary{
    bottom:76px;
    width:calc(100% - 20px);
    grid-template-columns:1fr auto;
    gap:8px 12px;
    border-radius:18px;
    padding:12px;
  }

  .openplay-floating-summary > button{
    grid-column:1/-1;
    width:100%;
    min-height:43px;
  }

  .openplay-floating-total strong{
    font-size:19px;
  }

  .openplay-details-form{
    margin-bottom:170px;
  }

  .openplay-checkout-top{
    align-items:flex-start;
    flex-direction:column;
  }

  .openplay-hold-clock{
    width:100%;
  }
}

/* ========================================================
   OPEN PLAY — REORDERED FLOW
   ======================================================== */

.openplay-details-first{
  max-width:960px;
  margin:0 auto;
}

.openplay-details-first-card{
  padding:26px!important;
}

.openplay-form-grid-first{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.openplay-details-continue{
  width:100%;
  margin-top:18px;
  min-height:48px;
  border-radius:13px;
  background: #ffffff !important;
  color: #1d3557 !important;
}

/* DATE STRIP
   Visual owner matched to Regular Booking calendar.
   --------------------------------------------------------- */

.openplay-date-strip{
    display:flex;
    gap:8px;
    width:100%;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    padding:4px 4px 6px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}

.openplay-date-strip::-webkit-scrollbar{
    display:none;
}


.openplay-date-card{
    flex:0 0 92px;
    width:92px;
    min-width:92px;
    max-width:92px;

    height:78px;
    min-height:78px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:0;
    padding:8px 5px;

    border:
        1px solid
        rgba(118,104,210,.20);

    border-radius:13px;

    background:
        linear-gradient(
            145deg,
            #091838,
            #111834
        );

    color:#ffffff;

    cursor:pointer;

    scroll-snap-align:start;

    box-shadow:none;

    transition:
        border-color .15s,
        background .15s,
        transform .15s,
        box-shadow .15s;
}


.openplay-date-card:hover{
    border-color:
        rgba(160,136,255,.45);

    transform:
        translateY(-1px);
}


.openplay-date-card small{
    display:block;

    color:#a8b4d8;

    font-size:10px;
    font-weight:900;
    letter-spacing:.5px;
    line-height:1.1;

    text-transform:uppercase;
    white-space:nowrap;
}


.openplay-date-card strong{
    display:block;

    margin:3px 0;

    color:#ffffff;

    font-size:24px;
    font-weight:900;
    line-height:1;

    visibility:visible;
    opacity:1;
}


.openplay-date-card span{
    display:block;

    color:#a8b4d8;

    font-size:10px;
    font-weight:700;
    line-height:1;

    opacity:.82;
}


.openplay-date-card.active{
    color:#ffffff;

    border-color:#a653ff;

    background:
        linear-gradient(
            135deg,
            #7b25ec,
            #276df5
        );

    box-shadow:
        0 7px 22px
        rgba(114,53,239,.28);

    transform:none;
}


.openplay-date-card.active small,
.openplay-date-card.active strong,
.openplay-date-card.active span{
    color:#ffffff;
}


@media(max-width:700px){

    .openplay-date-strip{
        gap:8px;
        padding:4px 4px 6px;
    }

    .openplay-date-card{
        flex:0 0 72px;

        width:72px;
        min-width:72px;
        max-width:72px;

        height:76px;
        min-height:76px;

        padding:8px 5px;
    }

    .openplay-date-card small{
        font-size:8px;
        line-height:1.1;
    }

    .openplay-date-card strong{
        margin:4px 0 3px;

        font-size:21px;
        line-height:1;
    }

    .openplay-date-card span{
        font-size:8px;
        line-height:1;
    }
}

/* PAYMENT */

.openplay-payment-selected{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin:18px 0;
  padding:18px;
  border: 1px solid #d7dee8;
  border-radius:16px;
  background: #ffffff;
  text-align:center;
}

.openplay-payment-selected h3{
  margin:0;
  color: #1d3557;
}

.openplay-payment-qr{
  width:min(230px,80%);
  max-height:230px;
  object-fit:contain;
  border-radius:14px;
  background: #ffffff;
  border: 1px solid #d7dee8;
  padding:8px;
}

.openplay-proof-upload{
  border-top:1px solid #d7dee8;
  padding-top:18px;
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.openplay-proof-upload label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  font-weight:700;
}

.openplay-proof-upload input{
  border:1px solid #d7dee8;
  border-radius:12px;
  padding:11px 12px;
}

.openplay-upload-button{
  display:inline-flex!important;
  width:max-content;
  border: 1px solid #1d3557;
  border-radius:12px;
  padding:10px 14px;
  color: #1d3557;
  cursor:pointer;
  font-weight:800!important;

    background: #ffffff;}

.openplay-upload-button input{
  display:none;
}

.openplay-receipt-preview{
  width:min(320px,100%);
  max-height:320px;
  object-fit:contain;
  border:1px solid #d7dee8;
  border-radius:14px;
  background: #ffffff;
  padding:6px;
}

@media(max-width:800px){
  .openplay-form-grid-first{
    grid-template-columns:1fr 1fr;
  }

  .openplay-date-card{
    flex-basis:68px;
    min-width:68px;
  }
}

@media(max-width:560px){
  .openplay-form-grid-first{
    grid-template-columns:1fr;
  }

  .openplay-details-first-card{
    padding:18px!important;
  }
}

/* ===== CREATE OPEN PLAY � MOBILE BOTTOM NAV CLEARANCE ===== */
@media (max-width: 560px) {
    .openplay-details-first {
        padding-bottom: 105px;
    }

    .openplay-details-first-card {
        margin-bottom: 8px;
    }

    .openplay-details-continue {
        margin-bottom: 6px;
    }
}