/**
 * ACF Frontend Styles
 * Styles for ACF fields displayed on the frontend
 */

/* ACF Field Container */
.acf-field {
    @apply mb-4;
}

.acf-field .acf-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
}

.acf-field .acf-input {
    @apply w-full;
}

/* ACF Image Fields */
.acf-field[data-type="image"] img {
    @apply max-w-full h-auto rounded-lg shadow-sm;
}

/* ACF Gallery Fields */
.acf-field[data-type="gallery"] .acf-gallery {
    @apply grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4;
}

.acf-field[data-type="gallery"] .acf-gallery .acf-gallery-attachment {
    @apply relative overflow-hidden rounded-lg shadow-sm;
}

.acf-field[data-type="gallery"] .acf-gallery .acf-gallery-attachment img {
    @apply w-full h-auto transition-transform duration-300 hover:scale-105;
}

/* ACF WYSIWYG Fields */
.acf-field[data-type="wysiwyg"] .acf-editor-wrap {
    @apply border border-gray-300 rounded-md;
}

/* ACF Repeater Fields */
.acf-field[data-type="repeater"] .acf-repeater {
    @apply space-y-4;
}

.acf-field[data-type="repeater"] .acf-row {
    @apply border border-gray-200 rounded-lg p-4 bg-gray-50;
}

.acf-field[data-type="repeater"] .acf-row-handle {
    @apply flex items-center justify-between mb-3 pb-3 border-b border-gray-300;
}

.acf-field[data-type="repeater"] .acf-row-handle .acf-row-number {
    @apply font-semibold text-gray-700;
}

/* ACF Flexible Content Fields */
.acf-field[data-type="flexible_content"] .acf-flexible-content {
    @apply space-y-6;
}

.acf-field[data-type="flexible_content"] .acf-layout {
    @apply border border-gray-200 rounded-lg p-6 bg-white shadow-sm;
}

.acf-field[data-type="flexible_content"] .acf-layout-handle {
    @apply flex items-center justify-between mb-4 pb-4 border-b border-gray-300;
}

.acf-field[data-type="flexible_content"] .acf-layout-handle .acf-layout-title {
    @apply font-semibold text-gray-800;
}

/* ACF Button Group */
.acf-field[data-type="button_group"] .acf-button-group {
    @apply flex flex-wrap gap-2;
}

.acf-field[data-type="button_group"] .acf-button-group label {
    @apply px-3 py-2 text-sm font-medium rounded-md border cursor-pointer transition-colors;
    @apply bg-white border-gray-300 text-gray-700 hover:bg-gray-50;
}

.acf-field[data-type="button_group"] .acf-button-group input:checked + label {
    @apply bg-blue-600 border-blue-600 text-white;
}

/* ACF Checkbox Fields */
.acf-field[data-type="checkbox"] .acf-checkbox-list {
    @apply space-y-2;
}

.acf-field[data-type="checkbox"] .acf-checkbox-list li {
    @apply flex items-center;
}

.acf-field[data-type="checkbox"] .acf-checkbox-list label {
    @apply ml-2 text-sm text-gray-700 cursor-pointer;
}

/* ACF Radio Fields */
.acf-field[data-type="radio"] .acf-radio-list {
    @apply space-y-2;
}

.acf-field[data-type="radio"] .acf-radio-list li {
    @apply flex items-center;
}

.acf-field[data-type="radio"] .acf-radio-list label {
    @apply ml-2 text-sm text-gray-700 cursor-pointer;
}

/* ACF Select Fields */
.acf-field[data-type="select"] select {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}

/* ACF Text Fields */
.acf-field[data-type="text"] input,
.acf-field[data-type="textarea"] textarea,
.acf-field[data-type="email"] input,
.acf-field[data-type="url"] input,
.acf-field[data-type="number"] input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}

/* ACF Date Picker */
.acf-field[data-type="date_picker"] input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}

/* ACF Color Picker */
.acf-field[data-type="color_picker"] .acf-color-picker {
    @apply flex items-center space-x-3;
}

.acf-field[data-type="color_picker"] .acf-color-picker input[type="text"] {
    @apply w-24 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}

/* ACF Range Field */
.acf-field[data-type="range"] input[type="range"] {
    @apply w-full;
}

.acf-field[data-type="range"] .acf-range-wrap {
    @apply flex items-center space-x-3;
}

.acf-field[data-type="range"] .acf-range-wrap .acf-range-value {
    @apply text-sm font-medium text-gray-700;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .acf-field[data-type="gallery"] .acf-gallery {
        @apply grid-cols-2;
    }
    
    .acf-field[data-type="repeater"] .acf-row,
    .acf-field[data-type="flexible_content"] .acf-layout {
        @apply p-3;
    }
}

/* Hide ACF admin elements on frontend */
.acf-field .acf-label .acf-required {
    @apply hidden;
}

.acf-field .acf-input-wrap .acf-actions {
    @apply hidden;
}