/* 
Use this CSS file to write custom CSS that
directly targets properties of various BMC compoenents
and component elements.
In examples below, you can see that I'm targeting elements
directly using their "id" attributes {e.g., div#viewer1). 
"id"s are unique identifiers and allow you to target
very specific elements with your CSS rules.
 */

/* ===========================================================================
    Style for video only interactives
    =========================================================================== */

/* target with id viewer 3 */
div#viewer3.bmcVideoLottieScrubber {
    display: flex;
    flex-wrap: wrap; /* no external controls so we need to get creative with the styling...*/
    width: 100% !important;
    height: auto!important;
    margin: 0 var(--spacing-page-margins);

    row-gap: var(--spacing-s);
    justify-content: center;
    align-items:center;    margin: 0;
    padding: 0 ;

    position:relative;
}

div#viewer3.bmcVideoLottieScrubber video {
    aspect-ratio: 346 / 231 !important;
    border-radius: var(--corner-s-radius);
    box-shadow: 0 var(--weight-xxs) var(--weight-xs) 0 rgba(18, 18, 18, 0.3);
    width: 100%;
    height: auto!important;

    top: 0;
    left: 0;
}

div#viewer3.bmcVideoLottieScrubber img {
    aspect-ratio: 346 / 231 !important;
    border-radius: var(--corner-s-radius);
    width: 100%;
    height: 100%;
}

div.bmcVideoLottieScrubber img, div.bmcImageStack img, div.bmcImageWithOverlay img {
    border-radius: var(--corner-s-radius);
    box-shadow: none;
    width: 100%
}

div.bmcCoupledVideoLottieScrubber div div.BmcLotScrubInternal, 
div.bmcVideoLottieScrubber div.BmcLotScrubInternal {
position: absolute;
/* top: 0; */
/* left: 0;*/
width: 100% !important;
/*height: 100%; */
/*ngl i don't understand why this works but the overlay is now in the right
position and resizes properly. i just blocked 1 line at a time
until i found the combination that kept it in the right position.*/
}


/* ===========================================================================
    Style for coupled 3d/video and video/video interactives
    =========================================================================== */

div.bmcCoupledThreeVideoScrubber, div.bmcCoupledVideoLottieScrubber, div.bmcVideoLottieScrubber {
    display: flex !important;
    gap: var(--spacing-m) !important;      /* 16px between images */
    width: 100%;
    height: auto;

    justify-content: center;
    /* padding: 0 var(--spacing-page-margins);   120px — matches Figma centering */
}

/* Target a div that is a member of the CSS class
"bmc_3dviewer" that has the id "viewer1" */
div#viewer1.bmc_3dviewer {
    aspect-ratio: 346 / 231 !important;
    width: calc(50% - 8px) !important;
    height: auto !important;
    margin: 0;
    padding: 0;
}
/* Target a div that is a member of the CSS class
"bmc_3dviewer" that has the id "viewer2" */
div#viewer2.bmc_3dviewer {
    aspect-ratio: 346 / 231 !important;
    width: calc(50% - 8px) !important;
    height: auto !important;
    margin: 0;
    padding: 0;
}

div.bmcCoupledVideoLottieScrubber div{
    aspect-ratio: 346 / 231 !important;
    width: calc(50% - 8px)!important;
    /* height: auto!important; */
    justify-content: center;
    margin: 0;
    padding: 0;
}

div.bmcImageStack, div.bmcVideoLottieScrubber, div.bmcImageWithOverlay, div.bmcImageStack div {
    aspect-ratio: 346 / 231 !important;
    width: calc(50% - 8px)!important;
    /* height: auto!important; */
    margin: 0;
    padding: 0;
}

div#viewer1.bmc_3dviewer canvas, 
div#viewer2.bmc_3dviewer canvas, 
div#viewer1.bmc_3dviewer svg, 
div#viewer2.bmc_3dviewer svg,
div.bmcVideoLottieScrubber video, 
div.bmcImageWithOverlay video,
div.bmcCoupledVideoLottieScrubber div video {
    aspect-ratio: 346 / 231 !important;
    border-radius: var(--corner-s-radius);
    box-shadow: 0 var(--weight-xxs) var(--weight-xs) 0 rgba(18, 18, 18, 0.3);
    width: 100% !important;
    height: 100% !important;
}

/* EXTERNAL CONTROLS panel layout */
div.bmcExternalControls {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--spacing-s);
    justify-content: center;
    align-items:center;
    width: 100%;
    padding: 0;
    margin: 0;
}

/* SLIDER CSS */
div.bmcExternalControls input[type="range"]:not(.toggle),
div.bmcVideoLottieScrubber input[type="range"]:not(.toggle) {
    -webkit-appearance: none;
    appearance: none;
    width: 70%;
    height: 12px;
    border-radius: 100px;
    border: 2px solid #244FCC80;
    background: #F4F8FD;
    opacity: 0.8;
    margin: 6px 0 6px 0;
    padding: 0;
    transition: opacity .2s;
}

div.bmcExternalControls input[type="range"]:not(.toggle):hover,
div.bmcVideoLottieScrubber input[type="range"]:not(.toggle):hover {
    opacity: 1;
}

/* Chrome/Safari/Edge */
div.bmcExternalControls input[type="range"]:not(.toggle)::-webkit-slider-thumb,
div.bmcVideoLottieScrubber input[type="range"]:not(.toggle)::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #244FCC;
    cursor: pointer;
}

div.bmcExternalControls input[type="range"]:not(.toggle):hover::-webkit-slider-thumb,
div.bmcVideoLottieScrubber input[type="range"]:not(.toggle):hover::-webkit-slider-thumb {
    opacity: 1;
}

div.bmcExternalControls input[type="range"]:not(.toggle):active::-webkit-slider-thumb,
div.bmcVideoLottieScrubber input[type="range"]:not(.toggle):active::-webkit-slider-thumb {
    opacity: 1;
    outline: 10px solid #3d70e655;
}

/* Firefox */
div.bmcExternalControls input[type="range"]:not(.toggle)::-moz-range-thumb,
div.bmcVideoLottieScrubber input[type="range"]:not(.toggle)::-moz-range-thumb {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: #244FCC;
    cursor: pointer;
}

div.bmcExternalControls input[type="range"]:not(.toggle):hover::-moz-range-thumb,
div.bmcVideoLottieScrubber input[type="range"]:not(.toggle):hover::-moz-range-thumb {
    opacity: 1;
}

div.bmcExternalControls input[type="range"]:not(.toggle):active::-moz-range-thumb,
div.bmcVideoLottieScrubber input[type="range"]:not(.toggle):active::-moz-range-thumb {
    opacity: 1;
    outline: 10px solid #3d70e655;
}


/* TOGGLE CSS */
div.bmcExternalControls input.toggle,
div.bmcVideoLottieScrubber input.toggle {
    -webkit-appearance: none;
    appearance: none;
    height: 26px;
    border-radius: 100px;
    border: 2px solid #244FCC80;
    background: #F4F8FD;
    opacity: 0.8;
    margin: 0 var(--spacing-xl) 0 0;
    padding: 0;
    transition: opacity .2s, background-color .2s, border-color .2s;
}

div.bmcExternalControls input.toggle:hover,
div.bmcVideoLottieScrubber input.toggle:hover {
    opacity: 1;
}

/* ON state: filled track */
div.bmcExternalControls input.toggle[value="1"],
div.bmcVideoLottieScrubber input.toggle[value="1"] {
    background: var(--button-primary-enabled);
    border-color: var(--button-primary-enabled);
    opacity: 1;
}

/* Thumb — Chrome/Safari/Edge */
div.bmcExternalControls input.toggle::-webkit-slider-thumb,
div.bmcVideoLottieScrubber input.toggle::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #F4F8FD;;
    background: var(--button-primary-enabled);
    cursor: pointer;
}

div.bmcExternalControls input.toggle[value="1"]::-webkit-slider-thumb,
div.bmcVideoLottieScrubber input.toggle[value="1"]::-webkit-slider-thumb {
    background: #F4F8FD;;
    border: 2px solid var(--button-primary-enabled);
}

/* Thumb — Firefox */
div.bmcExternalControls input.toggle::-moz-range-thumb,
div.bmcVideoLottieScrubber input.toggle::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    border: 2px solid #F4F8FD;;
    background: var(--button-primary-enabled);
    cursor: pointer;
}

div.bmcExternalControls input.toggle[value="1"]::-moz-range-thumb,
div.bmcVideoLottieScrubber input.toggle[value="1"]::-moz-range-thumb {
    background: #F4F8FD;;
    border: 2px solid var(--button-primary-enabled);
}

div.bmcExternalControls label,
div.bmcVideoLottieScrubber label {
  font-family: var(--font-family);
  font-size: var(--type-interactive-size);
  line-height: var(--type-interactive-line-height);
  font-weight: var(--type-interactive-weight);
  letter-spacing: var(--type-interactive-tracking);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px 6px 8px !important;
    margin: 0 !important; 
    border: 0 !important;
}

div.bmcExternalControls label:last-of-type,
div.bmcVideoLottieScrubber label:last-of-type {
    border-left: 1px solid #ccc !important;
    padding-left: var(--spacing-xl) !important;
}

/* bridget addons july 21 */
div.bmc_3dviewer div.loadButtonContainer {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 2;
}

div.bmc_3dviewer input.load_btn {
    font-family: var(--font-family);
    font-size: var(--type-interactive-size);
    line-height: var(--type-interactive-line-height);
    font-weight: var(--type-interactive-weight);
    letter-spacing: var(--type-interactive-tracking);
    color: #F4F8FD;
    background: var(--button-primary-enabled);
    border: 2px solid var(--button-primary-enabled);
    border-radius: 100px;
    padding: 8px 20px;
    cursor: pointer;
    transition: opacity .2s;
}

div.bmc_3dviewer input.load_btn:hover {
    opacity: 0.85;
}

.component-fullscreen-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 2px solid #244ecc3e;
    border-radius: var(--corner-m-radius);
    gap: var(--spacing-xl);
    padding: var(--spacing-s);
}

.fullscreen-toggle {
    position: absolute;
    bottom: var(--spacing-s);
    right: var(--spacing-s);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: var(--button-primary-enabled);
    box-shadow: 0 2px 6px rgba(18, 18, 18, 0.3);
    transition: background 0.2s;
}

.fullscreen-toggle:hover {
    background: #fff;
}

/* Start/end text flanking a Playback-style slider */
.scrubber-text-box {
    font-family: var(--font-family);
    font-size: var(--type-interactive-size);
    line-height: var(--type-interactive-line-height);
    font-weight: var(--type-interactive-weight);
    letter-spacing: var(--type-interactive-tracking);
    color: var(black);
    white-space: nowrap;
    padding: var(--spacing-m);
}

/* Shrink the slider only when it actually has text boxes next to it,
   so components without them keep their current full width. */
div.bmcExternalControls input[type="range"].has-text-boxes:not(.toggle),
div.bmcVideoLottieScrubber input[type="range"].has-text-boxes:not(.toggle) {
    width: 65%;
}