/**

 * FuelGuard Error Page Widget Styles

 */



@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700');



.fg-error-page {

    position: relative;

    background-color: #111111;

    font-family: "Roboto Condensed", sans-serif;

    text-transform: uppercase;

    overflow: hidden;

    height: 400px;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

}



/* Simple decorative elements */

.fg-error-page::before,

.fg-error-page::after {

    content: '';

    position: absolute;

    background-color: #27292d;

    opacity: 0.15;

}



.fg-error-page::before {

    top: 20px;

    left: 20px;

    width: 120px;

    height: 120px;

    border-radius: 50%;

}



.fg-error-page::after {

    bottom: 30px;

    right: 30px;

    width: 80px;

    height: 80px;

    border-radius: 8px;

    transform: rotate(15deg);

}



/* Center Image - Behind Tapes */

.fg-center-image {

    position: absolute;

    top: 50%;

    left: 50%;

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

    z-index: 0;

    max-width: 90%;

    display: flex;

    align-items: center;

    justify-content: center;

}



.fg-center-image img {

    height: 200px;

    width: auto;

    object-fit: contain;

    opacity: 0.8;

}



/* Police Tape */

.fg-police-tape {

    background: linear-gradient(180deg, #f5d96f 0%, #e2bb2d 5%, #e2bb2d 90%, #e8c447 95%, #6b5a18 100%);

    padding: 0.3em;

    font-size: 1.5em;

    text-align: center;

    white-space: nowrap;

    position: absolute;

    left: -2%;

    right: -2%;

    margin: 0;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);

}



.fg-police-tape--1 {

    transform: rotate(4deg);

    top: 48%;

    z-index: 2;

}



.fg-police-tape--2 {

    transform: rotate(-3deg);

    top: 52%;

    z-index: 1;

}



/* Animation */

.fg-animated .fg-police-tape--1 {

    animation: tape-slide-1 20s linear infinite;

}



.fg-animated .fg-police-tape--2 {

    animation: tape-slide-2 18s linear infinite;

}



@keyframes tape-slide-1 {

    from { text-indent: 0; }

    to { text-indent: -50%; }

}



@keyframes tape-slide-2 {

    from { text-indent: 0; }

    to { text-indent: 50%; }

}



/* Responsive */

@media (max-width: 768px) {

    .fg-error-page {

        height: 300px;

    }

    

    .fg-police-tape {

        font-size: 1.3em;

        padding: 0.24em;

        left: -2%;

        right: -2%;

    }

    

    .fg-center-image img {

        height: 150px;

    }

    

    .fg-error-page::before {

        width: 80px;

        height: 80px;

    }

    

    .fg-error-page::after {

        width: 60px;

        height: 60px;

    }

}



@media (max-width: 480px) {

    .fg-error-page {

        height: 250px;

    }

    

    .fg-police-tape {

        font-size: 1.1em;

        padding: 0.2em;

        left: -2%;

        right: -2%;

    }

    

    .fg-center-image img {

        height: 120px;

    }

    

    .fg-error-page::before {

        width: 60px;

        height: 60px;

        top: 15px;

        left: 15px;

    }

    

    .fg-error-page::after {

        width: 40px;

        height: 40px;

        bottom: 20px;

        right: 20px;

    }

}