/* =========================================================
   FootballR Shorts – CSS (mobile-first, max 400px desktop)
   ========================================================= */

/* ===== HARD RESET FOR SHORTS PAGE ONLY ===== */
body.frs-shorts-page, body.frs-shorts-page html { background: #000 !important; }
body.frs-shorts-page {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body.frs-shorts-page * { box-sizing: border-box; }

/* ===== THEME / ELEMENTOR RESET ===== */
body.frs-shorts-page #page,
body.frs-shorts-page .site,
body.frs-shorts-page .site-wrap,
body.frs-shorts-page main,
body.frs-shorts-page .elementor,
body.frs-shorts-page .elementor-section,
body.frs-shorts-page .elementor-container,
body.frs-shorts-page .elementor-column,
body.frs-shorts-page .entry-content,
body.frs-shorts-page .rb-small-container,
body.frs-shorts-page .grid-container {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
  background: transparent !important;
}

/* ===== ROOT ===== */
.frs-shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #000;
}
.frs, .frs__viewport { width: 100%; height: 100vh; background: #000; }
.frs__viewport {
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* ===== TOP TABS ===== */
.frs-tabs{
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  gap: 6px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 6px;
}
.frs-tab,
.frs-tab:visited,
.frs-tab:hover,
.frs-tab:active{
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #fff !important;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}
.frs-tab.is-active{ background: rgba(255,255,255,.18); }

/* ===== REEL ===== */
.frs-reel{
  position: relative;
  width: 100%;
  height: 100vh;
  scroll-snap-align: start;
  overflow: hidden;
  background: #000;
}

/* ===== IMAGE (KEN BURNS) ===== */
.frs-bg-image{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  will-change: transform;
  animation: frs-kenburns 13s ease-in-out infinite alternate;
}
@keyframes frs-kenburns{
  0% { transform: scale(1) translate3d(0,0,0); }
  100% { transform: scale(1.18) translate3d(-4%, -4%, 0); }
}

/* ===== MOTION OVERLAY ===== */
.frs-bg-motion{
  position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  z-index:1; pointer-events:none;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.14), transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.10), transparent 45%);
  opacity:.45;
  mix-blend-mode: overlay;
  animation: frs-bg-rotate 18s linear infinite;
}
@keyframes frs-bg-rotate{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }

/* ===== GRADIENT ===== */
.frs-gradient{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.92) 0%,
    rgba(0,0,0,.60) 32%,
    rgba(0,0,0,.30) 58%,
    rgba(0,0,0,0) 78%
  );
}

/* ===== SIDEBAR BUTTONS ===== */
.frs-right{
  position:absolute;
  right: 12px;
  bottom: 140px;
  z-index: 5;
  display:flex;
  flex-direction:column;
  gap: 14px;
}

/* ===== BUTTONS ===== */
.frs-btn{
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 6px;
  cursor:pointer;
  user-select:none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.frs-btn .frs-icon{ font-size: 22px; line-height:1; }
.frs-btn .frs-count{ font-size:10px; line-height:1; opacity:.95; }
.frs-btn.is-active{ border-color: rgba(124,255,0,.9); }
.frs-btn::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  border: 2px solid rgba(255,255,255,0);
  pointer-events:none;
  opacity:0;
}
.frs-btn.is-bouncing::after{
  border-color: rgba(124,255,0,.95);
  animation: frs-ring .45s ease-out;
}
@keyframes frs-ring{
  0%{ transform: scale(.85); opacity:0;}
  40%{ transform: scale(1.05); opacity:1;}
  100%{ transform: scale(1.2); opacity:0;}
}
.frs-btn.is-pulsing::after{
  border-color: rgba(255,255,255,.9);
  animation: frs-pulse .35s ease-out;
}
@keyframes frs-pulse{
  0%{ transform: scale(.9); opacity:0;}
  45%{ transform: scale(1.08); opacity:1;}
  100%{ transform: scale(1.18); opacity:0;}
}

/* ===== META ===== */
.frs-meta{
  position:absolute;
  left: 14px;
  right: 92px;
  bottom: 64px;
  z-index: 4;
  color:#fff;
}
.frs-author{
  display:inline-block;
  font-size: 12px;
  margin-bottom: 6px;
  color: #7CFF00;
  text-decoration:none;
}
.frs-title{
  font-size: 20px;
  font-weight: 900;
  line-height: 1.25;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.frs-excerpt{
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.35;
  display:flex;
  align-items:flex-end;
  gap: 6px;
}
.frs-excerpt-text{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.frs-more{
  flex: 0 0 auto;
  margin-left: 2px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
}

/* full clickable area to open article */
.frs-open{
  position:absolute;
  inset:0;
  z-index:3;
}

/* Pointer events safety */
.frs-btn, .frs-right, .frs-meta, .frs-tabs { pointer-events:auto; z-index:5; }
.frs-bg-image, .frs-bg-motion, .frs-gradient { pointer-events:none; }

/* ===== TOAST ===== */
.frs-toast{
  position: fixed;
  left:50%;
  bottom: 80px;
  transform: translateX(-50%) translateY(10px);
  background: rgba(0,0,0,.75);
  color:#fff;
  padding: 10px 16px;
  border-radius: 20px;
  font-size: 14px;
  opacity:0;
  pointer-events:none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 9999;
}
.frs-toast.is-visible{ opacity:1; transform: translateX(-50%) translateY(0); }



/* ===== SCROLL HINT (first-time) ===== */
.frs-scroll-hint{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.98);
  opacity: 0;
  pointer-events: none;
  z-index: 999; /* below tabs/toast */
  transition: opacity .35s ease, transform .35s ease;
}
.frs-scroll-hint.is-visible{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.frs-scroll-hint-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.frs-scroll-hint-arrow{
  font-size: 26px;
  line-height: 1;
  animation: frs-scroll-bounce 1.1s ease-in-out infinite;
}
.frs-scroll-hint-text{
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  letter-spacing: .2px;
  white-space: nowrap;
}
@keyframes frs-scroll-bounce{
  0%, 100% { transform: translateY(0); opacity: .85; }
  50% { transform: translateY(-10px); opacity: 1; }
}

/* ===== SKELETON ===== */
.frs-skeletons{
  position:absolute; inset:0; z-index: 6;
  display:flex; justify-content:center;
  pointer-events:none;
}
.frs-skeleton{
  width: 100%;
  max-width: 400px;
  height: 100vh;
  position:relative;
  background:#0b0b0b;
  overflow:hidden;
}
.frs-skeleton::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(110deg, #111 40%, #1a1a1a 50%, #111 60%);
  background-size: 200% 100%;
  animation: frs-shimmer 1.4s infinite linear;
}
@keyframes frs-shimmer{ to{ background-position: -200% 0; } }
.frs-skeleton-meta{
  position:absolute;
  left:16px;
  bottom:60px;
  width: calc(100% - 32px);
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.frs-skeleton-meta span{ display:block; background:#222; border-radius: 6px; }
.frs-skeleton-meta .sk-author{ width:25%; height: 10px; margin-bottom: 6px;}
.frs-skeleton-meta .sk-title{ width: 80%; height: 22px; }
.frs-skeleton-meta .sk-excerpt{ width: 75%; height: 12px; }

/* ===== MENU (slide-in) ===== */
.frs-menu-overlay{
  position: fixed;
  inset:0;
  background: rgba(0,0,0,0.45);
  opacity:0;
  pointer-events:none;
  transition: opacity .25s ease;
  z-index: 9998;
}
.frs-menu-overlay.is-open{ opacity:1; pointer-events:auto; }

.frs-menu{
  position: fixed;
  top:0; left:0;
  height: 100vh;
  width: 260px;
  max-width: 80vw;
  background:#0b0b0b;
  transform: translateX(-100%);
  transition: transform .25s ease;
  z-index: 9999;
  display:flex;
}
.frs-menu.is-open{ transform: translateX(0); }
.frs-menu-inner{
  padding: 24px;
  display:flex;
  flex-direction:column;
  gap: 16px;
}
.frs-menu-inner a{ color:#fff; font-size: 16px; text-decoration:none; }
.frs-menu-inner a:hover{ text-decoration: underline; }
.frs-menu-sep{ height:1px; background:#222; margin: 12px 0; }
.frs-menu-inner small{ color:#888; font-size: 13px; }

/* ===== COMMENTS OVERLAY ===== */
.frs-comments-overlay{
  position: fixed;
  inset:0;
  background: rgba(0,0,0,.6);
  z-index: 9999;
  display:none;
}
.frs-comments-overlay.is-open{ display:block; }

.frs-comments-panel{
  position:absolute;
  left:0; right:0; bottom:0;
  height: 75vh;
  max-width: 400px;
  margin: 0 auto;
  background:#0b0b0b;
  border-radius: 16px 16px 0 0;
  display:flex;
  flex-direction:column;
}
.frs-comments-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 14px 16px;
  font-weight: 700;
  color:#fff;
  border-bottom: 1px solid #222;
}
.frs-comments-header button{ background:none; border:0; color:#fff; font-size: 18px; cursor:pointer; }
.frs-comments-list{ flex:1; overflow-y:auto; padding: 16px; }
.frs-comment{ margin-bottom: 16px; font-size: 14px; color:#fff; }
.frs-comment strong{ display:block; margin-bottom:4px; }
.frs-comment-meta{ font-size: 12px; color:#888; margin-top:6px; }

.frs-comments-form{ padding: 12px 16px; border-top: 1px solid #222; }
.frs-comment-form-inner{ display:flex; flex-direction:column; gap: 10px; }
.frs-comment-form-inner input:not([type="checkbox"]),
.frs-comment-form-inner textarea{
  width:100%;
  background:#111;
  border: 1px solid rgba(255,255,255,.12);
  color:#fff;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
}
.frs-comment-form-inner textarea{ min-height: 70px; resize:none; }
.frs-comment-form-inner button{
  background: rgba(124,255,0,.9);
  color:#000;
  border:0;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
  cursor:pointer;
}
/* comments links + GDPR */
.frs-comments-panel a{ color: rgba(124,255,0,.95); }
.frs-comments-panel a:visited{ color: rgba(124,255,0,.75); }
.frs-gdpr{ display:flex; gap:10px; align-items:flex-start; max-width:100%; }
.frs-gdpr input[type="checkbox"]{
  width:18px; height:18px;
  padding:0 !important;
  margin:2px 0 0 0;
  flex:0 0 auto;
  accent-color: rgba(124,255,0,.95);
}
.frs-gdpr span{
  flex:1 1 auto;
  min-width: 0;
  color:#fff;
  word-break: break-word;
}
.frs-comment-form-inner input::placeholder,
.frs-comment-form-inner textarea::placeholder{ color: rgba(255,255,255,.55); }
.frs-comment-form-inner input:-webkit-autofill,
.frs-comment-form-inner input:-webkit-autofill:hover,
.frs-comment-form-inner input:-webkit-autofill:focus,
.frs-comment-form-inner textarea:-webkit-autofill{
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0px 1000px #111 inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* ===== FULL CONTENT OVERLAY ===== */
.frs-full-overlay{
  position: fixed;
  inset:0;
  background: rgba(0,0,0,.75);
  z-index: 9999;
  display:none;
}
.frs-full-overlay.is-open{ display:block; }
.frs-full-panel{
  position:absolute;
  left:0; right:0; top:0;
  height: 100vh;
  max-width: 400px;
  margin: 0 auto;
  background:#0b0b0b;
  display:flex;
  flex-direction:column;
}
.frs-full-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 14px 16px;
  font-weight: 800;
  color:#fff;
  border-bottom: 1px solid #222;
}
.frs-full-header button{ background:none; border:0; color:#fff; font-size: 18px; cursor:pointer; }
.frs-full-body{
  flex:1;
  overflow-y:auto;
  padding: 16px;
  color:#fff;
  font-size: 15px;
  line-height: 1.5;
}
.frs-full-body a{ color:#7CFF00; }
.frs-full-loading{ color:#888; padding: 18px 0; }

/* ===== AD + SLIDE ===== */
.frs-ad{
  position:absolute; inset:0;
  display:block;
  text-decoration:none;
  color:#fff;
  z-index: 4;
}
.frs-ad-label{
  position:absolute;
  bottom: 60px;
  left: 16px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  border-radius: 999px;
}
.frs-slide{
  position:absolute;
  left: 16px;
  right: 16px;
  bottom: 64px;
  z-index: 4;
  color:#fff;
}
.frs-slide-badge{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 10px;
}
.frs-slide-title{
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 10px;
}
.frs-slide-content{
  font-size: 14px;
  line-height: 1.35;
  opacity: .95;
  max-width: 95%;
}
.frs-slide-cta{
  display:inline-block;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(124,255,0,.9);
  color:#000;
  font-weight: 900;
  text-decoration:none;
}

/* ===== DESKTOP FRAME ===== */
@media (min-width: 768px){
  body.frs-shorts-page{ background:#000; }
  .frs-shell{ display:flex; justify-content:center; background:#000; }
  .frs{ width: 100%; max-width: 400px; height: 100vh; background:#000; box-shadow: 0 0 0 1px rgba(255,255,255,0.05); }
  .frs__viewport{ width:100%; height:100%; }
  .frs-skeleton{ max-width: 400px; }
}