/* Shared media/viewer pieces used by both album and single-image pages */

.hp-album-actions .btn,
.hp-i-actions .btn,
.hp-album-tools .btn,
.hp-comments .btn-outline-secondary{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 !important;
    padding: 8px 12px !important;
    min-height: 40px;
    border: 1px solid var(--hp-color-border) !important;
    border-radius: var(--hp-radius-md) !important;
    background: rgba(var(--hp-color-white-rgb), 0.05) !important;
    color: var(--hp-color-text-soft) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}.hp-album-actions .btn img,
.hp-i-actions .btn img,
.hp-album-tools .btn img{
    width: 17px !important;
    height: 17px !important;
    opacity: 0.8;
    filter: brightness(0) invert(1);
}.hp-album-actions .btn:hover,
.hp-i-actions .btn:hover,
.hp-album-tools .btn:hover,
.hp-comments .btn-outline-secondary:hover{
    background: rgba(var(--hp-color-accent-rgb), 0.2) !important;
    border-color: rgba(var(--hp-color-accent-rgb), 0.45) !important;
    color: var(--hp-color-white) !important;
}/* Lucide chevrons — grid-centred, so they sit optically dead-centre */
.hp-i-media .carousel-control-prev-icon .hp-icon,
.hp-i-media .carousel-control-next-icon .hp-icon{
    width: 18px !important;
    height: 18px !important;
    display: block;
    stroke-width: 2.4;
}.hp-i-codes .row{
    margin-bottom: 8px;
}.hp-i-codes .control-label,
.hp-i-codes .col-form-label{
    color: var(--hp-color-text-muted);
    font-size: 12px;
    font-weight: 600;
}.hp-i-codes .form-control{
    background: rgba(var(--hp-color-white-rgb), 0.05) !important;
    border: 1px solid var(--hp-color-border) !important;
    border-radius: var(--hp-radius-md) 0 0 var(--hp-radius-md) !important;
    color: var(--hp-color-text-soft) !important;
    font-size: 12px;
}.hp-i-codes .btn{
    border: 1px solid var(--hp-color-border) !important;
    border-left: 0 !important;
    border-radius: 0 var(--hp-radius-md) var(--hp-radius-md) 0 !important;
    background: rgba(var(--hp-color-white-rgb), 0.06) !important;
    color: var(--hp-color-text-soft) !important;
}.hp-i-codes .btn:hover{
    background: rgba(var(--hp-color-accent-rgb), 0.22) !important;
    color: var(--hp-color-white) !important;
}/* revealed by the player script;.hp-vplayer__btn .hp-icon{
    width: 16px !important;
    height: 16px !important;
}.hp-vplayer__center .hp-icon{
    width: 26px !important;
    height: 26px !important;
}/* ==========================================================================
   ALBUM COMMENTS — one design for desktop and mobile
   The .comments-section-wrap is the panel itself, so the same rules apply
   inside the desktop rail and in the mobile stacked flow.
   ========================================================================== */
.comments-section-wrap{
    margin: 0 0 18px;
    padding: 16px;
    border: 1px solid var(--hp-color-border);
    border-radius: 16px;
    background: rgba(var(--hp-color-white-rgb), 0.035);
}.comments-section-wrap .commentsSection{
    display: block !important;
}.comments-section-wrap .commentsSection > div{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}/* comment pager — compact, centred, same glass language as the cards */
.comments-section-wrap #commentsPager{
    display: flex;
    justify-content: center;
    margin-top: 12px;
}.comments-section-wrap #commentsPager .pagination{
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}.comments-section-wrap #commentsPager .page-link{
    min-width: 28px;
    padding: 5px 8px;
    border: 1px solid rgba(var(--hp-color-white-rgb), 0.08);
    border-radius: 8px;
    background: rgba(var(--hp-color-white-rgb), 0.03);
    color: var(--hp-color-text-soft);
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
}.comments-section-wrap #commentsPager .page-link:hover{
    border-color: rgba(var(--hp-color-accent-rgb), 0.45);
    color: var(--hp-color-white);
}.comments-section-wrap #commentsPager .page-item.active .page-link{
    border-color: transparent;
    background: linear-gradient(180deg, var(--hp-color-accent) 0%, var(--hp-color-accent-mid) 55%, var(--hp-color-accent-deep) 100%);
    color: var(--hp-color-white);
}.comments-section-wrap #commentsPager .page-item.disabled .page-link{
    opacity: 0.45;
}.comments-section-wrap .media-body{
    margin: 5px 0 0 32px !important;
    color: var(--hp-color-text-soft);
    font-size: 11.5px !important;
    line-height: 1.5;
}.comments-section-wrap p.text-white-50{
    margin: 0 0 10px !important;
    color: var(--hp-color-text-dim) !important;
    font-size: 12px !important;
    line-height: 1.45;
}.comments-section-wrap .btn{
    padding: 7px 12px !important;
    border-radius: 9px !important;
    font-size: 11.5px !important;
}.comments-section-wrap form{
    margin: 0 !important;
}.comments-section-wrap #commentForm .form-group{
    margin-bottom: 12px !important;
}.comments-section-wrap #commentForm button[type="submit"]{
    margin-top: 0 !important;
}.comments-section-wrap textarea.form-control,
.comments-section-wrap input.form-control{
    padding: 8px 10px;
    border: 1px solid rgba(var(--hp-color-white-rgb), 0.10);
    border-radius: 9px;
    background: rgba(var(--hp-color-white-rgb), 0.04);
    color: var(--hp-color-text);
    font-size: 11.5px;
    line-height: 1.4;
}.comments-section-wrap input.form-control[readonly]{
    height: 30px !important;
    min-height: 30px !important;
    padding: 4px 10px !important;
    color: var(--hp-color-text-soft);
    background: rgba(var(--hp-color-white-rgb), 0.03);
    border-color: rgba(var(--hp-color-white-rgb), 0.07) !important;
    font-size: 11px;
}.comments-section-wrap textarea.form-control{
    min-height: 68px;
    resize: vertical;
}.comments-section-wrap .form-text{
    display: block;
    margin: 4px 0 0;
    color: var(--hp-color-text-dim) !important;
    font-size: 10px;
}.comments-section-wrap button[type="submit"]{
    width: 100%;
    margin-top: 8px;
    padding: 8px 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: linear-gradient(180deg, var(--hp-color-accent) 0%, var(--hp-color-accent-mid) 55%, var(--hp-color-accent-deep) 100%) !important;
    color: var(--hp-color-white) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
}.hp-album-side__label{
    display: none;
}/* while the report form is open in the desktop rail, tuck the comments panel
   away so the taller form never forces a sidebar scrollbar */
@media screen and (min-width: 1200px){
    .hp-album-side:has(#reportForm.show) .comments-section-wrap {
        display: none !important;
    }
}@media screen and (min-width: 1200px) {/* match preview/album-sidebar-preview.html */
    .hp-page-container.hp-album {
        max-width: 1320px !important;
    }.hp-album-grid > .fd-cell {
        width: auto !important;
        max-width: none !important;
        flex: none !important;
        padding: 0 !important;
    }.hp-album-grid > .fd-cell > a:not(.position-absolute) {
        border-radius: 14px;
    }.hp-album-grid > .fd-cell > a.position-absolute .hp-icon,
    .hp-album-grid > .fd-cell > span.position-absolute .hp-icon {
        width: 38px !important;
        height: 38px !important;
        padding: 11px;
    }.hp-album-side__label {
        display: block;
        margin: 0 0 10px;
        color: var(--hp-color-accent-soft);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }}/* ==========================================================================
   ALBUM ICON SIZING (inline Lucide SVG — single icon system)
   ========================================================================== */
.hp-album-tags .btn .hp-icon{
    width: 12px !important;
    height: 12px !important;
    margin-right: 4px;
    flex-shrink: 0;
}.hp-album-meta__who .hp-icon{
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
    opacity: 0.85;
}.hp-album-meta__stats .hp-icon,
.hp-stat .hp-icon{
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0;
    opacity: 0.75;
}.hp-album-actions .hp-icon{
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
    opacity: 0.9;
}.hp-album-actions .hp-icon.is-liked,
.fd-card__action .hp-icon.is-liked{
    color: var(--hp-color-accent-soft);
    fill: currentColor;
}.hp-album-actions .hp-like-host .hp-icon{
    transform-origin: center;
    transition: transform 0.18s ease, color 0.18s ease, fill 0.18s ease;
}.hp-album-actions .options:hover .hp-like-host .hp-icon{
    transform: scale(1.14);
}.hp-album-actions .options:active .hp-like-host .hp-icon{
    transform: scale(0.9);
}.hp-album-actions .hp-like-host .hp-icon.heart-animated{
    animation: hpCardHeartPop 0.66s cubic-bezier(0.2, 0.9, 0.3, 1.35);
}@media (prefers-reduced-motion: reduce) {.hp-album-actions .hp-like-host .hp-icon,
    .hp-album-actions .hp-like-host .hp-icon.heart-animated,
    .hp-album-actions .hp-like-burst {
        animation: none !important;
        transition: none !important;
    }}/* favourites: the bookmark fills in once the album is saved */
.hp-album-actions .hp-icon.fav-btn-icon.is-faved{
    color: var(--hp-color-accent-soft);
    fill: currentColor;
}.comments-section-wrap .btn .hp-icon{
    width: 14px !important;
    height: 14px !important;
}.hp-album-tools .btn .hp-icon,
.hp-album-tools .hp-icon{
    width: 16px !important;
    height: 16px !important;
}.fd-card__badge .hp-icon{
    width: 11px !important;
    height: 11px !important;
    margin-right: 2px;
    vertical-align: -1px;
}.fd-card__action .hp-icon{
    width: 14px !important;
    height: 14px !important;
    vertical-align: -2px;
}.fd-card__meta .hp-icon{
    width: 12px !important;
    height: 12px !important;
    margin-right: 2px;
    vertical-align: -1px;
}.fd-card__tag .hp-icon{
    width: 11px !important;
    height: 11px !important;
    margin-right: 2px;
    vertical-align: -1px;
}.icon-background .hp-icon{
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
    opacity: 0.9;
}.hp-album-tags .btn .hp-icon{
    margin-right: 0 !important;
}.hp-album-actions .btn .hp-icon{
    margin-right: 0 !important;
    margin-left: 0 !important;
}.hp-album-meta__who .hp-icon{
    margin-right: 0 !important;
}.comments-section-wrap .btn,
.hp-album-tools .btn{
    gap: 5px !important;
}.comments-section-wrap .btn .hp-icon,
.hp-album-tools .btn .hp-icon{
    margin-right: 0 !important;
    margin-left: 0 !important;
}.fd-card__tag,
.fd-card__badge,
.fd-card__meta a,
.fd-card__meta span{
    gap: 3px !important;
}.fd-card__tag .hp-icon,
.fd-card__badge .hp-icon,
.fd-card__meta .hp-icon{
    margin-right: 0 !important;
    margin-left: 0 !important;
}/* ==========================================================================
   HERO → SECTION SPACING (tag / model / site pages)
   The tag hero is followed by a <script> before the first section, so use the
   general sibling combinator;every section head then shares the rhythm.
   ========================================================================== */
.fd-tag-hero ~ .fd-section-head{
    margin-top: 28px !important;
}@media screen and (max-width: 767px) {.fd-tag-hero ~ .fd-section-head {
        margin-top: 22px !important;
    }}.hp-i-side__label{
    display: none;
}.hp-i-layout .hp-i-meta .hp-icon{
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0;
    opacity: 0.8;
}.hp-i-layout .hp-i-actions .btn .hp-icon{
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    flex-shrink: 0;
    opacity: 0.9;
}.hp-i-layout > .fd-section-head{
    order: 4;
}@media screen and (min-width: 1200px) {.hp-i-layout > .fd-section-head {
        grid-column: 1;
        grid-row: 3;
        margin-top: 28px !important;
    }}/* ==========================================================================
   IMAGE PAGE — in-rail panels (image codes, keybindings)
   Same language as the album report panel: caps label, divider, fields.
   ========================================================================== */
/* panels use the same bordered panel design as the album Flag Album /
   Gallery Codes panels */
.hp-i-panel{
    margin: 12px 0 18px !important;
    padding: 16px !important;
    border: 1px solid var(--hp-color-border) !important;
    border-radius: 16px !important;
    background: rgba(var(--hp-color-white-rgb), 0.035) !important;
}#sharecode[hidden],
#shortcutsPanel[hidden],
#linksForm[hidden],
.hp-i-layout .hp-i-panel[hidden],
.hp-album-side .hp-i-panel[hidden]{
    display: none !important;
}.hp-i-panel__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 10px;
}.hp-i-panel__label{
    color: var(--hp-color-accent-soft);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}.hp-i-panel__close{
    padding: 0 2px;
    border: 0;
    background: none;
    color: var(--hp-color-text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}.hp-i-panel__close:hover{
    color: var(--hp-color-white);
}.hp-i-field{
    margin: 0 0 10px;
}.hp-i-field:last-child{
    margin-bottom: 0;
}.hp-i-field__label{
    display: block;
    margin: 0 0 5px;
    color: var(--hp-color-text-dim);
    font-size: 10.5px;
}.hp-i-field__row{
    display: flex;
    gap: 6px;
}.hp-i-input{
    flex: 1 1 auto;
    min-width: 0;
    height: 32px;
    padding: 6px 10px;
    border: 1px solid rgba(var(--hp-color-white-rgb), 0.10);
    border-radius: 9px;
    background: rgba(var(--hp-color-white-rgb), 0.04);
    color: var(--hp-color-text);
    font-size: 11px;
    text-overflow: ellipsis;
}.hp-i-input:focus{
    outline: none;
    border-color: rgba(var(--hp-color-accent-rgb), 0.5);
}.hp-i-copy{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 32px;
    border: 1px solid rgba(var(--hp-color-white-rgb), 0.10);
    border-radius: 9px;
    background: rgba(var(--hp-color-white-rgb), 0.04);
    color: var(--hp-color-text-soft);
    cursor: pointer;
}.hp-i-copy .hp-icon{
    width: 15px !important;
    height: 15px !important;
}.hp-i-copy:hover{
    border-color: rgba(var(--hp-color-accent-rgb), 0.45);
    background: rgba(var(--hp-color-accent-rgb), 0.14);
    color: var(--hp-color-white);
}.hp-album-side .hp-album-actions .btn:not(.options) .hp-icon{
    margin: 0 !important;
}/* ==========================================================================
   ALBUM ACTIONS ROW — same tile language on mobile and desktop
   (icons only for secondary actions;.hp-album-actions .btn .hp-icon{
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    flex-shrink: 0;
    opacity: 0.9;
}/* mobile album flow: breathing room around the media grid */
@media screen and (max-width: 1199px){
    .hp-album-layout .hp-album-grid {
        margin-top: 16px !important;
        margin-bottom: 16px !important;
    }

    /* 28px rhythm between the comments card and the related section */
    .hp-album-layout .comments-section-wrap {
        margin-bottom: 0 !important;
    }

    .hp-album-layout .fd-section-head {
        margin-top: 28px !important;
    }
}#linksForm.hp-i-panel{
    margin: 12px 0 18px !important;
    padding: 16px !important;
    border: 1px solid var(--hp-color-border) !important;
    border-top: 1px solid var(--hp-color-border) !important;
    border-radius: 16px !important;
    background: rgba(var(--hp-color-white-rgb), 0.035) !important;
}#linksForm .hp-i-panel__head{
    margin: 0 0 12px;
}#linksForm .hp-i-panel__label{
    font-size: 11px;
    font-weight: 700;
}#linksForm .hp-i-field{
    margin: 0 0 10px;
}/* ==========================================================================
   PROFILE CONTENT — section heads (albums / favorites)
   ========================================================================== */
.fd-section-head__icon{
    width: 18px !important;
    height: 18px !important;
    margin-right: 8px;
    vertical-align: -3px;
    color: var(--hp-color-accent-soft);
}.fd-section-head__count{
    flex-shrink: 0;
    color: var(--hp-color-text-muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}@media screen and (max-width: 767px) {.fd-section-head__count {
        font-size: 11px;
    }}.hp-mod-fab .hp-icon{
    width: 20px !important;
    height: 20px !important;
}/* the markup carries .d-none;that is the only thing hiding the chip */
#modBatchBar:not(.d-none){
    display: flex !important;
}.hp-mod-chip .hp-icon{
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
}/* already restricted: same neutral chrome as the restrict chip (the "Restricted"
   badge carries the state);/* legacy album/image helpers moved from styles.min.css */
/* .icon-background{
  padding: 2px 4px;
  font-size: 12px;
  opacity: 0.9;
  background: linear-gradient(
    45deg,
    rgb(0 0 0 / 30%) 0%,
    rgb(37 38 43 / 30%) 100%
  );
  backdrop-filter: blur(13px) saturate(160%);
  border-radius: 0.375rem;
  margin-right: 2px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}*/

.icon-background{
  padding: 2px 4px;
  font-size: 12px;
  backdrop-filter: blur(13px) saturate(160%);
  background: rgba(0, 0, 0, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}.icon-background:hover{
  background: rgb(20 19 19 / 65%);
}.image-outer{
  position: relative;
  height: 600px;
  /* set height to the maximum height of the image */
  max-width: 100%;
  /* set max-width to the maximum width of the container */
  display: flex;
}.image-outer img{
  max-height: 100%;
  /* set max-height to 100% to fill the height of the container */
  max-width: 100%;
  /* set max-width to 100% to fill the width of the container */
  object-fit: contain;
  /* set object-fit to contain to maintain the aspect ratio of the image */
}@media only screen and (max-width: 767px) {/* Styles for screens smaller than 768px, such as mobile devices */
  .icon-background {
    font-size: 12px;
    padding: 0.125rem 0.25rem;
  }.image-outer {
    height: 450px;
    /* set height to 360 pixels */
  }}.carousel-control{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}.carousel-control .prev{
  position: absolute;
  left: 0;
}.carousel-control .next{
  position: absolute;
  right: 0;
}/* Show this part only on hover */
.position-relative:hover .hide-data{
  display: block;
}/* Initially hide the absolute-positioned div  
 .position-absolute.hide-data{
   display: none;
 }Show the div when hovering over the image 
 .img-fluid:hover+.position-absolute.hide-data{
   display: block;
 }/* image page content header (was in the moderator block) */
/* /ri/ + /i/ info block: title, tags and actions as one centred column */
.hp-i-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}.hp-i-content .fd-card__tags{
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
    max-width: 100%;
}.hp-i-content .hp-i-title{
    margin: 0;
}