.text-uppercase { text-transform: uppercase !important; }
.text-transform-none { text-transform: none !important; }
.text-xs { font-size: 80% }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-bold-medium { font-weight: 500 !important; }
.text-bold { font-weight: bold !important; }
.text-normal { font-weight: normal !important; }
.text-underline { text-decoration: underline !important; }
.text-line-through { text-decoration: line-through !important; }
.text-italic { font-style: italic; }

.text-color-white { color: #fff !important; }
.text-color-red { color: #e30613 !important; }
.text-color-green-light { color: #7ed728 !important; }
.text-color-green { color: green !important; }
.text-color-orange { color: #ef7a30 !important; }
.text-color-grey { color: #4C4C4C !important; }
.text-color-grey-light { color: #cfcece !important; }
.text-color-black { color: #000 !important; }
.text-color-red-orange-gradient svg * { fill: url(#lgrad); }
.text-color-deep-teal { color: #d8b46a !important; }

.cursor-pointer { cursor: pointer; }
.cursor-move { cursor: move; }

.bg-black { background-color: #000 !important; }
.bg-grey { background-color: #4C4C4C !important; }
.bg-grey-light { background-color: #EEEFF1 !important; }
.bg-white { background-color: #fff !important; }
.bg-orange { background-color: #ef7a30 !important; }
.bg-graphite { background-color: #c3c3c3 !important; }
.bg-marine { background-color: #212E55 !important; }
.bg-marine-dark { background-color: #16163f !important; }
.bg-red { background-color: #e30613 !important; }
.bg-gold { background-color: #fcf4e5 !important; }
.bg-gold td {
    border-color: #d8b46a !important;
}

.bg-gold .btn.btn-default {
    background-color: #fcf4e5 !important;
    border-color: #d8b46a !important;
}

.margin-top-5 { margin-top: -5px; }
.margin-top5 { margin-top: 5px; }
.margin-top10 { margin-top: 10px; }
.margin-top15 { margin-top: 15px; }
.margin-top20 { margin-top: 20px; }
.margin-top25 { margin-top: 25px; }
.margin-top30 { margin-top: 30px; }
.margin-top50 { margin-top: 50px; }
.margin-bottom0 { margin-bottom: 0; }
.margin-bottom5 { margin-bottom: 5px; }
.margin-bottom10 { margin-bottom: 10px; }
.margin-bottom15 { margin-bottom: 15px; }
.margin-bottom20 { margin-bottom: 20px; }
.margin-bottom30 { margin-bottom: 30px; }
.margin-bottom35 { margin-bottom: 35px; }
.margin-bottom40 { margin-bottom: 40px; }
.margin-bottom45 { margin-bottom: 45px; }
.margin-bottom50 { margin-bottom: 50px; }
.margin-right15 { margin-right: 15px; }
.margin-left2 { margin-left: 2px; }
.margin-left5 { margin-left: 5px; }
.margin-left10 { margin-left: 10px; }
.margin-left17 { margin-left: 17px; }
.margin-left20 { margin-left: 20px; }
.margin-left25 { margin-left: 25px; }
.margin-right2 { margin-right: 2px; }
.margin-right3 { margin-right: 3px; }
.margin-right5 { margin-right: 5px; }
.margin-right10 { margin-right: 10px; }
.margin-right20 { margin-right: 20px; }

.padding-top5 { padding-top: 5px; }
.padding-top10 { padding-top: 10px; }
.padding-top20 { padding-top: 20px; }
.padding-top25 { padding-top: 25px; }
.padding-top30 { padding-top: 30px; }
.padding-top35 { padding-top: 35px; }
.padding-top40 { padding-top: 40px; }
.padding-top45 { padding-top: 45px; }
.padding-top50 { padding-top: 50px; }
.padding-bottom5 { padding-bottom: 5px; }
.padding-bottom20 { padding-bottom: 20px; }
.padding-left0 { padding-left: 0; }
.padding-left10 { padding-left: 10px !important; }
.padding-left15 { padding-left: 15px !important; }
.padding-left25 { padding-left: 25px !important; }
.padding-right0 { padding-right: 0; }
.padding-right15 { padding-right: 15px !important; }
.padding-right25 { padding-right: 25px !important; }

.fontsize9 { font-size: 9px !important; }
.fontsize10 { font-size: 10px !important; }
.fontsize11 { font-size: 11px !important; }
.fontsize12 { font-size: 12px !important; }
.fontsize13 { font-size: 13px !important; }
.fontsize14 { font-size: 14px !important; }
.fontsize15 { font-size: 15px !important; }
.fontsize16 { font-size: 16px !important; }
.fontsize18 { font-size: 18px !important; }
.fontsize20 { font-size: 20px !important; }
.fontsize22 { font-size: 22px !important; }
.fontsize25 { font-size: 25px !important; }
.fontsize28 { font-size: 28px !important; }
.fontsize32 { font-size: 32px !important; }
.fontsize35 { font-size: 35px !important; }

/* === Text Size Helpers (10px base) === */
.text-xs      { font-size: 1.2rem; }   /* 12px */
.text-sm      { font-size: 1.4rem; }   /* 14px */
.text-md      { font-size: 1.6rem; }   /* 16px */
.text-lg      { font-size: 2rem;   }   /* 20px */
.text-xl      { font-size: 2.4rem; }   /* 24px */
.text-xxl     { font-size: 3.2rem; }   /* 32px */
.text-display { font-size: 4.8rem; }   /* 48px */

.line-height20 { line-height: 20px; }

.width100percent { width: 100%; }
.width-90px { width: 90px; }

.border0 { border: 0 !important; }

.alert-form { padding: 4px; margin: 2px 0 0 0; line-height: 1.42857143; font-size: 12px; }

table.table-no-border td { border: 0 !important; }
table.table-grey > tbody > tr > th, table.table-grey > thead > tr > th { background-color: #e6e6e6; }

.tab-error { background-color: #f2dede !important; color: #a94442 !important; border-color: #ebccd1 !important; border-bottom-color: #ddd !important; }
.active .tab-error{ border-bottom-color: transparent !important; }

.btn { white-space: normal; }

table .table-sort-td { width: 30px; }
table[data-sortable="1"] tbody .ui-sortable-placeholder { background-color: #eee; }

.alert-default { color: #333; background-color: #f2f2f2; border-color: #cccccc; }
.alert-default a { color: #000; }

.cursor-updown { cursor: move !important; }

.input-group-addon-search { padding:0; background-color: #fff; border-right: 0; }
.input-group-addon-search select { border: 0; height: 30px; }

.row-equal { display: flex; flex-wrap: wrap; }
.vertical-align-middle { vertical-align: middle !important; }

@media (min-width: 1200px) and (max-width: 1599px) {

}

@media (min-width: 992px) and (max-width: 1199px) {

}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {

}

/* Extra small devices (phones, less than 768px) */
@media (max-width: 767px) {
    .fontsize20-mobile { font-size: 20px !important; }
    .fontsize14-mobile { font-size: 14px !important; }

    .text-center-mobile { text-align: center; }
}


/* Switch container */
.switch-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #def3f2;
    padding: 6px 12px;
    border-radius: 6px;       
    font-weight: 500;
    font-size: 14px;
    color: #2e7572 !important;
    box-sizing: border-box;
    margin: 7px;
}

/* Switch text */
.switch-wrapper .text-sm {
    margin: 0;
    line-height: 1;           
}

/* Switch slider */
.switch-slider {
    position: relative;
    display: inline-block;
    width: 50px;   
    height: 24px;
    margin: 0;
}

.switch-slider input {
    display: none;
}

.slider-span {
    position: absolute;
    cursor: pointer;
    background-color: #ccc; 
    top: 0; left: 0;
    right: 0; bottom: 0;
    transition: 0.4s;
    border-radius: 26px;
}

/* Circle inside switch */
.slider-span:before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

/* Checked state */
input:checked + .slider-span {
    background-color: #ff4d4f;
}

input:checked + .slider-span:before {
    transform: translateX(26px);
}

.switch-slider:hover .slider-span {
    box-shadow: 0 0 6px rgba(255, 77, 79, 0.5);
}


.cursor-disabled {
  cursor: not-allowed !important;
  background-color: #eee;
  pointer-events: none;
}

.product-specifications {
  margin-top: 10px;
  text-align: left;         /* keep left-aligned */
  max-width: 600px;         /* prevents it from stretching across the whole page */
}

.spec-item {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 6px;
  line-height: 1.5;
}

.spec-label {
  font-weight: 600;
  min-width: 160px;         /* label column width for alignment */
  color: #2e7572;           /* optional: highlight label */
}

.spec-value {
  flex: 1;
  color: #231f20;
}

.small {
    font-size: 0.95em !important;
}