/*
Theme Name: ChatAlerimax
Version: 1.0.6
Text Domain: chatalerimaxcom
Domain Path: /languages
Description: The chatalerimax.com Laravel design converted to WordPress, on the CRM/Webshop theme conventions.
*/

/* --- from layouts/styles.blade.php --- */

    :root {
        --color-brand: 40 99 235;
        --color-brand-light: 110 150 242;
        --color-brand-dark: 17 67 182;
    }


        .form-action-wrapper {
            text-align: center;
            margin-top: 25px;
            display: flex;
            flex-direction: row;
            justify-content: stretch;
        }

        .form-actions .button {
            flex: auto;
            display: inline-block;
            --animate-duration: 1s;
            --animate-repeat: 1;
            --animate-delay: 0.5s;
            transition: all .2s ease-in-out;
            padding: 14px 20px;
            font-size: 16px;
            line-height: 1.5rem;
            letter-spacing: normal;
            font-weight: inherit;
            }

        :root {
            --color-brand: 40 99 235;
            --color-brand-light: 110 150 242;
            --color-brand-dark: 17 67 182;
        }

        .language-selector {
            position: relative;
            display: block;
        }

        .lang-toggle {
            background: transparent;
            border: none;
            font-size: 18px;
            cursor: pointer;
            padding: 10px 15px;
        }

        .lang-toggle svg path {
            stroke: #ffffff; /* white */
        }

        .dropdown-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding-bottom: 20px;
            border-bottom: 1px solid #A8A8A8;
        }

        .title {
            font-size: 22px;
            font-style: normal;
            font-weight: 600;
            line-height: 28px;
            color: #111;
        }

        .lang-dropdown {
            position: absolute;
            top: 146%;
            right: 0;
            width: 400px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            padding: 40px 20px;
            z-index: 10000000000000;
            opacity: 0;
            transform: translateY(-10px);
            pointer-events: none;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .lang-dropdown.show {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        .lang-dropdown::before {
            content: '';
            position: absolute;
            top: -10px;
            right: 20px;
            border-width: 6px;
            border-style: solid;
            border-color: transparent transparent white transparent;
        }

        .custom-select-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 10px;
            border-radius: 4px;
            border: 0.5px solid #A8A8A8;
            background: #FFF;
            cursor: pointer;
            font-size: 14px;
            margin-bottom: 10px;
            margin-top: 20px;
        }

        .selected-lgmtxt {
            color: #111;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px;
        }

        .lgmlist {
            max-height: 200px;
            overflow-y: auto;
            list-style: none;
            margin: 0 !important;
            padding: 0 !important;
            display: none;
        }

        .lgmlist.show {
            display: block;
        }

        .lang-button {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 10px;
            font-size: 16px;
            cursor: pointer;
            text-decoration: none;
            color: #000;
            transition: background 0.2s ease-in-out;
        }

        .lang-button:hover,
        .lang-button.lgmbtn lang-active {
            border-radius: 6px;
            background: #F1F1F1;
        }

        .lgmbtn lang-active::after {
            content: '✔';
            color: green;
            font-size: 14px;
            margin-left: auto;
            padding-left: 8px;
        }

        .lang-close {
            background: transparent;
            border: none;
            font-size: 18px;
            color: #000;
            cursor: pointer;
        }

        .lang-confirm {
            width: 100%;
            color: #FFFFFF;
            padding: 10px 20px;
            margin-top: 12px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            border-radius: 10px;
            border: none;
            background: #1E1E1E; /* Dark material base */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5),
                        0 0 0 0 rgba(255, 255, 255, 0) inset;
        }

        .lang-confirm:hover {
            background: linear-gradient(145deg, #333333, #1E1E1E); /* subtle gradient on hover */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6),
                        0 0 10px rgba(100, 100, 255, 0.2) inset; /* subtle inner glow */
            transform: translateY(-2px); /* slight lift effect */
        }


        .lang-confirm:active {
            transform: scale(0.97);
        }

        .language-switcher {
            gap: .325rem;
        }

        @media screen and (max-width: 564px) {
            .lang-dropdown {
                padding: 20px 16px;
                width: 300px;
            }
            .title {
                font-size: 20px;
            }
            .dropdown-top {
                padding-bottom: 16px;
            }
        }
    

/* --- from partials/navigation.blade.php (forms and language switcher) --- */

        .form-action-wrapper {
            text-align: center;
            margin-top: 25px;
            display: flex;
            flex-direction: row;
            justify-content: stretch;
        }

        .form-actions .button {
            flex: auto;
            display: inline-block;
            --animate-duration: 1s;
            --animate-repeat: 1;
            --animate-delay: 0.5s;
            transition: all .2s ease-in-out;
            padding: 14px 20px;
            font-size: 16px;
            line-height: 1.5rem;
            letter-spacing: normal;
            font-weight: inherit;
            }

        :root {
            --color-brand: 40 99 235;
            --color-brand-light: 110 150 242;
            --color-brand-dark: 17 67 182;
        }

        .language-selector {
            position: relative;
            display: block;
        }

        .lang-toggle {
            background: transparent;
            border: none;
            font-size: 18px;
            cursor: pointer;
            padding: 10px 15px;
        }

        .lang-toggle svg path {
            stroke: #ffffff; /* white */
        }

        .dropdown-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding-bottom: 20px;
            border-bottom: 1px solid #A8A8A8;
        }

        .title {
            font-size: 22px;
            font-style: normal;
            font-weight: 600;
            line-height: 28px;
            color: #111;
        }

        .lang-dropdown {
            position: absolute;
            top: 146%;
            right: 0;
            width: 400px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            padding: 40px 20px;
            z-index: 10000000000000;
            opacity: 0;
            transform: translateY(-10px);
            pointer-events: none;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .lang-dropdown.show {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        .lang-dropdown::before {
            content: '';
            position: absolute;
            top: -10px;
            right: 20px;
            border-width: 6px;
            border-style: solid;
            border-color: transparent transparent white transparent;
        }

        .custom-select-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 10px;
            border-radius: 4px;
            border: 0.5px solid #A8A8A8;
            background: #FFF;
            cursor: pointer;
            font-size: 14px;
            margin-bottom: 10px;
            margin-top: 20px;
        }

        .selected-lgmtxt {
            color: #111;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px;
        }

        .lgmlist {
            max-height: 200px;
            overflow-y: auto;
            list-style: none;
            margin: 0 !important;
            padding: 0 !important;
            display: none;
        }

        .lgmlist.show {
            display: block;
        }

        .lang-button {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 10px;
            font-size: 16px;
            cursor: pointer;
            text-decoration: none;
            color: #000;
            transition: background 0.2s ease-in-out;
        }

        .lang-button:hover,
        .lang-button.lgmbtn lang-active {
            border-radius: 6px;
            background: #F1F1F1;
        }

        .lgmbtn lang-active::after {
            content: '✔';
            color: green;
            font-size: 14px;
            margin-left: auto;
            padding-left: 8px;
        }

        .lang-close {
            background: transparent;
            border: none;
            font-size: 18px;
            color: #000;
            cursor: pointer;
        }

        .lang-confirm {
            width: 100%;
            color: #FFFFFF;
            padding: 10px 20px;
            margin-top: 12px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            border-radius: 10px;
            border: none;
            background: #1E1E1E; /* Dark material base */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5),
                        0 0 0 0 rgba(255, 255, 255, 0) inset;
        }

        .lang-confirm:hover {
            background: linear-gradient(145deg, #333333, #1E1E1E); /* subtle gradient on hover */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6),
                        0 0 10px rgba(100, 100, 255, 0.2) inset; /* subtle inner glow */
            transform: translateY(-2px); /* slight lift effect */
        }


        .lang-confirm:active {
            transform: scale(0.97);
        }

        .language-switcher {
            gap: .325rem;
        }

        @media screen and (max-width: 564px) {
            .lang-dropdown {
                padding: 20px 16px;
                width: 300px;
            }
            .title {
                font-size: 20px;
            }
            .dropdown-top {
                padding-bottom: 16px;
            }
        }
    

/* --- from layouts/cookie.blade.php --- */


/* --- from pages/profile.blade.php --- */
.form-actions a {
    text-align: center;
}

/* --- from pages/unsubscribe.blade.php --- */

    .unsubscribe {
        max-width: 550px;
        margin: auto;
        padding: 20px;
        margin-top: 20px;
        margin-bottom: 20px;
        border-radius: 5px;
    }

    .form-actions {
        text-align: center;
        text-align: -webkit-center;
    }

    .unsubscribe-title {
        font-size: 2rem;
        text-align: center;
        margin-bottom: 15px;
        line-height: 2rem;
    }

    .unsubscribe #unsubscribe {
        background: transparent;
    }

    .unsubscribe .form-field,
    .unsubscribe .form-data {
        width: 100%;
    }


/* --- WordPress-side containers --- */
.content-section {
    width: 100%;
}

.content-section input:not([type=checkbox]):not([type=radio]),
.content-section select,
.content-section textarea,
.form-login-wrapper input:not([type=checkbox]):not([type=radio]) {
    box-sizing: border-box;
    width: 100%;
}

.cheeseburger-chat_uim.open {
    display: block;
    visibility: visible;
    opacity: 1;
}