body {
    background-color: #e8f0fe;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.chat-container{
    width:50%;

    display:flex;
    justify-content:center;
    align-items:center;

    height:auto;
}

.chat-box{
    width:100%;
    max-width:850px;

    height:90vh;
}

.chat-body {

    flex-grow: 1;

    overflow-y: auto;

    background:
        linear-gradient(
            180deg,
            #f4fffd 0%,
            #eefcf9 100%
        );

    padding: 15px;
}

/* ===================================
   LAYOUT GIF + CHATBOT
=================================== */

.main-layout{
    display:flex;

    width:100%;
    height:100vh;

    align-items:center;
    justify-content:center;

    gap:30px;

    padding:30px;
}

.gif-section{
    width:50%;

    display:flex;
    justify-content:center;
    align-items:center;
}

.besti-gif{
    max-width:500px;
    width:100%;
    height:auto;
}

.chat-container{
    flex:1;
}


/* ===================================
   Responsive Mobile gif
=================================== */

@media (max-width: 768px){

    .main-layout{
        display:block;
        position:relative;
        padding:10px;
    }

    .chat-container{
        width:100%;
        max-width:100%;
    }

    .gif-section{
        position:fixed;
        left:10px;

        /* naikkan GIF */
        bottom:70px;

        z-index:10;
        width:auto;
        pointer-events:none;
    }
	
	.besti-gif{
        width:90px;
        max-width:none;
    }
	.detail-card h5{

        font-size:15px;
    }
}
/* =====================================
MODERN HEADER
===================================== */

.chat-header{

    background: linear-gradient(
        135deg,
        #00b7a8 0%,
        #00c6b7 45%,
        #22d3c5 100%
    );

    padding: 22px 20px;

    border-bottom: none;

    position: relative;

    overflow: hidden;
}

.chat-header::before{
    content:"";

    position:absolute;

    width:220px;
    height:220px;

    background:rgba(255,255,255,0.08);

    border-radius:50%;

    top:-100px;
    right:-80px;
}

.chat-header::after{
    content:"";

    position:absolute;

    width:160px;
    height:160px;

    background:rgba(255,255,255,0.06);

    border-radius:50%;

    bottom:-90px;
    left:-60px;
}

/* CENTER LAYOUT */
.header-center{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
}

/* LOGO */
.logo-wrapper{
    width:72px;
    height:72px;

    border-radius:20px;

    background:white;

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:
        0 4px 14px rgba(0,0,0,0.08);
	
	backdrop-filter: blur(8px);

    border:1px solid rgba(255,255,255,0.25);

    flex-shrink:0;
}

.logo{
    width:58px;
    height:auto;
}

/* TITLE AREA */
.header-text{
    text-align:left;
}

/* MAIN TITLE */
.chatbot-title{
    font-size:30px;
    font-weight:800;
    line-height:1.15;
    color:white;
    letter-spacing:-0.5px;
}

/* RED LETTER */
.brand-red{
    color:#e60023;
}

/* COUNTRY */
.chatbot-country{
    font-size:17px;
    font-weight:600;
    color:rgba(255,255,255,0.92);
    margin-top:4px;
}

/* TAGLINE */
.chatbot-tagline{
    font-size:13px;
    color:rgba(255,255,255,0.82);
    margin-top:2px;
}

/* ADMIN BUTTON */
.admin-btn{
    position:absolute;
    top:14px;
    right:14px;

    text-decoration:none;

    background:rgba(255,255,255,0.18);

    color:white;

    border:1px solid rgba(255,255,255,0.25);

    padding:6px 14px;

    border-radius:999px;

    font-size:12px;
    font-weight:600;

    backdrop-filter: blur(6px);

    transition:0.2s;
}

.admin-btn:hover{
    background:rgba(255,255,255,0.28);
    color:white;
}

/* =====================================
MOBILE RESPONSIVE
===================================== */

@media (max-width:768px){

    body{
        background:white;
    }

    /* FULLSCREEN CHAT */
    .chat-container{
        padding:0;
        height:100vh;
    }

    .chat-box{
        width:100%;
        max-height:100vh;
        height:100vh;

        border-radius:0;
        border:none;
    }

    /* HEADER */
	.chat-header{
		padding:4px 14px !important;
		
		min-height:70px !important;

		display:flex;
		align-items:center;
		justify-content:center;

		border-radius:0 0 14px 14px;

		overflow:hidden;
    }
    /* BACKGROUND EFFECT */
    .chat-header::before{
        width:100px;
		height:100px;

		top:-70px;
		right:-30px;
    }

    .chat-header::after{
        width:70px;
		height:70px;

		bottom:-30px;
		left:-20px;
    }

    /* HEADER CONTENT */
    .header-center{
        display:flex;
		align-items:center;

		gap:10px;

		width:100%;

		transform:translateY(0);
    }

    /* LOGO */
	.logo-wrapper{
        width:45px;
        height:45px;

        min-width:45px;

        border-radius:10px;

        display:flex;
        align-items:center;
        justify-content:center;
		/*background:rgba(255,255,255,0.15);

		backdrop-filter:blur(8px); */
    }

    .logo{
        width:36px;
        height:auto;
    }

    /* TEXT */
    .header-text{
        display:flex;
        flex-direction:column;
        justify-content:center;

        line-height:1.1;
    }

    .chatbot-title{
        font-size:18px;

        font-weight:700;

        margin:0;
    }

    .chatbot-country{
        font-size:14px;

        margin-top:2px;
    }

    .chatbot-tagline{
        font-size:12px;
        margin-top:1px;

        opacity:0.85;
    }

    /* ADMIN BUTTON */
    .admin-btn{
        top:10px;
        right:10px;

        font-size:11px;

        padding:5px 12px;
    }

    /* CHAT AREA */
    .chat-body{
        padding:12px;
    }

    /* MESSAGE */
    .user-message{
        font-size:12px;
        max-width:92%;
    }

    /* INPUT */
    .chat-input{
        padding:10px !important;
    }

    .chat-input-wrapper{
        border-radius:18px;
    }

    .chat-textarea{
        font-size:12px;
        min-height:44px;
    }

    /* BUTTON */
    .action-btn{
        width:40px;
        height:40px;
        font-size:14px;
    }
	
	

}

/* Chat bubbles */
.bot-message {

    background:
        linear-gradient(
            135deg,
            #e7fffb 0%,
            #d9f8f2 100%
        );

    color:#11443f;

    border-radius: 15px 15px 15px 0;

    padding: 10px 15px;

    max-width: 80%;

    border:1px solid #c8eee8;
}

.user-message {

    background:
        linear-gradient(
            135deg,
            #00b7a8 0%,
            #00c6b7 100%
        );

    color:#fff;

    border-radius: 15px 15px 0 15px;

    padding: 10px 15px;

    margin-left: auto;

    max-width: 80%;

    box-shadow:
        0 4px 12px rgba(0,183,168,0.20);
}

/* Loading overlay */
.loading-overlay {

    position:fixed;

    top:0;
    left:0;
    right:0;
    bottom:0;

    background:
        rgba(0,183,168,0.78);

    backdrop-filter:blur(6px);

    z-index:1000;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;
}

/* --- Box styling khusus product usage --- */
.usage-box {
    background: #f8f9fa;
    border-left: 4px solid #0d6efd;
    padding: 15px;
    border-radius: 8px;
}

/* Bullet list styling */
.usage-list {
    list-style: none;
    padding-left: 0;
}

.usage-list li {
    margin-bottom: 8px;
    font-size: 15px;
}

.usage-icon {
    margin-right: 6px;
    color: #0d6efd;
}

.table td {
    font-size: 13px;
    vertical-align: middle;
}

.table th {
    font-size: 13px;
    text-align: center;
}

.btn-sm {
    padding: 4px 8px;
}
.brand-red{
    color:#e60023;
}

/* =====================================
TYPING EFFECT
===================================== */

.typing-text::after{
    content:"|";
    animation: blink 0.8s infinite;
    margin-left:2px;
}

@keyframes blink{
    0%{
        opacity:1;
    }
    50%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}

/* =====================================
AI THINKING
===================================== */

.ai-thinking{
    display:flex;
    align-items:center;
    gap:8px;

    background:#f1f5ff;

    padding:12px 16px;

    border-radius:18px;

    width:fit-content;

    margin-bottom:12px;
}

.ai-dot{
    width:8px;
    height:8px;

    border-radius:50%;

    background:#00b7a8;

    animation:bounce 1.3s infinite;
}

.ai-dot:nth-child(2){
    animation-delay:0.2s;
}

.ai-dot:nth-child(3){
    animation-delay:0.4s;
}

@keyframes bounce{
    0%, 80%, 100%{
        transform:scale(0.7);
        opacity:0.5;
    }

    40%{
        transform:scale(1.2);
        opacity:1;
    }
}

/* =====================================
RECOMMENDATION TABLE
===================================== */

.recommend-table-header th{
    background: transparent !important;
    color:white !important;

    font-size:14px;
    font-weight:700;

    border:none !important;

    padding:14px 10px;
}

/* BODY TABLE */
.table tbody tr{
    background:#f7fffd;
    transition:0.2s;
}

/* ZEBRA ROW */
.table tbody tr:nth-child(even){
    background:#eefcf9;
}

/* HOVER */
.table tbody tr:hover{
    background:#dff8f3;
}

/* CELL */
.table td{
    border-color:#d6f3ee !important;
    vertical-align:middle;
    padding:12px 10px;
}

/* TABLE BORDER */
.table{
    margin-bottom:0;
    border-color:#d6f3ee !important;
}

/* =====================================
TABLE WATSONS AQUA
===================================== */
.recommend-table{

    border-radius:18px;

    overflow:hidden;

    background:white;

    border-color:#d9f2ee !important;

    box-shadow:
        0 4px 18px rgba(0,183,168,0.10);
}

/* =====================================
DETAIL PRODUCT IMAGE
===================================== */

.detail-top-section{

    display:flex;

    align-items:flex-start;

    gap:24px;

    margin-bottom:20px;
}

.detail-info{

    flex:1;
}

.detail-image-box{

	width:320px;

    flex-shrink:0;

    text-align:center;
}

.detail-product-image{

	width:100%;

    max-width:260px;

    border-radius:12px;

    background:white;

    padding:10px;

    box-shadow:
        0 4px 12px rgba(0,0,0,.08);

    cursor:pointer;

    transition:0.25s;
}

.detail-product-image:hover{

    transform:scale(1.03);
}
/* =====================================
PRODUCT thumbnail GALLERY
===================================== */
.thumbnail-container{

    display:flex;

    justify-content:center;

    gap:8px;

    margin-top:12px;

    flex-wrap:wrap;
}

.thumb-nav-btn{

    width:34px;

    height:34px;

    border:none;

    border-radius:50%;

    background:#00b7a8;

    color:white;

    cursor:pointer;

    font-size:14px;

    flex-shrink:0;
}

.product-thumbnail:hover{

    border-color:#00b7a8;

    transform:scale(1.05);
}

.thumb-slider-wrapper{

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:12px;
}

.thumb-slider{

	display:flex;

    gap:10px;

    overflow-x:auto;

    scroll-behavior:smooth;

    flex:1;

    padding-bottom:5px;

    scrollbar-width:none;
}

.thumb-slider::-webkit-scrollbar{

    display:none;
}

.product-thumbnail{

    width:65px;

    height:65px;

    min-width:65px;

    object-fit:contain;

    background:white;

    border:2px solid #e6e6e6;

    border-radius:10px;

    padding:4px;

    cursor:pointer;

    transition:.2s;
}


.product-thumbnail.active{

    border-color:#00b7a8;

    box-shadow:
        0 0 0 3px rgba(0,183,168,.15);
}


.thumb-nav-btn:hover{

    background:#00a798;
}

/* =====================================
IMAGE POPUP
===================================== */

.image-modal{

    display:none;

    position:fixed;

    z-index:99999;

    left:0;
    top:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,0.85);

    justify-content:center;
    align-items:center;

    padding:20px;
}

.image-modal-content{

    max-width:90%;

    max-height:90vh;

    border-radius:12px;

    background:white;

    padding:10px;

    animation:zoomIn .25s ease;
}

.image-modal-close{

    position:absolute;

    top:20px;
    right:30px;

    color:white;

    font-size:40px;

    font-weight:bold;

    cursor:pointer;

    z-index:100000;
}

.image-modal-close:hover{

    opacity:.7;
}

@keyframes zoomIn{

    from{

        transform:scale(.8);

        opacity:0;
    }

    to{

        transform:scale(1);

        opacity:1;
    }
}

/* =====================================
Image pada detail responsive
===================================== */

@media (max-width:768px){

    .detail-top-section{

        flex-direction:column;
    }

    .detail-image-box{

        width:100%;
    }

    .detail-product-image{

        max-width:220px;
    }

    .product-thumbnail{

        width:55px;
        height:55px;
        min-width:55px;
    }
	

}

/* =====================================
DETAIL BUTTON
===================================== */

.btn-detail-modern{

    background: linear-gradient(
        135deg,
        #00b7a8 0%,
        #00cdbd 100%
    ) !important;

    color:white !important;

    border:none !important;

    border-radius:999px;

    padding:6px 14px;

    font-size:12px;
    font-weight:700;

    box-shadow:
        0 4px 10px rgba(0,183,168,0.25);

    transition:0.25s;
}

.btn-detail-modern:hover{

    transform:translateY(-1px);

    background: linear-gradient(
        135deg,
        #00a89b 0%,
        #00bfb0 100%
    ) !important;

    box-shadow:
        0 6px 14px rgba(0,183,168,0.35);
}

/* =====================================
DOWNLOAD BUTTON
===================================== */

.btn-download-modern{

    background:
        linear-gradient(
            135deg,
            #009688 0%,
            #00b7a8 100%
        ) !important;

    border:none !important;

    border-radius:10px !important;

    padding:8px 14px !important;
	
	font-size:12px !important;

    color:white !important;

    box-shadow:
        0 6px 18px rgba(0,183,168,0.18);

    transition:0.25s;

    width:auto !important;

    display:inline-block;
}

.btn-download-modern:hover{

    transform:translateY(-2px);

    box-shadow:
        0 8px 22px rgba(0,183,168,0.28);
}

#voice-btn.listening {
    background: #dc3545 !important;
    color: white !important;
    transform: scale(1.1);
}

#voice-btn{
    transform:none !important;
}

/* =====================================
FINAL OVERRIDE TABLE WATSONS
===================================== */

/* TABLE WRAPPER */
.recommend-table{

    border-collapse:separate !important;

    border-spacing:0 !important;

    overflow:hidden !important;

    border-radius:18px !important;

    background:#ffffff !important;

    border:1px solid #cfeee8 !important;

    box-shadow:
        0 4px 18px rgba(0,183,168,0.12) !important;
}

/* HEADER */
.recommend-table thead{

    background:
        linear-gradient(
            135deg,
            #00b7a8 0%,
            #00c8b8 50%,
            #1fd7c8 100%
        ) !important;
}

.recommend-table thead th{

    background:transparent !important;

    color:white !important;

    border:none !important;

    font-size:13px !important;

    font-weight:700 !important;

    padding:14px 10px !important;

    text-align:center !important;
}

/* BODY ROW */
.recommend-table tbody tr{

    background:#f7fffd !important;

    transition:0.2s;
}

/* ZEBRA */
.recommend-table tbody tr:nth-child(even){

    background:#ecfcf8 !important;
}

/* HOVER */
.recommend-table tbody tr:hover{

    background:#daf8f1 !important;
}

/* CELL */
.recommend-table td{

    border-color:#d8f3ee !important;

    color:#184640 !important;

    padding:12px 10px !important;

    vertical-align:middle !important;

    font-size:13px;
}

/* =====================================
DETAIL BUTTON FINAL
===================================== */

.btn-detail-modern{

    background:
        linear-gradient(
            135deg,
            #00b7a8 0%,
            #00cab9 100%
        ) !important;

    color:white !important;

    border:none !important;

    border-radius:999px !important;

    padding:6px 14px !important;

    font-size:12px !important;

    font-weight:700 !important;

    box-shadow:
        0 4px 10px rgba(0,183,168,0.22) !important;

    transition:0.25s !important;
}

.btn-detail-modern:hover{

    background:
        linear-gradient(
            135deg,
            #00a89a 0%,
            #00bfb0 100%
        ) !important;

    color:white !important;

    transform:translateY(-1px);

    box-shadow:
        0 6px 14px rgba(0,183,168,0.34) !important;
}

.btn-detail-modern,
.btn-detail-modern:link,
.btn-detail-modern:visited,
.btn-detail-modern:hover,
.btn-detail-modern:active{

    text-decoration:none !important;

    color:white !important;
}


.product-action-buttons{

    display:flex;

    gap:8px;

    margin-top:8px;
}

.product-action-buttons .btn-detail-modern{

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    cursor:pointer;

    line-height:1;
}


/* =====================================
TABLE BORDER LINE
===================================== */

/* GARIS SEMUA CELL */
.recommend-table td,
.recommend-table th{

    border:1px solid #cfeee8 !important;
}

/* GARIS ANTAR BARIS */
.recommend-table tbody tr{

    border-bottom:1px solid #d8f3ee !important;
}

/* GARIS HEADER */
.recommend-table thead tr{

    border-bottom:2px solid rgba(255,255,255,0.25) !important;
}

/* =====================================
DETAIL PAGE RESPONSIVE
===================================== */

.detail-container{
    max-width:1000px;
}

/* CARD */
.detail-card{

    border:none !important;

    border-radius:22px !important;

    overflow:hidden;

    background:white;

    box-shadow:
        0 6px 24px rgba(0,183,168,0.10) !important;
}

/* TITLE */
.detail-card h3{

    color:#124842;

    font-weight:800;
}

/* BUTTON BELI */
.btn-buy-watsons{

    background:
        linear-gradient(
            135deg,
            #00b7a8 0%,
            #00cdbd 100%
        ) !important;

    color:white !important;

    border:none !important;

    border-radius:14px !important;

    height:46px;

    min-width:180px;

    font-weight:700;

    box-shadow:
        0 4px 14px rgba(0,183,168,0.20);
}

.btn-buy-wa{

    background:
        linear-gradient(
            135deg,
            #13b46b 0%,
            #18c978 100%
        ) !important;

    color:white !important;

    border:none !important;

    border-radius:14px !important;

    height:46px;

    min-width:180px;

    font-weight:700;

    box-shadow:
        0 4px 14px rgba(24,201,120,0.20);
}

/* HOVER */
.btn-buy-watsons:hover,
.btn-buy-wa:hover{

    transform:translateY(-1px);

    color:white !important;
}

/* SECTION TITLE */
.detail-card h5{

    color:#00a99b;

    font-weight:700;
}

.ai-message {

    line-height: 1.8;

    font-size: 15px;

    color: #18443f;

    letter-spacing: 0.2px;

    word-break: break-word;
}

/* PARAGRAPH */

.ai-message p {
    margin-bottom: 14px;
}

/* LIST */

.ai-message ul,
.ai-message ol {

    margin-top: 10px;
    margin-bottom: 14px;

    padding-left: 22px;
}

.ai-message li {
    margin-bottom: 10px;
}

/* BOLD AI Replay / Jawaban ai*/

.ai-message strong {

    color: #0c6b61;

    font-weight: 700;
}

/* HEADING */

.ai-message h1,
.ai-message h2,
.ai-message h3 {

    font-size: 16px;

    margin-top: 16px;
    margin-bottom: 10px;

    color: #008374;

    font-weight: bold;
}

/* BLOCK */

.ai-message blockquote {

    border-left: 4px solid #21c7a8;

    padding-left: 12px;

    margin: 14px 0;

    color: #555;
}

/* SPACING */

.ai-message br {
    margin-bottom: 8px;
}

/* MOBILE */
@media (max-width:768px){

    .detail-container{

        padding-left:10px;
        padding-right:10px;
    }

    .detail-card{

        padding:18px !important;

        border-radius:18px !important;
    }

    /* TITLE */
    .detail-card h3{

        font-size:22px;

        line-height:1.35;
    }

    /* TEXT */
    .detail-card p,
    .detail-card li{

        font-size:14px;

        line-height:1.7;
    }

    /* BUTTON FULL WIDTH */
    .btn-buy-watsons,
    .btn-buy-wa{

        width:100% !important;

        min-width:100% !important;
    }

    /* BUTTON TOKO */
    #btn-find-stores,
    #btn-manual{

        width:100%;
    }

    /* PAYMENT CARD */
    #paymentDeliveryCollapse .card{

        padding:16px !important;
    }

    /* COLLAPSE BUTTON */
    [data-bs-target="#paymentDeliveryCollapse"]{

        font-size:12px;
    }
}

/* GROUP BUTTON TOKO */
.store-action-group{
    display:flex;
    gap:8px;
    align-items:center;
}

/* TOMBOL CARI TOKO */
#btn-find-stores{
    width:160px;
    height:38px;
    font-size:14px;
    padding:6px 10px;
}

/* DROPDOWN TOKO */
#store-dropdown-container{
    width:250px;
	height:38px;
}

#store-select{
    height:38px;
    font-size:14px;
}

.select2-container--default .select2-selection--single{
    height:38px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height:38px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow{
    height:38px !important;
}

/* =========================
AI RESPONSE FORMAT
========================= */

.ai-message{
    background: #f7faff;
    border-left: 4px solid #00bcd4;
    line-height: 1.7;
    color:#2b2b2b;
}

.ai-response p{
    margin-bottom:10px;
}

.ai-response ul{
    padding-left:20px;
    margin-bottom:12px;
}

.ai-response li{
    margin-bottom:6px;
}

.ai-response strong{
    color:#004aad;
}

.ai-response h1,
.ai-response h2,
.ai-response h3{
    font-size:16px;
    margin-top:12px;
    margin-bottom:10px;
    color:#004aad;
}

.ai-intro{
    font-weight:600;
    color:#0097a7;
    margin-bottom:10px;
}

/* =========================
TYPING INDICATOR
========================= */

.typing-indicator {
    display: flex;
    margin-bottom: 12px;
}

.typing-bubble {
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 14px 16px;
}

.typing-bubble span {
    width: 8px;
    height: 8px;
    background: #7a7a7a;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}

.typing-bubble span:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-bubble span:nth-child(2) {
    animation-delay: -0.16s;
}

.typing-bubble span:nth-child(3) {
    animation-delay: 0s;
}

@keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.typing{
    display:flex;
    gap:5px;
    align-items:center;
    padding:4px 2px;
}

.typing span{
    width:8px;
    height:8px;
    background:#999;
    border-radius:50%;
    animation: bounce 1.3s infinite;
}

.typing span:nth-child(2){
    animation-delay:0.2s;
}

.typing span:nth-child(3){
    animation-delay:0.4s;
}

@keyframes bounce{

    0%,80%,100%{
        transform:scale(0.7);
        opacity:0.5;
    }

    40%{
        transform:scale(1);
        opacity:1;
    }
}


/* =========================
CHATBOT THINKING
========================= */

.thinking-bubble{
    background:#f1f5ff;
    border-radius:18px;
    padding:14px;
    width:fit-content;
    max-width:80%;
}

.typing-indicator{
    display:flex;
    align-items:center;
    gap:5px;
    margin-bottom:6px;
}

.typing-indicator span{
    width:8px;
    height:8px;
    background:#4c6fff;
    border-radius:50%;
    animation: bounce 1.3s infinite ease-in-out;
}

.typing-indicator span:nth-child(2){
    animation-delay:0.2s;
}

.typing-indicator span:nth-child(3){
    animation-delay:0.4s;
}

@keyframes bounce{

    0%, 80%, 100%{
        transform:scale(0.8);
        opacity:0.5;
    }

    40%{
        transform:scale(1.2);
        opacity:1;
    }
}

.thinking-text{
    font-size:13px;
    color:#666;
}


/* =====================================
VOICE BUTTON FIX
===================================== */

#voice-btn{

    position:relative;

    z-index:9999 !important;

    pointer-events:auto !important;

    cursor:pointer;

    border:none !important;

    border-radius:50% !important;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
        linear-gradient(
            135deg,
            #00b7a8 0%,
            #00cdbd 100%
        ) !important;

    color:white !important;

    box-shadow:
        0 4px 12px rgba(0,183,168,0.25);

    transition:0.2s;
}

#voice-btn:hover{

    transform:scale(1.05);
}

/* SAAT RECORDING */
#voice-btn.listening{

    background:
        linear-gradient(
            135deg,
            #ff4b5c 0%,
            #ff6b7a 100%
        ) !important;

    animation:pulseVoice 1s infinite;
}

@keyframes pulseVoice{

    0%{
        box-shadow:0 0 0 0 rgba(255,75,92,0.5);
    }

    70%{
        box-shadow:0 0 0 12px rgba(255,75,92,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(255,75,92,0);
    }
}


/*scan barcode*/
.barcode-card{
    border:1px solid #ddd;
    border-radius:12px;
    padding:15px;
    background:#fff;
    margin-top:10px;
}

.barcode-title{
    font-weight:bold;
    font-size:16px;
    margin-bottom:10px;
}

.camera-btn {

    width: 42px;
    height: 42px;

    border: none;
    border-radius: 50%;

    background: #11c5bb;
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    font-size: 18px;

    transition: all .25s ease;

    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.camera-btn:hover {

    background: #0ea79e;

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(0,0,0,.20);
}

/*scan barcode*/
.barcode-modal{
    position:fixed;
    inset:0;

    background:rgba(0,0,0,0.7);

    display:none;

    justify-content:center;
    align-items:center;

    z-index:9999;
}

.barcode-box{
    background:#fff;

    width:90%;
    max-width:400px;

    padding:15px;

    border-radius:12px;
}


#close-scanner{
    float:right;

    border:none;

    background:none;

    font-size:24px;

    cursor:pointer;
}

.scanner-modal{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100vh;

    background:#000;

    z-index:999999;

    display:none;

    overflow-y:auto;

    flex-direction:column;
    align-items:center;

    padding-bottom:250px;
}

#reader{

    width:90%;

    max-width:400px;

    margin:20px auto;
}

.scanner-header{
    position:absolute;

    top:20px;
    left:20px;
    right:20px;

    z-index:100000;

    color:white;

    display:flex;
    justify-content:space-between;
    align-items:center;

    font-size:22px;
    font-weight:bold;
}

#closeScanner{
    border:none;
    background:red;
    color:white;

    width:40px;
    height:40px;

    border-radius:50%;
}

.scanner-info{
    position:absolute;

    bottom:40px;
    left:0;
    right:0;

    text-align:center;

    color:white;

    font-size:18px;

    z-index:100000;
}


.manual-title{
    color:white;
    margin-bottom:10px;
    font-size:14px;
}

.manual-barcode-input{
    width:80%;
    padding:10px;
    border-radius:10px;
    border:none;
    text-align:center;
}

.manual-barcode-box{
	width:90%;
    max-width:400px;

    margin:20px auto;

    text-align:center;

    position:relative;
}
#manual-barcode{

    width:100%;

    height:50px;

    border:none;

    border-radius:15px;

    padding:0 15px;

    font-size:16px;
}

#manual-barcode{

    width:100%;

    height:50px;

    border:none;

    border-radius:15px;

    padding:0 15px;

    font-size:16px;
}


#manual-search-btn{

    margin-top:10px;

    height:50px;

    padding:0 25px;

    border:none;

    border-radius:25px;

    background:#12c7b7;

    color:white;

    font-weight:bold;
}

/* .action-btn{

    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;
} */

.action-btn i,
.action-btn svg{

    font-size:18px !important;

    width:18px;
    height:18px;

    line-height:1;
}

.action-btn{

    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:none;
    border-radius:50%;

    background:#19c7b5;
    color:white;

    cursor:pointer;

    transition:.2s;
}

#voice-btn i,
#photo-product-btn i,
#barcode-btn i{
    font-size:18px !important;

    width:18px;
    height:18px;

    display:flex;
    align-items:center;
    justify-content:center;

    line-height:1;
}

.action-btn:hover{

    transform:scale(1.05);

    opacity:.9;
}

.promo-cell{

    color:#ff4d4f;

    font-weight:700;

    font-size:11px;

    line-height:1.3;
}

@media(max-width:576px){

    .barcode-actions{
        display:flex;
        flex-direction:row;
        gap:6px;
    }

    .barcode-actions a,
    .barcode-actions button{

        flex:1;

        min-width:0;

        text-align:center;

        font-size:12px;

        padding:8px 10px;
    }

}

/* ===========================
AI VOICE di Header
=========================== */
.voice-toggle-btn{

    position:absolute;

    right:14px;

    top:50%;

    transform:translateY(-50%);

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.18);

    color:white;

    font-size:20px;

    cursor:pointer;

    transition:.25s;

}

.voice-toggle-btn:hover{

    background:rgba(255,255,255,.28);

}

.voice-toggle-btn.muted{

    background:#ff5b5b;

}


/*=====================================
VOICE FLOATING BUTTON
=====================================*/

#voice-floating{

    position:absolute;

    right:20px;

    bottom:230px;

    z-index:999;
}

.voice-floating-btn{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#00b7a8;

    color:white;

    font-size:18px;

    cursor:pointer;

    box-shadow:
        0 4px 12px rgba(0,0,0,.18);

    transition:.25s;
}

.voice-floating-btn:hover{

    transform:scale(1.08);
}

.voice-floating-btn.muted{

    background:#ff5b5b;
}

.medical-warning-red{

    margin-top:10px;

    color:#dc3545;

    font-size:13px;

    font-weight:600;

    text-align:center;

    line-height:1.4;
}

/*=====================================
camera untuk capture produk
=====================================*/
.camera-modal{

    display:none;

    position:fixed;

    inset:0;

    background:black;

    z-index:99999;

    justify-content:center;

    align-items:center;

    flex-direction:column;
}

.camera-modal video{

    width:100%;
    max-width:500px;

    border-radius:10px;
}

.camera-footer{

    margin-top:15px;

    display:flex;

    gap:10px;
}



.ai-disclaimer{
    text-align: center;
    font-size: 12px;
    color: #6c757d;
    margin-bottom: 8px;
    padding: 0 10px;
}

.footer-links{
    text-align: center;
    font-size: 12px;
    color: #6c757d;
    padding-bottom: 10px;
}



/* =========================================
   PROMO BOX
========================================= */

.promo-box {

    margin-top: 10px;

    padding: 10px 12px;

    border: 1px solid #ffc107;

    border-radius: 8px;

    background: #fff8df;

    font-size: 13px;

    line-height: 1.5;

    min-width: 230px;

}


/* =========================================
   JUDUL PROMO
========================================= */

.promo-title {

    font-weight: 700;

    color: #d97706;

    margin-bottom: 3px;

}


/* =========================================
   DESKRIPSI PROMO
========================================= */

.promo-desc {

    font-weight: 500;

    color: #333;

    margin-bottom: 3px;

}


/* =========================================
   HARGA NORMAL
========================================= */

.promo-normal-price {

    color: #777;

    font-size: 12px;

}


/* =========================================
   HARGA NORMAL DICORET
========================================= */

.price-normal {

    text-decoration: line-through;

    text-decoration-thickness: 1.5px;

    color: #888;

    margin-left: 3px;

}


/* =========================================
   HARGA PROMO
========================================= */

.promo-sale-price {

    margin-top: 2px;

}


/* Label Harga Promo */

.promo-label {

    color: #333;

    font-size: 13px;

}


/* Harga Promo */

.price-promo {

    color: #d32f2f;

    font-size: 16px;

    font-weight: 800;

    margin-left: 3px;

}


/* =========================================
   HEMAT
========================================= */

.promo-saving {

    margin-top: 3px;

    color: #198754;

    font-size: 12px;

    font-weight: 600;

}


/* =========================================
   PROMO MEMBER
========================================= */

.promo-member {

    margin-top: 4px;

    color: #6f42c1;

    font-size: 12px;

    font-weight: 600;

}


/* =========================================
   PERIODE PROMO
========================================= */

.promo-period {

    margin-top: 5px;

    font-size: 10px;

    color: #777;

}

.promo-note {
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px solid rgba(0,0,0,0.08);

    font-size: 10px;
    line-height: 1.3;

    color: #333;
    font-style: italic;
}

/* =====================================================
   TIPS INPUT KELUHAN BESTI
===================================================== */

.besti-input-tip {
    background: #f5f9ff;
    border: 1px solid #dbe9f8;
    border-radius: 10px;
    padding: 8px 11px;
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.45;
    color: #4a5568;
}

.besti-input-tip .tip-title {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    color: #004aad;
    margin-bottom: 2px;
}

.besti-input-tip .tip-icon {
    font-size: 12px;
}

.besti-input-tip .tip-text {
    margin: 0;
}

.besti-input-tip .tip-example {
    margin-top: 3px;
    color: #5f6b7a;
}


.besti-input-tip .tip-example em {
    transition: opacity 0.25s ease;
}

.besti-input-tip strong {
    color: #374151;
    font-weight: 600;
}

/* Mobile */
@media (max-width: 576px) {

    .besti-input-tip {
        padding: 7px 9px;
        margin-bottom: 7px;
        font-size: 11.5px;
        line-height: 1.4;
    }

}


/* =====================================================
   BESTI LOCATION PERMISSION MODAL
   ===================================================== */

.location-permission-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 20px;
    background: rgba(0, 0, 0, 0.55);

    box-sizing: border-box;
}

.location-permission-overlay.active {
    display: flex;
}

.location-permission-card {
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;

    background: #ffffff;
    color: #333333;

    padding: 28px;
    border-radius: 16px;

    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);

    text-align: center;
    box-sizing: border-box;
}

.location-permission-icon {
    font-size: 38px;
    margin-bottom: 12px;
}

.location-permission-card h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 14px;
}

.location-permission-card p {
    font-size: 14px;
    line-height: 1.6;
}

.location-permission-info {
    background: #f3f7fc;
    border-radius: 8px;
    padding: 12px;
    margin: 16px 0;
    font-size: 12px;
    line-height: 1.6;
}

.location-permission-status {
    display: none;
    margin: 12px 0;
    font-size: 13px;
    line-height: 1.5;
}

.location-permission-status.error,
.location-permission-status.info,
.location-permission-status.success {
    display: block;
}

.location-permission-status.error {
    color: #b42318;
}

.location-permission-status.info {
    color: #175cd3;
}

.location-permission-status.success {
    color: #067647;
}

.location-permission-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.location-btn {
    width: 100%;
    min-height: 44px;
    border-radius: 8px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 14px;
}

.location-btn-primary {
    color: #ffffff;
    background: #087f8c;
    border: 1px solid #087f8c;
}

.location-btn-primary:disabled {
    opacity: 0.65;
    cursor: wait;
}

.location-btn-secondary {
    color: #444444;
    background: #ffffff;
    border: 1px solid #cccccc;
}

body.location-modal-open {
    overflow: hidden;
}

@media (max-width: 480px) {
    .location-permission-card {
        padding: 22px 18px;
    }
}