/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 9 May, 2025, 7:36:28 PM
    Author     : cis
*/

/* ===== Global Product Image Styling ===== */
.product-image-container {
    width: 70px !important;
    height: 70px !important;
    /*background-color: #000000;  Black background */
    padding: 0px;
    border-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto; /* Center the container */
}

.product-image {
    max-width: 100% !important; /* Ensure image fits */
    max-height: 100% !important;
    object-fit: contain !important; /* Maintain aspect ratio */
    /*border: 1px solid #333 !important;*/
    border-radius: 0px;
    background-color: #000000; /* Fallback for transparent images */
}

.product-image-container,
.product-image {
    background: transparent !important; /* or simply remove the line */
}


/* Fix column width for all pages */
th.product-image-cell,
td.product-image-cell {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    padding: 0 !important;
    vertical-align: middle !important;
    text-align: center !important;
}

/* Default image styling for broken images */
.product-image[src*="default-product.png"] {
    padding: 8px;
    /*background-color: #000000 !important;*/
}


/* Product image upload styling */
.product-image-upload {
    padding: 15px;
    text-align: center;
}

.product-image-preview {
    max-width: 150px;
    margin-bottom: 10px;
    display: block;
    /*border: 1px solid #ddd;*/
    padding: 2px;
    border-radius: 4px;
}

/* Optional: If you need to match the profile upload's button styling */
#productImg {
    display: block;
    margin: 0 auto;
    border: none;
    padding: 5px 0;
}



/*========OfferPicture===============*/

/* Common styles for both images and videos */
.seller-offer-picture-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 10px;
}

.seller-offer-picture-thumb {
    width: 250px;
    height: 200px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.seller-offer-picture-thumb:hover {
    box-shadow: 0 30px 6px rgba(255, 165, 0, 1);
}

/* Image specific styles */
.seller-offer-picture-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Video specific styles */
.video-thumb {
    background-color: #f5f5f5;
}

.video-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.8);
    font-size: 30px;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.video-play-icon i {
    transition: all 0.2s ease;
}

.video-thumb:hover .video-play-icon i {
    color: #fff;
    transform: scale(1.1);
}


/* ============This is the sellerOfferPictureuploding =================*/

/* Main container */
.offer-media-container {
    padding: 10px;
}

/* Thumbnails grid */
.offer-media-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

/* Individual thumbnail */
.offer-media-thumb {
    width: 120px;
    height: 120px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    background: #fff;
}

.offer-media-thumb:hover {
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

/* Video specific styles */
.offer-video-thumb {
    background-color: #f8f8f8;
}

.offer-video-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.offer-video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

.offer-video-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255,255,255,0.9);
    font-size: 28px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
    pointer-events: none;
}

/* Image styles */
.offer-media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

/* Remove button */
.offer-remove-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: all 0.2s ease;
    z-index: 10;
}

.offer-remove-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .offer-media-thumb {
        width: 100px;
        height: 100px;
    }
}



/* Dimming effect styles */
.content-section {
    transition: opacity 0.3s ease-in-out;
}

.content-section.dimmed {
    opacity: 0.3;
    pointer-events: none;
}

.content-section.focused {
    opacity: 1;
    pointer-events: auto;
    position: relative;
    z-index: 10;
}

.seller-offer-picture-thumb {
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

.seller-offer-picture-thumb:hover {
    transform: scale(1.05);
}

.video-container {
    transition: transform 0.2s ease-in-out;
}

.video-container:hover {
    transform: scale(1.05);
}

.auction-status-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.offer-count-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: #dc3545 !important; /* Force red color */
    color: white !important;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    font-size: 1.2em;
    /*font-weight: bold;*/
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    border: 1px solid red;
    line-height: 1;
    min-width: 20px;
    text-align: center;
}

.offer-count-badge.loading {
    background-color: #dc3545 !important;
    animation: pulse 1.5s ease-in-out infinite alternate;
}

@keyframes pulse {
    from {
        opacity: 0.6;
    }
    to {
        opacity: 1;
    }
}

td .auction-status-wrapper {
    overflow: visible;
}

/* Ensure the badge stays visible */
.auction-status-wrapper .offer-count-badge {
    display: grid !important;
}

.offer-count-badge {
    display: none !important;
}

/* small gap between length menu & broker box */
#datatable_length .broker-filter-inline {
    margin-inline-start:40px;
    display: inline-block;
}

.broker-select-colored{
    background:#fff;
    color:#000000;
    border:3px solid #F9851A !important;
    width:180px !important;
    height:35px;
    line-height:35px;
    text-align: center !important; /* Horizontal centering */
    margin:10px 6px;
}

/*_____________________________________ CSS for Groups: vegetables, Fruits, and Dates _________________________________*/

.group-filter-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 12px;
    margin-bottom: 0px;
    padding: 0 !important;
    /*transform: translateX(-10px);*/
    /*direction: rtl;*/
}

.group-filter-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 140px;
    background: none;
    border: none;
    padding: 0;
    box-sizing: border-box;
    transition: none; /* Prevent animation/flicker */
}

.group-filter-btn img {
    height: 70px;
    margin: 0;
    display: block;
}

.group-label {
    margin-top: 8px;
    font-size: 16px;
    font-weight: 600; /* Match active to avoid shift */
    color: #444;
    text-align: center;
    line-height: 1.2;
}

.group-filter-btn.active {
    border: none;
    padding: 0;
}

/* Active underline only */
.group-filter-btn.active::after {
    content: '';
    position: absolute;
    bottom: 6px; /* Adjust distance from bottom of button */
    left: 50%;
    transform: translateX(-50%);
    width: 78px; /* Fixed underline width */
    height: 4px;
    background-color: #F9851A;
    border-radius: 2px;
}

/* Optional color change for label */
.group-filter-btn.active .group-label {
    /*border-bottom: 4px solid #d35400;*/
    color: #333;
}

/* Force override for 'ALL' button */
/* Match base group button dimensions */
.group-filter-btn--all {
    width: 120px;
    height: 140px;
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    transition: none;
}

/* Inside the ALL button – the circle */
.group-filter-btn--all img {
    width: 70px;
    height: 70px;
    padding: 0;
    box-sizing: border-box;
    background-color: #fffdf8;
    transition: none;
    transform: scale(0.5);
}

.group-filter-btn.active .group-label .fa,
.group-filter-btn.active .group-label .checkmark,
.group-filter-btn.active .group-label svg,
.group-filter-btn.active .group-label i {
    display: none !important;
}

.refresh-header {
    background: #f0f0f0;
    border:  2px solid #9e9e9e;
    border-radius: 50%;
    width: 40px !important;
    height: 40px !important ;
    color: #333;
    cursor: pointer;
    display: flex ;
    align-items: center;
    justify-content: center;
    /*font-size: 26px;*/
    transition: background-color 0.2s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    display:  inline-flex;
    vertical-align: top;
    font-size: 20px;
    margin-top: 5px !important;
}
.refresh-header i {
    font-size: 22px;  /* Explicitly increase icon size */
    letter-spacing: 1px; /* Space out glyph if needed */
}


.label.label-success{
}

.refresh-headerMB {
    background: #f0f0f0;
    border: 2px solid #9e9e9e;
    border-radius: 50%;
    width: 35px !important;
    height: 35px !important;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* font-size: 26px; */
    transition: background-color 0.2s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    display: inline-flex;
    vertical-align: top;
    font-size: 20px;
    margin-top: 6px !important;

}

/* ================= Header LTR/RTL mirroring (robust) =================
   EN:  logo left  | login/auth right
   AR:  logo right | login/auth left
   Adjust class names in the :is(...) lists if yours differ.
*/

/* 1) Make the header bar a flex row */
.main_header :is(.header-inner, .nav-wrapper, .topbar, .container, .row) {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 2) Push the auth/login bucket to the far edge using logical margin.
      Works for both LTR and RTL automatically. */
.main_header :is(.auth, .auth-links, .user-actions, .right-tools, .top-right, .login-area) {
    margin-inline-start: auto;   /* in LTR pushes to right; in RTL pushes to left */
}

/* 3) Make the nav list read in the correct direction */
html[lang="en"] .main_header :is(nav, .navigation, .main-nav, .menu) :is(ul, .nav, .menu-list) {
    direction: ltr;
    text-align: left;
}
html[lang="ar"] .main_header :is(nav, .navigation, .main-nav, .menu) :is(ul, .nav, .menu-list) {
    direction: rtl;
    text-align: right;
}

/* 4) If your theme still uses floats anywhere, provide a gentle fallback */
html[lang="en"] .main_header :is(.logo, .brand, .site-logo) {
    float: left;
}
html[lang="en"] .main_header :is(.auth, .auth-links, .user-actions, .right-tools, .top-right, .login-area) {
    float: right;
}

html[lang="ar"] .main_header :is(.logo, .brand, .site-logo) {
    float: right;
}
html[lang="ar"] .main_header :is(.auth, .auth-links, .user-actions, .right-tools, .top-right, .login-area) {
    float: left;
}

/* Spacing that works in both directions */
.main_header :is(.logo, .brand, .site-logo,
.auth, .auth-links, .user-actions, .right-tools, .top-right, .login-area) {
    margin-inline: 6px;
}
/* ===== FAQ accordion RTL fixes ===== */
html[lang="ar"] .accordion {
    /*direction: rtl;*/        /* make the button text run RTL */
    /*text-align: right;*/     /* align text on the right */
    /*text-indent: 0;*/        /* undo the LTR negative indent */
    /*padding: 15px 50px;*/    /* keep room for the icon on the left now */
    /*unicode-bidi: plaintext;*/ /* improves digits/punctuation ordering */
    text-align: right;
}

html[lang="ar"] .accordion::after {
    left: 0;               /* move the + / – icon to the left */
    right: auto;
}

/* ==== Fix DataTable column widths (Day Auctions) ==== */
#datatable {
    table-layout: fixed;
}

#datatable th,
#datatable td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* keep product image column from stretching */
#datatable td:nth-child(6) img {
    height: 36px;
    width: auto;
    max-width: 100%;
}