/* XUI IPTV — Frontend Form Styles */

.xui-form-wrap { max-width: 540px; margin: 0 auto; font-family: inherit; }
.xui-form-title { margin-bottom: 1rem; }

.xui-form {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 28px 32px;
    box-shadow: 0 2px 14px rgba(0,0,0,.09);
}

.xui-field { margin-bottom: 18px; }
.xui-field label { display: block; font-weight: 600; margin-bottom: 6px; }
.xui-field .req { color: #d63638; }
.xui-field input[type="email"],
.xui-field input[type="text"],
.xui-field select {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color .2s;
}
.xui-field input:focus,
.xui-field select:focus { outline: none; border-color: #2271b1; }

.xui-btn {
    display: block;
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 7px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
    margin-top: 8px;
    text-align: center;
}
.xui-btn-trial { background: #2271b1; color: #fff; }
.xui-btn-trial:hover { background: #1a5c96; }
.xui-btn-paid  { background: #00a32a; color: #fff; }
.xui-btn-paid:hover  { background: #007a1f; }
.xui-btn:disabled { opacity: .55; cursor: not-allowed; }

/* Plan picker */
.xui-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    margin-bottom: 4px;
}
.xui-plan-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 12px 8px;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    text-align: center;
}
.xui-plan-card input[type="radio"] { display: none; }
.xui-plan-card.xui-plan-selected,
.xui-plan-card:has(input:checked) {
    border-color: #00a32a;
    background: #f0fdf4;
}
.xui-plan-name  { font-weight: 700; font-size: .9rem; }
.xui-plan-price { color: #00a32a; font-weight: 700; font-size: 1rem; margin-top: 4px; }

/* Price summary */
.xui-price-summary {
    text-align: right;
    font-size: 1rem;
    padding: 10px 0;
    border-top: 1px solid #eee;
    margin-bottom: 14px;
}

/* Payment note */
.xui-payment-note {
    background: #f0f6ff;
    border: 1px solid #b0cfff;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: .88rem;
}
.xui-payment-note p { margin: 0; }

/* Messages */
.xui-form-msg {
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-weight: 600;
}
.xui-form-msg.is-error   { background: #fce8e8; color: #962020; }
.xui-form-msg.is-success { background: #d7f0dd; color: #1a6b2b; }

/* Success boxes */
.xui-success-box {
    border-radius: 10px;
    padding: 20px 24px;
    margin-top: 16px;
}
.xui-success-box { background: #f0fdf4; border: 1px solid #86efac; }
.xui-success-paid { background: #f5f0ff; border: 1px solid #c084fc; }

.xui-cred-table { border-collapse: collapse; width: 100%; margin-top: 10px; }
.xui-cred-table th,
.xui-cred-table td {
    padding: 7px 10px;
    border: 1px solid #e2e8f0;
    text-align: left;
    font-size: .92rem;
}
.xui-cred-table th { background: #f8fafc; width: 110px; }

.xui-btn-upgrade {
    display: inline-block;
    background: #7c3aed;
    color: #fff;
    padding: 9px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    font-size: .9rem;
    width: auto;
}
.xui-btn-upgrade:hover { background: #6d28d9; color: #fff; }