/**
 * TootConnect – Comparison List mobile cards
 *
 * Turns the Unlimited Elements "Comparison List" widget (.ue-comparison-list)
 * into a horizontally swipeable set of cards on mobile. One card per package,
 * each feature value stacked below its label.
 *
 * Desktop layout is untouched – the original table shows above the mobile
 * breakpoint, the cards show below it.
 */

/* Built dynamically by comparison-cards.js – hidden until mobile. */
.ue-comparison-list .uecl-mobile-cards { display: none; }

@media (max-width: 767px) {

    /* Hide the original table layout on mobile. */
    .ue-comparison-list .uecl-row.uecl-header,
    .ue-comparison-list .uecl-items-wrapper { display: none !important; }

    /* Swipeable card track (native scroll-snap – no library dependency). */
    .ue-comparison-list .uecl-mobile-cards {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        /* Setting overflow-x:auto forces overflow-y from visible to auto, which
           can surface a stray vertical scrollbar. Pin it closed – we only ever
           scroll horizontally. */
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 4px 14px 14px;
        margin: 0;
        list-style: none;
        scrollbar-width: none;
    }
    .ue-comparison-list .uecl-mobile-cards::-webkit-scrollbar { display: none; }

    .ue-comparison-list .uecl-card {
        flex: 0 0 86%;
        scroll-snap-align: center;
        border: 1px solid #e7e7e7;
        border-radius: 14px;
        padding: 22px 20px;
        background: #fff;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
    }

    .ue-comparison-list .uecl-card-head { text-align: center; margin-bottom: 18px; }
    .ue-comparison-list .uecl-card-head .ue-pkg-name  { font-weight: 700; font-size: 1.3rem; }
    .ue-comparison-list .uecl-card-head .ue-pkg-Price { font-size: 1.6rem; margin: 6px 0 14px; }
    .ue-comparison-list .uecl-card-head .ue-pkg-btn   { display: inline-block; }

    /* Each value: label on top, value below. */
    .ue-comparison-list .uecl-card-line {
        padding: 9px 0;
        border-bottom: 1px solid #f1f1f1;
    }
    .ue-comparison-list .uecl-card-line:last-child { border-bottom: 0; }
    .ue-comparison-list .uecl-card-label {
        display: block;
        font-weight: 600;
        opacity: .7;
        font-size: .85rem;
    }
    .ue-comparison-list .uecl-card-value {
        display: block;
        font-size: 1.05rem;
        margin-top: 2px;
    }

    /* Pagination dots. */
    .ue-comparison-list .uecl-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 4px;
    }
    .ue-comparison-list .uecl-dots button {
        width: 8px;
        height: 8px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #cfcfcf;
        cursor: pointer;
        transition: transform .15s ease, background .15s ease;
    }
    .ue-comparison-list .uecl-dots button.is-active {
        background: #222;
        transform: scale(1.25);
    }
}