﻿.ca-tabs {
    --bg-colour: var(--colour-secondary-alt-8);
    --bg-colour-active: #393d46;
    --colour: var(--colour-secondary-alt-1);
    --colour-active: var(--colour-lighten-85);
    --border-colour: var(--colour-secondary-alt-7);
    --tab-padding: 0.8em 1.2em;
    margin: 0 0 0.42em;
    background-color: var(--bg-colour);
    color: var(--colour);
    border-bottom: 1px solid var(--border-colour);
    list-style: none;
    display: inline-grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    justify-content: stretch;
}

.ca-tabs > li {
    margin: 0;
}

.ca-tabs .ca-tab {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    border: none;
    background-color: transparent;
    color: var(--colour);
    margin: 0;
    padding: var(--tab-padding);
    flex: 1;
    transition:  var(--btn-out);
}
.ca-tabs .ca-tab:focus,
.ca-tabs .ca-tab:hover {
	transition:  var(--btn-in);
}

.ca-tabs .ca-tab + .ca-tab-panel,
.ca-tabs .ca-tab-list-item + .ca-tab-list-item .ca-tab {
    border-left: 1px dotted #0005;
}

.ca-tabs .ca-tab[aria-selected="true"],
.ca-tabs .ca-tab:has(:checked) {
    --divider-colour: var(--divider-colour-active);

    background-color: var(--bg-colour-active);
    color: var(--colour-active);
}

.ca-tabs .ca-tab::after {
    --aspect: 0.38;
    --width: 1.6rem;
    --height: calc(var(--width) * var(--aspect));
    content: "";
    position: absolute;
    width: var(--width);
    height: var(--height);
    /*top: calc(100% - 1px);*/
    /*bottom: calc(var(--height) * -1);*/
    top: 100%;
    clip-path: polygon(50% 100%,100% 0,0 0);
    background-color: transparent;
    /*translate: 0 calc(var(--height) * -1);*/
    transition: inherit;
}
.ca-tabs .ca-tab.active::after,
.ca-tabs .ca-tab:has(:checked)::after,
.ca-tabs .ca-tab[aria-selected="true"]::after {
    /*height: var(--height);*/
    /*content: "";
    position: absolute;
    top: 100%;
    width: 1.6rem;
    aspect-ratio: 2.62;
    clip-path: polygon(50% 100%,100% 0,0 0);*/
    background-color: var(--bg-colour-active);
    /*translate: 0;*/
    transition: inherit;
}


/* Lease product tabs */

.ca-tabs.lease-product-tabs {
    /*--bg-colour: var(--colour-secondary-light-3);
  --bg-colour-active: #45869d;*/
    grid-auto-columns: 1fr;
    justify-content: start;
    /*background-image: linear-gradient(#45869d22, 10%, var(--bg-colour));
      background-size: 100% 1rem;
      background-repeat: no-repeat;*/
}
.ca-tabs.lease-product-tabs.tab-count-1,
.ca-tabs.lease-product-tabs.tab-count-2 {
    grid-auto-columns: minmax(max-content, 0.333fr);
}

.ca-tabs.lease-product-tabs .ca-tab {
    padding: 1em 1.62em 1em;
    background-image: linear-gradient(transparent, 62%, #d6e5e800);
}
.ca-tabs.lease-product-tabs .ca-tab:hover {
  background-image: linear-gradient(transparent, 62%, #d6e5e8cc);
}
.ca-tabs.lease-product-tabs .ca-tab[aria-selected="true"]:hover,
.ca-tabs.lease-product-tabs .ca-tab:has(:checked):hover {
    background-image: linear-gradient(transparent, 62%, #d6e5e800);
}
.ca-tabs.lease-product-tabs .ca-tab-list-item{
    position: relative;

}
.ca-tabs.lease-product-tabs .ca-tab-list-item ~ .ca-tab-list-item::before {
    content:"";
    position: absolute;
    left: 0 ;
    top: 0;
    bottom: 0;
    width: 1px;
    border-left: 1px solid #fff;
}

.filters .ca-tab-panel {
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
}
.lease-product-tabs .title {
    --letter-spacing: var(--letter-spacing-display);
    --text-wght: var(--font-weight-bold);
    --text-opsz: 25;
    font-size: 1.125rem;
    font-size: var(--font-size-h4);
    line-height: var(--heading-line-height);

    text-align: center;
  white-space: nowrap;
  padding-bottom: 0.38em;
  border-bottom: 1px solid var(--divider-colour);
  align-self: stretch;
}

.lease-product-tabs .sub-title {
    --text-wght: var(--font-weight-light);
    --text-opsz: 14;
    font-size: 0.8em;
    line-height: 1;
    /*margin-bottom: 0.62em;
    margin-top: 0.38em;*/
    margin: 0.62em 0 0.12em
}

.lease-product-tabs .price {
    margin: 0 0 0.38em;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
  align-items: center;
  gap: 0;
    font-size: calc(var(--font-size-h2) * 0.8);
    line-height: 1;
    font-size: var(--fs-2-rem);
}

.lease-product-tabs .price .amount {
    --text-wght: var(--font-weight-bold);
    /* font-size: calc(var(--font-size-h2) * 1); */
}

.lease-product-tabs .price .description {
    --text-wght: 450;
    --text-opsz: 24;
    --font-settings: var(--font-settings-text);
    --letter-spacing: var(--letter-spacing-normal);
    font-size: .4em;
    margin: 0.12em 0 0 0;
}

.lease-product-tabs .term {
    --text-wght: var(--font-weight-light);
    --text-opsz: 14;
    font-size: 0.8em;
}

.lease-product-tabs .term .description {
}
