.fhmm-consent-mode__consent-modal button { all: unset; }

#fhmm-consent-mode__main-modal,
#fhmm-consent-mode__second-modal { font-family: var(--fhmm-consent-mode-font-family); }

.fhmm-consent-mode__modal-menu-container { display: flex; justify-content: start; align-items: center; gap: 10px; margin-bottom: 15px; }
.fhmm-consent-mode__modal-menu-container button { background: var(--fhmm-consent-mode-gray-color); color: var(--fhmm-consent-mode-text-color-on-gray-color); padding: 5px 10px; border-radius: 10px; font-size: 12px; cursor: pointer; transition: var(--fhmm-consent-mode-transition); }
.fhmm-consent-mode__modal-menu-container button:active { transform: scale(.9); }
.fhmm-consent-mode__modal-menu-container button.active { background: var(--fhmm-consent-mode-secondary-color); color: var(--fhmm-consent-mode-text-color-on-secondary-color); }

#fhmm-consent-mode__main-modal .fhmm-consent-mode__modal-menu-container { margin-top: 25px; }
#fhmm-consent-mode__main-modal .fhmm-consent-mode__modal-menu-container button { font-size: 16px; }


/*****************
*
*   Boxes-with-options
*
*****************/

.fhmm-consent-mode__boxes-with-options { display: flex; flex-direction: column; gap: 5px; overflow-y: auto; }

.fhmm-consent-mode__boxes-with-options .cookie-item-option { background: var(--fhmm-consent-mode-gray-color); color: var(--fhmm-consent-mode-text-color-on-gray-color); padding: 5px; }
.fhmm-consent-mode__boxes-with-options .cookie-item-option .cookie-toggle { position: relative; cursor: pointer; }
.fhmm-consent-mode__boxes-with-options .cookie-item-option .cookie-toggle .chevron-ico { 
    content: ''; position: absolute; right: 10px; top: 0;
    height: 100%;
    width: 24px;
    transition: var(--fhmm-consent-mode-transition);
    display: flex; justify-content: center; align-items: center;
    pointer-events: none;
}
.fhmm-consent-mode__boxes-with-options .cookie-item-option .cookie-toggle .chevron-ico svg { width: 100%; stroke: var(--fhmm-consent-mode-text-color-on-gray-color); }

.fhmm-consent-mode__boxes-with-options .cookie-item-option:has(.cookie-content.active) .cookie-toggle .chevron-ico { transform: rotate(-180deg); }

.fhmm-consent-mode__boxes-with-options .cookie-item-option .cookie-toggle label { cursor: pointer; }
.fhmm-consent-mode__boxes-with-options .cookie-item-option .cookie-toggle label:has(input[type=checkbox]:disabled) { cursor: not-allowed; }

.fhmm-consent-mode__boxes-with-options .cookie-item-option .cookie-toggle label .checkbox-container { vertical-align: middle; }
.fhmm-consent-mode__boxes-with-options .cookie-item-option .cookie-toggle label .checkbox-label-content { font-size: 12px; display: inline-block; font-weight: 500; }

.fhmm-consent-mode__boxes-with-options .cookie-item-option .cookie-content { 
    font-size: 9px; text-align: justify; color: var(--fhmm-consent-mode-text-color-on-gray-color); margin-top: 10px; margin-bottom: 5px; display: none; 
    padding: 0 10px;
}



/*****************
*
*   Table-cookies
*
*****************/


.table-cookies { display: flex; flex-direction: column; gap: 5px; overflow-y: auto; }

.table-cookies .cookie-type-option { background: var(--fhmm-consent-mode-gray-color); color: var(--fhmm-consent-mode-text-color-on-gray-color); padding: 5px; }
.table-cookies .cookie-type-option .cookie-type-option-toggle { position: relative; }
.table-cookies .cookie-type-option span { display: block; position: relative; font-size: 12px; font-weight: 500; cursor: pointer; }
.table-cookies .cookie-type-option .chevron-ico {
    content: ''; position: absolute; right: 10px; top: 0; 
    height: 100%;
    width: 24px;
    transition: var(--fhmm-consent-mode-transition);
    display: flex; justify-content: center; align-items: center;
    pointer-events: none;
}
.table-cookies .cookie-type-option .chevron-ico svg { width: 100%; stroke: var(--fhmm-consent-mode-text-color-on-gray-color); }

.table-cookies .cookie-type-option:has(.table-container.active) .chevron-ico { transform: rotate(-180deg); }

.table-cookies .cookie-type-option { display: none; } /* if there is no one cookie in type, then not show it */
.table-cookies .cookie-type-option .table-container { display: none; }
.table-cookies .cookie-type-option table { width: 100%; margin-top: 10px; }

.table-cookies .cookie-type-option table thead td { font-size: 12px; font-weight: 500; text-align: center; }
.table-cookies .cookie-type-option table thead td:first-child { text-align: left; }

.table-cookies .cookie-type-option table tbody td { font-size: 10px; font-weight: 300; text-align: center; padding: 2px 10px; border-bottom: 1px solid var(--fhmm-consent-mode-gray-color-10-darker); }
.table-cookies .cookie-type-option table tbody td:first-child { text-align: left; padding-left: 0; }
.table-cookies .cookie-type-option table tbody tr:last-child td { border-bottom: 0; }


/*****************
*
*   Main modal
*   TODO...
*
*****************/


#fhmm-consent-mode__main-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; transition: var(--fhmm-consent-mode-transition); z-index: 9999999; display: flex; justify-content: center; align-items: center; }
#fhmm-consent-mode__main-modal:not(.active) { pointer-events: none; opacity: 0; }
/* body:has(#fhmm-consent-mode__main-modal.active) { filter: blur(4px); } */

#main-cookie-consent-modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); z-index: 9999998; backdrop-filter: blur(3px); }
#main-cookie-consent-modal-content { max-width: 800px; width: 100%; height: auto; background: var(--fhmm-consent-mode-white-color); padding: 0; z-index: 9999999; border-radius: 10px; margin: 0 15px; box-shadow: var(--fhmm-consent-mode-main-modal-box-shadow); }



#fhmm-consent-mode__main-modal__title-container { display: flex; gap: 10px; justify-content: start; align-items: center; padding: 20px; border-bottom: 1px solid var(--fhmm-consent-mode-gray-color); }
#fhmm-consent-mode__main-modal__title-container svg { width: 30px; height: 30px; }
#fhmm-consent-mode__main-modal__title-container svg g { fill: var(--fhmm-consent-mode-black-color); }
#fhmm-consent-mode__main-modal__title-container h2 { margin: 0; color: var(--fhmm-consent-mode-black-color); }



#main-cookie-consent-modal-content-body { max-height: 350px; overflow-y: auto; padding: 0 20px; }

#main-cookie-consent-modal-content-body p { font-size: 14px; margin: 10px 0; color: var(--fhmm-consent-mode-black-color); }
#main-cookie-consent-modal-content-body h3 { margin-bottom: 0; color: var(--fhmm-consent-mode-black-color); }

#main-cookie-consent-modal-content-body-details { display: none; }


#fhmm-consent-mode__main-modal .cookie-consent-buttons { display: flex; justify-content: end; align-items: center; width: 100%; padding: 15px 20px; gap: 10px; border-top: 1px solid var(--fhmm-consent-mode-gray-color); }
#fhmm-consent-mode__main-modal .cookie-consent-buttons button { cursor: pointer; border-radius: 5px; transition: var(--fhmm-consent-mode-transition); }


#fhmm-consent-mode__main-modal__show-details-btn,
#fhmm-consent-mode__main-modal__save-choices-btn { 
    width: 55px; height: 55px;
    border: 1px solid var(--fhmm-consent-mode-primary-color);
    background: var(--fhmm-consent-mode-white-color);
    transition: var(--fhmm-consent-mode-transition);
    display: flex; justify-content: center; align-items: center;
}
#fhmm-consent-mode__main-modal__show-details-btn svg,
#fhmm-consent-mode__main-modal__save-choices-btn svg { width: 27px; height: 27px; }

#fhmm-consent-mode__main-modal__show-details-btn svg g path,
#fhmm-consent-mode__main-modal__save-choices-btn svg g path { fill: var(--fhmm-consent-mode-black-color); }

#fhmm-consent-mode__main-modal__show-details-btn:hover,
#fhmm-consent-mode__main-modal__save-choices-btn:hover { border-color: var(--fhmm-consent-mode-secondary-color); }


#fhmm-consent-mode__main-modal__show-details-btn:active,
#fhmm-consent-mode__main-modal__save-choices-btn:active { transform: scale(.9); }



#fhmm-consent-mode__main-modal__main-accept-btn,
#fhmm-consent-mode__main-modal__accept-all-btn { background: var(--fhmm-consent-mode-primary-color); color: var(--fhmm-consent-mode-text-color-on-primary-color); padding: 15px 35px; font-weight: 500; font-size: 18px; }
#fhmm-consent-mode__main-modal__main-accept-btn:hover,
#fhmm-consent-mode__main-modal__accept-all-btn:hover { background: var(--fhmm-consent-mode-secondary-color); color: var(--fhmm-consent-mode-text-color-on-secondary-color); }

#fhmm-consent-mode__main-modal__main-accept-btn:active,
#fhmm-consent-mode__main-modal__accept-all-btn:active { transform: scale(.9); }

#fhmm-consent-mode__main-modal__accept-all-btn { display: none; }

#fhmm-consent-mode__main-modal .fhmm-consent-mode__boxes-with-options { margin-bottom: 15px; }
#fhmm-consent-mode__main-modal .fhmm-consent-mode__boxes-with-options .cookie-item-option { background: var(--fhmm-consent-mode-white-color); color: var(--fhmm-consent-mode-black-color); margin-bottom: 5px; border: 1px solid var(--fhmm-consent-mode-gray-color); padding: 15px; }
#fhmm-consent-mode__main-modal .fhmm-consent-mode__boxes-with-options .cookie-item-option .cookie-toggle label .checkbox-label-content { font-size: 18px; margin-left: 10px; }
#fhmm-consent-mode__main-modal .fhmm-consent-mode__boxes-with-options .cookie-item-option .cookie-content { font-size: 14px; padding: 0; margin: 15px 0 0 0; color: var(--fhmm-consent-mode-black-color); }
#fhmm-consent-mode__main-modal .fhmm-consent-mode__boxes-with-options .cookie-item-option .cookie-toggle .chevron-ico { width: 34px; }
#fhmm-consent-mode__main-modal .fhmm-consent-mode__boxes-with-options .cookie-item-option .cookie-toggle .chevron-ico svg { width: 100%; stroke: var(--fhmm-consent-mode-black-color); }


#fhmm-consent-mode__main-modal .table-cookies { margin-bottom: 15px; }
#fhmm-consent-mode__main-modal .table-cookies .cookie-type-option { background: var(--fhmm-consent-mode-white-color); color: var(--fhmm-consent-mode-black-color); margin-bottom: 5px; border: 1px solid var(--fhmm-consent-mode-gray-color); padding: 15px; }
#fhmm-consent-mode__main-modal .table-cookies .cookie-type-option span { font-size: 18px; }
#fhmm-consent-mode__main-modal .table-cookies .cookie-type-option .chevron-ico { width: 34px; }
#fhmm-consent-mode__main-modal .table-cookies .cookie-type-option .chevron-ico svg { width: 100%; stroke: var(--fhmm-consent-mode-black-color); }


/*****************
*
*   Second modal
*
*****************/

#fhmm-consent-mode__second-modal {
    position: fixed;
    bottom: 10px;
    left: 10px;
    max-width: 500px;
    width: 100%;
    background-color: var(--fhmm-consent-mode-white-color);
    padding: 20px;
    z-index: 9999;
    transition: opacity 0.3s ease-in-out;
    border-radius: 10px;
    box-shadow: var(--fhmm-consent-mode-second-modal-box-shadow);
}

#fhmm-consent-mode__second-modal:not(.active) { opacity: 0; pointer-events: none; }
#fhmm-consent-mode__second-modal.active { opacity: 1; }

@media screen and (max-width: 520px) {
    #fhmm-consent-mode__second-modal {
        width: calc(100% - 20px); /* 10px from left AND 10px from right */
        left: 0;
        right: 0;
        margin: 0 10px;
    }
}

#fhmm-consent-mode__second-modal .close-modal { position: absolute; top: 10px; right: 10px; background: var(--fhmm-consent-mode-primary-color); padding: 5px; border-radius: 5px; line-height: .7; cursor: pointer; transition: var(--fhmm-consent-mode-transition); color: var(--fhmm-consent-mode-text-color-on-primary-color); }
#fhmm-consent-mode__second-modal .close-modal::before { content: '\00d7'; font-size: 25px; }
#fhmm-consent-mode__second-modal .close-modal:hover { background: var(--fhmm-consent-mode-secondary-color); color: var(--fhmm-consent-mode-text-color-on-secondary-color); }
#fhmm-consent-mode__second-modal .close-modal:active { transform: scale(.8); }

#fhmm-consent-mode__second-modal h2 { font-size: 16px; margin-top: 0; color: var(--fhmm-consent-mode-black-color); }


#fhmm-consent-mode__second-modal__text { font-size: 9px; text-align: justify; color: var(--fhmm-consent-mode-black-color); margin-bottom: 10px; }



#fhmm-consent-mode__second-modal__modal-body { display: none; }






/* Cookie-item-option -- second modal */

#fhmm-consent-mode__second-modal .fhmm-consent-mode__boxes-with-options,
#fhmm-consent-mode__second-modal .table-cookies { max-height: 230px; }


/* Info tab */

#fhmm-consent-mode__second-modal .info-tab { display: none; padding: 10px 0; }
#fhmm-consent-mode__second-modal .info-tab p { font-size: 13px; color: var(--fhmm-consent-mode-black-color); }
#fhmm-consent-mode__second-modal .info-tab p span { background: var(--fhmm-consent-mode-gray-color); padding: 2px 5px; color: var(--fhmm-consent-mode-text-color-on-gray-color); }
#fhmm-consent-mode__second-modal__consent_acceptance__id { font-size: 11px; }




#fhmm-consent-mode__second-modal .cookie-consent-buttons { display: flex; justify-content: space-between; width: 100%; margin-top: 15px; gap: 10px; }
#fhmm-consent-mode__second-modal .cookie-consent-buttons button { cursor: pointer; padding: 5px 15px; border-radius: 5px; font-size: 14px; transition: var(--fhmm-consent-mode-transition); }

#second-accept-all-cookies { background: var(--fhmm-consent-mode-primary-color); color: var(--fhmm-consent-mode-text-color-on-primary-color); }
#second-accept-all-cookies:hover { background: var(--fhmm-consent-mode-secondary-color); color: var(--fhmm-consent-mode-text-color-on-secondary-color); }

#second-reject-all-cookies, #second-accept-checked-cookies, #second-show-preferences { background: var(--fhmm-consent-mode-gray-color); color: var(--fhmm-consent-mode-text-color-on-gray-color); }

#second-accept-all-cookies:active,
#second-reject-all-cookies:active,
#second-accept-checked-cookies:active,
#second-show-preferences:active { transform: scale(.9); }

#second-accept-checked-cookies { display: none; }


#fhmm-consent-mode__second-modal__policy-privacy-container { text-align: center; margin-top: 5px; margin-bottom: -12px; }
#fhmm-consent-mode__second-modal__policy-privacy-container a.fhmm-consent-mode__link { font-size: 12px; }

#fhmm-consent-mode__main-modal__policy-privacy-container { text-align: left; margin: 10px 0; }
#fhmm-consent-mode__main-modal__policy-privacy-container a.fhmm-consent-mode__link { font-size: 16px; }

a.fhmm-consent-mode__link,
a.fhmm-consent-mode__link:visited { color: var(--fhmm-consent-mode-secondary-color); transition: var(--fhmm-consent-mode-transition); }
a.fhmm-consent-mode__link:hover { color: var(--fhmm-consent-mode-primary-color); }



/*****************
*
*   Button fixed
*
*****************/

#fhmm-consent-mode__open-second-modal-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 10px;
    left: 10px;
    background: var(--fhmm-consent-mode-secondary-color); /* should be customizable */
    border-radius: 50px;
    text-decoration: none;
    transition: var(--fhmm-consent-mode-transition);
    z-index: 99999;
    box-shadow: 0 4px 16px rgba(0,0,0,.35);
    cursor: pointer;
    padding: 0!important;
}

#fhmm-consent-mode__open-second-modal-btn svg { width: 30px; height: 30px; pointer-events: none; }
#fhmm-consent-mode__open-second-modal-btn svg g path { fill: var(--fhmm-consent-mode-text-color-on-secondary-color); }

#fhmm-consent-mode__open-second-modal-btn:not(.show-button) { pointer-events: none; opacity: 0; transform: translateY(100%); }
#fhmm-consent-mode__open-second-modal-btn.show-button { opacity: .5; transform: translateY(0); }
#fhmm-consent-mode__open-second-modal-btn:hover { opacity: 1; }
#fhmm-consent-mode__open-second-modal-btn:active { transform: scale(.8); }


.fhmm-consent-mode__consent-modal .checkbox-container {
    position: relative;
    background: var(--fhmm-consent-mode-switch-unchecked-color);
    line-height: 0;
    perspective: 400px;
    display: inline-block;
    border: 0;
    transition: var(--fhmm-consent-mode-transition);
    box-sizing: border-box;
    cursor: pointer;
}

#fhmm-consent-mode__main-modal .checkbox-container {
    font-size: var(--fhmm-consent-mode-main-modal-switch-size);
    border-radius: var(--fhmm-consent-mode-main-modal-switch-size);
    min-width: calc(1.70 * var(--fhmm-consent-mode-main-modal-switch-size));
    min-height: var(--fhmm-consent-mode-main-modal-switch-size);
}

#fhmm-consent-mode__second-modal .checkbox-container {
    font-size: var(--fhmm-consent-mode-second-modal-switch-size);
    border-radius: var(--fhmm-consent-mode-second-modal-switch-size);
    min-width: calc(1.70 * var(--fhmm-consent-mode-second-modal-switch-size));
    min-height: var(--fhmm-consent-mode-second-modal-switch-size);
}
	  
.fhmm-consent-mode__consent-modal .checkbox-container input[type="checkbox"] {
    appearance: none;
    position: absolute;
    z-index: 1;
    background: linear-gradient(45deg, #dedede, #ffffff);
    box-shadow: 0 6px 7px rgba(0,0,0,0.3);
    outline: none;
    margin: 0;
    cursor: pointer;
    transition: .35s ease-in-out;
}

#fhmm-consent-mode__main-modal .checkbox-container input[type="checkbox"] {
    width: calc(.8 * var(--fhmm-consent-mode-main-modal-switch-size));
    height: calc(.8 * var(--fhmm-consent-mode-main-modal-switch-size));
    top: calc(.1 * var(--fhmm-consent-mode-main-modal-switch-size));
    left: calc(.1 * var(--fhmm-consent-mode-main-modal-switch-size));
    border-radius: var(--fhmm-consent-mode-main-modal-switch-size);
}

#fhmm-consent-mode__second-modal .checkbox-container input[type="checkbox"] {
    width: calc(.8 * var(--fhmm-consent-mode-second-modal-switch-size));
    height: calc(.8 * var(--fhmm-consent-mode-second-modal-switch-size));
    top: calc(.1 * var(--fhmm-consent-mode-second-modal-switch-size));
    left: calc(.1 * var(--fhmm-consent-mode-second-modal-switch-size));
    border-radius: var(--fhmm-consent-mode-second-modal-switch-size);
}
	  

.fhmm-consent-mode__consent-modal .checkbox-container:has(input[type="checkbox"]:checked) { background: var(--fhmm-consent-mode-switch-checked-color); }

#fhmm-consent-mode__main-modal .checkbox-container input[type="checkbox"]:checked { left: calc(0.8 * var(--fhmm-consent-mode-main-modal-switch-size)); }
#fhmm-consent-mode__second-modal .checkbox-container input[type="checkbox"]:checked { left: calc(0.8 * var(--fhmm-consent-mode-second-modal-switch-size)); } 

.fhmm-consent-mode__consent-modal .checkbox-container:has(input[type="checkbox"]:checked:disabled) { background: var(--fhmm-consent-mode-switch-checked-disabled-color); cursor: not-allowed; }
.fhmm-consent-mode__consent-modal .checkbox-container input[type="checkbox"]:checked:disabled { cursor: not-allowed; }