/**
 * Homologation Checker - Frontend Styles
 *
 * Fully isolated, pixel-based design system with Apple-inspired aesthetics.
 * Brand Blue: #718EB6
 *
 * This stylesheet uses scoped CSS custom properties defined within the
 * container itself to ensure complete isolation from WordPress themes.
 * All values are in pixels for predictable rendering.
 *
 * @package HomologationChecker
 * @version 1.2.0
 */

/* ==========================================================================
   Main Container with Scoped Design Tokens

   CSS custom properties are defined within the container scope to ensure
   they work correctly with the CSS reset. This provides complete isolation
   from any WordPress theme styling.
   ========================================================================== */

.hc-container {
    /* ======================================================================
       Design Tokens (Scoped)
       ====================================================================== */

    /* Brand Colors */
    --hc-brand: #718EB6;
    --hc-brand-hover: #5a7aa3;
    --hc-brand-active: #4d6b91;
    --hc-brand-light: rgba(113, 142, 182, 0.1);
    --hc-brand-lighter: rgba(113, 142, 182, 0.05);

    /* Neutral Colors */
    --hc-white: #FFFFFF;
    --hc-gray-50: #F9FAFB;
    --hc-gray-100: #F3F4F6;
    --hc-gray-200: #E5E7EB;
    --hc-gray-300: #D1D5DB;
    --hc-gray-400: #9CA3AF;
    --hc-gray-500: #6B7280;
    --hc-gray-600: #4B5563;
    --hc-gray-700: #374151;
    --hc-gray-800: #1F2937;
    --hc-gray-900: #111827;

    /* Semantic Colors */
    --hc-success: #10B981;
    --hc-success-light: rgba(16, 185, 129, 0.1);
    --hc-warning: #F59E0B;
    --hc-warning-light: rgba(245, 158, 11, 0.1);
    --hc-error: #EF4444;
    --hc-error-light: rgba(239, 68, 68, 0.1);

    /* ======================================================================
       Explicit CSS Reset for Theme Isolation
       ====================================================================== */

    /* Reset inherited properties */
    margin: 0 auto;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;

    /* Establish our own styling */
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 680px;
    padding: 40px;

    /* Typography - all explicit pixel values */
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--hc-gray-900);
    text-align: left;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0;
    text-shadow: none;
    white-space: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Visual styling */
    background: var(--hc-white);
    border-radius: 24px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Ensure all child elements use our styles */
.hc-container *,
.hc-container *::before,
.hc-container *::after {
    box-sizing: border-box;
    font-family: inherit;
}

/* ==========================================================================
   Header Section
   ========================================================================== */

.hc-header {
    text-align: center;
    margin: 0 0 32px 0;
    padding: 0;
}

.hc-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--hc-gray-900);
    margin: 0 0 8px 0;
    padding: 0;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.hc-subtitle {
    font-size: 16px;
    font-weight: 400;
    color: var(--hc-gray-500);
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

/* ==========================================================================
   Form Styles
   ========================================================================== */

.hc-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
}

.hc-input-wrapper {
    position: relative;
    margin: 0;
    padding: 0;
}

.hc-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--hc-gray-700);
    margin: 0 0 8px 0;
    padding: 0;
}

/* Screen reader only text */
.hc-container .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.hc-input {
    display: block;
    width: 100%;
    height: 56px;
    padding: 16px 20px;
    font-family: inherit;
    font-size: 18px;
    font-weight: 400;
    color: var(--hc-gray-900);
    line-height: 1.5;
    letter-spacing: 0.05em;
    background-color: var(--hc-gray-50);
    border: 2px solid var(--hc-gray-200);
    border-radius: 12px;
    outline: none;
    transition: all 200ms ease;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

.hc-input::placeholder {
    color: var(--hc-gray-400);
    font-weight: 400;
    opacity: 1;
}

.hc-input:hover {
    border-color: var(--hc-gray-300);
    background-color: var(--hc-white);
}

.hc-input:focus {
    border-color: var(--hc-brand);
    background-color: var(--hc-white);
    box-shadow: 0 0 0 4px var(--hc-brand-light);
}

.hc-input:disabled {
    background-color: var(--hc-gray-100);
    color: var(--hc-gray-400);
    cursor: not-allowed;
}

.hc-input.hc-input--error {
    border-color: var(--hc-error);
}

.hc-input.hc-input--error:focus {
    box-shadow: 0 0 0 4px var(--hc-error-light);
}

.hc-hint {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--hc-gray-400);
    margin: 8px 0 0 4px;
    padding: 0;
}

/* ==========================================================================
   Button Styles
   ========================================================================== */

.hc-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 56px;
    padding: 16px 32px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: var(--hc-white);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    background: linear-gradient(180deg, var(--hc-brand) 0%, var(--hc-brand-hover) 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    outline: none;
    transition: all 200ms ease;
    box-shadow: 0 2px 4px rgba(113, 142, 182, 0.3);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

.hc-button:hover:not(:disabled) {
    background: linear-gradient(180deg, var(--hc-brand-hover) 0%, var(--hc-brand-active) 100%);
    box-shadow: 0 4px 12px rgba(113, 142, 182, 0.4);
    transform: translateY(-1px);
}

.hc-button:active:not(:disabled) {
    background: var(--hc-brand-active);
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(113, 142, 182, 0.3);
}

.hc-button:focus-visible {
    box-shadow: 0 0 0 4px var(--hc-brand-light), 0 4px 12px rgba(113, 142, 182, 0.4);
}

.hc-button:disabled {
    background: var(--hc-gray-300);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.hc-button-text {
    display: inline-block;
}

.hc-button-loading {
    display: none;
    align-items: center;
    gap: 8px;
}

.hc-button.hc-button--loading .hc-button-text {
    display: none;
}

.hc-button.hc-button--loading .hc-button-loading {
    display: flex;
}

/* ==========================================================================
   Spinner Animation
   ========================================================================== */

.hc-spinner {
    width: 20px;
    height: 20px;
    animation: hc-spin 1s linear infinite;
}

.hc-spinner-circle {
    stroke: currentColor;
    stroke-linecap: round;
    stroke-dasharray: 63;
    stroke-dashoffset: 50;
    animation: hc-dash 1.5s ease-in-out infinite;
}

@keyframes hc-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes hc-dash {
    0% { stroke-dashoffset: 63; }
    50% { stroke-dashoffset: 15; }
    100% { stroke-dashoffset: 63; }
}

/* ==========================================================================
   Result Container
   ========================================================================== */

.hc-result {
    margin: 32px 0 0 0;
    padding: 0;
}

.hc-result:empty {
    display: none;
    margin: 0;
}

/* Result Card */
.hc-result-card {
    background: var(--hc-gray-50);
    border-radius: 16px;
    padding: 28px;
    margin: 0;
    animation: hc-fadeIn 300ms ease-out;
}

@keyframes hc-fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Success State */
.hc-result-card--success {
    background: linear-gradient(135deg, var(--hc-brand-lighter) 0%, var(--hc-white) 100%);
    border: 1px solid var(--hc-brand-light);
}

/* Error State */
.hc-result-card--error {
    background: linear-gradient(135deg, var(--hc-error-light) 0%, var(--hc-white) 100%);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Not Found State */
.hc-result-card--not-found {
    background: linear-gradient(135deg, var(--hc-warning-light) 0%, var(--hc-white) 100%);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Result Header */
.hc-result-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 20px 0;
    padding: 0 0 16px 0;
    border-bottom: 1px solid var(--hc-gray-200);
}

.hc-result-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    flex-shrink: 0;
}

.hc-result-icon--success {
    background: var(--hc-brand-light);
    color: var(--hc-brand);
}

.hc-result-icon--error {
    background: var(--hc-error-light);
    color: var(--hc-error);
}

.hc-result-icon--not-found {
    background: var(--hc-warning-light);
    color: var(--hc-warning);
}

.hc-result-icon svg {
    width: 26px;
    height: 26px;
}

.hc-result-title-wrapper {
    flex: 1;
    min-width: 0;
}

.hc-result-type {
    font-size: 11px;
    font-weight: 600;
    color: var(--hc-brand);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 4px 0;
    padding: 0;
}

.hc-result-status {
    font-size: 20px;
    font-weight: 600;
    color: var(--hc-gray-900);
    margin: 0;
    padding: 0;
    line-height: 1.3;
}

/* Result Body */
.hc-result-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
}

.hc-result-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 0;
    padding: 0;
}

.hc-result-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--hc-gray-500);
    min-width: 110px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

.hc-result-value {
    font-size: 14px;
    font-weight: 400;
    color: var(--hc-gray-800);
    word-break: break-word;
    margin: 0;
    padding: 0;
}

/* Confirmation Link */
.hc-result-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin: 16px 0 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--hc-brand);
    text-decoration: none;
    background: var(--hc-brand-light);
    border-radius: 8px;
    transition: all 200ms ease;
}

.hc-result-link:hover {
    background: var(--hc-brand);
    color: var(--hc-white);
}

.hc-result-link svg {
    width: 16px;
    height: 16px;
}

/* Instruction Link variant */
.hc-result-link--instruction {
    margin: 12px 0 0 0;
    background: var(--hc-success-light);
    color: var(--hc-success);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.hc-result-link--instruction:hover {
    background: var(--hc-success);
    color: var(--hc-white);
}

/* KDI Hint Text */
.hc-kdi-hint {
    margin: 12px 0 0 0;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--hc-gray-700);
    background: var(--hc-warning-light);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 8px;
}

/* ==========================================================================
   eDatenplattform Link with Tooltip
   ========================================================================== */

.hc-result-row--edatenplattform {
    padding: 12px 0;
    margin: 0 0 4px 0;
}

.hc-edatenplattform-link-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hc-edatenplattform-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--hc-brand);
    text-decoration: none;
    background: var(--hc-brand-light);
    border: 1.5px solid var(--hc-brand);
    border-radius: 8px;
    transition: all 200ms ease;
}

.hc-edatenplattform-link:hover {
    background: var(--hc-brand);
    color: var(--hc-white);
    box-shadow: 0 4px 8px rgba(113, 142, 182, 0.4);
    transform: translateY(-1px);
}

.hc-edatenplattform-link:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(113, 142, 182, 0.3);
}

.hc-edatenplattform-link svg {
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   ASTRA Button with Tooltip
   ========================================================================== */

.hc-result-row--astra {
    padding: 12px 0 16px 0;
    margin: 0 0 8px 0;
    border-bottom: 1px solid var(--hc-gray-200);
}

.hc-astra-button-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hc-astra-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--hc-white);
    background: var(--hc-brand);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 200ms ease;
    box-shadow: 0 2px 4px rgba(113, 142, 182, 0.3);
    -webkit-appearance: none;
    appearance: none;
}

.hc-astra-button:hover:not(.hc-astra-button--disabled) {
    background: var(--hc-brand-hover);
    box-shadow: 0 4px 8px rgba(113, 142, 182, 0.4);
    transform: translateY(-1px);
}

.hc-astra-button:active:not(.hc-astra-button--disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(113, 142, 182, 0.3);
}

.hc-astra-button svg {
    width: 16px;
    height: 16px;
}

/* Disabled ASTRA Button */
.hc-astra-button--disabled {
    background: var(--hc-gray-300);
    color: var(--hc-gray-500);
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.7;
}

.hc-astra-button--disabled:hover {
    background: var(--hc-gray-300);
    color: var(--hc-gray-500);
    box-shadow: none;
    transform: none;
}

/* ==========================================================================
   ASTRA Form Section
   ========================================================================== */

.hc-astra-form-section {
    margin: 24px 0 0 0;
    padding: 0;
    animation: hc-fadeIn 300ms ease-out;
}

.hc-astra-form-container {
    padding: 24px;
    background: var(--hc-gray-50);
    border-radius: 12px;
    border: 1px solid var(--hc-gray-200);
}

.hc-astra-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 20px 0;
    padding: 0 0 16px 0;
    border-bottom: 1px solid var(--hc-gray-200);
}

.hc-astra-form-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--hc-gray-900);
    margin: 0;
    padding: 0;
}

.hc-astra-form-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--hc-gray-400);
    cursor: pointer;
    transition: all 150ms ease;
}

.hc-astra-form-close:hover {
    background: var(--hc-gray-200);
    color: var(--hc-gray-600);
}

.hc-astra-form-close svg {
    width: 20px;
    height: 20px;
}

/* ASTRA Gravity Forms Styling Override */
.hc-astra-form-content .gform_wrapper {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}

.hc-astra-form-content .gform_wrapper form {
    margin: 0 !important;
}

.hc-astra-form-content .gform_wrapper .gform_body {
    margin: 0 !important;
}

.hc-astra-form-content .gform_wrapper .gform_fields {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.hc-astra-form-content .gform_wrapper .gfield {
    margin: 0 !important;
    padding: 0 !important;
}

.hc-astra-form-content .gform_wrapper .gfield_label {
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--hc-gray-700) !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
}

.hc-astra-form-content .gform_wrapper input[type="text"],
.hc-astra-form-content .gform_wrapper input[type="email"],
.hc-astra-form-content .gform_wrapper input[type="tel"],
.hc-astra-form-content .gform_wrapper input[type="number"],
.hc-astra-form-content .gform_wrapper select,
.hc-astra-form-content .gform_wrapper textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--hc-gray-900) !important;
    background-color: var(--hc-white) !important;
    border: 1.5px solid var(--hc-gray-200) !important;
    border-radius: 10px !important;
    outline: none !important;
    transition: all 200ms ease !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.hc-astra-form-content .gform_wrapper input:focus,
.hc-astra-form-content .gform_wrapper select:focus,
.hc-astra-form-content .gform_wrapper textarea:focus {
    border-color: var(--hc-brand) !important;
    box-shadow: 0 0 0 3px var(--hc-brand-light) !important;
}

.hc-astra-form-content .gform_wrapper textarea {
    min-height: 100px !important;
    resize: vertical !important;
}

.hc-astra-form-content .gform_wrapper .gform_footer {
    margin: 20px 0 0 0 !important;
    padding: 0 !important;
}

.hc-astra-form-content .gform_wrapper input[type="submit"],
.hc-astra-form-content .gform_wrapper .gform_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 180px !important;
    height: 48px !important;
    padding: 0 32px !important;
    margin: 0 !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 48px !important;
    color: var(--hc-white) !important;
    background: var(--hc-brand) !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 200ms ease !important;
    box-shadow: 0 2px 4px rgba(113, 142, 182, 0.3) !important;
    text-align: center !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

.hc-astra-form-content .gform_wrapper input[type="submit"]:hover,
.hc-astra-form-content .gform_wrapper .gform_button:hover {
    background: var(--hc-brand-hover) !important;
    box-shadow: 0 4px 8px rgba(113, 142, 182, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* ASTRA Gravity Forms Validation */
.hc-astra-form-content .gform_wrapper .gfield_error input,
.hc-astra-form-content .gform_wrapper .gfield_error textarea,
.hc-astra-form-content .gform_wrapper .gfield_error select {
    border-color: var(--hc-error) !important;
}

.hc-astra-form-content .gform_wrapper .validation_message {
    font-size: 12px !important;
    color: var(--hc-error) !important;
    margin: 6px 0 0 0 !important;
    padding: 0 !important;
}

/* ASTRA Gravity Forms Confirmation */
.hc-astra-form-content .gform_confirmation_message {
    padding: 20px !important;
    font-size: 15px !important;
    color: var(--hc-gray-700) !important;
    background: var(--hc-success-light) !important;
    border-radius: 10px !important;
    text-align: center !important;
}

/* Tooltip */
.hc-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.hc-tooltip-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0;
    color: var(--hc-gray-400);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: help;
    transition: all 150ms ease;
}

.hc-tooltip-trigger:hover,
.hc-tooltip-trigger:focus {
    color: var(--hc-brand);
    background: var(--hc-brand-light);
    outline: none;
}

.hc-tooltip-trigger svg {
    width: 16px;
    height: 16px;
}

.hc-tooltip-content {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%);
    width: max-content;
    max-width: 280px;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--hc-white);
    background: var(--hc-gray-800);
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: all 150ms ease;
    z-index: 1000;
    pointer-events: none;
}

.hc-tooltip-content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--hc-gray-800);
}

.hc-tooltip-trigger:hover + .hc-tooltip-content,
.hc-tooltip-trigger:focus + .hc-tooltip-content {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   Contact/Inquiry Section - Gravity Form Integration
   ========================================================================== */

/* Inquiry Section Container */
.hc-inquiry-section {
    margin: 24px 0 0 0;
    padding: 0;
}

/* Inquiry CTA - shown after search results */
.hc-inquiry-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 0 0;
    padding: 16px 0 0 0;
    border-top: 1px solid var(--hc-gray-200);
}

.hc-inquiry-cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--hc-brand-light);
    border-radius: 50%;
    color: var(--hc-brand);
    flex-shrink: 0;
}

.hc-inquiry-cta-icon svg {
    width: 18px;
    height: 18px;
}

.hc-inquiry-cta-content {
    flex: 1;
    min-width: 0;
}

.hc-inquiry-cta-text {
    font-size: 14px;
    font-weight: 400;
    color: var(--hc-gray-600);
    margin: 0 0 8px 0;
    padding: 0;
    line-height: 1.4;
}

.hc-inquiry-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--hc-brand);
    text-decoration: none;
    background: transparent;
    border: 1.5px solid var(--hc-brand);
    border-radius: 8px;
    cursor: pointer;
    transition: all 200ms ease;
    -webkit-appearance: none;
    appearance: none;
}

.hc-inquiry-button:hover {
    background: var(--hc-brand);
    color: var(--hc-white);
}

.hc-inquiry-button svg {
    width: 14px;
    height: 14px;
    transition: transform 200ms ease;
}

.hc-inquiry-button[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* Inquiry Form Container - Expandable Accordion */
.hc-inquiry-form {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
    transition: max-height 400ms ease, opacity 300ms ease, margin 300ms ease, padding 300ms ease;
}

.hc-inquiry-form.hc-inquiry-form--open {
    max-height: 1500px;
    opacity: 1;
    margin: 24px 0 0 0;
    padding: 24px;
    background: var(--hc-gray-50);
    border-radius: 12px;
    border: 1px solid var(--hc-gray-200);
}

.hc-inquiry-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 20px 0;
    padding: 0 0 16px 0;
    border-bottom: 1px solid var(--hc-gray-200);
}

.hc-inquiry-form-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--hc-gray-900);
    margin: 0;
    padding: 0;
}

.hc-inquiry-form-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--hc-gray-400);
    cursor: pointer;
    transition: all 150ms ease;
}

.hc-inquiry-form-close:hover {
    background: var(--hc-gray-200);
    color: var(--hc-gray-600);
}

.hc-inquiry-form-close svg {
    width: 20px;
    height: 20px;
}

/* Gravity Forms Styling Override */
.hc-inquiry-form .gform_wrapper {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}

.hc-inquiry-form .gform_wrapper form {
    margin: 0 !important;
}

.hc-inquiry-form .gform_wrapper .gform_body {
    margin: 0 !important;
}

.hc-inquiry-form .gform_wrapper .gform_fields {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.hc-inquiry-form .gform_wrapper .gfield {
    margin: 0 !important;
    padding: 0 !important;
}

.hc-inquiry-form .gform_wrapper .gfield_label {
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--hc-gray-700) !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
}

.hc-inquiry-form .gform_wrapper input[type="text"],
.hc-inquiry-form .gform_wrapper input[type="email"],
.hc-inquiry-form .gform_wrapper input[type="tel"],
.hc-inquiry-form .gform_wrapper input[type="number"],
.hc-inquiry-form .gform_wrapper select,
.hc-inquiry-form .gform_wrapper textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--hc-gray-900) !important;
    background-color: var(--hc-white) !important;
    border: 1.5px solid var(--hc-gray-200) !important;
    border-radius: 10px !important;
    outline: none !important;
    transition: all 200ms ease !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.hc-inquiry-form .gform_wrapper input:focus,
.hc-inquiry-form .gform_wrapper select:focus,
.hc-inquiry-form .gform_wrapper textarea:focus {
    border-color: var(--hc-brand) !important;
    box-shadow: 0 0 0 3px var(--hc-brand-light) !important;
}

.hc-inquiry-form .gform_wrapper textarea {
    min-height: 100px !important;
    resize: vertical !important;
}

.hc-inquiry-form .gform_wrapper .gform_footer {
    margin: 20px 0 0 0 !important;
    padding: 0 !important;
}

.hc-inquiry-form .gform_wrapper input[type="submit"],
.hc-inquiry-form .gform_wrapper .gform_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 180px !important;
    height: 48px !important;
    padding: 0 32px !important;
    margin: 0 !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 48px !important;
    color: var(--hc-white) !important;
    background: var(--hc-brand) !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 200ms ease !important;
    box-shadow: 0 2px 4px rgba(113, 142, 182, 0.3) !important;
    text-align: center !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

.hc-inquiry-form .gform_wrapper input[type="submit"]:hover,
.hc-inquiry-form .gform_wrapper .gform_button:hover {
    background: var(--hc-brand-hover) !important;
    box-shadow: 0 4px 8px rgba(113, 142, 182, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* Gravity Forms File Upload Field */
.hc-inquiry-form .gform_wrapper .gfield_fileupload {
    position: relative !important;
}

.hc-inquiry-form .gform_wrapper .ginput_container_fileupload {
    position: relative !important;
    display: block !important;
}

.hc-inquiry-form .gform_wrapper .gform_drop_area {
    padding: 24px !important;
    background: var(--hc-gray-50) !important;
    border: 2px dashed var(--hc-gray-300) !important;
    border-radius: 10px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 200ms ease !important;
}

.hc-inquiry-form .gform_wrapper .gform_drop_area:hover {
    border-color: var(--hc-brand) !important;
    background: var(--hc-brand-light) !important;
}

.hc-inquiry-form .gform_wrapper .gform_drop_instructions {
    font-size: 14px !important;
    color: var(--hc-gray-600) !important;
    margin: 0 0 12px 0 !important;
}

.hc-inquiry-form .gform_wrapper .gform_button_select_files,
.hc-inquiry-form .gform_wrapper button.gform_button_select_files {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 20px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--hc-brand) !important;
    background: var(--hc-white) !important;
    border: 1.5px solid var(--hc-brand) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 200ms ease !important;
    position: relative !important;
    z-index: 1 !important;
    pointer-events: auto !important;
}

.hc-inquiry-form .gform_wrapper .gform_button_select_files:hover,
.hc-inquiry-form .gform_wrapper button.gform_button_select_files:hover {
    background: var(--hc-brand) !important;
    color: var(--hc-white) !important;
}

/* File upload input - ensure it's clickable */
.hc-inquiry-form .gform_wrapper input[type="file"] {
    position: relative !important;
    z-index: 2 !important;
    cursor: pointer !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* File preview/list */
.hc-inquiry-form .gform_wrapper .ginput_preview {
    margin: 12px 0 0 0 !important;
    padding: 12px !important;
    background: var(--hc-gray-50) !important;
    border-radius: 8px !important;
}

.hc-inquiry-form .gform_wrapper .ginput_preview_list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hc-inquiry-form .gform_wrapper .ginput_preview_list li {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 0 !important;
    font-size: 13px !important;
    color: var(--hc-gray-700) !important;
}

.hc-inquiry-form .gform_wrapper .gform_delete {
    color: var(--hc-error) !important;
    cursor: pointer !important;
}

/* Gravity Forms Validation */
.hc-inquiry-form .gform_wrapper .gfield_error input,
.hc-inquiry-form .gform_wrapper .gfield_error textarea,
.hc-inquiry-form .gform_wrapper .gfield_error select {
    border-color: var(--hc-error) !important;
}

.hc-inquiry-form .gform_wrapper .validation_message {
    font-size: 12px !important;
    color: var(--hc-error) !important;
    margin: 6px 0 0 0 !important;
    padding: 0 !important;
}

/* Gravity Forms Confirmation */
.hc-inquiry-form .gform_confirmation_message {
    padding: 20px !important;
    font-size: 15px !important;
    color: var(--hc-gray-700) !important;
    background: var(--hc-success-light) !important;
    border-radius: 10px !important;
    text-align: center !important;
}

/* Error Message */
.hc-result-message {
    font-size: 16px;
    font-weight: 400;
    color: var(--hc-gray-700);
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

.hc-result-card--error .hc-result-message {
    color: var(--hc-error);
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media screen and (max-width: 768px) {
    .hc-container {
        max-width: none;
        margin: 16px;
        padding: 28px;
        border-radius: 20px;
    }

    .hc-title {
        font-size: 24px;
    }

    .hc-subtitle {
        font-size: 15px;
    }

    .hc-input {
        height: 52px;
        padding: 14px 16px;
        font-size: 16px;
    }

    .hc-button {
        height: 52px;
    }

    .hc-result-row {
        flex-direction: column;
        gap: 4px;
    }

    .hc-result-label {
        min-width: 0;
    }

    .hc-inquiry-cta {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .hc-inquiry-form.hc-inquiry-form--open {
        padding: 20px;
    }
}

@media screen and (max-width: 480px) {
    .hc-container {
        margin: 12px;
        padding: 24px;
        border-radius: 16px;
    }

    .hc-header {
        margin-bottom: 24px;
    }

    .hc-title {
        font-size: 22px;
    }

    .hc-subtitle {
        font-size: 14px;
    }

    .hc-input {
        height: 50px;
        font-size: 16px;
    }

    .hc-button {
        height: 50px;
        font-size: 15px;
    }

    .hc-result-card {
        padding: 20px;
    }

    .hc-result-icon {
        width: 44px;
        height: 44px;
    }

    .hc-result-icon svg {
        width: 22px;
        height: 22px;
    }

    .hc-result-status {
        font-size: 18px;
    }

    .hc-tooltip-content {
        left: auto;
        right: -10px;
        transform: none;
        max-width: 240px;
    }

    .hc-tooltip-content::after {
        left: auto;
        right: 18px;
        transform: none;
    }

    .hc-astra-button-wrapper,
    .hc-edatenplattform-link-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .hc-inquiry-form.hc-inquiry-form--open,
    .hc-astra-form-container {
        padding: 16px;
    }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.hc-container *:focus-visible {
    outline: 2px solid var(--hc-brand);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .hc-container *,
    .hc-container *::before,
    .hc-container *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .hc-container {
        box-shadow: none;
        border: 1px solid var(--hc-gray-300);
    }

    .hc-form {
        display: none;
    }

    .hc-inquiry-cta,
    .hc-inquiry-form,
    .hc-astra-form-section {
        display: none;
    }
}