/**
 * Steam XMR Store - Button Styles
 * Version: 2.0.0 (July 26, 2025)
 */

/* ===== BUTTON STYLES ===== */

/* Buy button */
.btn, 
.purchase_form button, 
.btn_buy {
    background: linear-gradient(to bottom, #5ab85d 5%, #4a8b4c 95%);
    border: none;
    border-radius: 2px;
    color: #fff !important;
    padding: 8px 16px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    min-width: auto;
    width: auto;
    text-align: center;
    display: inline-block;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn:hover, 
.purchase_form button:hover, 
.btn_buy:hover {
    background: linear-gradient(to bottom, #65c267 5%, #4a8b4c 95%);
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .btn, 
    .purchase_form button, 
    .buy_button {
        padding: 6px 8px;
        font-size: 12px;
    }
    
    .product_actions .btn,
    .product_actions .purchase_form button {
        width: 100%;
        padding: 6px 5px;
    }
}

/* Support Buttons */
.btn-primary {
    background: linear-gradient(to bottom, #4c90d3 5%, #3e7bc3 95%);
    border: none;
    border-radius: 2px;
    color: #fff !important;
    padding: 8px 16px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    min-width: auto;
    width: auto;
    text-align: center;
    display: inline-block;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.btn-primary:hover {
    background: linear-gradient(to bottom, #5ca0e3 5%, #3e7bc3 95%);
}

.btn-warning {
    background: linear-gradient(to bottom, #f7931e 5%, #e07a0d 95%);
    border: none;
    border-radius: 2px;
    color: #fff !important;
    padding: 8px 16px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    min-width: auto;
    width: auto;
    text-align: center;
    display: inline-block;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.btn-warning:hover {
    background: linear-gradient(to bottom, #ffa52e 5%, #e07a0d 95%);
}

.btn-danger {
    background: linear-gradient(to bottom, #e74c3c 5%, #c0392b 95%);
    border: none;
    border-radius: 2px;
    color: #fff !important;
    padding: 8px 16px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    min-width: auto;
    width: auto;
    text-align: center;
    display: inline-block;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.btn-danger:hover {
    background: linear-gradient(to bottom, #f55c4c 5%, #c0392b 95%);
}

.btn-success {
    background: linear-gradient(to bottom, #27ae60 5%, #229954 95%);
    border: none;
    border-radius: 2px;
    color: #fff !important;
    padding: 8px 16px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    min-width: auto;
    width: auto;
    text-align: center;
    display: inline-block;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.btn-success:hover {
    background: linear-gradient(to bottom, #2ecc71 5%, #229954 95%);
}

.btn-info {
    background: linear-gradient(to bottom, #17a2b8 5%, #148a9e 95%);
    border: none;
    border-radius: 2px;
    color: #fff !important;
    padding: 8px 16px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    min-width: auto;
    width: auto;
    text-align: center;
    display: inline-block;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.btn-info:hover {
    background: linear-gradient(to bottom, #1cb3cc 5%, #148a9e 95%);
}

.btn-secondary {
    background: linear-gradient(to bottom, #6c757d 5%, #5a6268 95%);
    border: none;
    border-radius: 2px;
    color: #fff !important;
    padding: 8px 16px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    min-width: auto;
    width: auto;
    text-align: center;
    display: inline-block;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.btn-secondary:hover {
    background: linear-gradient(to bottom, #7c848d 5%, #5a6268 95%);
}

/* Button Size Variants */
.btn-sm {
    padding: 4px 8px;
    font-size: 11px;
}

.btn-lg {
    padding: 8px 12px;
    font-size: 14px;
}

/* Button Group Styles */
.btn-group {
    display: inline-flex;
    vertical-align: middle;
}

.btn-group .btn {
    border-radius: 0;
    margin-right: -1px;
    position: relative;
}

.btn-group .btn:first-child {
    border-radius: 2px 0 0 2px;
}

.btn-group .btn:last-child {
    border-radius: 0 2px 2px 0;
    margin-right: 0;
}

.btn-group .btn:hover {
    z-index: 1;
}

/* Login Button */
.login_btn {
    background: linear-gradient(to bottom, #4b6b8d 5%, #2a4763 95%);
}

.login_btn:hover {
    background: linear-gradient(to bottom, #5b7fa7 5%, #2a4763 95%);
}

/* Disabled Button */
.btn_disabled, 
.btn:disabled, 
.purchase_form button:disabled {
    background: linear-gradient(to bottom, #898989 5%, #5a5a5a 95%);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Button sizes */
.btn_small {
    padding: 5px 10px;
    font-size: 12px;
}

.btn_large {
    padding: 10px 20px;
    font-size: 16px;
}
/**
 * Steam XMR Store - Improved Buy Buttons
 * Version: 1.0.0 (July 26, 2025)
 * 
 * Ajustes para mejorar la visualización de los botones de compra
 * especialmente en dispositivos móviles y pantallas pequeñas
 */

/* Estilo base para botones de compra */
.btn_buy, 
.login_btn,
button[type="submit"].btn_buy {
    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;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

.btn_buy:hover, 
.login_btn:hover,
button[type="submit"].btn_buy:hover {
    background: linear-gradient(to bottom, #8ed629 5%, #6aa621 95%) !important;
}

/* Alineación en la lista de productos */
.product_actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding-right: 8px !important; /* Evita que el botón toque el borde */
    height: 100% !important;
}

/* Mejoras para la versión móvil */
@media (max-width: 768px) {
    .btn_buy, 
    .login_btn,
    button[type="submit"].btn_buy {
        min-width: auto !important;
        width: auto !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
        margin: 0 !important;
        max-width: 100% !important;
    }
    
    /* Asegura espacio entre el botón y el borde en móviles */
    .product_actions {
        padding-right: 10px !important;
    }
    
    /* Más espacio en la columna de acciones */
    .products_list_header,
    .product_item_list {
        grid-template-columns: 50px 75px 1fr 70px auto !important;
    }
}

/* Versiones aún más pequeñas (teléfonos compactos) */
@media (max-width: 480px) {
    .btn_buy, 
    .login_btn,
    button[type="submit"].btn_buy {
        min-width: auto !important;
        width: auto !important;
        padding: 5px 10px !important;
        font-size: 11px !important;
        max-width: 100% !important;
    }
    
    /* Más espacio para el botón en pantallas muy pequeñas */
    .products_list_header,
    .product_item_list {
        grid-template-columns: 40px 65px 1fr 60px auto !important;
        gap: 2px !important;
        padding: 8px 5px !important;
    }
    
    .product_actions {
        padding-right: 12px !important;
    }
}