/**
 * Steam XMR Store - CSS Consolidado
 * Version: 3.0.0 (July 27, 2025)
 * 
 * Este archivo centraliza todos los estilos necesarios tanto para la tienda como para la página de compras,
 * eliminando archivos CSS innec.detail_row {
    display: flex !important;
    margin-bottom: 10px !important;
    align-items: flex-start !important;
    font-size: 14px !important;
}os y asegurando un estilo consistente.
 */

/* ===== ESTILOS GENERALES DE LA TIENDA Y PURCHASES ===== */

/* Contenedores principales a ancho completo */
.store_main_content,
.store_content,
.products_container,
.products_list,
.purchases_list {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 15px !important;
}

/* Ocultar encabezados de tabla */
.products_list_header {
    display: none !important;
}

/* ===== ESTILO DE FILAS DE PRODUCTOS Y COMPRAS ===== */

/* Estilo unificado para filas de productos y compras */
.product_item_list {
    display: grid !important;
    grid-template-columns: 60px 1fr !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 12px !important; /* Reducido para más compacto */
    position: relative !important;
    border-radius: 2px !important;
    background: linear-gradient(135deg, rgba(42, 71, 94, 0.4) 0%, rgba(42, 71, 94, 0.2) 100%) !important;
    border-bottom: 1px solid rgba(42, 71, 94, 0.5) !important;
    min-height: 40px !important; /* Reducido para más compacto */
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

/* Contenedor de información del producto para alinear como en purchases */
.product_info_container {
    display: grid !important;
    grid-template-columns: auto 1fr auto auto !important;
    grid-gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
}

/* Efecto hover unificado */
.product_item_list:hover {
    background: linear-gradient(135deg, rgba(42, 71, 94, 0.5) 0%, rgba(42, 71, 94, 0.3) 100%) !important;
}

/* ===== COLUMNAS DE PRODUCTOS Y COMPRAS ===== */

/* Columna de bandera */
.product_flag {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 24px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.3) !important;
    position: relative !important;
    z-index: 2 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    margin-right: 10px !important;
}

/* Número de producto */
.product_number {
    font-family: 'Motiva Sans', sans-serif !important;
    font-size: 14px !important;
    color: #acdbf5 !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    max-width: 100px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Columna de número de producto */
.product_number {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 13px !important;
    color: #acdbf5 !important;
    text-align: center !important;
    z-index: 2 !important;
    position: relative !important;
}

/* Columna de nombre de producto */
.product_name {
    padding: 4px 8px !important; /* Reducido para más compacto */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    z-index: 2 !important;
    text-align: left !important;
    width: 100% !important;
}

/* Título del producto */
.product_title {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-weight: 500 !important;
    color: #c7d5e0 !important;
    display: block !important;
    margin-bottom: 2px !important;
    width: 100% !important;
}

/* Meta información */
.purchase_meta {
    font-size: 11px !important;
    color: #8f98a0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    margin-top: 2px !important;
}

/* ===== FUNCIONALIDAD DE EXPANSIÓN CON CSS PURO ===== */

/* Ocultar checkbox pero mantener funcionalidad */
.expand_trigger {
    position: absolute !important;
    opacity: 0 !important;
    z-index: -1 !important;
    height: 0 !important;
    width: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Overlay para hacer toda la fila clickable */
.row_click_overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    cursor: pointer !important;
    z-index: 3 !important;
    pointer-events: none !important; /* Permite que los clics pasen a través del overlay */
}

/* Restaurar los eventos de clic solo en los elementos específicos de la fila */
.product_buy_button,
.buy,
.btn_buy,
.login_btn {
    pointer-events: auto !important; /* Permite que estos botones reciban clics */
}

/* Contenido expandible en productos */
.expandable_details {
    display: none !important;
    width: 100% !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    background: rgba(27, 40, 56, 0.8) !important;
    border-left: 2px solid #66c0f4 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    grid-column: 1 / -1 !important; /* Span all columns */
    margin-top: -1px !important; /* Connect to row above */
}

/* Activar el contenido cuando el checkbox está marcado */
.expand_trigger:checked + .product_item_list + .expandable_details {
    display: block !important;
    max-height: 500px !important;
    padding: 15px 15px 15px 30px !important; /* Extra left padding for indentation */
    margin: 0 !important;
    border-bottom: 1px solid rgba(42, 71, 94, 0.5) !important;
    animation: fadeIn 0.3s ease !important;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Cambiar estilo de la fila cuando está expandida */
.expand_trigger:checked + .product_item_list {
    background: linear-gradient(135deg, rgba(42, 71, 94, 0.6) 0%, rgba(42, 71, 94, 0.4) 100%) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.expand_trigger:checked + .product_item_list .product_title {
    color: #ffffff !important;
}

/* Eliminados los indicadores de expansión +/- */
.product_item_list:after {
    content: '' !important;
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.expand_trigger:checked + .product_item_list:after {
    content: '' !important;
}

/* ===== ESTILO PARA DETALLES EXPANDIBLES ===== */

.detail_row {
    display: flex !important;
    margin-bottom: 12px !important;
    align-items: flex-start !important;
    font-size: 14px !important;
}

.detail_label {
    min-width: 100px !important;
    font-weight: 500 !important;
    color: #66c0f4 !important;
    margin-right: 10px !important;
    font-size: 14px !important;
}

.detail_value,
.detail_content {
    color: #acdbf5 !important;
    flex: 1 !important;
    line-height: 1.5 !important;
    font-size: 14px !important;
}

/* ===== ESTILO PARA LAS CLAVES DIGITALES ===== */

.key_text {
    color: #acdbf5 !important;
    font-family: monospace !important;
    font-size: 14px !important;
    width: 100% !important;
    user-select: all !important; /* Permite seleccionar fácilmente todo el texto */
    font-weight: bold !important;
}

/* Mantenemos la clase key_display para compatibilidad */
.key_display {
    display: none !important; /* Ocultamos el antiguo estilo */
}

.key_display input, .copy_btn {
    display: none !important; /* Ocultamos los elementos antiguos */
    cursor: pointer !important;
    min-width: 80px !important;
    transition: all 0.2s ease !important;
    z-index: 5 !important;
}

.copy_btn:hover {
    background: linear-gradient(to bottom, #5c7fa5 5%, #355979 95%) !important;
    color: #fff !important;
}

.instructions_text {
    background: rgba(0, 0, 0, 0.2) !important;
    padding: 10px !important;
    border-radius: 3px !important;
    margin-top: 5px !important;
    color: #c7d5e0 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* ===== BOTÓN DE COMPRA ===== */

.product_buy_button,
.buy,
.btn_buy, 
.login_btn {
    min-width: auto !important;
    width: auto !important;
    padding: 8px 16px !important;
    border-radius: 2px !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    margin: 0 auto !important;
    display: inline-block !important;
    background: linear-gradient(to bottom, #75b022 5%, #588a1b 95%) !important;
    border: none !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    transition: all 0.2s ease !important;
    z-index: 10 !important; /* Mayor z-index para que esté por encima del overlay */
    position: relative !important; /* Para que el z-index funcione correctamente */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

.product_buy_button:hover,
.buy:hover,
.btn_buy:hover, 
.login_btn:hover {
    background: linear-gradient(to bottom, #8ed629 5%, #6aa621 95%) !important;
    cursor: pointer !important;
    z-index: 10 !important; /* Asegurarse de que el hover también mantenga el z-index alto */
}

/* Balance header - CORREGIDO */
.balance_display {
    background: #4c6b22 !important;
    color: #ffffff !important;
    padding: 8px 15px !important;
    border-radius: 3px !important;
    font-weight: bold !important;
    font-size: 16px !important;
}

/* Header menu - CORREGIDO */
.header_menu {
    display: flex !important;
    gap: 15px !important;
    align-items: center !important;
}

.header_link {
    color: #b8b6b4 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    transition: color 0.2s ease !important;
}

.header_link:hover {
    color: #ffffff !important;
}

/* ===== PAGINACIÓN ===== */

.pagination_container {
    display: flex !important;
    justify-content: center !important;
    margin: 25px 0 !important;
    width: 100% !important;
}

.pagination_info {
    text-align: center !important;
    width: 100% !important;
    margin-bottom: 10px !important;
    color: #c7d5e0 !important;
}

.pagination {
    display: flex !important;
    list-style-type: none !important;
    padding: 0 !important;
    gap: 5px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 10px 0 !important;
    width: 100% !important;
}

.pagination li {
    display: inline-block !important;
}

.pagination li a,
.pagination li span {
    color: #c7d5e0 !important;
    padding: 8px 14px !important;
    text-decoration: none !important;
    transition: background-color 0.3s !important;
    border-radius: 2px !important;
    background: linear-gradient(to bottom, #4b6b8d 5%, #2a4763 95%) !important;
    min-width: 15px !important;
    text-align: center !important;
    display: block !important;
}

.pagination li a:hover {
    background: linear-gradient(to bottom, #5c7fa5 5%, #355979 95%) !important;
    color: #fff !important;
}

.pagination li.active a {
    background: linear-gradient(to bottom, #5aa15c 5%, #4a8b4c 95%) !important;
    cursor: default !important;
}

.pagination li.disabled span {
    background: rgba(75, 107, 141, 0.3) !important;
    cursor: not-allowed !important;
}

/* ===== RESPONSIVE PARA MÓVILES ===== */

@media (max-width: 768px) {
    .product_item_list {
        grid-template-columns: 45px 1fr !important;
        padding: 10px 8px !important;
        gap: 5px !important;
    }
    
    .product_flag {
        font-size: 20px !important;
    }
    
    .product_number {
        font-size: 12px !important;
    }
    
    .product_buy_button,
    .buy,
    .btn_buy, 
    .login_btn {
        min-width: auto !important;
        width: auto !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }
    
    .key_display {
        flex-direction: column !important;
    }
    
    .copy_btn {
        width: 100% !important;
        margin-top: 5px !important;
    }
    
    .expandable_details {
        padding: 10px 12px !important;
    }
}

/* Para pantallas muy pequeñas */
/* Vista móvil - Debajo de 480px */
@media screen and (max-width: 480px) {
    .product_item_list {
        grid-template-columns: 50px 1fr !important;
        gap: 8px !important;
    }
    
    .product_flag {
        width: 36px !important;
        height: 36px !important;
        font-size: 20px !important;
    }
    
    .product_title {
        font-size: 14px !important;
    }
    
    .price_value {
        font-size: 14px !important;
    }
    
    .btn_buy {
        font-size: 12px !important;
        padding: 4px 8px !important;
    }
    
    .pagination_container {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .pagination_info {
        text-align: center !important;
        width: 100% !important;
    }
    
    .pagination {
        justify-content: center !important;
        width: 100% !important;
    }
    
    /* Ajuste para móvil en la estructura de product_info_container */
    .product_info_container {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto auto !important;
    }
}

/* Contenedor de información de producto que simula la estructura de purchases.php */
.product_info_container {
    display: grid !important;
    grid-template-columns: auto 1fr auto auto !important;
    grid-gap: 8px !important; /* Reducido para más compacto */
    align-items: center !important;
    width: 100% !important;
    padding: 4px 8px !important; /* Padding interno más compacto */
}

/* Fix for product alignment across all screens */
.product_name {
    text-align: left !important;
    justify-content: flex-start !important;
}

.product_title {
    text-align: left !important;
}

/* Fix for header alignment */
.products_list_header span:nth-child(3) {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Mobile fixes */
@media (max-width: 768px) {
    .product_name {
        text-align: left !important;
        padding-left: 5px !important;
    }
    
    .products_list_header span:nth-child(3) {
        text-align: left !important;
        padding-left: 5px !important;
    }
}