/**
 * HD Bookmark Styles
 */

.hd-bookmark-theme-current,
.hd-bookmark-container {
--hd-bookmark-accent: var(--hd-bookmark-color, #e11d48);
--hd-bookmark-accent-soft: rgba(225, 29, 72, 0.08);
--hd-bookmark-accent-ring: rgba(225, 29, 72, 0.24);
--hd-bookmark-surface: #fff;
--hd-bookmark-surface-muted: #f8fafc;
--hd-bookmark-border: rgba(226, 232, 240, 0.92);
--hd-bookmark-ink: #0f172a;
--hd-bookmark-muted: #64748b;
--hd-bookmark-radius: 18px;
--hd-bookmark-radius-lg: 28px;
--hd-bookmark-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

/* ===== Bookmark Button ===== */
.hd-bookmark-wrapper {
margin: 1.5rem 0;
display: flex;
justify-content: center;
}

.hd-bookmark-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border: 2px solid var(--hd-bookmark-accent, var(--hd-bookmark-color, #e11d48));
border-radius: 50px;
background: var(--hd-btn-bg, transparent);
color: var(--hd-text-color, var(--hd-bookmark-accent, var(--hd-bookmark-color, #e11d48)));
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.hd-bookmark-btn:hover {
background: var(--hd-bookmark-accent, var(--hd-bookmark-color, #e11d48));
color: #fff;
box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);
}

.hd-bookmark-btn:focus-visible,
.hd-bookmark-collection-link:focus-visible,
.hd-bookmark-remove:focus-visible {
outline: 3px solid var(--hd-bookmark-accent-ring, rgba(225, 29, 72, 0.24));
outline-offset: 3px;
}

.hd-bookmark-btn.is-processing,
.hd-bookmark-btn[aria-busy="true"] {
opacity: 0.62;
cursor: wait;
pointer-events: none;
}

.hd-bookmark-btn:disabled,
.hd-bookmark-btn.is-disabled,
.hd-bookmark-btn[aria-disabled="true"] {
opacity: 0.48;
cursor: not-allowed;
pointer-events: none;
}

.hd-bookmark-btn.is-error,
.hd-bookmark-remove.is-error {
border-color: #dc2626;
background: rgba(220, 38, 38, 0.1);
color: #b91c1c;
}

.hd-bookmark-btn.is-bookmarked {
background: var(--hd-bookmark-accent, var(--hd-bookmark-color, #e11d48));
color: #fff;
}

.hd-bookmark-btn.is-bookmarked:hover {
background: transparent;
color: var(--hd-bookmark-accent, var(--hd-bookmark-color, #e11d48));
}

.hd-bookmark-icon {
display: flex;
align-items: center;
justify-content: center;
}

.hd-bookmark-icon svg {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
}

.hd-bookmark-btn.is-bookmarked .hd-bookmark-icon svg {
fill: currentColor;
}

.hd-bookmark-btn:hover .hd-bookmark-icon svg {
transform: scale(1.1);
}

.hd-bookmark-btn.is-processing .hd-bookmark-icon svg {
animation: hd-bookmark-soft-pulse 0.85s ease-in-out infinite;
}

@keyframes hd-bookmark-soft-pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(0.86);
}
}

/* ===== Size Variants ===== */
/* Small */
.hd-bookmark-wrapper.size-small .hd-bookmark-btn,
.hd-bookmark-collection-link.size-small {
padding: 6px 12px;
font-size: 12px;
gap: 4px;
}
.hd-bookmark-wrapper.size-small .hd-bookmark-icon svg,
.hd-bookmark-collection-link.size-small svg {
width: 14px;
height: 14px;
}

/* Medium (default) */
.hd-bookmark-wrapper.size-medium .hd-bookmark-btn,
.hd-bookmark-collection-link.size-medium {
padding: 10px 20px;
font-size: 14px;
gap: 6px;
}
.hd-bookmark-wrapper.size-medium .hd-bookmark-icon svg,
.hd-bookmark-collection-link.size-medium svg {
width: 18px;
height: 18px;
}

/* Large */
.hd-bookmark-wrapper.size-large .hd-bookmark-btn,
.hd-bookmark-collection-link.size-large {
padding: 14px 28px;
font-size: 16px;
gap: 8px;
}
.hd-bookmark-wrapper.size-large .hd-bookmark-icon svg,
.hd-bookmark-collection-link.size-large svg {
width: 22px;
height: 22px;
}

/* ===== Prefix Text & Background Wrapper ===== */
.hd-bookmark-prefix-wrapper {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
}

.hd-bookmark-prefix-text {
color: var(--hd-prefix-color, var(--hd-text-color, var(--hd-bookmark-accent, var(--hd-bookmark-color, #e11d48))));
font-size: 14px;
font-weight: 500;
}

.hd-bookmark-prefix-separator {
display: inline-block;
margin: 0 8px;
}

.hd-bookmark-prefix-separator--line {
opacity: .5;
}

.hd-bookmark-prefix-separator--colon {
margin-left: 0;
}

/* With Background */
.hd-bookmark-prefix-wrapper.has-background {
background: var(--hd-bookmark-bg, var(--hd-bookmark-accent-soft, rgba(225, 29, 72, 0.08)));
padding: 16px 24px;
border-radius: 12px;
margin: 1.5rem 0;
}

.hd-bookmark-prefix-wrapper.has-background .hd-bookmark-wrapper {
margin: 0;
}

/* ===== Collection Link ===== */
.hd-bookmark-collection-link,
#si-single-content .hd-bookmark-collection-link,
.entry-content .hd-bookmark-collection-link,
a.hd-bookmark-collection-link {
display: inline-flex;
align-items: center;
box-sizing: border-box;
gap: 8px;
padding: 12px 24px;
border: 2px solid var(--hd-bookmark-accent, var(--hd-bookmark-color, #e11d48)) ;
border-radius: 50px;
background: var(--hd-btn-bg, transparent);
color: var(--hd-text-color, var(--hd-bookmark-accent, var(--hd-bookmark-color, #e11d48))) ;
font-size: 16px;
font-weight: 500;
line-height: 1.25;
min-height: 48px;
text-decoration: none ;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.hd-bookmark-collection-link:hover,
#si-single-content .hd-bookmark-collection-link:hover,
.entry-content .hd-bookmark-collection-link:hover,
a.hd-bookmark-collection-link:hover {
background: var(--hd-bookmark-accent, var(--hd-bookmark-color, #e11d48)) ;
color: #fff ;
box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);
}

.hd-bookmark-collection-link svg {
display: block;
flex: 0 0 auto;
width: 20px;
height: 20px;
transition: transform 0.3s ease;
}

.hd-bookmark-collection-link:hover svg {
transform: scale(1.1);
}

/* ===== Size Classes ===== */
/* Small Size */
.hd-bookmark-wrapper.size-small .hd-bookmark-btn,
.size-small.hd-bookmark-collection-link,
#si-single-content .size-small.hd-bookmark-collection-link,
.entry-content .size-small.hd-bookmark-collection-link,
a.size-small.hd-bookmark-collection-link {
padding: 8px 10px ;
font-size: 12px ;
gap: 5px ;
min-height: 36px ;
}

.hd-bookmark-wrapper.size-small .hd-bookmark-icon svg,
.size-small.hd-bookmark-collection-link svg {
width: 16px ;
height: 16px ;
}

/* Medium Size (default) */
.hd-bookmark-wrapper.size-medium .hd-bookmark-btn,
.size-medium.hd-bookmark-collection-link,
#si-single-content .size-medium.hd-bookmark-collection-link,
.entry-content .size-medium.hd-bookmark-collection-link,
a.size-medium.hd-bookmark-collection-link {
padding: 12px 24px ;
font-size: 16px ;
gap: 8px ;
min-height: 48px ;
}

.hd-bookmark-wrapper.size-medium .hd-bookmark-icon svg,
.size-medium.hd-bookmark-collection-link svg {
width: 20px ;
height: 20px ;
}

/* Large Size */
.hd-bookmark-wrapper.size-large .hd-bookmark-btn,
.size-large.hd-bookmark-collection-link,
#si-single-content .size-large.hd-bookmark-collection-link,
.entry-content .size-large.hd-bookmark-collection-link,
a.size-large.hd-bookmark-collection-link {
padding: 16px 32px ;
font-size: 18px ;
gap: 10px ;
min-height: 58px ;
}

.hd-bookmark-wrapper.size-large .hd-bookmark-icon svg,
.size-large.hd-bookmark-collection-link svg {
width: 24px ;
height: 24px ;
}

/* Auto wrapper styles */
.hd-bookmark-auto-wrapper,
.hd-bookmark-shortcode-wrapper,
.isb-bookmark-wrapper {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin: 15px 0;
}

.hd-bookmark-align-left {
justify-content: flex-start;
}

.hd-bookmark-align-center {
justify-content: center;
}

.hd-bookmark-align-right {
justify-content: flex-end;
}

.hd-bookmark-auto-wrapper.has-background {
background: var(--hd-bookmark-bg, rgba(225, 29, 72, 0.08));
padding: 16px 24px;
border-radius: 12px;
}

.hd-bookmark-auto-wrapper .hd-bookmark-wrapper,
.hd-bookmark-shortcode-wrapper .hd-bookmark-wrapper {
margin: 0;
}

/* ===== Box Module Bookmark Row ===== */
/* Bookmark row container - forces second row */
.social-button-wrapper .bookmark-row {
flex-basis: 100%;
width: 100%;
display: flex;
justify-content: center;
gap: 8px;
margin-top: 12px;
order: 100;
}

.social-button-wrapper .bookmark-row .bookmark-item {
display: flex;
align-items: center;
}

/* Unified button styles matching social buttons */
.social-button-wrapper .bookmark-row .hd-bookmark-btn,
.social-button-wrapper .bookmark-row .hd-bookmark-collection-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 6px 12px;
border-radius: 50px;
font-weight: 500;
font-size: 0.9rem;
min-width: 100px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: all 0.3s ease;
cursor: pointer;
text-decoration: none ;
height: auto;
}

/* Bookmark button - filled style */
.social-button-wrapper .bookmark-row .hd-bookmark-btn {
background: var(--hd-bookmark-accent, var(--hd-bookmark-color, #e11d48));
border: none;
color: #fff ;
}

.social-button-wrapper .bookmark-row .hd-bookmark-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(225, 29, 72, 0.34);
opacity: 0.95;
}

.social-button-wrapper .bookmark-row .hd-bookmark-btn.is-bookmarked {
background: var(--hd-bookmark-accent, var(--hd-bookmark-color, #e11d48));
}

/* Collection link - outline style */
.social-button-wrapper .bookmark-row .hd-bookmark-collection-link {
background: transparent;
border: 2px solid var(--hd-bookmark-accent, var(--hd-bookmark-color, #e11d48)) ;
color: var(--hd-bookmark-accent, var(--hd-bookmark-color, #e11d48)) ;
}

.social-button-wrapper .bookmark-row .hd-bookmark-collection-link:hover {
background: var(--hd-bookmark-accent, var(--hd-bookmark-color, #e11d48)) ;
color: #fff ;
transform: translateY(-2px);
}

/* Icon sizes - unified */
.social-button-wrapper .bookmark-row .hd-bookmark-icon svg,
.social-button-wrapper .bookmark-row .hd-bookmark-collection-link svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}

/* Reset wrapper margin */
.social-button-wrapper .bookmark-row .hd-bookmark-wrapper {
margin: 0;
}

/* Mobile RWD - Hide text on small screens */
@media (max-width: 767px) {
.social-button-wrapper .bookmark-row .hd-bookmark-text,
.social-button-wrapper .bookmark-row .hd-bookmark-collection-link span {
display: none;
}

.social-button-wrapper .bookmark-row .hd-bookmark-btn,
.social-button-wrapper .bookmark-row .hd-bookmark-collection-link {
min-width: auto;
padding: 8px 12px;
}
}

/* ===== Toast Notification ===== */
.hd-bookmark-toast {
position: fixed;
bottom: calc(20px + var(--hd-bottom-fixed-safe-offset, 0px));
left: 50%;
transform: translateX(-50%) translateY(100px);
background: #333;
color: #fff;
padding: 12px 24px;
border-radius: 999px;
font-size: 14px;
z-index: 10000;
opacity: 0;
max-width: min(92vw, 420px);
box-shadow: 0 18px 38px rgba(15, 23, 42, 0.24);
transition: opacity 0.3s ease, transform 0.3s ease;
}

.hd-bookmark-toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}

/* ===== Bookmark List ===== */
.hd-bookmark-container {
max-width: 1200px;
margin: 0 auto;
padding: 28px 20px 56px;
}

.hd-bookmark-header {
margin-bottom: 32px;
text-align: center;
padding: 34px 24px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: var(--hd-bookmark-radius-lg, 28px);
background:
radial-gradient(circle at top left, rgba(255, 255, 255, 0.9), transparent 42%),
linear-gradient(135deg, rgba(236, 253, 245, 0.96), rgba(239, 246, 255, 0.96));
box-shadow: var(--hd-bookmark-shadow, 0 24px 48px rgba(15, 23, 42, 0.08));
}

.hd-bookmark-header h1 {
font-size: clamp(2rem, 1.6rem + 1vw, 2.6rem);
margin-bottom: 12px;
letter-spacing: -0.02em;
color: var(--hd-bookmark-ink, #0f172a);
}

.hd-bookmark-count-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0;
padding: 10px 18px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.82);
box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.18);
color: #475569;
font-size: 14px;
font-weight: 600;
}

.hd-bookmark-loading,
.hd-bookmark-empty,
.hd-bookmark-error {
text-align: center;
padding: 56px 24px;
color: #64748b;
font-size: 16px;
border-radius: 22px;
border: 1px solid var(--hd-bookmark-border, rgba(226, 232, 240, 0.92));
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.95));
box-shadow: var(--hd-bookmark-shadow, 0 18px 36px rgba(15, 23, 42, 0.06));
}

.hd-bookmark-empty {
font-size: 17px;
}

/* ===== Grid Layout ===== */
.hd-bookmark-list.hd-bookmark-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
}

.hd-bookmark-card {
position: relative;
background: var(--hd-bookmark-surface, #fff);
border: 1px solid var(--hd-bookmark-border, rgba(226, 232, 240, 0.9));
border-radius: 20px;
overflow: hidden;
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.hd-bookmark-card:hover {
transform: translateY(-5px);
border-color: rgba(244, 114, 182, 0.22);
box-shadow: 0 24px 42px rgba(15, 23, 42, 0.12);
}

.hd-bookmark-card-link {
display: block;
text-decoration: none;
color: inherit;
}

.hd-bookmark-card-image {
position: relative;
padding-top: 56.25%;
background: #f0f0f0;
overflow: hidden;
}

.hd-bookmark-card-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}

.hd-bookmark-card:hover .hd-bookmark-card-image img {
transform: scale(1.05);
}

.hd-bookmark-no-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.hd-bookmark-card-content {
padding: 18px 18px 20px;
}

.hd-bookmark-card-title {
font-size: 1.1rem;
font-weight: 600;
margin: 0 0 8px;
line-height: 1.4;
color: var(--hd-bookmark-ink, #0f172a);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.hd-bookmark-card-excerpt {
font-size: 14px;
color: var(--hd-bookmark-muted, #64748b);
margin: 0;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.hd-bookmark-remove {
position: absolute;
top: 10px;
right: 10px;
width: 32px;
height: 32px;
border: none;
border-radius: 50%;
background: rgba(15, 23, 42, 0.72);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 0.3s ease;
}

.hd-bookmark-card:hover .hd-bookmark-remove {
opacity: 1;
}

.hd-bookmark-remove:hover {
background: #e11d48;
}

.hd-bookmark-remove:focus-visible,
.hd-bookmark-card:focus-within .hd-bookmark-remove {
opacity: 1;
}

.hd-bookmark-remove svg {
width: 16px;
height: 16px;
}

/* ===== List Layout ===== */
.hd-bookmark-list.hd-bookmark-list-view {
display: flex;
flex-direction: column;
gap: 16px;
}

.hd-bookmark-list-view .hd-bookmark-card {
display: flex;
align-items: stretch;
}

.hd-bookmark-list-view .hd-bookmark-card-link {
display: flex;
flex: 1;
}

.hd-bookmark-list-view .hd-bookmark-card-image {
width: 200px;
padding-top: 0;
flex-shrink: 0;
}

.hd-bookmark-list-view .hd-bookmark-card-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}

/* ===== Compact Layout ===== */
.hd-bookmark-list.hd-bookmark-compact {
display: flex;
flex-direction: column;
gap: 12px;
}

.hd-bookmark-compact .hd-bookmark-card {
display: flex;
align-items: center;
padding: 12px;
}

.hd-bookmark-compact .hd-bookmark-card-image {
width: 60px;
height: 60px;
padding-top: 0;
border-radius: 8px;
flex-shrink: 0;
}

.hd-bookmark-compact .hd-bookmark-card-content {
padding: 0 12px;
}

.hd-bookmark-compact .hd-bookmark-card-title {
font-size: 1rem;
margin-bottom: 4px;
}

.hd-bookmark-compact .hd-bookmark-card-excerpt {
display: none;
}

.hd-bookmark-compact .hd-bookmark-remove {
position: relative;
top: auto;
right: auto;
opacity: 1;
background: #f0f0f0;
color: #666;
}

.hd-bookmark-compact .hd-bookmark-remove:hover {
background: #e11d48;
color: #fff;
}

/* ===== Responsive ===== */
@media (max-width: 767px) {
.hd-bookmark-container {
padding: 20px 14px 40px;
}

.hd-bookmark-auto-wrapper.hd-bookmark-mobile-align-left {
justify-content: flex-start;
text-align: left;
}

.hd-bookmark-auto-wrapper.hd-bookmark-mobile-align-center {
justify-content: center;
text-align: center;
}

.hd-bookmark-auto-wrapper.hd-bookmark-mobile-align-right {
justify-content: flex-end;
text-align: right;
}

.hd-bookmark-header {
padding: 24px 18px;
border-radius: 22px;
}

.hd-bookmark-list.hd-bookmark-grid {
grid-template-columns: 1fr;
}

.hd-bookmark-list-view .hd-bookmark-card {
flex-direction: column;
}

.hd-bookmark-list-view .hd-bookmark-card-image {
width: 100%;
padding-top: 56.25%;
}

.hd-bookmark-remove {
opacity: 1;
}
}

@media (min-width: 768px) and (max-width: 1024px) {
.hd-bookmark-auto-wrapper,
.hd-bookmark-shortcode-wrapper,
.isb-bookmark-wrapper {
gap: 10px;
}

.hd-bookmark-list.hd-bookmark-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hd-bookmark-list-view .hd-bookmark-card-image {
width: 180px;
}
}

@media (max-width: 640px) {
.hd-bookmark-btn,
.hd-bookmark-collection-link,
#si-single-content .hd-bookmark-collection-link,
.entry-content .hd-bookmark-collection-link,
a.hd-bookmark-collection-link {
min-height: 44px;
}
}

@media (prefers-reduced-motion: reduce) {
.hd-bookmark-btn,
.hd-bookmark-collection-link,
.hd-bookmark-icon svg,
.hd-bookmark-card,
.hd-bookmark-card-image img,
.hd-bookmark-remove,
.hd-bookmark-toast {
transition: none;
}

.hd-bookmark-btn.is-processing .hd-bookmark-icon svg {
animation: none;
}

.hd-bookmark-btn:hover .hd-bookmark-icon svg,
.hd-bookmark-collection-link:hover svg,
.hd-bookmark-card:hover .hd-bookmark-card-image img {
transform: none;
}
}