/*----------------- */
/*--- home2.php --- */
/*----------------- */
:root {
    --vc-green: #059669;
    --vc-blue: #2563eb;
    --ha-primary: #0d6efd;
    --ha-primary-hover: #0b5ed7;
    --ha-bg: #ffffff;
    --ha-bg-subtle: #f8f9fb;
    --ha-bg-step: #f0f4ff;
    --ha-border: #e2e6ed;
    --ha-text: #1a1d23;
    --ha-text-secondary: #5f6777;
    --ha-text-muted: #8b92a0;
    --ha-radius-sm: 10px;
    --ha-shadow: -4px 0 24px rgba(0,0,0,0.08), -1px 0 4px rgba(0,0,0,0.04);
    --ha-font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --ha-sidebar-width: 380px;
}
html {overscroll-behavior: none;}
body {background-color:#e7e7e7!important;}
.container-list{padding-left:20px;padding-right:10px; max-width: 100% !important}
.header-container{
	z-index:100;width:100%;position:fixed;top:0;left:0;display: flex; align-content: center; align-items: center;
}

.header{width:100%;background: #1b0042;padding:14px;min-height:62px;}
.header .bi, .sub-header .bi {font-size:16px;}
.sub-header{width:100%;background-color:#cccccc;min-height:50px;padding:8px 0px;box-sizing:border-box;}

.fixed-pref {position:absolute;left:6px;top:8px;}

.fixed-search {position:absolute;right:6px;top:8px;}	

.menu-button, .sub-menu-button, .add-new-button , .action-button , 
.close-button, .option-button, .pref-button,.help-button, .schedule-button, .search-div-button {
    all: unset;
    text-decoration: none;
    padding: 0px 8px;
	margin-right:2px;
	min-height:34px;
    color: #fff;
	font-size:12px;
	text-transform:uppercase;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-button-submit, .action-button-share, .action-button-save-task, .action-button-delete, .modal-primary-button, .modal-secondary-button {
    all: unset;
    position:relative;
    padding:12px 24px;
    font-size:12px;
    text-transform: uppercase;
    border-radius:6px;
    color:#fff;
	cursor: pointer;
	display: flex;
    justify-content: center;
    align-items: center;
}

.search-button {
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
    pointer-events: none;
    color: #fff;
    background-color: #26005a;
    width: 34px;
    height: 34px;
} 
.search-button:hover {
    color: #fff;
}

.help-button {
    border-radius:100%;
    padding:0px 6px; 
    width:24px;
    margin-right:10px;
    background-color: #4e05b4;
}


/* .search-button.active{pointer-events: unset;color: #000; border: unset;    background-color: #fff;} */

/* #section-search .search-input-field,
#section-search .btn-clearSearch {
    display: none;
} */

/* When active, reposition the search button to be absolute again */
#section-search.active .search-button {
    position: absolute;
    color: #000;
    background-color:#fff;
    width: 30px;
    height: 30px;
    top: 50%;

    left: 0px;
    transform: translateY(-50%);
}


@media (max-width: 870px) {
    #helpSearchContainer{margin-top:8px;}
}


@media (max-width: 1013px) {
    .menu-button span {
        font-size: 10px;
        margin-left: .25rem !important;
    }
    .menu-button, .sub-menu-button, .add-new-button {
        padding: 0px 8px;
    }

    /* .search-button {
        position: relative; 
        cursor: pointer;
        z-index: 1;
        top: 0;
        left: 0;
        transform: none;
        min-height: 34px;
        align-content: center;
        pointer-events: unset;
    } 
    
    .search-button.active {
        color: #000;
        border: unset;
    }    

    
    #section-search.active .search-input-field {
        display: block;
        width: 200px;
        height:34px;
        padding: 0.375rem 0.75rem;
        padding-left: 35px;
        border: 1px solid #ced4da;
    }
    
    #section-search.active .btn-clearSearch {
        display: block;
    } */
}


.close-button,.option-button, .pref-button {background-color:#26015a;color:#fff;}
.action-button {color:#fff;padding: 0px 16px;}
.action-button:hover,.close-button:hover,.option-button:hover {color:#fff;background-color:rgb(27, 88, 220);}


.chart-submit-button {
    background-color: rgb(228 244 239);
    color: rgb(0 123 85);
    display: flex;
    align-items: center;
}
.chart-submit-button:hover {
    background-color:rgb(5 150 105);
    color: #fff !important;
}
.chart-delete-button {
    background-color: #feeeee;
    color: #b02020 !important;
    display: flex;
    align-items: center;
}
.chart-delete-button:hover {
    background-color: #ea1010;
    color: #fff !important;
}


/* --- spacing --- */
.footer-space {margin:100px 0;}
.padding-top {padding:150px;}
.margin-top {margin-top:140px;}
.margin-bottom {margin-bottom:100px;}
.margin-top-140 {margin-top:140px;}
.margin-x {margin-left:32px;margin-right:32px;}
.pref-active-space {width:53px;}

.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.hidden{display:none !important;}
.no-decoration {text-decoration: none;}
.disabled{
    pointer-events:none; 
    cursor:not-allowed;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.global-container-margin{margin-top:146px;}

@media only screen and (max-width: 968px) 
{
	/* .menu-button,.action-button , .close-button, .option-button {padding: 8px 14px;}
    .pref-button{padding: 8px 8px;}
	.header .bi{font-size:22px;}
	.action-button-submit, .action-button-share, .action-button-save-task, .action-button-delete{
		padding:12px 14px;
	} */

   .global-container-margin{margin-top:176px;}

}



.sub-menu-selected {
	color:#fff!important;
}




/* .bi-x {
	color:#eee;
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	pointer-events: none;
	color: #999;
} */

.bi-large {font-size:28px;}





.sub-menu-button {color:#000;}
.search-input-field{height:32px;font-size:14px;padding-left:36px;}
.search-input-field::placeholder {color: #aaa;}

.sponsor-banner {width:100%;max-width:798px;}
/* .bypet{background-color:#d7bfa4;color:#af5d00;} */
.bg-white {background-color:#ffffff;}
.bg-pink {background-color:rgb(219 39 119);color:#fff!important;}
.bg-blue {background-color:rgb(37 99 235);color:#fff!important;}
.bg-emerald {background-color:rgb(5 150 105);color:#fff!important;}
.bg-sky {background-color:rgb(2 132 199);color:#fff!important;}
.bg-rose {background-color:#e73981;color:#fff!important;}
.bg-amber {background-color:rgb(217 119 6);color:#fff!important;}
.bg-violet {background-color:rgb(139 92 246);color:#fff!important;}
.bg-red {background-color:#ea1010;color:#fff!important;}
.bg-grey {background-color:#b3b3b3;}

.bg-pink:hover {background-color:rgb(182, 24, 95);}
.bg-blue:hover {background-color:rgb(22, 77, 197);}
.bg-emerald:hover {background-color:rgb(3, 115, 79);}
.bg-sky:hover {background-color:rgb(1, 101, 152);}
.bg-rose:hover {background-color:#d22b70;}
.bg-amber:hover {background-color:rgb(196, 107, 5);}
.bg-violet:hover {background-color:rgb(109, 65, 210);}
.bg-red:hover {background-color:#c10a0a;}
.bg-grey:hover {background-color:#959494;}


.bg-emerald-opacity {background-color:#05966831;color:#fff!important;}
.bg-red-opacity {background-color:#ea101031;color:#fff!important;}
.bg-grey-opacity {background-color:#b3b3b331;}

.text-pink {color:rgb(219 39 119)!important;}
.text-blue {color:rgb(37 99 235)!important;}
.text-emerald {color:#059669!important;}
.text-sky {color:rgb(2 132 199)!important;}
.text-rose {color:rgb(244 63 94)!important;}
.text-amber {color:rgb(217 119 6)!important;}
.text-violet {color:#8b5cf6!important;}
.text-red {color:#ea1010!important;}
.text-grey {color:#5e5e5e!important;}

.header-text {font-size:12px;text-transform:uppercase;color:#fff;}


/* .blue-required-input {border:1px solid #2563eb;}
.blue-required-label {color: rgb(37 99 235);} */

label[for="firstName"], label[for="lastName"], label[for="ownerEmail"], label[for="petName"] {color: #2563eb;}
label[for="firstName"] + input,label[for="lastName"] + input,label[for="ownerEmail"] + input, label[for="petName"] + input { border:1px solid #2563eb;}

label[for="procedureDetails"],label[for="estimateDetails"] {color: #8b5cf6;}
label[for="procedureDetails"] + input, label[for="estimateDetails"] + input{ border:1px solid #8b5cf6;}

label sup {
    color: #059669;
    font-weight:800;
    font-size:16px;
    top: -3px;
    right: -2px;
}


.input-error .form-check-label {
    color: red;
}

.input-error .form-control {
    border-color: red;
    outline-color: red;
}

.input-error input[type="radio"] {/* Specific to radio buttons */
    accent-color: red;
}


.dropdown-menu{
	padding:16px;
	font-size:12px;
    width:220px;
}
.dropdown-item {
	border-radius:4px;
	padding: 4px 10px;
	margin-bottom:6px;
}

.dropdown-item:last-of-type {
	margin-bottom:0px;
}

.form-build-icon{
    padding: 2px 10px;
    border-radius: 6px;
}



.optional-client-dropdown {
	border: 1px solid #0396ff!important;
	background-color: #0099ff8f;
	border-radius: 4px;
	font-size:12px;
	height:34px!important;
	width:222px;
	color:#fff;
  }





/* #section-sort select
{
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-funnel" viewBox="0 0 16 16"><path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2z"/></svg>');
    background-position: 10px center;
    background-repeat: no-repeat;
    padding: 0px 5px 0px 35px;
    width: 150px;
    font-size: 12px;
} */

#section-sort select option
{
    line-height: 20px;
    padding: 10px 0px;
    height: 20px;
}



/* ------------- */
/* --- form --- */
/* ------------- */

.header_logo {
	width:120px;
}

.header_clinic_name {
font-size:16px;
}

.header_clinic_address {
	font-size:12px;
}



.container-form, .container-certificate{
	width:100%;
	margin-bottom: 500px;
	background-color: #fff;
	border-radius: 10px;
	padding: 16px;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

h1 {
	background-color: #2c0563;
	color: #ffffff;
    border-radius: 8px;
	font-weight: 300 !important;
	margin-top:0;
	margin-bottom:12px;
	font-size: 1.2rem !important;
	line-height: 1.6rem;
	padding: 16px 14px;
}
  
h2 {
    display: flex;
    align-items: center; /* Centers children vertically */
    padding: 12px 14px;
    color: #ffffff;
    width: 100%;
    font-size: 13px;
    background-color: #1b0042;
    text-transform: uppercase;
    margin-top: 24px;
    margin-bottom: 8px;
    border-radius: 8px;
}
  
.h2-optional {
    min-height:60px;
	display: flex;
    align-items: center; /* Centers children vertically */
    padding: 12px 14px;
    width: 100%;
    font-size: 13px;
	color:#fff;
	padding: 12px 14px 12px 24px;
	background-color: #1b0042;
    text-transform: uppercase;
    margin-bottom: 16px;
    border-radius: 8px;
}

h3 {
    display: flex;
    align-items: center;
    font-weight:800;
    width: 100%;
	margin-left:12px;
    font-size: 13px;
	color:#000;
    text-transform: uppercase;
    margin-top: 24px;
    margin-bottom: 8px;
    border-radius: 8px;
}


.text-xl{font-size:16px;}
.text-lg{font-size:14px;}
.text-md{font-size:12px;}
.text-sml{font-size:10px;}


/* ------------------------- */
/*--- global base styles --- */
/* ------------------------- */
label {width:100%;margin-bottom:0px;font-size:12px;}
.form-control {font-size:14px;}
p {font-size:14px;padding:0 12px;}
ul,ol {padding-left:24px;font-size:14px;}
.container-form img {border-radius:8px;margin-bottom:8px;}

/* --- Active Patient list -- */
.list-group-item table {margin-top:0px;}


table {
    font-size: 14px;
	margin: 16px 0px;
	width:100%;
	background-color:#f4f4f4;
}
table td p {padding:0px;line-height:16px;}

table td {
    vertical-align: top;
    padding: 8px;
	padding-left:12px;
}

table tr:nth-child(even) td:nth-child(1) ,table tr:nth-child(even) td:nth-child(2) {
    background-color: #e7e7e7; /* Sets the background color of even rows in the second column to blue */
}


.accordion-button, .accordion-button:not(.collapsed) {
    border: 0;
    font-size: 12px;
    margin-top: 0px;
    background-color: #d5d5d5;
    color: #1e1f21;
    height: 46px;
    border-radius: 6px;
    padding: 8px;
    /* height: 56px !important; */
}






/* ------------- */
/*--- footer --- */
/* ------------- */
.action-container{
    position: fixed; 
    z-index:14;
    bottom:0;
    left:0;
    width:100%;
    padding:24px;
    background-color:#cfcfcff5;
}
   



/* ------------- */
/*--- alerts --- */
/* ------------- */



  .alert-confirmation-save, .alert-confirmation-alert {
    position: fixed;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    z-index: 1000;
    padding: 8px 16px;
    color: #fff;
    border-radius: 8px;
    font-size: 14px;
}
  
.alert-hidden {display:none!important;}




/* --- CK editor ----- */
.optional-textarea,.ck-editor__main, .ck-content {min-height:240px;}

.ql-align-center {text-align: center}
        .ql-align-right {text-align: right}
        figure.image{text-align: center}
        img.image_resized,
        figure.image_resized img{height: auto; width: 100%}
        .image-style-align-right{float: right; padding-left: 5px}
        figure.image-style-block-align-right{text-align: right}
        .image-style-align-left{float: left; padding-right: 5px}
        figure.image-style-block-align-left{text-align: left}
        figure.image-style-block-align-center{text-align: center}
        figure.image-style-side{float: right}
        .ck-placeholder{min-height: 300px;}


.ck-content {border-radius:8px!important;}
.ck-editor__top {margin-bottom:8px!important;}




.core-modal-content {
    padding: 48px 32px 32px 32px;
    border-radius:12px;
    max-width:460px;
}

.core-modal-header{
background-color: #4D00BD;color:#fff;padding: 10px 10px 10px 26px;border-radius:16px 16px 0 0;
}
.core-modal-header-title {font-size:14px;margin-top:6px;}
.core-modal-close-sub-icon {
    width:42px;height:42px;font-size:24px!important;padding:4px 8px;
}

.core-modal-close-icon {
    width:42px;height:42px;position:absolute;top:22px;right:22px;font-size:24px!important;padding:4px 8px;
}

.core-modal-icon {
    font-size:46px!important;
}
.core-modal-h1{
    font-size: 20px;font-weight: 600; margin: 18px 0 12px;
}
.core-modal-p{
    font-size:14px;
}



.core-modal-content-interact {

}



/* ---- Active ----- */
.card-image img {background-color:#dcdcdc;}
.list-group-item.chart_open > div:before{content: "\f1d6";font-family: bootstrap-icons!important;width: 30px;height: 30px;border-radius: 100%;background-color: #d6d6d6;position: absolute;left: -34px;line-height: 30px; text-align: center;animation: pulseFont 1s infinite;top:40px;display: flex;justify-content: center;align-items: center;}
/* .list-group-item.has_due > div:after{content: "\f63c";font-family: bootstrap-icons !important;width: 26px;height: 26px;border-radius: 100%;background-color: #ed1d23;position: absolute;left: 36px;text-align: center;color: #FFF;font-size: 16px;top: 20px;display: flex;justify-content: center;align-items: center;} */
.list-group-item.has_due > div:after{content: "\f63c";font-family: bootstrap-icons !important;width: 22px;height: 22px;border-radius: 100%;background-color: #ed1d23;position: absolute;left: -11px;text-align: center;color: #FFF;font-size: 14px;top: 22px;display: flex;justify-content: center;align-items: center;}

@keyframes pulseFont {
  0% {
    font-size: 18px;
  }
  50% {
    font-size: 10px;
  }
  100% {
    font-size: 18px;
  }
}

.list-group-item.has_bar:before{content: "";width: 6px;height: calc(100% - 16px);border-radius: 6px;position: absolute;display: block;left: -12px;top: 8px;}
.list-group-item.has_bar[content-type="prescription"]:before,
.list-group-item.has_bar[content-type="chart"]:before,
.list-group-item.has_bar[content-type="certificate"]:before,
.list-group-item.has_bar[content-type="report"]:before,
.list-group-item.has_bar[content-type="vetforms"]:before,
.list-group-item.has_bar[content-type="vet form"]:before
{background: var(--vc-blue)}
.list-group-item.has_bar[content-type="form"]:before,
.list-group-item.has_bar[content-type="client form"]:before,
.list-group-item.has_bar[content-type="program"]:before,
.list-group-item.has_bar[content-type="handout"]:before
{background: var(--vc-green);}

.list-group-item.has_bar[content-type="prescription"] .card-type,
.list-group-item.has_bar[content-type="chart"] .card-type,
.list-group-item.has_bar[content-type="certificate"] .card-type,
.list-group-item.has_bar[content-type="report"] .card-type,
.list-group-item.has_bar[content-type="vetforms"] .card-type,
.list-group-item.has_bar[content-type="vet form"] .card-type
{color: var(--vc-blue);}
.list-group-item.has_bar[content-type="form"] .card-type,
.list-group-item.has_bar[content-type="client form"] .card-type,
.list-group-item.has_bar[content-type="program"] .card-type,
.list-group-item.has_bar[content-type="handout"] .card-type
{color: var(--vc-green);}

#section-sort select
{
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-funnel" viewBox="0 0 16 16"><path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2z"/></svg>');
    background-position: 10px center;
    background-repeat: no-repeat;
    padding: 0px 5px 0px 35px;
    width: 150px;
    font-size: 12px;
}
#section-sort select option{line-height: 20px;padding: 10px 0px;height: 20px;}

.ml-auto {
    margin-left: auto;
}




.fade-in {
    opacity: 0;
    transition: opacity 1s ease-in;
}

/* Final state for the image (visible) */
.fade-in.loaded {
    opacity: 1;
}

.btn-loading{position: relative;}
.btn-loading .loader {
    position: absolute;
    left: 0px;
    width: 100%;
    top: 0px;
    height: 100%;
    background: #818181;
    cursor: not-allowed;
    display: grid;
    border-radius: inherit;
}
.btn-clearSearch
{
    position: absolute;
    right: 36px;
    height: 32px;
    line-height: 32px;
    width: 24px;
    cursor: pointer;
}

.searchClearPrefill{
    padding:0 10px;white-space:nowrap;background-color:#d9d9d9;color:#393939;height:34px;border-radius: .375rem;font-size:16px;
}

.searchClearPrefill:hover{background-color:red;color:#fff;}

.searchDivButton{padding:0 16px;white-space:nowrap;height:34px;border-radius: .375rem;}

#searchautocomplete-list{
    padding:8px 12px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
width:100%;
font-size:12px;
}

.prefillListItem{
    padding: 12px 8px;
    border-bottom: 1px solid #e5e4e4;
}

/* --------------------- */
/*--- home dashboard --- */
/* --------------------- */
.dashboard-container {background-color:#eeee;}
.dashboard-container .bi {font-size:24px;}
.dashboard-title{font-size:18px;font-weight:800;}
.dashboard-description{font-size:12px;line-height:12px;}
.dashboard-help {background-color:#eeee;margin-bottom:6px;font-size:12px;cursor: pointer;}
.dashboard-help:hover {background-color:#ddd;}

@media only screen and (max-width: 800px) 
{
    .dashboard-title{font-size:14px;font-weight:800;}
    .dashboard-description{font-size:10px;line-height:12px;}
}

.button-restore-chart {text-transform:uppercase;font-size:10px;padding: 10px 40px;border-radius:10px;border:0px;background-color:red;color:white;}
.button-restore-chart:hover {background-color: #ed1d23;}
#itemRoute:disabled {
    background-color: #bbb;
}



/* ----------------------- */
/*--- sharelink styles --- */
/* ----------------------- */
.page-content {
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
    padding: 16px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.page-content img {border-radius:8px;margin:24px 0;max-width:100%;height:auto;}


.page-content img:first-of-type {margin:0 0 24px 0;}

/* .page-content p{font-size:16px;padding:0 12px;}
.page-content ol, .page-content ul{font-size:16px;padding:0 12px;} */

/* Image style */
.container-document .image_toolbar_top{top: 16px;left: 16px;}
.container-document .image_toolbar_bottom{bottom: 16px;right:16px;}




.folder {right: -400px;top: 50px;width: 400px;height: auto;max-height: 600px;margin: 10em auto 10em;box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);background: white;position: fixed;transition: right 0.3s ease;z-index: 19;border-radius: 0px 0px 0px 10px;}
.folder.active{right: 0}
.folder .folder-container {background-color: #f1f1f1;max-height: 534px;overflow-y: auto;margin: 8px;}
.folder .widget-header-container {display: flex;color: #fff;position: absolute;top: 8px;left: 6px;background-color: #4823a1;width: 388px;height: 44px;font-size: 12px;text-transform: uppercase;margin-bottom: 8px;border-radius: 4px;align-items: center;}
.folder .widget-icon {cursor: pointer; display: flex;flex-direction: column;align-items: center;justify-content: center;position: absolute;background-color: #289ca7;top: 0px;left: -68px;color: #fff;font-size: 22px;margin-right: 12px;padding: 10px 12px;border-radius: 6px 0 0 6px;box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);}
.folder .widget-icon-label {font-size:10px;}
.folder .widget-title {margin-left:8px;}


#loading {width: 100%;height: 100%;background-color: #00000085;position: fixed;top: 0px;z-index: 9999;}
.doggy{width: 180px;margin: 200px auto 0px auto;}



.img_square {aspect-ratio: 1 / 1;object-fit: cover;}
.vetcheck_shadow{box-shadow: rgba(50, 50, 93, 0.25) 0px 4px 8px -2px, rgba(0, 0, 0, 0.3) 0px 2px 4px -2px;}
.container-document {}
.container-document .image_toolbar_top{display:none}
.container-document .image_toolbar_bottom{display:none}
.cursor_pointer{cursor: pointer}
.img-thumbnail{border-radius: 8px !important; padding: 8px !important}



/* --- Header --- */
#offcanvasHaSearch .offcanvas-header{display: block;}
#offcanvasHaSearch .offcanvas-header .offcanvas-header-top{padding:0px 12px;}
#offcanvasHaSearch .offcanvas-body{padding: 0px}
#offcanvasHaSearch .ha-search {padding:16px 12px;border-bottom: 1px solid var(--ha-border);background: var(--ha-bg);flex-shrink: 0;}
#offcanvasHaSearch .offcanvas-title {margin: 0;font-size: 15px;font-weight: 700;color: var(--ha-text);letter-spacing: -0.2px;display: flex;align-items: center;gap: 6px; text-transform: uppercase}
#offcanvasHaSearch .offcanvas-title i { color: var(--ha-primary); }
#offcanvasHaSearch .ha-close-btn {background: none;border: none;cursor: pointer;color: var(--ha-text-muted);font-size: 18px;padding: 4px;border-radius: 6px;transition: background 0.15s, color 0.15s;display: flex;align-items: center;justify-content: center;}
#offcanvasHaSearch .ha-close-btn:hover {background: var(--ha-bg-subtle);color: var(--ha-text);}
#offcanvasHaSearch .ha-search-wrap {position: relative;}
#offcanvasHaSearch .ha-search-wrap .bi-search {position: absolute;left: 10px;top: 50%;transform: translateY(-50%);color: var(--ha-text-muted);font-size: 14px;pointer-events: none;}
#offcanvasHaSearch .ha-search .form-control {width: 100%;padding: 8px 32px 8px 34px;border: 1px solid var(--ha-border);border-radius: var(--ha-radius-sm); font-family: var(--ha-font); font-size: 13px;color: var(--ha-text);background: var(--ha-bg-subtle);outline: none;transition: border-color 0.15s, box-shadow 0.15s;box-sizing: border-box;}
#offcanvasHaSearch .ha-search .form-control::placeholder { color: var(--ha-text-muted); }
#offcanvasHaSearch .ha-search .form-control:focus {border-color: var(--ha-primary);box-shadow: 0 0 0 3px rgba(13,110,253,0.1);background: #fff;}
#offcanvasHaSearch .ha-search-clear {position: absolute;right: 8px;top: 50%;transform: translateY(-50%);background: var(--ha-bg-subtle);border: none;cursor: pointer;color: var(--ha-text-muted);font-size: 12px;padding: 0;width: 22px;height: 22px;display: none;align-items: center; justify-content: center;border-radius: 50%;transition: color 0.15s, background 0.15s;}
#offcanvasHaSearch .ha-search-clear:hover { color: var(--ha-text); background: var(--ha-border); }
#offcanvasHaSearch .ha-search-clear.visible { display: flex; }
/* --- Scrollable Body --- */
#offcanvasHaSearch .ha-body {flex: 1;overflow-y: auto;padding: 12px 16px 16px;scroll-behavior: smooth;}
#offcanvasHaSearch .ha-body::-webkit-scrollbar { width: 5px; }
#offcanvasHaSearch .ha-body::-webkit-scrollbar-track { background: transparent; }
#offcanvasHaSearch .ha-body::-webkit-scrollbar-thumb { background: #d0d5dd; border-radius: 4px; }
/* --- Empty / Default State --- */
#offcanvasHaSearch .ha-empty {text-align: center;padding: 48px 16px;color: var(--ha-text-muted);font-size: 13px;line-height: 1.6;}
#offcanvasHaSearch .ha-empty i {font-size: 32px;display: block;margin-bottom: 12px;color: #d0d5dd;}

/* --- Quick Answer Card --- */
#offcanvasHaSearch .ha-answer-card {background: var(--ha-bg);border: 1px solid var(--ha-border);border-radius: var(--ha-radius-sm);margin-bottom: 8px;overflow: hidden;animation: ha-fade-in 0.2s ease-out;}
@keyframes ha-fade-in 
{
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

#offcanvasHaSearch .ha-answer-header {padding: 10px 14px;cursor: pointer;display: flex;align-items: center;justify-content: space-between;gap: 8px;transition: background 0.15s;}
#offcanvasHaSearch .ha-answer-header:hover { background: var(--ha-bg-subtle); }
#offcanvasHaSearch .ha-answer-question {font-size: 13px;font-weight: 600;color: var(--ha-text);margin: 0;line-height: 1.3;flex: 1;}
#offcanvasHaSearch .ha-answer-chevron {font-size: 14px;color: var(--ha-text-muted);transition: transform 0.2s;flex-shrink: 0;}
#offcanvasHaSearch .ha-answer-card.expanded .ha-answer-chevron {transform: rotate(180deg);}
#offcanvasHaSearch .ha-answer-body {padding: 0 14px 10px;}
#offcanvasHaSearch #quickAnswers-results .ha-answer-body {display: none;}
#offcanvasHaSearch #quickAnswers-results .ha-answer-card.expanded .ha-answer-body { display: block; }
#offcanvasHaSearch .ha-answer-subtitle {font-size: 11px;font-weight: 600;color: var(--ha-primary);text-transform: uppercase;letter-spacing: 0.3px;margin: 6px 0 6px;}
#offcanvasHaSearch .ha-answer-subtitle:first-child { margin-top: 0; }
#offcanvasHaSearch .ha-steps {list-style: none;padding: 0;margin: 0 0 12px;counter-reset: step-counter;}
#offcanvasHaSearch .ha-steps li {counter-increment: step-counter;display: flex;gap: 8px;padding: 4px 0;font-size: 12px;color: var(--ha-text);line-height: 2;}
#offcanvasHaSearch .ha-steps li::before {content: counter(step-counter);flex-shrink: 0;width: 18px;height: 18px;border-radius: 50%;background: var(--ha-bg-step);color: var(--ha-primary);font-size: 10px;font-weight: 700;display: flex;align-items: center;justify-content: center;margin-top: 4px;}
#offcanvasHaSearch .ha-step-content {flex: 1;min-width: 0;}
#offcanvasHaSearch .ha-article-link {display: inline-flex;align-items: center;gap: 4px;font-size: 11px;font-weight: 600;color: var(--ha-primary);text-decoration: none;padding: 4px 0 2px;transition: color 0.15s;}
#offcanvasHaSearch #shortAnswer-results .ha-article-link{width: 100%; justify-content: space-between;}
#offcanvasHaSearch .ha-article-link:hover { color: var(--ha-primary-hover); text-decoration: underline; }
#offcanvasHaSearch .ha-article-link i { font-size: 11px; }
/* --- Further Reading Section --- */
#offcanvasHaSearch .ha-further {margin-top: 12px;padding-top: 12px;border-top: 1px solid var(--ha-border);}
#offcanvasHaSearch .ha-further-label {font-size: 10px; font-weight: 700; text-transform: uppercase;letter-spacing: 0.5px;color: var(--ha-text-muted);margin: 0 0 6px;}
#offcanvasHaSearch .ha-further-list {list-style: none;padding: 0;margin: 0;}
#offcanvasHaSearch .ha-further-list li { margin-bottom: 2px; }
#offcanvasHaSearch .ha-further-list a {display: flex;align-items: center;gap: 8px;padding: 6px 8px;border-radius: 6px;font-size: 12px;color: var(--ha-text);text-decoration: none;transition: background 0.15s;}
#offcanvasHaSearch .ha-further-list a:hover { background: var(--ha-bg-subtle); }
#offcanvasHaSearch .ha-further-list a i {color: var(--ha-text-muted);font-size: 14px;flex-shrink: 0;}

/* --- Button Badge in Steps --- */
#offcanvasHaSearch .ha-btn-badge {display: inline-block;padding: 2px 8px;background: var(--ha-primary);color: #fff;font-size: 10px;font-weight: 700;border-radius: 5px;letter-spacing: 0.2px;line-height: 1.6;vertical-align: baseline;white-space: nowrap;}
/* --- No Results --- */
#offcanvasHaSearch .ha-no-results {text-align: center;padding: 20px 16px 8px;color: var(--ha-text-muted);font-size: 12px;}
#offcanvasHaSearch .ha-no-results a {color: var(--ha-primary);text-decoration: none;font-weight: 600;}
/* --- Footer CTAs --- */
#offcanvasHaSearch .offcanvas-footer {padding: 12px 16px;border-top: 1px solid var(--ha-border);background: var(--ha-bg-subtle);display: flex;flex-direction: column;gap: 6px;flex-shrink: 0;}
#offcanvasHaSearch .ha-footer-link {display: flex;align-items: center;gap: 8px;padding: 6px 8px;border-radius: 6px;font-size: 12px;font-family: var(--ha-font);color: var(--ha-text-secondary);text-decoration: none;transition: background 0.15s, color 0.15s;}
#offcanvasHaSearch .ha-footer-link:hover {background: #fff;color: var(--ha-text);}
#offcanvasHaSearch .ha-footer-link i {font-size: 14px;color: var(--ha-primary);flex-shrink: 0;}
#offcanvasHaSearch .ha-footer-link.ha-chat-cta {color: var(--ha-primary);font-weight: 600;}
#offcanvasHaSearch .ha-footer-link.ha-chat-cta:hover {background: rgba(13,110,253,0.06);color: var(--ha-primary-hover);}