/* Declare variables to align with DOC's style guide */
:root{
    /* Primary Colours */
    --DOC-green-100: #47665e;
    --DOC-green-500: #194036;
    --DOC-green-dark: #133029;
    --DOC-gold: #ffc51d;
    --DOC-gold-dark: #BE8D00;
    --maui-600: #384246;
    --maui-300: #e6e7e8;
    --white: #fff;
    --black: #000;
    --button-disabled: #adb8b5;
    /* Caution */
    --DOC-red: #e11836;
    --DOC-red-hover: #B1001A;
    --DOC-red-disabled: #fce8eb;
    /* Accent Colours */
    --ranginui-500: #1579b7;
    --ranginui-700: #186696;
    --papatuanuku-500: #507f39;
    --papatuanuku-800: #3ef72b;
    --ata-whenua-500: #4c3657;
    --ata-whenua-800: #392940;
    --weta-500: #80331a;
    --weta-800: #602514;
    --tuatua: #e0dcce;
    --tara-iti: #f5f4f2;
    --placeholder-text: #7b7b7b;
    /* Links */
    --DOC-link-500: #0066a4;
    --DOC-link-700: #004b7a;
}

/* View transitions */
@view-transition {
  navigation: auto;
}

/* Old view: fade out ASAP */
::view-transition-old(root) {
  animation: fadeOut 180ms cubic-bezier(.4, 0, 1, 1) both;
}

/* New view: start a touch later so layers don't overlap at full opacity */
::view-transition-new(root) {
  animation: fadeIn 200ms cubic-bezier(0, 0, .2, 1) both 70ms; /* 70 ms delay */
}

/* Keyframes */
@keyframes fadeOut { to { opacity: 0; } }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }

/* Respect accessibility prefs */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 20
}

@font-face {
    font-family: 'ClearSans';
    src: url("/clearsans-regular"); /* Stored as Web File */
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'ClearSans';
    src: url("/clearsans-bold"); /* Stored as Web File */
    font-weight: 700;
    font-style: normal;
}

.text-sans { 
    font-family: 'ClearSans', sans-serif !important;
}

/* Media Queries */
@media (max-width: 575.98px){
    .form-step-row{
        flex-direction: column-reverse;
    }

    #back-button,
    #submit-button{
        width: 100%;
        padding: 10px;
    }

    #back-button{
        margin-top: 20px;
    }

    #standard-conditions-button{
        padding: 10px 15px;
    }
}
/* Styles Overrides for Portal */

body{
    background-color: #f5f4f2 !important;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.wrapper-body{
    min-height: unset !important;
    flex: 1;
}

h1, h2, h3, h4, h5{
    font-family: 'Zilla Slab', Serif !important;
    color: var(--maui-600) !important;
}

h1{
    font-weight: 400;
}

:focus{
    outline: none !important;
}

:focus-visible{
    outline: 4px solid var(--DOC-green-100)!important;
    box-shadow: 0 0 0 1px var(--white) !important;
    outline-offset: 2px !important;
}

.main-heading{
    padding: 10px 25px;
    margin-bottom: 0;
    background-color: var(--white);
    display: inline-block;
    /* box-shadow: 0px 2px 2px 0px #0000000a; Nice box-shadow to use after re-designing Rakiura application UI */
    position: relative;
    z-index: 10;
}

h2, h3, h4, h5{
    font-weight: 500;
}

p.siteTitle{
    display: none !important;
}

p, ul li, ol li, a, span, label, select, input, button, .alert{
    font-family: 'ClearSans', sans-serif !important;
    font-weight: 400;
}

p, ul li, ol li, label, select, input{
    color: var(--maui-600) !important;
}

.custom-container,
.global-alert-container{
    max-width: 1024px !important;
}

.global-alert-container{
    font-size: .9em !important;
}

.fieldnote {
    color: var(--maui-600) !important;
    margin-bottom: 1em;
    font-size: .9em !important;
}

.fieldnote a{
    font-size: inherit;
}

.subscription-checkbox {
    border-color: #384246;
    border-width: 1px;
    border-style: solid;
    accent-color: #384246;
    width: 1.5em;
    height: 1.5em;
}

.ck-content ul{
    list-style-position: outside !important;
}

/* Remove arrows from postcode/OTP input (WebKit/Blink browsers) */
#address1_postalcode::-webkit-outer-spin-button,
#address1_postalcode::-webkit-inner-spin-button,
#otp-code::-webkit-outer-spin-button,
#otp-code::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* Remove arrows in Firefox */
#address1_postalcode,
#otp-code {
  -moz-appearance: textfield;
}

.alert{
    border-radius: 0;
    display: flex;
}

.alert-success{
    background-color: var(--papatuanuku-500);
    border-color: var(--papatuanuku-500);
    color: var(--white) !important;
}

.alert-danger{
    background-color: var(--DOC-red);
    border-color: var(--DOC-red);
    color: var(--white) !important;
}

.alert-warning {
    background-color: var(--DOC-gold);
    border-color: var(--DOC-gold);
    --bs-text-opacity: 1;
    color: rgba(var(--bs-dark-rgb),var(--bs-text-opacity))
}

.alert .material-symbols-outlined{
    margin-right: .5em;
}

/* Sign in Page */
ul.nav.nav-tabs.nav-account{
    display: none;
}

/* Top Nav */
.skip-link{
    position: absolute;
    left: -999px;
    width: 1px;
    height: 1px;
    top: auto;
}

.skip-link:focus,
.skip-link:focus-visible{
    color: var(--black);
    display: inline-block;
    height: auto;
    width: auto;
    margin: 5px;
    position: static;
}

.navbar{
    border-top: 20px solid #ffc51d;
}

.static-top.navbar-dark{
    border-color: #ffc51d;
}

.static-top.navbar-dark .navbar-brand a:hover{
    text-decoration: none !important;
}

.navbar-brand{
    padding: 0px;
}

button.navbar-toggler{
    margin: 0;
}

#header-logo-container{
    font-weight: 400;
    font-size: 14px;
}

a:hover{
    text-decoration: none;
}

.navbar-nav>li>a{
    padding: 1em !important;
}

a.nav-link{
    margin: 0 !important;
}

a.nav-link,
button.nav-link,
p.siteTitle{
    color:#fff !important;
}

.navbar-toggler{
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none;
    border-radius: 0 !important;
    padding: 10px !important;
}

.navbar-dark .navbar-toggler:hover,
.navbar-dark .navbar-toggler:focus{
    border: 1px solid var(--white) !important;
    box-shadow: 0 0 0 2px var(--DOC-green-100);
}

.navbar-dark .navbar-nav > li > a:focus,
.navbar-dark .navbar-nav > li > button:focus,
.navbar-dark .navbar-nav > li.dropdown > a:focus,
.navbar-dark .navbar-nav > li > a:focus-visible,
.navbar-dark .navbar-nav > li > button:focus-visible,
.navbar-dark .navbar-nav > li.dropdown > a:focus-visible{
    background-color: transparent !important;
    text-decoration: none !important;
}

.navbar-dark .navbar-nav > li > a:focus{
    border: none !important;
}

.navbar-dark .navbar-nav > li > a:hover, 
.navbar-dark .navbar-nav > li > button:hover, 
.navbar-dark .navbar-nav > li.dropdown > a:hover{
    background-color: transparent !important;
    text-decoration: none !important;
    box-shadow: inset 0 -5px 0 0px #fff !important;
}

.navbar-dark .navbar-nav > li > a:focus,
.navbar-dark .navbar-nav > li.dropdown > a:focus{
    text-decoration: none !important;
}

.account-toggle.dropdown-toggle::after{
    display: none;
}

#main-header {
    background-color: #123a34; 
}

#main-header .nav-link { font-size: 1rem; }
#main-header .nav-link .material-symbols-outlined { line-height: 1; }

#main-header .cart-badge,
#main-header .cart-badge-mobile { font-weight: 700; }

/* Remove default caret gap on dropdown button in desktop header */
#main-header .dropdown-toggle::after { 
    margin-left: 0;
    border: none; 
}

#main-header .navbar-nav .show.dropdown-menu{
    background-color: var(--white);
    border-radius: 0;
    border: 1px solid var(--maui-600);
    padding: 0;
}

#main-header a.dropdown-item{
    color: #384246 !important;
    padding: 1em !important;
    border: 1px solid transparent !important;
}

#main-header a.dropdown-item:focus-visible{
    border: 1px solid var(--maui-600) !important;
}

#main-header li a.dropdown-item:hover{
    background-color: var(--maui-300);
    text-decoration: none !important;
}

#main-header .dropdown-menu > li:not(:last-child) > .dropdown-item {
    border-bottom: 1px solid var(--maui-600) !important;
}

#mobile-account-dropdown .list-unstyled > li:first-child > a {
    border-bottom: 1px solid var(--DOC-green-500);
}

#main-header #cart-button-container{
    border: 3px solid var(--DOC-gold) !important;
    transition: none !important;
    padding: .75em !important;
}

#main-header #cart-button-container:is(:hover, :focus-visible){
    background-color: var(--DOC-gold) !important;
    box-shadow: none !important;
}

#main-header #cart-button-container:is(:hover, :focus-visible) #shopping-cart-icon{
    color: var(--DOC-green-500);
}

#main-header #cart-button-container #shopping-cart-icon{
    color: var(--DOC-gold);
}

#main-header #cart-button-container .cart-badge{
    background-color: var(--DOC-gold);
    color: var(--DOC-green-500);
}

#main-header #cart-button-container:is(:hover, :focus-visible) .cart-badge{
    background-color: var(--DOC-green-500);
    color: var(--DOC-gold) !important;
}

.cart-badge{
    line-height: normal;
}

#mobile-menu .navbar-nav .nav-item .nav-link:is(:hover, :focus-visible){
    box-shadow: none !important;
    text-decoration: none !important;
}

#mobile-menu > .navbar-nav > .nav-item > .nav-link:is(:hover, :focus-visible){
    background-color: var(--DOC-green-100) !important;
}

#mobile-account-dropdown .nav-link:is(:hover, :focus-visible){
    background-color: var(--tuatua) !important;
}

#mobile-menu .mobile-nav-text{
    line-height: normal;
}

#mobile-menu button[data-bs-target="#mobile-account-dropdown"] > .material-symbols-outlined{
  transition: transform .18s ease;
}

#mobile-menu button[data-bs-target="#mobile-account-dropdown"][aria-expanded="true"]
  > .material-symbols-outlined{
  transform: rotate(180deg);
}

#mobile-menu .cart-badge{
    background-color: var(--DOC-gold);
    color: var(--DOC-green-500);
}

/* Dropdown Button (Home Page) */
.doc-dd-button {
    border-radius: 0;
    padding: .75em 1.5em;
}

.doc-dd-button::after {
    margin-left: 15px;
}

.doc-dd-item:hover{
    background-color: var(--maui-300) !important;
    color: var(--maui-600) !important;
}

.doc-dd-item:focus{
    background-color: var(--maui-300) !important;
    color: var(--maui-600) !important;
}

.doc-dd-item:focus-visible{
    box-shadow: inset 0 0 0 3px var(--DOC-green-100) !important;
    outline: none !important;
}

.doc-dd-menu {
    border: 1px solid var(--maui-600);
    border-radius: 0;
    padding: 0;
}

.doc-dd-item {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    color: var(--maui-600) !important;
}

.doc-dd-menu > li:not(:last-child) {
    border-bottom: 1px solid var(--maui-600);
}

/* Footer */
footer .footer-bottom{
    background-color: var(--DOC-green-500) !important;
    padding: 25px 0px;
}

#footer-logo{
    height: 4em;
}

/* Pipes between links – evenly spaced, no trailing pipe */
.footer-links li {
  position: relative;
}

.footer-links li a,
.footer-links li:after{
    font-size: 12px !important;
    color: var(--white) !important;
}

.footer-links li a{
    margin: 0 !important;
}

.footer-links li:not(:last-child)::after {
  content: "|";
  display: inline-block;
  margin-left: 1em;
  margin-right: 1em;
}

/* Components */
.card{
    overflow: hidden;
}

#conditions-container{
    padding: 0 22px;
}

/* Links */
.doc-link{
    color: #0066a4;
    text-decoration: underline !important;
    cursor: pointer;
}

.doc-link:visited,
.doc-link:hover{
    color: #004b7a;
}

.doc-link-external{
    display: inline-flex;
    align-items: center;
    font-size: 1em !important;
}

a.doc-link.doc-link-external{
    text-decoration: none !important;
}

.doc-link-external:hover{
    text-decoration: none !important;
}

.doc-link-external span{
    font-size: 1.2em;
    margin-left: .2em;
    text-decoration: none !important;
    color: inherit !important;
}

.doc-link-block{
    padding: 1.5em 1em;
    text-decoration: none !important;
    background-color: var(--maui-300);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .9em !important;
}

.block-name-link{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.block-name-link svg{
    margin-left: 2px;
}

/* Restricted Hunting Page */
#home-title{
    font-weight: bold;
    color: var(--maui-600);
    margin-top: 0px;
    margin-bottom: 20px !important;
}

/* Forms */
.crmEntityFormView{
    border: 1px solid #253f37;
    padding: 20px 0 0 0;
}

.crmEntityFormView .actions{
    border-top: none;
    padding: 0 20px;
}

.crmEntityFormView fieldset{
    margin-bottom: 0;
}

.crmEntityFormView .cell{
    padding: 0 20px 20px;
    border: none;
}

.form-control{
    border-radius: 0;
}

.form-control:focus,
.form-control:focus-visible{
    box-shadow: 0 0 0 .2em var(--DOC-green-100);
}

.form-control:disabled,
input.readonly{
    background-color: var(--tara-iti) !important;
    border-color: var(--maui-300) !important;
}

input.form-control,
textarea.form-control{
    border: 1px solid #253f37;
}

legend.section-title{
    padding: 0 20px;
}

legend.section-title h3{
    margin-top: 10px;
}

.grid-actions{
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 10px;
}

.view-grid th{
    background-color: #253f37;
}

.view-grid th a{
    color: #fff;
}

/* Page Container */
.page-content-container{
    margin:.5em 0;
    flex: 1;
}

/* Home Card */
.home-card-link:hover{
    background-color: var(--tara-iti);
}

.home-card-link .card,
.home-card-link .card-body{
    background-color: transparent !important;
}

.home-card-link .card-title,
#book-services-heading{
    font-family: 'ClearSans', sans-serif !important;

}

/* Step Counter */
.step-container {
    padding: 0 0 10px 0;
    max-width: 400px;
}

#step-icon-container, #step-text-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 500px;
    margin: auto;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
}

.circle {
    width: 30px;
    height: 30px;
    background-color: #e0dcce;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: var(--maui-600) !important;
}

.circle.active {
    background-color: #FFC107;
    font-weight: bold;
}

.line {
    height: 2px;
    background-color: #e0e0e0;
    flex-grow: 1;
}

.step-text {
    margin-top: 10px;
    color: #333;
    font-size: 12px;
    color: var(--maui-600) !important;
}

.step-text a{
    font-size: 12px;
}

.step + .step .line {
    margin-right: 10px;
    margin-left: 10px;
}

/* Form Session Timer Countdown */
#timer-remaining-container{
    text-align: center;
    transition: background-color 0.6s ease;
}

/* Normal / Urgent backgrounds (tweak as needed) */
#timer-remaining-container.timer-normal { background-color: var(--white); }
#timer-remaining-container.timer-urgent { background-color: var(--DOC-gold) !important; } 


#timer-remaining-container.timer-highlight-pulse {
    background-color: var(--DOC-gold) !important;
     animation: timerPulse 1.2s ease-in-out 2;
}

/* Subtle pulse using box-shadow + bg intensity */
@keyframes timerPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 197, 29, 0.0);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(255, 197, 29, 0.5);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 197, 29, 0.0);
    }
}


/* TEXT-ONLY shimmer */
#timer-remaining-text.timer-shimmer {
    position: relative;
    display: inline-block;
    overflow: hidden; /* clip the highlight band */
}

#timer-remaining-text.timer-shimmer::after {
    content: "";
    position: absolute; 
    inset: 0;
    left: -150%; 
    width: 50%; 
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
    animation: shimmerHighlight 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shimmerHighlight {
    0% { left: -150%; }
    70% { left: 150%; }
    100% { left: 150%; } /* stay “parked” offscreen for last 30% */
}

/* Contextual shimmer color overrides based on CONTAINER state */
#timer-remaining-container.timer-urgent  #timer-remaining-text.timer-shimmer::after {
  background: linear-gradient(120deg, transparent 0%, rgba(255,197,29,0.5) 50%, transparent 100%);
}
#timer-remaining-container.timer-highlight-pulse #timer-remaining-text.timer-shimmer::after {
  background: linear-gradient(120deg, transparent 0%, rgba(255,197,29,0.5) 50%, transparent 100%);
}

/* Reduced motion: no pulse, no shimmer */
@media (prefers-reduced-motion: reduce) {
  #timer-remaining-container.timer-highlight-pulse { animation: none !important; }
  #timer-remaining-text.timer-shimmer::after { animation: none !important; opacity: 0; }
}

#timer-number{
    font-family: Zilla Slab, serif;
}

/* Booking Availability Page */
/* Buttons */
#doc-main-buttons-col{
    text-align: center;
    padding: 25px 25px 0 25px;
}

.doc-main-button{
    display: inline-block;
    padding: 10px 35px;
    border: 1px solid #194036;
    background-color: #e0dcce;
    color: #384246;
    transition: background-color 0.3s, color 0.3s;
}

.doc-main-button:hover,
.doc-main-button.selected{
    background-color: #194036;
    color: #fff;
}

#doc-book-buttons-container{
    max-width: 700px;
}

#book-by-block-button-container{
    display: flex;
    justify-content: center;
}

#book-by-block,
#book-by-dates{
    width: 100%;
}

#book-by-block-button{
    width: 50%;
    display: flex;
    padding: 10px 20px;
    text-align: center;
    margin-top: 20px;
    justify-content: center;
    margin-bottom: 20px;
}

#book-by-block-button.unavailable {
    background-color: #e0dcce;
    color: #384246;
}

#min-days-slider{
    accent-color: var(--DOC-green-500);
    border: none !important;
}

button.month-btn.flexible-dates-month-button.btn.btn-outline-secondary{
    color: var(--maui-600);
    border: none;
    border-radius: 10px;
    box-shadow: inset 0 0 0 2px var(--placeholder-text);
    padding: .4em .9em;
}

button.month-btn.flexible-dates-month-button.btn.btn-outline-secondary:hover
{
    background-color: #507F3933;
    box-shadow: inset 0 0 0 2px var(--papatuanuku-500);
    outline: none;
}

button.month-btn.flexible-dates-month-button.btn.btn-outline-secondary:focus,
button.month-btn.flexible-dates-month-button.btn.btn-outline-secondary:focus-visible{
    background-color: #507F3933;
    box-shadow: 0 0 0 4px #000;
    outline: none;
}

button.flexible-dates-month-button.month-btn.btn.btn-outline-secondary.disabled{
    background-color: var(--DOC-red-disabled);
    box-shadow: inset 0 0 0 5px var(--DOC-red-disabled);
}

button.month-btn.flexible-dates-month-button.btn.btn-outline-secondary.btn-success{
    background-color: #507F3933;
    box-shadow: inset 0 0 0 5px var(--papatuanuku-500);
}

.flexible-dates-block-card-container{
    background-color: var(--tara-iti);
}

.flexible-dates-block-card-container h2{
    font-family: 'ClearSans' !important;
    font-weight: 700;
    font-size: 1em;
}

.datepicker-container input::placeholder{
    color: var(--placeholder-text) !important;
}

/* End Buttons */

.availability-fields label{
    padding:  10px 0;
}
.availability-fields input,
.availability-fields select{
    padding:  8px 13px;
    margin-bottom: 5px;
    width: 100%;
    background-color: #ffffff78;
    border: 1px solid #3b4246;
    border-radius: 0;
}

#availability-table{
    margin-top: 20px;
}

#availability-table thead tr{
    background-color: #253f37;
}

#availability-table thead tr th{
    border: 1px solid #4f655f;
    color: #fff;
}

.availability-table-book-button{
    width: 100% !important;
    text-align: center;
}

table {
    border-collapse: collapse;
    width: 100%;
}

.table-header-row{
    background-color: #253f37 !important;
    color:#fff;
}

.table-header-row th{
    border: 1px solid #4f655f;
}

tr{
    background-color: #f5f4f3;
    border-width: 1px 0;
}

tr:nth-child(odd) {
    background-color: #fff;
}

td{
    border-color: #e7e7e9 !important;
    border-width: 1px !important;
}

th, td {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

table.doc-block-details td:first-child {
  white-space: nowrap;
  width: 1px;
  padding-left: 0;
}

table.doc-block-details td {  
  border-color: transparent !important;
}

th{
    border-width: 0 1px;
}

.permit-exists{
    background-color: lightcoral;
    border-left:none;
    border-right:none;
    text-align-last:center;
}

tr td.permit-exists:first-child{
    color:blue;
}

.block-header{
    min-width: 150px;
}

/* Sticky block header (the "Block" text at top-left) */
.sticky-block-header {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 11;
    border-right: 1px solid #dee2e6;
}

/* Sticky block name cells (each block name in the left column) */
.sticky-block-cell {
    position: sticky;
    left: 0;
    background-color: inherit !important; /* Inherit the row's background color */
    z-index: 9;
    border-right: 1px solid #dee2e6;
}

/* Ensure striped rows work with sticky cells */
.table-striped > tbody > tr:nth-of-type(odd) > .sticky-block-cell {
    background-color: var(--bs-table-striped-bg, rgba(0, 0, 0, 0.05)) !important;
}

.table-striped > tbody > tr:nth-of-type(even) > .sticky-block-cell {
    background-color: var(--bs-table-bg, #ffffff) !important;
}

/* Handle hover states for sticky cells */
.table-hover > tbody > tr:hover > .sticky-block-cell {
    background-color: var(--bs-table-hover-bg, rgba(0, 0, 0, 0.075)) !important;
}

.yes {
    background-color: #253f37 ;
    color: #fff;
}

.yes:hover {
    background-color: #186696;
    text-decoration: none !important;
    color: #fff;
}

.yes, .no {
    display: block;
    width: 100%;
    height: 100%;
    padding: 4px;
    text-align: center;
    font-size: 14px;
}

#processingMsg {
    width: 100%;
    text-align: center;
    padding: 6px 10px;
    z-index: 9999;
    position: relative;
    -webkit-border-radius: 0 0 2px 2px;
    border-radius: 0 0 2px 2px;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    display: none;
}

/* Map Section */
#map-legend-container{
    background-color: var(--DOC-green-500);
    color: #fff;
    padding: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.map-legend-item{
    border: 2px solid var(--white);
    width: 20px;
    height: 20px;
    display: inline-block;
}

#map-legend-available,
#map-legend-unselected{
    background-color: var(--DOC-green-100);
}

#map-legend-unavailable{
    background-image: repeating-linear-gradient(135deg, transparent, #253f37 1px, transparent 2px, transparent 6px);
    background-color: var(--white);
}

#map-legend-selected{
    background-color: var(--DOC-gold);
}

#map-legend-container span{
    margin: 0 25px 0 10px;
}

#map-zoom-controls-container{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    z-index: 1;
    margin: 10px 0 0 10px;
}

#zoom-button-group{
    box-shadow: 0px 2px 6px #00000042;
    display: flex;
    flex-direction: column;
}

#map-zoom-controls-container button{
    border: none;
    height: 40px;
    width: 40px;
    transition: background-color 0.3s, color 0.3s;
}

#map-zoom-controls-container button:hover{
    background-color:#fff;
}

#map-zoom-controls-container #zoom-in{
    border-bottom: 1px solid #dfdfdf;
}

#map-zoom-controls-container #zoom-reset{
    margin-top: 10px;
    box-shadow: 0px 2px 6px #00000042;
}

.map-block{
    stroke-width: 3px;
    stroke: var(--white);
}

.map-block.molesworth{
    stroke-width: 1px !important;
}

.block-available{
    fill: var(--DOC-green-100);
}

.block-selected{
    fill: var(--DOC-gold);
}

.block-unselected{
    fill: var(--DOC-green-100);
}

.highlighted {
    fill: var(--DOC-gold); 
    stroke-width: 3px;
}
/* End Booking Availability Page */

/* Container Elements */
.doc-container{
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #e3e3e3;
    background-color: #FEFEFE;
}

.doc-main-container{
    max-width: 996px;
    margin: 0 auto;
    padding: 0 .5em;
}

.doc-container-large{
    padding: 25px;
    margin-bottom: 10px;
    background-color: var(--white);
    /* box-shadow: 0px 2px 2px 0px #0000000a; Nice box-shadow to use after re-designing Rakiura application UI */
    position: relative;
    z-index: 20;
}

#pick-regions-info-container{
    display: flex;
    align-items: flex-start;
}

/* Booking Form */
#booking-form h3{
    margin-top:0;
}

.form-step-description{
    font-size: 14px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-check-input[type=checkbox]{
    border-radius: 0;
    border-color: #384246;
}

.form-check-input:checked{
    background-color: #194036;
    border-color: #384246;
}

.form-check-input:focus,
.form-check-input:focus-visible{
    border-color: #384246;
    box-shadow: 0 0 0 1px #fff,0 0 0 4px #47665e;
}

/*override bootstrap to meet accessable contrast ratio */
.form-check-input.is-invalid:focus, .form-check-input:invalid:focus {
    box-shadow: 0 0 0 .25rem rgb(220 53 69 / 80%) !important;
}

.form-check label{
    font-weight: normal;
}

input,
textarea,
select{
    width: 100%;
    padding: 8px;
    border: 1px solid var(--maui-600) !important;
    box-sizing: border-box;
    margin-bottom: 10px;
    background-color: #FEFEFE;
}

.doc-button, .calendar-button{
    padding: 1em 2em;
    line-height: 1em;
    border: 1px solid;
    cursor: pointer;
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    outline: none;
    font-size: 1em;
}

.doc-icon-button > :first-child{
    padding-right: .5em;
}

.doc-icon-button .button-text{
    padding-top: .1em;
}

.doc-primarybutton.doc-icon-button .material-symbols-outlined{
    color: var(--white);
}

.doc-primary-button.doc-icon-button:hover .material-symbols-outlined{
    color: var(--white);
}

.doc-secondary-button.doc-icon-button .material-symbols-outlined{
    color: var(--maui-600);
}

.doc-secondary-button.doc-icon-button:hover .material-symbols-outlined{
    color: var(--white);
}

a.doc-button:hover,
.doc-button:hover{
    text-decoration: none !important;
}

.calendar-button
{
    padding: 10px 15px;
}

.doc-button:focus, .doc-button:focus-visible{
    box-shadow: 0 0 0 4px #47665e;
    border-color: #fff;
}

.doc-primary-button,
.doc-primary-button[disabled]{
    background-color: #194036;
    border-color: #194036;
    color: #fff !important;
}

.doc-primary-button:hover{
    background-color: #47665e;
    border-color: #47665e;
}

.doc-secondary-button,
.doc-secondary-button[disabled]{
    background-color: #e0dcce;
    border-color: #384246;
    color: #384246;
}

.doc-secondary-button:hover{
    background-color: #194036;
    border-color: #194036;
    color: #fff;
}

.doc-secondary-button:focus,
.doc-secondary-button:focus-visible{
    color: #384246;
}

.doc-secondary-button:focus:hover{
    color: #fff;
}

.doc-disabled-button{
    background-color: var(--maui-300) !important;
    color: var(--maui-600) !important;
    border: var(--maui-300) !important;
}

.doc-disabled-button:hover{
    cursor: not-allowed;
}

.doc-warning-button{
    background-color: var(--DOC-red);
    border-color: var(--DOC-red);
    color: #fff !important;
}

.doc-warning-button:hover{
    background-color: var(--DOC-red-hover);
    border-color: var(--DOC-red-hover);
}

.doc-gold-button,
.doc-gold-button[disabled]{
    background-color: var(--DOC-gold);
    color: var(--maui-600);
    border-color: var(--DOC-gold);
}

.doc-gold-button:hover{
    background-color: var(--DOC-gold-dark);
    border-color: var(--DOC-gold-dark);
}

#submit-button,
#back-button{
    font-size: 14px;
    margin-bottom: 0;
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
}

#submit-button:hover,
#back-button:hover,
#create-booking:hover,
#view-bookings:hover{
    text-decoration: none !important;
}

.invalid-feedback{
    margin-bottom: .25rem;
}

#form-step-button-container{
    margin-top: 20px;
}

.navigation-container{
    display: flex;
}

#pick-regions-nav{
    align-items: center;
}

#add-hunter-button{
    display: flex;
    align-items: center;
    width: 100%;
    padding: 25px;
    text-align: left;
    background-color: transparent;
    border: 1px solid #384246;
    font-weight: normal;
    margin-bottom: 20px;
}

#add-hunter-button svg{
    margin-right: 10px;
}

#add-edit-hunter-form-container{
    padding: 0px;
    margin-bottom: 20px;
    border: 0px;  
}

#add-edit-hunter-form-container h4{
    margin-top: 0;
}

.highlight-update{
    box-shadow: 0px 0px 0px 2px #ffc107;
}

.hunter-details-container{
    padding: 15px;
    border: 1px solid;
    margin-bottom: 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hunter-details-container #leader-label{
    float: right;
    padding: 10px;
    background-color: #ffc107;
}

.hunter-details-container p{
    margin-bottom: 0;
    word-break: break-word;
}

.hunter-details-name{
    font-size: 16px;
    font-weight: bold;
}

.hunter-details-firstname,
.hunter-details-lastname{
    font-weight: bold;
}

.hunter-details-email,
.hunter-details-mobile,
.hunter-details-phone,
.hunter-deletion-confirmation-text{
    font-size: 14px;
}

.hunter-deletion-confirmation-text{
    margin-top: 10px;
    color: red;
}

.hunter-details-button-container{
    display: flex;
    gap: 10px;
}

.hunter-details-button-container button{
    padding: 10px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 15px 0px 0 0;
    min-width: 80px;
    font-size: 14px;
}

.hunter-details-button-container button svg{
    margin-right: 6px;
}

/* style 'declined' or 'cancelled' card elements differently */
.hunter-details-container:has(.badge:is(.doc-danger-badge, .doc-dark-badge)) {
    background-color: #E118361A;
}
.hunter-details-container:has(.badge:is(.doc-danger-badge, .doc-dark-badge)) p,
.hunter-details-container:has(.badge:is(.doc-danger-badge, .doc-dark-badge)) .hunter-details-email,
.hunter-details-container:has(.badge:is(.doc-danger-badge, .doc-dark-badge)) .hunter-details-mobile,
.hunter-details-container:has(.badge:is(.doc-danger-badge, .doc-dark-badge)) .hunter-details-phone {
    text-decoration: line-through;
}

#permit-conditions-check-container{
    margin-bottom: 20px;
}

.booking-info-container{
    padding: 15px 20px 0px 10px;
    border: 1px solid #c9c9c9;
    background-color: #f5f4f2;
    margin-bottom: 20px;
}

#hunting-block-info-container{
    padding: 15px 20px;
    border: 1px solid #c9c9c9;
    margin-bottom: 20px;
    background-color: #f5f4f2;
}

#hunting-block-info-container p{
    margin-bottom: 0;
}

#hunting-block-name, #hunting-block-info-container span{
    font-weight: bold;
}

#hunting-block-name{
    font-size: 16px;
    margin-bottom: 15px !important;
}

#hunting-block-start-date,
#hunting-block-end-date,
#hunting-block-special-conditions{
    font-size: 14px;
}

.ck-content, .ck-content p, .ck-content div{
    font-size:14px;
}

.ck-content a{
    color: var(--DOC-link-500) !important;
    text-decoration: underline !important;
}

#booking-buttons-container{
    display: flex;
    justify-content: space-evenly;
}

#booking-buttons-container a{
    padding: 10px 15px;
}

#standard-conditions-button{
    margin-bottom: 1rem;
}

#standard-conditions-content ::marker{
    font-size: 12px !important;
}

/* Calendar Page */
#calendar-container{
    
}

/* Modals */
.modal-content{
    border: 1px solid #000;
    border-radius: 0 !important;
}

.modal-header{
    border: none;
}

.modal-header .btn-close{
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}

.modal-header .btn-close:focus,
.modal-header .btn-close:focus-visible{
    box-shadow: 0 0 0 4px var(--DOC-green-500);
    border-radius: 0;
    opacity: 1;
}

.modal-title{
    margin: 0;
}

.modal-body{
    padding-top: 0;
    padding-bottom: 0;
    padding: 0 1em;
}

.modal-footer{
    border-radius: 0;
    border: none;
    padding: 1em;
    justify-content: flex-start;
}

.modal-footer>*{
    margin: 0;
}

#verification-modal p{
    font-size: 1em;
}

#verification-modal-footer{
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: 1em;
}

.special-conditions-modal a,
#standard-conditions-modal a{
    text-decoration: underline !important;
    color: var(--DOC-link-500);
}

.special-conditions-modal a:hover,
#standard-conditions-modal a:hover{
    color: var(--DOC-link-700);
}

.special-conditions-modal b span{
    font-weight: bold !important;
}

.special-conditions-modal b span{
    font-weight: bold !important;
}

.special-conditions-list .special-condition-item span {
    font-size: 16px !important;
}

/* Tooltips/Popovers */
a.material-symbols-outlined:hover{
    text-decoration: none !important;
}

.popover{
    background-color: var(--DOC-green-dark);
}

.popover .popover-body{
    color: var(--white);
    border: 1px solid transparent;
    background-color: transparent;
}

.popover .popover-arrow::after{
    border-top-color: var(--DOC-green-dark) !important;
}

.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after, .bs-popover-bottom>.popover-arrow::after{
    border-bottom-color: var(--DOC-green-dark) !important;
}

.profile-tooltip .tooltip-inner{
    background-color: var(--DOC-green-dark);
    opacity: 1;
    color: var(--white);
    padding: 1em;
}

.profile-tooltip.tooltip.show{
    opacity: 1 !important;
}

/* Taos Styles */
.confirmButton, .btn-primary{
    font-size: 18px;
    font-family: ClearSans, sans-serif;
    color: rgb(255, 255, 255);
    height: 44px;
    cursor: pointer;
    background: rgb(25, 64, 54);
    padding: 0.6em 1.3em;
    text-decoration: none;
    transition: color 0.4s;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    margin-right: 20px;
}

.lblButton{
    font-weight: bold;
    margin-right: 20px;
}

#confirm, #Accept, #renew{
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #e3e3e3;
    background-color: #FEFEFE;
}
.my-profile{
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #e3e3e3;
    background-color: #FEFEFE;
}

tr{
    background-color: #ffffff;
    border-width: 0px 0;
}

.acceptMessage, .declinedMessage{
    font-size: 20px;
    background-color: #F8F8F8;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.errorMessage{
    color: red;
}

#Accept a{
    font-size: 20px;
    text-decoration: underline;
}

#Accept li{
    font-size: 20px;
}

#booking-form a{
    text-decoration: underline;
}

#booking-form p, li{
    font-size: 14px !important;
}

.ui-dialog .ui-dialog-buttonpane button {
    background-color: #194036 !important;
    border-color: #194036 !important;
    color: #fff !important;
    padding: 10px 50px;
    border: 1px solid;
    cursor: pointer;
    font-weight: bold;
    width: auto;
    display: inline-block;
    text-decoration: none !important;
    outline: none;
}

h6, .h6{
    font-family: 'ClearSans', sans-serif !important;
}

.ui-dialog .ui-dialog-buttonpane {
    text-align: center !important;
}

.ui-dialog-buttonpane .ui-dialog-buttonset {
    float: none !important;
    text-align: center !important;
}

.buttonSection {
    text-align: center;
}

.form-label a {
    font-weight: bold;
    text-decoration: underline !important;
    font-family: 'ClearSans', sans-serif !important;
    font-size: var(--bs-body-font-size);
}

/* Address Finder Styling */
.suggestions-list{
   /* border: 1px solid #ccc;*/
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 460px;
    max-height: 200px;
    overflow-y: auto;
    position: absolute;
    background-color: #ccc;
    z-index: 1000;
}

.suggestions-list li{
    padding: 8px;
    cursor: pointer;
}

.suggestions-list li:hover{
    background-color: #f0f0f0;
}

/* Open Hunting - Pick Regions */
.accordion-item:first-of-type .accordion-button,
.accordion-item:last-of-type .accordion-button.collapsed{
    border-radius: 0;
}


.accordion-item{
    border: none;
    margin-bottom: 10px;
}

.accordion-header{
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.accordion-button,
.accordion-button:not(.collapsed){
    background-color: var(--maui-300);
    padding-left: 50px;
    color: inherit;
}

.accordion-button:not(.collapsed)::after{
    filter: brightness(0.5) grayscale(1);
}

.accordion-button:focus{
    box-shadow: 0 0 0 4px var(--DOC-green-100);
}

.accordion-flush .accordion-collapse{
    background-color: var(--maui-300);
}

.island-header-container{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.accordion-body ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.accordion-area-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3em;
}

.accordion-area-name-container{
    display: flex;
    align-items: center;
    gap: 1em;
}

/* Show border at xs breakpoint */
@media (max-width: 575.98px) {
    .accordion-area-buttons-container {
      border-bottom: 1px dashed #cbcbcb;
    }
}

.custom-checkbox {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between checkbox and label text */
    font-size: 1rem;
    cursor: pointer;
    position: absolute;
    z-index: 100;
    margin: 0;
    padding-left: 16px;
  }
  
.custom-checkbox input {
    width: 1.5em;
    height: 1.5em;
    accent-color: var(--DOC-green-dark);
    margin: 0;
}

.island-map-container{
    height: 80vh;
    background-color: #d2eaf7;
}

.island-map{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.doc-badge{
    font-weight: 300;
    border-radius: 15px;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-right: 1rem;
    padding-left: 1rem;
}

.doc-badge-home{
    color: #fff;
    border-radius: 80px;
    padding: 0.6rem 1rem;
    line-height: 1em;
    margin-bottom: 15px;
    font-size: 1rem;
}

.doc-success-badge,
.doc-Current-status,
.doc-Confirmed-status{
    background-color: var(--papatuanuku-500);
}

.doc-info-badge,
.doc-Upcoming-status{
    background-color: var(--ranginui-500);
}

.doc-warning-badge,
.doc-Unpaid-status{
    background-color: var(--DOC-gold);
    --bs-text-opacity: 1;
    color: rgba(var(--bs-dark-rgb),var(--bs-text-opacity));
}

.doc-danger-badge,
.doc-Cancelled-status{
    background-color: var(--weta-500)
}

.doc-dark-badge,
.doc-Expired-status{
    background-color: var(--ata-whenua-500)
}

.button-row {
    margin-bottom: 20px;
}

.hunting-booking-details-info-container h2{
    font-family: 'ClearSans', sans-serif !important;
    font-size: 23px;
    font-weight: 700;
    margin-top: 10.5px;
    margin-bottom: 4px;
}

.restricted-booking-details_info-block{
    margin-bottom: 10px;
}

.paymentTitle {
    margin-bottom: 40px;
}

/* Home page*/
.home-permit-accordion-body{
  padding-left: 10px;
  padding-right: 10px;
  background-color: var(--tara-iti);
  padding: 0px;
  margin-top: -10px;
}
.home-permit-accordion-body a:hover,
.home-permit-accordion-body a:active {
  text-decoration: none !important;
}

.home-permit-card{
  background-color: white;
  border-bottom: 4px solid var(--tara-iti);
  padding: 15px;
  display: flex;
}
.home-permit-card:hover{
  background-color: #e7e7e7; /*find a suitable variable*/
}

.home-permit-card-title{
  font-size: 20px;
  font-weight: 700;
  font-family: 'ClearSans', sans-serif !important;
  margin-top: 0px;
  margin-bottom: 5px;
}

.home-permit-left-group{
  display: flex;
  flex-grow: 1 !important;
  gap: 20px;
}

.home-permit-right-group{
  display: flex;
  gap: 20px;
  flex-shrink: 1 !important;
}

.home-permit-right-column{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

.home-permit-valid{
  font-weight:600;
  font-size: 16px;
}

.permit-accordion,
.permit-accordion::after{
  color: #0066A4;
}

@media (max-width: 480px) {
    .home-permit-status-row {
        margin-bottom: 15px !important;
        margin-top: 30px !important;
    }

    .home-permit-card{
      padding: 15px 20px 20px 20px;
    }
}
/* */