/* Shahmeer Custom Sections - Phone Feature Showcase */

.scs-phone-showcase {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 60px 20px;
    flex-wrap: wrap;
}

.scs-col {
    display: flex;
    flex-direction: column;
    gap: 55px;
    flex: 1 1 220px;
    max-width: 280px;
    position: relative;
    z-index: 2;
}

.scs-col-left {
    align-items: flex-end;
    text-align: right;
}

.scs-col-right {
    align-items: flex-start;
    text-align: left;
}

/* ---- Icon boxes ---- */
.scs-icon-box {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
}

.scs-col-left .scs-icon-box {
    flex-direction: row-reverse;
}

/* ---- Entry animation: self-playing CSS keyframe, no JS dependency at all
   (matches the same Style/Direction/Duration/Delay controls now on every
   widget in this plugin). Each icon-box's own inline custom properties
   (--scs-e-ox / --scs-e-oy / --scs-e-oscale) plus animation-duration/delay/
   timing-function are computed per-item in PHP from those panel controls.
   The .scs-entrance class + @keyframes live in the shared scs-animations.css
   (loaded on every page) so every widget reuses the same one. */

.scs-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

@keyframes scsTextPop {
    0% {
        transform: translateY(8px);
        opacity: 0.35;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.scs-text.scs-text-pop {
    animation: scsTextPop 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Highlight line + travelling dot under each text ---- */
/* Line itself is hidden by default - only the ACTIVE icon box shows it.
   When a different box becomes active, its line fades in while this one
   fades out, so the line visually "shifts" to whichever box is active. */
.scs-text-line {
    position: relative;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    margin-top: 10px;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.scs-icon-box.is-active .scs-text-line {
    opacity: 1;
}

.scs-text-dot {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e6317a;
    transform: translate(-50%, -50%) scale(0);
    transition:
        left var(--scs-dot-speed, 600ms) cubic-bezier(0.22, 1, 0.36, 1),
        transform var(--scs-dot-speed, 600ms) cubic-bezier(0.22, 1, 0.36, 1);
}

/* Right column: phone sits to the LEFT, so on activation the dot enters from the
   phone side (left) and travels toward the icon side (right). Deactivating just
   reverses the same transition back to the start. */
.scs-col-right .scs-text-dot {
    left: 0%;
}

.scs-col-right .scs-icon-box.is-active .scs-text-dot {
    left: 100%;
    transform: translate(-50%, -50%) scale(1);
}

/* Left column: phone sits to the RIGHT, so the dot travels the opposite way */
.scs-col-left .scs-text-dot {
    left: 100%;
}

.scs-col-left .scs-icon-box.is-active .scs-text-dot {
    left: 0%;
    transform: translate(-50%, -50%) scale(1);
}

.scs-icon-circle {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    background-color: transparent;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    transform-origin: center bottom;
}

.scs-icon-circle svg,
.scs-icon-circle i {
    width: 1em;
    height: 1em;
}

/* Make sure SVG-based icons pick up the color controls too (font-icon <i> tags
   already inherit `color` naturally; SVG icons need an explicit fill). */
.scs-icon-circle svg {
    fill: currentColor;
}

.scs-icon-box.is-active .scs-icon-circle {
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12);
}

/* Wobble on hover instead of a plain lift */
.scs-icon-box:hover .scs-icon-circle {
    animation: scs-wobble 0.5s ease-in-out;
}

@keyframes scs-wobble {
    0%   { transform: rotate(0deg); }
    20%  { transform: rotate(-10deg); }
    40%  { transform: rotate(8deg); }
    60%  { transform: rotate(-6deg); }
    80%  { transform: rotate(4deg); }
    100% { transform: rotate(0deg); }
}

.scs-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
    max-width: 100%;
}

.scs-desc {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
    max-width: 100%;
}

/* ---- Phone frame (pure CSS, no external image needed) ---- */
.scs-phone-wrap {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.scs-phone-frame {
    position: relative;
    width: 260px;
    height: 540px;
    background: #111;
    border-radius: 42px;
    box-shadow: 0 0 0 4px #2b2b2b, 0 25px 50px rgba(0, 0, 0, 0.45);
    padding: 14px;
    box-sizing: border-box;
}

.scs-phone-notch {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 45%;
    height: 22px;
    background: #111;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    z-index: 2;
}

.scs-phone-screen {
    position: relative;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}

/* Slide transition instead of a plain fade.
   A small built-in zoom (scale) keeps the screenshot fully covering the
   screen area with zero border/whitespace, even if the source image has
   a bit of empty margin baked into it (e.g. at the bottom). */
.scs-phone-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    image-rendering: auto;
    backface-visibility: hidden;
    transform: translateX(0) scale(1);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
    opacity: 0;
}

.scs-phone-img.is-visible {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.scs-phone-img.slide-in-from-left {
    transform: translateX(-100%) scale(1);
}

.scs-phone-img.slide-in-from-right {
    transform: translateX(100%) scale(1);
}

.scs-phone-img.slide-out-to-left {
    transform: translateX(-100%) scale(1);
    opacity: 0;
}

.scs-phone-img.slide-out-to-right {
    transform: translateX(100%) scale(1);
    opacity: 0;
}

/* ---- Connector line + fast travelling dot (icon -> phone) ---- */
.scs-connector-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.scs-connector-line {
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.35);
    transform-origin: left center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.scs-connector-line.is-active {
    opacity: 1;
}

.scs-connector-dot {
    position: absolute;
    top: 50%;
    left: 0;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.6);
    transform: translateX(var(--scs-dot-start, 0px));
}

.scs-connector-dot.is-traveling {
    animation-name: scs-dot-travel;
    animation-duration: 0.45s;
    animation-timing-function: cubic-bezier(0.15, 0.85, 0.35, 1);
    animation-fill-mode: forwards;
}

@keyframes scs-dot-travel {
    0%   { transform: translateX(var(--scs-dot-start, 0px)); }
    100% { transform: translateX(var(--scs-dot-end, 0px)); }
}

/* ---- Reversed layout variant: text closer to the phone, icons on the outer sides ---- */
.scs-reversed-layout .scs-col-left .scs-icon-box {
    flex-direction: row;
}

.scs-reversed-layout .scs-col-right .scs-icon-box {
    flex-direction: row-reverse;
}

/* ---- Responsive fallback: only kicks in for content saved before the
   "Phone Frame Width/Height" responsive controls existed and never got an
   explicit tablet/mobile value. Elementor's own control CSS (higher
   specificity) overrides these the moment the client sets a value. ---- */
@media (max-width: 1024px) {
    .scs-phone-frame {
        width: 230px;
        height: 480px;
    }
}

/* ---- Responsive: phone on top, ALL icon boxes (both columns) merge into
   ONE single vertical line underneath it - icon on the left, text next to
   it on the right of each row (not icon-on-top/text-below, not wrapped into
   a grid). .scs-col uses display:contents so its icon boxes become direct
   flex items of .scs-phone-showcase, stacking as one straight column. ---- */
@media (max-width: 767px) {
    .scs-phone-showcase {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 18px;
        padding: 30px 15px;
        max-width: 100%;
        overflow: hidden;
    }

    .scs-connector-layer {
        display: none;
    }

    /* Phone always on top */
    .scs-phone-wrap {
        order: -1;
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 6px;
    }

    .scs-phone-frame {
        width: 190px;
        height: 400px;
    }

    /* Columns no longer render as boxes - their icon boxes flow straight
       into the parent column so left + right items form one vertical line */
    .scs-col {
        display: contents;
    }

    /* Every row: icon on the RIGHT, text on the left, full width, same
       orientation for both the left and right column's boxes */
    .scs-col-left .scs-icon-box,
    .scs-col-right .scs-icon-box,
    .scs-icon-box {
        flex-direction: row;
        align-items: center;
        width: 100%;
        gap: 16px;
    }

    /* Belt-and-suspenders: force icon-after-text order explicitly (via `order`,
       not just flex-direction) so the icon lands on the right and both columns
       are guaranteed identical on mobile no matter what desktop row-reverse/
       RTL rules exist elsewhere. */
    .scs-icon-box .scs-icon-circle {
        order: 2;
    }

    .scs-icon-box .scs-text {
        order: -1;
    }

    .scs-text {
        flex-shrink: 1;
        flex: 1 1 0%;
        min-width: 0;
    }

    .scs-col-left,
    .scs-col-right,
    .scs-col-left .scs-icon-box,
    .scs-col-right .scs-icon-box {
        text-align: right;
    }

    .scs-icon-circle {
        width: 44px;
        height: 44px;
        font-size: 17px;
    }

    .scs-title {
        font-size: 13px;
        max-width: 100%;
    }

    .scs-desc {
        font-size: 11px;
        max-width: 100%;
    }
}