/* General Form Styles */
form {
    @apply bg-gray-50 p-8 rounded-lg shadow-md;
}

.wpas-inline-form {
    @apply bg-transparent p-0 rounded-none shadow-none;
}

/* Form Field Styles */
form label {
    @apply block mb-2 font-semibold;
}

.wpas-field {
    @apply flex flex-col gap-1;
    min-width: 180px;
}

.wpas-form-grid {
    @apply grid grid-cols-1 gap-4;
}

.wpas-form-grid--two {
    @apply md:grid-cols-2;
}


.wpas-language-row {
    @apply mb-4;
}

.wpas-field--lang {
    min-width: auto;
}

.wpas-lang-switch {
    @apply inline-flex items-center gap-1 rounded-xl p-1;
    background: #eef2f7;
    border: 1px solid var(--wpas-border);
}

.wpas-lang-switch__option {
    @apply inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-semibold;
    color: #53667c;
    text-decoration: none;
    min-height: 36px;
    min-width: 118px;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.wpas-lang-switch__option:hover {
    background: rgba(255, 255, 255, 0.75);
    color: var(--wpas-text);
}

.wpas-lang-switch__option.is-active {
    background: #ffffff;
    color: var(--wpas-text);
    box-shadow: 0 1px 4px rgba(19, 37, 58, 0.14);
}

.wpas-lang-switch__flag {
    display: inline-block;
    width: 20px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(19, 37, 58, 0.18);
    box-shadow: 0 1px 1px rgba(19, 37, 58, 0.14);
    flex-shrink: 0;
}

.wpas-lang-switch__flag--nl {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2060%2040%27%3E%3Crect%20width%3D%2760%27%20height%3D%2713.333%27%20y%3D%270%27%20fill%3D%27%23AE1C28%27%2F%3E%3Crect%20width%3D%2760%27%20height%3D%2713.333%27%20y%3D%2713.333%27%20fill%3D%27%23FFFFFF%27%2F%3E%3Crect%20width%3D%2760%27%20height%3D%2713.334%27%20y%3D%2726.666%27%20fill%3D%27%2321468B%27%2F%3E%3C%2Fsvg%3E");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.wpas-lang-switch__flag--en {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2060%2040%27%3E%3Crect%20width%3D%2760%27%20height%3D%2740%27%20fill%3D%27%23012169%27%2F%3E%3Cpath%20d%3D%27M0%200L60%2040M60%200L0%2040%27%20stroke%3D%27%23FFFFFF%27%20stroke-width%3D%2710%27%2F%3E%3Cpath%20d%3D%27M0%200L60%2040M60%200L0%2040%27%20stroke%3D%27%23C8102E%27%20stroke-width%3D%276%27%2F%3E%3Cpath%20d%3D%27M30%200V40M0%2020H60%27%20stroke%3D%27%23FFFFFF%27%20stroke-width%3D%2716%27%2F%3E%3Cpath%20d%3D%27M30%200V40M0%2020H60%27%20stroke%3D%27%23C8102E%27%20stroke-width%3D%2710%27%2F%3E%3C%2Fsvg%3E");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Typography Styles */
.h1-title {
    @apply text-3xl font-semibold mb-6;
}

.text-sm-font {
    @apply text-sm font-semibold;
}

.text-lg-font {
    @apply text-lg font-semibold;
}

.h2-title {
    @apply text-xl font-semibold mt-8 mb-4;
}

/* Button Styles */
.button-primary {
    @apply inline-block bg-blue-500 text-white py-2 px-4 rounded-md text-sm font-semibold hover:bg-blue-600;
}

.button-secondary {
    @apply py-3 px-6 rounded-md text-white text-sm font-semibold;
}

/* Disabled button state */
.button-secondary:disabled {
    @apply bg-gray-300 text-gray-600 cursor-not-allowed;
}

/* Active button state */
.button-secondary.active {
    @apply bg-green-500 hover:bg-green-600;
}

/* Inactive button state */
.button-secondary.inactive {
    @apply bg-gray-500 hover:bg-gray-600;
}

/* Danger button */
.button-danger {
    @apply text-red-500 hover:text-red-600;
}

/* Input and Textarea Styles */
.input-field {
    @apply w-full p-3 border rounded-md border-gray-300 mb-4;
}

.textarea-field {
    @apply w-full p-3 border rounded-md border-gray-300 mb-4 bg-white;
}

/* Legend Styles */
.legend {
    @apply text-lg font-semibold;
}

/* Table Styles */
.table-header {
    @apply bg-gray-100;
}

.table-row {
    @apply bg-white border-b hover:bg-gray-50;
}

.table-cell {
    @apply px-4 py-2;
}

/* Layout and Spacing Utilities */
.space-y-6 {
    @apply space-y-6;
}

.block-label {
    @apply block text-sm font-semibold;
}

/* Hover styles for primary button */
.button-primary:hover {
    @apply bg-blue-600;
}

.wpas-input,
.wpas-select {
    @apply w-full rounded-md border border-gray-300 bg-white px-3 py-2;
    min-height: 40px;
}

textarea.wpas-input {
    min-height: 120px;
}

.wpas-input:focus,
.wpas-select:focus {
    @apply outline-none;
    border-color: var(--wpas-accent);
    box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.16);
}

.wpas-form-actions {
    @apply mt-4 flex flex-wrap items-center gap-3;
}

.wpas-btn {
    @apply inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-semibold transition-colors duration-200;
    text-decoration: none;
}

.wpas-btn:focus {
    @apply outline-none;
    box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.16);
}

.wpas-btn--primary {
    background: var(--wpas-accent);
    color: #fff;
}

.wpas-btn--primary:hover {
    background: var(--wpas-accent-hover);
    color: #fff;
}

.wpas-btn--secondary {
    @apply border border-gray-300 shadow-sm;
    background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
    color: var(--wpas-text);
}

.wpas-btn--secondary:hover {
    background: #edf2f7;
    border-color: #c8d3e0;
    color: var(--wpas-text);
}

.wpas-btn--status {
    @apply px-3 py-1.5;
    min-height: 36px;
}


.product-toggle-btn {
    @apply px-2;
    min-width: 46px;
}

.product-toggle-btn .product-toggle-btn__icon {
    display: inline-block;
    position: relative;
    width: 30px;
    height: 18px;
    border-radius: 999px;
    background: #dce2ea;
    transition: background-color 0.2s ease;
}

.product-toggle-btn .product-toggle-btn__icon::before {
    content: none !important;
}

.product-toggle-btn .product-toggle-btn__icon::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(19, 37, 58, 0.18);
    transition: transform 0.2s ease;
}

.product-toggle-btn__icon.is-on {
    background: #7ac79d;
}

.product-toggle-btn__icon.is-on::after {
    transform: translateX(12px);
}

.product-toggle-btn__icon.is-off {
    background: #bcc6d2;
}

.product-toggle-btn:hover .product-toggle-btn__icon.is-on {
    background: #58b284;
}

.product-toggle-btn:hover .product-toggle-btn__icon.is-off {
    background: #a7b3c0;
}

.wpas-btn--ghost {
    background: transparent;
    color: var(--wpas-text-muted);
}

.wpas-btn--ghost:hover {
    color: var(--wpas-text);
}

.wpas-status-pill {
    @apply inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold;
    border: 1px solid transparent;
    letter-spacing: 0.01em;
    line-height: 1.2;
    white-space: nowrap;
}

.wpas-status-pill::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.5;
}

.wpas-status-pill--active,
.wpas-status-pill--processed {
    background: #e9f8ef;
    border-color: #cde8d8;
    color: #1a7f47;
}

.wpas-status-pill--inactive,
.wpas-status-pill--canceled {
    background: #f4f5f7;
    border-color: #dce2ea;
    color: #556274;
}