/* Reset and Base Styles */
            *,
            *::before,
            *::after {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
            }

            html {
                line-height: 1.5;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                font-family:
                    "Inter",
                    -apple-system,
                    BlinkMacSystemFont,
                    "Segoe UI",
                    Roboto,
                    Helvetica,
                    Arial,
                    sans-serif,
                    "Apple Color Emoji",
                    "Segoe UI Emoji",
                    "Segoe UI Symbol";
            }

            body {
                min-height: 100vh;
                background-color: #270c07;
                color: white;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 1.5rem;
                font-family: "Inter", sans-serif;
                position: relative;
                overflow-x: hidden;
                min-height: auto; /* Allow content to determine height */
            }

            /* Background Image */
            body::before {
                content: "";
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-image: url("images/fmp2026_back.jpg");
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                background-attachment: fixed;
                filter: blur(8px) brightness(0.4);
                transform: scale(1.1);
                z-index: -1;
            }

            /* Main Container */
            .container {
                position: relative;
                z-index: 1;
                width: 100%;
                max-width: 42rem;
                margin: 2rem auto;
                background-color: rgba(39, 12, 7, 0.85);
                backdrop-filter: blur(2px);
                border-radius: 1rem;
                padding: 2rem;
                box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
            }

            main {
                width: 100%;
                max-width: 28rem; /* max-w-md */
                margin-left: auto;
                margin-right: auto;
                background-color: rgba(48, 25, 18, 0.9);
                padding: 1.5rem; /* p-6 */
                border-radius: 0.75rem; /* rounded-xl */
                box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
                border: 1px solid rgba(238, 101, 18, 0.2);
            }

            /* Header */
            header {
                text-align: center;
                margin-bottom: 3rem; /* mb-12 */
            }

            header h1 {
                font-size: 3rem; /* text-5xl */
                font-weight: 800; /* font-extrabold */
                color: #f58d2a;
                margin-bottom: 0.75rem; /* mb-3 */
                letter-spacing: -0.025em; /* tracking-tight */
                font-family: "Arial Black", Gadget, sans-serif;
            }

            header p {
                font-size: 1.125rem; /* text-lg */
                color: #d1d5db; /* text-gray-300 */
                max-width: 36rem; /* max-w-xl */
                margin-left: auto;
                margin-right: auto;
            }

            main h2 {
                font-size: 1.875rem; /* text-3xl */
                font-weight: 700; /* font-bold */
                text-align: center;
                color: #ee6512;
                margin-bottom: 2rem; /* mb-8 */
            }

            .buttons-container {
                display: flex;
                flex-direction: column;
                align-items: stretch;
            }

            .buttons-container > a:not(:last-child) {
                margin-bottom: 1.25rem; /* space-y-5 approximation */
            }

            /* Link Button Styles */
            .link-button {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                padding: 1rem 1.5rem; /* px-6 py-4 */
                font-size: 1.125rem; /* text-lg */
                font-weight: 700; /* font-bold */
                border-radius: 0.5rem; /* rounded-lg */
                box-shadow:
                    0 10px 15px -3px rgba(0, 0, 0, 0.1),
                    0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
                transition: all 0.3s ease-in-out;
                text-decoration: none;
                border-width: 2px;
                border-style: solid;
            }

            .link-button:hover {
                transform: scale(1.05);
            }

            .link-button:focus {
                outline: none;
                box-shadow: 0 0 0 4px rgba(238, 101, 18, 0.5); /* focus:ring-4 focus:ring-opacity-50 focus:ring-[#EE6512] */
            }

            .link-button svg {
                width: 1.5rem; /* w-6 */
                height: 1.5rem; /* h-6 */
                margin-right: 0.75rem; /* mr-3 */
            }

            /* Specific Button Colors */
            .btn-goout {
                background-color: #5bbad5;
                color: white;
                border-color: #5bbad5;
            }
            .btn-goout:hover {
                background-color: #429bb3;
            }

            .btn-smsticket {
                background-color: #2d89ef;
                color: #270c07;
                border-color: #2d89ef;
            }
            .btn-smsticket:hover {
                background-color: #1861ac;
            }

            .btn-other {
                background-color: #097054;
                color: #f3f4f6;
                border-color: #097054;
            }
            .btn-other:hover {
                background-color: #065c43;
            }

            .btn-facebook {
                background-color: #1877f3;
                color: white;
                border-color: #1877f3;
            }
            .btn-facebook:hover {
                background-color: #145db2;
            }

            /* Footer adjustments */
            footer {
                position: relative;
                z-index: 1;
                width: 100%;
                max-width: 42rem;
                margin: 2rem auto;
                padding: 1rem;
                background-color: rgba(39, 12, 7, 0.85);
                backdrop-filter: blur(2px);
                border-radius: 1rem;
                box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
            }

            footer p {
                margin-top: 0.25rem; /* mt-1 */
            }

            footer a {
                color: #f58d2a;
                margin-left: 0.25rem; /* ml-1 */
            }
            footer a:hover {
                color: #ee6512;
                text-decoration: underline;
            }

            .color-palette span {
                display: inline-block;
                width: 0.75rem; /* w-3 */
                height: 0.75rem; /* h-3 */
                margin-left: 0.25rem; /* ml-1 */
                border-radius: 9999px; /* rounded-full */
            }
            .palette-1 {
                background-color: #270c07;
            }
            .palette-2 {
                background-color: #f58d2a;
            }
            .palette-3 {
                background-color: #301912;
            }
            .palette-4 {
                background-color: #611f10;
            }
            .palette-5 {
                background-color: #ee6512;
            }

            /* Responsive Styles */
            /* sm: min-width: 640px */
            @media (min-width: 640px) {
                header h1 {
                    font-size: 3.75rem; /* sm:text-6xl */
                }
                header p {
                    font-size: 1.25rem; /* sm:text-xl */
                }
                main {
                    padding: 2rem; /* sm:p-8 */
                }
                main h2 {
                    font-size: 2.25rem; /* sm:text-4xl */
                }
            }

            /* md: min-width: 768px */
            @media (min-width: 768px) {
                header {
                    margin-bottom: 4rem; /* md:mb-16 */
                }
                header h1 {
                    font-size: 4.5rem; /* md:text-7xl */
                }
                footer {
                    margin-top: 4rem; /* md:mt-16 */
                }
            }

            /* Cookie Consent Banner */
            .cookie-consent {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                background-color: rgba(39, 12, 7, 0.95);
                backdrop-filter: blur(8px);
                padding: 1rem;
                z-index: 1000;
                display: none;
                border-top: 1px solid rgba(238, 101, 18, 0.3);
                box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
            }

            .cookie-consent.active {
                display: block;
            }

            .cookie-content {
                max-width: 42rem;
                margin: 0 auto;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 1rem;
                flex-wrap: wrap;
            }

            .cookie-text {
                flex: 1;
                min-width: 280px;
                color: #d1d5db;
                font-size: 0.875rem;
                line-height: 1.5;
            }

            .cookie-buttons {
                display: flex;
                gap: 0.75rem;
                flex-wrap: wrap;
            }

            .cookie-button {
                padding: 0.5rem 1rem;
                border-radius: 0.375rem;
                font-weight: 600;
                font-size: 0.875rem;
                cursor: pointer;
                transition: all 0.2s ease;
                border: none;
            }

            .cookie-accept {
                background-color: #f58d2a;
                color: white;
            }

            .cookie-accept:hover {
                background-color: #ee6512;
            }

            .cookie-settings {
                background-color: transparent;
                color: #f58d2a;
                border: 1px solid #f58d2a;
            }

            .cookie-settings:hover {
                background-color: rgba(245, 141, 42, 0.1);
            }

            @media (max-width: 640px) {
                .cookie-content {
                    flex-direction: column;
                    text-align: center;
                }

                .cookie-buttons {
                    width: 100%;
                    justify-content: center;
                }
            }

            /* Cookie Settings Modal */
            .cookie-modal {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(0, 0, 0, 0.7);
                z-index: 1100;
                backdrop-filter: blur(4px);
            }

            .cookie-modal.active {
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .cookie-modal-content {
                background-color: #301912;
                border: 1px solid rgba(238, 101, 18, 0.3);
                border-radius: 1rem;
                padding: 2rem;
                max-width: 32rem;
                width: 90%;
                max-height: 90vh;
                overflow-y: auto;
                position: relative;
                box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
            }

            .cookie-modal-header {
                margin-bottom: 1.5rem;
            }

            .cookie-modal-header h2 {
                color: #f58d2a;
                font-size: 1.5rem;
                margin-bottom: 0.5rem;
            }

            .cookie-modal-close {
                position: absolute;
                top: 1rem;
                right: 1rem;
                background: none;
                border: none;
                color: #d1d5db;
                cursor: pointer;
                padding: 0.5rem;
                font-size: 1.5rem;
                line-height: 1;
            }

            .cookie-category {
                margin-bottom: 1.5rem;
                padding: 1rem;
                background-color: rgba(39, 12, 7, 0.5);
                border-radius: 0.5rem;
                border: 1px solid rgba(238, 101, 18, 0.2);
            }

            .cookie-category-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 0.5rem;
            }

            .cookie-category-title {
                font-weight: 600;
                color: #f58d2a;
            }

            .cookie-category-description {
                font-size: 0.875rem;
                color: #d1d5db;
                margin-bottom: 1rem;
            }

            .cookie-toggle {
                position: relative;
                display: inline-block;
                width: 3rem;
                height: 1.5rem;
            }

            .cookie-toggle input {
                opacity: 0;
                width: 0;
                height: 0;
            }

            .cookie-toggle-slider {
                position: absolute;
                cursor: pointer;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(238, 101, 18, 0.3);
                transition: 0.4s;
                border-radius: 1.5rem;
            }

            .cookie-toggle-slider:before {
                position: absolute;
                content: "";
                height: 1.25rem;
                width: 1.25rem;
                left: 0.125rem;
                bottom: 0.125rem;
                background-color: white;
                transition: 0.4s;
                border-radius: 50%;
            }

            .cookie-toggle input:checked + .cookie-toggle-slider {
                background-color: #f58d2a;
            }

            .cookie-toggle input:checked + .cookie-toggle-slider:before {
                transform: translateX(1.5rem);
            }

            .cookie-toggle.disabled {
                opacity: 0.7;
                cursor: not-allowed;
            }

            .cookie-toggle.disabled .cookie-toggle-slider {
                background-color: #f58d2a;
            }

            .cookie-toggle.disabled .cookie-toggle-slider:before {
                transform: translateX(1.5rem);
            }

            .cookie-category-header .cookie-status {
                font-size: 0.75rem;
                color: #f58d2a;
                margin-left: 0.5rem;
            }

            .cookie-modal-footer {
                display: flex;
                justify-content: flex-end;
                gap: 1rem;
                margin-top: 2rem;
                padding-top: 1rem;
                border-top: 1px solid rgba(238, 101, 18, 0.2);
            }

            .cookie-modal-button {
                padding: 0.75rem 1.5rem;
                border-radius: 0.375rem;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.2s ease;
            }

            .cookie-modal-save {
                background-color: #f58d2a;
                color: white;
                border: none;
            }

            .cookie-modal-save:hover {
                background-color: #ee6512;
            }

            .cookie-modal-cancel {
                background-color: transparent;
                color: #d1d5db;
                border: 1px solid #d1d5db;
            }

            .cookie-modal-cancel:hover {
                background-color: rgba(209, 213, 219, 0.1);
            }

            @media (max-width: 640px) {
                .cookie-modal-content {
                    padding: 1.5rem;
                }

                .cookie-modal-footer {
                    flex-direction: column;
                }

                .cookie-modal-button {
                    width: 100%;
                }
            }