/* ==========================================================================
   rating.css - brand rating block, virtuslanciano.it
   Layout: "scheda tecnica" - header strip, offer, stat row with the call to
   action sitting as the last cell of that row instead of a side column.

   The file deliberately sits outside css/output.css and is linked with
   ?v=filemtime, so edits show up immediately.

   Theme: accent #477EB6, deep #3A6188, soft #AEC6D8, Outfit, 30px radius.
   ========================================================================== */

.vl-rating{
  --vl-acc:#477EB6;
  --vl-deep:#3A6188;
  --vl-soft:#AEC6D8;
  --vl-ink:#16202b;
  --vl-txt:#54636f;
  --vl-mut:#8b98a4;
  --vl-line:rgba(22,32,43,.10);
  --vl-well:#f3f7fb;

  display:flex;
  flex-direction:column;
  gap:18px;
  margin:26px 0 36px;
  text-align:left;
  font-family:'Outfit',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:14px;
  line-height:1.5;
  color:var(--vl-txt);
  -webkit-text-size-adjust:100%;
          text-size-adjust:100%;
}

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

.vl-rating .vl-rating__title{
  font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.18;color:var(--vl-ink);
}

/* ==========================================================================
   Card
   ========================================================================== */
.vl-rating .vl-card{
  position:relative;
  background:#fff;
  border:1px solid var(--vl-line);
  border-radius:24px;
  overflow:hidden;
  transition:box-shadow .3s ease,transform .3s ease,border-color .3s ease;
}
.vl-rating .vl-card:hover{
  transform:translateY(-2px);
  border-color:rgba(71,126,182,.42);
  box-shadow:0 18px 34px -22px rgba(58,97,136,.75);
}
.vl-rating .vl-card--top{
  border-color:rgba(71,126,182,.5);
  box-shadow:0 14px 30px -22px rgba(58,97,136,.7);
}

/* ---------- header strip ---------- */
.vl-rating .vl-head{
  display:grid;
  grid-template-columns:auto 128px minmax(0,1fr) auto;
  align-items:center;gap:18px;
  padding:14px 22px;
  background:var(--vl-well);
  border-bottom:1px solid var(--vl-line);
}

.vl-rating .vl-pos{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:#fff;border:2px solid var(--vl-line);
  font-size:14px;font-weight:800;line-height:1;color:var(--vl-mut);
}
.vl-rating .vl-card--top .vl-pos{
  background:var(--vl-acc);border-color:var(--vl-acc);color:#fff;
}

.vl-rating .vl-logo{height:44px;display:flex;align-items:center}
.vl-rating .vl-logo a{display:flex;align-items:center;max-width:100%}
.vl-rating .vl-logo img{max-width:128px;max-height:44px;width:auto;height:auto;object-fit:contain;display:block}

.vl-rating .vl-name{
  display:flex;align-items:center;flex-wrap:wrap;gap:7px;min-width:0;
  font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--vl-ink);
}
.vl-rating .vl-name em{
  font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border-radius:20px;padding:4px 9px;
}
.vl-rating .vl-name .vl-b1{background:var(--vl-acc);color:#fff}
.vl-rating .vl-name .vl-b2{border:1px solid var(--vl-line);color:var(--vl-mut)}

/* score: five segments that fill partially, not stars and not a single bar */
.vl-rating .vl-score{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.vl-rating .vl-seg{display:inline-flex;gap:3px}
.vl-rating .vl-seg i{
  display:block;width:15px;height:7px;border-radius:4px;
  background:rgba(174,198,216,.55);overflow:hidden;
}
.vl-rating .vl-seg i b{display:block;height:100%;border-radius:4px;background:var(--vl-acc)}
.vl-rating .vl-score > b{font-size:16px;font-weight:800;line-height:1;color:var(--vl-ink)}
.vl-rating .vl-score u{font-size:11px;color:var(--vl-mut);white-space:nowrap}

/* ---------- offer ---------- */
.vl-rating .vl-body{padding:17px 22px 15px}
.vl-rating .vl-offer{
  font-size:19px;font-weight:800;line-height:1.3;letter-spacing:-.02em;color:var(--vl-ink);
}
.vl-rating .vl-offer strong,.vl-rating .vl-offer b{font-weight:800}
.vl-rating .vl-offer p{font-size:inherit;line-height:inherit}

.vl-rating .vl-special{margin-top:7px;font-size:13px;line-height:1.45;font-weight:600;color:var(--vl-acc)}

.vl-rating .vl-promo{
  margin-top:10px;display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:11px;color:var(--vl-mut);
}
.vl-rating .vl-promo u{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase}
.vl-rating .vl-promo code{
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:12px;font-weight:700;color:var(--vl-ink);
  border:1px dashed rgba(71,126,182,.55);border-radius:20px;padding:4px 11px;
}

.vl-rating .vl-feat{margin-top:11px;display:flex;flex-wrap:wrap;gap:6px 20px;font-size:13px}
.vl-rating .vl-feat li{display:inline-flex;align-items:center;gap:8px}
.vl-rating .vl-feat li::before{
  content:'';width:7px;height:7px;flex:0 0 7px;border-radius:2px;
  background:var(--vl-acc);transform:rotate(45deg);
}

.vl-rating .vl-specialfeat{margin-top:8px;font-size:12.5px;line-height:1.5}

/* ---------- stat row, action is the last cell ---------- */
.vl-rating .vl-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)) 200px;
  gap:1px;
  background:var(--vl-line);
  border-top:1px solid var(--vl-line);
}
.vl-rating .vl-stat{background:#fff;padding:13px 18px;min-width:0}
.vl-rating .vl-stat__k{
  display:flex;align-items:center;gap:7px;
  font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--vl-mut);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.vl-rating .vl-stat__k svg{width:15px;height:15px;flex:0 0 15px;color:var(--vl-acc)}
.vl-rating .vl-stat__v{
  display:block;margin-top:5px;
  font-size:16px;font-weight:800;letter-spacing:-.01em;line-height:1.2;color:var(--vl-ink);
  overflow-wrap:anywhere;
}

.vl-rating .vl-act{
  background:var(--vl-well);
  padding:13px 18px;
  display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:7px;
}
.vl-rating .vl-btn{
  display:block;text-align:center;color:#fff;
  background:var(--vl-acc);
  font-size:15px;font-weight:700;letter-spacing:.01em;
  padding:13px 18px;border-radius:30px;
  transition:background .22s ease,transform .22s ease;
}
.vl-rating .vl-btn:hover{background:var(--vl-deep);transform:translateY(-2px);color:#fff}
.vl-rating .vl-rev{
  text-align:center;font-size:11.5px;color:var(--vl-acc);
  text-decoration:underline;text-underline-offset:3px;
}

/* ---------- footer ---------- */
.vl-rating .vl-foot{
  padding:11px 22px 13px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.vl-rating .vl-pay{display:flex;align-items:center;flex-wrap:wrap;gap:5px 14px;font-size:11.5px;min-width:0}
.vl-rating .vl-pay u{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--vl-mut)}
.vl-rating .vl-pay span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.vl-rating .vl-pay svg{width:14px;height:14px;flex:0 0 14px;color:var(--vl-acc);opacity:.85}

.vl-rating .vl-rg{font-size:10.5px;line-height:1.4;color:var(--vl-mut);text-align:right}
.vl-rating .vl-rg p,.vl-rating .vl-rg span,.vl-rating .vl-rg div{font-size:10.5px;line-height:1.4;display:inline}

.vl-rating .vl-extra{flex:1 1 100%;font-size:12px;line-height:1.55}

.vl-rating .vl-after{font-size:14px;line-height:1.6}
.vl-rating .vl-after p{font-size:14px;line-height:1.6;margin-bottom:10px}

@media (prefers-reduced-motion:reduce){
  .vl-rating .vl-card,.vl-rating .vl-btn{transition:none}
  .vl-rating .vl-card:hover,.vl-rating .vl-btn:hover{transform:none}
}

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width:1024px){
  .vl-rating .vl-head{grid-template-columns:auto 108px minmax(0,1fr);gap:12px;padding:12px 16px}
  .vl-rating .vl-score{grid-column:1/-1;justify-content:flex-start}
  .vl-rating .vl-logo img{max-width:108px;max-height:38px}
  .vl-rating .vl-logo{height:38px}
  .vl-rating .vl-body{padding:14px 16px 12px}
  .vl-rating .vl-offer{font-size:17px}
  .vl-rating .vl-stats{grid-template-columns:repeat(3,minmax(0,1fr));}
  .vl-rating .vl-act{grid-column:1/-1}
  .vl-rating .vl-foot{padding:10px 16px 12px}
}

/* ==========================================================================
   Phone
   ========================================================================== */
@media (max-width:720px){
  .vl-rating{gap:13px;margin:18px 0 26px}
  .vl-rating .vl-rating__title{font-size:22px}
  .vl-rating .vl-card{border-radius:18px}

  /* score stays on the header line: the review count is dropped, the
     segments and the number carry the meaning on their own */
  .vl-rating .vl-head{
    grid-template-columns:auto 78px minmax(0,1fr) auto;
    gap:8px;padding:9px 13px;
  }
  .vl-rating .vl-pos{width:25px;height:25px;font-size:12px;border-width:2px}
  .vl-rating .vl-logo{height:27px}
  .vl-rating .vl-logo img{max-width:78px;max-height:27px}
  .vl-rating .vl-name{font-size:12.5px;gap:5px}
  .vl-rating .vl-score{gap:6px;flex-wrap:nowrap}
  .vl-rating .vl-seg i{width:9px;height:5px;border-radius:3px}
  .vl-rating .vl-seg{gap:2px}
  .vl-rating .vl-score > b{font-size:13.5px}
  .vl-rating .vl-score u{display:none}

  .vl-rating .vl-body{padding:9px 13px 9px}
  .vl-rating .vl-offer{font-size:15px;line-height:1.26}
  .vl-rating .vl-feat{margin-top:7px;gap:3px 13px;font-size:11px}
  .vl-rating .vl-feat li{gap:6px}
  .vl-rating .vl-feat li::before{width:6px;height:6px;flex:0 0 6px}

  .vl-rating .vl-stat{padding:7px 10px}
  .vl-rating .vl-stat__k{font-size:8.5px;letter-spacing:.06em;gap:5px}
  .vl-rating .vl-stat__k svg{width:12px;height:12px;flex:0 0 12px}
  .vl-rating .vl-stat__v{margin-top:2px;font-size:13px}

  .vl-rating .vl-act{padding:8px 13px}
  .vl-rating .vl-btn{padding:10px 14px;font-size:13.5px}

  .vl-rating .vl-foot{padding:7px 13px 9px;gap:5px}
  .vl-rating .vl-pay{flex:1 1 100%;font-size:10px;gap:3px 11px}
  .vl-rating .vl-pay svg{width:12px;height:12px;flex:0 0 12px}
  .vl-rating .vl-rg{flex:1 1 100%;text-align:left;font-size:9.5px}
  .vl-rating .vl-rg p,.vl-rating .vl-rg span,.vl-rating .vl-rg div{font-size:9.5px}
}

  /* ---------- first screen ----------
     House rule: first card fully visible at 375x812, second at least partly.
     Theme rules land later and with !important, hence the body prefix. */
  body header.header{padding-top:11px !important;padding-bottom:11px !important}
  body header .logo-box > div{max-width:34px !important}
  body main.grow{padding-top:92px !important}
  body .title.mb-\(--marginBottom-standart\){margin-bottom:10px !important}
  body h1.title{font-size:25px !important;line-height:1.16 !important}
  body main .textBox p{font-size:14.5px !important;line-height:1.5 !important}
  body main section{margin-bottom:12px !important}
  body main .max-w-\[700px\] > br{display:none !important}
  body .vl-rating{margin-top:6px !important}
  body .vl-rating .vl-rating__title{font-size:19px}
}

@media (max-width:400px){
  .vl-rating .vl-head{grid-template-columns:auto 80px minmax(0,1fr)}
  .vl-rating .vl-offer{font-size:15px}
  .vl-rating .vl-stat{padding:8px 9px}
  .vl-rating .vl-stat__v{font-size:13px}
}