/* SCRIVI RECENSIONE */
.movie-search{
  position: relative;
  margin-top: 20px;
}

#movieSearchInput{
  width: 100%;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.1);
  background: #111;
  color: white;
  font-size: 16px;
}

#movieResults{
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.movie-result{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  cursor: pointer;
  transition: .2s;
}

.movie-result:hover{
  background: rgba(255,255,255,.08);
}

.movie-result img{
  width: 55px;
  border-radius: 10px;
}

.add-review-page{
  padding-top: 180px;
  padding-bottom: 120px;
}

#reviewText{
  width: 100%;
  min-height: 420px;

  padding: 28px;

  border-radius: 28px;

  border: 1px solid rgba(255,255,255,.08);

  background: rgba(255,255,255,.03);

  color: white;

  font-size: 17px;
  line-height: 1.9;

  resize: vertical;

  outline: none;

  margin-top: 30px;

  font-family: 'Inter', sans-serif;

  transition: .3s;
}

#reviewText:focus{

  border-color: #f3c94d;

  box-shadow:
    0 0 0 1px #f3c94d;

}

#publishReviewBtn{

  margin-top: 30px;

  padding: 16px 30px;

  border-radius: 999px;

  border: 1px solid #f3c94d;

  background: transparent;

  color: #f3c94d;

  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;

  text-transform: uppercase;

  cursor: pointer;

  transition: .25s;

}

/* =========================
   EDITORIAL BUTTON
========================= */

.editorial-btn{

  margin-top:14px;

  padding:16px 30px;

  border-radius:999px;

  border:1px solid
    var(--panea-yellow);

  background:
    var(--panea-yellow);

  color:#111;

  font-size:14px;

  font-weight:700;

  letter-spacing:.08em;

  text-transform:uppercase;

  cursor:pointer;

  transition:.25s ease;

}

.editorial-btn:hover{

  transform:
    translateY(-2px);

  box-shadow:
    0 12px 28px
    rgba(243,201,77,.22);

}

#publishReviewBtn:hover{

  background: #f3c94d;

  color: #111;

}

#reviewRating{

  margin-top: 24px;

  width: 220px;

  padding: 14px 18px;

  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.08);

  background: #111;

  color: white;

  outline: none;

}


/* =========================
   QUOTE + CURIOSITA
========================= */

.form-group{

  margin-top:28px;

}

.form-group label{

  display:block;

  margin-bottom:12px;

  color:var(--panea-yellow);

  font-size:.78rem;

  letter-spacing:.12em;

  text-transform:uppercase;

  font-weight:600;

}

#reviewQuote,
#reviewCuriosita{

  width:100%;

  min-height:120px;

  padding:22px 24px;

  border-radius:24px;

  border:1px solid rgba(255,255,255,.08);

  background:
    rgba(255,255,255,.03);

  color:white;

  font-size:1rem;

  line-height:1.8;

  font-family:'Inter', sans-serif;

  resize:vertical;

  outline:none;

  transition:.3s ease;

}

#reviewQuote:focus,
#reviewCuriosita:focus{

  border-color:#f3c94d;

  box-shadow:
    0 0 0 1px #f3c94d;

}

#reviewQuote::placeholder,
#reviewCuriosita::placeholder{

  color:
    rgba(255,255,255,.38);

}


.movie-result{
  border: 1px solid transparent;
}

.movie-result:hover{

  border-color:
    rgba(243,201,77,.4);

}

.hidden-review-form{
  display: none;
}

.selected-movie-content{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.selected-movie-year{
  opacity: .6;
}

.selected-movie-overview{
  line-height: 1.7;
  opacity: .85;
  max-width: 700px;
}
.selected-movie-card img{

  width: 220px;

  border-radius: 24px;

  object-fit: cover;

  box-shadow:
    0 20px 50px rgba(0,0,0,.35);

  flex-shrink: 0;

}
.selected-movie-card{

  display: flex;

  gap: 40px;

  align-items: flex-start;

  margin-top: 50px;

}

.review-actions{

  margin-top: 30px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 20px;

}

.autosave-status{

  margin-top: 30px;

  margin-bottom: 14px;

  font-size: 13px;

  letter-spacing: .04em;

  opacity: .55;

}
.selected-movie-meta{

  margin-top: 24px;

  display: flex;

  flex-direction: column;

  gap: 10px;

  opacity: .8;

  line-height: 1.6;

}

.selected-movie-kicker{

  color: #f3c94d;

  letter-spacing: .08em;

  text-transform: uppercase;

  font-size: 12px;

}

.review-top-actions{

  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-bottom:16px;

}

.love-btn,
.desert-btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  width:auto !important;

  min-width:unset;

  padding:6px 12px;

  font-size:.72rem;

  border-radius:999px;

  background:transparent;

  border:1px solid rgba(255,255,255,.5);

  color:white;

  cursor:pointer;

  transition:.25s ease;

}

.love-btn:hover,
.desert-btn:hover{

  background:#f5c518;

  color:#111;

  border-color:#f5c518;

}
.desert-icon{

  font-size:1.1rem;

  filter:
    drop-shadow(
      0 0 10px
      rgba(106,214,170,.45)
    );

}

.desert-btn{

  background:
    rgba(255,255,255,.06);

  border:
    1px solid rgba(
      255,255,255,.12
    );

  color:white;

  backdrop-filter:blur(12px);

  text-transform:
    uppercase;

  letter-spacing:
    .08em;

  font-weight:
    700;

}

.desert-btn.active{

  background:
    linear-gradient(
      135deg,
      #ffd84d,
      #ffcf00
    );

  color:#111;

  border:none;

  box-shadow:
    0 12px 30px
    rgba(255,208,0,.28);

}
.review-top-actions .movie-action-btn{

  padding:10px 16px;
  font-size:.9rem;

}

.review-top-actions button{

  flex:none;
}


  




/* =========================
   REVIEW PAGE
========================= */
.review-page{

  min-height:100vh;

  background:var(--panea-blue);

  color:var(--panea-white);

  overflow-x:hidden;

  position:relative;

}

.review-content strong{

  color:var(--panea-yellow);

  font-weight:700;

}

.rating-stars{

  color:var(--panea-yellow);

}

.rating-text{

  color:rgba(255,255,255,.82);

}

/* =========================
   REVIEW HERO
========================= */
.review-hero{

  position:relative;

  min-height:100vh;

  width:100%;

  display:flex;

  align-items:flex-end;

  overflow:hidden;

  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat;

}

.review-hero::before{

  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      to bottom,
      rgba(3,8,15,.15) 0%,
      rgba(3,8,15,.55) 40%,
      rgba(3,8,15,.92) 100%
    );

  z-index:1;

}

.review-hero-content{

  max-width:1200px;

  position:relative;

  z-index:2;

  margin:0 auto;

  width:100%;

  padding:220px 40px 90px;

}

/* =========================
   REVIEW INFO
========================= */

.review-info{

  display:block;

  max-width:900px;

}

.review-kicker{

  font-size:.75rem;

  letter-spacing:.28em;

  text-transform:uppercase;

  color:var(--panea-yellow);

  margin-bottom:22px;

}

.review-title{

  font-size:
    clamp(2.8rem,5vw,4.8rem);

  line-height:.95;

  margin:10px 0 14px;

  max-width:900px;

}
.review-meta{

  display:flex;

  flex-wrap:wrap;

  gap:12px;

  margin:0 0 18px;

}

.review-meta span{

  height:42px;

  padding:0 20px;

  border-radius:999px;

  display:flex;

  align-items:center;

  justify-content:center;

  color:var(--panea-yellow);

  font-size:.82rem;

  letter-spacing:.08em;

  text-transform:uppercase;

}

.review-description{

  max-width:760px;

  font-size:1.08rem;

  line-height:1.9;

  color:rgba(255,255,255,.72);

  margin-bottom:10px;

}


/* =========================
   MOVIE ACTIONS
========================= */

.movie-actions{

  display:flex;
  flex-wrap:wrap;
  gap:12px;

  margin-top:18px;
  margin-bottom:22px;

}

.movie-action-btn{

  padding:12px 18px;

  border-radius:999px;

  border:
    1px solid rgba(255,255,255,.12);

  background:
    rgba(15,30,45,.55);

  color:var(--panea-white);

  font-size:.82rem;

  font-weight:600;

  cursor:pointer;

  transition:.25s ease;

  backdrop-filter:blur(12px);

}

.movie-action-btn:hover{

  transform:translateY(-2px);

  border-color:
    rgba(253,193,3,.35);

  color:var(--panea-yellow);

}

.movie-action-btn.active{

  background:
    var(--panea-yellow);

  color:#08131d;

  border-color:
    var(--panea-yellow);

}
.watch-btn,
.watchlist-btn,
.love-btn,
.desert-btn{

  height:56px;

  padding:0 28px;

  border-radius:999px;

  border:
    1px solid rgba(255,255,255,.08);

  background:
    rgba(255,255,255,.04);

  backdrop-filter:blur(12px);

  color:rgba(255,255,255,.84);

  font-size:.82rem;

  letter-spacing:.12em;

  text-transform:uppercase;

  cursor:pointer;

  transition:.3s ease;

}

.watch-btn:hover,
.watchlist-btn:hover,
.love-btn:hover,
.desert-btn:hover{

  background:var(--panea-yellow);

  color:#08131d;

  transform:translateY(-3px);

}

.watch-btn.active,
.watchlist-btn.active,
.love-btn.active,
.desert-btn.active{

  background:var(--panea-yellow);

  color:#08131d;

  border-color:var(--panea-yellow);

}

/* =========================
   REVIEW CONTENT
========================= */

.review-layout{

  width:min(1100px, 92%);

  margin:0 auto;

  padding:4rem 0 4rem;

  display:flex;

  flex-direction:column;

  gap:60px;

  margin-top:10px;

}

.review-layout h3{
  margin-bottom: 8px;
}

/* =========================
   SIDEBAR
========================= */

.review-sidebar{

  position:relative;

  top:auto;
  margin-top: 5px;
  width:100%;

}

.sidebar-grid{

  display:grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:18px;

  margin-top:12px;

}

.sidebar-grid .sidebar-value{

  margin-bottom:0;

}

.sidebar-grid-full{

  grid-column:1 / -1;

}

.sidebar-box{

  background:rgba(11,47,68,.72);

  backdrop-filter:blur(16px);

  border:1px solid rgba(255,255,255,.08);

  border-radius:28px;

  padding:24px;

  display:grid;
  justify-items:start;

  grid-template-columns:
    repeat(4,1fr);

  gap:26px 32px;

}

.sidebar-regia,
.sidebar-screenplay,
.sidebar-genre,
.sidebar-imdb{

  grid-row:1;

}

.sidebar-country,
.sidebar-runtime,
.sidebar-rubrica{

  grid-row:2;

}
.review-mood{

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  margin-top:28px;

}

.review-mood-label{

  color:var(--panea-yellow) !important;

  font-size:.78rem;

  letter-spacing:.18em;

  text-transform:uppercase;

  font-weight:700;

  margin:0;

}

.review-mood .review-mood-value,
.review-mood .review-mood-value *,
.review-mood-value strong{

  color:#fff !important;

  font-weight:500 !important;

  letter-spacing:0 !important;

  margin:0 !important;

}

.review-mood-text{
  margin: 0;
}
/* LABEL */

.sidebar-label{

  font-size:.68rem;

  letter-spacing:.18em;

  text-transform:uppercase;

  color:var(--panea-yellow);

  margin:0 0 6px 0;

  padding:0;

  text-align:left;

  display:block;

  width:auto;

}

.sidebar-item{

  display:flex;

  flex-direction:column;

  gap:6px;

  min-width:0;

}

/* VALUE */

.sidebar-value{

  font-size:1rem;

  line-height:1.7;

  color:
    rgba(255,255,255,.92);

  margin:0;
  text-align:left;

  width:100%;

  font-weight:500;

}
.sidebar-mood{

  margin-top:30px;

  padding-top:24px;

  border-top:
    1px solid rgba(255,255,255,.06);

}
.sidebar-country{

  display:block;
  width:100%;

}


.sidebar-country-row{

  grid-column:1 / -1;

}

/* WATCH LINK */

.sidebar-watch{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  height:42px;

  padding:0 18px;

  border-radius:999px;

  background:
    rgba(255,255,255,.05);

  border:
    1px solid rgba(255,255,255,.06);

  color:var(--panea-white);

  text-decoration:none;

  font-size:.82rem;

  letter-spacing:.08em;

  margin-bottom:30px;

  transition:.3s ease;

}

.sidebar-watch:hover{

  background:var(--panea-yellow);

  color:#08131d;

}

/* SERIES */

.sidebar-series{

  color:var(--panea-yellow);

  font-weight:700;

  letter-spacing:.06em;

}

.sidebar-box p,
.sidebar-box li{

  line-height:1.8;

  font-size:.96rem;

}

/* =========================
   REVIEW TEXT
========================= */

.review-content{

  max-width:700px;

  margin:0 auto;

}

.review-content p{

  font-size:1.08rem;

  line-height:2.15;

  margin-bottom:2.2rem;
  text-align:left;

}

.review-content h2{

  font-family:"Playfair Display", serif;

  font-size:clamp(2.6rem, 5vw, 4rem);

  line-height:.95;

  margin:5rem 0 2rem;

  color:var(--panea-white);

}

.review-content blockquote{

  margin:5rem 0;

  padding-left:28px;

  border-left:2px solid var(--panea-yellow);

  background:none;

  border-radius:0;

  font-family:"Playfair Display", serif;

  font-size:2.2rem;

  line-height:1.35;

  color:rgba(255,255,255,.92);

  box-shadow:none;

}


/* =========================
   REVIEW AUTHOR
========================= */

.review-author{

  width:fit-content;
  margin:.5rem 0 0;

  display:flex;

  align-items:center;

  gap:16px;

  padding:0;

  border:none;

  background:none;

  backdrop-filter:none;

  box-shadow:none;

}

/* AVATAR */

.review-author img{

  width:64px;

  height:64px;

  border-radius:50%;

  object-fit:cover;

}

/* NAME */
.author-name{

  margin:0;

  display:flex;

  align-items:center;

  height:64px;

}


/* =========================
   RELATED FILMS
========================= */

.related-section{

  width:min(1280px, 92%);

  margin:0 auto 8rem;

}

.related-title{

  font-family:"Playfair Display", serif;

  font-size:30px;

  line-height:.95;

  color:var(--panea-white);

  margin-bottom:3rem;

}

.related-grid{

  display:flex;

  gap:28px;

  flex-wrap:wrap;

}

.related-card{
  
  width:min(380px, 100%);

  aspect-ratio:16/9;

  overflow:hidden;

  border-radius:28px;

  position:relative;

  transition:.35s ease;

  background:#111;

}

.related-card img{

  width:100%;

  height:100%;

  object-fit:cover;

  display:block;

  transition:.45s ease;

}

/* OVERLAY */

.related-card::after{

  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      to top,
      rgba(7,15,25,.35),
      rgba(7,15,25,.08)
    );

}

/* HOVER */

.related-card:hover{

  transform:
    translateY(-6px)
    scale(1.02);

}

.related-card:hover img{

  transform:scale(1.05);

}


/* =========================
   SUGGEST REVIEW
========================= */

.suggest-review{

  margin-top:34px;

  text-align:center;

}

.suggest-review p{

  font-size:.92rem;

  color:
    rgba(255,255,255,.55);

  margin-bottom:12px;

}

.suggest-review a{

  color:#fdc103;

  text-decoration:none;

  font-size:.82rem;

  letter-spacing:.14em;

  text-transform:uppercase;

  transition:.25s ease;

}

.suggest-review a:hover{

  opacity:.75;

}


/* =========================
   WHERE TO WATCH
========================= */
.where-watch{

  margin-top:22px;

  display:flex;

  flex-direction:column;

  align-items:flex-start;

  gap:10px;

}

.where-watch-label{

  font-size:.72rem;

  letter-spacing:.18em;

  text-transform:uppercase;

  color:rgba(255,255,255,.55);

}

.hero-watch-btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  height:46px;

  padding:0 22px;

  border-radius:999px;

  background:rgba(255,255,255,.05);

  border:1px solid rgba(255,255,255,.08);

  color:var(--panea-white);

  text-decoration:none;

  font-size:.82rem;

  letter-spacing:.08em;

  transition:.25s ease;

}

.hero-watch-btn:hover{

  background:var(--panea-yellow);

  color:#08131d;

  border-color:var(--panea-yellow);

}

.streaming-list{

  display: flex;

  flex-wrap: wrap;

  gap: .7rem;

}

.streaming-pill{

  padding: .7rem 1rem;

  border: 1px solid rgba(255,255,255,.12);

  border-radius: 999px;

  text-decoration: none;

  color: #f5f1e8;

  font-size: .9rem;

  transition:
    background .25s ease,
    border .25s ease,
    transform .25s ease;

}

.streaming-pill:hover{

  background: #f5c518;

  color: #111;

  border-color: #f5c518;

  transform: translateY(-2px);

}

/* =========================
   CURIOSITÀ
========================= */

.review-extra{

  margin:6rem 0 5rem;

  padding:42px 46px;

  border-radius:32px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.015)
    );

  border:
    1px solid rgba(255,255,255,.06);

  backdrop-filter:blur(10px);

  position:relative;

  overflow:hidden;

}

/* LIGHT */

.review-extra::before{

  content:"";

  position:absolute;

  top:-120px;
  right:-120px;

  width:260px;
  height:260px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(243,201,77,.08),
      transparent 70%
    );

  pointer-events:none;

}

/* TITLE */

.review-extra h3{

  font-size:22px;

  letter-spacing:.24em;

  text-transform:uppercase;

  color:var(--panea-yellow);

  margin-bottom:30px;

}

/* LIST */

.review-extra ul{

  display:flex;

  flex-direction:column;

  gap:26px;

  padding-left:22px;

  list-style:disc;
  

}

/* ITEMS */

.review-extra li{

  color:rgba(255,255,255,.82);

  line-height:1.95;

  font-size:1rem;

}

.review-extra li::marker{

  font-size:.9rem;

}



.profile-header{

  position:sticky;
  top:0;

  z-index:9999;

  padding:20px 0;
backdrop-filter:blur(18px);

  background:
    rgba(8,22,35,.72);

  border-bottom:
    1px solid rgba(255,255,255,.05);
  box-shadow:none;

}


.profile-header-inner{

  width:min(1320px, 92%);

  margin:0 auto;

  display:flex;

  align-items:center;

  justify-content:space-between;
}



.profile-nav{

  display:flex;

  align-items:center;

  gap:24px;
}

.profile-nav a,
.logout-btn{

  color: rgba(255,255,255,.82);

  text-decoration:none;

  background:none;

  border:none;
  font-weight:600;
letter-spacing:.04em;
  font-size:1rem;
  cursor:pointer;

  opacity:.8;

  transition:.3s;
}

.profile-nav a:hover,
.logout-btn:hover{

  color: var(--panea-yellow);

  opacity:1;
}

.profile-nav a.active{

  color: var(--panea-yellow);

  opacity:1;

}

.profile-nav a.active::after{

  width:100%;

}

.profile-logo{

  font-family:"Playfair Display", serif;

  font-size:2rem;

  font-weight:700;

  line-height:.9;

  color:var(--panea-yellow);

  text-decoration:none;

  letter-spacing:-.04em;
}

/* =========================
   MOBILE TAB BAR
========================= */

.mobile-tabbar{

  position:fixed;

  bottom:0;
  left:0;

  width:100%;

  height:78px;

  background:
    rgba(8,22,35,.92);

  backdrop-filter:blur(20px);

  border-top:
    1px solid rgba(255,255,255,.06);

  display:flex;

  justify-content:space-around;

  align-items:center;

  z-index:9999;

}

/* ITEM */
/* =========================
   MOBILE TABBAR LINKS
========================= */

.tab-item{

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap:8px;

  text-decoration:none;

  color:rgba(255,255,255,.62);

  font-size:.82rem;

  font-weight:600;

  letter-spacing:.04em;

  transition:.25s ease;

  position:relative;

}

/* ICON */

.tab-item i{

  font-size:1.35rem;

}

/* HOVER */

.tab-item:hover{

  color:var(--panea-yellow);

}

/* ACTIVE */

.tab-item.active{

  color:var(--panea-yellow);

}

/* UNDERLINE */

.tab-item::after{

  content:"";

  position:absolute;

  bottom:-8px;

  width:0;

  height:2px;

  border-radius:999px;

  background:var(--panea-yellow);

  transition:.25s ease;

}

.tab-item:hover::after,
.tab-item.active::after{

  width:24px;

}
/* PLUS */


.logout-tab{

  background:none;

  border:none;

  cursor:pointer;

  font-family:inherit;

}


.mobile-tabbar{

  justify-content:space-evenly;

}

/* =========================
   COMMUNITY REVIEWS
========================= */

.community-section{

  margin-top:80px;

  padding-top:50px;

  border-top:
    1px solid rgba(
      255,255,255,.08
    );

}

.community-title{
  font-family:
    "Playfair Display",
    serif;
  font-size:1.8rem;
  font-weight:700;
  margin-bottom:20px;
  opacity:.9;
  }
  
.community-grid{

  display:grid;

  gap:20px;

}

.community-card{

  background:
    rgba(255,255,255,.03);

  border:
    1px solid rgba(
      255,255,255,.06
    );

  border-radius:24px;

  padding:28px;

  backdrop-filter:
    blur(12px);

}

.community-stars{

  color:#e6c068;

  font-size:1rem;

  letter-spacing:3px;

  margin-bottom:14px;

}

.community-text{

  color:
    rgba(255,255,255,.82);

  line-height:1.8;

  font-size:1rem;

}

.sidebar-box{

  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr)) !important;

  gap:30px !important;

}

.sidebar-item{

  justify-content:flex-start !important;

  align-items:flex-start !important;

  text-align:left !important;

}

.sidebar-label,
.sidebar-value{

  margin:0 !important;

  padding:0 !important;

  text-align:left !important;

  width:auto !important;

}



/* WATCHED + REVIEW */

.watched-btn,
.review-btn{

  height:56px;

  padding:0 28px;

  border-radius:999px;

  border:
    1px solid rgba(255,255,255,.08);

  background:
    rgba(255,255,255,.04);

  backdrop-filter:blur(12px);

  color:rgba(255,255,255,.84);

  font-size:.82rem;

  letter-spacing:.12em;

  text-transform:uppercase;

  cursor:pointer;

  transition:.3s ease;

}

.watched-btn:hover,
.review-btn:hover{

  background:
    var(--panea-yellow);

  color:#08131d;

  transform:
    translateY(-3px);

}

.watched-btn.active,
.review-btn.active{

  background:
    var(--panea-yellow);

  color:#08131d;

  border-color:
    var(--panea-yellow);

}