/**
 * Frontend Styles for DBP Affiliate Program Form Block
 */

.wp-block-downline-builder-plugin-affiliate-program-form {
    margin-bottom: 1.5em;
}

/* Default styles for the form */
.dbp-affiliate-program-form form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

/* Default styles for the input field - without making it too specific */
.dbp-affiliate-program-form input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 12px;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1.5;
}

/* Default styles for the submit button - without making it too specific */
.dbp-affiliate-program-form input[type="submit"],
.dbp-affiliate-program-form button[type="submit"],
.custom-styled-button {
    display: inline-block;
    padding: 8px 16px;
    background-color: #007cba;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1.5;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: opacity 0.2s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
}

/* Full width button */
.dbp-affiliate-program-form-button-fullwidth input[type="submit"],
.dbp-affiliate-program-form-button-fullwidth button[type="submit"] {
    width: 100%;
    box-sizing: border-box;
}

/* Input focus state */
.dbp-affiliate-program-form input[type="text"]:focus {
    outline: 2px solid rgba(0, 124, 186, 0.4);
    border-color: #007cba;
}

/* Button hover and focus states */
.dbp-affiliate-program-form input[type="submit"]:hover,
.dbp-affiliate-program-form input[type="submit"]:focus,
.dbp-affiliate-program-form button[type="submit"]:hover,
.dbp-affiliate-program-form button[type="submit"]:focus,
.custom-styled-button:hover,
.custom-styled-button:focus {
    opacity: 0.9;
}

/* Success message styling */
.dbp-affiliate-program-form p {
    margin: 10px 0;
    padding: 10px;
    background-color: #f0f9eb;
    color: #67c23a;
    border-radius: 4px;
}

/* Alignment options */
.dbp-affiliate-program-form-align-left form {
    align-items: flex-start;
}

.dbp-affiliate-program-form-align-left input[type="submit"],
.dbp-affiliate-program-form-align-left button[type="submit"] {
    align-self: flex-start;
}

.dbp-affiliate-program-form-align-center form {
    align-items: center;
}

.dbp-affiliate-program-form-align-center input[type="submit"],
.dbp-affiliate-program-form-align-center button[type="submit"] {
    align-self: center;
}

.dbp-affiliate-program-form-align-right form {
    align-items: flex-end;
}

.dbp-affiliate-program-form-align-right input[type="submit"],
.dbp-affiliate-program-form-align-right button[type="submit"] {
    align-self: flex-end;
}

/* Responsive styles */
@media screen and (min-width: 768px) {
    .dbp-affiliate-program-form-layout-inline form {
        flex-direction: row;
        align-items: flex-start;
    }
    
    .dbp-affiliate-program-form-layout-inline input[type="text"] {
        flex: 1;
    }
    
    .dbp-affiliate-program-form-layout-inline input[type="submit"],
    .dbp-affiliate-program-form-layout-inline button[type="submit"] {
        margin-left: 10px;
    }
}