@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Rock+Salt&display=swap');

:root {
  --glow-white: #ffffff;
  --glow-weed: #32CD32;
}

/* WP Admin Icon */
#wpadminbar #wp-admin-bar-vtrts_free_top_button .ab-icon:before {
    content: "\f185";
    color: #1DAE22;
    top: 3px;
}

/* Age Gate Container */
.age-gate {
    border-radius: 20px!important;
    background-image: url('https://panafricancannabis.co.za/wp-content/uploads/2025/07/14249-min-scaled.jpg');
    background-size: cover;
    background-repeat: no-repeat;
		background: black!important;
    padding: 1vw!important;
    font-family: inherit; /* keep default font */
    box-shadow:
        0 0 4px var(--glow-white),
        0 0 8px var(--glow-weed),
        0 0 12px var(--glow-weed)!important;
		
		box-shadow: 0px 0px 20px white!important;
    transition: box-shadow 0.3s ease-in-out, transform 0.2s ease-in-out;
    position: relative;
}

/* Apply weed style font ONLY to headline */
.age-gate__headline {
    font-family: 'Rock Salt', 'Permanent Marker', cursive;
}

/* Background blur layer */
.age-gate::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px);
    z-index: 0;
}

/* Form container */
.age-gate__form {
    z-index: 2;
    position: relative;
    width: 100%!important;
    border-radius: 20px!important;
    padding: 2vw;
    font-family: inherit; /* keep default font */
}

/* Label color */
.age-gate__form-section .age-gate__label {
    color: white!important;
}

/* Input styling */
.age-gate .age-gate__input {
    border-radius: 25px!important;
    width: 100%;
    padding: 0.8em;
    font-size: 1em;
}

/* Button styling */
.age-gate__button {
    color: white;
    width: 12vw!important;
    height: 3vw;
    font-size: 1em;
    border-radius: 20px;
    background-color: var(--glow-weed);
    border: none;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, border-radius 0.3s ease, transform 0.3s ease;
}

.age-gate__button:hover {
		transform: scale(1.1);
		color: black!important;
		background: white!important;
		border-radius: 10px!important;
}

/* Logo sizing */
.age-gate__heading-title.age-gate__heading-title--logo {
    height: 15vw;
    width: 15vw;
    margin: 0 auto;
}

/* ========== Mobile Support ========== */
@media screen and (max-width: 768px) {
    .age-gate {
        padding: 5vw!important;
        border-radius: 15px!important;
    }

    .age-gate__form {
        padding: 5vw;
    }

    .age-gate .age-gate__input {
        font-size: 1.2em;
    }

    .age-gate__button {
        width: 100%!important;
        height: auto;
        padding: 1em;
        font-size: 1.2em;
    }

    .age-gate__heading-title.age-gate__heading-title--logo {
        width: 40vw;
        height: 40vw;
    }
}