/*
====================================================

    FLOWMANAGER

    MY RESERVATIONS

====================================================
*/


/* ====================================================
   CONTAINER
==================================================== */

.fm-my-reservations {

    width:
        100%;

    max-width:
        1100px;

    margin:
        0 auto;

    padding:
        8px 0 40px;

}


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

.fm-my-reservations-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        26px;

}


.fm-my-reservations-header>div:first-child {

    min-width:
        0;

}


.fm-my-reservations-header-icon {

    width:
        52px;

    height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    border-radius:
        16px;

    background:
        rgba(139,
            92,
            246,
            .14);

    color:
        #8b5cf6;

}


.fm-my-reservations-header-icon .material-symbols-outlined {

    font-size:
        28px;

}


.fm-my-reservations-header h1 {

    margin:
        0;

    font-size:
        30px;

    line-height:
        1.1;

    font-weight:
        700;

    color:
        var(--fm-text-primary,
            var(--fm-text,
                #1e293b));

}


.fm-my-reservations-header p {

    margin:
        6px 0 0;

    color:
        var(--fm-text-muted,
            #94a3b8);

    font-size:
        14px;

}


/* ====================================================
   SECTION
==================================================== */

.fm-my-reservations-section {

    margin-bottom:
        30px;

}


.fm-my-reservations-section-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        15px;

}


.fm-my-reservations-section-header>div {

    min-width:
        0;

}


.fm-my-reservations-section-header h2 {

    margin:
        0;

    font-size:
        20px;

    line-height:
        1.2;

    font-weight:
        700;

    color:
        var(--fm-text-primary,
            var(--fm-text,
                #1e293b));

}


.fm-my-reservations-section-header p {

    margin:
        5px 0 0;

    font-size:
        13px;

    color:
        var(--fm-text-muted,
            #94a3b8);

}


/* ====================================================
   NUEVA RESERVACIÓN
==================================================== */

.fm-my-reservations-new {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    flex-shrink:
        0;

    border:
        1px solid rgba(139,
            92,
            246,
            .20);

    border-radius:
        11px;

    padding:
        10px 15px;

    cursor:
        pointer;

    font:
        inherit;

    font-size:
        13px;

    font-weight:
        700;

    background:
        #8b5cf6;

    color:
        #ffffff;

    box-shadow:
        0 6px 16px rgba(139,
            92,
            246,
            .18);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;

}


.fm-my-reservations-new:hover {

    transform:
        translateY(-1px);

    filter:
        brightness(1.06);

    box-shadow:
        0 9px 20px rgba(139,
            92,
            246,
            .22);

}


.fm-my-reservations-new:active {

    transform:
        translateY(0);

}


.fm-my-reservations-new .material-symbols-outlined {

    font-size:
        19px;

}


/* ====================================================
   LIST
==================================================== */

.fm-my-reservations-list {

    display:
        grid;

    grid-template-columns:
        repeat(auto-fit,
            minmax(290px,
                1fr));

    gap:
        15px;

}


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

.fm-my-reservation-card {

    position:
        relative;

    overflow:
        hidden;

    min-width:
        0;

    background:
        var(--fm-surface,
            var(--fm-card,
                #ffffff));

    border:
        1px solid var(--fm-border,
            #e2e8f0);

    border-radius:
        17px;

    padding:
        16px;

    box-shadow:
        0 6px 18px rgba(15,
            23,
            42,
            .055);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;

}


.fm-my-reservation-card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    right:
        0;

    height:
        3px;

    background:
        #8b5cf6;

    opacity:
        .82;

}


.fm-my-reservation-card:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(139,
            92,
            246,
            .22);

    box-shadow:
        0 12px 26px rgba(15,
            23,
            42,
            .09);

}


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

.fm-my-reservation-card-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        17px;

}


.fm-my-reservation-activity {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    min-width:
        0;

}


.fm-my-reservation-activity .material-symbols-outlined {

    width:
        39px;

    height:
        39px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    border-radius:
        11px;

    background:
        rgba(139,
            92,
            246,
            .11);

    color:
        #8b5cf6;

}


.fm-my-reservation-title {

    min-width:
        0;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        16px;

    line-height:
        1.25;

    font-weight:
        700;

    color:
        var(--fm-text-primary,
            var(--fm-text,
                #1e293b));

}


/* ====================================================
   STATUS
==================================================== */

.fm-my-reservation-status {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    padding:
        6px 9px;

    border-radius:
        999px;

    font-size:
        11px;

    line-height:
        1;

    font-weight:
        700;

}


.fm-my-reservation-status.reserved {

    background:
        rgba(34,
            197,
            94,
            .11);

    color:
        #16a34a;

}


.fm-my-reservation-status.completed {

    background:
        rgba(59,
            130,
            246,
            .11);

    color:
        #2563eb;

}


.fm-my-reservation-status.cancelled {

    background:
        rgba(239,
            68,
            68,
            .11);

    color:
        #dc2626;

}


/* ====================================================
   DETAILS
==================================================== */

.fm-my-reservation-details {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


.fm-my-reservation-detail {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    min-width:
        0;

    color:
        var(--fm-text,
            #334155);

    font-size:
        13px;

}


.fm-my-reservation-detail span:last-child {

    min-width:
        0;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


.fm-my-reservation-detail .material-symbols-outlined {

    flex-shrink:
        0;

    font-size:
        18px;

    color:
        var(--fm-text-muted,
            #94a3b8);

}


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

.fm-my-reservation-card-footer {

    margin-top:
        16px;

    padding-top:
        13px;

    border-top:
        1px solid var(--fm-border,
            #e2e8f0);

}


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

.fm-my-reservation-cancel {

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        10px 13px;

    border:
        1px solid rgba(239,
            68,
            68,
            .25);

    border-radius:
        10px;

    cursor:
        pointer;

    background:
        rgba(239,
            68,
            68,
            .035);

    color:
        #dc2626;

    font:
        inherit;

    font-size:
        13px;

    font-weight:
        700;

    transition:
        background .18s ease,
        border-color .18s ease;

}


.fm-my-reservation-cancel:hover {

    background:
        rgba(239,
            68,
            68,
            .08);

    border-color:
        rgba(239,
            68,
            68,
            .4);

}


.fm-my-reservation-cancel:disabled {

    opacity:
        .6;

    cursor:
        not-allowed;

}


.fm-my-reservation-cancel .material-symbols-outlined {

    font-size:
        18px;

}


/* ====================================================
   EMPTY
==================================================== */

.fm-my-reservations-empty {

    grid-column:
        1 / -1;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        180px;

    padding:
        30px;

    text-align:
        center;

    border:
        1px dashed var(--fm-border,
            #cbd5e1);

    border-radius:
        16px;

    background:
        var(--fm-surface,
            var(--fm-card,
                #ffffff));

    color:
        var(--fm-text-muted,
            #94a3b8);

}


.fm-my-reservations-empty .material-symbols-outlined {

    font-size:
        40px;

    margin-bottom:
        10px;

    opacity:
        .7;

}


.fm-my-reservations-empty strong {

    margin-bottom:
        5px;

    color:
        var(--fm-text,
            #334155);

    font-size:
        14px;

}


.fm-my-reservations-empty p {

    margin:
        0;

    font-size:
        13px;

}


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

@media (max-width: 800px) {

    .fm-my-reservations-header {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .fm-my-reservations-section-header {

        align-items:
            stretch;

        flex-direction:
            column;

    }


    .fm-my-reservations-new {

        width:
            100%;

    }


    .fm-my-reservations-list {

        grid-template-columns:
            1fr;

    }

}


@media (max-width: 560px) {

    .fm-my-reservations {

        padding:
            4px 0 30px;

    }


    .fm-my-reservations-header h1 {

        font-size:
            25px;

    }


    .fm-my-reservations-header p {

        font-size:
            13px;

    }


    .fm-my-reservation-card {

        padding:
            14px;

    }


    .fm-my-reservation-card-header {

        gap:
            8px;

    }


    .fm-my-reservation-title {

        font-size:
            15px;

    }


    .fm-my-reservation-status {

        padding:
            5px 8px;

        font-size:
            10px;

    }

}