/* GLP-1 Comparison Table Widget — Frontend Styles
   Author: Kickstart Social Co */

.glp-cw-wrap {
    font-family: inherit;
    width: 100%;
    /* Default values — overridden by Elementor color controls */
    --glp-header-bg:   #0d1f3c;
    --glp-header-text: #ffffff;
    --glp-accent:      #1cb5a0;
    --glp-body-text:   #0d1f3c;
}

/* ── Heading ── */
.glp-cw-heading {
    margin-bottom: 1.25rem;
}

.glp-cw-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: #0d1f3c;
    margin: 0 0 0.35rem;
    line-height: 1.2;
}

.glp-cw-subtitle {
    font-size: 1rem;
    color: #6b6b6b;
    margin: 0;
    line-height: 1.6;
}

/* ── Table wrapper ── */
.glp-cw-table-wrap {
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #e4e1da;
}

/* ── Table ── */
.glp-cw-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* ── Header row ── */
.glp-cw-table thead th {
    background-color: var(--glp-header-bg);
    color: var(--glp-header-text);
    padding: 13px 16px;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: left;
    vertical-align: bottom;
    line-height: 1.4;
}

.glp-cw-table thead th.glp-cw-col2-accent {
    border-top: 3px solid #1cb5a0;
}

.glp-cw-th-feature {
    width: 32%;
}

/* ── Column header image ── */
.glp-cw-col-img {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 6px;
}

/* ── Badge wrapper inside th ── */
.glp-cw-badge-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

/* ── Badge ── */
.glp-cw-badge {
    display: inline-block;
    background-color: #1cb5a0;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    padding: 3px 10px;
    border-radius: 100px;
    line-height: 1.6;
    white-space: nowrap;
}

/* ── Body rows ── */
.glp-cw-table tbody td {
    padding: 11px 16px;
    font-size: 0.85rem;
    color: #0d1f3c;
    border-bottom: 1px solid #e4e1da;
    vertical-align: middle;
    line-height: 1.5;
}

.glp-cw-table tbody tr:last-child td {
    border-bottom: none;
}

.glp-cw-table tbody tr:nth-child(even) td {
    background-color: #f9f7f3;
}

.glp-cw-table tbody td.glp-cw-feature {
    color: #6b6b6b;
    font-weight: 400;
}

/* ── Checkmark / dash ── */
.glp-cw-check {
    display: inline-flex;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}

.glp-cw-check-yes {
    background-color: rgba(28, 181, 160, 0.13);
    color: #1cb5a0;
}

.glp-cw-check-no {
    background-color: #f1efec;
    color: #b4b2a9;
}

/* ── CTA row ── */
.glp-cw-cta-row {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.glp-cw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 100px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: filter 0.18s ease, transform 0.12s ease;
    line-height: 1;
}

.glp-cw-btn:hover {
    filter: brightness(0.9);
    transform: translateY(-1px);
}

.glp-cw-btn-primary {
    background-color: #0d1f3c;
    color: #ffffff !important;
}

.glp-cw-btn-accent {
    background-color: #1cb5a0;
    color: #ffffff !important;
}

.glp-cw-btn-icon {
    display: inline-block;
    margin-right: 6px;
    font-size: 0.9em;
}

/* ─────────────────────────────────────────
   TABLET (≤768px)
───────────────────────────────────────── */
@media ( max-width: 768px ) {
    .glp-cw-title {
        font-size: 1.3rem;
    }

    .glp-cw-table thead th,
    .glp-cw-table tbody td {
        padding: 10px 12px;
        font-size: 0.8rem;
    }

    .glp-cw-cta-row {
        flex-direction: column;
    }

    .glp-cw-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
    }
}

/* ─────────────────────────────────────────
   MOBILE STACKED CARDS (≤540px)
   Every <tr> becomes a standalone card.
   The feature label is the card header.
   Each value cell shows its column name
   (from data-label) then the value below.
───────────────────────────────────────── */
@media ( max-width: 540px ) {

    .glp-cw-title    { font-size: 1.2rem; }
    .glp-cw-subtitle { font-size: 0.9rem; }

    /* Remove outer wrapper styling — cards handle their own */
    .glp-cw-table-wrap {
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        overflow: visible !important;
    }

    /* Force every table element to block */
    .glp-cw-table          { display: block !important; width: 100% !important; }
    .glp-cw-table thead    { display: none !important; }
    .glp-cw-table tbody    { display: block !important; width: 100% !important; }
    .glp-cw-table tbody tr { display: block !important; width: 100% !important; }
    .glp-cw-table tbody td { display: block !important; width: 100% !important; box-sizing: border-box !important; }

    /* Each row = a card */
    .glp-cw-table tbody tr {
        background: #ffffff;
        border: 1px solid #e4e1da;
        border-radius: 10px;
        margin-bottom: 12px;
        overflow: hidden;
    }

    /* Reset alternating row stripe inside cards — but NOT the feature header */
    .glp-cw-table tbody tr:nth-child(even) td:not(.glp-cw-feature) {
        background: transparent !important;
    }

    /* Feature label = card heading — uses Elementor header color variables */
    .glp-cw-table tbody td.glp-cw-feature,
    .glp-cw-table tbody tr:nth-child(even) td.glp-cw-feature,
    .glp-cw-table tbody tr:nth-child(odd) td.glp-cw-feature {
        background-color: var(--glp-header-bg) !important;
        color: var(--glp-header-text) !important;
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        padding: 10px 14px !important;
        border-bottom: none !important;
    }

    /* Value cells: full-width with injected column label on top */
    .glp-cw-table tbody td:not(.glp-cw-feature) {
        padding: 0 !important;
        border-bottom: 1px solid #e4e1da !important;
        color: var(--glp-body-text);
    }

    .glp-cw-table tbody tr td:last-child {
        border-bottom: none !important;
    }

    /* Column name injected from data-label — uses Elementor accent color */
    .glp-cw-table tbody td:not(.glp-cw-feature)::before {
        content: attr(data-label);
        display: block;
        font-size: 0.65rem;
        font-weight: 700;
        color: var(--glp-accent);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 9px 14px 3px;
        background: transparent;
    }

    /* Value text — padded below the label */
    .glp-cw-table tbody td:not(.glp-cw-feature) .glp-cw-check,
    .glp-cw-table tbody td:not(.glp-cw-feature) {
        padding-left: 14px !important;
        padding-right: 14px !important;
        padding-bottom: 10px !important;
        font-size: 0.85rem;
        line-height: 1.5;
    }

    /* Override the padding-top to 0 since ::before handles the top spacing */
    .glp-cw-table tbody td:not(.glp-cw-feature) {
        padding-top: 0 !important;
    }

    /* CTA buttons — full width, taller tap targets */
    .glp-cw-cta-row {
        flex-direction: column;
        gap: 0.6rem;
    }

    .glp-cw-btn {
        width: 100%;
        padding: 15px 16px !important;
        font-size: 0.9rem;
        border-radius: 10px;
    }
}