/* ===========================================================================
   DropRadar compatibility layer
   ---------------------------------------------------------------------------
   Pages whose markup has not been rewritten yet still use the older class names
   (.btn, .dr-page-head, .drop-card, .eyebrow …). This sheet maps those names onto
   the current design tokens so every page looks like the maquette immediately,
   instead of waiting for each page to be rebuilt.

   Everything is scoped under body.dr-compat. That matters: .dr-card means a panel
   on these pages and a giveaway card frame in the main sheet, and the scope is
   what keeps the two apart.

   This is a bridge, not a destination. As each page is rewritten against the real
   components its rules come out of here.
   =========================================================================== */

.dr-compat{background:var(--dr-bg);color:var(--dr-text);font-family:var(--dr-font)}

/* ---- Page shell ----------------------------------------------------------- */
.dr-compat .dr-page,.dr-compat main{max-width:var(--dr-max);margin:0 auto;padding:44px var(--dr-gutter) 72px}
.dr-compat .dr-page main,.dr-compat main main{padding:0}
.dr-compat .dr-page-head,.dr-compat .dr-section-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:28px;
}
.dr-compat h1{font-size:clamp(28px,3.6vw,42px);letter-spacing:-.03em;font-family:var(--dr-display);font-weight:700}
.dr-compat h2{font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;font-family:var(--dr-display);font-weight:600}
.dr-compat h3{font-size:17px;font-family:var(--dr-display);font-weight:600}
.dr-compat .dr-page-head p,.dr-compat .commercial-sub{font-size:15px;color:var(--dr-dim);margin-top:10px;max-width:70ch;line-height:1.65}
.dr-compat .dr-section-title{font-family:var(--dr-display);font-size:22px;font-weight:600;margin:38px 0 20px;letter-spacing:-.02em}
.dr-compat .eyebrow,.dr-compat .dr-eyebrow{
  display:block;font-size:11px;font-weight:700;letter-spacing:.13em;
  color:var(--dr-red);margin-bottom:9px;
}
.dr-compat .dr-muted,.dr-compat small,.dr-compat .dr-help{color:var(--dr-dim)}
.dr-compat a{color:inherit}
.dr-compat p{line-height:1.65}

/* ---- Panels --------------------------------------------------------------- */
.dr-compat .dr-card,.dr-compat .dr-form-section,.dr-compat .panel,.dr-compat .password-panel{
  background:var(--dr-surface);border:1px solid var(--dr-line-2);border-radius:var(--dr-r-xl);
  padding:24px;margin-bottom:22px;
}
.dr-compat .dr-card::before{display:none}

/* ---- Buttons -------------------------------------------------------------- */
.dr-compat .btn,.dr-compat button.btn,.dr-compat a.btn,.dr-compat .text-btn,
.dr-compat .promo-reveal,.dr-compat .promo-offer,.dr-compat .join-drop,.dr-compat .status-filter{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 19px;border-radius:var(--dr-r-md);border:1px solid var(--dr-line-2);
  background:var(--dr-surface-2);color:var(--dr-text);
  font-family:var(--dr-font);font-size:14px;font-weight:600;cursor:pointer;
  text-decoration:none;line-height:1.2;
}
.dr-compat .btn:hover,.dr-compat .text-btn:hover,.dr-compat .join-drop:hover,
.dr-compat .promo-offer:hover,.dr-compat .status-filter:hover{border-color:#38384a}
.dr-compat .btn.primary,.dr-compat .promo-reveal,.dr-compat .join-drop,
.dr-compat .btn.danger,.dr-compat .status-filter.selected{
  background:var(--dr-red);border-color:var(--dr-red);color:#fff;
}
.dr-compat .btn.primary:hover,.dr-compat .promo-reveal:hover,.dr-compat .join-drop:hover{background:var(--dr-red-hot);border-color:var(--dr-red-hot)}
.dr-compat .btn.muted{background:transparent}
.dr-compat .btn:disabled,.dr-compat button:disabled{opacity:.5;cursor:not-allowed}
.dr-compat .text-btn{background:none;border:0;color:var(--dr-red);padding:0}
.dr-compat .dr-page-actions,.dr-compat .dr-page-actions > *{display:inline-flex}
.dr-compat .dr-page-actions{gap:10px;flex-wrap:wrap}

/* Any remaining bare <button> on these pages, so none is left with the browser's
   default grey chrome against a dark page. */
.dr-compat :is(main,.dr-page,form,section,article) button:not(.btn):not([class*="dr-"]):not([class*="promo"]):not([class*="join"]):not([class*="status"]){
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 15px;border-radius:var(--dr-r-sm);cursor:pointer;
  background:var(--dr-surface-2);border:1px solid var(--dr-line-2);color:var(--dr-text-2);
  font-family:var(--dr-font);font-size:13px;font-weight:600;
}
.dr-compat :is(main,.dr-page,form,section,article) button:not(.btn):not([class*="dr-"]):hover{color:var(--dr-text);border-color:#38384a}

/* ---- Forms ---------------------------------------------------------------- */
.dr-compat :is(main,.dr-page,form,section,article) label{display:block;margin-bottom:18px;font-size:13.5px;font-weight:600;color:var(--dr-text-2)}
/* The global header and footer are rendered by shared-shell.js in the current design
   and must never be touched by these rules. The header's search field was picking up
   the form-field styling below, which drew a second box inside the red pill. */
.dr-compat .dr-head *,.dr-compat .dr-foot *{margin-top:0;margin-bottom:0}

.dr-compat :is(main,.dr-page,form,section,article,.dr-card) input[type=text],
.dr-compat :is(main,.dr-page,form,section,article,.dr-card) input[type=email],
.dr-compat :is(main,.dr-page,form,section,article,.dr-card) input[type=url],
.dr-compat :is(main,.dr-page,form,section,article,.dr-card) input[type=password],
.dr-compat :is(main,.dr-page,form,section,article,.dr-card) input[type=number],
.dr-compat :is(main,.dr-page,form,section,article,.dr-card) input[type=search],
.dr-compat :is(main,.dr-page,form,section,article,.dr-card) input[type=datetime-local],
.dr-compat :is(main,.dr-page,form,section,article,.dr-card) input[type=date],
.dr-compat :is(main,.dr-page,form,section,article,.dr-card) input:not([type]),
.dr-compat :is(main,.dr-page,form,section,article,.dr-card) select,
.dr-compat :is(main,.dr-page,form,section,article,.dr-card) textarea,
.dr-compat .choice,.dr-compat .dr-field-select{
  display:block;width:100%;margin-top:9px;padding:12px 15px;
  background:var(--dr-bg-2);border:1px solid var(--dr-line-2);border-radius:var(--dr-r-md);
  color:var(--dr-text);font-family:var(--dr-font);font-size:14px;font-weight:400;outline:none;
}
.dr-compat textarea{resize:vertical;min-height:108px;line-height:1.6}
.dr-compat input:focus,.dr-compat select:focus,.dr-compat textarea:focus{border-color:var(--dr-red-edge)}
.dr-compat input::placeholder,.dr-compat textarea::placeholder{color:var(--dr-dim-2)}
.dr-compat input[type=checkbox],.dr-compat input[type=radio]{
  width:17px;height:17px;margin:0;accent-color:var(--dr-red);display:inline-block;
}
.dr-compat .check-label,.dr-compat .dr-check{display:flex;align-items:center;gap:10px;font-weight:500}
.dr-compat .form-grid,.dr-compat .dr-form-grid,.dr-compat .dr-grid-2{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;
}
.dr-compat .dr-wide-label,.dr-compat .contact-field{grid-column:1 / -1}

/* ---- Grids and cards ------------------------------------------------------ */
.dr-compat .dr-grid-3,.dr-compat .drop-grid,.dr-compat .promo-grid,
.dr-compat .dr-promo-grid,.dr-compat .partner-grid,.dr-compat .creator-list{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
}
.dr-compat .creator-list{grid-template-columns:1fr;gap:12px}
.dr-compat .drop-card,.dr-compat .promo-card,.dr-compat .dr-promo-card,
.dr-compat .plan,.dr-compat .creator-row,.dr-compat article.dr-review-item{
  background:var(--dr-surface);border:1px solid var(--dr-line-2);border-radius:var(--dr-r-xl);
  padding:20px;display:flex;flex-direction:column;gap:9px;
}
.dr-compat .creator-row{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}
.dr-compat .drop-art{
  display:block;width:100%;aspect-ratio:16/10;border-radius:var(--dr-r-lg);overflow:hidden;
  background:radial-gradient(ellipse at 50% 56%,#1D1726 0%,#0A0A0F 76%);
}
.dr-compat .drop-art img{width:100%;height:100%;object-fit:contain;padding:12px}
.dr-compat .drop-name{font-family:var(--dr-display);font-size:16px;font-weight:600;text-decoration:none}
.dr-compat .drop-price{font-family:var(--dr-display);font-weight:700;color:var(--dr-red);font-size:18px}
.dr-compat .drop-price small,.dr-compat .platform-badge{
  display:inline-block;margin-left:8px;padding:4px 10px;border-radius:var(--dr-pill);
  background:var(--dr-surface-2);color:var(--dr-dim);font-size:11px;font-weight:600;letter-spacing:.05em;
}
.dr-compat .drop-meta,.dr-compat .dr-giveaway-meta{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:12.5px;color:var(--dr-dim);
}

/* ---- Notices, empties, errors --------------------------------------------- */
.dr-compat .dr-notice,.dr-compat .notice,.dr-compat .transparency{
  border:1px solid var(--dr-line-2);border-left:3px solid var(--dr-red);border-radius:var(--dr-r-md);
  padding:15px 18px;font-size:14px;color:var(--dr-dim);margin-bottom:24px;background:var(--dr-surface);
}
.dr-compat .dr-error,.dr-compat .error{
  border:1px solid var(--dr-red);border-left:3px solid var(--dr-red);border-radius:var(--dr-r-md);
  padding:14px 17px;font-size:14px;color:var(--dr-text-2);margin-bottom:18px;background:var(--dr-red-wash);
}
.dr-compat .dr-empty,.dr-compat .empty{
  border:1px dashed var(--dr-line-2);border-radius:var(--dr-r-lg);padding:54px 24px;text-align:center;
}
.dr-compat .dr-empty.compact,.dr-compat .empty.compact{padding:26px}

/* ---- Tables --------------------------------------------------------------- */
.dr-compat table{width:100%;border-collapse:collapse;font-size:13.5px}
.dr-compat th,.dr-compat td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--dr-line)}
.dr-compat th{color:var(--dr-dim);font-weight:600;font-size:12px;letter-spacing:.05em;text-transform:uppercase}
.dr-compat tbody tr:hover{background:var(--dr-surface)}

/* ---- Odds and ends -------------------------------------------------------- */
.dr-compat .dr-trust-pill,.dr-compat .dr-promo-chip,.dr-compat .chip,.dr-compat .tag{
  display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:var(--dr-pill);
  background:var(--dr-red-wash);border:1px solid var(--dr-red-edge);
  font-size:12.5px;font-weight:600;color:var(--dr-red);
}
.dr-compat .dr-profile-avatar,.dr-compat .avatar{
  width:84px;height:84px;border-radius:50%;object-fit:cover;background:var(--dr-surface-2);
  display:grid;place-items:center;font-family:var(--dr-display);font-size:30px;font-weight:700;color:var(--dr-dim);
}
.dr-compat .honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.dr-compat hr{border:0;border-top:1px solid var(--dr-line);margin:28px 0}
.dr-compat code,.dr-compat kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  background:var(--dr-bg-2);border:1px solid var(--dr-line-2);border-radius:5px;padding:2px 6px;
}

@media (max-width:820px){
  .dr-compat .form-grid,.dr-compat .dr-form-grid,.dr-compat .dr-grid-2,
  .dr-compat .dr-grid-3,.dr-compat .drop-grid,.dr-compat .promo-grid,
  .dr-compat .dr-promo-grid,.dr-compat .partner-grid{grid-template-columns:1fr}
  .dr-compat .dr-card,.dr-compat .dr-form-section{padding:18px}
}