/* ═══════════════════════════════════════════════════════════════
   photo-editor.css  v12 | Desafio Focar — Editor de fotos pré-upload
   ═══════════════════════════════════════════════════════════════ */

/* ── Overlay fullscreen ────────────────────────────────────── */
#pe-overlay {
    position: fixed; inset: 0;
    z-index: 600;
    background: var(--bg-deep);
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s;
}
#pe-overlay.pe-open {
    opacity: 1;
    pointer-events: auto;
}

/* ── Header ────────────────────────────────────────────────── */
.pe-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 12px 12px;
    border-bottom: 1px solid var(--bd);
    flex-shrink: 0;
}

.pe-btn-cancel {
    font-size: 13px;
    color: var(--tx-2);
    background: none;
    border: none;
    padding: 6px 0;
    font-family: var(--fb);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.pe-btn-use {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 7px 14px;
    border-radius: 20px;
    border: none;
    background: var(--gold-gd);
    color: var(--on-gold);
    font-size: 13px;
    font-weight: 700;
    font-family: var(--fb);
    box-shadow: var(--gold-sh);
    cursor: pointer;
    transition: opacity .15s;
}
.pe-btn-use:disabled { opacity: .45; cursor: not-allowed; }

/* ── Tabs ──────────────────────────────────────────────────── */
.pe-tabs {
    display: flex;
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Fix: scroll suave iOS + clip correto */
    scrollbar-width: none;
    padding-right: 4px; /* Fix: folga para última tab não ficar atrás de "Usar foto" */
}
.pe-tabs::-webkit-scrollbar { display: none; }
.pe-tab {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 16px;
    border: 1px solid var(--bd-2);
    background: none;
    color: var(--tx-2);
    font-family: var(--fb);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}
.pe-tab--active {
    background: var(--bg-raised);
    color: var(--tx);
    border-color: var(--bd-gold);
}

/* ── Canvas area ───────────────────────────────────────────── */
.pe-canvas-area {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    position: relative;
    background: #000;
}

.pe-panel {
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}
.pe-panel--active { display: flex; }

/* Crop panel */
#pe-panel-crop img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

/* Filter + Text preview */
.pe-live-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
}
.pe-live-wrap img {
    max-width: 100%;
    max-height: 52dvh;
    display: block;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    /* Filtro aplicado via CSS custom property — sem inline style */
    filter: var(--img-filter, none);
}

/* Filtro nos thumbs da tira — sem inline style */
.pe-filter-thumb-img img {
    filter: var(--thumb-filter, none);
}

/* Vinheta overlay */
.pe-vinheta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
        transparent 28%, rgba(0,0,0,0.68) 100%);
    pointer-events: none;
    border-radius: inherit;
}

/* ── Text layers ───────────────────────────────────────────── */
.pe-text-layers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.pe-text-layers--editable {
    pointer-events: auto;
}
.pe-text-layer {
    position: absolute;
    left: var(--pe-x, 50%);
    top:  var(--pe-y, 50%);
    transform: translate(-50%, -50%)
               rotate(var(--pe-rotation, 0deg))
               scale(var(--pe-scale, 1));
    transform-origin: center center;
    will-change: transform;
    font-family: var(--pe-font, sans-serif);
    font-weight: var(--pe-weight, 600);
    font-size: var(--pe-size, 28px);
    color: var(--pe-color, #fff);
    /* Sombra e contorno via CSS vars — elimina ghost durante drag/pinch */
    text-shadow: var(--pe-shadow, none);
    -webkit-text-stroke: var(--pe-stroke, 0px transparent);
    /* Nunca reflui por posição — largura travada no conteúdo */
    white-space: pre-wrap;
    width: max-content;
    text-align: center;
    line-height: 1.2;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    padding: 4px 6px;
    border-radius: 4px;
}
.pe-text-layer:active { cursor: grabbing; }

/* Layer selecionado na imagem */
.pe-text-layer--selected {
    outline: 1.5px dashed var(--gold);
    outline-offset: 4px;
}

/* Layer em modo de edição direta — teclado nativo ativo */
.pe-text-layer--editing,
.pe-text-layer--editing:active {
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
    touch-action: auto;
    caret-color: var(--gold, #D4AF37);
    outline: 2px solid var(--gold);
    outline-offset: 4px;
    min-width: 2ch;
    max-width: 80vw;
    text-align: center;
}

/* ── Menu flutuante de ferramentas (aba Texto) ─────────────── */
.pe-float-menu {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}
.pe-float-menu--visible {
    opacity: 1;
    pointer-events: auto;
}

.pe-float-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.62);
    color: var(--tx);
    font-size: 14px;
    font-weight: 700;
    font-family: var(--fb);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s;
    flex-shrink: 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.pe-float-btn--active {
    background: rgba(212,175,55,.28);
    border-color: var(--gold);
    color: var(--gold);
}
.pe-float-btn--done {
    background: rgba(212,175,55,.2);
    border-color: var(--gold, #D4AF37);
    color: var(--gold, #D4AF37);
    font-size: 18px;
}
.pe-float-btn--done:hover {
    background: rgba(212,175,55,.35);
}
.pe-float-btn--danger {
    border-color: rgba(255,59,48,.4);
    color: rgba(255,59,48,.85);
}
.pe-float-btn--danger:hover {
    background: rgba(255,59,48,.22);
    border-color: rgba(255,59,48,.8);
}

/* Dot de cor no botão flutuante */
.pe-float-color-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: block;
    background-color: var(--float-color, #fff);
    border: 1.5px solid rgba(255,255,255,.35);
    flex-shrink: 0;
}

.pe-float-sep {
    width: 24px;
    height: 1px;
    background: rgba(255,255,255,.15);
    margin: 2px auto;
}

/* ── Sheets contextuais (deslizam de baixo do canvas) ──────── */
.pe-sheet {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid rgba(255,255,255,.1);
    border-radius: 16px 16px 0 0;
    padding: 18px 16px 20px;
    z-index: 40;
    /* Fechado: invisível + sem interação — a transition de visibility
       é atrasada para cobrir o slide-out antes de sumir */
    visibility: hidden;
    pointer-events: none;
    transform: translateY(101%);
    transition: transform .24s cubic-bezier(.4, 0, .2, 1),
                visibility 0s linear .25s;
}
.pe-sheet--open {
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    /* Ao abrir: visibility imediata, transform anima */
    transition: transform .24s cubic-bezier(.4, 0, .2, 1),
                visibility 0s linear 0s;
}

/* ── Cropper.js — handles visíveis nos 4 cantos ─────────────
   #pe-panel-crop fica com overflow:hidden para conter o canvas
   (que Cropper cria com dimensões da imagem natural, ex. 4000px).
   A cadeia overflow:visible começa em .cropper-container para
   que os handles saiam do crop-box sem serem clipados internamente. */
#pe-panel-crop {
    overflow: hidden;
}
.cropper-container,
.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal,
.cropper-view-box {
    overflow: visible !important;
}
.cropper-point {
    z-index: 10;
    width: 12px !important;
    height: 12px !important;
    opacity: 1 !important;
    background-color: var(--gold, #D4AF37) !important;
    border-radius: 2px;
    /* SEM position: relative — Cropper.js define absolute e relative quebra o cálculo */
}
/* Área de toque expandida — visual 12px, toque ~36px */
.cropper-point::after {
    content: '';
    position: absolute;
    top: -12px;
    left: -12px;
    right: -12px;
    bottom: -12px;
}
/* Pontos de meio — menos visíveis */
.cropper-point.point-n,
.cropper-point.point-s,
.cropper-point.point-e,
.cropper-point.point-w {
    opacity: .55 !important;
    width: 8px !important;
    height: 8px !important;
}
/* Linha de borda dourada */
.cropper-view-box {
    outline: 1.5px solid var(--gold, #D4AF37) !important;
    outline-color: var(--gold, #D4AF37) !important;
}
.cropper-line {
    background-color: rgba(212,175,55,.5) !important;
}

/* Melhoria 1: máscara escura reforçada fora da seleção de corte —
   padrão Cropper.js é opacity 0.5; 0.75 destaca bem o que vai ser aproveitado */
.cropper-modal {
    opacity: 0.75 !important;
}

/* ── Tools area ────────────────────────────────────────────── */
.pe-tools-area {
    flex-shrink: 0;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--bd);
    max-height: 44dvh;
    overflow-y: auto;
    scrollbar-width: none;
}
.pe-tools-area::-webkit-scrollbar { display: none; }

.pe-tools-panel {
    display: none;
    flex-direction: column;
    gap: 10px;
}
.pe-tools-panel--active { display: flex; }

/* ── Crop tools ────────────────────────────────────────────── */
.pe-crop-ratios {
    display: flex;
    gap: 8px;
}
.pe-ratio-btn {
    padding: 6px 16px;
    border-radius: 16px;
    border: 1px solid var(--bd-2);
    background: none;
    color: var(--tx-2);
    font-size: 13px;
    font-family: var(--fb);
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.pe-ratio-btn--active {
    border-color: var(--gold);
    color: var(--gold);
}

.pe-crop-transforms {
    display: flex;
    gap: 8px;
}
.pe-transform-btn {
    flex: 1;
    padding: 9px 6px;
    border-radius: 10px;
    border: 1px solid var(--bd-2);
    background: var(--bg-raised);
    color: var(--tx-2);
    font-size: 12px;
    font-family: var(--fb);
    cursor: pointer;
    transition: background .15s;
}
.pe-transform-btn:hover { background: var(--bg-float); }

/* Melhoria 2: botão confirmar corte — estado normal (dourado) e confirmado */
.pe-crop-confirm-btn {
    width: 100%;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1.5px solid transparent;
    background: var(--gold-gd);
    color: var(--on-gold);
    font-size: 14px;
    font-weight: 700;
    font-family: var(--fb);
    cursor: pointer;
    box-shadow: var(--gold-sh);
    transition: opacity .18s, background .22s, color .22s,
                border-color .22s, box-shadow .22s;
}
.pe-crop-confirm-btn--done {
    background: var(--bg-raised);
    color: var(--gold);
    border-color: var(--bd-gold);
    box-shadow: none;
    cursor: default;
}

/* ── Filter strip ──────────────────────────────────────────── */
.pe-filter-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}
.pe-filter-strip::-webkit-scrollbar { display: none; }

.pe-filter-thumb {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.pe-filter-thumb span {
    font-size: 10px;
    color: var(--tx-2);
    font-family: var(--fb);
    white-space: nowrap;
}

.pe-filter-thumb-img {
    position: relative;
    width: 66px;
    height: 66px;
    border-radius: 10px;
    overflow: hidden;
    border: 2.5px solid transparent;
    transition: border-color .15s;
}
.pe-filter-thumb-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.pe-filter-thumb--active .pe-filter-thumb-img {
    border-color: var(--gold);
}

/* Vinheta nos thumbs */
.pe-filter-thumb-img.pe-vinheta::after {
    border-radius: 8px;
}

/* ── Aba Texto — controles no sheet ────────────────────────── */

/* Seletor de fontes (sheet-font) */
.pe-font-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}
.pe-font-row::-webkit-scrollbar { display: none; }

.pe-font-btn {
    flex-shrink: 0;
    padding: 7px 14px;
    border-radius: 16px;
    border: 1px solid var(--bd-2);
    background: var(--bg-raised);
    color: var(--tx);
    font-size: 15px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s;
    /* Fonte aplicada via CSS custom property — sem inline style */
    font-family: var(--btn-font, var(--fb));
    font-weight: var(--btn-weight, 600);
}
.pe-font-btn--active {
    border-color: var(--gold);
    background: var(--bg-float);
}

/* Paleta de cores (sheet-color) */
.pe-color-row {
    display: flex;
    gap: 12px;
    align-items: center;
}
.pe-color-dot {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    padding: 0;
    cursor: pointer;
    transition: border-color .15s, transform .15s;
    outline: none;
    background-color: var(--swatch-color, #ccc);
}
.pe-color-dot[data-pe-color="#FFFFFF"] { box-shadow: 0 0 0 1px var(--bd-2); }
.pe-color-dot[data-pe-color="#000000"] { box-shadow: 0 0 0 1px var(--bd-2); }
.pe-color-dot--active {
    border-color: var(--gold);
    transform: scale(1.18);
}

/* Tamanho (sheet-size) */
.pe-text-size-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pe-label {
    font-size: 12px;
    color: var(--tx-2);
    white-space: nowrap;
}
.pe-slider {
    flex: 1;
    accent-color: var(--gold);
    height: 4px;
}
.pe-size-val {
    font-size: 12px;
    color: var(--tx);
    min-width: 22px;
    text-align: right;
    font-family: var(--fb);
}

/* Estilos (sheet-style) */
.pe-style-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.pe-style-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1.5px solid var(--bd-2);
    background: var(--bg-raised);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s;
    flex-shrink: 0;
    /* Sombra/contorno via CSS custom properties — sem inline style */
    text-shadow: var(--btn-shadow, none);
    -webkit-text-stroke: var(--btn-stroke, 0px transparent);
    color: var(--btn-color, var(--tx));
}
.pe-style-btn--active {
    border-color: var(--gold);
    background: var(--bg-float);
}

/* ── Aba Texto — botão adicionar ────────────────────────────── */
.pe-add-text-btn {
    width: 100%;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1.5px dashed var(--bd-gold);
    background: none;
    color: var(--gold);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--fb);
    cursor: pointer;
    transition: background .15s;
}
.pe-add-text-btn:hover { background: rgba(212,175,55,.06); }

/* Slim bar — visível quando há layer selecionado */
.pe-text-slim-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Input inline — font-size 16px previne zoom automático no iOS */
.pe-text-slim-input {
    flex: 1;
    height: 42px;
    padding: 0 14px;
    border-radius: 21px;
    border: 1px solid var(--bd-gold);
    background: var(--bg-float);
    color: var(--tx);
    font-size: 16px;
    font-family: var(--fb);
    outline: none;
    transition: border-color .18s;
}
.pe-text-slim-input:focus {
    border-color: var(--gold);
}

/* Botão Concluir */
.pe-text-slim-done {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: var(--gold-gd);
    color: var(--on-gold);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--gold-sh);
    transition: opacity .15s;
}

/* ── Lista de layers ───────────────────────────────────────── */
.pe-layer-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pe-layer-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: var(--bg-raised);
    border-radius: 10px;
    border: 1px solid var(--bd);
    gap: 8px;
}
.pe-layer-preview {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    /* Fonte e cor via CSS custom properties — sem inline style */
    font-family: var(--layer-font, var(--fb));
    color: var(--layer-color, var(--tx));
    font-weight: var(--layer-weight, 400);
}
.pe-layer-rm-btn {
    background: none;
    border: none;
    color: var(--tx-2);
    font-size: 16px;
    padding: 2px 4px;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
}

/* ── Hint nos thumbs do feed ───────────────────────────────── */
.media-edit-hint {
    width: 100%;
    text-align: center;
    font-size: 15px;
    color: var(--tx-2);
    padding: 6px 0 2px;
    font-style: italic;
}

/* ── Botão de edição no thumb ──────────────────────────────── */
.media-thumb-edit {
    position: absolute;
    bottom: 6px;
    left: 6px;
    width: 34px;
    height: 34px;
    background: rgba(0,0,0,.75);
    color: var(--tx);
    border: none;
    border-radius: 50%;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    cursor: pointer;
    z-index: 2;
}
.media-thumb-edit:hover { background: var(--gold); }

/* ── Guias de alinhamento central ────────────────────────── */
.pe-align-guide {
    position: absolute;
    pointer-events: none;
    background: var(--gold, #D4AF37);
    opacity: 0;
    transition: opacity .08s;
    z-index: 15;
    box-shadow: 0 0 6px rgba(212,175,55,.55);
}
.pe-align-guide--v {
    left: 50%;
    top: 0; bottom: 0;
    width: 1px;
    transform: translateX(-50%);
}
.pe-align-guide--h {
    top: 50%;
    left: 0; right: 0;
    height: 1px;
    transform: translateY(-50%);
}
.pe-guide--visible {
    opacity: .82;
}