/*------------------*/
/*----- GLOBAL -----*/
/*------------------*/
/* Firefox */
.dev-calculator input[type="number"] {
   -moz-appearance: textfield;
}

/* keep calcuator paragraph inline */
.dev-calculator input {
   display: inline-block;
}

.c-rich-text__section {
   margin-left: 0;
}

/* hide js section in page builder */
.dev-js {
   display: none;
}

/* adjust page's padding on older themes */
.subpage #content section .container,
.subpage #content article .container {
   padding: 60px 0;
}

/* full width fix from CMS styling */
.dev-calculator .c-rich-text__section {
   width: 100%;
}

/*----------------*/
/*----- HERO -----*/
/*----------------*/

.dev-ds_hero .c-rich-text__section,
.dev-ds_hero .c-text__section, 
.dev-ds_hero.section_SimpleText .box {
   padding: 40px 0;
   margin-left: 20px;
   width: 50%;
   color: var(--headingColor) !important;
}

.dev-ds_hero h2 {
   margin-top: 0;
}

.dev-ds_hero p {
   font-size: 20px !important;
}

/* Force black text only when hero has background image */
.dev-ds_hero[style*="background-image"] p {
   color: #000 !important;
}

/* Desktop overlay */
.dev-ds_hero .overlay {
   background-color: rgba(0, 0, 0, 0.05) !important;
}

/*----------------------*/
/*----- CALCULATOR -----*/
/*----------------------*/
.dev-calculator #retirementForm {
   border-radius: 8px;
   margin-bottom: 20px;
   font-size: 28px !important;
}

.dev-calculator #retirementForm p {
   font-size: 28px !important;
   line-height: 1.6 !important;
}

.dev-calculator .current-situation {
   margin-bottom: 50px;
}

.dev-calculator #retirementForm h2 {
   font-weight: bold;
}

.dev-calculator #retirementForm h4 {
   font-weight: bold;
   margin-top: 30px;
   margin-bottom: 10px;
   font-size: 32px !important;
}

.dev-calculator #retirementForm div {
   margin-bottom: 15px;
}

.dev-calculator label {
   margin-right: 5px;
}

.dev-calculator input[type="number"],
.dev-calculator input[type="text"] {
   padding: 8px 8px 0 8px;
   border: 0 !important;
   border-radius: 0 !important;
   border-bottom: 1.5px solid var(--paletteColor1, #4a678c) !important;
   box-sizing: border-box;
   margin-right: 5px;
   width: 150px;
   text-align: center;
   font-size: 26px !important;
   color: #000 !important;
}

/* Narrower width for age and percentage inputs */
.dev-calculator #currentAge,
.dev-calculator #retirementAge,
.dev-calculator #retirementIncomeRate,
.dev-calculator #annualReturn {
   width: 80px !important;
}

/* Style for auto-calculated fields */
.dev-calculator input.auto-calculated {
   background-color: transparent !important;
   border: none !important;
   cursor: not-allowed !important;
   font-style: italic;
   padding: 0 !important;
   margin-right: 0 !important;
   margin-left: 2px !important;
   width: 56px !important; /* Default width */
   vertical-align: baseline;
}

/* Dynamic width classes for auto-calculated fields */
.dev-calculator input.auto-calculated.width-small {
   width: 32px !important;
}

.dev-calculator input.auto-calculated.width-medium {
   width: 62px !important;
}

.dev-calculator input.auto-calculated.width-large {
   width: 78px !important;
}

/* Prevent dollar sign from separating from input fields */
.dev-calculator .no-wrap {
   white-space: nowrap;
}

/* Custom tooltip with info icon */
.dev-calculator .tooltip-container {
   position: relative;
   display: inline-block;
   margin-left: 2px;
   vertical-align: top;
}

.dev-calculator .info-icon {
   display: inline-block;
   width: 16px;
   height: 16px;
   background-color: #000;
   color: white;
   border-radius: 50%;
   text-align: center;
   line-height: 16px;
   font-size: 12px;
   font-weight: bold;
   cursor: help;
   user-select: none;
   transition: background-color 0.2s;
   vertical-align: top;
}

.dev-calculator .info-icon:hover {
   background-color: #333;
}

.dev-calculator .tooltip {
   visibility: hidden;
   opacity: 0;
   background-color: #333;
   color: white;
   text-align: left;
   border-radius: 6px;
   padding: 10px 14px;
   position: absolute;
   z-index: 1000;
   bottom: 110%;
   left: 50%;
   transform: translateX(-50%);
   white-space: normal;
   font-size: 14px;
   font-style: normal;
   font-weight: normal;
   transition: opacity 0.3s;
   pointer-events: none;
   min-width: 160px;
   max-width: min(220px, calc(100vw - 40px));
   line-height: 1.4;
}

.dev-calculator .tooltip::after {
   content: "";
   position: absolute;
   top: 100%;
   left: 50%;
   margin-left: -5px;
   border-width: 5px;
   border-style: solid;
   border-color: #333 transparent transparent transparent;
}

/* Show tooltip on hover and focus - only when hovering icon itself */
.dev-calculator .info-icon:hover + .tooltip,
.dev-calculator .info-icon:focus + .tooltip {
   visibility: visible;
   opacity: 1;
}

/* Add focus outline for keyboard accessibility */
.dev-calculator .info-icon:focus {
   outline: 2px solid var(--paletteColor1, #4a678c);
   outline-offset: 2px;
}

/* Mobile-friendly: show tooltip on tap/touch */
@media (max-width: 768px) {
   .dev-calculator .info-icon {
      width: 20px;
      height: 20px;
      line-height: 20px;
      font-size: 14px;
   }
   
   .dev-calculator .tooltip-container {
      margin-left: 6px;
   }
   
   .dev-calculator .tooltip-container:active .tooltip {
      visibility: visible;
      opacity: 1;
   }
   
   .dev-calculator .tooltip {
      min-width: auto;
      max-width: 200px;
      width: auto;
      font-size: 13px;
      padding: 8px 10px;
      bottom: 120%;
      left: 50%;
      transform: translateX(-50%);
      right: auto;
      word-wrap: break-word;
   }
   
   .dev-calculator .tooltip::after {
      left: 50%;
   }
}

.dev-calculator button {
   color: var(--btnTextColor, #ffffff);
   background: var(--btnBackgroundColor, var(--paletteColor3, #4a678c));
   border: var(--btnBorderWidth, 0px) solid var(--btnBorderColor, transparent);
   border-radius: var(--btnBorderRadius, 0px);
   font-size: 16px;
   text-transform: var(--btnTextTransform, uppercase);
   font-weight: var(--btnFontWeight, bold);
   padding: var(--btnPadding, 15px 20px);
   opacity: 0.5; /* Style for disabled state */
   cursor: not-allowed; /* Not clickable by default */
}

.dev-calculator button:disabled {
   opacity: 0.5;
   cursor: not-allowed;
}

.dev-calculator button:enabled {
   opacity: 1;
   cursor: pointer; /* Show pointer when enabled/clickable */
}

.dev-calculator button:hover:not(:disabled),
.dev-calculator #savePdfButton {
   background-color: var(--btnBackgroundColor, var(--paletteColor2, #3e5675));
}

/* Button container for tooltip positioning */
.dev-calculator .button-container {
   position: relative;
   display: inline-block;
}

/* Button tooltip styling */
.dev-calculator .button-tooltip {
   visibility: hidden;
   opacity: 0;
   position: absolute;
   bottom: 110%;
   left: 50%;
   transform: translateX(-50%);
   background-color: #333;
   color: white;
   padding: 8px 12px;
   border-radius: 6px;
   font-size: 14px;
   white-space: nowrap;
   z-index: 1000;
   transition: opacity 0.3s;
   pointer-events: none;
}

.dev-calculator .button-tooltip::after {
   content: "";
   position: absolute;
   top: 100%;
   left: 50%;
   margin-left: -5px;
   border-width: 5px;
   border-style: solid;
   border-color: #333 transparent transparent transparent;
}

/* Show tooltip when button is disabled and hovered/focused */
.dev-calculator button:disabled:hover + .button-tooltip,
.dev-calculator button:disabled:focus + .button-tooltip {
   visibility: visible;
   opacity: 1;
}

/* Mobile: show tooltip on tap for disabled button */
@media (max-width: 768px) {
   .dev-calculator .button-container:active .button-tooltip {
      visibility: visible;
      opacity: 1;
   }
   
   .dev-calculator .button-tooltip {
      max-width: 180px;
      left: 50%;
      right: auto;
      transform: translateX(-50%);
      padding: 8px 10px;
      font-size: 13px;
      white-space: normal;
      margin-left: 0;
      margin-right: 0;
   }
}

.dev-calculator #results {
   margin-top: 100px;
   display: none; /* Hide the results section initially */
}

.dev-calculator #results.show {
   display: block; /* Show as block when visible */
}

.dev-calculator #results h2 {
   margin-top: 0;
   margin-bottom: 20px;
}

.dev-calculator .results-message {
   font-size: 18px !important;
   line-height: 1.6 !important;
   margin-top: 50px;
   margin-bottom: 0;
   display: block;
   width: 100%;
   max-width: 100%;
}

.dev-calculator .results-content {
   display: flex;
   flex-direction: row;
   gap: 30px;
   align-items: flex-start;
}

.dev-calculator .results-text {
   width: 40%;
   flex-shrink: 0;
}

.dev-calculator .results-text p {
   font-size: 18px !important;
   margin-bottom: 10px;
   line-height: 1.4;
}

.dev-calculator .results-text button {
   margin-top: 20px;
}

.dev-calculator .chart-container {
   margin-top: 0;
   background-color: #fff;
   padding: 15px;
   border-radius: 8px;
   width: 55%;
   flex-grow: 1;
}

.dev-calculator #incomeExpensesChart {
   width: 100% !important;
   max-height: 600px !important;
   height: auto !important;
}

.dev-calculator #savePdfButton {
   display: none;
   cursor: pointer;
   opacity: 1 !important; /* Force opacity to be 1 */
   background-color: var(--btnBackgroundColor, var(--paletteColor3, #4a678c));
   color: var(--btnTextColor, #ffffff);
}

.dev-calculator #savePdfButton.enabled {
   opacity: 1 !important;
   cursor: pointer !important;
}

/*---------------*/
/*----- CTA -----*/
/*---------------*/
.dev-ds .c-btn {
   background-color: var(--paletteColor2);
}

.c-contact__form h2 {
margin-top: 0 !important;
}

/*----------------------*/
/*----- RESPONSIVE -----*/
/*----------------------*/

/* Tablet and larger mobile devices */
@media (max-width: 900px) {
   .dev-calculator .results-content {
      flex-direction: column; /* Stack items vertically */
      gap: 20px;
   }

   .dev-calculator .results-text {
      width: 100%; /* Full width */
   }

   .dev-calculator .chart-container {
      width: 100%; /* Full width */
      padding: 20px 15px;
      min-height: 350px;
   }
   
   .dev-calculator #incomeExpensesChart {
      min-height: 300px !important;
   }
}

/* Medium mobile devices */
@media (max-width: 767px) {
   .dev-calculator .o-container {
      padding: 50px 25px;
   }

   .dev-ds_hero h2 span {
      font-size: 40px !important;
   }

   .dev-calculator #retirementForm h4 {
      font-size: 26px;
   }

   .dev-calculator input[type="number"],
   .dev-calculator input[type="text"] {
      font-size: 22px !important;
      width: 125px;
   }

   .dev-calculator input.auto-calculated {
      margin-left: 0 !important;
   }

   .dev-calculator #retirementForm p {
      font-size: 22px !important;
      line-height: 1.6 !important;
   }
}

/* Small mobile devices */
@media (max-width: 600px) {
   /* Hide background image on mobile for better text legibility */
   .dev-ds_hero {
      background-image: none !important;
      background-color: #EEEEEE !important;
   }
   
   .dev-ds_hero .overlay {
      background-color: transparent !important;
   }

   .dev-ds_hero .c-rich-text__section,
   .dev-ds_hero .c-text__section {
      width: 90%;
   }

   .dev-ds_hero.section_SimpleText .box {
      width: 90%;
   }

   .dev-ds_hero h2 span {
      font-size: 36px !important;
   }

   .dev-calculator #retirementForm form {
      padding: 10px;
   }

   .dev-calculator button {
      width: 100%;
   }
}

/* Print styles */
@media print {
   /* Hide PDF button when printing */
   #savePdfButton {
      display: none !important;
   }
}