/* Pricing specific css - good luck future me to make this all modular with storybook like a normal person - Oh! Who are you? If you're reading this - theres more interesting stuff on our actual webpage. Why not check out the actual content there. The code of this website is very much a work in progress.*/
.form-subtitle{
    font-weight: bold;
    margin-bottom: 15px;
}

.plus-margin{
    margin-bottom: 20px;
}

.no-margin{
    margin-bottom: 0px;
}

.form-input-section{
    margin-bottom: 50px;
}

.italic{
    font-style: italic;
}

.bold{
    font-weight: bold;
}

.text-image-intra-body.yearly-price.small {
    grid-column: 1 / -1;
    justify-self: start; 
    text-align: left;
    margin-top: 10px;
}

.footnotes {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    grid-column: 1 / -1; /* Span all grid columns */
    gap: 5px; /* Small gap between footnotes */
}

.footnotes p {
    margin: 0; /* Remove default paragraph margins */
}

.small {
    font-size: 12px;
    color: #666;
}

.pricing-section{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column: 1 / 13;
}

.input-section{
    grid-column: 1 / 5;
}

.calculation-section{
    grid-column: 6 / 13;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 80px 0 rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(4px);
    padding: 30px;
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 equal columns */
    gap: 20px; /* gutter between columns */
    margin: 40px 0; /* vertical spacing outside */
    align-items: start;   /* align items to top of their cells */
    justify-items: start; /* align items to the left of their cells */
}

.grid-button{
    grid-column: 1 / -1;
}

.pricing-table{
    grid-column: 1 / -1;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 internal columns */
    gap: 20px; /* gutter between columns */
}

.pricing-table .form-input-field{
    grid-column: 1 / 5;
}

.pricing-title{
    color: #1B1B1B;
    font-size: 36px;
    font-weight: 800;
    word-wrap: break-word;
    overflow-wrap: break-word;
    grid-column: 1 / -1;
    width: 100%;
}

.text{
    grid-column: 1 / 5;
}

.monthly-price{
    grid-column: 5 / 6;
    width: 100%;
    justify-self: end; /* align the element to the right within its grid cell */
    text-align: right; /* aligns text inside the element */
}

.yearly-price{
    grid-column: 6 / 7;
    justify-self: end; /* align the element to the right within its grid cell */
    text-align: right; /* aligns text inside the element */
}


.input-field {
    margin-top: 15px;
    display: flex;
    width: 100%;
    height: 60px;
    padding: 0 15px;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    border-radius: 6px;
    border: 2px solid #FFB09D;
}

.form-input-field{
    margin-bottom: 25px;
}

.checkbox-input-field{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 15px;
}

.checkbox-input-field .checkbox {
    display: flex;         /* make label a flex container */
    align-items: center;   /* center the span inside the label */
  }

/* Hide native checkbox */
.checkbox input {
    display: none;
  }
  
  /* Base (not checked) */
  .checkbox span {
    display: inline-block;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    aspect-ratio: 1/1;
    border-radius: 5px;
    border: 2px solid #FFB09D;
    position: relative;
    cursor: pointer;
  }
  
  /* Checked */
  .checkbox input:checked + span {
    background: #FFB09D;
    border: none;
  }
  
  /* Tick mark */
  .checkbox input:checked + span::after {
    content: "";
    position: absolute;
    left: 9px;
    top: 4px;
    width: 8px;
    height: 14px;
    border-right: 3px solid #FFF;
    border-bottom: 3px solid #FFF;
    transform: rotate(45deg);
  }
  
  /* Disabled checked */
  .checkbox input:checked:disabled + span {
    background: #D9D9D9;
  }


  /* Mobile responsive styles for pricing page */
@media (max-width: 1024px) {
    .pricing-section {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .input-section {
        grid-column: 1;
    }
    
    .calculation-section {
        grid-column: 1;
        margin: 0;
    }
}

@media (max-width: 768px) {
    .main-grid {
        grid-template-columns: 1fr;
    }
    
    .pricing-section {
        grid-column: 1;
    }
    
    .input-section {
        margin-bottom: 30px;
    }
    
    .calculation-section {
        padding: 20px;
        margin: 0;
        grid-template-columns: 1fr;
    }
    
    .pricing-table {
        grid-column: 1;
        grid-template-columns: 2fr 1fr 1fr; /* Keep 3 columns: description, monthly, yearly */
        gap: 10px 15px;
    }
    
    .pricing-title {
        font-size: 28px;
        margin-bottom: 20px;
        grid-column: 1 / -1;
    }
    
    .text {
        grid-column: 1;
        font-size: 14px;
    }
    
    .monthly-price {
        grid-column: 2;
        font-size: 14px;
        text-align: right;
    }
    
    .yearly-price {
        grid-column: 3;
        font-size: 14px;
        text-align: right;
    }
    
    /* Form adjustments */
    .input-field {
        height: 50px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .checkbox-input-field {
        margin-bottom: 12px;
    }
    
    .form-subtitle {
        margin-bottom: 12px;
    }
    
    /* Fix checkbox tick positioning */
    .checkbox span {
        width: 25px;
        height: 25px;
    }
    
    .checkbox input:checked + span::after {
        left: 7px;
        top: 2px;
        width: 6px;
        height: 12px;
        border-right: 2px solid #FFF;
        border-bottom: 2px solid #FFF;
    }
}

@media (max-width: 480px) {
    .calculation-section {
        padding: 15px;
    }
    
    .pricing-table {
        gap: 8px 12px;
    }
    
    .pricing-title {
        font-size: 24px;
    }
    
    .text {
        font-size: 13px;
    }
    
    .monthly-price,
    .yearly-price {
        font-size: 13px;
    }
    
    .input-field {
        height: 45px;
        font-size: 16px;
    }
    
    /* Smaller checkbox for very small screens */
    .checkbox span {
        width: 22px;
        height: 22px;
    }
    
    .checkbox input:checked + span::after {
        left: 6px;
        top: 2px;
        width: 5px;
        height: 10px;
        border-right: 2px solid #FFF;
        border-bottom: 2px solid #FFF;
    }
}


/* No Spinners */
/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* General input text */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"] {
  font-size: 1rem;      /* text size */
  font-weight: 400;     /* text weight */
  color: #333;          /* text color */
  border: 2px solid #FFB09D;
  border-radius: 6px;
  background-color: #fff;
  box-sizing: border-box;
}