/* =============================================
   AxY5 — Design System
   ============================================= */

:root {
  --primary:        #7400b8;
  --primary-light:  #e786ff;
  --primary-dark:   #4a0080;
  --accent:         #00b4d8;
  --success:        #06a94d;
  --warning:        #f8a100;
  --danger:         #e63946;
  --bg:             #f4f6ff;
  --surface:        #ffffff;
  --border:         #e0e4f0;
  --text:           #1a1a2e;
  --text-muted:     #303030;
  --shadow-sm:      0 2px 8px rgba(116,0,184,.08);
  --shadow-md:      0 4px 24px rgba(116,0,184,.13);
  --shadow-lg:      0 8px 40px rgba(116,0,184,.20);
  --radius:         12px;
  --radius-sm:      8px;
  --radius-lg:      20px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

@font-face {
  font-family: 'Ubuntu';
  src: url('ubuntu-regular-webfont.woff2') format('woff2'),
       url('ubuntu-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

html {font-size: 112.5%;}
body {
  font-family: 'Ubuntu', Arial, sans-serif;
  font-size: 1.11111rem;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}
img { display: block; max-width: 100%; height: auto; }
/* =============================================
   HERO HEADER
   ============================================= */
.axy-hero {
  background: var(--bg);
  padding: 2.2rem 0 2rem;
  position: relative;
  overflow: hidden;
}
.axy-hero::before {
  content: '';
  position: absolute; top: -50%; left: -20%;
  width: 60%; height: 200%;
  pointer-events: none;
}
.axy-hero::after {
  content: '';
  position: absolute; bottom: -30%; right: -10%;
  width: 50%; height: 180%;
  pointer-events: none;
}
.axy-hero-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 1.8rem;
  max-width: 900px; margin: 0 auto; padding: 0 1.5rem;
}
.axy-hero-brand {
  display: flex; align-items: center; gap: 1.4rem;
}
.axy-hero-logo {
  width: 155px;
  height: auto;
  filter: drop-shadow(0 0 4px #e786ff);
  flex-shrink: 0;
  -webkit-filter: drop-shadow(0 0 4px #e786ff);
}
.axy-hero-title {
  font-size: 3rem; font-weight: 800; color: var(--primary-dark);
  letter-spacing: -1px; line-height: 1;
  
}
.axy-hero-accent { color: var(--primary); }
.axy-hero-sub {
  color: #0f0f0fb8; font-size: 1rem;
  font-weight: 500; margin-top: .7rem; letter-spacing: .2px;
}

/* Feature cards in hero */
.axy-feature-cards {
  display: flex; gap: .8rem; flex-wrap: wrap;
}
.axy-feat-card {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: .9rem 1.1rem;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(81, 2, 117, 0.966);
  border-radius: var(--radius);
  color: rgba(62, 3, 80, 0.88);
  font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px;
  transition: all .25s ease; cursor: default; min-width: 80px; text-align: center;
}
.axy-feat-card i { font-size: 1.6rem; color: var(--primary); }
.axy-feat-card:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(157,78,221,.45);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(116,0,184,.3);
}

/* =============================================
   MAIN LAYOUT
   ============================================= */
.axy-main {
  max-width: 1400px; margin: 0 auto; min-height: 60vh;
  padding: 2rem 1.2rem 1rem;
}
.colorVerde { color: #04690d; }

/* =============================================
   FORM CARD
   ============================================= */
.axy-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 2rem 2rem 1.5rem;
  border: 1px solid var(--border);
  transition: box-shadow .3s ease;
  margin-bottom: 1.5rem;
}
.axy-card:hover { box-shadow: var(--shadow-lg); }

.axy-input-row {
  display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.axy-label {
  display: flex; align-items: center; gap: .35rem;
  font-size: .82rem; font-weight: 600; color: var(--text);
  margin-bottom: .4rem;
}
.axy-label i { color: var(--primary); }

.axy-input {
  width: 100%; height: 52px;
  border: 2px solid var(--border); border-radius: var(--radius);
  padding: 0 1rem; font-size: 1rem; font-family: inherit; color: var(--text);
  background: #fafbff; transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.axy-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(116,0,184,.1);
  background: #fff;
}
.axy-select {
  height: 52px; min-width: 130px;
  border: 2px solid var(--border); border-radius: var(--radius);
  padding: 0 .8rem; font-size: .95rem; font-family: inherit;
  background: #fafbff; color: var(--text); cursor: pointer;
  transition: border-color .2s; outline: none;
}
.axy-select:focus { border-color: var(--primary); }

/* URL info bar */
.url-info-bar {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: linear-gradient(90deg, #eef2ff, #f5f0ff);
  border: 1px solid #c8b8f5; border-radius: var(--radius);
  padding: .7rem 1rem; margin-bottom: 1rem;
  animation: slideDown .3s ease;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.url-info-icon { color: var(--success); font-size: 1.1rem; flex-shrink: 0; }
.url-info-text { font-size: .85rem; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.url-info-text strong { color: var(--primary); }

.recheck-btn { background: #e1caf5; border: 0px; padding: 0.2rem 0.4rem; }
.recheck-btn:hover { background: #e1caf5; transform: translateY(-1px); }

/* =============================================
   NOTIFICATIONS
   ============================================= */
.axy-notif {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.2rem 1.5rem; border-radius: var(--radius);
  margin-bottom: 1.2rem; animation: slideDown 0.4s ease;
  position: relative; border: 1px solid transparent;
}
.axy-notif i { font-size: 1.4rem; flex-shrink: 0; margin-top: 0.1rem; }
.axy-notif strong { display: block; font-size: 1rem; margin-bottom: 0.2rem; }
.axy-notif p { margin: 0; font-size: 0.88rem; line-height: 1.5; opacity: 0.9; }

.axy-notif-error {
  background: #fff5f5; border-color: #feb2b2; color: #c53030;
}
.axy-notif-error i { color: #e53e3e; }

.axy-notif-warning {
  background: #fffaf0; border-color: #fbd38d; color: #9c4221;
}
.axy-notif-warning i { color: #dd6b20; }

.axy-notif-close {
  background: transparent; border: none; font-size: 1.5rem;
  line-height: 1; cursor: pointer; color: inherit;
  opacity: 0.5; transition: opacity 0.2s;
  position: absolute; top: 0.8rem; right: 1rem;
}
.axy-notif-close:hover { opacity: 1; }

/* =============================================
   SESSION BLOCK
   ============================================= */
.session-block {
  margin: .5rem 0 1.2rem;
  padding: 1rem 1.2rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: #fafbff;
  transition: border-color .2s;
}
.session-block:focus-within { border-color: var(--primary-light); }
.session-header {
  display: flex; align-items: center; justify-content: space-between;
}
.session-label {
  font-weight: 600; font-size: .95rem; color: var(--text);
  display: flex; align-items: center; gap: .4rem;
}
.session-label i { color: var(--primary); }
.session-panel { margin-top: .9rem; }
.session-hint { font-size: .90rem; color: var(--text-muted); margin-bottom: .6rem; }
.session-hint a { color: var(--primary); font-weight: 500; }
.session-hint a:hover { text-decoration: underline; }

#session-cookies {
  width: 100%; font-family: monospace; font-size: .82rem;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: .6rem; resize: vertical; background: #fff; outline: none;
  transition: border-color .2s;
}
#session-cookies:focus { border-color: var(--primary); }
#session-cookies:disabled { background: #f0f2ff; opacity: .7; }

.session-actions { margin-top: .4rem; min-height: 1.3rem; }
.session-status { font-size: .82rem; font-weight: 600; }
.session-status.ok      { color: var(--success); }
.session-status.error   { color: var(--danger); }
.session-status.warning { color: var(--warning); }

.session-instructions {
  margin-top: .9rem; background: #f4f6ff;
  padding: 1rem 1.1rem; border-radius: var(--radius-sm);
  font-size: .9rem; border-left: 3px solid var(--primary-light);
}
.session-instructions ol { padding-left: 1.3rem; margin: .4rem 0 0; }
.session-instructions li { margin-bottom: .45rem; line-height: 1.5; }
.session-instructions a { color: var(--primary); }
.session-instructions kbd {
  background: #95048c; padding: 2px 5px; border-radius: 4px;
  font-size: .9rem; font-family: monospace;
}
.session-instructions-alt {
  margin-top: .8rem; padding-top: .7rem;
  border-top: 1px solid #d8dcec; font-size: .8rem; color: var(--text-muted);
}
.session-instructions-alt strong { color: var(--text); }

/* Switch Toggle */
.switch { position: relative; display: inline-block; width: 46px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; inset: 0; background: #ccd; border-radius: 24px; transition: .3s; }
.slider::before {
  content: ''; position: absolute;
  height: 18px; width: 18px; left: 3px; bottom: 3px;
  background: #fff; border-radius: 50%; transition: .3s;
}
.switch input:checked + .slider { background: var(--primary); }
.switch input:checked + .slider::before { transform: translateX(22px); }

/* =============================================
   SUBMIT BUTTON
   ============================================= */
.axy-submit-row { display: flex; justify-content: center; padding-top: .5rem; }
.axy-submit-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; border: none; border-radius: var(--radius);
  padding: 1rem 2.5rem; font-size: 1.1rem; font-weight: 700;
  font-family: inherit; cursor: pointer; letter-spacing: .3px;
  transition: all .25s ease;
  box-shadow: 0 4px 18px rgba(116,0,184,.35);
}
.axy-submit-btn i { font-size: 1.3rem; }
.axy-submit-btn:hover {
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(116,0,184,.45);
}
.axy-submit-btn:disabled {
  background: #9ba4b4; box-shadow: none; cursor: not-allowed; transform: none;
}

/* =============================================
   LOADER (radar — stile WebWCAG)
   ============================================= */
.axy-loader-wrap {
  display: flex; flex-direction: column;
  align-items: center; gap: 1.2rem; padding: 2.5rem 0;
}
.loader-text { color: var(--text-muted); font-size: .9rem; font-weight: 500; }

#loader {
  position: relative; width: 120px; height: 120px;
  background: transparent; border-radius: 50%;
  box-shadow: 20px 20px 60px rgba(0,0,0,.45);
  border: 1px solid #333;
  align-items: center; justify-content: center; overflow: hidden;
}
#loader::before {
  content: ''; position: absolute; inset: 18px;
  background: transparent; border: 1px dashed #444; border-radius: 50%;
  box-shadow: inset -5px -5px 22px rgba(0,0,0,.2), inset 5px 5px 30px rgba(0,0,0,.2);
}
#loader::after {
  content: ''; position: absolute;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px dashed #444;
  box-shadow: inset -5px -5px 22px rgba(0,0,0,.2), inset 5px 5px 30px rgba(0,0,0,.2);
  top: 36px;
  left: 36px;
}
#loader span {
  position: absolute; top: 50%; left: 50%;
  width: 50%; height: 100%;
  background: transparent; transform-origin: top left;
  animation: radar81 2s linear infinite;
  border-top: 1px dashed #e8a87c;
}
#loader span::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--primary);
  transform-origin: top left; transform: rotate(-55deg);
  filter: blur(28px) drop-shadow(18px 18px 18px var(--primary));
}
@keyframes radar81 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* =============================================
   RESULTS
   ============================================= */
/* Results Layout */
.results-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
  align-items: start;
}

.results-left {
  min-width: 0;
}

.results-right {
  display: grid;
  height: 100%;
  background: var(--surface); border-radius: var(--radius-lg);
  border: 1.5px solid var(--border); box-shadow: var(--shadow-md);
  padding: 1.3rem 1.5rem 1.5rem;
}

.results-right .results-title { color: #974BD6;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.results-right .summary-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.results-right .summary-card {
  width: 100%;
  flex: none;
  margin: 1px;
  padding: 0.5rem 1.2rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: #fafbff;
  transition: border-color .2s;
}
.total-rules, .total-criteria {
  font-size: 1rem; font-weight: 700; color: #027c0c; margin: 0;
}
#summary-score { font-size: 1rem; font-weight: 700; color: #7304a7; margin: 0; }
#summary-verificare { font-size: 1rem; font-weight: 700; color: #c43a04; margin: 0; }

/* Download button */
.axy-download-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #fff; color: var(--primary);
  border: 2px solid var(--primary); border-radius: var(--radius);
  padding: .7rem 1.6rem; font-size: .95rem; font-weight: 600;
  text-decoration: none; transition: all .2s;
}
.axy-download-btn:hover {
  background: var(--primary); color: #fff; transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(116,0,184,.3);
}

/* =============================================
   SCREENSHOT PANEL (Lighthouse-style)
   ============================================= */
.screenshot-panel {
  background: var(--surface); border-radius: var(--radius-lg);
  border: 1.5px solid var(--border); box-shadow: var(--shadow-md);
  padding: 1.3rem 1.5rem 1.5rem;
  margin-bottom: 0; /* Managed by layout gap */
  animation: fadeIn .4s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.screenshot-header {
  display: flex; align-items: center; gap: .5rem;
  font-size: .85rem; font-weight: 600; color: var(--text-muted);
  margin-bottom: 1rem;
}
.screenshot-header i { color: var(--primary); font-size: 1rem; }
.screenshot-url-badge {
  margin-left: auto; font-family: monospace; font-size: .75rem;
  color: var(--primary); background: #f0eaff;
  padding: .15rem .6rem; border-radius: 20px; max-width: 360px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Device frame */
.device-frame {
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid #d0d4e8;
  box-shadow: 0 4px 24px rgba(0,0,0,.14), inset 0 0 0 1px rgba(255,255,255,.6);
}
.device-bar {
  background: linear-gradient(180deg, #e8eaf0, #d4d8e6);
  padding: .45rem .8rem;
  display: flex; align-items: center; gap: .4rem;
  border-bottom: 1px solid #c8ccd8;
}
.device-dot {
  width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
}
.device-dot.red    { background: #ff5f57; }
.device-dot.yellow { background: #febc2e; }
.device-dot.green  { background: #28c840; }
.device-address {
  flex: 1; margin-left: .5rem;
  background: rgba(255,255,255,.8); border-radius: 4px;
  padding: .18rem .7rem; font-size: .72rem; color: #444;
  font-family: monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.device-screen {
  background: #fff; max-height: 500px; overflow: hidden;
  display: flex; align-items: flex-start;
}
.screenshot-img {
  width: 100%; height: auto; display: block;
  object-fit: cover; object-position: top;
  transition: transform .3s ease;
}
.screenshot-img:hover { transform: scale(1.01); }

/* =============================================
   ACCORDION RESULTS
   ============================================= */
.accordion-button .badge { margin-left: 1rem; }
.snippet-list li { font-family: monospace; font-size: .88rem; }
pre code { white-space: pre-line; }

.accordion-description {
  width: inherit; font-weight: 700; color: rgb(16,16,155); font-size: .95rem;
}
.axy-badge {
  display: inline-block; min-width: 90px; text-align: center;
  padding: .45rem .7rem; font-size: .82rem; font-weight: 700;
  border-radius: 6px;
}
.axy-point {
  padding: .45rem .7rem; background: #012da5; color: #fff; margin-right: 5px;
  border-radius: 6px; font-weight: 700; font-size: .82rem; white-space: nowrap;
}

.bg-verificare   { background-color: #ffe600; }
.bg-verificato   { background-color: #00eb33; }
.bg-best-practice{ background-color: #ea00ff; }
.bg-passed       { background-color: #00e226; }

.blurred-img { filter: blur(6px); max-width: 100%; opacity: .5; border-radius: 4px; }
.blurred-img.unblurred { filter: none; opacity: .25; }

/* == FIXED FOOTER == */
footer {padding-bottom: 2rem;}
#footerbox span {margin: 0 10px;}
#footerbox a {color: var(--primary-dark);}

.try-scanner {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: 2rem;
  margin-bottom: 2rem;
  align-items: center;
}

/* =============================================
   RESPONSIVE
   ============================================= */
  .accordion-item.axy-item { margin-bottom: 0.9rem; }   
@media (max-width: 850px) {
  .results-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .results-right .results-title {
    margin-top: 1rem;
  }

  .accordion-button {flex-direction: column;}
  .accordion-description { margin-bottom: 0.6rem; }
  .py-5 { padding-top: 1rem !important;
  padding-bottom: 1rem !important; }
  .try-scanner {
    grid-template-columns: 1fr;
    gap: 1.5rem; font-size: 0.9rem;
  }
  .axy-hero-title { font-size: 2rem; }
  .axy-feat-card  { min-width: 70px; padding: .7rem .8rem; }
  .axy-feat-card i { font-size: 1.3rem; }
  .axy-card       { padding: 1.3rem 1rem; }
  .axy-input-row  { flex-direction: column; }
  .axy-input-wrap { width: 100%; }
  .axy-select     { width: 100%; }
  .axy-submit-btn { width: 100%; justify-content: center; }
  .summary-container { flex-direction: column; }
}