/* ==========================================================================
   improvements.css
   Estilos complementares para as melhorias do Mycase.
   Carregado APÓS personalizador.css.
   Não sobrescreve variáveis existentes — apenas adiciona.
   ========================================================================== */


/* ── 1) UPLOAD MÚLTIPLO: Loader de progresso ─────────────────────────────── */

.pm-upload-loader {
    position: relative;
    width: 100%;
    height: 6px;
    background: var(--pm-border, #e5e7eb);
    border-radius: 999px;
    margin-bottom: 10px;
    overflow: hidden;
    /* GPU hint: evita repaint da barra inteira a cada tick */
    contain: strict;
}

.pm-upload-loader__bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--pm-primary, #be1522);
    border-radius: 999px;
    will-change: width;
    transition: width 0.18s ease;
}

.pm-upload-loader__label {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--pm-text-muted, #6b7280);
    text-align: center;
    letter-spacing: 0.3px;
    height: 16px;
    line-height: 16px;
}


/* ── 2) PREVIEW VISUAL DAS FONTES ────────────────────────────────────────── */


/*
 * Cada botão de fonte vira um card compacto com
 * a amostra da fonte + nome da fonte abaixo.
 */

#mycase .cp-list-font {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

#mycase .cp-list-font a.pm-font-preview-done {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 10px;
    min-width: 74px;
    text-align: center;
    border: 1px solid var(--pm-border, #e5e7eb);
    border-radius: var(--pm-radius-sm, 10px);
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    cursor: pointer;
    text-decoration: none;
    color: var(--pm-text, #1a1a1f);
}

#mycase .cp-list-font a.pm-font-preview-done:hover {
    border-color: var(--pm-primary, #be1522);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(190, 21, 34, 0.12);
}

#mycase .cp-list-font a.pm-font-preview-done.active {
    background: var(--pm-primary, #be1522);
    border-color: var(--pm-primary, #be1522);
    color: #fff;
    box-shadow: 0 4px 14px rgba(190, 21, 34, 0.28);
}


/* Amostra em tamanho visível */

#mycase .pm-font-preview__sample {
    display: block;
    font-size: 17px;
    line-height: 1.25;
    white-space: nowrap;
    color: inherit;
    /* Garante que a fonte carregue sem FOUT brusco */
    font-display: swap;
}

#mycase .cp-list-font a.pm-font-preview-done.active .pm-font-preview__sample {
    color: #fff;
}


/* Label: nome técnico em tiny-text abaixo da amostra */

#mycase .pm-font-preview__name {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0.55;
    font-family: 'Inter', system-ui, sans-serif !important;
    /* Não herda a fonte exibida */
    line-height: 1;
}

#mycase .cp-list-font a.pm-font-preview-done.active .pm-font-preview__name {
    opacity: 0.8;
    color: rgba(255, 255, 255, .9);
}


/* Fontes individuais (mantém compatibilidade com mycase.js) */

#mycase .cp-autography {
    font-family: 'Mycase Autography', cursive;
}

#mycase .cp-bebas-regular {
    font-family: 'Mycase Bebas Regular', sans-serif;
}

#mycase .cp-bebas {
    font-family: 'Mycase Bebas', sans-serif;
}

#mycase .cp-georgia {
    font-family: 'Mycase Georgia', Georgia, serif;
}

#mycase .cp-quick-kiss {
    font-family: 'Mycase Quick Kiss', cursive;
}


/* ── 3) TEXTO NO DEVICE: feedback de drag ────────────────────────────────── */


/*
 * Cursor semântico e ring de foco visível no texto arrastável
 */

#cp-input-gen {
    cursor: grab !important;
    /* ring de foco para acessibilidade */
    outline: none;
    transition: opacity 0.15s ease;
}

#cp-input-gen:active {
    cursor: grabbing !important;
    opacity: 0.88;
}


/* Estado "colocado" — highlight tênue que some após interação */

#cp-input-gen.pm-text-just-placed {
    animation: pmTextPulse 0.6s ease both;
}

@keyframes pmTextPulse {
    0% {
        text-shadow: 0 0 0 rgba(190, 21, 34, 0);
    }
    40% {
        text-shadow: 0 0 8px rgba(190, 21, 34, 0.45);
    }
    100% {
        text-shadow: none;
    }
}


/* ── 4) CONTROLE DE ZOOM: botão desabilitado ─────────────────────────────── */

#mycase .crop-zoom-btn:disabled,
#mycase .crop-zoom-btn[aria-disabled="true"] {
    opacity: 0.32 !important;
    cursor: not-allowed !important;
    pointer-events: none;
    filter: grayscale(0.5);
    transform: none !important;
}


/* Tooltip de "zoom mínimo" */

#mycase .crop-zoom-btn[aria-disabled="true"]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(17, 24, 39, 0.88);
    color: #fff;
    font-size: 10px;
    padding: 3px 7px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

#mycase .crop-zoom-btn[aria-disabled="true"]:hover::after {
    opacity: 1;
}


/* ── 5) GALERIA DE FOTOS: entrada com micro-animação ─────────────────────── */

@keyframes pmThumbIn {
    from {
        opacity: 0;
        transform: scale(0.7);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

#mycase #cp-sel-Photos ul li {
    animation: pmThumbIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}


/* Garante que imagens adicionadas via JS não tenham animação dupla */

#mycase #cp-sel-Photos ul li[style*="transition"] {
    animation: none;
}


/* ── 6) CORREÇÕES SAFARI / iOS ───────────────────────────────────────────── */


/*
 * Previne tap-highlight azul no iOS em todos os interactivos do editor
 */

#mycase *,
#mycase a,
#mycase button {
    -webkit-tap-highlight-color: transparent;
}


/*
 * Garante que o textarea não cause zoom automático no iOS
 * (font-size >= 16px é obrigatório)
 */

@media (max-width: 768px) {
    #mycase .cp-input-txt,
    #mycase input[type="text"],
    #mycase input[type="file"],
    #mycase select,
    #mycase textarea {
        font-size: 16px !important;
    }
}


/*
 * Scroll inertia nativo no iOS dentro da galeria de fotos
 */

#mycase .jscroll {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}


/*
 * Corrige flickering no Safari durante animações CSS com opacity
 */

#mycase .wrap-img-drag,
#mycase .cp-h-v,
#mycase .jscroll ul li {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}


/*
 * Safari: força criação de contexto de compositing para elementos
 * que sofrem transform frequente (imagens no grid)
 */

#mycase .wrap-img-drag {
    transform: translateZ(0);
}

#mycase #cp-device-ori {
    overflow: visible;
    isolation: isolate;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* ── 7) AVISO SAFARI MODO PRIVADO ────────────────────────────────────────── */

.pm-safari-warn {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.5;
    color: #92400e;
    margin-bottom: 10px;
    animation: pmFade 0.3s ease both;
}

.pm-safari-warn i {
    flex-shrink: 0;
    margin-top: 1px;
    color: #b45309;
}

span.pm-font-preview__name {
    font-size: 7px !important;
}


/* ── 8) PERFORMANCE: contain para cards do editor ───────────────────────── */


/*
 * Isola paint/layout dentro de cada card para evitar repaint cascata
 */

#mycase .pm-card {
    contain: layout style;
}

#mycase #cp-cropit-me {
    contain: layout;
}


/* ── 9) ACESSIBILIDADE ───────────────────────────────────────────────────── */


/* Focus ring visível para navegação por teclado */

#mycase .crop-zoom-btn:focus-visible,
#mycase .crop-btn:focus-visible,
#mycase .btn-open:focus-visible,
#mycase .cp-list-font a:focus-visible,
#mycase .cp-list-color a:focus-visible {
    outline: 2px solid var(--pm-primary, #be1522);
    outline-offset: 2px;
}


/* Remove outline padrão feio em browsers modernos que têm :focus-visible */

#mycase .crop-zoom-btn:focus:not(:focus-visible),
#mycase .crop-btn:focus:not(:focus-visible) {
    outline: none;
}


/* ── 10) RESPONSIVO EXTRA ────────────────────────────────────────────────── */

@media (max-width: 480px) {
    /* Fontes: ajuste de tamanho da prévia em telas pequenas */
    #mycase .pm-font-preview__sample {
        font-size: 14px;
    }
    #mycase .cp-list-font a.pm-font-preview-done {
        min-width: 62px;
        padding: 2px 4px;
    }
    /* Loader: texto um pouco menor */
    .pm-upload-loader__label {
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #mycase .cp-list-font a.pm-font-preview-done,
    #mycase #cp-sel-Photos ul li,
    #cp-input-gen.pm-text-just-placed,
    .pm-upload-loader__bar {
        animation: none !important;
        transition: none !important;
    }
}