@charset "UTF-8";

:root {
	/* ########################################################################### */
	/* COLORS */
	/* ########################################################################### */

	/* Core Colors */
	--pls-core-color-golden-sprinkles: #F4D35E;
	--pls-core-color-golden-sprinkles-rgb: 244, 211, 94;
	--pls-core-color-black-hole: #020202;
	--pls-core-color-black-hole-rgb: 2, 2, 2;
	--pls-core-color-white: #FFFFFF;
	--pls-core-color-white-rgb: 255, 255, 255;

	/* Secondary Colors */
	--pls-secondary-color-chickery-chick: #F6EB8C;
	--pls-secondary-color-chickery-chick-rgb: 246, 235, 140;
	--pls-secondary-color-artic-ice: #CDD9DE;
	--pls-secondary-color-artic-ice-rgb: 205, 217, 222;
	--pls-secondary-color-north-atlantic: #577D76;
	--pls-secondary-color-north-atlantic-rgb: 87, 125, 118;
	--pls-secondary-color-orange-soda: #FF6F20;
	--pls-secondary-color-orange-soda-rgb: 255, 111, 32;

	/* Sentiment Colors */
	--pls-sentiment-color-positive: #28A745;
	--pls-sentiment-color-positive-rgb: 40, 167, 69;
	--pls-sentiment-color-positive-subtle: #D1E7DD;
	--pls-sentiment-color-positive-subtle-rgb: 209, 231, 221;
	--pls-sentiment-color-negative: #DC3546;
	--pls-sentiment-color-negative-rgb: 220, 53, 70;
	--pls-sentiment-color-negative-subtle: #F8D7DB;
	--pls-sentiment-color-negative-subtle-rgb: 248, 215, 219;
	--pls-sentiment-color-warning: #FFC206;
	--pls-sentiment-color-warning-rgb: 255, 194, 6;
	--pls-sentiment-color-warning-subtle: #FFF3CD;
	--pls-sentiment-color-warning-subtle-rgb: 255, 243, 205;
	--pls-sentiment-color-info: #0E6EFD;
	--pls-sentiment-color-info-rgb: 14, 110, 253;
	--pls-sentiment-color-info-subtle: #CEE2FF;
	--pls-sentiment-color-info-subtle-rgb: 206, 226, 255;

	/* Border colors */
	--pls-border-color-neutral: #E3E3E3;
	--pls-border-color-neutral-rgb: 227, 227, 227;

	/* Background colors */
	--pls-background-color-screen: #FFFFFF;
	--pls-background-color-screen-rgb: 255, 255, 255;
	--pls-background-color-elevated: #F4F4F4;
	--pls-background-color-elevated-rgb: 244, 244, 244;
	--pls-background-color-neutral: #FAF0CA;
	--pls-background-color-neutral-rgb: 250, 240, 202;

	/* Product Colors */
	--pls-product-color-primary: #020202;
	--pls-product-color-primary-rgb: 2, 2, 2;
	--pls-product-color-secondary: #3D3D3D;
	--pls-product-color-secondary-rgb: 61, 61, 61;
	--pls-product-color-tertiary: #7A7A7A;
	--pls-product-color-tertiary-rgb: 122, 122, 122;



	/* Primary Button Colors */
	--pls-button-primary-hover-bg: #F1C766;
	--pls-button-primary-hover-bg-rgb: 241, 199, 102;
	--pls-button-primary-pressed-bg: #ECB945;
	--pls-button-primary-pressed-bg-rgb: 236, 185, 69;
	--pls-button-primary-focus-bg: #F4D35E;
	--pls-button-primary-focus-bg-rgb: 244, 211, 94;

	/* Secondary Button Colors */
	--pls-button-secondary-bg: #FCF3D3;
	--pls-button-secondary-bg-rgb: 252, 243, 211;
	--pls-button-secondary-hover-bg: #F9EAB5;
	--pls-button-secondary-hover-bg-rgb: 249, 234, 181;
	--pls-button-secondary-pressed-bg: #F7E195;
	--pls-button-secondary-pressed-bg-rgb: 247, 225, 149;
	--pls-button-secondary-focus-bg: #FCF3D3;
	--pls-button-secondary-focus-bg-rgb: 252, 243, 211;

	/* Tertiary Button Colors */
	--pls-button-tertiary-bg: #FFFFFF;
	--pls-button-tertiary-bg-rgb: 255, 255, 255;
	--pls-button-tertiary-hover-bg: var(--pls-button-secondary-hover-bg);
	--pls-button-tertiary-hover-bg-rgb: var(--pls-button-secondary-hover-bg-rgb);
	--pls-button-tertiary-pressed-bg: var(--pls-button-secondary-pressed-bg);
	--pls-button-tertiary-pressed-bg-rgb: var(--pls-button-secondary-pressed-bg-rgb);
	--pls-button-tertiary-focus-bg: #FFFFFF;
	--pls-button-tertiary-focus-bg-rgb: 255, 255, 255;

	/* Destructive Button Colors */
	--pls-button-destructive-bg: #DC3546;
	--pls-button-destructive-bg-rgb: 220, 53, 70;
	--pls-button-destructive-hover-bg: #D7061C;
	--pls-button-destructive-hover-bg-rgb: 215, 6, 28;
	--pls-button-destructive-pressed-bg: #AA2634;
	--pls-button-destructive-pressed-bg-rgb: 170, 38, 52;
	--pls-button-destructive-focus-bg: #DC3546;
	--pls-button-destructive-focus-bg-rgb: 220, 53, 70;

	/* Disabled Button Colors */
	--pls-button-disabled-background: #E3E3E3;
	--pls-button-disabled-background-rgb: 227, 227, 227;

	/* Box shadow Colors */
	--pls-box-shadow-color: #FBEEC4;
	--pls-box-shadow-color-rgb: 251, 238, 196;
	--pls-box-shadow-color-destructive: #F8D7DB;
	--pls-box-shadow-color-destructive-rgb: 248, 215, 219;

	/* ############################################################################ */
	/* Tipografia */
	/* ############################################################################ */
	--pls-body-font-family: "Noto Sans", sans-serif;
	--pls-body-font-size: 15px;

	/* ########################################################################### */
	/* Altre variabili */
	/* ########################################################################### */
	--pls-box-shadow: 0 0 0 4px var(--pls-box-shadow-color);
	--pls-box-shadow-destructive: 0 0 0 4px var(--pls-box-shadow-color-destructive);

	--pls-core-color-primary: var(--pls-core-color-golden-sprinkles);
	--pls-core-color-primary-rgb: var(--pls-core-color-golden-sprinkles-rgb);
	--pls-text-primary-color: var(--pls-product-color-primary);

	--pls-button-primary-hover-color: #020202;
	--pls-button-primary-hover-border: 2px solid #F1C766;

	--pls-button-primary-active-background: #ECB945;
	--pls-button-primary-active-color: #020202;
	--pls-button-primary-active-border: 2px solid #ECB945;

	--pls-button-primary-focus-background: #F4D35E;
	--pls-button-primary-focus-color: #020202;
	--pls-button-primary-focus-border: 2px solid #FBEEC4;


	/* button secondary */

	--pls-button-secondary-background: #FCF3D3;
	--pls-button-secondary-color: #020202;
	--pls-button-secondary-border: 2px solid #FCF3D3;

	--pls-button-secondary-hover-background: #F9EAB5;
	--pls-button-secondary-hover-color: #020202;
	--pls-button-secondary-hover-border: 2px solid #F9EAB5;

	--pls-button-secondary-active-background: #F7E195;
	--pls-button-secondary-active-color: #020202;
	--pls-button-secondary-active-border: 2px solid #F7E195;

	--pls-button-secondary-focus-background: #FCF3D3;
	--pls-button-secondary-focus-color: #020202;
	--pls-button-secondary-focus-border: 2px solid #FBEEC4;



	/* button tertiary */

	--pls-button-tertiary-background: transparent;
	--pls-button-tertiary-color: #020202;
	--pls-button-tertiary-border: 2px solid #020202;

	--pls-button-tertiary-hover-background: #F9EAB5;
	--pls-button-tertiary-hover-color: #020202;
	--pls-button-tertiary-hover-border: 2px solid #020202;

	--pls-button-tertiary-active-background: #F7E195;
	--pls-button-tertiary-active-color: #020202;
	--pls-button-tertiary-active-border: 2px solid #020202;

	--pls-button-tertiary-focus-background: #FFFFFF;
	--pls-button-tertiary-focus-color: #020202;
	--pls-button-tertiary-focus-border: 2px solid #020202;
	--pls-button-tertiary-focus-shadow: #FBEEC4;


	/* text */

	--pls-button-text-background: transparent;
	--pls-button-text-color: #020202;
	--pls-button-text-border: 2px solid transparent;

	--pls-button-text-hover-background: #F9EAB5;
	--pls-button-text-hover-color: #020202;
	--pls-button-text-hover-border: 2px solid #F9EAB5;

	--pls-button-text-active-background: #F7E195;
	--pls-button-text-active-color: #020202;
	--pls-button-text-active-border: 2px solid #F7E195;

	--pls-button-text-focus-background: #FFFFFF;
	--pls-button-text-focus-color: #020202;
	--pls-button-text-focus-border: 2px solid #FBEEC4;

	--pls-text-primary-color: #020202;
	--pls-text-secondary-color: #3D3D3D;
	--pls-text-tertiary-color: #7A7A7A;
}



.form-control:focus {
	box-shadow: var(--pls-box-shadow);
	border-color: var(--pls-core-color-golden-sprinkles);
}

.form-check-input:focus {
	box-shadow: var(--pls-box-shadow);
	border-color: var(--pls-core-color-golden-sprinkles);
}

.btn .btn-danger:focus {
	box-shadow: var(--pls-box-shadow-destructive);
}

.btn:disabled,
.btn.disabled {
	background-color: var(--pls-button-disabled-background);
	color: var(--pls-product-color-tertiary);
	border: none;
	border-color: transparent;
	opacity: 1;
	/* rimuove la trasparenza di default di Bootstrap */
	cursor: not-allowed;
}

.badge.stato-ordine,
.badge.stato-spedizione {
	background: var(--pls-core-color-primary);
	color: var(--pls-text-primary-color);
}

.badge.stato-ordine.consegnato,
.badge.stato-spedizione.consegnato {
	background: var(--pls-sentiment-color-positive);
	color: white;
}

.text-x-large {
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.text-large {
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
}

.text-medium {
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
}

.text-small {
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 18px;
}

.text-x-small {
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 18px;
}

.btn-secondary-boooks {
	background: var(--pls-button-secondary-background);
	color: var(--pls-button-secondary-color);
	border: var(--pls-button-secondary-border);
	color: #020202;
	font-weight: 500;
	border-radius: 5px;
}

.btn-secondary-boooks:hover {
	background: var(--pls-button-secondary-hover-background);
	color: var(--pls-button-secondary-hover-color);
	border: var(--pls-button-secondary-hover-border);
}

.btn-secondary-boooks:active {
	background: var(--pls-button-secondary-active-background);
	color: var(--pls-button-secondary-active-color);
	border: var(--pls-button-secondary-active-border);
}

.btn-secondary-boooks:focus {
	background: var(--pls-button-secondary-focus-background);
	color: var(--pls-button-secondary-focus-color);
	border: var(--pls-button-secondary-focus-border);
}


/* MODALE TERMINI E CONDIZIONI */

#modalTerminiUso .modal-header,
#modalCondizioniVendita .modal-header
{
    border: 1px solid transparent !important;
    display: flex;
    flex-direction: row;
    justify-content: center; /* togliendo la X in alto a destra tolgo anche lo space-between e metto center per centrare il solo logo nella header */
    align-items: center;
}

#modalTerminiUso .modal-header .modal-logo,
#modalCondizioniVendita .modal-header .modal-logo
{
    width: 120px;
    padding: 10px 5px;
}


#modalTerminiUso .btn-chiudi.btn-secondary-boooks,
#modalCondizioniVendita .btn-chiudi.btn-secondary-boooks
{
    position: absolute;
    right: 20px;
    width: 40px;
    height: 40px;
    display: inline-block;
}


#modalCondizioniVendita ol
{
	counter-reset: item;
}

#modalCondizioniVendita li 
{
	display: block;
}


#modalCondizioniVendita li:before 
{ 
	content: counters(item, ".") " "; 
	counter-increment: item;
	font-weight: 700;
}



input::placeholder{
	color: rgba(33, 37, 41, 0.75) !important;
}


/* FOOTER */

.footer-container
{
	background: #262626;
	padding: 40px 30px;
	color: #ffffff;
}

.footer-container .footer-data
{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: 25px;
}

.viewport-xs .footer-container .footer-data,
.viewport-sm .footer-container .footer-data,
.viewport-md .footer-container .footer-data
{
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.footer-container .footer-data img
{
	width: 110px;
}


.footer-container .footer-data .dati-container
{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 4px;
}

.footer-container .footer-data .dati-container div
{
	color: #7A7A7A;
	font-family: "Noto Sans";
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 18px;
}


.footer-container .link-legali
{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 20px;
	margin-top: 24px;
}

.viewport-xs .footer-container .link-legali,
.viewport-sm .footer-container .link-legali,
.viewport-md .footer-container .link-legali
{
	flex-direction: column;
	gap: 10px;
}

.footer-container .link-legali a
{
	color: #E1E1E1;
	font-family: "Noto Sans";
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
	text-decoration: none;
}


/* --- */


/* BADGE DA CONFERMARE */


@keyframes jump-shaking 
{
  0% { transform: rotate(0) }
  50% { transform: rotate(17deg) }
  50% { transform: rotate(-17deg) }
  50% { transform: rotate(17deg) }
  100% { transform: rotate(0) }
}


.badge-da-confermare
{
	color: #020202;
	font-weight: 700;
	font-size: 14px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 8px;
	background: rgba(244, 211, 94, 0.5);
	padding: 8px 16px;
	border-radius: 5px;
	margin-bottom: 16px;
}

.badge-da-confermare img
{
	width: 20px;
	animation: jump-shaking 1s linear infinite;
}

/* --- */



.input-group .password-input-eye
{
    background: #ffffff;
    border-left: 1px solid transparent;
    cursor: pointer;
}

.input-group .password-input-eye img
{
    width: 16px;
    height: 16px;
}

.input-group input.passwordHF
{
    border-right: 1px solid transparent;
}