@import 'tailwindcss';

@source '../js/sdk/**/*.js';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}

:host {
    display: block;
    font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
    color: #111827;
    line-height: 1.5;
}

:host * {
    box-sizing: border-box;
}

@layer components {
    .lcf-form {
        @apply box-border font-sans text-gray-900;
        font-family: inherit;
        color: inherit;
    }

    .lcf-form * {
        @apply box-border;
    }

    .lcf-form-shell {
        @apply mx-auto max-w-4xl px-4 py-8;
    }

    .lcf-form-card {
        @apply bg-transparent;
    }

    .lcf-form-card-body {
        @apply p-0 text-gray-900 md:p-0;
    }

    .lcf-form-page-title {
        @apply mb-6 text-center text-2xl font-bold;
        color: #3f57a1;
    }

    .lcf-form-intro {
        @apply mb-6 rounded-xl border-l-4 border-blue-500 bg-gradient-to-r from-blue-50 to-indigo-50 p-5 text-sm leading-relaxed text-gray-700;
    }

    .lcf-form-section {
        @apply relative mb-8;
    }

    .lcf-form-section-header {
        @apply mb-5 border-b border-gray-200 pb-3;
    }

    .lcf-form-section-title {
        @apply text-lg font-semibold;
        color: #3f57a1;
    }

    .lcf-form-grid {
        @apply mb-4 grid grid-cols-1 gap-4 md:grid-cols-2;
    }

    .lcf-form-grid .lcf-form-grid-full {
        @apply md:col-span-2;
    }

    .lcf-form-field {
        @apply block;
    }

    .lcf-form-label {
        @apply mb-2 block text-sm font-medium text-gray-700;
    }

    .lcf-form-label-required::after {
        content: ' *';
        @apply font-bold text-red-500;
    }

    .lcf-form-input,
    .lcf-form-select {
        @apply w-full min-h-[2.75rem] rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 text-[0.9375rem] leading-normal text-gray-900 shadow-sm transition-colors;
    }

    .lcf-form-input:focus,
    .lcf-form-select:focus {
        @apply border-[#3f57a1] outline-none ring-2 ring-[#3f57a1]/20;
    }

    .lcf-form-input.uppercase {
        @apply uppercase;
    }

    .lcf-form-radio-group {
        @apply mt-2 flex flex-wrap gap-4;
    }

    .lcf-form-radio {
        @apply flex cursor-pointer items-center gap-2 text-sm font-normal text-gray-700;
    }

    .lcf-form-radio input {
        @apply h-4 w-4 border-gray-300;
        accent-color: #3f57a1;
    }

    .lcf-form-note {
        @apply mt-1.5 text-xs text-gray-500;
    }

    .lcf-form-privacy-block {
        @apply mb-4 rounded-lg border border-gray-200 p-4;
    }

    .lcf-form-privacy-block-required {
        @apply border-2 border-[#3f57a1]/40 bg-blue-50/50;
    }

    .lcf-form-privacy-block a {
        color: #3f57a1;
        @apply underline;
    }

    .lcf-form-bank-details {
        @apply my-3 rounded-lg border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-4 text-sm leading-relaxed text-gray-700;
    }

    .lcf-form-fee-option {
        @apply mb-2 block cursor-pointer rounded-lg border border-gray-200 p-3 transition-colors hover:border-[#3f57a1]/40 hover:bg-gray-50;
    }

    .lcf-form-fee-option input {
        @apply mr-2;
    }

    .lcf-form-checkbox {
        @apply flex items-start gap-2 text-sm text-gray-700;
    }

    .lcf-form-checkbox input {
        @apply mt-0.5;
    }

    .lcf-form-btn {
        @apply inline-flex cursor-pointer items-center justify-center rounded-lg border-0 px-5 py-2.5 text-base font-medium text-white shadow-sm transition-colors disabled:cursor-default disabled:opacity-60;
        background-color: #3f57a1;
    }

    .lcf-form-btn:hover:not(:disabled) {
        background-color: #2d3f75;
    }

    .lcf-form-btn-secondary {
        @apply mt-4 inline-flex cursor-pointer items-center justify-center rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-base font-medium text-gray-800 shadow-sm transition-colors hover:bg-gray-50;
    }

    .lcf-form-message {
        @apply mt-4 rounded-lg px-4 py-3 text-sm;
    }

    .lcf-form-message.success {
        @apply border border-green-200 bg-green-50 text-green-800;
    }

    .lcf-form-message.error {
        @apply border border-red-200 bg-red-50 text-red-800;
    }

    .lcf-form-amount {
        @apply my-3 text-2xl font-bold;
        color: #6ba3a9;
    }

    .lcf-form-pay-option {
        @apply mb-4;
    }

    .lcf-form-required-note {
        @apply mt-2 text-xs text-gray-500;
    }

    .lcf-form-required-note span {
        @apply font-bold text-red-500;
    }

    .lcf-form-tax-status {
        @apply mt-1 text-xs;
    }

    .lcf-form-tax-status.valid {
        @apply text-green-700;
    }

    .lcf-form-tax-status.invalid {
        @apply text-red-700;
    }

    .lcf-form-tax-status.pending {
        @apply italic text-gray-500;
    }

    .lcf-form-hidden {
        @apply hidden;
    }

    .lcf-form-loading {
        @apply pointer-events-none opacity-60;
    }

    .lcf-form .field-with-status.touched:valid:not(:blank),
    .lcf-form.form-submitted .field-with-status:valid:not(:blank) {
        border-color: #10b981 !important;
    }

    .lcf-form select.field-with-status:invalid:not(:focus) {
        border-color: inherit !important;
    }

    .lcf-form .field-with-status.touched:invalid:not(:focus),
    .lcf-form.form-submitted .field-with-status:invalid:not(:focus) {
        border-color: #ef4444 !important;
    }
}

.lcf-form h2,
.lcf-form h3 {
    margin: 0;
    padding: 0;
    font-weight: 600;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: normal;
}

.lcf-form p {
    margin: 0 0 1rem;
}

.lcf-form label {
    font-weight: inherit;
    text-transform: none;
    letter-spacing: normal;
}

.lcf-form-input,
.lcf-form-select {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 2.75rem;
    margin: 0;
    padding: 0.625rem 0.875rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background-color: #fff;
    color: #111827;
    font-size: 0.9375rem;
    line-height: 1.5;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    appearance: auto;
}

.lcf-form-input:focus,
.lcf-form-select:focus {
    border-color: #3f57a1;
    outline: none;
    box-shadow: 0 0 0 2px rgb(63 87 161 / 0.2);
}

.lcf-form-btn {
    width: auto;
    min-height: auto;
    margin: 0;
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 0.5rem;
    background-color: #3f57a1;
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    text-transform: none;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    cursor: pointer;
}

.lcf-form-btn:hover:not(:disabled) {
    background-color: #2d3f75;
}

.lcf-form-btn-secondary {
    background-color: #fff;
    color: #1f2937;
    border: 1px solid #d1d5db;
}

.lcf-form-radio input,
.lcf-form-checkbox input,
.lcf-form-fee-option input {
    width: auto;
    min-height: auto;
    margin: 0;
    box-shadow: none;
}

.lcf-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .lcf-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lcf-form-grid .lcf-form-grid-full {
        grid-column: 1 / -1;
    }
}

.lcf-form-hidden {
    display: none !important;
}