/* Movie profile styles shared by every tab, moved out of
   includes/moviesSEOORIGINAL.php. Tab-only and conditional styles
   stay inline there. Keep each rule balanced - one unclosed brace
   here swallows everything after it. */

/* moviesShow(): rating sharing */
#social-sharing {
    text-align: center;
    position: relative;
    font-size: 14px;
    color: #000;
    padding: 14px 0;
}

/* moviesShow(): bio / synopsis */
.bio-content {
    font-size: 16px;
    color: #4A4A4A;
    line-height: 26px;
    margin-bottom: 20px;
}

/* moviesShow(): infinite scroll wrapper */
.infinite-scroll-article-divider {width: 100%; left: 0;}

/* moviesShow(): fanshop modal */
.fanshop-row {font-size: 13px; cursor: pointer;}
.fanshop-row .fa.fa-hand-peace-o {font-size: 20px;}
.fanshop-row .items-counter {color: #eee;}
.fanshop-row .item-type {
    padding: 2px 4px;
    border: 1px solid #fff;
    border-radius: 2px;
    margin-left: 2px;
}
#modal-fanshop .modal-header {background-color: #fff; border-bottom: 0;}
#modal-fanshop .modal-body {padding: 5px 0 0 0;}
#modal-fanshop button.close {
    position: absolute;
    top: 12px;
    right: 12px;
    background-color: #ed044e;
    color: #fff;
    padding: 3px 8px;
    opacity: 1;
}
.fanshop-modal-header {
    padding: 0 15px 15px 15px;
    border-bottom: 1px solid #eee;
}
.fanshop-modal-header .fanshop-icon-wrapper {
    float: left;
    width: 95px;
    margin-right: 10px;
}
.fanshop-modal-header .title-text {
    float: left;
    width: calc(100% - 105px);
}
.fanshop-modal-header .title-text .movie-title {
    display: inline-block;
    font-size: 28px;
    font-weight: bold;
    color: #002c3e;
    margin-top: 25px;
    margin-left: 5px;
}
.fanshop-modal-header .title-text .subtitle {
    font-size: 20px;
    font-weight: bold;
    color: #828282;
    text-transform: uppercase;
}
.fanshop-modal-header .fanshop-icon-wrapper .fanshop-icon {
    width: 95px;
    height: 95px;
    background-color: #002c3e;
    color: #fff;
    position: relative;
    text-align: center;
}
.fanshop-modal-header .fanshop-icon-wrapper .fanshop-icon .fa.fa-hand-peace-o {
    font-size: 40px;
    margin-top: 13px;
}
.fanshop-modal-header .fanshop-icon-wrapper .fanshop-icon span {
    display: inline-block;
    margin-top: -1px;
    font-size: 13px;
    font-weight: bold;
}
.fanshop-modal-header .title-text {float: left;}

#fanshop-wrapper {
    padding-top: 15px;
    min-height: 285px;
    max-height: 420px;
    overflow-y: scroll;
}

@media screen and (max-width: 768px){
    .fanshop-modal-header .title-text {
        width: calc(100% - 120px);
    }
    .fanshop-modal-header .title-text .movie-title {
        margin-top: 8px;
        font-size: 22px;
    }
}

/* moviesShow(): ratings modal */
@media all and (min-width: 768px) {
    #modal-ratings .modal-sm {
        min-width: 360px;
    }
}

/* movies(): view counter ($movie_views_html) */
#todays-visitors {
  border: 1px solid #E2E2E2;
  display: inline-block;
  font-family: Source Sans Pro;
  font-size: 16px;
  color: #4A4A4A;
  padding: 10px;
  background-color: #FBFBFB;
  border-radius: 6px;
  margin: 5px 0 0 -10px;
}
#todays-visitors a {
  color: var(--hyperlink_color);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid #BFCACF;
}
#todays-visitors a:hover {
  color: var(--hyperlink_color_hover);
}
@media all and (max-width: 991px) {
  #todays-visitors {
    padding: 10px 5px;
    margin: 10px 0px 0 -161px;
    width: calc(100% + 420px);
  }
}
@media all and (max-width: 767px) {
  #todays-visitors {
    padding: 10px 5px;
    margin: 10px 0px 0 -66px;
    width: calc(100% + 66px);
  }
}

/* movies(): main menu buttons ($buttons) */
.main-menu-more .icon-icon-arrow-right {
  transform: rotate(90deg);
  font-size: 14px;
  display: inline-block;
  margin: 0 0 4px 5px;
}
.main-menu-more-list {
  position: absolute;
  z-index: 9;
  background-color: #fff;
  padding: 0 10px 10px 10px;
  top: -11px;
  right: -14px;
  min-width: 100px;
  border: 1px solid #ECEFF1;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
  text-align: right;
}
.main-menu-more-list a {
  text-decoration: none;
}
.main-menu-more-list .title {
  display: inline-flex;
  cursor: pointer;
  margin: 8px 0 1px 0;
}
.main-menu-more-list .title .text {
  color: #87A6B5;
  font-family: Kanit;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0;
  line-height: 21px;
  margin-right: 10px;
}
.main-menu-more-list .title .icon-icon-arrow-right {
  transform: rotate(270deg);
  display: inline-block;
  font-size: 14px;
  margin: 4px 4px 4px -5px;
}
.main-menu-more-list .red-border {
  border-top: 3px solid var(--main-red);
  height: 1px;
  margin: 2px 0 10px 0;
}
.main-menu-more-list .switch-btn i.fa,
.main-menu-more-list .switch-btn .ctr {
  display: none;
}
.main-menu-more-list a .switch-btn {
  font-family: Kanit;
  font-size: 14px;
  text-align: left;
  line-height: 21px;
  letter-spacing: 0;
  white-space: nowrap;
  width: 100% !important;
  clear:both;
  padding: 5px 20px !important;
  height: 30px !important;
  justify-content: left !important;
  margin-right: 0 !important;
}
.main-menu-more-list .switch-btn:hover,
.main-menu-more-list .switch-btn:hover .switch-btn-text {
  background-color: #ECEFF1 !important;
  cursor: pointer;
}

/* movies(): first profile wrapper */
.movie-profile-wrapper.movie-profile-wrapper-first {position:relative; z-index:1000;}

/* movies(): mobile layout v2 + modal skins */
/* ==================================================================
   MODAL SKIN

   A separate class rather than a restyle of .modal-mafab, which is
   used across the forum, impresszum, footer and boxes - and by
   createBlankModal(), which builds the login modal. Restyling that
   would reach all of them. Adding modal-mafab-v2 alongside it means
   only the modals opted in here change, and the same class can go on
   the other movie-profile modals as they are done.

   Not media scoped: the design is the same at both widths.
   ================================================================== */
.modal-mafab-v2 {
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 45, 66, 0.18);
}

/* One width for every modal on this skin. The ids are listed as well
   as the class because these dialogs pick the class up in different
   ways - #modal-fans has it in its markup, #library_modal is built by
   createBlankModal and gets it from script - and only the id selector
   is certain to outrank the bootstrap .modal-dialog and .modal-sm
   widths in every case. */
@media only screen and (min-width: 768px) {
  #modal-fans .modal-dialog,
  #modal-ratings .modal-dialog,
  #library_modal .modal-dialog,
  .modal-mafab-v2-dialog,
  .modal-mafab-v2-dialog.modal-sm {
    width: 600px !important;
    min-width: 600px !important;
    max-width: calc(100% - 40px);
  }
}

/* Edge to edge apart from a small gutter, matching bootstrap own
   mobile margin. */
@media only screen and (max-width: 767px) {
  #modal-fans .modal-dialog,
  #modal-ratings .modal-dialog,
  #library_modal .modal-dialog,
  .modal-mafab-v2-dialog,
  .modal-mafab-v2-dialog.modal-sm {
    width: auto !important;
    min-width: 0 !important;
    margin: 10px !important;
  }
}

.modal-mafab-v2 .modal-header {
  flex: 0 0 auto;
  padding: 18px 20px;
  background: #f1f5f9;
  border-bottom: 0;
}

.modal-mafab-v2 .modal-header .modal-title {
  color: #0d1b24;
  font-size: 17px;
  font-weight: 700;
}

/* The plain glyph from the mockup, in place of the red block. */
.modal-mafab-v2 .modal-header .close {
  opacity: 1;
  margin-top: -2px;
  padding: 0;
  background: none;
  border: 0;
  color: #0d1b24;
  font-size: 26px;
  font-weight: 400;
  text-shadow: none;
}

.modal-mafab-v2 .modal-header .close:hover {
  color: #5b6b76;
}

/* Height comes from the modal, not the body. Capping the body alone
   left desktop short - the header and dialog margins were not in the
   sum - and overflowed mobile, where 100vh counts the area behind the
   browser chrome. The content box is capped to the space between the
   dialog margins, and the body takes whatever the header leaves, so
   the gap below matches the gap above at any screen height.
   dvh follows the visible area on mobile; the vh line above it is the
   fallback where dvh is not understood. */
.modal-mafab-v2 {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 60px);
  max-height: calc(100dvh - 60px);
}

.modal-mafab-v2 .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  background: #fff;
}

@media only screen and (max-width: 767px) {
  .modal-mafab-v2 {
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
  }
}

/* Favourite call to action at the top of the list. */
.modal-mafab-v2 .mfb-modal-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px 20px;
  padding: 9px 16px;
  background: #f1f5f9;
  border-radius: 999px;
  cursor: pointer;
}

/* showButton emits .mfb-btn-fw, which is a fixed 45px wide with 10px
   margins either side - that is what held the heart away from the
   label. Shrunk to its glyph so the pair reads as one centred unit. */
.modal-mafab-v2 .mfb-modal-cta .mfb-btn {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0;
  line-height: 1;
  font-size: 17px;
}

.modal-mafab-v2 .mfb-modal-cta-label {
  margin-left: 8px;
  color: #0d1b24;
  font-size: 15px;
  font-weight: 500;
}

/* The voters modal gets its personal rating from the AJAX response, so
   cached movie HTML never contains state belonging to another user. */
#modal-ratings .movie-ratings-own-rating {
  padding: 20px 28px 17px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}

#modal-ratings .movie-ratings-own-options {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 340px;
  max-width: 100%;
  margin: 0 auto;
}

#modal-ratings .movie-ratings-own-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 0;
  color: #718396;
  font-size: 33px;
  line-height: 1;
  cursor: pointer;
}

#modal-ratings .movie-ratings-own-option:first-child {
  margin-right: 10px;
  font-size: 31px;
}

#modal-ratings .movie-ratings-own-option:focus {
  outline: 2px solid #9db4c3;
  outline-offset: 2px;
  border-radius: 4px;
}

#modal-ratings .movie-ratings-own-rating.is-busy .movie-ratings-own-option {
  pointer-events: none;
  opacity: 0.55;
}

#modal-ratings .movie-ratings-own-labels {
  display: flex;
  justify-content: space-between;
  width: 340px;
  max-width: 100%;
  margin: 5px auto 0;
  color: #718396;
  font-size: 14px;
}

@media only screen and (max-width: 480px) {
  #modal-ratings .movie-ratings-own-rating {
    padding: 16px 18px 14px;
  }

  #modal-ratings .movie-ratings-own-option {
    width: 42px;
    height: 42px;
    font-size: 28px;
  }

  #modal-ratings .movie-ratings-own-options {
    gap: 2px;
    width: 300px;
  }

  #modal-ratings .movie-ratings-own-labels {
    width: 300px;
  }

  #modal-ratings .movie-ratings-own-option:first-child {
    margin-right: 6px;
    font-size: 27px;
  }
}

/* One row per user: round avatar, name over date, action on the right. */
.modal-mafab-v2 .mfb-user-row {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 12px 20px;
  border-top: 1px solid #e2e8f0;
}

.modal-mafab-v2 .mfb-user-row-avatar {
  flex: 0 0 44px;
  margin-right: 14px;
}

.modal-mafab-v2 .mfb-user-row-avatar img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.modal-mafab-v2 .mfb-user-row-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.modal-mafab-v2 .mfb-user-row-name {
  color: #0d1b24;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-mafab-v2 .mfb-user-row-date {
  margin-top: 2px;
  color: #7b8b95;
  font-size: 13px;
}

.modal-mafab-v2 .mfb-user-row-action {
  flex: 0 0 auto;
  margin-left: 12px;
}

.modal-mafab-v2 .mfb-user-row-action .mfb-btn {
  background: none;
  border: 0;
  color: #b9c6ce;
  font-size: 20px;
}

.modal-mafab-v2 .mfb-user-row-action .mfb-btn.active {
  color: var(--main-red);
}

/* The rating sits where the heart and envelope do in the other two
   modals. The stars carry their own inline colours from the endpoint,
   which encode the score, so only spacing is set here. */
.modal-mafab-v2 .mfb-user-row-rating {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: 15px;
  letter-spacing: 2px;
}

.modal-mafab-v2 .mfb-modal-empty {
  margin: 0;
  padding: 30px 20px;
  color: #7b8b95;
  font-size: 14px;
  text-align: center;
}

/* ---- Review / rating window -------------------------------------
   Restyle only: every control, tab and field is the one already
   there, so nothing about how it behaves changes. This modal is
   built by createBlankModal with no header, so the close button and
   the card come from the content itself. */
#allinone_window .modal-content {
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 45, 66, 0.18);
}

/* The close cross and the header content are given the same right
   edge - the modal body padding - so the cross lines up with the two
   round buttons underneath it, as in the prototype. It is positioned
   against .modal-body, whose padding box starts at the body edge, so
   the same 15px lands both on the same line. */
#allinone_window #allinone_close_btn {
  top: 15px;
  right: 15px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  background: none !important;
  border: 0 !important;
  color: #0d1b24 !important;
  font-size: 20px;
  text-align: center;
  opacity: 1;
}

#allinone_window #allinone_close_btn:hover {
  color: #5b6b76 !important;
}

#allinone_window .crbox-header {
  padding: 0 0 14px;
  margin-bottom: 14px;
  border-bottom: 0;
}

/* The original all-in-one window used a 100px poster and a 26px title.
   The redesigned card is deliberately a little more compact, matching
   the proportions of the approved modal without changing the header
   markup or any of its links and controls. */
#allinone_window .crbox-header-left {
  width: 86px;
  margin-right: 14px;
}

#allinone_window .crbox-header-right {
  width: calc(100% - 100px);
}

#allinone_window .crbox-header-left img {
  display: block;
  width: 86px;
  height: auto;
  border-radius: 8px;
}

#allinone_window .crbox-movie-title,
#allinone_window .crbox-movie-title a {
  color: #0d1b24;
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
}

#allinone_window .crbox-movie-year {
  color: #7b8b95;
  font-size: 14px;
  font-weight: 400;
}

/* The score is already represented by the selected stars and is not in
   the approved header design. Hide both the badge and the placeholder
   that used to reserve room for it, so the title begins at the natural
   left edge on desktop and mobile. */
#allinone_window .crbox-movie-rating,
#allinone_window .crbox-rating-placeholder {
  display: none !important;
}

@media only screen and (max-width: 767px) {
  /* allinone_window.css hides the poster on phones. A compact two-column
     header keeps the poster on the left and the title, stars and the two
     actions together on its right, as in the approved design. */
  #allinone_window .crbox-header {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
  }

  #allinone_window .crbox-header-left {
    position: static;
    display: block;
    float: none;
    width: 64px;
    margin: 0;
  }

  #allinone_window .crbox-header-left img {
    width: 64px;
  }

  #allinone_window .crbox-header-right {
    float: none;
    width: 100%;
  }

  #allinone_window .crbox-header-right > div:first-child {
    width: calc(100% - 44px) !important;
    min-height: 34px;
    margin-left: 0;
  }

  #allinone_window .crbox-movie-title,
  #allinone_window .crbox-movie-title a {
    font-size: 18px;
    line-height: 23px;
  }

  #allinone_window .crbox-movie-year {
    font-size: 13px;
  }
}

/* Stars and the two buttons share a line. They were floated - stars
   left at a fixed 182px, buttons right - so once the buttons grew the
   right float dropped below, which is what broke the mobile layout.
   A flex row keeps them together at any width. */


#allinone_window .crbox-stars-buttons .crbox-stars {
  float: none;
  width: auto;
  flex: 0 1 auto;
  min-width: 0;
}

/* The rating widget floats its icons, so a narrow column wrapped the
   fifth star onto a second line. A flex row keeps all six together. */
#allinone_window .crbox-stars .mfb-star-rating {
  float: none;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

/* Pinned to the right edge rather than pushed there. Flow layout kept
   leaving a gap because of what sits between - a script node, floated
   wrappers, their own widths - so the buttons are taken out of flow
   and anchored to the row edge instead. That edge is the same one the
   close cross measures from, so the eye and the cross line up exactly
   and stay lined up whatever the row contains. */
#allinone_window .crbox-stars-buttons {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 62px;
  padding-right: 130px;
}

#allinone_window .crbox-fav-wish-buttons {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  float: none;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
}

#allinone_window .crbox-fav-wish-buttons > div {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Keep the current circular icons, with the action names restored as
   compact captions underneath. The whole icon-and-label stack remains
   the original button, so its click and active-state behaviour is
   unchanged. */
#allinone_window .btn-bookmark-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: auto;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #0d1b24 !important;
  transition: transform 0.15s ease-out, background-color 0.15s ease-out, color 0.15s ease-out;
}

#allinone_window .btn-bookmark-modal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #f1f5f9;
  border-radius: 50%;
  font-size: 17px;
  line-height: 1;
}

#allinone_window .btn-bookmark-modal .btn-bookmark-modal-icon .fa {
  font-size: 17px;
}

/* Hover grows the glyph and fills it in; the circle behind it stays
   put. On the heart that means swapping the outline for the solid
   one, which is the same shape the active state uses - so hovering
   previews it rather than clashing with it. An already active button
   is left alone, since it is filled to begin with. */
#allinone_window .btn-bookmark-modal-icon {
  transition: transform 0.15s ease-out;
}

#allinone_window .btn-bookmark-modal:hover .btn-bookmark-modal-icon {
  transform: scale(1.18);
}

#allinone_window .btn-fav-modal:not(.active):hover .fa-heart-o::before {
  content: "\f004";
}

/* The colours this modal already used for the selected state. The eye
   has no filled variant, so colour is the only thing marking it -
   navy was too close to the default and read as unselected. */
#allinone_window .btn-fav-modal.active,
#allinone_window .btn-fav-modal.active:hover {
  color: #ED044E !important;
}

#allinone_window .btn-wish-modal.active,
#allinone_window .btn-wish-modal.active:hover {
  color: #0090a7 !important;
}

/* The endpoint has always emitted these labels; the redesign had only
   visually hidden them. Reset that screen-reader-only treatment and
   keep both captions on one centred line. */
#allinone_window .btn-bookmark-modal-text {
  display: block;
  position: static;
  width: auto;
  height: auto;
  margin: 5px 0 0;
  padding: 0;
  overflow: visible;
  clip: auto;
  white-space: nowrap;
  border: 0;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
  text-align: center;
}

#allinone_window .btn-bookmark-modal:hover .btn-bookmark-modal-text {
  color: #0d1b24;
}

@media only screen and (max-width: 767px) {
  /* Give the rating and action groups the same 40px icon line. The
     legacy stars carried 6px top padding while the circular actions
     were vertically centred independently, which made the stars look
     lower even though both groups occupied the same row. */
  #allinone_window .crbox-stars-buttons {
    align-items: flex-start;
    transform: translateY(-2px);
  }

  #allinone_window .crbox-stars-buttons .crbox-stars {
    padding-top: 0;
  }

  #allinone_window .crbox-stars .mfb-star-rating {
    height: 40px;
    align-items: center;
  }

  #allinone_window .crbox-fav-wish-buttons {
    top: 3px;
    align-items: flex-start;
    transform: none;
  }

  /* Touch browsers can retain :hover after a tap. Do not let that
     retained state enlarge or fill an unselected heart: mobile has an
     outline for off and a red solid heart for on. Desktop keeps the
     filled hover preview. */
  #allinone_window .btn-bookmark-modal:hover .btn-bookmark-modal-icon {
    transform: none;
  }

  #allinone_window .btn-fav-modal:not(.active):hover .fa-heart-o::before {
    content: "\f08a";
  }
}

@media only screen and (max-width: 480px) {
  /* Slightly smaller groups create a deliberate gap between the final
     star and Kedvencem while the actions remain anchored to the far
     right of the available header column. */
  #allinone_window .crbox-stars-buttons {
    padding-right: 114px;
  }

  #allinone_window .crbox-stars .mfb-star-rating {
    font-size: 20px !important;
  }

  #allinone_window .crbox-stars .mfb-star-rating .fa-msr-star {
    width: 20px !important;
  }

  #allinone_window .crbox-stars .mfb-star-rating .fa-msr-thumb {
    width: 16px !important;
  }

  #allinone_window .btn-bookmark-modal {
    width: 54px;
  }

  #allinone_window .btn-bookmark-modal-icon {
    width: 38px;
    height: 38px;
  }

  #allinone_window .btn-bookmark-modal .btn-bookmark-modal-icon .fa {
    font-size: 16px;
  }

  #allinone_window .btn-bookmark-modal-text {
    font-size: 10px;
    line-height: 13px;
  }
}

@media only screen and (max-width: 400px) {
  /* On narrower phones the same layout remains on one line by reducing
     only the visual footprint of the controls. Their original elements,
     click targets and event handlers are unchanged. */
  #allinone_window .crbox-header {
    grid-template-columns: 58px minmax(0, 1fr);
    column-gap: 10px;
  }

  #allinone_window .crbox-header-left,
  #allinone_window .crbox-header-left img {
    width: 58px;
  }

  #allinone_window .crbox-stars-buttons {
    padding-right: 108px;
  }

  #allinone_window .crbox-stars .mfb-star-rating {
    height: 36px;
    font-size: 20px !important;
  }

  #allinone_window .crbox-stars .mfb-star-rating .fa-msr-star {
    width: 20px !important;
  }

  #allinone_window .crbox-stars .mfb-star-rating .fa-msr-thumb {
    width: 16px !important;
  }

  #allinone_window .crbox-fav-wish-buttons {
    gap: 4px;
  }

  #allinone_window .btn-bookmark-modal {
    width: 52px;
  }

  #allinone_window .btn-bookmark-modal-icon {
    width: 36px;
    height: 36px;
  }

  #allinone_window .btn-bookmark-modal .btn-bookmark-modal-icon .fa {
    font-size: 15px;
  }

  #allinone_window .btn-bookmark-modal-text {
    margin-top: 4px;
    font-size: 9px;
    line-height: 12px;
  }
}

/* Tabs: underline the active one instead of boxing it. */
#allinone_window .crbox-tab-nav {
  border-bottom: 1px solid #e2e8f0;
}

#allinone_window .crbox-tab-nav li {
  padding: 10px 2px !important;
  margin-right: 24px;
  background: none !important;
  border: 0 !important;
  color: #7b8b95;
  font-size: 15px;
  font-weight: 600;
}

#allinone_window .crbox-tab-nav li.active {
  color: #0d1b24;
  border-bottom: 3px solid var(--main-red) !important;
}

#allinone_window .crbox-login-alert {
  margin: 0 0 14px;
  padding: 14px 16px;
  background: #f1f5f9;
  border: 0;
  border-radius: 10px;
  color: #475569;
  font-size: 13px;
  line-height: 19px;
}

#allinone_window input[type="text"],
#allinone_window textarea {
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

#allinone_window input[type="text"]:focus,
#allinone_window textarea:focus {
  border-color: #b9c6ce !important;
  outline: 0;
}

/* Review form: match the cleaner lower half of the approved design.
   These are still the original form controls and ids, so validation,
   draft restoration and saving continue to use the existing handlers. */
#allinone_window .crbox-input,
#allinone_window .crbox-textarea {
  color: #0d1b24;
  font-size: 14px;
}

#allinone_window .crbox-input {
  min-height: 44px;
  padding: 11px 12px;
}

#allinone_window .crbox-textarea {
  min-height: 108px;
  padding: 12px;
}

#allinone_window .crbox-input::placeholder,
#allinone_window .crbox-textarea::placeholder {
  color: #64748b;
  opacity: 1;
}

/* The legacy editor joined this row to the textarea as a grey toolbar.
   In the design it is a normal white form row with a little breathing
   room, so remove only that toolbar chrome. */
#allinone_window .comment-editor {
  margin-bottom: 0;
}

#allinone_window .comment-editor .comment-editor-buttons {
  margin: 0;
  padding: 12px 0 4px;
  background: #fff;
  border: 0;
}

#allinone_window .comment-editor .comment-editor-buttons label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: #0d1b24;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
}

#allinone_window .comment-editor .comment-editor-buttons input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #002c3e;
  cursor: pointer;
}

#allinone_window .crbox-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
}

#allinone_window .crbox-footer-counter,
#allinone_window .crbox-footer-btn {
  float: none;
  width: auto;
  padding: 0;
}

#allinone_window .crbox-footer-counter {
  color: #64748b;
  font-size: 13px;
}

#allinone_window .crbox-footer > .clear {
  display: none;
}

#allinone_window #crbox_comment_save {
  min-width: 90px;
  height: 42px;
  padding: 0 20px;
  background: #081528;
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 42px;
  box-shadow: none;
}

#allinone_window #crbox_comment_save:hover,
#allinone_window #crbox_comment_save:focus {
  background: #10243a;
  color: #fff;
  outline: 0;
}

/* Same pill treatment the library modal uses, so the Filmtar tab here
   matches the standalone one. */
#allinone_window label.library-media {
  margin: 0 8px 8px 0 !important;
  padding: 7px 14px !important;
  background-color: #f1f5f9 !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #0d1b24 !important;
  font-size: 12px;
  font-weight: 500;
}

#allinone_window label.library-media.active {
  background-color: #002c3e !important;
  color: #fff !important;
}

/* ---- Library modal ------------------------------------------------
   Own formats at the top as a question, then one row per collector.
   The toggles keep .library-media and data-media so the existing save
   handler still finds them; only their look changes. */
.modal-mafab-v2 .lib-own {
  padding: 18px 20px 16px;
}

.modal-mafab-v2 .lib-own-title {
  margin-bottom: 12px;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.modal-mafab-v2 .lib-own .lib-row-media {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.modal-mafab-v2 .lib-own label.library-media,
.modal-mafab-v2 .lib-row-media-users label.library-media {
  margin: 0 !important;
  padding: 7px 14px !important;
  background-color: #f1f5f9 !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #0d1b24 !important;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: 0.15s ease-in-out;
}

/* Sits under the formats, replacing the info icon that used to float
   in the corner of the body. */
.modal-mafab-v2 .lib-own-note {
  margin: 14px 0 0;
  color: #7b8b95;
  font-size: 12px;
  line-height: 17px;
}

/* Owned reads as filled, in the same navy the site already uses for
   an on state. */
.modal-mafab-v2 .lib-own label.library-media.active,
.modal-mafab-v2 .lib-own label.library-media.active:hover {
  background-color: #002c3e !important;
  color: #fff !important;
}

.modal-mafab-v2 .lib-own label.library-media:hover {
  background-color: #e2e8f0 !important;
  color: #0d1b24 !important;
}

/* Other collectors: their formats as quiet tags under the date. */
.modal-mafab-v2 .lib-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.modal-mafab-v2 .lib-tag {
  padding: 4px 10px;
  background: #f1f5f9;
  border-radius: 999px;
  color: #475569;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.modal-mafab-v2 .lib-row {
  background: none !important;
}

.modal-mafab-v2 .mfb-user-row-action .library-contact-user {
  float: none;
  padding: 0;
  background: none;
  border: 0;
  color: #b9c6ce;
  font-size: 19px;
}

.modal-mafab-v2 .mfb-user-row-action .library-contact-user:hover {
  color: #64748b;
}

/* The poster box is pinned twice to the height of the poster image
   alone - max-height:250px on .mp-poster and height:240px on
   .mp-poster-content. The "Poszterek (N)" caption lives inside both,
   so it spills past them without adding height and the next box lands
   on top of it. Both are released so they size to their content. */
.movie-mobile-layout-v2 .mp-poster {
  max-height: none;
}

.movie-mobile-layout-v2 .mp-poster-content {
  height: auto;
}

@media only screen and (min-width: 768px) {
  /* Desktop option 1: keep the player-owned .mp-poster-content in its
     original parent, but lay its existing children out as a full-width
     trailer followed by the real poster and compact crew data. Using
     display:contents on the legacy inner wrapper also keeps this grid
     valid when fsp.js temporarily prepends the player directly back into
     .mp-poster-content after fullscreen/miniplayer use. */
  .movie-mobile-layout-v2 .movie-mobile-flow-bg {
    height: auto !important;
    margin-left: 15px;
    margin-right: -15px;
  }

  .movie-mobile-layout-v2 .bg .mp-poster-content {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "trailer trailer"
      "poster crew";
    column-gap: 22px;
    row-gap: 20px;
    width: 100%;
    height: auto;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .movie-mobile-layout-v2 .mp-poster-video-img-wrapper {
    display: contents;
  }

  .movie-mobile-layout-v2 .mp-poster {
    grid-area: poster;
    position: static;
    float: none;
    width: 145px !important;
    height: auto !important;
    max-height: none;
    margin: 0;
  }

  .movie-mobile-layout-v2 .mp-poster img {
    display: block;
    width: 145px !important;
    height: auto !important;
    max-height: 220px;
    object-fit: cover;
  }

  .movie-mobile-layout-v2 .movie-mobile-crew {
    grid-area: crew;
    display: block !important;
    min-width: 0;
    padding: 2px 20px 0 0;
    color: #4a4a4a;
    font-family: "Source Sans Pro";
    font-size: 16px;
    line-height: 26px;
  }

  .movie-mobile-layout-v2 .movie-mobile-crew .details {
    color: #4a4a4a;
    font-weight: 400;
    text-transform: none;
  }

  .movie-mobile-layout-v2 .movie-mobile-crew .dcontent,
  .movie-mobile-layout-v2 .movie-mobile-crew a {
    color: var(--hyperlink_color);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid #bfcacf;
  }

  .movie-mobile-layout-v2 .movie-mobile-crew .dcontent {
    border-bottom: 0;
  }

  /* Compact desktop rankings sit directly below the cast. This is the
     same shared block used by mobile, with desktop-only dimensions that
     keep three or four cards on one line when space allows. */
  .movie-mobile-layout-v2 .movie-mobile-crew > .filminfo-section-ranking-wrapper {
    display: block;
    float: none;
    width: 100%;
    margin: 12px 0 0;
    padding: 0;
  }

  .movie-mobile-layout-v2 .movie-mobile-crew > .filminfo-section-ranking-wrapper .filminfo-section-ranking-wrapper-np {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 !important;
  }

  .movie-mobile-layout-v2 .movie-mobile-crew > .filminfo-section-ranking-wrapper .filminfo-section-ranking {
    flex: 0 0 auto;
    min-width: 76px;
    margin: 0;
  }

  .movie-mobile-layout-v2 .movie-mobile-crew > .filminfo-section-ranking-wrapper .filminfo-section-ranking a > div {
    padding: 4px 9px 3px;
  }

  .movie-mobile-layout-v2 .movie-mobile-crew > .filminfo-section-ranking-wrapper .filminfo-ranking-rank {
    font-size: 30px;
    line-height: 30px;
  }

  .movie-mobile-layout-v2 .movie-mobile-crew > .filminfo-section-ranking-wrapper .filminfo-ranking-category {
    font-size: 12.6px;
    line-height: 19px;
    white-space: nowrap;
  }

  .movie-mobile-layout-v2 .mp-trailer-image {
    grid-area: trailer;
    float: none;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    margin: 0;
    overflow: hidden;
    text-align: center;
  }

  /* The desktop player used to be forced into a 350/360px-high box.
     Its width is fluid, so that box was slightly wider than the 16:9
     video and the browser added black strips on both sides. Keep the
     complete frame visible while making the player itself exactly 16:9. */
  .movie-mobile-layout-v2 .mp-trailer-image #MafabPlayerVideo {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
  }

  .movie-mobile-layout-v2 .mp-poster img,
  .movie-mobile-layout-v2 .mp-trailer-image {
    border-radius: 11px;
  }

  /* The same staff data is now visible beside the poster. Keep the later
     FILMINFO copy and its metadata in the DOM, but avoid a second visual
     rendering on desktop as mobile already does. */
  .movie-mobile-layout-v2 .filminfo-desktop-staff {
    display: none;
  }

  /* Same state colouring as the mobile bar. The icon font sets its
     colour on the glyph pseudo-element, so that is what has to be
     overridden - see the note in the mobile block. */
  .movie-mobile-layout-v2 .header-rating-container .film-info.desktop .film-info-divider {
    margin: 2px 2px 0;
  }

  .movie-mobile-layout-v2 .movie-comments-link,
  .movie-mobile-layout-v2 .movie-comments-link:hover,
  .movie-mobile-layout-v2 .movie-comments-link:focus {
    color: inherit;
    text-decoration: none;
  }

  /* Mobile browsers retain :hover after a tap. Some global link rules
     then underline the icon and count on different baselines, so keep
     this compact action-bar link completely underline-free. */
  .movie-mobile-layout-v2 .movie-mobile-action-items .movie-comments-link,
  .movie-mobile-layout-v2 .movie-mobile-action-items .movie-comments-link:hover,
  .movie-mobile-layout-v2 .movie-mobile-action-items .movie-comments-link:focus,
  .movie-mobile-layout-v2 .movie-mobile-action-items .movie-comments-link:active,
  .movie-mobile-layout-v2 .movie-mobile-action-items .movie-comments-link *,
  .movie-mobile-layout-v2 .movie-mobile-action-items .movie-comments-link:hover * {
    border-bottom: 0 !important;
    text-decoration: none !important;
  }

  .movie-mobile-layout-v2 .film-info.desktop .movie-action-active .film-info-icon::before {
    color: var(--main-red);
  }
}

/* Between the mobile layout and the fixed two-column desktop layout the
   movie column occupies the full page width. The old negative right
   margin made the media row bleed into the viewport edge at tablet
   widths, while the left side retained its normal gutter. */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .movie-mobile-layout-v2 .movie-mobile-flow-bg {
    margin-right: 15px;
  }
}

/* There is no useful hero to show when both the trailer and the real
   cover are missing. Keep the player-owned wrapper in the DOM so its
   responsive restore path remains unchanged, but collapse only the empty
   media row. The poster and crew continue in the second desktop row. */
@media only screen and (min-width: 768px) {
  .movie-mobile-layout-v2.movie-no-hero-media .bg .mp-poster-content {
    grid-template-rows: auto;
    grid-template-areas: "poster crew";
  }
}

.movie-mobile-layout-v2.movie-no-hero-media .mp-trailer-image {
  display: none !important;
  background-image: none !important;
}

/* The dedicated trailer/poster slots stay mobile-only. The ranking slot is
   also hidden by default, then enabled at the active breakpoint when it
   actually contains cards. */
.movie-mobile-layout-v2 .movie-mobile-trailer-slot,
.movie-mobile-layout-v2 .movie-mobile-poster-slot,
.movie-mobile-layout-v2 .movie-mobile-ranking-slot {
  display: none;
}

/* Keep the existing bookmark control in the movie header at every
   redesigned breakpoint. This avoids covering player controls and also
   gives films without hero media the same stable placement. */
.movie-mobile-layout-v2 .new-movie-title-container {
  position: relative;
}

.movie-mobile-layout-v2 .new-movie-title-container .star-movie {
  display: block;
  position: absolute;
  top: 0;
  right: 24px;
  width: 48px;
  height: 55px;
}

/* The ribbon used to live inside .movie-profile, where its saved-rating
   backgrounds are defined near the base movie styles. Moving the same
   cached button into the title header intentionally kept its AJAX state
   hydration, but also moved it outside that selector. Preserve the exact
   dimensions and icon inset of that original coloured ribbon, then mirror
   its state-dependent artwork so changing location never changes its
   appearance. */
.movie-mobile-layout-v2 .new-movie-title-container button.mfb-btn-allinone-main {
  width: 48px;
  height: 55px;
  background-image: url("/img/mafab_ribbon_icon_new.svg?v=6");
}

.movie-mobile-layout-v2 .new-movie-title-container button.mfb-btn-allinone-main .fa {
  top: 11px;
}

.movie-mobile-layout-v2 .new-movie-title-container button.mfb-btn-allinone-main[data-rating="0"] {
  background-image: url("/img/mafab_ribbon_icon_new_r0.svg");
}

.movie-mobile-layout-v2 .new-movie-title-container button.mfb-btn-allinone-main[data-rating="1"] {
  background-image: url("/img/mafab_ribbon_icon_new_r1.svg");
}

.movie-mobile-layout-v2 .new-movie-title-container button.mfb-btn-allinone-main[data-rating="2"] {
  background-image: url("/img/mafab_ribbon_icon_new_r2.svg");
}

.movie-mobile-layout-v2 .new-movie-title-container button.mfb-btn-allinone-main[data-rating="3"] {
  background-image: url("/img/mafab_ribbon_icon_new_r3.svg");
}

.movie-mobile-layout-v2 .new-movie-title-container button.mfb-btn-allinone-main[data-rating="4"] {
  background-image: url("/img/mafab_ribbon_icon_new_r4.svg");
}

.movie-mobile-layout-v2 .new-movie-title-container button.mfb-btn-allinone-main[data-rating="5"] {
  background-image: url("/img/mafab_ribbon_icon_new_r5.svg");
}

.movie-mobile-layout-v2 .new-movie-title-container button.mfb-btn-allinone-main[data-rating="0"] .fa,
.movie-mobile-layout-v2 .new-movie-title-container button.mfb-btn-allinone-main[data-rating="1"] .fa,
.movie-mobile-layout-v2 .new-movie-title-container button.mfb-btn-allinone-main[data-rating="2"] .fa,
.movie-mobile-layout-v2 .new-movie-title-container button.mfb-btn-allinone-main[data-rating="3"] .fa,
.movie-mobile-layout-v2 .new-movie-title-container button.mfb-btn-allinone-main[data-rating="4"] .fa,
.movie-mobile-layout-v2 .new-movie-title-container button.mfb-btn-allinone-main[data-rating="5"] .fa {
  color: #fff !important;
  text-shadow: none !important;
}

@media only screen and (max-width: 767px) {
  /* Spacing follows the airedesign branch, which sat the trailer
     closer to the title than this did. Two things created the gap:
     the title container had no reduced bottom padding, and the tab
     bar keeps its default 35px top margin. */
  .movie-mobile-layout-v2 .new-movie-title-container {
    padding-bottom: 14px;
  }

  .movie-mobile-layout-v2 #content-switching-btns {
    margin-top: 0;
  }

  .movie-mobile-layout-v2 #content-switching-btns .tab-buttons-container {
    margin-left: 15px;
    margin-right: 15px;
  }

  .movie-mobile-layout-v2 .movie-mobile-trailer-slot.is-active {
    display: block;
    width: calc(100% - 30px);
    height: auto;
    max-height: none;
    aspect-ratio: 16 / 9;
    margin: 4px 15px 18px;
    overflow: hidden;
    border-radius: 11px;
    background: #000;
    box-shadow: 0 1px 3px rgba(0, 45, 66, 0.18);
  }

  /* The class is emitted with the initial HTML, so an empty player slot
     never occupies mobile space and cannot cause a post-load shift. */
  .movie-mobile-layout-v2.movie-no-hero-media .movie-mobile-trailer-slot {
    display: none !important;
    width: 0;
    height: 0;
    max-height: 0;
    margin: 0;
    border: 0;
    box-shadow: none;
  }

  /* .mp-poster-content arrives here carrying the sizing it had in the
     poster row, and now holds only the player. */
  .movie-mobile-layout-v2 .movie-mobile-trailer-slot .mp-poster-content {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0 !important;
  }

  .movie-mobile-layout-v2 .movie-mobile-trailer-slot .mp-trailer-image {
    width: 100% !important;
    height: auto !important;
    max-height: none;
    aspect-ratio: 16 / 9;
    margin-top: 0;
    float: none;
    border-radius: 11px;
    background-size: cover;
    background-position-x: center;
    overflow: hidden;
    text-align: center;
  }

  .movie-mobile-layout-v2 .movie-mobile-trailer-slot .mp-trailer-image #MafabPlayerVideo {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
  }

  /* The legacy no-top-comment layout reserved 110px beside the media for
     the poster. In layout v2 that poster has already been moved to its
     own row, so keeping the subtraction exposes the black slot
     background beside cover-only heroes. The full selector is deliberate:
     it outranks the older four-class !important rule above. */
  .movie-mobile-layout-v2 .movie-mobile-trailer-slot .mp-poster-content .mp-poster-video-img-wrapper.no-top-comment .mp-trailer-image {
    width: 100% !important;
  }

  /* Centres the title overlay in the frame rather than letting it sit
     against the top edge. */
  .movie-mobile-layout-v2 .movie-mobile-trailer-slot .mp-titlebox {
    width: 100% !important;
    height: 100%;
    display: flex;
    align-items: center;
  }

  /* Poster and credits, moved down out of .mp-poster-content so the
     player could travel up inside it. */
  .movie-mobile-layout-v2 .movie-mobile-poster-slot.is-active {
    display: flex;
    align-items: flex-start;
    width: 100%;
    min-height: 194px;
    padding: 18px 15px 8px;
    background: #fff;
  }

  /* Before placeTrailer() runs, the real media row still exists in its
     desktop source position. Keep that copy out of layout while the final
     trailer/poster slots above reserve exactly where it will appear. Once
     moved, it is no longer a direct child of .movie-mobile-flow-bg and the
     rule stops matching automatically. */
  .movie-mobile-layout-v2 .movie-mobile-flow-bg > .mp-poster-content,
  .movie-mobile-layout-v2 .movie-mobile-flow-bg > .star-movie {
    display: none;
  }

  .movie-mobile-layout-v2 .movie-mobile-poster-slot .mp-poster {
    position: static;
    flex: 0 0 112px;
    width: 112px !important;
    height: auto !important;
    max-height: none;
    margin: 0 20px 0 0;
  }

  .movie-mobile-layout-v2 .movie-mobile-poster-slot .mp-poster img {
    display: block;
    width: 112px !important;
    height: auto !important;
    max-height: 180px;
    object-fit: cover;
    border-radius: 8px;
  }

  /* The mockup has no "Poszterek (N)" caption under the mobile poster.
     Still present on desktop. */
  .movie-mobile-layout-v2 .movie-mobile-poster-slot .mp-more-posters {
    display: none;
  }

  .movie-mobile-layout-v2 .movie-mobile-poster-slot .movie-mobile-crew {
    flex: 1 1 0;
    min-width: 0;
    min-height: 168px;
    padding-top: 3px;
    color: #4a4a4a;
    font-family: "Source Sans Pro";
    font-size: 14px;
    line-height: 22px;
  }

  /* Labels read as plain text; only the names are links, underlined
     with a rule rather than text-decoration. */
  .movie-mobile-layout-v2 .movie-mobile-crew .details {
    color: #4a4a4a;
    font-weight: 400;
    text-transform: none;
  }

  .movie-mobile-layout-v2 .movie-mobile-crew .dcontent,
  .movie-mobile-layout-v2 .movie-mobile-crew a {
    color: var(--hyperlink_color);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid #bfcacf;
  }

  .movie-mobile-layout-v2 .movie-mobile-crew .dcontent {
    border-bottom: 0;
  }

  /* These full credit rows are repeated in condensed form beside the
     poster on mobile. Keep their markup (including Movie microdata)
     for desktop, but do not show the duplicate copy further down in
     FILMINFO on narrow screens. */
  .movie-mobile-layout-v2 .filminfo-desktop-staff {
    display: none;
  }

  /* The one shared ranking block is moved here on mobile, directly
     below the compact poster/credits row and above the AI overview.
     Its Bootstrap column normally floats, so release that float to
     make the slot reserve the ranking block height. */
  .movie-mobile-layout-v2 .movie-mobile-ranking-slot.is-active {
    display: block;
    clear: both;
    width: 100%;
  }

  /* Ranking cards have a stable single-row mobile height. Reserve it only
     for movies that actually have rankings, until their shared DOM block
     is moved into this slot. */
  .movie-mobile-layout-v2 .movie-mobile-ranking-slot.is-active.has-ranking {
    min-height: 110px;
  }

  /* Ranking markup is emitted in one of two legacy FILMINFO locations.
     Keep that source location out of layout until the parser-time move;
     otherwise it can briefly occupy both its old and final positions. */
  .movie-mobile-layout-v2 .filminfo-section-ranking-wrapper {
    display: none;
  }

  .movie-mobile-layout-v2 .movie-mobile-ranking-slot .filminfo-section-ranking-wrapper {
    display: block;
    float: none;
    margin: 12px 0;
    padding: 0;
  }
}

/* ==================================================================
   AI summary card - shared by mobile and desktop.

   Written once, outside the media query, since the card looks the
   same at both widths. Only the teaser length differs, and that is
   decided in the collapse script, not here.

   The summary reuses the top-comment box (.movieComBox), which is
   why it looked like a comment to begin with.
   ================================================================== */
.movie-mobile-layout-v2 .movieAiSummary {
  width: 100%;
  margin: 12px 0 4px !important;
  padding: 0 !important;
  border: 1px solid #edf0f2;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 45, 66, 0.10);
  overflow: hidden;
}

/* .comment-box carries min-height:220px for real comments, which left
   a large empty area under the teaser. */
.movie-mobile-layout-v2 .movieAiSummary .comment-box {
  min-height: 0;
  margin: 0;
  padding: 14px 44px 14px 16px;
  background: #fff;
  position: relative;
}

.movie-mobile-layout-v2 .movieAiSummary #comment-box-left {
  display: none;
}

.movie-mobile-layout-v2 .movieAiSummary #comment-box-right {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 !important;
}

.movie-mobile-layout-v2 .movieAiSummary #comment-box-text {
  color: #333;
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
}

/* The chevron is drawn on the "Tobb" link rather than on the card, so
   that expanding hides it for free: the collapse script sets
   display:none on .movie-ai-summary-control, the link, and with it
   this arrow. The link itself becomes an invisible full-height hit
   area on the right, so its existing click handler still runs.
   border/text-decoration are forced off - the link styling drew a
   short rule along the bottom of the card. */
.movie-mobile-layout-v2 .movieAiSummary .movie-ai-summary-more {
  position: absolute;
  top: 0;
  right: 0;
  width: 42px;
  height: 100%;
  margin: 0;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  font-size: 0;
}

.movie-mobile-layout-v2 .movieAiSummary .movie-ai-summary-more::after {
  content: "\f105";
  position: absolute;
  top: calc(50% - 14px);
  left: 0;
  width: 100%;
  text-align: center;
  font-family: FontAwesome;
  color: #4a4a4a;
  font-size: 22px;
  font-weight: normal;
  line-height: 28px;
}

/* Keep the real-user fallback review visually consistent with the AI
   overview card without changing any of its links or expand/collapse
   markup. */
.movie-mobile-layout-v2 .movieTopComment {
  width: 100%;
  margin: 12px 0 4px !important;
  padding: 0 !important;
  border: 1px solid #edf0f2;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 45, 66, 0.10);
  overflow: hidden;
}

.movie-mobile-layout-v2 .movieTopComment .comment-box {
  display: block;
  min-height: 0;
  margin: 0;
  padding: 14px 16px 12px;
  background: #fff;
  position: relative;
}

.movie-mobile-layout-v2 .movieTopComment #comment-box-left {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0 !important;
}

.movie-mobile-layout-v2 .movieTopComment #comment-box-left > .icon-icon-quotation-marks {
  flex: 0 0 auto;
  float: none;
  margin: 0 10px 0 0;
  color: #b8ced7;
  font-size: 22px;
  line-height: 22px;
}

.movie-mobile-layout-v2 .movieTopComment #comment-box-left #comment-box-author-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin: 0;
  line-height: 20px;
}

.movie-mobile-layout-v2 .movieTopComment #comment-box-left #comment-box-author-rating > span {
  width: auto;
  height: auto;
  font-size: 15px;
  line-height: 20px;
}

.movie-mobile-layout-v2 .movieTopComment #comment-box-left #comment-box-author-rating > span a {
  color: #002d42;
  text-decoration: none;
}

.movie-mobile-layout-v2 .movieTopComment #comment-box-left #comment-box-author-rating > span a:hover {
  color: var(--hyperlink_color_hover);
}

.movie-mobile-layout-v2 .movieTopComment .cmti-stars {
  margin-left: 0;
  line-height: 18px;
}

.movie-mobile-layout-v2 .movieTopComment #comment-box-right {
  display: block;
  width: 100%;
  margin: 8px 0 0;
  padding: 0 !important;
}

.movie-mobile-layout-v2 .movieTopComment .comment-box #comment-box-right #comment-box-text {
  color: #333;
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
}

.movie-mobile-layout-v2 .movieTopComment #comment-box-footer {
  position: static;
  margin: 10px 0 0;
}

.movie-mobile-layout-v2 .movieTopComment #comment-box-more-comments {
  margin: 0;
}

.movie-mobile-layout-v2 .movieTopComment #comment-box-more-comments a {
  font-size: 14px;
  line-height: 18px;
}

.movie-mobile-layout-v2 .movieTopComment #comment-box-more-comments .icon-icon-arrow-right {
  margin-left: 4px;
  color: #ed044e;
  font-size: 10px;
}

@media only screen and (min-width: 768px) {
  /* Match both overview cards to the same inset-left, extended-right row. */
  .movie-mobile-layout-v2 .movieAiSummary,
  .movie-mobile-layout-v2 .movieTopComment {
    width: auto;
    margin-left: 15px !important;
    margin-right: -15px !important;
  }
}

/* ------------------------------------------------------------------
   Mobile movie profile redesign - STEP 1: layout scaffold only.

   Turns the two containers that hold the profile boxes into flex
   columns so later steps can resequence boxes with `order:` alone.
   Nothing is moved in the DOM: the player, the ad slots, the allinone
   buttons and infinite scroll all keep the structure they expect, so
   fsp.js can still relocate .fsp-embed-player the way it always has.

   No `order` is set here on purpose. Flex items default to order 0 and
   render in document order, so this step must look identical to master.
   If anything shifts, it is this scaffold and nothing else.
   ------------------------------------------------------------------ */
@media only screen and (max-width: 767px) {
  .movie-mobile-layout-v2 #tab-home,
  .movie-mobile-layout-v2 #left_col_part1 {
    display: flex;
    flex-direction: column;
  }

  /* Flex ignores floats, so the Bootstrap clearfix pseudo-elements would
     become stray zero-height items. Drop them on these two containers. */
  .movie-mobile-layout-v2 #tab-home::before,
  .movie-mobile-layout-v2 #tab-home::after,
  .movie-mobile-layout-v2 #left_col_part1::before,
  .movie-mobile-layout-v2 #left_col_part1::after {
    display: none;
  }

  /* ----------------------------------------------------------------
     STEP 3: poster region.

     Master lays this out by absolutely positioning the poster at a
     fixed offset (top:220px) on top of the trailer, with .bg and
     .mp-poster-content given fixed heights to reserve the space. The
     redesign puts the poster and a condensed credits block side by
     side in normal flow, with the trailer full width underneath, so
     all of those fixed values are unwound here.
     ---------------------------------------------------------------- */
  .movie-mobile-layout-v2 .bg {
    height: auto;
  }

  .movie-mobile-layout-v2 .movie-mobile-crew-line {
    margin-bottom: 1px;
  }

  /* ----------------------------------------------------------------
     STEP 4: action bar.

     Five items in the mockup order - votes, fans, library, comments,
     then the rating button pushed to the right edge.
     ---------------------------------------------------------------- */
  /* Sits directly under the tab bar: the tabs carry a 10px bottom
     margin and .bg a 5px top padding, which together pushed the row
     down away from them. */
  .movie-mobile-layout-v2 #content-switching-btns {
    margin-bottom: 0 !important;
  }

  .movie-mobile-layout-v2 .bg {
    padding-top: 0;
  }

  .movie-mobile-layout-v2 .movie-mobile-action-items {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 40px;
    padding: 0 15px;
  }

  .movie-mobile-layout-v2 .movie-mobile-action {
    display: flex;
    align-items: center;
    margin-right: 18px;
    white-space: nowrap;
    font-size: 14px;
    color: #1a1a1a;
  }

  .movie-mobile-layout-v2 .movie-mobile-action .film-info-icon {
    margin-right: 4px;
    font-size: 16px;
  }

  /* The vote-count star sits slightly low in the icon font compared
     with the heart, library and comment glyphs beside it. */
  .movie-mobile-layout-v2 .movie-ratings-trigger .film-info-icon {
    transform: translateY(-1px);
  }

  /* Same weight as the ERTEKELJ label, a size down from the icons. */
  .movie-mobile-layout-v2 .movie-mobile-action .value {
    font-size: 13px;
    font-weight: 700;
  }

  /* The icon font hardcodes its colour on the glyph pseudo-element
     (.icon-icon-heart:before in style-icons.css), so setting color on
     .film-info-icon never reached it - the counts changed colour and
     the icons did not. Both states are set on ::before instead. */
  .movie-mobile-layout-v2 .movie-mobile-action .film-info-icon::before {
    color: #1a1a1a;
    /* mafab-icons ships one weight, so font-weight:bold would only get
       the browser to fake it, which smears these glyphs. Stroking the
       outline thickens them evenly instead. currentColor keeps the
       stroke matching whichever state the icon is in. */
    -webkit-text-stroke: 0.5px currentColor;
  }

  /* Highlighted when this user has voted, favourited, shelved or
     commented on the movie - so the bar reads as personal state, not
     just totals. Set server side in movie_profile_dynamic.php. */
  .movie-mobile-layout-v2 .movie-action-active .film-info-icon::before {
    color: var(--main-red);
  }

  /* Only the icon carries the state; the count stays black either way. */
  .movie-mobile-layout-v2 .movie-mobile-action .value,
  .movie-mobile-layout-v2 .movie-action-active .value {
    color: #1a1a1a;
  }

  /* .film-info paints itself #ECEEEF and pins to 29px for the old
     two-icon row. White, and free to size to the new one. */
  .movie-mobile-layout-v2 .movie-profile-dynamic-film-info-mobile {
    height: auto;
    min-height: 40px;
    padding: 0;
    background-color: #fff;
  }

  /* Pushed to the right edge, away from the counters. The label lives
     inside the button so the whole thing is one tap target - the click
     is bound to .mfb-btn-allinone, so a label outside it would be dead.

     .mfb-btn-allinone-standalone carries ribbon chrome from
     allinone_window.css: position:absolute at top-left, a fixed 33x44
     box, a ribbon background image, and a white icon meant to sit on
     that ribbon. Absolutely positioned, it landed on top of the votes
     counter. The class has to stay - allInOneButtons() finds the button
     by it to hydrate saved state - so the chrome is unwound instead.
     The <i class="fa"> is still swapped by allinone_window.js between
     fa-star-o / fa-star / fa-eye / fa-thumbs-down to show that state. */
  .movie-mobile-layout-v2 .movie-mobile-action-items .movie-mobile-rate-btn {
    position: static;
    display: flex;
    align-items: center;
    width: auto;
    height: auto;
    margin-left: auto;
    padding: 6px 0 6px 12px;
    background: none;
    background-image: none;
    border: 0;
    line-height: 1;
  }

  /* Also absolute in allinone_window.css, and coloured white with
     !important once data-init flips to true - invisible without a
     ribbon behind it. Drawn as a red ring around the glyph, as in the
     mockup; the glyph itself keeps changing with saved state.

     The full button signature is in the selector to beat both white-icon
     rules in allinone_window.css, including its more specific initialized
     hover state. Without that, the glyph turns white against this white
     background while hovering or during the click that opens the modal. */
  .movie-mobile-layout-v2 .movie-mobile-action-items button.movie-mobile-rate-btn.mfb-btn-allinone.mfb-btn-allinone-standalone .fa {
    position: static;
    top: auto;
    left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 2px solid var(--main-red);
    border-radius: 50%;
    font-size: 12px;
    line-height: 1;
    color: var(--main-red) !important;
  }

  /* Label in the same near-black as the counters; only the ring is
     red, so the button reads as one of the row rather than an alert. */
  .movie-mobile-layout-v2 .movie-mobile-rate-label {
    margin-left: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #1a1a1a;
  }

  /* Pin the bookmark to the title card top edge, where the header
     shadow ends; keep its existing right-hand inset. */
  .movie-mobile-layout-v2 .new-movie-title-container .star-movie {
    right: 10px;
  }
}

/* movies(): title bar */
.episode-line {
  font-family: Source Sans Pro;
  font-size: 12px;
  color: #000407;
  font-weight: normal;
  margin-bottom: 2px;
  position: relative;
  z-index: 1;
  display: block;
  margin-bottom: 5px;
}
.episode-line .block {
  /*white-space: nowrap;*/
  height: 18px;
  float: left;
  display: contents;
}
.episode-line a,
.episode-line a:focus,
.episode-line a:hover {
  color: #000407;
  text-decoration: underline;
  /*display: inline-block;*/
  /*float: left;*/
}
.episode-line .icon-icon-arrow-right {
  display: inline-block;
  font-family: Source Sans Pro !important;
  font-size: 12px;
  color: #000407;
  margin: 0px;
  /*float: left;*/
}
.episode-line .icon-icon-arrow-right::before {
  font-family: mafab-icons;
  color: #4A4A4A;
  margin-right: 2px;
  font-size: 10px;
}