/* PaisaNow Phase 7 — UI/UX and responsive stabilization layer
   Additive only: keeps existing PHP/business logic intact while normalizing visual system,
   touch targets, responsive grids, accessibility affordances, and safe overflow behavior. */
:root{
  --pn7-bg:#f4f7fb;
  --pn7-surface:#ffffff;
  --pn7-surface-2:#f8fafc;
  --pn7-text:#101828;
  --pn7-muted:#667085;
  --pn7-line:#dfe5ef;
  --pn7-primary:#2563eb;
  --pn7-primary-2:#1d4ed8;
  --pn7-success:#0f9f6e;
  --pn7-warning:#b7791f;
  --pn7-danger:#d92d20;
  --pn7-radius-sm:10px;
  --pn7-radius:16px;
  --pn7-radius-lg:22px;
  --pn7-shadow:0 12px 32px rgba(16,24,40,.08);
  --pn7-shadow-soft:0 6px 18px rgba(16,24,40,.06);
  --pn7-header-h:72px;
  --pn7-mobile-nav-h:74px;
}
html{font-size:16px;text-size-adjust:100%;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--pn7-header-h) + 14px)}
body[data-page]{background:linear-gradient(180deg,#eef4ff 0,#f6f8fb 320px,var(--pn7-bg) 100%);color:var(--pn7-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body[data-page] *{box-sizing:border-box}
a,button,summary,[role=button],input,select,textarea{-webkit-tap-highlight-color:rgba(37,99,235,.14)}
button,input,select,textarea{font:inherit}
img,video,iframe,svg,canvas{max-width:100%;height:auto}
video,img{background:#f2f4f7}
[hidden]{display:none!important}
:focus-visible{outline:3px solid rgba(37,99,235,.38)!important;outline-offset:3px;border-radius:10px}
::selection{background:rgba(37,99,235,.18)}

/* Common cards, spacing, buttons */
.card,.post,.composer,.profile-card,.product-card,.wallet-card,.activity-card,.pn-card,.seller-card,.pn-p9-card,.page-card,.news-card,.blog-card,.job-card,.order-card,.invoice-card,.chat-panel,.conversation,.upload-panel,.control-form,.withdrawal-card{background:var(--pn7-surface);border:1px solid rgba(223,229,239,.95);border-radius:var(--pn7-radius-lg);box-shadow:var(--pn7-shadow-soft);overflow-wrap:anywhere}
.content>.card,.feed>.card,.content>.post,.content>.composer{box-shadow:var(--pn7-shadow);border-color:rgba(223,229,239,.9)}
.card>h1:first-child,.card>h2:first-child,.card>h3:first-child,.page-heading h1,.admin-top h1{letter-spacing:-.03em}
.button,.btn,.pn-btn,.create-button,.primary-button,.danger-button,.admin-header-op,button[type=submit],input[type=submit]{min-height:44px;border-radius:12px;touch-action:manipulation;transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease}
.button:hover,.btn:hover,.pn-btn:hover,.create-button:hover,.primary-button:hover,button[type=submit]:hover{transform:translateY(-1px)}
.button:active,.btn:active,.pn-btn:active,.create-button:active,.primary-button:active,button[type=submit]:active{transform:translateY(0)}
.button.secondary,.btn.secondary,.pn-btn.secondary{background:#eef4ff;color:var(--pn7-primary);border:1px solid #c7d7fe;box-shadow:none}
input,select,textarea{border-radius:12px;border:1px solid var(--pn7-line);background:#fff;color:var(--pn7-text)}
input:focus,select:focus,textarea:focus{border-color:#93b4ff;box-shadow:0 0 0 4px rgba(37,99,235,.12);outline:none}
textarea{line-height:1.55;resize:vertical}
label{line-height:1.35}
small,.muted,.meta,.help-text{color:var(--pn7-muted)}

/* Loader, flash, empty states */
.page-loader,#pn-loader,.pn-admin-loader{display:grid;place-items:center;text-align:center}
#pn-loader{z-index:99999;background:rgba(246,248,251,.96);backdrop-filter:blur(12px)}
#pn-loader .pn-loader-box,.pn-admin-loader-card{margin:auto;max-width:min(92vw,380px);border-radius:24px;background:#fff;border:1px solid var(--pn7-line);box-shadow:0 28px 70px rgba(16,24,40,.16)}
.flash{left:auto;right:max(16px,env(safe-area-inset-right));top:calc(var(--pn7-header-h) + 12px);z-index:9000;max-width:min(420px,calc(100vw - 28px));line-height:1.45}
.empty-state,.pn-empty,.no-results,.zero-state{display:grid;place-items:center;gap:10px;min-height:160px;padding:34px 18px;text-align:center;color:var(--pn7-muted);border:1px dashed #cbd5e1;border-radius:18px;background:linear-gradient(180deg,#fff,#f8fafc)}
.empty-state i,.pn-empty i,.zero-state i{font-size:30px;color:var(--pn7-primary)}
.status{white-space:nowrap}
.status.success,.status.active,.status.approved,.status.paid,.status.verified{color:#067647;background:#ecfdf3}
.status.pending,.status.processing{color:#93370d;background:#fffaeb}
.status.error,.status.failed,.status.blocked,.status.rejected{color:#b42318;background:#fef3f2}

/* Public/user shell */
.topbar.user-header{height:auto;min-height:var(--pn7-header-h);padding:10px clamp(12px,3vw,42px);gap:clamp(10px,2vw,26px);box-shadow:0 10px 32px rgba(16,24,40,.06);border-bottom:1px solid rgba(223,229,239,.9)}
.topbar .brand{min-width:0;flex:0 1 auto}.topbar .brand span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.site-logo{width:auto;max-width:148px;max-height:44px;object-fit:contain;background:transparent}
.desktop-primary-nav{display:flex;align-items:center;gap:6px;min-width:0}.desktop-primary-nav a{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 12px;border-radius:14px;color:#475467;font-weight:700}.desktop-primary-nav a.active,.desktop-primary-nav a:hover{background:#eef4ff;color:var(--pn7-primary)}
.global-search{min-width:210px}.global-search input{height:44px;border-radius:999px;background:#f8fafc}
.top-actions{gap:8px}.top-actions summary,.top-actions>a,.mobile-header-shortcut{min-width:42px;min-height:42px;display:inline-grid;place-items:center;border-radius:14px;background:#f8fafc;border:1px solid transparent;color:#344054}.top-actions summary:hover,.top-actions>a:hover,.mobile-header-shortcut:hover{background:#eef4ff;border-color:#d7e3ff;color:var(--pn7-primary)}
.header-popover-panel,.profile-dropdown-panel,.header-tools-panel,.header-language-panel{border:1px solid var(--pn7-line);border-radius:18px;box-shadow:0 22px 60px rgba(16,24,40,.14);overflow:hidden}
.header-popover-item{gap:10px;min-height:58px}.header-popover-copy{min-width:0}.header-popover-copy strong,.header-popover-copy span{display:block;overflow:hidden;text-overflow:ellipsis}.header-popover-copy strong{white-space:nowrap}.header-popover-copy span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.profile-dropdown-compact .profile-dropdown-panel{width:min(320px,calc(100vw - 20px));max-height:min(78vh,680px);overflow:auto}.profile-dropdown-panel a,.profile-dropdown-panel label{min-height:42px;padding:10px 12px;border-radius:12px}
.mobile-header-actions{display:none}

.app-layout{width:min(100% - 28px,1460px);grid-template-columns:minmax(190px,230px) minmax(0,760px) minmax(260px,320px);gap:clamp(14px,2vw,24px);align-items:start}
.left-sidebar,.right-sidebar{top:calc(var(--pn7-header-h) + 20px)}
.left-sidebar nav a{min-height:44px;border-radius:14px;line-height:1.2}.left-sidebar nav a i{display:grid;place-items:center;width:24px;height:24px;flex:0 0 24px}.left-sidebar nav{max-height:calc(100vh - 160px);overflow:auto;scrollbar-width:none}.left-sidebar nav::-webkit-scrollbar{display:none}
.content{gap:18px;min-width:0}.feed{display:grid;gap:18px;min-width:0}.right-sidebar{gap:16px;min-width:0}.right-sidebar .card{padding:18px}
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.page-heading h1{margin:0;font-size:clamp(24px,4vw,38px)}

/* Composer/post/content quality */
.composer{padding:16px}.composer-head{align-items:center}.composer-head button{min-height:46px;white-space:normal;text-align:left}.composer-actions{gap:8px}.composer-actions button,.composer-actions a{min-height:40px;border-radius:12px}
.post{overflow:hidden}.post-header,.post-actions,.comment-row,.notification-item,.chat-list a,.pn-list-item{display:flex;align-items:center;gap:10px;min-width:0}.post-header>*:not(.avatar),.comment-row>*:not(.avatar),.notification-item>*:not(.avatar){min-width:0}.post-media,.pn-post-media,.modal-product-image,.message-image{display:block;width:100%;border-radius:16px;object-fit:cover;background:#eef2f7}.post-actions{flex-wrap:wrap;border-top:1px solid #eef2f7}.post-actions button,.post-actions a{min-height:40px;border-radius:12px;flex:1 1 120px}
.avatar,.mini-avatar,.story-ring{overflow:hidden;background:#e6efff}.avatar img,.mini-avatar img,.story-ring img{width:100%;height:100%;object-fit:cover;background:transparent}
.stories{scrollbar-width:none;scroll-snap-type:x proximity}.stories::-webkit-scrollbar{display:none}.story{scroll-snap-align:start}

/* Marketplace, seller, profile, pages */
.product-grid,.marketplace-grid,.seller-products,.page-grid,.groups-grid,.jobs-grid,.blog-grid,.news-grid,.profile-tools,.analytics-grid,.mini-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}
.product-card,.marketplace-card,.seller-product-card,.page-card,.group-card,.job-card,.blog-card,.news-card{min-width:0;overflow:hidden}.product-card img,.marketplace-card img,.seller-product-card img,.page-card img{aspect-ratio:4/3;object-fit:cover;width:100%}
.product-card .button,.marketplace-card .button,.seller-product-card .button{width:100%;margin-top:8px}.product-detail,.seller-center,.seller-settings,.profile-form,.wallet-grid,.orders-grid{min-width:0;max-width:100%}
.pn-p9-avatar,.pn-profile-avatar,.pn-avatar-img-v5{object-fit:cover;background:#eef2f7}.pn-p9-hero,.profile-cover,.page-cover{overflow:hidden;border-radius:22px}.pn-p9-actions,.profile-actions,.page-actions,.seller-actions{display:flex;gap:10px;flex-wrap:wrap}.pn-p9-actions>* , .profile-actions>* , .page-actions>* , .seller-actions>*{flex:1 1 150px;justify-content:center}

/* Forms */
.form-grid,.onboarding-grid,.profile-form form,.control-form form,.settings-grid,.seller-form-grid,.checkout-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-grid .full,.profile-form .full,.control-form .full,.seller-form-grid .full,.checkout-grid .full{grid-column:1/-1}.form-actions,.modal-actions,.checkout-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}.form-actions>* , .modal-actions>* , .checkout-actions>*{min-width:120px}
.field-error,.error-text{color:var(--pn7-danger);font-size:13px}.field-success,.success-text{color:var(--pn7-success);font-size:13px}.help-text{font-size:13px;line-height:1.45}

/* Tables */
.table-scroll,.pn-responsive-table{width:100%;max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:18px;border:1px solid var(--pn7-line);background:#fff}.pn-responsive-table>table,.table-scroll>table{border:0}table{min-width:680px}th{position:sticky;top:0;z-index:1;background:#f8fafc}th,td{line-height:1.35}td .inline-form,.inline-form{flex-wrap:wrap}

/* Chat and reels layout guardrails */
body[data-page="chat"] .app-layout,body[data-page="reels"] .app-layout{width:100%;max-width:100%;margin-top:0}.chat-shell,.chat-layout,.pn-chat-shell{min-height:calc(100dvh - var(--pn7-header-h));overflow:hidden}.conversation,.chat-panel{min-height:0}.message-composer,.chat-composer{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--pn7-line);padding-bottom:max(10px,env(safe-area-inset-bottom))}.message-bubble,.chat-bubble{max-width:min(78%,680px);overflow-wrap:anywhere}.reels-shell,.reels-viewer{min-height:calc(100dvh - var(--pn7-header-h));background:#050816}.reels-shell video,.reels-viewer video{max-height:100dvh;object-fit:contain;background:#000}

/* Admin */
.admin-body{background:linear-gradient(180deg,#eef4ff 0,#f7f9fc 280px,#f4f7fb 100%);color:var(--pn7-text)}
.admin-sidebar{width:260px;border-right:1px solid rgba(255,255,255,.08);box-shadow:12px 0 34px rgba(16,24,40,.08)}.admin-body{padding-left:260px}.admin-sidebar nav{gap:8px}.admin-nav-group{border-radius:16px}.admin-nav-group summary{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;border-radius:12px;color:#dbeafe;font-weight:800;cursor:pointer}.admin-nav-group a{min-height:40px;border-radius:12px}.admin-brand-logo{width:40px;height:40px;border-radius:12px;object-fit:contain;background:#fff;padding:4px}.admin-main{padding:clamp(18px,3vw,34px);max-width:1680px;margin-inline:auto}.admin-top{gap:16px;align-items:flex-start;flex-wrap:wrap}.admin-top-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}.admin-header-ops{display:flex;gap:8px;flex-wrap:wrap}.admin-header-op{min-height:42px}.admin-panels{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:18px}.admin-live-content{min-width:0}.admin-table,.admin-card,.admin-widget,.admin-panel{border-radius:20px;box-shadow:var(--pn7-shadow-soft);border:1px solid var(--pn7-line);background:#fff;overflow:hidden}.admin-table .table-scroll{border-radius:0;border-left:0;border-right:0;border-bottom:0}.admin-mobile-menu{box-shadow:0 10px 24px rgba(16,24,40,.12)}

/* Motion and loading states */
.pn-ui-submitting{position:relative}.pn-ui-submitting [type=submit],.pn-ui-submitting button[type=submit]{opacity:.72}.pn-ui-submitting [type=submit]::after,.pn-ui-submitting button[type=submit]::after{content:none!important;display:none!important}@keyframes pn7spin{to{transform:rotate(360deg)}}
[data-pn-enhanced-table]{display:block}

@media(max-width:1180px){
  .app-layout{grid-template-columns:minmax(170px,210px) minmax(0,1fr);width:min(100% - 24px,1100px)}
  .right-sidebar{display:none}.desktop-primary-nav a span{display:none}.global-search{max-width:360px}
}
@media(max-width:900px){
  :root{--pn7-header-h:64px}
  body[data-page]{padding-bottom:calc(var(--pn7-mobile-nav-h) + env(safe-area-inset-bottom))}
  .topbar.user-header{position:relative;top:auto;z-index:600;min-height:64px;padding:8px 10px}.topbar .brand{font-size:18px}.site-logo{max-width:118px;max-height:38px}.desktop-primary-nav,.global-search{display:none!important}.mobile-header-actions{display:flex;gap:6px;margin-left:auto}.top-actions{margin-left:0}.top-actions>a:not(.mini-avatar),.top-actions summary{min-width:40px;min-height:40px}.top-actions .header-tools-dropdown,.top-actions .admin-header-link{display:none}.header-popover-panel,.profile-dropdown-panel,.header-tools-panel,.header-language-panel{position:fixed!important;left:10px!important;right:10px!important;top:70px!important;width:auto!important;max-width:none!important;max-height:calc(100dvh - 92px);overflow:auto}
  .app-layout{display:block;width:min(100% - 18px,760px);margin:14px auto calc(var(--pn7-mobile-nav-h) + 18px)}
  .left-sidebar,.right-sidebar{display:none!important}.content,.feed{gap:14px}.card,.post,.composer,.profile-card,.product-card,.wallet-card,.activity-card{border-radius:18px}.page-heading{padding-inline:2px}.flash{top:76px;left:12px;right:12px;max-width:none}
  .form-grid,.onboarding-grid,.profile-form form,.control-form form,.settings-grid,.seller-form-grid,.checkout-grid{grid-template-columns:1fr}.form-grid .full,.profile-form .full,.control-form .full,.seller-form-grid .full,.checkout-grid .full{grid-column:auto}.form-actions,.modal-actions,.checkout-actions{justify-content:stretch}.form-actions>* , .modal-actions>* , .checkout-actions>*{flex:1 1 100%}
  .product-grid,.marketplace-grid,.seller-products,.page-grid,.groups-grid,.jobs-grid,.blog-grid,.news-grid,.profile-tools,.analytics-grid,.mini-stat-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:12px}
  .post-actions button,.post-actions a{flex:1 1 42%;font-size:13px}.message-bubble,.chat-bubble{max-width:88%}
  .admin-body{padding:0 0 calc(var(--pn7-mobile-nav-h) + env(safe-area-inset-bottom));background:#f4f7fb}.admin-sidebar{display:none}.admin-main{padding:14px 10px;max-width:100vw}.admin-top{align-items:stretch}.admin-top-actions{justify-content:flex-start}.admin-header-ops{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.admin-header-op{width:100%;padding:8px}.admin-header-op span small{display:none}.admin-user p{display:none}.admin-mobile-menu{display:block;position:sticky;top:0;z-index:700;border-radius:0}.admin-bottom-nav{left:8px;right:8px;bottom:8px;border-radius:22px}.admin-panels{grid-template-columns:1fr}.admin-table{border-radius:16px}
}
@media(max-width:520px){
  body[data-page]{background:#f4f7fb}.topbar.user-header{gap:6px}.mobile-header-shortcut{min-width:38px;min-height:38px}.top-actions summary,.top-actions>a{min-width:38px;min-height:38px}.top-actions .message-link summary,.top-actions .notification-header-link summary{display:inline-grid}.profile-dropdown-compact summary{padding:0;background:transparent;border:0}.mini-avatar{width:38px;height:38px}.stories.card{margin-left:-9px;margin-right:-9px;width:calc(100% + 18px);border-radius:0;border-left:0;border-right:0}.composer{margin-left:-2px;margin-right:-2px}.composer-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}.composer-actions button,.composer-actions a{font-size:12px;padding-inline:8px}.product-grid,.marketplace-grid,.seller-products,.page-grid,.groups-grid,.jobs-grid,.blog-grid,.news-grid,.profile-tools,.analytics-grid,.mini-stat-grid{grid-template-columns:1fr}.pn-p9-actions>* , .profile-actions>* , .page-actions>* , .seller-actions>*{flex-basis:100%}.header-popover-panel,.profile-dropdown-panel,.header-tools-panel,.header-language-panel{left:8px!important;right:8px!important;top:64px!important}.table-scroll,.pn-responsive-table{border-radius:14px}th,td{padding:11px 12px}.admin-header-ops{grid-template-columns:1fr}.admin-top h1{font-size:24px}.flash{font-size:14px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}