/* =============================================================================
   Rinnai Hyperlink Button Widget
   ============================================================================= */

.rinnai-hyperlink-btn {
	display: inline-flex;
	align-items: flex-start;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	line-height: 1.2;
	transition: color 0.2s ease;
}

.rinnai-hyperlink-btn:hover {
	text-decoration: none;
}

.rinnai-hyperlink-btn--no-hover {
	pointer-events: none;
}

/* Chevron — flex-shrink so it never squishes, top-padded to sit on first text line */
.rinnai-btn__chevron {
	display: inline-flex;
	align-self: center;
	align-items: center;
	flex-shrink: 0;
	margin-right: 6px; /* default; overridden by Elementor controls */
	/*padding-top: 0.4em;*/
}

.rinnai-btn__chevron-svg {
	width: 12px; /* default; overridden by Elementor controls */
	height: 12px;
	display: block;
}

/* Content wrapper — text + icon flow together as one inline block */
.rinnai-btn__content {
	display: block;
	min-width: 0;
}

/* Label */
.rinnai-btn__text {
	white-space: normal;
	word-break: break-word;
}

/* Type icon flows inline right after the last word of the text */
.rinnai-btn__type-icon {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	flex-shrink: 0;
	margin-left: 8px; /* default; overridden by Elementor controls */
}

.rinnai-btn__type-svg {
	display: block;
	width: 16px; /* default; overridden by Elementor controls */
	height: auto;
}

/* External link icon sits slightly higher to match the visual weight of the text */
.rinnai-hyperlink-btn--external .rinnai-btn__type-svg {
	position: relative;
	top: -1px;
}

/* Wrapper — stacks the optional image above the button */
.rinnai-btn-wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.rinnai-btn__image-link {
	display: block;
	margin-bottom: 8px; /* default; overridden by Elementor controls */
}

.rinnai-btn__img {
	display: block;
	width: 100%;
	height: auto;
}

/* Image hover — opacity fade triggered by hovering anywhere over the wrapper */
.rinnai-btn-wrapper--linked-hover .rinnai-btn__img {
	opacity: 1;
	transition: opacity 0.2s ease;
}

.rinnai-btn-wrapper--linked-hover:hover .rinnai-btn__img {
	opacity: 0.8; /* fallback; overridden by Elementor opacity slider */
}

/* Inline image button for Shopee & Lazada in where to buy page */
.rinnai-image-button .rinnai-btn-wrapper{
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}
.rinnai-image-button .rinnai-btn__content{
    display: none;
}
.rinnai-image-button .rinnai-btn__image-link{
    margin: 0 !important;
    transition: opacity 0.2s ease;
}
.rinnai-image-button .rinnai-btn__image-link img{
    width: 81px !important;
    height: 24px !important;
}
.rinnai-image-button.lazada .rinnai-btn__image-link img{
    width: 69px !important;
    height: 20px !important;
}
.rinnai-image-button .rinnai-btn__image-link:hover {
    opacity: 0.7 !important;
}
/* Hover image link → affect button */
.rinnai-btn-wrapper:has(.rinnai-btn__image-link:hover)
.rinnai-hyperlink-btn {
     opacity: 0.7 !important;
}
/* Hover button → affect image link */
.rinnai-btn-wrapper:has(.rinnai-hyperlink-btn:hover)
.rinnai-btn__image-link {
    opacity: 0.7 !important;
}