/* =========================================================
   GLOBAL
   ========================================================= */

.wkhp-heading,
.wkhp-heading *,
.wk-card,
.wk-card *,
.wk-coupon-panel,
.wk-coupon-panel *{
    box-sizing:border-box;
    font-family:"Wix Madefor Display","Segoe UI",Arial,sans-serif!important;
}

/* =========================================================
   SECTION HEADING
   VISUAL ONLY — DOES NOT WRAP OR CHANGE CARD STRUCTURE
   ========================================================= */

.wkhp-heading{
    width:100%;

    margin:0;

    padding:0 20px;

    text-align:left;
}

.wkhp-title{
    margin:0!important;

    padding:0!important;

    color:#101828!important;

    font-size:
        clamp(
            38px,
            3.3vw,
            49px
        )!important;

    font-weight:700!important;

    letter-spacing:-1.45px;

    line-height:1.045!important;

    text-align:left!important;
}

.wkhp-subtitle{
    max-width:650px;

    margin:
        10px 0 0!important;

    padding:0!important;

    color:#667085!important;

    font-size:
        clamp(
            15px,
            1.12vw,
            16.8px
        );

    font-weight:500;

    letter-spacing:-.16px;

    line-height:1.52;

    text-align:left;
}


.wk-card{
    --wk-blue:#016EFD;
    --wk-blue-dark:#0058D4;
    --wk-soft:#EDF5FF;

    --wk-orange:#FF3F24;
    --wk-orange-dark:#DF2F18;
    --wk-gold:#FFB316;
    --wk-gold-dark:#DE9400;

    --wk-award:#673DE6;
    --wk-award-dark:#4A2BB7;

    position:relative;

    width:100%;
    margin:8px 0;

    background:#fff;
    color:#101828;

    border-top:0;
    border-left:1px solid rgba(16,24,40,.05);
    border-right:1px solid rgba(16,24,40,.05);
    border-bottom:1px solid rgba(16,24,40,.05);

    border-radius:0 14px 14px 14px;
    border-top-left-radius:0;

    overflow:visible;

    box-shadow:0 4px 10px rgba(16,24,40,.07);

    transition:box-shadow .22s ease;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

.wk-card.wk-card-has-ribbon{
    border-top-left-radius:0;
}

.wk-card.wk-card-no-ribbon{
    border-top-left-radius:14px;
}

.wk-card.wk-card-no-ribbon .wk-card-rank{
    border-radius:14px 0 11px 0;
}

.wk-card:hover,
.wk-card:focus-within{
    box-shadow:0 7px 14px rgba(16,24,40,.12);
}


/* =========================================================
   MAIN
   ========================================================= */

.wk-main{
    display:grid;

    grid-template-columns:
        minmax(190px,1.05fr)
        minmax(350px,1.95fr)
        minmax(210px,1.05fr)
        minmax(220px,1fr);

    align-items:stretch;

    gap:0;

    min-height:184px;

    padding:
        39px
        30px
        11px;
}


/* =========================================================
   AWARD
   ========================================================= */

.wk-award{
    position:absolute;

    top:9px;
    left:-10px;

    z-index:40;

    isolation:isolate;

    height:28px;

    padding:
        0 13px
        0 11px;

    display:flex;

    align-items:center;
    justify-content:flex-start;

    gap:7px;

    background:
        var(
            --wk-award,
            #673DE6
        );

    color:#fff;

    font-size:12.8px;
    font-weight:620;

    letter-spacing:-.12px;

    line-height:1;

    white-space:nowrap;

    border-radius:
        0 3px 3px 0;

    box-shadow:
        0 4px 9px
        rgba(16,24,40,.085);
}

.wk-award::before{
    content:"";

    position:absolute;

    z-index:2;

    top:-7px;
    left:0;

    width:10px;
    height:7px;

    /*
     * True wrap / contact shadow:
     * this filled fold starts at the highest connection point.
     * Because the purple tail base continues underneath it,
     * there is no white triangular hole.
     */
    background:
        linear-gradient(
            135deg,
            rgba(16,24,40,.08) 0%,
            var(
                --wk-award-dark,
                #4A2BB7
            ) 58%,
            var(
                --wk-award-dark,
                #4A2BB7
            ) 100%
        );

    clip-path:
        polygon(
            0 100%,
            100% 0,
            100% 100%
        );

    pointer-events:none;
}

.wk-award::after{
    content:"";

    position:absolute;

    z-index:0;

    top:-7px;
    left:-21px;

    width:31px;
    height:28px;

    /*
     * TRUE 3D CONTACT SHADOW
     *
     * Exact seam path:
     *   (31,0)  ->  (21,7)  ->  (21,28)
     *
     * So the shadow begins INSIDE the 45-degree fold,
     * follows that diagonal edge, then becomes the straight
     * vertical contact shadow below it.
     *
     * It is rendered only on the rear-tail layer.
     */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='28' viewBox='0 0 31 28'%3E%3Cdefs%3E%3Cfilter id='s' x='-40%25' y='-20%25' width='180%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='1.15'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M31 0 L21 7 L21 28' fill='none' stroke='%23101828' stroke-opacity='.30' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' filter='url(%23s)'/%3E%3Cpath d='M31 0 L21 7 L21 28' fill='none' stroke='%23101828' stroke-opacity='.13' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        0 0
        / 31px 28px
        no-repeat,

        var(
            --wk-award,
            #673DE6
        );

    clip-path:
        polygon(
            0 0,
            100% 0,
            100% 100%,
            0 100%,
            9px 50%
        );

    box-shadow:none;

    filter:
        drop-shadow(
            0 3px 3px
            rgba(16,24,40,.10)
        );

    pointer-events:none;
}

/*
 * Keep ribbon text/number above the rear tail and fold.
 * This is structural layering only; it changes no typography.
 */
.wk-award > span{
    position:relative;

    z-index:3;
}

/* =========================================================
   LOGO
   ========================================================= */

.wk-logo{
    display:flex;

    align-items:center;
    justify-content:flex-start;
}

.wk-logo img{
    display:block;

    width:auto;

    max-width:205px;
    max-height:76px;

    object-fit:contain;
}

/* Larger treatment for IONOS */
.wk-logo img.wk-logo-ionos{
    width:235px!important;
    max-width:235px!important;

    height:auto!important;
    max-height:90px!important;
}


/* =========================================================
   FEATURES
   ========================================================= */

.wk-features{
    min-width:0;

    display:flex;

    flex-direction:column;
    justify-content:center;

    gap:13px;

    padding:
        1px
        28px;

    border-left:
        1px solid
        #E7EBF0;
}

.wk-feature{
    display:flex;

    align-items:flex-start;

    gap:10px;

    color:#101828;

    font-size:inherit;
    font-weight:500;

    line-height:1.38;

    letter-spacing:normal;
}

.wk-check{
    width:13px;
    height:13px;

    flex:
        0 0 13px;

    margin-top:4px;

    color:var(--wk-blue);
}

/* =========================================================
   RATING
   ========================================================= */

.wk-rating{
    position:relative;

    display:flex;

    flex-direction:column;
    align-items:flex-start;

    margin-top:18px;

    text-align:left;
}

.wk-rating-main{
    display:flex;

    align-items:center;
    justify-content:flex-start;

    gap:10px;
}

.wk-rating-label{
    text-align:left;
}

.wk-rating-word{
    color:#475467;

    font-size:14px;
    font-weight:700;
}


/* =========================================================
   STARS
   ========================================================= */

.wk-stars{
    display:flex;

    align-items:center;
    justify-content:flex-start;

    gap:2px;

    margin-top:4px;
}

.wk-star-svg{
    width:18px;
    height:18px;

    display:block;

    fill:#FFAD00;
    stroke:none;

    stroke-width:.65;

    filter:none;
}

/* M5.4.1: summary stars use the same flat, borderless visual language as plan-table stars. */
.wk-stars .wk-star-svg path{
    stroke:none!important;
}

/* =========================================================
   SCORE BOX
   ========================================================= */

.wk-score{
    --wk-score-base-width:54px;

    position:relative;

    width:var(--wk-score-base-width);
    height:52px;

    flex:0 0 var(--wk-score-base-width);

    z-index:8000;

    outline:none;
}

.wk-score:has(.wk-trophy:not([hidden])){
    --wk-score-base-width:94px;
}

.wk-score-card{
    position:absolute;

    top:0;
    left:50%;

    width:var(--wk-score-base-width);
    height:52px;

    transform:
        translateX(-50%);

    overflow:hidden;

    background:rgba(1,110,253,.045);

    border:0;

    border-radius:9px;

    box-shadow:none;

    transition:
        width .30s cubic-bezier(.16,1,.3,1) .08s,
        height .30s cubic-bezier(.16,1,.3,1) .08s,
        top .30s cubic-bezier(.16,1,.3,1) .08s,
        border-radius .22s ease .08s,
        box-shadow .25s ease .08s,
        background .20s ease .08s;
}

.wk-score-head{
    position:absolute;

    top:0;
    left:0;

    z-index:10;

    width:100%;
    height:52px;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:7px;

    padding:5px 8px;

    color:#475467;

    font-size:26px;
    font-weight:400;

    letter-spacing:-.7px;

    transition:
        top .30s
        cubic-bezier(.16,1,.3,1)
        .08s;
}


/* =========================================================
   TROPHY
   ========================================================= */

.wk-trophy{
    display:block;
    width:36px;
    height:42px;
    flex:0 0 36px;
    object-fit:contain;
    filter:none;
    box-shadow:none;
    background:transparent;
}

.wk-score:not(:has(.wk-trophy:not([hidden]))) .wk-score-head{
    gap:0;
}

/* =========================================================
   SCORE ANIMATION
   ========================================================= */

@keyframes wkRatingPulse{

    0%{
        transform:scale(1);
    }

    48%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
    }

}

.wk-score:hover .wk-score-head,
.wk-score:focus-within .wk-score-head{
    animation:
        wkRatingPulse
        .20s
        cubic-bezier(.2,.8,.2,1);
}

.wk-score:hover .wk-score-card,
.wk-score:focus-within .wk-score-card{
    width:248px;
    height:258px;

    top:-39px;

    background:#fff;

    border:0;

    border-radius:13px;

    box-shadow:
        0 20px 46px rgba(15,23,42,.17),
        0 5px 15px rgba(15,23,42,.07);
}

.wk-score:hover .wk-score-head,
.wk-score:focus-within .wk-score-head{
    top:39px;
}


/* =========================================================
   SCORE TITLE
   ========================================================= */

.wk-score-title{
    position:absolute;

    top:10px;

    left:14px;
    right:14px;

    opacity:0;

    visibility:hidden;

    transform:
        translateY(-5px);

    text-align:center;

    transition:
        opacity .17s ease .22s,
        transform .17s ease .22s;
}

.wk-score-title strong{
    display:block;

    color:#101828;

    font-size:12px;
    font-weight:650;
}

.wk-score:hover .wk-score-title,
.wk-score:focus-within .wk-score-title{
    opacity:1;

    visibility:visible;

    transform:none;
}


/* =========================================================
   SCORE DETAILS
   ========================================================= */

.wk-score-details{
    position:absolute;

    top:101px;
    bottom:10px;

    left:13px;
    right:13px;

    display:flex;

    flex-direction:column;

    opacity:0;

    visibility:hidden;

    transform:
        translateY(7px);

    transition:
        opacity .19s ease .25s,
        transform .22s ease .25s;
}

.wk-score:hover .wk-score-details,
.wk-score:focus-within .wk-score-details{
    opacity:1;

    visibility:visible;

    transform:none;
}

.wk-factor{
    display:grid;

    grid-template-columns:
        27px
        1fr
        auto;

    align-items:center;

    gap:6px;

    height:22px;

    flex:0 0 22px;

    border-bottom:
        1px solid
        rgba(16,24,40,.055);

    color:#475467;

    font-size:9.8px;
    font-weight:500;
}

.wk-factor:last-of-type{
    border-bottom:0;
}

.wk-factor-icon{
    width:22px;
    height:22px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:0;

    background:transparent;

    color:var(--wk-blue);
}

.wk-factor-icon svg{
    width:12.5px;
    height:12.5px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.9;

    stroke-linecap:round;
    stroke-linejoin:round;
}

.wk-factor-score{
    color:#667085!important;

    font-size:10.5px;
    font-weight:500!important;
}


/* =========================================================
   VISIT BUTTON IN SCORE POPUP
   ========================================================= */

.wk-visit{
    width:138px;
    height:31px;

    flex:
        0 0 31px;

    margin-top:auto;
    margin-left:auto;
    margin-right:auto;

    padding:
        0 12px;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:0;

    border-radius:999px;

    background:var(--wk-orange);

    color:#fff!important;

    text-decoration:none;

    font-size:10.5px;
    font-weight:700;

    white-space:nowrap;

    box-shadow:
        0 4px 9px
        rgba(1,110,253,.16);

    transition:
        background .16s ease,
        transform .16s ease;
}

.wk-visit:hover{
    background:var(--wk-orange-dark);

    transform:
        translateY(-1px);
}


/* =========================================================
   REVIEW LINK
   ========================================================= */

.wk-review-link{
    width:fit-content;

    margin:0;

    color:var(--wk-blue);

    font-size:15px;
    font-weight:600;

    text-decoration:none;
}

.wk-review-link:hover{
    color:var(--wk-orange);
}

/* =========================================================
   PRICE
   ========================================================= */

.wk-offer{
    position:relative;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding-left:28px;

    border-left:
        1px solid
        #E7EBF0;

    text-align:center;
}

.wk-price{
    display:flex;

    align-items:baseline;
    justify-content:center;

    gap:4px;

    margin-bottom:13px;
}

.wk-currency,
.wk-period{
    color:#475467;

    font-size:15px;
    font-weight:500;
}

.wk-price-value{
    color:#050505;

    font-size:35px;

    line-height:1;

    font-weight:600;

    letter-spacing:-1.1px;
}


/* =========================================================
   MAIN BUTTONS
   ========================================================= */

.wk-claim,
.wk-coupon-trigger{
    width:100%;
    max-width:255px;

    height:44px;
    min-height:44px;

    padding:
        0 15px;

    border-radius:24px;

    font-size:14.5px;
    font-weight:700;
}

.wk-claim{
    margin:
        0 auto;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:10px;

    background:var(--wk-blue);

    color:#fff!important;

    text-decoration:none;

    box-shadow:
        0 6px 14px
        rgba(1,110,253,.15);

    transition:
        background .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.wk-claim:hover{
    background:var(--wk-orange);

    transform:
        translateY(-1px);
}

.wk-arrow{
    width:18px;
    height:18px;

    fill:none;

    stroke:currentColor;

    stroke-width:2;

    stroke-linecap:round;
    stroke-linejoin:round;
}


/* =========================================================
   COUPON BUTTON
   ========================================================= */

.wk-coupon{
    position:relative;

    width:100%;
    max-width:255px;

    margin:
        9px auto 0;

    z-index:100;
}

.wk-coupon-trigger{
    appearance:none;

    border:0;

    cursor:pointer;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:10px;

    background:
        rgba(1,110,253,.055);

    color:#303846;

    transition:
        background .18s ease,
        transform .18s ease;
}

.wk-coupon-trigger:hover{
    background:
        rgba(1,110,253,.10);

    transform:
        translateY(-1px);
}

/* =========================================================
   COUPON POPUP
   MOVED TO BODY BY MASTER JS
   ========================================================= */

.wk-coupon-panel{
    --wk-blue:#016EFD;
    --wk-blue-dark:#0058D4;
    --wk-soft:#EDF5FF;

    position:fixed!important;

    left:0;
    top:0;

    z-index:2147483000!important;

    width:360px;

    max-width:
        calc(100vw - 24px);

    height:auto!important;
    min-height:0!important;
    max-height:none!important;

    overflow:visible!important;

    display:block;

    padding:
        10px
        10px
        6px;

    margin:0!important;

    background:#fff;

    border:0;

    border-radius:15px;

    box-shadow:
        0 28px 75px rgba(15,23,42,.19),
        0 8px 24px rgba(15,23,42,.08);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:
        translateX(8px)
        scale(.985);

    transform-origin:
        right bottom;

    transition:opacity .42s ease, transform .42s cubic-bezier(.22,1,.36,1), visibility 0s linear .42s;

    text-align:left;
}

.wk-coupon-panel.wk-panel-open{
    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:
        translateX(0)
        scale(1);

    transition:opacity .20s ease, transform .24s cubic-bezier(.16,1,.3,1), visibility 0s;
}


/* Invisible mouse bridge */

.wk-coupon-panel::before{
    content:"";

    position:absolute;

    right:-20px;
    top:0;

    width:20px;
    height:100%;

    background:transparent;

    pointer-events:auto;
}


/* Visible pointer to Get Coupons */




/* Mobile/above mode */

.wk-coupon-panel.wk-panel-above::before{
    left:0;
    right:0;

    top:auto;
    bottom:-20px;

    width:100%;
    height:20px;
}




/* =========================================================
   COUPON HEADER
   ========================================================= */

.wk-coupon-head{
    padding:
        6px
        8px
        10px;

    margin:0;

    border-bottom:
        1px solid
        rgba(16,24,40,.055);
}

.wk-coupon-head strong{
    display:block;

    color:#101828;

    font-size:15px;
    font-weight:650;
}

.wk-coupon-head span{
    display:block;

    margin-top:3px;

    color:#667085;

    font-size:10px;
    font-weight:500;
}


/* =========================================================
   COUPON ROW
   NEUTRAL / CLEAN
   ========================================================= */

.wk-coupon-item{
    appearance:none;

    position:relative;

    width:100%;

    margin:
        4px 0;

    padding:
        10px 9px;

    display:grid;

    grid-template-columns:30px minmax(0,1fr);

    align-items:center;

    gap:10px;

    border:0;

    border-radius:11px;

    cursor:pointer;

    background:transparent;

    color:#101828!important;

    text-decoration:none!important;

    text-align:left;

    transition:
        background .16s ease;
}

.wk-coupon-item:last-child{
    margin-bottom:0!important;
}

.wk-coupon-item:hover,
.wk-coupon-item:focus-visible{
    background:#F6F8FA;

    outline:0;
}


/* =========================================================
   COUPON ICON
   ========================================================= */

.wk-ticket{
    width:29px;
    height:29px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:8px;

    background:transparent;

    color:var(--wk-blue);
}

.wk-ticket svg{
    display:none!important;
}

.wk-ticket::before{
    content:"";

    display:block;

    width:21px;
    height:21px;

    background:
        center / contain
        no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23016EFD' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5A2.5 2.5 0 0 1 6.5 5h11A2.5 2.5 0 0 1 20 7.5V9a3 3 0 0 0 0 6v1.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 16.5V15a3 3 0 0 0 0-6V7.5Z'/%3E%3Cpath d='m9 9 6 6'/%3E%3Ccircle cx='9' cy='14.8' r='.75' fill='%23016EFD' stroke='none'/%3E%3Ccircle cx='15' cy='9.2' r='.75' fill='%23016EFD' stroke='none'/%3E%3C/svg%3E");
}

.wk-coupon-info strong{
    display:block;

    color:#101828;

    font-size:11.8px;
    font-weight:650;

    line-height:1.35;
}

.wk-coupon-info span{
    display:block;

    margin-top:2px;

    color:#667085;

    font-size:9.5px;
    font-weight:500;
}


/* =========================================================
   SHOW PLANS
   ========================================================= */

.wk-toggle{
    min-height:50px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-top:
        1px solid
        rgba(16,24,40,.045);
}

.wk-toggle button{
    appearance:none;

    border:0;

    background:transparent;

    cursor:pointer;

    display:flex;

    align-items:center;

    gap:9px;

    padding:
        9px 17px;

    color:#475467;

    font-size:13px;
    font-weight:700;
}

.wk-toggle button:hover{
    color:var(--wk-blue);
}

.wk-chevron{
    width:8px;
    height:8px;

    border-right:
        1.7px solid
        currentColor;

    border-bottom:
        1.7px solid
        currentColor;

    transform:
        rotate(45deg);

    transition:transform .30s ease-in-out;
}

.wk-card.wk-plans-open
.wk-chevron{
    transform:
        rotate(225deg);
}


/* =========================================================
   TABLE OPEN/CLOSE
   ========================================================= */

.wk-plans{
    display:grid;

    grid-template-rows:0fr;

    opacity:0;

    background:#fff;

    transition:grid-template-rows .38s ease-in-out, opacity .34s ease-in-out;
}

.wk-plans-inner{
    min-height:0;

    overflow:hidden;
}

.wk-card.wk-plans-open
.wk-plans{
    grid-template-rows:1fr;

    opacity:1;
}


/* =========================================================
   TABLE
   ========================================================= */

.wk-table-wrap{
    width:100%;

    background:#fff;

    overflow:visible;
}

.wk-table{
    width:100%;

    table-layout:fixed;

    border-collapse:separate;

    border-spacing:0;

    background:#fff;

    color:#344054;

    font-size:12.6px;
}

.wk-table col:nth-child(1){width:19%}
.wk-table col:nth-child(2){width:9%}
.wk-table col:nth-child(3){width:9%}
.wk-table col:nth-child(4){width:8%}
.wk-table col:nth-child(5){width:11%}
.wk-table col:nth-child(6){width:11%}
.wk-table col:nth-child(7){width:20%}
.wk-table col:nth-child(8){width:13%}

.wk-table thead{
    background:
        rgba(249,250,251,.48);
}

.wk-table th{
    height:48px;

    padding:10px 12px;

    border:0;

    border-top:
        1px solid
        rgba(234,236,240,.48);

    border-bottom:
        1px solid
        rgba(234,236,240,.52);

    background:transparent;

    color:#475467;

    font-size:11.55px;
    font-weight:600;

    text-align:left;

    white-space:nowrap;
}

.wk-table td{
    height:68px;

    padding:12px 12px;

    border:0;

    border-bottom:
        1px solid
        rgba(234,236,240,.45);

    background:#fff;

    font-weight:500;

    vertical-align:middle;
}

.wk-table tbody tr:hover td{
    background:
        rgba(249,250,251,.32);
}

.wk-plan-name{
    color:var(--wk-blue);

    font-size:13.1px;
    font-weight:700;

    line-height:1.35;

    text-decoration:none;
}

.wk-plan-name:hover{
    color:var(--wk-orange);
}

.wk-table td.wk-plan-price{
    color:#101828;

    font-size:14.2px;
    font-weight:650;
}

.wk-plan-score{
    display:flex;

    align-items:center;

    gap:7px;

    color:#101828;

    font-size:13.1px;
    font-weight:500;

    white-space:nowrap;
}

.wk-plan-btn{
    width:100%;

    max-width:125px;

    height:33px;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    border:
        1.4px solid
        var(--wk-blue);

    border-radius:20px;

    background:#fff;

    color:var(--wk-blue)!important;

    font-size:12.1px;
    font-weight:700;

    text-decoration:none;

    transition:
        background .18s ease,
        color .18s ease;
}

.wk-plan-btn:hover{
    background:var(--wk-blue);

    color:#fff!important;
}

.wk-table th:last-child,
.wk-table td:last-child{
    text-align:center;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

/* =========================================================
   WEBKEPLER IDENTITY — FINAL CLEAN MASTER
   ========================================================= */


.wk-award-number{
    width:21px;
    height:21px;

    flex:
        0 0 21px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#fff;

    color:
        var(
            --wk-award,
            #673DE6
        );

    font-size:11px;
    font-weight:700;

    line-height:1;
}

/* =========================================================
   RANK TABS — EXACT LEGACY WKRC CONTRACT (M5.4.2)
   Copied from the installed WebKepler Review Core rank-only state.
   ========================================================= */
.wk-card-rank{
    position:absolute;
    z-index:41;
    top:0;
    left:0;

    width:35px;
    height:28px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:var(--wk-award,#673DE6);

    border-radius:14px 0 11px 0;

    pointer-events:none;
    user-select:none;
}

.wk-card-rank span{
    width:21px;
    height:21px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#FFFFFF;
    color:var(--wk-award,#673DE6);

    font-size:11px;
    font-weight:700;
    line-height:1;
}


.wk-provider-identity{
    min-width:0;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding-right:25px;
}

.wk-provider-identity .wk-logo{
    justify-content:flex-start;
}

.wk-verified-icon{
    display:block;

    width:13px;
    height:13px;

    object-fit:contain;
}

.wk-feature-copy{
    display:block;

    min-width:0;
}

.wk-feature-title{
    display:block;

    color:#101828;

    font-size:15.8px;
    font-weight:500;

    letter-spacing:-.12px;

    line-height:1.34;
}

.wk-feature-description{
    display:block;

    margin-top:2px;

    color:#667085;

    font-size:10.7px;
    font-weight:500;

    letter-spacing:-.04px;

    line-height:1.36;
}

.wk-review-summary{
    min-width:0;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:
        3px
        24px;

    background:transparent;
}

.wk-review-summary .wk-offer-label{
    margin:
        0 0 4px;

    color:#98A2B3;

    font-size:10.5px;
    font-weight:600;

    letter-spacing:.18px;

    line-height:1.2;
}

.wk-review-summary .wk-price{
    justify-content:flex-start;

    margin:
        0 0 11px;
}

.wk-review-summary .wk-price-value{
    font-size:39px;
}

.wk-review-summary .wk-review-note{
    margin:
        5px 0 0!important;

    color:#667085;

    font-size:11.2px;
    font-weight:500;

    letter-spacing:-.04px;

    line-height:1.35;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1100px){

    .wk-main{
        grid-template-columns:
            minmax(190px,.9fr)
            minmax(0,1.5fr);

        row-gap:24px;

        min-height:0;

        padding:
            44px
            30px
            11px;
    }

    .wk-provider-identity{
        padding-right:24px;
    }

    .wk-features{
        padding-right:0;
    }

    .wk-review-summary{
        padding:
            18px 24px 0 0;

        border-top:
            1px solid
            #E7EBF0;
    }

    .wk-offer{
        padding:
            18px 0 0 25px;

        border-left:
            1px solid
            #E7EBF0;

        border-top:
            1px solid
            #E7EBF0;
    }

}


@media(max-width:720px){
    .wkhp-title{
        font-size:clamp(29px,8.6vw,37px)!important;
        letter-spacing:-1px;
    }
    .wkhp-subtitle{font-size:14px;}

    /* Equal 32px side gutters; the ribbon tail extends 28px into the left gutter. */
    .wk-card{
        width:calc(100% - 64px);
        max-width:calc(100% - 64px);
        margin:8px auto;
    }
    .wk-award{
        left:-7px;
        height:28px;
        padding:0 12px 0 10px;
        font-size:12.4px;
    }
    .wk-main{
        grid-template-columns:minmax(0,1fr);
        row-gap:0;
        min-height:0;
        padding:48px 15px 10px;
        text-align:left;
    }
    .wk-provider-identity,
    .wk-features,
    .wk-review-summary,
    .wk-offer{
        width:100%;
        min-width:0;
        border-left:0;
        border-top:0;
        border-bottom:1px solid #E7EBF0;
    }
    .wk-provider-identity{padding:0 0 12px;}
    .wk-rating{margin-top:10px;}
    .wk-features{
        padding:13px 0;
        gap:8px;
    }
    .wk-feature{gap:8px;}
    .wk-feature-title{
        font-size:14.6px;
        line-height:1.28;
    }
    .wk-feature-description{
        margin-top:1px;
        font-size:10.5px;
        line-height:1.32;
    }
    .wk-review-summary{padding:12px 0;}
    .wk-review-summary .wk-price{margin-bottom:6px;}
    .wk-review-summary .wk-price-value{font-size:36px;}
    .wk-review-summary .wk-review-note{margin:3px 0 0!important;}
    .wk-review-link{font-size:14px;}
    .wk-offer{
        display:flex;
        flex-direction:column;
        align-items:center;
        padding:12px 0 6px;
        border-bottom:0;
        text-align:center;
    }
    .wk-claim,
    .wk-coupon{
        width:100%;
        max-width:255px;
        margin-left:auto;
        margin-right:auto;
    }
    .wk-claim,
    .wk-coupon-trigger{
        height:42px;
        min-height:42px;
    }
    .wk-coupon{margin-top:7px;}
    .wk-coupon-trigger{margin-inline:auto;}
    .wk-provider-identity .wk-logo{justify-content:flex-start;}
    .wk-logo img.wk-logo-ionos{
        width:220px!important;
        max-width:90%!important;
    }
    .wk-toggle{min-height:44px;}
    .wk-toggle button{padding:8px 14px;}
    .wk-table-wrap{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }
    .wk-table{min-width:900px;}
}


/* =========================================================
   REVIEW MASTER — SCORE DETAILS / TABLE STARS / OS / POPUP
   ========================================================= */
.wk-factor-icon img{
    display:block;
    width:20px;
    height:20px;
    object-fit:contain;
}
.wk-score-head > span{
    color:#475467;
    font-size:26px;
    font-weight:400!important;
    letter-spacing:-.7px;
    line-height:1;
}
.wk-coupon-panel .wk-coupon-head span{font-size:10.5px;}
.wk-coupon-panel .wk-coupon-item:focus-visible{
    outline:2px solid #016EFD;
    outline-offset:-2px;
}
/* Physical white arrow toward the coupon button, without gray border. */
.wk-coupon-panel .wk-panel-arrow{
    position:absolute;
    right:-14px;
    top:var(--wk-arrow-y,80%);
    z-index:10;
    display:block;
    width:15px;
    height:22px;
    background:#fff;
    clip-path:polygon(0 0,100% 50%,0 100%);
    transform:translateY(-50%);
    pointer-events:none;
}
.wk-coupon-panel.wk-panel-above .wk-panel-arrow{
    left:var(--wk-arrow-x,50%);
    right:auto;
    top:auto;
    bottom:-13px;
    width:22px;
    height:15px;
    clip-path:polygon(0 0,100% 0,50% 100%);
    transform:translateX(-50%);
}
/* Flat gold rating stars; decimal scores get proportional fills. */
.wk-plan-stars{
    display:inline-flex;
    align-items:center;
    gap:2px;
    flex:none;
}
.wk-plan-stars .wk-star{
    position:relative;
    display:inline-block;
    width:16.8px;
    height:16.8px;
    flex:0 0 16.8px;
    background:transparent;
}
.wk-plan-stars .wk-star-empty,
.wk-plan-stars .wk-star-fill svg{
    position:absolute;
    inset:0;
    display:block;
    width:16.8px;
    height:16.8px;
    fill:#FFE4AA;
    stroke:none;
    filter:none;
    background:transparent;
}
.wk-plan-stars .wk-star-fill{
    position:absolute;
    inset:0 auto 0 0;
    width:100%;
    overflow:hidden;
    background:transparent;
}
.wk-plan-stars .wk-star-fill svg{fill:#FFAD00;}
.wk-plan-rating-value{font-weight:500;}
/* Uniform column alignment, including icon and score cells. */
.wk-table thead th:nth-child(n+2):not(:last-child),
.wk-table tbody td:nth-child(n+2):not(:last-child){text-align:center;}
.wk-table td:nth-child(7) .wk-plan-score{justify-content:center;}
.wk-table td:nth-child(2),
.wk-table td:nth-child(3),
.wk-table td:nth-child(4),
.wk-table td:nth-child(5),
.wk-table td:nth-child(6),
.wk-table td:nth-child(7){padding-inline:10px;}
.wk-os-icons{
    display:inline-flex;
    width:100%;
    min-height:30px;
    align-items:center;
    justify-content:center;
    gap:5px;
    white-space:nowrap;
}
.wk-os-icon{
    display:block;
    width:29.4px;
    height:29.4px;
    flex:0 0 29.4px;
    max-width:none;
    object-fit:contain;
}
@media(prefers-reduced-motion:reduce){
    .wk-plans,.wk-chevron,.wk-coupon-panel,.wk-coupon-panel.wk-panel-open{
        transition-duration:.01ms!important;
    }
}
/* Desktop only: align the heading with the existing centered card. */
@media (min-width:1200px){
    .wkhp-heading{
        width:calc(100% - 100px);
        max-width:1600px;
        margin:0 auto;
        padding:0;
    }
    .wk-card{
        width:calc(100% - 100px);
        max-width:1600px;
        margin:8px auto;
    }
    /* Keep the logo/features divider, but give it enough desktop clearance. */
    .wk-features{
        margin-left:8px;
    }
}


/* =========================================================
   WEBKEPLER — COUPON POPUP FINAL VISUAL V8
   23 SEP 2026
   ========================================================= */
/* Match the clean Figma-style coupon popup: no header block, full-width list rows,
   coupon icon image, and reduced unused white margins. */
.wk-coupon-panel{
    width:min(520px, calc(100vw - 24px));
    max-width:calc(100vw - 24px);
    padding:14px 0 12px;
    border-radius:18px;
}
.wk-coupon-head{
    display:none!important;
}
.wk-coupon-item{
    width:100%;
    margin:0!important;
    padding:18px 26px;
    display:grid;
    grid-template-columns:28px minmax(0,1fr);
    gap:16px;
    align-items:start;
    border-radius:0;
    background:transparent;
}
.wk-coupon-item:hover,
.wk-coupon-item:focus-visible{
    background:rgba(1,110,253,.035);
    outline:0;
}
.wk-ticket{
    width:28px;
    height:28px;
    flex:0 0 28px;
    align-items:flex-start;
    justify-content:flex-start;
    border-radius:0;
}
.wk-ticket::before{
    width:28px;
    height:28px;
    background:center / contain no-repeat url("https://webkepler.com/wp-content/uploads/2026/09/coupon-icon.png");
}
.wk-coupon-info{
    display:contents;
}
.wk-coupon-info strong{
    grid-column:2;
    grid-row:1;
    color:#101828;
    font-size:18px;
    font-weight:700;
    line-height:1.36;
    letter-spacing:-.22px;
}
.wk-coupon-info span{
    margin-top:3px;
    color:#344054;
    font-size:14px;
    font-weight:500;
    line-height:1.45;
    letter-spacing:-.08px;
}
.wk-coupon-panel .wk-coupon-item .wk-offer-arrow{
    display:none!important;
}
@media(max-width:720px){
    .wk-coupon-panel{
        width:calc(100vw - 16px);
        max-width:calc(100vw - 16px);
        padding:10px 0 10px;
        border-radius:16px;
    }
    .wk-coupon-item{
        padding:16px 18px;
        gap:14px;
        grid-template-columns:26px minmax(0,1fr);
    }
    .wk-ticket,
    .wk-ticket::before{
        width:26px;
        height:26px;
        flex-basis:26px;
    }
    .wk-coupon-info strong{
        font-size:16px;
        line-height:1.34;
    }
    .wk-coupon-info span{
        font-size:13px;
        line-height:1.4;
    }
}



/* =========================================================
   WEBKEPLER — COUPON POPUP COMPACT RECTANGLE V10
   23 SEP 2026
   ========================================================= */
/* Compact horizontal rectangular popover with tight spacing and inset hover rows. */
.wk-coupon-panel{
    width:min(258px, calc(100vw - 18px));
    max-width:calc(100vw - 18px);
    padding:8px 6px;
    border-radius:14px;
}
.wk-coupon-head{display:none!important;}
.wk-coupon-item{
    width:auto;
    margin:2px 6px!important;
    padding:10px 12px;
    display:grid;
    grid-template-columns:20px minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:10px;
    row-gap:3px;
    align-items:start;
    border-radius:10px;
    background:transparent;
}
.wk-coupon-item + .wk-coupon-item{
    border-top:1px solid rgba(16,24,40,.055);
}
.wk-coupon-item:hover,
.wk-coupon-item:focus-visible{
    background:#F7F8FA;
    outline:0;
}
.wk-ticket,
.wk-ticket::before{
    width:20px;
    height:20px;
    flex:0 0 20px;
}
.wk-ticket{
    align-items:flex-start;
    justify-content:flex-start;
    border-radius:0;
}
.wk-ticket::before{
    background:center / contain no-repeat url("https://webkepler.com/wp-content/uploads/2026/09/coupon-icon-2.png");
}
.wk-coupon-info strong{
    color:#101828;
    font-size:13.2px;
    font-weight:700;
    line-height:1.42;
    letter-spacing:-.08px;
}
.wk-coupon-info span{
    grid-column:1 / -1;
    grid-row:2;
    margin-top:1px;
    color:#475467;
    font-size:12.1px;
    font-weight:500;
    line-height:1.34;
    letter-spacing:-.04px;
}
.wk-coupon-panel .wk-coupon-item .wk-offer-arrow{display:none!important;}
@media(max-width:720px){
    .wk-coupon-panel{
        width:min(258px, calc(100vw - 10px));
        max-width:calc(100vw - 10px);
        padding:6px 4px;
        border-radius:12px;
    }
    .wk-coupon-item{
        margin:1px 4px!important;
        padding:9px 10px;
        grid-template-columns:18px minmax(0,1fr);
        grid-template-rows:auto auto;
        column-gap:8px;
        row-gap:2px;
        border-radius:9px;
    }
    .wk-ticket,
    .wk-ticket::before{
        width:18px;
        height:18px;
        flex-basis:18px;
    }
    .wk-coupon-info strong{
        font-size:12.1px;
        line-height:1.38;
    }
    .wk-coupon-info span{
        font-size:11px;
        line-height:1.28;
    }
}