.franchise-table-body{display:flex;flex-direction:column;gap:10px}

/* card */
.franchise-card{
display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas:
        "left main"
        "left actions";
    padding: 5px;
    background: #1d1d1d;
}

/* left */
.fr-card-left{grid-area: left;
    gap: 8px;
    align-items: flex-start;
    position: relative;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas:
        "left actions"
        "left main";}
.fr-card-num{
  position:absolute;top:4px;left:4px;z-index:2;
  font:12px/1 sans-serif;padding:4px 6px;border-radius:8px;
  background:rgba(0,0,0,.75);color:rgba(255,255,255,.9)
}
.fr-card-poster{position:relative;width:70px;flex:0 0 70px}
.fr-card-poster img{
  width:70px;height:96px;object-fit:cover;display:block;
  border-radius:10px;border:1px solid rgba(255,255,255,.08)
}

/* badge */
.source-badge{
  position:absolute;left:6px;bottom:6px;
  font:10px/1 sans-serif;padding:4px 6px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.55);color:rgba(255,255,255,.9)
}

/* main */
.fr-card-main{grid-area:main;min-width:0}
.fr-card-title{
  font-size:15px;font-weight:600;line-height:1.3;overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2
}
.fr-title-link{color:rgba(255,255,255,.92);text-decoration:none}
.fr-title-link:hover{text-decoration:underline}

.fr-card-type,.fr-card-year{display:inline-block;margin-top:4px;font-size:12px;opacity:.65}
.fr-card-type{font-style:italic}
.fr-card-year{margin-left:6px;white-space:nowrap}

/* actions */
.fr-card-actions{grid-area:actions;display:flex;align-items:center;gap:10px}
.fr-card-rating{font-size:13px;font-weight:700;white-space:nowrap;margin-right:auto}
span.rating-value{padding:5px;color:#000;border-radius:5px}

/* play */
.play-button{
  width:40px;height:40px;border-radius:10px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:.15s
}
.play-button:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22)}
.play-button:active{transform:scale(.96)}
.play-button.unavailable{opacity:.45;cursor:default}
.play-button.unavailable:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);transform:none}

.play-icon{
    width: 0;
    height: 0;
    border: solid;
    border-width: 5px 0 5px 10px;
    border-color: transparent transparent transparent rgba(255, 255, 255, .90);
    transform: translateX(1px);
}


/* ============ Franchise header (adaptive), poster max 200x300 ============ */

.franchise-detail .franchise-header{display: flex;gap: 10px;flex-direction: column;padding: 12px;}

.franchise-detail .franchise-poster{flex:0 0 auto;display: flex;justify-content: center;}
.franchise-detail .franchise-poster img{
  object-fit:cover;
  display:block;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08)
}

.franchise-detail .franchise-meta{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:12px
}
.franchise-detail .meta-item{
  display:flex;gap:8px;font-size:14px;color:rgba(255,255,255,.75)
}
.franchise-detail .meta-label{color:rgba(255,255,255,.5)}
.franchise-title{margin:10px 0;font-size: 19px;}
.franchise-detail .franchise-description{
  font-size:14px;line-height:1.45;color:rgba(255,255,255,.78)
}

a.back-button{background:#222;padding:7px 20px;border-radius:10px}
.meta-rating{background:#212121;padding:5px 10px;width:max-content}
.franchise-description p{margin-bottom:10px;}
/* mobile */
@media (max-width:720px){
  .franchise-detail .franchise-header{flex-direction:column;padding:12px;}
  .franchise-detail .franchise-poster{}
  .franchise-detail .franchise-poster img{max-width:100%}
  .franchise-detail .franchise-meta{
    display:grid;grid-template-columns:1fr 1fr;gap:10px 12px
  }
  .franchise-detail .meta-item{
    font-size:13px;gap:6px;align-items:baseline;min-width:0
  }
.franchise-detail .franchise-description{grid-column: 1 / -1;}
}

@media (max-width:420px){
  .franchise-detail .franchise-poster img{/* width:180px; *//* height:270px; */}
}


/* ============ Player modal (single definition, no duplicates) ============ */

.player-modal{
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
}

.player-modal-content{
  position: relative;
  width: 90%;
  max-width: 1200px;
  background: #000;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}

.player-container{
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 10px;
}

.player-container iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.player-modal .close{
  position: absolute;
  top: -16px;
  right: -16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  z-index: 1000000;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 22px;
  line-height: 1;
}

.player-modal .close:hover{
  color: #ff5722;
}

.no-player{
  font-size: 14px;
  color: #888;
  padding: 10px 0;
  text-align: center;
}
/* ===== Desktop: actions in TOP-RIGHT of whole card ===== */
@media (min-width: 860px){

  /* 3 колонки: left | main | actions */
  .franchise-card{
display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas:
        "left main"
        "left actions";
    padding: 5px;
  }


  .fr-card-actions{
    grid-area: actions;

    display:flex;
    flex-direction: column;  
    align-items: flex-end;  

    align-self: start;    
    justify-self: end; margin-top: -36px; 
  }

  .fr-card-rating{
   margin: 5px 7px 0 0;
  }
}






/* =========================================================
   FRANCHISE CATALOG (totfilm) – full styles
   Works with:
   #franchise-list.franchise-list.view-list / view-grid
   item HTML: .franchise-item > .franchise-poster + .franchise-content
   ========================================================= */

.franchise-section{
  --bd: rgba(255,255,255,.10);
  --bd2: rgba(255,255,255,.18);
  --bg: rgba(255,255,255,.04);
  --bg2: rgba(255,255,255,.06);
  --bg3: rgba(0,0,0,.25);
  --tx: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --muted2: rgba(255,255,255,.50);
  --r1: 10px;
  --r2: 14px;
  --gap1: 8px;
  --gap2: 12px;
}

/* ---------- Header block ---------- */

.franchise-header-block .title{
  margin: 0 0 10px;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--tx);
}

.franchise-header-block .subtitle{
font-size: 14px;
    line-height: 1.5;
    color: var(--muted);
    background: #1d1d1d;
    padding: 10px 10px 5px 10px;
    margin-top: 10px;
}

.franchise-header-block .subtitle p{
  margin: 0 0 10px;
}
.franchise-header-block .subtitle p:last-child{
  margin-bottom: 0;
}

/* ---------- Controls ---------- */

.franchise-controls{
display: flex;
    flex-wrap: wrap;
    gap: var(--gap2);
    align-items: center;
    padding: 5px;
}

.franchise-controls.is_disabled,
.franchise-controls.disabled{
  opacity:.6;
  pointer-events:none;
}

/* Search */
.search-container{
  display:flex;
  gap: var(--gap1);
  align-items:center;
  flex: 1 1 225px;
  min-width: 0;
}

.search-container input[type="text"]{
  flex: 1 1 auto;
  min-width:0;
  height: 40px;
  padding: 0 12px;

  border-radius: var(--r1);
  border: 1px solid var(--bd);
  background: var(--bg3);
  color: var(--tx);
  outline:none;
}
.search-container input[type="text"]::placeholder{ color: rgba(255,255,255,.45); }
.search-container input[type="text"]:focus{
  border-color: var(--bd2);
  background: rgba(0,0,0,.32);
}

.search-btn{
height: 35px;
    padding: 0 8px;
    border-radius: var(--r1);
    border: 1px solid var(--bd);
    background: var(--bg2);
    color: var(--tx);
    cursor: pointer;
    white-space: nowrap;
    font-size: 11px;
}
.search-btn:hover{
  background: rgba(255,255,255,.12);
  border-color: var(--bd2);
}

/* View switcher */
.view-toggle{
  display:flex;
  gap: var(--gap1);
  margin-left:auto;
}

.view-btn{
height: 30px;
    border-radius: var(--r1);
    border: 1px solid var(--bd);
    background: var(--bg2);
    color: rgba(255, 255, 255, .85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0 10px;
}
.view-btn:hover{
  background: rgba(255,255,255,.12);
  border-color: var(--bd2);
}
.view-btn.active{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.95);
}

/* ---------- Search active notice ---------- */

.search-active-notice{
  margin-top: 14px;
  padding: 12px;
  border-radius: var(--r2);
  border: 1px solid var(--bd);
  background: var(--bg);

  display:flex;
  gap: var(--gap2);
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;

  color: var(--muted);
}
.search-active-notice .highlight{
  color: var(--tx);
  font-weight:800;
}
.reset-search{
  display:inline-flex;
  align-items:center;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--r1);
  border: 1px solid var(--bd);
  background: var(--bg2);
  color: var(--tx);
  text-decoration:none;
  white-space:nowrap;
}
.reset-search:hover{
  background: rgba(255,255,255,.12);
  border-color: var(--bd2);
}

/* ---------- List / Grid wrapper ---------- */

.franchise-list{
  margin-top: 14px;
}

/* list mode */
.franchise-list.view-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* grid mode: columns depend on data-items-per-row (JS can set), fallback below */
.franchise-list.view-grid{
  display:grid;
  gap:10px;
  grid-template-columns: repeat(4, minmax(0,1fr));padding: 0 5px;
}
@media (max-width: 1150px){
  .franchise-list.view-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 860px){
  .franchise-list.view-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .franchise-list.view-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   ITEM: base
   ========================================================= */

.franchise-list .franchise-item{
background: #1d1d1d;
overflow: hidden;
}

/* reset inner spacing */
.franchise-list .franchise-item h3{
  margin:0;
}
.franchise-list .franchise-item a{
  color: var(--tx);
  text-decoration:none;
}
.franchise-list .franchise-item a:hover{
  text-decoration:underline;
}

/* poster */
.franchise-list .franchise-item .franchise-poster{
  position:relative;
  background: rgba(255,255,255,.03);
}
.franchise-list .franchise-item .franchise-poster a,
.franchise-list .franchise-item .franchise-poster img{
  display:block;
}
.franchise-list .franchise-item .franchise-poster img{
  width:100%;
  object-fit:cover;
}

/* content */
.franchise-list .franchise-item .franchise-content{
  min-width:0;
}

/* title */
.franchise-list .franchise-item h3 a{
  display:-webkit-box;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

/* description */
.franchise-list .franchise-descr{
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;

  display:-webkit-box;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

/* meta row */
.franchise-list .franchise-meta{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
}

.franchise-list .franchise-count{
  font-size: 12px;
  font-weight:700;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.88);
  white-space:nowrap;
}

.franchise-list .watch-all{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--r1);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  white-space:nowrap;
  text-decoration:none;
}
.franchise-list .watch-all:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.18);
}

/* =========================================================
   VIEW: LIST (poster left + text right)
   ========================================================= */

.franchise-list.view-list .franchise-item{
  padding: 12px;
}

.franchise-list.view-list .franchise-item{
  display:grid;
  grid-template-columns: 92px minmax(0,1fr);
  gap: 12px;
  align-items:start;
}

.franchise-list.view-list .franchise-item .franchise-poster{
  width:92px;
  height:138px; /* 2:3 */
  border-radius: 12px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.08);
}

.franchise-list.view-list .franchise-item .franchise-content{
  padding: 0;
}

.franchise-list.view-list .franchise-item h3 a{
  font-size: 15px;
  line-height: 1.25;
  font-weight: 800;
  -webkit-line-clamp: 2;
}

.franchise-list.view-list .franchise-descr{
  margin-top: 6px;
  -webkit-line-clamp: 3;
}

/* =========================================================
   VIEW: GRID (poster + title bottom; hide description)
   ========================================================= */

.franchise-list.view-grid .franchise-item{
  display:flex;
  flex-direction:column;
}

.franchise-list.view-grid .franchise-item .franchise-poster{
  width:100%;
  aspect-ratio: 2 / 3;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.franchise-list.view-grid .franchise-item .franchise-content{
  padding: 10px 10px 12px;
}

.franchise-list.view-grid .franchise-item h3 a{
  font-size: 14px;
  line-height: 1.25;
  font-weight: 800;
  -webkit-line-clamp: 2;
}

.franchise-list.view-grid .franchise-descr{
  display:none;
}

.franchise-list.view-grid .franchise-meta{
  margin-top: 8px;
}

.franchise-list.view-grid .watch-all{
  display:none; /* в плитке оставляем только постер+название (+ можно оставить count) */
}

/* =========================================================
   Mobile polish
   ========================================================= */

@media (max-width: 720px){
  .franchise-header-block .title{
    font-size: 20px;
  }

  .franchise-list.view-list .franchise-item{
    grid-template-columns: 84px minmax(0,1fr);
    gap: 10px;
    padding: 10px;
  }

  .franchise-list.view-list .franchise-item .franchise-poster{
    width:84px;
    height:126px;
  }

  .franchise-list.view-list .franchise-item h3 a{
    font-size: 14px;
  }

  .franchise-list .franchise-descr{
    font-size: 12px;
  }
}

/* =========================================================
   Pagination
   ========================================================= */

.pagination{
    margin-top: 18px;
    padding: 12px;
    background: #20282b;
    text-align: center;
}

.pagination a,
.pagination span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  margin: 4px 6px 0 0;
  border-radius: var(--r1);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
  text-decoration:none;
}

.pagination a:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
}

.pagination .current,
.pagination span[aria-current="page"]{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.95);
}

/* =========================================================
   Breadcrumbs
   ========================================================= */
.breadcrumbs{
font-size: 12px;
    opacity: .9;
    margin-bottom: 8px;
}
.franchise-section .breadcrumbs{
  margin-top: 18px;
}

.breadcrumbs-container {
    font-size: 12px;
    line-height: 1.2;
    opacity: .85;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.franchise-section .breadcrumbs-item a{
  color: rgba(255,255,255,.80);
  text-decoration:none;
}

.franchise-section .breadcrumbs-item a:hover{
  text-decoration:underline;
}

.franchise-section .breadcrumbs-separator{
  margin: 0 6px;
  opacity:.6;
}
/* ===== GRID: 4 cards on desktop ===== */
@media (min-width: 1200px){
  #franchise-list.view-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr))!important;
  }
}

/* laptop */
@media (min-width: 900px) and (max-width: 1199px){
  #franchise-list.view-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr))!important;
  }
}

/* tablet */
@media (min-width: 600px) and (max-width: 899px){
  #franchise-list.view-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* mobile */
@media (max-width: 599px){
  #franchise-list.view-grid{
    grid-template-columns: 1fr;
  }
}


















/* === Franchise fullstory widget (lightweight, clean) === */

/* === compact, same look === */
.franchise-fullstory-widget{background:#000;padding:0 0 10px;margin-bottom: 10px;}
.franchise-fullstory-header{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;font-size:14px;color:#e0dfdc;border:1px solid #1a1a1a;border-left:0;border-right:0}
.franchise-fullstory-header h2{margin:0;display:flex;align-items:center;font-weight:700;color:#fff;font-size: 18px;}
.franchise-fullstory-header h2 svg{width:16px;margin:2px 10px 0 0}
.franchise-fullstory-header h2 a{color:#a4a4a4;text-decoration:none;transition:.2s}
.franchise-fullstory-header h2 a:hover{color:#4a76a8}

.franchise-fullstory-navigation{display:flex;gap:10px}

/* shared button style (nav + show-more) */
.franchise-fullstory-nav-button,.franchise-fullstory-show-more-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:#242424;border:1px solid #404040;outline:1px solid #111;
  color:silver;text-decoration:none;cursor:pointer;
  padding:4px 8px;font-size:13px;line-height:16px;border-radius:1px;
  transition:.15s
}
.franchise-fullstory-nav-button:hover,.franchise-fullstory-show-more-btn:hover{background:#404040;color:#fff}
.franchise-fullstory-nav-button.disabled{opacity:.5;cursor:not-allowed}

.franchise-fullstory-table-row{
  display:flex;align-items:center;position:relative;
  min-height:40px;line-height:16px;
  padding:8px 10px 8px 0;
  color:#ccc;background:#111;text-shadow:0 1px 1px #0009;
  border-bottom:1px solid #5e5e5e;border-left:3px solid #7878781a;
}
.franchise-fullstory-table-row:hover{background:rgba(0,0,0,.2)}
.franchise-fullstory-table-row.current-item{background:#1a2332;border-left-color:#4a76a8;color:#fff}
.franchise-fullstory-table-row.current-item:hover{background:#1a2332}

.franchise-fullstory-number-cell{flex:0 0 20px;display:flex;justify-content:center}
.franchise-fullstory-title-cell{flex:1;text-align:left;margin-left: 10px;}
.franchise-fullstory-year-cell{flex:0 0 60px;display:flex;justify-content:center}
.franchise-fullstory-rating-cell,.franchise-fullstory-player-cell{flex:0 0 60px;display:flex;justify-content:center}

/* poster block (if used) */
.franchise-fullstory-poster-cell{position:relative;width:50px;height:75px;display:flex;background:#3b3b3b73}
.franchise-fullstory-poster-cell a{display:flex;align-items:center}
.franchise-fullstory-poster-cell img{width:100%;height:auto;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.2)}

.franchise-fullstory-table-cell a{text-decoration:none}
.title-wrapper{display:flex;flex-direction:column;align-items:flex-start;font-size: 13px;}
.title-wrapper .type_mini{font-size:11px;color:#969696;margin-top:2px;font-style:normal;border-radius:3px;display:inline-block}

.franchise-fullstory-show-more{margin-top:15px;text-align:center}
.franchise-fullstory-show-more-btn{transition:.3s}
.franchise-fullstory-show-more-btn .btn-arrow{transition:transform .15s;transform:rotate(0)}
.franchise-fullstory-show-more-btn.active .btn-arrow{transform:rotate(180deg)}

.franchise-fullstory-item.hidden{display:none}
.source-badge{font-size:9px}

/* link icon */
.link-icon{width:12px;height:12px;margin-left:5px;opacity:.6;transition:opacity .2s;vertical-align:middle;fill:currentColor}
.franchise-fullstory-table-row:hover .link-icon,
.franchise-fullstory-table-cell a:hover .link-icon{opacity:1}

.franchise-action {
font-size: 13px;
    font-weight: 500;
    color: #d5d5d5;
    white-space: nowrap;
    margin-left: auto;
}
.fran_midrat {
    padding: 5px;
    background: #474747;
    border-radius: 10px 10px 0 0;
    color: #fff;
    max-width: 230px;
    margin: 0 auto;
    text-align: center;
    font-weight: 500;
}
.franchise-text {
  font-size: 15px;
  line-height: 1.7;
  color: #e8e8e8;  
  margin-top: 16px;
}


.franchise-text h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px;
  padding-left: 10px;
  border-left: 3px solid #0a90d9;
}
.franchise-text h3 {font-size: 17px;}

.franchise-text p {
  margin: 0 0 14px;
}
.empty-franchise-message.search-empty{
  text-align: center;
  padding: 12px;
}

.empty-franchise-message .sad-emoji{
  font-size: 28px;
  margin-bottom: 4px;
}

.empty-franchise-message .empty-text{
  font-size: 14px;
}

.empty-franchise-message .empty-subtitle{
  font-size: 13px;
  opacity: .8;
}

.empty-franchise-message a{
  color: #c69800;
  text-decoration: none;
}