:root {
    --cmis-sk-surface: #f5f5f5;
    --cmis-sk-card: #ffffff;
    --cmis-sk-base: #d7d9dd;
    --cmis-sk-highlight: #eceef1;
    --cmis-sk-border: #dfe2e6;
}

html.cmis-skeleton-pending:not(.cmis-skeleton-active) [data-skeleton-content] {
    visibility: hidden !important;
}

/* The shared shell is loaded before some pages output their main container.
   Hide only likely content roots to prevent a content flash; navigation stays usable. */
html.cmis-skeleton-pending:not(.cmis-skeleton-active) main,
html.cmis-skeleton-pending:not(.cmis-skeleton-active) .admin-main,
html.cmis-skeleton-pending:not(.cmis-skeleton-active) .main-content,
html.cmis-skeleton-pending:not(.cmis-skeleton-active) .dashboard-main,
html.cmis-skeleton-pending:not(.cmis-skeleton-active) .dashboard-page,
html.cmis-skeleton-pending:not(.cmis-skeleton-active) .counter-content,
html.cmis-skeleton-pending:not(.cmis-skeleton-active) .content-wrapper,
html.cmis-skeleton-pending:not(.cmis-skeleton-active) .admin-content,
html.cmis-skeleton-pending:not(.cmis-skeleton-active) .modern-main-content,
html.cmis-skeleton-pending:not(.cmis-skeleton-active) .modern-main,
html.cmis-skeleton-pending:not(.cmis-skeleton-active) #mainContent,
html.cmis-skeleton-pending:not(.cmis-skeleton-active) .page-content {
    visibility: hidden !important;
}

html.cmis-skeleton-active [data-skeleton-content] {
    visibility: visible !important;
}

html.cmis-skeleton-pending #chatbot-widget {
    visibility: hidden !important;
}

html.cmis-skeleton-active,
html.cmis-skeleton-active body {
    overflow: hidden !important;
    overscroll-behavior: none;
}

.cmis-page-skeleton-status {
    position: fixed;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

html.cmis-skeleton-active [data-skeleton-content] {
    background: var(--cmis-sk-surface) !important;
    color: transparent !important;
    text-shadow: none !important;
    caret-color: transparent !important;
    border-color: var(--cmis-sk-border) !important;
    box-shadow: none !important;
}

html.cmis-skeleton-active [data-skeleton-content] * {
    background: transparent !important;
    color: transparent !important;
    text-shadow: none !important;
    caret-color: transparent !important;
    border-color: var(--cmis-sk-border) !important;
    box-shadow: none !important;
}

html.cmis-skeleton-active [data-skeleton-content] *::before,
html.cmis-skeleton-active [data-skeleton-content] *::after {
    background: transparent !important;
    color: transparent !important;
    border-color: var(--cmis-sk-border) !important;
    box-shadow: none !important;
}

html.cmis-skeleton-active .cmis-skeleton-background,
html.cmis-skeleton-active .hero-section,
html.cmis-skeleton-active .events-title-section,
html.cmis-skeleton-active .newsletter-hero,
html.cmis-skeleton-active .booking-container,
html.cmis-skeleton-active .profile-hero {
    background-color: #e5e7eb !important;
    background-image: none !important;
}

html.cmis-skeleton-active .cmis-skeleton-background::before,
html.cmis-skeleton-active .cmis-skeleton-background::after,
html.cmis-skeleton-active .hero-section::before,
html.cmis-skeleton-active .hero-section::after,
html.cmis-skeleton-active .events-title-section::before,
html.cmis-skeleton-active .events-title-section::after,
html.cmis-skeleton-active .newsletter-hero::before,
html.cmis-skeleton-active .newsletter-hero::after,
html.cmis-skeleton-active .booking-container::before,
html.cmis-skeleton-active .booking-container::after,
html.cmis-skeleton-active .profile-hero::before,
html.cmis-skeleton-active .profile-hero::after {
    opacity: 0 !important;
    background: none !important;
}

html.cmis-skeleton-active .cmis-skeleton-surface {
    background: var(--cmis-sk-card) !important;
    border-color: var(--cmis-sk-border) !important;
}

html.cmis-skeleton-active .cmis-skeleton-text,
html.cmis-skeleton-active .cmis-skeleton-control,
html.cmis-skeleton-active .cmis-skeleton-media-shell {
    background-color: var(--cmis-sk-base) !important;
    background-image: linear-gradient(90deg, var(--cmis-sk-base) 0%, var(--cmis-sk-highlight) 48%, var(--cmis-sk-base) 100%) !important;
    background-size: 220% 100% !important;
    background-position: 100% 0;
    animation: cmisSkeletonShimmer 1.35s ease-in-out infinite;
}

html.cmis-skeleton-active .cmis-skeleton-text {
    border-radius: 6px !important;
    text-decoration: none !important;
}

html.cmis-skeleton-active .cmis-skeleton-control {
    border-color: var(--cmis-sk-border) !important;
    border-radius: 9px !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

html.cmis-skeleton-active .cmis-skeleton-control::before,
html.cmis-skeleton-active .cmis-skeleton-control::after {
    opacity: 0 !important;
}

html.cmis-skeleton-active .cmis-skeleton-media {
    visibility: hidden !important;
    opacity: 0 !important;
}

html.cmis-skeleton-active .cmis-skeleton-media-shell {
    overflow: hidden !important;
}

html.cmis-skeleton-active .cmis-skeleton-icon {
    visibility: hidden !important;
    opacity: 0 !important;
}

html.cmis-skeleton-active .hero-background,
html.cmis-skeleton-active .hero-overlay {
    visibility: hidden !important;
    opacity: 0 !important;
}

html.cmis-skeleton-active .event-card-placeholder,
html.cmis-skeleton-active .newsletter-card-placeholder,
html.cmis-skeleton-active .profile-photo-placeholder,
html.cmis-skeleton-active .empty-icon-wrap {
    background: var(--cmis-sk-base) !important;
}

html.cmis-skeleton-active .event-card,
html.cmis-skeleton-active .newsletter-card,
html.cmis-skeleton-active .appt-card,
html.cmis-skeleton-active .booking-card,
html.cmis-skeleton-active .main-card,
html.cmis-skeleton-active .profile-card,
html.cmis-skeleton-active .sidebar-card {
    transform: none !important;
}

.cmis-skeleton-reveal {
    animation: cmisSkeletonReveal 180ms ease both;
}

@keyframes cmisSkeletonShimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -120% 0; }
}

@keyframes cmisSkeletonReveal {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 575.98px) {
    html.cmis-skeleton-active .cmis-skeleton-text {
        border-radius: 5px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.cmis-skeleton-active .cmis-skeleton-text,
    html.cmis-skeleton-active .cmis-skeleton-control,
    html.cmis-skeleton-active .cmis-skeleton-media-shell,
    .cmis-skeleton-reveal {
        animation: none !important;
    }
}