/* =========================================================
   DEWPOINT SHARED CHECKOUT UI
   DP-CHECKOUT-02A

   Presentation ownership for:
   - Regular Booking checkout
   - Open Play checkout

   This module contains NEW semantic checkout classes only.
   Existing checkout markup is not migrated in 02A.
   ========================================================= */


/* ---------------------------------------------------------
   1. CHECKOUT SHELL
   --------------------------------------------------------- */

.dp-checkout-shell{
    width:100%;
    max-width:1180px;
    margin:0 auto;
    color:var(--dp-theme-text);
}

.dp-checkout-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(300px,380px);
    gap:20px;
    align-items:start;
}

.dp-checkout-main,
.dp-checkout-side{
    min-width:0;
}

.dp-checkout-stack{
    display:flex;
    flex-direction:column;
    gap:16px;
}


/* ---------------------------------------------------------
   2. SHARED CARD / SECTION
   --------------------------------------------------------- */

.dp-checkout-card{
    background:#ffffff;
    border:1px solid #d7dee8;
    border-radius:20px;
    overflow:hidden;
    box-shadow:none;
}

.dp-checkout-card-body{
    padding:20px;
}

.dp-checkout-section{
    background:#ffffff;
    border:1px solid #d7dee8;
    border-radius:16px;
    overflow:hidden;
}

.dp-checkout-section-head{
    background:#ffffff;
    color:#1d3557;
    padding:12px 14px;
}

.dp-checkout-section-head small{
    display:block;
    margin:0 0 4px;
    color:#1d3557;
    -webkit-text-fill-color:#1d3557;
    opacity:1;
    filter:none;
    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.dp-checkout-section-head h2,
.dp-checkout-section-head h3{
    margin:0;
    color:#1d3557;
}

.dp-checkout-section-content{
    padding:12px 14px;
}


/* ---------------------------------------------------------
   3. DATE-GROUPED BOOKING DETAILS
   --------------------------------------------------------- */

.dp-checkout-date-group{
    display:flex;
    flex-direction:column;
}

.dp-checkout-date-group + .dp-checkout-date-group{
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid var(--dp-theme-border);
}

.dp-checkout-date{
    margin:0 0 9px;
    color:var(--dp-theme-text);
    font-size:10px;
    font-weight:900;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.dp-checkout-booking-list{
    display:flex;
    flex-direction:column;
}

.dp-checkout-booking-row{
    display:grid;
    grid-template-columns:clamp(96px,18vw,200px) max-content max-content;
    gap:12px;
    align-items:center;
    min-height:42px;
    padding:9px 2px;
    border-bottom:1px solid var(--dp-theme-border);
    justify-content:center;
    column-gap:clamp(8px,2vw,20px);
    width:100%;
}

.dp-checkout-booking-row:last-child{
    border-bottom:0;
}

.dp-checkout-booking-court{
    min-width:0;
    color:#1d3557;
    font-size:12px;
    font-weight:800;
}

.dp-checkout-booking-time{
    color:#1d3557;
    font-size:11px;
}

.dp-checkout-booking-price{
    color:#1d3557;
    font-size:12px;
    font-weight:900;
    text-align:right;
    white-space:nowrap;
}

.dp-checkout-date-total{
    display:flex;
    justify-content:space-between;
    gap:16px;
    margin-top:8px;
    padding-top:10px;
    border-top:1px solid var(--dp-theme-border);
    color:var(--dp-theme-muted);
    font-size:9px;
}

.dp-checkout-date-total strong{
    color:var(--dp-theme-text);
    font-size:10px;
}


/* ---------------------------------------------------------
   4. DISCOUNT / VOUCHER
   --------------------------------------------------------- */

.dp-checkout-discount{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.dp-checkout-choice-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.dp-checkout-choice{
    min-height:42px;
    padding:0 16px;
    border:1px solid #d7dee8;
    border-radius:12px;
    background:#ffffff;
    color:#1d3557;
    font:inherit;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
}

.dp-checkout-choice[aria-pressed="true"],
.dp-checkout-choice.is-selected{
    border:2px solid #1d3557;
    background:#ffffff;
    color:#1d3557;
}

.dp-checkout-voucher{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    align-items:end;
}

.dp-checkout-voucher-field{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.dp-checkout-voucher-field label{
    color:var(--dp-theme-text);
    font-size:9px;
    font-weight:800;
}

.dp-checkout-voucher-field input{
    width:100%;
    min-height:42px;
    border:1px solid var(--dp-theme-border);
    border-radius:var(--dp-theme-radius-md);
    background:var(--dp-theme-surface);
    color:var(--dp-theme-text);
    padding:0 12px;
    font:inherit;
}

.dp-checkout-voucher-message{
    grid-column:1/-1;
    margin:0;
    font-size:8px;
    line-height:1.45;
}

.dp-checkout-voucher-message.is-success{
    color:var(--dp-theme-success-text);
}

.dp-checkout-voucher-message.is-error{
    color:var(--dp-theme-danger-text);
}


/* ---------------------------------------------------------
   5. TERMS AND CONDITIONS
   --------------------------------------------------------- */

.dp-checkout-terms{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.dp-checkout-terms-copy{
    max-height:190px;
    overflow:auto;
    padding:14px;
    border:1px solid #d7dee8;
    border-radius:14px;
    background:#ffffff;
    color:#1d3557;
    font-size:11px;
    line-height:1.6;
    white-space:pre-wrap;
}

.dp-checkout-terms-check{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:4px 0 0;
    color:#1d3557;
    font-size:11px;
    line-height:1.5;
    cursor:pointer;
}

.dp-checkout-terms-check input{
    flex:0 0 auto;
    width:18px;
    height:18px;
    margin:1px 0 0;
}


/* ---------------------------------------------------------
   6. REVIEW ACTIONS
   --------------------------------------------------------- */

.dp-checkout-actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-top:18px;
}

.dp-checkout-button{
    min-height:46px;
    border-radius:12px;
    padding:0 20px;
    font:inherit;
    font-size:11px;
    font-weight:900;
    cursor:pointer;
}

.dp-checkout-button-primary{
    border:1px solid #1d3557;
    background:#ffffff;
    color:#1d3557;
    box-shadow:none;
}

.dp-checkout-button-secondary{
    border:1px solid #1d3557;
    background:#ffffff;
    color:#1d3557;
}

.dp-checkout-button-quiet{
    border:1px solid #d7dee8;
    background:#ffffff;
    color:#1d3557;
}

.dp-checkout-button:disabled{
    opacity:.45;
    cursor:not-allowed;
    box-shadow:none;
}


/* ---------------------------------------------------------
   7. BOOKING SUMMARY
   --------------------------------------------------------- */

.dp-checkout-summary{
    display:flex;
    flex-direction:column;
}

.dp-checkout-summary .dp-checkout-booking-row{
    grid-template-columns:minmax(80px,1fr) minmax(130px,1.2fr) auto;
}


/* ---------------------------------------------------------
   8. AMOUNT DUE
   --------------------------------------------------------- */

.dp-checkout-amount{
    display:flex;
    flex-direction:column;
}

.dp-checkout-amount-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:7px 0;
    color:var(--dp-theme-muted);
    font-size:9px;
}

.dp-checkout-amount-row strong{
    color:var(--dp-theme-text);
    white-space:nowrap;
}

.dp-checkout-amount-row.is-discount strong{
    color:var(--dp-theme-success-text);
}

.dp-checkout-amount-total{
    margin-top:6px;
    padding-top:12px;
    border-top:1px solid var(--dp-theme-border);
    color:var(--dp-theme-text);
    font-size:11px;
    font-weight:900;
}

.dp-checkout-amount-total strong{
    font-size:16px;
}


/* ---------------------------------------------------------
   9. PAYMENT METHODS
   --------------------------------------------------------- */

.dp-checkout-payment-methods{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.dp-checkout-payment-method{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    width:100%;
    min-height:54px;
    padding:12px 14px;
    border:1px solid var(--dp-theme-border);
    border-radius:var(--dp-theme-radius-md);
    background:var(--dp-theme-surface);
    color:var(--dp-theme-text);
    text-align:left;
    cursor:pointer;
}

.dp-checkout-payment-method > span{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.dp-checkout-payment-method b{
    font-size:10px;
}

.dp-checkout-payment-method small{
    color:var(--dp-theme-muted);
    font-size:8px;
}

.dp-checkout-payment-method.is-selected,
.dp-checkout-payment-method[aria-pressed="true"]{
    border:2px solid var(--dp-theme-text);
}


/* ---------------------------------------------------------
   10. PAYMENT DETAILS
   --------------------------------------------------------- */

.dp-checkout-payment-details{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.dp-checkout-detail-row{
    display:flex;
    justify-content:space-between;
    gap:14px;
    font-size:9px;
}

.dp-checkout-detail-row span{
    color:var(--dp-theme-muted);
}

.dp-checkout-detail-row strong{
    color:var(--dp-theme-text);
    text-align:right;
}

.dp-checkout-qr{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    margin-top:4px;
}

.dp-checkout-qr img{
    display:block;
    width:min(220px,100%);
    height:auto;
    border:1px solid var(--dp-theme-border);
    border-radius:var(--dp-theme-radius-md);
    background:var(--dp-theme-surface);
}

.dp-checkout-qr small{
    color:var(--dp-theme-muted);
    font-size:8px;
}


/* ---------------------------------------------------------
   11. RECEIPT / PAYMENT FORM
   --------------------------------------------------------- */

.dp-checkout-payment-form{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.dp-checkout-field{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.dp-checkout-field label{
    color:var(--dp-theme-text);
    font-size:9px;
    font-weight:800;
}

.dp-checkout-field input,
.dp-checkout-field select,
.dp-checkout-field textarea{
    width:100%;
    min-height:42px;
    border:1px solid var(--dp-theme-border);
    border-radius:var(--dp-theme-radius-md);
    background:var(--dp-theme-surface);
    color:var(--dp-theme-text);
    padding:9px 12px;
    font:inherit;
}

.dp-checkout-payment-confirm{
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:var(--dp-theme-text);
    font-size:9px;
    line-height:1.5;
}

.dp-checkout-payment-confirm input{
    width:18px;
    height:18px;
    margin:1px 0 0;
}


/* ---------------------------------------------------------
   12. HOLD / INFORMATION STATES
   --------------------------------------------------------- */

.dp-checkout-hold{
    padding:10px 13px;
    border:1px solid var(--dp-theme-warning);
    border-radius:var(--dp-theme-radius-md);
    background:var(--dp-theme-warning-soft);
    color:var(--dp-theme-warning-text);
    font-size:9px;
    line-height:1.5;
}

.dp-checkout-info{
    padding:10px 13px;
    border-radius:var(--dp-theme-radius-md);
    background:var(--dp-theme-info-soft);
    color:var(--dp-theme-info);
    font-size:9px;
    line-height:1.5;
}


/* ---------------------------------------------------------
   13. SUCCESS
   --------------------------------------------------------- */

.dp-checkout-success{
    max-width:720px;
    margin:0 auto;
    padding:28px;
    border:1px solid var(--dp-theme-border);
    border-radius:var(--dp-theme-radius-lg);
    background:var(--dp-theme-surface);
    color:var(--dp-theme-text);
    text-align:center;
    box-shadow:var(--dp-theme-shadow);
}

.dp-checkout-success-mark{
    display:grid;
    place-items:center;
    width:58px;
    height:58px;
    margin:0 auto 13px;
    border-radius:50%;
    background:var(--dp-theme-success-soft);
    color:var(--dp-theme-success-text);
    font-size:24px;
    font-weight:900;
}

.dp-checkout-success small{
    color:var(--dp-theme-success-text);
    font-size:8px;
    font-weight:900;
    letter-spacing:1px;
}

.dp-checkout-success h2{
    margin:8px 0;
    color:var(--dp-theme-text);
}

.dp-checkout-success p{
    color:var(--dp-theme-muted);
    font-size:9px;
    line-height:1.6;
}


/* ---------------------------------------------------------
   14. RESPONSIVE
   --------------------------------------------------------- */

@media (max-width:900px){

    .dp-checkout-layout{
        grid-template-columns:1fr;
    }

    .dp-checkout-side{
        width:100%;
    }
}

@media (max-width:620px){

    .dp-checkout-card-body,
    .dp-checkout-section-content{
        padding:14px;
    }

    .dp-checkout-section-head{
        padding:13px 14px;
    }

    .dp-checkout-booking-row,
    .dp-checkout-summary .dp-checkout-booking-row{
        grid-template-columns:minmax(72px,.8fr) minmax(120px,1.3fr) auto;
        gap:8px;
    }

    .dp-checkout-booking-court{
        font-size:9px;
    }

    .dp-checkout-booking-time{
        font-size:8px;
    }

    .dp-checkout-booking-price{
        font-size:9px;
    }

    .dp-checkout-voucher{
        grid-template-columns:1fr;
    }

    .dp-checkout-actions{
        flex-direction:column-reverse;
        align-items:stretch;
    }

    .dp-checkout-button{
        width:100%;
    }
}

@media (max-width:420px){

    .dp-checkout-booking-row,
    .dp-checkout-summary .dp-checkout-booking-row{
        grid-template-columns:minmax(64px,.72fr) minmax(105px,1.25fr) auto;
        gap:6px;
    }

    .dp-checkout-date{
        font-size:9px;
    }
}

/* =========================================================
   DP-CHECKOUT-02C1
   OPEN PLAY VISUAL ALIGNMENT
   ========================================================= */