body{ font-family: "Roboto", sans-serif; font-size: 16px; background: #fff; }
img { max-width: 100%; }
.link-haroct, .text-haroct { color: #5C2D91; }
.bg-haroct, .bg-haroct:focus { background-color: #5C2D91; color: #fff; }
.bg-nav-premium, .bg-nav-premium:focus { background: linear-gradient(90deg, #12043F 0%, #5C2D91 100%); color: #fff; }
.bg-haroct-2 { background-color: #E0E0F3; }
.bg-haroct-3 { background: #F7F7FC; }
.bg-haroct-3.active { background-color: #E0E0F3; border: none; }
.bg-haroct-3:focus { border: none; }
.btn-haroct { background-color: #5C2D91; color: #fff; }
.btn-haroct:hover { background-color: #4e277a; color: #fff; }
.border-haroct { border-color: #5C2D91; }
.bg-btm { background-image: url('../images/bg-btm.png'); background-repeat: no-repeat; background-position: bottom center; }
.border-form { border-color: #132f4b; border-left: none; }
.iti { width: 100%; }
.icon-nav { position: relative; padding: 8px 2px 0 0; }
.notification-count { position: absolute; top: 0; right: 0; background: #FF0000; color: #fff; border-radius: 50%; text-align: center; font-size: 9px; width: 15px; height: 15px; line-height: 15px; }
.nav .right img { width: 30px; max-height: 30px; }
.nav .search-input { background-image: url('../images/icon-search.png'); background-position: right .75rem center; background-repeat: no-repeat; padding-right: 2.75rem; }
.nav-welcome .nav-item:first-child a { border-radius: .25rem 0 0 .25rem; }
.nav-welcome .nav-item:last-child a { border-radius: 0 .25rem .25rem 0; }
.nav-welcome .nav-item .nav-link { border-color: #ECECEC; }
.nav-welcome .nav-item .nav-link.active { border: 2px solid #5C2D91; }
.nav-welcome .nav-item .nav-link img { filter: grayscale(100%); }
.nav-welcome .nav-item .nav-link.active img { filter: grayscale(  0%); }
.footer { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #ffffff; box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.1); z-index: 1000; }
.footer a { display: block; text-align: center; font-weight: bold; }
.footer a img { display: block; max-height: 35px; margin: 0 auto 5px; }
.homepage .main-link a img { max-height: 100px; }
.homepage .second-link a img { max-height: 50px; }
.product-grid .image a,
.shop-grid .image a,
.avatar a { display: grid; place-items: center; width: 160px; height: 160px; overflow: hidden; border-radius: 5px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); position: relative; }
.avatar a i { position: absolute; bottom: 3px; color: #5C2D91; background: #fff; border: 1px solid #DDD; border-radius: 50%; width: 25px; height: 25px; line-height: 25px; text-align: center; }
.product-grid .image a img,
.shop-grid .image a img,
.avatar a img { min-width: 100%; min-height: 100%; object-fit: cover; object-position: center; }
.shop-grid .image a { width: 100px; height: 100px; border-radius: 50%; margin: auto; text-align: center; }
.avatar a { width: 50px; height: 50px; border-radius: 50%; margin: auto; text-align: center; }
.product-grid .title, .shop-grid .title { font-size: 16px; margin-top: 2px; }
.shop-grid .title { text-align: center; }
.product-grid .rating { color: #868889; font-size: 12px; }
.product-grid .rating i { margin-right: 3px; }
.product-grid .price { color: #5C2D91; }
.seller-rating-grid .row { background: #FFF6E6; }
.seller-rating-grid span { font-size: 11px; margin-right: 7px; }
.fs-7 { font-size: 14px; }
.cursor-pointer { cursor: pointer; }
.border-0 { outline: none; box-shadow: none; }
*:focus {
    outline: none !important;
    box-shadow: none !important;
}

.tnc-list {
    max-height: 60vh;
    overflow-y: auto;
}

/* Custom scrollbar for TNC content */
.tnc-list::-webkit-scrollbar {
    width: 8px;
}

.tnc-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.tnc-list::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.tnc-list::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Signature area styles */
.signature-input {
    position: relative;
    width: 100%;
    height: 200px;
}

.signature-input canvas {
    border: 1px solid #ccc;
    width: 100%;
    height: 140px;
}

/* Button states */
.submit-signature.disabled {
    opacity: 0.65;
    pointer-events: none;
}

@media screen and (max-width: 767px) {
    .product-grid .image a { width: 100px; height: 100px; }
    .shop-grid .image a { width: 60px; height: 60px; }
}

.table .thead-haroct th {
    color: #5C2D91;
    background-color: #E0E0F3;
    border-color: #E0E0F3;
  }

.radio-box {
    margin: 10px 0;
    text-align: center;
    transition: border-color 0.3s;
}

.radio-box input[type="radio"] {
    display: none;
}

.radio-box input[type="radio"] + label {
    border: 2px solid #eee;
    border-radius: 5px;
    transition: border 0.3s ease;
}

.radio-box input[type="radio"] + label img {
    filter: grayscale(100%);
    transition: filter 0.5s ease;
    max-height: 140px;
}

.radio-box input[type="radio"]:checked + label {
    border: 2px solid #5C2D91;
    color: #5C2D91;
    font-weight: bold;
}

.radio-box input[type="radio"]:checked + label img {
    filter: grayscale(0%);
}

.radio-box input[type="radio"]:checked ~ .radio-box {
    border-color: #5C2D91;
}

.radio-box label {
    display: block;
    cursor: pointer;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

.toggle-btn-group {
    overflow: hidden;
}

.toggle-btn {
    border: none;
    background-color: #F7F7FC;
    color: #333;
    border-radius: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.toggle-btn:hover {
    background-color: #e2e2e2;
    color: #333;
}

.btn-check:checked + .toggle-btn {
    background-color: #5C2D91; 
    color: #fff; 
}

.btn-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

.word-suggestion {
    display: none;
    position: absolute;
    left: 0;
    right: 20%;
    background-color: white;
    border-top: 1px solid #ccc;
    z-index: 1000;
}