/*src:1789408126:494712*/



@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');


@view-transition {
navigation: none;
}

:root {

color-scheme: light dark;


--opc-primary: var(--bs-primary, #1f3c88);
--opc-primary-contrast: #fff;
--opc-accent-contrast: #fff;


--opc-font-heading: 'Quicksand', var(--opc-font-body);
--opc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

--opc-primary-tint: color-mix(in srgb, var(--opc-primary) 8%, var(--opc-surface));
--opc-primary-ring: color-mix(in srgb, var(--opc-primary) 16%, transparent);


--opc-danger: var(--bs-danger, #dc3545);

--opc-success: var(--bs-success, #198754);

--opc-congested: #d6336c;
--opc-muted: var(--bs-secondary-color, #64748b);

--opc-danger-bg: #f8d7da;
--opc-danger-border: #f1aeb5;
--opc-warning: #fd7e14;
--opc-warning-bg: #ffe5d0;
--opc-warning-border: #fecba1;
--opc-status-confirmed: #d1f3df;
--opc-status-completed: #0dcaf0;
--opc-status-pending: #ffc107;
--opc-text-closed: #94a3b8;

--opc-surface-alt: #ececec;
--opc-radius-badge: 6px;


--opc-shape: 999px;



--opc-surface: #f0f0f0;
--opc-surface-sunken: #cccccc;
--opc-border: #a3a3a3;

--opc-border-light: color-mix(in srgb, var(--opc-border) 55%, var(--opc-surface));

--opc-text: #1e293b;
--opc-text-faint: #94a3b8;
--opc-text-soft: #475569;
--opc-text-placeholder: #cbd5e1;


--bs-card-bg: var(--opc-surface);
--bs-card-border-color: var(--opc-border);
--bs-modal-bg: var(--opc-surface);
--bs-modal-content-bg: var(--opc-surface);
--bs-modal-content-border-color: var(--opc-border);
--bs-modal-header-border-color: var(--opc-border);
--bs-modal-footer-border-color: var(--opc-border);
--bs-dropdown-bg: var(--opc-surface);
--bs-dropdown-border-color: var(--opc-border);
--bs-list-group-bg: var(--opc-surface);
--bs-list-group-border-color: var(--opc-border);


--opc-shadow-color: #0f172a;
--opc-shadow-resting: 0 1px 2px color-mix(in srgb, var(--opc-shadow-color) 6%, transparent),
0 1px 1px color-mix(in srgb, var(--opc-shadow-color) 4%, transparent);
--opc-shadow-lifted: 0 20px 30px -14px color-mix(in srgb, var(--opc-shadow-color) 35%, transparent),
0 8px 12px -6px color-mix(in srgb, var(--opc-shadow-color) 14%, transparent);

--opc-radius: 10px;
--opc-radius-sm: 6px;
--opc-radius-lg: 10px;


--opc-accent: #ea580c;
--opc-gradient-primary: linear-gradient(135deg, var(--opc-primary), var(--opc-accent));


--opc-neo-shadow-out: 6px 6px 14px color-mix(in srgb, var(--opc-surface) 80%, #000 20%),
-6px -6px 14px color-mix(in srgb, var(--opc-surface) 96%, #fff 4%);
--opc-neo-shadow-in: inset 3px 3px 8px color-mix(in srgb, var(--opc-surface) 82%, #000 18%),
inset -3px -3px 8px color-mix(in srgb, var(--opc-surface) 97%, #fff 3%);


--opc-card-shadow: var(--opc-neo-shadow-out);


--opc-star-bronze: #b0764a;
--opc-star-silver: #9aa4b2;
--opc-star-gold: #d4a72c;


--opc-badge-notify-bg: #dc2626;
--opc-badge-notify-fg: #fff;
}


* {
scrollbar-width: none; 
-ms-overflow-style: none; 
}
*::-webkit-scrollbar {
display: none; 
width: 0;
height: 0;
}


body {
background-color: var(--opc-surface-sunken);
font-family: var(--opc-font-body);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--opc-font-heading);
font-weight: 700;
}


body {

background-color: var(--opc-surface-sunken);
background-image: linear-gradient(180deg,
color-mix(in srgb, var(--opc-surface-sunken) 92%, white),
var(--opc-surface-sunken) 480px);
background-attachment: fixed;
}



.item-page {
max-width: 900px;
margin-inline: auto;
background: var(--opc-surface);
border: 1px solid var(--opc-border);
border-radius: 16px;
padding: 1.75rem clamp(1rem, 4vw, 2.5rem) 2.25rem;
box-shadow: var(--opc-shadow-resting);

display: flow-root;
}
body.opc-home .item-page .page-header {
border: 0;
margin-bottom: .25rem;
padding-bottom: 0;
}
body.opc-home .item-page .page-header h1 {
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .08em;
font-weight: 600;
color: var(--opc-muted);
margin: 0;
}

.item-page > :has(> img) {
float: none !important;
width: auto !important;
max-width: none !important;
margin: 0 0 1.5rem !important;
}
.item-page > :not(.page-header) {
clear: both;
}

.item-page img {
display: block !important;
float: none !important;
width: auto !important;
height: 375px !important; 
max-width: 100%;
object-fit: contain;
border-radius: 12px;

box-shadow: 0 20px 30px -14px color-mix(in srgb, var(--opc-shadow-color) 45%, transparent),
0 8px 12px -6px color-mix(in srgb, var(--opc-shadow-color) 25%, transparent),
14px 8px 26px -12px color-mix(in srgb, var(--opc-shadow-color) 40%, transparent);
margin: 0 auto 1.5rem !important;
}

@media (max-width: 767.98px) {
.item-page img {
width: 100% !important;
height: auto !important;
}
}

.item-page :is(h2, h3) {
margin-top: 1.75rem;
margin-bottom: .5rem;
}
.item-page > :is(h2, h3, p):first-child {
margin-top: 0;
}
.item-page p {
max-width: 68ch;
line-height: 1.65;
}
.item-page :is(ul, ol) {
margin-top: .5rem;
margin-bottom: 1.25rem;
}
.item-page li {
margin-bottom: .5rem;
}
.item-page p:has(> strong:first-child) {
max-width: none;
background: var(--opc-surface-sunken);
border-left: 3px solid var(--opc-primary);
border-radius: 0 8px 8px 0;
padding: .65rem .9rem;
margin: .6rem 0;
}
.item-page p:has(> strong:first-child) > strong {
display: block;
margin-bottom: .15rem;
color: var(--opc-primary);
}



.item-page:has(> .opc-pet-notice) {
max-width: 30rem;
}
.opc-pet-notice {
text-align: center;
max-width: 100%;
margin: 0 auto;
}
.opc-pet-notice-badge {
display: inline-block;
font-size: .8rem;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
padding: .4rem 1.05rem;
border-radius: 999px;
margin-bottom: 1.25rem;
}
.opc-pet-notice--lost .opc-pet-notice-badge {
color: var(--bs-danger-text-emphasis, #842029);
background-color: var(--bs-danger-bg-subtle, #f8d7da);
border: 1px solid var(--bs-danger-border-subtle, #f1aeb5);
}
.opc-pet-notice--runaway .opc-pet-notice-badge {
color: var(--bs-warning-text-emphasis, #997404);
background-color: var(--bs-warning-bg-subtle, #fff3cd);
border: 1px solid var(--bs-warning-border-subtle, #ffe69c);
}
.opc-pet-notice--adopted .opc-pet-notice-badge,
.opc-pet-notice--found .opc-pet-notice-badge {
color: var(--bs-success-text-emphasis, #146c43);
background-color: var(--bs-success-bg-subtle, #d1e7dd);
border: 1px solid var(--bs-success-border-subtle, #a3cfbb);
}

.opc-pet-notice-photo {
width: 13rem;
height: 13rem;
margin: 0 auto 1.25rem;
border-radius: 50%;
padding: .3rem;
}
.opc-pet-notice--lost .opc-pet-notice-photo {
background: var(--bs-danger, #dc3545);
}
.opc-pet-notice--runaway .opc-pet-notice-photo {
background: var(--bs-warning, #ffc107);
}
.opc-pet-notice--adopted .opc-pet-notice-photo,
.opc-pet-notice--found .opc-pet-notice-photo {
background: var(--bs-success, #198754);
}

.item-page .opc-pet-notice-photo img {
display: block !important;
float: none !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover;
border-radius: 50%;
border: 3px solid var(--opc-surface);
box-shadow: none;
margin: 0 !important;
}
.opc-pet-notice-chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .5rem;
margin-bottom: 1rem;
}

.opc-pet-notice-chips span {
font-size: .88rem;
font-weight: 600;
color: var(--opc-text);
background: var(--opc-surface-sunken);
border: 1px solid var(--opc-border);
padding: .35rem .9rem;
border-radius: 999px;
}
.item-page .opc-pet-notice-posted {
font-size: .95rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--opc-text-soft);
max-width: none;
margin: 0 0 1.5rem;
}

.opc-pet-notice-notes {
text-align: left;
background: color-mix(in srgb, var(--opc-surface) 55%, var(--opc-surface-sunken) 45%);
border: 1px solid var(--opc-border);
border-left: 4px solid var(--opc-text-faint);
border-radius: var(--opc-radius);
padding: 1.1rem 1.25rem;
margin: 0 0 1.1rem;
}
.opc-pet-notice-notes strong {
display: block;
font-size: .75rem;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--opc-text-soft);
margin-bottom: .45rem;
}
.item-page .opc-pet-notice-notes p {
max-width: none;
margin: 0;
font-size: 1rem;
line-height: 1.6;
color: var(--opc-text);
}
.opc-pet-notice-contact {
text-align: left;
background: color-mix(in srgb, var(--opc-primary) 14%, var(--opc-surface));
border: 1px solid var(--opc-primary);
border-left: 4px solid var(--opc-primary);
border-radius: var(--opc-radius);
padding: 1.15rem 1.3rem;
}
.opc-pet-notice-contact strong {
display: block;
font-size: .75rem;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--opc-primary);
margin-bottom: .65rem;
}
.opc-pet-notice-contact-line {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
font-size: 1rem;
color: var(--opc-text);
padding: .45rem 0;
border-top: 1px solid color-mix(in srgb, var(--opc-primary) 30%, var(--opc-border));
}
.opc-pet-notice-contact-line:first-of-type {
border-top: 0;
}
.opc-pet-notice-contact-line a {
color: var(--opc-text);
font-weight: 700;
text-decoration: none;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.opc-pet-notice-contact-line a:hover {
text-decoration: underline;
}




.btn-primary {
background: var(--opc-gradient-primary);

border: none;
color: var(--opc-primary-contrast);
}
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary.is-pressed {
background: var(--opc-gradient-primary);
border: none;
box-shadow: var(--opc-glow-shadow);
color: var(--opc-primary-contrast);
}

.btn-outline-primary {
background-color: var(--opc-primary) !important;
border-color: var(--opc-primary) !important;
color: var(--opc-primary-contrast) !important;
transition: background-color .45s ease, border-color .45s ease;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
background-color: color-mix(in srgb, var(--opc-primary) 85%, black) !important;
border-color: color-mix(in srgb, var(--opc-primary) 85%, black) !important;
color: var(--opc-primary-contrast) !important;
}

.btn-outline-primary.is-pressed {
background-color: var(--opc-accent) !important;
border-color: var(--opc-accent) !important;
color: var(--opc-primary-contrast) !important;
transition: none;
}
.badge.bg-primary {
background-color: var(--opc-primary) !important;
}

.badge.bg-warning {
background-color: var(--opc-warning) !important;
}
.badge.bg-danger {
background-color: var(--opc-danger) !important;
}

:root {
--bs-link-color: var(--opc-primary);
--bs-link-hover-color: color-mix(in srgb, var(--opc-primary) 80%, black);
--bs-code-color: var(--opc-primary);
}


.btn-outline-danger {
color: var(--opc-danger);
border-color: var(--opc-danger);
}
.btn-outline-danger:hover,
.btn-outline-danger:focus-visible,
.btn-outline-danger.is-pressed {
background-color: var(--opc-danger);
border-color: var(--opc-danger);
color: #fff;
}
[data-bs-theme="dark"] .btn-outline-danger {
background-color: var(--opc-danger) !important;
border-color: var(--opc-danger) !important;
color: #fff !important;
}
[data-bs-theme="dark"] .btn-outline-danger:hover,
[data-bs-theme="dark"] .btn-outline-danger:focus-visible,
[data-bs-theme="dark"] .btn-outline-danger.is-pressed {
background-color: color-mix(in srgb, var(--opc-danger) 85%, black) !important;
border-color: color-mix(in srgb, var(--opc-danger) 85%, black) !important;
color: #fff !important;
}
.btn-danger {
background: var(--opc-danger);
border-color: var(--opc-danger);
color: #fff;
}
.btn-danger:hover,
.btn-danger:focus-visible,
.btn-danger.is-pressed {
background: color-mix(in srgb, var(--opc-danger) 85%, black);
border-color: color-mix(in srgb, var(--opc-danger) 85%, black);
color: #fff;
}

.btn-outline-danger,
.btn-danger {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 1.75rem;
padding: 0 .65rem;
font-size: .8rem;
line-height: 1;
}


.btn {
position: relative;

border-radius: var(--opc-shape);

transition: color .15s ease-in-out, background-color .15s ease-in-out,
border-color .15s ease-in-out, box-shadow .15s ease-in-out,
transform .12s ease;
}
.btn:hover,
.btn:focus-visible {
transform: translateY(-1px);
}
.btn:active,
.btn.is-pressed {
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.btn:hover,
.btn:focus-visible {
transform: none;
}
}


.form-control:not(textarea),
.form-select,
.input-group-text {
border-radius: 999px;
}

textarea.form-control {
border-radius: 10px;
}

.btn .opc-btn-icon {
margin-right: .4rem;
}


.opc-badge-notify {
background: var(--opc-badge-notify-bg);
color: var(--opc-badge-notify-fg);
border-radius: 9999px;
font-weight: 700;
line-height: 1;
text-align: center;
}
.opc-badge-notify:empty {
display: none;
}
.opc-btn-ripple-mask {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: inherit;
pointer-events: none;
}

.input-password-toggle .opc-btn-ripple-mask {
font-size: 0;
}
.opc-btn-ripple {
position: absolute;
border-radius: 50%;
background: currentColor;
opacity: .35;
transform: scale(0);
pointer-events: none;
animation: opc-btn-ripple .55s ease-out forwards;
}
@keyframes opc-btn-ripple {
to {
transform: scale(2.6);
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.opc-btn-ripple {
animation: none;
display: none;
}
}


.btn.is-busy {
cursor: wait;
opacity: .75;
}


#hcc-cart-btn.opc-cart-pulse {
animation: opc-cart-pulse 3s ease-in-out;
}
@keyframes opc-cart-pulse {
0%, 30%, 60%, 100% { transform: scale(1); }
15%, 45%           { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
#hcc-cart-btn.opc-cart-pulse {
animation: none;
}
}



[data-bs-theme="dark"] {
color-scheme: dark;


--bs-body-bg: #0e131d;
--bs-body-bg-rgb: 14, 19, 29;
--bs-body-color: #dce2ec;
--bs-body-color-rgb: 220, 226, 236;
--bs-emphasis-color: #f5f6f8;
--bs-emphasis-color-rgb: 245, 246, 248;
--bs-heading-color: #eef0f3;


--bs-secondary-bg: #161d2c;
--bs-secondary-bg-rgb: 22, 29, 44;
--bs-tertiary-bg: #1f2a3f;
--bs-tertiary-bg-rgb: 31, 42, 63;
--bs-secondary-color: #a7b0c4;
--bs-secondary-color-rgb: 167, 176, 196;
--bs-tertiary-color: #77839b;
--bs-tertiary-color-rgb: 119, 131, 155;


--bs-border-color: #2c3650;
--bs-border-color-translucent: rgba(190, 205, 235, .12);


--bs-link-color: color-mix(in srgb, var(--opc-primary, #1f3c88) 70%, white);
--bs-link-hover-color: color-mix(in srgb, var(--opc-primary, #1f3c88) 55%, white);


--bs-card-bg: var(--bs-secondary-bg);
--bs-card-cap-bg: var(--bs-tertiary-bg);
--bs-card-border-color: var(--bs-border-color);
--bs-dropdown-bg: var(--bs-secondary-bg);
--bs-dropdown-border-color: var(--bs-border-color);
--bs-dropdown-link-color: var(--bs-body-color);
--bs-dropdown-link-hover-color: var(--bs-emphasis-color);
--bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
--bs-modal-bg: var(--bs-secondary-bg);
--bs-modal-content-bg: var(--bs-secondary-bg);
--bs-modal-content-border-color: var(--bs-border-color);
--bs-modal-header-border-color: var(--bs-border-color);
--bs-modal-footer-border-color: var(--bs-border-color);
--bs-table-color: var(--bs-body-color);
--bs-table-bg: transparent;
--bs-table-border-color: var(--bs-border-color);
--bs-table-striped-bg: rgba(190, 205, 235, .04);
--bs-table-hover-bg: rgba(190, 205, 235, .05);
--bs-list-group-bg: var(--bs-secondary-bg);
--bs-list-group-border-color: var(--bs-border-color);
--bs-list-group-action-hover-bg: var(--bs-tertiary-bg);
--bs-nav-tabs-link-active-bg: var(--bs-secondary-bg);
--bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-secondary-bg);
--bs-nav-link-color: var(--bs-body-color);
--bs-nav-link-hover-color: var(--bs-emphasis-color);
--bs-code-color: #f0a032;


--opc-danger: var(--bs-danger, #ea868f);

--opc-congested: #f06595;

--opc-success: var(--bs-success, #2fb380);
--opc-muted: var(--bs-secondary-color, #aeb3bc);

--opc-danger-bg: rgba(234, 134, 143, .18);
--opc-danger-border: rgba(234, 134, 143, .4);
--opc-warning: #ffb454;
--opc-warning-bg: rgba(255, 180, 84, .18);
--opc-warning-border: rgba(255, 180, 84, .4);
--opc-status-confirmed: #2f9e5c;
--opc-status-completed: #22b8cf;
--opc-status-pending: #d4a017;
--opc-text-closed: var(--bs-tertiary-color, #77839b);
--opc-surface-alt: var(--bs-tertiary-bg, #1f2a3f);
--opc-surface: var(--bs-secondary-bg, #161d2c);
--opc-surface-sunken: var(--bs-body-bg, #0e131d);
--opc-border: var(--bs-border-color, #2c3650);

--opc-border-light: color-mix(in srgb, var(--opc-border) 55%, var(--opc-surface));
--opc-text: var(--bs-body-color, #e6e9f0);
--opc-text-faint: var(--bs-tertiary-color, #77839b);
--opc-text-soft: var(--bs-secondary-color, #a7b0c4);

--opc-text-placeholder: #8b95ad;

--opc-shadow-color: #000000;
--opc-shadow-resting: 0 1px 2px color-mix(in srgb, var(--opc-shadow-color) 30%, transparent),
0 1px 1px color-mix(in srgb, var(--opc-shadow-color) 20%, transparent);
--opc-shadow-lifted: 0 20px 30px -14px color-mix(in srgb, var(--opc-shadow-color) 60%, transparent),
0 8px 12px -6px color-mix(in srgb, var(--opc-shadow-color) 40%, transparent);


--opc-accent: #f97316;
--opc-gradient-primary: linear-gradient(135deg, var(--opc-primary), var(--opc-accent));
--opc-glow-shadow: 0 0 1px color-mix(in srgb, var(--opc-accent) 60%, transparent),
0 0 40px color-mix(in srgb, var(--opc-primary) 35%, transparent);
--opc-card-shadow: var(--opc-shadow-lifted);
}


[data-bs-theme="dark"] body {
background-color: var(--bs-body-bg, #1a1d24) !important;
color: var(--bs-body-color, #d7dae0) !important;
}


[data-bs-theme="dark"] body {
background-image: linear-gradient(180deg,
color-mix(in srgb, var(--bs-body-bg, #1a1d24) 90%, white),
var(--bs-body-bg, #1a1d24) 480px);
}

[data-bs-theme="light"] {
color-scheme: light;
}


[data-bs-theme="dark"] hr {
border-color: var(--bs-border-color);
opacity: .5;
}
[data-bs-theme="dark"] ::selection {
background-color: rgba(240, 160, 50, .35);
color: var(--bs-emphasis-color);
}


[data-bs-theme="dark"] .shadow,
[data-bs-theme="dark"] .shadow-lg {
box-shadow: var(--opc-shadow-lifted) !important;
}
[data-bs-theme="dark"] .shadow-sm {
box-shadow: var(--opc-shadow-resting) !important;
}



.header,
header.header,
#header {
background-color: var(--opc-surface);
background-image: none;
border-bottom: 1px solid var(--opc-border);
}
[data-bs-theme="dark"] .site-title,
[data-bs-theme="dark"] .site-title a {
color: var(--bs-heading-color);
}
.footer,
footer.footer,
#footer {
background-color: var(--opc-surface);
background-image: none;
border-top: 1px solid var(--opc-border);
color: var(--opc-text-soft);
}
[data-bs-theme="dark"] .offcanvas,
[data-bs-theme="dark"] .offcanvas-body {
background-color: var(--bs-secondary-bg) !important;
color: var(--bs-body-color) !important;
}
[data-bs-theme="dark"] .search input.form-control,
[data-bs-theme="dark"] .finder-selected-tag {
background-color: var(--bs-tertiary-bg);
border-color: var(--bs-border-color);
color: var(--bs-body-color);
}
[data-bs-theme="dark"] .metismenu .nav-link,
[data-bs-theme="dark"] .metismenu a {
color: var(--bs-body-color);
}
[data-bs-theme="dark"] .metismenu .nav-link:hover,
[data-bs-theme="dark"] .metismenu a:hover {
background-color: var(--bs-tertiary-bg);
}


[class^="com-onepetconnect-"] .form-control,
[class^="com-onepetconnect-"] .form-select,
[class^="com-onepetconnect-"] .opc-select-trigger,
.opc-profile-wrap .form-control,
.opc-profile-wrap .form-select,
.opc-profile-wrap .opc-select-trigger,
.opc-profile-page .form-control,
.opc-profile-page .form-select,
.opc-profile-page .opc-select-trigger {
background-color: var(--opc-surface);
box-shadow: var(--opc-neo-shadow-in);
border-color: transparent;
}

[class^="com-onepetconnect-"] .form-select,
[class^="com-onepetconnect-"] .opc-select-trigger,
.opc-profile-wrap .form-select,
.opc-profile-wrap .opc-select-trigger,
.opc-profile-page .form-select,
.opc-profile-page .opc-select-trigger {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23495057' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .9rem center;
background-size: 14px 10px;
}

[class^="com-onepetconnect-"] .form-control,
.opc-profile-wrap .form-control,
.opc-profile-page .form-control {
background-image: none;
}
[class^="com-onepetconnect-"] .form-control:focus,
[class^="com-onepetconnect-"] .form-select:focus,
[class^="com-onepetconnect-"] .opc-select-trigger:focus-visible,
.opc-profile-wrap .form-control:focus,
.opc-profile-wrap .form-select:focus,
.opc-profile-wrap .opc-select-trigger:focus-visible,
.opc-profile-page .form-control:focus,
.opc-profile-page .form-select:focus,
.opc-profile-page .opc-select-trigger:focus-visible {

box-shadow: var(--opc-neo-shadow-in), 0 0 0 .2rem var(--opc-primary-ring);
border-color: var(--opc-primary);
}


[class^="com-onepetconnect-"] .dropdown-menu,
.opc-profile-wrap .dropdown-menu,
.opc-profile-page .dropdown-menu {
background-color: var(--opc-surface);
border-color: var(--opc-border-light);
box-shadow: var(--opc-card-shadow);
}
[class^="com-onepetconnect-"] .dropdown-item:hover,
[class^="com-onepetconnect-"] .dropdown-item:focus,
.opc-profile-wrap .dropdown-item:hover,
.opc-profile-wrap .dropdown-item:focus,
.opc-profile-page .dropdown-item:hover,
.opc-profile-page .dropdown-item:focus {
background-color: var(--opc-surface-sunken);
}


[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .opc-select-trigger,
[data-bs-theme="dark"] input.form-control,
[data-bs-theme="dark"] textarea.form-control {
background-color: var(--bs-tertiary-bg) !important;
border-color: var(--bs-border-color) !important;
color: var(--bs-body-color) !important;

color-scheme: dark;
}
[data-bs-theme="dark"] .form-control::placeholder {
color: var(--bs-tertiary-color) !important;
}

[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .opc-select-trigger {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23d7dae0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 5l6 6 6-6'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right .9rem center !important;
background-size: 14px 10px !important;
}

[data-bs-theme="dark"] .form-control:not(.form-select) {
background-image: none !important;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] .opc-select-trigger:focus-visible {
background-color: var(--bs-tertiary-bg) !important;
color: var(--bs-body-color) !important;
border-color: var(--bs-primary) !important;
box-shadow: 0 0 0 .25rem rgba(240, 160, 50, .15);
}

.opc-select {
position: relative;
}
.opc-select-trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
text-align: left;
}
.opc-select-trigger:disabled {
opacity: .65;
cursor: not-allowed;
}
.opc-select-native {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.opc-select-menu {
display: none;
position: absolute;
inset-inline: 0;
top: 100%;
z-index: 1055;
margin-top: .25rem;
max-height: 15rem;
overflow-y: auto;
min-width: 100%;

touch-action: pan-y;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}


.opc-select-menu.show {
display: block;
}
.opc-select-option {
display: block;
width: 100%;
text-align: left;
white-space: normal;
}


.opc-combo-picker {
position: relative;
}
.opc-combo-picker-menu {
display: none;
position: absolute;
inset-inline: 0;
top: 100%;
z-index: 1055;
margin-top: .25rem;
max-height: 15rem;
overflow-y: auto;
min-width: 100%;
}
.opc-combo-picker-menu.show {
display: block;
}
.opc-combo-picker-option {
display: block;
width: 100%;
text-align: left;
white-space: normal;
}

[data-bs-theme="dark"] .form-check-input {
background-color: var(--bs-tertiary-bg) !important;
border-color: var(--bs-border-color) !important;
}


[data-bs-theme="dark"] .breadcrumb {
background-color: transparent;
}
[data-bs-theme="dark"] .page-link {
background-color: var(--bs-secondary-bg);
border-color: var(--bs-border-color);
color: var(--bs-body-color);
}
[data-bs-theme="dark"] .page-item.active .page-link {
background-color: var(--bs-primary);
border-color: var(--bs-primary);
color: var(--bs-primary-contrast, #fff);
}


[class^="com-onepetconnect-"] .card,
.opc-profile-wrap .card,
.opc-profile-page .card {
--card-border-radius: var(--opc-radius-lg);
--card-inner-border-radius: calc(var(--opc-radius-lg) - var(--card-border-width, 1px));
border-radius: var(--opc-radius-lg);
box-shadow: var(--opc-card-shadow);
border-color: var(--opc-border-light);
}

.opc-card-footer-btn {
width: 100%;
border-radius: 0 0 var(--card-inner-border-radius, .25rem) var(--card-inner-border-radius, .25rem);
}


[class^="com-onepetconnect-"] .btn-outline-secondary,
[class^="com-onepetconnect-"] .btn-secondary,
.opc-profile-wrap .btn-outline-secondary,
.opc-profile-page .btn-outline-secondary {
box-shadow: var(--opc-neo-shadow-out);
border-color: var(--opc-border) !important;
background-color: var(--opc-surface-alt) !important;
color: var(--opc-text-soft);
transition: background-color .45s ease, border-color .45s ease, color .45s ease;
}
[class^="com-onepetconnect-"] .btn-outline-secondary:hover,
[class^="com-onepetconnect-"] .btn-secondary:hover,
.opc-profile-wrap .btn-outline-secondary:hover,
.opc-profile-page .btn-outline-secondary:hover {
border-color: var(--opc-primary) !important;
color: var(--opc-primary);
}
[class^="com-onepetconnect-"] .btn-group .btn,
.opc-profile-wrap .btn-group .btn,
.opc-profile-page .btn-group .btn {
box-shadow: none;
}

[class^="com-onepetconnect-"] .btn-outline-secondary.active,
[class^="com-onepetconnect-"] .btn-secondary.active,
.opc-profile-wrap .btn-outline-secondary.active,
.opc-profile-page .btn-outline-secondary.active {
background-color: var(--opc-primary) !important;
border-color: var(--opc-primary) !important;
color: var(--opc-primary-contrast) !important;
box-shadow: none;
}

[class^="com-onepetconnect-"] .btn-outline-secondary.is-pressed,
[class^="com-onepetconnect-"] .btn-secondary.is-pressed,
.opc-profile-wrap .btn-outline-secondary.is-pressed,
.opc-profile-page .btn-outline-secondary.is-pressed {
background-color: var(--opc-accent) !important;
border-color: var(--opc-accent) !important;
color: var(--opc-primary-contrast) !important;
box-shadow: none;
transition: none;
}


.hcc-book-cal {
background: var(--opc-surface);
border-radius: var(--opc-radius-lg);
box-shadow: var(--opc-card-shadow);
padding: .75rem;
max-width: 640px;
margin-inline: auto;
}




.com-onepetconnect-booking,
.com-onepetconnect-bookings,
.com-onepetconnect-store,
.com-onepetconnect-activity,
.com-onepetconnect-pet-edit,
.com-onepetconnect-product,
.com-onepetconnect-dashboard,
.com-onepetconnect-pets,
.com-onepetconnect-orders,
.com-onepetconnect-order,
.com-onepetconnect-cart,
.opc-profile-page {
max-width: 900px;
margin-inline: auto;
}

#hcc-booking.hcc-no-anim #hcc-book-fields-row,
#hcc-booking.hcc-no-anim #hcc-book-fields-row .hcc-field {
transition: none !important;
}
.hcc-book-controls {
background: var(--opc-surface);
border: 1px solid var(--opc-border);
border-radius: var(--opc-radius-lg);
box-shadow: var(--opc-card-shadow);
padding: 1rem 1.1rem .85rem;
margin-bottom: .4rem;
}

#hcc-book-fields-row {
--bs-gutter-y: .5rem;
}



@media (min-width: 1200px) {
#hcc-book-fields-row {
display: flex;
flex-wrap: nowrap;
gap: 1rem;
margin-inline: auto;
transition: max-width .35s ease;
}
#hcc-book-fields-row[data-fields="1"] { max-width: max(22rem, var(--opc-book-nav-w, 22rem)); }
#hcc-book-fields-row[data-fields="2"] { max-width: max(42rem, var(--opc-book-nav-w, 42rem)); }
#hcc-book-fields-row[data-fields="3"] { max-width: 100%; }

#hcc-book-fields-row .hcc-field {
flex: 1 1 0;
width: auto;
max-width: none;
transition: flex-grow .35s ease;
}
}
[data-bs-theme="dark"] .hcc-book-cal {
border: 1px solid var(--opc-border);
}

.hcc-calendar-area {
position: relative;
}
.hcc-calendar-lock {
position: absolute;
inset: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 1.5rem;
background: rgba(0, 0, 0, .55);
border-radius: var(--opc-radius-lg);
}
.hcc-calendar-lock[hidden] { display: none; }
.hcc-calendar-lock p {
background: var(--opc-surface);
border: 1px solid var(--opc-border);
border-radius: var(--opc-radius-lg);
padding: .85rem 1.25rem;
max-width: 26rem;
box-shadow: var(--opc-card-shadow);
}


[data-bs-theme="dark"] .card {

background-color: var(--opc-surface) !important;
border-color: var(--opc-border) !important;
color: var(--bs-body-color, #d7dae0) !important;
}
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer {
background-color: var(--bs-tertiary-bg, #2c313b) !important;
border-color: var(--bs-border-color, #3a4049) !important;
color: var(--bs-body-color, #d7dae0) !important;
}
[data-bs-theme="dark"] .table-responsive {
background-color: var(--bs-secondary-bg, #23272f) !important;
border-color: var(--bs-border-color, #3a4049) !important;
}
[data-bs-theme="dark"] .list-group-item {
background-color: var(--bs-secondary-bg, #23272f) !important;
border-color: var(--bs-border-color, #3a4049) !important;
color: var(--bs-body-color, #d7dae0) !important;
}
[data-bs-theme="dark"] .dropdown-menu {
background-color: var(--bs-secondary-bg, #23272f) !important;
border-color: var(--bs-border-color, #3a4049) !important;
}
[data-bs-theme="dark"] .dropdown-item {
color: var(--bs-body-color, #d7dae0) !important;
}
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
background-color: var(--bs-tertiary-bg, #2c313b) !important;
color: var(--bs-emphasis-color, #f5f6f8) !important;
}
[data-bs-theme="dark"] .modal-content {
background-color: var(--bs-secondary-bg, #23272f) !important;
border-color: var(--bs-border-color, #3a4049) !important;
color: var(--bs-body-color, #d7dae0) !important;
}
[data-bs-theme="dark"] .accordion-item,
[data-bs-theme="dark"] .accordion-button {
background-color: var(--bs-secondary-bg, #23272f) !important;
border-color: var(--bs-border-color, #3a4049) !important;
color: var(--bs-body-color, #d7dae0) !important;
}
[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
background-color: var(--bs-tertiary-bg, #2c313b) !important;
}
[data-bs-theme="dark"] .nav-tabs .nav-link.active {
background-color: var(--bs-secondary-bg, #23272f) !important;
border-color: var(--bs-border-color, #3a4049) var(--bs-border-color, #3a4049) var(--bs-secondary-bg, #23272f) !important;
color: var(--bs-body-color, #d7dae0) !important;
}
[data-bs-theme="dark"] .table {
--bs-table-bg: transparent !important;
--bs-table-striped-color: var(--bs-body-color, #d7dae0) !important;
color: var(--bs-body-color, #d7dae0) !important;
}

[data-bs-theme="dark"] .table > :not(caption) > * > * {
color: var(--bs-body-color, #d7dae0) !important;
border-bottom-color: var(--bs-border-color, #3a4049) !important;
}
[data-bs-theme="dark"] .table > thead > tr > th {
color: var(--bs-body-color, #d7dae0) !important;
border-bottom-color: var(--bs-border-color, #3a4049) !important;
}

[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-body-secondary,

[data-bs-theme="dark"] .form-text {
color: var(--bs-secondary-color, #aeb3bc) !important;
}

[data-bs-theme="dark"] .text-body {
color: var(--bs-body-color, #d7dae0) !important;
}
[data-bs-theme="dark"] .alert:not(.alert-info):not(.alert-danger):not(.alert-warning):not(.alert-success) {
background-color: var(--bs-tertiary-bg, #2c313b) !important;
border-color: var(--bs-border-color, #3a4049) !important;
color: var(--bs-body-color, #d7dae0) !important;
}


[data-bs-theme="dark"] .btn-outline-secondary {
background-color: var(--bs-tertiary-bg, #2c313b) !important;
color: var(--bs-body-color, #d7dae0) !important;
border-color: var(--bs-border-color, #3a4049) !important;
}
[data-bs-theme="dark"] .btn-outline-secondary:hover,
[data-bs-theme="dark"] .btn-outline-secondary:focus,
[data-bs-theme="dark"] .btn-outline-secondary:active {
background-color: var(--bs-border-color, #3a4049) !important;
border-color: var(--bs-border-color, #3a4049) !important;
color: var(--bs-emphasis-color, #f5f6f8) !important;
}
[data-bs-theme="dark"] .btn-secondary {
background-color: var(--bs-tertiary-bg, #2c313b) !important;
border-color: var(--bs-border-color, #3a4049) !important;
color: var(--bs-body-color, #d7dae0) !important;
}
[data-bs-theme="dark"] .btn-secondary:hover,
[data-bs-theme="dark"] .btn-secondary:focus,
[data-bs-theme="dark"] .btn-secondary:active {
background-color: var(--bs-border-color, #3a4049) !important;
border-color: var(--bs-border-color, #3a4049) !important;
color: var(--bs-emphasis-color, #f5f6f8) !important;
}
[data-bs-theme="dark"] .badge.bg-secondary {
background-color: var(--bs-tertiary-bg, #2c313b) !important;
color: var(--bs-body-color, #d7dae0) !important;
}

[data-bs-theme="dark"] .btn-outline-secondary.active,
[data-bs-theme="dark"] .btn-secondary.active {
background-color: var(--opc-primary) !important;
border-color: var(--opc-primary) !important;
color: var(--opc-primary-contrast) !important;
}
[data-bs-theme="dark"] .btn-outline-secondary.is-pressed,
[data-bs-theme="dark"] .btn-secondary.is-pressed {
background-color: var(--opc-accent) !important;
border-color: var(--opc-accent) !important;
color: var(--opc-primary-contrast) !important;
transition: none;
}


tmpl), and (2) Joomla core's system
messages ("You have been logged out", "Please login first", etc.), which
render as a <joomla-alert type="success|error|warning|info|notice|message">
custom element in #system-message-container, styled entirely by the
[type="..."] attribute — no .alert-* class ever lands on that element, so
the Bootstrap-class rule alone never touched it. */
.alert-success,
.alert-danger,
.alert-warning,
.alert-info {
display: none !important;
}
#system-message-container joomla-alert {
display: none !important;
}


body.view-registration .alert-success,
body.view-registration .alert-danger,
body.view-registration .alert-warning,
body.view-registration .alert-info,

body.view-assessmentquestionedit .alert-success,
body.view-assessmentquestionedit .alert-danger,
body.view-assessmentquestionedit .alert-warning,
body.view-assessmentquestionedit .alert-info,
body.view-assessmentquestions .alert-success,
body.view-assessmentquestions .alert-danger,
body.view-assessmentquestions .alert-warning,
body.view-assessmentquestions .alert-info,
body.view-reportcardquestionedit .alert-success,
body.view-reportcardquestionedit .alert-danger,
body.view-reportcardquestionedit .alert-warning,
body.view-reportcardquestionedit .alert-info,
body.view-assessments .alert-success,
body.view-assessments .alert-danger,
body.view-assessments .alert-warning,
body.view-assessments .alert-info {
display: block !important;
}

body.view-registration #system-message-container joomla-alert,
body.view-assessmentquestionedit #system-message-container joomla-alert,
body.view-assessmentquestions #system-message-container joomla-alert,
body.view-reportcardquestionedit #system-message-container joomla-alert,
body.view-assessments #system-message-container joomla-alert {
display: flex !important;
}

[data-bs-theme="dark"] {
--bs-info-bg-subtle: #032830;
--bs-info-border-subtle: #055160;
--bs-info-text-emphasis: #6edff6;
--bs-success-bg-subtle: #051b11;
--bs-success-border-subtle: #0a3622;
--bs-success-text-emphasis: #75b798;
--bs-warning-bg-subtle: #332701;
--bs-warning-border-subtle: #664d03;
--bs-warning-text-emphasis: #ffda6a;
--bs-danger-bg-subtle: #2c0b0e;
--bs-danger-border-subtle: #58151c;
--bs-danger-text-emphasis: #ea868f;
--bs-light: var(--bs-tertiary-bg);
--bs-light-rgb: 44, 49, 59;
}
[data-bs-theme="dark"] .alert-info {
background-color: var(--bs-info-bg-subtle, #032830) !important;
border-color: var(--bs-info-border-subtle, #055160) !important;
color: var(--bs-info-text-emphasis, #6edff6) !important;
}
[data-bs-theme="dark"] .alert-success {
background-color: var(--bs-success-bg-subtle, #051b11) !important;
border-color: var(--bs-success-border-subtle, #0a3622) !important;
color: var(--bs-success-text-emphasis, #75b798) !important;
}
[data-bs-theme="dark"] .alert-warning {
background-color: var(--bs-warning-bg-subtle, #332701) !important;
border-color: var(--bs-warning-border-subtle, #664d03) !important;
color: var(--bs-warning-text-emphasis, #ffda6a) !important;
}
[data-bs-theme="dark"] .alert-danger {
background-color: var(--bs-danger-bg-subtle, #2c0b0e) !important;
border-color: var(--bs-danger-border-subtle, #58151c) !important;
color: var(--bs-danger-text-emphasis, #ea868f) !important;
}
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .text-bg-light {
background-color: var(--bs-tertiary-bg, #2c313b) !important;
color: var(--bs-body-color, #d7dae0) !important;
}


[data-bs-theme="dark"] .table-primary,
[data-bs-theme="dark"] .table-primary > th,
[data-bs-theme="dark"] .table-primary > td {
--bs-table-bg: color-mix(in srgb, var(--opc-primary, #1f3c88) 22%, var(--bs-secondary-bg, #23272f)) !important;
--bs-table-color: var(--bs-body-color, #d7dae0) !important;
background-color: var(--bs-table-bg) !important;
color: var(--bs-table-color) !important;
border-color: var(--bs-border-color, #3a4049) !important;
}
[data-bs-theme="dark"] .table-secondary,
[data-bs-theme="dark"] .table-secondary > th,
[data-bs-theme="dark"] .table-secondary > td,
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light > th,
[data-bs-theme="dark"] .table-light > td,
[data-bs-theme="dark"] .table-active,
[data-bs-theme="dark"] .table-active > th,
[data-bs-theme="dark"] .table-active > td {
--bs-table-bg: var(--bs-tertiary-bg, #2c313b) !important;
--bs-table-color: var(--bs-body-color, #d7dae0) !important;
background-color: var(--bs-table-bg) !important;
color: var(--bs-table-color) !important;
border-color: var(--bs-border-color, #3a4049) !important;
}
[data-bs-theme="dark"] .table-success,
[data-bs-theme="dark"] .table-success > th,
[data-bs-theme="dark"] .table-success > td {
--bs-table-bg: var(--bs-success-bg-subtle, #051b11) !important;
--bs-table-color: var(--bs-success-text-emphasis, #75b798) !important;
background-color: var(--bs-table-bg) !important;
color: var(--bs-table-color) !important;
border-color: var(--bs-success-border-subtle, #0a3622) !important;
}
[data-bs-theme="dark"] .table-danger,
[data-bs-theme="dark"] .table-danger > th,
[data-bs-theme="dark"] .table-danger > td {
--bs-table-bg: var(--bs-danger-bg-subtle, #2c0b0e) !important;
--bs-table-color: var(--bs-danger-text-emphasis, #ea868f) !important;
background-color: var(--bs-table-bg) !important;
color: var(--bs-table-color) !important;
border-color: var(--bs-danger-border-subtle, #58151c) !important;
}
[data-bs-theme="dark"] .table-warning,
[data-bs-theme="dark"] .table-warning > th,
[data-bs-theme="dark"] .table-warning > td {
--bs-table-bg: var(--bs-warning-bg-subtle, #332701) !important;
--bs-table-color: var(--bs-warning-text-emphasis, #ffda6a) !important;
background-color: var(--bs-table-bg) !important;
color: var(--bs-table-color) !important;
border-color: var(--bs-warning-border-subtle, #664d03) !important;
}
[data-bs-theme="dark"] .table-info,
[data-bs-theme="dark"] .table-info > th,
[data-bs-theme="dark"] .table-info > td {
--bs-table-bg: var(--bs-info-bg-subtle, #032830) !important;
--bs-table-color: var(--bs-info-text-emphasis, #6edff6) !important;
background-color: var(--bs-table-bg) !important;
color: var(--bs-table-color) !important;
border-color: var(--bs-info-border-subtle, #055160) !important;
}


[data-bs-theme="dark"] .list-group-item-light,
[data-bs-theme="dark"] .list-group-item-secondary {
background-color: var(--bs-tertiary-bg, #2c313b) !important;
color: var(--bs-body-color, #d7dae0) !important;
}
[data-bs-theme="dark"] .list-group-item-success {
background-color: var(--bs-success-bg-subtle, #051b11) !important;
color: var(--bs-success-text-emphasis, #75b798) !important;
}
[data-bs-theme="dark"] .list-group-item-danger {
background-color: var(--bs-danger-bg-subtle, #2c0b0e) !important;
color: var(--bs-danger-text-emphasis, #ea868f) !important;
}
[data-bs-theme="dark"] .list-group-item-warning {
background-color: var(--bs-warning-bg-subtle, #332701) !important;
color: var(--bs-warning-text-emphasis, #ffda6a) !important;
}
[data-bs-theme="dark"] .list-group-item-info {
background-color: var(--bs-info-bg-subtle, #032830) !important;
color: var(--bs-info-text-emphasis, #6edff6) !important;
}



.opc-profile-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 4.5rem;
height: 4.5rem;
border-radius: 50%;
background: var(--opc-primary);
color: var(--opc-primary-contrast);
font-size: 1.875rem;
font-weight: 600;
flex-shrink: 0;
}
.opc-profile-avatar-img {
display: inline-block;
width: 4.5rem;
height: 4.5rem;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}

.opc-profile-avatar,
.opc-profile-avatar-img {
box-sizing: border-box;
border: 4px solid var(--opc-surface);
}

.opc-avatar-sm {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.opc-avatar-sm-initials {
background: var(--opc-primary);
color: var(--opc-primary-contrast);
font-size: 1.1rem;
font-weight: 600;
}


.opc-profile-avatar-wrap {
position: relative;
display: inline-block;
}
.opc-profile-avatar-edit {
position: absolute;
right: -.15rem;
bottom: -.15rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;

border-radius: var(--opc-shape);
background: var(--opc-surface);
color: var(--opc-text);
border: 2px solid var(--opc-surface-sunken);
cursor: pointer;
font-size: .85rem;
transition: transform .15s ease;
}
.opc-profile-avatar-edit:hover,
.opc-profile-avatar-edit:focus-visible {
transform: scale(1.08);
}



.opc-profile-card {
max-width: 900px;

margin-top: .5rem;
overflow: hidden;

padding-bottom: 4rem;
position: relative;

scroll-margin-bottom: calc(var(--opc-mobilebar-height, 0px) + var(--opc-footer-height, 0px));

transition: height .18s ease;
}
@media (prefers-reduced-motion: reduce) {
.opc-profile-card {
transition: none;
}
}

.opc-profile-card.opc-card-measuring {
opacity: 0;
}

.opc-profile-page:not(.is-editing) .opc-profile-card {
display: flex;
flex-direction: column;
position: sticky;
top: .5rem;
z-index: 20;
max-height: calc(100vh - 1rem);
max-height: calc(100dvh - 1rem);

}
@media (max-width: 1199.98px) {
body:has(.opc-mobile-chrome) .opc-profile-page:not(.is-editing) .opc-profile-card {
max-height: calc(100vh - 1rem - 4rem - env(safe-area-inset-bottom));
max-height: calc(100dvh - 1rem - 4rem - env(safe-area-inset-bottom));
}
}

#opc-profile-page .opc-tab-panel[data-opc-tab-panel="pets"] {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
max-height: calc(100vh - 1rem);
max-height: calc(100dvh - 1rem);

}
@media (max-width: 1199.98px) {
body:has(.opc-mobile-chrome) #opc-profile-page .opc-tab-panel[data-opc-tab-panel="pets"] {
max-height: calc(100vh - 1rem - 4rem - env(safe-area-inset-bottom));
max-height: calc(100dvh - 1rem - 4rem - env(safe-area-inset-bottom));
}
}
.opc-profile-banner {
height: 96px;
background:
radial-gradient(circle at 20% -20%, rgba(255, 255, 255, .55), transparent 55%),
var(--opc-gradient-primary);
background-size: 100% 100%, 180% 180%;
animation: opc-banner-sheen 6s ease-in-out infinite alternate;
position: relative;
}
@media (prefers-reduced-motion: reduce) {
.opc-profile-banner {
animation: none;
}
}

@keyframes opc-banner-sheen {
from { background-position: 0 0, 0% 50%; }
to   { background-position: 0 0, 100% 50%; }
}
@media (max-width: 575.98px) {
.opc-profile-banner {
height: 72px;
}
}

@media (max-width: 767.98px) {

.opc-profile-page .opc-page-header-actions .opc-btn-book {
display: none;
}

.opc-profile-page .opc-page-header-actions .opc-btn-rewards {
display: none;
}
}

.opc-profile-banner-btn {
position: absolute;
top: .75rem;
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .4rem .9rem;
border-radius: var(--opc-shape);
background: rgba(255, 255, 255, .18);
border: 1px solid rgba(255, 255, 255, .4);
color: #fff;
font-size: .8rem;
font-weight: 600;
text-decoration: none;
backdrop-filter: blur(4px);
transition: background .15s ease, transform .15s ease;
}

.opc-profile-banner-btn:disabled {
opacity: .5;
cursor: not-allowed;
pointer-events: none;
}
.opc-profile-banner-btn:hover,
.opc-profile-banner-btn:focus-visible {
background: rgba(255, 255, 255, .3);
color: #fff;
transform: translateY(-1px);
}
.opc-profile-edit-btn,
.opc-profile-logout-btn {
padding: .3rem .7rem;
font-size: .72rem;
}

.opc-profile-banner-btn {
width: 9rem;
justify-content: center;
white-space: nowrap;
box-sizing: border-box;
appearance: none;
-webkit-appearance: none;
}
.opc-profile-edit-btn {
right: .75rem;
}
.opc-profile-logout-btn {
left: .75rem;
}

.opc-profile-banner-btn.opc-profile-logout-btn {

font-family: inherit;
cursor: pointer;
}

.opc-profile-card-header {
border-bottom: 1px solid var(--opc-border-light);
padding-top: 0;
margin-top: -2.5rem;
}

.opc-profile-page:not(.is-editing) .opc-profile-card-header {
padding-bottom: .25rem;
}
.opc-profile-username {
display: block;
color: var(--opc-text-soft);
font-size: .875rem;
}
.opc-profile-chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .5rem;
margin-top: .85rem;
}
.opc-profile-chip {
display: inline-flex;
align-items: baseline;
gap: .3rem;
padding: .4rem .85rem;
border-radius: 999px;
background: linear-gradient(135deg, var(--opc-primary-tint), color-mix(in srgb, var(--opc-accent) 16%, var(--opc-surface)));
border: 1px solid var(--opc-primary-ring);
color: var(--opc-text-soft);
font-size: .8rem;
}
.opc-profile-chip-value {
font-weight: 700;
}
.opc-profile-chip-theme {
background: var(--opc-primary-tint);
color: var(--opc-primary);
font-weight: 600;
text-transform: capitalize;
}
.opc-profile-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0 1.5rem;
padding: 1rem 1.25rem 1.25rem;
}
@media (max-width: 575.98px) {
.opc-profile-grid {
grid-template-columns: 1fr;
}
}
.opc-profile-row {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: .1rem;
padding: .5rem .25rem;
}

.opc-profile-cell {
display: flex;
flex-direction: column;
}


.opc-edit-actions-bottom {
display: flex;
gap: .75rem;
justify-content: flex-start;
margin-top: 1.5rem;
padding: 0;
}
.opc-edit-actions-bottom .btn {
min-height: 3rem;
padding-inline: 1.5rem;
font-size: .95rem;
font-weight: 600;
}
@media (max-width: 575.98px) {
.opc-edit-actions-bottom {
flex-direction: column-reverse;
}
.opc-edit-actions-bottom .btn {
width: 100%;
}
}
.opc-edit-section {
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--opc-border-light);
}
.opc-edit-section:last-child {
border-bottom: none;
}
.opc-edit-section-title {
font-size: .8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--opc-text-soft);
margin-bottom: .75rem;
}

.opc-edit-columns {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 1rem;
}
@media (min-width: 480px) {
.opc-edit-columns {
gap: 1.5rem;
}
}
@media (min-width: 768px) {
.opc-edit-columns {
gap: 2rem;
}
}
.opc-edit-col {
display: flex;
flex-direction: column;
flex: 1 1 0;
gap: 0;
min-width: 0;
}

.opc-edit-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0 .5rem;
}
@media (min-width: 480px) {
.opc-edit-grid {
gap: 0 .75rem;
}
}
@media (min-width: 768px) {
.opc-edit-grid {
gap: 0 1.5rem;
}
}

.opc-field-note {
margin: -.65rem 0 .75rem;
font-size: .8125rem;
color: var(--opc-text-faint);
}
.opc-pw-checklist-wrap {
margin: .5rem 0 1rem;
}

.opc-theme-row .opc-collapse-summary {
cursor: default;
}
.cycle-btn {
flex: 0 0 auto;
width: 2.35rem;
height: 2.35rem;
min-width: 2.35rem;
border-radius: var(--opc-shape);
border: 1px solid var(--opc-border);
background: var(--opc-surface-sunken);
color: var(--opc-primary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform .18s ease, border-color .15s ease;
}
.cycle-btn:hover {
border-color: var(--opc-primary);
}
.cycle-btn:active {
transform: scale(.92);
}
.cycle-btn:focus-visible {
outline: 2px solid var(--opc-primary);
outline-offset: 2px;
}
.cycle-btn svg {
width: 1.15rem;
height: 1.15rem;
}

.opc-profile-page .form-text {
color: var(--opc-text-soft) !important;
}

#opc-addr-readout {
display: none;
}
.opc-address-col {
display: flex;
flex-direction: column;
}

.opc-field-panel {
background: var(--opc-surface);

border-radius: .875rem;

padding: .65rem 1.15rem .75rem;
}

.opc-address-contact-panel .opc-edit-field {
min-width: 0;
}
.opc-address-contact-divider {
height: 1px;
background: var(--opc-border);
margin: 1rem 0;
}
.opc-address-contact-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: start;
gap: 0 1.75rem;
}
@media (max-width: 575.98px) {
.opc-address-contact-grid {
grid-template-columns: 1fr;
gap: 1.25rem;
}
}
.opc-contact-col {
display: flex;
flex-direction: column;
justify-content: center;
}

.opc-address-contact-grid .opc-profile-row {
align-items: flex-start;
text-align: left;
}


.opc-emergency-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: start;
gap: .35rem 1.5rem;
}
.opc-emergency-grid .opc-edit-field {
min-width: 0;
}
@media (max-width: 575.98px) {
.opc-emergency-grid {
grid-template-columns: 1fr;
}
}

[data-opc-pw-field] .form-text {
display: none;
}

.opc-pw-chips-heading {
margin: 0 0 .4rem;
font-size: .8rem;
font-weight: 600;
color: var(--opc-text-faint);
transition: opacity .3s ease, max-height .3s ease, margin .3s ease;
overflow: hidden;
max-height: 1.4rem;
}
.opc-pw-chips {
display: flex;
flex-direction: column;
}
.opc-pw-chip {
display: flex;
align-items: center;
gap: .55rem;
font-size: .85rem;
line-height: 1.3;
color: var(--opc-text-faint);
max-height: 1.6rem;
margin-bottom: .4rem;
opacity: 1;
overflow: hidden;
transition: color .15s ease, opacity .3s ease, max-height .3s ease, margin .3s ease;
}
.opc-pw-chip.is-met {
color: var(--opc-text);
opacity: 0;
max-height: 0;
margin-bottom: 0;
}

.opc-pw-chips-heading:has(~ .opc-pw-chips:not(:has(.opc-pw-chip:not(.is-met)))) {
opacity: 0;
max-height: 0;
margin: 0;
}
.opc-pw-tick {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.05rem;
height: 1.05rem;
flex: 0 0 auto;
border-radius: 50%;
border: 1.5px solid var(--opc-border);
line-height: 1;
transition: background-color .15s ease, border-color .15s ease;
}
.opc-pw-chip.is-met .opc-pw-tick {
background: var(--opc-success, #2e9e57);
border-color: var(--opc-success, #2e9e57);
}
.opc-pw-tick::before {
content: '';
}
.opc-pw-chip.is-met .opc-pw-tick::before {
content: '\2713';
display: block;
font-size: .55rem;
color: var(--opc-surface, #fff);
}
@media (prefers-reduced-motion: reduce) {
.opc-pw-chip,
.opc-pw-chips-heading {
transition: none;
}
}

.opc-password-section .opc-pw-chips {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 1.1rem;
row-gap: .4rem;
}
@media (min-width: 480px) {
.opc-password-section .opc-pw-chips {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 700px) {
.opc-password-section .opc-pw-chips {
grid-template-columns: repeat(5, 1fr);
}
}
.opc-password-section .opc-pw-chip {
max-height: none;
margin: 0;
transition: color .15s ease, opacity .15s ease;
}
.opc-password-section .opc-pw-chip.is-met {
display: none;
}




.opc-card-interactive {
position: relative;
background: var(--opc-surface);
border-color: var(--opc-border);
box-shadow: var(--opc-shadow-resting);
transition: transform .15s ease, box-shadow .15s ease;
}
.opc-card-interactive:hover,
.opc-card-interactive:focus-visible {
transform: translateY(-3px);
box-shadow: var(--opc-shadow-lifted);
}


.opc-card-interactive[role="button"] {
cursor: pointer;
}
.opc-card-interactive[role="button"]:focus-visible {
outline: 2px solid var(--opc-primary);
outline-offset: 2px;
}

.opc-card-stretched-link::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
}

.opc-card-interactive .card-footer,
.opc-card-interactive a.hcc-card-thumb {
position: relative;
z-index: 2;
}

.opc-pet-readonly {
opacity: .78;
filter: saturate(.7);
}


.opc-product-unpublished {
opacity: .78;
filter: saturate(.7);
}
.opc-product-unpublished .badge {
opacity: 1;
}


.hcc-card-thumb {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 11rem;
overflow: hidden;
background: var(--opc-surface-sunken);

border-top-left-radius: var(--opc-radius-lg);
border-top-right-radius: var(--opc-radius-lg);
}
.hcc-card-thumb-badge {
position: absolute;
top: .5rem;
right: .5rem;
z-index: 1;
}
.opc-card-out-of-stock .hcc-card-thumb img {
opacity: .5;
}
.opc-card-out-of-stock .fw-bold.fs-5 {
color: var(--opc-text-muted);
}
.hcc-card-thumb img {
display: block;
width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform .25s ease;
}
.opc-card-interactive:hover .hcc-card-thumb img {
transform: scale(1.045);
}
.hcc-card-thumb-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 2.25rem;
color: var(--opc-text-faint);
}


.opc-pets-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
.opc-pets-grid-item {
flex: 0 1 calc(50% - .5rem);
max-width: calc(50% - .5rem);
}
@media (min-width: 768px) {
.opc-pets-grid-item {
flex-basis: calc(33.333% - .667rem);
max-width: calc(33.333% - .667rem);
}
}

.opc-pets-grid-item .card-body,
.opc-dash-pet-card .card-body {
padding: .85rem 1rem;
}
.opc-pets-grid-item .card-title {
margin-bottom: .3rem;
}
.opc-pets-grid-item ul.list-unstyled li {
line-height: 1.3;
}

.opc-pets-grid-item .card-body > ul.list-unstyled,
.opc-dash-pet-card .card-body > .opc-points-widget {
margin-top: 0;
}


.opc-pets-section-divider {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
width: 100%;
margin-top: 1.5rem;
padding: .6rem 1rem;
background: var(--opc-surface-sunken);
border: 1px dashed var(--opc-border);
border-radius: var(--opc-radius);
color: var(--opc-text-soft);
font-size: .9rem;
font-weight: 600;
cursor: pointer;
transition: background-color .15s ease, color .15s ease;
}
.opc-pets-section-divider:hover,
.opc-pets-section-divider:focus-visible {
background: var(--opc-surface);
color: var(--opc-text);
}
.opc-pets-section-divider:focus-visible {
outline: 2px solid var(--opc-primary);
outline-offset: 2px;
}



.opc-star-glow.opc-card-interactive {
--opc-glow-color: var(--opc-star-bronze);
box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--opc-glow-color) 55%, transparent),
0 0 28px 4px color-mix(in srgb, var(--opc-glow-color) 35%, transparent),
var(--opc-card-shadow);
}
.opc-star-glow[data-opc-tier="silver"] { --opc-glow-color: var(--opc-star-silver); }
.opc-star-glow[data-opc-tier="gold"]   { --opc-glow-color: var(--opc-star-gold); }
.opc-star-glow.opc-card-interactive:hover,
.opc-star-glow.opc-card-interactive:focus-within {
box-shadow: 0 10px 22px -4px color-mix(in srgb, var(--opc-glow-color) 70%, transparent),
0 0 40px 8px color-mix(in srgb, var(--opc-glow-color) 50%, transparent),
var(--opc-shadow-lifted);
}
.opc-star-glow.opc-pulse {
animation: opc-star-pulse 2.2s ease-in-out infinite;
}
@keyframes opc-star-pulse {
0%, 100% {
box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--opc-glow-color) 55%, transparent),
0 0 28px 4px color-mix(in srgb, var(--opc-glow-color) 35%, transparent),
var(--opc-card-shadow);
}
50% {
box-shadow: 0 10px 26px -4px color-mix(in srgb, var(--opc-glow-color) 80%, transparent),
0 0 48px 10px color-mix(in srgb, var(--opc-glow-color) 60%, transparent),
var(--opc-shadow-lifted);
}
}
@media (prefers-reduced-motion: reduce) {
.opc-star-glow.opc-pulse {
animation: none;
}
}


.opc-confetti-layer {
position: fixed;
inset: 0;
z-index: 1090;
pointer-events: none;
overflow: hidden;
}
.opc-confetti-star {
position: absolute;
top: -2rem;
animation-name: opc-confetti-fall;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}
@keyframes opc-confetti-fall {
0% {
transform: translateY(0) translateX(0) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(105vh) translateX(var(--opc-confetti-drift, 40px)) rotate(360deg);
opacity: .15;
}
}
@media (prefers-reduced-motion: reduce) {
.opc-confetti-layer {
display: none;
}
}


.opc-dash-pet-thumb {
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
overflow: hidden;
background: var(--opc-surface-sunken);
border: 1px solid var(--opc-border);
display: flex;
align-items: center;
justify-content: center;
}
.opc-dash-pet-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.opc-dash-pet-thumb-placeholder {
font-size: 1.4rem;
color: var(--opc-text-faint);
}


.opc-stat-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.25rem;
background: var(--opc-primary);
color: var(--opc-primary-contrast);
border-radius: var(--opc-radius);
padding: 1.35rem 1.5rem;
box-shadow: var(--opc-shadow-lifted);
}

[data-bs-theme="dark"] .opc-stat-strip {
background: var(--opc-gradient-primary);
box-shadow: var(--opc-shadow-lifted), var(--opc-glow-shadow);
}

.opc-stat-strip-btn {
cursor: pointer;
font: inherit;
transition: transform .15s ease, box-shadow .15s ease;
}
.opc-stat-strip-btn:hover,
.opc-stat-strip-btn:focus-visible {
transform: translateY(-2px);
box-shadow: var(--opc-shadow-resting), 0 0 0 3px rgba(255, 255, 255, .25);
}
.opc-rewards-modal-body .opc-stat-rules {
color: var(--opc-text-soft);
}
.opc-rewards-ledger {
max-height: 50vh;
overflow-y: auto;
}

.opc-rewards-ledger li[hidden] {
display: none !important;
}
.opc-stat-total {
flex-shrink: 0;
text-align: center;
padding-right: 1.25rem;
border-right: 1px solid rgba(255, 255, 255, .25);
}
.opc-stat-total-value {
display: block;
font-size: 2.35rem;
font-weight: 800;
line-height: 1;
}
.opc-stat-total-label {
display: block;
margin-top: .2rem;
font-size: .68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
opacity: .85;
}
.opc-stat-mid {
flex: 1 1 240px;
min-width: 0;
}
.opc-stat-mid p {
margin-bottom: .4rem;
}
.opc-stat-rules {
font-size: .85rem;
opacity: .92;
}
.opc-stat-history-btn {
border-color: rgba(255, 255, 255, .55);
color: #fff;
}
.opc-stat-history-btn:hover,
.opc-stat-history-btn:focus-visible {
background: #fff;
border-color: #fff;
color: var(--opc-primary);
}
@media (max-width: 575.98px) {
.opc-stat-strip {
padding: 1.1rem;
gap: .85rem;
}
.opc-stat-total {
border-right: none;
padding-right: 0;
}
}


.opc-points-widget {
padding-top: .75rem;
border-top: 1px solid var(--opc-border-light);
}
.opc-points-widget-top {
display: flex;
align-items: center;
gap: .75rem;
}
.opc-points-ring {
--opc-ring-pct: 0;
--opc-ring-color: var(--opc-primary);
position: relative;
flex-shrink: 0;
width: 3.1rem;
height: 3.1rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: conic-gradient(var(--opc-ring-color) calc(var(--opc-ring-pct) * 1%), var(--opc-border) 0);
transition: background .3s ease;
}
.opc-points-ring::before {
content: '';
position: absolute;
inset: 4px;
border-radius: 50%;
background: var(--opc-surface);
}
.opc-points-ring-mark {
position: relative;
z-index: 1;
font-size: .72rem;
font-weight: 700;
color: var(--opc-text-soft);
}
.opc-points-ring-mark.opc-star {
font-size: 1.15rem;
color: var(--opc-ring-color);
}
.opc-points-ring-mark sup {
font-size: .55em;
}
.opc-points-summary {
display: flex;
flex-direction: column;
min-width: 0;
}
.opc-points-value {
font-weight: 700;
font-size: .95rem;
}
.opc-points-caption {
font-size: .78rem;
}
.opc-hairline {
display: flex;
gap: 3px;
margin: .5rem 0 0;
cursor: help;
}
.opc-hairline-seg {
position: relative;
flex: 1 1 0;
height: 4px;
border-radius: 2px;
background: var(--opc-border);
overflow: hidden;
}
.opc-hairline-bronze { --opc-seg-color: var(--opc-star-bronze); }
.opc-hairline-silver { --opc-seg-color: var(--opc-star-silver); }
.opc-hairline-gold { --opc-seg-color: var(--opc-star-gold); }
.opc-hairline-seg.is-earned {
background: var(--opc-seg-color);
}
.opc-hairline-seg.is-current::after {
content: '';
position: absolute;
inset: 0;
width: var(--opc-seg-fill, 0%);
background: var(--opc-seg-color);
border-radius: inherit;
transition: width .3s ease;
}
.opc-points-widget-footer {
font-size: .78rem;
}

.opc-tier-badges {
display: flex;
width: 100%;
gap: 3px; 
margin-top: .6rem;
}
.opc-tier-badge {
display: inline-flex;
flex: 1;
min-width: 0;
align-items: center;
justify-content: center;
padding: .15rem .35rem;
border-radius: 1rem;
font-size: .68rem;
font-weight: 600;
line-height: 1.4;
background: var(--opc-surface-sunken);
color: var(--opc-text-soft);
border: 1px solid var(--opc-border);
}
.opc-tier-badge-star {
font-size: .8em;
}
.opc-tier-badge-bronze .opc-tier-badge-star { color: var(--opc-star-bronze); }
.opc-tier-badge-silver .opc-tier-badge-star { color: var(--opc-star-silver); }
.opc-tier-badge-gold   .opc-tier-badge-star { color: var(--opc-star-gold); }
.opc-tier-badge.is-current {
border-color: var(--opc-tier-badge-color, var(--opc-primary));
color: var(--opc-text);
}
.opc-tier-badge-bronze.is-current { --opc-tier-badge-color: var(--opc-star-bronze); }
.opc-tier-badge-silver.is-current { --opc-tier-badge-color: var(--opc-star-silver); }
.opc-tier-badge-gold.is-current   { --opc-tier-badge-color: var(--opc-star-gold); }
.opc-tier-badge.is-earned {
background: var(--opc-tier-badge-color, var(--opc-primary));
border-color: var(--opc-tier-badge-color, var(--opc-primary));
color: #fff;
}
.opc-tier-badge-bronze.is-earned { --opc-tier-badge-color: var(--opc-star-bronze); }
.opc-tier-badge-silver.is-earned { --opc-tier-badge-color: var(--opc-star-silver); }
.opc-tier-badge-gold.is-earned   { --opc-tier-badge-color: var(--opc-star-gold); }
.opc-tier-badge.is-earned .opc-tier-badge-star { color: #fff; }


.hcc-media-card {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.hcc-media-hero {
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--opc-radius);
background: var(--opc-surface-sunken);
}
.hcc-media-hero img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
cursor: zoom-in;
}
.hcc-media-hero-empty {
aspect-ratio: 4 / 3;
background: var(--opc-surface-sunken);
color: var(--opc-text-faint);
font-size: 2.5rem;
}
.hcc-media-tile {
width: 4.5rem;
height: 4.5rem;
object-fit: cover;
cursor: pointer;
opacity: .82;
border-radius: var(--opc-radius-sm);
box-shadow: var(--opc-shadow-resting);
transition: opacity .15s ease, transform .15s ease;
}
.hcc-media-tile:hover,
.hcc-media-tile:focus-visible {
opacity: 1;
transform: translateY(-2px);
}
.hcc-thumbs {
display: flex;
gap: .5rem;
flex-wrap: wrap;
margin-top: .65rem;
}


.hcc-product-card {
background: var(--opc-surface);
border: 1px solid var(--opc-border);
border-radius: var(--opc-radius-lg);
box-shadow: var(--opc-card-shadow);
overflow: hidden;
}
.hcc-product-gallery {
padding: 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.hcc-product-gallery .hcc-media-hero,
.hcc-product-gallery .hcc-media-hero-empty {
width: 100%;
}
@media (min-width: 768px) {
.hcc-product-gallery {
border-right: 1px solid var(--opc-border-light);
}
}
.hcc-product-details {
padding: 1.5rem;
display: flex;
}
.hcc-product-details-inner {
display: flex;
flex-direction: column;
gap: .85rem;
width: 100%;
}
.hcc-product-title {
font-size: 1.5rem;
font-weight: 800;
margin: 0;
}
.hcc-product-meta {
display: flex;
align-items: center;
gap: .7rem;
flex-wrap: wrap;
}
.hcc-sku {
font-family: ui-monospace, SFMono-Regular, monospace;
font-size: .74rem;
color: var(--opc-text-faint);
}
.hcc-stock-pill {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .28rem .65rem;
border-radius: 999px;
font-size: .74rem;
font-weight: 700;
}

.hcc-stock-pill--in {
background: color-mix(in srgb, var(--opc-success) 16%, var(--opc-surface));
color: color-mix(in srgb, var(--opc-success) 65%, var(--opc-text));
}
.hcc-stock-pill--out {
background: color-mix(in srgb, var(--opc-danger) 14%, var(--opc-surface));
color: var(--opc-danger);
}
.hcc-product-price {
font-size: 2rem;
font-weight: 800;
background: var(--opc-gradient-primary);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hcc-product-desc {
color: var(--opc-text-soft);
line-height: 1.65;
padding-top: .6rem;
border-top: 1px solid var(--opc-border-light);
font-size: .92rem;
}
.hcc-buy-box-wrap {
margin-top: auto;
background: var(--opc-surface-sunken);
border-radius: var(--opc-radius);
padding: 1rem;
}
.hcc-buy-row {
display: flex;
gap: .6rem;
align-items: flex-end;
flex-wrap: wrap;
}
.hcc-buy-row .field.grow {
flex: 1;
}
.hcc-buy-row .form-control {
text-align: center;
}
.hcc-buy-row button[type="submit"] {
min-height: 2.75rem;
flex: 1 1 100%;
}



.opc-lightbox-backdrop {
position: fixed;
inset: 0;
z-index: 1080;
background: rgba(10, 12, 16, .92);
display: flex;
align-items: center;
justify-content: center;
}
.opc-lightbox-img-el {
max-width: min(92vw, 1100px);
max-height: 88vh;
object-fit: contain;
border-radius: var(--opc-radius);
}

@media (min-width: 768px) {
.opc-lightbox-img-el {
max-width: 75vw;
max-height: 75vh;
box-shadow: 0 20px 60px color-mix(in srgb, var(--opc-shadow-color) 50%, transparent);
}
}
.opc-lightbox-btn {
position: absolute;
background: rgba(255, 255, 255, .12);
color: #fff;
border: 1px solid rgba(255, 255, 255, .3);

border-radius: var(--opc-shape);
width: 2.75rem;
height: 2.75rem;
font-size: 1.6rem;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .15s ease;
}
.opc-lightbox-btn:hover,
.opc-lightbox-btn:focus-visible {
background: rgba(255, 255, 255, .25);
}

.opc-lightbox-btn[hidden] {
display: none !important;
}
.opc-lightbox-close {
top: 1rem;
right: 1rem;
}
.opc-lightbox-prev {
left: 1rem;
top: 50%;
transform: translateY(-50%);
}
.opc-lightbox-next {
right: 1rem;
top: 50%;
transform: translateY(-50%);
}
.opc-lightbox-hint {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
opacity: 0;
}
.opc-lightbox-hint.is-visible {
opacity: 1;
transition: opacity .25s ease;
}
.opc-lightbox-hint-icon {
font-size: 2.75rem;
animation: opc-lightbox-swipe 1s ease-in-out;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
}
@keyframes opc-lightbox-swipe {
0%   { transform: translateX(30px); opacity: 0; }
30%  { opacity: 1; }
70%  { opacity: 1; }
100% { transform: translateX(-30px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.opc-lightbox-hint-icon {
animation: none;
}
}


.opc-surface-raised {
background-color: var(--opc-surface);
border-radius: var(--opc-radius-lg);
box-shadow: var(--opc-neo-shadow-out);
}
[data-bs-theme="dark"] .opc-surface-raised {
box-shadow: var(--opc-shadow-lifted);
border: 1px solid var(--opc-border);
}
.opc-surface-inset {
background-color: var(--opc-surface);
border-radius: var(--opc-radius);
box-shadow: var(--opc-neo-shadow-in);
border: none;
}
[data-bs-theme="dark"] .opc-surface-inset {
box-shadow: none;
border: 1px solid var(--opc-border);
}
.opc-gradient-text {
display: inline-block;
}
[data-bs-theme="dark"] .opc-gradient-text {
background: var(--opc-gradient-primary);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
[data-bs-theme="dark"] .opc-glow {
box-shadow: var(--opc-glow-shadow);
}


:root {
--opc-btn-height: 36px;
--opc-btn-padding-x: .875rem;
--opc-btn-font-size: .85rem;
}
[class^="com-onepetconnect-"] .btn,
.opc-profile-wrap .btn,
.opc-profile-page .btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--opc-btn-height);
padding: 0 var(--opc-btn-padding-x);
font-size: var(--opc-btn-font-size);
line-height: 1.2;
}


.opc-page-header {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: .75rem;
}

.opc-page-subheading {
margin-top: .2rem;
font-size: .9rem;
color: var(--opc-text-faint);
}
.opc-page-header-actions {
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
@media (max-width: 767.98px) {
.opc-page-header {
flex-direction: column;
align-items: flex-start;
}
.opc-page-header-actions {
width: 100%;
}
.opc-page-header-actions .btn {
flex: 1 1 auto;
}

.com-onepetconnect-pet-profile .opc-page-header-actions .opc-btn-back-to-pets {
display: none;
}
}



.opc-tab-switch-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
margin-bottom: 1rem;
}
.opc-tab-switch-row .opc-tab-switch {
margin-bottom: 0;
min-width: 0;
}
.opc-tab-switch-row .opc-filter-toggle {
flex-shrink: 0;
}
.opc-tab-switch {
position: relative;
display: inline-flex;
max-width: 100%;
gap: .25rem;
padding: .25rem;
margin-bottom: 1rem;
border-radius: var(--opc-shape);
background: var(--opc-surface-sunken);

overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;

box-shadow: inset 0 2px 4px rgba(15, 23, 42, .3),
inset 0 -1px 0 rgba(255, 255, 255, .8);
}
[data-bs-theme="dark"] .opc-tab-switch {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, .65),
inset 0 1px 0 color-mix(in srgb, white 14%, transparent);
}
.opc-tab-switch::-webkit-scrollbar {
display: none;
}

.opc-tab-switch-thumb {
position: absolute;
top: .25rem;
bottom: .25rem;
left: 0;
width: 0;
border-radius: var(--opc-shape);
background: var(--opc-primary);
opacity: 0;
transition: transform .32s cubic-bezier(.65, 0, .35, 1),
width .32s cubic-bezier(.65, 0, .35, 1),
background-color .45s ease;
pointer-events: none;
}
.opc-tab-switch.has-thumb .opc-tab-switch-thumb {
opacity: 1;
}
.opc-tab-switch-thumb.is-flash {
background: var(--opc-accent);
transition: transform .32s cubic-bezier(.65, 0, .35, 1),
width .32s cubic-bezier(.65, 0, .35, 1);
}
.opc-tab-label {
position: relative;
z-index: 1;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
min-height: 2.75rem;
padding: .4rem 1.1rem;
border: none;
border-radius: var(--opc-shape);
background: none;
color: var(--opc-text-soft);
font: inherit;
font-size: .85rem;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
user-select: none;
transition: color .18s ease;
}
.opc-tab-label:hover {
color: var(--opc-text);
}
.opc-tab-label:focus-visible {
outline: 2px solid var(--opc-primary);
outline-offset: 2px;
}

.opc-tab-label.is-active {
background: var(--opc-primary);
color: var(--opc-primary-contrast);
}
.opc-tab-switch.has-thumb .opc-tab-label.is-active {
background: none;
}
.opc-tab-label:disabled {
color: var(--opc-text-faint);
cursor: not-allowed;
}
.opc-tab-panel[hidden] {
display: none;
}


.opc-home-article-full {
background: var(--opc-surface);
border: 1px solid var(--opc-border);
border-radius: var(--opc-radius-lg);
box-shadow: var(--opc-shadow-resting);
padding: 1.75rem 2rem;
color: var(--opc-text-soft);
line-height: 1.65;
}

.opc-home-article-full > :has(> img) {
float: none !important;
width: auto !important;
max-width: none !important;
margin: 0 0 1.5rem !important;
text-align: center;
}
.opc-home-article-full > * {
clear: both;
}
.opc-home-article-full img {
display: block !important;
float: none !important;
width: auto !important;
height: 375px !important; 
max-width: 100%;
object-fit: contain;
border-radius: var(--opc-radius);
box-shadow: var(--opc-shadow-lifted);
margin: 0 auto 1.5rem !important;
}


.opc-home-article-full > h1 {
font-size: clamp(1.75rem, 1.35rem + 2vw, 2.25rem);
font-weight: 700;
color: var(--opc-text);
margin-bottom: 1rem;
}
.opc-home-article-full :is(h2, h3) {
margin-top: 1.75rem;
margin-bottom: .5rem;
}
.opc-home-article-full > :is(h2, h3, p):first-child {
margin-top: 0;
}
.opc-home-article-full p {
max-width: 68ch;
line-height: 1.65;
}
.opc-home-article-full :is(ul, ol) {
margin-top: .5rem;
margin-bottom: 1.25rem;
}
.opc-home-article-full li {
margin-bottom: .5rem;
}
.opc-home-article-full p:has(> strong:first-child) {
max-width: none;
background: var(--opc-surface-sunken);
border-left: 3px solid var(--opc-primary);
border-radius: 0 8px 8px 0;
padding: .65rem .9rem;
margin: .6rem 0;
}
.opc-home-article-full p:has(> strong:first-child) > strong {
display: block;
margin-bottom: .15rem;
color: var(--opc-primary);
}

.opc-home-hero {
position: relative;
overflow: hidden;
background: var(--opc-surface);
border: 1px solid var(--opc-border);
border-radius: var(--opc-radius-lg);
box-shadow: var(--opc-shadow-resting);
padding: 1.5rem 1.75rem;
margin-bottom: 2rem;
}
.opc-home-hero-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
transition: opacity .35s ease;

border-radius: inherit;
}

@media (min-width: 1200px) {
.opc-home-hero-bg {
opacity: 0;
}
.opc-home-hero-expanded .opc-home-hero-bg {
opacity: 1;
}
}


.opc-home-hero-has-image {
border-color: transparent;

box-shadow: none;
}
.opc-home-hero-has-image::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;

box-shadow: inset 0 0 0 1px var(--opc-border), var(--opc-shadow-resting);
pointer-events: none;
transition: box-shadow .35s ease;
}

.opc-home-hero-image-only {
padding: 0;
width: 75%;
margin-left: auto;
margin-right: auto;

box-shadow: var(--opc-shadow-lifted);
}
.opc-home-hero-banner-img {
display: block;
width: 100%;
height: auto;
}
.opc-home-hero-overlay {
position: absolute;
inset: 0;

border-radius: inherit;

background: rgba(0, 0, 0, .6);
box-shadow: inset 0 0 3rem rgba(0, 0, 0, .5);
pointer-events: none;
transition: opacity .35s ease;
}

@media (min-width: 1200px) {
.opc-home-hero-overlay {
opacity: 0;
}
.opc-home-hero-expanded .opc-home-hero-overlay {
opacity: 1;
}
}
.opc-home-hero-content {
position: relative;
}

.opc-home-hero-content h1,
.opc-home-hero-text,
.opc-home-hero-content .text-muted {
transition: color .35s ease;
}

@media (min-width: 1200px) {
.opc-home-hero-has-image.opc-home-hero-expanded .opc-home-hero-content h1,
.opc-home-hero-has-image.opc-home-hero-expanded .opc-home-hero-text,
.opc-home-hero-has-image.opc-home-hero-expanded .text-muted {
color: #fff;
}
}
.opc-home-hero-text {
max-height: 6.5rem;
overflow-y: auto;
overscroll-behavior: contain;
position: relative;
color: var(--opc-text-soft);
line-height: 1.6;
}
.opc-home-hero-text:not(.is-expanded)::after {
content: "";
display: block;
position: sticky;
left: 0;
right: 0;
bottom: 0;
height: 2.5rem;
margin-top: -2.5rem;
background: linear-gradient(to bottom, transparent, var(--opc-surface));
pointer-events: none;
}
.opc-home-hero-text.is-expanded {

max-height: none;
overflow: visible;
overscroll-behavior: auto;
}
.opc-home-hero-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.opc-home-hero-head h1 {
min-width: 0;
}

.opc-home-hero-toggle {

flex-shrink: 0;
appearance: none;
border: none !important;
border-radius: var(--opc-shape);
background: var(--opc-primary) !important;
color: var(--opc-primary-contrast);
font-size: .85rem;
font-weight: 600;

min-height: 2.25rem;
padding: 0 1.1rem;
cursor: pointer;
box-shadow: none;
transition: transform .12s ease, background .15s ease, color .15s ease;

visibility: hidden;
}

.opc-home-hero-toggle:hover {
background: color-mix(in srgb, var(--opc-primary) 85%, black) !important;
color: var(--opc-primary-contrast);
transform: translateY(-1px);
}
.opc-home-hero-toggle:active {
transform: translateY(0);
}

.opc-home-hero-toggle.is-pressed {
background: var(--opc-accent) !important;
color: #fff !important;
transition: none;
}

.opc-home-hero-has-image.opc-home-hero-expanded .opc-home-hero-text:not(.is-expanded)::after {
background: transparent;
}


@media (max-width: 1199.98px) {
.opc-home-hero-bg,
.opc-home-hero-overlay {
opacity: 1;
}
.opc-home-hero-expanded .opc-home-hero-bg,
.opc-home-hero-expanded .opc-home-hero-overlay {
opacity: 0;
}
.opc-home-hero-has-image:not(.opc-home-hero-expanded) .opc-home-hero-content h1,
.opc-home-hero-has-image:not(.opc-home-hero-expanded) .opc-home-hero-text,
.opc-home-hero-has-image:not(.opc-home-hero-expanded) .text-muted {
color: #fff;
}

.opc-home-hero-has-image:not(.opc-home-hero-expanded) .opc-home-hero-text:not(.is-expanded)::after {
background: transparent;
}
}

.opc-home-section {
margin-bottom: 2.25rem;
}
.opc-home-section-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
margin-bottom: 1rem;
}
.opc-home-section-head a,
.opc-home-section-head button {
font: inherit;
font-size: .82rem;
font-weight: 600;
color: var(--opc-primary);
text-decoration: none;
background: none;
border: none;
padding: 0;
cursor: pointer;
}

.btn.opc-home-cta {

display: inline-flex;
align-items: center;
padding: .35rem 1rem;
border-radius: 999px;
background-color: var(--opc-primary) !important;
border: none !important;
color: var(--opc-primary-contrast) !important;
font-size: .82rem;
font-weight: 600;
text-decoration: none;
transition: background-color .45s ease;
}
.btn.opc-home-cta:hover,
.btn.opc-home-cta:focus-visible {
background-color: color-mix(in srgb, var(--opc-primary) 85%, black) !important;
color: var(--opc-primary-contrast) !important;
}

.btn.opc-home-cta.is-pressed {
background-color: var(--opc-accent) !important;
color: var(--opc-primary-contrast) !important;
transition: none;
}

.opc-home-section-head .btn.opc-home-cta {
margin-right: 5px;
}

.opc-home-articles-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 1.1rem;
padding-top: 5px;
}

.opc-home-articles-grid--fixed5 {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.opc-home-articles-grid--fixed5.opc-home-articles-grid--max3 {
grid-template-columns: repeat(auto-fit, minmax(max(200px, calc((100% - 2 * 1.1rem) / 3)), 1fr));
}

.opc-home-article-card.opc-home-see-more-card,
.opc-home-product-card.opc-home-see-more-card {
display: none;
}

.opc-home-scroll-arrow {
display: none;
}

@media (max-width: 1199.98px) {
.opc-home-articles-grid--fixed5 {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;

gap: 1rem;

padding: 8px !important;
}
.opc-home-articles-grid--fixed5::-webkit-scrollbar {
display: none;
}
.opc-home-articles-grid--fixed5 .opc-home-article-card {

flex: 0 0 calc(50% - .5rem);
scroll-snap-align: start;
}

.opc-home-carousel-wrap[data-opc-hint-style="peek"] .opc-home-article-card {
flex: 0 0 calc(46% - .4rem);
}

.opc-home-articles-grid--fixed5 .opc-home-article-card:only-child {
flex: 1 1 100%;
}
.opc-home-articles-grid--fixed5 .opc-home-see-more-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: .4rem;
color: var(--opc-primary);
border-style: dashed;
}
.opc-home-see-more-icon {
font-size: 1.4rem;
line-height: 1;
}
.opc-home-see-more-label {
font-size: .85rem;
font-weight: 600;
}


.opc-home-products-grid {
display: flex !important;
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;

padding: 8px !important;
}
.opc-home-products-grid::-webkit-scrollbar {
display: none;
}
.opc-home-products-grid .opc-home-product-card {
flex: 0 0 calc(50% - .5rem);
scroll-snap-align: start;
}

.opc-home-carousel-wrap[data-opc-hint-style="peek"] .opc-home-product-card {
flex: 0 0 calc(46% - .4rem);
}
.opc-home-products-grid .opc-home-product-card:nth-of-type(n+6) {
display: none;
}

.opc-home-products-grid .opc-home-see-more-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: .4rem;

padding: 1.1rem 1.2rem;
color: var(--opc-primary);
border-style: dashed;
}

.opc-home-carousel-wrap {
position: relative;
}

.opc-home-scroll-arrow {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: .5rem;
right: .5rem;
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
background: var(--opc-accent);
color: var(--opc-primary-contrast);
font-size: 1.3rem;
font-weight: 700;
line-height: 1;
pointer-events: none;
opacity: 0;
transition: opacity .2s ease;
}
.opc-home-scroll-arrow.is-visible {
opacity: 1;
animation: opc-see-more-pulse 1.6s ease-in-out infinite;
}
}

@keyframes opc-see-more-pulse {
0%, 100% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(8px);
opacity: .4;
}
}
@media (prefers-reduced-motion: reduce) {

.opc-home-scroll-arrow.is-visible {
animation: none;
}
}
.opc-home-article-card {
display: block;
background: var(--opc-surface);
border: 1px solid var(--opc-border);
border-radius: var(--opc-radius);
box-shadow: var(--opc-shadow-resting);
padding: 1.1rem 1.2rem;
text-decoration: none;
color: inherit;
transition: transform .16s ease, box-shadow .16s ease;
}
.opc-home-article-card:hover,
.opc-home-article-card:focus-visible {
transform: translateY(-3px);
box-shadow: var(--opc-shadow-lifted, var(--opc-shadow-resting));
color: inherit;
text-decoration: none;
}

.opc-home-article-card .opc-pet-notice-badge {
margin-bottom: .5rem;
}

.opc-home-article-top {
display: flex;
align-items: center;
gap: .6rem;
margin-bottom: .6rem;
}
.opc-home-article-top .opc-pet-notice-badge {
margin-bottom: 0;
}
.opc-home-article-avatar {
display: inline-flex;
flex-shrink: 0;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
padding: .15rem;
}
.opc-home-article-avatar img {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--opc-surface);
}

.opc-home-article-avatar--danger {
background: var(--bs-danger, #dc3545);
}
.opc-home-article-avatar--warning {
background: var(--bs-warning, #ffc107);
}
.opc-home-article-avatar--success {
background: var(--bs-success, #198754);
}
.opc-home-article-date {
display: block;
font-size: .68rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--opc-muted);
margin-bottom: .35rem;
}
.opc-home-article-title {
margin: 0 0 .35rem;
font-size: .98rem;
font-weight: 700;
color: var(--opc-text);
}
.opc-home-article-excerpt {
margin: 0;
font-size: .84rem;
line-height: 1.5;
color: var(--opc-text-soft);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

.opc-home-article-details {
margin: 0;
padding: 0;
list-style: none;
font-size: .84rem;
line-height: 1.5;
color: var(--opc-text-soft);
}

.opc-home-products-grid {
display: grid;

grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
padding-top: 5px;
}
.opc-home-product-card {
display: block;
width: 100%;
background: var(--opc-surface);
border: 1px solid var(--opc-border);
border-radius: var(--opc-radius);
box-shadow: var(--opc-shadow-resting);
overflow: hidden;
text-decoration: none;
color: inherit;

font: inherit;
text-align: left;
padding: 0;
cursor: pointer;
transition: transform .16s ease, box-shadow .16s ease;
}
.opc-home-product-card:hover,
.opc-home-product-card:focus-visible {
transform: translateY(-3px);
box-shadow: var(--opc-shadow-lifted, var(--opc-shadow-resting));
}
.opc-home-product-media {

display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
background: var(--opc-surface-sunken);
color: var(--opc-muted);
font-size: 1.5rem;
}
.opc-home-product-media img {
width: 100%;
height: 100%;
object-fit: cover;

filter: saturate(.92) brightness(1.02);
}
.opc-home-product-name {
display: block;
padding: .65rem .8rem .8rem;
font-size: .84rem;
font-weight: 600;
color: var(--opc-text);
}

.opc-home-services-grid {
display: grid;

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.1rem;
padding-top: 5px;
}
.opc-home-service-card {
display: block;
background: var(--opc-surface);
border: 1px solid var(--opc-border);
border-radius: var(--opc-radius);
box-shadow: var(--opc-shadow-resting);
overflow: hidden;
text-align: center;
cursor: pointer;
text-decoration: none;
color: inherit;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.opc-home-service-card:hover,
.opc-home-service-card:focus-visible {
border-color: var(--opc-primary);
color: inherit;
text-decoration: none;
transform: translateY(-3px);
}
.opc-home-service-tap {
display: inline-block;
font-size: .78rem;
font-weight: 600;
color: var(--opc-primary);
}

.opc-home-service-art {

position: relative;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 16 / 9;
background: linear-gradient(135deg,
var(--opc-service-color, var(--opc-primary)),
color-mix(in srgb, var(--opc-service-color, var(--opc-primary)) 55%, #000));

overflow: hidden;
border-radius: var(--opc-radius) var(--opc-radius) 0 0;
}
.opc-home-service-art img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;

filter: saturate(.92) brightness(1.02);
}
.opc-home-service-icon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: rgba(255, 255, 255, .2);
color: #fff;
font-size: 1.1rem;
}
.opc-home-service-body {
display: block;
padding: 1rem 1.1rem 1.15rem;
}
.opc-home-service-card h3 {
font-size: .95rem;
font-weight: 700;
margin: 0 0 .5rem;
}
@media (prefers-reduced-motion: reduce) {
.opc-home-service-card,
.opc-home-article-card,
.opc-home-product-card {
transition: none;
}
.opc-home-service-card:hover,
.opc-home-service-card:focus-visible,
.opc-home-article-card:hover,
.opc-home-article-card:focus-visible,
.opc-home-product-card:hover,
.opc-home-product-card:focus-visible {
transform: none;
}
}


.opc-list-cards {
display: flex;
flex-direction: column;
gap: .65rem;
}
.opc-list-card {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .5rem 1.25rem;
background: var(--opc-surface);
border: 1px solid var(--opc-border-light);
border-radius: var(--opc-radius-lg);

box-shadow: var(--opc-card-shadow);
padding: .9rem 1.1rem;
color: inherit;
}
.opc-list-card-link {
text-decoration: none;
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease;
}
.opc-list-card-link:hover,
.opc-list-card-link:focus-visible {
transform: translateY(-2px);
box-shadow: var(--opc-shadow-lifted);
}
.opc-list-card-main {
flex: 1 1 220px;
min-width: 0;
}
.opc-list-card-title {
font-weight: 700;
color: var(--opc-text);
}
.opc-list-card-sub {
font-size: .85rem;
color: var(--opc-text-soft);
}
.opc-list-card-when {
flex: 0 0 auto;
font-size: .88rem;
color: var(--opc-text-soft);
}
.opc-list-card-status {
flex: 0 0 auto;
margin-left: auto;
}
@media (max-width: 575.98px) {
.opc-list-card {
flex-direction: column;
align-items: flex-start;
}

.opc-list-card-main {
flex: 0 1 auto;
height: auto;
min-height: 0;
}
.opc-list-card-status {
margin-left: 0;
}
}

.opc-list-cards-compact .opc-list-card {
padding: .6rem .85rem;
gap: .4rem .9rem;
}
.opc-list-cards-compact .opc-list-card-title {
font-size: .92rem;
}


.opc-list-card-unavailable {
border-left: 3px solid var(--opc-danger);
opacity: .68;
}
.opc-list-card-unavailable .opc-list-card-title {
text-decoration: line-through;
text-decoration-color: var(--opc-danger);
}

.opc-list-card-unavailable form,
.opc-list-card-unavailable .badge {
opacity: 1;
}


.opc-list-card-highlight {
border-left: 3px solid var(--opc-primary);
}


.opc-cart-panel {
max-width: 900px;
background: var(--opc-surface);
border: 1px solid var(--opc-border);
border-radius: var(--opc-radius);
box-shadow: var(--opc-shadow-lifted);
padding: 1.5rem 1.75rem;
}
@media (max-width: 767.98px) {
.opc-cart-panel {
padding: 1.1rem 1rem;
}
}
.opc-cart-total {
padding-top: .75rem;
border-top: 1px solid var(--opc-border-light);
}
.hcc-qty-box {
flex: 0 0 auto;
}
.hcc-qty-box input[type="number"] {
width: 4.5rem;
}


.opc-cart-grid {
display: flex;
flex-direction: column;
gap: .65rem;
}
.opc-cart-grid-item {
display: flex;
}

.opc-cart-card {
flex: 1 1 auto;
flex-direction: column;
align-items: stretch;
gap: .35rem;
padding: .7rem .85rem;
}
.opc-cart-card .opc-list-card-main,
.opc-cart-card .opc-list-card-when,
.opc-cart-card .opc-list-card-status {
flex: 0 0 auto;
margin-left: 0;
}
.opc-cart-card .opc-list-card-title {
font-size: .92rem;
}
.opc-cart-card .hcc-qty-box {
width: 100%;
}
.opc-cart-card .hcc-qty-box input[type="number"] {
width: 3.5rem;
}
.opc-cart-card .hcc-qty-box select {
flex: 1 1 auto;
min-width: 0;
}



.hcc-book-head,
.hcc-book-body {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.hcc-book-head { margin-bottom: 4px; }
.hcc-book-dow {
text-align: center;
font-weight: 600;
font-size: .75rem;
color: var(--opc-muted);
}
.hcc-book-cell {

aspect-ratio: 1 / 0.85;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--opc-border);
border-radius: var(--opc-radius);
cursor: pointer;
font-weight: 500;
background: var(--opc-surface);
transition: background .12s ease, border-color .12s ease;
}
.hcc-book-cell[data-date]:hover,
.hcc-book-cell[data-date]:focus {
border-color: var(--opc-primary);
background: var(--opc-primary-tint);
outline: none;
}
.hcc-book-empty { border: none; background: transparent; cursor: default; }
.hcc-book-past {
color: var(--opc-text-placeholder);
background: var(--opc-surface-sunken);
cursor: not-allowed;
}
.hcc-book-today { border-color: var(--opc-primary); }

.hcc-book-selected {
background: var(--opc-accent) !important;
color: var(--opc-accent-contrast);
border-color: var(--opc-accent);
}

.hcc-slot-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
gap: .4rem;
margin-bottom: .2rem;
}

.hcc-slot.active {
background: var(--opc-accent) !important;
border-color: var(--opc-accent) !important;
color: var(--opc-accent-contrast) !important;
}

.hcc-price-box {
margin-bottom: .35rem;
padding-bottom: .25rem;
border-bottom: 1px solid var(--opc-border-light);
}
.hcc-price-final {
font-size: 1.5rem;
font-weight: 700;
}
.hcc-price-was {
text-decoration: line-through;
color: var(--opc-text-faint);
margin-left: .25rem;
}


#hcc-timegrid {
margin-top: .25rem;
}

@media (max-width: 575.98px) {
.hcc-book-cell { font-size: .85rem; }
.hcc-price-final { font-size: 1.25rem; }
}



#hcc-booking .hcc-mobile-only { display: none !important; }
@media (max-width: 767.98px) {
#hcc-booking .hcc-desktop-only { display: none !important; }
#hcc-booking #hcc-day-strip-header.hcc-mobile-only { display: flex !important; }
#hcc-booking #hcc-day-strip-area.hcc-mobile-only { display: block !important; }
#hcc-booking #hcc-slots-inline.hcc-mobile-only { display: block !important; }
#hcc-booking #hcc-month-modal .card-header.hcc-mobile-only { display: flex !important; }


#hcc-booking .hcc-book-controls {
border-radius: var(--opc-radius-lg);
padding: 1rem .9rem .85rem;
}


#hcc-booking .hcc-field select,
#hcc-booking .hcc-field .opc-select-trigger {
width: 100%;
}


#hcc-booking .hcc-day-card,
#hcc-booking #hcc-date-jump,
#hcc-booking .hcc-field select,
#hcc-booking .hcc-field .opc-select-trigger,
#hcc-booking #hcc-slots-inline .hcc-add {
min-height: 3rem;
}
#hcc-booking #hcc-date-jump {
min-width: 3rem;
}
}


.hcc-day-strip-header {
align-items: center;
justify-content: space-between;
margin-bottom: .5rem;
}
.hcc-day-strip-header strong {
font-size: .95rem;
}


.hcc-day-strip-viewport {
overflow: hidden;
touch-action: pan-y;
cursor: grab;
border-radius: var(--opc-radius);
}
.hcc-day-strip-viewport.hcc-day-strip-dragging {
cursor: grabbing;
}


.hcc-day-strip-track {
display: flex;
width: 300%;
transform: translateX(-33.3333%);
transition: transform .22s ease;
}
.hcc-day-strip-track > .hcc-day-strip {
flex: none;
width: 33.3333%;
}



.hcc-day-strip {
display: grid;

grid-template-columns: repeat(7, minmax(0, 1fr));
gap: .4rem;
padding: .2rem .1rem .35rem;
margin-bottom: .1rem;
}
.hcc-day-card {

aspect-ratio: 1 / 1.05;
min-width: 0;   
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .15rem;
border: 1px solid var(--opc-border);
border-radius: var(--opc-radius);
background: var(--opc-surface);
color: var(--opc-text);
cursor: pointer;
overflow: hidden;
}
.hcc-day-card .hcc-day-dow {
font-size: .62rem;
font-weight: 600;
color: var(--opc-muted);
text-transform: uppercase;
letter-spacing: .03em;
}
.hcc-day-card .hcc-day-num {
font-size: 1.05rem;
font-weight: 700;
}
.hcc-day-card.hcc-day-today { border-color: var(--opc-primary); }

.hcc-day-card.hcc-day-selected {
background: var(--opc-accent);
border-color: var(--opc-accent);
color: var(--opc-accent-contrast);
}
.hcc-day-card.hcc-day-selected .hcc-day-dow {
color: color-mix(in srgb, var(--opc-accent-contrast) 80%, transparent);
}
.hcc-day-card.hcc-day-past {
color: var(--opc-text-placeholder);
background: var(--opc-surface-sunken);
cursor: not-allowed;
}


#hcc-date-jump {
display: inline-flex;
align-items: center;
justify-content: center;
}


@media (min-width: 768px) {
#hcc-booking #hcc-month-modal,
#hcc-booking #hcc-month-modal[hidden] {
display: block !important;
position: static;
inset: auto;
background: none;
padding: 0;
z-index: auto;
}
#hcc-booking #hcc-month-modal .opc-modal-dialog {
max-width: none;
width: 100%;
box-shadow: none;
background: transparent;
border: none;
}
#hcc-booking #hcc-month-modal .card-body {
padding: 0;
}
}

[data-bs-theme="dark"] #hcc-booking #hcc-month-modal .opc-modal-dialog {
background: transparent !important;
}


#hcc-slots-inline {
border-top: 1px solid var(--opc-border-light);
padding-top: .7rem;
margin-top: .2rem;
color: var(--opc-text);
}
.hcc-slots-inline-date {
font-weight: 700;
font-size: .9rem;
}
#hcc-slots-inline .hcc-slot-grid {
grid-template-columns: repeat(3, 1fr);
gap: .5rem;
}

#hcc-slots-inline .hcc-slot {
border-radius: 999px;
min-height: 40px;
padding: .5rem .75rem;
font-size: .85rem;
font-weight: 600;
background: var(--opc-primary) !important;
border-color: var(--opc-primary) !important;
color: var(--opc-primary-contrast) !important;
}

#hcc-slots-inline .hcc-slot.active {
background: var(--opc-accent) !important;
border-color: var(--opc-accent) !important;
color: var(--opc-accent-contrast) !important;
}

#hcc-slots-inline .hcc-slot:disabled {
background: var(--opc-surface-sunken) !important;
border-color: var(--opc-border) !important;
color: var(--opc-text-placeholder) !important;
opacity: 1;
}


.hcc-hint-banner {
display: flex;
gap: .5rem;
align-items: flex-start;
border: 1px solid color-mix(in srgb, var(--opc-primary) 35%, var(--opc-border));
background: var(--opc-primary-tint);
color: var(--opc-text);
border-radius: var(--opc-radius);
padding: .6rem .75rem;
font-size: .85rem;
line-height: 1.4;
}


.opc-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .5);
display: flex;
align-items: flex-start;
justify-content: center;
padding: 4rem 1rem 1rem;
z-index: 1055;
}
.opc-modal-backdrop[hidden] { display: none; }
.opc-modal-dialog {
width: 100%;
max-width: 420px;

box-shadow: var(--opc-card-shadow);
}
body.opc-modal-open { overflow: hidden; }

#opc-home-guest-desc {
white-space: pre-line;
}

#hcc-slot-modal .opc-modal-dialog,
#opc-rewards-modal .opc-modal-dialog,
#opc-store-modal .opc-modal-dialog,
.opc-manager-tile-modal .opc-modal-dialog {
max-width: 560px;
}

.opc-manager-tile-list {
max-height: 50vh;
overflow-y: auto;
}


.opc-stat-tile-hint {
position: absolute;
top: .4rem;
right: .5rem;
width: 1.1rem;
height: 1.1rem;
line-height: 1.1rem;
border-radius: 50%;
background: var(--opc-surface-alt);
color: var(--opc-text-soft);
font-size: .7rem;
font-weight: 700;
text-align: center;
}


.opc-revenue-compare-title {
font-weight: 600;
margin-bottom: .5rem;
display: flex;
align-items: center;
gap: .5rem;
}
.opc-revenue-compare-row {
display: flex;
align-items: center;
gap: .5rem;
margin-bottom: .4rem;
}
.opc-revenue-compare-label {
flex: 0 0 6rem;
color: var(--opc-text-soft);
font-size: .8rem;
}
.opc-revenue-compare-bar-track {
flex: 1 1 auto;
background: var(--opc-surface-alt);
border-radius: .25rem;
height: 1rem;
overflow: hidden;
}
.opc-revenue-compare-bar {
display: block;
height: 100%;
border-radius: .25rem;
transition: width .3s ease;
}
.opc-revenue-compare-value {
flex: 0 0 auto;
font-variant-numeric: tabular-nums;
font-size: .85rem;
min-width: 5.5rem;
text-align: right;
}


.opc-cropmodal-dialog {
max-width: 380px;
}
.opc-cropmodal-body {
display: flex;
flex-direction: column;
align-items: center;
gap: .75rem;
}
.opc-cropmodal-frame {
position: relative;
width: min(100%, 300px);
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: .5rem;
background: var(--opc-surface-sunken);

touch-action: none;
cursor: grab;
border: 1px solid var(--opc-border);
}
.opc-cropmodal-frame:active {
cursor: grabbing;
}
.opc-cropmodal-frame-circle {
border-radius: 50%;
}
.opc-cropmodal-img {
position: absolute;
top: 0;
left: 0;
max-width: none;
transform-origin: 0 0;
user-select: none;
-webkit-user-drag: none;
}
.opc-cropmodal-zoom {
display: flex;
align-items: center;
gap: .5rem;
width: 100%;
}
.opc-cropmodal-zoom-icon {
font-size: .85rem;
color: var(--opc-muted);
flex-shrink: 0;
line-height: 1;
}
.opc-cropmodal-zoom-icon-lg {
font-size: 1.1rem;
}
.opc-cropmodal-zoom-range {
flex: 1;
}
.opc-cropmodal-hint {
text-align: center;
}


.opc-skeleton {
display: block;
border-radius: var(--opc-radius-sm, 6px);
background: linear-gradient(
100deg,
var(--opc-surface-sunken) 40%,
color-mix(in srgb, var(--opc-surface-sunken) 50%, var(--opc-border)) 55%,
var(--opc-surface-sunken) 70%
);
background-size: 200% 100%;
animation: opc-skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes opc-skeleton-shimmer {
0% { background-position: 150% 0; }
100% { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
.opc-skeleton {
animation: none;
background: var(--opc-surface-sunken);
}
}
.opc-skeleton-card {
height: 100px;
border-radius: var(--opc-radius);
margin-bottom: .5rem;
}
.opc-skeleton-line {
height: .85rem;
width: 70%;
margin: .65rem .8rem 0;
}
.opc-skeleton-line + .opc-skeleton-line {
width: 45%;
margin-top: .4rem;
margin-bottom: .8rem;
}
.opc-skeleton-row {
height: 3.25rem;
margin-bottom: .6rem;
}
.opc-skeleton-text {
height: .75rem;
margin-bottom: .35rem;
}
.opc-skeleton-text:last-child {
margin-bottom: 0;
}
.opc-skeleton-slot {
height: 2.4rem;
}

.opc-grid-loading {
opacity: .45;
pointer-events: none;
}


#opc-store-modal .card-body {
max-height: 70vh;
overflow-y: auto;
}
.opc-store-modal-media {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
border-radius: var(--opc-radius);
background: var(--opc-surface-sunken);
color: var(--opc-muted);
font-size: 2rem;
overflow: hidden;
margin-bottom: 1rem;
}
.opc-store-modal-media img {

width: 100%;
height: 100%;
object-fit: contain;
}
.opc-store-modal-price {
font-size: 1.4rem;
font-weight: 700;
color: var(--opc-text);
margin-bottom: .25rem;
}
.opc-store-modal-browse-row {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--opc-border);
text-align: center;
}
.opc-store-modal-browse-row button {
font: inherit;
font-size: .85rem;
font-weight: 600;
color: var(--opc-primary);
background: none;
border: none;
padding: 0;
cursor: pointer;
}
.opc-store-modal-back {
display: inline-flex;
align-items: center;
font: inherit;
font-size: .85rem;
font-weight: 600;
color: var(--opc-primary);
background: none;
border: none;
padding: 0;
margin-bottom: 1rem;
cursor: pointer;
}


.opc-pdf-modal-backdrop {
padding: 1rem;
align-items: stretch;
}
.opc-pdf-modal-dialog {
max-width: 900px;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
margin: 0 auto;
}
.opc-pdf-modal-body {
flex: 1;
min-height: 0;
overflow-y: auto;
background: var(--opc-surface-sunken);
display: flex;
flex-direction: column;
align-items: center;
gap: .5rem;
padding: .5rem;
}
.opc-pdf-modal-status {
color: var(--opc-text-soft);
padding: 2rem 1rem;
text-align: center;
}
.opc-pdf-modal-pages {
display: flex;
flex-direction: column;
align-items: center;
gap: .5rem;
width: 100%;
}
.opc-pdf-modal-page {
max-width: 100%;
height: auto;
box-shadow: var(--opc-shadow-resting);
background: #fff;
}


.opc-order-modal-backdrop {
padding: 1rem;
align-items: stretch;
}
.opc-order-modal-dialog {
max-width: 700px;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
margin: 0 auto;
}
.opc-order-modal-dialog .card-header {
flex: 0 0 auto;
padding: .5rem .75rem;
}

.btn-close {
background-image: none;
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%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.414'/%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%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.414'/%3e%3c/svg%3e");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: 1em auto;
mask-size: 1em auto;
background-color: var(--opc-accent);
opacity: 1;
}
.btn-close:hover,
.btn-close:focus-visible {
background-color: color-mix(in srgb, var(--opc-accent) 85%, black);
opacity: 1;
}
.opc-order-modal-body {
flex: 1;
min-height: 0;
overflow-y: auto;
}
.opc-order-modal-status {
color: var(--opc-text-soft);
padding: 2rem 1rem;
text-align: center;
}


.opc-cart-toast {
position: fixed;
left: 50%;
bottom: 1.25rem;
transform: translateX(-50%);
z-index: 1060;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .75rem;
background: var(--opc-surface);
border: 1px solid var(--opc-border);
border-radius: var(--opc-radius);
box-shadow: var(--opc-shadow-lifted);
padding: .75rem 1rem;
max-width: calc(100vw - 2rem);
}
.opc-cart-toast[hidden] { display: none; }
.opc-cart-toast-actions {
display: flex;
flex-wrap: wrap;
gap: .4rem;
}
@media (max-width: 575.98px) {
.opc-cart-toast {
left: 1rem;
right: 1rem;
bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
transform: none;
max-width: none;
flex-direction: column;
align-items: stretch;
}
}



.opc-cart-trigger {
display: none;
position: fixed;
top: .9rem;
right: 1.5rem;
z-index: 1045;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
padding: 0;
border: none;
border-radius: var(--opc-shape);
background: var(--opc-primary);
color: var(--opc-primary-contrast);
box-shadow: var(--opc-shadow-lifted);
cursor: pointer;

opacity: 0;
transition: opacity .15s ease-out;
}
.opc-cart-trigger.is-positioned {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.opc-cart-trigger {
transition: none;
}
}
.opc-cart-trigger:hover,
.opc-cart-trigger:focus-visible {
background: color-mix(in srgb, var(--opc-primary) 85%, black);
}
.opc-cart-trigger svg {
width: 1.3rem;
height: 1.3rem;
}
@media (min-width: 1200px) {
.opc-cart-trigger {
display: inline-flex;
}
}

.opc-cart-fab {
display: none;
position: fixed;
right: 1rem;
bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
z-index: 1045;
align-items: center;
justify-content: center;
width: 3.25rem;
height: 3.25rem;
padding: 0;
border: none;
border-radius: var(--opc-shape);
background: var(--opc-primary);
color: var(--opc-primary-contrast);
box-shadow: var(--opc-shadow-lifted);
cursor: pointer;
animation: opc-cart-fab-in .2s ease-out;
}
.opc-cart-fab svg {
width: 1.4rem;
height: 1.4rem;
}
.opc-cart-fab:not([hidden]) {
display: inline-flex;
}
@media (min-width: 1200px) {
.opc-cart-fab {
display: none !important;
}
}

body:has(.footer) .opc-cart-fab {
bottom: calc(1rem + var(--opc-footer-height) + env(safe-area-inset-bottom, 0px));
}
body:has(.opc-mobile-chrome) .opc-cart-fab {
bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
}
body:has(.opc-mobile-chrome):has(.footer) .opc-cart-fab {
bottom: calc(5rem + var(--opc-footer-height) + env(safe-area-inset-bottom, 0px));
}
@keyframes opc-cart-fab-in {
from { transform: scale(.5); opacity: 0; }
to   { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.opc-cart-fab {
animation: none;
}
}

.opc-cart-trigger .opc-cart-widget-badge,
.opc-cart-fab .opc-cart-widget-badge {
position: absolute;
top: -.25rem;
right: -.25rem;
min-width: 1.2rem;
height: 1.2rem;
padding: 0 .3rem;
font-size: .68rem;
display: flex;
align-items: center;
justify-content: center;
}


#opc-cart-drawer-backdrop.opc-modal-backdrop {
background: rgba(0, 0, 0, .55);
}
.opc-cart-drawer {
max-width: 480px;
}
.opc-cart-drawer-body {
max-height: 50vh;
overflow-y: auto;
}
.opc-cart-drawer-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: .65rem;
}
.opc-cart-drawer-line {
display: flex;
align-items: center;
gap: .65rem;
}
.opc-cart-drawer-line-unavailable {
opacity: .55;
}
.opc-cart-drawer-thumb {
flex: 0 0 auto;
width: 2.75rem;
height: 2.75rem;
border-radius: var(--opc-radius-sm);
background: var(--opc-surface-sunken);
object-fit: cover;
}
.opc-cart-drawer-thumb-icon {
display: block;
}
.opc-cart-drawer-line-main {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
}
.opc-cart-drawer-line-name {
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.opc-cart-drawer-line-sub {
font-size: .8rem;
color: var(--opc-text-soft);
}
.opc-cart-drawer-line-price {
flex: 0 0 auto;
font-weight: 700;
white-space: nowrap;
}

.opc-cart-drawer-skeleton-thumb {
flex: 0 0 auto;
width: 2.75rem;
height: 2.75rem;
border-radius: var(--opc-radius-sm);
}
.opc-cart-drawer-skeleton-main {
flex: 1 1 auto;
min-width: 0;
}
.opc-cart-drawer-remove {
flex: 0 0 auto;
width: 1.6rem;
height: 1.6rem;
padding: 0;
border: none;
border-radius: var(--opc-shape);
background: transparent;
color: var(--opc-text-soft);
font-size: 1.15rem;
line-height: 1;
cursor: pointer;
}
.opc-cart-drawer-remove:hover,
.opc-cart-drawer-remove:focus-visible {
background: var(--opc-surface-sunken);
color: var(--opc-danger);
}
@media (max-width: 575.98px) {
.opc-cart-drawer-backdrop {
align-items: flex-end;
padding: 0;
}
.opc-cart-drawer {
max-width: none;
width: 100%;
border-radius: var(--opc-radius-lg) var(--opc-radius-lg) 0 0;
max-height: 85vh;
display: flex;
flex-direction: column;
}
.opc-cart-drawer-body {
max-height: none;
}
}


.opc-cart-widget-toast,
.opc-cart-toast {
position: fixed;
left: 50%;
bottom: 1.25rem;
transform: translateX(-50%);
z-index: 1060;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .75rem;
background: var(--opc-surface);
border: 1px solid var(--opc-border);
border-radius: var(--opc-radius);
box-shadow: var(--opc-shadow-lifted);
padding: .75rem 1rem;
max-width: calc(100vw - 2rem);
}
.opc-cart-widget-toast[hidden] {
display: none;
}
.opc-cart-widget-toast-thumb {
flex: 0 0 auto;
width: 2.5rem;
height: 2.5rem;
border-radius: var(--opc-radius-sm);
background: var(--opc-surface-sunken);
overflow: hidden;
}
.opc-cart-widget-toast-thumb[hidden] {
display: none;
}
.opc-cart-widget-toast-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.opc-cart-widget-toast-text {
font-weight: 600;
}
@media (max-width: 575.98px) {
.opc-cart-widget-toast {
left: 1rem;
right: 1rem;
bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
transform: none;
max-width: none;
}
}



:root {
--opc-mobilebar-height: 4rem;
}
.opc-mobilebar {
display: none;
}

@media (max-width: 1199.98px) {

body:has(.opc-mobile-chrome) {
padding-bottom: calc(var(--opc-mobilebar-height) + var(--opc-footer-height));
}



.opc-mobilebar {
display: flex;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1050;
background: var(--opc-surface);
border-top: 1px solid var(--opc-border);
box-shadow: var(--opc-shadow-lifted);
padding: .25rem .25rem calc(.25rem + env(safe-area-inset-bottom));
}
.opc-mobilebar-item {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .15rem;
padding: .35rem .25rem;
color: var(--opc-muted);
text-decoration: none;
font-size: .68rem;
font-weight: 600;
text-align: center;
border-radius: var(--opc-radius-sm);
transition: color .12s ease;
}
.opc-mobilebar-icon {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.opc-mobilebar-icon svg {
width: 1.35rem;
height: 1.35rem;
}

.opc-mobilebar-badge {
position: absolute;
top: -.3rem;
right: -.5rem;
min-width: 1.05rem;
height: 1.05rem;
padding: 0 .3rem;
font-size: .6rem;
line-height: 1.05rem;
}
.opc-mobilebar-item:hover,
.opc-mobilebar-item:focus-visible,
.opc-mobilebar-item.is-active {
color: var(--opc-primary);
outline: none;
}


.opc-mobilebar-center .opc-mobilebar-icon {
width: 3rem;
height: 3rem;
margin-top: -1.4rem;

border-radius: var(--opc-shape);
background: var(--opc-primary);
color: var(--opc-primary-contrast);
box-shadow: var(--opc-shadow-resting);
transition: background-color .12s ease;
}
.opc-mobilebar-center:hover .opc-mobilebar-icon,
.opc-mobilebar-center:focus-visible .opc-mobilebar-icon,
.opc-mobilebar-center.is-active .opc-mobilebar-icon {
background: color-mix(in srgb, var(--opc-primary) 85%, black);
}
.opc-mobilebar-center.is-active {
color: var(--opc-muted); 
}
}


html[data-force-mobile] body:has(.opc-mobile-chrome) {
padding-bottom: calc(var(--opc-mobilebar-height) + var(--opc-footer-height));
}

html[data-force-mobile] .opc-mobilebar {
display: flex !important;
}


header.header {
position: sticky;
top: 0;
z-index: 1040;
}


@media (min-width: 1200px) {
header.header {
height: 0px;
}
}


@media (max-width: 1199.98px) {

header.header .navbar-brand {
display: block;
width: 100%;
}
header.header .brand-logo {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
width: 100%;

text-decoration: none;
}
.header .brand-name-text {
display: block;
color: var(--opc-text);
font-weight: 600;
font-size: 1.1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

header.header .site-description {
color: var(--opc-text-soft);
}

header.header .brand-name-fallback,
header.header .brand-logo-paw {
color: var(--opc-text);
}

header.header {
background-image: linear-gradient(to right, var(--opc-surface) 0%, var(--bs-body-bg) 100%);
}

[data-bs-theme="dark"] header.header {
background-image: linear-gradient(to right, var(--opc-surface) 0%, var(--opc-surface-sunken) 100%);
}
}


.brand-name-text {
display: none;
}


.header .brand-logo-img {
display: block;
height: 32px;
max-height: 32px;
width: auto;
max-width: 100%;
object-fit: contain;
}


.header .brand-logo-img-dark,
.opc-desktop-chrome .brand-logo-img-dark {
display: none;
}
[data-bs-theme="dark"] .header .brand-logo-img-light,
[data-bs-theme="dark"] .opc-desktop-chrome .brand-logo-img-light {
display: none;
}
[data-bs-theme="dark"] .header .brand-logo-img-dark,
[data-bs-theme="dark"] .opc-desktop-chrome .brand-logo-img-dark {
display: block;
}


.opc-desktop-chrome {
display: none;
}

@media (min-width: 1200px) {

.opc-desktop-chrome {
display: flex;
justify-content: center;
align-items: center;
position: sticky;
top: 4.5rem; 
z-index: 1030;
background: var(--opc-surface);
border-bottom: 1px solid var(--opc-border);
box-shadow: var(--opc-shadow-lifted);
padding: 0 1rem;

min-height: 74px;

opacity: 0;
transition: opacity .15s ease-out;
}
.opc-desktop-chrome.is-relocated {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.opc-desktop-chrome {
transition: none;
}
}

.opc-desktop-tabs {
display: flex;
align-items: stretch;
gap: .25rem;
}


.opc-desktop-chrome .navbar-brand {
position: absolute;
top: 50%;
left: max(1.5rem, calc((100vw - 900px) / 2));
transform: translateY(-50%);
display: flex;
align-items: center;
}
.opc-desktop-chrome .brand-logo-img {
height: 70px;
max-height: 70px;
width: auto;
max-width: 100%;
object-fit: contain;
}


.header .opc-cart-trigger {
position: absolute;

top: calc(74px / 2);

right: max(1.5rem, calc((100vw - 900px) / 2));
left: auto;
transform: translateY(-50%);
}

.opc-desktop-tab-item {
display: flex;
align-items: center;
gap: .5rem;
padding: 1.35rem 1.1rem;
min-height: 74px;
color: var(--opc-muted);
text-decoration: none;
font-size: .9rem;
font-weight: 600;
border-bottom: 2px solid transparent;
transition: color .12s ease, border-color .12s ease;
}

.opc-desktop-tab-icon {
display: flex;
align-items: center;
justify-content: center;
}

.opc-desktop-tab-icon svg {
width: 1.15rem;
height: 1.15rem;
}

.opc-desktop-tab-item:hover,
.opc-desktop-tab-item:focus-visible {
color: var(--opc-text);
outline: none;
}

.opc-desktop-tab-item.is-active {
color: var(--opc-primary);
border-bottom-color: var(--opc-primary);
}
}


html[data-force-mobile] .opc-desktop-chrome {
display: none !important;
}


.opc-profile-wrap {
max-width: 900px;
}


.opc-profile-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
align-items: start;
}
.opc-profile-grid[data-opc-collapsed] {
grid-template-columns: 1fr;
}

.opc-profile-grid [data-opc-area="photo"]       { grid-column: 1; order: 1; }
.opc-profile-grid [data-opc-area="details"]     { grid-column: 2; order: 2; }
.opc-profile-grid [data-opc-area="bookings"]    { grid-column: 1; order: 3; }
.opc-profile-grid [data-opc-area="assessment"]  { grid-column: 2; order: 4; }
.opc-profile-grid [data-opc-area="purchases"]   { grid-column: 1; order: 5; }
.opc-profile-grid [data-opc-area="reportcards"] { grid-column: 2; order: 6; }
.opc-profile-grid [data-opc-area="documents"]   { grid-column: 1; order: 7; }
.opc-profile-grid [data-opc-area="points"]      { grid-column: 2; order: 8; }
.opc-profile-grid [data-opc-area="status"]      { grid-column: 1; order: 9; }

@media (max-width: 767px) {

.opc-profile-grid {
grid-template-columns: 1fr;
}
.opc-profile-grid [data-opc-area] {
grid-column: 1;
}
}


.opc-profile-grid [data-opc-area="photo"] .card-body {
display: flex;
align-items: flex-end;
}
.opc-profile-grid [data-opc-area="photo"] .card-body form {
width: 100%;
}

.hcc-pet-photo {
display: flex;
align-items: center;
justify-content: center;

aspect-ratio: 1 / 1;

max-height: 400px;
overflow: hidden;
background: var(--opc-surface-sunken);

border-top-left-radius: var(--opc-radius-lg);
border-top-right-radius: var(--opc-radius-lg);
}
.hcc-pet-photo img {
display: block;
width: 100%;
height: 100%;

object-fit: contain;
}
.hcc-pet-photo-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 3rem;
color: var(--opc-text-faint);
}


.opc-details-subgrid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-flow: column;
grid-template-rows: repeat(3, auto);
gap: .5rem;
}
.opc-detail-tile {
background: var(--opc-surface-sunken);
border: 1px solid var(--opc-border-light);
border-radius: var(--opc-radius);
padding: .5rem .65rem;
text-align: center;
transition: border-color .15s ease;
}
.opc-detail-tile:hover {
border-color: var(--opc-border);
}
.opc-detail-tile.opc-detail-wide {
text-align: left;
}
.opc-tel-link {
color: var(--opc-primary, inherit);
text-decoration: none;
display: inline-block;
min-height: 1.75rem;
line-height: 1.75rem;
}
.opc-tel-link:hover,
.opc-tel-link:focus {
text-decoration: underline;
}


.opc-detail-field {
display: flex;
flex-direction: column;
align-items: center;
gap: .3rem;
text-align: center;
min-width: 0;
}
.opc-detail-field.opc-detail-wide {
align-items: flex-start;
text-align: left;
}
.opc-field-label {
font-size: .72rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--opc-text-faint);
}
.opc-value-pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .35rem;
min-height: 1.9rem;
padding: .2rem .75rem;
max-width: 100%;
border-radius: var(--opc-shape);
font-weight: 500;
background: color-mix(in srgb, var(--opc-text-faint) 16%, transparent);
color: var(--opc-text);
}
.opc-value-pill.is-empty {
color: var(--opc-text-faint);
font-weight: 400;
}

.opc-value-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .4rem;
min-height: 2rem;
padding: .25rem .9rem;
max-width: 100%;
border: 1px solid var(--opc-primary);
border-radius: var(--opc-shape);
background: var(--opc-primary);
color: var(--opc-primary-contrast);
font-weight: 600;
font-size: .85rem;
text-decoration: none;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}
.opc-value-btn:hover,
.opc-value-btn:focus-visible {
background: color-mix(in srgb, var(--opc-primary) 85%, black);
border-color: color-mix(in srgb, var(--opc-primary) 85%, black);
color: var(--opc-primary-contrast);
transform: translateY(-1px);
}
.opc-value-btn svg {
width: .85rem;
height: .85rem;
flex: none;
}
.opc-value-btn .txt {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
.opc-value-btn:hover,
.opc-value-btn:focus-visible {
transform: none;
}
}


.opc-tile-edit-btn {
appearance: none;
border: none;
background: transparent;
color: var(--opc-text-faint);
width: 1.6rem;
height: 1.6rem;
border-radius: var(--opc-shape);
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.opc-tile-edit-btn svg {
width: .85rem;
height: .85rem;
}
.opc-tile-edit-btn:hover,
.opc-tile-edit-btn:focus-visible {
background: color-mix(in srgb, var(--opc-primary) 16%, transparent);
color: var(--opc-primary);
outline: none;
}


.opc-assessment-round {
padding: .65rem .8rem;
border-radius: var(--opc-radius);
background: var(--opc-surface-sunken);
}
.opc-assessment-round + .opc-assessment-round {
margin-top: .65rem;
}
.opc-assessment-round-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: .5rem;
margin-bottom: .4rem;
}
.opc-assessment-round-title {
font-weight: 700;
font-size: .88rem;
}
.opc-assessment-round-meta {
font-size: .78rem;
color: var(--opc-text-faint);
margin-top: .1rem;
}
.opc-qa-row {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: .3rem 0;
border-top: 1px solid var(--opc-border);
font-size: .84rem;
}
.opc-qa-row:first-of-type {
border-top: none;
}
.opc-qa-q {
color: var(--opc-text-soft);
}
.opc-qa-a {
font-weight: 600;
text-align: right;
}


.opc-bookings-scroll.opc-list-cards {
display: block;
max-height: 280px;
overflow-y: auto;
padding-right: .25rem;
}

.opc-bookings-scroll .opc-list-card {
height: auto !important;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
flex-wrap: nowrap;
gap: .35rem;
padding: .65rem .75rem;
margin-bottom: .5rem;
}
.opc-bookings-scroll .opc-list-card:last-child {
margin-bottom: 0;
}

.opc-bookings-scroll .opc-list-card-main {
flex: 0 1 auto;
height: auto;
min-height: 0;
}
.opc-bookings-scroll .opc-list-card-when {
flex: 0 0 auto;
margin-left: 0;
}


.opc-points-mini-history {
max-height: 130px;
overflow-y: auto;
}
.opc-points-mini-history .list-group-item {
padding: .3rem 0;
font-size: .82rem;
}


.opc-doc-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: .75rem;
}
.opc-doc-card {
text-align: center;
}
.opc-doc-thumb {
position: relative;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
background: var(--opc-surface-sunken);
border: 1px solid var(--opc-border);
border-radius: var(--opc-radius);
overflow: hidden;
color: var(--opc-text-soft);
text-decoration: none;
transition: transform .15s ease, box-shadow .15s ease;
}
.opc-doc-thumb:hover,
.opc-doc-thumb:focus-visible {
transform: translateY(-2px);
box-shadow: var(--opc-shadow-resting);
}
.opc-doc-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.opc-doc-icon {
font-size: 2rem;
}
.opc-doc-kind {
position: absolute;
margin-top: 2.5rem;
font-size: .65rem;
font-weight: 700;
letter-spacing: .04em;
}
.opc-doc-name {
font-size: .75rem;
margin-top: .35rem;
color: var(--opc-text-soft);
}
.opc-doc-delete {
font-size: .75rem;
}

.opc-points-earned-card {
cursor: pointer;
font: inherit;
}


@media (max-width: 767.98px) {

[class^="com-onepetconnect-"] h1.h3 {
font-size: 1.25rem;
}
[class^="com-onepetconnect-"] h2.h5,
[class^="com-onepetconnect-"] h2.h6 {
font-size: 1rem;
}


[class^="com-onepetconnect-"] .mb-4 {
margin-bottom: 1rem !important;
}
[class^="com-onepetconnect-"] .mb-3 {
margin-bottom: .65rem !important;
}
[class^="com-onepetconnect-"] .gap-2 {
gap: .4rem !important;
}
[class^="com-onepetconnect-"] .gap-3 {
gap: .6rem !important;
}


[class^="com-onepetconnect-"] .card {
--bs-card-spacer-y: .65rem;
--bs-card-spacer-x: .75rem;
}


.opc-stat-strip {
padding: .85rem 1rem;
}
.opc-stat-total-value {
font-size: 1.75rem;
}


.opc-pets-grid {
gap: .65rem;
}
.opc-list-cards {
gap: .5rem;
}


.opc-modal-dialog .card-header,
.opc-modal-dialog .card-body,
.opc-modal-dialog .card-footer {
padding: .75rem .9rem;
}


.opc-profile-grid {
gap: .6rem;
}
.hcc-pet-photo {

max-height: 300px;
}
.hcc-pet-photo-placeholder {
font-size: 1.75rem;
}
.opc-details-subgrid {
gap: .35rem;
}
.opc-detail-tile {
padding: .3rem .4rem;
line-height: 1.25;
}
.opc-bookings-scroll.opc-list-cards {
max-height: 240px;
}


.opc-doc-grid {
grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
gap: .5rem;
}


.opc-profile-wrap .card {
--bs-card-spacer-y: .5rem;
--bs-card-spacer-x: .6rem;
}
.opc-profile-wrap .card-header {
font-size: .9rem;
}
.opc-profile-wrap h1.h3 {
font-size: 1.1rem;
}
}


.opc-switch-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
min-height: calc(1.5em + 1.05rem + 2px); 
padding: .6rem .9rem;
background: var(--opc-surface-sunken);
border: 1px solid var(--opc-border);
border-radius: var(--opc-radius, .5rem);
cursor: pointer;
transition: border-color .15s ease;
}
.opc-switch-row:hover {
border-color: var(--opc-primary);
}
.opc-switch-row-text {
display: flex;
flex-direction: column;
line-height: 1.3;
}
.opc-switch-row-title {
font-weight: 500;
color: var(--bs-body-color);
}
.opc-switch-row-desc {
font-size: .85rem;
color: var(--opc-text-soft);
}
.opc-switch-row-desc-on {
display: none;
}
.opc-switch-row:has(.form-check-input:checked) .opc-switch-row-desc-off {
display: none;
}
.opc-switch-row:has(.form-check-input:checked) .opc-switch-row-desc-on {
display: inline;
}
.opc-switch-row-control {
flex: 0 0 auto;
margin: 0;
padding: 0;
}
.opc-switch-row-control .form-check-input {
width: 2.75rem;
height: 1.5rem;
margin: 0;
cursor: pointer;
}
.opc-switch-row-control .form-check-input:checked {
background-color: var(--opc-primary) !important;
border-color: var(--opc-primary) !important;
}
.opc-switch-row-control .form-check-input:focus {
box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--opc-primary) 25%, transparent) !important;
}




.opc-filter-toggle {
display: inline-flex;
align-items: center;
border-radius: 999px;
border: 1px solid var(--opc-primary);
background: var(--opc-primary);
color: var(--opc-primary-contrast);
padding: .35rem .9rem;
font-size: .85rem;
font-weight: 600;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.opc-filter-toggle:hover {
background: color-mix(in srgb, var(--opc-primary) 85%, black);
border-color: color-mix(in srgb, var(--opc-primary) 85%, black);
}
.opc-filter-toggle[aria-pressed="true"] {
background: var(--opc-accent);
border-color: var(--opc-accent);
color: var(--opc-primary-contrast);
}
.opc-filter-toggle[aria-pressed="true"]:hover {
background: color-mix(in srgb, var(--opc-accent) 85%, black);
border-color: color-mix(in srgb, var(--opc-accent) 85%, black);
}
.opc-filter-toggle:focus-visible {
outline: 2px solid var(--opc-primary);
outline-offset: 2px;
}


.opc-filter-toggle--tab-size {
min-height: 2.75rem;
padding: .4rem 1.1rem;
font-size: .85rem;
}


.opc-legend-toggle {
display: inline-flex;
align-items: center;
gap: .35rem;
background: none;
border: none;
padding: 0;
margin-bottom: .75rem;
font-size: .85rem;
font-weight: 600;
color: var(--opc-text-soft);
cursor: pointer;
}
.opc-legend-toggle:hover,
.opc-legend-toggle:focus-visible {
color: var(--opc-primary);
}
.opc-legend-toggle-caret {
font-size: .65rem;
transition: transform .15s ease;
}
.opc-legend-toggle[aria-expanded="true"] .opc-legend-toggle-caret {
transform: rotate(180deg);
}
.opc-legend-detail {
margin-bottom: .75rem;
}




.hcc-avail-toolbar-switches {
justify-content: center;
}


.hcc-avail-toolbar-nav .btn,
.hcc-avail-toolbar-today {
border-radius: 999px;
}


@media (max-width: 767.98px) {
.hcc-avail-toolbar {
justify-content: center;
}
.hcc-avail-toolbar-nav {
order: 1;
flex-basis: 100%;
justify-content: center;
}
#hcc-month-label {
order: 1;
}
#hcc-prev-month {
order: 2;
}
#hcc-next-month {
order: 3;
}
#hcc-today {
order: 4;
}
.hcc-avail-toolbar-toggle,
.hcc-avail-toolbar-switches {
order: 2;
}
.hcc-avail-toolbar-switches {
flex-basis: 100%;
}
}



.opc-register-shell {
max-width: 600px;
margin-inline: auto;
}

.opc-register-shell:has(.opc-wizard-step[data-step="3"].is-active) {
max-width: 720px;
}


.opc-auth-heading {
text-align: center;
max-width: 30rem;
margin: 0 auto 1.25rem;
}
.opc-auth-heading h1 {
margin: 0 0 .35rem;
font-size: 1.6rem;
font-weight: 700;
color: var(--opc-text);
}
.opc-auth-heading p {
margin: 0;
font-size: .95rem;
color: var(--opc-text-faint);
}


.opc-reg-complete-steps {
margin: 0;
padding-left: 1.25rem;
display: grid;
gap: .6rem;
font-size: .95rem;
color: var(--opc-text);
}
.opc-reg-complete-steps li::marker {
color: var(--opc-primary);
font-weight: 700;
}
.opc-reg-complete-note {
margin: 1rem 0 0;
font-size: .875rem;
color: var(--opc-text-faint);
}

.opc-reg-complete-actions {
margin-top: 1.25rem;
display: flex;
justify-content: center;
}
@media (max-width: 575.98px) {
.opc-reg-complete-actions .btn {
width: 100%;
}
}


.opc-stepper {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 0;
list-style: none;
margin: 0 auto 1rem;
padding: 0;
max-width: 26rem;
}
.opc-stepper-step {
display: flex;
flex-direction: column;
align-items: center;
gap: .3rem;
flex: 1 1 0;
min-width: 0;
position: relative;
}

.opc-stepper-step:not(:first-child)::before {
content: '';
position: absolute;
top: .7rem;
right: 50%;
width: 100%;
height: 2px;
background: var(--opc-border);
z-index: 0;
}
.opc-stepper-step.is-done:not(:first-child)::before {
background: var(--opc-primary);
}
.opc-stepper-num {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 1.4rem;
height: 1.4rem;
border-radius: 50%;
font-size: .75rem;
font-weight: 700;
background: var(--opc-surface);
border: 2px solid var(--opc-border);
color: var(--opc-text-faint);
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.opc-stepper-step.is-active .opc-stepper-num {
border-color: var(--opc-primary);
color: var(--opc-primary);
}

.opc-stepper-step.is-done .opc-stepper-num {
background: var(--opc-primary);
border-color: var(--opc-primary);
color: transparent;
}
.opc-stepper-step.is-done .opc-stepper-num::after {
content: '\2713';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--opc-primary-contrast);
font-size: .7rem;
font-weight: 700;
}
.opc-stepper-label {
font-size: .7rem;
color: var(--opc-text-faint);
white-space: nowrap;
}
.opc-stepper-step.is-active .opc-stepper-label {
color: var(--opc-text);
font-weight: 600;
}
@media (max-width: 420px) {

.opc-stepper-label {
display: none;
}
}


.opc-wizard {
padding: 0;
}


.opc-wizard-step {
animation: opc-wizard-step-enter .2s ease-out;
}
@keyframes opc-wizard-step-enter {
from { opacity: 0; }
to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.opc-wizard-step {
animation: none;
}
}
.opc-step-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
padding: 1.5rem 0 0;
margin-top: 1.5rem;
}
@media (max-width: 575.98px) {
.opc-step-nav {
flex-direction: column-reverse;
}
.opc-step-nav .btn {
width: 100%;
}
}


.opc-review-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.75rem;
}
@media (min-width: 700px) {
.opc-review-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
align-items: start;
}
.opc-review-col-identity {
padding-right: 1.75rem;
border-right: 1px solid var(--opc-border-light);
}
}

.opc-review-col-identity > .opc-edit-section,
.opc-review-col-action > .opc-edit-section {
padding-top: 0;
padding-bottom: 0;
}

.opc-review-col-identity .opc-edit-field,
.opc-review-col-action .opc-edit-field {
margin-bottom: 0;
}
.opc-review-col-action {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.opc-review-col-action .opc-consent-card {
margin-top: 0;
padding-top: 0;
border-top: none;
}

.opc-step-nav-review {
margin-top: 1.75rem;
padding-top: 0;
}

.opc-step-back,
.opc-register-submit {
min-width: 14rem;
}


.opc-review-summary {
margin: 0;
display: flex;
flex-direction: column;
gap: .6rem;
}
.opc-review-row {
display: flex;
justify-content: space-between;
gap: 1rem;
}
.opc-review-row dt {
font-size: .8rem;
color: var(--opc-text-faint);
}
.opc-review-row dd {
margin: 0;
font-weight: 600;
color: var(--opc-text);
text-align: right;
overflow-wrap: anywhere;
}


.opc-field-error {
margin: .3rem 0 0;
font-size: .8125rem;
color: var(--opc-danger);
}
.form-control.is-invalid,
.form-check-input.is-invalid {
border-color: var(--opc-danger) !important;
box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--opc-danger) 20%, transparent) !important;
}


.opc-inline-link {
background: none;
border: none;
padding: 0;
margin: 0;
font: inherit;
color: var(--opc-primary);
text-decoration: underline;
cursor: pointer;
}


.opc-policy-dialog {
width: 100%;
max-width: 720px;
display: flex;
flex-direction: column;

max-height: min(82vh, 900px);
}

.opc-policy-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex: 0 0 auto;
}

.opc-policy-body {
flex: 1 1 auto;
overflow-y: auto;

-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding: 1.25rem;
line-height: 1.6;
color: var(--opc-text);
}


.opc-policy-content > :first-child { margin-top: 0; }
.opc-policy-content > :last-child { margin-bottom: 0; }
.opc-policy-content h1,
.opc-policy-content h2,
.opc-policy-content h3,
.opc-policy-content h4 {
color: var(--opc-text);
font-weight: 600;
line-height: 1.3;
margin: 1.5rem 0 .6rem;
}
.opc-policy-content h1 { font-size: 1.3rem; }
.opc-policy-content h2 { font-size: 1.15rem; }
.opc-policy-content h3 { font-size: 1.05rem; }
.opc-policy-content h4 { font-size: 1rem; }
.opc-policy-content p,
.opc-policy-content li { font-size: .95rem; }
.opc-policy-content ul,
.opc-policy-content ol { padding-left: 1.35rem; }
.opc-policy-content li { margin-bottom: .35rem; }
.opc-policy-content a {
color: var(--opc-primary);
text-decoration: underline;
}
.opc-policy-content img {
max-width: 100%;
height: auto;
}

.opc-policy-content table {
display: block;
max-width: 100%;
overflow-x: auto;
font-size: .9rem;
}

.opc-policy-loading,
.opc-policy-error {
margin: 0;
padding: 2rem 0;
text-align: center;
color: var(--opc-text-muted);
}


.opc-policy-sentinel {
height: 1px;
margin-top: .5rem;
}

.opc-policy-footer {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}

.opc-policy-hint {
margin: 0;
font-size: .85rem;
color: var(--opc-text-muted);
flex: 1 1 12rem;
}

.opc-policy-close:disabled,
.opc-policy-x:disabled {
opacity: .5;
cursor: not-allowed;
}


@keyframes opc-policy-nudge {
0%, 100% { transform: translateX(0); }
25%      { transform: translateX(-4px); }
75%      { transform: translateX(4px); }
}
.opc-policy-modal.is-nudging .opc-policy-footer {
animation: opc-policy-nudge .4s ease;
}
@media (prefers-reduced-motion: reduce) {
.opc-policy-modal.is-nudging .opc-policy-footer { animation: none; }
}


.opc-consent-check.needs-read .opc-policy-link::after,
.opc-consent-row.needs-read .opc-policy-link::after {
content: "";
display: inline-block;
width: .4rem;
height: .4rem;
margin-left: .3rem;
vertical-align: middle;
border-radius: 50%;
background: var(--opc-primary);
}


.opc-policy-link {
background: none;
border: 0;
padding: 0;
font: inherit;
color: var(--opc-primary);
text-decoration: underline;
cursor: pointer;
}
.opc-policy-link:hover,
.opc-policy-link:focus-visible {
color: var(--opc-primary-dark, var(--opc-primary));
}


@media (max-width: 575.98px) {
.opc-policy-modal {
padding: 0;
align-items: stretch;
}
.opc-policy-dialog {
max-width: none;
max-height: none;
height: 100%;
border-radius: 0;
}
.opc-policy-body {
padding: 1rem;
}
.opc-policy-footer {

padding-bottom: max(.75rem, env(safe-area-inset-bottom));
}
.opc-policy-footer .opc-policy-close {
width: 100%;
}
.opc-policy-hint {
flex-basis: 100%;
text-align: center;
}
}


.opc-auth-switch {
text-align: center;
margin: 1.25rem 0 0;
font-size: .9rem;
color: var(--opc-text-faint);
display: none;
}
.opc-auth-switch a {

color: inherit;
font-weight: 700;
text-decoration: underline;
text-underline-offset: .15em;
}


.opc-register-page .opc-edit-grid {
grid-template-columns: 1fr;
}

.opc-register-page .opc-edit-section {
padding-left: 0;
padding-right: 0;
border-bottom: none;
}


.opc-register-page .form-control,
.opc-register-page .form-select,
.opc-login-page .form-control,
.opc-login-page .form-select {
min-height: 3rem;

padding-top: .5rem;
padding-bottom: .5rem;
font-size: 1rem !important;
color: var(--opc-text) !important;
}

.opc-register-page .form-control,
.opc-register-page .form-select {
font-size: 1.0625rem !important;
}




.opc-register-page .opc-edit-field,
.opc-login-page .opc-edit-field {

position: relative;
margin-bottom: 1rem;
}

.opc-register-page .opc-edit-field {
margin-bottom: 1.5rem;
}

.opc-register-page input[type="password"]::-ms-reveal,
.opc-register-page input[type="password"]::-ms-clear,
.opc-profile-page input[type="password"]::-ms-reveal,
.opc-profile-page input[type="password"]::-ms-clear {
display: none;
}

.opc-login-page .control-group {
position: relative;
margin-bottom: 1rem;
}


.opc-register-page .opc-edit-field .form-label,
.opc-register-fields .opc-edit-field .control-label label,
.opc-login-page .control-group .control-label label,
.opc-login-page .opc-edit-field .form-label {
display: block;
margin: 0 0 .35rem;
padding: 0;
font-size: .8125rem;
font-weight: 500;
line-height: 1.3;
color: var(--opc-text-faint);
}

.opc-register-page .opc-edit-field .form-label {
font-size: .9rem;
}


.opc-register-fields .opc-edit-field .control-label,
.opc-login-page .control-group .control-label {
margin: 0;
}


.opc-password1-field [id$="-rules"],
[data-opc-pw-field] [id$="-rules"] {
display: none;
}


.opc-ambient-bg {
position: fixed;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
.opc-ambient-bg span {
position: absolute;
width: 42vmax;
height: 42vmax;
border-radius: 50%;
filter: blur(70px);
opacity: .28;
will-change: transform;
}
[data-bs-theme="dark"] .opc-ambient-bg span {
opacity: .16;
}
.opc-ambient-bg span:nth-child(1) {
top: -18vmax;
left: -12vmax;
background: var(--opc-primary);
animation: opc-orb-drift-a 26s ease-in-out infinite;
}
.opc-ambient-bg span:nth-child(2) {
bottom: -20vmax;
right: -14vmax;
background: var(--opc-primary);
animation: opc-orb-drift-b 32s ease-in-out infinite;
}
.opc-ambient-bg span:nth-child(3) {
top: 40%;
left: 60%;
width: 30vmax;
height: 30vmax;
background: var(--opc-success, #2e9e57);
animation: opc-orb-drift-c 22s ease-in-out infinite;
}
@keyframes opc-orb-drift-a {
0%, 100% { transform: translate(0, 0) scale(1); }
50%      { transform: translate(6vmax, 8vmax) scale(1.12); }
}
@keyframes opc-orb-drift-b {
0%, 100% { transform: translate(0, 0) scale(1); }
50%      { transform: translate(-7vmax, -5vmax) scale(1.08); }
}
@keyframes opc-orb-drift-c {
0%, 100% { transform: translate(0, 0) scale(1); }
50%      { transform: translate(-5vmax, 6vmax) scale(.92); }
}
@media (prefers-reduced-motion: reduce) {
.opc-ambient-bg span {
animation: none;
}
}

@media (max-width: 480px) {
.opc-ambient-bg {
display: none;
}
}

.opc-register-page .opc-ambient-bg span {
opacity: .16;
}
[data-bs-theme="dark"] .opc-register-page .opc-ambient-bg span {
opacity: .09;
}


@keyframes opc-field-enter {
from { opacity: 0; transform: translateY(14px); }
to   { opacity: 1; transform: none; }
}
.opc-register-fields > .opc-field-pair,
.opc-register-fields > .opc-edit-field,
.opc-register-fields > .opc-pw-checklist-wrap,
.opc-consent-card,
.opc-register-page .opc-edit-actions-bottom,
.com-users-login__input > .control-group,
.com-users-login__remember,
.com-users-login__submit {
animation: opc-field-enter .5s cubic-bezier(.16, 1, .3, 1) backwards;
}
.opc-register-fields > :nth-child(1) { animation-delay: .02s; }
.opc-register-fields > :nth-child(2) { animation-delay: .08s; }
.opc-register-fields > :nth-child(3) { animation-delay: .14s; }
.opc-register-fields > :nth-child(4) { animation-delay: .20s; }
.opc-register-fields > :nth-child(5) { animation-delay: .26s; }
.opc-register-fields > :nth-child(6) { animation-delay: .32s; }
.opc-register-fields > :nth-child(n+7) { animation-delay: .36s; }
.opc-consent-card                     { animation-delay: .40s; }
.opc-register-page .opc-edit-actions-bottom { animation-delay: .46s; }
.com-users-login__input > :nth-child(1) { animation-delay: .02s; }
.com-users-login__input > :nth-child(2) { animation-delay: .1s; }
.com-users-login__remember              { animation-delay: .18s; }
.com-users-login__submit                { animation-delay: .26s; }
.opc-login-fields                       { animation: opc-field-enter .45s cubic-bezier(.16, 1, .3, 1) backwards; }
.opc-login-remind                       { animation: opc-field-enter .45s cubic-bezier(.16, 1, .3, 1) .32s backwards; }
@media (prefers-reduced-motion: reduce) {
.opc-register-fields > .opc-field-pair,
.opc-register-fields > .opc-edit-field,
.opc-register-fields > .opc-pw-checklist-wrap,
.opc-consent-card,
.opc-register-page .opc-edit-actions-bottom,
.com-users-login__input > .control-group,
.com-users-login__remember,
.com-users-login__submit,
.opc-login-fields,
.opc-login-remind {
animation: none;
}
}


.opc-login-page {
max-width: 460px;
margin-inline: auto;
}
.opc-login-page .com-users-login__input .control-group {
margin-bottom: 1rem;
}

.opc-login-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin: .25rem 0 1.1rem;
}
.opc-login-page .com-users-login__remember {
margin: 0;
}
.opc-login-page .com-users-login__remember .form-check-input:checked {
background-color: var(--opc-primary);
border-color: var(--opc-primary);
}
.opc-login-forgot {
font-size: .875rem;
color: var(--opc-primary);
white-space: nowrap;
}
.opc-login-submit {
width: 100%;
min-height: 2.75rem;
}
.opc-login-page .com-users-login__submit + .com-users-login__submit {
margin-top: .5rem;
}

.opc-login-remind {
margin: .9rem 0 0;
text-align: center;
font-size: .8125rem;
}
.opc-login-remind a {
color: var(--opc-text-faint);
}
@media (max-width: 575.98px) {
.opc-login-page {
max-width: none;
}
}


.opc-consent-card {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--opc-border-light);
}

.opc-consent-title {
margin: 0 0 .75rem;
color: var(--opc-text);
font-weight: 600;
}

.opc-consent-check {
display: flex;
align-items: flex-start;
gap: .65rem;
margin: 0;
padding: .4rem 0;
min-height: 2.5rem;
}

.opc-consent-check + .opc-consent-check {
border-top: 1px solid color-mix(in srgb, var(--opc-primary) 14%, transparent);
}


.opc-consent-check .form-check-input {
float: none;
margin: .15rem 0 0;
flex: 0 0 auto;
width: 1.15rem;
height: 1.15rem;
}

.opc-consent-check .form-check-label {
padding-left: 0;
line-height: 1.45;
cursor: pointer;
}

.opc-consent-check .form-check-input.is-invalid {
border-color: var(--opc-danger);
box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--opc-danger) 25%, transparent);
}

.opc-consent-error {
margin: .6rem 0 0;
color: var(--opc-danger);
font-size: .875rem;
font-weight: 500;
}


.opc-pw-strength {
display: flex;
align-items: center;
gap: .6rem;
margin-top: -.35rem;
margin-bottom: .5rem;
}

.opc-pw-strength-track {
flex: 1 1 auto;
height: 5px;
border-radius: 999px;
background: var(--opc-border);
overflow: hidden;
}

.opc-pw-strength-bar {
display: block;
width: 0;
height: 100%;
border-radius: 999px;
background: var(--opc-danger);
transition: width .18s ease, background-color .18s ease;
}

.opc-pw-strength-label {
flex: 0 0 auto;
min-width: 4.5rem;
font-size: .8rem;
color: var(--opc-text-faint);
}

.opc-pw-strength[data-score="2"] .opc-pw-strength-bar { background: #d98324; }
.opc-pw-strength[data-score="3"] .opc-pw-strength-bar { background: #b0a02b; }
.opc-pw-strength[data-score="4"] .opc-pw-strength-bar { background: var(--opc-success, #2e9e57); }

@media (prefers-reduced-motion: reduce) {
.opc-pw-strength-bar { transition: none; }
}


.opc-inline-feedback {
margin: .3rem 0 0;
font-size: .8125rem;
min-height: 1.1em;
color: var(--opc-text-faint);
}


.opc-inline-feedback:empty {
margin: 0;
min-height: 0;
}

.opc-inline-feedback.is-ok  { color: var(--opc-success, #2e9e57); }
.opc-inline-feedback.is-bad { color: var(--opc-danger); }

.opc-required-note {
margin-top: .85rem;
font-size: .8125rem;
color: var(--opc-text-faint);
}


.opc-required-note-top {
margin: 0 0 1rem;
}


@media (max-width: 575.98px) {
.opc-register-page .opc-edit-actions-bottom {
display: flex;
flex-direction: column;
gap: .6rem;
}
.opc-register-page .opc-edit-actions-bottom .btn {
width: 100%;
}
.opc-consent-card {
padding: .9rem 1rem;
}
}





.opc-gate-callout {
margin-bottom: 1rem;
padding: .75rem .9rem;
border-radius: var(--opc-radius, .5rem);
}

.opc-gate-heading {
margin: 0 0 .2rem;
font-size: .95rem;
font-weight: 700;
line-height: 1.3;
}
.opc-gate-intro {
margin: 0 0 .4rem;
font-size: .875rem;
line-height: 1.35;
}
.opc-gate-list {
padding-left: 1.1rem;
font-size: .875rem;
line-height: 1.35;
}
.opc-gate-list li + li {
margin-top: .15rem;
}


.opc-address-search {
grid-column: 1 / -1;
}

.pac-container {
z-index: 2000;
background: var(--opc-surface, #fff);
border-radius: var(--opc-radius, .5rem);
box-shadow: var(--opc-shadow-lifted);
font-family: inherit;
}
.pac-item {
padding: .35rem .6rem;
color: var(--opc-text-faint);
border-top-color: var(--opc-border);
cursor: pointer;
}
.pac-item:hover,
.pac-item-selected {
background: var(--opc-surface-alt, rgba(0, 0, 0, .04));
}
.pac-item-query,
.pac-matched {
color: var(--opc-text);
}



.opc-consent-section {
padding-left: 2.85rem;
}
.opc-consent-row + .opc-consent-row {
margin-top: .35rem;
}
.opc-consent-row.is-outstanding {
padding: .6rem .75rem;
background: var(--opc-surface-alt, rgba(0, 0, 0, .03));
border: 1px solid var(--opc-border);
border-radius: var(--opc-radius, .5rem);
}
.opc-consent-row .form-check-input.is-invalid {
border-color: var(--opc-danger, #dc3545);
}
.opc-consent-done {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .4rem;
font-size: .9rem;
color: var(--opc-text-faint);
}
.opc-consent-tick::before {
content: "✓";
color: var(--opc-success, #198754);
font-weight: 700;
}
.opc-consent-date {
font-size: .8125rem;
color: var(--opc-text-faint);
}


.opc-comm-channel + .opc-comm-channel {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--opc-border);
}
.opc-comm-channel-title {
margin-bottom: .5rem;
color: var(--opc-text-faint);
text-transform: uppercase;
letter-spacing: .04em;
font-size: .75rem;
}

.opc-comm-group-title {
margin: .75rem 0 .1rem;
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--opc-text-soft);
}
.opc-comm-group-title-optional {
margin-top: 1rem;
}
.opc-comm-option {
padding-top: .4rem;
padding-bottom: .4rem;
}
.opc-comm-option .form-check-label {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .4rem;
}
.opc-comm-label {
font-weight: 600;
}

.opc-comm-required {
padding: .05rem .4rem;
font-size: .6875rem;
text-transform: uppercase;
letter-spacing: .03em;
color: var(--opc-text-faint);
background: var(--opc-surface-alt, rgba(0, 0, 0, .05));
border-radius: 999px;
}
.opc-comm-desc {
flex-basis: 100%;
font-size: .8125rem;
color: var(--opc-text-faint);
}


.opc-profile-section {
padding: 1rem 1.25rem;
border-top: 1px solid var(--opc-border);
}
.opc-profile-section-title {
margin: 0 0 .6rem;
font-size: .75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--opc-text-faint);
}

.opc-consent-pending {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .4rem;
font-size: .9rem;
}
.opc-consent-warn::before {
content: "!";
display: inline-block;
width: 1.05rem;
height: 1.05rem;
line-height: 1.05rem;
text-align: center;
font-weight: 700;
font-size: .75rem;
color: var(--opc-surface, #fff);
background: var(--opc-warning, #f0ad4e);
border-radius: 50%;
}
.opc-consent-action {
font-weight: 600;
}

.opc-comm-summary {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .5rem;
}
.opc-comm-summary + .opc-comm-summary {
margin-top: .5rem;
}
.opc-comm-summary-channel {
font-size: .8125rem;
font-weight: 600;
color: var(--opc-text-faint);
}
.opc-comm-summary-list {
display: flex;
flex-wrap: wrap;
gap: .35rem;
}
.opc-comm-pill {
padding: .1rem .5rem;
font-size: .75rem;
border-radius: 999px;
border: 1px solid var(--opc-border);
color: var(--opc-text-faint);
opacity: .55;
}
.opc-comm-pill.is-on {
opacity: 1;
color: var(--opc-text);
border-color: transparent;
background: var(--opc-surface-alt, rgba(0, 0, 0, .06));
}



.opc-edit-single {
display: flex;
flex-direction: column;
max-width: 34rem;
}




.opc-collapse {
padding: 0 1.25rem;
}
.opc-collapse > .opc-collapse-summary {
display: flex;
align-items: center;
gap: .75rem;

padding: .4rem 0;
cursor: pointer;
list-style: none;
}

.opc-collapse > .opc-collapse-summary::marker,
.opc-collapse > .opc-collapse-summary::-webkit-details-marker {
display: none;
content: "";
}
.opc-collapse > .opc-collapse-summary:focus-visible {
outline: 2px solid var(--opc-primary, #0d6efd);
outline-offset: 2px;
border-radius: var(--opc-radius, .5rem);
}
.opc-collapse-title {
font-size: .8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--opc-text-faint);
white-space: nowrap;
}

.opc-collapse-preview {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: .9rem;
color: var(--opc-text-faint);
}

.opc-collapse[open] > .opc-collapse-summary .opc-collapse-preview,
.opc-collapse[open] > .opc-collapse-summary .opc-address-preview {
display: none;
}

.opc-collapse-edit {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: .35rem;
font-size: .8125rem;
font-weight: 600;
color: var(--opc-primary);
white-space: nowrap;
}

.opc-collapse-paw {
flex: 0 0 auto;
margin-left: auto;
width: 1rem;
height: 1rem;
stroke: var(--opc-primary);
fill: none;
}

.opc-collapse[open] > .opc-collapse-summary .opc-collapse-paw {
fill: var(--opc-accent);
stroke: var(--opc-accent);
}

.opc-collapse-paw.is-bouncing {
animation: opc-paw-bounce .65s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes opc-paw-bounce {
0%, 100% { transform: scale(1) rotate(0); }
35% { transform: scale(1.5) rotate(-16deg); }
60% { transform: scale(.8) rotate(10deg); }
82% { transform: scale(1.12) rotate(-4deg); }
}
.opc-collapse-body {

padding-top: .5rem;
}
@media (prefers-reduced-motion: reduce) {
.opc-collapse-paw.is-bouncing {
animation: none;
}
}


.opc-address-summary {
align-items: flex-start;
}
.opc-address-preview {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
padding-top: .1rem;
}
.opc-address-line {
font-size: .9rem;
color: var(--opc-text);
line-height: 1.4;
}


.opc-field-pair {
display: flex;
flex-direction: row;
gap: .6rem;
}

.opc-field-pair > .opc-edit-field {
flex: 1 1 0;
min-width: 0;
}
@media (min-width: 576px) {
.opc-field-pair {
gap: 1rem;
}
}


.opc-phone-row {
display: flex;
align-items: stretch;
gap: .5rem;
}
.opc-phone-prefix {
flex: 0 0 auto;
display: flex;
align-items: center;
padding: 0 .75rem;
border: 1px solid var(--opc-border);
border-radius: var(--opc-radius, .6rem);
background: var(--opc-surface-sunken);
color: var(--opc-text-faint);
font-size: .9rem;
font-weight: 600;
white-space: nowrap;
}
.opc-phone-row .form-control {
flex: 1 1 auto;
min-width: 0;
}

.opc-register-fields > .opc-edit-field,
.opc-register-fields > .opc-pw-checklist-wrap,
.opc-register-fields > .opc-field-pair {
max-width: none;
}





.opc-profile-page:not(.is-editing) .opc-edit-only { display: none; }
.opc-profile-page.is-editing .opc-view-only { display: none; }

.opc-profile-page.is-editing .opc-profile-grid { display: none; }

.opc-profile-page.is-editing:not(.is-gated) .opc-logout-slot,
.opc-profile-page.is-editing:not(.is-gated) .opc-guide-fab,
.opc-profile-page.is-editing:not(.is-gated) .opc-portal-toggle {
display: none;
}



html.opc-edit-lock,
body.opc-edit-lock {
overflow: hidden;
}

.opc-profile-page.is-editing .opc-profile-card {
display: flex;
flex-direction: column;

margin-top: .5rem;

padding-bottom: 0;

position: sticky;
top: .5rem;
z-index: 20;

max-height: calc(100vh - 1rem);
max-height: calc(100dvh - 1rem);

overflow: hidden;
}

@media (max-width: 1199.98px) {
body:has(.opc-mobile-chrome) .opc-profile-page.is-editing .opc-profile-card {
max-height: calc(100vh - 1rem - 4rem - env(safe-area-inset-bottom));
max-height: calc(100dvh - 1rem - 4rem - env(safe-area-inset-bottom));
}
}
.opc-profile-page .opc-profile-banner {
flex-shrink: 0;
}
.opc-profile-page .opc-profile-card-header {

flex-shrink: 0;

flex-grow: 0;
}
.opc-profile-page.is-editing .opc-profile-card-header {

padding-top: .6rem;
padding-bottom: .5rem;

margin-top: 0;
}
.opc-profile-page.is-editing .opc-profile-avatar-img,
.opc-profile-page.is-editing .opc-profile-avatar {
width: 2.4rem;
height: 2.4rem;
}
.opc-profile-page.is-editing .opc-profile-avatar {
font-size: 1rem;
}
.opc-profile-page.is-editing .opc-profile-avatar-edit {
width: 1.15rem;
height: 1.15rem;
font-size: .6rem;
}
.opc-profile-page .opc-profile-scroll {

flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;

scrollbar-gutter: stable;
}

.opc-profile-page .opc-profile-scroll {
scrollbar-width: thin;
scrollbar-color: var(--opc-text-faint) var(--opc-surface-sunken);
}
.opc-profile-page .opc-profile-scroll::-webkit-scrollbar {
display: block;
width: 10px;
}
.opc-profile-page .opc-profile-scroll::-webkit-scrollbar-button {
display: none;
height: 0;
width: 0;
}
.opc-profile-page .opc-profile-scroll::-webkit-scrollbar-track {
background: var(--opc-surface-sunken);
}
.opc-profile-page .opc-profile-scroll::-webkit-scrollbar-thumb {
background-color: var(--opc-text-faint);
border-radius: 999px;
border: 2px solid var(--opc-surface-sunken);
background-clip: padding-box;
}
.opc-profile-page .opc-profile-scroll::-webkit-scrollbar-thumb:hover {
background-color: var(--opc-text-soft);
}


.opc-scroll-hint {
position: absolute;
left: 50%;
bottom: .85rem;
transform: translate(-50%, 6px);
z-index: 5;
display: flex;
align-items: center;
gap: .4rem;
padding: .4rem .85rem;
border-radius: 999px;

background: var(--opc-accent-tint, color-mix(in srgb, var(--opc-accent) 8%, var(--opc-surface)));
border: 1px solid color-mix(in srgb, var(--opc-accent) 35%, var(--opc-border));
color: var(--opc-accent);
font-size: .75rem;
font-weight: 700;
letter-spacing: .01em;
white-space: nowrap;
box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--opc-shadow-color) 25%, transparent),
0 2px 6px color-mix(in srgb, var(--opc-shadow-color) 30%, transparent);
pointer-events: none;
opacity: 0;
transition: opacity .2s ease, transform .2s ease;
}
.opc-scroll-hint.is-visible {
opacity: 1;
transform: translate(-50%, 0);
animation: opc-scroll-hint-bob 1.6s ease-in-out infinite;
}

.opc-profile-page.has-portal-toggle:not(.is-editing) .opc-scroll-hint {
left: 25%;
}
[data-bs-theme="dark"] .opc-scroll-hint {
background: var(--opc-primary-tint);
border-color: color-mix(in srgb, var(--opc-primary) 35%, var(--opc-border));
color: var(--opc-primary);
}
.opc-scroll-hint-chevron {
display: inline-block;
font-size: .65rem;
line-height: 1;
animation: opc-scroll-hint-chevron 1.6s ease-in-out infinite;
}
@keyframes opc-scroll-hint-bob {
0%, 100% { transform: translate(-50%, 0); }
50% { transform: translate(-50%, -4px); }
}
@keyframes opc-scroll-hint-chevron {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(2px); }
}
@media (prefers-reduced-motion: reduce) {
.opc-scroll-hint,
.opc-scroll-hint.is-visible {
animation: none;
transition: opacity .2s ease;
}
.opc-scroll-hint-chevron {
animation: none;
}
}

.opc-profile-page .opc-edit-section {
border-bottom: none;

padding: .4rem 1.25rem;
}


.opc-banner-picker {
position: relative;
display: flex;
align-items: stretch;
gap: .6rem;
height: 3rem;
}
.opc-banner-bar {

box-sizing: border-box;
flex: 1 1 0;
align-self: stretch;
min-width: 0;
max-height: 3rem;
line-height: 1;
margin: 0;
border-radius: var(--opc-shape);
border: 2px solid transparent;
cursor: pointer;
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-family: inherit;
font-size: .8rem;
font-weight: 700;
color: #fff;
text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
transition: flex-grow .28s cubic-bezier(.2, .8, .3, 1), border-color .15s ease, transform .15s ease;
overflow: hidden;
-webkit-user-select: none;
user-select: none;
padding: 0 .5rem;
}
.opc-banner-bar:active {
transform: scale(.98);
}
.opc-banner-bar:focus-visible {
outline: 2px solid var(--opc-primary);
outline-offset: 2px;
}
.opc-banner-bar-default {
background: var(--opc-gradient-primary);
}
.opc-banner-bar-default.is-selected {
border-color: var(--opc-surface);
box-shadow: 0 0 0 2px var(--opc-primary);
}
.opc-banner-bar-custom {
background: linear-gradient(
90deg,
hsl(0 90% 55%), hsl(60 90% 55%), hsl(120 90% 45%),
hsl(180 90% 45%), hsl(240 90% 60%), hsl(300 90% 55%), hsl(360 90% 55%)
);

touch-action: none;
}
.opc-banner-bar-custom.has-color {
background: var(--custom, var(--opc-gradient-primary));
}

.opc-banner-picker.is-expanded .opc-banner-bar-custom {
background: linear-gradient(
90deg,
hsl(0 90% 55%), hsl(60 90% 55%), hsl(120 90% 45%),
hsl(180 90% 45%), hsl(240 90% 60%), hsl(300 90% 55%), hsl(360 90% 55%)
);
}
.opc-banner-bar-custom.is-selected {
border-color: var(--opc-surface);
box-shadow: 0 0 0 2px var(--custom, var(--opc-primary));
}

.opc-banner-picker.is-expanded .opc-banner-bar-default {
flex-grow: 0;
width: 0;
min-width: 0;
padding: 0;
border: none;
opacity: 0;
pointer-events: none;
}
.opc-banner-picker.is-expanded .opc-banner-bar-custom {
flex-grow: 1;
}
.opc-banner-bar-label {
position: relative;
z-index: 2;
pointer-events: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: opacity .12s ease;
}
.opc-banner-picker.is-expanded .opc-banner-bar-custom .opc-banner-bar-label {
opacity: 0;
}
.opc-banner-hue-thumb {
position: absolute;
top: 50%;
left: 0;
width: 2.4rem;
height: 2.4rem;
border-radius: 50%;
background: #fff;
border: 3px solid var(--custom, var(--opc-primary));
box-shadow: 0 4px 12px color-mix(in srgb, var(--opc-shadow-color) 40%, transparent);
transform: translate(-50%, -50%);
pointer-events: none;
opacity: 0;
transition: opacity .15s ease;
z-index: 3;
}
.opc-banner-picker.is-expanded .opc-banner-hue-thumb {
opacity: 1;
}
.opc-banner-hint {
margin: .6rem 0 0;
font-size: .8125rem;
color: var(--opc-text-faint);
}

.opc-banner-swatches {
display: flex;
gap: .6rem;
margin-top: .6rem;
}
.opc-banner-swatch {
box-sizing: border-box;
width: 2.25rem;
height: 2.25rem;

border-radius: var(--opc-shape);
padding: 0;
cursor: pointer;
transition: box-shadow .15s ease, transform .15s ease;
}
.opc-banner-swatch:active {
transform: scale(.92);
}
.opc-banner-swatch:focus-visible {
outline: 2px solid var(--opc-primary);
outline-offset: 2px;
}
.opc-banner-swatch-black {
background: #000000;
border: 2px solid #000000;
}
.opc-banner-swatch.is-selected {
box-shadow: 0 0 0 2px var(--opc-primary);
}


.opc-list-row {
display: flex;
align-items: center;
gap: .75rem;
text-decoration: none;
color: inherit;
width: 100%;
}
a.opc-list-row:hover .opc-list-label,
button.opc-list-row:hover .opc-list-label {
text-decoration: underline;
}
.opc-list-icon {
width: 2.1rem;
height: 2.1rem;
border-radius: .6rem;
background: var(--opc-surface-sunken);
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
color: var(--opc-primary);
}
.opc-list-icon svg {
width: 1.05rem;
height: 1.05rem;
}
.opc-list-body {
flex: 1 1 auto;
min-width: 0;
}
.opc-list-label {
font-size: .9rem;
font-weight: 600;
color: var(--opc-text);
}
.opc-list-sub {
display: block;
font-size: .75rem;
color: var(--opc-text-faint);
margin-top: .1rem;
}

a.opc-consent-row.opc-list-row,
button.opc-consent-row.opc-list-row {
padding: .3rem 0;
}
button.opc-list-row {
background: none;
border: 0;
font: inherit;
text-align: left;
cursor: pointer;
}


.opc-pw-input-wrap {
position: relative;
display: block;
}
.opc-pw-input-wrap input[type="password"],
.opc-pw-input-wrap input[type="text"] {
padding-right: 2.4rem;
}
.opc-pw-eye {
position: absolute;
right: .4rem;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--opc-text-faint);
cursor: pointer;
padding: .3rem;
display: flex;
border-radius: .35rem;
}
.opc-pw-eye:hover {
color: var(--opc-text);
}
.opc-pw-eye svg {
width: 1rem;
height: 1rem;
}


.opc-search-clear-wrap {
position: relative;
display: block;
}
.opc-search-clear-wrap input[type="text"],
.opc-search-clear-wrap input[type="search"] {
padding-right: 2.4rem;
}
.opc-search-clear {
position: absolute;
right: .4rem;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--opc-text-faint);
cursor: pointer;
padding: .3rem;
display: flex;
border-radius: .35rem;
}
.opc-search-clear:hover {
color: var(--opc-text);
}
.opc-search-clear svg {
width: 1rem;
height: 1rem;
}


.opc-tour-backdrop {
position: fixed;
inset: 0;
background: rgba(10, 14, 26, .72);
z-index: 1300;

}
@supports not ((mask-image: none) or (-webkit-mask-image: none)) {
.opc-tour-backdrop {
background: rgba(10, 14, 26, .6);
}
}
body.opc-tour-open {
overflow: hidden;
}

.opc-tour-glow {
position: fixed;
z-index: 1301;
border-radius: 50%;

background: radial-gradient(circle,
rgba(255, 255, 255, 0) 0px,
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, .6) 55%,
rgba(255, 255, 255, .22) 75%,
rgba(255, 255, 255, 0) 100%);
mix-blend-mode: screen;
pointer-events: none;
animation: opc-tour-pulse 1.8s ease-in-out infinite;

}
@keyframes opc-tour-pulse {
0%, 100% { opacity: .85; transform: scale(1); }
50%      { opacity: 1; transform: scale(1.045); }
}
@media (prefers-reduced-motion: reduce) {
.opc-tour-glow {
animation: none;
}
}

.opc-tour-hit {
position: fixed;
z-index: 1302;
background: transparent;
border: 0;
border-radius: 50%;
padding: 0;
cursor: pointer;
}

.opc-tour-card-controls {
display: flex;
align-items: center;
justify-content: space-between;
margin: -.15rem -.15rem .6rem;
}
.opc-tour-back {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.9rem;
height: 1.9rem;
background: rgba(255, 255, 255, .14);
border: 0;
border-radius: var(--opc-shape);
color: #fff;
cursor: pointer;
}
.opc-tour-back svg {
width: 16px;
height: 16px;
}
.opc-tour-back[hidden] {
visibility: hidden;
}
.opc-tour-skip {
margin-left: auto;
padding: 0;
background: none;
border: 0;
font-size: .75rem;
font-weight: 600;
letter-spacing: .01em;
text-transform: uppercase;
color: #fff;
text-decoration: underline;
cursor: pointer;
}
.opc-tour-skip:hover,
.opc-tour-skip:focus-visible {
color: rgba(255, 255, 255, .8);
}

.opc-tour-card {
position: fixed;
z-index: 1303;
width: min(300px, calc(100vw - 24px));
background: rgba(15, 18, 28, .92);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #fff;
border-radius: var(--opc-radius-lg);
box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .5);
padding: 1rem 1.1rem;

transition: top .32s cubic-bezier(.33, 1, .68, 1), left .32s cubic-bezier(.33, 1, .68, 1);
}
@media (prefers-reduced-motion: reduce) {
.opc-tour-card {
transition: none;
}
}
.opc-tour-card-title,
.opc-tour-card-body {

transition: opacity .13s ease;
}
@media (prefers-reduced-motion: reduce) {
.opc-tour-card-title,
.opc-tour-card-body {
transition: none;
}
}
.opc-tour-card-title {
font-size: .95rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .01em;
margin: 0 0 .5rem;
}
.opc-tour-card-body {
font-size: .85rem;
line-height: 1.4;
color: rgba(255, 255, 255, .85);
margin: 0;
padding-left: .6rem;
border-left: 2px solid rgba(255, 255, 255, .3);
}

.opc-tour-card-step,
.opc-tour-card-hint {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}


.opc-tour-done-backdrop {
z-index: 1305;
background: rgba(6, 8, 16, .78);
}
.opc-tour-done-dialog {
max-width: 340px;
background: rgba(15, 18, 28, .95);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, .08);
border-radius: var(--opc-radius-lg);
box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .65);
}
.opc-tour-done-dialog .card-body {
padding: 2rem 1.5rem 1.5rem;
}
.opc-tour-done-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
margin: 0 auto 1rem;
border-radius: 50%;
background: var(--opc-gradient-primary);
color: #fff;
}
.opc-tour-done-icon svg {
width: 22px;
height: 22px;
}
.opc-tour-done-dialog h3 {
color: #fff;
font-weight: 700;
font-size: 1.15rem;
}
.opc-tour-done-dialog p {
color: rgba(255, 255, 255, .78);
font-size: .87rem;
line-height: 1.45;
}
.opc-tour-done-dialog .btn-primary {
min-width: 8rem;
}


.opc-guide-fab {
position: absolute;
left: .85rem;
bottom: .85rem;
width: 2.75rem;
height: 2.75rem;
min-width: 2.75rem;
min-height: 2.75rem;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: var(--opc-shape);
background: var(--opc-primary);
color: var(--opc-primary-contrast);
box-shadow: var(--opc-shadow-lifted);
cursor: pointer;
z-index: 2;
}
.opc-guide-fab svg {
width: 1.15rem;
height: 1.15rem;
}
.opc-guide-fab:hover,
.opc-guide-fab:focus-visible {
background: color-mix(in srgb, var(--opc-primary) 85%, black);
}


.opc-portal-toggle {
position: absolute;
right: .85rem;
bottom: .85rem;
z-index: 2;
display: flex;
align-items: center;
gap: .4rem;
background: var(--opc-surface);
border: 1px solid var(--opc-border);
border-radius: var(--opc-shape);
padding: .3rem .3rem .3rem .75rem;
box-shadow: var(--opc-shadow-lifted);
}
.opc-portal-toggle-label {
font-size: .75rem;
font-weight: 600;
color: var(--opc-text-soft);
white-space: nowrap;
}

.opc-portal-toggle-btn {
border: none;
border-radius: var(--opc-shape);
color: var(--opc-primary-contrast);
font-size: .72rem;
font-weight: 600;
padding: .35rem .75rem;
cursor: pointer;
white-space: nowrap;
}
.opc-portal-toggle-btn.is-manager-mode {
background: var(--opc-primary);
}
.opc-portal-toggle-btn.is-manager-mode:hover,
.opc-portal-toggle-btn.is-manager-mode:focus-visible {
background: color-mix(in srgb, var(--opc-primary) 85%, black);
}
.opc-portal-toggle-btn.is-client-mode {
background: var(--opc-accent);
}
.opc-portal-toggle-btn.is-client-mode:hover,
.opc-portal-toggle-btn.is-client-mode:focus-visible {
background: color-mix(in srgb, var(--opc-accent) 85%, black);
}
@media (max-width: 420px) {
.opc-portal-toggle-label { display: none; }
}


.opc-manager-mode-ring {
position: fixed;
inset: 0;
z-index: 100000;
pointer-events: none;
padding: 4px;

border-radius: var(--opc-radius-lg);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
overflow: hidden;

}

@media (max-width: 1199.98px) {
.opc-manager-mode-ring {
padding: 3px;
border-radius: 0 0 var(--opc-radius-lg) var(--opc-radius-lg);
}
}
.opc-manager-mode-ring::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 140vmax;
height: 140vmax;
margin-top: -70vmax;
margin-left: -70vmax;

will-change: transform;

background: conic-gradient(from 45deg, var(--opc-primary) 0%, var(--opc-accent) 50%, var(--opc-primary) 100%);
animation: opc-manager-ring-spin 5s linear infinite;
}
@keyframes opc-manager-ring-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.opc-manager-mode-ring::before {
animation: none;
}
}

.opc-manager-mode-avatar-ring {
position: absolute;
inset: -4px;
border-radius: 50%;
pointer-events: none;
padding: 3px;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
overflow: hidden;
}
.opc-manager-mode-avatar-ring::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 200%;
height: 200%;
margin-top: -100%;
margin-left: -100%;
background: conic-gradient(from 45deg, var(--opc-primary) 0%, var(--opc-accent) 50%, var(--opc-primary) 100%);
animation: opc-manager-ring-spin 5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.opc-manager-mode-avatar-ring::before {
animation: none;
}
}


.opc-checkout-error {
border: 1px solid var(--opc-danger);
border-left-width: 4px;
border-radius: var(--opc-radius, .5rem);
background: color-mix(in srgb, var(--opc-danger) 8%, var(--opc-surface));
color: var(--opc-body-color, inherit);
padding: .75rem 1rem;
}
.opc-checkout-error ul {
padding-left: 1.1rem;
}



#hcc-month-label {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 6.5rem;
min-height: var(--opc-btn-height);
padding: 0 var(--opc-btn-padding-x);
border: 1px solid var(--opc-border);
border-radius: var(--bs-border-radius, .375rem);
background: var(--opc-surface);
font-size: var(--opc-btn-font-size);
text-align: center;
}


:root {
--opc-footer-height: 2.25rem;
}
.footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1040; 
height: var(--opc-footer-height);
display: flex;
align-items: center;
overflow: hidden;

background-color: var(--big_goose-color-primary);
background-image: linear-gradient(135deg, var(--big_goose-color-primary) 0%, var(--big_goose-color-hover) 100%);

color: var(--opc-text);

transform: translateY(0);
transition: transform .25s ease;
}
.footer.opc-footer-hidden {
transform: translateY(100%);
}
.footer .grid-child {
width: 100%;
padding-top: 0;
padding-bottom: 0;
color: var(--opc-text);
}
.footer a {
color: var(--opc-text);
text-decoration: underline;
}
body {
padding-bottom: var(--opc-footer-height);
}


@media (max-width: 1199.98px) {
body:has(.opc-mobile-chrome) .footer {
bottom: var(--opc-mobilebar-height);
}
}
html[data-force-mobile] body:has(.opc-mobile-chrome) .footer {
bottom: var(--opc-mobilebar-height);
}


.opc-store-card-stock {
min-height: 1.5rem;
margin-bottom: .25rem;
line-height: 1.5rem;
}


.opc-pinned-panel {
display: flex;
flex-direction: column;
position: sticky;
top: .5rem;
z-index: 5;
max-height: calc(100vh - 1rem);
max-height: calc(100dvh - 1rem);

}
@media (max-width: 1199.98px) {
body:has(.opc-mobile-chrome) .opc-pinned-panel {
max-height: calc(100vh - 1rem - var(--opc-mobilebar-height, 0px) - env(safe-area-inset-bottom, 0px));
max-height: calc(100dvh - 1rem - var(--opc-mobilebar-height, 0px) - env(safe-area-inset-bottom, 0px));
}
}
.opc-pinned-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
scrollbar-gutter: stable;
}
html.opc-pinned-lock,
body.opc-pinned-lock {
overflow: hidden;
}


.hcc-aq-readout {
display: flex;
flex-direction: column;
}
.hcc-aq-row {
padding: .65rem 0;
border-bottom: 1px solid var(--opc-border-light);
}
.hcc-aq-row:last-child {
border-bottom: none;
}

.hcc-aq-child {
margin-left: 1.25rem;
padding-left: .85rem;
border-left: 2px solid var(--opc-border);
}
.hcc-aq-q {
font-weight: 600;
color: var(--opc-text);
margin-bottom: .3rem;
}
.hcc-aq-num {
color: var(--opc-text-faint);
font-variant-numeric: tabular-nums;
margin-right: .35rem;
}
.hcc-aq-a {
color: var(--opc-text-soft);
white-space: pre-wrap;
}
.hcc-aq-a.hcc-aq-empty {
font-style: italic;
color: var(--opc-text-faint);
}


[hidden] {
display: none !important;
}


.opc-customer-contacts {
min-width: 0;
}

.opc-contact-line {
display: flex;
align-items: center;
justify-content: flex-end;
gap: .375rem;
min-width: 0;
}


.opc-contact-line > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.opc-contact-icon {
flex: 0 0 auto;
width: 14px;
height: 14px;
}

.opc-contact-icon-phone {
color: var(--opc-muted);
}


.opc-contact-icon-emergency {
color: var(--opc-danger);
animation: opc-siren-flash 1.6s ease-in-out infinite;
}

@keyframes opc-siren-flash {
0%, 100% { opacity: 1; }
50%      { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
.opc-contact-icon-emergency {
animation: none;
}
}

.opc-contact-icon-vet {
color: var(--opc-accent);
}


.opc-install-prompt {
position: fixed;
left: .75rem;
right: .75rem;
bottom: calc(var(--opc-mobilebar-height, 0px) + var(--opc-footer-height, 0px) + .75rem);
z-index: 1060; 
display: flex;
align-items: center;
gap: .75rem;
padding: .75rem .875rem;
background: var(--opc-surface);
border: 1px solid var(--opc-border);
border-radius: var(--opc-radius-lg);
box-shadow: var(--opc-shadow-lifted);


transform: translateY(calc(100% + 1.5rem));
opacity: 0;
pointer-events: none;
transition: transform .32s cubic-bezier(.22, 1, .36, 1), opacity .32s ease;
}


body:not(:has(.opc-mobile-chrome)) .opc-install-prompt {
bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
}

.opc-install-prompt.is-visible {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
.opc-install-prompt {
transition: opacity .2s ease;
transform: none;
}
}


@media (min-width: 576px) {
.opc-install-prompt {
left: auto;
right: 1rem;
width: 25rem;
}
}

.opc-install-prompt-icon {
flex: 0 0 auto;
width: 2.75rem;
height: 2.75rem;
border-radius: var(--opc-radius);
object-fit: contain;
background: var(--opc-surface-alt);
}

.opc-install-prompt-text {
flex: 1 1 auto;
min-width: 0; 
display: flex;
flex-direction: column;
gap: .125rem;
}

.opc-install-prompt-title {
font-weight: 600;
font-size: .9375rem;
line-height: 1.3;
color: var(--opc-text);
}

.opc-install-prompt-sub {
font-size: .8125rem;
line-height: 1.35;
color: var(--opc-text-muted);
}

.opc-install-prompt-sub:empty {
display: none;
}

.opc-install-prompt-steps {
margin: .375rem 0 0;
font-size: .8125rem;
line-height: 1.5;
color: var(--opc-text-muted);
}

.opc-install-prompt-steps strong {
color: var(--opc-text);
font-weight: 600;
white-space: nowrap; 
}


.opc-install-prompt-glyph {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
margin: 0 .0625rem;
vertical-align: -.375rem;
border-radius: var(--opc-radius-sm);
background: var(--opc-primary-tint);
color: var(--opc-primary);
}

.opc-install-prompt-close {
flex: 0 0 auto;
align-self: flex-start;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
padding: 0;
border: 0;
border-radius: var(--opc-shape);
background: transparent;
color: var(--opc-text-faint);
cursor: pointer;
transition: background .18s ease, color .18s ease;
}

.opc-install-prompt-close:hover,
.opc-install-prompt-close:focus-visible {
background: var(--opc-surface-alt);
color: var(--opc-text);
}