@import url(variables.css);

.booking-card {
    background-color: var(--color-white);
    border-radius: var(--border-radius-md);
    padding: var(--space-md);
    box-shadow: 0 2px 10px var(--color-shadow);
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: var(--space-md);

    .exclusion-tag {
        display: inline-flex;
        align-items: center;
        background-color: #f7f7f7;
        padding: 8px 12px;
        border-radius: 12px;
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--color-text);
        margin-bottom: var(--space-sm);

        i {
            margin-right: 8px;
            color: var(--color-text);
        }
    }

    .booking-info {
        display: flex;
        align-items: center;
        gap: var(--space-md);

        @media (max-width: 768px) {
            flex-direction: column;
            align-items: stretch;
            gap: var(--space-sm);
        }

        .container-date-departure {
            flex: 0 0 50%;
            padding-right: var(--space-md);

            @media (max-width: 768px) {
                flex: 1;
                padding-right: 0;
                width: 100%;
            }

            .date-info {
                display: flex;
                align-items: center;
                gap: 10px;
                justify-content: space-between;

                .date-block {
                    display: flex;
                    flex-direction: column;

                    .day {
                        font-weight: 600;
                    }

                    .date {
                        font-weight: 700;
                        font-size: var(--font-size-lg);
                    }
                }

                .nights {
                    text-align: center;
                    color: #666;
                    font-size: var(--font-size-sm);
                }
            }

            .traveler-info {
                margin-top: 10px;

                .stats {
                    display: flex;
                    align-items: center;
                    font-size: var(--font-size-sm);
                    color: var(--color-text);
                    gap: 8px;

                    .separator {
                        color: #999;
                    }
                }
            }
        }

        .divider.vertical {
            width: 1px;
            height: 60px;
            background-color: #e0e0e0;

            @media (max-width: 768px) {
                width: 100%;
                height: 1px;
                margin: 10px 0;
            }
        }

        .price-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0 var(--space-md);

            @media (max-width: 768px) {
                align-items: flex-start;
                padding: 0;
            }

            .current-price {
                font-size: var(--font-size-xl);
                font-weight: 700;
                color: #000;
            }

            .original-price {
                text-decoration: line-through;
                color: #999;
                font-size: var(--font-size-md);
                margin-left: 8px;
            }

            .promo-tag {
                display: flex;
                align-items: center;
                color: #c06e3a;
                font-size: var(--font-size-sm);
                margin-top: 5px;

                i {
                    margin-right: 5px;
                }
            }
        }

        .container-actions {
            flex: 0 0 180px;
            display: flex;
            flex-direction: column;
            align-items: flex-end;

            @media (max-width: 768px) {
                flex: 1;
                width: 100%;
                align-items: stretch;
            }

            .action-section {
                width: 100%;

                .btn-book {
                    padding: 12px 24px;
                    border-radius: var(--border-radius-sm);
                    background-color: var(--color-primary);
                    color: var(--color-white);
                    font-weight: 600;
                    border: none;
                    cursor: pointer;
                    transition: background-color 0.2s;
                    width: 100%;

                    &:hover {
                        background-color: var(--color-primary-dark);
                    }
                }
            }

            .view-details {
                text-align: center;
                margin-top: 12px;
                font-size: var(--font-size-sm);

                a {
                    color: #666;
                    text-decoration: none;
                    font-weight: 500;

                    &:hover {
                        text-decoration: underline;
                    }
                }

                .info-icon {
                    margin-left: 5px;
                    color: #999;
                }
            }
        }
    }
}