/*
Theme Name:         Furnicom
Theme URI:          http://demo.wpthemego.com/themes/sw_furnicom/
Description:        Furnicom is a responsive WooCommerce WordPress theme with clean, modern design and a a complete set of eCommerce features.
Author:             WpThemeGo
Author URI:         http://www.wpthemego.com/
Version:            2.0.18
License:            GNU General Public License v2 or later

Tested up to: WordPress 6.2
Requires PHP: 7.4 or higher
*/

html
{
    font-size: unset!important
}

form {
    margin-block-end: 0px!important;
}

/* To fix my account menu item on top header */
.header-msg .top-header-sidebar .top-header-sidebar-menu {
    margin-top: 9.5px
}

[data-typeit-id]:before {
    content: none !important;
}


.wp-caption{}
.wp-caption-text{}
.sticky{}
.gallery-caption{}
.bypostauthor{}

/*
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: rtl-language-support, sticky-post, two-columns
Text Domain: furnicom

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* Imran code starts here 
 * Remove blinking cursor from chat box */
	
	.btt {display:none!important}
#btt {display:none!important}
 btt {display:none!important}

 * Remove blinking cursor from chat box */
        .typed::after {
            content: '|';
            display: inline;
            -webkit-animation: blink 0.7s infinite;
            -moz-animation: blink 0.7s infinite;
            animation: blink 0.7s infinite;
        }

        body{
            background-image : url("{% static '/front/img-mattress/background.webp' %}");
            background-size: cover;
        }
.avatar {
          width: 30px;
          height: 30px;

          border-radius: 50%;
          margin-right: 10px;
          /*
          position: relative;
          top: -22px;
          left: -17px;
          float: right; */
        }

        .avatar img {
            width: 45px;
            height: 45px;
        }

        .close-button {
          position: absolute;
          top: 10px;
          right: 10px;
          width: 28px;
          height: 28px;
          color: #8c6239;
          font-weight: bold;
          font-size: 20px;
          border: none;
          border-radius: 6px;
          cursor: pointer;
          display: flex;
          align-items: center;
          background-color: unset;
          justify-content: center;
          transition: all 0.3s ease;
        }

        .close-button:focus {
          border: 0px!important;
          outline: none;
        }



        .message {
          align-items: center;
          clear: both; /* Clear floats */
        }

        .message .card-text {
            font-size: .80rem!important;
            line-height: 1.3!important;
            text-align: justify!important;
            font-weight: normal!important;
            color: #595959!important;
            font-family: arial!important;
            padding: 5px!important;

        }

        .message .btn {
        padding: .07rem .3rem .1rem .43rem!important;
        font-size: .8rem!important;
        }

        #chatbot-popup .form-control:focus {
            border-color:unset!important;
            box-shadow:none!important;
            outline: none!important;
        }

        #chatbot-icon {
            display: none;
            position: fixed;
            bottom: 20px;
            right: -100px; /* Start off-screen */
            cursor: pointer;
            animation: slideIn 0.5s forwards;
            z-index: 99999;
            //animation-delay: 3s; /* Start animation after 3 seconds */
        }

        @keyframes slideIn {
            from { right: -100px; }
            to { right: 20px; }
        }

        .chat-header .avatar {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
        }


        #chatbot-popup {
          position: fixed;
          inset-block-end: 20px;   /* bottom */
          inset-inline-end: 20px;  /* right  */
          /* width: 36vw;  height: 78vh;  ⟵ delete these two */
          max-width: 100vw; box-sizing: border-box;

          /* 👇 dynamic sizing */
          width:  clamp(320px, 34vw, 500px);   /* min-max guardrails */
          height: clamp(460px, 75vh, 720px);

          background: #fef8e8;
          border-radius: 18px;
          box-shadow: 0 6px 24px rgba(0 0 0 /.15);
          display: flex;
          flex-direction: column;
          font-family: "Inter", system-ui, sans-serif;
          transition: transform .4s ease, width .4s, height .4s;
          z-index: 1000000;
          overflow: hidden;  /* keeps children inside */
        }

          .chatbot-hidden {
            transform: translateX(110%);
        }

        .chatbot-shown {
            transform: translateX(0);
        }


        /* Phones – portrait & small landscape */
        @media (max-width: 600px) {

          #chatbot-popup {

              top: 50%;
            left: 50%;

         /* reset the old anchors */
            bottom: auto;
            right: auto;

            /* keep your dynamic size from clamp()
               or 95 vw/85 vh if you prefer          */
            width: clamp(320px, 95vw, 420px);
            height: clamp(460px, 85vh, 680px);

            border-radius: 12px;      /* softer edges */
            box-shadow: 0 8px 28px rgba(0 0 0 /.25);

          }

          /* off-screen: centred first, then shove 120 % to the right */
          .chatbot-hidden {
            transform: translate(-50%, -50%) translateX(120%);
          }

          /* on-screen: just centred */
          .chatbot-shown  {
            transform: translate(-50%, -50%) translateX(0);
          }
        }

        /* “Foldable” or very-low-height landscape phones */
        @media (max-height: 450px) {
          #chatbot-popup {
            height: 90vh;   /* fill height, keep width from clamp() */
          }

            .chatbot-hidden {
            transform: translate(-50%, -50%) translateX(120%);
          }

          /* on-screen: just centred */
          .chatbot-shown  {
            transform: translate(-50%, -50%) translateX(0);
          }
        }


        .chat-title {
            margin: 0;
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--text-dark);
        }

        .btn-success {
            background-color: #d2d0c6!important;
            border-color: #d2d0c6!important;
            color: #3c3c3c !important;
            font-size: 0.8rem !important;
        }

        #chat-header{
            display: flex;
            align-items: center;
            padding: 17px 26px 12px;

        }



        #chat-messages {
            flex-grow: 1;
            overflow-y: auto;
            background-image: url(http://localhost:8004/static/front/img/chat-back-transparent.png);
            padding: 0 26px 28px!important;

            gap: 20px!important;
        }

        #chat-input { flex-shrink: 1 !important; }

        .message.self {
            background-color: #FEEFD6;
            float: right;
            padding: 5px 20px 5px 10px;
        }
        .message.other {
            background-color: #FEFDF5;
            float: left;

        }



        .message.other card-title {
           color: #5d5d5d5;
        }

        .message strong{
            color : #404040
        }

        .message .btn-link {
            background-color: white !important;
            border-color: #d2d0c6 !important;
            color: #3c3c3c !important;
            font-size: 0.8rem !important;
        }

        h5 {
           font-size: 1rem!important;
           margin:0px!important;
        }

        .message.other card-text {
            color: #3d3d3d;

        }

        .message.other card {
            margin-top: .5rem !important;
            margin-bottom: .5rem !important;
            border: 0px !important;
        }

        .card {
            border: solid 1px #f4f4f4;
            background-color: white;
        }

        .card-body {
            padding: 0.1rem 1.25rem 0 1rem;
        }



        .message.self  .avatar
        {
            display:none
        }

        ul
        {
            margin-top: 10px!important;
            list-style: square!important;
        }

        card-body ul
        {
            margin-top: 10px!important;
            list-style: square!important;
        }


        .message {
            padding: 10px!important;
            border-radius: 10px!important;
            margin-bottom: 10px!important;
            font-size: .88rem!important;
            padding: 16px 18px!important;
            line-height: 1.45!important;
            border-radius: 10px!important;
            max-width: 100%!important;
            word-break: break-word!important;
        }
        .message p {
            margin-bottom: 0rem;
            font-size: .88rem!important;
            /* display:inline; */
        }

    

           #txt_message
        {
            background-color: transparent;
            border: 0px;
            font-size: .9rem;
            color:  #545454;
        }

        .message p {
            padding: 0px;
            margin: 0px;
        }

       .ti-cursor {
        display: none!important;
        }

/* Bootstrap Customized */

.my-btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.my-text-white {
    color: #fff !important;
}

.my-d-flex {
    display: flex !important;
}

.my-justify-content-between {
    justify-content: space-between !important;
}

.my-align-items-center {
    align-items: center !important;
}

.my-p-2 {
    padding: 1rem !important;
}

.my-font-weight-bold {
    font-weight: bold !important;
}

.my-btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.my-btn-success {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}

.my-chat-messages {
    height: 300px;
    overflow-y: auto;
    display: none;
}

.my-border-top {
    border-top: 1px solid #dee2e6 !important;
}

.my-form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.my-mr-2 {
    margin-right: 0.5rem !important;
}

.my-alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.my-alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.my-form-group {
    margin-bottom: 1rem;
}

/* bootstrap 4 styles used in popup */

/* === Margin Utilities === */
.m-0  { margin: 0 !important; }
.m-1  { margin: 0.25rem !important; }
.m-2  { margin: 0.5rem !important; }
.m-3  { margin: 1rem !important; }
.m-4  { margin: 1.5rem !important; }
.m-5  { margin: 3rem !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }

.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }

.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }

.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
.mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.mx-5 { margin-left: 3rem !important; margin-right: 3rem !important; }

.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }


/* === Padding Utilities === */
.p-0  { padding: 0 !important; }
.p-1  { padding: 0.25rem !important; }
.p-2  { padding: 0.5rem !important; }
.p-3  { padding: 1rem !important; }
.p-4  { padding: 1.5rem !important; }
.p-5  { padding: 3rem !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }

.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }

.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }

.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-5 { padding-left: 3rem !important; padding-right: 3rem !important; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }


.text-left   { text-align: left !important; }
.text-right  { text-align: right !important; }
.text-center { text-align: center !important; }
.text-justify { text-align: justify !important; }

.text-lowercase { text-transform: lowercase !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }

.text-muted   { color: #6c757d !important; }
.text-primary { color: #007bff !important; }
.text-success { color: #28a745 !important; }
.text-danger  { color: #dc3545 !important; }
.text-warning { color: #ffc107 !important; }
.text-info    { color: #17a2b8 !important; }
.text-dark    { color: #343a40 !important; }
.text-light   { color: #f8f9fa !important; }


.d-none     { display: none !important; }
.d-inline   { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block    { display: block !important; }
.d-flex     { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }

/* Flex Direction */
.flex-row        { flex-direction: row !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column     { flex-direction: column !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }

/* Flex Justify Content */
.justify-content-start   { justify-content: flex-start !important; }
.justify-content-end     { justify-content: flex-end !important; }
.justify-content-center  { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around  { justify-content: space-around !important; }

/* Flex Align Items */
.align-items-start    { align-items: flex-start !important; }
.align-items-end      { align-items: flex-end !important; }
.align-items-center   { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch  { align-items: stretch !important; }

/* Flex Align Self */
.align-self-start    { align-self: flex-start !important; }
.align-self-end      { align-self: flex-end !important; }
.align-self-center   { align-self: center !important; }
.align-self-baseline { align-self: baseline !important; }
.align-self-stretch  { align-self: stretch !important; }