/* ==========================================
   TUO METABOLISMO
   CALCULATOR
========================================== */


/* =========================
   LAYOUT
========================= */
#calcolatore{
	
	scroll-margin-top:100px;
}




/* ==========================================================
   SFONDO METABOLICO
========================================================== */



.calculator-section {
    
    background: linear-gradient(
        to bottom,
        #FFFFFF 0px,
        #FFFFFF 125px,
		#EEF3F4  250px
        /* #F4F7F8 250px */
    );
    position: relative;
    overflow: hidden;
}

.calculator-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background-image: url("/assets/texture-molecolare.svg");
    background-size: 900px 700px;
    background-repeat: repeat;

    opacity: 0.1;
	
}

.calculator-container {
    position: relative;
    z-index: 1;
	max-width: 900px;
}


/* =========================
   TITOLI
========================= */
.calculator-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
	
}



.calculator-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
}


#service-plan {
        display: none;

        width: 40px;
        height: 40px;

        margin-left: 0;

        flex-shrink: 0;
    }
	
	#service-plan.visible {
    display: inline-flex;
}

.calculator-version {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 5px 9px;
    margin-left: 0;

    border: 1px solid #dce5e8;
    border-radius: 20px;

    background: #f7f9fa;
    color: var(--primary-color);

    font-family: inherit;
    font-size: 11px;
    font-weight: 600;

    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;

    transition: background 0.2s ease;
}

.calculator-version:hover {
    background: #eaf1f3;
}


@media (max-width:768px) {

    .calculator-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;

        gap: 8px;

        text-align: center;
    }

    .calculator-title-text {
        display: flex;
        flex-direction: column;
        align-items: center;

        line-height: 1.25;
    }

    .calculator-icon {
        width: 48px;
        height: 48px;
		

        flex-shrink: 0;
    }

    

}

.calculator-subtitle {
    text-align: center;
	
    
   max-width:1200px;
    margin-top: 6px;
	margin-bottom: 6px;
	margin-left:auto;
	margin-right:auto;
}


/* =========================
   FORM
========================= */


.calculator-form {

    margin-top: 6px;
    margin-bottom: 0px;
}

.calculator-grid {

    display: grid;

    gap: 28px;
	padding-bottom:14px;

}



.calculator-card {
    padding: 14px 20px;
	background: rgba(248, 253, 253, .90) !important;
  

    border: 3px solid rgba(var(--primary-color-light-rgb), 1);

    box-shadow:
        0 8px 25px rgba(50,100,110,.08);

    border-radius: 18px;

    backdrop-filter: blur(8px);
	opacity: 1;
}



.calculator-card:first-child {
	 /* Dati personali */
    align-self: start;
}

.calculator-card:nth-child(1) {
    /* Dati personali */
    background: #F0F9F8;
    border-color: #BFE4E1;
}

.calculator-card:nth-child(2) {
    /* Profilo lipidico */
    background: #FCFAF1;
    border-color: #E5DDBF;
}

.calculator-card:nth-child(3) {
    /* Altri biomarcatori */
    background: #F1F8FC;
    border-color: #C4DDE9;
}

.calculator-card:nth-child(1) h3 {
    color: #168F89;
}

.calculator-card:nth-child(2) h3 {
    color: #B88728;
}

.calculator-card:nth-child(3) h3 {
    color: #326F8D;
}

.calculator-card:hover {

    transform: none;

    box-shadow: 0 8px 24px rgba(0,0,0,.05);

}

.calculator-card h3 {

    font-size: 1.25rem;
	
	text-align:center;

    font-weight: 600;

    color: var(--primary-dark);

    margin-bottom: 10px;

}


/* =========================
   CAMPI
========================= */

.calculator-field {
    margin-bottom: 6px;
}

    .calculator-field:last-child {
        margin-bottom: 0;
    }

    .calculator-field label {
        display: block;
        margin-bottom: 0px;
        font-weight: 460;
		
        
    }
	
	.calculator-field label > span {
		font-size:12px;
		
	}

    .calculator-field input,
    .calculator-field select {
        width: 100%;
        padding: 2px 6px;
        border: 1px solid #abcce2;
        border-radius: 12px;
        background: #ffffff;
		color: var(--primary-color);
        font: inherit;
		font-weight:700;
        transition: .25s;
    }

.calculator-field input:hover,
.calculator-field select:hover {
     border-color: var(--primary-color-light);
      background: var(--background-light);

}

        .calculator-field input:focus,
        .calculator-field select:focus {
            outline: none;
            border-color: #149C95;
            box-shadow: 0 0 0 3px rgba(20,156,149,.15);
        }


/* =========================
   PULSANTE
========================= */
.calculator-actions {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
	margin-top: 0px;
}

@media (max-width: 480px) {

    .calculator-actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    #reset-calculator {
        order: 1;
        grid-column: auto;
        justify-self: auto;
        align-self: center;
		
    }

    #calculate-button {
        order: 2;
        grid-column: auto;
        min-width: 0;
        width: 100%;
    }
}

#calculate-button {
    grid-column: 2;
	min-width: 280px;
    background: var(--primary-color);
    color: #fff;

    border: none;

    
	
	font-size:18px;
}

#reset-calculator {
	border:none;
	box-shadow:0 1px 4px rgba(0,0,0,.20);
    grid-column: 3;
    justify-self: start;
	color: #6C93A3;
}
/*
.calculator-actions {
    margin-top: 0px;
    text-align: center;
}
#calculate-button {
    min-width: 280px;
    background: var(--primary-color);
    color: #fff;

    border: none;

    
	
	font-size:18px;

}
*/

#calculate-button:hover{

    background: var(--primary-dark);

}

#reset-calculator:hover {
	color: var(--primary-dark);
}






/* =========================
   ANALISI DISPONIBILI
========================= */

.analysis-status {
    margin-top: 25px;
}

    .analysis-status ul {
        padding-left: 20px;
    }

    .analysis-status li {
        margin-bottom: 8px;
    }



/* ==========================================================
   REPORT
========================================================== */

#calc-url-container{

	padding: 15px 10px 0px 10px;
}
.calc-url {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    text-align: center;
	color: var(--primary-color-medium);
	font-weight:560;
}
/*
.copy-calc-url-btn {
    display: block;
    margin: 10px auto 0;
    padding: 8px 18px;
    border: 1 ps solid var(--primarycolor);
    border-radius: 6px;
    background: white;
    color: var(--primary-text);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s ease;
}
*/

.copy-calc-url-btn:hover {
   color: var(--primary-color); 
}

.copy-calc-url-btn {
    padding: 10px 20px;
    border: 1px solid #d6e2e5;
    border-radius: 8px;
    background: #ffffff;
    color: var(--primary-title);
    font-family: inherit;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 60, 80, 0.08);
    transition: all 0.2s ease;
}

.copy-calc-url-btn:hover {
    border-color: #20aaa5;
    box-shadow: 0 4px 10px rgba(0, 60, 80, 0.14);
    transform: translateY(-1px);
}

.copy-calc-url-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 60, 80, 0.08);
}

#calc-url-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    width: 100%;
}

#report-details{
	padding:40px 0;
}
.report-title{

    text-align:center;

    margin-bottom:1rem;

}
.report-summary{

    max-width:900px;

    margin:0 auto;

    background:#fff;

    border:1px solid #E8EDF2;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(20,40,80,.05);
	
	cursor:pointer;

}
.summary-title{

    text-align:center;

    font-size:2.4rem;

    font-weight:700;

    line-height:1.2;

    letter-spacing:-0.02em;

    margin-bottom:.8rem;

}

@media (max-width:480px){

	.summary-title{

		

		font-size:2.0rem;

	   

	}
}
.summary-label{

    text-align:center;

    margin-bottom:.6rem;

    font-size:.95rem;

    font-weight:500;

    color: var(--primary-text);

    letter-spacing:.2px;

}

.summary-description{

    max-width:650px;

    margin:0 auto;

    text-align:center;

    color: var(--primary-text);

    font-size:1rem;

    line-height:1.6;

}


/* ==========================================================
   SCORE CARDS
========================================================== */

.report-score-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:1.5rem;
	
    margin-top:1rem;
    margin-bottom:2rem;


}


.report-score-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    padding:2rem 1.75rem;
	
	cursor: pointer;
	
	position:relative;

}

.report-score-card h3{

    font-size:1.8rem;

    font-weight:700;

    color:var(--primary-text);

    margin:0 0 .4rem;

}

.report-score-card h4{

    font-size:1rem;

    font-weight:500;

    color:var(--primary-text);

    margin:0 0 2rem;

    line-height:1.5;

}
.report-score-card:hover{
/*
    transform:
        translateY(-5px)
        scale(1.01);*/
		
	transform:
        translateY(-5px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.10);
		
	cursor: pointer;

}

.report-score-action{
	z-index: 0;
	isolation: isolate;
	position: relative;
	display: inline-block;
	padding: 7px 16px;
    margin-top:6px;
	
	border: none;
	border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 550;

	
	text-align:center;
	
	color:var(--primary-title);
	background: #eaf7f8;

    transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}




.report-score-action::after {
	z-index: 0;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(80, 190, 230, 0.45);
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: none;
}
/**/

.report-score-card:hover .report-score-action{
    
	border: 1px solid var(--primary-color-light);

    color: #087f87;
    
    box-shadow: 0 3px 8px rgba(0, 80, 110, 0.15);
  /* */
}

.report-score-action.animazione-scopri::after {
    animation: effettoScopri 3.5s ease-out forwards;
}

.report-score-action.animazione-scopri-finita::after {
    display: none;
}

@keyframes effettoScopri {
    from {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    to {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
}







.score-container{

    display:flex;

    flex-direction:column;

    align-items:center;

}
.score-value{

    font-size:5.5rem;

    font-weight:700;

    line-height:1;

    letter-spacing:-0.04em;

    color:var(--primary-title);

}

.score-divider{

     width:72px;

    height:2px;

    margin:.6rem 0 .45rem;

    background:#8B97A6;

    border-radius:2px;

}


.score-scale{

    font-size:1rem;

    font-weight:600;

    color:#8B97A6;

    letter-spacing:.08em;

}




/* ==========================================================
   HOVER
========================================================== */


/* =========================
   RISULTATI
========================= */
.section-header{
    display:flex;
    align-items:center;
    gap:6px;
}


.section-title{
    font-size:1.45rem;
    font-weight:600;
    margin:0;
}
.section-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.glycemic-status .section-icon {
    background-image: url("../assets/quadro_glicemico.png");
}
.overall-ir .section-icon {
    background-image: url("../assets/ir.png");
}

.overall-iiml .section-icon {
    background-image: url("../assets/lipidi.png");
}

.overall-icf_hdl .section-icon {
    background-image: url("../assets/hdl.png");
}

.overall-ir {
    background: #F2E9E9;
    border: 1px solid #F3DCDC;
	margin-bottom: 10px;
}

.overall-iiml {
    background: #FDFBE2;
    border: 1px solid #E9DEA2;
	margin-bottom: 10px;
}

.overall-icf_hdl {
    background: #F7FCF8;
    border: 1px solid #C8E2CB;
	margin-bottom: 10px;
}

/* ======================================================
   Card Quadro Glicemico
   ====================================================== */

.glycemic-status {
    background: #F8F9FA;
    border: 1px solid #E1E5E8;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 10px;
   
}

.glycemic-status:empty {
    display: none;
}

/* Contenuto marcatori */

.glycemic-status-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.glycemic-marker {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 14px;
    background: #FFFFFF;
    border: 1px solid #E5E9EC;
    border-radius: 8px;
}

.glycemic-marker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.glycemic-marker-header span {
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--primary-title);
    letter-spacing: 0.2px;
}

.glycemic-marker strong {
    font-size: 1rem;
    font-weight: 600;
}

.glycemic-marker-unavailable {
    color: #929BA5 !important;
}

/* ======================================================
   Barre Quadro Glicemico
   ====================================================== */

.glycemic-bar {
    position: relative;
    height: 10px;
    margin: 24px 4px 18px;
    border-radius: 10px;
}

.glycemic-bar-unavailable {
    font-size: 0.8rem;
    color: #999;
    margin-bottom: 5px;
}

/* Barre colorate */

.glycemic-bar-colored {
    background: #DDE2E6;
}

/* Barre neutre */

.glycemic-bar-neutral {
    background: #DDE2E6;
}

/* Indicatore valore */

.glycemic-bar-indicator {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);

    width: 5px;
    height: 24px;

    background: var(--primary-color);
    border: none;
    border-radius: 2px;

    z-index: 2;
}

/* Simbolo valore fuori scala */

.glycemic-bar-indicator:not(:empty) {
    font-size: 11px;
}


.glycemic-bar-out-of-range {
    position: absolute;
    top: -18px;
    font-size: 11px;
    font-weight: 600;
    color: #C62828;
    white-space: nowrap;
}

.glycemic-bar-out-of-range.left {
    left: 6px;
}

.glycemic-bar-out-of-range.right {
    right: 6px;
}

/* Soglie */

.glycemic-bar-threshold {
    position: absolute;
    top: -24px;
    transform: translateX(-50%);

    font-size: 0.75rem;
    font-weight: 450;
    color: var(--primary-color-medium);

    white-space: nowrap;
}

.glycemic-bar-threshold.threshold-start {
    transform: translateX(0);
}

.glycemic-bar-threshold.threshold-end {
    transform: translateX(-100%);
}

/* Interpretazione complessiva */

.glycemic-status-interpretation {
    margin-top: 18px;
    padding: 14px;

  
}

/* Contenitore ticks sotto la barra */
.glycemic-bar-ticks {
    position: relative;
    height: 18px;
    margin-top: 5px;
    width: 100%;
}

/* Singolo tick numerico */
.glycemic-bar-tick {
    position: absolute;
    transform: translateX(-50%);
    font-size: 11px;
    color: #888;
    line-height: 1;
    white-space: nowrap;
}

/* Primo tick: allineato a sinistra */
.glycemic-bar-tick:first-child {
    transform: translateX(0);
}

/* Ultimo tick: allineato a destra */
.glycemic-bar-tick:last-child {
    transform: translateX(-100%);
}

@media (max-width: 480px) {

    /* Più spazio sopra la barra per le etichette */
    .glycemic-bar {
        margin-top: 36px;
    }

    /* Etichette più compatte */
    .glycemic-bar-threshold {
        font-size: 10px;
    }

    /* Primo livello */
    .glycemic-bar-threshold:nth-child(odd) {
        top: -30px;
    }

    /* Secondo livello */
    .glycemic-bar-threshold:nth-child(even) {
        top: -15px;
    }

}

.calculator-results {
    margin-top: 0px;
	margin-bottom: 0px;
	padding-top:16px;
	padding-bottom:0px;
}

    .calculator-results h2 {
        text-align: center;
        margin-bottom: 10px;
    }



/* =========================
   INDICI
========================= */

.indexes-grid {
    margin-top: 40px;
}

.index-card {
    text-align: center;
}

.index-value {
    font-size: 34px;
    font-weight: 700;
    margin: 15px 0;
}

.index-interpretation {
    font-weight: 600;
    margin-bottom: 10px;
}

.index-score {
    color: #64748b;
    font-size: 15px;
}


.biomarker-card{

    display:flex;
    flex-direction:column;

    padding:18px;

    background:#fff;

    border:1px solid #E8EDF2;
    border-radius:12px;

    min-height:180px;

}


.biomarker-header{

    margin:-16px -16px 12px -16px;

    padding:12px 16px;

    border-bottom:1px solid #ECEFF3;

    border-radius:12px 12px 0 0;

}

.biomarker-title{

    margin:0;

    font-size:.95rem;

    font-weight:600;

    color:var(--primary-text);

    text-transform:uppercase;

    letter-spacing:.05em;

}

.biomarker-value{

    font-size:2rem;

    font-weight:700;

    color:var(--primary-title);

    line-height:1;

    margin-bottom:18px;
    margin-top: 8px;

}

.biomarker-indicator{

    min-height:24px;

    margin-bottom:16px;

}

.biomarker-description{

    margin:0;

    font-size:.92rem;

    line-height:1.45;

    color:var(--primary-text);;

}

.marker-green{
    border:2px solid #CFE7D1;
}

.marker-light-green{
    border:2px solid #DDEED9;
}

.marker-yellow{
    border:2px solid #E6DDA8;
}

.marker-orange{
    border:2px solid #EBC8B4;
}

.marker-red{
    border:2px solid #E7BFC0;
}

.marker-dark-red{
    border:2px solid #DDA9A9;
}

.marker-neutral{
    border:2px solid #E5EAF0;
}

.marker-green .biomarker-header{
    background:#F3FBF4;
}

.marker-light-green .biomarker-header{
    background:#F7FCF8;
}

.marker-yellow .biomarker-header{
    background:#FEFBEF;
}

.marker-orange .biomarker-header{
    background:#FDF7F3;
}

.marker-red .biomarker-header{
    background:#FCF4F4;
}

.marker-dark-red .biomarker-header{
    background:#FAEFEF;
}

.marker-neutral .biomarker-header{
    background:#F8FAFC;
}
/* =========================
   UTILITY
========================= */

.hidden {
    display: none !important;
}

.validation-errors{

    max-width:900px;
    margin:2rem auto;
    padding:1.5rem;

    background:#FFF5F5;
    border:1px solid #F2CACA;
    border-radius:16px;

}

.validation-errors p{

    margin:.5rem 0;
    color:#B42318;
    font-weight:500;

}

.validation-link{

    text-decoration: none;
    color: inherit;

}


#report-section{
   
	padding-bottom:0px;
}
/* =========================
   Newsletter
========================= */

#report-newsletter{
    display:none;
	padding-top:6px;
}


/* ==========================================================
   MODAL DISCLAIMER
========================================================== */


.modal-overlay{
    display:none;
    position:fixed;
    inset:0;

    justify-content:center;
    align-items:flex-start;

    overflow-y:auto;

    padding:30px 20px;

    background:rgba(0,0,0,.7);
	
	z-index: 9999;
	
	opacity: 0.96;

}

.modal-overlay.active{

    display:flex;

}


/* ==========================================================
   FINESTRA
========================================================== */

.modal-box{

    width:100%;
    max-width:650px;

    margin:40px auto;

    max-height:90vh;

    overflow-y:auto;

    background:#fff;

    border-radius:22px;

    padding:40px;

    box-shadow:0 20px 60px rgba(0,0,0,.25);

    text-align:center;

}





/* ==========================================================
   TESTI
========================================================== */

.modal-box h2{

    margin-bottom:10px;

}

.modal-description{

    margin-bottom:20px;

 

}

.modal-disclaimer{

    padding:22px;

    margin-bottom:20px;

    background:#f8f9fa;

    border:1px solid #e4e4e4;

    border-radius:14px;

    text-align:left;

    line-height:1.7;

}


/* ==========================================================
   CHECKBOX
========================================================== */

.modal-check{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-bottom:30px;

    text-align:left;

    cursor:pointer;

    user-select:none;

}

.modal-check input{

    width:18px;

    height:18px;

    margin-top:3px;

    cursor:pointer;

}

.modal-check span{

    line-height:1.5;

}


/* ==========================================================
   PULSANTE
========================================================== */

#continue-analysis{

    width:80%;

    padding:12px 28px;

    border:none;

    border-radius:999px;

    background:var(--primary-color);

    color:#fff;

    font-size:1rem;

    font-weight:600;

    cursor:pointer;

    transition:all .25s ease;

}

#continue-analysis:hover:not(:disabled){

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(0,0,0,.18);

}

#continue-analysis:disabled{

    background:#c9c9c9;

    color:#777;

    cursor:not-allowed;

    box-shadow:none;

    transform:none;

    opacity:1;

}




/* ==========================================================
   REPORT PDF
========================================================== */

.report-download{

    padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 10px;
	padding-right:10px;

    background:var(--background-light);
	display:none;

}

.report-download .container{

    max-width:760px;

    text-align:center;

}

.report-download h2{

    margin-bottom:18px;

}

.report-description{

    max-width:620px;

    margin:0 auto 35px;

    

    line-height:1.8;

}


/* ==========================================================
   FORM
========================================================== */

.report-form{

    display:flex;
    flex-direction:column;
    gap:22px;

    margin-top:35px;

}

.report-form input[type="email"]{

    width:100%;

    padding:16px 18px;

    font-size:1rem;

    border:1px solid var(--border-color);

    border-radius:12px;

    transition:.25s;

}

.report-form input[type="email"]:focus{

    outline:none;

    border-color:var(--primary-color);

    box-shadow:0 0 0 3px rgba(30,158,152,.15);

}







/* ==========================================================
   PULSANTE REPORT
========================================================== */

#btn-sendreport{

    align-self:center;

    min-width:260px;
	height:36px;
	
	background: var(--primary-color);
    color: #fff;

    border: none;

    border-radius: var(--radius-verylarge);

    box-shadow: var(--shadow-medium);
	
	font-size:18px;

}


/* ==========================================================
   NOTE
========================================================== */

#report-sendnote{

    margin-top:22px;

    font-size:.9rem;

    color:var(--text-light);

}



/* ==========================================================
   VARIANTE TEST 2 — CALCOLATORE / PIÙ DECISA
   Test volutamente più evidente.
   Struttura e identità cromatica delle card preservate.
   ========================================================== */

.calculator-title {
    font-weight: 750;
}

.calculator-version {
    font-weight: 700;
    border-color: #C8D8DD;
}

.calculator-card h3 {
    font-weight: 750;
    font-size: 1.30rem;
}

.calculator-field label {
    font-weight: 550;
    color: #315D70;
}

.calculator-field input,
.calculator-field select {
    border: 1.5px solid #91B8C6;
    border-radius: 10px;
}

.calculator-field input:focus,
.calculator-field select:focus {
    border-color: #149C95;
    box-shadow: 0 0 0 3px rgba(20,156,149,.12);
}

#calculate-button {
    font-weight: 700;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,.20);
}

#calculate-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(30,158,152,.24);
}

.copy-calc-url-btn {
    font-weight: 650;
    border-color: #C8D8DD;
}

.calculator-card:hover {
    box-shadow: 0 10px 28px rgba(50,100,110,.10);
}