@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500&display=swap');
/*____*/
*,
*::before,
*::after {
	padding: 0;
	margin: 0;
	border: 0;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
a {
	text-decoration: none;
    cursor: pointer;
	width: 100%;
	font-family: "Roboto", sans-serif;
	-webkit-transition: .2s all;
	-o-transition: .2s all;
	transition: .2s all;
}
ul,
ol,
li {
	list-style: none;
    cursor: pointer;
}
img {
	vertical-align: top;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: inherit;
	font-size: inherit;
}

svg {
   stroke: inherit;
   stroke-width: inherit;
}

b {
	font-family: "Roboto", sans-serif;
	font-weight: 500;
}

/* ---------------------------------------------------------------------------- */

html {
	color: #202124;
	background-color: rgba(0, 0, 0, 0.5);
	width: 100%;
	min-height: 100svh;
	font-family: "Roboto", sans-serif;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

body {
	margin: 0 auto;
	max-width: 380px;
	padding: 32px;
	font-size: 18px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 1.5rem;
	-webkit-transition: -webkit-box-pack 0.3s ease;
	transition: -webkit-box-pack 0.3s ease;
	-o-transition: justify-content 0.3s ease;
	transition: justify-content 0.3s ease;
	transition: justify-content 0.3s ease, -webkit-box-pack 0.3s ease, -ms-flex-pack 0.3s ease;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	font-family: "Roboto", sans-serif;
	background-color: white;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

p {
	font-weight: 400;
	font-size: 16px;
	color: #797979;
	line-height: 1.4;
	-webkit-transition: .2s all;
	-o-transition: .2s all;
	transition: .2s all;
}

.play-protect-link {
	color: #1A73E8;
	text-decoration: underline;
	font-weight: 500;
}

h1 {
	font-size: 32px;
	font-weight: 400;
	color: #000000;
	text-align: center;
	width: 100%;
	margin: 0;
	font-family: "Roboto", sans-serif;
}

h2 {
	font-size: 16px;
	color: #202124;
	font-weight: 500;
}

button {
	width: 100%;
	height: 56px;
	background-color: #E8F0FE;
	border-radius: 4px;
	font-size: 18px;
	font-weight: 500;
	color: #202124;
	border: none;
	-webkit-transition: .2s all;
	-o-transition: .2s all;
	transition: .2s all;
	cursor: pointer;
	font-family: "Roboto", sans-serif;
}

button:hover,
button:active {
	background-color: #D2E3FC;
}

.video-button {
	width: 100%;
	height: 48px;
	background-color: #f8f9fa;
	border: 1px solid #dadce0;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 500;
	color: #1A73E8;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: "Roboto", sans-serif;
}

.video-button:hover {
	background-color: #f1f3f4;
	border-color: #1A73E8;
}

.video-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.video-modal.show {
	display: flex;
}

.video-container {
	position: relative;
	width: 90%;
	max-width: 400px;
	background: white;
	border-radius: 8px;
	overflow: hidden;
}

.video-close {
	position: absolute;
	top: 10px;
	right: 10px;
	background: rgba(0, 0, 0, 0.5);
	color: white;
	border: none;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}

.video-container video {
	width: 100%;
	height: auto;
	display: block;
}

.grey-color{
	color: #5f6368;
}

.flex-align {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 500;
	color: #424242;
	font-family: 'Google Sans', 'Roboto', sans-serif;
}

.flex-column {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	gap: 1rem;
	width: 100%;
	text-align: left;
}

.unsafe-app {
	border-radius: 8px;
	background-color: #f8f9fa;
	padding: 12px 16px;
	width: 100%;
	height: 64px;
	font-size: 18px;
	gap: 12px;
	font-family: "Roboto", sans-serif;
	color: #202124;
	font-weight: 500;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
}

.unsafe-img {
	position: relative;
	width: auto;
}

.unsafe-app img {
	width: 48px;
	height: 48px;
}

.warning {
	position: absolute;
	right: -4px;
	bottom: -4px;
	width: 18px !important;
	height: 18px !important;
	border-radius: 50%;
}

.how-to {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 8px;
	color: #5f6368;
	cursor: pointer;
	font-size: 14px;
	font-weight: 400;
	margin: 12px 0;
}

.how-to:hover {
	color: #1A73E8;
}

.device b,
.device b {
	color: #202124;
}

.how-to:hover,
.device b:hover {
	cursor: pointer;
	color: #5f6368;
}

.instructions-div {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	gap: 10px;
}

.instructions-div b {
	color: #202124;
}

.little-span,
.instructions-device__text {
	font-size: 12px;
}

.instructions.open,
.instructions-device__text.open {
    overflow: visible;
}

.instructions svg,
.device svg {
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
    -webkit-transform-origin: center;
        -ms-transform-origin: center;
            transform-origin: center;
}

.instructions-block {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	gap: 1rem;
	min-height: 300px;
}

.instructions.open .instructions-block {
    overflow-x: auto;
}


/* Mobile Responsive Styles */
@media (max-width: 480px) {
    body {
        max-width: 100%;
        margin: 16px;
        padding: 20px;
    }
    
    h1 {
        font-size: 18px;
    }
    
    h2 {
        font-size: 14px;
    }
    
    .unsafe-app {
        height: 56px;
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .unsafe-app img {
        width: 36px;
        height: 36px;
    }
    
    button {
        height: 40px;
        font-size: 14px;
    }
}

@media (max-width: 360px) {
    body {
        margin: 8px;
        padding: 16px;
    }
    
    h1 {
        font-size: 16px;
    }
    
    .unsafe-app {
        height: 48px;
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .unsafe-app img {
        width: 32px;
        height: 32px;
    }
    
    button {
        height: 36px;
        font-size: 13px;
    }
}

/* Landscape orientation for mobile */
@media (max-height: 500px) and (orientation: landscape) {
    body {
        padding: 12px;
        gap: 1rem;
    }
    
    .unsafe-app {
        height: 48px;
        padding: 8px;
    }
    
    .instructions-block {
        min-height: 200px;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .unsafe-app img,
    .warning {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}