/*
* GLOBAL STYLES
* Margin/Padding/Radius (top,right,bottom,left)

*/


        body {
			font-size: clamp(1rem, 10vw, 10rem); 
            font-family: Arial, sans-serif;
            padding: 0;
            background-color: #ededed; 
            display: flex;
            justify-content: center;
            align-items: flex-end;
            min-height: 100vh;
			max-width: 100vw;
            overflow: hidden;
        }
        #overlay {
           all: unset;
		   font-size: 0.8em;
		   position: fixed;
           inset: 0;
           background: #111;
           color: white;
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
           z-index: 9999;
           text-align: center;      /* ensures text inside is centered */
        }
        #overlay p {
			all: unset;
			font-size: 18px;
			padding-bottom: 8px;
		}
		#overlay h1 {
			all: unset;
			font-size: 20px;
			margin: 2px;
			padding: 1px;
		}
        #content {
           display: none;
        }
        button {
           padding: 8px 10px;
           font-size: 16px;
           cursor: pointer;
        }
        #overlay button {
            pointer-events: auto;
        }

        .ticket-container {
            width: 100%;
			height: 98%;
            background-color: white;
            padding: 0px 5px 10px 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            position: absolute;
            border-radius: 35px 35px 0px 0px;
        }

/*
* HEADER SECTION
*/
        .close-button {
            /* font-size: 30px; */
			font-size: 0.9em;
            font-weight: 100;
            color: #666;
            cursor: pointer;
            line-height: 1;
            padding: 10px 10px 0px 0px;
			text-align: right;
			float:right;
        }
		
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0px 1px 1px 15px;
        }

        .instruction {
            font-size: 0.5em;
			margin-top: 20px;
            color: #555;
            flex-grow: 1;
            text-align: left;
			letter-spacing: 0.5px;
        }		
		
		p, h2 {
			padding: 1px;
			margin: 0px;
			letter-spacing: 0px;
		}


/*
* LOGO AND PULSATING RING
*/
        .logo-area {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative; 
            width: 220px; 
            height: 220px;
            margin: 20px auto 40px auto; /* Center the container */
        }

        /* The element that pulses and fades */
        .pulsing-ring {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 5px solid rgba(91, 191, 65, 0.9); /* Semi-transparent green border */
            box-sizing: border-box;
			transform: translate(-50%,-50%);
			animation: pulse 2.4s infinite linear;
		}

        /* Keyframes for the Ring Pulse (Expands and fades) */
        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 1;
                border-width: 55px;
            }
			25% {
                transform: scale(0.8);
				opacity: 1;
                border-width: 55px;
			}
            35% {
                transform: scale(0.6);
				opacity: 1;
                border-width: 55px;
			}
            50% {
                transform: scale(0.8);
				opacity: 1;
                border-width: 55px;
			}
            65% {
                transform: scale(1);
				opacity: 1;
                border-width: 55px;
			}
			75% {
                transform: scale(0.8);
				opacity: 1;
                border-width: 55px;
			}
            100% {
                transform: scale(1);
                opacity: 1;
                border-width: 55px;
            }
        }
		
		
        /* The fixed solid green circle */
        .outer-circle {
            width: 70%;
            height: 70%;
            border-radius: 50%;
            /*background-color: #499134; */
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative; 
			animation-name: myAnimation;
			animation-duration: 2s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
            z-index: 2; /* Ensures the logo stays on top */
        }

		@keyframes myAnimation {
			0%   {background-color: #50B54C;}
			25%  {background-color: #40943D;}
			50%  {background-color: #32742F;}
			100% {background-color: #499134;}
		}
		
        .inner-circle {
            width: 80%;
            height: 80%;
            border-radius: 50%;
            background-color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 5px solid #fff;
        }

        .star-tran-logo {
            color: #000;
            text-align: center;
            line-height: 1.2;
        }
		
		.round-image {
			width: 85%;  /* Set a specific width */
			height: 85%; /* Set the same height to ensure it's a square */
			border-radius: 50%; /* Makes the square image a perfect circle */
			object-fit: cover; /* Ensures the image covers the area without stretching */
		}

/*
* TICKET CONTENT
*/
		.clock {
			display:block;
			text-align:center;
			font-size: 1.5em;
			/*font-size:58px;*/
			font-weight:700;
			color: #3D3D3D;
			letter-spacing:0.5px;
			margin:12% 0px 2% 0px;
		}

        .low-income-tag {
            background-color: black;
            color: white;
            /*font-size: 48px;*/
			font-size: 1.3em;
            font-weight: 100;
            padding: 5px 10px;
            border-radius: 28px;
            display: inline-block;
            margin-bottom: 2%;
			width:88%;
        }
		
/*
* EXPIRATION CARD INFORMATION
*/
		.card {
			background:#fff;
			border-radius:6px;
			padding:18px;
			box-shadow: 0 1px 1px rgba(0,0,0,.8);
			border:1px solid rgba(0,0,0,.05);
			margin:15px 20px 0px 20px;
			text-align: left;
			
		}

        .ticket-details {
            /*font-size: 24px;*/
			/*font-size: 0.7em; */
			font-size: 6vw;
            font-weight: 200;
            color: #333;
        }

        .location{
            /* font-size: 14px; */
            font-size: 0.3em;
			color: #777;
            margin-bottom: 8%;
        }

        .expiration {
            /* font-size: 16px; */
			font-size: 0.4em;
			font-weight: 600;
            color: #5c5c5c;
        }