/* IMPORTANT: prefix_class controls (screen_corner, show_tooltip) add their class to
   the Elementor-generated wrapper element (an ANCESTOR of the .artmc-fc-wrap div this
   widget renders), never to .artmc-fc-wrap itself. Always use a descendant selector
   (".artmc-fc-corner-X .artmc-fc-wrap", with a space) - never a compound selector
   (".artmc-fc-corner-X.artmc-fc-wrap", no space). Bug found + fixed 2026-07-28 (v1.4.1):
   the compound form silently matched nothing, so screen_corner had zero effect and the
   widget fell back to default flex-direction:row at the top-left of the viewport. */

/*
 * AR TMC Corporate Builder - Floating Contact Hub (widget: artmc_floating_contact)
 * Structural/behavioral CSS only. Every visual property (colors, size,
 * position offsets, shape, typography, shadows) is a genuine Elementor
 * control on the widget - see widget-floating-contact.php. Do not add
 * color/size/font overrides here; extend the widget's own controls instead.
 */

.artmc-fc-wrap {
    position: fixed;
    z-index: var(--artmc-fc-z, 9999);
    display: flex;
}

.artmc-fc-corner-bottom-right .artmc-fc-wrap { bottom: var(--artmc-fc-y, 24px); right: var(--artmc-fc-x, 24px); flex-direction: column; align-items: center; }
.artmc-fc-corner-bottom-left .artmc-fc-wrap  { bottom: var(--artmc-fc-y, 24px); left: var(--artmc-fc-x, 24px); flex-direction: column; align-items: center; }
.artmc-fc-corner-top-right .artmc-fc-wrap    { top: var(--artmc-fc-y, 24px); right: var(--artmc-fc-x, 24px); flex-direction: column-reverse; align-items: center; }
.artmc-fc-corner-top-left .artmc-fc-wrap     { top: var(--artmc-fc-y, 24px); left: var(--artmc-fc-x, 24px); flex-direction: column-reverse; align-items: center; }

.artmc-fc-items {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--artmc-fc-gap, 12px);
    margin-bottom: var(--artmc-fc-gap, 12px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--artmc-fc-transition, 300ms) ease, transform var(--artmc-fc-transition, 300ms) ease, visibility var(--artmc-fc-transition, 300ms) ease;
    pointer-events: none;
}
.artmc-fc-corner-top-right .artmc-fc-items,
.artmc-fc-corner-top-left .artmc-fc-items {
    margin-bottom: 0;
    margin-top: var(--artmc-fc-gap, 12px);
    transform: translateY(-10px);
}

.artmc-fc-wrap.is-open .artmc-fc-items {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.artmc-fc-btn,
.artmc-fc-toggle {
    width: var(--artmc-fc-size, 55px);
    height: var(--artmc-fc-size, 55px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background-color var(--artmc-fc-transition, 300ms) ease, transform var(--artmc-fc-transition, 300ms) ease;
}

.artmc-fc-btn i, .artmc-fc-toggle i { font-size: var(--artmc-fc-icon-size, 22px); line-height: 1; }
.artmc-fc-btn svg, .artmc-fc-toggle svg { width: var(--artmc-fc-icon-size, 22px); height: var(--artmc-fc-icon-size, 22px); }

.artmc-fc-toggle .artmc-fc-icon-closed,
.artmc-fc-toggle .artmc-fc-icon-open {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--artmc-fc-transition, 300ms) ease;
}

.artmc-fc-wrap:not(.has-alt-toggle-icon).is-open .artmc-fc-toggle .artmc-fc-icon-closed {
    transform: rotate(45deg);
}

.artmc-fc-wrap.has-alt-toggle-icon .artmc-fc-toggle .artmc-fc-icon-open { display: none; }
.artmc-fc-wrap.has-alt-toggle-icon.is-open .artmc-fc-toggle .artmc-fc-icon-closed { display: none; }
.artmc-fc-wrap.has-alt-toggle-icon.is-open .artmc-fc-toggle .artmc-fc-icon-open { display: flex; }

/* Tooltip - pure CSS, logical properties keep it on the outer side in both LTR and RTL */
.artmc-fc-tooltip-on .artmc-fc-btn[data-tooltip]:not([data-tooltip='']):before {
    content: attr(data-tooltip);
    position: absolute;
    inset-inline-end: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: var(--artmc-fc-tooltip-radius, 6px);
    background: var(--artmc-fc-tooltip-bg, #1C1B19);
    color: var(--artmc-fc-tooltip-color, #FFFFFF);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 200ms ease, visibility 200ms ease;
    z-index: 1;
}

.artmc-fc-tooltip-on .artmc-fc-btn[data-tooltip]:not([data-tooltip='']):hover:before,
.artmc-fc-tooltip-on .artmc-fc-btn[data-tooltip]:not([data-tooltip='']):focus-visible:before {
    opacity: 1;
    visibility: visible;
}