/* Rapportech Publicidade - CSS (Frontend dentro do instagram-rapportech) */
.rapportech-publicidade { max-width: 1180px; margin: 24px auto; padding: 0 16px; background:#f8fafc; border-radius:18px; }
.rapportech-publicidade__header { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.rapportech-publicidade__header h2 { margin:0; font-size: 1.8rem; }

/* Botão Instagram com gradiente e ícone opcional como imagem de fundo */
.rp-btn { background:#0d6efd; color:#fff; border:none; border-radius:999px; padding:12px 20px; cursor:pointer; font-weight:600; line-height:1; }
.rp-btn[disabled] { opacity:.6; cursor:not-allowed; }
.rp-btn.rp-btn-publish.is-loading { position:relative; }
.rp-btn.rp-btn-publish.is-loading::after { content:""; width:16px; height:16px; border:2px solid rgba(255,255,255,.6); border-top-color:#fff; border-radius:50%; display:inline-block; vertical-align:middle; margin-left:8px; animation: rp-spin 1s linear infinite; }
@keyframes rp-spin { to { transform: rotate(360deg); } }

/* Grid responsivo com card herói */
.rp-grid{ display:grid; grid-template-columns: 1fr; gap:16px; }
@media (min-width: 768px){ .rp-grid{ grid-template-columns: 2fr 1fr; grid-auto-flow: dense; } }
@media (min-width: 1100px){ .rp-grid{ grid-template-columns: 2fr 1fr 1fr; } }

.rp-card{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.rp-card--hero{ grid-column: 1 / -1; }
@media (min-width: 1100px){ .rp-card--hero{ grid-column: 1 / span 2; } }
.rp-card__image{ position:relative; }
.rp-card__image img{ width:100%; height:auto; display:block; aspect-ratio: 16/9; object-fit: cover; }
.rp-badge{ position:absolute; top:10px; left:10px; background:#16a34a; color:#fff; font-size:.75rem; padding:4px 8px; border-radius:999px; }
.rp-badge--removed{ background:#b91c1c; }
.rp-card__content{ padding:14px; }
.rp-card__title{ margin:0 0 8px; font-size: clamp(1rem, 1.2vw + .8rem, 1.25rem); }
.rp-card--hero .rp-card__title{ font-size: clamp(1.2rem, 1.4vw + 1rem, 1.5rem); }
.rp-card__caption{ color:#4b5563; font-size:.95rem; line-height:1.5; margin: 0 0 12px; }

/* Hero overlay: título em "balão" e pílulas de data/categoria */
.rp-hero-overlay{ position:absolute; left:18px; right:auto; bottom:18px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; z-index:2; }
.rp-hero-bubble{ background:#fff; color:#111827; border-radius:16px; padding:12px 16px; box-shadow:0 8px 20px rgba(0,0,0,.12); max-width:min(88%, 720px); font-weight:600; font-size: clamp(1.05rem, 1.4vw + .9rem, 1.6rem); line-height:1.25; }
.rp-hero-pills{ display:flex; gap:8px; align-items:center; }
.rp-pill{ display:inline-flex; align-items:center; gap:6px; background:#111827; color:#fff; border-radius:999px; padding:6px 10px; font-size:.8rem; opacity:.92; }
.rp-pill--light{ background:#e5f0ff; color:#1b4b91; }
.rp-pill .rp-dot{ width:6px; height:6px; border-radius:50%; background:#fff; display:inline-block; }

/* Ajustes para visual suave em cards */
.rp-card{ border-radius:16px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.rp-card__content{ padding:16px; }
.rp-card__caption{ color:#374151; }
.rp-btn.rp-btn-publish{ margin-top:6px; }

/* Banner de conexão removido */

/* Menu/FAB existentes */
.rp-menu-publicidade-link{ display:inline-block; padding:8px 12px; border-radius:6px; text-decoration:none; color:#111827; background:#f3f4f6; }
.rp-menu-publicidade-link.is-active{ background:#0d6efd; color:#fff; }
.rp-menu-publicidade-item{ list-style:none; margin:6px 0; }
.rp-menu-publicidade-fallback{ margin: 16px 0; }

.rp-publicidade-fab{ position: fixed; bottom: 24px; left: 24px; right: auto; z-index: 9999; background: #10b981; color: #fff; border-radius: 999px; padding: 12px 18px; font-weight: 700; text-decoration: none; box-shadow: 0 10px 15px rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.05); display: inline-flex; align-items: center; gap: 8px; }
.rp-publicidade-fab:hover{ filter: brightness(0.95); }
@media (max-width: 480px){ .rp-publicidade-fab{ bottom: 12px; left: 12px; padding: 10px 14px; } }

.rp-notice{margin:12px 0;padding:10px 12px;border-radius:8px;background:#f5f7fa;color:#39414d;border:1px solid #e1e8f0;}
.rp-notice--info{background:#eef6ff;border-color:#cfe3ff;color:#1b4b91}
.rp-notice--success{background:#edfbf1;border-color:#c6f1d5;color:#1a7f37}
.rp-notice--error{background:#fff1f1;border-color:#ffd2d2;color:#b42318}

.rp-btn.is-disabled{opacity:.6;cursor:not-allowed}
.rp-btn.is-busy{position:relative}
.rp-btn.is-busy::after{content:"";position:absolute;right:10px;top:50%;width:14px;height:14px;margin-top:-7px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:rp-spin .6s linear infinite}
@keyframes rp-spin{to{transform:rotate(360deg)}}

/* Masonry responsivo estilo Pinterest */
.rp-grid--masonry{display:block!important;column-count:1;column-gap:16px}
@media (min-width:768px){.rp-grid--masonry{column-count:2}}
@media (min-width:1100px){.rp-grid--masonry{column-count:3}}
.rp-grid--masonry .rp-card{display:inline-block;width:100%;break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 16px}
.rp-grid--masonry .rp-card__image img{aspect-ratio:auto}
.rp-grid--masonry .rp-card--hero{grid-column:auto}

/* Spinner no aviso/notice enquanto ação em andamento */
.rp-notice.is-loading{position:relative;padding-left:36px}
.rp-notice.is-loading::before{content:"";position:absolute;left:10px;top:50%;width:16px;height:16px;margin-top:-8px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:rp-spin .6s linear infinite;opacity:.85}

/* Placeholder para carregamento via AJAX */
.rp-ajax-placeholder{display:flex;align-items:center;gap:8px;padding:12px;color:#6b7280}
.rp-ajax-placeholder .rp-spinner{width:18px;height:18px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:rp-spin .6s linear infinite}

/* Barra com conta do Instagram conectada */
.rp-ig-account-bar{display:flex;align-items:center;gap:8px;padding:10px 12px;margin:12px 0;background:#f6f7f9;border:1px solid #e3e6eb;border-radius:10px;color:#111827}
.rp-ig-account-bar .rp-ig-account-label{color:#6b7280}
.rp-ig-account-bar .rp-ig-account-user{font-weight:600;text-decoration:none;color:#0d6efd}
.rp-ig-account-bar .rp-ig-account-user:hover{text-decoration:underline}

/* Botão pequeno */
.rp-btn--small{padding:8px 12px;font-size:.9rem}
.rp-modal-overlay{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,.6);z-index:1000000}
.rp-modal{position:fixed;left:50%;top:12%;transform:translateX(-50%);max-width:560px;width:92%;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2);z-index:1000001;padding:20px}
.rp-modal__title{font-size:1.25rem;font-weight:700;margin-bottom:6px;color:#111827}
.rp-modal__desc{font-size:.95rem;color:#374151;margin-bottom:12px}
.rp-modal__form{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.rp-modal__form input{width:100%;padding:10px;border:1px solid #e5e7eb;border-radius:8px}
.rp-modal__actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
.rp-tabs{margin-top:12px}
.rp-tabs__nav{display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid #e5e7eb;margin-bottom:12px}
.rp-tabs__nav-btn{background:#f3f4f6;color:#111827;border:none;border-radius:999px;padding:8px 12px;font-weight:600;cursor:pointer}
.rp-tabs__nav-btn.is-active{background:#0d6efd;color:#fff}
.rp-tabs__panel{display:none}
.rp-tabs__panel.is-active{display:block}
.rp-tabs__panel#tab-tutorials{max-height:62vh;overflow-y:auto}
.rp-tutorial-images{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:10px}
@media (max-width:720px){.rp-tutorial-images{grid-template-columns:1fr}}
.rp-tutorial-images a{display:block}
.rp-tutorial-images img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid #e5e7eb}
.rp-tutorial-images a:hover{filter:brightness(.98)}
.rp-onb-overlay{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,.6);z-index:1000000}
.rp-onb-box{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);max-width:640px;width:92%;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2);z-index:1000001;padding:22px;text-align:center}
.rp-onb-box img{display:block;margin:0 auto 12px;max-width:280px;height:auto}
.rp-onb-box p{font-size:.95rem;color:#374151;margin:0}