/* Import Manrope */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap');

/* Register Pokémon Solid (Note the leading slash to access the static folder) */
@font-face {
    font-family: 'Pokemon Solid';
    src: url('/fonts/PokemonSolidNormal.ttf') format('truetype'); 
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Override Bootstrap's default body font with Manrope */
	body {
		font-family: 'Manrope', sans-serif !important;
	}

	/* Force Headers and the Navbar Logo to use Pokémon Solid */
	h1, h2, h3, h4, h5, h6, .navbar-brand {
		font-family: 'Pokemon Solid', sans-serif !important;
		text-transform: none; 
		letter-spacing: 2px;
	}

/* === FONT IMPORTS === */
	@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap');

	@font-face {
		font-family: 'Pokemon Solid';
		/* Ensures SvelteKit looks in the static/fonts/ folder */
		src: url('/fonts/PokemonSolidNormal.ttf') format('truetype'); 
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	}

	/* === GLOBAL DEFAULTS & BACKGROUND === */
	body {
        background-image: url('/PMD_DX_shedinja_pmd_gen_main/images/Treasure_Town_artwork_S.jpg') !important;
        background-size: cover !important;
        background-position: center center !important;
        background-attachment: fixed !important;
        background-color: #E8F2F9 !important; 
}

	/* Force all headers to use the Pokémon font */
	h1, h2, h3, h4, h5, h6 {
		font-family: 'Pokemon Solid', sans-serif !important;
		text-transform: none; 
		letter-spacing: 2px;
	}

	/* === FROSTED HEADER BLOCK === */
	.frosted-header {
		background-color: rgba(255, 248, 230, 0.4); 
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border: 2px solid rgba(161, 136, 127, 0.4); 
		border-radius: 15px;
		padding: 20px;
		margin-bottom: 20px;
		box-shadow: 0 8px 32px rgba(0,0,0,0.1);
	}

	/* === GREEN POKÉMON BUTTON === */
	.custom-home-btn {
		display: inline-block;
		background: #4CAF50; 
		color: #FFFFFF !important; 
		padding: 10px 25px;
		text-decoration: none;
		border: 2px solid #388E3C; 
		border-radius: 8px;
		transition: all 0.2s ease;
		font-family: 'Pokemon Solid', sans-serif !important;
		letter-spacing: 2px;
		text-shadow: 2px 2px 0px #3e2723;
		-webkit-text-stroke: 1px #3e2723;
	}

	.custom-home-btn:hover {
		transform: scale(1.05);
		background: #388E3C;
		text-decoration: none;
	}

/* === GLOBAL DEFAULT BACKGROUND === */
body {
    /* The leading slash tells SvelteKit to look in the static/ folder */
    background-image: url('/PMD_DX_shedinja_pmd_gen_main/images/Treasure_Town_artwork_S.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: fixed !important;
    background-color: #E8F2F9 !important; /* Fallback color */
}

/* === FROSTED FOOTER === */
.frosted-footer {
    background-color: rgba(255, 248, 230, 0.4) !important; 
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 2px solid rgba(161, 136, 127, 0.4) !important; 
    border-radius: 15px !important;
    padding: 15px 20px !important;
    margin-top: 30px !important;
    margin-bottom: 20px !important; /* Gives it that nice floating offset */
    box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
    color: #4A3B33 !important;
}

/* === MAIN FROSTED GLASS CONTAINER === */
.jumbotron {
    background-color: rgba(255, 248, 230, 0.4) !important; 
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 2px solid rgba(161, 136, 127, 0.4) !important; 
    border-radius: 20px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
    padding: 30px !important;
    margin-bottom: 2rem !important;
}

/* Ensure all text inside the tools is a readable, warm dark brown */
.jumbotron, .jumbotron h4, .jumbotron label, .jumbotron p {
    color: #4A3B33 !important;
}

/* === FORM INPUTS (Text Boxes & Dropdowns) === */
.form-control {
    font-family: 'Manrope', sans-serif !important;
    font-size: 1rem !important;
    background-color: rgba(255, 248, 225, 0.85) !important; /* Warm, slightly transparent paper look */
    border: 2px solid rgba(161, 136, 127, 0.5) !important;
    border-radius: 8px !important;
    color: #4A3B33 !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Highlight the box when the user clicks on it */
.form-control:focus {
    background-color: #FFFDF8 !important;
    border-color: #D8704D !important;
    box-shadow: 0 0 8px rgba(216, 112, 77, 0.4) !important;
    outline: none !important;
}

/* Make labels stand out nicely */
label {
    font-weight: 700 !important;
    color: #5D4037 !important;
    margin-top: 10px;
}

/* === "GENERATE" BUTTON (Replaces Bootstrap Blue) === */
.btn-primary {
    background: #4CAF50 !important; 
    color: #FFFFFF !important; 
    padding: 10px 25px !important;
    border: 2px solid #388E3C !important; 
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    font-family: 'Pokemon Solid', sans-serif !important;
    letter-spacing: 2px !important;
    text-shadow: 2px 2px 0px #3e2723 !important;
    -webkit-text-stroke: 1px #3e2723 !important;
    width: 100%; /* Makes it span the whole width of the form */
    margin-top: 15px !important;
    font-size: 1.2rem !important;
}

.btn-primary:hover, .btn-primary:focus {
    transform: scale(1.02) !important;
    background: #388E3C !important;
    border-color: #2E7D32 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

/* === "COPY PASSWORD" BUTTON (Replaces Bootstrap Secondary) === */
.btn-secondary {
    background: #D8704D !important; /* Warm Rescue Team Orange */
    color: #FFFFFF !important; 
    padding: 8px 20px !important;
    border: 2px solid #A15033 !important; 
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    font-family: 'Pokemon Solid', sans-serif !important;
    letter-spacing: 2px !important;
    text-shadow: 2px 2px 0px #3e2723 !important;
    -webkit-text-stroke: 1px #3e2723 !important;
    margin-top: 15px !important;
    font-size: 1.1rem !important;
}

/* Hover effect to make it pop */
.btn-secondary:hover:not(:disabled), .btn-secondary:focus:not(:disabled) {
    transform: scale(1.05) !important;
    background: #A15033 !important;
    border-color: #5D2A18 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

/* Disabled state (when the app locks it before a password is generated) */
.btn-secondary:disabled {
    background: #BCAAA4 !important; /* Dusty brown/gray */
    border-color: #8D6E63 !important;
    color: #EFEBE9 !important;
    transform: none !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    -webkit-text-stroke: 1px #5D4037 !important;
    text-shadow: none !important;
}