/* ==========================================================================
   rating.css - brand rating block, afe.is
   Layout "fleygur": white cards on the light page, one brand per row, never
   two side by side. The wedge is the motif - cut corners, a gold triangle
   holding the rank, a slanted band behind the logo, and the score drawn as
   five skewed blocks. The right column holds the score, the button and the
   payment line.

   The file is deliberately outside the theme bundle and is linked with
   ?v=filemtime, so an edit shows up at once. The bundle is inlined into
   <head>, so this link has to come after it.

   Palette taken from the live theme: purple #92278F, violet #6E3EC9,
   gold #E8B923.
   ========================================================================== */

.isl-grid{
  --isl-p:#92278F;
  --isl-p2:#6E3EC9;
  --isl-g:#E8B923;
  --isl-g2:#d49f0d;
  --isl-ink:#1b1730;
  --isl-ink2:#6b6480;
  --isl-mut:#9a93ad;
  --isl-line:#efeaf7;
  --isl-soft:#faf8fd;

  /* one brand under another - a plain vertical list, never two in a row */
  display:flex;
  flex-direction:column;
  gap:14px;
  margin:10px 0 28px;
  text-align:left;
  font-family:Manrope,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:14px;
  line-height:1.5;
  color:var(--isl-ink);
  -webkit-text-size-adjust:100%;
          text-size-adjust:100%;
}
.isl-grid__title{font-size:26px;font-weight:900;margin:0 0 2px;line-height:1.2;color:var(--isl-ink)}

/* ---------- theme typography reset ---------- */
.isl-grid p,.isl-grid ul,.isl-grid ol,.isl-grid li,
.isl-grid dl,.isl-grid dt,.isl-grid dd,
.isl-grid div,.isl-grid span,.isl-grid a,.isl-grid u,.isl-grid s,.isl-grid b,
.isl-grid em,.isl-grid i,.isl-grid strong,.isl-grid code,.isl-grid h2{
  font-size:inherit;line-height:inherit;margin:0;padding:0;color:inherit;
}
.isl-grid a{text-decoration:none}
.isl-grid u,.isl-grid s{text-decoration:none}
.isl-grid *{box-sizing:border-box}

/* the theme declares `ul li{display:list-item}` with disc markers and is
   parsed after this file, so `body` specificity keeps the reset winning */
body .isl-grid ul,body .isl-grid ol{
  list-style:none !important;list-style-type:none !important;padding-left:0 !important;margin:0 !important;
}
body .isl-grid ul li,body .isl-grid ol li{
  display:inline-flex !important;list-style:none !important;list-style-type:none !important;margin-bottom:0 !important;
}
body .isl-grid ul li::marker,body .isl-grid ol li::marker{content:'' !important}

/* ==========================================================================
   Card
   ========================================================================== */
.isl-grid .isl-card{
  position:relative;
  background:#fff;
  /* the cut corners are the wedge motif of this layout */
  border-radius:4px 22px 4px 22px;
  padding:22px 248px 18px 26px;
  min-height:218px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(27,23,48,.09);
  transition:transform .24s ease,box-shadow .24s ease;
}
.isl-grid .isl-card:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(110,62,201,.17)}

/* slanted band behind the logo */
.isl-grid .isl-card:before{
  content:'';position:absolute;left:-60px;top:-44px;width:340px;height:156px;
  background:linear-gradient(100deg,var(--isl-p2),var(--isl-p));
  transform:rotate(-7deg);opacity:.09;pointer-events:none;
}

/* hairline that cuts the right-hand panel off the content */
.isl-grid .isl-card:after{
  content:'';position:absolute;right:248px;top:20px;bottom:20px;width:1px;background:var(--isl-line);
}

/* rank in a gold wedge */
.isl-grid .isl-rank{
  position:absolute;left:0;top:0;width:60px;height:60px;background:var(--isl-g);
  clip-path:polygon(0 0,100% 0,0 100%);
}
.isl-grid .isl-rank b{position:absolute;left:11px;top:6px;font-size:18px;font-weight:900;color:#3a2a00;line-height:1}

/* ---------- head ---------- */
.isl-grid .isl-hd{position:relative;display:flex;align-items:center;gap:18px;margin-bottom:13px}
.isl-grid .isl-logo{
  width:154px;height:76px;flex:0 0 154px;border:2px solid var(--isl-line);background:#fff;
  border-radius:3px 16px 3px 16px;display:flex;align-items:center;justify-content:center;padding:9px;
}
.isl-grid .isl-logo a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.isl-grid .isl-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.isl-grid .isl-logo__txt{font-size:15px;font-weight:900;color:var(--isl-p);text-align:center;line-height:1.2}

.isl-grid .isl-nm{display:block;font-size:18px;font-weight:900;line-height:1.2}
.isl-grid .isl-bds{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.isl-grid .isl-bds i{
  font-style:normal;font-size:9.5px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;
}
.isl-grid .isl-b1{background:var(--isl-p);color:#fff}
.isl-grid .isl-b2{border:1px solid var(--isl-line);color:var(--isl-ink2)}

/* ---------- offer ---------- */
.isl-grid .isl-of{font-size:22px;font-weight:800;line-height:1.3;border-left:5px solid var(--isl-g);padding-left:14px}
.isl-grid .isl-of .bonus-main,.isl-grid .isl-of p{font-size:22px;font-weight:800;line-height:1.3}

.isl-grid .isl-special{margin-top:8px;font-size:15px;font-weight:700;line-height:1.45;color:var(--isl-p);padding-left:19px}

/* features as skewed gold tags */
.isl-grid .isl-fe{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.isl-grid .isl-fe li{
  font-size:12px;font-weight:800;color:#3a2a00;background:var(--isl-g);padding:5px 12px;
  clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);
}

.isl-grid .isl-extra{margin-top:9px;font-size:13.5px;line-height:1.5;color:var(--isl-ink2);padding-left:19px}
.isl-grid .isl-extra .extra-highlight strong{font-weight:800;color:var(--isl-ink)}
.isl-grid .isl-extra .extra-highlight span{display:inline;color:var(--isl-ink2)}
.isl-grid .isl-extra .extra-highlight strong:after{content:' - '}

.isl-grid .isl-specialfeat{margin-top:8px;font-size:13px;line-height:1.5;color:var(--isl-ink2);padding-left:19px}

.isl-grid .isl-promo{
  margin-top:11px;display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:11px;color:var(--isl-mut);
}
.isl-grid .isl-promo u{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase}
.isl-grid .isl-promo code{
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:12.5px;font-weight:800;color:var(--isl-p);border:1px dashed var(--isl-p);border-radius:6px;padding:4px 11px;
}

/* the fold exists only on a phone - here both parts stay out of the way */
.isl-grid .isl-tglbox{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.isl-grid .isl-tgl{display:none}

/* ---------- advantages: one strip divided by hairlines ---------- */
.isl-grid .isl-st{margin-top:15px;display:flex;border-top:1px solid var(--isl-line);padding-top:11px}
/* flex:1 1 auto - the cells size to their label, so a long Icelandic word
   keeps its own line instead of breaking in two */
.isl-grid .isl-cell{flex:1 1 auto;min-width:0;padding:0 12px;border-right:1px solid var(--isl-line)}
.isl-grid .isl-cell:first-child{padding-left:0}
.isl-grid .isl-cell:last-child{border-right:0;padding-right:0}
/* the label wraps instead of running into the next cell - a fixed two-line
   height keeps the values of all six cells on one baseline */
.isl-grid .isl-cell dt{
  display:flex;align-items:flex-start;gap:5px;min-width:0;min-height:25px;
  font-size:8px;letter-spacing:.03em;line-height:1.25;text-transform:uppercase;
  color:var(--isl-mut);font-weight:700;margin-bottom:3px;overflow-wrap:anywhere;
}
.isl-grid .isl-cell dt svg{width:14px;height:14px;flex:0 0 14px;color:var(--isl-p);margin-top:-1px}
.isl-grid .isl-cell dd{font-size:14.5px;font-weight:800;line-height:1.15;overflow-wrap:anywhere}

/* ---------- right panel: score, button, payments ---------- */
.isl-grid .isl-pn{position:absolute;right:26px;top:22px;width:196px;text-align:center}
.isl-grid .isl-bar{display:flex;gap:3px;justify-content:center;margin-bottom:8px}
.isl-grid .isl-bar i{width:18px;height:32px;background:var(--isl-line);border-radius:2px;transform:skewX(-10deg)}
.isl-grid .isl-bar i.on{background:linear-gradient(180deg,var(--isl-g),var(--isl-g2))}
.isl-grid .isl-sc{display:block;font-size:31px;font-weight:900;line-height:1}
.isl-grid .isl-sc u{
  display:block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--isl-mut);margin-top:4px;
}
.isl-grid .isl-btn{
  position:relative;display:block;margin-top:13px;text-align:center;overflow:hidden;
  background:linear-gradient(135deg,var(--isl-p2),var(--isl-p));color:#fff;
  font-weight:900;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:15px;
  border-radius:3px 14px 3px 14px;transition:filter .2s ease;
}
.isl-grid .isl-btn:hover{filter:brightness(1.08);color:#fff}
.isl-grid .isl-btn:after{
  content:'';position:absolute;top:0;bottom:0;left:-35%;width:26%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);
}
.isl-grid .isl-rev{display:block;margin-top:8px;font-size:11.5px;color:var(--isl-p);text-decoration:underline;text-underline-offset:3px}
.isl-grid .isl-pay{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 9px;
  margin-top:11px;font-size:11px;color:var(--isl-ink2);
}
.isl-grid .isl-pay u{width:100%;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--isl-mut)}
.isl-grid .isl-pay span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.isl-grid .isl-pay svg{width:13px;height:13px;flex:0 0 13px;color:var(--isl-p)}

.isl-grid .isl-rg{margin-top:13px;font-size:10px;line-height:1.4;color:var(--isl-mut)}
.isl-grid .isl-rg p,.isl-grid .isl-rg span,.isl-grid .isl-rg div,.isl-grid .isl-rg strong{
  font-size:10px;line-height:1.4;display:inline;color:var(--isl-mut);
}

@media (prefers-reduced-motion:reduce){
  .isl-grid .isl-card{transition:none}
  .isl-grid .isl-card:hover{transform:none}
}

/* ==========================================================================
   Tablet and phone
   ========================================================================== */
@media (max-width:900px){
  /* no room for the reserved column any more - the panel goes back into flow */
  /* the top padding is trimmed so the logo and the brand name sit higher */
  .isl-grid .isl-card{padding:15px 18px 18px;min-height:0}
  .isl-grid .isl-card:after{display:none}
  /* the score moves next to the button instead of sitting above it, so the
     card keeps its height down and a second brand reaches the first screen */
  .isl-grid .isl-pn{
    position:static;width:auto;margin-top:16px;text-align:left;
    display:grid;grid-template-columns:120px 1fr;column-gap:14px;align-items:center;
    grid-template-areas:'bar btn' 'sc btn' 'rev rev' 'pay pay';
  }
  .isl-grid .isl-bar{grid-area:bar;justify-content:flex-start}
  .isl-grid .isl-sc{grid-area:sc;font-size:26px}
  .isl-grid .isl-btn{grid-area:btn;margin-top:0;align-self:center}
  .isl-grid .isl-rev{grid-area:rev;text-align:center}
  .isl-grid .isl-pay{grid-area:pay;justify-content:flex-start}

  .isl-grid .isl-st{flex-wrap:wrap;gap:10px 0}
  .isl-grid .isl-cell{flex:0 0 33.333%;padding:0 10px}
  .isl-grid .isl-cell:nth-child(3n){border-right:0}
  .isl-grid .isl-cell:nth-child(3n+1){padding-left:0}

  /* the six cells and the payment line fold behind one tap target, so a second
     brand reaches the first screen; the checkbox right before them drives it,
     so the card opens without any script */
  .isl-grid .isl-tgl{
    display:inline-flex;align-items:center;gap:8px;cursor:pointer;
    margin-top:11px;padding:4px 0;color:var(--isl-p);
    font-size:11.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
    border-bottom:2px solid var(--isl-g);width:max-content;
  }
  .isl-grid .isl-tgl i{
    width:8px;height:8px;flex:0 0 8px;border-right:2px solid var(--isl-p);border-bottom:2px solid var(--isl-p);
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease;
  }
  .isl-grid .isl-tglbox:checked ~ .isl-tgl i{transform:rotate(-135deg) translate(-2px,-2px)}
  .isl-grid .isl-tglbox:not(:checked) ~ .isl-extra,
  .isl-grid .isl-tglbox:not(:checked) ~ .isl-specialfeat,
  .isl-grid .isl-tglbox:not(:checked) ~ .isl-promo,
  .isl-grid .isl-tglbox:not(:checked) ~ .isl-st,
  .isl-grid .isl-tglbox:not(:checked) ~ .isl-rg{display:none}
  .isl-grid .isl-tglbox:not(:checked) ~ .isl-pn .isl-pay{display:none}
  .isl-grid .isl-tglbox:focus-visible ~ .isl-tgl{outline:2px solid var(--isl-p);outline-offset:2px}
  .isl-grid .isl-st{margin-top:12px;border-top:0;padding-top:0}
  .isl-grid .isl-pn{margin-top:13px}
}

@media (max-width:560px){
  .isl-grid{margin:8px 0 20px}
  .isl-grid__title{font-size:21px}
  .isl-grid .isl-card{padding:13px 16px 16px;border-radius:4px 18px 4px 18px}
  .isl-grid .isl-rank{width:50px;height:50px}
  .isl-grid .isl-rank b{left:9px;top:5px;font-size:16px}

  /* everything in the card steps down one notch on a phone */
  .isl-grid .isl-hd{gap:11px;padding-left:32px;margin-bottom:10px}
  .isl-grid .isl-logo{width:110px;height:56px;flex-basis:110px;padding:7px}
  .isl-grid .isl-nm{font-size:15px}
  .isl-grid .isl-bds i{font-size:9px;padding:3px 9px}

  .isl-grid .isl-of,.isl-grid .isl-of .bonus-main,.isl-grid .isl-of p{font-size:17.5px;line-height:1.26}
  .isl-grid .isl-of{border-left-width:4px;padding-left:12px}
  .isl-grid .isl-special{font-size:14px;padding-left:16px}
  .isl-grid .isl-extra,.isl-grid .isl-specialfeat{font-size:12.5px;padding-left:16px}

  .isl-grid .isl-tgl{font-size:11px;margin-top:9px}
  .isl-grid .isl-bar i{width:16px;height:27px}
  .isl-grid .isl-sc{font-size:23px}
  .isl-grid .isl-sc u{font-size:9.5px}
  .isl-grid .isl-pn{margin-top:11px;grid-template-columns:106px 1fr;column-gap:12px}
  .isl-grid .isl-btn{padding:13px;font-size:12.5px}
  .isl-grid .isl-rev{font-size:11px;margin-top:7px}
  .isl-grid .isl-cell{flex:0 0 50%}
  .isl-grid .isl-cell:nth-child(3n){border-right:1px solid var(--isl-line)}
  .isl-grid .isl-cell:nth-child(3n+1){padding-left:10px}
  .isl-grid .isl-cell:nth-child(2n){border-right:0}
  .isl-grid .isl-cell:nth-child(2n+1){padding-left:0}
}

@media (max-width:360px){
  .isl-grid .isl-of,.isl-grid .isl-of .bonus-main,.isl-grid .isl-of p{font-size:17.5px}
  .isl-grid .isl-cell dd{font-size:13.5px}
}