/* =================================
   DESIGN TOKENS
================================= */

:root{

    --cp-accent:#2db3bc;
    --cp-dark:#0d0f42;
    
    --cp-bg:#ffffff;
    --cp-soft:#f6f7f9;
    
    --cp-text:#1d1d1f;
    --cp-border:#e5e5e7;
    
    --cp-highlight:rgba(45,179,188,0.18);
    
    --cp-tooltip-bg:#111;
    --cp-tooltip-text:#fff;
    
    --cp-radius:10px;
    --cp-popular-bg:rgba(45,179,188,0.10);
    --cp-popular-border:rgba(45,179,188,0.35);
    
    }
    
    
    /* =================================
       WRAPPER
    ================================= */
    
    .carepack-wrapper{
    
    max-width:1050px;
    margin:auto;
    padding:40px 20px;
    
    font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
    
    color:var(--cp-text);
    
    }
    
    
    /* =================================
       TABLE
    ================================= */
    
    .carepack-table{
    
    width:100%;
    border-collapse:collapse;
    font-size:15px;
    table-layout:fixed;
    
    }
    
    .carepack-table th{
    
    padding:16px;
    font-weight:600;
    text-align:center;
    border-bottom:2px solid var(--cp-border);
    
    }
    
    .carepack-table td{
    
    padding:16px;
    border-bottom:1px solid var(--cp-border);
    vertical-align:middle;
    transition:background .2s ease;
    
    }
    
    
    /* =================================
       FEATURE COLUMN
    ================================= */
    
    .carepack-feature{
    
    text-align:left;
    font-weight:600;
    letter-spacing:.01em;
    
    }
    
    
    /* =================================
       PLAN COLUMNS
    ================================= */
    
    /* most popular plan highlight */
    .plan-popular{
    background:var(--cp-popular-bg);
    border-left:1px solid var(--cp-popular-border);
    border-right:1px solid var(--cp-popular-border);
    }
    
    thead .plan-popular{
    position:relative;
    }
    
    thead .plan-popular::after{
    content:"Mest valgt";
    position:absolute;
    top:-10px;
    left:50%;
    transform:translateX(-50%);
    font-size:11px;
    background:var(--cp-accent);
    color:#fff;
    padding:3px 8px;
    border-radius:12px;
    letter-spacing:.02em;
    }
    
    .plan-total{
    
    background:rgba(45,179,188,0.12);
    text-align:center;
    font-weight:600;
    
    }
    
    .plan-basis{
    
    background:rgba(13,15,66,0.08);
    text-align:center;
    
    }
    
    
    /* subtle emphasis of Total column */
    
    .carepack-table td.plan-total{
    
    box-shadow:
    inset 1px 0 0 var(--cp-border),
    inset -1px 0 0 var(--cp-border);

    background:var(--cp-highlight);
    font-weight:600;
    
    }
    
    
    /* =================================
       HEADER COLORS
    ================================= */
    
    thead .plan-total{
    
    background:var(--cp-accent);
    color:#ffffff;
    
    }
    
    thead .plan-basis{
    
    background:linear-gradient(180deg,var(--cp-dark),#070922);
    color:white;
    
    }
    
    
    /* =================================
       CHECK ICON
    ================================= */
    
    .check{
    
    font-size:16px;
    font-weight:700;
    
    opacity:0;
    transform:scale(.8);
    
    animation:checkfade .5s ease forwards;
    
    }
    
    @keyframes checkfade{
    
    to{
    opacity:1;
    transform:scale(1);
    }
    
    }
    
    
    /* =================================
       ROW STRIPING
    ================================= */
    
    tbody tr:nth-child(even) td{
    
    background:var(--cp-soft);
    
    }
    
    
    /* subtle hover scan */
    
    @media (hover:hover){
    
    .carepack-table tbody tr:hover td{
    
    background:#fafafa;
    
    }
    
    }
    
    
    /* =================================
       STICKY TOTAL COLUMN
    ================================= */
    
    @media (min-width:900px){
    
    .carepack-table th.plan-total,
    .carepack-table td.plan-total{
    
    position:sticky;
    z-index:1;
    
    }
    
    }
    
    
    /* =================================
       TOOLTIP
    ================================= */
    
    .feature-tooltip{
    
    position:relative;
    cursor:help;
    border-bottom:1px dotted var(--cp-border);
    
    }
    
    .feature-tooltip::after{
    
    content:attr(data-tooltip);
    
    position:absolute;
    
    bottom:130%;
    left:0;
    
    background:var(--cp-tooltip-bg);
    color:var(--cp-tooltip-text);
    
    padding:8px 10px;
    font-size:12px;
    
    border-radius:6px;
    
    opacity:0;
    pointer-events:none;
    
    white-space:nowrap;
    
    transform:translateY(4px);
    transition:.2s ease;
    
    }
    
    .feature-tooltip:hover::after{
    
    opacity:1;
    transform:translateY(0);
    
    }
    
    
    /* =================================
       SCROLL REVEAL
    ================================= */
    
    .table-reveal{
    
    opacity:0;
    transform:translateY(10px);
    
    animation:tablefade .6s ease forwards;
    
    }
    
    @keyframes tablefade{
    
    to{
    
    opacity:1;
    transform:translateY(0);
    
    }
    
    }
    
    
    /* =================================
       MOBILE
    ================================= */
    
    @media (max-width:720px){
    
    .carepack-table thead{
    
    display:none;
    
    }
    
    .carepack-table,
    .carepack-table tbody,
    .carepack-table tr,
    .carepack-table td{
    
    display:block;
    width:100%;
    font-size:14px;
    padding:10px;
    
    }
    
    .carepack-table tr{
    
    margin-bottom:6px;
    
    border:1px solid var(--cp-border);
    border-radius:var(--cp-radius);
    
    overflow:hidden;
    
    }
    
    .carepack-feature{
    
    background:var(--cp-soft);
    font-weight:600;
    padding:8px 10px;
    font-size:13px;
    line-height:1.35;
    
    }
    
    .plan-total::before{
    
    content:"Total";
    
    display:block;
    font-size:11px;
    
    opacity:.6;
    margin-bottom:4px;
    
    }
    
    .plan-basis::before{
    
    content:"Basis";
    
    display:block;
    font-size:11px;
    
    opacity:.6;
    margin-bottom:4px;
    
    }
    
    }
    
    
    /* =================================
       COMPACT MOBILE MODE
    ================================= */
    
    @media (max-width:480px){
    
    .carepack-table td{
    
    padding:8px;
    
    }
    
    .carepack-feature{
    
    font-size:12.5px;
    line-height:1.3;
    
    }
    
    .check{
    
    font-size:16px;
    
    }
    
    }