/**
 * Front-end styles for the DBP Custom Link Block
 */

.wp-block-downline-builder-plugin-custom-link {
    margin-bottom: 1em;
}

/* Default button styling */
.wp-block-downline-builder-plugin-custom-link a {
    display: inline-block;
    background-color: #007cba;
    color: #fff;
    text-decoration: none;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.5;
    transition: background-color 0.3s ease;
    text-align: center;
}

.wp-block-downline-builder-plugin-custom-link a:hover {
    background-color: #0069a8;
    text-decoration: none;
}

/* Button alignment options */
.wp-block-downline-builder-plugin-custom-link.aligncenter {
    text-align: center;
}

.wp-block-downline-builder-plugin-custom-link.alignleft {
    text-align: left;
}

.wp-block-downline-builder-plugin-custom-link.alignright {
    text-align: right;
}

/* Special display modes */
.wp-block-downline-builder-plugin-custom-link .dbp-custom-link-url-only {
    font-family: monospace;
    word-break: break-all;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
    .wp-block-downline-builder-plugin-custom-link a {
        width: 100%;
        box-sizing: border-box;
    }
}

/* Default button style (can be overridden by custom classes) */
.wp-block-downline-builder-plugin-custom-link a.dbp-default-button {
    background-color: #007cba;
    color: white;
    border-radius: 4px;
    border: none;
}

.wp-block-downline-builder-plugin-custom-link a.dbp-default-button:hover {
    background-color: #006ba1;
}

/* Primary button style */
.wp-block-downline-builder-plugin-custom-link a.dbp-primary-button {
    background-color: #0073aa;
    color: white;
    border-radius: 4px;
    border: none;
}

.wp-block-downline-builder-plugin-custom-link a.dbp-primary-button:hover {
    background-color: #005c87;
}

/* Secondary button style */
.wp-block-downline-builder-plugin-custom-link a.dbp-secondary-button {
    background-color: #6c757d;
    color: white;
    border-radius: 4px;
    border: none;
}

.wp-block-downline-builder-plugin-custom-link a.dbp-secondary-button:hover {
    background-color: #5a6268;
}

/* Success button style */
.wp-block-downline-builder-plugin-custom-link a.dbp-success-button {
    background-color: #28a745;
    color: white;
    border-radius: 4px;
    border: none;
}

.wp-block-downline-builder-plugin-custom-link a.dbp-success-button:hover {
    background-color: #218838;
}

/* Danger button style */
.wp-block-downline-builder-plugin-custom-link a.dbp-danger-button {
    background-color: #dc3545;
    color: white;
    border-radius: 4px;
    border: none;
}

.wp-block-downline-builder-plugin-custom-link a.dbp-danger-button:hover {
    background-color: #c82333;
}

/* Warning button style */
.wp-block-downline-builder-plugin-custom-link a.dbp-warning-button {
    background-color: #ffc107;
    color: #212529;
    border-radius: 4px;
    border: none;
}

.wp-block-downline-builder-plugin-custom-link a.dbp-warning-button:hover {
    background-color: #e0a800;
}

/* Info button style */
.wp-block-downline-builder-plugin-custom-link a.dbp-info-button {
    background-color: #17a2b8;
    color: white;
    border-radius: 4px;
    border: none;
}

.wp-block-downline-builder-plugin-custom-link a.dbp-info-button:hover {
    background-color: #138496;
}

/* Light button style */
.wp-block-downline-builder-plugin-custom-link a.dbp-light-button {
    background-color: #f8f9fa;
    color: #212529;
    border-radius: 4px;
    border: 1px solid #f8f9fa;
}

.wp-block-downline-builder-plugin-custom-link a.dbp-light-button:hover {
    background-color: #e2e6ea;
}

/* Dark button style */
.wp-block-downline-builder-plugin-custom-link a.dbp-dark-button {
    background-color: #343a40;
    color: white;
    border-radius: 4px;
    border: none;
}

.wp-block-downline-builder-plugin-custom-link a.dbp-dark-button:hover {
    background-color: #23272b;
}

/* Outline button styles */
.wp-block-downline-builder-plugin-custom-link a.dbp-outline-button {
    background-color: transparent;
    color: #007bff;
    border: 1px solid #007bff;
    border-radius: 4px;
}

.wp-block-downline-builder-plugin-custom-link a.dbp-outline-button:hover {
    background-color: #007bff;
    color: white;
}