/*
 * Public Pages CSS - Overrides & Additions
 * Base styles come from form-styles.css
 */

/* ============================================= */
/* Global Styles */
/* ============================================= */

* {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

body {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

/* ============================================= */
/* Accent Color Overrides */
/* ============================================= */

/* Apply accent color to all interactive elements */

/* Category Filter Chips */
.notara-styles .category-chip.selected,
.notara-styles .category-chip:hover {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

/* Service Cards */
.notara-styles .service-card:hover {
    border-color: var(--accent-color) !important;
}

/* Buttons */
.notara-styles .submit-button,
.notara-styles .primary-button,
.notara-styles button[type="submit"],
.notara-styles .btn-primary {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

.notara-styles .submit-button:hover,
.notara-styles .primary-button:hover,
.notara-styles button[type="submit"]:hover,
.notara-styles .btn-primary:hover {
    background-color: var(--accent-color) !important;
    opacity: 0.9;
}

/* Links */
.notara-styles a:not(.service-card),
.notara-styles .text-link,
.notara-styles .privacy-notice a {
    color: var(--accent-color) !important;
}

/* Step Indicators */
.notara-styles .modern-step.active {
    background-color: var(--accent-color) !important;
}

/* Notary Cards (Selection) */
.notara-styles .notary-card.active {
    border-color: var(--accent-color) !important;
}

.notara-styles .notary-card:hover {
    border-color: var(--accent-color) !important;
}

/* Form Inputs - Focus State */
.notara-styles input:focus,
.notara-styles textarea:focus,
.notara-styles select:focus {
    border-color: var(--accent-color) !important;
    outline: none !important;
}

/* Navigation Arrows */
.notara-styles .category-nav-arrow:hover:not(:disabled) {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: #fff !important;
}

/* ============================================= */
/* Layout Overrides */
/* ============================================= */

/* Container Border Override (User Request) */
.notara-styles .notary-container {
    border: 1px solid #dedede;
    border-radius: 12px;
    min-width: 1200px;
    max-width: 1200px !important;
    width: 1200px;
}

/* Service Card Links - No Underline */
.service-card {
    text-decoration: none !important;
}

.service-card:hover {
    text-decoration: none !important;
}

/* Page Layout - Centered */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

.public-main {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 20px;
    overflow: hidden;
}

.public-main-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Container height wie beim Widget */
.notara-styles .notary-container {
    max-height: 600px;
}

.notara-styles .notary-right {
    overflow-y: auto;
    max-height: 500px;
    min-height: 500px !important;
}

/* ============================================= */
/* Multi-Step Form */
/* ============================================= */

.step-content {
    width: 100%;
}

/* Loading Spinner */
.notara-styles .loading-spinner {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
}

/* Privacy Notice */
.notara-styles .privacy-notice {
    font-size: 13px;
    color: #6c757d;
    line-height: 1.6;
    padding: 12px 0;
}

.notara-styles .privacy-notice a {
    text-decoration: underline;
}

.notara-styles .privacy-notice a:hover {
    opacity: 0.8;
}

/* ============================================= */
/* Flash Messages */
/* ============================================= */

.message {
    padding: 15px 20px;
    margin: 20px auto;
    max-width: 1200px;
    border-radius: 6px;
    font-size: 15px;
}

.message.success {
    background-color: #d1fae5;
    border: 1px solid #10b981;
    color: #065f46;
}

.message.error {
    background-color: #fee2e2;
    border: 1px solid #ef4444;
    color: #991b1b;
}

.message.warning {
    background-color: #fef3c7;
    border: 1px solid #f59e0b;
    color: #78350f;
}

/* ============================================= */
/* Notary Logo Footer */
/* ============================================= */

.notary-logo-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    padding: 20px;
}

.notary-logo-footer .footer-logo {
    max-width: 150px;
    max-height: 60px;
    width: auto;
    height: auto;
}

/* ============================================= */
/* Mobile Responsiveness */
/* ============================================= */

@media (max-width: 768px) {
    /* Allow scrolling on mobile */
    html, body {
        overflow: auto;
        height: auto;
    }

    .public-main {
        height: auto;
        min-height: 100vh;
        padding: 0px;
        overflow: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    .public-main-content {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    /* Container anpassen wie beim Widget */
    .notara-styles .notary-container {
        min-width: auto !important;
        max-width: 90% !important;
        width: 90% !important;
        flex-direction: column;
        padding: 0px !important;
        margin: 0 auto !important;
        max-height: none !important;
        border: none !important;
        overflow-x: hidden !important;
    }

    /* Prevent horizontal scroll */
    .notara-styles .notary-widget {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Divider ausblenden */
    .notara-styles .divider {
        display: none !important;
    }

    /* Right section anpassen */
    .notara-styles .notary-right {
        margin-top: 20px;
        flex: 1;
        max-height: 100% !important;
        min-height: auto !important;
        overflow-y: auto;
    }

    /* Left section anpassen */
    .notara-styles .notary-left {
        max-width: 100% !important;
        width: 100% !important;
        flex: 0 0 auto;
        padding: 20px 0 0 0 !important;
        margin: 0;
    }

    /* Steps anpassen */
    .notara-styles .steps-container {
        flex-wrap: wrap;
        gap: 5px;
    }

    .notara-styles .modern-step {
        font-size: 14px;
        padding: 6px 12px;
    }

    /* Service Cards */
    .notara-styles .service-card {
        padding: 15px;
    }

    /* Buttons volle Breite */
    .notara-styles .button-group {
        flex-direction: column;
        gap: 10px;
    }

    .notara-styles .submit-button,
    .notara-styles .back-button,
    .notara-styles .primary-button {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Category Filter */
    .notara-styles .category-filter-wrapper {
        position: relative !important;
        padding: 0 !important;
        margin-bottom: 15px !important;
    }

    .notara-styles .category-filter-scroller {
        padding-right: 0px !important;
        width: 100% !important;
    }

    .notara-styles .category-chip.all-chip {
        margin-bottom: 0 !important;
        width: auto !important;
    }

    .notara-styles .category-nav-arrows {
        display: none !important;
    }

    /* Flash Messages */
    .message {
        max-width: 100%;
        margin: 10px;
    }

    /* Notary Cards in Selection */
    .notara-styles .notary-list {
        gap: 10px;
    }

    .notara-styles .notary-card {
        padding: 12px;
    }

    /* Logo Footer auf Mobile */
    .notary-logo-footer {
        margin-top: 15px;
        padding: 10px;
    }

    .notary-logo-footer .footer-logo {
        max-width: 100px;
        max-height: 40px;
    }
}