/**
 * Stylesheet for the Video FAQ plugin.
 *
 * The design closely follows the provided HTML example with a dark theme and
 * adjustable accent colour.  All selectors are scoped to the `.vf-faq-wrapper`
 * container to prevent leakage into the surrounding theme.
 */

.vf-faq-wrapper{font-family: "Inter", sans-serif;
    background: var(--vf-bg-color);
    color: var(--vf-text-color);
    /* full-width container: occupy the full available width without being constrained
       by parent column width.  The max-width is set to none and alignment is
       stretched so inner elements take full width as well. */
    /* Decrease overall padding for a more space efficient container */
    padding: 16px;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    width: 100%;
    max-width: none;}
.vf-faq-wrapper .vf-faq-title{font-family: var(--vf-title-font-family);
    text-align: center;
    /* Reduce space below the title so the search field sits closer */
    /* Tighter spacing below the title */
    margin-bottom: 12px;
    font-size: var(--vf-title-font-size);
    font-weight: var(--vf-title-font-weight);
    color: var(--vf-title-text-color);}
.vf-faq-wrapper .vf-search-wrapper{position: relative;
    width: 100%;
    max-width: none;
    /* Reduce vertical margin around the search field further */
    margin: 20px 0;
    padding-right: 12px;}
.vf-faq-wrapper .vf-faq-search{width: 100%;
    padding: 25px;
    border: 1px solid #333;
    border-radius: 6px;
    font-size: 17px;
    background: var(--vf-search-color);
    color: var(--vf-text-color);
    height: 40px;
    box-sizing: border-box;}
.vf-faq-wrapper .vf-faq-clear{position: absolute;
    right: 15px;
    top: 48%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 28px;
    color: var(--vf-primary-color);
    display: none;}
.vf-faq-wrapper mark{background-color: #ffffff33;
    color: #ffffff;
    padding: 0 2px;
    border-radius: 2px;}
.vf-faq-wrapper .vf-faq-layout{display: flex;
    /* Restore a small gap between the categories panel and the questions list
       to separate them visually while keeping the layout compact. */
    gap: 12px;
    width: 100%;
    max-width: none;
    align-items: flex-start;
    justify-content: flex-start;}
.vf-faq-wrapper .vf-faq-categories{display: flex;
    flex-direction: column;
    /* Remove vertical spacing between category items */
    gap: 0;
    width: 180px;
    min-width: 180px;
    padding: 12px 16px;
    border-radius: 6px;
    background: var(--vf-box-color);
    margin-top: 0;}
.vf-faq-wrapper .vf-faq-categories li{/* Reduce padding inside category items to shorten height */
    padding: 6px 10px;
    cursor: pointer;
    list-style: none;
    text-align: left;
    font-weight: 600;
    color: var(--vf-category-text-color);
    font-family: var(--vf-category-font-family);
    font-size: var(--vf-category-font-size);
    background: none;}
.vf-faq-wrapper .vf-faq-categories li.active{color: var(--vf-primary-color);}
.vf-faq-wrapper .vf-faq-categories li:hover{color: var(--vf-primary-color);
    font-weight: bold;}
.vf-faq-wrapper .vf-faq-content{flex: 1;
    display: flex;
    flex-direction: column;
    /* Provide a small gap between question items for more natural spacing */
    gap: 14px;
    align-items: center;
    width: 100%;}
.vf-faq-wrapper .vf-faq-item{width: 100%;
    max-width: none;}
.vf-faq-wrapper .vf-faq-box{background: var(--vf-box-color);
    /* Slightly reduce internal padding of question boxes */
    padding: 12px 14px;
    border-radius: 6px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;}
.vf-faq-wrapper .vf-question{font-weight: 600;
    color: var(--vf-question-text-color);
    flex: 1;
    font-family: var(--vf-question-font-family);
    font-size: var(--vf-question-font-size);
    /* Allow long questions to wrap naturally instead of being truncated */
    white-space: normal;
    overflow: visible;
    text-overflow: unset;}
.vf-faq-wrapper .vf-time-watch-row{display: flex;
    align-items: center;
    /* Add a modest gap between the info icon, timestamp and watch button for readability */
    gap: 8px;
    flex-shrink: 0;}
.vf-faq-wrapper .vf-time{font-family: var(--vf-time-font-family);
    font-size: var(--vf-time-font-size);
    color: var(--vf-time-text-color);
    white-space: nowrap;}
.vf-faq-wrapper .vf-info-icon{width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #bdbdbd;
    color: #bdbdbd;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    position: relative;
    font-family: Arial, sans-serif;}
/* Label shown on mobile instead of the info icon, displayed alongside the timestamp */
.vf-faq-wrapper .vf-time-label{display: none;
    font-family: var(--vf-time-font-family);
    font-size: var(--vf-time-font-size);
    color: var(--vf-time-text-color);
    margin-right: 4px;}@media (max-width: 600px) {
.vf-faq-wrapper .vf-info-icon{display: none;}
.vf-faq-wrapper .vf-time-label{display: inline;}
}.vf-faq-wrapper .vf-info-icon::before{content: "i";
    font-size: 12px;
    font-weight: bold;
    line-height: 1;}
.vf-faq-wrapper .vf-info-icon:hover::after{content: attr(data-info);
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: normal;
    width: 200px;
    font-size: 13px;
    line-height: 1.4;
    z-index: 10;}
.vf-faq-wrapper .vf-yt-link{background: var(--vf-primary-color);
    color: #fff;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 14px;
    flex-shrink: 0;}
.vf-faq-wrapper .vf-yt-link:hover{filter: brightness(0.9);}
.vf-faq-wrapper .vf-no-results{display: none;
    padding: 16px;
    background: none;
    border-radius: 6px;
    text-align: left;
    font-weight: 500;
    color: var(--vf-text-color);
    width: 100%;
    max-width: none;}
.vf-faq-wrapper .vf-pagination{display: flex;
    /* Reintroduce a small gap between pagination buttons for better tap targets */
    gap: 8px;
    justify-content: center;
    /* Pull pagination upwards on desktop to tighten spacing (negative margin) */
    margin-top: 20px;
    flex-wrap: wrap;}
.vf-faq-wrapper .vf-page-btn{cursor: pointer;
    padding: 6px 12px;
    background: var(--vf-box-color);
    color: var(--vf-text-color);
    border-radius: 6px;}
.vf-faq-wrapper .vf-page-btn.active{background: var(--vf-primary-color);}@media (max-width: 900px) {
.vf-faq-wrapper .vf-faq-layout{flex-direction: column;
        align-items: center;
        width: 100%;}
.vf-faq-wrapper .vf-faq-categories li.active{border: 1px solid var(--vf-primary-color);}
.vf-faq-wrapper .vf-search-wrapper{padding-right: 0px;}
.vf-faq-wrapper .vf-faq-categories{flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
        padding: 10px;
        min-width: 0;}
.vf-faq-wrapper .vf-faq-categories li{flex: 1 1 auto;
        min-width: 80px;
        max-width: 100%;
        text-align: center;
        border: 1px solid;
        border-color: #ffffff7a;
        margin: 5px;
        border-radius: 5px;}
.vf-faq-wrapper .vf-faq-search{width: 100%;
        font-size: 16px;
        height: 38px;}
.vf-faq-wrapper .vf-faq-item{width: 100%;}
.vf-faq-wrapper .vf-faq-box{font-size: 15px;
        padding: 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px;
        /* Centre the question box within its container on mobile by limiting
           its maximum width and using auto margins.  This creates a more
           balanced look when the categories stack above the content. */
        width: 100%;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;}
.vf-faq-wrapper .vf-time-watch-row{gap: 8px;
        margin-top: 0;}
.vf-faq-wrapper .vf-faq-title{font-size: 24px;
        margin-bottom: 15px;}
.vf-faq-wrapper .vf-no-results{width: 100%;
        max-width: 100%;}
/* On mobile, bring the pagination closer to the questions by using a
       negative top margin.  This helps the controls visually align with the
       content without leaving unnecessary whitespace. */
    .vf-faq-wrapper .vf-pagination{margin-top: 20px;}
}
@media (max-width: 768px) {
.vf-faq-wrapper .vf-info-icon{display: none;}
}/* Hide the info icon and the timestamp label if the timing box is empty */
.vf-faq-wrapper .vf-time-watch-row.vf-no-time .vf-info-icon,
.vf-faq-wrapper .vf-time-watch-row.vf-no-time .vf-time-label{display: none !important;}
/* Prevent initial flash: hide info icon and time label until JS marks rows with time */
.vf-faq-wrapper .vf-time-watch-row .vf-info-icon,
.vf-faq-wrapper .vf-time-watch-row .vf-time-label{visibility: hidden;}
.vf-faq-wrapper .vf-time-watch-row.vf-has-time .vf-info-icon,
.vf-faq-wrapper .vf-time-watch-row.vf-has-time .vf-time-label{visibility: visible;}
/* Keep previous rule: if no time, ensure they're hidden */
.vf-faq-wrapper .vf-time-watch-row.vf-no-time .vf-info-icon,
.vf-faq-wrapper .vf-time-watch-row.vf-no-time .vf-time-label{display: none !important;}
.vf-faq-clear::-moz-focus-inner{border:0;padding:0}@media (min-width: 981px){
.vf-faq-clear{padding-right:12px;}
}

@media (max-width: 768px) {
.vf-faq-buttons{display: flex;
    flex-direction: row;
    flex-wrap: wrap;}
.vf-faq-buttons .vf-yt-link{order: -1;
    margin-right: auto;}
}.vf-pagination .vf-page-btn,
  .vf-pagination .vf-nav-btn{padding: 6px 8px;}
}



/* Nav arrows inherit the same look as page buttons */
.vf-faq-wrapper .vf-nav-btn{cursor: pointer;
  padding: 6px 12px;
  background: var(--vf-box-color);
  color: var(--vf-text-color);
  border-radius: 6px;}
.vf-faq-wrapper .vf-nav-btn.disabled{opacity: 0.5;
  cursor: not-allowed;}
\n



/* Hover */
.vf-faq-wrapper .vf-page-btn:hover,
.vf-faq-wrapper .vf-arrow-btn:hover{background: #e23d5c;
  color: #fff;}
.vf-faq-wrapper .vf-arrow-btn svg {width:20px;height:25px;display:block;padding:3px;}
/* Active/selected page */
.vf-faq-wrapper .vf-page-btn.active{background: #e23d5c;
  color: #fff;}
/* Disabled state */
.vf-faq-wrapper .vf-arrow-btn.disabled,
.vf-faq-wrapper .vf-page-btn.disabled{opacity: 0.5;
  cursor: not-allowed;}
/* Unified style for pagination buttons and arrows */
.vf-faq-wrapper .vf-page-btn,
.vf-faq-wrapper .vf-arrow-btn{padding: 8px 14px;        /* bigger */
  background: #282828;
  color: #e0e0e0;
  border-radius: 6px;
  font-size: 16px;          /* bigger text */
  cursor: pointer;
  border: none;
  /* no shadow */}
/* Hover */
.vf-faq-wrapper .vf-page-btn:hover,
.vf-faq-wrapper .vf-arrow-btn:hover{background: #e23d5c;
  color: #fff;}
/* Ensure no visual effects */
.vf-faq-wrapper .vf-page-btn,
.vf-faq-wrapper .vf-arrow-btn{box-shadow: none !important;
  transition: none !important;}
/* --- Custom rules added per request --- */
.vf-faq-wrapper .vf-faq-categories{margin-left: 0px;}
.vf-faq-wrapper .vf-faq-search{width: 101%;}
.vf-faq-wrapper .vf-yt-link{margin-left:10px;margin-right:0px;}@media (max-width: 768px) {
.vf-faq-wrapper .vf-yt-link{order: -1;margin-left:0px;margin-right:10px;}
.vf-faq-wrapper .vf-faq-categories{margin-bottom: 10px;}
}.vf-faq-wrapper .vf-faq-categories li{font-weight: 600;}
.vf-faq-wrapper .vf-faq-categories li:hover{font-weight: 600;}
.vf-faq-wrapper .vf-question{font-weight: 400;}
input.vf-faq-search:focus{border-color: #802435;}
p.vf-faq-title{display: none;}
.vf-faq-wrapper{padding: 0px;}
.vf-arrow-btn{background: #282828;font-size: 30px;padding: 6px 12px;}
.vf-faq-wrapper .vf-page-btn{border: 0;}
/* Desktop: keep original (A), hide duplicate (B) */
.vf-faq-layout .vf-faq-categories{display: block;}
/* Mobile (≤900px): show duplicate (B) and hide original (A) */



/* Desktop (>900px): hide duplicate, show original */
.vf-faq-layout .vf-faq-categories{display: block;}
/* Mobile (≤900px): show duplicate, hide original */



/* Categories duplicate visibility (optimized) */
/* Desktop is default: duplicate hidden */
.vf-faq-categories-dup{display:none;}@media (max-width:900px){
.vf-faq-categories-dup{display:block;margin:0 0 12px 0;padding:0;list-style:none;}
.vf-faq-layout .vf-faq-categories{display:none;}
}


/* make room for the icon */
}
/* Ensure high specificity on mobile & desktop */
@media (max-width: 768px) {
.vf-faq-wrapper input.vf-faq-search{background-position: 12px center;}
}/* --- QNA FAQ: search icon inside search input --- */
.vf-faq-wrapper input.vf-faq-search{background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOTA5OGE2IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+CiAgPGNpcmNsZSBjeD0iMTEiIGN5PSIxMSIgcj0iNyIvPgogIDxsaW5lIHgxPSIyMSIgeTE9IjIxIiB4Mj0iMTYuNjUiIHkyPSIxNi42NSIvPgo8L3N2Zz4=");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 18px 18px;
  padding-left: 44px;}
/* === QNA FAQ: Overrides (search icon, layout tweaks) === */
.vf-faq-wrapper .vf-faq-categories{margin-left: 0px}
.vf-faq-wrapper .vf-faq-search{width: 101%;}
.vf-faq-wrapper .vf-yt-link{margin-left:10px;margin-right:0px;}@media (max-width: 768px) {
.vf-faq-wrapper .vf-yt-link{order: -1;margin-left:0px;margin-right:10px;}
.vf-faq-wrapper .vf-faq-categories{margin-bottom: 10px;display:none}
}.vf-faq-wrapper .vf-faq-categories li{font-weight: 600;}
.vf-faq-wrapper .vf-faq-categories li:hover{font-weight: 600;}
.vf-faq-wrapper .vf-question{font-weight: 600;}
input.vf-faq-search:focus{border-color: #e23d5c;}
p.vf-faq-title{display: none;}
.vf-faq-wrapper{padding: 0px;}
.vf-faq-wrapper .vf-page-btn{border: 0;}
.vf-arrow-btn{font-size: 22px;padding: 7px 15px;border: none;background-color:#282828}
.vf-arrow-btn:hover{background-color:#282828}
.vf-faq-layout{min-height: 500px;}
ul.vf-faq-categories.vf-faq-categories-dup{display:none}@media (max-width: 768px) {
ul.vf-faq-categories.vf-faq-categories-dup{display:flex}
}.vf-faq-wrapper input.vf-faq-search{background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOTA5OGE2IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+CiAgPGNpcmNsZSBjeD0iMTEiIGN5PSIxMSIgcj0iNyIvPgogIDxsaW5lIHgxPSIyMSIgeTE9IjIxIiB4Mj0iMTYuNjUiIHkyPSIxNi42NSIvPgo8L3N2Zz4=);
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 18px 18px;
    padding-left: 44px;}
.vf-faq-wrapper input.vf-faq-search{background-color: #28282885;}
.vf-faq-wrapper .vf-info-icon::before{color: #ffffff70;}
.vf-faq-wrapper .vf-info-icon{border-color: #ffffff70;}
.vf-faq-wrapper .vf-faq-categories li{letter-spacing:1px;}@media (max-width: 768px) {
ul.vf-faq-categories.vf-faq-categories-dup{background: none; margin-bottom: -10px;}
}

/* Desktop: static gradient text */
@media (min-width:769px){
.vf-faq-wrapper .vf-faq-categories li.active{background:linear-gradient(
      90deg,
      #e23d5c,
      #ffd29a
    );
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;}
}

/* Mobile: gradient text + gradient border (static) */
@media (max-width:768px){
.vf-faq-wrapper .vf-faq-categories li.active{background:linear-gradient(90deg,#e23d5c,#e37d3d);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    border:1px solid;
    border-image-slice:1;
    border-color:#e33d5c;}
}

@media (max-width: 768px) {
.vf-faq-wrapper .vf-time-watch-row{gap: 0px;}
}/* === Custom updates requested === */
.vf-faq-wrapper input.vf-faq-search{background-color: #28282885;}
.vf-faq-wrapper .vf-info-icon::before{color: #ffffff70;}
.vf-faq-wrapper .vf-info-icon{border-color: #ffffff70;}
.vf-faq-wrapper .vf-faq-categories li{letter-spacing:1px;}@media (max-width: 768px) {
ul.vf-faq-categories.vf-faq-categories-dup{background: none; margin-bottom: -10px;}
}

/* Desktop: static gradient text */
@media (min-width:769px){
.vf-faq-wrapper .vf-faq-categories li.active{background:linear-gradient(90deg,#e23d5c,#ffd29a);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;}
}

/* Mobile: gradient text + gradient border (static) */
@media (max-width:768px){
.vf-faq-wrapper .vf-faq-categories li.active{background:linear-gradient(90deg,#e23d5c,#e37d3d);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    border:1px solid;
    border-image-slice:1;
    border-color:#e33d5c;}
}
@media (max-width: 768px) {
.vf-faq-wrapper .vf-time-watch-row{gap: 0px;}
}/* SVG arrow sizing for pagination */

/* === QNA-FAQ: Optimized additions === */
.vf-faq-wrapper input.vf-faq-search{background-color:#28282885;}
.vf-faq-wrapper .vf-info-icon::before{color:#ffffff70;}
.vf-faq-wrapper .vf-info-icon{border-color:#ffffff70;}
.vf-faq-wrapper .vf-faq-categories li{letter-spacing:1px;}@media (min-width:769px){
.vf-faq-wrapper .vf-faq-categories li.active{background:linear-gradient(90deg,#e23d5c,#ffd29a);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;}
}

/* Mobile: merged rules */
@media (max-width:768px){
ul.vf-faq-categories.vf-faq-categories-dup{background:none;
    margin-bottom:-10px;}
.vf-faq-wrapper .vf-faq-categories li.active{background:linear-gradient(90deg,#e23d5c,#e37d3d);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    border:1px solid #e33d5c;
    border-image-slice:1;}
.vf-faq-wrapper .vf-time-watch-row{gap:0px;}
}.vf-faq-wrapper .vf-arrow-btn{font-size:28px; padding:2px 14px;}

/* === QNA-FAQ: injected rules (2025-09-12) === */
.vf-faq-wrapper input.vf-faq-search{background-color:#28282885;}
.vf-faq-wrapper .vf-info-icon::before{color:#ffffff70;}
.vf-faq-wrapper .vf-info-icon{border-color:#ffffff70;}
.vf-faq-wrapper .vf-faq-categories li{letter-spacing:1px;}
.vf-faq-wrapper .vf-arrow-btn{font-size:28px;padding:2px 14px;}

/* Mobile */
@media(max-width:768px){
  ul.vf-faq-categories.vf-faq-categories-dup{background:none;margin-bottom:-10px;}
  .vf-faq-wrapper .vf-faq-categories li.active{
    background:linear-gradient(90deg,#e23d5c,#e37d3d);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    border:1px solid;border-image-slice:1;border-color:#e33d5c;
  }
  .vf-faq-wrapper .vf-time-watch-row{gap:0;}
}

/* Desktop */
@media(min-width:769px){
  .vf-faq-wrapper .vf-faq-categories li.active{
    background:linear-gradient(90deg,#e23d5c,#ffd29a);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  }
}
/* === /QNA-FAQ injected === */