/* Classificados Araquari — Modelo 4 / Media Drawer do cliente */
.ca-media-drawer-summary{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;border:1px solid #dbe5f3;border-radius:16px;background:#fff;padding:12px 14px;box-shadow:0 8px 24px rgba(15,23,42,.04)}
.ca-media-drawer-summary-copy{min-width:0}.ca-media-drawer-summary-copy strong{display:block;color:#173153}.ca-media-drawer-summary-copy small{display:block;color:#64748b;margin-top:3px;line-height:1.4}.ca-media-count{background:#eef7f4;color:#13795b;border-radius:999px;padding:4px 8px;font-size:.74rem;font-weight:800}
.ca-media-miniatures{display:flex;gap:5px}.ca-media-miniatures span{width:42px;height:42px;border:1px solid #dbe5f3;border-radius:9px;display:grid;place-items:center;overflow:hidden;background:#f6f9fc;color:#93a4b6}.ca-media-miniatures img{width:100%;height:100%;object-fit:cover}.ca-media-miniatures .is-empty{border-style:dashed}
.ca-media-drawer{position:fixed;top:0;right:0;height:100vh;width:min(540px,94vw);background:#fff;z-index:1065;box-shadow:-20px 0 50px rgba(15,23,42,.18);transform:translateX(102%);transition:transform .2s ease;display:flex;flex-direction:column}.ca-media-drawer.is-open{transform:none}
.ca-media-backdrop{position:fixed;inset:0;z-index:1060;border:0;background:rgba(15,34,56,.42);padding:0}.ca-media-drawer-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #e2e8f0}.ca-media-drawer-head span{display:block;text-transform:uppercase;letter-spacing:.08em;color:#18a879;font-size:.66rem;font-weight:900}.ca-media-drawer-head strong{font-size:1rem;color:#14243d}.ca-media-drawer-head button{width:36px;height:36px;border:1px solid #d6e0ea;border-radius:10px;background:#fff;color:#52657b;font-size:1.4rem;line-height:1}
.ca-media-drawer-note{margin:12px 12px 0;padding:10px 12px;border:1px solid #cfe8df;background:#eef8f4;border-radius:11px;color:#43685b;font-size:.78rem;line-height:1.45}.ca-media-drawer-body{padding:10px 12px;overflow:auto;display:grid;gap:8px;flex:1;background:#f7fafc}
.ca-media-slot{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid #dbe5f3;border-radius:12px;background:#fff;padding:8px;min-height:74px}.ca-media-slot-preview{width:72px;height:56px;border:1px dashed #b9c8d9;border-radius:8px;background:#f3f7fb;display:grid;place-items:center;overflow:hidden;color:#8ea0b3}.ca-media-slot-preview img{width:100%;height:100%;object-fit:cover}.ca-media-slot-copy{min-width:0}.ca-media-slot-copy strong{display:block;color:#183153;font-size:.78rem}.ca-media-slot-copy small{display:block;color:#73849a;font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}.ca-media-slot-actions{display:flex;gap:5px}.ca-media-slot-actions .btn{white-space:nowrap}.ca-media-slot-remove{grid-column:2/4;display:flex;align-items:center;gap:6px;color:#64748b;font-size:.72rem}.ca-media-slot.is-removing{border-color:#efc6c3;background:#fffafa}.ca-media-slot.is-removing .ca-media-slot-preview{opacity:.42;filter:grayscale(1)}
.ca-media-drawer-foot{padding:10px 12px;border-top:1px solid #e2e8f0;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.76rem;color:#64748b}
body.ca-media-drawer-open{overflow:hidden}
@media(max-width:767.98px){.ca-media-drawer-summary{grid-template-columns:1fr auto}.ca-media-miniatures{grid-column:1/-1;order:3}}
@media(max-width:575.98px){.ca-media-drawer-summary{grid-template-columns:1fr}.ca-media-open{width:100%}.ca-media-miniatures{grid-column:auto}.ca-media-slot{grid-template-columns:58px minmax(0,1fr)}.ca-media-slot-preview{width:58px;height:50px}.ca-media-slot-actions{grid-column:1/-1;justify-content:flex-end}.ca-media-slot-remove{grid-column:1/-1;justify-self:end}}
@media(prefers-reduced-motion:reduce){.ca-media-drawer{transition:none}}


/* Etapa 10 — responsividade complementar do drawer do cliente */
@media(max-width:575.98px){
  .ca-client-media-drawer{--bs-offcanvas-width:100vw!important;max-width:100vw}
  .ca-client-media-summary{grid-template-columns:1fr!important}
  .ca-client-media-summary .btn{width:100%}
  .ca-client-media-slot{grid-template-columns:54px minmax(0,1fr)!important}
  .ca-client-media-slot-preview{width:54px!important;height:48px!important}
  .ca-client-media-slot-actions{grid-column:1/-1!important;justify-content:flex-end;flex-wrap:wrap}
}