/* Link Exchange Pro – Frontend Styles
   Loaded via wp_enqueue_style, replaces all scattered inline <style> blocks. */

/* ── Box container ─────────────────────────────────────────────────────────── */
.lep-box {
    background-color: #000066;
    color: #fff;
    padding: 24px 28px;
    margin: 24px auto;
    border-radius: 10px;
    width: 90%;
    max-width: 620px;
    box-sizing: border-box;
    font-family: inherit;
}

.lep-box__title {
    color: #fff;
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 1.4rem;
    text-align: center;
}

/* ── Code / textarea ────────────────────────────────────────────────────────── */
.lep-code-box {
    width: 100%;
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background: #fff;
    color: #000;
    box-sizing: border-box;
    margin-bottom: 16px;
    font-family: monospace;
    resize: vertical;
}

/* ── Form elements ──────────────────────────────────────────────────────────── */
.lep-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lep-form label {
    color: #fff;
    font-weight: 600;
    margin-bottom: 2px;
}

.lep-form input[type="text"],
.lep-form input[type="email"],
.lep-form input[type="url"] {
    width: 100%;
    padding: 9px 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-size: 0.95rem;
    margin-bottom: 8px;
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.lep-btn {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    transition: background-color 0.2s ease;
}

.lep-btn--primary {
    background-color: #4caf50;
    color: #fff;
    margin: 14px auto 0;
    display: block;
}

.lep-btn--primary:hover,
.lep-btn--primary:focus {
    background-color: #388e3c;
    color: #fff;
}

.lep-btn--paypal {
    background-color: #ffc439;
    color: #003087;
    font-weight: 700;
}

.lep-btn--paypal:hover {
    background-color: #f0b429;
}

/* ── Notices ────────────────────────────────────────────────────────────────── */
.lep-notice {
    padding: 10px 14px;
    border-radius: 5px;
    font-size: 1rem;
    margin: 12px 0 0;
}

.lep-notice--success {
    background-color: rgba(76, 175, 80, 0.15);
    border: 1px solid #4caf50;
    color: #b9f6ca;
}

.lep-notice--error {
    background-color: rgba(244, 67, 54, 0.15);
    border: 1px solid #f44336;
    color: #ffcdd2;
}

.lep-errors {
    color: #ffcdd2;
    padding-left: 18px;
}

/* ── PayPal container ───────────────────────────────────────────────────────── */
.lep-paypal-container {
    max-width: 520px;
    margin: 20px auto;
    text-align: center;
}

.lep-paypal-text {
    margin-bottom: 16px;
}

/* ── Partner links widget ───────────────────────────────────────────────────── */

/* Widget title — override the theme's dark colour so it reads on dark backgrounds.
   Change the hex value below to any lighter colour you like. */
.widget_lep_partner_links .widget-title,
.widget_lep_partner_links .widgettitle {
    color: #fff;
}

.lep-partner-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lep-partner-link {
    padding: 4px 0;
}

.lep-partner-link a {
    color: inherit;
    text-decoration: underline;
}

/* ── Proceed form (Step 1 success) ──────────────────────────────────────────── */
.lep-proceed-form {
    margin-top: 12px;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .lep-box {
        padding: 16px;
        width: 100%;
    }
}