/* LINKS */
.pagination-container a {
    text-decoration: none;
}

/* 2. LAYOUT DA PÁGINA */
.page-wrapper {
    min-height: 75vh;
}

.page-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem;
    background-color: #ededed;
    /* ; foi removido para limpeza */
    border-radius: 20px;
    min-height: 63vh;
}

.page-header {
    margin-bottom: 2rem;
}

    .page-header h1 {
        font-size: 2.25rem;
        font-weight: 700;
        color: #333333;
        margin: 0;
    }

    .page-header p {
        font-size: 1.125rem;
        color: #555555;
        margin-top: 0.25rem;
    }

/* 3. FILTROS */
.filter-container {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 200px;
}

.filter-label {
    font-weight: 600;
    color: #555555;
    font-size: 0.875rem;
}

.filter-select {
    padding: 0.75rem;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    background: #F6F6F6;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .filter-select:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
    }

/* 4. LISTA DE PEDIDOS */
.order-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* 5. CARD DE PEDIDO */
.order-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
    transition: all 0.2s ease;
}

    .order-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        border-color: #c9c9c9;
    }

.order-card__section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #DFDFDF;
}

.order-card__section--top {
    border-bottom: 1px solid #DFDFDF;
}

.order-card__section--bottom {
    align-items: flex-end;
}

.order-card__separator {
    border: 0;
    border-top: 1px solid #f0f0f0;
    margin: 0;
}

.order-card__group {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.order-card__label {
    font-size: 1.2rem;
    color: #555555;
    font-weight: 500;
}

.order-card__value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333333;
}

.order-card__group-wrapper {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

/* 1. O novo container para alinhar o badge e a ação à direita */
.order-card__status-action-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.order-card__pending-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    transition: all 0.2s ease;
    background-color: #fffaf0;
    color: #b38600;
    border: 1px solid #feb600;
}

    /* 3. Efeito de Hover (Interação) */
    .order-card__pending-cta:hover {
        background-color: #fef3e0; /* Fundo levemente mais escuro */
        color: #000;
        box-shadow: 0 2px 5px rgba(0,0,0,0.08); /* Feedback sutil */
    }

    /* 4. Ajuste fino do ícone (opcional) */
    .order-card__pending-cta svg {
        margin-bottom: 1px;
    }

/* BADGES */
.order-card__status-badge {
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.order-card__status-badge--confirmed {
    background-color: #36c180;
    color: #fff;
    -webkit-text-stroke: #99f2e4;
}

.order-card__status-badge--pending {
    background-color: #feb600;
    color: #fef3fe;
    -webkit-text-stroke: #f4d369;
}

.order-card__status-badge--canceled {
    background-color: red;
    color: #fff;
    border: 1px solid #f5c6cb;
}

.order-card__status-badge--refunded {
    background-color: #fe6a00;
    color: #fef3fe;
    -webkit-text-stroke: #f4d369;
}


/* BOTÃO DE DETALHES */
.order-card__details-button {
    border: 1px solid #0000001f;
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

    .order-card__details-button:hover {
        /* Estilo de hover vazio na origem, mantido assim. */
    }

    .order-card__details-button.active {
        background-color: red;
        color: #FFF;
    }

        .order-card__details-button.active:hover {
            background-color: red;
        }

/* SEÇÃO EXPANSÍVEL */
.order-card__expandable-section {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 1.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    .order-card__expandable-section.expanded {
        max-height: 700px;
        opacity: 1;
        padding: 1.5rem;
    }

.order-card__details-content {
    border-top: 1px solid #f0f0f0;
}

    .order-card__details-content h5 {
        font-size: 1.3rem;
        font-weight: 700;
        color: #333333;
        margin: 0 0 1rem 0;
    }

/* LISTA DE ITENS - Estilos antigos (mantidos separados dos novos) */
.details-item-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.details-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px dashed #f0f0f0;
}

.details-item__name {
    font-weight: 500;
    color: #333333;
    padding-right: 1rem;
}

.details-item__quantity {
    color: #555555;
    font-weight: 400;
    font-size: 0.85rem;
    padding-left: 0.25rem;
}

.details-item__price {
    font-weight: 600;
    color: #333333;
    white-space: nowrap;
}

/* ESTADO VAZIO */
.empty-state-container {
    text-align: center;
    padding: 4rem 2rem;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
}

    .empty-state-container img {
        max-width: 150px;
        margin-bottom: 1.5rem;
        opacity: 0.7;
    }

    .empty-state-container h2 {
        font-size: 1.6rem;
        color: #333333;
        margin-bottom: 0.5rem;
    }

    .empty-state-container p {
        font-size: 1.3rem;
        color: #555555;
        margin-bottom: 1.5rem;
    }

.button-primary {
    display: inline-block;
    background-color: black;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

    .button-primary:hover {
        background-color: var(--primary-color);
        opacity: 0.9;
    }

/* MENSAGENS E LOADING */
.page-message-container {
    margin-bottom: 1.5rem;
}

.page-message {
    padding: 1rem;
    border-radius: 5px;
    text-align: center;
    font-weight: 500;
}

.page-message--error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #721c24;
}

.page-loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rem;
}

/* 7. PAGINAÇÃO */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 2.5rem 0;
    flex-wrap: wrap;
}

.pagination-button {
    padding: 0.625rem 1.25rem;
    background: #ffffff;
    border: 1px solid black;
    border-radius: 5px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .pagination-button:hover:not(:disabled) {
        background: var(--primary-color);
        color: black;
    }

    .pagination-button:disabled {
        background: #f0f0f0;
        color: #555555;
        border-color: #f0f0f0;
        cursor: not-allowed;
    }

.pagination-info {
    font-size: 0.9rem;
    color: #555555;
    font-weight: 600;
}

/* 8. BANNER DO APP */
.app-download-banner {
    margin-top: 1rem;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 2rem;
    color: #333333;
    text-align: center;
}

.app-download-banner__content h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.app-download-banner__content p {
    font-size: 1rem;
    margin-bottom: 1.5rem;
    color: #555555;
}

.app-download-banner__buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

    .app-download-banner__buttons img {
        height: 50px;
        width: auto;
    }

/* DETALHES GERAIS (NOVO BLOCO - Antigo "INFO EMPRESA" e outros detalhes de lista) */

.details-company-info {
    background-color: #fff;
    padding: 1rem;
    border-radius: 8px;
}

.details-info-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

    .details-info-row:last-child {
        margin-bottom: 0;
    }

.location-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    color: #4285F4;
    text-decoration: none;
    font-size: 0.9em;
    transition: color 0.2s ease;
}

    .location-link:hover {
        color: #1967D2;
        text-decoration: underline;
    }

.details-info-label {
    font-weight: 600;
    color: #555555;
    min-width: 100px;
}

.details-info-value {
    color: #333333;
    font-weight: 500;
}

.details-separator {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 1.25rem 0;
}

/* --- Título da Seção --- */
.details-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 0.75rem;
}

/* --- Lista Principal de Itens (Estilos mais detalhados) --- */
.details-item-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Espaço entre os cards */
    margin-bottom: 1rem;
}

.details-item {
    display: flex;
    /* CORREÇÃO CHAVE: Centraliza o ícone verticalmente em relação ao conteúdo */
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
}

    .details-item:last-child {
        margin-bottom: 0;
    }

/* --- Círculo do Ícone (Wrapper) --- */
.details-item__icon-wrapper {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: #fef2f2;
    color: #ef4444;
    display: flex;
    /* CORRETO: Centraliza o ícone horizontal e verticalmente DENTRO do círculo */
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* REMOVIDO: align-content: center; (redundante aqui, só funciona em flex-wrap) */
}

/* --- Wrapper do Conteúdo --- */
.details-item__content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* --- Cabeçalho (Nome + Data) --- */
.details-item__header {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.25rem;
}

/* Em telas maiores (Desktop), coloca lado a lado */
@media (min-width: 640px) {
    .details-item__header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.details-item__booking-name {
    font-weight: 700;
    color: #1a1a1a;
    font-size: 1.3rem;
}

.details-item__booking-date {
    font-size: 0.875rem;
    color: #64748b; /* Cinza médio */
}

/* --- Detalhes (Produto e Participantes) --- */
.details-item__sub-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

/* --- Estilos individuais de item (duplicados mesclados) --- */
.details-item__name {
    font-weight: 500;
    color: #555555; /* Estilo de cor mais forte mantido do último bloco */
    font-size: 1.1rem; /* Estilo de fonte maior mantido do último bloco */
    padding-right: 1rem; /* Propriedade do bloco antigo */
}

.details-item__quantity {
    color: #888888; /* Estilo de cor mais fraca mantido do último bloco */
    font-weight: 400;
    font-size: 0.85rem;
    padding-left: 0.25rem; /* Propriedade do bloco antigo */
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.details-item__price {
    font-weight: 700;
    color: #333333;
    font-size: 1.1rem;
    white-space: nowrap;
    margin-left: 1rem; /* Propriedade do último bloco */
}

.details-item__info {
    display: flex;
    justify-content: space-between;
    flex: 1;
}

.details-item__booking-badge {
    display: inline-block;
    background-color: #e0f8e9;
    color: #155724;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    width: fit-content;
}

.details-item__booking-name,
.details-item__booking-date {
    font-size: 1.1rem;
    font-weight: 500;
    color: #666666;
}

/* TOTAL FINAL */
.details-total {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem;
    background-color: #fff;
    border-radius: 8px;
    margin-top: 1rem;
    border: 2px solid #e0e0e0;
    gap: 10px;
}

.details-payment-row:first-child {
    display: flex;
    gap: 20px;
}
.details-payment-row:last-child {
    display: flex;
    gap: 50px;
}

.details-total-label {
    font-size: 1.1rem;
    font-weight: 400;
    color: #555555;
}

.details-total-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333333;
}

.details-payment-label {
    color: #64748b;
    font-size: 1rem;
}

.details-payment-value {
    font-size: 1.25rem; /* Fonte maior */
    font-weight: 700;
    color: #0f172a; /* Preto forte */
}

/* RESPONSIVIDADE */
@media (max-width: 640px) {
    .page-container {
        padding: 0 0.75rem;
    }

    .page-wrapper {
        padding-top: 1.5rem;
    }

    .page-header h1 {
        font-size: 1.75rem;
    }

    .page-header p {
        font-size: 1rem;
    }

    .filter-container {
        flex-direction: column;
        gap: 1rem;
    }

    .order-card__section {
        padding: 1rem 1.25rem;
    }

    .order-card__expandable-section {
        padding: 0 1.25rem;
    }

        .order-card__expandable-section.expanded {
            padding-top: 1.25rem;
            padding-bottom: 1.25rem;
        }

    .order-card__section--bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }

    .order-card__group-wrapper {
        gap: 1.25rem;
    }

    .order-card__details-button {
        width: 100%;
        text-align: center;
    }

    .pagination-container {
        gap: 0.5rem;
    }

    .pagination-button {
        flex: 1;
        min-width: 120px;
    }

    .pagination-info {
        flex-basis: 100%;
        text-align: center;
        order: -1;
        margin-bottom: 0.5rem;
    }

    .details-info-row {
        flex-direction: column;
        gap: 0.25rem;
    }

    .details-info-label {
        min-width: auto;
    }

    .details-item {
        gap: 0.75rem;
    }

    .details-item__price {
        margin-left: 0;
        align-self: flex-end;
    }

    .details-total {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}