/*
 * Copy this file into your theme to customize it.
 * https://www.phpboost.com/wiki/structure-d-un-theme#paragraph-le-repertoire-theme
 *
 * Contains elements some for jQuery plugins
 *     - Multitabs
 *        - Accordion
 *        - Modal
 *        - Tabs
 *    - Tooltip
 *    - Wizard
*/

/* --- Multitabs common */
[data-accordion],
[data-modal],
[data-tabs] { cursor: pointer; }

.content-panel { padding: 0.618em; }

/* --- Multitabs Accordion -------------------------------------------------- */
.accordion-container .accordion-controls { text-align: right; }

.accordion-controls span {
    display: inline-block;
    padding: 0.618em;
}

.accordion-container > .accordion-nav > ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.accordion-container > .accordion-nav > ul > li > a {
    position: relative;
    display: block;
    border-width: 1px 1px 0;
    border-style: solid;
    border-color: transparent;
    padding: 0.618em;
    transition: border-width 0.3s ease 0.3s;
}

.accordion-container > .accordion-nav > ul > li:last-child > a,
.accordion-container > .accordion-nav > ul > li > a.active-tab {
    border-width: 1px;
    transition: border-width 0s linear;
}

.accordion-container > .accordion-nav > ul > li > a:after {
    position: absolute;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    top: 50%;
    transform: translateY(-50%);
    right: 0.618em;
    content: '\f078'
}

.accordion-container > .accordion-nav > ul > li > a.active-tab:after { content: '\f077'; }

.accordion-animation  {
    height: 0;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s cubic-bezier(0.5,0.5,0.5,0.5),
        visibility 0.3s cubic-bezier(0.5,0.5,0.5,0.5),
        margin 0.3s ease 0.3s,
        height 0.3s ease 0.3s;
}

.accordion-animation.active-panel {
    opacity: 1;
    visibility: visible;
    transition:
        opacity 0.3s cubic-bezier(0.5,0.5,0.5,0.5) 0.3s,
        height 0.3s ease;
}

.accordion .content-panel {
    border-width: 0 1px;
    border-style: solid;
    border-color: transparent;
}

li:last-child .accordion .content-panel { border-width: 0 1px 1px; }

/* --- Multitabs Modals ----------------------------------------------------- */
.modal {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    height:100vh;
    width:100vw;
    overflow-y: auto;
}

.modal.active-panel { z-index: 10001; }

.modal-animation {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.5, 0.5, 0.5, 0.5) 0.3s;
}

.modal-animation.active-panel {
    opacity: 1;
    visibility: visible;
    transition: all 0.3s cubic-bezier(0.5, 0.5, 0.5, 0.5);
}

.modal .content-panel {
    position: absolute;
    padding: 0.618em;
    top: 0;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.3s cubic-bezier(0.5, 0.5, 0.5, 0.5);
}

.modal.active-panel .content-panel {
    top: 2.618em;
    transition: all 0.3s cubic-bezier(0.5, 0.5, 0.5, 0.5) 0.3s;
}

.modal .content-panel .button { padding: 0.228em 0.618em; }

.close-modal {
    position: fixed;
    top: 0;
    right: 0;
    width:100%;
    height:100vw;
    cursor: pointer;
}

.hide-modal { padding: 0 0 0.228em 0; }

@media (min-width:769px) {
    .modal .content-panel {
        padding: 1.618em;
        width: 80%;
        max-height: calc(100vh - 3.236em);
    }

    .modal.modal-auto .content-panel { width: auto; }

    .modal.active-panel .content-panel {
        top: 50%;
        transform: translate(-50%, -50%);
        overflow: auto;
    }
}

/* --- Multitabs Tabs ------------------------------------------------------- */
.tabs-container > .tabs-nav { margin-bottom: 1.618em; }

.tabs-container > .tabs-nav > ul {
    margin: 0;
    padding: 0;
}

.tabs-container > .tabs-nav > ul > li { display: inline-block; }

.tabs-container > .tabs-nav > ul > li a {
    display: block;
    padding: .618em;
    outline: 0;
    text-decoration: none;
}

.tabs-animation,
.tabs-animation:not(.active-panel) * {
    height: 0;
    opacity: 0;
    visibility: hidden;
}

.tabs-animation.active-panel {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s cubic-bezier(0.5, 0.5, 0.5, 0.5) 0.3s, height 0.3s ease;
}

/* --- tooltip -------------------------------------------------------------- */
.tooltip { display: none; }

@media (min-width: 769px) {
    .tooltip {
        display: block;
        border-width: 1px;
        border-style: solid;
        border-color: transparent;
        position:absolute;
        padding: 0.309em 0.618em;
        font-size: 0.809em;
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        max-width: 320px;
        z-index: 10002;
        transition: opacity 0.3s ease;
    }

    .tooltip.position-b { margin-top: 0.809em; }

    .tooltip.display-none { display: none; }
}

/* --- Wizard --------------------------------------------------------------- */
.wizard-container {
	display: flex;
	flex-direction: column;
	transition-duration: 0.4s;
}

.wizard-container .wizard-header { padding: 10px; }

.wizard-container .wizard-header ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	width: 100%;
	display: flex;
	flex-direction: row;
	overflow: hidden;
	position: relative;
}

.wizard-container .wizard-header li {
	flex: 1;
	text-align: center;
	position: relative;
	transition-duration: 0.4s;
}

.wizard-container .wizard-header a {
	display: block;
	padding: 0.618em 0;
    cursor: default;
}

.wizard-container .wizard-header a.completed-step { cursor: pointer; }

.wizard-container .wizard-header a:hover { text-decoration: none; }

.wizard-container .wizard-header li span {
	position: relative;
	z-index: 2;
}

.wizard-container .wizard-header .progress {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 0px;
	transition-duration: 0.4s;
	transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.wizard-container .wizard-step {
	display: none;
	animation-duration: 0.4s;
}

.wizard-container .wizard-step.active-step { display: block; }

.wizard-container .wizard-navigator {
	width: 100%;
	box-sizing: border-box;
	padding: 10px;
	display: block;
	flex: 0;
}

@media (min-width: 768px) {
	.wizard-container .wizard-header ul { flex-direction: row; }
}

/* --- Cssmenu select (select converted to list) --- */
.cssmenu-select,
.cssmenu-select li,
.cssmenu-select li .cssmenu-title {
	width: 100%;
	text-align: left;
}

.cssmenu-select ul li.has-sub > .cssmenu-title:after,
.cssmenu-select ul li.has-sub:hover > .cssmenu-title:after {
	content: '\f078';
	transition: 0.2s;
}

.cssmenu-select.cssmenu-open ul li.has-sub > .cssmenu-title:after {
	content: '\f077';
	transition: 0.2s;
}

.cssmenu-select ul li.has-sub:hover ul { left: -9999px; }

.cssmenu-select.cssmenu-open ul li.has-sub ul {
    left: 0;
    top: calc(100% - 0.1618rem)
}

.cssmenu-select li .cssmenu-title {
	cursor: pointer;
	font-size: 1.4rem;
}

.cssmenu-select .has-sub { margin-bottom: 0.1618em; }

.cssmenu-select .has-sub > .cssmenu-title {
	padding: 0.618em 1.618em 0.456em 0.618em !important;
	border-width: 1px;
	border-style: solid;
	border-color: transparent;
    margin-bottom: 0.1618rem;
}
