:root{
  --ig-gradient: linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  --ig-blue: #0095f6;
  --ig-border: #dbdbdb;
  --ig-bg: #fafafa;
}
* { -webkit-tap-highlight-color: transparent; }
body { background: var(--ig-bg); font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; color:#262626; }

.brand-logo{ width:60px; height:60px; border-radius:50%; background: var(--ig-gradient); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.5rem; }

.navbar { background:#fff!important; border-bottom:1px solid var(--ig-border); }
.navbar-brand { font-family:'Billabong','Grand Hotel',cursive,sans-serif; font-size:1.6rem; font-weight:bold;
  background: var(--ig-gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

.nav-icon { color:#262626; font-size:1.4rem; padding:6px 10px; border-radius:8px; transition:.15s; }
.nav-icon:hover { background:#f0f2f5; }

.avatar-circle-sm,.avatar-circle,.avatar-circle-lg,.avatar-circle-xl{
  border-radius:50%; background: var(--ig-gradient); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:600; flex-shrink:0;
}
.avatar-circle-sm{width:32px;height:32px;font-size:.8rem;}
.avatar-circle{width:42px;height:42px;font-size:.95rem;}
.avatar-circle-lg{width:80px;height:80px;font-size:1.8rem;}
.avatar-circle-xl{width:150px;height:150px;font-size:3rem;}

.avatar-ring{ padding:3px; background: var(--ig-gradient); border-radius:50%; display:inline-block; }
.avatar-ring .avatar-circle{ border:3px solid #fff; }
.avatar-ring .avatar-circle-xl{ border:3px solid #fff; }

.post-card { background:#fff; border:1px solid var(--ig-border); border-radius:14px; margin-bottom:22px; overflow:hidden; }
.post-head { padding:12px 16px; display:flex; align-items:center; gap:12px; }
.post-head .username { font-weight:600; font-size:.94rem; }
.post-head .meta { font-size:.78rem; color:#8e8e8e; }
.post-image-wrap { background:#000; text-align:center; }
.post-image-wrap img { max-width:100%; max-height:620px; object-fit:contain; display:block; margin:auto; }
.post-image-wrap iframe { width:100%; height:400px; border:0; display:block; }
.post-body { padding:10px 16px 14px; }
.post-title { font-weight:700; font-size:1.05rem; margin:0 0 4px; }
.post-desc { font-size:.92rem; white-space:pre-line; color:#262626; }
.post-badges { padding:0 16px 10px; display:flex; flex-wrap:wrap; gap:6px; }
.badge-cat { background:#e7f3ff; color:var(--ig-blue); padding:3px 10px; border-radius:14px; font-size:.72rem; font-weight:600; }
.badge-city { background:#fff3cd; color:#856404; padding:3px 10px; border-radius:14px; font-size:.72rem; font-weight:600; }
.badge-price { background:#d1f2eb; color:#0c5460; padding:3px 10px; border-radius:14px; font-size:.75rem; font-weight:700; }

.post-actions { display:flex; padding:6px 8px; gap:4px; }
.post-actions button { flex:1; background:none; border:none; padding:8px; color:#262626; font-size:.88rem; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; }
.post-actions button:hover { background:#fafafa; }
.post-actions button.liked { color:#ed4956; font-weight:600; }
.post-actions button.saved { color:#262626; font-weight:600; }

.likes-line { padding:0 16px 6px; font-weight:600; font-size:.88rem; }
.caption-line { padding:0 16px 8px; font-size:.92rem; }
.caption-line .username { font-weight:600; margin-right:6px; }
.comments-preview { padding:0 16px 10px; font-size:.88rem; color:#8e8e8e; cursor:pointer; }
.comments-list { padding:0 16px; max-height:280px; overflow-y:auto; }
.comment-item { font-size:.9rem; padding:3px 0; }
.comment-item .username { font-weight:600; margin-right:6px; }

.comment-form { display:flex; gap:8px; padding:10px 16px; border-top:1px solid #efefef; }
.comment-form input { flex:1; background:#f0f2f5; border:none; padding:8px 16px; border-radius:20px; font-size:.88rem; outline:none; }
.comment-form button { background:none; border:none; color:var(--ig-blue); font-weight:600; font-size:.88rem; cursor:pointer; }

.sidebar { position:sticky; top:80px; }
.side-link { display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:8px; color:#262626; text-decoration:none; font-size:.92rem; }
.side-link:hover { background:#f0f2f5; color:#262626; }
.side-link.active { background:#f0f2f5; font-weight:600; }
.side-link i { width:22px; font-size:1.1rem; }

.category-pill { display:inline-block; padding:6px 14px; background:#f0f2f5; color:#262626; border-radius:22px; margin:4px 4px 4px 0; font-size:.78rem; text-decoration:none; font-weight:500; transition:.15s; }
.category-pill:hover { background: var(--ig-blue); color:#fff; }

.composer-bar { background:#fff; border:1px solid var(--ig-border); border-radius:14px; padding:12px 16px; display:flex; gap:12px; align-items:center; margin-bottom:20px; cursor:pointer; text-decoration:none; color:#262626; }
.composer-bar:hover { background:#fafafa; color:#262626; }
.composer-bar .fake { flex:1; background:#f0f2f5; padding:10px 16px; border-radius:22px; color:#8e8e8e; font-size:.9rem; }

.profile-header { background:#fff; border:1px solid var(--ig-border); border-radius:14px; padding:24px; margin-bottom:22px; }
.stat-num { font-weight:700; font-size:1.05rem; }
.stat-lbl { color:#8e8e8e; font-size:.85rem; }

.grid-post { position:relative; padding-bottom:100%; background:#eee; border-radius:8px; overflow:hidden; cursor:pointer; }
.grid-post img, .grid-post .ph { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.grid-post .ph { display:flex; align-items:center; justify-content:center; font-size:2rem; color:#fff; background:var(--ig-gradient); }
.grid-post:hover::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,.25); }

.input-icon { position:relative; }
.input-icon i { position:absolute; left:16px; top:50%; transform:translateY(-50%); color:#8e8e8e; z-index:2; }
.form-control { border-radius:10px; border:1px solid var(--ig-border); padding:10px 14px; font-size:.92rem; background:#fafafa; }
.form-control:focus { background:#fff; border-color:#a8a8a8; box-shadow:none; }
.form-control.ps-5 { padding-left:44px; }

.btn-primary { background:var(--ig-blue); border-color:var(--ig-blue); }
.btn-primary:hover { background:#1877f2; border-color:#1877f2; }

.empty-state { text-align:center; padding:60px 20px; background:#fff; border-radius:14px; border:1px solid var(--ig-border); }
.empty-state i { font-size:3.5rem; color:#ccc; margin-bottom:14px; }

/* ====== Email success page ====== */
.mail-success-icon {
  width:90px; height:90px; margin:auto;
  border-radius:50%; background: linear-gradient(135deg,#d1f2eb,#a8e6cf);
  display:flex; align-items:center; justify-content:center;
  animation: pulseMail 1.8s ease-in-out infinite;
}
.mail-success-icon i { font-size:2.8rem; color:#0c7a4b; }
@keyframes pulseMail {
  0%,100% { transform:scale(1); box-shadow:0 0 0 0 rgba(12,122,75,.35); }
  50%     { transform:scale(1.05); box-shadow:0 0 0 14px rgba(12,122,75,0); }
}

@media(max-width:991px){ .sidebar{position:static;} .post-card{border-radius:0;border-left:0;border-right:0;} }

/* ---------- My Posts card extras ---------- */
.post-status-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: #fff;
    backdrop-filter: blur(6px);
}
.post-status-badge.active { background: rgba(34,197,94,.9); }
.post-status-badge.closed { background: rgba(120,120,120,.85); }

.mypost-stats {
    display: flex;
    gap: 10px;
    font-size: .72rem;
    color: #8e8e8e;
    margin-top: 4px;
}
.mypost-stats span { display: inline-flex; align-items: center; gap: 3px; }

.mypost-actions {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f2f2f2;
}
.btn-mini {
    flex: 1;
    background: none;
    border: 1px solid #efefef;
    border-radius: 7px;
    padding: 5px 6px;
    font-size: .82rem;
    cursor: pointer;
    color: #65676b;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: .15s;
}
.btn-mini:hover { background: #f7f7f7; color: #262626; }
.btn-mini.edit:hover   { color: var(--ig-blue);  border-color: var(--ig-blue); }
.btn-mini.close:hover  { color: #eab308;         border-color: #eab308; }
.btn-mini.reopen:hover { color: #22c55e;         border-color: #22c55e; }
.btn-mini.delete:hover { color: #ef4444;         border-color: #ef4444; }

/* ---------- Notifications ---------- */
.notif-row { transition: background .15s; }
.notif-row:hover { background: #fafafa; }

.notif-type-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* ========== MOBILE BOTTOM NAV ========== */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e4e6eb;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 56px;
    z-index: 1000;
    box-shadow: 0 -2px 8px rgba(0,0,0,.04);
}
.mobile-bottom-nav a {
    flex: 1;
    text-align: center;
    color: #65676b;
    text-decoration: none;
    padding: 8px 0;
    font-size: 1.25rem;
    transition: color .15s;
}
.mobile-bottom-nav a:hover,
.mobile-bottom-nav a.active {
    color: #1877f2;
}
.mobile-bottom-nav .create-btn {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    background: #1877f2;
    color: #fff !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 3px 10px rgba(24,119,242,.4);
    margin: 0 6px;
}
.mobile-bottom-nav .create-btn:hover {
    background: #166fe5;
    transform: scale(1.05);
}

/* Push content up so bottom nav doesn't cover it */
@media (max-width: 767px) {
    body { padding-bottom: 62px; }
}




/* ============================================================
   PVB PAGINATION — rounded, blue-accented style
   ============================================================ */
.pvb-pagination-wrap{
    display:flex;
    justify-content:center;
    margin:24px 0;
}
.pvb-pagination{
    display:flex;
    align-items:center;
    gap:8px;
    list-style:none;
    padding:0;
    margin:0;
    flex-wrap:wrap;
    justify-content:center;
}

/* Base shape for both numbered & arrow buttons */
.pvb-page-btn,
.pvb-page-num{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:42px;
    height:42px;
    padding:0 12px;
    border:1px solid #e2e8f0;
    border-radius:12px;
    background:#fff;
    color:#3b82f6;
    font-weight:600;
    font-size:0.95rem;
    text-decoration:none;
    transition:all .18s ease;
    cursor:pointer;
    line-height:1;
}

.pvb-page-btn i{ font-size:0.85rem; }

/* Hover */
.pvb-page-btn:hover,
.pvb-page-num:hover{
    border-color:#3b82f6;
    background:#eff6ff;
    color:#2563eb;
    transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(59,130,246,.15);
}

/* Active / current page */
.pvb-page-num.active{
    background:#1d7afc;
    border-color:#1d7afc;
    color:#fff;
    box-shadow:0 4px 12px rgba(29,122,252,.35);
}
.pvb-page-num.active:hover{
    background:#1567e0;
    border-color:#1567e0;
    color:#fff;
}

/* Disabled arrows */
.pvb-page-btn.disabled{
    color:#cbd5e1;
    border-color:#eef2f7;
    background:#fff;
    pointer-events:none;
    cursor:not-allowed;
    box-shadow:none;
    transform:none;
}

/* Ellipsis */
.pvb-page-dots{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:30px;
    height:42px;
    color:#94a3b8;
    font-weight:700;
    user-select:none;
}

/* Jump-to-page group */
.pvb-jump{
    display:flex;
    align-items:center;
    gap:6px;
    margin-left:6px;
}
.pvb-jump input{
    width:64px;
    height:42px;
    padding:0 10px;
    border:1px solid #e2e8f0;
    border-radius:12px;
    text-align:center;
    font-weight:600;
    color:#1e293b;
    outline:none;
    background:#fff;
    transition:border-color .18s, box-shadow .18s;
}
.pvb-jump input:focus{
    border-color:#3b82f6;
    box-shadow:0 0 0 3px rgba(59,130,246,.15);
}
.pvb-go-btn{
    height:42px;
    padding:0 16px;
    border:1px solid #3b82f6;
    border-radius:12px;
    background:#fff;
    color:#3b82f6;
    font-weight:600;
    font-size:0.9rem;
    cursor:pointer;
    transition:all .18s ease;
}
.pvb-go-btn:hover{
    background:#3b82f6;
    color:#fff;
    box-shadow:0 4px 12px rgba(59,130,246,.3);
    transform:translateY(-1px);
}

/* Mobile tweaks */
@media (max-width: 576px){
    .pvb-page-btn,
    .pvb-page-num{ min-width:36px; height:36px; font-size:0.85rem; padding:0 8px; }
    .pvb-jump input{ width:52px; height:36px; }
    .pvb-go-btn{ height:36px; padding:0 12px; font-size:0.82rem; }
    .pvb-pagination{ gap:6px; }
}


.cat-count{
    display:inline-block;
    margin-left:auto;
    background:#e0e7ff;
    color:#3730a3;
    font-size:.7rem;
    font-weight:700;
    padding:2px 8px;
    border-radius:10px;
    line-height:1.4;
}
.category-pill{
    display:flex !important;
    align-items:center;
    gap:6px;
}