/*
Theme Name: Talerskill
Version: 1.0.8
Text Domain: talerskillcom
Domain Path: /languages
Description: The talerskill.com Laravel design converted to WordPress, on the CRM/Webshop theme conventions.
*/

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


    .paragraph-column{
        width: 50%;
    }
    .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;
        margin-left: 5px;
        margin-right: 5px;
        background-color: var(--color-primary);
        --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;
        }

        

    .form-action-wrapper .button {
        max-width: 48%; /* optional, buttons same size or adjust */
    }

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

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

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

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

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

        .lang-dropdown {
            position: absolute;
            top: 100%;
            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-lang-text {
            color: #111;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px;
        }

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

        .lang-list.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.lang-active {
            border-radius: 6px;
            background: #F1F1F1;
        }

        .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: white;
            padding: 10px 20px;
            margin-top: 12px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            border-radius: 10px;
            border: 0.5px solid #897FFF;
            background: linear-gradient(180deg, #897FFF 0%, #4A3AFF 100%);
            box-shadow: 0 2px 3px 0 rgba(55, 52, 209, 0.21), 0 -2px 2px 0 rgba(80, 70, 189, 0.60) inset, 0 1px 1px 0 rgba(255, 255, 255, 0.35) inset, 0 3px 4px 0 rgba(223, 229, 255, 0.30) inset;
            transition: all 0.4s ease;
        }

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

        @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/unsubscribe.blade.php --- */

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


/* --- 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-menskill.open {
    display: block;
    visibility: visible;
    opacity: 1;
}