/*=================================================*/
/* Custom Icons Element */
/*=================================================*/

.social-icons .icon.circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.social-icons .icon.circle:not(.is-outline) path, 
.social-icons .icon.circle.is-outline:hover path {
    fill: white;
}

/* ------- Brand Colors ------*/

/* Podcast Primary */
.button.podcast:is(:hover, :not(.is-outline)) {
    color: var(--fs-color-primary) !important;
}

/* Yelp Red */
.button.yelp:is(:hover, :not(.is-outline)) {
    color: #FF1A1A !important;
}

/* Google Blue */
.button.google:is(:hover, :not(.is-outline)) {
    color: #4285F4 !important;
}

/* Map Pin Red (Generic) */
.button.location:is(:hover, :not(.is-outline)) {
    color: #E53935 !important;
}

/* Android Green */
.button.android:is(:hover, :not(.is-outline)) {
    color: #5acf60 !important;
}

/* Apple Black */
.button.apple:is(:hover, :not(.is-outline)) {
    color: #000000 !important;
}

/* Audible Orange */
.button.audible:is(:hover, :not(.is-outline)) {
    color: #F5A623 !important;
}

/* Amazon Orange */
.button.amazon:is(:hover, :not(.is-outline)) {
    color: #FF9900 !important;
}

/* Spotify Green */
.button.spotify:is(:hover, :not(.is-outline)) {
    color: #1DB954 !important;
}

/* Apple Music Pink/Red */
.button.apple-music:is(:hover, :not(.is-outline)) {
    color: #FA243C !important;
}

/* Houzz Green */
.button.houzz:is(:hover, :not(.is-outline)) {
    color: #4DBC15 !important;
}

/*---------- Apply custom UX Builder color to the SVGs -------------*/

/* Apply custom Base Color */
.custom-follow-wrapper[style*="--custom-icon-color"] .social-icons .icon {
    color: var(--custom-icon-color) !important;
}

:is(.custom-follow-wrapper[style*="--custom-icon-color"] .social-icons .icon.outline, .dark .custom-follow-wrapper[style*="--custom-icon-color"] .social-icons .button.is-outline) {
    border-color: var(--custom-icon-color) !important;
}

.custom-follow-wrapper[style*="--custom-icon-color"] .social-icons .icon.fill {
    background-color: var(--custom-icon-color) !important;
    border-color: var(--custom-icon-color) !important;
    color: #ffffff !important; 
}

/* Apply custom Hover Color */
.custom-follow-wrapper[style*="--custom-icon-hover-color"] .social-icons .icon:hover {
    color: var(--custom-icon-hover-color) !important;
    box-shadow: none;
}

.custom-follow-wrapper[style*="--custom-icon-hover-color"] .social-icons .icon.outline:hover {
    border-color: var(--custom-icon-hover-color) !important;
}

.custom-follow-wrapper[style*="--custom-icon-hover-color"] .social-icons .icon.fill:hover {
    background-color: var(--custom-icon-hover-color) !important;
    border-color: var(--custom-icon-hover-color) !important;
    color: #ffffff !important; 
}

/* Plain Style Opacity Logic (Fixed missing :hover bug) */
.custom-follow-wrapper[style*="--custom-icon-color"] .social-icons .icon.plain {
    opacity: 0.7; 
}

.custom-follow-wrapper[style*="--custom-icon-color"] .social-icons .icon.plain:hover,
.custom-follow-wrapper[style*="--custom-icon-hover-color"] .social-icons .icon.plain {
    opacity: 1 !important;
}

/* -----------------------------------------------------------------------------
 * Custom Cards Element 
 * -----------------------------------------------------------------------------*/
 
.custom-clickable-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: var(--card-dir, column);
    height: 100%;
    background-color: var(--card-bg, transparent);
    border-radius: var(--card-radius, 0px);
    transition: background-color 0.3s ease;
}

.card-image-wrapper {
    position: var(--card-img-pos, relative);
    top: 0; left: 0;
    width: var(--card-img-w, 100%);
    height: var(--card-img-h, auto);
    padding-top: var(--card-img-pt, 0);
    flex-shrink: 0;
    align-self: stretch;
    overflow: hidden;
    z-index: 0;
}

.card-image-wrapper img {
    width: 100%;
    height: var(--card-img-img-h, auto);
    position: var(--card-img-img-pos, static);
    top: 0; left: 0;
    object-fit: var(--card-img-fit, fill);
    display: block;
    transition: transform 0.3s ease;
}

/* Image Overlay */
.card-image-wrapper::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-color: var(--card-overlay, transparent);
    transition: background-color 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.custom-clickable-card .card-text-wrapper {
    position: relative;
    z-index: 1; 
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    padding: var(--card-pad, 30px);
}

.custom-clickable-card .card-text-inner {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card-stretched-link {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 2;
}

/* Failsafe: Hide link inside UX Builder so elements can be clicked/edited */
:is(body.is-ux-builder, body.ux-builder-iframe, .ux-builder-element) .card-stretched-link {
    display: none !important;
    pointer-events: none !important;
}

/* Ensure buttons stay clickable over the background link */
.custom-clickable-card .card-text-wrapper :is(a, button) {
    position: relative;
    z-index: 3;
}

/* Hover Effects */
.custom-clickable-card:has(.card-stretched-link):hover .card-image-wrapper img {
    transform: scale(1.05);
}
.custom-clickable-card.has-overlay-hover:hover .card-image-wrapper::after {
    background-color: var(--card-overlay-hover);
}
.custom-clickable-card.has-bg-hover:hover {
    background-color: var(--card-bg-hover, var(--card-bg));
}

/* Standard Base Text Colors */
.custom-clickable-card.has-text-color :is(.card-text-wrapper, .card-text-wrapper :is(h1, h2, h3, h4, h5, h6, p)) {
    color: var(--card-txt);
}

/* Hover Text Colors & Transitions */
.custom-clickable-card :is(.card-text-wrapper, .card-text-wrapper :is(h1, h2, h3, h4, h5, h6, p, div, .icon-inner)) {
    transition: color 0.3s ease;
}

/* The Retain Color Logic */
.custom-clickable-card.has-text-hover:hover .card-text-wrapper :is(h1, h2, h3, h4, h5, h6, p, a.is-link, .icon-inner, div):not(.retain-color, .retain-color *) {
    color: var(--card-txt-hover) !important;
}

.custom-clickable-card.has-text-hover:hover .card-text-wrapper .icon-box.retain-color :is(h1, h2, h3, h4, h5, h6, p, a.is-link):not(.retain-color, .retain-color .retain-color *) {
    color: var(--card-txt-hover) !important;
}

/* Vertical Text Alignments */
.card-text-inner.align-last-bottom > :last-child {
    margin-top: auto;
}
.card-text-inner.align-all-center {
    justify-content: center;
}
.card-text-inner.align-all-bottom {
    justify-content: flex-end;
}

/* Stop standard buttons from full-width stretching in Flex column */
.card-text-inner > :is(.button, .button-wrapper) {
    align-self: flex-start;
}
.custom-clickable-card.text-center .card-text-inner > :is(.button, .button-wrapper) {
    align-self: center;
}
.custom-clickable-card.text-right .card-text-inner > :is(.button, .button-wrapper) {
    align-self: flex-end;
}

/* make column borders visible */
.col:has(.custom-clickable-card) .is-border {
    z-index: 1;
}