/* SBP Front - inspirado no layout das screenshots */
.sbp-shell{
	max-width:420px;
	margin:0 auto;
	font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
	line-height:1;
}
.sbp-hero {
    height: 220px;
    border-radius: 18px 18px 0 0;
    position: relative;
    overflow: hidden;

    background-image:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.65) 0%,
            rgba(0, 0, 0, 0.45) 35%,
            rgba(0, 0, 0, 0.15) 70%,
            rgba(0, 0, 0, 0.05) 100%
        ),
        url(https://barbeariaforlords.com.br/wp-content/uploads/2025/09/banner-barbeariaforlords.jpg);

    background-position: center, top;
    background-size: cover;
}


.sbp-hero-inner{position:absolute;inset:0;padding:14px;display:flex;flex-direction:column;justify-content:space-between}
.sbp-hero-inner p{
	text-align: center;
    	margin-bottom: 40px;
}
/*Aumentando padding*/
.sbp-pill{align-self:center;background:#fff;border-radius:999px;padding:16px 14px;font-weight:700;font-size:11px;letter-spacing:.5px;text-decoration:none;color:#111}
.sbp-brand{display:flex;gap:10px;align-items:center}
.sbp-logo{width:42px;height:42px;border-radius:999px;background:#6d0f12;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.sbp-title{color:#fff;font-weight:800;font-size:22px;line-height:1.1;text-shadow:0 2px 8px rgba(0,0,0,.25)}
.sbp-link{color:#fff;opacity:.9;text-decoration:none;font-size:12px}

.sbp-card{background:#fff;border-radius:22px;margin-top:-36px;box-shadow:0 10px 30px rgba(0,0,0,.15);overflow:hidden}
.sbp-card-head{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 6px}
.sbp-card-title{font-size:18px;font-weight:800;color:#222}
.sbp-close{
  border:0;
  background:#f2f2f2;
  border-radius:999px;
  width:32px;
  height:32px;
  font-size:18px;
  cursor:pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding-top: 10px;

}
#sbp-slots{
    max-width: 400px;
}
#sbp-service-search{
    width: 400px;
    padding: 8px;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 10px;
}
.sbp-slider{display:flex;width:360px;transition:transform .35s cubic-bezier(.2,.9,.2,1)}
.sbp-step{width:100%;padding:10px 16px 16px;min-height:360px}
.sbp-list{
  display:flex;
  flex-direction:
  column;gap:8px;
  margin-top:8px;
  max-width: 400px;
}

.sbp-item{
  display:flex;
  gap:10px;
  padding:10px;
  border-radius:14px;
  border:1px solid #eee;
  cursor:pointer;
  text-indent: 0;
}
.sbp-item input{margin-top:4px;accent-color:#6d0f12}
.sbp-item-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.sbp-item-title{font-weight:800;color:#222}
.sbp-item-price{font-weight:800;color:#222}
.sbp-item-sub{font-size:12px;color:#666;margin-top:2px}
.sbp-item-meta{font-size:12px;color:#666;margin-top:6px}

.sbp-bottom{margin-top:10px;padding-top:10px;border-top:1px solid #f2f2f2;display:flex;gap:10px;align-items:center;justify-content:space-between}
.sbp-bottom-right{justify-content:flex-end}
.sbp-selected{font-size:12px;color:#444}
.sbp-btn{background:#6d0f12;color:#fff;border:0;border-radius:999px;padding:12px 18px;font-weight:800;cursor:pointer}
.sbp-btn:disabled{opacity:.4;cursor:not-allowed}

.sbp-subtitle{font-size:12px;color:#6a6a6a;margin:6px 0}
.sbp-muted{max-width:400px;font-size:13px;color:#666;margin:8px 0}
.sbp-chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #eee;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700;margin:6px 0 10px}
.sbp-cal{border-radius:18px;border:1px solid #eee;padding:12px;max-width: 400px;}
.sbp-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sbp-cal-month{font-weight:900;font-size:18px}
.sbp-nav{display: flex;align-items: center;border:0;background:#f2f2f2;border-radius:12px;width:36px;height:32px;font-size:18px;cursor:pointer}

.sbp-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:11px;color:#666;margin-bottom:6px}
.sbp-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.sbp-day{border:0;border-radius:12px;padding:10px 0;border:1px solid #eee;font-weight:800;cursor:pointer}
.sbp-day:hover{border-color:#c8c8c8}
.sbp-day-disabled{opacity:.25;cursor:not-allowed}
.sbp-day-empty{border:0;background:transparent}

.sbp-form{max-width:400px;margin-top:12px;display:flex;flex-direction:column;gap:8px}
.sbp-form label{font-size:12px;color:#666;font-weight:700}
.sbp-form input{border:1px solid #e8e8e8;border-radius:12px;padding:12px 12px;font-size:14px}
.sbp-sep{height:10px}
.sbp-alt{margin-top:8px;text-align:center}
.sbp-alt a{font-size:12px;color:#6d0f12;text-decoration:underline}
.sbp-error{margin-top:8px;background:#fff2f2;border:1px solid #ffd2d2;color:#9d1b1b;border-radius:12px;padding:10px;font-size:13px}
.sbp-error.sbp-info{background:#f5fff8;border-color:#bfe7cb;color:#1b6b34}
.sbp-loading{padding:14px;border:1px dashed #ddd;border-radius:14px;color:#666}
.sbp-welcome-msg{
  margin: 15px 10px;
  text-align: left;
  max-width: 300px;
}
.sbp-pro-avatar{
  width:32px;
  height:32px;
  border-radius:999px;
  object-fit:cover;
  vertical-align:middle;
}
@media (max-width:480px){
  .sbp-shell{max-width:100%}
  .sbp-card{border-radius:22px}
  #sbp-service-search{max-width:100%}
}

/* Dashboards (front) */
.sbp-dashboard{max-width:980px;margin:18px auto;padding:12px}
.sbp-table{width:100%;border-collapse:collapse}
.sbp-table th,.sbp-table td{border-bottom:1px solid #eee;padding:10px;text-align:left}
.sbp-kpis{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}
.sbp-kpi{border:1px solid #eee;border-radius:14px;padding:12px;min-width:200px}
.sbp-kpi .k{font-size:12px;color:#777}
.sbp-kpi .v{font-size:22px;font-weight:900}


.sbp-pro{border:1px solid #eee;border-radius:16px;padding:12px;margin:10px 0}
.sbp-pro-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:2px;
	margin-bottom:10px;
	flex-direction: column;
}
.sbp-pro-name{
	font-weight:900;
	display: contents;
}
.sbp-pro-meta{font-size:12px;color:#666}
.sbp-slot-grid{display:flex;gap:10px;flex-wrap:wrap}
.sbp-slot{width:20%;border:1px solid #eee;border-radius:10px;padding:10px 14px;font-weight:900;cursor:pointer}
.sbp-slot.is-selected{background:#6d0f12;color:#fff;border-color:#6d0f12}


/* v0.1.2 layout fixes (Elementor / spacing / slider) */
.sbp-hero{z-index:1}
.sbp-card{position:relative;z-index:2;margin-top:-26px}
.sbp-card-head{background:#fff}
.sbp-card-title{line-height:1.25}
.sbp-card{overflow:hidden}

/* Slider: prevent flex shrink causing blank panels */
.sbp-slider{display:flex;flex-wrap:nowrap;will-change:transform}
.sbp-step{flex:0 0 100%;width:100%}

/* Prevent the wizard from being constrained by theme styles */
.sbp-shell, .sbp-card{box-sizing:border-box}
.sbp-step *{box-sizing:border-box}

/* Ensure content isn't clipped on shorter viewports */
.sbp-step{min-height:420px}
@media (max-width:480px){
  .sbp-step{min-height:480px}
}


/* v0.1.3 UX fixes: keep CTA visible and avoid clipped content */
.sbp-card{overflow:hidden}
.sbp-step{display:flex;flex-direction:column;min-height:520px}
.sbp-list-back,.sbp-cal,.sbp-slots-wrap,.sbp-otp-wrap{flex:1;min-height:1px}
.sbp-bottom{margin-top:auto;position:sticky;bottom:0;background:#fff;padding:12px 0 2px;z-index:5;max-width:400px;}
#sbp-to-dates,#sbp-to-otp,#sbp-send-otp,#sbp-verify{display:inline-flex !important;align-items:center;justify-content:center;gap:8px}
#sbp-to-dates{min-width:190px}
.sbp-bottom .sbp-selected{font-size:12px;color:#666}
/* ensure the header doesn't overlap content */
.sbp-card-head{position:sticky;top:0;background:#fff;z-index:6}


/* v0.1.4 button visibility + prtweb-like bottom bar */

.sbp-step{display:flex;flex-direction:column}
.sbp-list-back, .sbp-cal, .sbp-slots, .sbp-otp{flex:1 1 auto;min-height:0}
.sbp-bottom{
  margin-top:auto;
  position:sticky;
  bottom:0;
  background:#fff;
  padding:14px 14px 16px;
  border-top:1px solid #f0f0f0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  z-index:10;
}
#sbp-to-dates,#sbp-to-otp,#sbp-send-otp,#sbp-verify{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  width:100%;
  min-height:44px;
  justify-content:center;
}
.sbp-selected{font-size:12px;color:#555}
.sbp-btn{border-radius:999px}


/* v0.1.5 button/footer alignment fixes */

/* Footer bar inside steps */
.sbp-footer,
.sbp-step-footer,
.sbp-bottom-bar{
  position: sticky !important;
  bottom: 0 !important;
  left: 0; right: 0;
  width: 100%;
  background: #fff !important;
  padding: 14px 16px !important;
  border-top: 1px solid rgba(0,0,0,.06) !important;
  z-index: 10 !important;
}

/* Primary CTA button */
.sbp-footer .sbp-btn-primary,
.sbp-step-footer .sbp-btn-primary,
.sbp-bottom-bar .sbp-btn-primary,
.sbp-footer button,
.sbp-step-footer button,
.sbp-bottom-bar button{
  width: 100% !important;
  max-width: 520px;
  margin: 0 auto !important;
  min-height: 52px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: .2px;
}

/* Ensure button label is visible */
.sbp-footer .sbp-btn-primary *,
.sbp-step-footer .sbp-btn-primary *,
.sbp-bottom-bar .sbp-btn-primary *{
  visibility: visible !important;
  opacity: 1 !important;
}

/* Prevent card from adding huge empty area pushing footer */
.sbp-card-body{padding-bottom:0 !important;}
.sbp-step{padding-bottom:0 !important;}

.sbp-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1e7e34;
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 9999;
}

.sbp-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#sbp-alt-pay{
  display: none;
}

/* v0.1.28: scroll vertical inside each booking step (keeps sticky bottom actions) */
.sbp-card{max-height:calc(100vh - 16px);}
.sbp-step{
  /* allow internal scroll when content exceeds the viewport */
  height:calc(100vh - 320px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
@media (max-width:480px){
  .sbp-step{height:calc(100vh - 300px);}
  /*Desativando botões flutuantes no mobile*/
  .sticky-buttons.mobile-rule{
  display:none; 
}
}


@media (max-width: 420px) {
  .sbp-slider *,
  .sbp-slider *::before,
  .sbp-slider *::after {
    max-width: 95vw !important;
  }
}


/* Service observation (accordion) */
.sbp-item-obs{margin-top:6px;font-size:12px;line-height:1.3;opacity:.9;}
.sbp-item-obs .sbp-obs-text{
  display:inline-block;
  /*max-height:1.3em;*/
  overflow:hidden;
  vertical-align:top;
}
.sbp-item-obs.open .sbp-obs-text{max-height:none;display:block;margin-bottom:4px;}
.sbp-item-obs a{font-size:12px;}


/* SBP: link simples de voltar (ajuste livre no seu CSS) */
.sbp-backlink{display:block !important;text-align:center;margin:10px 0 0;color:#6b6b6b;text-decoration:none;font-weight:700}
.sbp-backlink:hover{opacity:.85}


/* FOUC prevention: hide UI until JS marks it ready */
.sbp-shell{visibility:hidden;}
.sbp-shell.sbp-ready{visibility:visible;}

.sbp-loader{font-weight:700}



/* Loader overlay */
.sbp-loading-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;z-index:9999}
.sbp-spinner{width:34px;height:34px;border-radius:999px;border:3px solid rgba(0,0,0,.12);border-top-color:rgba(0,0,0,.45);animation:sbp-spin .8s linear infinite}
@keyframes sbp-spin{to{transform:rotate(360deg)}}
.sbp-loading-text{margin-top:10px;font-weight:700;color:#777;font-size:13px}
.sbp-shell{position:relative}

/* Stack footer button + link */
.sbp-bottom-stack{flex-direction:column !important;align-items:stretch !important;gap:8px !important}
.sbp-bottom-stack .sbp-btn{width:100%}
.sbp-bottom-stack .sbp-backlink{margin:0 !important}
.sbp-backlink{display:block !important;text-align:center !important}


/* Service note accordion */
.sbp-note{display:inline}
.sbp-note-text{display:inline}
.sbp-note-open .sbp-note-text{display:inline}
a[data-sbp-toggle="more"]{font-weight:700;text-decoration:underline;cursor:pointer}

/* Ensure back link is visible */
.sbp-backlink{display:block !important;line-height:1.2}


/* "ver mais" modal */
#sbp-more-modal{position:fixed;inset:0;z-index:100000;display:none}
#sbp-more-modal.sbp-more-open{display:block}
#sbp-more-modal .sbp-more-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
#sbp-more-modal .sbp-more-dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,92vw);max-height:min(70vh,520px);background:#fff;border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.25);display:flex;flex-direction:column;overflow:hidden}
#sbp-more-modal .sbp-more-head{padding:16px 44px 10px 16px;border-bottom:1px solid rgba(0,0,0,.06)}
#sbp-more-modal .sbp-more-title{font-weight:800;font-size:15px}
#sbp-more-modal .sbp-more-body{padding:14px 16px 18px 16px;overflow:auto;line-height:1.4;font-size:14px;color:#333}
#sbp-more-modal .sbp-more-close{position:absolute;right:10px;top:10px;width:34px;height:34px;border-radius:999px;border:none;background:rgba(0,0,0,.06);font-size:20px;line-height:34px;cursor:pointer}
#sbp-more-modal .sbp-more-close:hover{background:rgba(0,0,0,.10)}
html.sbp-more-lock, html.sbp-more-lock body{overflow:hidden}

/* Link appearance */
a[data-sbp-toggle="more"]{font-weight:700;text-decoration:underline;cursor:pointer}


/* Observações do serviço (ver mais) */
.sbp-obs-details { display: inline-block; margin-left: 6px; }
.sbp-obs-details summary { list-style: none; cursor: pointer; display: inline; }
.sbp-obs-details summary::-webkit-details-marker { display: none; }
.sbp-obs-summary { color: #6b7280; text-decoration: underline; font-size: 12px; }
.sbp-obs-full { margin-top: 8px; color: #6b7280; font-size: 12px; line-height: 1.4; }

/* back link */
.sbp-back-link{display:inline-block;margin:12px auto 0;font-size:13px;color:#777;text-decoration:underline;cursor:pointer;}
.sbp-back-link:hover{opacity:.9;}
.sbp-bottom-right{text-align:center;}

/* obs accordion */
.sbp-item-obs{margin-top:6px;font-size:12px;color:#666;}
.sbp-obs-more{
  font-size:12px;
  text-decoration:underline;
  display: inline-block;
}
.sbp-obs-acc{margin-top:6px;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,0.04);line-height:1.35;}

#sbp-slots img.sbp-pro-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  
  /* Centraliza em relação a #sbp-slots (400px) ao invés de .sbp-pro-name */
  /*margin-left: calc((400px - 64px) / 2 - 12px);*/
  /* Explicação: (largura_container - largura_imagem) / 2 - padding_do_pro */
  /* = (400 - 64) / 2 - 12 = 168 - 12 = 156px */
}


/* Tentando tirar o zoom do iPhone */

input, textarea {
  font-size: 16px; /* Prevê zoom no mobile */
}

@media (min-width: 768px) {
  input, textarea {
    font-size: 1rem; /* Tamanho original no desktop */
  }
}