/**
 * AUTOLINE Dealer Data & Integrations hub — /xml-and-excel-shop/ redesign.
 * Self-contained (scoped under .al-dealer) so it can load on any page without
 * depending on al-home.css. Consumes tokens from al-design-tokens.css.
 */
.al-dealer{font-family:var(--al-font-sans);color:var(--al-ink-900);font-size:var(--al-fs-md);line-height:var(--al-lh-base)}
.al-dealer *{box-sizing:border-box}
.al-dealer a{color:var(--al-blue-500);text-decoration:none}
.al-dealer h1,.al-dealer h2,.al-dealer h3{line-height:var(--al-lh-tight);color:var(--al-ink-900);margin:0}
.al-dealer .mono{font-family:var(--al-font-mono)}
.al-dlr-wrap{max-width:var(--al-container-max);margin:0 auto;padding:0 var(--al-gutter)}
.al-dlr-band{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}

/* ===== Hero ===== */
.al-dlr-hero{background:linear-gradient(135deg,var(--al-blue-800),var(--al-blue-600));color:#fff;padding:var(--al-sp-10) 0;position:relative;overflow:hidden}
.al-dlr-hero:after{content:"";position:absolute;right:-90px;top:-100px;width:340px;height:340px;border-radius:50%;background:rgba(255,255,255,.05)}
.al-dlr-hero .al-dlr-inner{position:relative;z-index:1}
.al-dlr-kick{display:inline-block;background:rgba(255,255,255,.14);color:#fff;font-weight:var(--al-fw-semibold);font-size:var(--al-fs-xs);letter-spacing:.05em;text-transform:uppercase;padding:5px 12px;border-radius:var(--al-radius-pill);margin-bottom:var(--al-sp-3)}
.al-dlr-hero h1{color:#fff;font-size:var(--al-fs-3xl);font-weight:var(--al-fw-bold);margin-bottom:var(--al-sp-3);max-width:840px}
.al-dlr-hero p{color:#d2e2f4;font-size:var(--al-fs-lg);margin:0;max-width:760px}
.al-dlr-live{display:inline-flex;align-items:center;gap:8px;margin-top:var(--al-sp-5);font-size:var(--al-fs-sm);color:#eaf2fb;background:rgba(0,0,0,.18);padding:7px 14px;border-radius:var(--al-radius-pill)}
.al-dlr-live .dot{width:8px;height:8px;border-radius:50%;background:var(--al-success-500);box-shadow:0 0 0 0 rgba(30,165,79,.6);animation:al-dlr-pulse 2s infinite}
@keyframes al-dlr-pulse{0%{box-shadow:0 0 0 0 rgba(30,165,79,.55)}70%{box-shadow:0 0 0 9px rgba(30,165,79,0)}100%{box-shadow:0 0 0 0 rgba(30,165,79,0)}}

/* ===== Layout ===== */
.al-dlr-main{background:var(--al-bg-100);padding:var(--al-sp-10) 0 var(--al-sp-12)}
.al-dlr-sec{margin-bottom:var(--al-sp-10)}
.al-dlr-sec h2{font-size:var(--al-fs-2xl);font-weight:var(--al-fw-bold);margin-bottom:var(--al-sp-2)}
.al-dlr-sec .al-dlr-lead{font-size:var(--al-fs-md);color:var(--al-ink-700);max-width:760px;margin:0 0 var(--al-sp-5)}

/* ===== Audience banner ===== */
.al-dlr-aud{display:flex;align-items:center;gap:var(--al-sp-4);flex-wrap:wrap;background:var(--al-bg-000);border:1px solid var(--al-line-200);border-left:4px solid var(--al-amber-500);border-radius:var(--al-radius-md);padding:var(--al-sp-4) var(--al-sp-5);box-shadow:var(--al-shadow-1);margin-bottom:var(--al-sp-6)}
.al-dlr-aud.is-wholesale{border-left-color:var(--al-success-500)}
.al-dlr-aud .ic{font-size:24px;line-height:1}
.al-dlr-aud .tx{flex:1;min-width:220px}
.al-dlr-aud .tx b{display:block;color:var(--al-ink-900);font-size:var(--al-fs-md)}
.al-dlr-aud .tx span{font-size:var(--al-fs-sm);color:var(--al-ink-500)}

/* ===== Feed cards ===== */
.al-dlr-feeds{display:grid;grid-template-columns:1fr 1fr;gap:var(--al-sp-5)}
.al-dlr-feed{background:var(--al-bg-000);border:1px solid var(--al-line-200);border-radius:var(--al-radius-lg);padding:var(--al-sp-6);box-shadow:var(--al-shadow-1);display:flex;flex-direction:column}
.al-dlr-feed h3{font-size:var(--al-fs-lg);display:flex;align-items:center;gap:10px;margin-bottom:var(--al-sp-1)}
.al-dlr-feed .fmt{font-family:var(--al-font-mono);font-size:var(--al-fs-2xs);font-weight:var(--al-fw-bold);letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--al-blue-700);padding:3px 8px;border-radius:var(--al-radius-xs)}
.al-dlr-feed .fmt.csv{background:var(--al-success-600)}
.al-dlr-feed .desc{font-size:var(--al-fs-sm);color:var(--al-ink-700);margin:0 0 var(--al-sp-4)}
.al-dlr-url{display:flex;align-items:stretch;border:1px solid var(--al-line-300);border-radius:var(--al-radius-sm);overflow:hidden;background:var(--al-bg-100);margin-bottom:var(--al-sp-3)}
.al-dlr-url input{flex:1;min-width:0;border:0;background:transparent;padding:11px 12px;font-family:var(--al-font-mono);font-size:var(--al-fs-xs);color:var(--al-ink-700);outline:none}
.al-dlr-copy{border:0;border-left:1px solid var(--al-line-300);background:var(--al-bg-000);color:var(--al-blue-700);font-family:inherit;font-weight:var(--al-fw-semibold);font-size:var(--al-fs-sm);padding:0 16px;cursor:pointer;white-space:nowrap;transition:background var(--al-dur-base) var(--al-ease)}
.al-dlr-copy:hover{background:var(--al-blue-050)}
.al-dlr-copy.ok{color:var(--al-success-600)}
.al-dlr-feed-actions{display:flex;gap:var(--al-sp-2);margin-top:auto}

/* ===== Buttons ===== */
.al-dlr-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:var(--al-radius-sm);font-family:inherit;font-weight:var(--al-fw-semibold);font-size:var(--al-fs-sm);padding:11px 18px;cursor:pointer;text-align:center;transition:background var(--al-dur-base) var(--al-ease),border-color var(--al-dur-base)}
.al-dlr-btn:focus-visible{outline:0;box-shadow:var(--al-focus-ring)}
.al-dlr-btn-primary{background:var(--al-amber-500);color:var(--al-ink-900)}
.al-dlr-btn-primary:hover{background:var(--al-amber-600);color:var(--al-ink-900)}
.al-dlr-btn-blue{background:var(--al-blue-700);color:#fff}
.al-dlr-btn-blue:hover{background:var(--al-blue-800);color:#fff}
.al-dlr-btn-ghost{background:var(--al-bg-000);border:1px solid var(--al-line-300);color:var(--al-ink-900)}
.al-dlr-btn-ghost:hover{border-color:var(--al-blue-500);color:var(--al-blue-700)}

/* ===== "Run your own shop" value props ===== */
.al-dlr-props{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--al-sp-4)}
.al-dlr-prop{background:var(--al-bg-000);border:1px solid var(--al-line-200);border-radius:var(--al-radius-md);padding:var(--al-sp-5);box-shadow:var(--al-shadow-1)}
.al-dlr-prop .ic{font-size:26px;line-height:1;margin-bottom:var(--al-sp-3)}
.al-dlr-prop b{display:block;font-size:var(--al-fs-md);margin-bottom:6px}
.al-dlr-prop p{margin:0;font-size:var(--al-fs-sm);color:var(--al-ink-700)}

/* ===== How it works ===== */
.al-dlr-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--al-sp-5);counter-reset:st}
.al-dlr-step{position:relative;background:var(--al-bg-000);border:1px solid var(--al-line-200);border-radius:var(--al-radius-md);padding:var(--al-sp-6) var(--al-sp-5) var(--al-sp-5);box-shadow:var(--al-shadow-1)}
.al-dlr-step:before{counter-increment:st;content:counter(st);position:absolute;top:-16px;left:var(--al-sp-5);width:34px;height:34px;border-radius:50%;background:var(--al-blue-700);color:#fff;font-weight:var(--al-fw-bold);display:flex;align-items:center;justify-content:center;box-shadow:var(--al-shadow-2)}
.al-dlr-step b{display:block;margin-bottom:6px;font-size:var(--al-fs-md)}
.al-dlr-step p{margin:0;font-size:var(--al-fs-sm);color:var(--al-ink-700)}

/* ===== Fields table ===== */
.al-dlr-fields{background:var(--al-bg-000);border:1px solid var(--al-line-200);border-radius:var(--al-radius-lg);box-shadow:var(--al-shadow-1);overflow:hidden}
.al-dlr-fields table{width:100%;border-collapse:collapse;font-size:var(--al-fs-sm)}
.al-dlr-fields th{text-align:left;background:var(--al-blue-050);color:var(--al-ink-700);font-weight:var(--al-fw-semibold);font-size:var(--al-fs-xs);text-transform:uppercase;letter-spacing:.03em;padding:11px 16px;border-bottom:1px solid var(--al-line-200)}
.al-dlr-fields td{padding:10px 16px;border-bottom:1px solid var(--al-line-200);color:var(--al-ink-700);vertical-align:top}
.al-dlr-fields tr:last-child td{border-bottom:0}
.al-dlr-fields td.fn{font-family:var(--al-font-mono);font-size:var(--al-fs-xs);color:var(--al-blue-700);font-weight:var(--al-fw-semibold);white-space:nowrap}
.al-dlr-fields tr:hover td{background:var(--al-bg-100)}

/* ===== Integrations / API note ===== */
.al-dlr-api{background:var(--al-blue-900);color:#dce8f5;border-radius:var(--al-radius-lg);padding:var(--al-sp-8);display:grid;grid-template-columns:1.4fr 1fr;gap:var(--al-sp-8);align-items:center}
.al-dlr-api h2{color:#fff}
.al-dlr-api p{font-size:var(--al-fs-sm);color:#b9cde4;margin:var(--al-sp-2) 0 0}
.al-dlr-api code{font-family:var(--al-font-mono);font-size:var(--al-fs-xs);background:rgba(255,255,255,.08);color:#fff;padding:2px 6px;border-radius:var(--al-radius-xs)}
.al-dlr-api .al-dlr-apibox{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.12);border-radius:var(--al-radius-md);padding:var(--al-sp-5)}
.al-dlr-api .al-dlr-apibox b{color:#fff;display:block;margin-bottom:8px;font-size:var(--al-fs-sm)}
.al-dlr-api .al-dlr-apibox ul{margin:0;padding-left:18px}
.al-dlr-api .al-dlr-apibox li{margin:5px 0}

/* ===== Related partner links ===== */
.al-dlr-rel{display:flex;flex-wrap:wrap;gap:var(--al-sp-3);margin-top:var(--al-sp-8);padding-top:var(--al-sp-6);border-top:1px solid var(--al-line-200)}
.al-dlr-rel a{display:inline-flex;align-items:center;gap:7px;font-size:var(--al-fs-sm);font-weight:var(--al-fw-medium);color:var(--al-ink-700);border:1px solid var(--al-line-300);background:var(--al-bg-000);padding:8px 14px;border-radius:var(--al-radius-pill);transition:border-color var(--al-dur-base),color var(--al-dur-base)}
.al-dlr-rel a:hover{border-color:var(--al-blue-500);color:var(--al-blue-700)}

/* ===== Account dashboard mini-card ===== */
.al-dlr-acct{background:linear-gradient(135deg,var(--al-blue-800),var(--al-blue-600));color:#fff;border-radius:var(--al-radius-lg);padding:var(--al-sp-6);margin-bottom:var(--al-sp-6);display:flex;align-items:center;gap:var(--al-sp-5);flex-wrap:wrap}
.al-dlr-acct .tx{flex:1;min-width:240px}
.al-dlr-acct h3{color:#fff;font-size:var(--al-fs-lg);margin-bottom:4px}
.al-dlr-acct p{margin:0;color:#d2e2f4;font-size:var(--al-fs-sm)}

/* ===== Responsive ===== */
@media(max-width:1024px){
  .al-dlr-props{grid-template-columns:repeat(2,1fr)}
  .al-dlr-api{grid-template-columns:1fr;gap:var(--al-sp-5)}
}
@media(max-width:760px){
  .al-dlr-hero{padding:var(--al-sp-8) 0}
  .al-dlr-hero h1{font-size:var(--al-fs-2xl)}
  .al-dlr-feeds,.al-dlr-steps,.al-dlr-props{grid-template-columns:1fr}
}
