/* TeleOrder Floating Button */
 .teleorder-coc-tg-floating-button {
    position: fixed;
    z-index: 9999;
    text-decoration: none;
	display: flex;
	justify-content: center;
    align-items: center;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
}

.teleorder-coc-tg-floating-style2 {
    width: 60px;
    height: 60px;
    background-color: var(--teleorder-btn-color, #229ED9);
    border-radius: 50px;
    box-shadow: 0 8px 25px -5px rgba(45,62,79,.3);
}

.teleorder-coc-tg-floating-style2:hover {
	background-color: var(--teleorder-btn-color-dark, #1b7fb0) !important;
}

/* Floating button position: which screen corner the button (and its stack) sits in. */
.teleorder-pos-bottom-right { bottom: 20px; right: 20px; }
.teleorder-pos-bottom-left  { bottom: 20px; left: 20px; }
.teleorder-pos-top-right    { top: 20px; right: 20px; }
.teleorder-pos-top-left     { top: 20px; left: 20px; }

/* Stacks a second floating button away from the edge it's anchored to, instead of overlapping it. */
.teleorder-pos-bottom-right.teleorder-coc-stack-above,
.teleorder-pos-bottom-left.teleorder-coc-stack-above {
    bottom: 95px !important;
}
.teleorder-pos-top-right.teleorder-coc-stack-above,
.teleorder-pos-top-left.teleorder-coc-stack-above {
    top: 95px !important;
}

.teleorder-coc-tg-floating-button:hover .teleorder-coc-tg-floating-label {
    visibility: visible;
    opacity: 1;
}

.teleorder-coc-tg-floating-label {
    position: fixed;
    display: table;
    visibility: hidden;
    z-index: 9999;
    text-align: center;

	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
}

/* The label flyout appears on the inward side, away from whichever screen edge the button hugs. */
.teleorder-pos-bottom-right .teleorder-coc-tg-floating-label,
.teleorder-pos-top-right .teleorder-coc-tg-floating-label,
.teleorder-pos-bottom-right .teleorder-coc-wa-floating-label,
.teleorder-pos-top-right .teleorder-coc-wa-floating-label {
    right: 85px;
}
.teleorder-pos-bottom-left .teleorder-coc-tg-floating-label,
.teleorder-pos-top-left .teleorder-coc-tg-floating-label,
.teleorder-pos-bottom-left .teleorder-coc-wa-floating-label,
.teleorder-pos-top-left .teleorder-coc-wa-floating-label {
    left: 85px;
}

.teleorder-coc-tg-floating-label-text {
    color: #43474e;
    background: #f5f7f9;
    display: inline-block;
    padding: 7px;
    border-radius: 3px;
    font-size: 14px;
    bottom: 15px;
}

@media (max-width: 768px) {
    .hide-on-mobile {
        display: none !important;
    }
}

/* TeleOrder Button */
.product_meta .teleorder-coc-tg-button {
    font-size: 1.16em !important;
}
.teleorder-coc-tg-button {
    color: white !important;
	background-color: var(--teleorder-btn-color, #229ED9) !important;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
    text-decoration: none !important;
    margin: 10px 0 20px 0 !important;
    text-align: center !important;
}

.teleorder-coc-tg-button:before,
.teleorder-coc-tg-button:after {
    display: none !important;
}

.teleorder-coc-tg-button:hover {
	background-color: var(--teleorder-btn-color-dark, #1b7fb0) !important;
}

.teleorder-coc-tg-button svg {
	width: 1em;
    margin-right: 5px;
    vertical-align: middle;
    margin-bottom: 2px !important;
}

/* Product card button (shop/category/related-products loops): a full-width rectangle
   that sits under the Add to Cart button inside each card, regardless of theme. */
.teleorder-coc-tg-shop {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
 * WhatsApp — mirrors every Telegram rule above, same structure,
 * green default instead of blue. Both can be shown at once.
 * ============================================================ */

.teleorder-coc-wa-floating-button {
    position: fixed;
    z-index: 9999;
    text-decoration: none;
	display: flex;
	justify-content: center;
    align-items: center;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
}

.teleorder-coc-wa-floating-style2 {
    width: 60px;
    height: 60px;
    background-color: var(--teleorder-btn-color, #25D366);
    border-radius: 50px;
    box-shadow: 0 8px 25px -5px rgba(45,62,79,.3);
}

.teleorder-coc-wa-floating-style2:hover {
	background-color: var(--teleorder-btn-color-dark, #1da851) !important;
}

.teleorder-coc-wa-floating-button:hover .teleorder-coc-wa-floating-label {
    visibility: visible;
    opacity: 1;
}

.teleorder-coc-wa-floating-label {
    position: fixed;
    display: table;
    visibility: hidden;
    z-index: 9999;
    text-align: center;

	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
}

.teleorder-coc-wa-floating-label-text {
    color: #43474e;
    background: #f5f7f9;
    display: inline-block;
    padding: 7px;
    border-radius: 3px;
    font-size: 14px;
    bottom: 15px;
}

.product_meta .teleorder-coc-wa-button {
    font-size: 1.16em !important;
}
.teleorder-coc-wa-button {
    color: white !important;
	background-color: var(--teleorder-btn-color, #25D366) !important;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
    text-decoration: none !important;
    margin: 10px 0 20px 0 !important;
    text-align: center !important;
}

.teleorder-coc-wa-button:before,
.teleorder-coc-wa-button:after {
    display: none !important;
}

.teleorder-coc-wa-button:hover {
	background-color: var(--teleorder-btn-color-dark, #1da851) !important;
}

.teleorder-coc-wa-button svg {
	width: 1em;
    margin-right: 5px;
    vertical-align: middle;
    margin-bottom: 2px !important;
}

.teleorder-coc-wa-shop {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}