@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap);
/* google fonts */

/*  css variables */
:root {
  --color-131921: #131921;
  --color-000000: #000000;
  --color-ffffff: #ffffff;
  --color-3b4149: #3b4149;
  --color-8491a3: #938f8f;
  --color-febd69: #febd69;
  --color-232f3e: #232f3e;
  --color-0fea8f: #0fea8f;
  --color-C22026: #c22026;
  --color-968686: #888888;
  --color-bf4800: #bf4800;
  --color-1c1c1b: #1c1c1b;
  --card-bg-01: #fdefe6;
  --card-bg-02: #d6e5fb;
  --card-bg-03: #ceebe9;
  --card-bg-04: #e2f2b2;
  --primary-color: #0a1d37;
  --secondary-color: #ffffff;
  --hero-bg: #d6e5fb;
  --hero-blue-bg: #eff5fe;
  --heading-fontSize: 2rem;
  --msc-card-radius: 12px;
  --msc-transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --small-text-color: #999;
  --heading-text-color: #0a1d37;
  --theme-primary: #005bb3;
  --theme-light: #337fd3;
  --theme-lighter: #80a8d8;
  --theme-lighter-plus: #c3daf5;
  --theme-dark: #00468c;
  --theme-deep: #104f8f;
  --theme-letters: #005bb3;
  --overly-bg: #00000080;
  --button-bg-active: #00468c;
  --delete-button-bg: #d32f2f;
  --delete-button-bg-hover: #ef5350;
  --approve-button-bg: #388e3c;
  --light-approve-button-bg: #61e367;
  --approve-button-bg-hover: #4caf50;
  --text-primary: #212529;
  --text-secondary: #495057;
  --text-tertiary: #6c757d;
  --letters: #1a1a1a;
  --letters-sub: #6c757d;
  --site-bg: #fff;
  --beige-bg: #cce5fa;
  --button-text: #333;
  --theme-shadow: #005bb333;
  --theme-shadow-hover: #337fd391;
  --white: #ffffff;
  --theme-border: #38506561;
  --button-bg: #005bb3;
  --button-bg-hover: #337fd3;
  --warning-button-bg: #eba800;
  --yellow-button-bg: #ffd000;
  --gray-button-bg: #f1f3f5;
  --gray-button-border: #ced0e3;
  --gray-button-hover: #e2e6ea;
  --dc-amber: #f59e0b;
  --dc-amber-dark: #b45309;
  --dc-slate: #64748b;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* font-family: "Montserrat", sans-serif; */
  font-family: "Open Sans", sans-serif;
  background: #fff !important;
  background: var(--site-bg) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  padding: 0;
  margin: 0;
  color: #1a1a1a;
  color: var(--letters);
}

p {
  color: #6c757d;
  color: var(--letters-sub);
  font-size: 1rem;
}

h1,
h2 {
  font-size: 2rem;
  font-size: var(--heading-fontSize);
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none !important;
  display: inline-block;
  color: inherit;
}

/* img {
  width: 100%;
} */

/* .form-control:focus {
  box-shadow: none !important;
  border: inherit !important;
} */
.gap-10 {
  gap: 10px;
}

.gap-15 {
  gap: 15px;
}

.gap-30 {
  gap: 30px;
}

.section-heading {
  font-size: 26px;
  line-height: 32px;
  font-weight: 600;
  margin-bottom: 30px;
}
.wc-loader {
  width: 48px;
  height: 48px;
  border: 5px solid #fff;
  border-bottom-color: #005bb3;
  border-bottom-color: var(--button-bg);
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
textarea:focus,
input:focus {
  outline: none;
}

/* section {
  padding: 10px 0px;
} */

.section_product {
  background: #c22026;
  background: var(--color-C22026);
  font-size: 12px;
  padding: 5px 13px;
  color: white;
  /* padding: 4px 7px; */
  border-radius: 5px;
  /* font-size: 7px !important; */
  margin-top: 8px;
  margin-right: 12px;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.section_product:hover {
  background: #c22026;
  background: var(--color-C22026);
  color: white;
}

.section_product:hover a {
  color: white;
}

.hero__slider h1 {
  /* background:var(--color-C22026); */
  background: linear-gradient(
    90deg,
    rgba(176, 7, 7, 0.3225665266106442) 0%,
    rgba(152, 27, 27, 1) 50%,
    rgba(176, 7, 7, 0.3169642857142857) 99%
  );
  font-size: 45px;
  font-weight: 700;
  line-height: 55px;
  color: white;
  margin: 119px 0 20px 0;
}

.category_card_position {
  position: relative;
  z-index: 1000;
}

.categories__card span {
  margin: 8px 20px !important;
  text-transform: capitalize;
}

.liststyle {
  display: block;
}

.qtyinput > input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qt_btn {
  background: #dfdbdb;
  border: none;
}

.qt_btnps {
  position: absolute;
  font-size: 16px;
  font-weight: 600;
  padding-top: 10px;
  padding: 1px 6px;
  cursor: pointer;
}

.qt_btn:hover {
  background: rgb(145, 165, 201);
  color: white;
}

.qt_btnna {
  position: absolute;
  font-size: 16px;
  font-weight: 600;
  left: 27px;
  padding-top: 10px;
  padding: 1px 9px;
}

.userInfoUse {
  display: flex;
  flex-wrap: wrap;
}

.inputbasehulf {
  flex-basis: 50%;
  padding: 1px 10px;
  margin-bottom: 14px !important;
}

.padding__lfbl {
  padding-left: 13px;
}

.requiredst {
  color: #fb2c2c;
  font-size: 15px;
  font-weight: bold;
}

.infoname__st {
  font-size: 13px;
  color: #6a6a6a;
}

.brst {
  border-bottom: 0.1px solid #f3f3f394;
  padding-bottom: 7px;
}

.error__tx {
  color: #fb8383;
  font-size: 12px;
  font-weight: 500;
}

.categoryList__st {
  display: flex;
}

.categoryList__st:hover {
  background: #c22026;
  background: var(--color-C22026);
  cursor: pointer;
  color: white;
}

.dropdown-toggle::after {
  display: inline-block;
  margin-left: -1.745em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

.drop__itm_st {
  padding: 4px 9px;
  cursor: pointer;
  font-size: 14px;
  color: black !important;
}

* .drop__itm_st:hover {
  background: #c22026;
  background: var(--color-C22026);
  color: white !important;
}

.cardleft {
  box-shadow:
    rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  margin-right: 37px;
}

.cardrigt {
  box-shadow:
    rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.dashboard_item {
  display: flex;
  padding: 10px 23px;
  align-items: center;
  cursor: pointer;
}

.dashboard_item:hover {
  background-color: #c22026;
  background-color: var(--color-C22026);
  background-color: #c0d3d5;
  color: white;
}

.dashboard_item__icon {
  height: 35px;
  width: 35px;
  background: #00b9ff;
  display: flex;
  align-items: center;
  color: white;
  justify-content: center;
  border-radius: 20px;
  margin-right: 10px;
}

.card__ul {
  padding: 4px;
}

.roundImg img {
  height: 81px;
  width: 80px;
  border-radius: 50%;
}

.profileCardLeft {
  display: flex;
  align-items: center;
  gap: 14px;
}

.profileCardRigt {
  display: flex;
  /* display: flex; */
  align-items: center;
  justify-content: right;
}

.userName {
  font-weight: 800;
  font-size: 24px;
}

.logoutbtnst {
  font-size: 13px;
  background: none;
  color: black;
}

.userProfile__info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 10px;
}

.itemi__con {
  font-size: 45px;
  color: #a8a8a8;
}

.roundicon {
  position: absolute;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  top: -16px;
  display: flex;
  right: -11px;
  align-items: center;
  justify-content: center;
  background: #00b9ff;
  color: white;
}

.profile__main-info-item {
  font-size: 30px;
  position: relative;
  border: 2px solid #d7d3d3;
  text-align: center;
  border-radius: 5px;
  padding: 27px 30px 25px;
}

.iconname {
  position: absolute;
  font-size: 10px;
  width: 100px;
  bottom: 6px;
  left: 5%;
}

.addressPd {
  padding: 0px 18px;
}

.tbldeadcolor {
  display: table-row;
  vertical-align: middle;
  outline: 0;
  background: #5ccdc8;
  color: white !important;
}

.profile__main-info-item2 {
  position: relative;
  border: 2px solid #d7d3d3;
  text-align: center;
  border-radius: 5px;
  padding: 9px 18px 9px;
}

.item__img {
  height: 37px;
  width: 37px;
  border-radius: 6px;
}

.itmqty_sp {
  height: 25px;
  width: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #fffdfd;
  position: absolute;
  right: 37px;
  top: -12px;
  font-size: 12px;
  line-height: 6px;
  font-weight: 600;
  box-shadow:
    rgba(17, 17, 26, 0.05) 0px 1px 0px,
    rgba(17, 17, 26, 0.1) 0px 0px 8px;
  color: #424040;
}

.order_item {
  display: flex;
  align-items: center;
  margin: 13px 0px;
  font-size: 14px;
}

.paymentIcon {
  background: #f5f3f3;
  box-shadow:
    rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  flex-basis: 36%;
  padding: 19px 11px;
  margin-right: 16px;
  border-radius: 6px;
  height: 138px;
}

.fnsz {
  font-size: 31px;
}

.payment__div {
  display: flex;
  justify-content: center;
}

.imgBackground {
  width: 100%;
  height: 30px;
  margin-top: 18px;
  display: flex;
  align-items: center;
}

.css-ahj2mt-MuiTypography-root {
  font-family: "Montserrat", sans-serif !important;
}

.custom-editor {
  color: #4b5563; /* Matches text-gray-600 */
  font-style: italic;
  font-size: 0.875rem; /* Matches text-sm */
  line-height: 1.5; /* Matches leading-relaxed */
  text-align: justify;
  background: transparent;
  width: 100%;
  height: 10rem; /* Matches h-40 */
  overflow-y: auto;
  word-break: break-word;
  white-space: pre-wrap;
  border: none;
}
.custom-textarea {
  color: #4b5563; /* Matches text-gray-600 */
  font-style: italic;
  font-size: 0.875rem; /* Matches text-sm */
  /* line-height: 1.5; */
  text-align: justify;
  word-break: break-word;
  white-space: pre-wrap;
}

.custom-btn-danger:hover {
  background-color: #c82333; /* Matches hover:bg-red-600 */
  border-color: #bd2130;
}
.custom-btn-pink {
  background-color: #ed4b82 !important; /* Matches bg-pink-600 */
  border-color: #ed4b82 !important;
}
.custom-btn-pink:hover {
  background-color: #d81b60 !important; /* Matches hover:bg-pink-700 */
  border-color: #d81b60 !important;
}
.custom-btn-pink:disabled {
  background-color: #6c757d; /* Matches disabled:bg-gray-400 */
  border-color: #6c757d;
}
.payment-options {
  min-width: 100px;
  max-width: 450px;
}
.loinerrtxt {
  text-align: center;
  color: red;
  font-size: 12px;
}
.gurdwara_checkbox .form-check-input:checked {
  background-color: #4caf50 !important;
  border-color: #4caf50 !important;
}
.form-check-input {
  cursor: pointer !important;
}
.dropdownbtnstyle {
  height: 22px;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  display: flex;
}

.centerst {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dbitem {
  display: flex;
  justify-content: right;
}

.tbcolorst {
  color: white;
  background: #5ccdc8;
}

.set-invpd {
  padding: 10px 27px;
}

.textright_st {
  text-align: right;
}

.tablesst tr {
  border: 1px solid white;
}

.tablesst {
  font-size: 13px;
  font-weight: 500;
}

.flotlert-set {
  text-align: right;
}

.borderTopsst {
  border-top: 2px solid #fbe6e6 !important;
}

.orderdetailstx {
  display: flex;
  text-align: center;
  justify-content: center;
  font-weight: 600;
  padding-top: 20px;
}

.frmwidth-st {
  width: 60%;
}

.txcenterst {
  text-align: center;
}

.passbtn-st {
  color: white;
  background: rgb(0, 174, 255);
}

.errortx {
  color: red;
}

.products-filter {
  background: rgba(255, 255, 255, 1) !important;
  padding: 20px;
  margin-top: 14px;
  padding-top: 7px;
  padding-bottom: 7px;
  border-radius: 2px;
  box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.05);
}

.paycard_div {
  display: flex;
  justify-content: center;
  gap: 3px;
}
.txpayment {
  color: rgb(36, 35, 35);
}

.form__group > .form-control {
  padding: 0.34rem 1rem;
  font-size: 0.875rem;
  height: calc(1rem + 1.2rem + 2px);
  border: 1px solid #000000;
  width: 100%;
  color: #212529;
  background: #ffffff;
  border-radius: 0px;
  border: 1px solid #0000003b !important;
}

.checkoutcard-div-style {
  border: 1px solid #e3e3e3;
}
.form-select {
  border-radius: 0 !important;
  padding: 0.34rem 1rem;
  font-size: 0.875rem;
  height: calc(1rem + 1.2rem + 2px);
}

.form__group > .form-control {
  width: 100%;
  color: #999999 !important;
  /* background: #fafafa !important; */
  border: 1px solid #9797977d !important;
  border-radius: 7px !important;
  margin-top: 2px !important;
}

.form__group > .form-select {
  width: 100%;
  color: #999999 !important;
  /* background: #fafafa !important; */
  border: 1px solid #9797977d !important;
  border-radius: 7px !important;
  margin-top: 2px !important;
}

.finalPayment {
  background: #e7e7e7c2;
  margin: 21px 1px;
  padding: 20px 24px;
  margin-right: 12px;
  border-radius: 6px;
  color: black;
  width: 75%;
  display: flex;
  align-items: center;
}

.userProfile__info_data {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 10px;
}
.container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
}
@media only screen and (max-width: 600px) {
  .inputbasehulf {
    flex-basis: 100%;
    padding: 1px 10px;
    margin-bottom: 14px !important;
  }

  .paycard_div {
    display: inline;
  }

  .paymentIcon {
    width: 100%;
    margin-bottom: 11px;
  }

  .finalPayment {
    background: #e7e7e7c2;
    margin: 0px 0px;
    padding: 15px 1px;
    border-radius: 6px;
    color: black;
    width: 75%;
    display: flex;
    align-items: center;
  }

  .profileCardRigt {
    width: 50%;
  }
  .profileCardLeft {
    width: 50%;
  }

  .frmwidth-st {
    width: 87%;
  }

  .userProfile__info {
    margin-top: 17px;
  }

  .userProfile__info_data {
    margin-top: 35px;
  }
  .profile__main-info-item2:hover {
    cursor: pointer;
    background: red;
  }

  .tbcolorst {
    color: white;
    background: #5ccdc8;
  }

  /* .dropdownitemtxt{
  font-size: 13px;
} */
}

.custom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.3rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
  /* white-space: nowrap; */
}
.custom-btn-active,
.custom-btn-delete,
.custom-btn-default {
  background-color: var(--white);
  color: var(--button-text);
  border: 1px solid var(--button-bg);
}
.custom-btn-warning {
  background-color: var(--warning-button-bg);
  color: var(--text-primary);
  border: 1px solid var(--warning-button-bg);
}
.custom-btn-yellow {
  background-color: var(--yellow-button-bg);
  color: var(--text-primary);
  border: 1px solid var(--yellow-button-bg);
}
.custom-btn-fill_active {
  background-color: var(--approve-button-bg);
  color: var(--white);
  border: 1px solid var(--approve-button-bg);
}
.custom-btn-fill_default {
  background-color: var(--button-bg);
  color: var(--white);
  border: 1px solid var(--button-bg);
}
.custom-btn-fill_delete {
  background-color: var(--delete-button-bg);
  color: var(--white);
  border: 1px solid var(--delete-button-bg);
}
.custom-btn-fill_cancel {
  background-color: var(--color-968686);
  color: var(--white);
  border: 1px solid var(--color-968686);
}
.custom-btn-default_gradient {
  background: linear-gradient(to right, var(--theme-deep), var(--theme-light));
  color: var(--white);
  border: 1px solid var(--button-bg);
}
.custom-btn-default_gradient:hover {
  background: linear-gradient(to right, var(--theme-light), var(--theme-deep));
  color: var(--white);
  border: 1px solid var(--button-bg);
  transform: scale(1.1);
  transition: all 0.2s ease;
}
.custom-btn-fill_active:hover {
  background-color: var(--approve-button-bg);
  color: var(--white);
  border: 1px solid var(--approve-button-bg);
  transform: scale(1.1);
  transition: all 0.2s ease;
}
.custom-btn-active:hover {
  background-color: var(--approve-button-bg);
  border-color: var(--approve-button-bg);
  color: var(--white);
}

.custom-btn-delete:hover {
  background-color: var(--delete-button-bg);
  border-color: var(--delete-button-bg);
  color: var(--white);
}

.custom-btn-default:hover {
  background-color: var(--button-bg);
  border-color: var(--button-bg);
  color: var(--white);
}

.custom-btn .btn-icon {
  margin-right: 0.5rem;
}

.custom-btn-gray {
  background-color: var(--gray-button-bg);
  color: var(--text-primary);
  border: 1px solid var(--gray-button-border);
}

.custom-btn-gray:hover {
  background-color: var(--gray-button-hover);
  border-color: var(--gray-button-border);
}

/* ── Tablet (≤ 768px) ── */
@media (max-width: 768px) {
  .custom-btn {
    padding: 0.18rem 0.75rem;
    font-size: 13px;
    gap: 0.25rem;
  }

  .custom-btn .btn-icon {
    margin-right: 0.35rem;
  }
}

/* ── Mobile (≤ 480px) ── */
@media (max-width: 480px) {
  .custom-btn {
    padding: 0.15rem 0.55rem;
    font-size: 12px;
    gap: 0.2rem;
    border-radius: 3px;
  }

  .custom-btn .btn-icon {
    margin-right: 0.25rem;
  }

  /* Disable scale transforms on mobile to avoid layout shift */
  .custom-btn-default_gradient:hover,
  .custom-btn-fill_active:hover {
    transform: none;
  }
}

/* ── Extra-small (≤ 360px) ── */
@media (max-width: 360px) {
  .custom-btn {
    padding: 0.12rem 0.45rem;
    font-size: 11px;
  }
}
.custom-btn-delete {
} */

/* <CustomButton type="approve" icon={FaCheck}>Approve All</CustomButton>
<CustomButton type="reject"  icon={FaTimes}>Delete File(s)</CustomButton>
<CustomButton type="close"   icon={FaDownload}>Download App</CustomButton>
<CustomButton type="warn"    icon={FaSignOut}>Sign Out</CustomButton>
<CustomButton type="star"    icon={FaStar}>Add to Favourite</CustomButton>
<CustomButton type="danger"  icon={FaTrash}>Danger Action</CustomButton>
<CustomButton type="del"     icon={FaTrashAlt}>Delete</CustomButton>
<CustomButton type="info"    icon={FaInfo}>Info</CustomButton>
<CustomButton type="neutral" icon={FaTimes}>Cancel</CustomButton>
<CustomButton type="fill"    icon={FaPlus}>Primary Action</CustomButton> */

/* Shared base overrides for all new filled types */
.custom-btn-fill,
.custom-btn-approve,
.custom-btn-reject,
.custom-btn-close,
.custom-btn-danger,
.custom-btn-warn,
.custom-btn-info,
.custom-btn-neutral,
.custom-btn-star,
.custom-btn-del {
  border: none;
  border-radius: 4px;
  padding: 0.2rem 1rem;
  color: #fff;
  font-weight: 500;
}

/* Icon circle — the existing .btn-icon gets a dark semi-transparent circle */
.custom-btn-fill .btn-icon,
.custom-btn-approve .btn-icon,
.custom-btn-reject .btn-icon,
.custom-btn-close .btn-icon,
.custom-btn-danger .btn-icon,
.custom-btn-warn .btn-icon,
.custom-btn-info .btn-icon,
.custom-btn-neutral .btn-icon,
.custom-btn-star .btn-icon,
.custom-btn-del .btn-icon {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 50%;
  padding: 4px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.5rem;
  flex-shrink: 0;
  color: #fff;
  font-size: 12px;
  box-sizing: border-box;
}

/* Text stays white */
.custom-btn-fill .btn-text,
.custom-btn-approve .btn-text,
.custom-btn-reject .btn-text,
.custom-btn-close .btn-text,
.custom-btn-danger .btn-text,
.custom-btn-warn .btn-text,
.custom-btn-info .btn-text,
.custom-btn-neutral .btn-text,
.custom-btn-star .btn-text,
.custom-btn-del .btn-text {
  color: #fff;
}

/* ── fill — primary blue ───────────────────────────────────────────────────── */
.custom-btn-fill {
  background-color: #4f7ef5;
}
.custom-btn-fill:hover {
  background-color: #3a6ae0;
  transform: scale(1.03);
}

/* ── approve — green ──────────────────────────────────────────────────────── */
.custom-btn-approve {
  background-color: #ccebcd;
}
.custom-btn-approve:hover {
  background-color: #80bb82;
  transform: scale(1.03);
}

/* ── reject — salmon ──────────────────────────────────────────────────────── */
.custom-btn-reject {
  background-color: #ddb7b7;
}
.custom-btn-reject:hover {
  background-color: #c59494;
  transform: scale(1.03);
}

/* ── close — purple ───────────────────────────────────────────────────────── */
.custom-btn-close {
  background-color: #999999;
}
.custom-btn-close:hover {
  background-color: #8a8a8a;
  transform: scale(1.03);
}

/* ── danger — deep red ────────────────────────────────────────────────────── */
.custom-btn-danger {
  background-color: #de7272;
}
.custom-btn-danger:hover {
  background-color: #cd5858;
  transform: scale(1.03);
}

/* ── warn — amber / yellow-orange ────────────────────────────────────────── */
.custom-btn-warn {
  background-color: #f5a623;
}
.custom-btn-warn:hover {
  background-color: #d98e10;
  transform: scale(1.03);
}

/* ── info — teal ──────────────────────────────────────────────────────────── */
.custom-btn-info {
  background-color: #38bdf8;
}
.custom-btn-info:hover {
  background-color: #22a8e0;
  transform: scale(1.03);
}

/* ── neutral — grey ───────────────────────────────────────────────────────── */
.custom-btn-neutral {
  background-color: #888888;
}
.custom-btn-neutral:hover {
  background-color: #6e6e6e;
  transform: scale(1.03);
}

/* ── star — orange  (Add to Favourite style) ─────────────────────────────── */
.custom-btn-star {
  background-color: #fb923c;
}
.custom-btn-star:hover {
  background-color: #ea7c24;
  transform: scale(1.03);
}

/* ── del — delete red ─────────────────────────────────────────────────────── */
.custom-btn-del {
  background-color: #f07070;
}
.custom-btn-del:hover {
  background-color: #d95a5a;
  transform: scale(1.03);
}

/* ── Icon-only mode: no background, no border, no padding ────────────────── */
/* Applied automatically when showText={false} is passed from the caller.    */
.custom-btn.custom-btn--no-bg,
.custom-btn.custom-btn--no-bg:hover {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  padding: 4px !important;
  color: inherit;
  transform: none !important;
  box-shadow: none !important;
}

.custom-btn.custom-btn--no-bg .btn-icon {
  background: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  margin-right: 0 !important;
  color: inherit;
  font-size: inherit;
}

.custom-btn.custom-btn--no-bg:hover {
  opacity: 0.7;
}

/* ── textColor prop — CSS variable bridge ────────────────────────────────── */
/* When textColor prop is set, --btn-text-color is injected as inline style.  */
/* These rules let it cascade down to icon and text without extra JS.         */
.custom-btn[style*="--btn-text-color"] .btn-icon,
.custom-btn[style*="--btn-text-color"] .btn-text {
  color: var(--btn-text-color) !important;
}

/* Toast container styling for bottom-middle positioning */
.toast-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none; /* Prevent blocking interactions with elements below */
}

/* Individual toast styling */
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  color: white;
  font-size: 16px;
  font-family: Arial, sans-serif;
  width: auto;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: auto; /* Allow interaction with the toast itself */
}

/* Bounce animation for toast appearance */
@keyframes bounce {
  0% {
    transform: translateY(20px) scale(1);
    opacity: 0;
  }
  50% {
    transform: translateY(0) scale(1.1);
    opacity: 1;
  }
  70% {
    transform: translateY(0) scale(0.95);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Show animation with bounce */
.toast.show {
  animation: bounce 0.5s ease forwards;
}

/* Toast type-specific styling */
.toast--success {
  background-color: #28a745;
}

.toast--error {
  background-color: #dc3545;
}

.toast--info {
  background-color: #007bff;
}

/* Icon styling */
.toast__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.toast__icon svg {
  width: 20px;
  height: 20px;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .toast {
    font-size: 14px;
    padding: 10px 16px;
    min-width: 150px;
    max-width: 90vw;
  }
}

/*# sourceMappingURL=main-43dd7041.df4e203e.css.map*/