/* =====================================================
   ABSi UI Framework v1.0
   SOLO-GYM
   -----------------------------------------------------
   - Design Tokens
   - Base
   - Card
   - Header
   - Typography
   - PIN
===================================================== */


/* =====================================================
   DESIGN TOKENS
===================================================== */

:root{

    --solo-primary:#111;
    --solo-secondary:#777;

    --solo-text:#222;
    --solo-text-light:#666;

    --solo-border:#ececec;

    --solo-background:#fff;
    --solo-background-alt:#fafafa;

    --solo-radius-sm:10px;
    --solo-radius-md:14px;
    --solo-radius-lg:20px;

    --solo-shadow:
        0 8px 24px rgba(0,0,0,.10);

}


/* =====================================================
   BASE
===================================================== */

*,
*::before,
*::after{

    box-sizing:border-box;

}

img{

    max-width:100%;
    height:auto;

}

strong{

    font-weight:700;

}

/* =====================================================
   Reservation Page
===================================================== */

.page-id-2226 .entry-header{

    display:none;

}

/* =====================================================
   CARD
===================================================== */

.solo-gym-card{

    max-width:460px;

    margin:30px auto 40px;

    padding:35px;

    background:var(--solo-background);

    border-radius:var(--solo-radius-lg);

    box-shadow:var(--solo-shadow);

}

.solo-gym-card:hover{

    transform:translateY(-2px);

    transition:.20s ease;

}


/* =====================================================
   HEADER
===================================================== */

.solo-gym-header{

    text-align:center;

    margin-bottom:30px;

}

.solo-gym-logo{

    display:block;

    width:200px;

    max-width:100%;

    margin:0 auto;

}


/* =====================================================
   PAGE HEADER
===================================================== */

.solo-gym-page-header{

    max-width:760px;

    margin:40px auto 50px;

    padding:0 20px;

    text-align:center;

}

.solo-gym-page-title{

    margin:0 0 18px;

    color:#d7a100;

    font-size:clamp(34px,5vw,56px);

    font-weight:700;

    line-height:1.1;

    text-transform:uppercase;

}

.solo-gym-page-subtitle{

    ax-width:620px;

    margin:0 auto;

    font-size:22px;

    line-height:1.6;

    color:#cfcfcf;

}

/* =====================================================
   TYPOGRAPHY
===================================================== */

.solo-gym-section{

    margin-bottom:18px;

    font-size:14px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:var(--solo-secondary);

}

.solo-gym-primary{

    font-size:18px;

    font-weight:600;

    color:var(--solo-text);

}

.solo-gym-secondary{

    font-size:14px;

    color:var(--solo-text-light);

}

.solo-gym-center{

    text-align:center;

}


/* =====================================================
   PIN
===================================================== */

.solo-gym-pin-title{

    text-align:center;

    margin-bottom:18px;

}

.solo-gym-pin{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    min-height:100px;

    margin:24px 0 34px;

    padding:18px;

    background:var(--solo-primary);

    border-radius:18px;

}

.solo-gym-pin-value{

    color:#fff;

    font-family:
        "Roboto Mono",
        Consolas,
        monospace;

    font-size:clamp(34px,8vw,52px);

    font-weight:700;

    line-height:1;

    white-space:nowrap;

    letter-spacing:.04em;

}

/* =====================================================
   INSTRUCTION-CARD PIN
===================================================== */

.solo-gym-instruction-pin{

    display:table;

    margin:26px auto 32px;

    padding:12px 24px;

    background:#f5f5f5;

    border:1px solid var(--solo-border);

    border-radius:12px;

    font-family:
        "Roboto Mono",
        Consolas,
        monospace;

    font-size:34px;

    font-weight:700;

    color:var(--solo-primary);

}

/* =====================================================
   HELP CARD
===================================================== */

.solo-gym-help p{

    margin:0 0 24px;

    line-height:1.7;

    color:var(--solo-text);

}

/* =====================================================
   MOBILE PIN FALLBACK
===================================================== */

@media (max-width:640px){

    .solo-gym-pin-fallback{

        background:none !important;

        min-height:auto;

        margin:18px 0 26px;

        padding:0;

        border:none;

        box-shadow:none;

    }

    .solo-gym-pin-fallback svg{

        display:none;

    }

    .solo-gym-pin-fallback .solo-gym-pin-value{

        position:static;

        color:var(--solo-primary);

        font-size:42px;

    }

}

/* =====================================================
   DIVIDER
===================================================== */

.solo-gym-divider{

    margin:32px 0;

    border:0;

    border-top:1px solid var(--solo-border);

}


/* =====================================================
   ROW
===================================================== */

.solo-gym-row{

    display:flex;

    align-items:flex-start;

    gap:18px;

    margin-bottom:18px;

}

.solo-gym-row:last-child{

    margin-bottom:0;

}

.solo-gym-row-text{

    flex:1;

    line-height:1.5;

    font-size:15px;

    color:var(--solo-text);

}


/* =====================================================
   ICON
===================================================== */

.solo-gym-icon{

    display:flex;

    justify-content:center;

    align-items:center;

    width:24px;

    min-width:24px;

    font-size:20px;

    line-height:1;

    color:var(--solo-secondary);

}


/* =====================================================
   ORDER SUMMARY
===================================================== */

.solo-gym-order-summary{

    margin-top:32px;

}


/* =====================================================
   SUMMARY ROW
===================================================== */

.solo-gym-summary-row{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    padding:14px 0;

    border-bottom:1px solid var(--solo-border);

}

.solo-gym-summary-row:last-child{

    border-bottom:none;

}

.solo-gym-summary-row span{

    color:var(--solo-text-light);

    line-height:1.45;

}

.solo-gym-summary-row strong{

    color:var(--solo-text);

    font-weight:700;

    white-space:nowrap;

}


/* =====================================================
   SUMMARY TOTAL
===================================================== */

.solo-gym-summary-total{

    margin-top:18px;

    padding-top:20px;

    border-top:2px solid var(--solo-border);

    font-size:18px;

}

.solo-gym-summary-total span{

    color:var(--solo-text);

    font-weight:600;

}

.solo-gym-summary-total strong{

    font-size:20px;

}


/* =====================================================
   BUTTON
===================================================== */

.solo-gym-button{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    padding:14px 22px;

    border:none;

    border-radius:var(--solo-radius-sm);

    background:var(--solo-primary);

    color:#fff;

    text-decoration:none;

    font-weight:600;

    cursor:pointer;

    transition:.2s ease;

}

.solo-gym-button:hover{

    opacity:.88;

}

.solo-gym-button:focus{

    outline:2px solid #555;

    outline-offset:3px;

}


/* =====================================================
   PDF BUTTON
===================================================== */

.solo-gym-pdf-button{

    display:inline-flex;

    justify-content:center;

    align-items:center;

}

.solo-gym-pdf-button{

    all:unset;

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:14px 22px;

    background:var(--solo-primary);

    color:#fff;

    border-radius:var(--solo-radius-sm);

    cursor:pointer;

    font-weight:600;

}


/* =====================================================
   QR PLACEHOLDER
===================================================== */

.solo-gym-qr-placeholder{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:180px;

    border:2px dashed var(--solo-border);

    border-radius:var(--solo-radius-md);

    background:var(--solo-background-alt);

    color:var(--solo-secondary);

    font-size:14px;

}


/* =====================================================
   SPACING
===================================================== */

.solo-gym-mt{

    margin-top:20px;

}

.solo-gym-mb{

    margin-bottom:20px;

}

/* =====================================================
   INSTRUCTION CARD
===================================================== */

.solo-gym-instructions{

    margin-top:32px;

}

.solo-gym-keyboard{

    display:block;

    width:220px;

    max-width:100%;

    margin:10px auto 30px;

}

.solo-gym-instruction-list{

    margin:0;

    padding-left:22px;

    line-height:1.8;

    color:var(--solo-text);

}

.solo-gym-instruction-list li{

    margin-bottom:10px;

}

.solo-gym-instruction-list strong{

    color:var(--solo-primary);

}


/* =====================================================
   HELP CARD
===================================================== */

.solo-gym-help{

    margin-top:32px;

}

.solo-gym-help p{

    margin:0 0 14px;

    line-height:1.6;

}

.solo-gym-help a{

    color:var(--solo-primary);

    text-decoration:none;

}

.solo-gym-help a:hover{

    text-decoration:underline;

}


/* =====================================================
   BADGE
===================================================== */

.solo-gym-badge{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:4px 10px;

    border-radius:999px;

    background:#f3f3f3;

    color:var(--solo-primary);

    font-size:12px;

    font-weight:600;

}


/* =====================================================
   ALERT
===================================================== */

.solo-gym-alert{

    margin:20px 0;

    padding:16px 18px;

    border-radius:var(--solo-radius-md);

    background:#f8f8f8;

    border-left:4px solid var(--solo-primary);

    line-height:1.5;

}


/* =====================================================
   FOOTER
===================================================== */

.solo-gym-footer{

    margin-top:40px;

    text-align:center;

    color:var(--solo-secondary);

    font-size:14px;

    line-height:1.6;

}

.solo-gym-footer a{

    color:inherit;

    text-decoration:none;

}

.solo-gym-footer a:hover{

    text-decoration:underline;

}


/* =====================================================
   UTILITIES
===================================================== */

.solo-gym-hidden{

    display:none !important;

}

.solo-gym-text-left{

    text-align:left;

}

.solo-gym-text-center{

    text-align:center;

}

.solo-gym-text-right{

    text-align:right;

}

.solo-gym-w-100{

    width:100%;

}

.solo-gym-flex{

    display:flex;

}

.solo-gym-flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.solo-gym-gap-sm{

    gap:10px;

}

.solo-gym-gap{

    gap:20px;

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width:768px){

    .solo-gym-card{

        margin:24px auto;

        padding:24px;

    }

    .solo-gym-summary-row{

        gap:12px;

    }

    .solo-gym-keyboard{

        width:180px;

    }

}

@media (max-width:480px){

    .solo-gym-card{

        padding:20px;

        border-radius:16px;

    }

    .solo-gym-pin{

        min-height:82px;

        margin:20px 0 28px;

    }

    .solo-gym-pin-value{

        font-size:34px;

    }

    .solo-gym-row{

        gap:14px;

    }

    .solo-gym-summary-row{

        flex-direction:column;

        align-items:flex-start;

    }

    .solo-gym-summary-row strong{

        align-self:flex-end;

    }

    .solo-gym-keyboard{

        width:160px;

    }

}