/* Grade de salas: define layout responsivo para os cards */
.rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 50px;
}

/* Variáveis de tema para cards de sala */
:root {
    --room-bg-primary: #ffffff;
    --room-bg-secondary: #f5f5f5;
    --room-text-primary: #333333;
    --room-text-secondary: #666666;
    --room-border-color: #e0e0e0;
    --room-shadow: rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] {
    --room-bg-primary: #181818;
    --room-bg-secondary: #242424;
    --room-text-primary: #ffffff;
    --room-text-secondary: #c2c2c2;
    --room-border-color: #3d3d3d;
    --room-shadow: rgba(0, 0, 0, 0.25);
}

/* Card de sala: container básico do card */
.room-card {
    background: var(--room-bg-primary);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px var(--room-shadow);
    transition: transform 0.3s;
    border: 1px solid var(--room-border-color);
    position: relative;
    padding-bottom: 10px;
    min-height: 280px;
}

/* Hover do card: leve elevação ao passar o mouse */
.room-card:hover {
    transform: translateY(-5px);
}

/* Topo do card: faixa com gradiente pink/roxo e ícone */
.room-image {
    position: relative;
    height: 44px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    display: flex;
    align-items: center;
    justify-content: left;
    padding-left: 10px;
    color: white;
    font-size: 15px;
}

/* Ícone do tipo da sala no topo (bolha à esquerda) */
.room-icon,
.room-image > i {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-size: 13px;
}

/* Botão/ícone de edição no canto inferior direito, abaixo do status */
.edit-room-btn {
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--room-text-primary);
}
.edit-room-btn:hover {
    background: none;
    border: none;
    box-shadow: none;
}
/* Ícone interno segue o tema claro/escuro */
.edit-room-btn i {
    color: var(--room-text-primary);
}

/* País no topo direito: etiqueta fixa sobre o topo do card */
.room-countries {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 4px 10px;
    border-radius: 9999px;
}

/* Conteúdo do card: bloco principal abaixo do topo */
.room-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
}

/* Cabeçalho do card: título da sala + quantidade de membros */
.room-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

/* Título da sala */
.room-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--room-text-primary);
}

/* Contador de membros: ícone + texto com espaçamento */
.room-members {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--room-text-secondary);
    font-size: 14px;
}

/* Tema da sala: linha com palavras‑chave do assunto */
.room-theme {
    color: #e11d48;
    font-size: 14px;
    margin-bottom: 12px;
    font-weight: 500;
}

/* Descrição da sala: texto explicativo */
.room-description {
    color: var(--room-text-secondary);
    font-size: 14px;
    margin-bottom: 15px;
    line-height: 1.5;
}

/* Rodapé do card: botão de entrada + status */
.room-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.room-footer-right {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 36px; /* espaço para ícone absoluto de edição */
}

/* Botão “Entrar na sala”: tamanho padronizado do CTA */
.room-footer .btn {
    width: 255px;     /* Largura do botão */
    height: 44px;     /* Altura do botão */
    line-height: 44px;/* Alinhamento vertical do texto */
    padding: 0;       /* Remover padding interno para manter altura exata */
    margin-bottom: 10px; /* Espaço inferior em relação ao fundo do card */
}

/* Botão primário dentro do card: neutral, sem gradiente pink */
.room-card .btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: #fff;
    border: none;
    box-shadow: none;
}
.room-card .btn-primary:hover {
    filter: brightness(1.03);
}

/* Legenda de limite (se usada) */
.room-limit {
    color: var(--text-secondary);
    font-size: 14px;
}

/* Status da sala: cápsula com estado atual (Aberta/Lotada) */
.room-status {
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    margin-top: 10px;   /* espaço vertical quando empilhado no mobile */
    margin-left: 10px;  /* espaço lateral em relação ao botão */
}

/* Status “Aberta”: verde */
.status-open {
    background: rgba(76, 175, 80, 0.2);
    color: var(--success);
}

/* Status “Lotada”: vermelho */
.status-full {
    background: rgba(244, 67, 54, 0.2);
    color: #f44336;
}

@media (max-width: 936px) {
    /* Grade no mobile: 1 coluna, espaçamento menor e margem superior */
    .rooms-grid {
        grid-template-columns: 1fr; /* uma coluna */
        gap: 10px;                  /* espaço entre cards */
        margin-top: 10px;           /* afastar da seção anterior */
    }
    /* Container do card: manter cantos arredondados e espaço inferior para o footer */
    .room-card {
        border-radius: 16px;        /* cantos arredondados */
        padding-bottom: 12px;       /* espaço para botão/status na base */
    }
    /* Faixa rosa do topo no mobile (altura da “imagem” do card) */
   .room-image > i {
    width: 26px;
    height: 26px;
    margin-left:6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-size: 13px;
}
    /* Área de conteúdo: texto e infos principais */
    .room-content { 
        padding: 16px;              /* espaçamento interno padrão */
    }
    /* Cabeçalho do card: título e contagem de membros */
    .room-header { 
        margin-bottom: 10px;       /* espaço abaixo do título/contador */
    }
    /* Título: manter em uma linha com ellipsis para evitar quebra */
    .room-title { 
        font-size: 18px;            /* tamanho do título */
        white-space: nowrap;        /* não quebrar linha */
        overflow: hidden;           /* esconder excesso */
        text-overflow: ellipsis;    /* mostrar “…” ao cortar */
        display: block;             /* garantir renderização */
        position: relative;         /* evitar sobreposição */
        z-index: 1;                 /* acima de elementos próximos */
        color: var(--text-primary); /* reforçar cor do título */
    }
    /* Botão de editar dentro do footer, sem posição absoluta no mobile */
    .edit-room-btn { 
        position: static;           /* participar do fluxo normal */
        width: 28px; height: 28px;  /* tamanho compacto */
        margin-left: 3px;           /* pequeno recuo à esquerda */
        margin-bottom: 3px;         /* pequeno recuo abaixo */
    }
    /* Rodapé: botão + status + editar em linha (row), sem quebra */
    .room-card .room-footer {
        display: flex;              /* layout em linha */
        flex-direction: row !important; /* garantir itens na mesma linha */
        align-items: center;        /* alinhamento vertical */
        justify-content: space-between; /* separar botão e status/editar */
        gap: 8px;                   /* espaçamento entre itens */
        flex-wrap: nowrap;          /* impedir quebra de linha */
        margin-top: auto;           /* empurrar footer para base do card */
    }
    /* Form do botão: dimensionamento automático sem exigir largura mínima */
    .room-footer form {
        flex: 0 0 auto;             /* tamanho conforme conteúdo */
        min-width: auto;            /* permitir compactação */
    }
    /* Botão “Entrar na sala”: largura e altura padrão, sem padding extra */
    .room-footer .btn {
        width: 255px;               /* largura padrão do CTA (conforme imagem) */
        height: 44px;               /* altura do CTA (pílula grande) */
        line-height: 44px;          /* centralizar texto verticalmente */
        margin-bottom: 0;           /* evitar espaço extra abaixo */
        padding: 0 12px;            /* leve padding horizontal */
       
    }
    /* Área à direita: status (pílula) e ícone editar lado a lado */
    .room-footer-right {
        display: flex;              /* linha para status/editar */
        align-items: center;        /* alinhamento vertical */
        gap: 8px;                   /* espaço entre os itens */
        padding-right: 0;           /* sem recuo à direita */
        flex: 0 0 auto;             /* não expandir */
    }
    /* Status (Aberta/Lotada): pílula compacta, sem quebra */
    .room-status {
        margin-top: 0;              /* alinhar com botão */
        margin-left: 0;             /* sem recuo extra */
        white-space: nowrap;        /* manter em uma linha */
        font-size: 11px;            /* tamanho legível e compacto */
        padding: 4px 8px;           /* espaçamento interno da pílula */
    }
}