/* General Styles */

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scroll */
    font-family: 'Open Sans', sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box; /* Include padding and borders in the element's width */
}

#background-video {
    position: fixed; /* Fixed position to cover the entire viewport */
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1; /* Place the video behind other content */
}

/* Ensure all elements fit within the viewport */
body, #tclreg_form, .slider-container, .color-selector, .gender-selection {
    max-width: 100%;
}

/* Style for the main wrapper */
.wrap {
    margin: 0 auto;
    padding: 0px;
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Desktop-specific styles */
@media (min-width: 601px) {
    .wrap {
        max-width: 600px; /* Restore max-width for desktop screens */
    }
}

/* Style for main headings */
h1 {
    font-size: 22px;
    margin-bottom: 20px;
}

.logo-box {
    max-width: 400px; /* Match the width of the form */
    margin: 0 auto; /* Center align */
    background: #da0e67 url(https://www.thecasuallounge.ch/cmsImage/name/lp.class2.logo-box) no-repeat center;
    color: #ffffff;
    padding: 15px 15px 25px;
    text-align: center;
    padding-top: 70px; /* Adjust this value to create space for the logo */
    position: relative;
    background-position: center 15px; /* Adjust the vertical position as needed */
	opacity: 0.7;
}

h2 {
    font-size: 16px;
    font-weight: normal;
    position: absolute; /* Position absolute will take it out of the normal flow and place it on top of the background */
    top: 45px; /* Adjust this value so that it's just below your logo */
    left: 50%;
    transform: translateX(-50%); /* This will center the text */
    width: 100%; /* Ensure the text is full width */
    text-align: center;
    color: #ffffff;
    font-family: 'Open Sans', sans-serif;
}

.api-debug-box {
    font-size: 14px;
    background-color: white;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 20px auto;
    overflow: auto;
    max-width: 400px;
    word-wrap: break-word; /* Breaks long words */
    white-space: pre-wrap; /* Preserves formatting and allows wrapping */
    display: block;
}

/* Style for form labels */
label {
    display: block;
	margin-top: 20px;
    margin-bottom: 10px;
}

input[type="text"] {
    font-size: 20px; 
    border-radius: 0px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    width: 100%;;
}

select {
    padding: 8px 10px;
    border: 1px solid #ccc;
    font-size: 20px;
    font-family: Arial, sans-serif;
    -webkit-appearance: none; /* Remove default dropdown arrow in WebKit browsers */
    background-image: url('data:image/svg+xml;charset=US-ASCII, ...'); /* Optional: Add custom dropdown arrow */
    background-position: right 10px center;
    background-repeat: no-repeat;
	width: 100%;
}


.input-icon-container {
    position: relative;
    display: flex;
    align-items: center; /* Align items vertically */
    gap: 10px; /* Add space between the input field and icon */
}

.input-icon-container input {
    font-weight: bold;
    padding: 8px 10px;
    padding-right: 40px; /* Space for the icon */
    background-color: white !important;
    border: 1px solid #ccc;
    font-size: 26px;
    font-family: Arial, sans-serif;
    color: #d11760;
    width: 100%;
    -webkit-appearance: none; /* Remove default styles in WebKit browsers */
    line-height: normal; /* Reset line height */
    height: 50px; /* Set a fixed height to match the icon size */
    -webkit-appearance: none; /* Remove the default style in Chrome, Safari */
    -moz-appearance: none; /* Remove the default style in Firefox */
    appearance: none; /* Remove the default style */
}

.input-icon-container i {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #d11760;
    cursor: pointer;
    font-size: 26px; /* Ensure this matches the font size of the input text */
    z-index: 10; /* Ensure the icon is clickable by placing it above the input field */
}

/* Checkbox Custom Styling */
.checkbox-container {
    display: flex;
    align-items: center; /* Vertically center align the checkbox and text */
    margin-top: 15px;
    margin-bottom: 15px;
    position: relative;
}

.checkbox-container input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    position: absolute; /* Take out of flow to allow positioning of the icon */
  /*  width: 100%; /* Allow the clickable area to cover the entire container width */
  /*  height: 100%; /* Allow the clickable area to cover the entire container height */
    z-index: 2; /* Ensure the invisible checkbox is above the icon */
    opacity: 0; /* Hide the checkbox */
}

.checkbox-container .fa-square,
.checkbox-container .fa-check-square {
    font-size: 22px; /* Icon size */
    color: #d11760; /* Icon color */
    padding-left: 15px; /* Space for the icon */
    position: absolute; /* Position the icon absolutely within the container */
    left: 0; /* Align the icon to the left */
    top: 50%;
    transform: translateY(-50%); /* Center the icon vertically */
    z-index: 1; /* Ensure the icon is below the invisible checkbox */
}

.checkbox-container .fa-check-square {
    display: none; /* Hide the checked icon by default */
}

.checkbox-container input[type="checkbox"]:checked ~ .fa-square {
    display: none; /* Hide the unchecked icon when the checkbox is checked */
}

.checkbox-container input[type="checkbox"]:checked ~ .fa-check-square {
    display: block; /* Show the checked icon when the checkbox is checked */
}

.checkbox-container label {
    font-size: 13px; /* Adjust the font size of the text as needed */
    padding-left: 50px; /* Space for the icon */
    display: block; /* Ensure the label takes up the remaining space */
    margin: 0; /* Remove any default margin */
    cursor: pointer;
    width: calc(100% - 30px); /* Subtract the width of the icon */
}

.checkbox-container label a {
    color: inherit; /* The links will inherit the color from the label */
    text-decoration: none; /* No underline for the links */
}

.checkbox-container label a:hover {
    text-decoration: underline; /* Underline on hover for better user experience */
}

#agreement {
    opacity: 0;
    position: absolute;
    left: -9999px;
}


.error-message {
    color: red;
    margin-top: 5px;
    display: none; /* Hide initially */
}





/* You may want to add styles for when the input is focused: */
.input-icon-container input:focus {
    outline: none;
    border-color: #d11760;
    box-shadow: 0 0 0 2px rgba(209, 23, 96, 0.5); /* Adjust the color and opacity to your preference */
}

.input-icon-container input:focus {
    outline: none;
    border-color: #d11760;
    box-shadow: 0 0 0 2px rgba(209, 23, 96, 0.5);
}

#male-icon{
	font-size: 60px;
}

#female-icon{
	font-size: 60px;
}

#user-location,
#email,
#nickname{
    border-radius: 10px; /* Rounded corners */
	color: #d11760;
}

#eyecolor{
	margin-bottom: 15px;
}

.slider-container label {
	margin-bottom: 10px; /* Increase spacing above sliders */
}


/* Style for description paragraphs */
p.description {
    font-style: italic;
    margin-top: -10px;
    margin-bottom: 15px;
    font-size: 14px;
}

.step2-header {
    display: flex;
    align-items: center; /* Align items vertically in the center */
    gap: 10px; /* Space between the icon and the text */
}

.step2-header .fa-circle-check {
    font-size: 36px; /* Adjust the size as needed */
    color: #d11760; /* Adjust the color as needed */
}


/* Style for submit buttons */
#tclreg_form .tclreg-submit-button {
    background-color: #d11760; /* Pink background color */
    color: #fff; /* White text color for contrast */
    padding: 15px 30px; /* More padding for a larger button */
    border: none; /* No border */
    border-radius: 5px; /* Slightly rounded corners */
    cursor: pointer; /* Cursor changes to pointer to indicate clickability */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
    font-size: 18px; /* Larger font size for readability */
    width: auto; /* Auto width to fit content */
    display: block; /* Block display */
    margin: 25px auto; /* Margin for top and bottom, auto for left and right to center */
    text-align: center; /* Center text inside the button */
}

.tclreg-submit-button:hover {
    background-color: #b51048; /* Slightly darker shade of pink for hover effect */
}

#regstep2 {
    display: block; /* Make the button a block element to allow width manipulation */
    width: auto; /* Auto width to contain text and padding */
    margin: 30px auto; /* Top and bottom margin for space, auto to center the button horizontally */
    padding: 15px 30px; /* Padding for visual comfort */
    font-size: 18px; /* Font size for readability */
    font-weight: bold; /* Make the text bold */
    text-align: center; /* Center the text inside the button */
    color: #fff; /* White text */
    background-color: #d11760; /* Background color */
    border: none; /* No border */
    border-radius: 25px; /* Rounded corners */
    cursor: pointer; /* Cursor to pointer to indicate it's clickable */
    transition: background-color 0.3s, transform 0.1s; /* Transition for smooth color change and transform */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow for a subtle 3D effect */
}

#regstep2:hover {
    background-color: #b51048; /* Slightly darker shade on hover for feedback */
}

#regstep2:active {
    transform: scale(0.96); /* Slightly scale down the button when clicked */
}



/* Specific Styles for Registration Form */

/* Style for the registration form */
#tclreg_form {
    max-width: 400px;
    margin: 0px auto;
    padding: 20px;
    border: 0px solid #ccc;
    border-radius: 0px;
    background-color: #f9f9f9;
    opacity: 0.9;
}


/* Style for the selected color selector */
.color-selector.selected {
    border: 2px solid #d11760; /* Highlight with a thicker border */
    box-shadow: 0 0 5px #d11760; /* Optional: Add a shadow for emphasis */
}


/* Styles for Sliders */

/* General style for range inputs (sliders) */
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    background: #aaa;
    outline: none;
    opacity: 1;
    transition: opacity .2s;
    margin-bottom: 20px;
    border-radius: 5px;
}

/* Style for the slider thumb in Webkit browsers */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 25px;
    height: 25px;
    background: #d11760;
    cursor: pointer;
    border-radius: 50%;
}

/* Style for the slider thumb in Firefox */
input[type="range"]::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #d11760;
    cursor: pointer;
    border-radius: 50%;
}

/* Style for the slider thumb in IE */
input[type="range"]::-ms-thumb {
    width: 25px;
    height: 25px;
    background: #d11760;
    cursor: pointer;
    border-radius: 50%;
}

/* Styles for Output Elements */

/* General style for output elements */
output {
    display: block;
    text-align: center;
    font-size: 56px;
    color: #d11760;
    margin: 10px auto;
    width: 100%;
}

/* Style for output wrapper */
.output-wrapper {
    display: inline;
}

.height-output-container {
    text-align: center; /* Center the content */
    font-size: 36px; /* Set the desired font size */
    color: #d11760; /* Set the desired font color */
    margin-bottom: 10px; /* Space below the container */
}

#height-output {
    /* Remove the margin-right to reduce space */
    display: inline; /* Ensure inline display */
}




/* Style for container of slider and output */
.slider-container {
    text-align: center;
    margin-bottom: 20px;
    white-space: nowrap;
}

/* Style for output elements below sliders */
.slider-container output,
.slider-container span {
    display: block;
    text-align: center;
    color: #d11760;
	font-family: serif;
    font-size: 36px;
    margin: 10px auto;
    width: 100%;
}

/* Additional Styles for Specific Elements */

/* Label styles for slider container */
.slider-container label {
    text-align: left;
    display: block;
    margin-bottom: 5px;
}

/* Style for color selectors */
.color-selector {
    display: inline-block;
    width: 40px;
    height: 25px;
    background-color: white;
    border-radius: 25px / 14.5px;
    position: relative;
    margin: 0 5px;
    cursor: pointer;
    border: 0.5px solid gray;
	margin-top: 15px;
    margin-bottom: 10px;
}

/* Style for colored iris */
.color-selector::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 25px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Style for black pupil */
.color-selector::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background-color: black;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Color definitions for iris */
.color-selector.blue::before { background-color: rgb(135, 206, 250); }
.color-selector.green::before { background-color: rgb(144, 238, 144); }
.color-selector.brown::before { background-color: rgb(165, 42, 42); }
.color-selector.grey::before { background-color: rgb(211, 211, 211); }
.color-selector.amber::before { background-color: rgb(255, 191, 0); }

/* Style for gender selection icons */
.gender-selection .icon-container {
    cursor: pointer;
    display: inline-block;
    margin: 0 20px;
    color: #aaa;
}

/* Style for active gender icon */
.gender-selection .icon-container.active i {
    color: #d11760;
}

/* Additional styling for icons and text in gender selection */
.gender-selection i {
    text-align: center;
}

.gender-selection span {
    display: block;
    text-align: center;
}

/* Style for overall gender selection container */
.gender-selection {
    text-align: center;
}

/* Mobile-specific styles */
@media (max-width: 600px) {

    html, body {
        height: 100%; /* Ensure the body takes the full height of the viewport */
        background: url(https://desktop-cms.thecasuallounge.com/cms/getFile?pName=bgMobile_shutterstock_499266709.jpg) no-repeat center top / cover !important;
        background-attachment: fixed; /* This can help in certain mobile browsers */  
    }
	
	.wrap {
        max-width: none;
        margin: 10px;
        padding: 10px;
        border-radius: 0;
    }
	
    h1 {
        font-size: 20px;
    }
	
	.logo-box,
    #tclreg_form {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    label,
    .slider-container label,
    .gender-selection span {
        font-size: 18px; /* Smaller font size for labels */
    }

    .slider-container output,
    .slider-container span,
    #height-output,
    #age-output {
        font-size: 28px; /* Smaller font size for slider output */
    }

    .gender-selection i {
        font-size: 40px; /* Smaller font size for gender icons */
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    select,
    input[type="number"] {
        font-size: 20px; 
	    border-radius: 0px;
  		padding: 8px 10px;
    	border: 1px solid #ccc;
		width: 100%;
    }

    .color-selector {
        width: 30px; /* Smaller width for color selectors */
        height: 20px; /* Smaller height for color selectors */
		margin-top: 15px;
	    margin-bottom: 10px;
    }

    .color-selector::before {
        width: 15px; /* Smaller iris */
        height: 20px; /* Smaller iris */
    }

    .color-selector::after {
        width: 6px; /* Smaller pupil */
        height: 6px; /* Smaller pupil */
    }
	
	.height-output-container {
        font-size: 26px; /* Reduced font size for mobile */
	}
	
	.input-icon-container input {
        font-size: 22px; /* Smaller font size for mobile */
    }
    .input-icon-container i {
        font-size: 20px; /* Smaller icon size for mobile */
    }	
	
	#tclreg_form .tclreg-submit-button {
		font-size: 18px;
		font-weight: bold;
	}
}

/* Pulse Animation Keyframes */
@keyframes pulse {
    0%, 100% {
        transform: scale(1) translateY(-50%);
        opacity: 1;
    }
    50% {
        transform: scale(1.1) translateY(-50%);
        opacity: 0.7;
    }
}

.location-icon-pulse {
    position: absolute;
    right: 10px; /* Adjust if necessary to align with the design */
    top: 50%;
    transform: translateY(-50%);
    animation: pulse 2s infinite;
    cursor: pointer;
    font-size: 26px; /* Match the size with other icons if necessary */
    color: #d11760; /* Adjust the color as needed */
}


/* file: tcl-api-style.css */

/* file: tcl-api-style.css */

.tcl-api-settings .form-group {
    margin-bottom: 20px;
}

.tcl-api-settings label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.tcl-api-settings input[type="text"],
.tcl-api-settings .regular-text {
    width: 100%;
    max-width: 500px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.tcl-api-settings input[type="checkbox"] {
    margin-right: 10px;
}

.tcl-api-settings .button-primary {
    background-color: #0073aa;
    border-color: #0073aa;
    color: #fff;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
}

.tcl-api-settings .button-primary:hover {
    background-color: #006799;
}