/* Styles only clg geneticts custom system*/

/* ===================== ADMIN DASHBOARD ======================= */
.clg-dashboard-container {
    display: flex;
    min-height: 800px;
    margin: 20px 0;
    font-family: 'Fira Sans', sans-serif;
}
.clg-sidebar {
    width: 248px;
    color: #333;
    background: transparent;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}
.clg-sidebar.collapsed {
    width: 64px;
}
.clg-sidebar-header {
    padding: 15px;
    display: flex;
    justify-content: flex-end;
    background: linear-gradient(90deg, #0296DB 0%, #6256C4 100%);
}
.clg-sidebar .clg-toggle-btn {
    color: #fff;
    background: transparent;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 4px;
}
.clg-sidebar-inner {
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
}
.clg-sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.clg-sidebar-nav li {
    position: relative;
    transition: 400ms;
}
.clg-sidebar-nav li a {
    display: flex;
    color: #333;
    align-items: center;
    padding: 14px 20px;
    text-decoration: none !important;
    white-space: nowrap;
    background: white;
}
.clg-sidebar-nav li.active a,
.clg-sidebar-nav li a:hover {
    color: #1aa3e0;
background: #F5FBFE;

}
.clg-sidebar-nav li.active a::before {
  content: '';
  background: linear-gradient(180deg, #0098DB 0%, #6256C4 100%);
  position: absolute;
  width: 0;
  height: 100%;
  left: 0;
}
.clg-sidebar-nav li.active a::before,
.clg-sidebar-nav li a:hover::before {
    width: 4px;
    transition: 200ms;
}
.clg-sidebar.collapsed .clg-sidebar-nav li.active a,
.clg-sidebar.collapsed .clg-sidebar-nav li a:hover {
  color: #fff;
  background: #f7f7f7;
}

.clg-sidebar-nav .icon {
    margin-right: 14px;
    font-size: 1.2em;
    width: 24px;
    text-align: center;
}
.clg-sidebar-nav .icon svg{
    stroke: #808080;
    fill: none;
    transition: 300ms;
}
.clg-sidebar-nav li.active .icon svg,
.clg-sidebar-nav li a:hover .icon svg {
    stroke: #1aa3e0;
}

.clg-sidebar-nav .icon svg path {
    stroke: inherit !important;
}

.clg-sidebar.collapsed .label {
    display: none;
}
.clg-sidebar.collapsed .clg-sidebar-nav .icon {
    margin-right: 0;
}
div.clg-dashboard-container .button {
    color: #fff;
    background: #0098DB;
    text-decoration: none;
    font-weight: 400;
    padding: 8px 14px;
    border-radius: 8px;
    line-height: 24px;
}
div.clg-dashboard-container .button:hover,
div.clg-dashboard-container .button:focus {
    background: #6256c4;
    transition: 400ms;
}
.clg-main-content {
    flex-grow: 1;
    padding: 30px;
    background: transparent;
    overflow-x: auto;
}
.clg-main-content .dashboard-title,
.clg-main-content .clg-view-header h2 {
    color: #1C4376;
    font-weight: 600;
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 2.4rem;
}
.clg-filter-bar {
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 24px;
    border: 1px solid #E5E7EB;
}
.clg-filter-form {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.clg-filter-form .search-group {
    display: flex;
    flex-grow: 1;
    width: 100%;
}
.clg-filter-form .search-group input {
    flex-grow: 1;
    padding: 8px 15px;
    border: 1px solid #ced4da;
    border-radius: 8px 0 0 8px !important;
}
.clg-filter-form .search-btn {
    background: #007cba;
    color: #fff;
    font-weight: 400;
    border: none;
    padding: 8px 14px;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    transition: 400ms;
}
.clg-filter-form .select-group {
    display: flex;
    gap: 10px;
    width: 100%;
}
.clg-filter-form .select-group input,
.clg-filter-form .select-group select {
    font-size: .85rem;
    padding: 4px 8px;
    background-color: #fff;
    border-radius: 4px;
    border-color: #ced4da;
}
.select-group input[type="date"] {
    font-size: .75rem;
}
.clg-filter-form .select-group .search-btn {
    border-radius: 8px;
}

.clg-main-content .clg-table { 
    width: 100%;
    margin-bottom: 20px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
}
.clg-table th {
    padding: 12px;
    text-align: left;
    border: 0;
    border-bottom: 1px solid #E5E7EB;
}
.clg-table td { 
    padding: 12px;
    border: 0;
    border-bottom: 1px solid #E5E7EB99;
}
.clg-main-content .status-select {
    font-size: 14px;
    min-width: 174px;
    padding: 4px 8px;
    border-radius: 32px;
    color: #1447E6;
    border: 1px solid #1447E6;
    background-color: #1447E617;
}

.clg-main-content .status-select.order-placed,
.clg-main-content .status-select.clg-case-assigned,
.clg-main-content .status-select.work-started {
    color: #1447E6;
    border: 1px solid #1447E6;
    background-color: #1447E612;
}
.clg-main-content .status-select.reports-all,
.clg-main-content .status-select.samples-received,
.clg-main-content .status-select.samples-transit {
    color: #00A651;
    border: 1px solid #00A651;
    background-color: #00A65112;
}
.clg-main-content .status-select.po-pending,
.clg-main-content .status-select.reports-some {
    color: #F5A623;
    border: 1px solid #F5A623;
    background-color: #F5A62312;
}
.clg-main-content .status-select.paused,
.clg-main-content .status-select.draft,
.clg-main-content .status-select.on-hold {
    color: #6E7680;
    border: 1px solid #6E7680;
    background-color: #6E768012;
}
.clg-main-content .status-select.cancelled,
.clg-main-content .status-select.failed {
    color: #E02020;
    border: 1px solid #E02020;
    background-color: #E0202012;
}

.woocommerce-js .clg-main-content select {
  background-position: 90% 50%;
}

.clg-main-content .clg-table .button.view-btn {
    font-size: 14px;
    background: #6256c4;
    border-radius: 32px;
    border: 1px solid #6256c4;
}
.clg-main-content .clg-table .button.view-btn:hover,
.clg-main-content .clg-table .button.view-btn:focus {
    color: #6256c4;
    background: transparent;
    transition: 400ms;
}

.clg-main-content .order-header-box {
    background: #fff;
    border: 1px solid #E5E7EB;
    padding: 20px;
    border-radius: 14px;
    margin: 20px 0;
}
.clg-main-content .header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.clg-main-content .header-grid {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));  
}

.clg-main-content .header-grid p {
    color: #101828;
}
.clg-main-content .header-grid strong {
    color: #919191;
    font-weight: 400;
}

.clg-main-content .status-badge {
    padding: 5px 10px;
    border-radius: 20px;
    color: #fff;
    font-size: 0.8em;
    font-weight: bold;
}
.clg-main-content .status-processing {
    background: #2ecc71;
}
.clg-main-content .status-on-hold {
    background: #f1c40f;
}

.clg-main-content .item-details-accordion {
    border: 1px solid #E5E7EB;
    margin-bottom: 10px;
    border-radius: 14px;
}
.details-accordion-box-items {
    display: flex;
    gap: 14px;
    align-items: center;
}
.clg-main-content .toggle-container {
  margin-bottom: 20px;
  text-align: right;
}
.clg-main-content .item-summary {
    padding: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.clg-main-content .item-content {
    padding: 20px 14px;
    border-top: 1px solid #E5E7EB;
}
.clg-main-content .view-btn-contianer {
  gap: 8px;
  display: flex;
  align-items: center;
}
.clg-main-content .item-edit-grid .grid-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
.clg-main-content .item-edit-grid .field {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.clg-main-content .item-edit-grid .field.full {
    width: 100%;
    margin-bottom: 14px;
}
.clg-main-content .item-edit-grid .field input,
.clg-main-content .item-edit-grid .field textarea {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #F3F3F5;
}
.clg-main-content .item-edit-grid .field input:focus,
.clg-main-content .item-edit-grid .field textarea:focus {
    background: #fefefe;
    border: 1px solid #E5E7EB;
    transition: 400ms;
}
.clg-main-content .item-edit-grid .field textarea {
    resize: none;
}
.clg-main-content .item-edit-grid label,
.clg-main-content .item-edit-grid label strong {
    color: #6A7282;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 4px;
}
.clg-main-content .item-details-accordion table {
    border: 0;
}
.clg-main-content .item-details-accordion table td {
    padding: 10px;
    height: auto;
    border: 0;
    border-bottom: 1px solid #E5E7EB;
}
.clg-main-content .item-details-accordion table td p {
    margin-bottom: 0;
}
.clg-main-content .item-details-accordion table td.meta-label {
    color: #919191;
}
.clg-main-content .item-details-accordion table td.meta-val {
    color: #0A0A0A;
}

.clg-main-content button.update-btn {
    margin-top: 20px;
}

/* ============= ORDER MANAGEMENT ============== */

.status-header-container {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}
.status-help-icon {
    cursor: pointer;
    color: #1e293b;
    position: relative;
}
.status-tooltip-popup {
    display: none; /* Hidden by default */
    position: absolute;
    top: 30px;
    left: -64px;
    width: 514px;
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    z-index: 999;
    color: #333;
    text-align: left;
    font-weight: normal;
    white-space: normal;
    border: 1px solid #e2e8f0;
}
.status-tooltip-popup.is-active {
    display: block;
}
.status-tooltip-popup p {
  margin-bottom: 4px;
}
.status-tooltip-popup ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#dashboardlayout .item-field input.clg-dependent:disabled {
    background-color: #f9fafb;
    color: #9ca3af;
    cursor: not-allowed;
    border-color: #e5e7eb;
}
.order-detail-tb-right {
    display: flex;
    gap: 14px;
}
#dashboardlayout .accordion-controls-wrapper {
  margin-bottom: 24px;
  display: flex;
  justify-content: end;
}

/* ============== VIEW CELL LINES =============== */
.clg-dashboard-container .clg-btn-edit,
.clg-dashboard-container .clg-btn-add {
    background: #1aa3e0;
}
.clg-dashboard-container .clg-btn-edit:hover,
.clg-dashboard-container .clg-btn-edit:focus,
.clg-dashboard-container .clg-btn-add:hover,
.clg-dashboard-container .clg-btn-add:focus {
    background: #007cba;
    transition: 400ms;
}
.clg-dashboard-container .clg-btn-delete {
    background: #ce4b4b;
}
.clg-dashboard-container .clg-btn-delete:hover,
.clg-dashboard-container .clg-btn-delete:focus {
    background: #c03d3d;
    transition: 400ms;
}
.clg-view-filters {
    margin: 14px 0;
    display: flex;
    gap: 10px;
}
.clg-view-filters a.clg-filter-btn {
    display: inline-block;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 24px;
    border: 1px solid #0098db;
    background-color: #fff;
    color: #0098db;
    transition: all 0.2s ease-in-out;
}
.clg-view-filters a.clg-filter-btn:hover {
    background-color: #f0f6fb;
    border-color: #6256c4;
    color: #6256c4;
}
.clg-view-filters a.clg-filter-btn.active {
    background-color: #0098db;
    color: #ffffff;
    border-color: #0098db;
    cursor: default;
    pointer-events: none;
}

/* ============== VIEW MY ACCOUNT =============== */
.clg-form-container .woocommerce-EditAccountForm {
    padding: 20px 0;
}
.clg-form-container .woocommerce-form-row {
    margin-bottom: 14px;
}
.clg-form-container input.input-text {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
..clg-dashboard-container .customer-id-badge {
    display: inline-block;
    color: #333;
    background: #f0f4f8;
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 0;
}
.clg-dashboard-container .view-account fieldset {
    position: relative;
    padding: 15px 30px 30px;
    margin-bottom: 20px;
}
.clg-dashboard-container .view-account .clg-row-label {
    font-weight: 600;
}
.clg-dashboard-container .view-account .clg-edit-action-container {
    position: absolute;
    top: 0;
    right: 24px;
}
.clg-dashboard-container .view-account .status-tooltip-popup {
    left: auto;
    right: 0;
    top: 44px;
    font-size: 14px;
    max-width: 400px;
}
.clg-dashboard-container .view-account form > .woocommerce-form-row {
    display: none;
}

/* ============== VIEW ADRESSES =============== */
.clg-address-text {
    margin-bottom: 25px;
    color: #333;
}
.clg-address-cards-container .u-columns.addresses {
    display: flex !important;
    gap: 20px;
    flex-wrap: wrap;
}
.clg-address-cards-container .u-column1, 
.clg-address-cards-container .u-column2 {
    flex: 1;
    min-width: 300px;
    background: #fff;
    padding: 20px;
    border: 1px solid #d3ced2;
    border-radius: 4px;
}
.clg-address-cards-container .title h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
    display: inline-block;
}
.clg-address-cards-container .edit {
    display: none;
    float: right;
    text-decoration: none;
    color: #007bff;
    font-size: 0.9em;
}
.clg-address-cards-container address {
    font-style: normal;
    line-height: 1.6;
    color: #666;
}

/* ============== VIEW COMPANIES =============== */
.company-logo-img {
    border-radius: 4px;
    object-fit: cover;
}
.company-logo-placeholder {
    width: 40px;
    height: 40px;
    background: #f0f0f0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
}
.clg-badge {
	background: #e1f0ff;
	color: #007cba;
	padding: 8px 12px 8px 12px;
	border-radius: 24px;
	font-size: 14px;
	text-align: center;
	min-width: 94px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.clg-badge-info {
    font-size: 11px;
    color: #999;
    background: #f9f9f9;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid #eee;
}
.no-desc { color: #ccc; }
.no-data { text-align: center; padding: 20px; }

.desc-btn {
    padding: 0 10px !important;
    height: 28px;
}
.clg-popup-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
}
.clg-popup-content {
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
    position: relative;
    animation: clgFadeIn 0.3s ease;
}

@keyframes clgFadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
.clg-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
.clg-popup-header h3 {
    margin: 0;
    color: #007cba;
    font-size: 18px;
}
.clg-close-popup {
    font-size: 30px;
    cursor: pointer;
    color: #bbb;
    line-height: 1;
}
.clg-close-popup:hover { 
    color: #d63638;
}
.clg-popup-body p {
    font-size: 14px;
    color: #444;
    line-height: 1.6;
    white-space: pre-wrap;
    margin: 0;
}
.clg-popup-footer {
    margin-top: 20px;
    text-align: right;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

/* ====================== CART & CHECKOUT ======================== */
.woocommerce-cart .woocommerce-notices-wrapper {
    width: 100%;
    flex: 1 0 100%;
    margin-bottom: 20px;
}
.woocommerce-cart .woocommerce {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 35px;
}
.woocommerce-cart a.button.clg-shop-button {
    width: 100%;
    text-align: center;
    padding: 1.5rem;
    border: 1px solid #046bd2;
    color: #046bd2;
    background: #fff;
}
.woocommerce-cart a.button.clg-shop-button:hover,
.woocommerce-cart a.button.clg-shop-button:focus {
    color: #fff;
    background: #046bd2;
    border: 1px solid #046bd2;
    transition: 500ms;
}
.variation, .item-metadata, .wc-item-meta {
    overflow: hidden;
    transition: all 0.3s ease;
    padding-left: 10px;
    border-left: 2px solid #007cba;
    margin-top: 8px;
}
.woocommerce-cart .clg-toggle-details,
.woocommerce-checkout .clg-toggle-details {
    display: inline-block;
    width: 100%;
    font-size: 0.85em;
    font-weight: 600;
    color: #0c90d8;
    text-decoration: none;
    cursor: pointer;
}
.woocommerce-cart .clg-toggle-details:hover,
.woocommerce-checkout .clg-toggle-details:hover {
    color: #007cba;
    transition: 400ms;
}

.woocommerce-checkout .product-meta-content {
    padding: 0 14px 38px;
    font-size: 14px;
    line-height: 1.8rem;
    color: #6A7282;
    background: transparent;
    border: 0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin-top: 14px;
    position: relative;
}
.woocommerce-checkout .product-meta-content .clg-meta-value {
    color: #111;
}
.product-meta-content a.clg-edit-link {
    color: #0098DB;
    font-weight: 500;
    border: 2px solid #0098DB;
    padding: 4px 10px;
    display: flex;
    position: absolute;
    bottom: 20px;
    border-radius: 24px;
}
.product-meta-content a.clg-edit-link:hover,
.product-meta-content a.clg-edit-link:focus {
    color: #fff;
    border-color: #6256c4;
    background: #6256c4;
    transition: 400ms;
}

@media (min-width: 992px) {
    .woocommerce-cart .woocommerce {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 35px;
    }
    .woocommerce-cart .woocommerce-cart-form {
        flex: 1;
        max-width: calc(65% - 17.5px);
        margin-bottom: 0;
    }
    .woocommerce-cart .cart-collaterals {
        flex: 0 0 calc(35% - 17.5px);
        position: -webkit-sticky;
        position: sticky;
        top: 130px;
        z-index: 10;
    }
    .woocommerce-cart .cart_totals {
        width: 100% !important;
        float: none !important;
        background: #ffffff;
        padding: 25px;
        border: 1px solid #ebebeb;
        border-radius: 8px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }
}

/* ================== FORMS ======================= */

.clg-form-header {
    display: flex;
    background: linear-gradient(135deg, #DFEDFF 0%, #FFF 50%, #F3E6FF 100%);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    min-height: 200px;
    border-radius: 14px;
    margin-bottom: 32px;
}
.clg-form-header .product-category {
    display: flex;
    padding: 8px 18px;
    border-radius: 32px;
    border: 1px solid #ebebeb;
    margin-bottom: 14px;
}
.clg-form-header h3 {
    color: #1C4376;
    font-size: 3.2rem;
    font-weight: 600;
    font-family: 'Fira Sans Condensed', sans-serif;
    text-align: center;
}
.custom-clg-form .form-section {
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 2rem 1.5rem;
    font-family: 'Fira Sans', sans-serif;
}
.custom-clg-form .form-section h3 {
    font-weight: 600;
    color: #005B83;
    font-family: 'Fira Sans', sans-serif;
}
.custom-clg-form .form-section label {
    color: #0098DB;
}
.custom-clg-form .form-section input,
.custom-clg-form .form-section select {
    height: auto;
    margin-bottom: 12px;
    border-radius: 8px;
    padding: 10px 18px;
}
.custom-clg-form .form-section textarea {
    resize: none;
    border-radius: 8px;
    padding: 10px 18px;
}
.custom-clg-form .button[type="submit"] {
    width: 100%;
    background-color: #6256C4;
    text-align: center;
    font-weight: 600;
    border-radius: 32px;
    padding: 18px 14px; 
}
.custom-clg-form .clg-expedite-container {
    margin-bottom: 30px;
    border: 1px solid #e0e0e0;
    padding: 20px;
    border-radius: 8px;
    background-color: #f9f9f9;
}
.custom-clg-form .clg-expedite-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.custom-clg-form .clg-expedite-title {
    margin: 0;
    color: #333;
    font-weight: 600;
}
.custom-clg-form .clg-expedite-icon {
    margin-right: 10px;
    color: #1E88E5;
    font-size: 1.1em;
}
.custom-clg-form .clg-expedite-description {
    width: 85%;
    margin: 5px 0 0 30px;
    font-size: 0.9em;
    color: #666;
}
.custom-clg-form .clg-expedite-action {
    text-align: right;
    width: 15%;
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 8px;
}
.custom-clg-form .clg-expedite-price {
    display: flex;
    font-weight: bold;
    color: #1E88E5;
    margin-bottom: 5px;
}
.custom-clg-form .clg-expedite-action .clg-checkbox-container {
    display: inline-block;
}

/************* css redesing cart ************/

/* ==========================================================================
   CARTLAYOUT - Custom WooCommerce Cart Styles
   All styles scoped to #cartlayout for specificity
   ========================================================================== */

#cartlayout {
    width: 100%;
    /* padding: 20px; */
    max-width: 1410px;
}
#cartlayout .cart-wrapper {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}
#cartlayout .woocommerce-cart-form {
    flex: 0 0 70%;
    max-width: 70%;
    min-width: 0;
}

/* Cart Items Container */
#cartlayout .cart-items {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Individual Cart Item Card */
#cartlayout .cart-item {
    position: relative;
    display: flex;
    gap: 20px;
    padding: 24px;
    background: #ffffff;
    border-radius: 25px;
    border: 1px solid #E5E7EB;
}

/* Remove Button */
#cartlayout .cart-item-remove {
    position: absolute;
    top: 16px;
    right: 16px;
}
#cartlayout .remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 20px;
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.2s ease;
}
#cartlayout .remove-btn:hover {
    color: #ef4444;
}

/* Product Thumbnail */
#cartlayout .cart-item-thumbnail {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
}
#cartlayout .cart-item-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    padding: 15px;
}
#cartlayout .cart-item-thumbnail a {
    display: block;
}

/* Product Details */
#cartlayout .cart-item-details {
    flex: 1;
    min-width: 0;
    padding-right: 30px;
}

/* Category Badge */
#cartlayout .cart-item-category {
    margin-bottom: 8px;
}
#cartlayout .category-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #F3F6FA;
    color: #0098DB;
    border-radius: 20px;
    border: solid 1px rgba(30, 136, 255, 0.18);
    font-size: 14px;
    font-weight: 400;
    font-family: 'Fira Sans';
    line-height: normal;
}
#cartlayout .category-dot {
    width: 6px;
    height: 6px;
    background: #0277bd;
    border-radius: 50%;
}

/* Product Name */
#cartlayout .cart-item-title a,
#cartlayout .cart-item-title {
    font-size: 24px;
    font-weight: 600;
    color: rgba(0, 91, 131, 1);
    text-decoration: none;
    line-height: 29px;
    font-family: 'Fira Sans';
}
#cartlayout .cart-item-title a:hover {
    color: #6b46c1;
}

/* SKU and Price Row */
#cartlayout .cart-item-meta {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}
#cartlayout .cart-item-sku {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    color: #6b7280;
    font-family: 'Fira Sans';
}
#cartlayout .sku-value {
    color: #374151;
}
#cartlayout .cart-item-price {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Fira Sans';
}
#cartlayout .price-label {
    font-size: 16px;
    color: #6b7280;
}
#cartlayout .price-value {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
}

/* Variation Details (Show Details content) */
#cartlayout .variation {
    margin-top: 16px;
    padding: 16px;
    background: #f8fafc;
    border-left: 3px solid #6b46c1;
    border-radius: 0 8px 8px 0;
}
#cartlayout .variation dt {
    font-weight: 600;
    color: #374151;
    font-size: 14px;
    margin-bottom: 4px;
}
#cartlayout .variation dd {
    margin: 0 0 12px 0;
    padding: 0;
    color: #6b7280;
    font-size: 14px;
}
#cartlayout .variation dd:last-child {
    margin-bottom: 0;
}
#cartlayout .variation dd p {
    margin: 0;
}

/* Show Details Toggle */
#cartlayout .clg-toggle-details {
    display: inline-block;
    color: #6b46c1;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: color 0.2s ease;
    font-family: 'Fira Sans';
}
#cartlayout .clg-toggle-details:hover {
    color: #553c9a;
}

/* Coupon Section */
#cartlayout .coupon-section {
    padding: 24px;
    background: #ffffff;
    border-radius: 25px;
    border: 1px solid #E5E7EB;
}
#cartlayout .coupon-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 400;
    color: #6A7282;
    font-family: 'Fira Sans';
}
#cartlayout .coupon-icon {
    color: #6b7280;
}
#cartlayout .coupon-form {
    display: flex;
    gap: 12px;
}
#cartlayout .coupon-input {
    flex: 1;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    padding: 8px 15px;
    font-size: 18px;
    height: auto;
    color: black;
}
#cartlayout .coupon-input:focus {
    outline: none;
    border-color: #6b46c1;
    box-shadow: 0 0 0 3px rgba(107, 70, 193, 0.1);
}
#cartlayout .coupon-input::placeholder {
    color: #9ca3af;
}
#cartlayout .coupon-button {
        padding: 14px 32px 14px 32px;
    color: #6256C4;
    border: 1px solid #6256C4;
    border-radius: 25px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Fira Sans';
    background: #EFEEF9;
    line-height: 22px;
}
#cartlayout .coupon-button:hover {
    background: #6b46c1;
    color: #ffffff;
}

/* Cart Summary Sidebar - Sticky 30% */
#cartlayout .cart-summary {
    flex: 0 0 30%;
    max-width: 30%;
    position: sticky;
    top: 145px;
    align-self: flex-start;
}
#cartlayout .cart-summary-box {
    padding: 28px;
    background: #ffffff;
    border-radius: 25px;
    border: 1px solid #E5E7EB;
}
#cartlayout .cart-summary-title {
    margin: 0 0 10px 0;
    font-size: 24px;
    font-weight: 700;
    color: #005B83;
    font-family: 'Fira Sans';
    border-bottom: 1px solid #e5e7eb;
    line-height: 45px;
}
#cartlayout .cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}
#cartlayout .cart-summary-row .summary-label,
#cartlayout .cart-summary-row .summary-value {
    font-size: 18px !important;
    color: #2A2A2A !important;
    font-weight: 400;
    font-family: 'Fira Sans';
}
#cartlayout .cart-summary-row.total-row {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}
#cartlayout .cart-summary-row.total-row .summary-label {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a2e;
}
#cartlayout .cart-summary-row.total-row .summary-value {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a2e;
}

/* Cart Summary Actions */
#cartlayout .cart-summary-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}
#cartlayout .checkout-button,
#cartlayout .add-service-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px 14px 32px;
    border-radius: 99px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    line-height: 22px;
}
#cartlayout .checkout-button {
    background: #6256C4;
    color: #ffffff;
    border: solid 1px #6256C4;
    font-family: 'Fira Sans';
    font-size: 18px;
}
#cartlayout .checkout-button:hover {
    background: #553c9a;
    color: #ffffff;
}
#cartlayout .add-service-button {
    background: #EFEEF9;
    color: #6256C4;
    border: solid 1px #6256C4;
    font-family: 'Fira Sans';
    font-size: 18px;
}
#cartlayout .add-service-button:hover {
    background: #f5f3ff;
    color: #553c9a;
    border-color: #553c9a;
}

/* Hide default WooCommerce cart collaterals */
#cartlayout + .cart-collaterals,
.woocommerce-cart .cart-collaterals,
.woocommerce .cart-collaterals {
    display: none !important;
}

#cartlayout .iconcart{height: 1em; fill: white;}
#cartlayout .iconcart2{height: 1em; fill: #6256C4;}

/* ==========================================================================
   TOGGLE DETAILS - CSS Animation (replaces slideToggle)
   ========================================================================== */

/* Base state - expanded */
#cartlayout .variation,
#cartlayout .item-metadata,
#cartlayout .wc-item-meta {
    max-height: 2000px;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding-top 0.3s ease-out, padding-bottom 0.3s ease-out, margin-top 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 1;
}

/* Collapsed state */
#cartlayout .variation.clg-details-collapsed,
#cartlayout .item-metadata.clg-details-collapsed,
#cartlayout .wc-item-meta.clg-details-collapsed {
    max-height: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    opacity: 0;
}


/* ==========================================================================
   RESPONSIVE DESIGN - Complete
   ========================================================================== */

/* Large Desktop to Small Desktop (992px - 1199px) - 60/40 distribution */
@media (min-width: 992px) and (max-width: 1199px) {
    #cartlayout .woocommerce-cart-form {
        flex: 0 0 60%;
        max-width: 60%;
    }
    #cartlayout .cart-summary {
        flex: 0 0 40%;
        max-width: 40%;
    }
}

/* Tablet (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    #cartlayout .cart-wrapper {
        flex-direction: column;
    }
    #cartlayout .woocommerce-cart-form {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    #cartlayout .cart-summary {
        flex: 0 0 100%;
        max-width: 100%;
        position: static;
        min-width: 100%;
    }

    /* Typography */
    #cartlayout .category-badge {
        font-size: 12px;
    }
    #cartlayout .cart-item-title a,
    #cartlayout .cart-item-title {
        font-size: 24px;
        line-height: 29px;
    }
    #cartlayout .cart-item-sku,
    #cartlayout .price-label,
    #cartlayout .variation dt,
    #cartlayout .variation dd,
    #cartlayout .clg-toggle-details {
        font-size: 14px;
    }
    #cartlayout .price-value {
        font-size: 18px;
    }
    #cartlayout .coupon-header,
    #cartlayout .coupon-input,
    #cartlayout .coupon-button,
    #cartlayout .cart-summary-row .summary-label,
    #cartlayout .cart-summary-row .summary-value,
    #cartlayout .checkout-button,
    #cartlayout .add-service-button {
        font-size: 18px;
    }
    #cartlayout .cart-summary-title {
        font-size: 28px;
        line-height: 45px;
    }
    #cartlayout .cart-summary-row.total-row .summary-label {
        font-size: 16px;
    }
    #cartlayout .cart-summary-row.total-row .summary-value {
        font-size: 20px;
    }
}

/* Large Mobile (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    #cartlayout .cart-wrapper {
        flex-direction: column;
    }
    #cartlayout .woocommerce-cart-form {
        flex: 0 0 100%;
        max-width: 100%;
    }
    #cartlayout .cart-summary {
        flex: 0 0 100%;
        max-width: 100%;
        position: static;
        min-width: 100%;
    }

    /* Typography */
    #cartlayout .category-badge {
        font-size: 13px;
    }
    #cartlayout .cart-item {gap: 10px;}

    #cartlayout .cart-item-title a,
    #cartlayout .cart-item-title {
        font-size: 20px;
        line-height: 25px;
    }
    #cartlayout .cart-item-sku,
    #cartlayout .price-label,
    #cartlayout .variation dt,
    #cartlayout .variation dd,
    #cartlayout .clg-toggle-details {
        font-size: 14px;
    }
    #cartlayout .price-value {
        font-size: 18px;
    }
    #cartlayout .coupon-header,
    #cartlayout .coupon-input,
    #cartlayout .coupon-button,
    #cartlayout .cart-summary-row .summary-label,
    #cartlayout .cart-summary-row .summary-value,
    #cartlayout .checkout-button,
    #cartlayout .add-service-button {
        font-size: 18px;
    }
    #cartlayout .cart-summary-title {
        font-size: 25px;
        line-height: 40px;
    }
    #cartlayout .cart-summary-row.total-row .summary-label {
        font-size: 16px;
    }
    #cartlayout .cart-summary-row.total-row .summary-value {
        font-size: 20px;
    }
}

/* Small Mobile (0px - 575px) */
@media (max-width: 575px) {
    
    #cartlayout .cart-summary-row .summary-label, #cartlayout .cart-summary-row .summary-value {  font-size: 16px !important;}
    
    #cartlayout .cart-wrapper {
        flex-direction: column;
    }
    #cartlayout .woocommerce-cart-form {
        flex: 0 0 100%;
        max-width: 100%;
    }
    #cartlayout .cart-summary {
        flex: 0 0 100%;
        max-width: 100%;
        position: static;
                min-width: 100%;
    }
    #cartlayout .cart-item {
        flex-direction: column;
        text-align: left;
        padding: 20px;
    }
    #cartlayout .cart-item-thumbnail {
        width: 65px;
        height: 65px;
    }
    #cartlayout .cart-item-details {
        padding-right: 0;
    }
    #cartlayout .cart-item-remove {
        top: 12px;
        right: 12px;
    }
    #cartlayout .coupon-form {
        flex-direction: column;
    }
    #cartlayout .coupon-button {
        width: 100%;
    }
    #cartlayout .variation {
        text-align: left;
    }

    /* Typography */
    #cartlayout .category-badge {
        font-size: 13px;
    }
    #cartlayout .cart-item {gap: 10px;}

    #cartlayout .cart-item-title a,
    #cartlayout .cart-item-title {
        font-size: 18px;
        line-height: 23px;
    }
    #cartlayout .cart-item-sku,
    #cartlayout .price-label,
    #cartlayout .variation dt,
    #cartlayout .variation dd,
    #cartlayout .clg-toggle-details {
        font-size: 14px;
    }
    #cartlayout .price-value {
        font-size: 18px;
    }
    #cartlayout .coupon-header,
    #cartlayout .coupon-input,
    #cartlayout .coupon-button,
    #cartlayout .checkout-button,
    #cartlayout .add-service-button {
        font-size: 16px;
        padding: 14px 32px 14px 32px;
    }
    #cartlayout .coupon-header{ margin-bottom: 0px; padding-top: 0px; padding-left: 0px;}

    #cartlayout .cart-summary-title {
        font-size: 18px;
        line-height: 35px;
    }
    #cartlayout .cart-summary-row.total-row .summary-label {
        font-size: 16px;
    }
    #cartlayout .cart-summary-row.total-row .summary-value {
        font-size: 20px;
    }
}

/* ===== NEW CART PRODUCTS ITEMS DETAILS SOLUTION ===== */
#cartlayout .variation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-auto-flow: dense; 
    align-items: start;
    gap: 4px 40px;
    margin-top: 16px;
    padding: 10px 0;
    background: transparent;
    border-left: none;
    border-radius: 0;
    border-top: 1px solid #e5e7eb;
}
#cartlayout .variation dt {
    font-weight: 400;
    color: #6b7280;
    font-size: 14px;
    margin: 0;
    padding-top: 14px;
    font-family: 'Fira Sans';
}
#cartlayout .variation dd {
    margin: 0;
    padding: 0;
    color: #1a1a2e;
    font-size: 16px;
    font-weight: 400;
    font-family: 'Fira Sans';
}
#cartlayout .variation dd p {
    margin: 0;
}
#cartlayout .variation dt:nth-of-type(odd),
#cartlayout .variation dd:nth-of-type(odd) {
    grid-column: 1;
}
#cartlayout .variation dt:nth-of-type(even),
#cartlayout .variation dd:nth-of-type(even) {
    grid-column: 2;
}
#cartlayout .variation dt:last-of-type,
#cartlayout .variation dd:last-of-type {
    grid-column: span 2;
    padding-top: 20px;
}

#cartlayout .variation dt.variation- {
    display: none;
}
#cartlayout .variation dd.variation- a,
.clg-dashboard-container .clg-edit-info-btn.clg-edit-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0098DB;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    padding: 8px 16px;
    border: 1px solid #0098DB;
    border-radius: 20px;
    transition: all 0.2s ease;
}
#cartlayout .variation dd.variation- a::before,
.clg-dashboard-container .clg-edit-info-btn.clg-edit-link::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230098DB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}
#cartlayout .variation dd.variation- a:hover,
.clg-dashboard-container .clg-edit-info-btn.clg-edit-link:hover {
background: #6256c4;
    color: #ffffff !important;
    border-color: #6256c4;
}
#cartlayout .variation dd.variation- a:hover::before,
.clg-dashboard-container .clg-edit-info-btn.clg-edit-link:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E");
}

/* ==========================================================================
   Responsive - Tablet (768px - 991px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991px) {
    #cartlayout .variation dt {
        font-size: 13px;
    }
    #cartlayout .variation dd {
        font-size: 16px;
    }
    #cartlayout .variation dd.variation- a {
        font-size: 14px;
    }
}

/* ==========================================================================
   Responsive - Large Mobile (576px - 767px)
   ========================================================================== */
@media (min-width: 576px) and (max-width: 767px) {
    #cartlayout .variation {
        display: block;
    }
    #cartlayout .variation dt {
        padding-top: 16px;
        font-size: 13px;
    }
    #cartlayout .variation dd {
        padding-bottom: 8px;
        font-size: 16px;
    }
    #cartlayout .variation dd.variation- {
        padding-top: 16px;
    }
    #cartlayout .variation dd.variation- a {
        font-size: 14px;
    }
}

/* ==========================================================================
   Responsive - Small Mobile (0px - 575px)
   ========================================================================== */
@media (max-width: 575px) {
    #cartlayout .variation {
        display: block;
    }
    #cartlayout .variation dt {
        padding-top: 5px;
        font-size: 13px;
    }
    #cartlayout .variation dd {
        padding-bottom: 8px;
        font-size: 16px;
    }
    #cartlayout .variation dd.variation- {
        padding-top: 16px;
    }
    #cartlayout .variation dd.variation- a {
        font-size: 14px;
    }
}

/**** Services customization **********/

/* ============================================
   SERVICE CUSTOMIZATION FORM STYLES
   ============================================ */

#servicecustomization {
    font-family: "Fira Sans", sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    background: transparent;
}
#servicecustomization * {
    box-sizing: border-box;
}

/* ============================================
   PRODUCT HEADER SECTION
   ============================================ */

#servicecustomization .product-header-section {
    background: linear-gradient(135deg, #DFEDFF 0%, #FFFFFF 50%, #F3E6FF 100%);
    padding: 40px 60px 50px 60px;
    margin-bottom: 40px;
    border-radius: 12px;
    text-align: center;
}
#servicecustomization .header-top-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
#servicecustomization .product-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #ffffff, #e6eef6);
    border-radius: 50%;
    border: solid 1px rgba(30, 136, 255, 0.18);
    padding: 10px;
}
#servicecustomization .product-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#servicecustomization .product-badge,
#servicecustomization .product-sku {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(145deg, #ffffff, #e6eef6);
    border-radius: 60px;
    position: relative;
    overflow: hidden;
    padding: 7px 20px !important;
    border: solid 1px #1E88FF2E;
    font-size: 14px;
    font-weight: 400;
    color: #0098DB;
}

#servicecustomization .badge-dot {
    width: 8px;
    height: 8px;
    background: #0098DB;
    border-radius: 50%;
    flex-shrink: 0;
}
#servicecustomization .badge-text {
    font-size: 14px;
    font-weight: 400;
    color: #0098DB;
}
#servicecustomization .product-main-title {
    font-size: 48px;
    font-weight: 700;
    color: #1e5a7d;
    margin: 0;
    text-align: center;
    line-height: 1.3;
}

/* ============================================
   FORM SECTION CARDS
   ============================================ */

#servicecustomization .form-section-card {
    background: #ffffff;
    padding: 40px;
    margin-bottom: 24px;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
}
#servicecustomization .section-title {
    font-size: 24px;
    font-weight: 600;
    color: #005B83;
    margin: 0 0 30px 0;
    padding: 0;
}

/* ============================================
   FORM GROUPS
   ============================================ */

#servicecustomization .form-group {
    margin-bottom: 24px;
}
#servicecustomization .form-group:last-child {
    margin-bottom: 0;
}

/* ============================================
   FLOATING INPUT & SELECT
   ============================================ */

#servicecustomization .floating-input,
#servicecustomization .floating-select {
    position: relative;
    width: 100%;
}
#servicecustomization .form-control {
    width: 100%;
    padding: 24px 16px 5px 16px;
    font-size: 18px;
    font-family: "Fira Sans", sans-serif;
    color: black;
    background: #ffffff;
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s ease;
    min-height: 70px;
}

#servicecustomization .form-control:focus {
    border-color: #6256c4;
}

#servicecustomization .floating-label {
    position: absolute;
    left: 14px;
    top: 8px;
    font-size: 16px;
    color: #0098DB;
    pointer-events: none;
    line-height: 1.2;
    font-weight: 400;
}
#servicecustomization .floating-select .form-control {
    padding: 24px 40px 8px 16px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    cursor: pointer;
}

/* ============================================
   TEXTAREA
   ============================================ */

#servicecustomization .service-notes-group {
    margin-top: 30px;
}
#servicecustomization .service-notes-title {
    display: block;
    font-size: 16px;
    color: #0098DB;
    margin-bottom: 12px;
    line-height: 1.2;
    font-weight: 400;
}
#servicecustomization .form-textarea {
    width: 100%;
    padding: 14px 16px;
    font-size: 16px;
    font-family: "Fira Sans", sans-serif;
    color: black;
    background: #ffffff;
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    outline: none;
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}
#servicecustomization .form-textarea:focus {
    border-color: #6256c4;
}
#servicecustomization .form-textarea::placeholder {
    color: #b0b0b0;
    font-size: 16px;
}

/* ============================================
   CHECKBOX SECTION
   ============================================ */

#servicecustomization .checkbox-container {
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    background: #ffffff;
}
#servicecustomization .checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
#servicecustomization .form-checkbox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 24px;
    height: 24px;
    min-width: 24px;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
    border: 2px solid #E5E7EB;
    border-radius: 4px;
    background: #ffffff;
    position: relative;
    transition: all 0.2s ease;
}
#servicecustomization .form-checkbox:checked {
    background: #ffffff;
    border-color: #E5E7EB;
}
#servicecustomization .form-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 6px;
    height: 12px;
    border: solid #0098DB;
    border-width: 0 2px 3px 0;
}
#servicecustomization .form-checkbox:hover {
    border-color: #0098DB;
}
#servicecustomization .form-checkbox:focus {
    outline: 2px solid #0098DB;
    outline-offset: 2px;
}
#servicecustomization .checkbox-label {
    cursor: pointer;
    user-select: none;
    flex: 1;
}
#servicecustomization .checkbox-title {
    display: block;
    font-size: 16px;
    color: #0098DB;
    line-height: 1.2;
    font-weight: 400;
    margin-bottom: 2px;
}
#servicecustomization .checkbox-subtitle {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #45484C;
}
#servicecustomization .saved-line-dropdown {
    margin-top: 16px;
}

/* ============================================
   CONDITIONAL FIELDS
   ============================================ */

#servicecustomization .conditional-field {
    margin-top: 20px;
}

/* ============================================
   INPUT WITH ICON
   ============================================ */

#servicecustomization .input-with-icon {
    display: flex;
    gap: 12px;
    align-items: stretch;
}
#servicecustomization .input-with-icon .floating-input {
    flex: 1;
}
#servicecustomization .icon-button {
    width: 56px;
    padding: 0;
    background: #ffffff;
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
#servicecustomization .icon-button svg {
    width: 24px;
    height: 24px;
    color: #635AC4;
}
#servicecustomization #quick_save_to_db {
    width: auto;
    min-height: 54px;
    color: #635AC4;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #635AC4;
    border-radius: 99px 99px 99px 99px;
    padding: 14px 32px 14px 32px;
    font-size: 18px;
    font-weight: 600;
    background: #6256C41A;
}
#servicecustomization #quick_save_to_db svg {
    margin-right: 4px;
}
#servicecustomization .icon-button:hover {
background: #3F37A0!important;
    border-color: #3F37A0!important;
    color: white!important;
}

#servicecustomization .icon-button:hover svg{color:white!important;}

/* #servicecustomization .icon-button:active {
    transform: scale(0.95);
} */

/* ============================================
   ASTERISCO REQUERIDO
   ============================================ */

#servicecustomization .required {
    color: #e53e3e;
    font-weight: 600;
    margin-left: 2px;
}

/* ============================================
   FORM ACTIONS
   ============================================ */

#servicecustomization .form-actions {
    margin-top: 30px;
    padding: 0;
    display: flex;
    justify-content: flex-end;
}
#servicecustomization .submit-button {
    background: #6256c4;
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    font-family: "Fira Sans", sans-serif;
    padding: 15px 34px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}
#servicecustomization .submit-button svg {
    width: 20px;
    height: 20px;
}
#servicecustomization .submit-button:hover {
    background: #3F37A0;
}

@media (max-width: 1600px) {
    .status-tooltip-popup {
        left: auto;
        right: 0;
    }
}

/* ============================================
   RESPONSIVE DESIGN - SMALL DESKTOP (980px)
   ============================================ */

@media (max-width: 980px) {
    /* Header Section */
    #servicecustomization .product-header-section {
        padding: 35px 40px 45px 40px;
        margin-bottom: 35px;
    }
    #servicecustomization .header-top-info {
        gap: 15px;
        margin-bottom: 22px;
    }
    #servicecustomization .product-icon {
        width: 40px;
        height: 40px;
    }

    /* Form Cards */
    #servicecustomization .form-section-card {
        padding: 35px;
        margin-bottom: 22px;
    }
    #servicecustomization .section-title {
        margin-bottom: 28px;
    }

    /* Font Sizes - Small Desktop */
    #servicecustomization .product-main-title {
        font-size: 40px;
    }
    #servicecustomization .section-title {
        font-size: 22px;
    }
    #servicecustomization .badge-text,
    #servicecustomization .product-sku {
        font-size: 14px;
    }
    #servicecustomization .submit-button {
        font-size: 17px;
    }
}

/* ============================================
   RESPONSIVE DESIGN - TABLET (768px)
   ============================================ */

@media (max-width: 768px) {
    /* Header Section */
    #servicecustomization .product-header-section {
        padding: 30px 20px 40px 20px;
        margin-bottom: 30px;
    }
    #servicecustomization .header-top-info {
        gap: 15px;
        margin-bottom: 25px;
    }
    #servicecustomization .product-icon {
        width: 38px;
        height: 38px;
    }

    /* Form Cards */
    #servicecustomization .form-section-card {
        padding: 25px;
        margin-bottom: 20px;
    }
    #servicecustomization .section-title {
        margin-bottom: 24px;
    }

    /* Form Actions */
    #servicecustomization .submit-button {
        width: 100%;
        justify-content: center;
        padding: 16px 24px;
    }

    /* Font Sizes - Tablet */
    #servicecustomization .product-main-title {
        font-size: 32px;
    }
    #servicecustomization .section-title {
        font-size: 20px;
    }
    #servicecustomization .badge-text,
    #servicecustomization .product-sku,
    #servicecustomization .submit-button {
        font-size: 16px;
    }
}

/* ============================================
   RESPONSIVE DESIGN - MOBILE (480px)
   ============================================ */

@media (max-width: 480px) {
    /* Header Section */
    #servicecustomization .product-header-section {
        padding: 20px 15px 30px 15px;
        margin-bottom: 20px;
        border-radius: 8px;
    }
    #servicecustomization .header-top-info {
        gap: 12px;
        margin-bottom: 20px;
    }
    #servicecustomization .product-icon {
        width: 36px;
        height: 36px;
    }
    #servicecustomization .badge-dot {
        width: 6px;
        height: 6px;
    }

    /* Form Cards */
    #servicecustomization .form-section-card {
        padding: 20px;
        margin-bottom: 16px;
        border-radius: 8px;
    }

    #servicecustomization .form-group {
        margin-bottom: 20px;
    }
    #servicecustomization .form-control {
        padding: 22px 14px 8px 14px;
        border-radius: 6px;
    }

    /* Input with Icon */
    #servicecustomization .input-with-icon {
        gap: 8px;
    }
    #servicecustomization .icon-button {
        width: 48px;
    }
    #servicecustomization .icon-button svg {
        width: 20px;
        height: 20px;
    }

    /* Font Sizes - Mobile */
    #servicecustomization .product-main-title {
        font-size: 24px;
    }
    #servicecustomization .section-title {
        font-size: 18px;
    }
    #servicecustomization .badge-text,
    #servicecustomization .product-sku{
        font-size: 14px;
    }
        #servicecustomization .submit-button {
        font-size: 16px;
    }
    #servicecustomization .form-control {
        font-size: 16px;
    }
    #servicecustomization .floating-label {
        font-size: 15px;
        left: 14px;
    }
}

.clg-sidebar-header {
    padding: 1rem;
    background: linear-gradient(135deg, #1E88E5 0%, #5E35B1 100%);
    position: sticky;
    top: 0;
    z-index: 10;
}
.clg-toggle-btn {
  width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent !important;
    border: none !important;
    color: white !important;
    cursor: pointer !important;
    padding: 0.5rem !important;
    font-size: 1rem;
    font-weight: 600;
    box-shadow: none;
}

.clg-toggle-btn:hover {
    opacity: 0.9;
}
.menu-text {
    font-size: 1.125rem;
    letter-spacing: 0.5px;
}
.toggle-icon1 {
    font-size: 1rem;
}
.clg-sidebar.collapsed .menu-text {
    display: none;
}
.clg-sidebar.collapsed .clg-toggle-btn {
    justify-content: center;
}
.clg-sidebar.collapsed .toggle-icon1 {
    transform: rotate(180deg);
}

/* =============== PRINT ORDERS ================= */
@media print {
    @page {
        size: landscape;
        margin: 1rem;
    }
    header, footer,
    .clg-search-bar,
    .clg-sidebar,
    .order-detail-top-bar,
    .order-detail-tb-right,
    .update-order-btn,
    #dashboardlayout .print-btn,
    th:last-child,
    td:last-child,
    .accordion-arrow,
    .item-header-right .view-btn,
    .accordion-controls-wrapper {
        display: none !important;
    }
    #dashboardlayout {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        max-width: 100%;
        z-index: 999999;
        background: #fff;
        padding: 0;
        margin: 0;
    }
    .table-wrapper,
    .clg-table {
        width: 100%;
        max-width: 100%;
    }
    #dashboardlayout .table-wrapper,
    #dashboardlayout .orders-filters-container {
        transform: scale(.95);
    }
    #dashboardlayout details.item-accordion {
        display: block;
        width: 100%;
        margin-bottom: 25px;
        page-break-inside: auto;
    }
    #dashboardlayout details.item-accordion .item-accordion-content {
        display: block;
        width: 100%;
    }
    #dashboardlayout .item-fields-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        width: 100%;
        page-break-inside: avoid;
    }
    #dashboardlayout .item-field.full {
        grid-column: span 2;
    }
    #dashboardlayout .item-accordion-content input,
    #dashboardlayout .item-accordion-content select,
    #dashboardlayout .item-accordion-content textarea {
        background: transparent;
        border: none;
        border-bottom: 1px dashed #cbd5e1;
        box-shadow: none;
        color: #000;
        padding: 4px 0;
    }
    #dashboardlayout .metadata-table {
        width: 100%;
        max-width: 100%;
        margin-top: 15px;
        border-collapse: collapse;
        page-break-inside: auto;
    }
    #dashboardlayout .metadata-table tr {
        page-break-inside: avoid;
        break-inside: avoid;
    }
}