/*
|--------------------------------------------------------------------------
| ROOT
|--------------------------------------------------------------------------
*/

#onu-bookings-app{
    padding:
        10px
        12px
        110px;

    max-width:760px;
    margin:auto;
}

/*
|--------------------------------------------------------------------------
| SHELL
|--------------------------------------------------------------------------
*/

.onu-booking-shell{
    display:flex;
    flex-direction:column;
    gap:14px;
}

/*
|--------------------------------------------------------------------------
| CARD
|--------------------------------------------------------------------------
*/

.onu-booking-card{

    background:
        rgba(255,255,255,.72);

    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);

    border:
        1px solid rgba(255,255,255,.45);

    border-radius:30px;

    padding:18px;

    box-shadow:
        0 10px 30px rgba(15,23,42,.05);
}

/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/

.onu-booking-head{

    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    gap:12px;

    margin-bottom:18px;
}

.onu-booking-kicker{

    font-size:11px;
    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#64748b;

    margin-bottom:4px;
}

.onu-title{

    font-size:26px;
    font-weight:800;

    line-height:1.1;

    color:#0f172a;
}

.onu-booking-badge{

    background:
        rgba(236,254,255,.85);

    color:#0369a1;

    border-radius:999px;

    padding:8px 12px;

    font-size:11px;
    font-weight:800;

    white-space:nowrap;
}

/*
|--------------------------------------------------------------------------
| SECTION
|--------------------------------------------------------------------------
*/

.onu-section{
    margin-bottom:18px;
}

.onu-section-label{

    font-size:12px;
    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.05em;

    color:#475569;

    margin-bottom:10px;
}

/*
|--------------------------------------------------------------------------
| INPUTS
|--------------------------------------------------------------------------
*/

.onu-input{

    width:100%;

    min-height:50px;

    border:none;

    border-radius:18px;

    padding:0 16px;

    background:
        rgba(248,250,252,.92);

    color:#0f172a;

    font-size:14px;
    font-weight:500;

    outline:none;

    transition:.18s ease;

    border:
        1px solid rgba(220,230,240,.7);

    margin-bottom:12px;
}

.onu-input:focus{

    border-color:#38bdf8;

    box-shadow:
        0 0 0 4px rgba(14,165,233,.08);
}

.onu-textarea{

    min-height:110px;

    padding-top:14px;

    resize:vertical;
}

.onu-field-label{

    font-size:12px;
    font-weight:700;

    color:#64748b;

    margin-bottom:8px;
}

/*
|--------------------------------------------------------------------------
| GRID
|--------------------------------------------------------------------------
*/

.onu-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;
}

/*
|--------------------------------------------------------------------------
| CLIENT
|--------------------------------------------------------------------------
*/

.onu-client-result{

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:12px;

    padding:14px;

    border-radius:20px;

    background:
        rgba(248,250,252,.9);

    border:
        1px solid rgba(226,232,240,.8);

    margin-bottom:10px;

    cursor:pointer;

    transition:.18s ease;
}

.onu-client-result:active{
    transform:scale(.985);
}

.onu-client-name{

    font-size:14px;
    font-weight:800;

    color:#0f172a;
}

.onu-client-phone{

    margin-top:4px;

    font-size:12px;

    color:#64748b;
}

.onu-selected-owner{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:14px;

    border-radius:22px;

    background:
        linear-gradient(
            180deg,
            #0f172a,
            #1e293b
        );

    color:white;
}

/*
|--------------------------------------------------------------------------
| PETS + SERVICES
|--------------------------------------------------------------------------
*/

.onu-pet-card,
.onu-service-card{

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:12px;

    padding:14px;

    border-radius:22px;

    background:
        rgba(248,250,252,.92);

    border:
        1px solid rgba(226,232,240,.8);

    margin-bottom:10px;

    cursor:pointer;

    transition:.18s ease;
}

.onu-pet-card:active,
.onu-service-card:active{

    transform:scale(.985);
}

.onu-pet-card.active,
.onu-service-card.active{

    background:
        linear-gradient(
            180deg,
            #0284c7,
            #0369a1
        );

    color:white;

    border-color:#0284c7;
}

.onu-pet-card input{
    display:none;
}

.onu-pet-name,
.onu-service-name{

    font-size:14px;
    font-weight:800;
}

.onu-pet-meta,
.onu-service-meta{

    margin-top:4px;

    font-size:12px;

    color:#64748b;
}

.onu-pet-card.active .onu-pet-meta,
.onu-service-card.active .onu-service-meta{

    color:
        rgba(255,255,255,.82);
}

/*
|--------------------------------------------------------------------------
| PREVIEW
|--------------------------------------------------------------------------
*/

.onu-service-preview{

    background:
        rgba(248,250,252,.92);

    border:
        1px solid rgba(226,232,240,.8);

    border-radius:24px;

    padding:16px;

    margin-top:8px;
}

.onu-preview-title{

    font-size:13px;
    font-weight:800;

    margin-bottom:12px;

    color:#0f172a;
}

.onu-preview-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

    font-size:13px;

    color:#475569;
}

/*
|--------------------------------------------------------------------------
| ACTION
|--------------------------------------------------------------------------
*/

.onu-submit{

    width:100%;

    min-height:52px;

    border:none;

    border-radius:22px;

    background:
        linear-gradient(
            180deg,
            #0ea5e9,
            #0284c7
        );

    color:white;

    font-size:15px;
    font-weight:800;

    margin-top:14px;

    box-shadow:
        0 12px 30px rgba(2,132,199,.22);
}

.onu-submit:disabled{
    opacity:.7;
}

/*
|--------------------------------------------------------------------------
| STATES
|--------------------------------------------------------------------------
*/

.onu-success,
.onu-error{

    margin-top:14px;

    padding:14px;

    border-radius:20px;

    font-size:13px;
    font-weight:700;
}

.onu-success{

    background:
        rgba(236,254,255,.9);

    color:#0369a1;
}

.onu-error{

    background:
        rgba(254,242,242,.9);

    color:#b91c1c;
}

.onu-success-title{
    font-weight:800;
}

.onu-success-number{
    margin-top:4px;
    opacity:.8;
}

/*
|--------------------------------------------------------------------------
| EMPTY
|--------------------------------------------------------------------------
*/

.onu-empty{

    padding:14px;

    font-size:13px;

    color:#64748b;
}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media(max-width:640px){

    #onu-bookings-app{

        padding:
            8px
            10px
            110px;
    }

    .onu-grid{
        grid-template-columns:1fr;
    }

    .onu-title{
        font-size:22px;
    }

    .onu-booking-card{
        padding:16px;
    }

    .onu-preview-grid{
        grid-template-columns:1fr;
    }
}