/*
Theme Name: Hello Biz Child
Template: hello-biz
Version: 1.0.6
Description: Estilos customizados para Katakana Auto-Fit e Tempo/Duração + Confirmação CP8195
*/

/* ==========================================================================
   1. CAMPO KATAKANA (Auto-Fit & Layout)
   ========================================================================== */
input[name="nome_katakana"] {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;

  min-height: 40px !important;
  height: 40px !important;

  line-height: 40px !important;

  padding: 0 10px !important;
  margin: 0 !important;
  display: block;
}

/* ==========================================================================
   2. CAMPO TEMPO/DURAÇÃO (Seletor de Meses/Anos)
   ========================================================================== */
.cp-tempo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  position: relative;
  width: 100%;
}

.cp-tempo-unit {
  max-width: 140px;
  height: 40px !important;
  min-height: 40px !important;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 0 10px;
  background-color: #fff;
}

.cp-tempo-msg {
  font-size: 12px;
  color: #dc3232;
  margin-top: 4px;
  display: none;
  width: 100%;
}

.cp-tempo-msg.is-active {
  display: block;
  animation: cpFadeIn 0.3s ease;
}

.cp-tempo-invalid {
  border-color: #dc3232 !important;
}

@keyframes cpFadeIn {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   3. CP8195 — Confirmação Entrada (Cards + Grid)
   Escopo: .cp8195-confirm (não afeta o resto do site)
   ========================================================================== */
.cp8195-confirm .cp-card{
  border:1px solid #e7e7e7;
  border-radius:12px;
  padding:14px;
  margin:0 0 14px;
  background:#fff
}
.cp8195-confirm .cp-card h4{
  margin:0 0 10px;
  font-size:16px;
  color:#222
}
.cp8195-confirm .cp-muted{
  color:#999;
  font-style:italic
}
.cp8195-confirm .cp-muted.is-normal{
  font-style:normal
}

/* Linha: label + valor */
.cp8195-confirm .cp-row{
  display:flex;
  gap:12px;

  /* FIX: evita “buraco” visual quando o label quebra no iOS */
  align-items:center;

  border-top:1px solid #f0f0f0;
  padding:8px 0;
  margin:0;
}
.cp8195-confirm .cp-row:first-child{
  border-top:none;
  padding-top:0
}

/* FIX: remove influência de margens herdadas do tema (muito comum em iOS) */
.cp8195-confirm .cp-row p,
.cp8195-confirm .cp-row div{
  margin:0;
}

/* Label/Value */
.cp8195-confirm .cp-label{
  flex:0 0 190px;
  min-width:190px;
  max-width:190px;
  font-weight:600;
  color:#444;
  line-height:1.2;
}
.cp8195-confirm .cp-value{
  flex:1;
  min-width:0;
  color:#111;
  word-break:break-word;

  /* FIX: evita “altura” excessiva */
  line-height:1.25;
  min-height:0;

  font-weight:600;
}
.cp8195-confirm .cp-value.is-normal{font-weight:400}
.cp8195-confirm .cp-value.is-prewrap{white-space:pre-wrap}

.cp8195-confirm .cp-box{
  border:1px solid #eee;
  border-radius:10px;
  background:#fafafa;
  padding:10px;
  margin-top:10px
}
.cp8195-confirm .cp-box-title{
  font-weight:700;
  margin:0 0 8px;
  color:#222
}
.cp8195-confirm .cp-box .cp-row{
  border-top:1px dashed #e9e9e9;
  padding:7px 0
}
.cp8195-confirm .cp-box .cp-row:first-child{
  border-top:none;
  padding-top:0
}

.cp8195-confirm .cp-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px
}
.cp8195-confirm .cp-item{
  border:1px solid #eee;
  border-radius:10px;
  padding:10px;
  background:#fafafa
}
.cp8195-confirm .cp-item-title{
  font-weight:700;
  margin:0 0 8px;
  color:#222
}

/* GRID: Fotos/Anexos (Padrão) */
.cp8195-confirm .cp-thumb-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  margin-top:10px;
}
.cp8195-confirm .cp-thumb-item{
  border:1px solid #eee;
  border-radius:10px;
  background:#fafafa;
  padding:10px;
}
.cp8195-confirm .cp-thumb-title{
  margin:0 0 8px;
  font-weight:700;
  color:#222;
  font-size:14px;
}
.cp8195-confirm .cp-thumb-media{
  border:1px solid #e9e9e9;
  border-radius:8px;
  overflow:hidden;
  width:100%;
  aspect-ratio:1/1;
  background:#fff;
}
.cp8195-confirm .cp-thumb-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.cp8195-confirm .cp-thumb-file{
  margin-top:8px;
  color:#444;
  font-weight:600;
  font-size:12px;
  word-break:break-word;
}

/* ==========================================================================
   3. CP8195 — Confirmação Entrada (Cards + Grid) — FIX MOBILE SPACING
   ========================================================================== */

.cp8195-confirm .cp-card{
  border:1px solid #e7e7e7;
  border-radius:12px;
  padding:14px;
  margin:0 0 14px;
  background:#fff;
}

.cp8195-confirm .cp-card h4{
  margin:0 0 10px;
  font-size:16px;
  color:#222;
}

.cp8195-confirm .cp-muted{
  color:#999;
  font-style:italic;
}
.cp8195-confirm .cp_toggle-muted.is-normal{
  font-style:normal;
}

/* ✅ FIX: espaçamento e alinhamento perfeitos */
.cp8195-confirm .cp-row{
  display:flex;
  gap:12px;
  align-items:center; /* ✅ antes era flex-start */
  border-top:1px solid #f0f0f0;
  padding:10px 0;
  margin:0;
}

.cp8195-confirm .cp-row:first-child{
  border-top:none;
  padding-top:0;
}

/* ✅ FIX: label não forçar altura e não quebrar layout no iPhone */
.cp8195-confirm .cp-label{
  flex:0 0 170px;        /* ✅ reduz */
  min-width:170px;
  max-width:170px;
  font-weight:600;
  color:#444;
  line-height:1.25;
}

/* ✅ FIX: value com line-height e sem “espaço fantasma” */
.cp8195-confirm .cp-value{
  flex:1;
  min-width:0;
  color:#111;
  word-break:break-word;
  font-weight:600;
  line-height:1.35;
}

.cp8195-confirm .cp-value.is-normal{
  font-weight:400;
}
.cp8195-confirm .cp-value.is-prewrap{
  white-space:pre-wrap;
}

/* Boxes */
.cp8195-confirm .cp-box{
  border:1px solid #eee;
  border-radius:10px;
  background:#fafafa;
  padding:10px;
  margin-top:10px;
}

.cp8195-confirm .cp-box-title{
  font-weight:700;
  margin:0 0 8px;
  color:#222;
}

.cp8195-confirm .cp-box .cp-row{
  border-top:1px dashed #e9e9e9;
  padding:8px 0;
}
.cp8195-confirm .cp-box .cp-row:first-child{
  border-top:none;
  padding-top:0;
}

/* Lista */
.cp8195-confirm .cp-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}

.cp8195-confirm .cp-item{
  border:1px solid #eee;
  border-radius:10px;
  padding:10px;
  background:#fafafa;
}

.cp8195-confirm .cp-item-title{
  font-weight:700;
  margin:0 0 8px;
  color:#222;
}

/* GRID */
.cp8195-confirm .cp-thumb-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  margin-top:10px;
}

.cp8195-confirm .cp-thumb-item{
  border:1px solid #eee;
  border-radius:10px;
  background:#fafafa;
  padding:10px;
}

.cp8195-confirm .cp-thumb-title{
  margin:0 0 8px;
  font-weight:700;
  color:#222;
  font-size:14px;
}

.cp8195-confirm .cp-thumb-media{
  border:1px solid #e9e9e9;
  border-radius:8px;
  overflow:hidden;
  width:100%;
  aspect-ratio:1/1;
  background:#fff;
}

.cp8195-confirm .cp-thumb-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.cp8195-confirm .cp-thumb-file{
  margin-top:8px;
  color:#444;
  font-weight:600;
  font-size:12px;
  word-break:break-word;
}

/* Grupos do GRID */
.cp8195-confirm #cp-all-photos-grid,
.cp8195-confirm .cp-thumb-grid{
  grid-auto-flow:row;
}

.cp8195-confirm #cp-all-photos-grid .cp-doc-group-title,
.cp8195-confirm .cp-thumb-grid .cp-doc-group-title{
  grid-column:1 / -1;
  margin:12px 0 2px;
  font-weight:700;
  font-size:14px;
  color:#222;
  text-transform:none !important;
}

/* Evita lowercase */
.cp8195-confirm #cp-all-photos-grid .cp-thumb-title,
.cp8195-confirm #cp-all-photos-grid .cp-thumb-file,
.cp8195-confirm .cp-thumb-grid .cp-thumb-title,
.cp8195-confirm .cp-thumb-grid .cp-thumb-file{
  text-transform:none !important;
}

/* ✅ MOBILE */
@media (max-width:900px){
  .cp8195-confirm .cp-thumb-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:640px){
  /* ✅ aqui é o que resolve 100% o “espaçado” */
  .cp8195-confirm .cp-row{
    flex-direction:column;
    align-items:flex-start; /* ✅ label e value encostados */
    gap:4px;
  }

  .cp8195-confirm .cp-label{
    flex:none;
    min-width:unset;
    max-width:unset;
    width:100%;
  }

  .cp8195-confirm .cp-value{
    width:100%;
  }

  .cp8195-confirm .cp-thumb-grid{
    grid-template-columns:repeat(1, minmax(0, 1fr));
  }
}

/* =========================================================
   CP Carousel — Label na foto
   - Fallback universal: usa span .cp-photo-label (não depende de swiper-slide-inner)
   ========================================================= */

.cp-photo-label{
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 20;
  font-size: 12px;
  line-height: 1.2;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(0,0,0,.55);
  color: #fff;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

/* =========================================================
   CP Carousel — SOMENTE PLUS (sem nome/label, sem círculo)
   ========================================================= */

/* 1) Mata qualquer label (pseudo e elemento real) */
.cp-single-carousel .cp-photo-label{
  display: none !important;
}
.cp-single-carousel .cp-c-slide::before,
.cp-single-carousel [data-cp-label]::before{
  content: none !important;
  display: none !important;
}

/* 2) Base: garante posicionamento */
.cp-single-carousel .cp-c-slide,
.cp-single-carousel [data-cp-label]{
  position: relative;
  display: block;
  overflow: hidden;
}

/* 3) Efeito de escurecer a imagem (hover mouse + press touch) */
.cp-single-carousel .cp-c-slide img,
.cp-single-carousel [data-cp-label] img{
  display:block;
  transition: filter .18s ease, transform .18s ease;
}

/* hover só para mouse/trackpad */
@media (hover:hover) and (pointer:fine){
  .cp-single-carousel .cp-c-slide:hover img,
  .cp-single-carousel [data-cp-label]:hover img{
    filter: brightness(.55);
    transform: scale(1.01);
  }
}

/* press (touch) — seu JS aplica .is-press */
.cp-single-carousel .cp-c-slide.is-press img,
.cp-single-carousel [data-cp-label].is-press img{
  filter: brightness(.55);
  transform: scale(1.01);
}

/* 4) PLUS branco no centro (SEM SVG, SEM círculo) */
.cp-single-carousel .cp-c-slide::after,
.cp-single-carousel [data-cp-label]::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 30;

  width: 44px;
  height: 44px;

  /* desenha o "+" com 2 linhas brancas */
  background:
    linear-gradient(#fff,#fff) center/4px 34px no-repeat,
    linear-gradient(#fff,#fff) center/34px 4px no-repeat;

  border: none !important;
  border-radius: 0 !important;

  transform: translate(-50%,-50%) scale(.88);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}

/* mostrar PLUS no hover (mouse) */
@media (hover:hover) and (pointer:fine){
  .cp-single-carousel .cp-c-slide:hover::after,
  .cp-single-carousel [data-cp-label]:hover::after{
    opacity: 1;
    transform: translate(-50%,-50%) scale(1);
  }
}

/* mostrar PLUS no press (touch) */
.cp-single-carousel .cp-c-slide.is-press::after,
.cp-single-carousel [data-cp-label].is-press::after{
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
}