@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

*{
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
    text-decoration: none;
    outline: none;
    box-shadow: none;
}
html,body{
    height: 100%;    
    font-size: 4vmin;
    margin: 0;
    padding: 0;
    overflow-y: auto; /* Allow vertical scrolling when content exceeds viewport */
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

html { 
	/* Solid red background shows behind notch - creates edge-to-edge effect */
	background-color: #ce2a29;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
}

body {
	/* Remove all padding/margin to allow edge-to-edge */
	margin: 0;
	padding: 0;
	
	/* Ensure body fills entire viewport */
	width: 100%;
	min-height: 100vh;
	
	/* White background - shows through transparent/white areas */
	background: white;
	
	/* Allow vertical scrolling when content exceeds viewport */
	overflow-y: auto;
	overflow-x: hidden;
}

/* Modern browsers: Remove safe-area padding from body */
/* Body should go edge-to-edge, padding goes on content instead */
@supports (padding: env(safe-area-inset-top)) {
	body {
		/* No padding - background extends under notch */
		padding: 0;
	}
}

#root {
    height: 100%;
    min-height: 100vh;
    /* Root container extends to edges - shows body gradient */
    background: transparent;
    /* Ensure no overflow that could clip */
    overflow-x: hidden;
    /* Ensure root doesn't block body gradient */
    position: relative;
}

/* Header wrapper - contains header and transition, has gradient background */
.header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000; /* Above other content */
    
    /* Elegant vertical gradient - starts with #ce2a29 at top, transitions to #fe976d at bottom */
    /* Smooth transition with multiple color stops for elegant effect */
    background: linear-gradient(
        180deg,
        #ce2a29 0%,
        #ce2a29 15%,
        rgba(220, 60, 45, 0.98) 25%,
        rgba(230, 90, 65, 0.96) 40%,
        rgba(240, 120, 85, 0.94) 55%,
        rgba(247, 135, 97, 0.96) 70%,
        rgba(252, 145, 105, 0.98) 85%,
        #fe976d 100%
    );
    
    /* Wrapper extends to edges - background goes under notch */
    margin: 0;
    padding: 0;
    
    /* Auto height based on content */
    min-height: auto;
}

/* Modern browsers: Add safe-area-inset to header wrapper */
@supports (padding: env(safe-area-inset-top)) {
	.header-wrapper {
		/* Wrapper background extends to edges, padding handled by children */
		padding-top: env(safe-area-inset-top);
		padding-left: env(safe-area-inset-left);
		padding-right: env(safe-area-inset-right);
	}
}

#header{
    /* Header is now relative inside wrapper, no longer fixed */
    position: relative;
    width: 100%;
    color: white;
    
    /* Base padding */
    padding-top: 5vw;
    padding-left: 5vw;
    padding-right: 5vw;
 
    
    /* No background - gradient comes from wrapper */
    background: transparent;
    
    /* Ensure header extends to edges */
    margin-left: 0;
    margin-right: 0;
}

/* Modern browsers: Add safe-area-inset to header padding */
@supports (padding: env(safe-area-inset-top)) {
	#header {
		/* Add safe-area padding to content */
		padding-top: calc(5vw + env(safe-area-inset-top));
		padding-left: calc(5vw + env(safe-area-inset-left));
		padding-right: calc(5vw + env(safe-area-inset-right));
	}
}

/* Header transition div - creates rounded corner transition from header to body */
.header-transition {
	width: 100%;
	height: 30px;
	background-color: white;
	border-radius: 20px 20px 0 0;
	margin: 0;
	padding: 0;
	margin-left: env(safe-area-inset-left, 0);
	margin-right: env(safe-area-inset-right, 0);
}

#warpper-body{
    background-color: white;
    
    /* Dynamic padding-top based on header-wrapper height - set via JavaScript */
    /* Fallback to minimum estimate if CSS variable not set */
    padding-top: var(--header-wrapper-height, calc(5vw + 15vw + 5vw + 30px));
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    
    /* Minimum height to fill viewport, but allow expansion */
    min-height: calc(100vh - var(--header-wrapper-height, calc(5vw + 15vw + 5vw + 30px)));
    
    /* Allow content to expand and scroll if needed */
    overflow-y: visible;
    overflow-x: hidden;
    
    /* Ensure wrapper extends to edges */
    margin-left: 0;
    margin-right: 0;
    
    /* Box sizing to include padding in height calculation */
    box-sizing: border-box;
}

/* Modern browsers: Add safe-area-inset to warpper-body padding */
@supports (padding: env(safe-area-inset-left)) {
	#warpper-body {
		/* Add safe-area to content padding, background extends to edges */
		padding-left: calc(20px + env(safe-area-inset-left));
		padding-right: calc(20px + env(safe-area-inset-right));
		/* Add safe-area to top padding as well (header is fixed) */
		padding-top: calc(var(--header-wrapper-height, calc(5vw + 15vw + 5vw + 30px)) + env(safe-area-inset-top));
	}
}
.h-100{
    height: 100%;
}
.text-center{
    text-align: center;
}
.d-block{
    display: block;
}
.d-inline-block{
    display: inline-block;
}
.d-flex{
    display: flex;
}
.align-item-center{
    align-items: center;
}
.justify-content-center{
    justify-content: center;
}
.flex-direction-colomn{
    flex-direction: column;
}
.justify-content-between{
    justify-content: space-between;
}


.btn{
    border-radius: 6px;
    padding: 15px;
}
.primary-btn{
    background: linear-gradient(89.24deg, #FD0000 -31.3%, #FC5E3B 99.29%);
    color: white;
    font-size: 1.4rem !important;
}

.secondary-color{
    background: linear-gradient(90deg , #115afd, #3a65fc);
    color: white;
}


.gap-3 {
    gap: 1rem!important;
}

.gap-4 {
    gap: 1rem!important;
}

.mb-20{
    margin-bottom: 20px;
}
.mb-10{
    margin-bottom: 10px;
}

#modal{
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

.error-box{
    background-color: #fee2e2;
    border-radius: 20px;
    padding: 15px;
    max-width: 80%;
}

.info-icon{
    background-color: #dc2626;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.button-group {
    border-radius: 10px;
    height: 60px;
    box-sizing: border-box;
    display: flex;
    margin-bottom: 20px;
    width: 100%;
}

.button-group-blue {
    border: solid 2px #007bff;
}

.button-group-orange {
    border: solid 2px #dc2626;    
}

.button-group p{
    font-size: 20px;
    font-weight: 600;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button-group input{
    border: 0;
    border-radius: 15px;
    padding: 0 15px;
    font-size: 20px;
    height: 100%;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
}
.button-group button{
    border-radius: 8px;
    padding: 8px 20px !important;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    color: white;
    font-weight: 700;
}

.rectangle {
    width: 100%;
    height: auto;
    /* min-height: 143px;     */
    left: 1.1em;    
    box-shadow: 0px 2px 13px 2px rgba(0, 0, 0, 0.17);
    border-radius: 15px;
}

.stroke-line {
    position: absolute;
    left: 6.25%;
    right: 6.25%;
    top: 37.5%;
    bottom: 37.5%;
    opacity: 0.5;
    border: 2px solid #141414;
    border-radius: 1000px;
}

.p-15 {
    padding: 15px;
}

.custom-btn {    
    border-radius: 13px !important;
    height: 3em !important;
    font-weight: 600;
    /* font-size: 1.4rem !important; */
    font-size: 6vmin !important;
    letter-spacing: 0.03em;
}

#custom-btn-login {
    font-weight: 600;
    /* font-size: 1.4rem !important; */
    font-size: 6vmin !important;
    letter-spacing: 0.03em;
}

.grey { 
    background: #455A64;
}

.green {    
    background: #3CAE5C;    
}

.rectangleBox {
    text-align: center;
    line-height: normal;
    padding: 15px;
    margin: 0;
}


#splash-header{
    /* Fixed position - stays at top of viewport */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 50vh;
    min-height: 50vh;
    z-index: 999;
    
    /* Solid red background for edge-to-edge - shows behind notch */
    background-color: #ce2a29;
    
    /* Background image with white background in bottom (set by Kristoffer) */
    background-image: url("../images/splash-header-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Background extends to all edges including under notch */
    margin: 0;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}

/* Modern browsers: Add safe-area-inset to splash-header */
@supports (padding: env(safe-area-inset-top)) {
	#splash-header {
		/* Add safe-area padding to content, background still extends to edges */
		padding-top: env(safe-area-inset-top);
		padding-left: env(safe-area-inset-left);
		padding-right: env(safe-area-inset-right);
		/* Background image extends under notch, content respects safe-area */
	}
}

#splash-header img{
    width: 100%;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    padding: 20px;
}

/* Device page: When splash-header is present, adjust wrapper-body padding */
/* Splash header is fixed and takes 50% of viewport, so wrapper-body must start after it */
#splash-header ~ #warpper-body {
    /* Splash header is fixed and takes 50% of viewport */
    /* Wrapper body must start after splash header */
    padding-top: 50vh !important;
    
    /* Ensure content fits in remaining viewport space */
    /* Use calc to account for padding in height */
    height: 50vh !important;
    min-height: 50vh !important;
    
    /* Allow scrolling if content exceeds available space */
    overflow-y: auto;
    overflow-x: hidden;
}

/* Modern browsers: Add safe-area-inset to wrapper-body when splash-header is present */
@supports (padding: env(safe-area-inset-top)) {
	#splash-header ~ #warpper-body {
		padding-top: calc(50vh + env(safe-area-inset-top)) !important;
		/* Adjust height to account for safe-area */
		height: calc(50vh - env(safe-area-inset-top)) !important;
		min-height: calc(50vh - env(safe-area-inset-top)) !important;
	}
}

/* Ensure slogan content is visible on device page */
#splash-header ~ #warpper-body #slogan {
    /* Remove h-100 constraint to allow content to fit naturally */
    height: auto !important;
    min-height: auto !important;
    /* Ensure content is visible */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.hight-auto{
    height: calc(100% - 465px) !important;
}

.orange-vipps {
    color:  #FF4328;
    font-weight: 700;
}

.vipps-wrapper {
    padding: 20px 0px 75px;
}

.wrapper-height {
    height: calc(100% - 220px); 
}

#icon {
    cursor: pointer;
}

.wrapper-rounded-login {
    height: 75%;
    /* Add padding-top to account for fixed header */
    padding-top: calc(25vw + 20px);
}

/* .wrapper-rounded-login {
    margin-left: 4px;
    margin-right: 4px;
    height: 75%;
} */

.mt-auto {
    margin-top: auto;    
}

.home-wrapper-body {
    display: flex;
    flex-direction: column;
    /* height: calc(100% - 112px);  */
    height: calc(100% - 25vmin);
    overflow: auto;
}

.loadingCircle {
    position: fixed;
    z-index: 999;
    height: 4em;
    width: 4em;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.lady-character-wrapper {
    position: fixed;
    
    /* OLD: Fixed to edge - commented out for safe-area support */
    /* right: 0; */
    /* bottom: 0; */
    
    /* NEW: Base position */
    right: 0;
    bottom: 0;
    
    /* Ensure wrapper doesn't constrain image */
    width: auto;
    height: auto;
}

/* Modern browsers: Add safe-area-inset to lady-character-wrapper */
@supports (padding: env(safe-area-inset-right)) {
	.lady-character-wrapper {
		/* Move away from notch and navigation bar */
		right: env(safe-area-inset-right);
		bottom: env(safe-area-inset-bottom);
	}
}

#footer {
    position: fixed;
    right: 0;
    left: 0;
    
    /* OLD: Fixed bottom position - commented out for safe-area support */
    /* bottom:10px; */
    
    /* NEW: Base bottom position */
    bottom: 10px;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Base padding */
    padding-left: 0;
    padding-right: 0;
}

/* Modern browsers: Add safe-area-inset to footer */
@supports (padding: env(safe-area-inset-bottom)) {
	#footer {
		/* Move footer up to avoid navigation bar on Android */
		bottom: calc(10px + env(safe-area-inset-bottom));
		/* Add safe-area padding on sides */
		padding-left: env(safe-area-inset-left);
		padding-right: env(safe-area-inset-right);
	}
}
.footer-version {
    position: absolute;
    right: 0;
    padding-right: 10px;
    color: #9e9e9e;
    font-size: 0.5em; 
    white-space: nowrap;
}

/* Added by Kristoffer */
/* #slogan > h1:nth-of-type(2n) {
    padding-left: 2.4em;
} */
#slogan > h1 {
    line-height: 0.9em;
/* 	padding-right: 1.4em; */ 
}

#header > h4:nth-of-type(2n) {
    font-size: medium;
}

#header > h4 {
    font-weight: 400;
}

#altsmscodetxt > i {
    text-decoration: underline;
    font-style: normal;
}

.button-group input {
    font-size: x-large;
    font-weight: 600;
    letter-spacing: .1rem;
    text-align: center;
}

::placeholder {
    opacity: 50%;
    text-align: center;
}

/* QR code scan and Lady character images - Responsive viewport-based sizing */
/* Use highly specific selector to override Bootstrap and inline attributes */
/* Multiple selectors to ensure matching */
/* Group both images together so they scale proportionally */
div.lady-character-wrapper > img.lady-character-image,
.lady-character-wrapper img.lady-character-image,
.lady-character-wrapper .lady-character-image,
img.lady-character-image[alt="Lady Character"],
.lady-character-image,
img.qr-code-scan-image[alt="QR Scanner"],
.qr-code-scan-image {
    /* Override any inline width/height attributes - use viewport-based sizing */
    width: auto !important;
    height: auto !important;
    /* Remove inline width/height attributes programmatically */
    min-width: 0 !important;
    min-height: 0 !important;
    /* Base responsive sizing using viewport units */
    max-width: 70vw !important;
    max-height: 50vh !important;
    
    /* Ensure it maintains aspect ratio */
    object-fit: contain !important;
    display: block !important; /* Ensure it behaves as block element */
}

/* Extra small mobile devices (viewport width < 360px) */
@media only screen and (max-width: 360px) {
    .lady-character-wrapper .lady-character-image,
    .lady-character-wrapper img.lady-character-image,
    img.lady-character-image,
    img.qr-code-scan-image {
        max-width: 60vw !important;  /* Smaller on very small screens */
        max-height: 40vh !important;
    }
}

/* Small mobile devices (viewport width 361px - 414px) */
@media only screen and (min-width: 361px) and (max-width: 414px) {
    .lady-character-wrapper .lady-character-image,
    .lady-character-wrapper img.lady-character-image,
    img.lady-character-image,
    img.qr-code-scan-image {
        max-width: 65vw !important;
        max-height: 45vh !important;
    }
}

/* Medium mobile devices (viewport width 415px - 480px) */
@media only screen and (min-width: 415px) and (max-width: 480px) {
    .lady-character-wrapper .lady-character-image,
    .lady-character-wrapper img.lady-character-image,
    img.lady-character-image,
    img.qr-code-scan-image {
        max-width: 70vw !important;
        max-height: 50vh !important;
    }
}

/* Large mobile devices / Small tablets (viewport width > 480px) */
@media only screen and (min-width: 481px) {
    .lady-character-wrapper .lady-character-image,
    .lady-character-wrapper img.lady-character-image,
    img.lady-character-image,
    img.qr-code-scan-image {
        max-width: 280px !important;  /* Fixed max width for larger screens */
        max-height: 400px !important; /* Fixed max height for larger screens */
    }
}

/* Viewport height adjustments - targeting specific Playwright device heights */

/* iPhone SE height (667px) and similar */
@media only screen and (max-height: 700px) and (min-height: 600px) {
    .lady-character-wrapper .lady-character-image,
    .lady-character-wrapper img.lady-character-image,
    img.lady-character-image,
    img.qr-code-scan-image {
        max-height: 300px !important;  /* Fixed height for iPhone SE */
    }
}

/* Galaxy S21 height (800px) and Pixel 5 height (851px) */
@media only screen and (max-height: 900px) and (min-height: 700px) {
    .lady-character-wrapper .lady-character-image,
    .lady-character-wrapper img.lady-character-image,
    img.lady-character-image,
    img.qr-code-scan-image {
        max-height: 350px !important;  /* Fixed height for medium phones */
    }
}

/* iPhone 12 height (844px) */
@media only screen and (max-height: 860px) and (min-height: 840px) {
    .lady-character-wrapper .lady-character-image,
    .lady-character-wrapper img.lady-character-image,
    img.lady-character-image,
    img.qr-code-scan-image {
        max-height: 380px !important;  /* Fixed height for iPhone 12 */
    }
}

/* Short viewport height - general fallback */
@media only screen and (max-height: 700px) {
    .lady-character-wrapper .lady-character-image,
    .lady-character-wrapper img.lady-character-image,
    img.lady-character-image,
    img.qr-code-scan-image {
        max-height: 45vh !important;  /* Use viewport height as fallback */
    }
}

@media only screen and (max-height: 600px) {
    .lady-character-wrapper .lady-character-image,
    .lady-character-wrapper img.lady-character-image,
    img.lady-character-image,
    img.qr-code-scan-image {
        max-height: 35vh !important;  /* Further reduce for very short screens */
    }
}

/* Very short viewport height (landscape mode) */
@media only screen and (max-height: 500px) {
    .lady-character-wrapper .lady-character-image,
    .lady-character-wrapper img.lady-character-image,
    img.lady-character-image,
    img.qr-code-scan-image {
        max-height: 30vh !important;
        max-width: 55vw !important;
    }
}

.hide {
    visibility: hidden;
}
.remove {
    display: none;
}

.btn-circle.btn-lg {
    width: 50px;
    height: 50px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 25px;
}

#warpper-body .small-home-page {
    display: block !important;
}

#warpper-body .hide-refresh {
    display: none !important;
}

@media only screen and (max-height: 700px) {
    /* For mobile phones: */
   #warpper-body .small-home-page {
        display: none !important;
   }

   #warpper-body .hide-refresh {
        display: block !important;
    }

    #warpper-body #infoBox .m-top-100 {
        margin-top: 0px !important;
    }  
}

.m-left {
    margin-left: auto;
}

#warpper-body #infoBox .m-top-100 {
    margin-top: 100px !important;
}