@import "variables.css";

body{
  color: var(--body-color);
  font-size: 1rem;
  line-height: 1.5rem;
  font-family: var(--font-family-english);
}


h1, h2, h3, h4, h5, h6{
  font-family: var(--font-family-english);
  color: var(--heading-color);
  line-height: 1.4;
  font-weight: 700;
}
a{
  color: var(--primary);
}

a:hover{color: var(--primary-dark)}
a:hover:not(.btn){
  text-decoration: none;
}
.lead{
  line-height: 1.65;
}
.w-hidden {
  display: none ;
}
.small, small{
  font-size: 80%;
  color: var(--gray);
}
 .mt-6{margin-top:1.5rem !important}.mt-7{margin-top:1.75rem !important}.mt-8{margin-top:2rem !important}.mt-9{margin-top:2.25rem !important}.mt-10{margin-top:2.5rem !important}.mt-11{margin-top:2.75rem !important}.mt-12{margin-top:3rem !important}.mt-13{margin-top:3.25rem !important}.mt-14{margin-top:3.5rem !important}.mt-15{margin-top:3.75rem !important}.mt-16{margin-top:4rem !important}.mt-17{margin-top:4.25rem !important}.mt-18{margin-top:4.5rem !important}.mt-19{margin-top:4.75rem !important}.mt-20{margin-top:5rem !important}.mt-21{margin-top:5.25rem !important}.mt-22{margin-top:5.5rem !important}.mt-23{margin-top:5.75rem !important}.mt-24{margin-top:6rem !important}.mt-25{margin-top:6.25rem !important}.mt-26{margin-top:6.5rem !important}.mt-27{margin-top:6.75rem !important}.mt-28{margin-top:7rem !important}.mt-29{margin-top:7.25rem !important}.mt-30{margin-top:7.5rem !important}.mt-auto{margin-top:auto !important}

 .bg-color-gold{background-color:#f0ad4e}.bg-color-green{background-color:#5cb85c}.bg-color-red{background-color:#d9534f}.bg-color-blue{background-color:#5bc0de}.bg-color-orange{background-color:#f60}
 .bg-color-pink{background-color:#e671b8}.bg-color-purple{background-color:#7b4f9d}.bg-color-lime{background-color:#8cbf26}.bg-color-magenta{background-color:#ff0097}
 .bg-color-teal{background-color:#00aba9}.bg-color-turquoise{background-color:#1abc9c}.bg-color-emerald{background-color:#2ecc71}.bg-color-amethyst{background-color:#9b59b6}
 .bg-color-wet-asphalt{background-color:#004258}.bg-color-midnight-blue{background-color:#2c3e50}.bg-color-sun-flower{background-color:#f1c40f}.bg-color-pomegranate{background-color:#c0392b}
 .bg-color-silver{background-color:#bdc3c7}.bg-color-asbestos{background-color:#7f8c8d}




.card, .mc-promo-login, .mc-promo-manage{
  border-color: var(--border-color);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(29, 175, 187, 0.08);
}

.form-control {
  height: auto ;
  min-height: calc(1.5em + 1.25rem + 2px);
  font-size: 14px ;
  border-color: var(--border-color) ;
  border-radius: 8px;
}

.form-control:focus {
  border-color: var(--primary) !important;
  outline: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}


.badge{
  font-family: var(--font-family-english);
  padding: 0.35rem 0.5rem;
  font-weight: 400;
}
input::-webkit-input-placeholder{ /* WebKit, Blink, Edge */
  font-size:14px;
}
input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
  font-size:14px;
}
input::-moz-placeholder{ /* Mozilla Firefox 19+ */
  font-size:14px;
}
input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
  font-size:14px;
}

/*helper class*/
.mb-10 {
	  margin-bottom: 2.5rem !important;
}
.ptb-100{
  padding: 100px 0 !important;
}
.ptb-60{
  padding: 60px 0 !important;
}
.pt-60{
  padding-top: 60px;
}
.pb-60{
  padding-bottom: 60px;
}
.ptb-40{
  padding: 40px 0 !important;
}
.pt-100{
  padding-top: 100px;
}
.pb-100{
  padding-bottom: 100px;
}
.mt-n-50{
  margin-top: -50px;
}
.mb-n-50{
  margin-bottom: -50px;
}
.tt-rounded{
  border-radius: var(--custom-radius-xl) !important;
}
.bg-primary{
  background-color: var(--primary)!important;
}
.bg-accent{
  background-color: var(--primary-light)!important;
}
.bg-gradient{
  background: linear-gradient(135deg, #041023 0%, #051225 50%, #041023 100%)
}
.bg-dark{
  background-color: var(--primary-darker) !important;
}
.bg-default{
  background-color: var(--gray-light) !important;
}


.bg-primary-light{
  background-color: var(--primary-light);
}
.bg-primary-lighter{
  background-color: var(--primary-lighter);
}
.bg-danger-light{
  background-color: var(--danger-light);
}
.bg-success-light{
  background-color: var(--success-light);
}
.bg-gray-light{
  background-color: var(--gray-light);
}
.tt-custom-radius{
  border-radius: var(--custom-radius);
}
.tt-custom-radius-bottom{
  border-bottom-right-radius: var(--custom-radius);
  border-bottom-left-radius: var(--custom-radius);
}
.row-equal-height{
  display: flex;
  flex-wrap: wrap;
}
.row-equal-height>div[class*=col-] {
  display: flex;
}
.row-equal-height>div[class*=col-]>* {
  width: 100%;
}

.text-primary{
  color: var(--primary) !important;
}

.custom-file-label::after {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  bottom: 0 !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: calc(1.5em + .75rem) !important;
  padding: .375rem .75rem !important;
  line-height: 1.5 !important;
  color: var(--primary) !important;
  content: "\f093" !important; 
  font-family: "Font Awesome 5 Pro", "FontAwesome" !important;
  background-color: var(--primary-lighter) !important;
  border-left: inherit !important;
  border-right: none !important;
  border-radius: .25rem 0 0 .25rem !important;
  transition: all 0.3s ease !important;
}

.custom-file:hover .custom-file-label {
  transition: all 0.3s ease !important;
  border-color: var(--primary) !important;
  background-color: var(--primary-lighter) !important;
}

.custom-file:hover .custom-file-label::after {
  background-color: var(--primary-light) !important;
  color: var(--primary) !important;
}

.custom-file-input:valid ~ .custom-file-label::after {
  content: "\f00c" !important; 
  background-color: var(--success) !important;
  color: var(--white) !important;
}

.custom-file-input:valid ~ .custom-file-label {
  border-color: var(--success) !important;
  background-color: var(--success-light) !important;
}

.custom-file:hover .custom-file-input:valid ~ .custom-file-label {
  background-color: var(--success) !important;
  border-color: var(--success) !important;
  box-shadow: 0 4px 12px rgba(7, 192, 126, 0.25) !important;
}

.custom-file:hover .custom-file-input:valid ~ .custom-file-label::after {
  background-color: #06a05b !important;
  transform: scale(1.1) !important;
}
.attachment-group .input-group-append .btn {
  border-left: 1px solid var(--border-color) !important;
}
.div-service-item .dropdown-menu.show {
  right: auto !important;
  left: 0px !important;
  transform: translate3d(-124px, 30px, 0px) !important; 
}
  
.tt-submit-btns {
  display: flex !important;
  gap: 1rem !important;
  margin-top: 2rem !important;
  padding-top: 1.5rem !important;
  border-top: 1px solid var(--border-color) !important;
}

@media (max-width: 768px) {
  .tt-submit-btns {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
}


.custom-select:focus {
  border-color: var(--primary) !important;
  outline: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

.custom-file-input:focus ~ .custom-file-label {
  border-color: var(--primary) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

.page-link:focus {
  z-index: 3;
  outline: 0;
  border-color: var(--primary) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}



.custom-control-input:focus ~ .custom-control-label::before {
  border-color: var(--primary) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

/* Base Button Styles */
.btn {
  font-size: 14px;
  font-family: var(--font-family-english);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  border-radius: 6px;
  font-weight: 500;
  padding: 0.625rem 2rem;
  line-height: 1.4;
  min-height: 42px;
}

.btn:focus,
.btn:active,
.btn.focus,
.btn:not(:disabled):not(.disabled):active:focus,
.btn:not(:disabled):not(.disabled).active:focus,
.show > .btn.dropdown-toggle:focus {
  outline: none !important;
  box-shadow: none !important;
}

.btn i {
  font-size: inherit;
  line-height: 1;
  vertical-align: middle;
}

.btn.btn-sm i {
  font-size: 0.9em;
}

.btn.btn-xs i {
  font-size: 0.85em;
}

.btn.btn-lg i {
  font-size: 1.1em;
}

.btn.btn-sm {
  padding: 0.4rem 0.8rem;
  font-size: 12px;
  border-radius: 4px;
  font-weight: 500;
  min-height: 30px;
}

.btn.btn-xs {
  padding: 0.5rem 0.5rem;
  font-size: 11px;
  border-radius: 4px;
  font-weight: 500;
  min-height: 28px;
  line-height: 1.2;
}

.btn.btn-lg {
  /*padding: 0.875rem 2rem;*/
  padding: 1rem 2.5rem;
  font-size: 16px;
  border-radius: 8px;
  font-weight: 600;
  min-height: 50px;
}

/* Default Button */
.btn-default {
  background-color: var(--white);
  border-color: var(--border-color);
  color: var(--body-color);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default:not(:disabled):not(.disabled):active,
.btn-default:not(:disabled):not(.disabled).active,
.show > .btn-default.dropdown-toggle {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  box-shadow: none !important;
}

.btn-default:hover i,
.btn-default:focus i,
.btn-default:active i {
  color: var(--white);
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

/* Primary Button - Override Bootstrap completely */
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--white) !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
  color: var(--white) !important;
  box-shadow: none !important;
}

/* Override Bootstrap focus states specifically */
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  background-color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
  color: var(--white) !important;
  box-shadow: none !important;
}
.btn-dark,
.btn-dark.disabled,
.btn-dark:disabled {
  background-color: var(--dark) !important;
  border-color: var(--dark) !important;
  color: var(--white) !important;
  box-shadow: none !important;
}

.btn-dark:hover,
.btn-dark:active,
.btn-dark:focus,
.btn-dark.focus,
.btn-dark:not(:disabled):not(.disabled):active,
.btn-dark:not(:disabled):not(.disabled).active,
.show > .btn-dark.dropdown-toggle {
  background-color: var(--dark-hover) !important;
  border-color: var(--dark-hover) !important;
  color: var(--white) !important;
  box-shadow: none !important;
}

.btn-dark:not(:disabled):not(.disabled):active:focus,
.btn-dark:not(:disabled):not(.disabled).active:focus,
.show > .btn-dark.dropdown-toggle:focus {
  background-color: var(--dark-hover) !important;
  border-color: var(--dark-hover) !important;
  color: var(--white) !important;
  box-shadow: none !important;
}
/* Secondary Button */
.btn-secondary {
  background-color: var(--gray-light);
  border-color: var(--border-color);
  color: var(--body-color);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
  background-color: var(--border-color);
  border-color: var(--border-color);
  color: var(--heading-color);
  box-shadow: none !important;
}

/* Success Button */
.btn-success {
  background-color: var(--success);
  border-color: var(--success);
  color: var(--white);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
  background-color: #06a05b;
  border-color: #06a05b;
  color: var(--white);
  box-shadow: none !important;
}

/* Danger Button */
.btn-danger {
  background-color: var(--danger);
  border-color: var(--danger);
  color: var(--white);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active,
.show > .btn-danger.dropdown-toggle {
  background-color: #e11d2f;
  border-color: #e11d2f;
  color: var(--white);
  box-shadow: none !important;
}

/* Warning Button */
.btn-warning {
  background-color: var(--warning);
  border-color: var(--warning);
  color: var(--white);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active,
.show > .btn-warning.dropdown-toggle {
  background-color: #e8941a;
  border-color: #e8941a;
  color: var(--white);
  box-shadow: none !important;
}

/* Info Button */
.btn-info {
  background-color: var(--info);
  border-color: var(--info);
  color: var(--white);
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active,
.show > .btn-info.dropdown-toggle {
  background-color: #1cc7ca;
  border-color: #1cc7ca;
  color: var(--white);
  box-shadow: none !important;
}

/* Outline Buttons */
.btn-outline-primary {
  background-color: transparent;
  border-color: var(--primary);
  color: var(--primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  box-shadow: none !important;
}

.btn-outline-secondary {
  background-color: transparent;
  border-color: var(--border-color);
  color: var(--body-color);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.show > .btn-outline-secondary.dropdown-toggle {
  background-color: var(--gray-light);
  border-color: var(--border-color);
  color: var(--heading-color);
  box-shadow: none !important;
}

.btn-outline-warning {
  color: #e8941a;
  border-color: #e8941a;
  background: transparent;
  font-size: 14px;
  font-family: var(--font-family-english);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  border-radius: 6px;
  font-weight: 500;
  padding: 0.375rem 0.75rem;
  line-height: 1.4;
  min-height: 30px;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active,
.btn-outline-warning:not(:disabled):not(.disabled):active,
.btn-outline-warning:not(:disabled):not(.disabled).active,
.show > .btn-outline-warning.dropdown-toggle {
  background: #e8941a;
  border-color: #e8941a;
  color: white;
  box-shadow: none !important;
}

.btn-outline-success {
  color: var(--success);
  border-color: var(--success);
  background: transparent;
  font-size: 14px;
  font-family: var(--font-family-english);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  border-radius: 6px;
  font-weight: 500;
  padding: 0.375rem 0.75rem;
  line-height: 1.4;
  min-height: 30px;
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active,
.btn-outline-success:not(:disabled):not(.disabled):active,
.btn-outline-success:not(:disabled):not(.disabled).active,
.show > .btn-outline-success.dropdown-toggle {
  background: var(--success);
  border-color: var(--success);
  color: white;
  box-shadow: none !important;
}

.btn-outline-danger {
  color: var(--danger);
  border-color: var(--danger);
  background: transparent;
  font-size: 14px;
  font-family: var(--font-family-english);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  border-radius: 6px;
  font-weight: 500;
  padding: 0.375rem 0.75rem;
  line-height: 1.4;
  min-height: 30px;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active,
.btn-outline-danger:not(:disabled):not(.disabled):active,
.btn-outline-danger:not(:disabled):not(.disabled).active,
.show > .btn-outline-danger.dropdown-toggle {
  background: var(--danger);
  border-color: var(--danger);
  color: white;
  box-shadow: none !important;
}

.btn-outline-info {
  color: var(--info);
  border-color: var(--info);
  background: transparent;
  font-size: 14px;
  font-family: var(--font-family-english);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  border-radius: 6px;
  font-weight: 500;
  padding: 0.375rem 0.75rem;
  line-height: 1.4;
  min-height: 30px;
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active,
.btn-outline-info:not(:disabled):not(.disabled):active,
.btn-outline-info:not(:disabled):not(.disabled).active,
.show > .btn-outline-info.dropdown-toggle {
  background: var(--info);
  border-color: var(--info);
  color: white;
  box-shadow: none !important;
}

/* Link Button */
.btn-link {
  background-color: transparent;
  border-color: transparent;
  color: var(--primary);
  text-decoration: none;
}

.btn-link:hover,
.btn-link:focus,
.btn-link:active,
.btn-link:not(:disabled):not(.disabled):active,
.btn-link:not(:disabled):not(.disabled).active,
.show > .btn-link.dropdown-toggle {
  background-color: transparent;
  border-color: transparent;
  color: var(--primary-dark);
  text-decoration: underline;
  box-shadow: none !important;
}

/* Form Actions */
.form-actions .btn {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  min-width: 140px;
}

/* Disabled States */
.btn.disabled,
.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  background-color: var(--gray-light) !important;
  border-color: var(--border-color) !important;
  color: var(--text-muted) !important;
  box-shadow: none !important;
}

/* Dropdown Items */
.dropdown-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  color: var(--text-muted);
  background-color: transparent;
}

.dropdown-item.disabled:hover {
  background-color: transparent;
  color: var(--text-muted);
}

.btn-group .btn.disabled:not(:last-child) {
  border-right-color: var(--border-color) !important;
}

.btn:focus,
.btn.focus,
.btn:active,
.btn.active,
.btn:not(:disabled):not(.disabled):active,
.btn:not(:disabled):not(.disabled).active {
  outline: 0 !important;
  box-shadow: none !important;
}

.btn-primary:focus,
.btn-primary.focus,
.btn-secondary:focus,
.btn-secondary.focus,
.btn-success:focus,
.btn-success.focus,
.btn-danger:focus,
.btn-danger.focus,
.btn-warning:focus,
.btn-warning.focus,
.btn-info:focus,
.btn-info.focus,
.btn-outline-primary:focus,
.btn-outline-primary.focus,
.btn-outline-secondary:focus,
.btn-outline-secondary.focus,
.btn-outline-success:focus,
.btn-outline-success.focus,
.btn-outline-danger:focus,
.btn-outline-danger.focus,
.btn-outline-warning:focus,
.btn-outline-warning.focus,
.btn-outline-info:focus,
.btn-outline-info.focus,
.btn-link:focus,
.btn-link.focus {
  outline: 0 !important;
  box-shadow: none !important;
}

/* Responsive Design */
@media (max-width: 768px) {
  .btn {
    padding: 0.625rem 1.125rem;
    min-height: 40px;
  }
  
  .btn.btn-sm {
    padding: 0.375rem 0.625rem;
    font-size: 11px;
    min-height: 30px;
  }
  
  .btn.btn-xs {
    padding: 0.25rem 0.4rem;
    font-size: 10px;
    min-height: 26px;
  }
  
  .form-actions .btn {
    display: block;
    width: 100%;
    margin-bottom: 0.75rem;
  }
  
  .form-actions .btn:last-child {
    margin-bottom: 0;
  }
}


.alert {
    position: relative;
    padding: 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 12px;
    font-family: var(--font-family-english);
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    animation: slideInDown 0.25s ease-out;
}

.alert h4,
.alert .alert-heading {
    color: inherit;
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 16px;
}

.alert p {
    margin-bottom: 0;
    line-height: 1.5;
}

.alert p:not(:last-child) {
    margin-bottom: 0.5rem;
}

.alert a:not(.btn),
.alert .alert-link {
    font-weight: 600;
    text-decoration: none;
}

.alert a:not(.btn):hover,
.alert .alert-link:hover {
    text-decoration: underline;
}

.alert .btn:hover {
    text-decoration: none;
}

.alert-warning {
    background: #fff8e1;
    border-color: rgba(255, 193, 7, 0.15);
    color: #8b6914;
}

.alert-warning a:not(.btn),
.alert-warning .alert-link {
    color: #6b5411;
}

.alert-warning .alert-heading {
    color: #8b6914;
}

.alert-success {
    background: var(--success-light);
    border-color: rgba(7, 192, 126, 0.15);
    color: #0a533a;
}

.alert-success a:not(.btn),
.alert-success .alert-link {
    color: #073d2b;
}

.alert-success .alert-heading {
    color: #0a533a;
}

.alert-info {
    background: var(--info-light);
    border-color: rgba(36, 225, 228, 0.15);
    color: #1db4b7;
}

.alert-info a:not(.btn),
.alert-info .alert-link {
    color: #168a8d;
}

.alert-info .alert-heading {
    color: #1db4b7;
}

.alert-danger {
    background: var(--danger-light);
    border-color: rgba(253, 50, 70, 0.15);
    color: #d9253a;
}

.alert-danger a:not(.btn),
.alert-danger .alert-link {
    color: #b01e30;
}

.alert-danger .alert-heading {
    color: #d9253a;
}

.alert-primary {
    background: var(--primary-lighter);
    border-color: rgba(29, 175, 187, 0.15);
    color: var(--primary-dark);
}

.alert-primary a:not(.btn),
.alert-primary .alert-link {
    color: var(--primary-darker);
}

.alert-primary .alert-heading {
    color: var(--primary-dark);
}

.alert-icon-container {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
}

.alert-icon-container i {
    font-size: 1.25rem;
}

.alert-warning .alert-icon-container {
    background: rgba(255, 193, 7, 0.15);
}

.alert-warning .alert-icon-container i {
    color: var(--warning);
}

.alert-success .alert-icon-container {
    background: rgba(7, 192, 126, 0.15);
}

.alert-success .alert-icon-container i {
    color: var(--success);
}

.alert-info .alert-icon-container {
    background: rgba(36, 225, 228, 0.15);
}

.alert-info .alert-icon-container i {
    color: var(--info);
}

.alert-danger .alert-icon-container {
    background: rgba(253, 50, 70, 0.15);
}

.alert-danger .alert-icon-container i {
    color: var(--danger);
}

.alert-primary .alert-icon-container {
    background: rgba(29, 175, 187, 0.15);
}

.alert-primary .alert-icon-container i {
    color: var(--primary);
}

.alert-content-container {
    flex: 1;
    padding: 0 1rem;
}

.alert-actions-container {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    flex-shrink: 0;
}

.btn-close {
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.btn-close:hover {
    opacity: 1;
    transform: scale(1.1);
}

.alert-warning .btn-close:hover {
    background: rgba(255, 193, 7, 0.1);
}

.alert-success .btn-close:hover {
    background: rgba(7, 192, 126, 0.1);
}

.alert-danger .btn-close:hover {
    background: rgba(253, 50, 70, 0.1);
}

.alert-info .btn-close:hover {
    background: rgba(36, 225, 228, 0.1);
}

.alert-primary .btn-close:hover {
    background: rgba(29, 175, 187, 0.1);
}

.btn-close i {
    font-size: 0.875rem;
}

.alert-warning .btn-close i {
    color: var(--warning);
}

.alert-success .btn-close i {
    color: var(--success);
}

.alert-danger .btn-close i {
    color: var(--danger);
}

.alert-info .btn-close i {
    color: var(--info);
}

.alert-primary .btn-close i {
    color: var(--primary);
}

.alert-footer {
    margin-top: 1rem;
    padding-top: 1rem;
    font-size: 0.875rem;
}

.alert-warning .alert-footer {
    border-top: 1px solid rgba(255, 193, 7, 0.2);
}

.alert-success .alert-footer {
    border-top: 1px solid rgba(7, 192, 126, 0.2);
}

.alert-danger .alert-footer {
    border-top: 1px solid rgba(253, 50, 70, 0.2);
}

.alert-info .alert-footer {
    border-top: 1px solid rgba(36, 225, 228, 0.2);
}

.alert-primary .alert-footer {
    border-top: 1px solid rgba(29, 175, 187, 0.2);
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .alert {
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 1rem;
    }
    
    .d-flex.align-items-center {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    
    .alert-icon-container {
        margin-right: 0.75rem;
    }
    
    .alert-content-container {
        flex: 1;
        padding: 0;
        min-width: 0;
    }
    
    .alert-actions-container {
        width: 100%;
        justify-content: center;
        margin-top: 0.5rem;
    }
    
    .btn-outline-warning,
    .btn-outline-success,
    .btn-outline-danger,
    .btn-outline-info,
    .btn-outline-primary {
        min-width: 140px;
        padding: 0.5rem 1rem;
    }
}

@media (max-width: 576px) {
    .alert {
        padding: 0.875rem;
        font-size: 13px;
        border-radius: 6px;
    }
    
    .alert h4,
    .alert .alert-heading {
        font-size: 15px;
    }
    
    .alert-icon-container {
        width: 32px;
        height: 32px;
    }
    
    .btn-close {
        width: 28px;
        height: 28px;
    }
    
    .btn-close i {
        font-size: 0.75rem;
    }
}



.mc-promo-login .panel-heading .primary-content h3,
.mc-promo-manage .panel-heading .primary-content h3,
.primary-content .card-title, .primary-content .mc-promo-login .panel-heading h3,
.primary-content .mc-promo-manage .panel-heading h3,
.primary-content .promo-container .header h3,
.promo-container .header .primary-content h3{
  font-size: 18px;
  margin: 0 0 15px 0;
}





.navbar {
  padding: .75rem 1rem !important;
}

.tt-header {
  background: var(--white) !important;
  border-bottom: 1px solid var(--border-color) !important;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1030 !important;
  --bs-navbar-padding-y: 0 !important;
}

.tt-header:not(.tt-double-header) {
  transition: all 0.3s ease-in-out;
}

.tt-header:not(.tt-double-header).affix {
  padding: 0.25rem 0;
}

.tt-header .logo-img {
  --logo-height: 42px; 
  position: relative;
  height: var(--logo-height) !important;
  max-height: var(--logo-height) !important;
  width: auto !important;
  transition: all 0.3s ease-in-out !important;
}
@media (min-width: 1200px) {
  .tt-header .container {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  
  .tt-header .navbar-brand {
    margin-right: auto !important;
  }
  
  .tt-header .main-navbar-wrapper {
    margin-right: 1rem !important;
    margin-left: 0 !important;
  }
  
  .tt-header .tt-toolbar-wrap {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 1199px) {
  .tt-header .container {
    justify-content: space-between !important;
  }
  
  .tt-header .navbar-brand {
    margin-right: 0 !important;
  }
  
  .tt-header .main-navbar-wrapper {
    margin: 0 !important;
  }
}

.tt-header .tt-main-header ul li {
  position: relative !important;
  isolation: isolate !important;
}

.tt-header .tt-main-header ul li a {
  font-size: 14px !important;
  font-family: "Noto Kufi Arabic", sans-serif !important;
  color: var(--body-color);
  position: relative;
  padding: 1rem 0.75rem !important;
  border-radius: 8px;
  transition: all 0.3s ease-in-out !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.tt-header .tt-main-header ul li a:hover,
.tt-header .tt-main-header ul li:hover > a {
  color: var(--primary) !important;
}



.dropdown-menu {
  border: 1px solid var(--border-color) !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15) !important;
  padding: 0.5rem 0 !important;
  background: var(--white) !important;
  transition: all 0.3s ease-in-out !important;
}

.dropdown-toggle::after {
  vertical-align: middle;
}

.tt-main-header .dropdown-menu .dropdown-item,
.tt-header .dropdown-menu .dropdown-item {
  display: block !important;
  width: calc(100% - 0.5rem) !important;
  padding: 0.5rem 0.75rem !important;
  clear: both !important;
  font-weight: 500 !important;
  color: var(--body-color) !important;
  text-align: inherit !important;
  white-space: nowrap !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0.25rem !important;
  margin: 0 0.25rem !important;
  transition: all 0.3s ease-in-out !important;
}

.tt-main-header .dropdown-menu .dropdown-item:hover,
.tt-main-header .dropdown-menu .dropdown-item:focus,
.tt-main-header .dropdown-menu .dropdown-item:active,
.tt-header .dropdown-menu .dropdown-item:hover,
.tt-header .dropdown-menu .dropdown-item:focus,
.tt-header .dropdown-menu .dropdown-item:active {
  background-color: rgba(26, 185, 198, 0.1) !important;
  color: var(--primary) !important;
  text-decoration: none !important;
  transform: none !important;
  width: calc(100% - 0.5rem) !important;
  margin: 0 0.25rem !important;
}

.tt-main-header li.dropdown-item {
  padding: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  transition: none !important;
}

.tt-main-header .dropdown-menu li.dropdown-item a.dropdown-item {
  display: block !important;
  width: calc(100% - 0.5rem) !important;
  padding: 0.5rem 0 !important;
  margin: 0 0.25rem !important;
  border-radius: 0.25rem !important;
  background-color: transparent !important;
  transition: all 0.3s ease-in-out !important;
}

.tt-main-header .dropdown-menu,
.tt-header .dropdown-menu {
  overflow: hidden !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  margin-top: 1rem !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.tt-main-header .dropdown-menu.show,
.tt-header .dropdown-menu.show {
	min-width: 200px;
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

.tt-main-header .dropdown-menu.dropdown-menu-right,
.tt-header .dropdown-menu.dropdown-menu-right {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

.account .dropdown-menu {
  left: auto !important;
  right: 0 !important;
  transform: none !important;
}
.list-group .dropdown-divider {
    margin: 0.5rem 0.75rem !important;
}
.tt-main-header .dropdown-divider {
  margin: 0.25rem 0.5rem !important;
  border-color: var(--border-color) !important;
}

.tt-header #Primary_Navbar-Language_Switcher img {
  border-radius: 2px !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  flex-shrink: 0 !important;
}

.tt-header #Primary_Navbar-Language_Switcher .dropdown-item img {
  width: 16px !important;
  height: 12px !important;
  margin-right: 8px !important;
  border-radius: 2px !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
}

.tt-header #Primary_Navbar-Language_Switcher .dropdown-menu {
  min-width: 150px !important;
}

/* في ملف CSS الخاص بالتصميم */
.collapsable-dropdown {
    display: none !important;
    pointer-events: none !important;
}

.collapsable-dropdown-menu {
    display: none !important;
}

/* منع JavaScript من نقل العناصر */
#nav > li {
    position: relative !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* تعطيل نظام auto-collapse */
.navbar-nav[data-auto-collapse],
.navbar-nav.auto-collapse {
    pointer-events: auto !important;
}

.navbar-nav > li:nth-child(n+6) {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
}
.tt-secondary-list {
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  margin: 0 !important;
}

.tt-secondary-list li.tt-nav-item {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.tt-notification button,
.tt-toolbar-wrap .toolbar li a.cart-btn,
.tt-toolbar-wrap .toolbar li button.btn,
.nav-link[data-toggle="offcanvas"],
.account .dropdown-toggle {
  position: relative !important;
  background: var(--white) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  color: var(--body-color) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
  cursor: pointer !important;
}

.tt-notification button,
.tt-toolbar-wrap .toolbar li a.cart-btn,
.tt-toolbar-wrap .toolbar li button.btn,
.nav-link[data-toggle="offcanvas"] {
  width: 42px !important;
  padding: 0 !important;
}

.account .dropdown-toggle {
  width: auto !important;
  min-width: 42px !important;
  padding: 0 12px !important;
  gap: 6px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.tt-notification button:hover,
.tt-toolbar-wrap .toolbar li a.cart-btn:hover,
.tt-toolbar-wrap .toolbar li button.btn:hover,
.nav-link[data-toggle="offcanvas"]:hover,
.account .dropdown-toggle:hover {
  background: var(--primary-light) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

.account .dropdown-toggle::before {
  content: "\f007" !important;
  font-family: "Font Awesome 5 Pro" !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  color: inherit !important;
}

.account .dropdown-toggle::after {
  border-top: 3px solid !important;
  border-right: 3px solid transparent !important;
  border-bottom: 0 !important;
  border-left: 3px solid transparent !important;
}

.tt-cart-badge {
  position: absolute !important;
  top: -6px !important;
  left: -6px !important;
  width: 18px !important;
  height: 18px !important;
  background: var(--danger) !important;
  color: var(--white) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 50% !important;
  border: 2px solid var(--white) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  z-index: 5 !important;
  font-family: "Noto Kufi Arabic", sans-serif !important;
}

.tt-toolbar-wrap .toolbar li a.cart-btn {
  overflow: visible !important;
}

.tt-notification .tt-circle {
  position: absolute !important;
  top: 6px !important;
  left: 6px !important;
  width: 8px !important;
  height: 8px !important;
  background-color: var(--danger) !important;
  border: 2px solid var(--white) !important;
  border-radius: 50% !important;
  z-index: 5 !important;
  animation: fade-slow 2.5s infinite !important;
}

@keyframes fade-slow {
  0% { 
    opacity: 0;
  }
  50% { 
    opacity: 1;
  }
  100% { 
    opacity: 0; 
  }
}

/* Focus states للأزرار */
.tt-notification button:focus,
.tt-toolbar-wrap .toolbar li a.cart-btn:focus,
.tt-toolbar-wrap .toolbar li button.btn:focus,
.nav-link[data-toggle="offcanvas"]:focus,
.account .dropdown-toggle:focus {
  outline: none !important;
  border-color: var(--primary) !important;
}

/* موضع الإشعارات */
.tt-notification button[aria-describedby] ~ .popover-user-notifications,
#accountNotificationsContent.popover-user-notifications {
  position: absolute !important;
  top: calc(100% + 0.5rem) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
}

/* تطوير الإشعارات - selector صحيح */
.popover.popover-user-notifications {
  padding: 0 !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
  background: var(--white) !important;
  min-width: 320px !important;
  max-width: 380px !important;
  z-index: 9999 !important;
  overflow: hidden !important;
}

/* هيدر الإشعارات */
.popover.popover-user-notifications .popover-header {
  background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important;
  color: var(--white) !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  border: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: center !important;
}

.popover.popover-user-notifications .popover-header::before {
  content: "🔔 الإشعارات";
  font-size: 14px;
}

/* جسم الإشعارات */
.popover.popover-user-notifications .popover-body {
  padding: 0 !important;
  max-height: 400px !important;
  overflow-y: auto !important;
}

.popover.popover-user-notifications ul.client-alerts {
  list-style: none !important;
  padding: 8px !important;
  margin: 0 !important;
}

.popover.popover-user-notifications ul.client-alerts li {
  padding: 0 !important;
  margin-bottom: 8px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: var(--white) !important;
  border: 1px solid var(--border-color) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
}

.popover.popover-user-notifications ul.client-alerts li:last-child {
  margin-bottom: 0 !important;
}

.popover.popover-user-notifications ul.client-alerts li:hover {
  border-color: var(--primary-light) !important;
  background: rgba(var(--primary-rgb), 0.1) !important;
}

.popover.popover-user-notifications ul.client-alerts li a {
  display: flex !important;
  align-items: flex-start !important;
  padding: 1rem !important;
  text-decoration: none !important;
  color: var(--body-color) !important;
  transition: color 0.3s ease !important;
  gap: 12px !important;
  width: 100% !important; 
  box-sizing: border-box !important;
  background: transparent !important;
}

.popover.popover-user-notifications ul.client-alerts li a:hover {
  color: var(--primary) !important;
  text-decoration: none !important;
  background: transparent !important;
}

/* الأيقونات */
.popover.popover-user-notifications ul.client-alerts li a i {
  font-size: 16px !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  width: 20px !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
      padding-top: 0;
}

/* ألوان الأيقونات حسب النوع */
.popover.popover-user-notifications ul.client-alerts li a i.fa-exclamation-circle {
  color: #f39c12 !important; 
}

.popover.popover-user-notifications ul.client-alerts li a i.fa-info-circle {
  color: #3498db !important;
}

.popover.popover-user-notifications ul.client-alerts li a i.fa-exclamation-triangle {
  color: #e74c3c !important; 
}

.popover.popover-user-notifications ul.client-alerts li a .message {
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  flex: 1 !important;
  text-align: left ;
  margin-left: 0;
}

.popover.popover-user-notifications .arrow::before {
  border-bottom-color: var(--primary) !important;
}

.popover.popover-user-notifications .popover-body::-webkit-scrollbar {
  width: 4px;
}

.popover.popover-user-notifications .popover-body::-webkit-scrollbar-track {
  background: transparent;
}

.popover.popover-user-notifications .popover-body::-webkit-scrollbar-thumb {
  background: rgba(var(--primary-rgb), 0.3);
  border-radius: 2px;
}

.popover.popover-user-notifications .popover-body::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--primary-rgb), 0.5);
}

.popover.popover-user-notifications ul.client-alerts li.none {
  text-align: center !important;
  color: var(--muted) !important;
  font-style: italic !important;
  padding: 20px !important;
}

@media (max-width: 480px) {
  .popover.popover-user-notifications {
    min-width: 280px !important;
    max-width: calc(100vw - 20px) !important;
  }
  
  .popover.popover-user-notifications ul.client-alerts li a {
    padding: 10px !important;
    gap: 10px !important;
  }
  
  .popover.popover-user-notifications ul.client-alerts li a .message {
    font-size: 12px !important;
  }
}
.select-account {
  margin: 0;
}

.select-account a, 
.select-account {
  border: none;
  padding: 0;
}

.select-account a:hover {
  background: transparent;
}

.tt-country-flag {
  width: 16px;
  vertical-align: middle;
  margin-left: 2px;
}

#currency-dropdown a span {
  font-size: 12px;
}

#currency-dropdown .dropdown-menu {
  padding: 4px 0;
  min-width: 65px;
  border-radius: 4px;
}

#currency-dropdown .dropdown-menu a {
  padding: 5px 12px;
}

#currency-dropdown .dropdown-menu a span {
  font-size: 14px;
  margin: 0 5px;
}

.tt-toolbar-wrap li .dropdown-menu {
  position: absolute;
}

.navbar .nav-item a.btn-sm {
  position: relative !important;
  background: var(--white) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  color: var(--body-color) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
  cursor: pointer !important;
  padding: 0 12px !important;
  gap: 6px !important;
  font-weight: 500 !important;
}

.navbar .nav-item a.btn-sm:hover {
  background: var(--primary-light) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}


@media (max-width: 768px) {
  .tt-main-header .dropdown-menu,
  .tt-header .dropdown-menu {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    max-width: calc(100vw - 2rem) !important;
    min-width: 200px !important;
  }
}

@media (max-width: 991px) {
  .tt-header .tt-main-header ul li a {
    padding: 0.75rem !important;
  }
  
  .tt-secondary-list {
    gap: 0.125rem !important;
  }
  
  .tt-notification button,
  .tt-toolbar-wrap .toolbar li a.cart-btn,
  .tt-toolbar-wrap .toolbar li button.btn,
  .nav-link[data-toggle="offcanvas"] {
    width: 38px !important;
    height: 38px !important;
    font-size: 15px !important;
    min-height: 38px !important;
  }
  
  .account .dropdown-toggle,
  .navbar .nav-item a.btn-sm {
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    min-height: 38px !important;
  }
  
  .tt-cart-badge {
    width: 16px !important;
    height: 16px !important;
    font-size: 10px !important;
    top: -5px !important;
    right: -5px !important;
  }
}
@media (max-width: 436px) {
  .navbar .nav-item a.btn-sm {
    font-size: 0 !important; 
    min-width: 38px !important;
    padding: 0 8px !important;
    text-indent: -9999px !important;
  }

  .account .dropdown-toggle {
    overflow: hidden !important;
    white-space: nowrap !important;
    width: 38px !important;
    text-indent: -9999px !important;
  }

  .account .dropdown-toggle::before {
    content: "\f007" !important;
    font-family: "Font Awesome 5 Pro" !important;
    font-size: 16px !important;
    text-indent: 0 !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .navbar .nav-item a.btn-sm i {
    font-size: 16px !important;
    text-indent: 0 !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .account .dropdown-toggle::after {
    display: none !important;
  }

  .navbar .nav-item a.btn-sm .tt-hide-sm {
    display: none !important;
  }

  .tt-main-header .dropdown-menu.dropdown-menu-right, .tt-header .dropdown-menu.dropdown-menu-right {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-30%) !important;
  }
}
@media (min-width: 320px) and (max-width: 1199px) {
  .offcanvas-collapse {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 300px;
    z-index: 999;
    padding: 0 !important;
    overflow-y: auto;
    background: linear-gradient(135deg, var(--gray-light) 0%, #f8f9fa 100%) !important;
    box-shadow: -4px 0 20px 0 rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease-in-out;
    transform: translateX(-150%);
    align-items: baseline;
  }
  
  .offcanvas-collapse.open {
    transform: translateX(0);
    z-index: 9999;
    display: block;
  }
  
  .offcanvas-collapse #mainNavbar {
    padding: 25px 20px 20px 20px !important;
    position: relative;
  }
  
  .offcanvas-collapse #mainNavbar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
  }
  
  .offcanvas-collapse ul#nav li {
    margin-bottom: 8px !important;
    border-radius: 8px !important;
    overflow: hidden;
    background: var(--white) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
  }
  
  .offcanvas-collapse ul#nav li a {
    display: block !important;
    padding: 15px 16px !important;
    font-weight: 600 !important;
    color: var(--body-color) !important;
    background: transparent !important;
    border-radius: 0 !important;
    transition: all 0.3s ease-in-out !important; 
  }
  
  .offcanvas-collapse ul#nav li a:hover {
    background: var(--primary-light) !important;
    color: var(--primary) !important;
    border-radius: 8px !important;
	

  }
  
  .offcanvas-collapse .dropdown-menu {
    background: rgba(var(--primary-rgb), 0.05) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05) !important;
    transform: translateX(0%) !important;
    position: static !important;
    transition: all 0.3s ease-in-out !important;

  }
  
  .offcanvas-collapse .dropdown-item {
    padding: 0 !important;
    margin-bottom: 4px !important;
    background: transparent !important;
  }
  
  .offcanvas-collapse .dropdown-item:last-child {
    margin-bottom: 0 !important;
  }
  
  .offcanvas-collapse .dropdown-item a {
    display: block !important;
    padding: 10px 12px !important;
    border-radius: 6px !important;
    background: var(--white) !important;
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--body-color) !important;
    transition: all 0.3s ease-in-out !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .offcanvas-collapse .dropdown-item a:hover {
    background: var(--primary) !important;
    color: var(--white) !important;
  }
  
  /* تحسين الفواصل */
  .offcanvas-collapse .dropdown-divider {
    margin: 12px 8px !important;
    border-color: rgba(var(--primary-rgb), 0.2) !important;
    border-width: 1px !important;
  }
  
  /* scrollbar مخصص */
  .offcanvas-collapse::-webkit-scrollbar {
    width: 6px;
  }
  
  .offcanvas-collapse::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .offcanvas-collapse::-webkit-scrollbar-thumb {
    background: rgba(var(--primary-rgb), 0.3);
    border-radius: 3px;
  }
  
  .offcanvas-collapse::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--primary-rgb), 0.5);
  }
}

@media (min-width: 320px) and (max-width: 370px) {
  .navbar-brand:not(.tt-double-header .navbar-brand):not(#registration .navbar-brand) {
    width: 100%;
    display: block;
    text-align: center;
  }
  
  .tt-toolbar-wrap:not(.tt-double-header .tt-toolbar-wrap) {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  .tt-double-header .tt-toolbar-wrap {
    width: auto;
  }
}

@media (min-width: 320px) and (max-width: 579px) {
  .tt-header .container {
    padding-left: 0;
    padding-right: 0;
  }
  
  .tt-header .logo-img {
    height: 36px !important;
  }
  
  .popover-user-notifications {
    max-width: 280px !important;
  }
  
  .popover-user-notifications ul li a {
    padding: 0.75rem !important;
    font-size: 13px !important;
  }
}

#payMethodList tbody tr td:first-of-type i {
  color: var(--primary);
  font-size: 22px;
  line-height: inherit;
}

.iq-body-wrapper .overlay {
  display: none;
  cursor: pointer;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1001;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
}

.iq.active {
  overflow-y: hidden;
}

header.header.tt-double-header .main-navbar-wrapper .navbar-collapse {
  padding: 0.75rem 0;
}
/* Hero Section موحد مع الموقع الرئيسي */
/* Hero Section موحد مع الموقع الرئيسي */

.tt-page-hero {
  background: #041023 !important;
  padding: 3rem 0 !important;
  margin-bottom: 2rem !important; /* مسافة من الأسفل */
}

/* الأشكال الخلفية - نفس الموقع الرئيسي */
.bg-shapes {
  pointer-events: none !important;
  opacity: 0.6 !important;
}

.gradient-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(110deg, 
      rgba(0,0,0,0) 0%, 
      rgba(0,0,0,0.1) 30%, 
      rgba(0,0,0,0.3) 70%, 
      rgba(0,0,0,0.5) 100%) !important;
  pointer-events: none !important;
}

.shape-line {
  position: absolute !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--primary-light), transparent) !important;
  opacity: 0.3 !important;
}

.shape-line-1 {
  width: 180px !important;
  top: 20% !important;
  right: 15% !important;
  transform: rotate(-25deg) !important;
}

.shape-line-2 {
  width: 130px !important;
  top: 65% !important;
  left: 20% !important;
  transform: rotate(20deg) !important;
}

.shape-line-3 {
  width: 100px !important;
  top: 45% !important;
  right: 5% !important;
  transform: rotate(-45deg) !important;
}

.shape-circle {
  position: absolute !important;
  border: 1px solid var(--primary-light) !important;
  border-radius: 50% !important;
  opacity: 0.2 !important;
}

.shape-circle-1 {
  width: 70px !important;
  height: 70px !important;
  top: 25% !important;
  left: 8% !important;
}

.shape-circle-2 {
  width: 100px !important;
  height: 100px !important;
  bottom: 30% !important;
  right: 10% !important;
}

.shape-circle-3 {
  width: 50px !important;
  height: 50px !important;
  top: 55% !important;
  left: 25% !important;
}

.shape-dot {
  position: absolute !important;
  width: 4px !important;
  height: 4px !important;
  background: var(--primary) !important;
  border-radius: 50% !important;
  opacity: 0.4 !important;
}

.shape-dot-1 { top: 30% !important; right: 20% !important; }
.shape-dot-2 { top: 50% !important; left: 15% !important; }
.shape-dot-3 { bottom: 35% !important; right: 30% !important; }
.shape-dot-4 { top: 75% !important; right: 15% !important; }

.grid-pattern {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: 
      linear-gradient(rgba(29, 175, 187, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(29, 175, 187, 0.04) 1px, transparent 1px) !important;
  background-size: 45px 45px !important;
  opacity: 0.4 !important;
}

/* محتوى Hero مركزي */
.hero-content {
  position: relative !important;
  z-index: 2 !important;
  max-width: 700px !important;
  margin: 0 auto !important;
}

/* عنوان الصفحة مركزي */
.hero-title {
  font-size: 2.2rem !important;
  font-weight: 600 !important;
  color: var(--white) !important;
  margin-bottom: 1rem !important;
  line-height: 1.3 !important;
}

/* وصف الصفحة مركزي */
.hero-description {
  font-size: 1rem !important;
  color: rgba(255, 255, 255, 0.75) !important;
  margin: 0 auto !important;
  line-height: 1.6 !important;
  max-width: 600px !important;
}

/* تحسينات للجوال */
@media (max-width: 768px) {
  .tt-page-hero {
    padding: 2.5rem 0 !important;
    margin-bottom: 1.5rem !important;
  }
  
  .hero-title {
    font-size: 1.8rem !important;
    margin-bottom: 0.8rem !important;
  }
  
  .hero-description {
    font-size: 0.95rem !important;
  }
  
  /* تقليل الأشكال في الجوال */
  .shape-line-2,
  .shape-circle-3,
  .shape-dot-3,
  .shape-dot-4 {
    display: none !important;
  }
}

/*promo section css*/
.tt-promo{
  color: var(--body-color);
  font-family: var(--font-family-english);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 15px;
}
.tt-promo, .tt-promo i{
  transition: all 0.3s ease-in-out;
}
.tt-promo i{
  font-size: 35px;
  color: var(--primary);
}
.tt-promo:hover{
  color: var(--primary);
}
.tt-promo:hover{
  transform: translate3d(0,-3px,0);
  box-shadow: 5px 10px 25px rgba(120, 120, 120, 0.1);
}

/*domain*/


/*domain search list*/
.tt-domain-search-wrap p{
  color: var(--primary-light);
}
.tt-domain-list li span{
  color: var(--danger);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-family-english);
}
.home-domain-search .form-control{
  height: calc(1.95em + 0.95rem + 2px);
}

.home-domain-search .tld-logos li{
  background-color: var(--primary-light);
  padding: 2px 10px;
  border-radius: 4px;
}
/*pricing section css*/
.tt-price-single{
  position: relative;
  display: block;
  transition: all 0.3s ease-in-out;
}
.tt-price-single:hover{
  box-shadow: 0 20px 40px -4px rgba(120, 120, 120, 0.16);
}
.tt-price{
  color: var(--danger);
}
.tt-price span{
  font-size: 14px;
  color: var(--body-color);
}
.tt-popular-badge{
  background: var(--danger);
  color: var(--white);
  font-size: 13px;
  left: 0;
  top: 0;
  padding: 0 10px;
  line-height: inherit;
  border-top-left-radius: var(--custom-radius);
  width: 85px;
  height: 27px;
}
.tt-popular-badge:after{
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-right: 10px solid var(--white);
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
}


/*account links*/
.tt-account{
  margin-top: 15px;
  margin-bottom: -50px;
  display: block;
  padding: 20px;
  transition: all 0.3s ease-in-out;
  font-weight: 500;
  font-family: var(--font-family-english);
  font-size: 15px;
  box-shadow: 5px 10px 25px rgba(120, 120, 120, 0.1);
  border-top: none;
  color: var(--body-color);
}
@media (min-width: 320px) and (max-width: 991px){
  .tt-account{
    margin-top: 0;
    margin-bottom: 15px;
  }
}
.tt-account:hover{
  color: var(--primary);
  transform: translate3d(0,-3px,0);
}
.tt-account img{
  display: block;
  text-align: center;
  margin-bottom: 12px;
}

/*services section*/
.tt-service-single{
  position: relative;
  display:block;
  height: auto;
}
.tt-service-single:before,
.tt-service-single:after{
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  background: linear-gradient(45deg,rgba(56,189,248,0), var(--primary) 32.29%, rgba(256,66,56,.41) 67.19%,rgba(236,72,153,0));
  width: calc(100% + 1px);
  height: calc(100% + 1px);
  border-radius: var(--custom-radius);
  transition: all 0.3s ease-in-out;
  opacity: 0.2;
  filter: blur(1px)
}
.tt-service-info{
  position: relative;
  background: var(--primary-darker);
  padding: 32px;
  color: var(--white);
  border-radius: var(--custom-radius);
  z-index: 2;
  height: 100%;
  box-shadow: 0 1px 4px 0 rgba(19,98,248, 0.3);
}
.tt-service-info a, .tt-domain-search-wrap a{
  color: var(--gray-light);
  opacity: 0.7;
}
.tt-service-info a:hover, .tt-domain-search-wrap a:hover{
  opacity: 1;
}


.tt-service-single:hover:before,
.tt-service-single:hover:after{
  opacity: 1;
  filter: blur(2px);
  width: calc(100% + 2px);
  height: calc(100% + 2px);
}

/*testimonial css*/
.tt-testimonial-author img{
  border: 2px solid var(--border-color);
}
.tt-designation{
  font-size: 14px;
}
.custom-slider .swiper-pagination{
  bottom: -15px;
}


/*news and announcements*/
.tt-announcement-single{
  background-color: var(--white);
  padding: 35px;
  margin-top: 15px;
}
.tt-article-heading h3 a{
  color: var(--heading-color);
  font-size: 18px;
  height: 26px;
  line-height: 28px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.tt-article-heading h3 a:hover{
  color: var(--primary);
}
.tt-article-heading .tt-date{
  font-size: 13px;
}

.tt-announcement-single p{
  font-size: 15px;
  height: 109px;
  line-height: 27px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.tt-read-more{
  font-family: var(--font-family-english);
  font-weight: 500;
  font-size: 14px;
}

.tt-read-more i {
  vertical-align: middle;
  transition: all .3s ease-in-out;
  margin-left: 8px;
}
.tt-read-more:hover i{
  transform: translateX(-3px);
  margin-left: 12px;
}
.tt-read-more:hover, .tt-read-more:hover i{
  color: var(--primary);
}


/*cta support css*/
.tt-cta-img{
  margin-top: -60px;
}
.tt-support-item{
  font-family: var(--font-family-english);
  padding: 22px 20px;
  display: block;
  text-align: center;
  width: 170px;
  margin-top: 12px;
  position: relative;
  font-weight: 500;
  transition: 0.3s ease-in-out;
  color: var(--body-color);
}
.tt-support-item span{
  font-size: 14px;
  display: block;
  margin-top: 15px;
}
.tt-support-item:hover{
  text-decoration: none;
  transform: translate3d(0,-3px,0);
  color: var(--primary);
}

/*footer section css*/
/*
.footer.tt-footer .tt-footer-top{
  padding: 60px 0;
}
.tt-footer-menu li a{
  display: block;
  font-size: 14px;
  font-family: var(--font-family-english);
  color: var(--primary-light);
  opacity: 0.9;
  transition: all 0.3s ease-in-out;
}
.tt-footer-menu li a:hover{
  opacity: 1;
}
.tt-footer-bottom{
  border-top: 1px solid var(--border-dark-color);
}
.modal-localisation .modal-content{
  background-color: var(--white);
}
.modal-localisation .modal-body{
  background-size: 50%;
  background-position: right bottom;
  background-repeat: no-repeat;
}
.modal-localisation .item-selector .item.active{
  background-color: transparent;
  border-color: transparent;
  color: var(--primary);
}
.modal-localisation .item-selector .item{
  transition: all 0.3s ease-in-out;
  border:none;
  text-align: left;
  color: var(--body-color);
}
.modal-localisation .item-selector .item:hover{
  background: transparent;
}
.modal-localisation .item-selector .item:before{
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
  background-color: var(--body-color);
  opacity: 0.6;
}
.modal-localisation .item-selector .item:hover:before, .modal-localisation .item-selector .item.active:before{
  background-color: var(--primary);
}
*/


.tt-footer {
    background-color: #F4F7FA !important;
    color: var(--body-color) !important;
	padding-top: 120px !important;
}

.footer-logo {
    max-height: 42px;
    width: auto;
    max-width: 100%;
}

.footer-description {
    font-size: 1rem;
}

.payment-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--bs-heading-color) !important;
}

/* صور طرق الدفع */
.payment-methods {
    gap: 5px;
}

.payment-img {
height: 40px;
  width: auto;
  max-width: 80px;
  margin-left: 2px;
  margin-right: 2px;
}

/* عناوين الأقسام */
.footer-title {
    color: var(--bs-heading-color);
    font-size: 1rem;
    margin-top: 12px !important;
}

/* روابط القوائم */
.footer-links {
    padding-right: 0;
    margin-bottom: 0;
}

.footer-link {
    color: var(--bs-body-color);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
    display: block;
}

.footer-link:hover {
    color: var(--primary, #007bff);
    text-decoration: none;
}

/* القسم السفلي */
.footer-bottom {
    border-top: 1px solid #dee2e6 !important;
}

/* محاذاة حقوق النشر والسوشل ميديا */
.footer-bottom .d-flex {
    align-items: center !important;
    min-height: 50px;
}

.copyright-section {
    display: flex;
    align-items: center;
    height: 100%;
}

.social-section {
    display: flex;
    align-items: center;
    height: 100%;
}

.copyright-text {
    font-size: 14px;
    margin: 0;
    line-height: 1;
}

/* أيقونات السوشل ميديا */
.social-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #dee2e6;
    border-radius: 50%;
    color: var(--bs-body-color);
    text-decoration: none;
    font-size: 12px;
    transition: all 0.3s ease;
    margin: 0 4px;
    flex-shrink: 0;
}

.social-icon:hover {
    background-color: var(--primary, #007bff);
    color: var(--white);
    border-color: var(--primary, #007bff);
    text-decoration: none;
}

/* للشاشات الصغيرة */
@media (max-width: 767px) {
    .footer-bottom .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
        text-align: riigiht; /* بدلًا من center */
        gap: 15px;
    }

    .copyright-section {
        order: 1;
        margin: 0;
        width: 100%;
    }

    .social-section {
        order: 2;
        margin: 0;
        width: 100%;
    }

    .social-icons {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important; 
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .social-icon {
        display: inline-flex !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        width: 36px !important;
        height: 36px !important;
    }

    .payment-methods {
        justify-content: flex-start !important;
        gap: 6px;
    }

    .payment-img {
        height: 25px;
        margin: 0 3px;
    }
}


/*==========================
inner pages style start
============================*/
/*sidebar style*/
.mc-promo-login .panel-heading .sidebar h3,
.mc-promo-manage .panel-heading .sidebar h3,
.promo-container .header .sidebar h3,
.sidebar .card-title,
.sidebar .mc-promo-login .panel-heading h3,
.sidebar .mc-promo-manage .panel-heading h3,
.sidebar .promo-container .header h3,
#order-standard_cart .cart-sidebar h3,
#order-standard_cart .sidebar-collapsed h3{
  font-weight: 500;
}
.mc-promo-login .panel-heading .sidebar h3 i,
.mc-promo-manage .panel-heading .sidebar h3 i,
.promo-container .header .sidebar h3 i,
.sidebar .card-title,
.sidebar .mc-promo-login .panel-heading h3 i,
.sidebar .mc-promo-manage .panel-heading h3 i,
.sidebar .promo-container .header h3 i,
#order-standard_cart .cart-sidebar h3 i,
#order-standard_cart .sidebar-collapsed h3 i{
  font-weight: 500;
}

.card-header {
	  background: #f8fbfc;
}
.sidebar .collapsable-card-body a{
  color: var(--body-color);
}
.card-sidebar {
  background: var(--white) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
  overflow: hidden !important;
}

.card-sidebar .card-header {
  background: #f8fbfc;
  border-bottom: 1px solid rgba(29, 175, 187, 0.1) !important;
  padding: 1rem 1.25rem !important;
}

.card-sidebar .card-header h3 {
  color: var(--heading-color) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

.card-sidebar .card-header i:first-child {
  display: none !important;
}

.card-sidebar .card-body {
  padding: 1.25rem !important;
  background: transparent !important;
  color: var(--body-color) !important;
  line-height: 1.6 !important;
}

.card-sidebar .card-footer {
  background: var(--gray-light) !important;
  border-top: 1px solid var(--border-color) !important;
  padding: 1rem 1.25rem !important;
}

.card-sidebar .card-footer .btn {
  background: var(--primary) !important;
  border: none !important;
  color: var(--white) !important;
  border-radius: 8px !important;
  padding: 0.55rem 1rem !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: background-color 0.3s ease !important;
  transform: none !important;
  box-shadow: none !important;
}

.card-sidebar .card-footer .btn i {
display:none !important;	
}

.card-sidebar .card-footer .btn:hover {
  background: var(--primary-dark) !important;
  transform: none !important;
  box-shadow: none !important;
}
.card-sidebar .list-group {
  border: none !important;
}
.card-sidebar .card-footer .btn-success {
  background: var(--success) !important;
  border-color: var(--success) !important;
  color: var(--white) !important;
}

.card-sidebar .card-footer .btn-success:hover {
  background: #06a05b !important;
  border-color: #06a05b !important;
}

.card-sidebar .card-footer .btn-default {
  background: var(--white) !important;
  border-color: var(--border-color) !important;
  color: var(--body-color) !important;
    transition: all 0.3s ease !important;

}

.card-sidebar .card-footer .btn-default:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--white) !important;

}

.card-sidebar .list-group-item {
  padding: 0.75rem 1rem !important;
  border: none !important;
  border-bottom: 1px solid var(--border-color) !important;
  background: transparent !important;
  transition: all 0.3s ease !important;
}

.card-sidebar .list-group-item:last-child {
  border-bottom: none !important;
}

.card-sidebar .list-group-item:hover {
  background: var(--primary-light) !important;
}

.card-sidebar .list-group-item.active {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  font-weight: 500 !important;
}

.card-sidebar .sidebar-menu-item-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.card-sidebar .sidebar-menu-item-icon {
  font-size: 16px !important;
  color: var(--primary) !important;
  width: 20px !important;
  margin-right: 0.55rem !important;
}

.sidebar .sidebar-menu-item-icon-wrapper {
	  margin-right: 0;
}

.card-sidebar .sidebar-menu-item-label {
  flex: 1 !important;
  font-size: 14px !important;
  color: var(--body-color) !important;
}

.card-sidebar .badge {
  background: var(--primary) !important;
  color: var(--white) !important;
  border-radius: 50px !important;
  padding: 0.25rem 0.5rem !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

.card-sidebar[menuitemname="Client Details"] {
  background: var(--white) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
  overflow: hidden !important;
}

.card-sidebar[menuitemname="Client Details"] .collapsable-card-body {
  display: block !important;
}

.card-sidebar[menuitemname="Client Details"] .card-minimise {
  display: none !important;
}

.card-sidebar[menuitemname="Client Details"] .card-header {
  display: none !important;
}

.card-sidebar[menuitemname="Client Details"] .card-body {
  padding: 1rem 1.5rem !important;
  text-align: center !important;
  background: var(--white) !important;
}

.card-sidebar[menuitemname="Client Details"] .card-body::before {
  content: '' !important;
  position: absolute !important;
  top: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 80px !important;
  height: 80px !important;
  background: var(--primary-light) !important;
  border-radius: 50% !important;
  border: 3px solid var(--white) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

.card-sidebar[menuitemname="Client Details"] .card-body::after {
  content: '\f007' !important;
  font-family: "Font Awesome 5 Pro", "FontAwesome" !important;
  font-weight: 600 !important;
  position: absolute !important;
  top: 38px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 28px !important;
  color: var(--primary) !important;
  z-index: 2 !important;
}

.card-sidebar[menuitemname="Client Details"] .card-body strong {
  display: block !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--heading-color) !important;
  margin-bottom: 0.5rem !important;
  margin-top: 6.5rem !important;
}

.card-sidebar[menuitemname="Client Details"] .card-body em {
  display: block !important;
  font-size: 14px !important;
  color: var(--primary) !important;
  font-weight: 500 !important;
  font-style: normal !important;
  margin-bottom: 0.5rem !important;
  padding: 0.25rem 0.75rem !important;
  background: var(--primary-light) !important;
  border-radius: 50px !important;
  display: inline-block !important;
}

.card-sidebar[menuitemname="Client Details"] .card-body br {
  display: none !important;
}

.card-sidebar[menuitemname="Client Details"] .card-body {
  line-height: 1.6 !important;
}

.card-sidebar[menuitemname="Client Details"] .card-body > *:not(strong):not(em) {
  display: block !important;
  font-size: 13px !important;
  color: var(--text-muted) !important;
  margin-bottom: 0.25rem !important;
}

.card-sidebar[menuitemname="Client Details"] .card-footer {
  background: var(--white) !important;
  border-top: none !important;
  padding: 0.75rem 1.5rem 1.5rem !important;
}

.client-details-buttons {
  display: flex !important;
  gap: 0.75rem !important;
  justify-content: center !important;
}

.card-sidebar[menuitemname="Client Details"] .card-footer .btn.client-update-btn {
  background: var(--primary) !important;
  color: var(--white) !important;
  padding: 0.375rem 0.75rem !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  flex: 1 !important;
  max-width: 90px !important;
}

.card-sidebar[menuitemname="Client Details"] .card-footer .btn.client-update-btn:hover {
  background: var(--primary-dark) !important;
  color: var(--white) !important;
}

.card-sidebar[menuitemname="Client Details"] .card-footer .btn.client-logout-btn {
  background: var(--danger) !important;
  color: var(--white) !important;
  padding: 0.375rem 0.75rem !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  flex: 1 !important;
  max-width: 90px !important;
}

.card-sidebar[menuitemname="Client Details"] .card-footer .btn.client-logout-btn:hover {
  background: var(--danger-dark) !important;
  color: var(--white) !important;
}

@media (max-width: 768px) {
  .card-sidebar[menuitemname="Client Details"] .card-body {
    padding: 1rem !important;
  }
  
  .card-sidebar[menuitemname="Client Details"] .card-body::before {
    top: 15px !important;
  }
  
  .card-sidebar[menuitemname="Client Details"] .card-body::after {
    top: 35px !important;
  }
  
  .card-sidebar[menuitemname="Client Details"] .card-body strong {
    margin-top: 5rem !important;
  }
  
  .client-details-buttons {
    gap: 0.5rem !important;
  }
  
  .client-update-btn,
  .client-logout-btn {
    max-width: none !important;
  }
}

.card-sidebar[menuitemname="Ticket Information"] .list-group-item {
  padding: 1rem 1.25rem !important;
  border: none !important;
  border-bottom: 1px solid var(--border-color) !important;
  transition: all 0.3s ease !important;
  line-height: 1.4 !important;
}

.card-sidebar[menuitemname="Ticket Information"] .list-group-item:last-child {
  border-bottom: none !important;
}

.card-sidebar[menuitemname="Ticket Information"] .list-group-item:hover {
  background: var(--primary-light) !important;
}

.card-sidebar[menuitemname="Ticket Information"] .list-group-item br {
  display: none !important;
}

.card-sidebar[menuitemname="Ticket Information"] .list-group-item .title {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--primary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: block !important;
  margin-bottom: 0.4rem !important;
}

.card-sidebar[menuitemname="Ticket Information"] .ticket-requestor-name {
  font-weight: 600 !important;
  color: var(--heading-color) !important;
}

.card-sidebar[menuitemname="Ticket Information"] .label {
  padding: 0.3rem 0.3rem !important;
  border-radius: 3px !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  margin-right: 0.4rem !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

.card-sidebar[menuitemname="Ticket Information"] .requestor-type-owner {
  background-color: var(--success) !important;
  color: var(--white) !important;
}

.card-sidebar[menuitemname="Ticket Information"] .label[style*="#ff6600"] {
  background: var(--warning) !important;
  color: var(--white) !important;
}

.card-sidebar[menuitemname="Ticket Information"] .card-footer .btn {
  border: none !important;
  border-radius: 6px !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  transition: background-color 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  line-height: 1.3 !important;
}

.card-sidebar[menuitemname="Ticket Information"] .card-footer .btn i {
  display: none !important;
}

.card-sidebar[menuitemname="Ticket Information"] .card-footer .btn-danger {
  background: var(--danger) !important;
  color: var(--white) !important;
}

.card-sidebar[menuitemname="Ticket Information"] .card-footer .btn-danger:hover {
  background: var(--danger-dark) !important;
}

.card-sidebar[menuitemname="Ticket Information"] .card-footer .row {
  margin: 0 !important;
  gap: 0.5rem !important;
}

.card-sidebar[menuitemname="Ticket Information"] .card-footer .col-6 {
  padding: 0 !important;
  flex: 1 !important;
}

.label[style*="#779500"],
.label.status-open,
.status-open {
  background: var(--primary) !important;
  color: white !important;
}

/* تم الرد - أخضر */
.label[style*="#000000"],
.label.status-answered,
.status-answered {
  background: var(--success) !important;
  color: white !important;
}

/* رد العميل - برتقالي */
.label[style*="#ff6600"],
.label.status-customer-reply,
.status-customer-reply {
  background: var(--warning) !important;
  color: white !important;
}

/* في الانتظار - برتقالي */
.label[style*="#224488"],
.label.status-pending,
.label.status-waiting,
.status-pending,
.status-waiting {
  background: var(--warning) !important;
  color: white !important;
}

/* تحت المعالجة - أحمر */
.label[style*="#cc0000"],
.label.status-in-progress,
.status-in-progress {
  background: var(--danger) !important;
  color: white !important;
}

/* مغلقة - رمادي */
.label[style*="#888888"],
.label.status-closed,
.status-closed {
  background: var(--gray) !important;
  color: white !important;
}

/* تأكيد تطبيق الألوان على جميع العناصر */
.list-group-item .label[style],
.card-sidebar .label[style],
.table .label[style],
#ClientAreaHomePagePanels .label[style] {
  color: white !important;
  border: none !important;
  font-weight: 500 !important;
}

.card-sidebar[menuitemname="My Services Status Filter"] a[menuitemname="Active"] .sidebar-menu-item-icon {
  color: var(--success) !important;
}

.card-sidebar[menuitemname="My Services Status Filter"] a[menuitemname="Pending"] .sidebar-menu-item-icon {
  color: var(--warning) !important;
}

.card-sidebar[menuitemname="My Services Status Filter"] a[menuitemname="Suspended"] .sidebar-menu-item-icon {
  color: var(--danger) !important;
}

.card-sidebar[menuitemname="My Services Status Filter"] a[menuitemname="Terminated"] .sidebar-menu-item-icon,
.card-sidebar[menuitemname="My Services Status Filter"] a[menuitemname="Cancelled"] .sidebar-menu-item-icon {
  color: var(--gray) !important;
}

.card-sidebar[menuitemname="My Invoices Status Filter"] a[menuitemname="Paid"] .sidebar-menu-item-icon {
  color: var(--success) !important;
}

.card-sidebar[menuitemname="My Invoices Status Filter"] a[menuitemname="Unpaid"] .sidebar-menu-item-icon {
  color: var(--danger) !important;
}

.card-sidebar[menuitemname="My Invoices Status Filter"] a[menuitemname="Cancelled"] .sidebar-menu-item-icon {
  color: var(--warning) !important;
}

.card-sidebar[menuitemname="My Invoices Status Filter"] a[menuitemname="Refunded"] .sidebar-menu-item-icon {
  color: var(--info) !important;
}

.card-sidebar[menuitemname="Ticket List Status Filter"] a[menuitemname="Open"] .sidebar-menu-item-icon {
  color: var(--success) !important;
}

.card-sidebar[menuitemname="Ticket List Status Filter"] a[menuitemname="Answered"] .sidebar-menu-item-icon {
  color: var(--info) !important;
}

.card-sidebar[menuitemname="Ticket List Status Filter"] a[menuitemname="Customer-Reply"] .sidebar-menu-item-icon {
  color: var(--warning) !important;
}

.card-sidebar[menuitemname="Ticket List Status Filter"] a[menuitemname="Closed"] .sidebar-menu-item-icon {
  color: var(--gray) !important;
}

.card-sidebar[menuitemname="My Domains Status Filter"] a[menuitemname="clientareaactive"] .sidebar-menu-item-icon {
  color: var(--success) !important;
}

.card-sidebar[menuitemname="My Domains Status Filter"] a[menuitemname="clientareaexpired"] .sidebar-menu-item-icon {
  color: var(--danger) !important;
}

.card-sidebar[menuitemname="My Domains Status Filter"] a[menuitemname="clientareapending"] .sidebar-menu-item-icon {
  color: var(--warning) !important;
}

.card-sidebar[menuitemname="Service Details Actions"] a[menuitemname="cpanel"] .sidebar-menu-item-icon {
  color: var(--success) !important;
}

.card-sidebar[menuitemname="Service Details Actions"] a[menuitemname="webmail"] .sidebar-menu-item-icon {
  color: var(--info) !important;
}

.card-sidebar[menuitemname="Service Details Actions"] a[menuitemname="Change Password"] .sidebar-menu-item-icon {
  color: var(--warning) !important;
}

.card-sidebar[menuitemname="Service Details Actions"] a[menuitemname="Cancel"] .sidebar-menu-item-icon {
  color: var(--danger) !important;
}

.card-sidebar[menuitemname="Recent Tickets"] .recent-ticket .truncate {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  line-height: 1.3 !important;
  margin-bottom: 0.5rem !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.card-sidebar[menuitemname="Recent Tickets"] .recent-ticket small {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  font-size: 11px !important;
}

/* نفس تصميم .label بالضبط */
.card-sidebar[menuitemname="Recent Tickets"] .recent-ticket small span[style*="color:#"] {
  padding: 0rem 0.6rem !important;
  border-radius: 5px !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  color: var(--white) !important;
}

/* الألوان المحددة */
.card-sidebar[menuitemname="Recent Tickets"] .recent-ticket small span[style*="color:#779500"] {
  background: var(--primary) !important;
}

.card-sidebar[menuitemname="Recent Tickets"] .recent-ticket small span[style*="color:#888888"] {
  background: var(--gray) !important;
}

.card-sidebar[menuitemname="Recent Tickets"] .recent-ticket small span[style*="color:#000000"] {
  background: var(--success) !important;
}

.card-sidebar[menuitemname="Recent Tickets"] .recent-ticket small span[style*="color:#ff6600"] {
  background: var(--warning) !important;
}
.card-sidebar[menuitemname="Recent Tickets"] .recent-ticket small span[style*="color:#cc0000"] {
  background: var(--danger) !important;
}


.card-sidebar[menuitemname="Client Shortcuts"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.card-sidebar[menuitemname="Client Shortcuts"] .card-header {
  background: transparent !important;
  border: none !important;
  padding: 0 0 1rem 0 !important;
}

.card-sidebar[menuitemname="Client Shortcuts"] .card-header h3 {
  font-size: 18px !important;
  color: var(--heading-color) !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

.card-sidebar[menuitemname="Client Shortcuts"] .card-header i:first-child {
  display: none !important;
}

.card-sidebar[menuitemname="Client Shortcuts"] .collapsable-card-body {
  padding: 0 !important;
}

.card-sidebar[menuitemname="Client Shortcuts"] .list-group {
  border: none !important;
  font-size: 14px !important;
}

.card-sidebar[menuitemname="Client Shortcuts"] .list-group-item {
  background: transparent !important;
  border: none !important;
  padding: 0.5rem 0 !important;
  border-radius: 8px !important;
  margin-bottom: 0.25rem !important;
  transition: all 0.3s ease !important;
}

.card-sidebar[menuitemname="Client Shortcuts"] .list-group-item:hover {
  background: var(--primary-light) !important;
  padding-left: 1rem !important;
}

.card-sidebar[menuitemname="Client Shortcuts"] .list-group-item.active {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  font-weight: 500 !important;
}

.card-sidebar[menuitemname="Client Shortcuts"] .sidebar-menu-item-icon {
  font-size: 16px !important;
  color: var(--primary) !important;
  width: 20px !important;
  margin-right: 0.75rem !important;
}

.card-sidebar[menuitemname="Client Shortcuts"] .sidebar-menu-item-label {
  font-size: 15px !important;
  color: var(--body-color) !important;
}

.card-sidebar[menuitemname="Client Shortcuts"] .list-group-item:hover .sidebar-menu-item-label {
  color: var(--primary) !important;
}
#order-standard_cart .cart-sidebar .list-group-item{
  padding: 6px 15px;
}
.card-sidebar .list-group-item.disabled,
.card-sidebar .list-group-item-action.disabled {
  position: relative !important;
  background: var(--gray-light) !important;
  color: var(--text-muted) !important;
  cursor: not-allowed !important;
  opacity: 0.7 !important;
  pointer-events: none !important;
  border-color: var(--border-color) !important;
}



.card-sidebar .list-group-item.disabled::after,
.card-sidebar .list-group-item-action.disabled::after {
  content: "\f023" !important;
  font-family: "Font Awesome 5 Pro", "FontAwesome" !important;
  position: absolute !important;
  top: 50% !important;
  right: 22px !important;
  transform: translateY(-50%) !important;
  font-size: 10px !important;
  color: var(--primary) !important;
  z-index: 2 !important;
  font-weight: 600 !important;
  opacity: 0.8 !important;
}

.card-sidebar .list-group-item.disabled .sidebar-menu-item-label,
.card-sidebar .list-group-item-action.disabled .sidebar-menu-item-label {
  color: var(--text-muted) !important;
  position: relative !important;
  z-index: 2 !important;
  opacity: 0.6 !important;
  text-decoration: line-through !important;
}

.card-sidebar .list-group-item.disabled .sidebar-menu-item-icon,
.card-sidebar .list-group-item-action.disabled .sidebar-menu-item-icon {
  color: var(--text-muted) !important;
  opacity: 0.4 !important;
  position: relative !important;
  z-index: 2 !important;
}

.card-sidebar .list-group-item.disabled:hover,
.card-sidebar .list-group-item-action.disabled:hover {
  background: var(--gray-light) !important;
  color: var(--text-muted) !important;
  transform: none !important;
  box-shadow: none !important;
}

.card-sidebar .list-group-item.active.disabled,
.card-sidebar .list-group-item-action.active.disabled {
  background: var(--primary-lighter) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  opacity: 0.7 !important;
}

.card-sidebar[data-has-disabled="true"] .card-header::after {
  content: "⚠️" !important;
  display: block !important;
  background: var(--warning-light) !important;
  color: var(--warning-dark) !important;
  padding: 0.5rem !important;
  margin: 1rem -1.25rem -1rem -1.25rem !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-align: center !important;
  border-top: 1px solid var(--warning) !important;
}

@media (max-width: 768px) {
  .card-sidebar .list-group-item.disabled::after {
    right: 12px !important;
    font-size: 10px !important;
    padding: 2px 4px !important;
  }
}
/*news article*/
.tt-news-wrap{
  border: 1px solid var(--border-color);
}
.tt-news-wrap .alert{
  border: none;
  margin-bottom: 0;
}
.tt-news-wrap .tt-news-single{
  margin-bottom: 0;
  border-left: 2px solid transparent;
  transition: all 0.3s ease-in-out;
}
.tt-news-wrap .tt-news-single:hover{
  border-left: 2px solid var(--primary);
  background-color: var(--gray-light);
}
.tt-news-wrap .tt-news-single article{
  padding: 0;
  border:none;
  background: transparent;
}
.tt-news-single:not(:last-of-type){
  border-bottom: 1px solid var(--border-color);
}

  /*support ticket*/
.md-editor .btn{
  padding: 0.25rem 0.5rem;
  font-size: .875rem;
}
.md-editor .btn span{
  color: var(--body-color);
  opacity: 0.7;
}
.md-editor .btn:hover span {
  color: var(--white);
  opacity: 1;
}
.md-editor .btn.btn-primary{
  background-color: transparent;
  border-color: var(--border-color);
  color: var(--body-color);
}




/*knowledge base css*/
/* مسافة الجوال لقاعدة المعرفة */
@media (max-width: 768px) {
  .kb-search-section {
    margin-top: 1.5rem !important;
  }
}

.tt-kb-search{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: auto;
}
.tt-search-field{
  position: relative;
  flex: 1;
}
.tt-kb-search>*+* {
  margin-left: 15px;
}
.tt-search-field i{
  position: absolute;
  top: 15px;
  left: 15px;
  font-size: 16px;
}
.tt-search-field .form-control{
  padding-left: 38px;
}
.tt-kb-search .form-control{
  height: calc(2.45em + .75rem + 2px);
}
.tt-kb-search .form-control:focus{
  border-color: var(--primary);
}
.tt-kb-search input::placeholder{
  font-size: 14px;
}

.kb-category a {
  color: var(--body-color);
  transition: all 0.3s ease !important;
  border-radius: 8px !important;
}

.kb-category a .h6 {
  color: var(--heading-color);
}
.kb-category .badge {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  border-radius: 5px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
.kb-category a:hover {
  background-color: var(--primary-light) !important;
  box-shadow: 0 4px 12px rgba(29, 175, 187, 0.1) !important;
}
.kb-category a button, .kb-article-item button{
  border: none;
  background: transparent;
  color: var(--primary);
}
.kb-category a button:focus, .kb-article-item button:focus{
  outline: none;
}
.kb-article-item{
  font-family: var(--font-family-english);
  transition: all 0.3s ease-in-out;
}
.kb-article-item:hover{
  background-color: var(--primary-light);
}
.kb-category i {
  color: var(--primary) !important;
}

.modern-modal {
  border-radius: 12px !important;
  border: none !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
  overflow: hidden !important;
}

.modern-modal-header {
  background: var(--white) !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 1.5rem !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.modern-modal-title {
  color: var(--heading-color) !important;
  font-weight: 600 !important;
  font-size: 1.25rem !important;
  margin: 0 !important;
}

.modern-close {
  background: none !important;
  border: none !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-muted) !important;
  transition: all 0.3s ease !important;
  font-size: 1rem !important;
  opacity: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.modern-close:hover {
  background: var(--danger-light) !important;
  color: var(--danger) !important;
  transform: scale(1.1) !important;
}

.modern-modal-body {
  padding: 2rem !important;
  min-height: 120px !important;
}

.modal-loading {
  text-align: center !important;
  padding: 2rem 0 !important;
}

.loading-spinner {
  margin-bottom: 1rem !important;
}

.loading-spinner i {
  font-size: 2rem !important;
  color: var(--primary) !important;
}

.loading-text {
  color: var(--text-muted) !important;
  margin: 0 !important;
  font-size: 0.95rem !important;
}

.modern-modal-footer {
  background: var(--gray-light) !important;
  border-top: 1px solid var(--border-color) !important;
  padding: 1.25rem 1.5rem !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.modal-loader {
  display: none !important;
  align-items: center !important;
  gap: 0.5rem !important;
  color: var(--primary) !important;
  font-size: 0.9rem !important;
}

.modal-loader.show {
  display: flex !important;
}

.modal-loader i {
  font-size: 1rem !important;
}

.modal-actions {
  display: flex !important;
  gap: 0.75rem !important;
}

.modal-close-btn {
  padding: 0.625rem 1.5rem !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
}

.modal-submit-btn {
  padding: 0.625rem 2rem !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}

.twofa-setup .modern-modal-body {
  padding: 1.5rem 2rem !important;
}

.twofa-setup .modern-modal-body h3 {
  color: var(--heading-color) !important;
  font-weight: 600 !important;
  font-size: 1.25rem !important;
  margin-bottom: 1rem !important;
  margin-top: 0 !important;
}

.twofa-setup .form-control-lg {
  height: 48px !important;
}

.twofa-setup .btn-lg {
  min-height: 48px !important;
  padding: 0 1.5rem !important;
}


@media (max-width: 576px) {

  
  .twofa-setup .btn-lg {
	      margin-top: 0.75rem !important;

  }
}
.twofa-setup .modern-modal-body p {
  color: var(--text-color) !important;
  line-height: 1.5 !important;
  margin-bottom: 1.5rem !important;
}

@media (max-width: 768px) {
  .modern-modal-body {
    padding: 1.5rem !important;
  }
  
  .modern-modal-footer {
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: stretch !important;
  }
  
  .modal-actions {
    flex-direction: column !important;
    width: 100% !important;
  }
  
  .modal-close-btn,
  .modal-submit-btn {
    width: 100% !important;
  }
}

/*affiliate*/
.affiliate-activation-card {
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(var(--primary-rgb), 0.1) !important;
  overflow: hidden !important;
  max-width: 600px !important;
  margin: 3rem auto !important;
}

.affiliate-activation-card .card-body {
  padding: 3rem 2.5rem !important;
}

.affiliate-activation-title {
  color: var(--heading-color) !important;
  font-weight: 700 !important;
  font-size: 1.75rem !important;
  margin-bottom: 1rem !important;
}

.affiliate-activation-intro {
  color: var(--text-muted) !important;
  font-size: 1.1rem !important;
  line-height: 1.6 !important;
  margin-bottom: 0 !important;
}

.affiliate-benefits {
  margin: 2.5rem 0 !important;
}

.affiliate-benefits-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.affiliate-benefit-item {
  display: flex !important;
  align-items: flex-start !important;
  padding: 1rem 1.5rem !important;
  margin-bottom: 0.75rem !important;
  background: rgba(var(--success-rgb), 0.05) !important;
  border: 1px solid rgba(var(--success-rgb), 0.1) !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
}

.affiliate-benefit-item:hover {
  background: rgba(var(--success-rgb), 0.08) !important;
  border-color: rgba(var(--success-rgb), 0.2) !important;
  transform: translateX(-5px) !important;
}

.affiliate-benefit-item i {
  color: var(--success) !important;
  font-size: 1.1rem !important;
  margin-right: 0.75rem !important;
  margin-top: 0.125rem !important;
  flex-shrink: 0 !important;
}

.affiliate-benefit-item span {
  color: var(--text-color) !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}

.affiliate-activation-action {
  margin-top: 2.5rem !important;
  padding-top: 2rem !important;
  border-top: 1px solid var(--border-color) !important;
}

.affiliate-activate-btn {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  padding: 0.875rem 2.5rem !important;
  border-radius: 8px !important;
  text-transform: none !important;
}

@media (max-width: 768px) {
  .affiliate-activation-card .card-body {
    padding: 2rem 1.5rem !important;
  }
  
  .affiliate-activation-title {
    font-size: 1.5rem !important;
  }
  
  .affiliate-activation-intro {
    font-size: 1rem !important;
  }
  
  .affiliate-benefit-item {
    padding: 0.875rem 1rem !important;
  }
  
  .affiliate-benefit-item span {
    font-size: 0.9rem !important;
  }
  
  .affiliate-activate-btn {
    font-size: 1rem !important;
    padding: 0.75rem 2rem !important;
  }
}
.affiliate-stat {
  border-radius: 12px !important;
  padding: 2rem 1.5rem !important;
  text-align: center !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  min-height: 150px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--border-color) !important;
  background: var(--white) !important;
  transition: all 0.3s ease !important;
}

.affiliate-stat:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-3px) !important;
}

.affiliate-stat i {
  font-size: 2.5rem !important;
  margin-bottom: 1rem !important;
  opacity: 0.9 !important;
  transition: all 0.3s ease !important;
}

.affiliate-stat:hover i {
  opacity: 1 !important;
  transform: scale(1.05) !important;
}

.affiliate-stat span {
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  font-family: var(--font-family-english) !important;
  margin-bottom: 0.5rem !important;
  color: var(--heading-color) !important;
}

.affiliate-stat small {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.affiliate-stat.bg-danger-light i {
  color: var(--danger) !important;
}

.affiliate-stat.bg-primary-light i {
  color: var(--primary) !important;
}

.affiliate-stat.bg-success-light i {
  color: var(--success) !important;
}

.affiliate-link-section {
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.affiliate-section-title {
  display: flex !important;
  align-items: center !important;
  color: var(--heading-color) !important;
  font-weight: 600 !important;
}

.affiliate-section-title i {
  margin-right: 8px !important;
}

.affiliate-link-wrapper {
  display: flex !important;
  gap: 12px !important;
}

.affiliate-link-input {
  flex: 1 !important;
  font-family: 'Courier New', monospace !important;
  font-size: 13px !important;
  background: var(--gray-light) !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-color) !important;
  padding: 0.75rem 1rem !important;
}

.affiliate-copy-btn {
  padding: 0.75rem 1.5rem !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  width: 150px !important;
  min-width: 150px !important;
}

.affiliate-summary-section {
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.affiliate-withdrawal-section {
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.h-100 {
  height: 100% !important;
}

@media (max-width: 768px) {
  .affiliate-summary-section,
  .affiliate-withdrawal-section {
    margin-bottom: 1rem !important;
  }
  
  .h-100 {
    height: auto !important;
  }
}

.affiliate-summary-table {
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
  border: 1px solid var(--border-color) !important;
}

.affiliate-summary-table tr:first-child td {
  border-top: none !important;
}

.affiliate-summary-label {
  background: var(--gray-light) !important;
  font-weight: 600 !important;
  width: 50% !important;
  font-size: 13px !important;
  padding: 0.75rem 1rem !important;
  border-left: 1px solid var(--border-color) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.affiliate-summary-value {
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 0.75rem 1rem !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.affiliate-summary-table tr:last-child .affiliate-summary-label,
.affiliate-summary-table tr:last-child .affiliate-summary-value {
  border-bottom: none !important;
}

.affiliate-withdrawal-area {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

.affiliate-withdraw-btn {
  font-weight: 600 !important;
  padding: 0.75rem 1.5rem !important;
  font-size: 14px !important;
  border-radius: 6px !important;
  width: 100% !important;
  transition: all 0.3s ease !important;
}
.affiliate-withdrawal-note {
  background: rgba(var(--danger-rgb), 0.08) !important;
  border: 1px solid rgba(var(--danger-rgb), 0.15) !important;
  border-radius: 12px !important;
  padding: 1rem !important;
  font-size: 13px !important;
  color: var(--danger-dark) !important;
  text-align: center !important;
  line-height: 1.4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  animation: slideInDown 0.25s ease-out !important;
}

.affiliate-withdrawal-note i {
  flex-shrink: 0 !important;
  margin-right: 0.5rem !important;
}

.affiliate-withdrawal-note-success {
  background: rgba(var(--success-rgb), 0.08) !important;
  border: 1px solid rgba(var(--success-rgb), 0.15) !important;
  border-radius: 12px !important;
  padding: 1rem !important;
  font-size: 13px !important;
  color: var(--success-dark) !important;
  text-align: center !important;
  line-height: 1.4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  animation: slideInDown 0.25s ease-out !important;
}

.affiliate-withdrawal-note-success i {
  flex-shrink: 0 !important;
  margin-right: 0.5rem !important;
}

.affiliate-withdrawal-success {
  background: rgba(var(--success-rgb), 0.08) !important;
  border: 1px solid rgba(var(--success-rgb), 0.15) !important;
  border-radius: 12px !important;
  padding: 1.25rem 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  animation: slideInDown 0.25s ease-out !important;
}

.affiliate-withdrawal-success i {
  font-size: 1.5rem !important;
  color: var(--success) !important;
  margin-right: 0.5rem !important;
  flex-shrink: 0 !important;
}

.withdrawal-success-content {
  color: var(--success-darker) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
}
.withdrawal-track-link {
  color: var(--success) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  border-bottom: 1px solid transparent !important;
  transition: all 0.3s ease !important;
}

.withdrawal-track-link:hover {
  color: var(--success-dark) !important;
  text-decoration: none !important;
}

.affiliate-banners-section {
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.affiliate-banner-item {
  padding: 1.5rem 0 !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.affiliate-banner-item:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.banner-preview {
  background: var(--gray-light) !important;
  border-radius: 8px !important;
  padding: 1rem !important;
  border: 1px solid var(--border-color) !important;
}

.banner-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  margin-bottom: 0.75rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.banner-image {
  border: 1px solid var(--border-color) !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  max-width: 100% !important;
  height: auto !important;
  margin-bottom: 0.5rem !important;
}

.banner-size {
  color: var(--text-muted) !important;
  font-size: 12px !important;
  display: block !important;
}

.text-link-preview {
  padding: 1rem !important;
  background: white !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 4px !important;
  margin-bottom: 0.5rem !important;
}

.sample-text-link {
  color: var(--primary) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 16px !important;
}

.sample-text-link:hover {
  text-decoration: underline !important;
}

.button-preview {
  padding: 1rem !important;
  background: white !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 4px !important;
  margin-bottom: 0.5rem !important;
}

.sample-cta-button {
  background: var(--primary) !important;
  color: white !important;
  padding: 12px 24px !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  display: inline-block !important;
  font-weight: bold !important;
  transition: all 0.3s ease !important;
}

.sample-cta-button:hover {
  background: var(--primary-dark) !important;
  color: white !important;
  text-decoration: none !important;
  transform: translateY(-2px) !important;
}

.banner-code-wrapper {
  background: var(--gray-light) !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-color) !important;
  overflow: hidden !important;
}

.code-header {
  background: var(--white) !important;
  padding: 0.5rem 1rem !important;
  border-bottom: 1px solid var(--border-color) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.code-header span {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
}

.copy-code-btn {
  font-size: 12px !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 4px !important;
  transition: all 0.3s ease !important;
}

.banner-code {
  font-family: 'Courier New', Monaco, monospace !important;
  font-size: 12px !important;
  border: none !important;
  background: var(--gray-light) !important;
  resize: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  padding: 0.75rem 1rem !important;
  color: var(--text-color) !important;
  transition: background-color 0.3s ease !important;
}

.banner-code:focus {
  box-shadow: none !important;
  border: none !important;
  background: white !important;
}

@media (max-width: 768px) {
  .affiliate-stat {
    padding: 1.5rem 1rem !important;
    min-height: 120px !important;
  }
  
  .affiliate-stat i {
    font-size: 2rem !important;
  }
  
  .affiliate-stat span {
    font-size: 1.8rem !important;
  }
  
  .affiliate-stat small {
    font-size: 12px !important;
  }
  
  .affiliate-link-wrapper {
    flex-direction: column !important;
    gap: 12px !important;
  }
  
  .affiliate-copy-btn {
    width: 100% !important;
    max-width: none !important;
    min-width: auto !important;
  }
  
  .affiliate-summary-label {
    width: 50% !important;
    font-size: 12px !important;
    padding: 0.6rem 0.75rem !important;
  }
  
  .affiliate-summary-value {
    font-size: 14px !important;
    padding: 0.6rem 0.75rem !important;
  }
  
  .affiliate-withdrawal-note {
    font-size: 12px !important;
    padding: 0.6rem 0.8rem !important;
  }
  
  .affiliate-link-input {
    font-size: 12px !important;
  }
  
  .affiliate-withdrawal-area {
    min-height: auto !important;
  }
  
  .affiliate-banner-item .col-md-4 {
    margin-bottom: 1rem !important;
  }
  
  .banner-title {
    font-size: 13px !important;
  }
  
  .banner-image {
    max-width: 200px !important;
  }
  
  .banner-code {
    font-size: 11px !important;
  }
}



/*===== صفحات المصادقة الموحدة (الدخول - التسجيل - استرجاع كلمة المرور) =====*/

.iq-auth-wrap {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 2rem 1rem !important;
}

/* ==========================================================================
   صفحة الدخول - مع الجانب التسويقي
   ========================================================================== */

.iq-form-wrap {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  max-width: 1400px !important;
  width: 100% !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* الجانب التسويقي */
.iq-brand-section {
  flex: 1 !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 3rem 2rem !important;
  color: var(--body-color) !important;
  text-align: center !important;
  position: relative !important;
}

.iq-brand-content {
  position: relative !important;
  z-index: 2 !important;
  max-width: 500px !important;
}

/* 1. اللوكو */
.iq-brand-logo {
  margin-bottom: 2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.iq-brand-logo img {
  max-height: 60px !important;
  width: auto !important;
}

/* 2. الوصف */
.iq-brand-description {
  margin-bottom: 1.5rem !important;
}

.iq-brand-title {
  font-size: 2.2rem !important;
  font-weight: 600 !important;
  margin-bottom: 1rem !important;
  line-height: 1.2 !important;
  color: var(--heading-color) !important;
}

.iq-brand-description p {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: var(--body-color) !important;
  margin: 0 !important;
}

/* 3. الصورة الرئيسية - محسنة */
.iq-brand-main-image {
  margin-bottom: 1rem !important;
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

.iq-brand-main-image img {
  max-width: 100% !important;
  height: auto !important;
  max-height: 350px !important;
  width: auto !important;
  display: block !important;
}

/* 4. الروابط المساعدة - محسنة */
.iq-brand-links {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

.iq-help-links {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1rem !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 360px !important;
}

.iq-help-link {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  color: var(--body-color) !important;
  padding: 1rem 0.75rem !important;
  border-radius: 12px !important;
  background: var(--white) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  transition: all 0.3s ease !important;
  min-height: 85px !important;
  text-align: center !important;
  aspect-ratio: 1 / 0.85 !important;
}

.iq-help-link:hover {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  text-decoration: none !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(29, 175, 187, 0.2) !important;
}

.iq-help-link i {
  font-size: 1.4rem !important;
  margin-bottom: 0.5rem !important;
  transition: all 0.3s ease !important;
  display: block !important;
}

.iq-help-link span {
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  display: block !important;
}

/* ==========================================================================
   حاويات النماذج الموحدة
   ========================================================================== */

.iq-form-container {
  background: var(--white) !important;
  padding: 2.5rem !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid var(--border-color) !important;
  margin: 0 auto !important;
  max-width: 450px !important; /* العرض الافتراضي */
  width: calc(100% - 2rem) !important;
}

/* صفحة الدخول - عرض متوسط مع flex */
.iq-form-wrap .iq-form-container {
  flex: 0 0 450px !important;
  margin: 2rem 0 !important;
  max-width: none !important; /* إلغاء max-width للدخول */
  width: auto !important; /* إلغاء width للدخول */
}

/* صفحة استرجاع كلمة المرور - عرض أكبر قليلاً */
.iq-form-container.iq-password-reset {
  max-width: 450px !important;
  width: 100% !important;
}

/* صفحة التسجيل - عرض أكبر وارتفاع حر */
.iq-form-container.iq-registration {
  max-width: 700px !important;
  width: calc(100% - 2rem) !important;
  margin: 2rem auto !important;
}

/* محتوى النماذج - بدون padding إضافي */
.iq-form-content {
  width: 100% !important;
  max-width: none !important;
  padding: 2rem 1rem !important;
}

/* إصلاح تعارض overflow من CSS العام */
.iq-form-container.iq-registration .card-body {
  overflow: visible !important;
}

/* ==========================================================================
   عناصر النماذج المشتركة
   ========================================================================== */

/* العناوين الموحدة */
.iq-form-content h3,
.iq-form-content h1 {
  margin-bottom: 0.5rem !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: var(--heading-color) !important;
  text-align: center !important;
}

/* النص التوضيحي */
.iq-form-content p.text-muted {
  margin-bottom: 2rem !important;
  font-size: 15px !important;
  color: var(--text-muted) !important;
  text-align: center !important;
}

/* مجموعات الحقول */
.iq-form-content .form-group {
  margin-bottom: 1.25rem !important;
}

.iq-form-content .form-group:last-of-type {
  margin-bottom: 1.5rem !important;
}

/* تسميات الحقول */
.iq-form-content .form-control-label {
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  margin-bottom: 0.5rem !important;
  font-size: 14px !important;
}


/* مجموعات الإدخال */
.iq-form-content .input-group {
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  transition: var(--transition-normal) !important;
  border: 1px solid var(--border-color) !important;
}

.iq-form-content .input-group:focus-within {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  border-color: var(--primary) !important;
}

.iq-form-content .input-group-text {
  background: var(--primary-light) !important;
  border: none !important;
  color: var(--primary) !important;
  width: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.iq-form-content .form-control {
  border: none !important;
  padding: 0.875rem 1rem !important;
  font-size: 15px !important;
  background: var(--white) !important;
  transition: var(--transition-normal) !important;
}

.iq-form-content .form-control:focus {
  border: none !important;
  box-shadow: none !important;
  background: var(--white) !important;
}

.iq-form-content .form-control::placeholder {
  color: var(--text-muted) !important;
  opacity: 0.7 !important;
}

/* زر إظهار كلمة المرور */
.iq-form-content .btn-reveal-pw {
  background: var(--primary-light) !important;
 border: none !important;
 color: var(--primary) !important;
 padding: 0 1rem !important;
 transition: var(--transition-normal) !important;
 width: 44px !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
}

.iq-form-content .btn-reveal-pw:hover {
  background: var(--primary-light) !important;
 color: var(--primary) !important;
}

/* الأزرار */
.iq-form-content .btn {
  width: 100% !important;
}

/* النص الفاصل */
.iq-or-text {
  position: relative !important;
  text-align: center !important;
  color: var(--text-muted) !important;
  font-size: 14px !important;
  margin: 2rem 0 !important;
}

.iq-or-text::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  width: 40% !important;
  height: 1px !important;
  background: var(--border-color) !important;
}

.iq-or-text::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  width: 40% !important;
  height: 1px !important;
  background: var(--border-color) !important;
}

/* فوتر الصفحات */
.iq-auth-footer {
  margin-top: 1.5rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid var(--border-color) !important;
  text-align: center !important;
}

.iq-auth-footer p {
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--body-color) !important;
}

.iq-auth-footer a {
  color: var(--primary) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
}

.iq-auth-footer a:hover {
  color: var(--primary-dark) !important;
  text-decoration: underline !important;
}




/* ==========================================================================
   عناصر صفحة التسجيل الخاصة
   ========================================================================== */

/* حقول التسجيل المخصصة */
#registration .prepend-icon {
  position: relative !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  transition: var(--transition-normal) !important;
  border: none !important;
  background: var(--white) !important;
  overflow: visible !important;
}

#registration .prepend-icon::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  transition: var(--transition-normal) !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

#registration .prepend-icon:focus-within::before {
  border-color: var(--primary) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

#registration .field {
  height: 47px !important;
  border: none !important;
  padding: 0 15px 0 60px !important;
  font-size: 15px !important;
  border-radius:  0 7px  7px 0  !important;
  transition: var(--transition-normal) !important;
  background: transparent !important;
  position: relative !important;
  z-index: 1 !important;
}

#registration .field-icon {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 50px !important;
  height: 47px !important;
  line-height: 47px !important;
  background: var(--primary-light) !important;
  border: none !important;
  text-align: center !important;
  z-index: 2 !important;
  border-radius: 7px 0 0 7px !important;
}

#registration .field-icon i {
  color: var(--primary) !important;
}

#registration .field:focus,
#registration .form-control:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

#registration .field::placeholder,
#registration .form-control::placeholder {
  color: var(--text-muted) !important;
  opacity: 0.7 !important;
  font-size: 13px !important;
}

/* عناوين أقسام التسجيل */
#registration .card h3 {
  background: transparent !important;
  font-family: var(--font-family-arabic) !important;
  padding: 0 0 1rem 0 !important;
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  font-size: 16px !important;
  margin-bottom: 1.5rem !important;
  border: none !important;
  border-bottom: 2px solid var(--border-color) !important;
}

/* ==========================================================================
   التنبيهات الموحدة
   ========================================================================== */

.iq-form-content .alert {
  border-radius: 10px !important;
  border: none !important;
  padding: 1rem 1.25rem !important;
  margin-bottom: 1.5rem !important;
  margin-top: 1.5rem !important;
}

.iq-form-content .alert-danger {
  background: var(--danger-light) !important;
  color: var(--danger) !important;
}

.iq-form-content .alert-success {
  background: var(--success-light) !important;
  color: var(--success) !important;
}

/* ==========================================================================
   مكونات النماذج المساعدة
   ========================================================================== */

.bootstrap-switch {
  border-color: var(--border-color) !important;
  background-color: var(--primary-light) !important;
}

.bootstrap-switch.bootstrap-switch-focused {
  box-shadow: none !important;
}

.progress {
  height: 6px !important;
}

#inputCaptcha.form-control {
  height: 30px !important;
}

.social-signin-btns {
  text-align: inherit !important;
  margin: 25px 0 !important;
}

/* ==========================================================================
   الاستجابة للأجهزة المحمولة
   ========================================================================== */

/* إخفاء الجانب التسويقي في الجوال */
@media (max-width: 991px) {
  .iq-form-wrap {
    justify-content: center !important;
  }
  
  .iq-brand-section {
    display: none !important;
  }
  
  .iq-form-wrap .iq-form-container {
    flex: 0 0 auto !important;
    max-width: 450px !important;
    width: 100% !important;
    padding: 1rem !important;
  }
}

@media (max-width: 1200px) {
  .iq-brand-content {
    max-width: 400px !important;
  }
  
  .iq-brand-title {
    font-size: 1.8rem !important;
  }
  
  .iq-help-links {
    gap: 0.875rem !important;
    max-width: 340px !important;
  }
  
  .iq-help-link {
    min-height: 80px !important;
    padding: 0.875rem 0.625rem !important;
  }
  
  .iq-help-link i {
    font-size: 1.3rem !important;
  }
  
  .iq-help-link span {
    font-size: 0.75rem !important;
  }
}

@media (max-width: 768px) {
  .iq-form-container {
    padding: 1.5rem !important;
  }
  
  .iq-form-content h3 {
    font-size: 1.5rem !important;
  }
  
  .iq-form-container.iq-registration {
    max-width: 100% !important;
    width: calc(100% - 1rem) !important;
    margin: 1rem auto !important;
  }
}

@media (max-width: 575px) {
  .iq-auth-wrap {
    padding: 0.5rem !important;
  }
  
  .iq-form-container {
    padding: 1rem !important;
      margin: 0 auto !important;

  }
  
  .iq-form-content h3 {
    font-size: 1.5rem !important;
  }
}

@media (max-width: 576px) {
  .iq-form-content .d-flex.align-items-center.justify-content-between {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  
  .iq-form-content .btn-primary {
    width: 100% !important;
    margin-bottom: 1rem !important;
  }
}

.iq-two-factor .input-group-lg .form-control {
    height: 50px;
    padding: 0.875rem 1.25rem;
}

.iq-two-factor .input-group-text {
    background: var(--primary-light);
    color: var(--primary);
    border: none;
    width: 50px;
}

.iq-two-factor .btn {
}

/*=====  =====*/

.tt-custom-radius {
  background: var(--white) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  border: none !important;
}

.tt-custom-radius .card-body {
  padding: 2.5rem !important;
  background: var(--white) !important;
}

.tt-custom-radius h6,
.tt-custom-radius .h5 {
  color: var(--heading-color) !important;
  font-weight: 700 !important;
  font-size: 1.75rem !important;
  margin-bottom: 0.5rem !important;
  text-align: center !important;
}

.tt-custom-radius p.text-muted {
  color: var(--text-muted) !important;
  text-align: center !important;
  font-size: 15px !important;
  margin-bottom: 2rem !important;
}

.tt-custom-radius .form-group {
  margin-bottom: 1.5rem !important;
}

.tt-custom-radius label {
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  margin-bottom: 0.5rem !important;
  font-size: 14px !important;
}

.tt-custom-radius .input-group {
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  transition: var(--transition-normal) !important;
  border: 1px solid var(--border-color) !important;
}

.tt-custom-radius .input-group:focus-within {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  border-color: var(--primary) !important;
}

.tt-custom-radius .input-group-text {
  background: var(--primary-light) !important;
  border: none !important;
  color: var(--primary) !important;
  width: 40px !important;
  height: 45px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.tt-custom-radius .input-group-text i {
  font-size: 14px !important;
}

.tt-custom-radius .form-control {
  border: none !important;
  font-size: 14px !important;
  height: 45px !important;
  background: var(--white) !important;
  transition: var(--transition-normal) !important;
}

.tt-custom-radius .form-control:focus {
  border: none !important;
  box-shadow: none !important;
  background: var(--white) !important;
  outline: none !important;
}

.tt-custom-radius .form-control::placeholder {
  color: var(--text-muted) !important;
  opacity: 0.7 !important;
  font-size: 13px !important;
}

.tt-custom-radius .alert {
  border-radius: 10px !important;
  border: none !important;
  padding: 1rem 1.25rem !important;
  margin-bottom: 1.5rem !important;
}

.tt-custom-radius .alert-danger {
  background: var(--danger-light) !important;
  color: var(--danger) !important;
}

.tt-custom-radius .alert-success {
  background: var(--success-light) !important;
  color: var(--success) !important;
}

.tt-custom-radius .auth-footer {
  margin-top: 2rem !important;
  text-align: center !important;
}

.tt-custom-radius .auth-footer a {
  color: var(--primary) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: var(--transition-normal) !important;
}

.tt-custom-radius .auth-footer a:hover {
  color: var(--primary-hover) !important;
  text-decoration: underline !important;
}


@media (max-width: 768px) {
  .tt-custom-radius .card-body {
    padding: 2rem 1.5rem !important;
  }
  
  .tt-custom-radius h6,
  .tt-custom-radius .h5 {
    font-size: 1.5rem !important;
  }
}
/*support ticket*/



.dashboard-stat-card.unpaid-invoices .dashboard-stat-icon {
    background: var(--danger-light);
}

.dashboard-stat-card.unpaid-invoices .dashboard-stat-icon i {
    color: var(--danger);
}

.dashboard-stat-card.unpaid-invoices .dashboard-stat-number {
    color: var(--danger);
}

.dashboard-stat-card.unpaid-invoices:hover {
    border-color: var(--danger);
    background: var(--danger-light);
}

.client-dashboard-stats {
    margin-bottom: 2rem;
}

.dashboard-stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 2rem 1.5rem;
    background: white;
    border: 1px solid #e6edf0;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    min-height: 120px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
.dashboard-stat-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border-color: var(--primary);
	    background: var(--primary-light);
    text-decoration: none;
    color: inherit;
}

.dashboard-stat-icon {
    width: 60px;
    height: 60px;
    background: var(--primary-light);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dropdown-item {
    transition: all 0.3s ease; 
}

.dropdown-item:hover {
    background: var(--primary-light);
}


.dashboard-stat-icon i {
    font-size: 1.5rem;
    color: var(--primary);
}

.dashboard-stat-info {
    flex: 1;
    text-align: left;
}

.dashboard-stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 0.25rem;
    line-height: 1;
}

.dashboard-stat-label {
    font-size: 0.9rem;
    color: var(--body-color);
    font-weight: 500;
}

.client-dashboard-panels {
    /*margin-top: 1rem;*/
	
}
.client-dashboard-panels .dropdown-menu {
  z-index: 1050 !important;
  position: absolute !important;
}

.client-dashboard-panels .dashboard-panel-card {
  overflow: visible !important;
}

.client-dashboard-panels .dashboard-panel-list {
  overflow: visible !important;
}
.dashboard-panel-card {
    background: white;
    border: 1px solid #e6edf0;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.dashboard-panel-header {
    background: #f8fbfc;
    border-bottom: 1px solid #e6edf0;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.div-service-item .text-domain {
  color: var(--primary);
  font-size: 0.8rem;

}

.dashboard-panel-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: var(--heading-color);
}

.dashboard-panel-title i {
    color: var(--primary);
    font-size: 1rem;
}

.dashboard-panel-btn {
    background-color: var(--white) ;
    border-color: var(--border-color) ;
    color: var(--body-color) ;
    border: 1px solid var(--border-color);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    font-family: var(--font-family-english);
    font-weight: 500 !important;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
}


.dashboard-panel-btn:hover {
    background-color: var(--primary) ;
    border-color: var(--primary) ;
    color: var(--white) ;
    text-decoration: none;
}

.dashboard-panel-btn:hover i {
    color: var(--white) ;
}

.dashboard-panel-body {
    padding: 1.5rem;
    color: var(--body-color);
    line-height: 1.6;
}

.dashboard-panel-list {
    border-top: 1px solid #f0f4f7;
}

.dashboard-panel-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f0f4f7;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.dashboard-panel-item:hover {
    background: var(--primary-light);
    text-decoration: none;
    color: inherit;
}

.dashboard-panel-item:last-child {
    border-bottom: none;
}

.dashboard-panel-item.static:hover {
    transform: none;
    background: var(--primary-light);
}

.dashboard-item-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    width: 100%;
}

.dashboard-item-content span {
    width: 100%;
    display: block;
}

.text-last-updated {
  font-size: 80%;
  color: var(--gray);
}

.dashboard-item-content i {
    color: var(--primary);
    width: 20px;
    text-align: center;
}

.dashboard-item-arrow {
    color: #ccc;
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

.dashboard-panel-item:hover .dashboard-item-arrow {
    color: var(--primary);
    transform: translateX(5px);
}

.dashboard-panel-footer {
    /*background: #f8fbfc;
    border-top: 1px solid #e6edf0;
    padding: 1rem 1.5rem;
    text-align: center;*/
	display:none;
}

.dashboard-panel-footer a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.dashboard-panel-footer a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.service-item-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: #f8fbfc;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}

.service-item-container:hover {
    background: var(--primary-light);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(29, 175, 187, 0.1);
}

.dashboard-panel-item .service-item-container {
    margin: -1rem -1.5rem;
    width: calc(100% + 3rem);
    border-radius: 0;
}

.dashboard-panel-item:first-child .service-item-container {
    border-radius: 12px 12px 0 0;
}

.dashboard-panel-item:last-child .service-item-container {
    border-radius: 0 0 12px 12px;
}

.dashboard-panel-item:only-child .service-item-container {
    border-radius: 12px;
}

.dashboard-panel-item:has(.service-item-container) {
    padding: 0;
    border-bottom: none;
}

.dashboard-panel-item.static:has(.service-item-container):hover {
    background: none;
    transform: none;
}

.service-status-container {
    flex-shrink: 0;
    min-width: 80px;
}

.service-status-label {
    padding: 0.3rem 0.6rem;
    border-radius: 15px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    display: block;
    text-align: center;
    white-space: nowrap;
}

.service-name-container {
    flex: 1;
    min-width: 0;
}

.service-name-title {
    font-weight: 600;
    color: var(--heading-color);
    margin-bottom: 0.25rem;
    display: block;
    font-size: 1rem;
}

.service-domain-name {
    color: var(--primary);
    font-size: 0.9rem;
    font-family: var(--font-family-monospace);
}

.service-actions-container {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
    margin-right: auto;
}

.div-service-status {
  width: 63px !important;
}
.div-service-status .label:not(.label-placeholder) {
  width: 3.5rem !important;
}
.div-service-status .label-placeholder {
  position: fixed;
  visibility: hidden;
}

@media (max-width: 1199px) {
    .dashboard-stat-card {
            margin-bottom: 1rem;
    }
}
@media (max-width: 768px) {

    .dashboard-stat-card {
        padding: 1.5rem 1rem;
        gap: 0.75rem;
    }
    
    .dashboard-stat-icon {
        width: 45px;
        height: 45px;
        border-radius: 8px;
    }
    
    .dashboard-stat-icon i {
        font-size: 1.25rem;
    }
    
    .dashboard-stat-number {
        font-size: 1.75rem;
    }
    
    .dashboard-stat-label {
        font-size: 0.85rem;
    }
    
    .dashboard-panel-header {
        flex-direction: row;
        gap: 0.5rem;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    
    .dashboard-panel-btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.8rem;
        min-height: 32px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .dashboard-panel-title {
        font-size: 0.9rem;
        flex: 1;
        min-width: 0;
    }
    
    .dashboard-item-content {
        font-size: 0.85rem;
    }
    
    .dashboard-item-content small {
        font-size: 0.75rem;
    }
    
    .dashboard-item-content .label {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }
    
    .dashboard-panel-footer a {
        font-size: 0.85rem;
    }
    
    .dashboard-panel-body p {
        font-size: 0.85rem;
    }
    
    .service-item-container {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 1rem;
    }
    
    .service-status-container {
        align-self: flex-start;
        min-width: auto;
    }
    
    .service-actions-container {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }
}

@media (max-width: 576px) {
	
    .client-dashboard-stats {
        margin-bottom: 1rem;
    }
    

    
    .dashboard-panel-card {
        margin-bottom: 1rem;
    }
    
    .dashboard-panel-header,
    .dashboard-panel-body {
        padding: 1rem;
    }
    
    .dashboard-panel-btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        min-height: 28px;
    }
    
    .dashboard-panel-title {
        font-size: 0.85rem;
    }
    
    .dashboard-panel-item {
        padding: 0.75rem 1rem;
    }
    
    .dashboard-item-content {
        font-size: 0.8rem;
        line-height: 1.4;
    }
    
    .dashboard-item-content span {
        font-size: 0.8rem;
    }
    
    .dashboard-item-content small {
        font-size: 0.7rem;
    }
    
    .dashboard-item-content .label {
        font-size: 0.65rem;
        padding: 0.2rem 0.4rem;
        border-radius: 3px;
        display: inline-block;
        margin: 0 0.25rem;
    }
    
    .dashboard-panel-footer a {
        font-size: 0.8rem;
    }
    
    .dashboard-panel-body p {
        font-size: 0.8rem;
    }
}
/*client area home*/
.client-home-cards .card-body,
.client-home-cards .mc-promo-login .content,
.client-home-cards .mc-promo-manage .content,
.mc-promo-login .client-home-cards .content,
.mc-promo-manage .client-home-cards .content{
  max-height: 250px;
}

.tiles .tile{
  padding: 1.5rem !important;
  border: 1px solid var(--border-color) !important;
  background: var(--white) !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  display: block !important;
  text-decoration: none !important;
  position: relative !important;
  min-height: 100px !important;
}

.tiles .tile:hover{
  background-color: var(--primary-light) !important;
  border-color: var(--primary) !important;
  text-decoration: none !important;
  color: inherit !important;
}

.tiles .tile i{
  font-size: 1rem !important;
  color: var(--primary) !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(29, 175, 187, 0.1) !important;
  border-radius: 6px !important;
  position: absolute !important;
  top: 1rem !important;
  right: auto !important;
  left: 1rem !important;
  margin: 0 !important;
}

.tiles .tile .tt-box-info{
  text-align: right !important;
  padding-top: 0.5rem !important;
}

.tiles .tile .stat{
  font-size: 2.75rem !important;
  font-weight: 700 !important;
  color: var(--heading-color) !important;
  font-family: var(--font-family-monospace) !important;
  margin: 0 0 0.25rem 0 !important;
  line-height: 1 !important;
}

.tiles .tile .title{
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--body-color) !important;
  margin: 0 !important;
  text-transform: none !important;
}

.tiles .tile:hover i{
  font-size: 1rem !important;
  color: var(--primary) !important;
}
.tt-single-box{
  display: flex !important;
  align-items: center;
}
@media (max-width: 1199px) {
  .tiles .tile {
     margin-bottom: 1rem !important;

  }
  
  .tt-custom-radius h6,
  .tt-custom-radius .h5 {
    font-size: 1.5rem !important;
  }
}


.tt-client-home-cards .card{
  border-radius: 12px;
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  margin-bottom: 1.5rem;
}

.tt-client-home-cards .card-header{
  background: linear-gradient(135deg, #f8fbfc 0%, #f1f7f8 100%);
  border-bottom: 1px solid rgba(29, 175, 187, 0.1);
  border-radius: 12px 12px 0 0;
  padding: 1rem 1.25rem;
}

.tt-client-home-cards .card-header h3{
  font-size: 15px !important;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
}

.tt-client-home-cards .card-header h3 i{
  color: var(--primary);
  margin-left: 8px;
}

.tt-client-home-cards .card-header .btn{
  padding: 0.375rem 0.75rem !important;
  font-size: 13px !important;
  border-radius: 6px !important;
  background-color: var(--white) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--body-color) !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tt-client-home-cards .card-header .btn:hover{
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--white) !important;
}

.tt-client-home-cards .card-header .btn i{
  font-size: 12px;
  color: var(--primary);
  transition: color 0.3s ease;
}

.tt-client-home-cards .card-header .btn:hover i{
  color: var(--white);
}

.tt-client-home-cards .list-group-item{
  padding: 1rem 1.25rem;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

.tt-client-home-cards .list-group-item:last-child{
  border-bottom: none;
  border-radius: 0 0 12px 12px;
}

.tt-client-home-cards .list-group-item:hover{
  background-color: var(--primary-light);
  color: var(--primary);
}

.tt-client-home-cards .text-last-updated{
  font-size: 12px;
  color: var(--text-muted);
  font-weight: normal;
}

.tt-client-home-cards .card-body{
  padding: 1.25rem;
}

.tt-client-home-cards .card-footer{
  background-color: transparent;
  border-top: 1px solid var(--border-color);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 12px 12px;
}

.promo-container{
  border-color: var(--border-color);
  margin-bottom: 20px;
  border-radius: 12px;
  overflow: hidden;
}
.promo-container .header{
  padding: 15px;
}
.promo-container .carousel-control-next-icon, .promo-container .carousel-control-prev-icon{
  width: 15px;
  position: relative;
  top: -5px;
}
.promo-banner h3 {
  font-size: 18px;
  line-height: inherit;
  font-weight: 500;
}
.promo-banner h4 {
  font-size: 16px;
  font-weight: 400;
}

.div-service-name>span:not(.text-domain){
  font-family: var(--font-family-monospace);
  font-weight: 700 !important;
}
.primary-content .card, .primary-content .mc-promo-login, .primary-content .mc-promo-manage{
  margin-bottom: 20px;
}
.tt-client-home-cards .card{
  border-width: 1px;
}
.client-home-cards.tt-client-home-cards .list-group{
  border-top: none !important;
}

.tt-client-home-cards .card-header .float-right a.btn{
  padding: 0.25rem 0.5rem;
}
.tt-client-home-cards form .form-control{
  padding: 4px;
}
.tt-client-home-cards form .btn, .actions .btn{
  padding: 0.25rem .75rem;
}
.tt-client-home-cards.client-home-cards .list-group .list-group-item{
  padding: 12px 15px;
}
.panel-mc-sso, .tt-client-home-cards.client-home-cards .card-body{
  padding: 15px;
}
.tt-client-home-cards .card-header h3, .panel .panel-heading h3{
  font-size: 14px !important;
}
.panel .card-header{
  background: linear-gradient(135deg, #f8fbfc 0%, #f1f7f8 100%);
  border-bottom: 1px solid rgba(29, 175, 187, 0.1);
}
.cart-sidebar .panel .panel-heading h3.panel-title{
  color: var(--primary);
}
.tt-client-home-cards.client-home-cards .card-header{
  border-bottom: 1px solid var(--border-color);
}
.mc-promo-login .logo, .mc-promo-manage .logo{
  width: 90px;
  height: 90px;
}
.mc-promo-login .logo img, .mc-promo-manage .logo img{
  max-width: 80px;
  max-height: 80px;
}



/*المنتجات*/
/* CSS لصفحة تفاصيل المنتج - بدون تكرار */

/* العناوين */
.product-section-title {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--heading-color) !important;
  margin-bottom: 1.5rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 2px solid var(--border-color) !important;
  position: relative !important;
}

.product-section-title::before,
.overview-title::before,
.downloads-title::before,
.addons-title::before,
.password-title::before {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 60px !important;
  height: 2px !important;
  background: var(--primary) !important;
}

/* بطاقة حالة المنتج */
.product-status-card {
  background: var(--white) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  padding: 2rem !important;
  margin-bottom: 2rem !important;
  transition: all 0.3s ease !important;
}

.product-status-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.product-icon-section {
  display: flex !important;
  align-items: center !important;
  gap: 1.5rem !important;
}

.product-icon {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2rem !important;
  color: var(--white) !important;
  flex-shrink: 0 !important;
}

/* ألوان الحالة للأيقونة */
.product-status-active .product-icon {
  background: linear-gradient(135deg, #28a745, #20c997) !important;
}

.product-status-suspended .product-icon {
  background: linear-gradient(135deg, #dc3545, #fd7e14) !important;
}

.product-status-pending .product-icon {
  background: linear-gradient(135deg, #ffc107, #fd7e14) !important;
}

.product-status-terminated .product-icon {
  background: linear-gradient(135deg, #6c757d, #495057) !important;
}

.product-info {
  flex: 1 !important;
}

.product-name {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--heading-color) !important;
  margin-bottom: 0.5rem !important;
}

.product-group {
  font-size: 1rem !important;
  color: var(--text-muted) !important;
  margin-bottom: 1rem !important;
  font-weight: 500 !important;
}

.product-status-badge {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-weight: 600 !important;
}

.status-indicator {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

/* ألوان مؤشر الحالة */
.status-active .status-indicator {
  background: #28a745 !important;
}

.status-suspended .status-indicator {
  background: #dc3545 !important;
}

.status-pending .status-indicator {
  background: #ffc107 !important;
}

.status-terminated .status-indicator {
  background: #6c757d !important;
}

/* بطاقة الإجراءات */
.product-actions-card {
  background: var(--gray-light) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  padding: 1.5rem !important;
  margin-bottom: 2rem !important;
}

.actions-title {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  margin-bottom: 1rem !important;
  text-align: center;
}

.actions-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

/* أزرار الإجراءات */
.action-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 0.75rem 1rem !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  transition: all 0.3s ease !important;
  border: 1px solid transparent !important;
  text-align: center !important;
}

.action-btn.upgrade-btn {
  background: var(--success) !important;
  color: var(--white) !important;
}

.action-btn.upgrade-btn:hover {
  background: var(--success-dark) !important;
  color: var(--white) !important;
}

.action-btn.renew-btn {
  background: var(--primary) !important;
  color: var(--white) !important;
}

.action-btn.renew-btn:hover {
  background: var(--primary-dark) !important;
  color: var(--white) !important;
}

.action-btn.cancel-btn {
  background: var(--danger) !important;
  color: var(--white) !important;
}

.action-btn.cancel-btn:hover {
  background: var(--danger-dark) !important;
  color: var(--white) !important;
}

.action-btn.cancel-btn.disabled {
  background: var(--gray) !important;
  color: var(--text-muted) !important;
  cursor: not-allowed !important;
}

/* بطاقة تفاصيل المنتج */
.product-details-card {
  background: var(--white) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  padding: 2rem !important;
}

.details-title {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  margin-bottom: 1.5rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 2px solid var(--border-color) !important;
}

.detail-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid var(--border-light) !important;
}

.detail-item:last-child {
  border-bottom: none !important;
}

.detail-item.warning {
  background: rgba(var(--warning-rgb), 0.1) !important;
  padding: 0.75rem !important;
  border-radius: 6px !important;
  border: 1px solid var(--warning) !important;
}

.detail-label {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-weight: 400 !important;
  color: var(--heading-color) !important;
}

.detail-label i {
  width: 16px !important;
  color: var(--primary) !important;
}

.detail-value {
  font-weight: 500 !important;
  color: var(--text-color) !important;
  text-align: right;
}

/* التابات */
.product-tabs-container {
  margin-top: 2rem !important;
}

.product-tabs {
  border-bottom: 2px solid var(--border-color) !important;
  margin-bottom: 0 !important;
}

.product-tabs .nav-link {
  border: none !important;
  border-radius: 0 !important;
  color: var(--text-muted) !important;
  font-weight: 600 !important;
  padding: 1rem 1.5rem !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.product-tabs .nav-link:hover {
  color: var(--primary) !important;
  background: transparent !important;
}

.product-tabs .nav-link.active {
  color: var(--primary) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--primary) !important;
}

.product-tab-content {
  padding: 2rem 0 !important;
}

/* معلومات النطاق والخادم */
.domain-info-container {
  padding: 1rem 0 !important;
}

.server-info-grid,
.hosting-info-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 1rem !important;
  margin-bottom: 2rem !important;
}

.info-item {
  padding: 1rem !important;
  background: var(--gray-light) !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-color) !important;
}

.info-item.full-width {
  grid-column: 1 / -1 !important;
}

.info-label {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  margin-bottom: 0.5rem !important;
}

.info-label i {
  color: var(--primary) !important;
  width: 16px !important;
}

.info-value {
  color: var(--text-color) !important;
  font-weight: 500 !important;
}

.nameservers-list {
  font-family: 'Courier New', Consolas, monospace !important;
  font-size: 0.9rem !important;
  direction: ltr !important;
  text-align: left !important;
}

.ssl-status {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.domain-actions {
  display: flex !important;
  gap: 1rem !important;
  justify-content: center !important;
  margin-top: 2rem !important;
  padding-top: 2rem !important;
  border-top: 1px solid var(--border-color) !important;
}

/* الخيارات القابلة للتكوين */
.config-options-grid {
  display: grid ;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) ;
  gap: 1rem !important;
}

.config-option-item {
  padding: 1rem ;
  background: var(--gray-light) ;
  border-radius: 8px ;
  border: 1px solid var(--border-color) ;
}

.config-label {
  font-weight: 600 ;
  color: var(--heading-color) ;
  margin-bottom: 0.5rem ;
}

.config-value {
  color: var(--text-color) ;
}

/* الحقول المخصصة */
.custom-fields-grid {
  display: grid ;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) ;
  gap: 1rem ;
}

.custom-field-item {
  padding: 1rem ;
  background: var(--gray-light) ;
  border-radius: 8px ;
  border: 1px solid var(--border-color) ;
}

.field-label {
  font-weight: 600 ;
  color: var(--heading-color) ;
  margin-bottom: 0.5rem ;
}

.field-value {
  color: var(--text-color) ;
}

/* استخدام الموارد */
.resource-usage-container {
  text-align: center !important;
}

.usage-charts {
  display: flex !important;
  justify-content: center !important;
  gap: 4rem !important;
  margin-bottom: 2rem !important;
}

.usage-chart {
  text-align: center !important;
}

.usage-chart h4 {
  color: var(--heading-color) !important;
  margin-bottom: 1rem !important;
}

.chart-container {
  margin-bottom: 1rem !important;
}

.usage-text {
  font-weight: 600 !important;
  color: var(--text-color) !important;
}

.last-updated {
  color: var(--text-muted) !important;
  font-style: italic !important;
}

/* التحميلات */
.downloads-grid {
  display: grid !important;
  gap: 1rem !important;
}

.download-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1.5rem !important;
  background: var(--gray-light) !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-color) !important;
}

.download-content {
  flex: 1 !important;
}

.download-title {
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  margin-bottom: 0.5rem !important;
}

.download-description {
  color: var(--text-muted) !important;
  margin: 0 !important;
}

.download-action {
  flex-shrink: 0 !important;
}
/* الإضافات في منطقة العميل */
.client-addons-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
  gap: 1.5rem !important;
}

.client-addon-card {
  background: var(--white) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

.client-addon-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.client-addon-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 1.5rem !important;
  background: var(--gray-light) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.client-addon-name {
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  margin: 0 !important;
}

.client-addon-status {
  padding: 0.25rem 0.75rem !important;
  border-radius: 20px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
}

.client-addon-status.status-active {
  background: var(--success-light) !important;
  color: var(--success-dark) !important;
}

.client-addon-status.status-suspended {
  background: var(--danger-light) !important;
  color: var(--danger-dark) !important;
}

.client-addon-body {
  padding: 1.5rem !important;
}

.client-addon-pricing {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--primary) !important;
  margin-bottom: 1rem !important;
}

.client-addon-dates {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

.client-addon-date {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  color: var(--text-muted) !important;
  font-size: 0.9rem !important;
}

.client-addon-date i {
  color: var(--primary) !important;
  width: 16px !important;
}

.client-addon-footer {
  padding: 1rem 1.5rem !important;
  background: var(--gray-light) !important;
  border-top: 1px solid var(--border-color) !important;
}


/* نموذج تغيير كلمة المرور */
.password-change-form {
  max-width: 600px !important;
  margin: 0 auto !important;
}

.form-group-row {
  margin-bottom: 2rem !important;
}

.form-label {
  display: flex ;
  align-items: center;
  gap: 0.5rem ;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 0.5rem ;
}

.form-label i {
  color: var(--primary) ;
  width: 16px;
}

.form-input-group {
  display: flex ;
  gap: 0.75rem ;
  align-items: flex-start ;
}

.form-input-group .form-control {
  flex: 1 ;
}

.generate-password {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.password-match-indicator {
  margin-top: 0.5rem !important;
  font-size: 0.9rem !important;
}

.form-actions {
  display: flex ;
  gap: 1rem;
  justify-content: center ;
  margin-top: 2rem ;
  padding-top: 2rem ;
  border-top: 1px solid var(--border-color) ;
}

/* الاستجابة للشاشات الصغيرة */
@media (max-width: 768px) {
  .product-icon-section {
    flex-direction: column !important;
    text-align: center !important;
    gap: 1rem !important;
  }
  
  .actions-grid {
    gap: 0.5rem !important;
  }
  
  .product-actions-card {
    margin-bottom: 3rem !important;
  }
  
  .usage-charts {
    flex-direction: column !important;
    gap: 2rem !important;
  }
  
  .download-item {
    flex-direction: column !important;
    gap: 1rem !important;
    text-align: center !important;
  }
  
  .client-addon-header {
    flex-direction: column !important;
    gap: 0.5rem !important;
    text-align: center !important;
  }
  
  .form-input-group {
    flex-direction: column;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .domain-actions {
    flex-direction: column !important;
  }
}

/* CSS كامل جديد لصفحة cPanel - التصميم الموحد */

/* تحسين card headers */
#cPanelPackageUsagePanel .card-header,
#cPanelGetSitejet .card-header,
#cPanelExtrasPurchasePanel .card-header,
#cPanelWordPress .card-header,
#cPanelQuickShortcutsPanel .card-header,
#cPanelQuickEmailPanel .card-header,
#cPanelBillingOverviewPanel .card-header,
#cPanelConfigurableOptionsPanel .card-header,
#cPanelMetricStatsPanel .card-header,
#cPanelAdditionalInfoPanel .card-header {
  background: var(--white) !important;
  color: var(--heading-color) !important;
  border-bottom: 2px solid var(--secondary) !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 1.25rem 1.5rem !important;
}



/* تحسين العناوين */
.cpanel-section-title {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

.cpanel-section-title i {
  color: var(--primary) !important;
  font-size: 1rem !important;
}

/* الكارد الموحد - Package + Usage */
#cPanelPackageUsagePanel .card-body {
  padding: 1.5rem !important;
}

/* قسم معلومات الحزمة */
.package-section {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

.cpanel-package-details {
  text-align: center !important;
  padding: 1.5rem !important;
  background: var(--gray-light) !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-color) !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  min-height: 253px !important;
}
.package-server-icon {
  font-size: 4rem !important;
  color: var(--primary) !important;
  margin-bottom: 0.5rem !important;
}

.package-group {
  color: var(--text-muted) !important;
  font-style: italic !important;
  font-size: 0.9rem !important;
  margin: 0 !important;
}

.package-name {
  font-weight: 700 !important;
  color: var(--heading-color) !important;
  margin: 0 !important;
  font-size: 1.1rem !important;
}

.package-domain {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  margin: 0 !important;
}

.package-domain i {
  color: var(--primary) !important;
}

.package-domain a {
  color: var(--primary) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.package-domain a:hover {
  text-decoration: underline !important;
}

.package-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  justify-content: center !important;
  margin-top: 1rem !important;
  width: 100% !important;

}

/* أقسام استخدام الموارد */
.usage-chart-wrapper {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

.usage-chart-wrapper .usage-chart-item {
  text-align: center !important;
  padding: 1.5rem !important;
  background: var(--gray-light) !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-color) !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 1rem !important;
  min-height: 253px !important;
}

.usage-chart-header {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  font-size: 0.9rem !important;
  margin: 0 !important;
}

.usage-chart-header i {
  color: var(--primary) !important;
}

.usage-chart-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1rem !important;
}

.usage-details {
  font-weight: 600 !important;
  color: var(--text-color) !important;
  font-size: 0.8rem !important;
  margin: 0 !important;
}
.usage-dial {
margin-left: -92px !important;
  margin-right: auto !important;
  }

/* ألوان مختلفة لكل نوع */
#diskUsage .usage-dial {
  color: var(--warning) !important
}

#bandwidthUsage .usage-dial {
  color: var(--success) !important
}

.usage-status-message {
  text-align: center !important;
  margin-top: 1rem !important;
}

.usage-alert {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1rem !important;
  font-size: 0.9rem !important;
}

.upgrade-action {
  margin-top: 0.5rem !important;
}

.last-updated-info {
  color: var(--text-muted) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  font-size: 0.85rem !important;
}

/* Sitejet */
.sitejet-preview-container {
  text-align: center !important;
  margin-bottom: 1rem !important;
}

.sitejet-preview-image {
  max-width: 100% !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  transition: opacity 0.2s ease-in-out !important;
  opacity: 0 !important;
}

.sitejet-details-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  height: 100% !important;
}

.sitejet-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  justify-content: center !important;
  margin-top: 1rem !important;
}

.sitejet-progress {
  margin-bottom: 1rem !important;
}

.sitejet-description {
  color: var(--text-muted) !important;
  margin-bottom: 1.5rem !important;
}

.sitejet-activate-action,
.sitejet-upgrade-action {
  margin-top: 1rem !important;
}

.cpanel-shortcuts-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 1rem !important;
  margin-top: 1rem !important;
}

.cpanel-shortcut-item {
  text-align: center !important;
}

.cpanel-shortcut-link {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 1.5rem 1rem !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-color) !important;
  text-decoration: none !important;
  color: var(--text-color) !important;
  transition: all 0.3s ease !important;
  height: 100% !important;
}

.cpanel-shortcut-link:hover {
  background: var(--primary-light) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  text-decoration: none !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.shortcut-icon {
  margin-bottom: 0.75rem !important;
}

.shortcut-icon img {
  max-width: 48px !important;
  max-height: 48px !important;
  display: block !important;
  margin: 0 auto !important;
}

.shortcut-label {
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  line-height: 1.3 !important;
}

/* WordPress */
.wordpress-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 2rem !important;
}

.wordpress-section-title {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  margin-bottom: 1rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.wordpress-section-title i {
  color: var(--primary) !important;
}

.wordpress-url-preview {
  font-family: 'Courier New', Consolas, monospace !important;
  color: var(--text-muted) !important;
  font-size: 0.9rem !important;
  margin-bottom: 1rem !important;
}

.wordpress-install-result {
  margin-bottom: 1rem !important;
}

.wordpress-install-form .row {
  align-items: end !important;
}

/* إنشاء البريد الإلكتروني */
.email-create-alerts {
  margin-bottom: 1rem !important;
}

.email-create-form .form-group {
  margin-bottom: 1rem !important;
}

.email-create-form .form-label {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 0.9rem !important;
  margin-bottom: 0.5rem !important;
}



/* رسالة التعليق */

.suspend-reason {
  font-size: 1.1rem !important;
  margin-bottom: 0.3rem !important;
}

.suspend-message {
  margin-bottom: 0.3rem !important;
}

.suspend-details {
  font-size: 0.9rem !important;
  opacity: 0.9 !important;
}

/* نظرة عامة على الفوترة */
.billing-overview-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 2rem !important;
}

.billing-section {
  background: var(--gray-light) !important;
  padding: 1.5rem !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-color) !important;
}

.billing-section-title {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.billing-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid var(--border-light) !important;
}

.billing-item:last-child {
  border-bottom: none !important;
}

.billing-label {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-weight: 400 !important;
  color: var(--text-color) !important;
}

.billing-label i {
  color: var(--primary) !important;
  width: 16px !important;
}

.billing-value {
  font-weight: 400 !important;
  color: var(--heading-color) !important;
}

/* الخيارات القابلة للتكوين */
.configurable-options-grid {
  display: grid ;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) ;
  gap: 1rem ;
}


.config-option-label {
  font-weight: 600 ;
  color: var(--heading-color) ;
}

.config-option-value {
  font-weight: 500 ;
  color: var(--text-color) ;
}

/* الحقول المخصصة */
.custom-fields-grid {
  display: grid ;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) ;
  gap: 1rem ;
}

.custom-field-item {

  padding: 1rem ;
  background: var(--gray-light) ;
  border-radius: 8px ;
  border: 1px solid var(--border-color) ;
}

.custom-field-label {
  font-weight: 600 ;
  color: var(--heading-color) ;
}

.custom-field-value {
  font-weight: 500 ;
  color: var(--text-color) ;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .package-actions {
    margin-bottom: 1.5rem ;
  }
}
@media (max-width: 767px) {
  .package-actions,
  .sitejet-actions {
    flex-direction: column ;
  }
  
  .billing-overview-grid {
    grid-template-columns: 1fr ;
    gap: 1rem ;
  }
  
  .billing-item {
    flex-direction: column ;
    align-items: flex-start ;
    gap: 0.5rem ;
  }
  
  .configurable-options-grid,
  .custom-fields-grid {
    grid-template-columns: 1fr ;
  }
  
  .config-option-item,
  .custom-field-item {
    flex-direction: column ;
    align-items: flex-start !;
    gap: 0.5rem ;
  }
  
  .wordpress-install-form .row {
    flex-direction: column ;
  }
  
  .wordpress-install-form .col-md-3 {
    margin-bottom: 1rem ;
  }
.cpanel-package-details {
  min-height: 100% ;
}

}

@media (max-width: 768px) {
  /* فصل الأقسام في الجوال */
  .package-section {
    margin-bottom: 1.5rem ;
  }
  
  .usage-chart-wrapper {
    margin-bottom: 1rem ;
  }
  
  .cpanel-shortcuts-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
    gap: 0.75rem !important;
  }
  
  .cpanel-shortcut-link {
    padding: 1rem 0.5rem !important;
  }
  
  .shortcut-icon img {
    max-width: 40px !important;
    max-height: 40px !important;
  }
  
  .shortcut-label {
    font-size: 0.8rem !important;
  }
  
  .package-actions,
  .sitejet-actions {
    flex-direction: column !important;
  }
  
  .billing-overview-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .billing-item {
    flex-direction: column ;
    align-items: flex-start ;
    gap: 0.5rem ;
  }
  
  .configurable-options-grid,
  .custom-fields-grid {
    grid-template-columns: 1fr ;
  }
  
  .config-option-item,
  .custom-field-item {
    flex-direction: column ;
    align-items: flex-start ;
    gap: 0.5rem ;
  }
  
  .wordpress-install-form .row {
    flex-direction: column !important;
  }
  
  .wordpress-install-form .col-md-3 {
    margin-bottom: 1rem !important;
  }
}

@media (max-width: 576px) {
  .cpanel-shortcuts-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .email-create-form .row {
    flex-direction: column !important;
  }
  
  .email-create-form .col-md-6,
  .email-create-form .col-md-3 {
    margin-bottom: 1rem !important;
  }
  
  .usage-chart-header {
    font-size: 0.8rem !important;
  }
  
  .usage-details {
    font-size: 0.75rem !important;
  }
}
/*mass pay*/

tr.masspay-total td{
  background-color: var(--gray-light);
}


/*addon order*/

.store-order-container form> .row{
  align-items: center;
}
.store-order-container .payment-term h4{
  font-size: 18px;
}
.store-order-container .store-domain-tab-content{
  background-color: var(--gray-light) !important;
  border: 1px solid var(--border-color);
}
.store-order-container .store-domain-tabs.nav-tabs{
  border: none;
}
.store-order-container .btn{
  font-size: 15px;
}
.store-order-container .store-domain-tabs li a{
  padding: 6px 15px !important;
}
.responsive-tabs-sm .nav-item a:hover{
  border-bottom: 1px solid var(--border-color);
}

.truncate {
    white-space: pre-wrap !important;
}




/*supportticketsubmit-stepone*/
.card-title.mb-2 {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: var(--heading-color) !important;
  margin-bottom: 0.75rem !important;
  font-family: var(--font-family-english) !important;
}

.text-muted {
  color: var(--text-muted) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.tts-support-department.card {
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.3s ease !important;
  background: var(--white) !important;
  margin-bottom: 1.5rem !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

.tts-support-department.card:hover {
  background-color: var(--primary-light) !important;
  border-color: var(--primary) !important;
}

.tts-support-department .card-body {
  padding: 2rem !important;
}

.tts-support-department h6 {
  margin-bottom: 1rem !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

.tts-support-department h6 a {
  color: var(--heading-color) !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  transition: color 0.3s ease !important;
  font-family: var(--font-family-english) !important;
  pointer-events: none !important;
}



.tts-support-department h6 a i {
  font-size: 16px !important;
  color: var(--primary) !important;
  margin-right: 0.5rem !important;
  opacity: 0.8 !important;
}

.tts-support-department p.text-muted {
  color: var(--body-color) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-bottom: 1.5rem !important;
  opacity: 0.8 !important;
}



@media (min-width: 768px) {
  .tts-support-department {
    margin-bottom: 1.5rem !important;
  }
}

@media (min-width: 992px) {
  .tts-support-department.col-md-6 {
    flex: 0 0 calc(50% - 0.75rem) !important;
    max-width: calc(50% - 0.75rem) !important;
    margin-left: 0.75rem !important;
    margin-right: 0.75rem !important;
  }
}



.tts-support-department.card {
  animation: fadeInUp 0.6s ease forwards !important;
}

@keyframes fadeInUp {
  from {
    opacity: 0 !important;
    transform: translateY(20px) !important;
  }
  to {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

.tts-support-department:nth-child(1) { animation-delay: 0.1s !important; }
.tts-support-department:nth-child(2) { animation-delay: 0.2s !important; }
.tts-support-department:nth-child(3) { animation-delay: 0.3s !important; }
.tts-support-department:nth-child(4) { animation-delay: 0.4s !important; }
.tts-support-department:nth-child(5) { animation-delay: 0.5s !important; }

.container .row [class*="col-"] .tts-support-department:last-child {
  margin-bottom: 0 !important;
}

@media (max-width: 767px) {
  .tts-support-department .card-body {
    padding: 1.5rem !important;
  }
  
  .card-title.mb-2 {
    font-size: 1.5rem !important;
  }
}
.custom-file-label {
  border-color: var(--border-color) !important;
  transition: border-color 0.3s ease !important;
}

.custom-file-label:hover {
  border-color: var(--primary) !important;
}

.attachment-group .input-group-append .btn {
  border-right: 1px solid var(--border-color) !important;
}

.tt-submit-btns {
  display: flex !important;
  gap: 1rem !important;
  margin-top: 2rem !important;
  padding-top: 1.5rem !important;
  border-top: 1px solid var(--border-color) !important;
}

@media (max-width: 768px) {
  .tt-submit-btns {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
}
.card.bg-success-light .fa-check-circle {
  font-size: 2.5rem !important;
  color: var(--success) !important;
  margin-bottom: 1rem !important;
}

.card.bg-success-light #ticket-number {
  color: var(--success) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

.card.bg-success-light #ticket-number:hover {
  color: var(--success) !important;
  text-decoration: underline !important;
}

.kbarticles.list-group {
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
}

.kb-article-item {
  border-bottom: 1px solid var(--border-color) !important;
  transition: all 0.3s ease !important;
}

.kb-article-item:last-child {
  border-bottom: none !important;
}

.kb-article-item:hover {
  background-color: var(--primary-light) !important;
}

.kb-article-item a {
  display: block !important;
  padding: 1rem 1.25rem !important;
  text-decoration: none !important;
  color: var(--body-color) !important;
  transition: all 0.3s ease !important;
}

.kb-article-item a:hover {
  text-decoration: none !important;
  color: var(--primary) !important;
}

.kb-article-item i {
  font-size: 16px !important;
  color: var(--primary) !important;
  width: 20px !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
}

.kb-article-item:hover i {
  color: var(--primary) !important;
}

.kb-article-item a {
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-family: var(--font-family-english) !important;
}

.kb-article-item small {
  display: block !important;
  margin-top: 0.5rem !important;
  color: var(--text-muted) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  opacity: 0.8 !important;
}

.kb-article-item:hover small {
  color: var(--body-color) !important;
  opacity: 0.9 !important;
}


.kb-article-item {
  position: relative !important;
}

@media (max-width: 768px) {
  .kb-article-item a {
    padding: 0.875rem 1rem !important;
  }
}

/* ==========================================================================
   إصلاح تداخلات CSS لصفحة مشاهدة التذكرة
   ========================================================================== */

.requestor-type-operator {
  background: var(--primary) !important;
}

.view-ticket .card-body:not(.tt-ticket-reply-form) {
  padding: 0 !important;
  border-bottom: 1px solid var(--border-color) !important;
  background: transparent !important;
}

.view-ticket .card-body:last-child {
  border-bottom: none !important;
}

.view-ticket .card-body.bg-primary-light {
  background: var(--primary-lighter) !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 1.5rem !important;
}

.view-ticket h3.h6 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--heading-color) !important;
  margin-bottom: 1rem !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
}

.ticket-actions {
  display: flex !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
}

.ticket-reply {
  position: relative !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.ticket-reply:last-child {
  border-bottom: none !important;
}

.ticket-reply .posted-by {
  background: var(--primary-lighter) !important;
  padding: 0.75rem 1.25rem !important;
  border-bottom: 1px solid var(--border-color) !important;
  font-size: 13px !important;
  color: var(--body-color) !important;
  margin: 0 !important;
}

.ticket-reply.staff .posted-by {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
}

.posted-by-name {
  font-weight: 600 !important;
  color: var(--heading-color) !important;
}

.ticket-reply.staff .posted-by-name {
  color: var(--primary) !important;
}

.requestor-badge {
  padding: 0.25rem 0.5rem !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.view-ticket .requestor-badge {
  padding: 4px 10px !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

.requestor-type-owner {
  background: var(--success) !important;
  color: var(--white) !important;
}

.requestor-type-sub-account {
  background: var(--info) !important;
  color: var(--white) !important;
}

.ticket-reply .message {
  background: var(--white) !important;
  padding: 1.25rem !important;
  border: none !important;
  margin: 0 !important;
  line-height: 1.6 !important;
  color: var(--body-color) !important;
}

.ticket-reply.staff .message {
  background: var(--white) !important;
}

.ticket-reply .message p:last-child {
  margin-bottom: 0 !important;
}

.attachments {
  background: var(--gray-light) !important;
  padding: 1rem 1.25rem 0.5rem 1.25rem !important;
  border-top: 1px solid var(--border-color) !important;
  margin: 0 !important;
}

.attachments strong {
  color: var(--heading-color) !important;
  font-size: 13px !important;
  display: block !important;
  margin-bottom: 0.75rem !important;
}

.attachment-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
}

.attachment-list li {
  text-align: center !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  width: auto !important;
}

.attachment-list li figure {
  display: contents !important;
  margin: 0 !important;
  background: transparent !important;
  line-height: 1 !important;
  font-size: 1rem !important;
}

.attachment-list li a,
.attachment-list li span {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.75rem 1rem !important;
  background: var(--white) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  color: var(--body-color) !important;
  transition: all 0.3s ease !important;
  font-size: 13px !important;
  gap: 0.5rem !important;
  width: auto !important;
  min-width: 120px !important;
}

.attachment-list li a:hover {
  background: var(--primary-light) !important;
  border-color: var(--primary) !important;
  text-decoration: none !important;
  color: var(--primary) !important;
}

.attachment-list li a span,
.attachment-list li span span {
  display: contents !important;
}

.attachment-list figure i {
  font-size: 1.1rem !important;
  color: var(--primary) !important;
  margin: 0 !important;
}

.attachment-list .caption {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  word-break: break-word !important;
  max-width: 150px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.rating {
  display: flex !important;
  gap: 0.25rem !important;
  margin-top: 1rem !important;
  float: left !important;
}

.rating .star {
  cursor: pointer !important;
  font-size: 18px !important;
  color: var(--border-color) !important;
  transition: color 0.3s ease !important;
}

.rating .star:hover,
.rating .star.active {
  color: var(--warning) !important;
}

.rating-done {
  margin-top: 1rem !important;
  float: left !important;
}

.rating-done .star {
  font-size: 16px !important;
  color: var(--border-color) !important;
}

.rating-done .star.active {
  color: var(--warning) !important;
}

.rated {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  margin-top: 0.5rem !important;
  clear: both !important;
}

.tts-support-department h6 a {
  color: var(--body-color) !important;
}

.view-ticket {
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
  margin-bottom: 2rem !important;
  background: var(--white) !important;
}

@media (max-width: 768px) {
  .view-ticket h3.h6 {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  
  .ticket-actions {
    width: 100% !important;
    justify-content: center !important;
  }
  
  .attachment-list {
    gap: 0.5rem !important;
  }
  
  .attachment-list li a,
  .attachment-list li span {
    padding: 0.5rem 0.75rem !important;
    min-width: 100px !important;
  }
  
  .rating,
  .rating-done {
    float: none !important;
    justify-content: center !important;
    margin-top: 1rem !important;
  }
}

.card-body {
    overflow: visible !important;
}

.tt-custom-card {
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  overflow: visible !important; 
  background: var(--white) !important;
}




.view-ticket .card-body,
.view-ticket .mc-promo-login .content,
.view-ticket .mc-promo-manage .content,
.mc-promo-login .view-ticket .content,
.mc-promo-manage .view-ticket .content {
  padding: 0 !important;
  border-bottom: 1px solid var(--border-color) !important;
  max-height: none !important;
}

.view-ticket .card-body:last-child,
.view-ticket .mc-promo-login .content:last-child,
.view-ticket .mc-promo-manage .content:last-child,
.mc-promo-login .view-ticket .content:last-child,
.mc-promo-manage .view-ticket .content:last-child {
  border-bottom: none !important;
}

.view-ticket {
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
  margin-bottom: 2rem !important;
  background: var(--white) !important;
}

@media (max-width: 768px) {
  .view-ticket h3.h6 {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  
  .ticket-actions {
    width: 100% !important;
    justify-content: center !important;
  }
  
  .attachment-list {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
  }
  
  .tt-custom-card .card-body {
    padding: 1.5rem !important;
  }
  
  .rating,
  .rating-done {
    float: none !important;
    justify-content: center !important;
    margin-top: 1rem !important;
  }
}

/* CSS مخصص لصفحة تفاصيل الدومين */
/* CSS لصفحة إدارة DNS */

.dns-external-code {
  text-align: center !important;
  padding: 2rem !important;
  background: var(--gray-light) !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-color) !important;
}

.dns-records-container {
  background: var(--white) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-bottom: 2rem !important;
}

.dns-records-header {
  display: grid !important;
  grid-template-columns: 1fr 140px 2fr 120px !important;
  gap: 1rem !important;
  background: var(--gray-light) !important;
  padding: 1rem !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.dns-header-item {
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.dns-records-list {
  max-height: 500px !important;
  overflow-y: auto !important;
}

.dns-record-item {
  display: grid !important;
  grid-template-columns: 1fr 140px 2fr 120px !important;
  gap: 1rem !important;
  padding: 1rem !important;
  border-bottom: 1px solid var(--border-color) !important;
  transition: background-color 0.3s ease !important;
}

.dns-record-item:hover {
  background: rgba(var(--primary-rgb), 0.03) !important;
}

.dns-record-item:last-child {
  border-bottom: none !important;
}

.dns-new-record {
  background: rgba(var(--primary-rgb), 0.05) !important;
  border-top: 2px solid var(--primary) !important;
}

.dns-field {
  display: flex !important;
  align-items: center !important;
}

.dns-input,
.dns-select {
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
  width: 100% !important;
}

.dns-input:focus,
.dns-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1) !important;
  outline: none !important;
}

.dns-select {
  background: var(--white) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 0.5rem center !important;
  background-repeat: no-repeat !important;
  background-size: 1.5em 1.5em !important;
  padding-right: 2.5rem !important;
  appearance: none !important;
}

.dns-na-text {
  color: var(--text-muted) !important;
  font-size: 12px !important;
  font-style: italic !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
}

.dns-note {
  color: var(--text-muted) !important;
  text-align: center !important;
  margin-bottom: 1.5rem !important;
  padding: 1rem !important;
  background: var(--gray-light) !important;
  border-radius: 6px !important;
}

.dns-records-list::-webkit-scrollbar {
  width: 6px !important;
}

.dns-records-list::-webkit-scrollbar-track {
  background: var(--gray-light) !important;
}

.dns-records-list::-webkit-scrollbar-thumb {
  background: var(--border-color) !important;
  border-radius: 3px !important;
}

.dns-records-list::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted) !important;
}

@media (max-width: 768px) {
  .dns-records-container {
    overflow: visible !important;
  }
  
  .dns-records-header {
    display: none !important;
  }
  
  .dns-record-item {
    display: block !important;
    padding: 1.25rem !important;
    margin-bottom: 1.25rem !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    background: var(--white) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
  }
  
  .dns-records-list {
    padding: 1rem !important;
    background: var(--gray-light) !important;
    max-height: none !important;
  }
  
  .dns-record-item .dns-field:nth-child(2) {
    order: -1 !important;
    margin-bottom: 1rem !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding-bottom: 1rem !important;
  }
  
  .dns-record-item .dns-field:nth-child(2) .dns-select {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--primary) !important;
    border: 1px solid var(--primary) !important;
    background: rgba(var(--primary-rgb), 0.05) !important;
    text-align: center !important;
  }
  
  .dns-mobile-row {
    display: flex !important;
    gap: 1rem !important;
    margin-bottom: 1rem !important;
  }
  
  .dns-mobile-row:last-child {
    margin-bottom: 0 !important;
  }
  
  .dns-mobile-row .dns-field {
    flex: 1 !important;
    margin-bottom: 0 !important;
  }
  
  .dns-field {
    display: flex !important;
    flex-direction: column !important;
  }
  
  .dns-field::before {
    content: attr(data-label) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    margin-bottom: 0.4rem !important;
    letter-spacing: 0.5px !important;
  }
  
  .dns-field:nth-child(2)::before {
    content: "Record Type" !important;
    text-align: center !important;
  }
  
  .dns-input,
  .dns-select {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 14px !important;
    padding: 0.6rem 0.75rem !important;
  }
  
  .dns-na-text {
    font-size: 12px !important;
    padding: 0.6rem 0.75rem !important;
    background: var(--gray-light) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .dns-new-record {
    border: 2px solid var(--primary) !important;
    background: rgba(var(--primary-rgb), 0.03) !important;
  }
  
  .dns-new-record .dns-field:nth-child(2) .dns-select {
    background: var(--white) !important;
    color: var(--primary) !important;
  }
  
  /* تجميع الحقول في صفوف */
  .dns-record-item {
    display: flex !important;
    flex-direction: column !important;
  }
  
  .dns-record-item .dns-field:nth-child(1),
  .dns-record-item .dns-field:nth-child(3) {
    order: 2 !important;
  }
  
  .dns-record-item .dns-field:nth-child(4) {
    order: 3 !important;
  }
  
  .dns-mobile-fields {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  .dns-mobile-row-1 {
    display: flex !important;
    gap: 1rem !important;
  }
  
  .dns-mobile-row-1 .dns-field {
    flex: 1 !important;
  }
}
/* CSS لصفحة إعادة توجيه البريد */

.email-external-code {
  text-align: center !important;
  padding: 2rem !important;
  background: var(--gray-light) !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-color) !important;
}

.email-forwards-container {
  background: var(--white) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-bottom: 2rem !important;
}

.email-forwards-header {
  display: grid !important;
  grid-template-columns: 1fr 220px 1fr !important;
  gap: 1rem !important;
  background: var(--gray-light) !important;
  padding: 1rem !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.email-header-item {
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-align: center !important;
}

.email-forwards-list {
  max-height: 400px !important;
  overflow-y: auto !important;
}

.email-forward-item {
  display: grid !important;
  grid-template-columns: 1fr 220px 1fr !important;
  gap: 1rem !important;
  padding: 1rem !important;
  border-bottom: 1px solid var(--border-color) !important;
  transition: background-color 0.3s ease !important;
  align-items: center !important;
}

.email-forward-item:hover {
  background: rgba(var(--primary-rgb), 0.03) !important;
}

.email-forward-item:last-child {
  border-bottom: none !important;
}

.email-new-forward {
  background: rgba(var(--primary-rgb), 0.05) !important;
  border-top: 2px solid var(--primary) !important;
}

.email-field {
  display: flex !important;
  align-items: center !important;
}

.email-domain-field {
  justify-content: center !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  background: var(--gray-light) !important;
  border-radius: 6px !important;
  padding: 0.75rem !important;
  border: 1px solid var(--border-color) !important;
}

.email-domain-text {
  font-weight: 600 !important;
  color: var(--primary) !important;
  font-size: 14px !important;
}

.email-arrow {
  color: var(--text-muted) !important;
  font-size: 16px !important;
}

.email-input {
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
  padding: 0.75rem !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
  width: 100% !important;
}

.email-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1) !important;
  outline: none !important;
}

.email-forwards-list::-webkit-scrollbar {
  width: 6px !important;
}

.email-forwards-list::-webkit-scrollbar-track {
  background: var(--gray-light) !important;
}

.email-forwards-list::-webkit-scrollbar-thumb {
  background: var(--border-color) !important;
  border-radius: 3px !important;
}

.email-forwards-list::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted) !important;
}

@media (max-width: 768px) {
  .email-forwards-container {
    overflow: visible !important;
  }
  
  .email-forwards-header {
    display: none !important;
  }
  
  .email-forward-item {
    display: block !important;
    padding: 1.25rem !important;
    margin-bottom: 1.25rem !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    background: var(--white) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
  }
  
  .email-forwards-list {
    padding: 1rem !important;
    background: var(--gray-light) !important;
    max-height: none !important;
  }
  
  /* ترتيب الحقول في الهاتف */
  .email-field {
    margin-bottom: 1rem !important;
  }
  
  .email-field:last-child {
    margin-bottom: 0 !important;
  }
  
  .email-field::before {
    content: attr(data-label) !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    margin-bottom: 0.4rem !important;
    letter-spacing: 0.5px !important;
  }
  
  .email-domain-field {
    padding: 1rem !important;
    margin-bottom: 1rem !important;
    background: var(--primary-light) !important;
    border: 2px solid var(--primary) !important;
  }
  
  .email-domain-field::before {
    display: none !important;
  }
  
  .email-domain-text {
    font-size: 16px !important;
    color: var(--primary) !important;
  }
  
  .email-arrow {
    font-size: 18px !important;
    color: var(--primary) !important;
  }
  
  .email-new-forward {
    border: 2px solid var(--primary) !important;
    background: rgba(var(--primary-rgb), 0.03) !important;
  }
}

.domain-section-title {
  color: var(--heading-color) !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  margin-bottom: 1.5rem !important;
   position: relative !important;

}


.domain-section-description {
  color: var(--body-color) !important;
  margin-bottom: 2rem !important;
  line-height: 1.6 !important;
}

.domain-info-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 1.5rem !important;
  margin-bottom: 2rem !important;
}

.domain-info-item {
  padding: 1rem !important;
  background: var(--gray-light) !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-color) !important;
}

.domain-info-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  margin-bottom: 0.5rem !important;
}

.domain-info-value {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--heading-color) !important;
}

.domain-info-value a {
  color: var(--primary) !important;
  text-decoration: none !important;
}

.domain-info-value a:hover {
  text-decoration: underline !important;
}

.domain-ssl-section {
  margin-top: 2rem !important;
  padding-top: 2rem !important;
  border-top: 1px solid var(--border-color) !important;
}

.domain-ssl-title {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  margin-bottom: 1rem !important;
}

.domain-ssl-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 1rem !important;
}

.domain-ssl-item {
  padding: 1rem !important;
  background: var(--white) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
}

.domain-ssl-status {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.domain-ssl-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  margin-bottom: 0.5rem !important;
}

.domain-ssl-value {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--heading-color) !important;
}

.domain-registrar-output,
.domain-hook-output {
  margin: 2rem 0 !important;
  padding: 1.5rem !important;
  background: var(--gray-light) !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-color) !important;
}

.domain-actions-section {
  margin-top: 2rem !important;
  padding-top: 2rem !important;
  border-top: 1px solid var(--border-color) !important;
}

.domain-actions-title {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  margin-bottom: 1rem !important;
}

.domain-actions-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 1rem !important;
}

.domain-action-item {
  display: block !important;
  padding: 1rem !important;
  background: var(--white) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  text-align: center !important;
  font-weight: 500;
  font-size: 0.9rem;
}

.domain-action-item:hover {
  background: var(--primary-light) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  text-decoration: none !important;
}

.domain-status-display {
  display: flex !important;
  align-items: baseline !important;
  gap: 0.5rem !important;
  margin-bottom: 2rem !important;
  padding: 1rem !important;
  background: var(--gray-light) !important;
  border-radius: 8px !important;
}

.domain-status-label {
  font-weight: 600 !important;
  color: var(--heading-color) !important;
}

.domain-form {
  margin-top: 0 !important;
}

.ns-register-title::before {
  background: var(--success) !important;
}

.ns-modify-title::before {
  background: var(--warning) !important;
}

.ns-delete-title::before {
  background: var(--danger) !important;
}

.ns-form-label {
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  font-size: 14px !important;
  margin-bottom: 0 !important;
  direction: ltr !important;
  text-align: left !important;
}

.ns-form-group {
  margin-bottom: 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

.ns-input-group {
  display: flex !important;
  align-items: center !important;
  background: var(--white) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

.ns-input-group:focus-within {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1) !important;
}

.ns-input-wrapper {
  display: flex !important;
  width: 100% !important;
}

.ns-input {
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
  padding: 0.75rem 1rem !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
  font-family: 'Courier New', Consolas, monospace !important;
  width: 100% !important;
}

.ns-input-group .ns-input {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  flex: 1 !important;
}

.ns-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1) !important;
  outline: none !important;
}

.ns-input-group .ns-input:focus {
  box-shadow: none !important;
}

.ns-domain-suffix {
  background: var(--gray-light) !important;
  color: var(--text-muted) !important;
  padding: 0.75rem 1rem !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border-left: 1px solid var(--border-color) !important;
  white-space: nowrap !important;
  font-family: 'Courier New', Consolas, monospace !important;
}

.domain-form-actions {
  margin-top: 2rem !important;
  padding-top: 0 !important;
  text-align: center !important;
}

.tt-custom-card + .tt-custom-card {
  margin-top: 2rem !important;
}

.ns-form input[name="sub"][value="delete"] ~ .domain-form-actions .btn {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
}

@media (max-width: 768px) {
  .ns-form-group {
    margin-bottom: 1.5rem !important;
  }
  
  .ns-input-group {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  
  .ns-input-group .ns-input {
    border-bottom: 1px solid var(--border-color) !important;
  }
  
  .ns-domain-suffix {
    border-left: none !important;
    border-top: 1px solid var(--border-color) !important;
    text-align: center !important;
    background: var(--primary-light) !important;
    color: var(--primary) !important;
  }
  
  .ns-input,
  .ns-input-wrapper {
    width: 100% !important;
  }
}


.epp-code-title::before {
  background: var(--info) !important;
}

.epp-description {
  margin-bottom: 2rem !important;
  padding: 1rem !important;
  background: var(--gray-light) !important;
  border-radius: 6px !important;
}

.epp-description p {
  margin: 0 !important;
  color: var(--body-color) !important;
  line-height: 1.6 !important;
}

.epp-status-section {
  margin-top: 2rem !important;
}

.epp-status-card {
  padding: 1.5rem !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-color) !important;
  background: var(--white) !important;
}

.epp-error {
  background: rgba(var(--danger-rgb), 0.05) !important;
  border-color: rgba(var(--danger-rgb), 0.2) !important;
}

.epp-success {
  background: rgba(var(--success-rgb), 0.05) !important;
  border-color: rgba(var(--success-rgb), 0.2) !important;
}

.epp-info {
  background: rgba(var(--info-rgb), 0.05) !important;
  border-color: rgba(var(--info-rgb), 0.2) !important;
}

.epp-status-content {
  width: 100% !important;
}

.epp-status-title {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  margin-bottom: 1rem !important;
}

.epp-error .epp-status-title {
  color: var(--danger) !important;
}

.epp-success .epp-status-title {
  color: var(--success) !important;
}

.epp-info .epp-status-title {
  color: var(--info) !important;
}

.epp-status-message {
  color: var(--body-color) !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}

.epp-code-display {
  display: flex !important;
  gap: 0.5rem !important;
  margin: 1rem 0 !important;
  direction: ltr !important;
}

.epp-code-input {
  flex: 1 !important;
  padding: 0.75rem !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
  background: var(--gray-light) !important;
  font-family: 'Courier New', Consolas, monospace !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  text-align: center !important;
  letter-spacing: 1px !important;
  direction: ltr !important;
}

.epp-code-input:focus {
  outline: none !important;
  border-color: var(--success) !important;
}

.epp-copy-btn {
  padding: 0.75rem 1rem !important;
  background: var(--success) !important;
  color: var(--white) !important;
  border: 1px solid var(--success) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background 0.3s ease !important;
  font-size: 14px !important;
}

.epp-copy-btn:hover {
  background: var(--success-dark) !important;
}

.epp-code-note {
  font-size: 13px !important;
  color: var(--text-muted) !important;
  margin: 0.5rem 0 0 0 !important;
  text-align: center !important;
}

@media (max-width: 768px) {
  .epp-code-display {
    flex-direction: column !important;
  }
  
  .epp-copy-btn {
    width: 100% !important;
    text-align: center !important;
  }
}



.contacts-title::before {
  background: var(--primary) !important;
}

.contact-tabs {
  border-bottom: 2px solid var(--border-color) !important;
  margin-bottom: 0 !important;
}

.contact-tabs .nav-link {
  border: none !important;
  border-radius: 0 !important;
  color: var(--text-muted) !important;
  font-weight: 600 !important;
  padding: 1rem 1.5rem !important;
  transition: all 0.3s ease !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
}

.contact-tabs .nav-link:hover {
  color: var(--primary) !important;
  background: transparent !important;
}

.contact-tabs .nav-link.active {
  color: var(--primary) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--primary) !important;
}

.contact-tab-content {
  padding: 2rem 0 !important;
}

/* خيارات الراديو */
.contact-radio-options {
  margin-bottom: 2rem !important;
}

.contact-radio-option {
  margin-bottom: 1rem !important;
  padding: 1rem !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
  background: var(--white) !important;
  transition: all 0.3s ease !important;
}

.contact-radio-option:hover {
  border-color: var(--primary) !important;
  background: var(--primary-light) !important;
}

.contact-radio-option.active {
  border-color: var(--primary) !important;
  background: var(--primary-light) !important;
}

.contact-option-label {
  display: flex !important;
  align-items: center !important;
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  cursor: pointer !important;
  margin: 0 !important;
  justify-content: flex-start !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

.contact-option-label input[type="radio"].form-check-input {
  position: static !important;
  margin: 0 !important;
  margin-right: 0.5rem !important;
  flex-shrink: 0 !important;
  width: 14px !important;
  height: 14px !important;
  float: none !important;
  vertical-align: middle !important;
  order: 1 !important;
}

.contact-option-label .option-text {
  flex: 1 !important;
  line-height: 1.2 !important;
  order: 2 !important;
  display: block !important;
  width: auto !important;
  font-size: 0.9rem !important;
}

.contact-option-label:has(input[type="radio"]:checked) {
  color: var(--primary) !important;
}

/* قسم الـ select */
.contact-select-section {
  margin: 1rem 0 !important;
  padding: 1rem !important;
  background: var(--gray-light) !important;
  border: 1px solid var(--border-color) !important;
}

.contact-field-label {
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  margin-bottom: 0.5rem !important;
  font-size: 14px !important;
  display: block !important;
}

.contact-select,
.contact-input {
  border: 1px solid var(--border-color) !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
  width: 100% !important;
}

.contact-select:focus,
.contact-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1) !important;
  outline: none !important;
}

.contact-select:disabled {
  background: var(--gray-light) !important;
  opacity: 0.6 !important;
}

.contact-input[name*="Phone"],
.contact-input[name*="Postcode"] {
  font-family: 'Courier New', Consolas, monospace !important;
}
.contact-input[name*="Phone"] {
padding-left: 82px !important;}

/* شبكة الحقول */
.contact-fields-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 1rem !important;
}

.contact-field-group {
  display: flex !important;
  flex-direction: column !important;
}

/* تمييز الحقول المهمة IRTP */
.irtp-field {
  border-left: 4px solid var(--warning) !important;
}

.irtp-field:focus {
  border-left-color: var(--warning) !important;
}



/* الاستجابة للشاشات الصغيرة */
@media (max-width: 768px) {
  .contact-tabs .nav-link {
    padding: 0.75rem 1rem !important;
    font-size: 12px !important;
  }
  
  .contact-tab-content {
    padding: 1.5rem 0 !important;
  }
  
  .contact-radio-option {
    padding: 0.75rem !important;
  }
  
  .contact-fields-grid {
    grid-template-columns: 1fr !important;
  }
}




.domain-lock-status {
  background: var(--gray-light) !important;
  padding: 2rem !important;
  border-radius: 8px !important;
  text-align: center !important;
  margin-bottom: 2rem !important;
}

.domain-lock-title {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  margin-bottom: 1rem !important;
}

.domain-ns-options {
  margin-bottom: 2rem !important;
  display: flex !important;
  gap: 2rem !important;
  background: var(--gray-light) !important;
  padding: 1.5rem !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-color) !important;
}

.domain-ns-option {
  margin-bottom: 0 !important;
  flex: 1 !important;
}

.domain-radio-label {
  display: flex !important;
  align-items: center !important;
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  cursor: pointer !important;
  padding: 1rem !important;
  background: var(--white) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  justify-content: flex-start !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

.domain-radio-label input[type="radio"].form-check-input {
  position: static !important;
  margin: 0 !important;
  margin-right: 0.5rem !important;
  flex-shrink: 0 !important;
  width: 14px !important;
  height: 14px !important;
  float: none !important;
  vertical-align: middle !important;
  order: 1 !important;
}

.domain-radio-label span {
  flex: 1 !important;
  line-height: 1.2 !important;
  order: 2 !important;
  display: block !important;
  width: auto !important;
  font-size: 0.9rem !important;
}

.domain-radio-label:hover {
  border-color: var(--primary) !important;
  background: var(--primary-light) !important;
}

.domain-radio-label input[type="radio"]:checked + * {
  color: var(--primary) !important;
}

.domain-radio-label:has(input[type="radio"]:checked) {
  border-color: var(--primary) !important;
  background: var(--primary-light) !important;
  color: var(--primary) !important;
}

.domain-ns-fields {
  margin-bottom: 2rem !important;
}

.domain-ns-field {
  margin-bottom: 1rem !important;
}

.domain-field-label {
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  margin-bottom: 0.5rem !important;
  font-size: 14px !important;
}

.domain-addons-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 2rem !important;
}

.domain-addon-item {
  display: flex !important;
  padding: 2rem !important;
  background: var(--gray-light) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
}

.domain-addon-item:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

.domain-addon-icon {
  width: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  margin-right: 2rem !important;
}

.domain-addon-icon i {
  font-size: 2.5rem !important;
  color: var(--primary) !important;
}

.domain-addon-content {
  flex: 1 !important;
}

.domain-addon-title {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  margin-bottom: 0.5rem !important;
}

.domain-addon-description {
  color: var(--body-color) !important;
  margin-bottom: 1rem !important;
  line-height: 1.6 !important;
}

.domain-addon-form {
  display: flex !important;
  gap: 1rem !important;
}

.label {
  display: inline-block ;
  max-width: 100% ;
  padding: 0.3rem 0.5rem ;
  margin-bottom: 0 ;
  font-size: 11px ;
  font-weight: 500 ;
  line-height: 1.2 ;
  text-transform: uppercase ;
  text-align: center ;
  white-space: nowrap ;
  vertical-align: baseline ;
  border-radius: 6px ;
  color: var(--white) ;
  font-family: var(--font-family-english) ;
}

.label-success {
  background: var(--success) ;
}

.label-danger {
  background: var(--danger) ;
}

.label-warning {
  background: var(--warning) ;
}

.label-info {
  background: var(--info) ;
}

.label-primary {
  background: var(--primary) ;
}

.label-secondary {
  background: var(--gray) ;
}

@media (max-width: 768px) {
  .domain-info-grid {
    grid-template-columns: 1fr ;
  }
  
  .domain-actions-list {
    grid-template-columns: 1fr ;
  }
  
  .domain-ssl-grid {
    grid-template-columns: 1fr ;
  }
  
  .domain-addon-item {
    flex-direction: column ;
    text-align: center ;
  }
  
  .domain-addon-icon {
    margin-right: 0 ;
    margin-bottom: 1rem ;
  }
  
  .domain-addon-form {
    flex-direction: column ;
  }
  
  .domain-ns-options {
    flex-direction: column ;
    gap: 1rem !;
  }
}













/* العنوان الرئيسي */
.upgrade-section-title {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

.upgrade-section-title i {
  color: var(--primary) !important;
  font-size: 1.1rem !important;
}

/* قسم المقدمة */
.upgrade-intro-section {
  margin-bottom: 2rem !important;
}

.upgrade-description {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 1rem 1.5rem !important;
  background: var(--primary-light) !important;
  border-radius: 8px !important;
  border: 1px solid rgba(var(--primary-rgb), 0.2) !important;
  margin-bottom: 1.5rem !important;
  font-size: 1rem !important;
  color: var(--primary-dark) !important;
}

.upgrade-description i {
  color: var(--primary) !important;
  font-size: 1.1rem !important;
}

/* كارد التكوين الحالي */
.current-config-card {
  background: var(--gray-light) !important;
  padding: 1.5rem !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-color) !important;
  margin-bottom: 1.5rem !important;
  text-align: center !important;
}

.config-label {
  font-size: 0.9rem !important;
  color: var(--text-muted) !important;
  margin-bottom: 0.5rem !important;
  font-weight: 500 !important;
}

.config-value {
  font-size: 1.1rem !important;
  color: var(--heading-color) !important;
  font-weight: 600 !important;
}

.domain-info {
  color: var(--primary) !important;
  font-weight: 500 !important;
  margin-left: 0.5rem !important;
}

/* تسمية التكوين الجديد */
.new-config-label {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  margin-bottom: 1.5rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 2px solid var(--border-color) !important;
}

.new-config-label i {
  color: var(--success) !important;
}

/* حاوي حزم الترقية */
.upgrade-packages-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
}

.upgrade-packages-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
  gap: 1.5rem !important;
}

/* كارد حزمة الترقية */
.upgrade-package-card {
  background: var(--white) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* معلومات الحزمة */
.package-info {
  padding: 2rem !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.package-header {
  text-align: center !important;
}

.package-title {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--heading-color) !important;
  margin-bottom: 1rem !important;
  line-height: 1.3 !important;
}

.package-description {
  color: var(--text-color) !important;
  line-height: 1.6 !important;
  font-size: 0.95rem !important;
}

/* قسم التسعير */
.package-pricing {
  padding: 2rem !important;
  background: var(--gray-light) !important;
}

.pricing-section {
  margin-bottom: 1.5rem !important;
}

/* عرض السعر */
.price-display {
  text-align: center !important;
  padding: 1rem !important;
  border-radius: 8px !important;
  margin-bottom: 1rem !important;
}

.free-price {
  background: var(--success-light) !important;
  color: var(--success-dark) !important;
  border: 1px solid var(--success) !important;
}

.free-price i {
  margin-left: 0.5rem !important;
  font-size: 1.1rem !important;
}

.onetime-price {
  background: var(--primary-light) !important;
  border: 1px solid var(--primary) !important;
}

.price-amount {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  display: block !important;
}

.price-term {
  color: var(--primary-dark) !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
}

/* منتقي دورة الفوترة */
.billing-cycle-selector {
  text-align: center !important;
}

.cycle-label {
  display: block !important;
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  margin-bottom: 0.75rem !important;
  font-size: 0.9rem !important;
}

.cycle-select {
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  padding: 0.75rem 1rem !important;
  background: var(--white) !important;
  font-size: 0.95rem !important;
  transition: border-color 0.3s !important;
}

.cycle-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1) !important;
}

/* زر الترقية */
.upgrade-btn {
  font-size: 1rem !important;
  font-weight: 600 !important;
  padding: 0.875rem 1.5rem !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
}

.upgrade-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.3) !important;
}

/* أزرار الإجراءات */
.upgrade-action-center {
  text-align: center !important;
  margin-top: 2rem !important;
}

.upgrade-actions-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 1rem !important;
  margin-top: 2rem !important;
}

/* قسم خيارات التكوين */
.config-upgrade-intro {
  margin-bottom: 2rem !important;
}

.config-options-container {
  background: var(--white) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 2rem !important;
}

/* رأس خيارات التكوين */
.config-options-header {
  display: grid !important;
  grid-template-columns: 2fr 2fr 60px 2fr !important;
  gap: 1rem !important;
  padding: 1.25rem 1.5rem !important;
  background: var(--primary-light) !important;
  border-bottom: 1px solid var(--border-color) !important;
  font-weight: 600 !important;
  color: var(--primary-dark) !important;
}

/* صف خيار التكوين */
.config-option-row {
  display: grid !important;
  grid-template-columns: 2fr 2fr 60px 2fr !important;
  gap: 1rem !important;
  padding: 1.5rem !important;
  border-bottom: 1px solid var(--border-color) !important;
  align-items: center !important;
  transition: background-color 0.3s !important;
}

.config-option-row:hover {
  background: rgba(var(--primary-rgb), 0.02) !important;
}

.config-option-row:last-child {
  border-bottom: none !important;
}

/* أعمدة التكوين */
.config-col {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.config-name {
  justify-content: flex-start !important;
}

.config-current, .config-new {
  justify-content: center !important;
}

/* اسم الخيار */
.option-name {
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  font-size: 0.95rem !important;
}

/* القيمة الحالية */
.current-value {
  text-align: center !important;
  font-weight: 500 !important;
  color: var(--text-color) !important;
}

.quantity-display {
  font-family: var(--font-family-monospace) !important;
  background: var(--gray-light) !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 4px !important;
  font-size: 0.85rem !important;
}

/* السهم */
.config-arrow i {
  color: var(--primary) !important;
  font-size: 1.1rem !important;
}

/* منتقي القيمة الجديدة */
.new-value-selector {
  width: 100% !important;
}

.config-select {
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.9rem !important;
  transition: border-color 0.3s !important;
}

.config-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1) !important;
}

/* مدخل الكمية */
.quantity-input-group {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.quantity-input {
  width: 80px !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
  padding: 0.5rem !important;
  text-align: center !important;
}

.quantity-unit {
  font-size: 0.9rem !important;
  color: var(--text-muted) !important;
  font-weight: 500 !important;
}

/* قسم إرسال التكوين */
.config-submit-section {
  text-align: center !important;
  margin-top: 2rem !important;
  padding-top: 2rem !important;
  border-top: 1px solid var(--border-color) !important;
}

/* الاستجابة للشاشات */
@media (max-width: 768px) {
  .upgrade-packages-container {
    grid-template-columns: 1fr !important;
  }
  
  .upgrade-actions-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  
  .package-info,
  .package-pricing {
    padding: 1.5rem !important;
  }
  
  .config-options-header,
  .config-option-row {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    text-align: center !important;
  }
  
  .config-col {
    justify-content: center !important;
    margin-bottom: 0.5rem !important;
  }
  
  .config-arrow {
    transform: rotate(90deg) !important;
    margin: 0.5rem 0 !important;
  }
  
  .config-name {
    order: 1 !important;
    background: var(--primary-light) !important;
    padding: 0.75rem !important;
    border-radius: 6px !important;
    margin-bottom: 1rem !important;
  }
  
  .config-current {
    order: 2 !important;
  }
  
  .config-arrow {
    order: 3 !important;
  }
  
  .config-new {
    order: 4 !important;
  }
  
  .quantity-input-group {
    justify-content: center !important;
  }
}



.current-service-info {
  margin-bottom: 2rem !important;
}

.service-info-card {
  background: var(--primary-light) ;
  border: 1px solid rgba(var(--primary-rgb), 0.2) ;
  border-radius: 12px ;
  padding: 1.5rem ;
  text-align: center ;
}

.service-info-header {
  display: flex ;
  align-items: center ;
  justify-content: center ;
  gap: 0.75rem ;
  margin-bottom: 0.75rem ;
  font-weight: 600 ;
  color: var(--primary-dark) ;
  font-size: 0.95rem ;
}

.service-info-header i {
  color: var(--primary) ;
}

.service-info-content {
  font-size: 1.1rem ;
  color: var(--heading-color) ;
  font-weight: 700 ;
}

.service-domain {
  color: var(--primary) ;
  font-weight: 600 ;
  margin-left: 0.5rem ;
}

.upgrade-order-summary {
  background: var(--white) ;
  border: 1px solid var(--border-color) ;
  border-radius: 12px ;
  overflow: hidden ;
  margin-bottom: 2rem ;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) ;
}

.order-summary-header {
  background: var(--gray-light) ;
  padding: 1.25rem 1.5rem ;
  border-bottom: 1px solid var(--border-color) ;
}

.summary-title {
  font-size: 1.1rem ;
  font-weight: 600 ;
  color: var(--heading-color) ;
  margin: 0 ;
  display: flex ;
  align-items: center ;
  gap: 0.75rem ;
}

.summary-title i {
  color: var(--primary) ;
}

.order-items-container {
  padding: 0 ;
}

.order-items-header {
  display: grid ;
  grid-template-columns: 1fr 150px ;
  gap: 1rem ;
  padding: 1rem 1.5rem ;
  background: var(--primary-lighter) ;
  border-bottom: 1px solid var(--border-color) ;
  font-weight: 600 ;
  color: var(--primary-dark) ;
  font-size: 0.9rem ;
}

.item-desc {
  text-align: left;
}

.item-price {
  text-align: center;
}

.order-items-list {
  background: var(--white) ;
}

.order-item {
  display: grid ;
  grid-template-columns: 1fr 150px ;
  gap: 1rem ;
  padding: 1.5rem ;
  border-bottom: 1px solid var(--border-color) ;
  align-items: center ;
}

.order-item:last-child {
  border-bottom: none ;
}

.upgrade-item {
  display: flex ;
  align-items: center ;
  gap: 1rem ;
  justify-content: center ;
  flex-wrap: wrap ;
}

.from-product,
.from-value {
  background: var(--gray-light) ;
  padding: 0.5rem 1rem ;
  border-radius: 6px ;
  font-weight: 600 ;
  color: var(--text-color) ;
  border: 1px solid var(--border-color) ;
}

.to-product,
.to-value {
  background: var(--success-light) ;
  padding: 0.5rem 1rem ;
  border-radius: 6px ;
  font-weight: 600 ;
  color: var(--success-dark) ;
  border: 1px solid var(--success) ;
}

.upgrade-arrow {
  color: var(--primary) ;
  font-size: 1rem ;
}

.config-upgrade-item {
  text-align: center ;
}

.config-name {
  font-weight: 600 ;
  color: var(--heading-color) ;
  margin-bottom: 0.75rem ;
  font-size: 0.95rem ;
}

.config-change {
  display: flex ;
  align-items: center ;
  gap: 1rem ;
  justify-content: center ;
  flex-wrap: wrap ;
}

.price-amount {
  font-weight: 700 ;
  color: var(--heading-color) ;
  font-size: 1.1rem ;
}

.order-totals {
  background: var(--gray-light) ;
  border-top: 1px solid var(--border-color) ;
}

.total-row {
  display: grid ;
  grid-template-columns: 1fr 150px ;
  gap: 1rem ;
  padding: 1rem 1.5rem ;
  border-bottom: 1px solid var(--border-color) ;
}

.total-row:last-child {
  border-bottom: none ;
}

.total-label {
  font-weight: 600 ;
  color: var(--text-color) ;
  text-align: right ;
  display: flex ;
  align-items: center ;
  justify-content: flex-end ;
  gap: 0.5rem ;
}

.total-value {
  font-weight: 600 ;
  color: var(--heading-color) ;
  text-align: center ;
}

.discount-row {
  background: rgba(var(--success-rgb), 0.05) ;
}

.discount-label {
  color: var(--success-dark) ;
}

.discount-label i {
  color: var(--success) ;
}

.discount-value {
  color: var(--success) ;
  font-weight: 700 ;
}

.final-total-row {
  background: var(--success-light) ;
  border-top: 2px solid var(--success) ;
}

.final-label {
  color: var(--success-dark) ;
  font-size: 1.1rem ;
}

.final-value {
  color: var(--success) ;
  font-size: 1.25rem ;
  font-weight: 700 ;
}

.upgrade-notice {
  margin-bottom: 2rem ;
}

.upgrade-payment-section {
  margin-top: 2rem ;
}

.promo-code-card {
  background: var(--white) ;
  border: 1px solid var(--border-color) ;
  border-radius: 12px ;
  padding: 1.5rem ;
  height: 100% ;
  margin-bottom: 1.5rem ;
  display: flex ;
  flex-direction: column ;
}

.promo-header {
  margin-bottom: 1.5rem ;
  padding-bottom: 1rem ;
  border-bottom: 1px solid var(--border-color) ;
}

.promo-title {
  font-size: 1rem ;
  font-weight: 600 ;
  color: var(--heading-color) ;
  margin: 0 ;
  display: flex ;
  align-items: center ;
  gap: 0.75rem ;
}

.promo-title i {
  color: var(--warning) ;
}

.promo-input-section {
  margin-bottom: 1.5rem ;
  flex: 1 ;
}

.promo-input {
  border: 1px solid var(--border-color) ;
  border-radius: 8px ;
  padding: 0.875rem 1rem ;
  font-size: 0.95rem ;
  transition: border-color 0.3s ;
}

.promo-input:focus {
  border-color: var(--primary) ;
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1) ;
}

.promo-input:disabled {
  background-color: var(--gray-light) ;
  color: var(--text-muted) ;
}

.promo-submit-section {
  margin-top: auto ;
}

.promo-btn {
  display: flex ;
  align-items: center ;
  justify-content: center ;
  gap: 0.75rem ;
}

.payment-method-card {
  background: var(--white) ;
  border: 1px solid var(--border-color) ;
  border-radius: 12px ;
  padding: 1.5rem ;
  height: 100% ;
  display: flex ;
  flex-direction: column ;
}

.payment-header {
  margin-bottom: 1.5rem ;
  padding-bottom: 1rem ;
  border-bottom: 1px solid var(--border-color) ;
}

.payment-title {
  font-size: 1rem ;
  font-weight: 700 ;
  color: var(--heading-color) ;
  display: flex ;
  align-items: center ;
  gap: 0.75rem ;
}

.payment-title i {
  color: var(--info) ;
}

.payment-selector {
  margin-bottom: 1.5rem ;
  flex: 1 ;
}

.payment-select {
  border: 1px solid var(--border-color) ;
  border-radius: 8px ;
  padding: 0.875rem 1rem ;
  font-size: 0.95rem ;
  transition: border-color 0.3s ;
}

.payment-select:focus {
  border-color: var(--primary) ;
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1) ;
}

.continue-section {
  margin-top: auto ;
}

.continue-btn {
  font-size: 1.1rem ;
  font-weight: 600 ;
  padding: 1rem 2rem ;
  border-radius: 8px ;
  display: flex ;
  align-items: center ;
  justify-content: center ;
  gap: 0.75rem ;
}

.payment-method-card,
.promo-code-card {
  min-height: 280px ;
}

@media (max-width: 768px) {
  .order-items-header,
  .order-item,
  .total-row {
    grid-template-columns: 1fr ;
    gap: 0.5rem ;
    text-align: center ;
  }
  
  .item-desc,
  .total-label {
    text-align: center ;
    justify-content: center ;
  }
  
  .upgrade-item,
  .config-change {
    flex-direction: column ;
    gap: 0.75rem ;
  }
  
  .upgrade-arrow {
    transform: rotate(90deg) ;
  }
  
  .promo-code-card,
  .payment-method-card {
    margin-bottom: 1.5rem ;
    height: auto ;
    min-height: auto ;
  }
  
  .continue-btn {
    font-size: 1rem ;
    padding: 0.875rem 1.5rem ;
  }
  
  .promo-btn {
    display: flex ;
    align-items: center ;
    justify-content: center ;
    gap: 0.75rem ;
  }
}



.label.status {
padding: 0.3rem 0.6rem ;
  border-radius: 5px ;
  font-size: 11px ;
  font-weight: 500 ;
}

.label.status-active {
  background: var(--success) ;
  color: var(--white) ;
}

.label.status-expired {
  background: var(--danger) ;
  color: var(--white) ;
}

.label.status-pending {
  background: var(--warning) ;
  color: var(--white) ;
}


.label.status-suspended {
  background: var(--warning) ;
  color: var(--white) ;
}

.label.status-terminated {
  background: var(--danger) ;
  color: var(--white) ;
}

.label.status-terminated {
  background: var(--danger) ;
  color: var(--white) ;
}
.label.status-paid {
  background: var(--success) ;
  color: var(--white) ;
}

.label.status-unpaid {
  background: var(--danger) ;
  color: var(--white) ;
}

.label.status-refunded {
  background: var(--gray) ;
  color: var(--white) ;
}

.label.status-fraud {
  background: var(--danger) ;
  color: var(--white) ;
}
.label.status-cancelled {
  background: var(--gray) ;
  color: var(--white) ;
}

.ticket-number {
  font-weight: 700 ;
  color: var(--primary) ;
  font-size: 13px ;
}

.ticket-subject {
  display: block ;
  margin-top: 4px ;
  color: var(--body-color) ;
  font-size: 14px ;
}

.border-left {
  border-left: 3px solid var(--primary) ;
  padding-left: 12px ;
  text-decoration: none ;
  display: block ;
  padding-right: 0 ;
  border-right: 0 ;
}



.tt-button-group {
  background: var(--white) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  padding: 1rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.tt-button-group .btn {
  border: 1px solid var(--border-color) !important;
  background: var(--white) !important;
  color: var(--body-color) !important;
  margin-right: 0.5rem !important;
  border-radius: 8px !important;
  padding: 0.75rem 1rem !important;
  font-size: 13px !important;
  transition: all 0.3s ease !important;
}

.tt-button-group .btn:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--white) !important;
}

.tt-button-group .btn i {
  margin-right: 0.5rem !important;
  font-size: 14px !important;
}


@media (max-width: 768px) {
  .tt-button-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    padding: 1rem !important;
  }
  
  .tt-button-group .btn,
  .tt-button-group .btn-group {
    width: 100% !important;
    margin: 0 !important;
  }
  
  .tt-button-group .btn {
    padding: 0.75rem !important;
    font-size: 13px !important;
    text-align: center !important;
  }
  
  .tt-button-group .btn i {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
  }
  
  .tt-button-group .dropdown-toggle {
    width: 100% !important;
  }
  
  .tt-button-group .dropdown-menu {
    width: 100% !important;
    left: 0 !important;
    right: auto !important;
  }
}

@media (max-width: 576px) {
  .tt-button-group {
    gap: 0.5rem !important;
    padding: 0.75rem !important;
  }
  
  .tt-button-group .btn {
    padding: 0.6rem !important;
    font-size: 12px !important;
  }
  
  .tt-button-group .btn i {
    margin-left: 0.4rem !important;
    font-size: 12px !important;
  }
}


/* =============================================================================
   إضافات جديدة فقط لصفحة النطاقات (لا تستبدل الموجود)
   ============================================================================= */

/* ===== تحسين حالة SSL فقط ===== */
.ssl-info {
  position: relative !important;
}


.ssl-inactive {
  opacity: 0.6 !important;
  filter: grayscale(1) !important;
}



/* ===== تحسين عرض حالة التجديد التلقائي ===== */
.autorenew-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

.autorenew-enabled {
  background: var(--success-light) !important;
  color: var(--success-dark) !important;
}

.autorenew-disabled {
  background: var(--danger-light) !important;
  color: var(--danger-dark) !important;
}


/* ===== تحسين Loading State ===== */
#tableLoading {
  padding: 3rem !important;
  background: var(--gray-light) !important;
  border-radius: 12px !important;
  margin: 2rem 0 !important;
}

#tableLoading i {
  font-size: 2rem !important;
  color: var(--primary) !important;
  margin-bottom: 1rem !important;
}

#tableLoading p {
  color: var(--text-muted) !important;
  font-size: 1.1rem !important;
  margin: 0 !important;
}

/* ===== تحسين للشاشات الصغيرة ===== */
@media (max-width: 768px) {

  
  .ssl-info img {
    width: 20px !important;
    height: 20px !important;
  }
}

@media (max-width: 576px) {
  /* إخفاء بعض الأعمدة في الشاشات الصغيرة جداً */
  #tableDomainsList thead th:nth-child(4),
  #tableDomainsList tbody td:nth-child(4) {
    display: none !important;
  }
}

.table-container {
  position: relative !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

#tableDomainsList tbody tr.selected {
  background: rgba(var(--primary-rgb), 0.1) !important;
  border-right: 3px solid var(--primary) !important;
}

.expiring-soon {
  background: var(--warning-light) !important;
  animation: pulse 2s infinite !important;
}

@keyframes pulse {
  0% {
    background-color: var(--warning-light);
  }
  50% {
    background-color: var(--warning);
    color: var(--white);
  }
  100% {
    background-color: var(--warning-light);
  }
}





/* =============================================================================
   DataTables Styles - English LTR Version
   ============================================================================= */

/* ===== General Settings ===== */
table.dataTable {
  border-collapse: collapse !important;
}

.dataTables_wrapper table.table-list {
  border: 1px solid var(--border-color);
}

/* ===== Top Filters Design ===== */
.tld-filters a.badge-secondary {
  background-color: var(--gray-light);
  padding: 6px 12px;
  color: var(--body-color);
}

.tld-filters a.badge-secondary:focus,
.tld-filters a.badge-secondary:hover {
  background-color: var(--gray-light);
  color: var(--body-color) !important;
  box-shadow: none;
}

.tld-filters a.badge-secondary.badge-success {
  background-color: var(--primary);
  color: var(--primary-light) !important;
}

/* ===== Main Table Design ===== */
table.table-list tbody td {
  font-size: 13px;
  line-height: 19px;
  color: var(--body-color);
  transition: all 0.3s ease-in-out;
  font-family: var(--font-family-english);
}

table.table-list tbody td:not(:first-of-type) {
  text-align: center;
}

table.table-list tbody td:first-of-type {
  font-size: 14px;
  font-weight: 500;
}

.table-list > tbody > tr > td a.border-left {
  text-align: left;
  color: var(--body-color);
  padding-right: 0;
  padding-left: 20px;
  border: none;
}

.table-list > tbody > tr:hover > td {
  background-color: var(--primary-light);
}

table.table-list tbody td small {
  display: block;
  font-size: 11px !important;
  line-height: initial;
  opacity: 0.9;
}

/* ===== Table Header Design ===== */
.dataTables_wrapper table.table-list thead th {
  font-family: var(--font-family-english);
  border-bottom: 0;
  background-color: var(--gray-light);
  font-weight: 500;
  color: var(--body-color);
  font-size: 13px;
}

.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc {
  background-color: var(--gray-light);
}

/* ===== تجاوز CSS الافتراضي لـ WHMCS DataTables ===== */
/* الحفاظ على الأسهم الافتراضية وتحسينها */
table.dataTable thead > tr > td.sorting,
table.dataTable thead > tr > td.sorting_asc,
table.dataTable thead > tr > td.sorting_asc_disabled,
table.dataTable thead > tr > td.sorting_desc,
table.dataTable thead > tr > td.sorting_desc_disabled,
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_asc_disabled,
table.dataTable thead > tr > th.sorting_desc,
table.dataTable thead > tr > th.sorting_desc_disabled {
  position: relative !important;
  padding-right: 26px !important;
  background-image: none !important;
  cursor: pointer !important;
}

/* تحسين الأسهم الافتراضية - للأعمدة غير المرتبة */
table.dataTable thead > tr > td.sorting::before,
table.dataTable thead > tr > th.sorting::before {
  bottom: 50% !important;
  right: 10px !important;
  content: "▲" !important;
  position: absolute !important;
  display: block !important;
  opacity: 0.3 !important;
  font-size: 10px !important;
  line-height: 9px !important;
  color: #999 !important;
}

table.dataTable thead > tr > td.sorting::after,
table.dataTable thead > tr > th.sorting::after {
  top: 50% !important;
  right: 10px !important;
  content: "▼" !important;
  position: absolute !important;
  display: block !important;
  opacity: 0.3 !important;
  font-size: 10px !important;
  line-height: 9px !important;
  color: #999 !important;
}

/* للأعمدة المرتبة تصاعدياً */
table.dataTable thead > tr > td.sorting_asc::before,
table.dataTable thead > tr > th.sorting_asc::before {
  bottom: 50% !important;
  right: 10px !important;
  content: "▲" !important;
  position: absolute !important;
  display: block !important;
  opacity: 1 !important;
  font-size: 12px !important;
  line-height: 9px !important;
  color: var(--primary, #007bff) !important;
  font-weight: bold !important;
}

table.dataTable thead > tr > td.sorting_asc::after,
table.dataTable thead > tr > th.sorting_asc::after {
  display: none !important;
}

/* للأعمدة المرتبة تنازلياً */
table.dataTable thead > tr > td.sorting_desc::before,
table.dataTable thead > tr > th.sorting_desc::before {
  display: none !important;
}

table.dataTable thead > tr > td.sorting_desc::after,
table.dataTable thead > tr > th.sorting_desc::after {
  top: 50% !important;
  right: 10px !important;
  content: "▼" !important;
  position: absolute !important;
  display: block !important;
  opacity: 1 !important;
  font-size: 12px !important;
  line-height: 9px !important;
  color: var(--primary, #007bff) !important;
  font-weight: bold !important;
}

/* ===== Domain Form Settings ===== */
#domainForm .btn-group.tt-button-group {
  width: 100%;
}

#domainForm .btn-group.tt-button-group .btn-group .dropdown-menu {
  padding: 0;
  /* For English LTR */
  right: auto !important;
  left: 0 !important;
}

#domainForm .btn-group.tt-button-group .btn-group .dropdown-menu .dropdown-item {
  font-size: 13px;
}

/* ===== Specific Tables Design ===== */
#tableDomainsList,
#tableServicesList,
#tableTicketsList,
#tableInvoicesList {
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

#tableDomainsList thead th,
#tableServicesList thead th,
#tableTicketsList thead th,
#tableInvoicesList thead th {
  background: var(--primary-lighter) !important;
  border: none !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 1rem !important;
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  font-size: 14px !important;
}

#tableDomainsList tbody td,
#tableServicesList tbody td,
#tableTicketsList tbody td,
#tableInvoicesList tbody td {
  padding: 1rem !important;
  border: none !important;
  border-bottom: 1px solid var(--border-color) !important;
  vertical-align: middle !important;
  background: transparent !important;
}

#tableDomainsList tbody tr,
#tableServicesList tbody tr,
#tableTicketsList tbody tr,
#tableInvoicesList tbody tr {
  transition: background-color 0.5s ease !important;
}

#tableDomainsList tbody tr:hover,
#tableServicesList tbody tr:hover,
#tableTicketsList tbody tr:hover,
#tableInvoicesList tbody tr:hover {
  background: var(--primary-light) !important;
  cursor: pointer !important;
}

/* ===== DataTables Wrapper Settings ===== */
div.dataTables_wrapper,
#tableDomainsList_wrapper,
#tableServicesList_wrapper,
#tableTicketsList_wrapper,
#tableInvoicesList_wrapper,
.dataTables_wrapper {
  font-family: var(--font-family-english) !important;
  position: relative !important;
}

/* ===== List Container Design ===== */
div.dataTables_wrapper .listtable {
  align-items: center !important;
  margin-bottom: 1rem !important;
  background: var(--white) !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

/* ===== Search Box Design ===== */
div.dataTables_wrapper .listtable .dataTables_filter {
  flex: 0 1 300px !important;
  margin: 0 !important;
  float: none !important;
  position: relative !important;
  padding: 1rem 1.25rem !important;
}

div.dataTables_wrapper .listtable .dataTables_filter label {
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  display: block !important;
}

div.dataTables_wrapper .listtable .dataTables_filter label::after {
  content: "\f002" !important;
  font-family: "FontAwesome", "Font Awesome 5 Free", "Font Awesome 5 Pro" !important;
  font-weight: 900 !important;
  position: absolute !important;
  right: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--text-muted) !important;
  z-index: 15 !important;
  pointer-events: none !important;
}

div.dataTables_wrapper .listtable .dataTables_filter input {
  width: 100% !important;
  padding: 0.75rem 45px 0.75rem 1rem !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  background: var(--white) !important;
  transition: all 0.3s ease !important;
  margin: 0 !important;
  height: 45px !important;
  background-image: none !important;
}

div.dataTables_wrapper .listtable .dataTables_filter input:focus {
  border-color: var(--primary) !important;
  outline: none !important;
}

/* ===== Hide Unwanted Elements ===== */
div.dataTables_wrapper .dataTables_info,
.dataTables_info {
  display: none !important;
}

div.dataTables_wrapper .dataTables_filter:not(.listtable .dataTables_filter) {
  display: none !important;
}

/* ===== Bottom Controls Design ===== */
div.dataTables_wrapper .dataTables_length,
div.dataTables_wrapper .dataTables_paginate {
  position: static !important;
  margin: 1rem 0 !important;
  float: none !important;
  background: transparent !important;
  display: inline-block !important;
}

div.dataTables_wrapper .dataTables_length {
  float: left !important;
}

div.dataTables_wrapper .dataTables_paginate {
  float: right !important;
}

/* Items per page dropdown */
div.dataTables_wrapper .dataTables_length label {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  white-space: nowrap !important;
}

div.dataTables_wrapper .dataTables_length label .form-control {
  padding: 0.25rem 0.5rem 0.25rem 0.5rem !important; 
}

div.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
  padding: 0.5rem 0.75rem !important;
  background: var(--white) !important;
  font-size: 14px !important;
  min-width: 80px !important;
}

/* ===== Pagination Buttons Design ===== */
div.dataTables_wrapper .dataTables_paginate .pagination {
  margin: 0 !important;
  display: flex !important;
  gap: 0.25rem !important;
}

div.dataTables_wrapper .dataTables_paginate .page-link {
  background: var(--white) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--body-color) !important;
  padding: 0.6rem 0.9rem !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  min-width: 45px !important;
  text-align: center !important;
}

div.dataTables_wrapper .dataTables_paginate .page-link:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--white) !important;
}

div.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--white) !important;
}

div.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
  background: var(--gray-light) !important;
  border-color: var(--border-color) !important;
  color: var(--text-muted) !important;
  cursor: not-allowed !important;
}

/* Clear floats */
div.dataTables_wrapper::after {
  content: "" !important;
  display: table !important;
  clear: both !important;
}

/* =============================================================================
   Responsive Design
   ============================================================================= */

@media (max-width: 768px) {
  .ticket-number {
    font-size: 14px !important;
  }
  
  .ticket-subject {
    font-size: 15px !important;
    margin-top: 6px !important;
    line-height: 1.3 !important;
  }
  
  .border-left {
    border-left-width: 2px !important;
    padding-left: 16px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  #tableDomainsList,
  #tableServicesList,
  #tableTicketsList,
  #tableInvoicesList {
    font-size: 14px !important;
  }

  #tableDomainsList thead th,
  #tableServicesList thead th,
  #tableTicketsList thead th,
  #tableInvoicesList thead th {
    padding: 1rem 0.4rem !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    position: relative !important;
    white-space: nowrap !important;
  }

  #tableDomainsList tbody td,
  #tableServicesList tbody td,
  #tableTicketsList tbody td,
  #tableInvoicesList tbody td {
    padding: 1rem 0.4rem !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
  
  .label.status {
    padding: 0.4rem 0.6rem !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }
  
  /* Sorting arrows for small screens */
  table.dataTable thead .sorting,
  table.dataTable thead .sorting_asc,
  table.dataTable thead .sorting_desc {
    position: relative !important;
    padding-right: 22px !important;
  }

  /* تعديل الأسهم للشاشات الصغيرة */
  table.dataTable thead > tr > td.sorting::before,
  table.dataTable thead > tr > td.sorting::after,
  table.dataTable thead > tr > th.sorting::before,
  table.dataTable thead > tr > th.sorting::after {
    right: 8px !important;
    font-size: 9px !important;
  }

  table.dataTable thead > tr > td.sorting_asc::before,
  table.dataTable thead > tr > td.sorting_desc::after,
  table.dataTable thead > tr > th.sorting_asc::before,
  table.dataTable thead > tr > th.sorting_desc::after {
    right: 8px !important;
    font-size: 10px !important;
  }

  /* Search box adjustments */
  div.dataTables_wrapper .listtable .dataTables_filter {
    padding: 1rem !important;
  }

  div.dataTables_wrapper .listtable .dataTables_filter input {
    padding: 0.875rem 45px 0.875rem 1rem !important;
    height: 48px !important;
    font-size: 15px !important;
  }

  /* Controls adjustments */
  div.dataTables_wrapper .dataTables_length label {
    font-size: 13px !important;
  }

  div.dataTables_wrapper .dataTables_length select {
    padding: 0.6rem 0.75rem !important;
    font-size: 13px !important;
    min-width: 70px !important;
  }

  div.dataTables_wrapper .dataTables_paginate .page-link {
    padding: 0.7rem 0.8rem !important;
    font-size: 13px !important;
    min-width: 40px !important;
  }

  .table-container {
    margin: 0 -1rem !important;
    padding: 0 1rem !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  div.dataTables_wrapper {
    padding-bottom: 70px !important;
  }

  div.dataTables_wrapper .dataTables_length,
  div.dataTables_wrapper .dataTables_paginate {
    margin: 1.5rem 0 !important;
  }
}

@media (max-width: 576px) {
  .ticket-number {
    font-size: 13px !important;
  }
  
  .ticket-subject {
    font-size: 14px !important;
    margin-top: 5px !important;
  }

  #tableDomainsList thead th,
  #tableServicesList thead th,
  #tableTicketsList thead th,
  #tableInvoicesList thead th {
    padding: 1rem 0.25rem !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #tableDomainsList tbody td,
  #tableServicesList tbody td,
  #tableTicketsList tbody td,
  #tableInvoicesList tbody td {
    padding: 0.75rem!important;
    font-size: 12px !important;
  }

  .label.status {
    padding: 0.3rem 0.5rem !important;
    font-size: 9px !important;
  }

  table.dataTable thead .sorting,
  table.dataTable thead .sorting_asc,
  table.dataTable thead .sorting_desc {
    position: relative !important;
    padding-right: 20px !important;
  }

  table.dataTable thead > tr > td.sorting::before,
  table.dataTable thead > tr > td.sorting::after,
  table.dataTable thead > tr > th.sorting::before,
  table.dataTable thead > tr > th.sorting::after {
    right: 6px !important;
    font-size: 8px !important;
  }

  table.dataTable thead > tr > td.sorting_asc::before,
  table.dataTable thead > tr > td.sorting_desc::after,
  table.dataTable thead > tr > th.sorting_asc::before,
  table.dataTable thead > tr > th.sorting_desc::after {
    right: 6px !important;
    font-size: 9px !important;
  }

  div.dataTables_wrapper .listtable .dataTables_filter input {
    padding: 0.75rem 40px 0.75rem 1rem !important;
    height: 45px !important;
    font-size: 14px !important;
  }

  div.dataTables_wrapper .dataTables_paginate .page-link {
    padding: 0.6rem 0.7rem !important;
    font-size: 12px !important;
    min-width: 35px !important;
  }
}

/* =============================================================================
   Mobile Tables Optimization - Hide one column only for better UX
   ============================================================================= */

@media (max-width: 576px) {
  
  /* Domains - Hide registration date column only (keeps 5 columns) */
  #tableDomainsList thead th:nth-child(4),
  #tableDomainsList tbody td:nth-child(4) {
    display: none !important;
  }
  
  /* Services - Hide SSL column only (first column) */
  #tableServicesList thead th:nth-child(1),
  #tableServicesList tbody td:nth-child(1) {
    display: none !important;
  }
  
  /* Tickets - Hide department column only */
  #tableTicketsList thead th:nth-child(1),
  #tableTicketsList tbody td:nth-child(1) {
    display: none !important;
  }
  
  /* Affiliates - Hide two middle columns */
  #tableAffiliatesList thead th:nth-child(2),
  #tableAffiliatesList tbody td:nth-child(2),
  #tableAffiliatesList thead th:nth-child(3),
  #tableAffiliatesList tbody td:nth-child(3) {
    display: none !important;
  }
  
  /* Invoices - Hide payment method column only */
  #tableInvoicesList thead th:nth-child(2),
  #tableInvoicesList tbody td:nth-child(2) {
    display: none !important;
  }
  
  /* Text optimization for small screens */
  #tableDomainsList tbody td,
  #tableServicesList tbody td,
  #tableTicketsList tbody td,
  #tableInvoicesList tbody td {
    padding: 0.75rem 0.25rem !important;
    font-size: 12px !important;
  }
  
  .label.status {
    padding: 0.3rem 0.5rem !important;
    font-size: 9px !important;
  }
}
.tt-group-features-list li{
  width: 31% !important;
}
/*breadcrumb*/
.tt-breadcrumb{
  left: 15px;
  right: auto;
}
.tt-triangle-right{
  right: -59px;
  left: auto;
  border-right: 60px solid transparent;
}
/*login registration*/
#registration .prepend-icon .field{
  padding-right: 36px;
  padding-left: auto;
}

.tt-kb-search>*+* {
  margin-right: 15px;
}



.iq-body-wrapper {
	background: #F4F7FA;
}



.form-check-input,
.custom-control-input,
input[type="checkbox"] {
  accent-color: var(--primary) !important;
}

.form-check-input:checked,
.custom-control-input:checked {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.form-check-input:focus,
.custom-control-input:focus {
  border-color: var(--primary) !important;
}

.custom-control-input:checked~.custom-control-label::before {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e") !important;
}

input[type="checkbox"]:checked {
  accent-color: var(--primary) !important;
}

*[style*="background-color: #007bff"] {
  background-color: var(--primary) !important;
}

*[style*="border-color: #007bff"] {
  border-color: var(--primary) !important;
}





/* hide vieww more from home area*/
div[menuitemname="Active Products/Services"] .card-footer {
  display: none !important;
}

.md-editor .btn[data-handler="bootstrap-markdown-cmdPreview"] {
  font-size: 0 !important;
}

.md-editor .btn[data-handler="bootstrap-markdown-cmdPreview"] span {
  font-size: 14px !important;
    color: var(--white) !important;

}

.md-editor > textarea {
	  font-family: var(--font-family-english);
}




@media(min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media(min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media(min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media(min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

@media(min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

.add-funds-layout {
  display: grid !important;
  grid-template-columns: 1fr 450px 1fr !important;
  grid-template-areas: ". form limits" !important;
  gap: 2rem !important;
  align-items: start !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* النموذج في الوسط */
.add-funds-form-center {
  grid-area: form !important;
}

/* معلومات الحدود */
.add-funds-limits-side {
  grid-area: limits !important;
  max-width: 350px !important;
}

/* النموذج الرئيسي - shadow أقل */
.add-funds-form {
  border-radius: 16px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important; 
  border: 1px solid var(--border-color) !important;
  overflow: hidden !important;
  width: 100% !important;
}

.add-funds-form .card-body {
  padding: 3rem !important;
}

.add-funds-form .form-control-label {
  font-size: 16px !important;
  font-weight: 600 !important;
  margin-bottom: 0.75rem !important;
}

.add-funds-form .input-group-lg .form-control {
  font-size: 18px !important;
}

.add-funds-form .input-group-lg .input-group-text {
  font-size: 18px !important;
  padding: 1rem 1.25rem !important;
}

.add-funds-form .btn-lg {
  padding: 1.25rem 2rem !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}

.add-funds-form .card-footer {
  background: var(--gray-light) !important;
  border-top: 1px solid var(--border-color) !important;
  padding: 1.5rem !important;
}

.add-funds-limits-clean {
  padding: 2rem 1rem !important;
  height: 100% !important;
}

.limits-header {
  border-bottom: 2px solid var(--border-color) !important;
  padding-bottom: 1rem !important;
}

.limits-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  margin-bottom: 0.5rem !important;
}

.limits-subtitle {
  font-size: 14px !important;
  color: var(--body-color) !important;
}

.limits-list {
  margin-top: 2rem !important;
}

.limit-item {
  display: flex !important;
  align-items: center !important;
  padding: 1.5rem 0 !important;
  border-bottom: 1px solid var(--border-color) !important;
  transition: all 0.3s ease !important;
}

.limit-item:last-child {
  border-bottom: none !important;
}

.limit-item:hover {
  background: rgba(29, 175, 187, 0.03) !important;
  border-radius: 8px !important;
  padding-left: 0.3rem !important;
  padding-right: 0.3rem !important;
}

/* أيقونات الحدود - أصغر وبدون تدرج */
.limit-icon-clean {
  width: 38px !important; /* أصغر */
  height: 38px !important; /* أصغر */
  background: var(--primary) !important; /* بدون تدرج */
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 1rem !important;
  flex-shrink: 0 !important;
}

.limit-icon-clean i {
  color: var(--white) !important;
  font-size: 14px !important; 
}

.limit-content {
  flex-grow: 1 !important;
}

.limit-label-clean {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--body-color) !important;
  margin-bottom: 0.25rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.limit-value-clean {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--heading-color) !important;
}

/* تحسينات للجوال */
@media (max-width: 991px) {
  .add-funds-layout {
    grid-template-columns: 1fr !important;
    grid-template-areas: 
      "form"
      "limits" !important;
    gap: 2rem !important;
  }
  
  .add-funds-form-center {
    max-width: 450px !important;
    justify-self: center !important;
  }
  
  .add-funds-limits-side {
    max-width: 450px !important;
    justify-self: center !important;
  }
  
  /* تبسيط الحدود للجوال - عرض أفقي */
  .limits-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  .limit-item {
    background: rgba(29, 175, 187, 0.02) !important;
    border: 1px solid rgba(29, 175, 187, 0.1) !important;
    border-radius: 12px !important;
    padding: 1rem !important;
    border-bottom: 1px solid rgba(29, 175, 187, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  
  .limit-item:hover {
    background: rgba(29, 175, 187, 0.05) !important;
  }
  
  .limit-icon-clean {
    margin-left: 0 !important;
    margin-right: 1rem !important;
  }
  
  .limit-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

@media (max-width: 768px) {
  .add-funds-form .card-body {
    padding: 2rem !important;
  }
  
  .add-funds-limits-clean {
    padding: 1.5rem 0.5rem !important;
  }
  
  .add-funds-form .input-group-lg .form-control,
  .add-funds-form .input-group-lg .input-group-text {
    font-size: 16px !important;
    padding: 0.875rem 1rem !important;
  }
  
  .add-funds-form .btn-lg {
    padding: 1rem 1.5rem !important;
    font-size: 16px !important;
  }
  
  .limit-icon-clean {
    width: 35px !important;
    height: 35px !important;
  }
  
  .limit-value-clean {
    font-size: 16px !important;
  }
  
  .limits-title {
    font-size: 18px !important;
  }
  
  .add-funds-layout {
    gap: 1rem !important;
  }
}
.add-funds-form .input-group {
  border-radius: 8px !important;
  overflow: hidden !important;
  transition: var(--transition-normal) !important;
  border: 1px solid var(--border-color) !important;
}

.add-funds-form .input-group:focus-within {
  border-color: var(--primary) !important;
}

.add-funds-form .input-group-text {
  background: var(--primary-light) !important;
  border: none !important;
  color: var(--primary) !important;
  width: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.add-funds-form .input-group {
  border-radius: 8px ;
  transition: var(--transition-normal) ;
  border: 1px solid var(--border-color);
}

 .input-group-text {
  background: var(--primary-light) ;
  color: var(--primary) ;
}


.add-funds-form .input-group .form-control {
  border: none !important;
  background: var(--white) !important;
}

.add-funds-form .input-group .form-control:focus {
  border: none !important;
  box-shadow: none !important;
  background: var(--white) !important;
}

.add-funds-form .form-control-label {
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  margin-bottom: 0.5rem !important;
  font-size: 14px !important;
}


.cancel-form-section {
  margin-bottom: 2rem !important;
}

.cancel-form-section .form-group {
  margin-bottom: 1.5rem !important;
}

.cancel-form-section label {
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  margin-bottom: 0.75rem !important;
  font-size: 14px !important;
}

.cancel-domain-warning {
  border-radius: 8px !important;
  margin: 1.5rem 0 !important;
}

.cancel-domain-warning .form-check {
  margin-top: 1rem !important;
}

.cancel-actions {
  display: flex !important;
  gap: 0.75rem !important;
  flex-wrap: wrap !important;
  margin-top: 1.5rem !important;
}

.cancel-back-link {
  margin-top: 1rem !important;
}

@media (max-width: 768px) {
  .cancel-actions {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
}

.section-title {
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  color: var(--heading-color) !important;
  margin: 0 0 1.5rem 0 !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 2px solid var(--border-color) !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}
.section-title::before {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 60px !important;
  height: 2px !important;
  background: var(--primary) !important;
}
.section-title i {
  color: var(--primary) !important;
  font-size: 1rem !important;
}
.section-description {
  color: var(--body-color) !important;
  margin-bottom: 2rem !important;
  line-height: 1.6 !important;
  font-size: 0.95rem !important;
}
.section-title-sm {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--heading-color) !important;
}
.section-title-lg {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: var(--heading-color) !important;
  margin: 0 0 2rem 0 !important;
  padding-bottom: 1rem !important;
  border-bottom: 3px solid var(--primary) !important;
}
@media (max-width: 768px) {
  .section-title {
    font-size: 1.1rem !important;
    margin-bottom: 1.25rem !important;
  }

  .section-title-lg {
    font-size: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
}






.custom-validation-message {
    background: var(--primary);
    color: var(--white);
    padding: 10px 15px;
    border-radius: var(--custom-radius);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    max-width: 250px;
    word-wrap: break-word;
    line-height: 1.4;
    transition: var(--transition-fast);
    position: relative;
}

.custom-validation-message::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 20px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--primary);
}

.custom-validation-message.arrow-down::before {
    top: auto;
    bottom: -6px;
    border-bottom: none;
    border-top: 6px solid var(--primary);
}


.tooltip {
   font-size: 13px !important;
}

.tooltip .tooltip-inner {
   background: var(--primary) !important;
   color: var(--white) !important;
   padding: 8px 12px !important;
   border-radius: var(--custom-radius) !important;
   font-weight: 500 !important;
   max-width: 200px !important;
   line-height: 1.4 !important;
   border: none !important;
}

.tooltip.bs-tooltip-top .arrow::before {
   border-top-color: var(--primary-bright) !important;
}

.tooltip.bs-tooltip-bottom .arrow::before {
   border-bottom-color: var(--primary-bright) !important;
}

.tooltip.bs-tooltip-left .arrow::before {
   border-left-color: var(--primary-bright) !important;
}

.tooltip.bs-tooltip-right .arrow::before {
   border-right-color: var(--primary-bright) !important;
}

.iq-new-content {
    font-family: var(--font-family-sans-serif);
    line-height: 1.7;
    color: var(--body-color);
    font-size: 16px;
}

.iq-new-content p {
    margin-bottom: 1.25rem;
    color: var(--text-color);
    line-height: 1.75;
}

.iq-new-content p:last-child {
    margin-bottom: 0;
}

.iq-new-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--custom-radius-lg);
    margin: 1.5rem 0;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
    border: 1px solid var(--border-light-color);
}

.iq-new-content strong,
.iq-new-content b {
    font-weight: 600;
    color: var(--heading-color);
}

.iq-new-content a {
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: var(--transition-fast);
}

.iq-new-content a:hover {
    color: var(--primary-dark);
    border-bottom-color: var(--primary-subtle);
    text-decoration: none;
}

.iq-new-content ul,
.iq-new-content ol {
    margin: 1.25rem 0;
    padding-right: 2rem;
}

.iq-new-content li {
    margin-bottom: 0.5rem;
    color: var(--text-color);
    line-height: 1.6;
}

.iq-new-content ul li::marker {
    color: var(--primary);
}

.iq-new-content blockquote {
    background: var(--primary-lighter);
    border-right: 4px solid var(--primary);
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    border-radius: var(--custom-radius);
    font-style: italic;
    color: var(--text-dark);
}

.iq-new-content code {
    background: var(--gray-light);
    color: var(--danger);
    padding: 0.25rem 0.5rem;
    border-radius: var(--custom-radius-sm);
    font-family: var(--font-family-monospace);
    font-size: 0.875rem;
    border: 1px solid var(--border-light-color);
}

.iq-new-content h1,
.iq-new-content h2,
.iq-new-content h3,
.iq-new-content h4,
.iq-new-content h5,
.iq-new-content h6 {
    color: var(--heading-color);
    font-weight: 600;
    margin: 2rem 0 1rem 0;
    line-height: 1.3;
}

.iq-new-content h1 {
    font-size: 2rem;
    border-bottom: 2px solid var(--primary-subtle);
    padding-bottom: 0.75rem;
}

.iq-new-content h2 {
    font-size: 1.75rem;
    border-right: 4px solid var(--primary);
    padding-right: 1rem;
}

.iq-new-content h3 {
    font-size: 1.5rem;
    color: var(--primary-dark);
}

.iq-new-content h4 {
    font-size: 1.25rem;
    color: var(--primary);
    margin: 1.5rem 0 1rem 0;
}

.iq-new-content h5 {
    font-size: 1.125rem;
    color: var(--heading-color);
}

.iq-new-content h6 {
    font-size: 1rem;
    color: var(--text-dark);
}
.iq-new-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    background: var(--white);
    border-radius: var(--custom-radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.iq-new-content th,
.iq-new-content td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-light-color);
}

.iq-new-content th {
    background: var(--primary-light);
    color: var(--heading-color);
    font-weight: 600;
}

.iq-new-content tr:hover {
    background: var(--gray-light);
}

.iq-new-content br + br {
    display: block;
    margin: 0.2rem 0;
    content: "";
}

.iq-new-content p:empty {
    display: none;
}

.iq-new-content hr {
    border: none;
    height: 2px;
    background: var(--border-light-color);
    margin: 2rem 0;
    border-radius: var(--custom-radius-pill);
}

.iq-new-content mark {
    background: var(--warning-light);
    color: var(--warning-dark);
    padding: 0.125rem 0.25rem;
    border-radius: var(--custom-radius-sm);
}

.iq-new-content pre {
    background: var(--dark);
    color: var(--white);
    padding: 1rem;
    border-radius: var(--custom-radius);
    overflow-x: auto;
    margin: 1.5rem 0;
    border: 1px solid var(--border-color);
}

.iq-new-content pre code {
    background: transparent;
    color: inherit;
    border: none;
    padding: 0;
}

@media (max-width: 768px) {
    .iq-new-content {
        font-size: 15px;
    }
    
    .iq-new-content img {
        margin: 1rem 0;
    }
    
    .iq-new-content h1 {
        font-size: 1.75rem;
    }
    
    .iq-new-content h2 {
        font-size: 1.5rem;
        padding-right: 0.75rem;
    }
    
    .iq-new-content ul,
    .iq-new-content ol {
        padding-right: 1.5rem;
    }
    
    .iq-new-content blockquote {
        padding: 0.75rem 1rem;
    }
}


.kb-article-content {
    font-family: var(--font-family-sans-serif);
    line-height: 1.7;
    color: var(--body-color);
    font-size: 16px;
}

.kb-article-content p {
    margin-bottom: 1.25rem;
    color: var(--text-color);
    line-height: 1.75;
}

.kb-article-content p:last-child {
    margin-bottom: 0;
}

.kb-article-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--custom-radius-lg);
    margin: 1.5rem 0;
    transition: var(--transition-normal);
    border: 1px solid var(--border-light-color);
}

.kb-article-content img:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.kb-article-content strong,
.kb-article-content b {
    font-weight: 600;
    color: var(--heading-color);
}

.kb-article-content a {
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: var(--transition-fast);
}

.kb-article-content a:hover {
    color: var(--primary-dark);
    border-bottom-color: var(--primary-subtle);
    text-decoration: none;
}

.kb-article-content ul,
.kb-article-content ol {
    margin: 1.25rem 0;
    padding-right: 2rem;
}

.kb-article-content li {
    margin-bottom: 0.5rem;
    color: var(--text-color);
    line-height: 1.6;
}

.kb-article-content ul li::marker {
    color: var(--primary);
}

.kb-article-content blockquote {
    background: var(--info-light);
    border-right: 4px solid var(--info);
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    border-radius: var(--custom-radius);
    color: var(--text-dark);
}

.kb-article-content code {
    background: var(--gray-light);
    color: var(--danger);
    padding: 0.25rem 0.5rem;
    border-radius: var(--custom-radius-sm);
    font-family: var(--font-family-monospace);
    font-size: 0.875rem;
    border: 1px solid var(--border-light-color);
}

.kb-article-content pre {
    background: var(--dark);
    color: var(--white);
    padding: 1rem;
    border-radius: var(--custom-radius);
    overflow-x: auto;
    margin: 1.5rem 0;
    border: 1px solid var(--border-color);
    position: relative;
}

.kb-article-content pre code {
    background: transparent;
    color: inherit;
    border: none;
    padding: 0;
}

.kb-article-content .code-block {
    background: var(--dark);
    color: var(--white);
    padding: 1rem;
    border-radius: var(--custom-radius);
    margin: 1rem 0;
    font-family: var(--font-family-monospace);
    font-size: 0.875rem;
    border: 1px solid var(--border-color);
    line-height: 1.5;
}

.kb-article-content .code-block strong,
.kb-article-content .code-block b {
    color: var(--primary);
    font-weight: 600;
}

.kb-article-content h1,
.kb-article-content h2,
.kb-article-content h3,
.kb-article-content h4,
.kb-article-content h5,
.kb-article-content h6 {
    color: var(--heading-color);
    font-weight: 600;
    margin: 2rem 0 1rem 0;
    line-height: 1.3;
}

.kb-article-content h1 {
    font-size: 2rem;
    border-bottom: 2px solid var(--info-subtle);
    padding-bottom: 0.75rem;
}

.kb-article-content h2 {
    font-size: 1.75rem;
    border-right: 4px solid var(--info);
    padding-right: 1rem;
}

.kb-article-content h3 {
    font-size: 1.5rem;
    color: var(--info-dark);
}

.kb-article-content h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--info-dark);
    margin: 1.5rem 0 1rem 0;
}

.kb-article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    background: var(--white);
    border-radius: var(--custom-radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.kb-article-content th,
.kb-article-content td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-light-color);
}

.kb-article-content th {
    background: var(--info-light);
    color: var(--heading-color);
    font-weight: 600;
}

.kb-article-content tr:hover {
    background: var(--gray-light);
}

.kb-article-content br + br {
    display: block;
    margin: 0.2rem 0;
    content: "";
}

.kb-article-content p:empty {
    display: none;
}

.kb-article-content hr {
    border: none;
    height: 2px;
    background: var(--border-light-color);
    margin: 2rem 0;
    border-radius: var(--custom-radius-pill);
}

.kb-article-content mark {
    background: var(--warning-light);
    color: var(--warning-dark);
    padding: 0.125rem 0.25rem;
    border-radius: var(--custom-radius-sm);
}

.kb-article-content .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: var(--info);
    color: var(--white);
    border-radius: 50%;
    font-weight: 600;
    font-size: 0.875rem;
    margin-right: 0.5rem;
}

.kb-article-content .note {
    background: var(--info-light);
    border: 1px solid var(--info-subtle);
    border-radius: var(--custom-radius);
    padding: 1rem;
    margin: 1.5rem 0;
}

.kb-article-content .warning {
    background: var(--warning-light);
    border: 1px solid var(--warning-subtle);
    border-radius: var(--custom-radius);
    padding: 1rem;
    margin: 1.5rem 0;
}

.kb-article-content .danger {
    background: var(--danger-light);
    border: 1px solid var(--danger-subtle);
    border-radius: var(--custom-radius);
    padding: 1rem;
    margin: 1.5rem 0;
}

/* responsive */
@media (max-width: 768px) {
    .kb-article-content {
        font-size: 15px;
    }
    
    .kb-article-content img {
        margin: 1rem 0;
    }
    
    .kb-article-content h1 {
        font-size: 1.75rem;
    }
    
    .kb-article-content h2 {
        font-size: 1.5rem;
        padding-right: 0.75rem
    }
    
    .kb-article-content ul,
    .kb-article-content ol {
        padding-right: 1.5rem; 
    }
    
    .kb-article-content pre {
        font-size: 14px;
        padding: 0.75rem;
    }
}

.intl-tel-input input.form-control {
    padding-left: 95px !important;
}

.intl-tel-input.separate-dial-code input[type="tel"] {
    padding-left: 95px !important;
}

.intl-tel-input.separate-dial-code .selected-flag {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
}

.intl-tel-input.separate-dial-code .selected-dial-code {
    max-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input, .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type="tel"], .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type="text"] {
  padding-left: 95px !important;
}

.intl-tel-input.separate-dial-code .selected-flag {
  background: var(--primary-light) !important;
  display: table;
  border-radius: 8px 0 0 8px;

}
@media (max-width: 768px) {
.sidebar {
  margin-bottom: 2rem;
}
}