/**
 * Magex_Revocation – Widerrufsbutton
 * Minimal custom CSS; all layout uses Tailwind CSS utility classes.
 * Only component-specific styles that cannot be expressed via Tailwind are defined here.
 */

/* ── Footer Button ─────────────────────────────────────────────── */
.magex-revocation-footer {
    @apply text-center py-3;
}

.magex-revocation-btn {
    @apply inline-flex items-center gap-1.5
           px-4 py-2
           text-sm font-medium
           border border-gray-400 rounded
           text-gray-600
           no-underline
           transition-colors duration-200;
}

.magex-revocation-btn:hover {
    @apply bg-gray-100 text-gray-800;
}

/* ── Form ──────────────────────────────────────────────────────── */
.magex-revocation-form {
    @apply bg-gray-50 border border-gray-200 rounded-lg p-7;
}

.magex-input {
    @apply w-full px-3.5 py-2.5
           border border-gray-300 rounded-md
           text-base bg-white
           transition-colors duration-150;
}

.magex-input:focus {
    @apply outline-none ring-2 ring-blue-500 border-transparent;
}

.magex-submit-btn {
    @apply w-full flex items-center justify-center gap-2
           px-6 py-3
           bg-blue-700 hover:bg-blue-800
           text-white text-base font-semibold
           rounded-md
           transition-colors duration-200;
}

.magex-submit-btn:disabled {
    @apply opacity-60 cursor-not-allowed;
}

/* ── Alert states ──────────────────────────────────────────────── */
.magex-alert {
    @apply px-4 py-3 rounded text-sm mb-5;
}

.magex-alert--success {
    @apply bg-green-100 border border-green-400 text-green-800;
}

.magex-alert--error {
    @apply bg-red-100 border border-red-400 text-red-800;
}