:root {
    --primary-colour: #00c896; /* Base colour */
    --primary-colour-dark: #00a37a; /* Darker shade for hover */

    --secondary-colour: #35495d;
    --secondary-colour-dark: #2b3b4b; /* Darker shade for hover */

    --delete-colour: #ef4444;
    --delete-colour-dark: #b91c1c;

    --success-50: #ecfdf3;
    --success-100: #d1fae5;
    --success-200: #a7f3d0;
    --success-300: #75e0a7;
    --success-400: #34d58c;
    --success-500: #10b981;
    --success-600: #079455;
}

html,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* START BRICOLAGE FONT */
.tangerine-regular {
    font-family: "Tangerine", serif;
    font-weight: 400;
    font-style: normal;
}

.tangerine-bold {
    font-family: "Tangerine", serif;
    font-weight: 700;
    font-style: normal;
}

.bricolage-grotesque {
    font-family: "Bricolage Grotesque", serif;
    font-optical-sizing: auto;
    font-style: normal;
}
/* END BRICOLAGE FONT */

/* START OUTFIT FONT */
.outfit-font {
    font-family: "Outfit", serif;
    font-optical-sizing: auto;
    font-style: normal;
}
/* END OUTFIT FONT */

/* Target Google's autocomplete dropdown */
.pac-container {
    background: white !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1) !important;
    font-family: "Outfit", sans-serif !important;
    font-size: 14px !important;
}

/* Style individual dropdown items */
.pac-item {
    padding: 12px 16px !important;
    color: #64748b !important;
    transition: all 0.3s ease-in-out !important;
    display: flex !important;
    align-items: center !important;
}

/* Hover effect */
.pac-item:hover {
    background: var(--primary-colour) !important;
    color: white !important;
    border-radius: 0px !important;
}

/* Style text in the dropdown */
.pac-item-query {
    color: #0f172a !important;
    font-weight: 500 !important;
}

.pac-logo:after {
    background-image: none !important;
    display: none !important;
}

/* Hide the default Google map marker icon */
.pac-icon {
    display: none !important;
}

/* Add custom location icon using a background SVG */
.pac-item::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2364748B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2C8.13 2 5 5.13 5 9c0 5 7 12 7 12s7-7 7-12c0-3.87-3.13-7-7-7zm0 10a3 3 0 110-6 3 3 0 010 6z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 10px;
}

/* Change the icon and text colour on hover */
.pac-item:hover::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2C8.13 2 5 5.13 5 9c0 5 7 12 7 12s7-7 7-12c0-3.87-3.13-7-7-7zm0 10a3 3 0 110-6 3 3 0 010 6z"/></svg>');
}

.pac-item:hover .pac-item-query {
    color: white !important;
}

.swiper-slide-shadow.swiper-slide-shadow-cards {
    opacity: 0 !important;
    box-shadow: none !important;
}