/* Detalhes da compra no Android/iOS, mantendo as cores do tema público. */
.dialog-quota-toggle{display:flex;width:100%;min-height:52px;align-items:center;justify-content:space-between;padding:0 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface-alt);color:var(--success);font-weight:800;cursor:pointer}
.dialog-quota-toggle i{font-size:20px;font-style:normal}
.dialog-quota-section{margin-top:12px;padding:16px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.dialog-purchase-details{margin-top:14px;padding:18px;border:1px solid var(--border);border-radius:15px;background:var(--surface)}
.dialog-purchase-heading{display:grid;gap:5px;margin-bottom:15px}
.dialog-purchase-heading strong{font-size:18px;font-weight:800}
.dialog-purchase-heading span{overflow-wrap:anywhere;color:var(--muted);font-size:12px}
.dialog-meta svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--text)}

@media(max-width:760px){
  #details-dialog{
    position:fixed;
    inset:6px;
    width:auto;
    max-width:none;
    height:calc(100dvh - 12px);
    max-height:none;
    margin:0;
    overflow-x:hidden;
    overflow-y:auto;
    border-radius:18px;
    -webkit-overflow-scrolling:touch;
  }
  #details-dialog article{padding:0 0 22px}
  #details-dialog article>header{
    position:relative;
    display:block;
    padding:22px 64px 18px 20px;
    background:var(--surface);
  }
  #details-dialog article>header .kicker{font-size:11px!important;font-weight:800!important;letter-spacing:.13em;text-transform:uppercase!important}
  #details-dialog article>header h2{margin-top:7px;font-size:22px!important;font-weight:800!important;line-height:1.25!important;text-transform:uppercase}
  #details-dialog article>header [data-close]{position:absolute;top:15px;right:15px;width:44px;height:44px}
  #details-dialog .dialog-cover{display:none!important}

  #details-dialog .dialog-purchase-details{margin:14px 14px 0;padding:17px 15px}
  #details-dialog .dialog-purchase-heading{margin-bottom:16px;text-align:left}
  #details-dialog .dialog-purchase-heading strong{font-size:18px!important}
  #details-dialog .dialog-purchase-heading span{font-size:11px!important}
  #details-dialog .dialog-meta{
    display:grid;
    grid-template-columns:1fr;
    gap:13px;
    margin:0;
  }
  #details-dialog .dialog-meta>div{
    display:grid;
    grid-template-columns:28px minmax(0,1fr);
    align-items:center;
    gap:12px;
    min-width:0;
    padding:0;
    border:0;
    background:transparent;
  }
  #details-dialog .dialog-meta svg{width:22px;height:22px}
  #details-dialog .dialog-meta strong{min-width:0;margin:0;overflow-wrap:anywhere;font-size:15px!important;font-weight:600!important}
  #details-dialog .dialog-status strong{width:max-content;max-width:100%;padding:6px 10px;border-radius:999px;font-size:11px!important;font-weight:800!important;text-transform:uppercase}
  #details-dialog .dialog-status.approved strong{background:color-mix(in srgb,var(--success),transparent 86%);color:var(--success)}
  #details-dialog .dialog-status.pending strong{background:color-mix(in srgb,var(--highlight),transparent 86%);color:var(--highlight)}
  #details-dialog .dialog-status.closed strong{background:color-mix(in srgb,var(--danger),transparent 86%);color:var(--danger)}

  #details-dialog .dialog-quota-toggle{width:calc(100% - 28px);margin:12px 14px 0;border-radius:12px;font-size:15px!important}
  #details-dialog .dialog-quota-section{margin:12px 14px 0;padding:15px}
  #details-dialog .quota-title{display:grid;gap:4px;padding:0 0 13px}
  #details-dialog .quota-title strong{font-size:20px!important;font-weight:800!important}
  #details-dialog .quota-title span{font-size:12px!important}
  #details-dialog .dialog-quotas{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:none;overflow:visible}
  #details-dialog .dialog-quotas span{min-width:0;padding:10px 4px;border-radius:9px;font-size:12px!important;font-weight:800!important;text-align:center}
  #details-dialog article>footer{margin:14px 14px 0;padding-top:14px}
  #details-dialog article>footer button{width:100%;min-height:48px}
}

@media(max-width:390px){
  #details-dialog .dialog-quotas{grid-template-columns:repeat(2,minmax(0,1fr))}
}