/* ========================================================================
   THE CIVIL CITY
   TCC UNIVERSAL VIEWER
   ======================================================================== */


/* ========================================================================
   VARIABLES
   ======================================================================== */

:root {

    --tcc-viewer-navy:
        #071c46;

    --tcc-viewer-navy-hover:
        #0d2a5e;

    --tcc-viewer-white:
        #ffffff;

    --tcc-viewer-stage:
        #252525;

    --tcc-viewer-text:
        #172033;

    --tcc-viewer-muted:
        #6b7280;

    --tcc-viewer-border:
        rgba(255, 255, 255, 0.24);

    --tcc-viewer-whatsapp:
        #25d366;

    --tcc-viewer-whatsapp-hover:
        #1ebe5d;

    --tcc-viewer-error:
        #c93445;
}


/* ========================================================================
   ROOT
   ======================================================================== */

.tcc-viewer {

    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    z-index: 99999 !important;

    display: none;

    margin: 0 !important;
    padding: 0 !important;

    color:
        var(--tcc-viewer-text);

    font-family:
        inherit;
}


.tcc-viewer.is-open {

    display: block !important;
}


/* Prevent background page scrolling */

body.tcc-viewer-open {

    overflow: hidden;
}


/* ========================================================================
   BACKDROP
   ======================================================================== */

.tcc-viewer__backdrop {

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    background:
        rgba(3, 12, 30, 0.80);

    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);
}


/* ========================================================================
   MAIN DIALOG
   ======================================================================== */

.tcc-viewer__dialog {

    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

    width: 60vw !important;
    height: 90vh !important;

    max-width: 1050px !important;
    max-height: 800px !important;

    min-width: 850px;
    min-height: 600px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    margin: 0 !important;

    background:
        #ffffff;

    border-radius:
        10px;

    box-shadow:
        0 20px 70px
        rgba(0, 0, 0, 0.40);

    transform:
        translate(-50%, -50%) !important;

    outline:
        none;

    z-index:
        2 !important;
}


/* ========================================================================
   TOP BAR
   ======================================================================== */

.tcc-viewer-topbar {

    flex:
        0 0 50px;

    width:
        100%;

    height:
        50px;

    min-height:
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        6px 8px 6px 16px;

    background:
        var(--tcc-viewer-navy);

    color:
        var(--tcc-viewer-white);

    box-sizing:
        border-box;
}


/* ========================================================================
   TITLE AREA
   ======================================================================== */

.tcc-viewer-title-area {

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    overflow:
        hidden;
}


.tcc-viewer-title-area i {

    flex:
        0 0 auto;

    color:
        #ffffff;

    font-size:
        16px;
}


.tcc-viewer-title {

    overflow:
        hidden;

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        0.04em;

    line-height:
        1.2;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* ========================================================================
   TOP BAR ACTIONS
   ======================================================================== */

.tcc-viewer-actions {

    margin-left:
        auto;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    flex:
        0 0 auto;
}


/* ========================================================================
   WHATSAPP SHARE BUTTON
   ======================================================================== */

.tcc-viewer-share,
.tcc-viewer-whatsapp {

    position:
        static !important;

    height:
        38px;

    min-height:
        38px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        0 13px;

    margin:
        0;

    border:
        1px solid
        #1da851;

    border-radius:
        6px;

    background:
        var(--tcc-viewer-whatsapp);

    color:
        #ffffff;

    cursor:
        pointer;

    font-family:
        inherit;

    font-size:
        13px;

    font-weight:
        700;

    line-height:
        1;

    box-sizing:
        border-box;

    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        transform 0.12s ease;
}


.tcc-viewer-share i,
.tcc-viewer-whatsapp i {

    color:
        #ffffff;

    font-size:
        17px;
}


.tcc-viewer-share:hover,
.tcc-viewer-share:focus,
.tcc-viewer-whatsapp:hover,
.tcc-viewer-whatsapp:focus {

    background:
        var(--tcc-viewer-whatsapp-hover);

    border-color:
        var(--tcc-viewer-whatsapp-hover);

    color:
        #ffffff;
}


.tcc-viewer-share:active,
.tcc-viewer-whatsapp:active {

    transform:
        translateY(1px);
}


/* ========================================================================
   CLOSE BUTTON
   ======================================================================== */

.tcc-viewer-close {

    position:
        static !important;

    width:
        38px;

    height:
        38px;

    min-width:
        38px;

    min-height:
        38px;

    flex:
        0 0 38px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    margin:
        0;

    border:
        1px solid
        rgba(255, 255, 255, 0.28);

    border-radius:
        6px;

    background:
        rgba(255, 255, 255, 0.05);

    color:
        #ffffff;

    cursor:
        pointer;

    font-family:
        inherit;

    font-size:
        17px;

    line-height:
        1;

    box-sizing:
        border-box;

    transition:
        background-color 0.16s ease,
        border-color 0.16s ease;
}


.tcc-viewer-close:hover,
.tcc-viewer-close:focus {

    background:
        rgba(255, 255, 255, 0.15);

    border-color:
        rgba(255, 255, 255, 0.45);

    color:
        #ffffff;
}


/* ========================================================================
   ACCESSIBILITY
   ======================================================================== */

.tcc-viewer-share:focus-visible,
.tcc-viewer-whatsapp:focus-visible,
.tcc-viewer-close:focus-visible {

    outline:
        2px solid
        #ffffff;

    outline-offset:
        2px;
}


/* ========================================================================
   VIEWER BODY
   ======================================================================== */

.tcc-viewer__body {

    position:
        relative;

    flex:
        1 1 auto;

    width:
        100%;

    min-width:
        0;

    min-height:
        0;

    display:
        flex;

    overflow:
        hidden;

    background:
        var(--tcc-viewer-stage);
}


/* ========================================================================
   DOCUMENT STAGE
   ======================================================================== */

.tcc-viewer__stage {

    position:
        relative;

    flex:
        1 1 auto;

    width:
        100%;

    height:
        100%;

    min-width:
        0;

    min-height:
        0;

    overflow:
        hidden;

    background:
        var(--tcc-viewer-stage);
}


/* ========================================================================
   PDF / OFFICE WRAPPER
   ======================================================================== */

.tcc-viewer__document-wrap {

    width:
        100%;

    height:
        100%;

    min-width:
        0;

    min-height:
        0;

    background:
        var(--tcc-viewer-stage);
}


/* ========================================================================
   PDF / OFFICE IFRAME
   ======================================================================== */

.tcc-viewer__document-frame {

    width:
        100%;

    height:
        100%;

    display:
        block;

    border:
        0;

    background:
        var(--tcc-viewer-stage);
}


/* ========================================================================
   IMAGE VIEWER
   ======================================================================== */

.tcc-viewer__image-wrap {

    width:
        100%;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        24px;

    overflow:
        auto;

    background:
        var(--tcc-viewer-stage);
}


.tcc-viewer__image-wrap[hidden] {

    display:
        none !important;
}


.tcc-viewer__image-wrap img {

    display:
        block;

    max-width:
        100%;

    max-height:
        100%;

    width:
        auto;

    height:
        auto;

    object-fit:
        contain;

    user-select:
        none;

    -webkit-user-select:
        none;

    box-shadow:
        0 8px 35px
        rgba(0, 0, 0, 0.35);
}


/* ========================================================================
   LOADING STATE
   ======================================================================== */

.tcc-viewer__loading {

    position:
        absolute;

    inset:
        0;

    z-index:
        20;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    padding:
        30px;

    background:
        var(--tcc-viewer-stage);

    color:
        #ffffff;

    text-align:
        center;
}


.tcc-viewer__loading[hidden] {

    display:
        none !important;
}


.tcc-viewer__loading strong {

    color:
        #ffffff;

    font-size:
        14px;

    font-weight:
        700;
}


.tcc-viewer__loading span {

    color:
        rgba(255, 255, 255, 0.70);

    font-size:
        12px;
}


/* ========================================================================
   LOADING SPINNER
   ======================================================================== */

.tcc-viewer__spinner {

    width:
        40px;

    height:
        40px;

    margin-bottom:
        5px;

    border:
        4px solid
        rgba(255, 255, 255, 0.22);

    border-top-color:
        #ffffff;

    border-radius:
        50%;

    animation:
        tccViewerSpin
        0.75s
        linear
        infinite;
}


@keyframes tccViewerSpin {

    to {

        transform:
            rotate(360deg);
    }
}


/* ========================================================================
   MESSAGE / ERROR STATE
   ======================================================================== */

.tcc-viewer__message-state {

    position:
        absolute;

    inset:
        0;

    z-index:
        21;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    padding:
        30px;

    background:
        #eef2f7;

    text-align:
        center;
}


.tcc-viewer__message-state[hidden] {

    display:
        none !important;
}


.tcc-viewer__message-state > i {

    margin-bottom:
        4px;

    color:
        var(--tcc-viewer-error);

    font-size:
        42px;
}


.tcc-viewer__message-state h3 {

    margin:
        0;

    color:
        var(--tcc-viewer-text);

    font-size:
        17px;
}


.tcc-viewer__message-state p {

    max-width:
        480px;

    margin:
        0;

    color:
        var(--tcc-viewer-muted);

    font-size:
        12px;

    line-height:
        1.5;
}


/* ========================================================================
   PRIMARY BUTTON
   ======================================================================== */

.tcc-viewer__primary-button {

    min-height:
        38px;

    margin-top:
        8px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        0 16px;

    border:
        0;

    border-radius:
        6px;

    background:
        #1268d8;

    color:
        #ffffff;

    cursor:
        pointer;

    font-family:
        inherit;

    font-size:
        12px;

    font-weight:
        600;
}


.tcc-viewer__primary-button:hover {

    background:
        #0f58ba;
}


/* ========================================================================
   WATERMARK
   ======================================================================== */

.tcc-viewer__watermark {

    position:
        absolute;

    inset:
        0;

    z-index:
        15;

    overflow:
        hidden;

    pointer-events:
        none;

    user-select:
        none;

    -webkit-user-select:
        none;
}


.tcc-viewer__watermark[hidden] {

    display:
        none !important;
}


.tcc-viewer__watermark span {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    color:
        rgba(60, 60, 60, 0.10);

    font-size:
        clamp(
            35px,
            5vw,
            78px
        );

    font-weight:
        800;

    letter-spacing:
        0.05em;

    white-space:
        nowrap;

    transform:
        translate(-50%, -50%)
        rotate(-28deg);
}


/* ========================================================================
   PROTECTED MODES
   ======================================================================== */

.tcc-viewer.is-protected
.tcc-viewer__stage,

.tcc-viewer.is-restricted
.tcc-viewer__stage {

    user-select:
        none;

    -webkit-user-select:
        none;
}


/* ========================================================================
   FULLSCREEN
   ======================================================================== */

.tcc-viewer__dialog:fullscreen {

    inset:
        0;

    width:
        100% !important;

    height:
        100% !important;

    max-width:
        none !important;

    max-height:
        none !important;

    min-width:
        0 !important;

    min-height:
        0 !important;

    border-radius:
        0;

    transform:
        none !important;
}


/* ========================================================================
   TABLET / SMALL DESKTOP
   ======================================================================== */

@media
(min-width: 768px)
and
(max-width: 1199.98px) {

    .tcc-viewer__dialog {

        width:
            75vw !important;

        height:
            90vh !important;

        min-width:
            0;

        min-height:
            0;

        max-width:
            1050px !important;

        max-height:
            800px !important;
    }
}


/* ========================================================================
   MOBILE
   ======================================================================== */

@media
(max-width: 767.98px) {

    .tcc-viewer__dialog {

        top:
            50% !important;

        left:
            50% !important;

        width:
            calc(100vw - 12px) !important;

        height:
            calc(100vh - 12px) !important;

        min-width:
            0 !important;

        min-height:
            0 !important;

        max-width:
            none !important;

        max-height:
            none !important;

        border-radius:
            8px;

        transform:
            translate(-50%, -50%) !important;
    }


    .tcc-viewer-topbar {

        flex:
            0 0 48px;

        height:
            48px;

        min-height:
            48px;

        padding:
            5px 6px 5px 10px;
    }


    .tcc-viewer-title-area {

        gap:
            6px;
    }


    .tcc-viewer-title-area i {

        font-size:
            15px;
    }


    .tcc-viewer-title {

        font-size:
            11px;

        letter-spacing:
            0.02em;
    }


    .tcc-viewer-actions {

        gap:
            5px;
    }


    .tcc-viewer-share,
    .tcc-viewer-whatsapp {

        width:
            36px;

        height:
            36px;

        min-width:
            36px;

        min-height:
            36px;

        padding:
            0;
    }


    .tcc-viewer-share span,
    .tcc-viewer-whatsapp span {

        display:
            none;
    }


    .tcc-viewer-share i,
    .tcc-viewer-whatsapp i {

        font-size:
            18px;
    }


    .tcc-viewer-close {

        width:
            36px;

        height:
            36px;

        min-width:
            36px;

        min-height:
            36px;

        flex:
            0 0 36px;

        font-size:
            16px;
    }


    .tcc-viewer__image-wrap {

        padding:
            10px;
    }
}


/* ========================================================================
   VERY SMALL MOBILE
   ======================================================================== */

@media
(max-width: 420px) {

    .tcc-viewer-title {

        max-width:
            165px;
    }
}


/* ========================================================================
   FINAL MODAL SAFETY OVERRIDE
   ------------------------------------------------------------------------
   Keeps Universal Viewer fixed over the page even if another website
   stylesheet contains conflicting generic modal/viewer rules.
   ======================================================================== */

#tccUniversalViewer.tcc-viewer {

    position:
        fixed !important;

    top:
        0 !important;

    right:
        0 !important;

    bottom:
        0 !important;

    left:
        0 !important;

    width:
        100vw !important;

    height:
        100vh !important;

    z-index:
        99999 !important;
}


#tccUniversalViewer.tcc-viewer.is-open {

    display:
        block !important;
}


#tccUniversalViewer .tcc-viewer__backdrop {

    position:
        absolute !important;

    inset:
        0 !important;
}


#tccUniversalViewer .tcc-viewer__dialog {

    position:
        absolute !important;

    top:
        50% !important;

    left:
        50% !important;

    margin:
        0 !important;

    transform:
        translate(-50%, -50%) !important;
}