/* Public pages (index/plans/login/dashboard) using the same /portal theme */

.portal.public{
  grid-template-columns: 1fr;
}
.portal.public .sidebar{display:none;}
.portal.public .main{grid-column:1;}

/* Slightly narrower for storefront pages */
.portal.public .container{max-width: 1120px;}

/* Plans grid + pricing */
.grid.plans-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.plan-card .price{
  font-size: 34px;
  font-weight: 900;
  margin: 12px 0 8px;
  letter-spacing: .2px;
}
.plan-card ul{margin:10px 0 0; padding-left:18px; color: rgba(255,255,255,.80)}
.plan-card li{margin:6px 0}

/* Public hero buttons */
.big-buttons .btn{min-width: 170px;}

/* Centered auth card */
.auth-wrap{max-width: 460px; margin: 0 auto;}
.auth-wrap label{display:block; margin: 10px 0 6px; color: rgba(255,255,255,.70); font-weight: 800; font-size: 13px;}

/* Checkbox row (register) */
.auth-wrap .checkline{display:flex; gap:10px; align-items:center; margin-top:12px;}
.auth-wrap .checkline input[type="checkbox"]{width:16px; height:16px; margin:0;}
.auth-wrap .checkline label{display:inline; margin:0; font-weight:700; font-size:14px; color: rgba(255,255,255,.82);} 

/* Checkout */
.checkout-grid{display:grid; grid-template-columns: 1fr 1fr; gap:18px; align-items:start;}
.checkout-form label{display:block; margin: 10px 0 6px; color: rgba(255,255,255,.70); font-weight: 800; font-size: 13px;}
.checkout-form .input{display:block; width:100%; box-sizing:border-box;}
.checkout-form .two{display:grid; grid-template-columns: 1fr 1fr; gap:12px;}
/* Reuse the auth checkbox styling outside auth pages */
.checkline{display:flex; gap:10px; align-items:center;}
.checkline input[type="checkbox"]{width:16px; height:16px; margin:0;}
.checkline label{display:inline; margin:0; font-weight:700; font-size:14px; color: rgba(255,255,255,.82);} 

@media (max-width: 900px){
  .checkout-grid{grid-template-columns: 1fr;}
}
@media (max-width: 720px){
  .checkout-form .two{grid-template-columns: 1fr;}
}

@media (max-width: 1020px){
  .grid.plans-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 720px){
  .grid.plans-grid{grid-template-columns: 1fr;}
}

/* Utility */
.muted{color: rgba(255,255,255,.65);} 
.linkbox{
  white-space: pre-wrap;
  word-break: break-all;
  padding: 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
  color: rgba(255,255,255,.90);
  font-size: 12px;
  line-height: 1.35;
}

/* Profile icon uploader (My Account) */
/* Add padding so content doesn't touch the card border */
.profile-icon-card{
  padding:18px;
  overflow:hidden;
  margin-left:auto;
  margin-right:auto;
}
.profile-icon-card h3{margin:0 0 12px;}

.profile-icon-card .avatarrow{display:flex;gap:16px;align-items:center;}
.profile-icon-card .avatarhelp{line-height:1.35;}

/* Align the upload controls under the helper text (not under the avatar) */
.profile-icon-card .avatarform{
  margin-top:14px;
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  padding-left: 88px; /* 72px avatar + 16px gap */
}
.profile-icon-card .fileinput{width:100%; max-width:420px; min-width:260px;}
.profile-icon-card .avatarform .btn{height:44px; padding:0 16px;}

@media (max-width: 720px){
  .profile-icon-card{padding:16px;}
  .profile-icon-card .avatarrow{align-items:flex-start;}
  .profile-icon-card .avatarform{padding-left:0;}
}

/* Make file input match the theme (and keep the button aligned) */
input[type="file"].input{
  padding: 8px 12px;
  height: 44px;
  line-height: 1;
}
input[type="file"].input::file-selector-button{
  border: 0;
  border-radius: 12px;
  padding: 8px 12px;
  margin-right: 12px;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  cursor: pointer;
}
input[type="file"].input::-webkit-file-upload-button{
  border: 0;
  border-radius: 12px;
  padding: 8px 12px;
  margin-right: 12px;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  cursor: pointer;
}
input[type="file"].input::file-selector-button:hover,
input[type="file"].input::-webkit-file-upload-button:hover{background: rgba(255,255,255,.14);}

/* -------------------------------------------------------------------------- */
/* TMDB mix carousel (public storefront homepage) */

.tmdbmix-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 18px 10px;
}
.tmdbmix-head h2{margin:0;}
.tmdbmix-actions{display:flex;gap:8px;}

.tmdbmix-nav{
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.26);
  color: rgba(255,255,255,.90);
  font-weight: 900;
  font-size: 20px;
  line-height: 1;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:.12s ease;
}
.tmdbmix-nav:hover{transform: translateY(-1px); border-color: rgba(255,255,255,.22)}
.tmdbmix-nav:disabled{opacity:.45; cursor:not-allowed; transform:none;}

.tmdbmix-wrap{padding:0 10px 6px;}
.tmdb-carousel{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding:4px 6px 10px;
  scroll-snap-type: x mandatory;
  scroll-behavior:smooth;
  overscroll-behavior-x: contain;
}
.tmdb-carousel::-webkit-scrollbar{height:10px;}
.tmdb-carousel::-webkit-scrollbar-thumb{background: rgba(255,255,255,.12);border-radius:999px;}

.tmdb-carousel .tile{
  flex: 0 0 160px;
  scroll-snap-align:start;
}

/* Lightweight skeletons while loading */
.tmdb-skel{pointer-events:none;}
.tmdb-skel .thumb{
  width:100%;
  aspect-ratio: 2/3;
  border-radius: 0;
  background: rgba(255,255,255,.06);
}
.tmdb-skel .line{
  height:12px;
  border-radius:10px;
  background: rgba(255,255,255,.08);
}
.tmdb-skel .line.small{height:10px; margin-top:8px; opacity:.85; width:70%;}

@media (max-width: 720px){
  .tmdbmix-head{padding:16px 16px 10px;}
  .tmdb-carousel .tile{flex-basis: 140px;}
}

/* --- TMDB Trending posters only (no scrollbar, no captions, auto-rotate) --- */
.tmdb-carousel{
  overflow:hidden;
  scrollbar-width:none;       /* Firefox */
  -ms-overflow-style:none;    /* IE/Edge legacy */
}
.tmdb-carousel::-webkit-scrollbar{display:none !important; height:0 !important;}

.tmdb-carousel .tile{
  display:block;
  border-radius:18px;
  overflow:hidden;
}
.tmdb-carousel .thumb{
  width:100%;
  aspect-ratio: 2/3;
  object-fit:cover;
  display:block;
}
/* remove any leftover padding/caption space */
.tmdb-carousel .tpad{display:none !important;}