/* CF-1437 / CF-1494 Store review media (photos + uploaded video) */

/* --- Add review form: media inputs --- */
.cf-sreview-media-block {
    margin-bottom: 1rem;
}

.cf-sreview-media-block .cf-sreview-media-label {
    display: block;
    font-size: 14px;
    color: var(--pr-grey-color, #9da4ae);
    margin-bottom: 0.5rem;
}

.cf-sreview-media-photos {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cf-sreview-media-photo-slot {
    position: relative;
    width: 72px;
    height: 72px;
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    overflow: hidden;
    background: #fafbfc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.cf-sreview-media-photo-slot:hover {
    border-color: var(--pr-secondary-color, #4ab246);
}

.cf-sreview-media-photo-slot.is-filled {
    border-style: solid;
    cursor: default;
}

.cf-sreview-media-photo-slot input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.cf-sreview-media-photo-slot .cf-sreview-media-plus {
    font-size: 28px;
    color: #9da4ae;
    line-height: 1;
}

.cf-sreview-media-photo-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cf-sreview-media-photo-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    border: 0;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.cf-sreview-media-photo-slot.is-filled .cf-sreview-media-photo-remove {
    display: flex;
}

.cf-sreview-media-youtube-input {
    margin-top: 0.75rem;
}

/* --- Add review form: video upload slot --- */
.cf-sreview-media-video-slot {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    background: #fafbfc;
    cursor: pointer;
    transition: border-color 0.15s ease;
    min-height: 56px;
    margin: 0;
}

.cf-sreview-media-video-slot:hover {
    border-color: var(--pr-secondary-color, #4ab246);
}

.cf-sreview-media-video-slot.is-filled {
    border-style: solid;
    cursor: default;
}

.cf-sreview-media-video-slot input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.cf-sreview-media-video-slot .cf-sreview-media-plus {
    font-size: 22px;
    color: #9da4ae;
    line-height: 1;
    flex-shrink: 0;
}

.cf-sreview-media-video-slot.is-filled .cf-sreview-media-plus {
    display: none;
}

.cf-sreview-media-video-filename {
    font-size: 14px;
    color: #374151;
    word-break: break-all;
    flex-grow: 1;
}

.cf-sreview-media-video-remove {
    position: relative;
    z-index: 2;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    border: 0;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.cf-sreview-media-video-slot.is-filled .cf-sreview-media-video-remove {
    display: flex;
}

.cf-sreview-media-hint {
    font-size: 12px;
    color: var(--pr-grey-color, #9da4ae);
    margin-top: 0.5rem;
}

/* --- Review card: media gallery --- */
.cf-sreview-media-gallery {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.cf-sreview-media-gallery-item {
    position: relative;
    width: 192px;
    height: 192px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: #f3f4f6;
}

.cf-sreview-media-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cf-sreview-media-gallery-item-video::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

/* Uploaded video: same 96x96 cell as photo/YouTube. The inner <video>
   shows the first frame as a thumbnail (preload=metadata + #t=0.1 seek).
   Click anywhere on the cell → JS opens a lightbox modal with the real
   player. No native controls on the thumbnail — they would be unusable
   at this size and intercept clicks.
   Play overlay reuses .cf-sreview-media-gallery-item-video-play styles
   defined above for the YouTube branch. */
.cf-sreview-media-gallery-item-video-file {
    cursor: pointer;
    background: #000;
}

.cf-sreview-media-gallery-item-video-file::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.cf-sreview-media-gallery-item-video-file video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: #000;
    pointer-events: none;
}

/* The sticky review form on /vidguky's right column.
   After CF-1437/1494/1499 added the photo/video/YouTube upload block, the
   form's total height exceeds typical viewports — sticky-top pins the top
   to the page but the submit button drops below the fold, forcing the user
   to scroll past every review to find it.
   Cap the form height to viewport (minus the 160px header offset set by
   `pr-sticky-column` + a 20px bottom margin) and let it scroll internally.
   User scrolls ~180px inside the form to reach the submit button instead
   of scrolling the whole page past all reviews.
   We tried position:sticky on the button itself, but the sticky overlay
   visually overlapped the YouTube hint text behind it. Cleaner without it.
   Only applies at xl+ since the form column is `d-none d-xl-block`. */
@media (min-width: 1200px) {
    .pr-store-reviews-add.sticky-top {
        max-height: calc(100vh - 180px);
        overflow-y: auto;
        scrollbar-width: thin;
    }
}

/* Lightbox modal for uploaded-video playback. */
.cf-sreview-media-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cf-sreview-media-modal-content {
    position: relative;
    width: 100%;
    max-width: 960px;
    max-height: 100%;
}

.cf-sreview-media-modal-content video,
.cf-sreview-media-modal-content img {
    width: 100%;
    max-height: calc(100vh - 80px);
    display: block;
    background: #000;
    border-radius: 8px;
    object-fit: contain;
}

/* YouTube embed: same modal as uploaded-video, but iframe needs an explicit
   aspect ratio (no intrinsic dimensions) — keep 16:9, cap height to viewport. */
.cf-sreview-media-modal-content iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: calc(100vh - 80px);
    display: block;
    background: #000;
    border: 0;
    border-radius: 8px;
}

.cf-sreview-media-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 0;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cf-sreview-media-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.cf-sreview-media-gallery-item-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.cf-sreview-media-gallery-item-video-play::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 12px solid #111;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    margin-left: 3px;
}

/* --- YouTube embed when activated --- */
.cf-sreview-media-youtube-frame {
    position: relative;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 16 / 9;
    margin-top: 8px;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}

.cf-sreview-media-youtube-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Admin-form preview styles are inlined in
   admin/view/template/octemplates/module/oct_sreview_reviews_form.twig
   via the OCmod patch — this CSS file is loaded only by the storefront,
   so the admin block would be dead code here. */