/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 04 2026 | 16:41:39 */
/* ========================
   PRICING COMPARISON TABLE
   SMVBasen — Archivo font
   ======================== */


:root {
  --smv-navy:        #0d1b3e;
  --smv-navy-mid:    #1a2f5e;
  --smv-green:       #1db87a;
  --smv-green-light: #e6f8f1;
  --smv-red:         #e03535;
  --smv-red-light:   #fdecea;
  --smv-border:      #dde3ee;
  --smv-bg-white:    #ffffff;
  --smv-bg-alt:      #f5f7fb;
  --smv-text:        #0d1b3e;
  --smv-text-muted:  #5b6b8a;
  --smv-accent:      #f4a124;   /* amber CTA accent from site */
  --smv-radius:      14px;
  --smv-font:        'Archivo', sans-serif;
}

/* ── Wrapper ── */
.pricing-comparison-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    margin: 2.5em 0;
    border-radius: var(--smv-radius);
    border: 1px solid var(--smv-border);
    box-shadow:
        0 2px 6px rgba(13, 27, 62, 0.06),
        0 8px 28px rgba(13, 27, 62, 0.09);
}

/* ── Table base ── */
.pricing-comparison-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 620px;
    font-family: var(--smv-font);
    font-size: 14px;
    color: var(--smv-text);
	margin-bottom: 0px;
}

/* ── Cell defaults ── */
.pricing-comparison-table th,
.pricing-comparison-table td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--smv-border);
    border-right: 1px solid var(--smv-border);
    text-align: left;
    vertical-align: middle;
    line-height: 1.5;
	border-left: 0px;
}
.pricing-comparison-table th:last-child,
.pricing-comparison-table td:last-child {
    border-right: none;
}
.pricing-comparison-table tbody tr:last-child td {
    border-bottom: none;
}

/* ── Header row ── */
.pricing-comparison-table thead th {
    background: var(--smv-navy);
    color: #ffffff;
    font-family: var(--smv-font);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 18px 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: none;
    white-space: nowrap;
}
.pricing-comparison-table thead th:last-child {
    border-right: none;
}

/* ── Sticky feature column ── */
.pricing-comparison-table .feature-col {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    background: var(--smv-bg-white);
    font-family: var(--smv-font);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--smv-text);
    min-width: 210px;
    box-shadow: 3px 0 10px -4px rgba(13, 27, 62, 0.13);
    z-index: 2;
}

/* Header version of sticky col */
.pricing-comparison-table thead th.feature-col {
    background: var(--smv-navy);
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.1em;
    box-shadow: 3px 0 10px -4px rgba(0, 0, 0, 0.3);
}

/* ── Alternating rows ── */
.pricing-comparison-table tbody tr:nth-child(even) td {
    background: var(--smv-bg-alt);
}
.pricing-comparison-table tbody tr:nth-child(even) td.feature-col {
    background: var(--smv-bg-alt);
}
.pricing-comparison-table tbody tr:nth-child(odd) td.feature-col {
    background: var(--smv-bg-white);
}

/* ── Row hover ── */
.pricing-comparison-table tbody tr:hover td {
    background: #edf2fb;
    transition: background 0.15s ease;
}
.pricing-comparison-table tbody tr:hover td.feature-col {
    background: #edf2fb;
}

/* ── Checkmark ── */
.checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--smv-green-light);
    color: var(--smv-green);
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--smv-font);
    line-height: 1;
}

/* ── Crossmark ── */
span.crossmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--smv-red-light);
    color: var(--smv-red);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--smv-font);
    line-height: 1;
}

/* ── Partial / text values (e.g. "Kan kun ses") ── */
.pricing-comparison-table td.partial-value {
    color: var(--smv-text-muted);
    font-style: italic;
    font-size: 13px;
}

/* ── Mobile ── */
@media screen and (max-width: 768px) {
    .pricing-comparison-table .feature-col {
        min-width: 155px;
    }
    .pricing-comparison-table th,
    .pricing-comparison-table td {
        padding: 11px 13px;
        font-size: 13px;
    }
    .pricing-comparison-table thead th {
        font-size: 11px;
        padding: 14px 13px;
    }
}