/* Style the dropdown to match the design */
select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
color: #333;
font-family: 'Fira Mono', monospace;  /* Same font as the other inputs */
font-weight: bold;
font-size: 0.8em;
appearance: none; /* Remove default appearance */
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;

}

/* Focus state to highlight the dropdown when selected */
select:focus {
outline: none;
border-color: #1aff2d;  /* Green border on focus */
box-shadow: 0 0 5px 3px rgba(76, 175, 80, 0.3);  /* Focus shadow effect */
}

/* Styling the dropdown arrow */
select::-ms-expand {
display: none;  /* Hides the default arrow on Internet Explorer */
}
/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Global Styles */
body {
background: #121212;
color: #e0e0e0;
font-family: 'Fira Mono', monospace;
line-height: 1.6;
padding: 20px;
}

/* Hero Section */
.hero {
text-align: center;
margin-bottom: 5px;
}

.hero .heading {
cursor: pointer;
display: inline-block;
letter-spacing: .15em;
font-size: 2.5em;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-align: center;
width: 100%;
}

@keyframes typing {
from { width: 0; }
to { width: 100%; }
}

@keyframes blink-caret {
from, to { border-color: transparent; }
50% { border-color: #e0e0e0; }
}

/* On mobile, allow the heading to wrap if needed */
@media (max-width: 600px) {
.hero .heading {
    font-size: 1.8em;
    white-space: normal;
}
}

/* Main Container Styles */
.container {
display: flex; /* Flexbox for two-column layout */
max-width: 900px;
margin: 0 auto;
background-color: #ffffff;
padding: 30px;
border-radius: 20px; /* Increased border-radius for more rounded corners */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
gap: 30px; /* Add space between the columns */
align-items: flex-start; /* ← important */
}

/* Left Column (Inputs) */
.inputs {
flex: 1; /* Take up the available space */
}

/* Change the font color of the "Finance Calculator" text to black */
h1 {
color: #333;
}

/* Right Column (Results) */
.results {
flex: 0.4; /* 40% of the container */
background-color: rgb(54, 54, 54); /* Changed to desired color */
padding: 20px;
border-radius: 15px; /* Rounded edges for results box */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
min-width: 250px; /* Ensures the results box is not too small */
height: auto; /* Make sure height is dynamic */
display: inline-block;
overflow: hidden;
}

/* Style for labels and inputs */
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #333;
}

input {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

input:focus {
  outline: none;
  border-color: #1aff2d;  /* Green border on focus */
  box-shadow: 0 0 5px 3px rgba(76, 175, 80, 0.3);  /* Focus shadow effect */
  }

/* Adjust sliders with a width of 33% */
input[type="range"] {
width: 33%;
margin-bottom: 20px;
box-shadow: none;  /* Focus shadow effect */
}

/* Slider label styles */
.slider-label {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
font-size: 1em;
color: #333; /* Same color as the other labels */
font-family: 'Fira Mono', monospace; /* Same font as the other labels */
font-weight: bold; /* Same font weight as the other labels */
padding: 0px;
}

.slider-label span {
font-size: 1em;
color: #333; /* Same color as the other labels */
font-family: 'Fira Mono', monospace; /* Same font as the other labels */
}

/* Remove number input arrows */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

input[type="number"] {
-moz-appearance: textfield;
}

/* Result section styles */
.result p {
font-size: 1.2em;
margin-bottom: 5px;
}

/* Style for the Hide Fees checkbox */
#hideFees,#isEngland, #repaymentCheck, #isCommercial {
width: 25px; /* Increase the size of the checkbox */
margin-right: 10px; /* Space between checkbox and label */
transform: scale(1.5); /* This scales the checkbox to make it bigger */
box-shadow: none;
margin-top: 19px;
}

label[for="hideFees"],
label[for="isEngland"],label[for="repaymentCheck"],label[for="isCommercial"]{
font-size: 1em; /* Increase font size of the label text */
display: flex;
align-items: center;
cursor: pointer;
}

    /* Import a nicer font from Google Fonts */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap');



/* Shared button style */
#monthlyInsurance, #annaulrent, #generateUrlBtn, #stressTestBtn, #refiStressBtn, #copyBtn, #repaymentToggle, #cashFlowChartb, #equityChartb, #vat {
  background-color: #f5f5f5; /* Off-white background */
  color: #555555; /* Grey text */
  border: none;
  border-radius: 25px;
  padding: 5px 10px;
  font-size: 16px;
  font-weight: bold;
  font-family: 'Fira Mono', monospace;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  letter-spacing: 1px;
}

/* Toggled on state */
#monthlyInsurance.active-toggle, #annaulrent.active-toggle, #generateUrlBtn.active-toggle,
#stressTestBtn.active-toggle, #refiStressBtn.active-toggle, #copyBtn.active-toggle, #repaymentToggle.active-toggle, #cashFlowChartb.active-toggle, #equityChartb.active-toggle, #vat.active-toggle {
  background-color: #7fff8a; /* Lime green */
  color: #736d6d; /* Off-white text */
}

/* Hover effect */
#monthlyInsurance:hover, #generateUrlBtn:hover,
#stressTestBtn:hover, #refiStressBtn:hover, #copyBtn:hover, #cashFlowChartb:hover, #equityChartb:hover, #vat:hover, #annaulrent:hover{
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

/* Focus */
#monthlyInsurance:focus, #generateUrlBtn:focus,
#stressTestBtn:focus, #refiStressBtn:focus, #copyBtn:focus, #repaymentToggle:focus, #cashFlowChartb:focus, #equityChartb:focus, #vat:focus, #annaulrent:focus {
  outline: none;
  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.2);
}

/* Active press */
#monthlyInsurance:active, #generateUrlBtn:active,
#stressTestBtn:active, #refiStressBtn:active, #copyBtn:active, #repaymentToggle:active, #cashFlowChartb:active, #equityChartb:active, #vat:active, #annaulrent:active {
  transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}
.input-row {
  display: flex;
  gap: 1rem;
}

.input-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  transition: flex 0.01s ease;
}
.slider-pair {
  display: flex;
  gap: 2rem;
}

.slider-group {
  flex: 1;
}

.slider-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: -20px;
}

.slider-inline input[type="range"] {
  flex: 1;
}
.slider-inline span {
  color: #007BFF; /* or whatever your original color was */
  font-weight: bold;
}
.slider-inline span {
  min-width: 3ch; /* keeps it from jumping as value changes */
  text-align: right;
}
.collapsed {
  display: none !important;
}
#rent-row {
  margin-top: 0.5rem;
  cursor: pointer;
  background-color: #2563eb;
  color: white;
  border: none;
  border-radius: 0.375rem;
  padding: 0.5rem;
  font-size: 1rem;
  margin-bottom: 1.8rem;
  font-weight: bold; /* Bold text for emphasis */
  font-family: 'Fira Mono', monospace; /* Same font family as inputs */
}

.display-box {
  margin-top: 1.5rem;
  font-weight: bold;
  font-size: 1.2rem;
}
.form-group {
  margin-bottom: 1.2rem;
}
.rent-row {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* spacing between input and button */
  margin-top: 0.25rem;
}
.rent-row input {
  flex: 1; /* makes input grow to fill space */
}
.input-row.no-gap {
  gap: 0;
}
.input-warning {
  border: 2px solid red;
  background-color: #ffe5e5;
}

.custom-tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
}

.tooltip-text {
  visibility: hidden;
  opacity: 0;
  width: max-content;
  background-color: #222;
  color: #98ffa1    ;
  text-align: center;
  padding: 6px 10px;
  border-radius: 6px;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 100;
  transition: opacity 0.3s ease;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Tooltip arrow */
.tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #222 transparent transparent transparent;
}

/* Show on hover */
.custom-tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}
.custom-tooltip.top .tooltip-text {
  bottom: 125%;
}

.custom-tooltip.bottom .tooltip-text {
  top: 125%;
  bottom: auto;
}

.custom-tooltip.bottom .tooltip-text::after {
  top: -6px;
  bottom: auto;
  transform: translateX(-50%) rotate(180deg);
}
#stressTestBtn, #refiStressBtn, #copyBtn, #repaymentToggle, #cashFlowChartb, #equityChartb {
  font-size: 16px; /* Smaller font size */
  padding: 5px 10px; /* Adjust padding to make the button smaller */
  width: auto; /* Adjust width to fit the content */
  height: auto; /* Adjust height accordingly */
}


.lime-btn {
  background-color: #32CD32; /* Lime green */
  color: white;
  font-size: 0.875rem;
  padding: 0.25rem 0.75rem;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
}

.lime-btn:hover {
  background-color: #28a428;
}
/* Style for the normal label */
#rateLabel {
  transition: color 0.2s ease;
}

/* Style when rate is above market */
.rate-warning {
  color: #ffa500; /* or red if you prefer */
  font-weight: bold;
}

/* Share button styled like others */
#shareBtn, #stampBtn {
  background-color: #f5f5f5;
  color: #555555;
  border: none;
  border-radius: 25px;
  padding: 5px 10px;
  font-size: 16px;
  font-weight: bold;
  font-family: 'Fira Mono', monospace;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  letter-spacing: 1px;
}

#shareBtn:hover, #stampBtn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

#shareBtn:focus, #stampBtn:focus {
  outline: none;
  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.2);
}

#shareBtn:active, #stampBtn:active {
  transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* Dropdown styling */
.stamp-container {
  position: relative;
  display: inline-block;
}

.share-container {
  position: relative;
  display: inline-block;
}

.share-menu {
  display: none;
  position: absolute;
  bottom: 110%; /* <--- Important change! (was top before) */
  left: 0;
  background-color: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 10;
  min-width: 220px;
}

.share-menu button {
  width: 100%;
  padding: 10px 20px;
  font-family: 'Fira Mono', monospace;
  font-size: 14px;
  font-weight: bold;
  color: #555555;
  background: #f5f5f5;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s;
}

.share-menu button:hover {
  background: #e0ffe5;
}
#toggleEngland.active, #toggleWales.active,#toggleCustom.active, #toggleComm.active, #toggleNoStamp.active {
  background-color: rgb(127, 255, 138);
  color: rgb(85, 85, 85);
}
.stamp-menu button:hover {
  background: #e0ffe5;
}
.stamp-menu {
  display: none;
  position: absolute;
  top: 110%;
  left: 0;
  background-color: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 10;
  min-width: 220px;
}

.stamp-menu button {
  width: 100%;
  padding: 10px 20px;
  font-family: 'Fira Mono', monospace;
  font-size: 14px;
  font-weight: bold;
  color: #555555;
  background: #f5f5f5;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s;
}

.stamp-menu button:hover {
  background: #e0ffe5;
}
#customStampContainer {
  font-size: 12px;
}

#customStampInput {
  width: 60px;
  padding: 2px 4px;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}


.new-dropdown {
  margin-top: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  background-color: #fff;
}

.new-dropdown button {
  display: block;
  margin: 5px 0;
  padding: 5px 10px;
  background-color: #f1f1f1;
  border: none;
  cursor: pointer;
}

.new-dropdown button:hover {
  background-color: #ddd;
}



.input-with-button {
  display: flex;
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: transparent;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.input-with-button input {
  flex: 1;
  border: none;
  padding: 10px;
  margin-bottom: 0px;
  font-size: 16px;
  background: transparent;
  outline: none;
  box-sizing: border-box;
}

.button-separator {
  width: 1px;
  background-color: #ccc;
  margin-top: 6px;
  margin-bottom: 6px;
}

.input-with-button button {
  border: none;
  background-color: transparent;
  padding: 0 12px;
  cursor: pointer;
  font-size: 16px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}