/*
 * Checker DORY (/dory_compatibility/{lingua}/). Si appoggia a style.css del sito:
 * blu #0072cf, verde #0fad21, testo #546071, titoli #2b2b2b, sezioni .grey #f7f7f7.
 * Opzioni come le .select-variant dello shop e le .blog-rescue-option del blog.
 */

.dory-checker [hidden] { display: none !important; }

/* Hero */
.dc-hero h1.title { margin-top: 10px; }
.dc-hero p.description { margin-top: 20px; }
.dc-hero-points { list-style: none; padding: 0; margin: 20px 0 30px; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.dc-hero-points li { color: #2b2b2b; font-size: 16px; }
.dc-hero-points .fa { color: #0fad21; margin-right: 4px; }
.dc-hero-img { text-align: center; }
.dc-hero a.dc-start { align-self: flex-start; }

/* Avanzamento */
.dc-progress { list-style: none; padding: 0; margin: 0 auto 50px; max-width: 520px; display: flex; justify-content: space-between; position: relative; }
.dc-progress::before { content: ""; position: absolute; top: 18px; left: 25%; right: 25%; height: 2px; background: #d6e3eb; }
.dc-progress-step { flex: 1; text-align: center; position: relative; z-index: 1; }
.dc-progress-num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 2px solid #d6e3eb; color: #8a97a6; font-weight: 700; font-size: 16px; }
.dc-progress-label { display: block; margin-top: 8px; font-size: 14px; color: #8a97a6; }
.dc-progress-step.is-current .dc-progress-num { background: #0072cf; border-color: #0072cf; color: #fff; }
.dc-progress-step.is-current .dc-progress-label { color: #2b2b2b; font-weight: 600; }
.dc-progress-step.is-done .dc-progress-num { background: #0fad21; border-color: #0fad21; color: #fff; }
.dc-progress-step.is-done .dc-progress-label { color: #546071; }

/* Passi */
.dc-step-kicker { text-transform: uppercase; letter-spacing: .08em; font-size: 13px; font-weight: 700; color: #0072cf; margin: 0 0 8px; }
.dc-step h2.title { font-size: 30px; }
.dc-step p.dc-step-desc { margin-top: 15px; margin-bottom: 30px; }
.dc-step-img img { max-width: 320px; margin: 0 auto; }
.dc-step + .dc-step { margin-top: 50px; padding-top: 40px; border-top: 1px solid #e3e7ec; }

.dc-back { background: none; border: 0; padding: 0; margin-bottom: 20px; font-size: 14px; color: #546071; cursor: pointer; }
.dc-back:hover, .dc-back:focus { color: #0072cf; }

/* Opzioni */
.dc-options { display: grid; gap: 16px; }
.dc-options-cyl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dc-options-distance { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; }

.dc-option { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; padding: 18px 14px 16px; background: #fff; border: 2px solid #d6e3eb; border-radius: 10px; color: #2b2b2b; font: inherit; text-align: center; cursor: pointer; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.dc-option:hover { border-color: #0072cf; box-shadow: 0 4px 14px rgba(0, 114, 207, .12); }
.dc-option:focus { outline: none; }
.dc-option:focus-visible { outline: 3px solid rgba(0, 114, 207, .35); outline-offset: 2px; }
.dc-option[aria-pressed="true"] { border-color: #0072cf; background: #eef6ff; }
.dc-option img { width: 100%; max-width: 170px; height: auto; }
.dc-option-label { display: block; margin-top: 10px; font-size: 16px; font-weight: 600; }
.dc-option-sub { display: block; margin-top: 2px; font-size: 13px; color: #8a97a6; }
.dc-option-check { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%; background: #0072cf; color: #fff; font-size: 12px; line-height: 24px; text-align: center; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s; }
.dc-option[aria-pressed="true"] .dc-option-check { opacity: 1; transform: scale(1); }
.dc-option-text { padding: 26px 14px; justify-content: center; }
.dc-option-icon { font-size: 26px; color: #0072cf; }

/* Esiti */
.dc-result-head { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 30px; }
.dc-result-head h2.title { font-size: 30px; }
.dc-result-head p.description { margin-top: 12px; }
.dc-result-icon { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; }
.dc-result-icon-ok { background: #0fad21; }
.dc-result-icon-ko { background: #8a97a6; }
.dc-result-kicker { text-transform: uppercase; letter-spacing: .08em; font-size: 13px; font-weight: 700; color: #0fad21; margin: 4px 0 6px; }
.dc-fail-reason { color: #2b2b2b; }

.dc-card { background: #fff; border: 1px solid #e3e7ec; border-radius: 10px; padding: 24px; margin-bottom: 24px; }
.dc-card h3 { font-size: 20px; color: #2b2b2b; margin-top: 0; }
.dc-card p.description { margin-top: 10px; font-size: 16px; }
.dc-card-accent { border: 2px solid #0072cf; }
.dc-card-accent > .row { display: flex; flex-wrap: wrap; align-items: center; }
.dc-card-accent > .row::before, .dc-card-accent > .row::after { display: none; }
.dc-card-accent .dc-card-img { margin-bottom: 0; }
.dc-card-img { border-radius: 8px; margin: 0 auto 15px; max-height: 220px; width: auto; }
.dc-card-measure { display: flex; gap: 20px; border-left: 4px solid #0072cf; }
.dc-card-icon { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; background: #e6f1fb; color: #0072cf; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }
.dc-measure-links { margin: 15px 0 0; }
.dc-link-pdf { font-weight: 600; color: #0072cf; }
.dc-link-pdf .fa { margin-right: 4px; }
.dc-card p.dc-measure-xxl { font-size: 15px; }

h2.title.dc-models-title { margin: 50px 0 40px; }
.dc-model { position: relative; height: 100%; background: #fff; border: 1px solid #e3e7ec; border-radius: 10px; padding: 24px 20px; margin-bottom: 30px; text-align: center; }
.dc-model-rec { border: 2px solid #0072cf; }
.dc-model-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #0072cf; color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; padding: 4px 14px; border-radius: 4px; white-space: nowrap; }
.dc-model-img { max-width: 240px; margin: 0 auto 10px; }
.dc-model h3 { font-size: 22px; color: #2b2b2b; margin: 10px 0 4px; }
.dc-model-tag { font-size: 14px; font-style: italic; color: #8a97a6; margin: 0 0 15px; }
.dc-model-list { list-style: none; padding: 0; margin: 0 0 15px; text-align: left; display: inline-block; }
.dc-model-list li { margin-bottom: 6px; font-size: 15px; color: #546071; }
.dc-model-list .fa-check { color: #0fad21; }
.dc-model-list .fa-plus { color: #0072cf; }
.dc-model-ship { font-size: 13px; font-style: italic; color: #8a97a6; }
/* Card della stessa altezza: la .row di Bootstrap 3 diventa flex (senza i clearfix, che sarebbero item) */
.dc-models { display: flex; flex-wrap: wrap; }
.dc-models::before, .dc-models::after { display: none; }
.dc-models > [class*="col-"] { display: flex; }
.dc-models > [class*="col-"] > .dc-model { width: 100%; }

.dc-trust { list-style: none; padding: 20px 0 0; margin: 10px 0 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; border-top: 1px solid #e3e7ec; }
.dc-trust li { font-size: 15px; color: #546071; }
.dc-trust .fa { color: #0072cf; margin-right: 6px; }

/* Pulsanti (i <button> non prendono lo stile di a.button-product) */
.dc-btn { display: inline-block; background: #0072cf; color: #fff; border: 0; border-radius: 5px; padding: 0 20px; height: 44px; font-size: 14px; font-weight: 600; text-transform: uppercase; cursor: pointer; transition: background-color .3s; }
.dc-btn:hover, .dc-btn:focus { background: #0fad21; color: #fff; }
.dc-btn .fa { margin-right: 6px; }
.dc-btn-ghost { background: transparent; color: #0072cf; border: 2px solid #0072cf; }
.dc-btn-ghost:hover, .dc-btn-ghost:focus { background: #0072cf; color: #fff; }

/* Email (esito non compatibile) */
.dc-card p.dc-ko-email-desc { margin-top: 0; }
.dc-email { display: flex; gap: 10px; margin-top: 15px; max-width: 520px; }
.dc-email input[type=email] { flex: 1; min-width: 0; float: none; height: 44px; margin: 0; padding: 0 14px; box-sizing: border-box; line-height: normal; border: 2px solid #d6e3eb; border-radius: 5px; font-size: 16px; color: #2b2b2b; }
.dc-email input[type=email]:focus { outline: none; border-color: #0072cf; }
.dc-email-msg { margin: 10px 0 0; font-size: 14px; min-height: 20px; }
.dc-email-msg.is-ok { color: #0fad21; font-weight: 600; }
.dc-email-msg.is-bad { color: #d0342c; }
.dc-help { text-align: center; font-size: 15px; color: #546071; margin-bottom: 20px; }

/* FAQ */
.dc-faq .panel-title a { display: block; }

/* Mobile */
@media (max-width: 991px) {
  .dc-hero-img img { max-width: 60%; margin-top: 20px; }
}
@media (max-width: 767px) {
  .dc-options-cyl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .dc-options-distance { grid-template-columns: 1fr 1fr; gap: 12px; }
  .dc-option { padding: 14px 8px 12px; }
  .dc-option-label { font-size: 15px; }
  .dc-step h2.title, .dc-result-head h2.title { font-size: 24px; }
  .dc-step-img { margin-top: 30px; }
  .dc-step-img img { max-width: 220px; }
  .dc-progress-label { font-size: 13px; }
  .dc-result-head { gap: 14px; }
  .dc-result-icon { flex-basis: 44px; width: 44px; height: 44px; font-size: 20px; }
  .dc-card { padding: 18px; }
  .dc-card-measure { flex-direction: column; gap: 12px; }
  .dc-email { flex-direction: column; }
  .dc-email input[type=email] { flex: none; width: 100%; }
  .dc-card-img { max-height: 180px; margin-bottom: 15px; }
  .dc-card-accent > .row > [class*="col-"] { width: 100%; }
  .dc-email .dc-btn { width: 100%; }
  .dc-hero-img { display: none; }
}