/* Cookie Consent Policy */

.popup-background.cookie-policy             { max-width: none; z-index: 10000; }

.cookie-policy                              { font-family: 'Open Sans', sans-serif; position: fixed; height: 100vh; width: 90%; max-width: 500px; left: 0; top: 0; right: 100%; bottom: 0; background: #fff; z-index: 100000; transform: translateX(0); transition: transform .6s; will-change: transform; backface-visibility: hidden; perspective: 1000; animation: opacity-show .4s forwards; }
.cookie-policy.left                         { left: 0; right: 100%; }
.cookie-policy.right                        { right: 0; left: 100%; }
.cookie-policy.bottom                       { right: 0; left: 0; bottom: 0; max-width: 100%; width: 100%; height: 100px; top: initial; }
.cookie-policy.centre                       { max-height: 550px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.cookie-policy.hide                         { transform: translateX(-100%); animation: opacity-hide .4s forwards; }
.cookie-policy.manage-cookies               { max-width: 800px; height: auto; }
.cookie-content                             { padding: 2rem 2rem 6rem 2rem; overflow-y: auto; background-color: #E8E8E8; }
.cookie-policy.bottom .cookie-content       { display: flex; align-items: center; overflow-y: hidden; padding: 0 2rem; justify-content: space-between; gap: 32px; }
.cookie-policy.bottom .cookie-content p     { padding: 0; width: 100%; flex: 1; }
.cookie-policy.centre .cookie-content       { padding: 2rem; height: 100%; overflow-y: scroll; display: flex; flex-direction: column; }
.cookie-policy.centre .cookie-content a     { text-decoration: underline; }
.cookie-policy.centre .cookie-content .cookie-inner-content  { flex: 1; }
.cookie-policy.centre.manage-cookies .cookie-content { padding: 0rem; display: flex; flex-direction: column; }
.cookie-policy.centre .cookie-content .cookie-header { padding: 0 2rem; height: 70px; display: flex; align-items: center; }
.cookie-policy.centre .cookie-content .cookie-body { padding: 0rem 2rem; overflow-y: scroll; height: auto; max-height: 350px; flex: 1; }
.cookie-policy.centre .cookie-content .cookie-body p { font-size: 0.875rem; padding: 0; margin: 0; }
.cookie-policy.centre .cookie-content .cookie-body a { text-decoration: underline; }
.cookie-policy.centre .cookie-content .cookie-body form { margin-top: 1rem; }
.cookie-policy.centre .cookie-content .button-container { display: flex; flex-direction: column; gap: 12px; }
.cookie-policy.centre .cookie-content .button-container button { font-weight: 600; padding: 0.5rem 1rem; width: 100%; }
.cookie-policy.centre .cookie-content .cookie-footer { display: flex; justify-content: space-between; gap: 16px; padding: 0rem 2rem; height: 80px; align-items: center; }
.cookie-policy.centre .cookie-content .cookie-footer .left { display: flex; gap: 16px; }
.cookie-policy.centre .cookie-content .cookie-footer button { font-weight: 600; padding: 0.5rem 1rem; min-width: 0; }

/* Accept and reject must be equally prominent - rejecting cannot be made less obvious than
   accepting.  Both share one rule so they cannot drift apart, and so neither inherits the host
   template's primary button styling.  Not scoped to .centre so every banner position is covered.
   Rebrand in css/custom-ccp.css if needed, but keep both buttons identical. */
.cookie-policy .cookie-primary,
.cookie-policy .cookie-default              { font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.5; padding: 0.5rem 1rem; border: 2px solid #231f20; border-radius: 0; background-color: transparent; color: #231f20; text-transform: none; letter-spacing: normal; text-shadow: none; box-shadow: none; cursor: pointer; }
.cookie-policy .cookie-primary:hover,
.cookie-policy .cookie-default:hover        { background-color: #231f20; color: #ffffff; }
.cookie-policy .cookie-primary:focus-visible,
.cookie-policy .cookie-default:focus-visible { outline: 3px solid #231f20; outline-offset: 2px; }

.cookie-content h2                          { margin: 1rem 0; line-height: 1.5; font-size: 1.5rem; }
.cookie-content h3                          { margin: 1rem 0; line-height: 1.5; }
.cookie-content p                           { margin: 1rem 0; line-height: 1.5; }
.cookie-content .button-container           { margin-top: 2rem; }
.cookie-content .button-container button    { line-height: 1.5; }
.cookie-policy.bottom .button-container     { margin-top: 0; }
.cookie-section                             { position: relative; }

.cookie-policy.centre .cookie-content .cookie-body div.cookie-category 	{ display: flex; justify-content: space-between; flex-direction: column; width: 100%; background-color: #f8f8f8; padding: 0.5rem; }
.cookie-policy.centre .cookie-content .cookie-body div.cookie-category .cookie_category-left { display: flex; justify-content: space-between; }
.cookie-policy.centre .cookie-content .cookie-body div.cookie-category .cookie_category-left .label { display: flex; gap: 16px; }
.cookie-policy.centre .cookie-content .cookie-body div.cookie-category .cookie_category-left .cookie-input { display: flex; align-items: center; gap: 8px; }
.cookie-policy.centre .cookie-content .cookie-body div.cookie-category .cookie_category-right { display: none; margin-top: 0 !important; overflow: hidden; }
.cookie-policy.centre .cookie-content .cookie-body div.cookie-category .cookie_category-right p { font-size: 0.875rem; text-align: left; padding: 0.25rem 1rem; }
.cookie-policy.centre .cookie-content .cookie-body div.cookie-category.is-expanded .cookie_category-right { display: flex; }
.cookie-policy.centre .cookie-content .cookie-body div.cookie-category span.enabled { align-items: center; background:#eaeff2; border-radius: 5em; color: #5e6266; display: flex; flex: none; font-size: .625rem; font-weight: 600; height: 23px; justify-content: center; margin-left: 1em; min-width: 23px; overflow: hidden; padding: 2px 8px; position: relative; text-align: center; white-space: nowrap; width: auto; }

div.cookie-category .cookie-button 								    { display: flex; flex: 1; background: transparent; justify-content: flex-start; gap: 16px; color: #333; }
div.cookie-category .cookie-button .icon					        { background: #eee; border-radius: 100%; display: flex; height: 20px; justify-content: center; pointer-events: none; width: 20px; transition: transform 300ms ease; }
div.cookie-category.is-expanded .cookie-button .icon			    { transform: rotate(90deg); }
div.cookie-category .cookie-button .cookie_category-label           { text-align: left; }

div.cookie-category .toggle-wrapper 							    { position: relative; display: inline-block; width: 60px; height: 34px; }
div.cookie-category .toggle-wrapper.disabled                        { cursor: not-allowed; }
div.cookie-category .toggle-wrapper input 						    { opacity: 0; width: 0; height: 0; }
div.cookie-category .toggle-wrapper .slider 					    { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #a4a2a2; -webkit-transition: .4s; transition: .4s; }
div.cookie-category .toggle-wrapper .slider:before 				    { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; }
div.cookie-category .toggle-wrapper input:checked + .slider 	    { background-color: #2196F3; }
div.cookie-category .toggle-wrapper.disabled input:checked + .slider { background-color: #EEEEEE; }
div.cookie-category .toggle-wrapper input:focus + .slider 		    { box-shadow: 0 0 1px #2196F3; }
div.cookie-category .toggle-wrapper input:checked + .slider:before  { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }
div.cookie-category .toggle-wrapper .slider.round 				    { border-radius: 34px; }
div.cookie-category .toggle-wrapper.disabled .slider.round 		    { cursor: not-allowed; }
div.cookie-category .toggle-wrapper .slider.round:before 		    { border-radius: 50%; }
div.cookie-category .toggle-wrapper .slider.round:disabled 	        { background-color: #eee; }

.switch                                     { position: absolute; top: -6px; right: 0; display: inline-block; width: 82px; height: 34px; }
.switch input                               { opacity: 0; width: 0; height: 0; }
.switch .slider                             { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }
.switch .slider:before                      { position: absolute; content: ""; height: 26px; width: 36px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; z-index: 1; }
.switch input:checked + .slider             { background-color: #304e58; }
.switch input:focus + .slider               { box-shadow: 0 0 1px #304e58; }
.switch input:checked + .slider:before      { -webkit-transform: translateX(38px); -ms-transform: translateX(38px); transform: translateX(38px); z-index: 1; }
.switch .slider.round                       { border-radius: 34px; }
.switch .slider.round:before                { border-radius: 25px; }
.switch .slider.round > span                { position: absolute; top: 9px; color: white; font-size: 0.875rem; user-select: none; }
.switch .slider.round .on                   { left: 13px; }
.switch .slider.round .off                  { right: 13px; color: #666; }

button[name=toggle_cookie_policy]           { position: fixed; left: 0; bottom: 0; padding: 0; border: 0; z-index: 100000; line-height: 0; min-width: 0; background-color: transparent; display: inline-block; height: 80px; width: 80px; overflow: hidden; }
button[name=toggle_cookie_policy] span      { position: fixed; bottom: 16px; left: 15px; color: white; font-size: 1.25rem; }
/* button[name=toggle_cookie_policy] svg       { position: absolute; top: 24px; transform: scale(0.75); left: -20px; } */
button.accept-cookies                       { background-color: #304e58; padding: 0.5rem 1rem; border: 0; border-radius: 8px; color: #fff; min-width: 0; font-size: 1rem; }

@media only screen and (max-width: 800px)
{
    .cookie-policy.centre                   { height: 100vh; width: 100%; max-width: none; max-height: 90%; }
    .cookie-policy.centre .cookie-content   { padding: 2rem 1rem; }
    .cookie-policy.centre .cookie-content .cookie-footer { flex-direction: column; padding: 1rem 1rem; height: auto; }
    .cookie-policy.centre .cookie-content .cookie-footer .left { flex-direction: column; width: 100%; }
    .cookie-policy.centre .cookie-content .cookie-footer .right { width: 100%; }
    .cookie-policy.centre .cookie-content .cookie-footer button { width: 100%; }

    .cookie-policy.centre .cookie-content p { font-size: 0.875rem; }
    .cookie-policy.centre .cookie-content .cookie-header { padding: 0 1rem; }
    .cookie-policy.centre .cookie-content .cookie-body { padding: 0 1rem; flex: 1; max-height: none; }

    div.cookie-category .toggle-wrapper     { width: 54px; height: 26px; }
    div.cookie-category .toggle-wrapper .slider:before { width: 18px; height: 18px; }
}

@media only screen and (max-width: 500px)
{
	.cookie-policy.left						{ max-width: 80%; }
	.cookie-policy.left div.cookie-content	{ padding: 1.5rem 1rem 5rem 1rem; }

    .cookie-policy.centre .cookie-content .cookie-body div.cookie-category span.enabled { display: none; }
}

@keyframes opacity-show {
    0% { opacity: 0; }
    99% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes opacity-hide {
    0% { opacity: 1; }
    99% { opacity: 1; }
    100% { opacity: 0; }
}

/* Persistent consent trigger.  GDPR Art. 7(3): withdrawing consent has to be as easy as giving it,
   so the cookie policy page carries a control that reopens the panel.  Rendered only on the page
   matching the cookie_policy_page_id setting - see includes/cookie_policy.php.

   Styled as a solid rectangular button with a pressed bottom edge and a high contrast focus state,
   deliberately not inheriting the host template's button styling.  min-width, min-height and
   padding are reset because templates commonly set all three on `button`.

   z-index sits below .popup-background (10000) and the panel (100000) so it cannot be clicked
   while the panel is open.  Rebrand in css/custom-ccp.css - background-color is the one value most
   sites will want to change. */
.cookie-settings-trigger                    { position: fixed; left: 16px; bottom: 16px; z-index: 9999; display: inline-flex; align-items: center; font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2; min-width: 0; min-height: 0; width: auto; height: auto; margin: 0; padding: 12px 18px; border: 0; border-bottom: 2px solid rgba(0, 0, 0, .25); border-radius: 0; background-color: #00703c; color: #ffffff; text-align: center; text-transform: none; text-decoration: none; letter-spacing: normal; text-shadow: none; box-shadow: none; cursor: pointer; }
.cookie-settings-trigger:hover              { background-color: #005a30; color: #ffffff; }
.cookie-settings-trigger:active             { border-bottom-width: 0; transform: translateY(2px); }
.cookie-settings-trigger:focus-visible      { outline: 3px solid transparent; background-color: #ffdd00; color: #0b0c0c; border-bottom-color: #0b0c0c; box-shadow: 0 -2px #ffdd00, 0 4px #0b0c0c; }

@media (max-width: 480px)                   { .cookie-settings-trigger { left: 8px; bottom: 8px; font-size: 0.9375rem; padding: 10px 14px; } }
@media print                                { .cookie-settings-trigger { display: none; } }