/* Dark theme with orange accents */
:root{
  --bg:#0b0b0b;
  --panel:#0f0f0f;
  --text:#e9e7e1;
  --muted:#bdb8b0;
  --primary:#ff9000;
  --primary-dark:#e86a00;
}
/* Base backgrounds and text */
html, body, .theme-layout, section, .gap, .container-fluid, .row, .central-meta, .central-meta.item, .new-postbox, .loadMore, .post-meta, .sidebar .widget, footer, .bottombar, .side-panel {
  background-color: var(--bg) !important;
  color: var(--text) !important;
  background-image: none !important;
}

/* Panels/cards */
.central-meta, .widget, .new-postbox, .post-meta, .loadMore, .central-meta.item {
  background-color: var(--panel) !important;
  color: var(--text) !important;
  border: 0 !important;
}

/* Links, accents and buttons */
a, a:visited { color: var(--primary) !important; }
.btn-primary, .btn-primary:focus, .btn-primary:hover{
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

/* Inputs and textareas */
input, textarea, .post-comt-box textarea, .text-box textarea, .newpst-input textarea {
  background: #0b0b0b !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}

/* Images and media */
.linked-image img, .user-post img, .friend-info figure img {
  border-radius: 6px;
  border: 2px solid rgba(255,255,255,0.04);
}

.we-video-info .views i, .we-video-info .comment i, .we-video-info .like i, .we-video-info .dislike i{
  color: var(--muted) !important;
}

.social-media .menu .btn.trigger{ background: #111 !important; color: var(--text) !important; border-radius: 50%; padding: 8px; }
.social-media .menu .btn.btn-icon a i{ color: var(--primary) !important; }

/* Remove bright backgrounds inside system widgets */
.friend-info, .description, .post-meta, .detail { background: transparent !important; }

/* Card shadows subtle */
.central-meta, .widget { box-shadow: 0 2px 8px rgba(0,0,0,0.6) !important; }

/* Force body background on mobile */
@media (max-width:768px){
  html, body { background-color: var(--bg) !important; }
}

/* If any element uses a light background class, override it */
[class*="bg-"] { background-color: transparent !important; }

/* Ensure footer/text contrast */
footer, .bottombar { background-color: #090909 !important; }

/* Landing / Auth page specific overrides */
.land-featurearea {
  background: var(--bg) !important;
  color: var(--primary) !important;
}
.land-meta > h1, .land-meta > p { color: var(--text) !important; }
.friend-logo > span { color: var(--primary) !important; }
.friend-logo > span::before, .friend-logo > span::after {
  background: rgba(255,122,0,0.08) !important;
  border-color: rgba(255,255,255,0.02) !important;
}

.login-reg-bg { background: var(--bg) !important; }
.log-reg-area {
  background: var(--panel) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.7) !important;
  color: var(--text) !important;
}
.log-reg-area > h2 { color: var(--text) !important; }
.log-reg-area > p, .log-reg-area form .forgot-pwd, .log-reg-area .checkbox label { color: var(--muted) !important; }

/* Form inputs in auth area */
.log-reg-area input, .log-reg-area textarea, .log-reg-area select,
.log-reg-area .form-group input, .log-reg-area .form-group textarea {
  background: #111 !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
}

/* Buttons on auth pages */
.log-reg-area .mtr-btn, .log-reg-area .mtr-btn span { color: #fff !important; }

.mtr-btn.signup {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* Remove browser/stylesheet focus effects (blue underline/glow) */
input:focus, textarea:focus, select:focus, button:focus,
.log-reg-area input:focus, .log-reg-area textarea:focus, .log-reg-area select:focus {
  outline: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* Specific auth input underline fix (remove thin colored underline) */
.log-reg-area input[type="text"], .log-reg-area input[type="email"], .log-reg-area input[type="password"] {
  border: 1px solid rgba(255,255,255,0.04) !important;
  box-shadow: none !important;
}
.log-reg-area input[type="text"]:focus, .log-reg-area input[type="email"]:focus, .log-reg-area input[type="password"]:focus {
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* Primary action styling */
.log-reg-area .mtr-btn.signin { background: var(--primary) !important; border-color: var(--primary) !important; }
.log-reg-area .mtr-btn.signin:hover { background: var(--primary-dark) !important; }

/* Change input focus highlight to orange accent */
input:focus, textarea:focus, select:focus,
.log-reg-area input:focus, .log-reg-area textarea:focus, .log-reg-area select:focus,
.topbar .search input:focus {
  border-color: var(--primary) !important;
  -webkit-box-shadow: 0 0 0 3px rgba(255,122,0,0.12) !important;
  -moz-box-shadow: 0 0 0 3px rgba(255,122,0,0.12) !important;
  box-shadow: 0 0 0 3px rgba(255,122,0,0.12) !important;
  caret-color: var(--primary) !important;
}

/* Placeholder muted color on dark inputs */
input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.36) !important; }

/* Control label (floating labels) use orange on focus/valid/has-value */
.form-group input.form-file ~ .control-label,
.form-group input.has-value ~ .control-label,
.form-group input:focus ~ .control-label,
.form-group input:valid ~ .control-label,
.form-group select ~ .control-label,
.form-group textarea.form-file ~ .control-label,
.form-group textarea.has-value ~ .control-label,
.form-group textarea:focus ~ .control-label,
.form-group textarea:valid ~ .control-label {
  color: var(--primary) !important;
}

/* Material underline/indicator for focused inputs */
.form-group .mtrl-select::before { background: var(--primary) !important; }
.form-group input:focus ~ .mtrl-select::before,
.form-group select:focus ~ .mtrl-select::before,
.form-group textarea:focus ~ .mtrl-select::before { left: 0 !important; width: 100% !important; background: var(--primary) !important; }


/* Autofill (Chrome) — force dark background and text color */
/* Autofill (Chrome) — force dark background and text color (include hover/focus variants) */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus,
textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus,
select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus,
input::-webkit-autofill, textarea::-webkit-autofill, select::-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #0b0b0b inset !important;
  box-shadow: 0 0 0px 1000px #0b0b0b inset !important;
  -webkit-text-fill-color: var(--text) !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* Native controls: use orange accent instead of browser blue */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--primary) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Fallback for custom styled radios/checkboxes used in templates */
.form-radio .radio, .checkbox .check-box, .form-radio label, .checkbox label {
  color: var(--muted) !important;
}
.form-radio .radio{
  border: 2px solid rgba(255,255,255,0.06) !important;
  background: transparent !important;
}

.checkbox .check-box {
    border: 2px solid  !important;
    background: transparent !important;
}

.form-radio input:checked + .radio, .checkbox input:checked + .check-box {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}
.form-radio input:focus + .radio, .checkbox input:focus + .check-box {
  box-shadow: 0 0 0 4px rgba(255,122,0,0.12) !important;
}

/* Ensure no stray blue bottom-border or glow remains on inputs */
.form-group input, .form-group textarea, .log-reg-area input, .log-reg-area textarea {
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}


/* Topbar (header) overrides */
.topbar {
  background: var(--panel) !important;
  color: var(--text) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  box-shadow: none !important;
}
.topbar .logo a, .topbar .logo { color: var(--text) !important; }
.topbar .menu a, .topbar .top-area .setting-btn, .topbar .top-area .not-box a { color: var(--muted) !important; }
.topbar .menu a:hover, .topbar .top-area .setting-btn:hover { color: var(--primary) !important; }
.topbar .search input { background: #0b0b0b !important; color: var(--text) !important; border: 1px solid rgba(255,255,255,0.04) !important; }
.topbar .search input:focus { border-color: rgba(255,122,0,0.18) !important; box-shadow: none !important; }
.topbar .user-img img { border: 2px solid rgba(255,255,255,0.04) !important; }

/* Ensure boxed layout doesn't show white background behind topbar */
.theme-layout.boxed { background: transparent !important; box-shadow: none !important; }

/* Facebook-like post styles */
.new-postbox {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px;
  border-radius: 12px;
  /* Light post box */
  background: #ffffff !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}
.new-postbox figure { margin: 0; }
.new-postbox figure img { width:48px; height:48px; border-radius:50%; object-fit:cover; border:2px solid rgba(0,0,0,0.06); }
.newpst-input { flex:1; }
.newpst-input textarea {
  width:100%;
  min-height:56px;
  resize:none;
  padding:12px 14px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.06);
  background: #fafafa;
  color: #111;
  font-size:15px;
}
.newpst-input textarea::placeholder { color: rgba(255,255,255,0.34); }
.attachments ul { display:flex; gap:12px; align-items:center; margin:10px 0 0; padding:0; list-style:none; }
.attachments li { display:inline-flex; align-items:center; gap:6px; }
.attachments .fileContainer { display:inline-block; cursor:pointer; color:var(--muted); }
.attachments i.fa { color:var(--muted); font-size:18px; }
.attachments button[type="submit"]{ background:var(--primary); color:#fff; border:none; padding:10px 18px; border-radius:6px; cursor:pointer; }

/* Post card */
.central-meta.item, .user-post { background: var(--panel) !important; border-radius:12px; padding:14px; margin-bottom:16px; box-shadow: 0 6px 18px rgba(0,0,0,0.6) !important; border:1px solid rgba(255,255,255,0.02) !important; }
.user-post .friend-info { display:flex; gap:12px; align-items:flex-start; }
.user-post .friend-info figure img { width:56px; height:56px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,0.04); }
.user-post .friend-name { display:flex; flex-direction:column; }
.user-post .friend-name ins a{ color:var(--text); font-weight:700; font-size:15px; }
.user-post .friend-name span{ color:var(--muted); font-size:13px; }
.user-post .post-meta { margin-top:12px; }
.user-post .post-meta img, .user-post .post-meta video { max-width:100%; border-radius:8px; display:block; }
.user-post .description { margin-top:10px; color:var(--text); }

/* Actions row (likes/comments/share) */
.we-video-info ul{ display:flex; gap:12px; padding:0; list-style:none; margin:0; }
.we-video-info ul li span{ display:flex; align-items:center; gap:8px; color:var(--muted); cursor:pointer; }
.we-video-info ul li span i{ color:var(--muted); font-size:16px; }
.we-video-info ul li span:hover i, .we-video-info ul li span:hover ins{ color:var(--primary) !important; }
.we-video-info ul li span ins{ color:var(--muted); font-weight:700; }

/* Comment box */
.post-comt-box textarea{ width:100%; padding:10px; border-radius:8px; background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.03); color:var(--text); }
.we-comet .comet-avatar img{ width:40px; height:40px; border-radius:50%; }

/* Small button variants */
.btn-primary, .btn { border-radius:6px; }

/* Post form - improved layout and controls */
#post-form { display:flex; flex-direction:column; gap:10px; }
#post-form textarea, .newpst-input textarea {
  width:100% !important;
  min-height:82px !important;
  padding:14px 16px !important;
  border-radius:10px !important;
  border:1px solid rgba(0,0,0,0.06) !important;
  background: #fafafa !important;
  color: #111 !important;
  font-size:15px !important;
  line-height:1.4 !important;
  resize:vertical !important;
}

/* Improved textarea visuals: larger, smoother focus and auto-expand */
#post-form textarea, .newpst-input textarea {
  min-height:120px !important;
  padding:18px 20px !important;
  font-size:16px !important;
  border-radius:12px !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
#post-form textarea:focus, .newpst-input textarea:focus{
  border-color: var(--primary) !important;
  -webkit-box-shadow: 0 6px 20px rgba(232,106,0,0.12) !important;
  box-shadow: 0 6px 20px rgba(232,106,0,0.12) !important;
  background: rgba(255,255,255,0.02) !important;
}
#post-form textarea::placeholder, .newpst-input textarea::placeholder { color: rgba(0,0,0,0.36) !important; }

/* make textarea grow with content (progressive) */
#post-form textarea[rows], .newpst-input textarea[rows] { overflow:auto; }

/* reduce vertical gap around attachments when textarea is tall */
.newpst-input { display:flex; flex-direction:column; gap:8px; }

/* ensure submit button vertically aligned center on narrow heights */
.attachments ul li:last-child { align-self:center; }

.attachments { margin-top:6px; }
.attachments ul { display:flex; gap:10px; align-items:center; padding:0; margin:0; list-style:none; }
.attachments ul li { display:inline-flex; align-items:center; }
.attachments .fileContainer { position:relative; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:10px; background:#f3f3f3; border:1px solid rgba(0,0,0,0.06); color:#333; cursor:pointer; }
.attachments .fileContainer input[type="file"] { position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.attachments .fileContainer:hover { border-color: var(--primary) !important; color: var(--primary) !important; box-shadow: 0 6px 18px rgba(232,106,0,0.08); }
.attachments i.fa { font-size:18px; color:#333; }

/* push the submit button to the right */
.attachments ul li:last-child { margin-left:auto; }
.attachments button[type="submit"]{ background:var(--primary) !important; color:#fff !important; border:none !important; padding:10px 18px !important; border-radius:8px !important; cursor:pointer; }

/* Preview thumbnails */
#image-preview img, #video-preview video, #video-preview video{ max-width:180px; max-height:140px; border-radius:8px; border:1px solid rgba(0,0,0,0.06); display:block; }
#image-preview, #video-preview { margin-left:6px; }

/* make attachments wrap on small screens */
@media (max-width:768px){
  .attachments ul { flex-wrap:wrap; }
  .attachments ul li:last-child { margin-left:0; }
  #post-form textarea { min-height:70px !important; }
}



/* Force post text above media and make media sit below (no floating) */
.user-post .description { order: 0; width: 100%; margin-bottom: 10px; }
.user-post .post-meta { order: 1; width: 100%; clear: both; }
.user-post .post-meta .linked-image { float: none !important; display: block !important; width: 100% !important; margin: 8px 0 !important; }
.user-post .post-meta .linked-image a, .user-post .post-meta .linked-image img { display: block !important; width: 100% !important; height: auto !important; max-width: 100% !important; }
.user-post .post-meta video, .user-post .post-meta audio { display: block !important; width: 100% !important; max-width: 100% !important; margin: 8px 0 !important; }
.user-post .post-meta .we-video-info { margin-top: 8px; }

/* Ensure the friend-info flex layout: avatar + name on first row, description & media full-width below */
.user-post .friend-info { flex-direction: row; flex-wrap: wrap; }
.user-post .friend-info > figure { flex: 0 0 56px; }
.user-post .friend-info > .friend-name { flex: 1 1 auto; order: 0; }
.user-post .friend-info > .description { order: 1; flex: 1 1 100%; width: 100%; }
.user-post .friend-info > .post-meta { order: 2; flex: 1 1 100%; width: 100%; }

/* Make username block left-aligned and timestamp smaller */
.user-post .friend-name { text-align: left !important; }
.user-post .friend-info > .friend-name { align-self: flex-start !important; }
.user-post .friend-name span { font-size: 12px !important; color: var(--muted) !important; margin-top: 4px !important; }

/* Reduce any float rules coming from legacy CSS */
.linked-image.align-left, .linked-image.align-right { float: none !important; }

/* Center post text and media horizontally, constrain media width */
.user-post .description { text-align: center !important; width: 100% !important; order: 0 !important; margin: 8px 0 12px !important; }
.user-post .post-meta { order: 1 !important; display: block !important; text-align: center !important; }
.user-post .post-meta .linked-image { display: block !important; margin: 0 auto 12px !important; float: none !important; max-width: 480px !important; width: 100% !important; }
.user-post .post-meta .linked-image img, .user-post .post-meta video, .user-post .post-meta audio { margin: 0 auto !important; display: block !important; width: 100% !important; height: auto !important; max-width: 100% !important; max-height: 360px !important; }

/* Slightly smaller media for tighter feed presentation */
.user-post .post-meta .linked-image img { border-radius: 8px !important; }
.user-post .post-meta video { border-radius: 8px !important; background: #000; }


#shoppingbag .user-info {
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
  .user-post .post-meta .linked-image { width: 100% !important; max-width: 100% !important; }
  .user-post .post-meta { padding-left: 0 !important; padding-right: 0 !important; }
}