/* === TYPOGRAPHY === */
#BuilderMasterApp .content {
    color: black !important;
}
#BuilderMasterApp .slider-title{
	color: black !important;
}
#BuilderMasterApp canvas#mcanvas {
    border: 2px solid black !important;
}
#BuilderMasterApp{
    .slick-prev {
        left: -25px;
    }
    .slick-next {
        right: -25px;
    }
    .content h5 {
        font-size: 0.8rem;
        letter-spacing: 0em !important;
        margin-bottom: 15px;
    }
}
#BuilderMasterApp .content h4 {
    font-size: 0.7rem;
    font-weight: bold;
}
#BuilderMasterApp canvas#mcanvas {
    border: 0.5px solid #c2bbbb !important;
}
#BuilderMasterApp .shape-item-selected {
    border: 0.5px solid #c16408 !important;
}
#BuilderMasterApp .center-stone-selector button[style*="rgb(193, 100, 8)"] {
    border: 0.5px solid rgb(193, 100, 8) !important;
    color: rgb(193, 100, 8) !important;
}
#BuilderMasterApp .appointment-schdule {
    border: 0.5px solid rgb(193, 100, 8) !important;
}

#BuilderMasterApp .form-check-input:checked {
    background-color:rgb(193, 100, 8) !important;
    border-color: rgb(193, 100, 8) !important;
}
/* === MOBILE RESPONSIVE === */
@media (max-width: 1024px) {
    .rb-layout {
        grid-template-columns: 1fr;
    }
    .rb-sidebar {
        position: static;
        border-left: none;
        border-top: 1px solid var(--border);
        min-height: unset;
    }
    .rb-main {
        border-right: none;
    }
    .rb-final-wrap {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .rb-main {
        padding: 24px 16px;
    }
    .rb-sidebar {
        padding: 24px 16px;
    }
    .rb-banner {
        padding: 20px 16px;
    }
    .rb-banner__title {
        font-size: 22px;
    }
    .ring-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .shape-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .filter-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .rb-nav-btns {
        flex-direction: column;
    }
    .rb-nav-btns .rb-btn {
        flex: unset;
        width: 100%;
    }
    .rb-final-wrap {
        gap: 24px;
    }

    #BuilderMasterApp ul.text-description {
        padding-left: 0px;
        margin-left: 0px;
    }

    /* Ring builder app — full width, touch-friendly on mobile */
    #BuilderMasterApp {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden;
    }
    #BuilderMasterApp canvas#mcanvas {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }
    #BuilderMasterApp button:not(.slick-prev):not(.slick-next),
    #BuilderMasterApp .btn {
        min-height: 44px;
        min-width: 44px;
    }
}