/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}
/* ১. ড্রপডাউন পুরোপুরি হাইড করা */
.variations select {
    display: none !important;
}

/* ২. সোয়াচ কন্টেইনার (Side by Side) */
.os-swatches-container {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    flex-wrap: wrap;
}

/* ৩. ছোট বক্স ডিজাইন (Modern Vibe) */
.os-swatch-item {
    min-width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    background: #fff;
    color: var(--bh-soil);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    border-radius: 6px; /* হালকা রাউন্ডেড */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    text-transform: uppercase;
}

/* ৪. হোভার করলে কি হবে */
.os-swatch-item:hover {
    border-color: #0A6B5E;
    color: #0A6B5E;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* ৫. সিলেক্টেড বক্স (Selected State) */
.os-swatch-item.selected {
    background-color: #0A6B5E !important; /* আপনার ব্র্যান্ড গ্রিন */
    border-color: #0A6B5E !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(10, 107, 94, 0.3);
}

/* ৬. লেবেল স্টাইল (Size: ) */
.variations td.label {
    padding-bottom: 10px !important;
    vertical-align: middle;
}

.variations td.label label {
    font-size: 16px;
    font-weight: 800;
    color: var(--bh-bark);
    text-transform: capitalize;
}