/* Dashboard */

.wpv_dashboard_placeholder {
	display: flex;
	flex-wrap: wrap;
}

.wpv_dashboard_outer {
	position: relative;
	width: 350px;
	height: 100px;
	border: 1px solid #7A7A7A; 
	padding: 15px;
	display: flex;
	align-items: top;
	border-radius: 5px;
	margin-right: 20px;
	margin-bottom: 20px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19);
}

.wpv_dashboard_outer:hover {
	border: 2px solid #7A7A7A; 
	background-color: #EDEDED;
}

.wpv_dashboard_title {
	width:90%;
	margin-left: 5px;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
}

.wpv_dashboard_title a:hover {
	font-weight: bold !important;
	font-size: 17px;
}

.wpv_dashboard_title a {
	color: #7A7A7A !important;
}

.wpv_dashboard_msg {
	width:90%;
	margin-top: 5px;
	/* margin-left: 29px;
	text-indent: -21px; */
    line-height: 1.3;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
}

/* Carousel */

.wpv_carousel {
    position: relative;
    overflow: hidden;
    height: 250px;      /* adjust as needed */
    width: 100%;
	font-size: 16px;
}

.wpv_item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    opacity: 0;
    transform: translateX(100%);

    animation-duration: 8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.wpv_item1 {
    animation-name: wpv_slide1;
}

.wpv_item2 {
    animation-name: wpv_slide2;
}

@keyframes wpv_slide1 {

    0%, 45% {
        opacity: 1;
        transform: translateX(0);
    }

    50% {
        opacity: 0;
        transform: translateX(-100%);
    }

    50.01% {
        opacity: 0;
        transform: translateX(100%);
    }

    100% {
        opacity: 0;
        transform: translateX(100%);
    }
}

@keyframes wpv_slide2 {

    0%, 50% {
        opacity: 0;
        transform: translateX(100%);
    }

    55%, 95% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-100%);
    }
}

/* Dots */

.wpv_dots {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.wpv_dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 4px;

    border-radius: 50%;
    background: #ccc;

    animation-duration: 8s;
    animation-iteration-count: infinite;
}

.wpv_dot1 {
    animation-name: wpv_dot1;
}

.wpv_dot2 {
    animation-name: wpv_dot2;
}

@keyframes wpv_dot1 {

    0%, 45% {
        background: #333;
    }

    50%, 100% {
        background: #ccc;
    }
}

@keyframes wpv_dot2 {

    0%, 50% {
        background: #ccc;
    }

    55%, 100% {
        background: #333;
    }
}

/* User Profile */

body {
	font-family: 'Roboto', sans-serif;
	color: #7A7A7A;
	font-size: 14px;
}

/* User Profile Tabs */

.wpv-tabs {
	margin-bottom: 20px; 
/*	border-bottom: 1px solid #ccc; */
	margin-left: -2px;
}

.wpv-tab-button {
	background-color: #f0f0f0;
	border: 1px solid #ccc;
	color: #7A7A7A;
	cursor: pointer; 
	padding: 10px;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	border-radius: 3px;	
	margin-right: 2px;
}

.wpv-tab-button:hover, .wpv-tab-button:focus {
	background-color: #ddd;
	border-bottom: 1px solid #CCE3EA;
}

.wpv-tab-button.active {
	background-color: #ccc;
}

.wpv-button:hover {
	background-color: #095994;
}

.wpv-button-secondary {
	background-color: white;
	color: #3683C9;	
	border: 1px solid #3683C9;
}

.wpv-button-secondary:hover {
	background-color: #095994;
}

.wpv-button-inverse {
	color: #3683C9;
	background-color: inherit; /* #CCE3EA; */
}

.wpv-button-inverse:hover {
	color: #095994;
	background-color: inherit; /* #CCE3EA; */
}

.wpv-form-group {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

/* User Profile */

.wpv-form-group label {
	width: 260px;
	font-weight: bold;
	font-size: 14px;
	color: #7A7A7A;
}

.wpv-static {
	width: 400px;
	font-size: 14px;
	margin-left: 0px;
	margin-top: 2px;
	color: #7A7A7A;
}

.wpv-kontobezeichnung {
	width: 450px;
	font-size: 14px;
    line-height: 1.2; 
	margin-left: 10px; 
	color: #7A7A7A;
	margin-top: 9px;
	margin-bottom: 9px;
}

.wpv-form-group input[type="text"],
.wpv-form-group input[type="number"],
.wpv-form-group input[type="email"],
.wpv-form-group input[type="tel"],
.wpv-form-group input[type="password"],
.wpv-form-group select {
	font-size: 14px;
	padding: 4px;
	width: 250px;
	margin-left: 0px;
	font-family: 'Roboto', sans-serif;
	border-radius: 10px; 
	border: 1px solid #ccc;
	background-color: #fff; 	
}


.wpv-form-group input[type=text]:focus, 
.wpv-form-group input[type=date]:focus, 
.wpv-form-group input[type=email]:focus, 
.wpv-form-group input[type=tel]:focus, 
.wpv-form-group input[type=password]:focus, 
.wpv-form-group input[type=number]:focus {
	border: 1px solid #3A3A3A;
} 

/* ------------------------ */

/* Hide default radio */
.wpv-form-group input[type="radio"] {
    appearance: none; 
    -webkit-appearance: none;
    -moz-appearance: none;
    
    width: 18px;
    height: 18px;
    border: 1px solid #ccc;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    margin-right: 10px;
}

/* Inner dot when selected */
.wpv-form-group input[type="radio"]:checked::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: #3683C9;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Hover state */
.wpv-form-group input[type="radio"]:hover {
    border-color: #999;
}

/* Focus state (accessibility) */
.wpv-form-group input[type="radio"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
}

.wpv-form-group .radio-label {
	font-weight: normal;
	width: auto;
	margin-right: 20px;
	font-size: 14px;
	color: #7A7A7A;
    /* cursor: pointer; */
}

/* ------------------------ */

.wpv-form-group input[type="submit"] {
	margin-top: 20px;
}

.wpv-form-group input[type="submit"]:hover {
	background-color: #095994;
}

.wpv-input-container {
/*  	border: 1px solid #000000;  only for testing purpose */
	display: flex;
	flex-direction: row;
	align-items: center;
}

.wpv-help-icon {
    font-size: 12px;
    margin-left: 10px;
    cursor: pointer;
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background-color: #e0e0e0;
    border-radius: 50%;
    color: #7A7A7A;
    position: relative; /* anchor for absolute positioning */
    display: inline-block; /* ensure proper positioning */
}

.wpv-help-icon:hover::after {
    content: attr(data-title);
    position: absolute;
    top: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #EDEDED;
    color: #7A7A7A;
    padding: 5px 8px;
    font-size: 12px;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    z-index: 9999;

    display: block;           /* ✅ block-level so width applies */
    width: max-content;       /* ✅ allow width to grow naturally */
    max-width: 250px;         /* ✅ limit max width */
    white-space: normal;      /* ✅ allow wrapping */
    word-break: break-word;   /* ✅ break long words if needed */
    box-sizing: border-box;   /* ✅ include padding in width */
}

/* User notifications */

.wpv-userinfobox {
    display: flex; /* Align icon and text horizontally */
    align-items: center; /* Vertically center icon and text */
    font-weight: bold;
    text-align: left;
    margin-bottom: 15px;
    padding: 5px 10px; /* Add some horizontal padding */
    border-radius: 5px;
    width: 100%;
    gap: 8px; /* Space between icon and text */

    /* Animation setup */
    transition: opacity 0.25s ease, transform 0.25s ease;
    transform-origin: right center;   /* ← shrinks toward the right */
    overflow: hidden;
}

.wpv-userinfobox .dashicons {
    font-size: 25px; /* Adjust icon size */
    flex-shrink: 0; /* Prevent icon from shrinking */
    margin-bottom: 5px;
}

/* Make the text take the available space */
.wpv-userinfobox-text {
    flex: 1;
}

/* Dismiss icon styling */
.wpv-userinfobox-dismiss {
	margin-left: auto;
	margin-top: 5px;
    cursor: pointer;
    color: #7A7A7A;
    
    /* Force the smaller size */
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
    line-height: 14px !important;
    
    flex-shrink: 0;
    align-self: start;   /* keeps it vertically centered in the flex row */
}

.wpv-userinfobox-dismiss:hover {
    color: #54595F;             /* optional hover effect matching the border */
}

/* State when the box is being dismissed */
.wpv-userinfobox.is-dismissing {
	opacity: 0;
    transform: scaleX(0);             /* shrinks horizontally to the right */
}

.wpv-error {
    display: flex; /* Align icon and text horizontally */
    align-items: center; /* Vertically center icon and text */
	background-color: #ffd4d4;
	color: #7A7A7A;
	font-weight: bold;
	text-align: left;
	margin-bottom: 15px;
    padding: 5px 10px; /* Add some horizontal padding */
    border: 1px solid red;
	border-radius: 5px;
	width: 100%;
    gap: 8px; /* Space between icon and text */
}

.wpv-error .dashicons {
    font-size: 25px; /* Adjust icon size */
    flex-shrink: 0; /* Prevent icon from shrinking */
    margin-bottom: 5px;
    color: red;
}

.wpv-success {
    display: flex; /* Align icon and text horizontally */
    align-items: center; /* Vertically center icon and text */
	background-color: #d2fbd6;
	color: #7A7A7A;
	font-weight: bold;
	text-align: left;
	margin-bottom: 15px;
    padding: 5px 10px; /* Add some horizontal padding */
    border: 1px solid #61CE70;
	border-radius: 5px;
	width: 100%;
    gap: 8px; /* Space between icon and text */
}

.wpv-success .dashicons {
    font-size: 25px; /* Adjust icon size */
    flex-shrink: 0; /* Prevent icon from shrinking */
    margin-bottom: 5px;
	color: #61CE70;    
}

.wpv-statusfield {
	background-color: #CCE3EA;
	font-size: 12px;
	color: #7A7A7A;
    padding: 0px 5px; /* Add some horizontal padding */
	text-align: left;
	border-radius: 5px;
	border: 1px solid #007396;
}

.wpv-blink {
    animation-name: animation_blink;
    animation-timing-function: ease-in;
    animation-duration: 2s; 
    animation-iteration-count: infinite;            
}

@keyframes animation_blink {
    0% { opacity: 1; }
    50% { opacity: 0.1; }
    100% { opacity: 1; }    
}

/* Flex Query status/toast */

.wpv-flex-status-anchor {
    position: fixed;
    left: 50%;
    top: 110px;
    transform: translateX(-50%);
    z-index: 99999;
    width: min(940px, calc(100vw - 24px));
}

.wpv-flex-status-panel {
    background-color: #ffffff;
    color: #7A7A7A;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.2);
    font-family: 'Roboto', sans-serif;
}

.wpv-flex-status-success {
    border-top: 5px solid #61CE70;
}

.wpv-flex-status-error {
    border-top: 5px solid red;
}

.wpv-flex-status-header {
    padding: 12px 16px;
    background-color: #EDEDED;
    border-bottom: 1px solid #ccc;
}

.wpv-flex-status-log {
    margin: 0;
    padding: 12px 16px;
    max-height: 42vh;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
    color: #3A3A3A;
    background: #fff;
}

.wpv-flex-status-actions {
    padding: 10px 16px;
    border-top: 1px solid #ccc;
    text-align: right;
    background: #fff;
}

#wpv-flex-js-status.wpv-flex-toast {
    position: fixed;
    left: 50%;
    top: 110px;
    transform: translateX(-50%);
    z-index: 99998;
    width: min(780px, calc(100vw - 24px));
    padding: 10px 14px;
    border-radius: 8px;
    color: #fff;
    font: 13px/1.4 'Roboto', sans-serif;
    white-space: pre-wrap;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .2);
}

@media screen and (max-width: 767px) {
    .wpv-flex-status-anchor {
        top: 72px;
        width: calc(100vw - 14px);
    }

    #wpv-flex-js-status.wpv-flex-toast {
        top: 72px;
        width: calc(100vw - 14px);
    }
}

#wpv-flex-js-status.wpv-flex-toast.wpv-flex-toast-success {
    background-color: #7A7A7A;
}

#wpv-flex-js-status.wpv-flex-toast.wpv-flex-toast-error {
    background-color: red;
}

.wpv-loading {
    display: inline-block;
    margin-left: 10px;
    font-size: 25px;
    line-height: 1; 
    animation: wpv-spin 1s linear infinite;
}
@keyframes wpv-spin {
    to { transform: rotate(360deg); }
}

/* Custom drop down style */

.wpv-custom-select {
	position: relative;
	margin-left: 0px;
}

.wpv-custom-select select {
	display: none; /* Hide native select */
}

.wpv-select-display {
	/* padding: 4px; ICON */
	padding: 3px 3px 3px 8px;
	width: 100%;
	font-family: 'Roboto', sans-serif;
	border-radius: 10px;
	border: 1px solid #ccc;
	background-color: #fff; 
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px; /* Space between icon and text */
}

.wpv-select-display::after {
	content: '▼';
	font-size: 10px;
	margin-left: auto; /* ICON */
	margin-right: 5px;
}

.wpv-select-display:focus {
	border: 1px solid #3A3A3A;
	outline: none;
}

.wpv-select-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.wpv-options-list {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	max-height: 250px;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid #ccc;
	border-radius: 8px;
	background-color: #fff;
	z-index: 1000;
	display: none;
}

.wpv-options-list[aria-hidden="false"] {
	display: block;
}

.wpv-options-list li {
	font-size: 14px;
	padding: 3px 8px;
	font-family: 'Roboto', sans-serif;
	cursor: pointer;

	align-items: center;
	gap: 8px; /* Space between icon and text */	
}

.wpv-option-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.wpv-options-list li:hover,
.wpv-options-list li[aria-selected="true"] {
	background-color: #ccc;
}

.collapsible-section {
  /* border: 1px solid #ccc; */
  margin-bottom: 10px;
  /* border-radius: 6px; */
}

.section-header {
  /* background: #f5f5f5; */
  padding: 10px 0px;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-weight: bold;
  user-select: none;
}

.triangle {
  margin-right: 10px;
  transition: transform 0.3s ease;
}

.section-content {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
  padding: 0 15px;
}

/* Expanded state */
.collapsible-section.expanded .triangle {
  transform: rotate(90deg);
}

.collapsible-section.expanded .section-content {
  padding: 10px 25px;
}

/* Loading Spinner */

#wpv-loading-spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 5px;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#wpv-loading-spinner-content {
    display: none; /* Hidden until loaded */
    transition: opacity 0.3s ease;
}

#wpv-loading-spinner-content.loaded {
    display: block; /* Show content when loaded */
    opacity: 1;
}

/* Mobile */

@media screen and (max-width: 767px) {
    
    .wpv-form-group {
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .wpv-form-group label {
        width: 100%;
        font-weight: bold;
        font-size: 16px;
        color: #7A7A7A;
        margin-bottom: 8px;
    }

    .wpv-static {
        width: 100%;
        font-size: 16px;
        margin-left: 0;
        margin-top: 4px;
        color: #7A7A7A;
    }

    .wpv-kontobezeichnung {
        width: 100%;
        font-size: 16px;
        margin-left: 0;
        color: #7A7A7A;
        margin-top: 6px;
        margin-bottom: 6px;
    }

    .wpv-form-group input[type="text"],
    .wpv-form-group input[type="number"],
	.wpv-form-group input[type="email"],
	.wpv-form-group input[type="tel"],
    .wpv-form-group input[type="password"],
    .wpv-form-group select {
        font-size: 16px;
        padding: 8px;
        width: 100%;
        font-family: 'Roboto', sans-serif;
        border-radius: 8px;
        border: 1px solid #ccc;
        box-sizing: border-box;
    }

    .wpv-form-group input[type="text"]:focus,
    .wpv-form-group input[type="number"]:focus,
	.wpv-form-group input[type="email"]:focus,
	.wpv-form-group input[type="tel"]:focus,
    .wpv-form-group input[type="password"]:focus {
        border: 1px solid #7A7A7A;
        outline: none;
    }
    
    .wpv-form-group input[type="radio"] {
        width: 20px;
        height: 20px;
    }    

    .wpv-input-container {
/* 		border: 1px solid #000000; only for testing purpose */
        display: flex;
        align-items: center;
        width: 100%;
    }

    .wpv-form-group input[type="text"],
    .wpv-form-group input[type="number"],
	.wpv-form-group input[type="email"],
	.wpv-form-group input[type="tel"],
    .wpv-form-group input[type="password"],
    .wpv-form-group select {
        flex: 1;
    }

    .wpv-help-icon {
        font-size: 18px;
        cursor: pointer;
        display: inline-block;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        background-color: #e0e0e0;
        border-radius: 50%;
        color: #7A7A7A;
        flex-shrink: 0;
    }

    .wpv-help-icon:hover::after {
        content: attr(title);
        background-color: #e0e0e0;
        color: #333;
        padding: 8px;
        font-size: 14px;
        border-radius: 5px;
        position: absolute;
        z-index: 1000;
        width: 200px;
        left: 0;
        transform: translateY(30px);
    }
    
    .wpv-custom-select {
        position: relative;
        margin-left: 0;
        width: 100% !important;
        box-sizing: border-box;
    }

    .wpv-custom-select select {
        display: none; /* Keep native select hidden */
    }

    .wpv-select-display {
        padding: 8px;
        width: 100%;
        font-family: 'Roboto', sans-serif;
        font-size: 16px !important;
        border-radius: 8px;
        border: 1px solid #ccc;
        background-color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
    }

    .wpv-select-display::after {
        content: '▼';
        font-size: 12px !important;
        margin-right: 8px;
    }

    .wpv-select-display:focus {
        border: 1px solid #7A7A7A;
        outline: none;
    }

    .wpv-options-list {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        max-height: 300px; /* Slightly larger for easier scrolling */
        overflow-y: auto;
        margin: 0;
        padding: 0;
        list-style: none;
        border: 1px solid #ccc;
        border-radius: 8px;
        background-color: #fff;
        z-index: 1000;
        display: none;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    }

    .wpv-options-list[aria-hidden="false"] {
        display: block;
    }

    .wpv-options-list li {
        font-size: 16px !important;
        padding: 10px 12px !important; /* Larger padding for touch targets */
        font-family: 'Roboto', sans-serif;
        cursor: pointer;
    }

    .wpv-options-list li:hover,
    .wpv-options-list li[aria-selected="true"] {
        background-color: #e0e0e0; /* Slightly lighter hover color for better contrast */
    }

}

@media print {
    .wpv-button,
    .wpv-button-secondary {
        display: none !important;
    }
    
    h1,
    p,
    ul,
    li,
    .wpv-form-group,
    .wpv-form-group label {
        color: #000 !important;
    }
    
    .section-header,
    .wpv-userinfobox {
        font-size: 12px !important;
        line-height: 1.3 !important;
        color: #000 !important;
    }
}