/* --- Scoped only to workshop/shortcode – no global reset to avoid breaking theme header/footer --- */

/* --- Layout Container --- */
.workshop-container {
    box-sizing: border-box;
    max-width: 1100px;
    margin: 40px auto;
    padding: 40px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* --- Headings (scoped to workshop only) --- */
.workshop-container h1 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #222;
}

p.workshop-subtitle {
    font-size: 14px;
    color: #666;
    margin-bottom: 40px;
}

.workshop-subtitle-link {
    color: #1976d2;
    text-decoration: none;
    font-weight: 600;
}
.workshop-subtitle-link:hover {
    text-decoration: underline;
}

/* --- Workshop Registration Popup (Bli en Registrerad Monteringsverkstad) --- */
.workshop-registration-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}
.workshop-registration-popup-overlay.is-open {
    display: flex;
}
.workshop-registration-popup {
    background: #fff;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 11px 15px -7px rgba(0,0,0,0.2), 0 24px 38px 3px rgba(0,0,0,0.14);
    padding: 28px 32px 24px;
    overflow-y: auto;
    position: relative;
}
.workshop-registration-popup__title {
    font-size: 20px;
    font-weight: 700;
    color: #222;
    margin: 0 0 16px 0;
    line-height: 1.3;
}
.workshop-registration-popup__content {
    font-size: 15px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 24px;
}
.workshop-registration-popup__content p {
    margin: 0 0 12px 0;
}
.workshop-registration-popup__content p:last-of-type {
    margin-bottom: 0;
}
.workshop-registration-popup__subheading {
    margin-top: 16px !important;
}
.workshop-registration-popup__content ul {
    margin: 10px 0 16px 0;
    padding-left: 22px;
}
.workshop-registration-popup__content li {
    margin-bottom: 8px;
}
.workshop-registration-popup__close {
    display: block;
    width: 100%;
    background: #1976d2;
    color: #fff;
    border: none;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 0.5px;
}
.workshop-registration-popup__close:hover {
    background: #1565c0;
}

h2.workshop-section-title {
    color: #1976d2; /* The blue color from the screenshot */
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 20px;
    margin-top: 30px;
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
    display: inline-block;
}

h2.workshop-section-title:hover {
    border-bottom-color: #1976d2;
}

/* --- Form Grid Layout --- */
.workshop-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 20px;
    margin-bottom: 20px;
}

.workshop-full-width {
    grid-column: span 2; /* Spans across both columns */
}

/* --- Input Styling --- */
.workshop-input-group {
    display: flex;
    flex-direction: column;
}

.workshop-input-group label {
    font-size: 14px;
    color: #555;
    margin-bottom: 6px;
    display: none; /* Hidden to match screenshot 'placeholder' style, remove if you want visible labels above */
}

.workshop-input-group input[type="text"],
.workshop-input-group input[type="email"],
.workshop-input-group input[type="password"],
.workshop-input-group input[type="tel"],
.workshop-input-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #c4c4c4;
    border-radius: 4px;
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s;
    color: #333;
}

.workshop-input-group input:focus, .workshop-input-group textarea:focus {
    border-color: #1976d2;
    box-shadow: 0 0 0 1px #1976d2;
}

.workshop-input-group textarea {
    resize: vertical;
    min-height: 100px;
}

/* Placeholder styling to match the look */
::placeholder {
    color: #757575;
    opacity: 1;
}

/* --- Radio Buttons (TPMS) --- */
.workshop-radio-group-label {
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
    display: block;
    font-weight: 500;
}

.workshop-radio-options {
    display: flex;
    gap: 20px;
    align-items: center;
}

.workshop-radio-options label {
    display: flex; /* Make visible for radio buttons */
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 16px;
    color: #333;
}

.workshop-radio-options input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: #1976d2;
    cursor: pointer;
}

/* --- Terms Checkbox --- */
.workshop-terms-container {
    margin-top: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.workshop-terms-container input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #1976d2;
}

.workshop-terms-container label {
    display: inline;
    font-size: 14px;
    color: #333;
}

.workshop-terms-container a {
    color: #1976d2;
    text-decoration: none;
    font-weight: 600;
}

/* --- Submit Button --- */
.workshop-button-container {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
}

.workshop-submit-btn {
    background-color: #e0e0e0;
    color: #9e9e9e;
    border: none;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    cursor: not-allowed;
    text-transform: uppercase;
}

/* We will control this via JS if we want validation-based enabling, 
   but for now let's make it look active by default or handle state in JS 
   The user CSS had .active class, we can keep that logic or just style it normal */
.workshop-submit-btn.active, 
.workshop-submit-btn:hover { /* Added hover for standard behavior if no JS 'active' logic enforced strictly yet */
    background-color: #1976d2;
    color: #fff;
    cursor: pointer;
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
    .workshop-form-grid {
        grid-template-columns: 1fr; /* Stack columns on mobile */
    }
    .workshop-full-width {
        grid-column: span 1;
    }
    .workshop-container {
        padding: 20px;
        margin: 20px 10px;
    }
}
/* --- Validation Errors --- */
.workshop-error-message {
    color: #d32f2f;
    font-size: 12px;
    margin-top: 5px;
    display: none;
}
.workshop-input-error {
    border-color: #d32f2f !important;
}

/* Success Message */
.workshop-success-message {
    background-color: #d4edda;
    color: #155724;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
}
.workshop-global-error-message {
    background-color: #f8d7da;
    color: #721c24;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
}



        /* CSS Variables for easy customization */
        :root {
            --ap-ws-bg-main: #fcfcfc;
            --ap-ws-white: #ffffff;
            --ap-ws-accent-blue: #2d6596;
            --ap-ws-action-blue: #1976d2;
            --ap-ws-text-primary: #202124;
            --ap-ws-text-muted: #5f6368;
            --ap-ws-shadow: 0px 4px 12px rgba(0,0,0,0.06);
            --ap-ws-radius: 12px;
        }

        /* Scoped to search wrapper only – do not style body (breaks theme footer/header) */
        .ap-ws-search-wrapper {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
        }

        /* UNIQUE NAMESPACE: ap-ws (Assembly Partner WorkShop)
        */

        .ap-ws-search-wrapper {
            max-width: 80%;
            margin: 0 auto;
            box-sizing: border-box;
        }
        .ap-ws-search-wrapper *,
        .workshop-container * {
            box-sizing: border-box;
        }

        /* The Hero/Search Card */
        .ap-ws-hero-card {
            background: var(--ap-ws-white);
            border: 1px solid #ececec;
            border-radius: var(--ap-ws-radius);
            padding: 48px 30px;
            box-shadow: var(--ap-ws-shadow);
            text-align: center;
            margin-bottom: 40px;
        }

        .ap-ws-hero-card__title {
            text-transform: uppercase;
            font-size: 20px;
            font-weight: 800;
            letter-spacing: 1.5px;
            margin-bottom: 16px;
            color: var(--ap-ws-text-primary);
        }

        .ap-ws-hero-card__description {
            color: var(--ap-ws-text-muted);
            font-size: 15px;
            max-width: 850px;
            margin: 0 auto 32px auto;
            line-height: 1.6;
        }

        /* The Input Toolbar */
        .ap-ws-filter-bar {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            flex-wrap: wrap;
        }

        .ap-ws-filter-bar__label {
            font-style: italic;
            color: #888;
            font-size: 14px;
        }

        .ap-ws-filter-bar__input,
        .ap-ws-filter-bar__select {
            background: #fff;
            border: 1px solid #dcdcdc;
            padding: 9px 12px;
            border-radius: 6px;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        .ap-ws-filter-bar__input:focus {
            border-color: var(--ap-ws-accent-blue);
            outline: none;
        }

        .ap-ws-filter-bar__btn {
            background-color: var(--ap-ws-accent-blue);
            color: #fff;
            border: none;
            padding: 12px 30px;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
            transition: opacity 0.2s;
        }

        .ap-ws-filter-bar__btn:hover {
            opacity: 0.9;
        }

        .ap-ws-filter-bar__status {
            font-size: 14px;
            color: #777;
        }

        .ap-ws-filter-bar__city {
            font-style: italic;
            font-weight: 700;
            font-size: 18px;
            color: #555;
            margin-left: 5px;
        }

        /* Results Counter */
        .ap-ws-counter-text {
            font-size: 15px;
            margin-bottom: 20px;
            color: var(--ap-ws-text-primary);
            font-weight: 500;
        }

        /* The List of Items */
        .ap-ws-entry-row {
            background: var(--ap-ws-white);
            border-radius: 10px;
            padding: 24px;
            margin-bottom: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.04);
            border: 1px solid #f0f0f0;
            transition: transform 0.2s;
        }

        .ap-ws-entry-row:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.08);
        }

        .ap-ws-entry-row__name {
            display: block;
            font-weight: 700;
            font-size: 17px;
            margin-bottom: 4px;
        }

        .ap-ws-entry-row__address {
            color: var(--ap-ws-text-muted);
            font-size: 13px;
        }

        .ap-ws-entry-row__action-btn {
            background-color: var(--ap-ws-action-blue);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
        }

        /* Mobile Adjustments */
        @media (max-width: 600px) {
            .ap-ws-entry-row {
                flex-direction: column;
                align-items: flex-start;
                gap: 16px;
            }
            .ap-ws-entry-row__action-btn {
                width: 100%;
            }
        }

/* Custom Reset/Base */
.mc-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.mc-modal-paper {
    background: #fff;
    width: 90%;
    max-width: 850px;
    max-height: 85vh;
    border-radius: 8px;
    box-shadow: 0px 11px 15px -7px rgba(0,0,0,0.2), 
                0px 24px 38px 3px rgba(0,0,0,0.14);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mc-modal-header {
    padding: 16px 24px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
}

.mc-title {
    color: #1976d2;
    margin: 0;
    font-size: 1.25rem;
}

.mc-address {
    font-size: 0.85rem;
    color: #444;
    margin: 4px 0 0 0;
}

.mc-close-btn {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #aaa;
}

.mc-modal-body {
    padding: 24px;
    overflow-y: auto;
}

.mc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.mc-section-title {
    color: #1976d2;
    font-size: 1rem;
    margin-bottom: 10px;
    border-bottom: 1px dashed #ddd;
    padding-bottom: 5px;
}

.mc-section p {
    font-size: 0.875rem;
    margin: 6px 0;
    line-height: 1.5;
}

.mc-warning {
    color: #ed6c02;
    font-style: italic;
}

.mc-trigger-btn {
    background: #1976d2;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

@media (max-width: 600px) {
    .mc-grid { grid-template-columns: 1fr; }
}

/* Scoped to workshop shortcode only – avoid breaking theme layout */
.ap-ws-search-wrapper .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.workshop-container .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}