/* Wrapper
 *
 * `position: relative` + a z-index makes this element a stacking context, so
 * every z-index further down (triggers 9999, panels 10000, mobile bar 999999)
 * is only sorted *within* boxy. Against the rest of the page the whole plugin
 * ranks as this one value, which is why raising the z-index on .c2-boxy-panel
 * alone never lifts it above anything outside the wrapper.
 *
 * It therefore has to clear the highest z-index it must appear over. The
 * c2-burger-menu toggler sits at 100001 and its fullscreen nav overlay at
 * 100000, so the default clears both. Override the variable in the theme to
 * move boxy back down (e.g. below the admin bar at 99999).
 */
#c2-boxy-plus-wrapper {
    position: relative;
    z-index: var(--c2-boxy-root-z-index, 100002);
}

/* === Trigger groups (one per side) === */

.c2-boxy-trigger-group {
    position: fixed;
    z-index: 9999;
    display: flex;
}

/* Left/right: vertical stack with gap */
.c2-boxy-trigger-group-left {
    left: var(--c2-boxy-trigger-edge-offset, 0);
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    gap: var(--c2-boxy-stack-gap, 0.5rem);
    align-items: flex-start;
}

.c2-boxy-trigger-group-right {
    right: var(--c2-boxy-trigger-edge-offset, 0);
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    gap: var(--c2-boxy-stack-gap, 0.5rem);
    align-items: flex-end;
}

/* Top/bottom: horizontal stack with gap */
.c2-boxy-trigger-group-top {
    top: 0.5rem;
    right: 20%;
    flex-direction: row;
    gap: var(--c2-boxy-stack-gap, 0.5rem);
}

.c2-boxy-trigger-group-bottom {
    bottom: 0.5rem;
    right: 20%;
    flex-direction: row;
    gap: var(--c2-boxy-stack-gap, 0.5rem);
}

/* === Trigger (edge tab) === */

.c2-boxy-trigger {
    position: static;
    flex: 0 0 auto;
}

/* Trigger look: button + link */

.c2-boxy-trigger-button,
.c2-boxy-trigger-link {
    display: flex;
    align-items: center;

    /*
     * Collapsed state:
     * no gap, title max-width is 0, so only the icon remains visible.
     */
    gap: 0;

    padding: 0.6rem var(--c2-boxy-trigger-padding, 0.8rem);
    border-radius: var(--c2-boxy-trigger-radius, 0);
    border: none;
    background: var(--c2-boxy-trigger-bg, #111827);
    color: var(--c2-boxy-trigger-text, #f9fafb);
    cursor: pointer;
    font-size: var(--c2-boxy-trigger-font-size, 14px);
    font-weight: bold;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.4);
    overflow: hidden;
    box-sizing: border-box;

    /*
     * Do not animate max-width on the whole button.
     * The button now grows naturally as the title expands.
     */
    max-width: none;

    transition:
        gap 0.25s ease,
        background-color 0.2s ease;
}

.c2-boxy-trigger-button {
    -webkit-appearance: none;
    appearance: none;
}

.c2-boxy-trigger-link {
    text-decoration: none;
}

/* Title on the LEFT of the icon for left side */
.c2-boxy-trigger.c2-boxy-position-left .c2-boxy-trigger-button,
.c2-boxy-trigger.c2-boxy-position-left .c2-boxy-trigger-link {
    flex-direction: row-reverse;
}

/* Hover / active: expand to show title */
.c2-boxy-trigger-button:hover,
.c2-boxy-trigger.is-active .c2-boxy-trigger-button,
.c2-boxy-trigger-link:hover,
.c2-boxy-trigger.is-active .c2-boxy-trigger-link {
    gap: var(--c2-boxy-icon-gap, 0.5rem);
    background-color: var(--c2-boxy-trigger-bg-hover, #1f2937);
}

/* Icon styles */

.c2-boxy-trigger-button .dashicons,
.c2-boxy-trigger-link .dashicons {
    font-size: var(--c2-boxy-icon-size, 20px);
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
}

.c2-boxy-icon-image {
    width: var(--c2-boxy-icon-size, 20px);
    height: var(--c2-boxy-icon-size, 20px);
    object-fit: contain;
    display: block;
    flex: 0 0 auto;
}

/* Title: fully hidden when collapsed */

.c2-boxy-trigger-title {
    white-space: nowrap;
    max-width: 0;
    opacity: 0;
    flex: 0 1 auto;

    transition:
        max-width 0.25s ease,
        opacity 0.18s ease;
}

/* When hovered / active, smoothly reveal the title */
.c2-boxy-trigger-button:hover .c2-boxy-trigger-title,
.c2-boxy-trigger.is-active .c2-boxy-trigger-button .c2-boxy-trigger-title,
.c2-boxy-trigger-link:hover .c2-boxy-trigger-title,
.c2-boxy-trigger.is-active .c2-boxy-trigger-link .c2-boxy-trigger-title {
    max-width: var(--c2-boxy-title-expanded, 20ch);
    opacity: 1;
}

/* === Overlay === */

.c2-boxy-overlay {
    position: fixed;
    inset: 0;
    background: var(--c2-boxy-overlay-bg, rgba(15, 23, 42, 0.45));
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    z-index: 9998;
}

.c2-boxy-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

/* === Panel (bubble) === */

.c2-boxy-panel {
    position: fixed;
    z-index: 10000;
    width: fit-content;
    min-width: 200px;
    max-width: min(var(--c2-boxy-panel-width, 420px), 94vw);
    max-height: var(--c2-boxy-panel-max-height, 85vh);
    background: var(--c2-boxy-panel-bg, #f9fafb);
    color: var(--c2-boxy-panel-text, #111827);
    border-radius: var(--c2-boxy-panel-radius, 18px);
    box-shadow: var(--c2-boxy-panel-shadow, 0 20px 40px rgba(15,23,42,0.35), 0 0 0 1px rgba(15,23,42,0.05));
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    transition:
        opacity 0.22s ease,
        transform 0.22s ease;

    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.c2-boxy-panel-inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.c2-boxy-panel-title {
    font-size: var(--c2-boxy-title-font-size, 18px);
    color: var(--c2-boxy-title-color, var(--c2-boxy-panel-text, #111827));
    font-weight: 600;
    padding: 1rem 1.25rem 0.45rem;
    margin: 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    flex-shrink: 0;
}

.c2-boxy-panel-content {
    padding: 0.75rem 1.25rem 1.2rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: normal;
    overflow-wrap: break-word;
    font-size: var(--c2-boxy-content-font-size, 14px);
}

/* Panel header: title + content dropdown side by side */

.c2-boxy-panel-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 1rem 2.2rem 0.55rem 1.25rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    flex-shrink: 0;
}

.c2-boxy-panel-header .c2-boxy-panel-title {
    padding: 0;
    border-bottom: none;
    flex: 0 1 auto;
}

.c2-boxy-variant-select {
    /* Fixed flex basis on purpose: the panel is sized by its content, and a
       long option name must not stretch it. The select grows into whatever
       space is left, shrinks when there is less, and wraps onto its own line
       when the title alone fills the row. */
    flex: 1 1 8rem;
    min-width: 0;
    max-width: 100%;
    text-overflow: ellipsis;
    font-family: inherit;
    font-size: var(--c2-boxy-content-font-size, 14px);
    line-height: 1.4;
    color: var(--c2-boxy-panel-text, #111827);
    background: transparent;
    border: 1px solid rgba(15, 23, 42, 0.2);
    border-radius: 6px;
    padding: 0.2rem 0.4rem;
    cursor: pointer;
}

.c2-boxy-variant-select:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

/* Only the currently selected content is visible */

.c2-boxy-variant {
    display: none;
}

.c2-boxy-variant.is-active {
    display: block;
}

/* Columns inside a panel size to their content.
 *
 * Core gives every column in a .wp-block-columns row `flex-basis: 0` plus
 * `flex-grow: 1`, which splits the row into exactly equal parts no matter what
 * is in them. In a wide page column that is fine; in a narrow panel it means a
 * short label like "Montag" reserves just as much room as "08:30 - 12:00 Uhr",
 * so the times wrap while half the row sits empty.
 *
 * `flex-basis: auto` makes each column start from its own content width and
 * share the leftover space from there. Columns given an explicit width in the
 * editor carry an inline flex-basis and keep it.
 */
#c2-boxy-plus-wrapper .c2-boxy-panel-content .wp-block-columns > .wp-block-column {
    flex-basis: auto;
}

/* Close button */

.c2-boxy-close {
    position: absolute;
    top: 0.55rem;
    right: 0.7rem;
    background: transparent;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #6b7280;
    padding: 0;
}

.c2-boxy-close:hover {
    color: #111827;
}

/* === Panel positions & animations === */

/* Right edge bubble */
.c2-boxy-panel-right {
    top: 50%;
    right: 1.25rem;
    transform: translate(20px, -50%);
}

/* Left edge bubble */
.c2-boxy-panel-left {
    top: 50%;
    left: 1.25rem;
    transform: translate(-20px, -50%);
}

/* Top edge bubble */
.c2-boxy-panel-top {
    top: 1.25rem;
    left: 50%;
    transform: translate(-50%, -20px);
}

/* Bottom edge bubble */
.c2-boxy-panel-bottom {
    bottom: 1.25rem;
    left: 50%;
    transform: translate(-50%, 20px);
}

/* Active state: slide into place + show */

.c2-boxy-panel.is-active {
    opacity: 1;
    pointer-events: auto;
}

.c2-boxy-panel-right.is-active {
    transform: translate(0, -50%);
}

.c2-boxy-panel-left.is-active {
    transform: translate(0, -50%);
}

.c2-boxy-panel-top.is-active {
    transform: translate(-50%, 0);
}

.c2-boxy-panel-bottom.is-active {
    transform: translate(-50%, 0);
}

/* === Responsive tweaks === */

@media (max-width: 600px) {
    .c2-boxy-panel {
        width: 94vw;
        max-height: 90vh;
    }

    .c2-boxy-trigger-group-top {
        right: 10%;
    }

    .c2-boxy-trigger-group-bottom {
        right: 10%;
    }
}

/* Accessibility helper */

.screen-reader-text {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

/* When click is disabled, show default cursor instead of pointer */
.c2-boxy-trigger[data-boxy-disable-click="1"] .c2-boxy-trigger-button {
    cursor: default;
}

/* Hide mobile bar on desktop by default */
.c2-boxy-mobile-bar {
    display: none;
}

/* Mobile view: sticky bottom bar with icons */
@media (max-width: 781px) {
    /* Hide regular trigger groups on mobile */
    .c2-boxy-trigger-group-left,
    .c2-boxy-trigger-group-right,
    .c2-boxy-trigger-group-top,
    .c2-boxy-trigger-group-bottom {
        display: none !important;
    }

    /* Mobile trigger container: full-width bar, 2px gaps between buttons */
    .c2-boxy-mobile-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: transparent;
        z-index: 9999;
        display: flex;
        align-items: stretch;
        min-height: 64px;
        gap: 2px;
    }

    /* Each trigger fills an equal share of the bar width */
    .c2-boxy-mobile-bar .c2-boxy-trigger {
        flex: 1;
        display: flex;
        position: static;
    }

    /* Buttons/links fill their cell with centered icon */
    .c2-boxy-mobile-bar .c2-boxy-trigger-button,
    .c2-boxy-mobile-bar .c2-boxy-trigger-link {
        flex: 1;
        width: 100%;
        min-height: 64px;
        max-width: none !important;
        min-width: 0;
        padding: 0.75rem 0.5rem;
        border-radius: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0 !important;
        box-shadow: none;
        background: var(--c2-boxy-trigger-bg, #111827);
        transition: background-color 0.2s ease;
    }

    .c2-boxy-mobile-bar .c2-boxy-trigger-button:hover,
    .c2-boxy-mobile-bar .c2-boxy-trigger-link:hover,
    .c2-boxy-mobile-bar .c2-boxy-trigger.is-active .c2-boxy-trigger-button,
    .c2-boxy-mobile-bar .c2-boxy-trigger.is-active .c2-boxy-trigger-link {
        background: var(--c2-boxy-trigger-bg-hover, #1f2937);
        max-width: none !important;
    }

    /* Hide title on mobile: icon only */
    .c2-boxy-mobile-bar .c2-boxy-trigger-title {
        display: none !important;
    }

    /* Icon sizing on mobile */
    .c2-boxy-mobile-bar .dashicons,
    .c2-boxy-mobile-bar .c2-boxy-icon-image {
        font-size: 24px;
        width: 24px;
        height: 24px;
    }

    /* Adjust panel position on mobile */
    .c2-boxy-panel {
        bottom: 80px !important;
        top: auto !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, 20px) !important;
        max-width: calc(100vw - 2rem) !important;
    }

    .c2-boxy-panel.is-active {
        transform: translate(-50%, 0) !important;
    }
}

/* ===  Burger menu mode (class toggled by JS when burger menu is detected open) === */

#c2-boxy-plus-wrapper.c2-boxy-burger-active {
    z-index: 999999;
}

#c2-boxy-plus-wrapper.c2-boxy-burger-active .c2-boxy-trigger-group-left,
#c2-boxy-plus-wrapper.c2-boxy-burger-active .c2-boxy-trigger-group-right,
#c2-boxy-plus-wrapper.c2-boxy-burger-active .c2-boxy-trigger-group-top,
#c2-boxy-plus-wrapper.c2-boxy-burger-active .c2-boxy-trigger-group-bottom {
    display: none !important;
}

#c2-boxy-plus-wrapper.c2-boxy-burger-active .c2-boxy-mobile-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent;
    z-index: 99999;
    display: flex;
    align-items: stretch;
    min-height: 64px;
    gap: 2px;
}

#c2-boxy-plus-wrapper.c2-boxy-burger-active .c2-boxy-mobile-bar .c2-boxy-trigger {
    flex: 1;
    display: flex;
    position: static;
}

#c2-boxy-plus-wrapper.c2-boxy-burger-active .c2-boxy-mobile-bar .c2-boxy-trigger-button,
#c2-boxy-plus-wrapper.c2-boxy-burger-active .c2-boxy-mobile-bar .c2-boxy-trigger-link {
    flex: 1;
    width: 100%;
    min-height: 64px;
    max-width: none !important;
    min-width: 0;
    padding: 0.75rem 0.5rem;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 !important;
    box-shadow: none;
    background: var(--c2-boxy-trigger-bg, #111827);
    transition: background-color 0.2s ease;
}

#c2-boxy-plus-wrapper.c2-boxy-burger-active .c2-boxy-mobile-bar .c2-boxy-trigger-button:hover,
#c2-boxy-plus-wrapper.c2-boxy-burger-active .c2-boxy-mobile-bar .c2-boxy-trigger-link:hover,
#c2-boxy-plus-wrapper.c2-boxy-burger-active .c2-boxy-mobile-bar .c2-boxy-trigger.is-active .c2-boxy-trigger-button,
#c2-boxy-plus-wrapper.c2-boxy-burger-active .c2-boxy-mobile-bar .c2-boxy-trigger.is-active .c2-boxy-trigger-link {
    background: var(--c2-boxy-trigger-bg-hover, #1f2937);
    max-width: none !important;
}

#c2-boxy-plus-wrapper.c2-boxy-burger-active .c2-boxy-mobile-bar .c2-boxy-trigger-title {
    display: none !important;
}

#c2-boxy-plus-wrapper.c2-boxy-burger-active .c2-boxy-mobile-bar .dashicons,
#c2-boxy-plus-wrapper.c2-boxy-burger-active .c2-boxy-mobile-bar .c2-boxy-icon-image {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

#c2-boxy-plus-wrapper.c2-boxy-burger-active .c2-boxy-panel {
    bottom: 80px !important;
    top: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, 20px) !important;
    max-width: calc(100vw - 2rem) !important;
    z-index: 100000;
}

#c2-boxy-plus-wrapper.c2-boxy-burger-active .c2-boxy-panel.is-active {
    transform: translate(-50%, 0) !important;
}

.c2-boxy-mobile-bar span.email-obf {
		width: 100%;
}