/**
 * ARWAI Image Annotator - v2 (Simple Viewer)
 *
 * Frontend public styles for the new simple image viewer.
 *
 * REORGANIZED STRUCTURE:
 * 1. Settings & Global Styles   - CSS variables (:root) and global settings.
 * 2. Main Layout               - Core containers that structure the page.
 * 3. Component: Viewer & Slider - The main image viewer, including slider and navigation.
 * 4. Component: Thumbnail Strip   - The clickable thumbnail navigation strip.
 * 5. Component: Sidebar & Lists  - The sidebar, buttons, and annotation list styles.
 * 6. Component: Single Annotation (Mobile) - The popup for viewing an annotation on mobile.
 * 7. Component: OpenSeadragon    - OSD modal, toolbar, and Annotorious overrides.
 * 8. Component: Shortcodes & Archives - Styles for WordPress shortcodes and archive pages.
 * 9. Responsive Layout Styles  - Media queries that affect the overall page layout on mobile.
 * 10. Utility & Override Styles - Final, high-specificity fixes.
 */

/* ==========================================================================
   1. Settings & Global Styles
   ========================================================================== */

:root {
    /* ==================================
    Brand & State Colors
    ================================== */



        /* CSS HEX */
        --black: #000000ff;
        --aquamarine: #00e0a1ff;
        --white: #ffffffff;
        --caribbean-current: #2b645eff;
        --red-pantone: #e63946ff;
        --yinmn-blue: #36558fff;


    /* ==================================
       UI & Text Colors
       ================================== */
    --color-text-base: #000;
    --color-text-light: #fff;
    --color-text-muted: #6c757d;
    --color-text-link-hover: linear-gradient(to right, #ff8a00, #da1b60);
    

    /* ==================================
       UI Background Colors
       ================================== */
    --color-bg-primary: #fff;
    --color-bg-secondary: #e9ecef; /* For sidebars, etc. */
    --color-bg-tertiary: #e9ecef67; /* For buttons hovers, etc. */

    --color-bg-overlay-dark: rgba(0, 0, 0, 0.8);
    --color-bg-modal: rgba(0, 0, 0, 0.9);

    --color-bg-button-primary: #fff; /* For main action buttons */
    --color-bg-button-primary-highlight: #00E0A1; /* For main action buttons HOVER */
    --color-bg-button-primary-contrast: #000;
    --color-bg-button-secondary: #36558fff;
    --color-bg-button-secondary-contrast: #e63946ff; /* For secondary navigation buttons */
    --color-bg-button-secondary-highlight: rgba(255, 255, 255, 0.2); /* For secondary navigation buttons */

    /* ==================================
       Borders & Dividers
       ================================== */
    --color-border-extra-light:rgba(128, 128, 128, 0.201);
    --color-border-light: #bababa; /* simple viewer border, sidebar border, thumbnail strip */
    --color-border-medium: #ccc;
    --color-border-dark: ; /*  */

    /* ==================================
        Annotorious Formatters
        ================================== */
    /* label: base */
    --annotation-label-base-background-color: var(--color-bg-button-primary);
    --annotation-label-base-font-color: #000;
    /* label: tagged */
    --annotation-label-tagged-background-color: var(--color-bg-button-secondary);
    --annotation-label-tagged-font-color: white;
    /* label: important */
    --annotation-label-important-background-color: var(--color-bg-button-secondary);
    --annotation-label-important-font-color: white;
    /* label: selected */
    --annotation-label-selected-background-color: var(--color-bg-button-secondary-contrast);
    --annotation-label-selected-font-color: #000;

    --arwai-tag-transition-parent: transform 0.12s cubic-bezier(0.65, 0, 0.35, 1);

    /* --arwai-tag-transition-child: scale(1.45); */
    --arwai-tag-transition-child-scale-small: scale(1.05);
    --arwai-tag-transition-child-scale-medium: scale(1.12);
    --arwai-tag-transition-child-scale-large: scale(1.2);
}

/* ==========================================================================
   2. Main Layout
   ========================================================================== */
.arwai-simple-viewer {
    /* justify-content: center; */
    align-items: center;
    /* display: flex; */
    flex-direction: column;
    text-align: center;
};

.arwai-simple-viewer-container{
    align-items: center;
    flex-direction: column;
    display: flex;
}

.arwai-simple-viewer-container2 {
    /* width: 100%; */
    display: flex;
    /* flex-direction: row; */
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    max-height: 70vh;
    min-height: 70vh;
    margin: 0 2rem;        
    flex-direction: column;
    height: auto; /* Let content determine height */
    max-height: 100%;
}

.arwai-simple-viewer-container3 {
    flex: 3;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* padding: 1.5rem; */
    width: 100%;
    min-height: 70vh;
}

#arwai-simple-viewer-main {
    position: relative;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Set a maximum vertical limit for the viewer */
    max-height: 130vw;
    min-height: 300px; /* Prevents it from getting too small */
    /* padding: 1.5rem; */
    /* border-right: 1px solid  var(--color-border-light); */
    /* border-bottom: 1px solid var(--color-border-light); */
    z-index: 9999;
}

#arwai-simple-viewer-sidebar {
    /* flex: 1; */
    width: 3.5rem;
    /* background-color: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
    border-right: 1px solid var(--color-border-light); */

    /* Height is handled by 'align-items: stretch' on the parent */

    display: flex;
    flex-direction: column;
    /* max-height: 70vh;
    min-height: 70vh; */
    justify-items: center;
    justify-content: center;
    align-content: center;
    box-sizing: border-box;
    width:fit-content;
    text-align: center;
    margin: 1rem 0;
}

/* ==========================================================================
   3. Component: Viewer & Slider
   ========================================================================== */

.arwai-slick-slider {
    width: 100%;
    height: 100%;
}

/* Ensure the entire Slick Slider structure has full height */
.slick-list,
.slick-track,
.slick-slide,
.slick-slide > div { /* Target Slick's wrapper div inside the slide */
    height: 100%;
}

.slick-track {
    display: flex;
}

.arwai-slick-slider .slick-slide {
    display: flex;
    align-items: center; /* This vertically centers the content */
    justify-content: center;
}

.arwai-slick-slide-wrapper {
    display: flex;
    /* align-items: center; */
    width: 100%;
    /* height: 100%; */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99999!important;
}

.arwai-slick-slide-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.arwai-simple-viewer-nav {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: var(--color-bg-overlay-dark);
    border-radius: 30px;
    padding: 0.25rem 0.5rem;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(5px);
}

.arwai-simple-viewer-nav button {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.arwai-simple-viewer-nav button:hover {
    background-color: var(--color-bg-button-secondary-highlight);
    color: var(--color-bg-button-primary-highlight);
    transform: var(--arwai-tag-transition-child-scale-large);
}

.arwai-simple-counter {
    color: white;
    font-size: 1rem;
    margin: 0 1rem;
}

/* Responsive styles for the slider */
@media (orientation: portrait) and (min-width: 1200px) {
    .slick-slide img,
    .slick-slide {
        height: 80vw;
    }
}

@media (orientation: landscape) and (min-width: 1200px) {
    .slick-slide img,
    .slick-slide {
        width: 80vh;
        height: 60vh;
    }
}

@media (orientation: portrait) and (max-width: 767px) {
    .slick-slide img,
    .slick-slide {
        height: 130vw;
    }
}

@media (orientation: landscape) and (max-width: 1200px) {
    .slick-slide img,
    .slick-slide {
        width: 80vh;
        height: 78vh;
    }

}

/* ==========================================================================
   4. Component: Thumbnail Strip
   ========================================================================== */

.arwai-simple-viewer-strip-container {
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding: 1rem; */
    /* background: var(--color-bg-secondary); */
    /* border-bottom: 1px solid var(--color-border-light);
    border-left: 1px solid var(--color-border-light); */

}

#arwai-simple-viewer-reference-strip {
    display: flex;
    overflow-x: auto;
    padding: 5px 0;
    white-space: nowrap;
    scrollbar-width: none; /* Firefox */
    box-sizing: border-box;

}

#arwai-simple-viewer-reference-strip::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

.arwai-simple-thumb {
    height: 80px;
    margin: 0 5px;
    border: 3px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.arwai-simple-thumb:hover {
    border-color: var(--color-bg-button-primary-highlight);
    transform: var(--arwai-tag-transition-child-scale-medium);
}

.arwai-simple-thumb.active {
    transform: scale(1.1);
    border-color: var(--annotation-label-selected-font-color);
}

.arwai-simple-strip-scroll-left,
.arwai-simple-strip-scroll-right {
    flex-shrink: 0;
    background: var(--color-bg-overlay-dark);
    color: var(--color-bg-button-primary);
    /* border: 1px solid var(--color-border-light); */
    cursor: pointer;
    padding: 10px 5px;
    z-index: 1;
    height: 96px;
    border:none;
    box-sizing: border-box;
    width:34px;
}

.arwai-simple-strip-scroll-left:hover,
.arwai-simple-strip-scroll-right:hover {
    transform: var(--arwai-tag-transition-child-scale-small);
    color: var(--color-bg-button-primary-highlight);
    background-color: var(--color-bg-button-secondary-highlight);
    /* border-color: var(--color-bg-button-primary-highlight); */
}

/* ==========================================================================
   5. Component: Sidebar & Lists
   ========================================================================== */

.arwai-simple-viewer-buttons {
    /* width: 100%; */
    max-width: 100%;
    padding: 0.4rem 1.5rem;
    display: flex;
    justify-content: center;
    gap:1.4rem;
    transition: var(--arwai-tag-transition-parent);
    backdrop-filter: blur(5px);
    flex-direction: row;
    background: var(--color-bg-secondary);
    border-radius: 50px;
    border: 1px solid var(--color-border-medium);
    /* align-items: center; */

}

.arwai-simple-viewer-button-wrapper {
    font-size: 10px;
    text-wrap: wrap;
    /* width: 3.5rem; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    /* gap: .5rem; */
    flex-basis: 3.5rem;
}

.arwai-simple-viewer-buttons button {
    background: transparent;
    cursor: pointer;
    /* border: 1px solid var(--color-text-base); */
    border:none;
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0;
    color: var(--color-text-base);
    cursor: pointer;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    /* font-size: 10px; */
    transition: background-color 0.2s;
    /* gap: 0.5rem; */
    backdrop-filter: blur(5px);
    /* background: var(--color-bg-overlay-dark); */
}


.arwai-simple-viewer-buttons button:hover {
    background-color: var(--color-bg-button-primary-highlight);
    transform: var(--arwai-tag-transition-child-scale-large);
}





/* ==========================================================================
   6. Component: Single Annotation 
   ========================================================================== */

/* Show the single annotation container on mobile */
#arwai-single-annotation-container {
    display: none;
    position: relative;
    margin-top: 1rem;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    max-width: 600px;
    background: rgba(255, 255 , 255, 0.5);
    backdrop-filter: blur(15px);
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0.5rem;
    /* box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.24),
        0 4px 12px rgba(0, 0, 0, 0.36); */
    }


#arwai-single-annotation {
    list-style: none;
    padding: 0;
    margin: 0;
}

#arwai-single-annotation > li {
    text-align: center;
}

ul#arwai-single-annotation li div.arwai-anno-single-body ul li p{
    margin: 0.2rem;
}

.arwai-anno-single-header {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    background: white;
    border-radius: 50%;
}

.arwai-anno-single-body ul,
.arwai-anno-single-footer ul {
    list-style: none;
    padding-left: 0;
}

#arwai-close-single-annotation.arwai-btn {
	float: right;
    transform: translateY(-2rem);
    background: none;
	color: inherit;
	border: 1px solid transparent;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

#arwai-close-single-annotation.arwai-btn svg:hover {
    fill: var(--color-bg-button-primary-highlight);
    transform: var(--arwai-tag-transition-child-scale-large);
    /* transform: var(--arwai-tag-transition-child-scale-small);
    color: var(--color-bg-button-primary-highlight);
    border-color: var(--color-bg-button-primary-highlight); */
    /* background-color: var(--color-bg-button-secondary-highlight); */
}

#arwai-close-single-annotation .feather-x-circle {
    display: flex;
    justify-content: center;
    height: 2rem;
    width: 2rem;
    stroke-width: 1.5;
}


.arwai-anno-single-item {
    text-align: left;
    box-sizing: border-box;
    padding: 8px;
}

.arwai-anno-single-body ul,
.arwai-anno-single-footer {
    list-style: none;
    padding: 0;
}

.arwai-anno-single-comments {
    list-style: none;
    padding: 0;
    margin: 0;
}

.arwai-anno-single-comment-item {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border-extra-light);
    font-size: 1rem;
}

.arwai-anno-single-comment-item:last-child {
    border-bottom: none;
}

.arwai-anno-single-comment-item p {
    margin: 0.2rem;
}

.arwai-anno-single-comment-meta {
    font-size: 0.6rem;
    color: var(--color-text-muted);
}

.arwai-anno-single-footer {
    font-size: 0.8rem;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    /* border-top: 1px solid #f4f4f4; */
    display: flex;
    /* gap: 0.5rem; */
    flex-grow: 0;
    flex-wrap: wrap;
}

.arwai-anno-single-tag {
    font-size: 0.8rem;
    padding: .2rem 1rem;
    margin: 2px;
}



/** SINGLE ANNOTATION STATE STYLES **/
#arwai-single-annotation-container {
    border-color: var(--annotation-label-base-font-color);
}

#arwai-single-annotation-container.is-tagged {
    border-color: var(--annotation-label-tagged-background-color);
}

#arwai-single-annotation-container.is-important {
    border-color: var(--annotation-label-important-background-color);
}

#arwai-single-annotation-container ul#arwai-single-annotation li div div.arwai-anno-single-header {
    border: 2px solid var(--annotation-label-base-font-color);
}

#arwai-single-annotation-container.is-tagged ul#arwai-single-annotation li div div.arwai-anno-single-header {
    border: 2px solid var(--annotation-label-tagged-background-color);
}

#arwai-single-annotation-container.is-important ul#arwai-single-annotation li div div.arwai-anno-single-header {
    border: 2px solid var(--annotation-label-important-background-color);
}


/* ==========================================================================
   7. Component: OpenSeadragon
   ========================================================================== */

#arwai-osd-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background-color: var(--color-bg-primary);
    /* rgba(0, 0, 0, 0.9); */
    z-index: 9999;
    margin: 0;
    backdrop-filter: blur(5px);
}

#arwai-osd-viewer {
    width: 100%;
    height: 100%;
}

.arwai-osd-toolbar-container {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.4rem 1.5rem;
    backdrop-filter: blur(5px);
    background: var(--color-bg-overlay-dark);
    border-radius: 50px;
    z-index: 10000;
    display:flex;
    align-items: center;
    justify-content: space-between;
    gap:1.4rem;
}

#arwai-openseadragon-toolbar-other {
    position: absolute;
    top: 50px;
    left: 85%;
    padding: 0.4rem 1rem;
    backdrop-filter: blur(5px);
    background: var(--color-bg-overlay-dark);
    border-radius: 50px;
    z-index: 10000;
    display:flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
}

#arwai-openseadragon-toolbar button,
#arwai-openseadragon-toolbar-other button {
    background: transparent;
    padding: 0 ;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex!important;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#arwai-openseadragon-toolbar button:hover,
#arwai-openseadragon-toolbar-other button:hover {
    background-color: var(--color-bg-button-secondary-highlight); /* rgba(255, 255, 255, 0.2) */
    color: var(--color-bg-button-primary-highlight);
    transform: var(--arwai-tag-transition-child-scale-large);
}

/* #arwai-openseadragon-toolbar button:hover .arwai-osd-toolbar-button-wrapper,
#arwai-openseadragon-toolbar-other button:hover .arwai-osd-toolbar-button-wrapper {
    color: red;
} */

.arwai-osd-toolbar-button-wrapper {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 10px;
    color: white;
}

#arwaiHomeWrapper {
    border-left: 1px solid rgba(128, 128, 128, 0.201)!important;
    border-right: 1px solid rgba(128, 128, 128, 0.201)!important;
    padding-left: 1rem;
    padding-right: 1rem;
}

.arwai-zoom-buttons {
    border-right: 1px solid rgba(128, 128, 128, 0.201)!important;
    padding-right: .5rem;
}

.arwai-rotate-buttons {
    padding-left: .5rem;
}

.arwai-zoom-buttons,
.arwai-rotate-buttons {
    display: flex;
    justify-content: space-around;
    gap:.5rem;
}





/* Annotorious Overrides */
.a9s-annotation foreignObject {
    overflow: visible; /* Allows box-shadow to appear */
    pointer-events: none; /* Lets you click "through" the label */
}

/* base annotation label style*/
.a9s-annotation foreignObject label {
    display: flex!important;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: white;
    border: 1px solid var(--annotation-label-base-font-color);
    justify-content: center;
    align-items: center;
    color: var(--annotation-label-base-font-color);
    font-size: 12px;
    font-weight: bold;
    font-family: sans-serif;
}
.a9s-annotation .a9s-inner,
.a9s-annotation .a9s-outer,
.a9s-annotation foreignObject label  {
    /* transition: border 0.2s ease, color 0.2s ease, stroke 0.2s ease, fill 0.2s ease; */
    /* border: none; */
    background: var(--color-bg-button-primary);
    stroke: var(--color-bg-button-primary);
    color: var(--color-bg-button-primary-contrast); 

}
.a9s-annotation:hover .a9s-inner,
.a9s-annotation:hover .a9s-outer,
.a9s-annotation:hover foreignObject label {
    border: 2px solid var(--color-bg-button-primary-highlight)!important;
    border: none!important;
    /* color: var(--color-bg-button-primary)!important; */
    stroke: var(--color-bg-button-primary-highlight)!important; 
    /* fill: var(--color-bg-tertiary); */
}


.a9s-annotation.tagged .a9s-inner, .a9s-annotation.tagged .a9s-outer { 
    stroke: var(--annotation-label-tagged-background-color); }
.a9s-annotation.important .a9s-inner, .a9s-annotation.important .a9s-outer{ 
    stroke: var(--annotation-label-important-background-color); }

.a9s-annotation.selected .a9s-inner, .a9s-annotation.selected .a9s-outer {
    stroke: var(--annotation-label-selected-font-color) !important;
    stroke-width: 2px;
    box-shadow: var(--wp--preset--shadow--natural); 
    fill: #ffffff20;
    backdrop-filter: blur(90px);
}

.a9s-annotation.tagged foreignObject label { 
    background: var(--annotation-label-tagged-background-color); 
    color: var(--annotation-label-tagged-font-color); 
    border:none; }
.a9s-annotation.important foreignObject label { 
    background: var(--annotation-label-important-background-color); 
    color: var(--annotation-label-important-font-color); 
    border:none; }
.a9s-annotation.selected foreignObject label {
    border: 2px solid var(--annotation-label-selected-font-color);
    box-shadow: var(--wp--preset--shadow--natural);
    /* background-color: #007cba; Example highlight color */
    /* color: white; */
    /* border-color: #005a87; */
}



/* OSD Responsive Styles */
@media (max-width: 767px) {
    .arwai-osd-toolbar-container {
        position: fixed;
        top: unset;
        bottom: 0px;
        left: 50%;
        right: 0;
        transform: translateX(-50%);
        padding: 0.5rem 2rem 1.5rem 2rem;
        width: 100%;
        border-radius: .5rem .5rem 0 0 ;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color:white;
        font-size: small;
    }

    .arwai-osd-toolbar-container button,
    #arwai-openseadragon-toolbar-other button {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px;
        justify-content: center;
    }

    #arwai-openseadragon-toolbar-other {
        display: none!important;
    }

    .arwai-osd-toolbar-button-wrapper {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 10px;
    }
}


/* ==========================================================================
   8. Component: Shortcodes & Archives
   ========================================================================== */

.arwai-all-tags-list-shortcode {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
}

/* full tag list shortcode */
.arwai-tags-list {
    display: flex;
    justify-content: flex-start;
    gap: .6rem;
    padding: 0 .7rem;
    flex-wrap: wrap;

}

/* tags in sidebar, single annotation, and full tag list shortcode */
.arwai-tag {
    display: flex;
    align-items: center;
    padding: 0;
    text-decoration: none;
    font-size: .8rem;

}


.arwai-tag a {
    text-decoration: none;
    color: inherit;
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-light);
    border-radius: 1rem;
    font-size: .9rem;
    padding: .2rem 1rem;
    /* margin: 3px; */
    transition: var(--arwai-tag-transition-parent);
    text-wrap: nowrap;
}

.arwai-tag:hover a {
    transform: var(--arwai-tag-transition-child-scale-small);
    background:  var(--color-text-link-hover);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
    border: 1.5px solid var(--color-bg-button-primary-highlight);
}

/* Just image tag list shortcode */
.arwai-all-tags-list-shortcode ul li {
    font-size: .9rem;
}

button.arwai-anno-single-tag {
    border: unset;
    background: unset;
}

/* Styles for theme archive page (eventually) */
.arwai-archives-post-template {
    /* border: 5px solid red; */
    box-sizing: border-box;
}

.arwai-archives-post-template-card {
    /* border: 5px dashed blue; */
    border-radius: 2rem;
}

.arwai-archive-attachment-image,
.arwai-archive-featured-image {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
}

.arwai-archive-attachment-image img,
.arwai-archive-featured-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    padding:0!important;
    margin:0!important;
    border-radius: 2rem 2rem 0 0;
}

/* ==========================================================================
   9. Responsive Layout Styles
   ========================================================================== */



@media (orientation: landscape) and (max-width: 1200px) {
    /* #arwai-simple-viewer-sidebar {
        min-width: unset;
        max-width: unset;
        width: 25%;
    } */
    
    #arwai-single-annotation-container {
        /* width: 25%!important;
        padding: 1em .1em .1em .1em !important; */
    }
    
    #arwai-close-single-annotation {
        /* margin: 0.5rem; */
    }
    
    #arwai-close-single-annotation.arwai-btn {
        /* float: unset!important; */
    }
}

/* ==========================================================================
   10. Utility & Override Styles
   ========================================================================== */

/* iOS device fix */
.openseadragon-canvas:focus,
#arwai-osd-modal:focus,
#arwai-osd-viewer:focus {
    outline: 0 !important;
}


@media print {
    #header,
    #footer,
    #nav {
        display: none !important;
    }
    #arwai-simple-viewer-sidebar{
        display:none;
    }
    .arwai-simple-viewer-container{
        border: 3px solid red;
    }

    /* Reset transforms and layout quirks */
    .slick-track,
    .slick-list {
        transform: none !important;
        overflow: visible !important;
        width: 100% !important;
    }

    .slick-slide {
        display: none !important;
        float: none !important;
        width: auto !important;
    }

    .slick-slide.slick-current {
        display: block !important;
        margin: 0 auto !important;
        text-align: center !important;
        transform: none !important;
    }

    .slick-slide.slick-current img {
        display: block;
        margin: 0 auto;
        max-width: 66%;
        height: auto;
    }

    /* Hide navigation UI */
    .slick-arrow,
    .slick-dots {
        display: none !important;
    }
    /* Optional: remove page margins for full bleed */
    /* @page {
        margin: 0;
    } */
}

/* ==========================================================================
   11. Popups
   ========================================================================== */

.popup-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 400px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popup-content {
    background-color: white;
    /* padding: 2rem; */
    border: 1px solid var(--color-border-light);
    border-radius: 5px;
    box-shadow: var(--wp--preset--shadow--natural);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: end;
    font-size: 0.8rem;
}

.popup-content div{
    padding: 1rem 1rem 0 1rem;
}
.popup-content svg.feather-maximize-2 {
    height: 0.8rem;
}
.popup-content .button-wrapper {
    align-self: flex-end;
    padding: 0.5rem;
}
/* History Sidebar Feed */
.arwai-history-feed-item {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.arwai-history-feed-item:hover {
    background-color: #f0f0f0;
}
.arwai-history-feed-item:last-child {
    border-bottom: none;
}
.arwai-history-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #ddd;
    color: #333;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 8px;
    vertical-align: middle;
}
.arwai-history-meta {
    color: #888;
    font-size: 10px;
    margin-top: 4px;
}
.arwai-action-create .arwai-history-avatar { background-color: #d4edda; color: #155724; }
.arwai-action-update .arwai-history-avatar { background-color: #cce5ff; color: #004085; }
.arwai-action-delete .arwai-history-avatar { background-color: #f8d7da; color: #721c24; }


/* History Sidebar Overlay Fixes */
#arwai-history-sidebar {
    position: absolute;
    right: 50px;
    top: 0;
    bottom: 0;
    z-index: 100;
    background: #fafafa;
    border-left: 1px solid #ddd;
    overflow-y: auto;
    padding: 10px;
    width: 250px;
    transition: transform 0.3s ease;
    transform: translateX(100%);
    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
}
#arwai-history-sidebar.active {
    transform: translateX(0);
}
.arwai-simple-viewer-container2 {
    position: relative;
    overflow: hidden;
}


/* Annotorious History Widget Tab Styling */
.a9s-annotationlayer .r6o-widget.arwai-history-widget {
    padding: 0;
    border: none;
    margin-top: -1px;
}
.arwai-history-widget-tabs {
    display: flex;
    border-bottom: 1px solid #e5e5e5;
    background: #f9f9f9;
}
.arwai-history-widget-tab {
    flex: 1;
    padding: 8px 12px;
    text-align: center;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: #666;
    border-bottom: 2px solid transparent;
}
.arwai-history-widget-tab.active {
    color: #0073aa;
    border-bottom-color: #0073aa;
    background: #fff;
}


/* Revert Tab css */
.arwai-history-widget-tabs { display: none; }


/* Annotorious History Widget Compact Fixes */
.a9s-annotationlayer .r6o-widget.arwai-history-widget {
    padding: 0;
    margin: 0;
}
.a9s-annotationlayer .r6o-editor .r6o-widget {
    padding: 8px 12px;
}
.a9s-annotationlayer .r6o-editor .r6o-widget.arwai-history-widget {
    padding: 0;
}
.a9s-annotationlayer .r6o-editor .r6o-footer {
    padding: 8px 12px;
}