// Variables
@primary-color: #2271b1;  // WordPress primary blue color.
@border-radius: 8px;      // Consistent border radius across components.
@transition-speed: 0.2s;  // Standard transition speed for animations.

// Main container styles
.edge-images-wrap {
    max-width: 800px;
    margin: 20px 0;

    // Page title styling
    h1 {
        margin-bottom: 1em;
        padding-bottom: 1em;
        border-bottom: 1px solid #eee;
    }
}

// Settings container with card-like appearance
.edge-images-container {
    background: #fff;
    padding: 2em;
    border-radius: @border-radius;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

// Provider selector grid layout
.edge-images-provider-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1em;
    margin-bottom: 2em;
}

// Individual provider option styling
.edge-images-provider-option {
    display: block;
    cursor: pointer;

    // Hide radio input visually
    input[type="radio"] {
        display: none;
    }

    // Provider card styling
    .edge-images-provider-card {
        display: block;
        padding: 1.5em;
        background: #f8f9fa;
        border: 2px solid #e2e4e7;
        border-radius: @border-radius;
        transition: all @transition-speed ease;
        position: relative;
        overflow: hidden;
        text-align: center;

        // Hover effects
        &:hover {
            border-color: @primary-color;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }
    }

    // Selected state styling
    input[type="radio"]:checked + .edge-images-provider-card {
        background: #fff;
        border-color: @primary-color;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

        // Checkmark indicator
        &::after {
            content: "✓";
            position: absolute;
            top: 10px;
            right: 10px;
            color: @primary-color;
            font-weight: bold;
        }
    }
}

// Provider name text styling
.edge-images-provider-name {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: #1d2327;
}

// Settings field container styling
.edge-images-settings-field {
    margin: 0 0 2em;
    padding: 1.5em;
    background: #f8f9fa;
    border-radius: @border-radius;
    border: 1px solid #e2e4e7;

    // Field label styling
    label {
        display: block;
        font-weight: 600;
        margin-bottom: 0.5em;
    }

    // Help text styling
    .description {
        margin-top: 0.75em;
        color: #666;
        font-size: 13px;
        line-height: 1.5;
    }

    // Checkbox alignment
    input[type="checkbox"] {
        margin-right: 8px;
    }
}

// Submit button container
.submit {
    margin: 2em 0 0;
    padding: 1.5em 0 0;
    border-top: 1px solid #eee;
}

// Responsive adjustments for mobile
@media screen and (max-width: 782px) {
    .edge-images-provider-selector {
        grid-template-columns: 1fr;
    }
}

// Accessibility: Respect reduced motion preferences
@media (prefers-reduced-motion: reduce) {
    .edge-images-provider-option .edge-images-provider-card {
        transition: none;
        transform: none !important;
    }
}

// Add this to the existing CSS
.edge-images-imgix-field {
    display: none; // Hidden by default
}

// Add this to the existing CSS
.edge-images-intro {
    margin-bottom: 2em;
    padding-bottom: 1.5em;
    border-bottom: 1px solid #eee;

    p {
        font-size: 14px;
        line-height: 1.6;
        margin: 1em 0;
        max-width: 800px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    a {
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
}

// Add this to the existing CSS
.edge-images-integrations {
    margin-top: 2em;
    display: grid;
    gap: 16px;

    .integration-card {
        background: #fff;
        border: 1px solid #e2e4e7;
        border-radius: 12px;

        // Header row with icon and name
        .integration-header {
            display: flex;
            align-items: center;
            padding: 20px;
            background: #fafafa;
            border-bottom: 1px solid #eee;

            .dashicons {
                font-size: 20px;
                width: 20px;
                height: 20px;
                margin-right: 12px;

                &.dashicons-yes-alt {
                    color: #00a32a; // WordPress success green
                }

                &.dashicons-no-alt {
                    color: #d63638; // WordPress error red
                }
            }

            strong {
                font-size: 14px;
                font-weight: 600;
                color: #1d2327;
            }
        }

        // Settings area
        .integration-settings {
            padding: 20px;

            fieldset {
                margin: 0;

                p {
                    margin: 12px 0;

                    &:first-child {
                        margin-top: 0;
                    }

                    &:last-child {
                        margin-bottom: 0;
                    }

                    &.description {
                        margin-top: 16px;
                        padding-top: 16px;
                        border-top: 1px solid #eee;
                        color: #757575;
                        font-size: 13px;
                    }
                }

                label {
                    color: #1d2327;
                }
            }
        }
    }

    // Bottom description
    > .description {
        margin-top: 1em;
        color: #757575;
        font-size: 13px;
        grid-column: 1 / -1; // Span all columns
    }
}

// Respect reduced motion preferences
@media (prefers-reduced-motion: reduce) {
    .edge-images-integrations .integration-card {
        transition: none;
        transform: none !important;

        &:hover {
            transform: none !important;
        }
    }
}

// Features section styling
.edge-images-features {
	display: grid;
	gap: 16px;
	margin-top: 1em;

	.feature-card {
		background: #fff;
		border: 1px solid #e2e4e7;
		border-radius: 12px;
		overflow: hidden;

		.feature-header {
			padding: 16px;
			background: #fafafa;
			border-bottom: 1px solid #eee;

			strong {
				font-size: 14px;
				font-weight: 600;
				color: #1d2327;
			}
		}

		.feature-settings {
			padding: 16px;

			fieldset {
				margin: 0;

				p {
					margin: 8px 0;

					&:first-child {
						margin-top: 0;
					}

					&:last-child {
						margin-bottom: 0;
					}

					&.description {
						color: #757575;
						font-size: 13px;
						margin-top: 12px;
						padding-top: 12px;
						border-top: 1px solid #eee;
					}
				}
			}
		}
	}
}

// Disabled feature styles
.edge-images-feature-disabled {
    opacity: 0.5;
    pointer-events: none;
    position: relative;

    &::after {
        content: attr(data-disabled-reason);
        display: block;
        margin-top: 8px;
        color: #d63638;
        font-style: italic;
    }

    input[type="checkbox"] {
        opacity: 0.5;
    }
}