@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .scrollbar-hide {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }

    .scrollbar-hide::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }
}


@layer base {
    .dark body {
        @apply text-n40;
        /* Default text color for dark mode */
    }

    /* Default text colors for dark mode */
    .dark p, .dark span, .dark li, .dark a,
    .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
        @apply text-n40;
    }

    /* Style the clear button in light mode */
    input[type="search"]::-webkit-search-cancel-button {
        appearance: none; /* Removes default styling */
        height: 16px;
        width: 16px;
        background-color: #e5e7eb; /* Light gray */
        border-radius: 50%; /* Circular button */
        background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"%3E%3Cpath stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"%3E%3C/path%3E%3C/svg%3E'); /* X icon */
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
    }

    /* Style the clear button in dark mode */
    .dark input[type="search"]::-webkit-search-cancel-button {
        background-color: #3a3a3c; /* Dark gray */
        background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="white"%3E%3Cpath stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"%3E%3C/path%3E%3C/svg%3E'); /* White X icon */
    }

    /* Remove default browser styling for the date picker icon */
    input[type="date"]::-webkit-calendar-picker-indicator {
        appearance: none;
        background-color: transparent; /* Ensure no background clashes */
        width: 20px;
        height: 20px;
        background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"%3E%3Cpath stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3M16 7V3m-9 4h10M3 11h18M5 15h14M5 19h14%3E%3C/path%3E%3C/svg%3E');
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
    }

    /* Dark mode styling for the calendar icon */
    .dark input[type="date"]::-webkit-calendar-picker-indicator {
        background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="3" y="4" width="18" height="18" rx="2"%3E%3C/rect%3E%3Cline x1="16" y1="2" x2="16" y2="6"%3E%3C/line%3E%3Cline x1="8" y1="2" x2="8" y2="6"%3E%3C/line%3E%3Cline x1="3" y1="10" x2="21" y2="10"%3E%3C/line%3E%3C/svg%3E');
    }
}

@layer components {
    .btn-primary {
        @apply block text-center w-full h-12
        bg-red-500 rounded-xl border border-red-500
        text-white
        text-base font-semibold
        py-3
        transition-colors duration-300 ease-in-out;
    }

    .btn-primary:hover {
        @apply bg-red-600 border-red-600;
        /* Slightly darker red on hover */
    }

    .btn-primary:active {
        @apply bg-red-700 border-red-700;
        /* Even darker red on click/tap */
    }

    .btn-primary:focus {
        @apply outline-none ring-2 ring-red-300 ring-offset-2;
        /* Focus ring */
    }

    .btn-secondary {
        @apply block text-center w-full h-12
        bg-gray-100 rounded-xl border border-gray-300
        text-gray-800 dark:text-gray-900
        text-base font-semibold
        py-3
        transition-colors duration-300 ease-in-out;
    }

    .btn-secondary:hover {
        @apply bg-gray-200 border-gray-300;
    }

    .btn-secondary:active {
        @apply bg-gray-300 border-gray-300;
    }

    .btn-secondary:focus {
        @apply outline-none ring-2 ring-gray-300 ring-offset-2;
    }

    .circle-navigator {
        @apply bg-gray-200 dark:bg-blackN4X;
    }

    .circle-navigator.selected {
        @apply bg-red-500 text-white;
    }

    /* OTP */
    .checkbox.style-c input:checked ~ .checkbox__checkmark {
        background-color: #f52f3b;
    }

    .checkbox.style-c input:checked ~ .checkbox__checkmark:after {
        opacity: 1;
    }

    .checkbox.style-c:hover input ~ .checkbox__checkmark {
        background-color: #eee;
    }

    .checkbox.style-c:hover input:checked ~ .checkbox__checkmark {
        background-color: #f52f3b;
    }
}
/*!
*    ______ _       _   _
*    |  ____| |     | | (_)
*    | |__  | | __ _| |_ _  ___ ___  _ __
*    |  __| | |/ _` | __| |/ __/ _ \| '_ \
*    | |    | | (_| | |_| | (_| (_) | | | |
*    |_|    |_|\__,_|\__|_|\___\___/|_| |_|
*
*         https://www.ph.ph.com
*/

@font-face {
    font-family: "Flaticon";
    src: url(/fonts/flaticon_mycollection.woff2?v=5) format("woff2"),
    url(/fonts/flaticon_mycollection.woff?v=5) format("woff");
    font-weight: normal;
    font-style: normal;
}

.ph {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: "Flaticon" !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Enable Ligatures ================ */
    letter-spacing: 0;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga=1";
    -moz-font-feature-settings: "liga";
    -ms-font-feature-settings: "liga" 1;
    font-feature-settings: "liga";
    -webkit-font-variant-ligatures: discretionary-ligatures;
    font-variant-ligatures: discretionary-ligatures;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*i[class^="flaticon-"]:before, i[class*=" flaticon-"]:before {*/
/*    font-family: Flaticon !important;*/
/*    font-style: normal;*/
/*    font-weight: normal !important;*/
/*    font-variant: normal;*/
/*    text-transform: none;*/
/*    line-height: 1;*/
/*    -webkit-font-smoothing: antialiased;*/
/*    -moz-osx-font-smoothing: grayscale;*/
/*}*/

.ph.ph-volleyball:before {
    content: "\f101";
}

.ph.ph-baseball:before {
    content: "\f102";
}

.ph.ph-basketball:before {
    content: "\f103";
}

.ph.ph-hockey:before {
    content: "\f104";
}

.ph.ph-field:before {
    content: "\f105";
}

.ph.ph-lacrosse:before {
    content: "\f106";
}

.ph.ph-football:before {
    content: "\f107";
}

.ph.ph-soccer:before {
    content: "\f108";
}

.ph.ph-star:before {
    content: "\f109";
}

.ph.ph-home:before {
    content: "\f10a";
}

.ph.ph-school:before {
    content: "\f10b";
}

.ph.ph-league:before {
    content: "\f10c";
}

.ph.ph-league-1:before {
    content: "\f10d";
}

.ph.ph-admin:before {
    content: "\f10e";
}

.ph.ph-left-arrow:before {
    content: "\f10f";
}

.ph.ph-right-arrow:before {
    content: "\f110";
}

.ph.ph-previous:before {
    content: "\f111";
}

.ph.ph-next:before {
    content: "\f112";
}

.ph.ph-caret-right:before {
    content: "\f113";
}

.ph.ph-caret-left-:before {
    content: "\f114";
}

.ph.ph-hamburger:before {
    content: "\f115";
}

.ph.ph-star-filled:before {
    content: "\f116";
}

.ph.ph-districts:before {
    content: "\f117";
}

.ph.ph-bracket:before {
    content: "\f118";
}

.ph.ph-tv:before {
    content: "\f119";
}

.ph.ph-tickets:before {
    content: "\f11A";
}

.ph.ph-ranking:before {
    content: "\f11B";
}

.ph.ph-social:before {
    content: "\f11C";
}

.ph.ph-stats:before {
    content: "\f11D";
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */

html, body {
    max-width: 100%;
    overflow-x: hidden;
}