a, .a, .link{
    color:var(--text);
    text-decoration: solid underline var(--primary);
    border:2px solid transparent;
  }


button, .button, .btn{
    display: inline-block;
    /* display: flex;
    align-items: center;
    justify-content: center; */
    text-wrap: nowrap;
    width: fit-content;
    padding:.5em 1em;
    border:unset;
    border-radius: .5rem;
    font-weight: 600;
    color:white;
    background:var(--primary);
    border:2px solid transparent;
    text-decoration: none;
    opacity: 1;
    flex-shrink: 0;
    box-shadow: var(--bxs-0);
    position: relative;
  }




/* textarea */
textarea, .textarea {
  color:var(--text);
    display: block;
    width: 100%;
    height: 100%;
    border: var(--border-1);
    border-radius: var(--sp-000);
    padding: var(--sp-00);
    /* cursor:pointer; */
  }
  .textarea{
    display: flex;
    flex-direction: column;
  }
  
  .textarea-wrapper {
    width: 100%;
    height: 100%;
    resize: none;
    background: unset;
    border-radius: unset;
    border:unset;
    outline:unset;
    padding: unset;
    margin: unset;
    box-shadow: none;
  }
  .textarea-wrapper:focus-visible{
    border:unset;
    outline:unset;
  }
  
  .button-wrapper{
    background:unset;
    color:unset;
    text-decoration: none;
    font-weight: unset;
    border-radius: unset;
    padding:unset;
    box-shadow: none;
    width: unset;
    text-wrap: unset;
    display: unset;
    justify-content: unset;
    align-items: unset;
    text-align: unset;
  
  }
  
  .a-wrapper{
    color:unset;
    text-decoration: unset;
    box-shadow: unset;
  }
  
  button .button, input,select,textarea, .textarea, .badge-label, .file-upload {
      font-size: 1em;
      border-radius: var(--br-0);
      box-shadow: var(--bxs-00);
      padding:var(--rsp-00) var(--rsp-1);
      transition: all 500ms ease;
      color:white;
    }


button:hover:disabled, .button:hover:disabled, .btn:hover:disabled, input:hover:disabled {
    cursor: not-allowed;
  }
  





input[type="checkbox"],
input[type="color"],
input[type="date"],
input[type="datetime-local"],
input[type="file"],
input[type="hidden"],
input[type="image"],
input[type="month"],
input[type="radio"],
input[type="range"],
input[type="reset"],
input[type="submit"],
input[type="time"],
input[type="week"] {
  background:unset;
  border:unset;
  border-radius:unset;
  padding:unset;
  width:unset;
  max-width: unset;
  min-width: unset;
}


  /* normal chekcbox  */
input[type="checkbox"]:not(.switch) {
  appearance: none;
  width: 1.2em;
  height: 1.2em;
  border: 0.15em solid var(--text-grey);
  border-radius: 0.2em;
  margin-right: 0.5em;
  position: relative;
  top: 0.2em;
  transition: all 0.2s ease;
}

input[type="checkbox"]:not(.switch):checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

input[type="checkbox"]:not(.switch):checked::after {
  content: "✓";
  position: absolute;
  color: white;
  font-size: 1em;
  font-weight:900;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* Pure CSS switch with single input  and pseudo-elements switch */
  input[type="checkbox"].switch {
    --width:2.5em;
    --height:1.5em;
    --offset:.2em;
    --dot-size:calc(min(var(--height),var(--width)) - calc(2 * var(--offset)));
    /* border:2px solid transparent; */
    position: relative;
    appearance: none;
  width: var(--width);
    flex-shrink: 0;
    height: var(--height);
    background-color: var(--border-light);
    border-radius: 99999px;
    transition: background-color 0.3s;
    cursor: pointer;
    /* margin-left: var(--sp-1); */
    background:var(--bg-7);
}

input[type="checkbox"].switch:checked {
    background-color: var(--primary);
}

input[type="checkbox"].switch::before {
    top:var(--offset);
    left:var(--offset);
    content: "";
    position: absolute;
    width: var(--dot-size);
    height: var(--dot-size);
    flex-shrink:0;
    border-radius: 50%;
    background-color: white;
    transition: transform 0.3s;
}

input[type="checkbox"].switch:checked::before {
    transform: translateX(calc(var(--width) - 2 * var(--offset) - var(--dot-size)));
}

/* Radio  input*/
input[type="radio"] {
  appearance: none;
  width: 1.2em;
  height: 1.2em;
  border: 0.15em solid var(--text-grey);
  border-radius: 50%;
  margin-right: 0.5em;
  position: relative;
  top: 0.2em;
  transition: all 0.2s ease;
}

input[type="radio"]:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  width: 0.5em;
  height: 0.5em;
  background: white;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.btn-s-1{
  padding:.25em .5em;
}

.btn-t{
  box-shadow: unset;
  background: transparent;
  color:var(--text);
  font-weight: 400;
  padding:var(--sp-00);
  text-align: left;
}
.btn-t:hover{
  background:var(--t-20)
}

.icon-btn{
  height: 2em;
  padding:5%;
  width: 2em;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: unset;
}
.icon-btn-t{
    height: 2em;
  width: 2em;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:unset;
  background:transparent;
  color:var(--text-3);
  box-shadow: 0px 0px 0px black;
}
.icon-btn-t:hover{
  box-shadow: var(--bxs-1);
  background:var(--bg-4);
}

.err-btn{
  background: var(--error-bg);
  color: var(--error-text);
  border: 1px solid var(--error-border);
}

.success-btn{
  background: var(--success-bg, #e6f9ed);
  color: var(--success-text, #1a7f37);
  border: 1px solid var(--success-border, #b7ebc6);
}
.success-btn:hover{
  background: var(--success-bg-hover, #d2f5e3);
  color: var(--success-text-hover, #176c2c);
  border-color: var(--success-border-hover, #8fd8a7);
}




:root {
  scrollbar-color:var(--t-b-90) transparent;
  overflow: auto;
  scrollbar-width: thin;
  -ms-overflow-style: none;
}

:root::-webkit-scrollbar {
  width: 6px;
}

:root::-webkit-scrollbar-track {
  background: transparent;
  margin: 0;
}

:root::-webkit-scrollbar-thumb {
  background: var(--thumb, #888);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

select, input{
  color:var(--text);
  background:var(--bg);
  border:2px solid var(--bg-3);
  padding:var(--sp-00) var(--sp-0);
  border-radius: var(--br-0);
  box-shadow: var(--bxs-1);
}

.modal{
  width: 60rem;
  max-width: 100%;
  min-height: 30rem;
  background:var(--bg);
  border-radius: var(--br-1);
  padding:var(--sp-2);
}

/* Code Block Base Styling */
pre {
    margin: var(--sp-0) 0;
    border-radius: var(--br-0);
    overflow: hidden;
    background: var(--bg-4);
    box-shadow: var(--bxs-1);
    border: 1px solid var(--bg-5);
}

code {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: var(--fs-00);
    line-height: 1.5;
}

pre code {
    display: block;
    padding: var(--sp-0);
    overflow-x: auto;
    background: transparent;
    color: var(--text);
}

/* Inline code */
:not(pre) > code {
    background: var(--bg-3);
    padding: var(--sp-000) var(--sp-00);
    border-radius: var(--br-0);
    font-size: 0.9em;
    border: 1px solid var(--bg-5);
}


/* Hover effects */
.mega-hover{
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 300ms ease, box-shadow 300ms ease;
  }
  .mega-hover:hover, .mega-hover:focus-visible{
      transform: scale(1.05);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(0, 0, 0, 0.15);
  }