@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'IBM Plex Sans', sans-serif;
}

a {
  text-decoration: none;
}

.main-container {
  display: flex;
  justify-content: center;
  background-color: #fcffe3;
}

.main-wrapper {
  width: 100%;
  max-width: 380px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 100vh;
}

.main-logo {
  width: 100%;
  padding: 10px 0px;
}

.logo-wrapper {
  width: 72px;
  height: 32px;
}

.logo-wrapper img {
  width: 100%;
  height: 100%;
}

.sub-heading h2 {
  font-size: 20px;
  font-weight: 500;
  color: #282a2e;
}

.tip-card-wrapper {
  width: 100%;
  border-radius: 30px;
  overflow: hidden;
}

.tip-card-wrapper .tip-card {
  height: 420px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 24px 0px #282a2e14;
}

.tip-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tip-user-info {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 75%;
}

.tip-user-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.image-wrapper {
  border-radius: 50px;
  overflow: hidden;
  height: 48px;
  width: 48px;
}

.image-wrapper img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.common-text {
  font-size: 12px;
  font-weight: 400;
  color: white;
}
.common-text-black {
  font-size: 12px;
  font-weight: 400;
  color: black;
}

.tip-user-body.sub-heading h2 {
  color: white;
  text-align: center;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tip-user-body.sub-heading-black h2 {
  color: black;
  text-align: center;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  text-overflow: ellipsis;
}
.white-icon {
  filter: brightness(0) invert(1); /* makes it white */
}

.black-icon {
  filter: none; /* keep normal (black) */
}
.tip-location {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tip-location img {
  height: 16px;
  width: 16px;
}

.common-button {
  height: 48px;
  width: 48px;
  border-radius: 30px;
  overflow: hidden;
  background: #ffffffb8;
  backdrop-filter: blur(8px);
  box-shadow: 2px 2px 24px 0px #282a2e14;
  color: #282a2e;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
}

.tip-card .common-button img {
  height: 20px;
  width: 20px;
}

.tip-card .common-button {
  position: absolute;
}

.common-button.reply-button {
  bottom: 15px;
  width: 170px;
}

.common-button:hover {
  background: #ffffff;
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.common-heading h1 {
  font-size: 26px;
  font-weight: 700;
  color: #282a2e;
}

.replies-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 0px;
  border-bottom: 1px dashed #b6b6b6;
}

.replies-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.replies-body .common-text {
  color: #898a8d;
  font-weight: 500;
}

.replies-body a:hover {
  color: #262627;
}

.friends-replies {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 0px;
}

.friends-row {
  position: relative;
  display: flex;
  align-items: center;
  width: 70%;
  height: 48px;
}

.friends-row .image-wrapper {
  position: absolute;
}

.friends-row .image-wrapper.user-one {
  left: 0px;
}

.friends-row .image-wrapper.user-two {
  left: 38px;
}

.friends-row .image-wrapper.user-three {
  left: 76px;
}

.friends-row .image-wrapper.user-four {
  left: 112px;
}

.friends-row .image-wrapper.user-five {
  left: 148px;
}

.friends-row .image-wrapper.user-0 {
  left: 0px;
}

.friends-row .image-wrapper.user-1 {
  left: 38px;
}

.friends-row .image-wrapper.user-2 {
  left: 76px;
}

.friends-row .image-wrapper.user-3 {
  left: 112px;
}

.friends-row .image-wrapper.user-4 {
  left: 148px;
}

.friends-count h3 {
  background-color: white;
  padding: 2px 10px;
  border-radius: 6px;
  box-shadow: 2px 2px 24px 0px #282a2e14;
  color: #898a8d;
  font-size: 18px;
  font-weight: 500;
}

.need-tipz-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 30px;
  border-bottom: 1px dashed #b6b6b6;
}

.left-content h2 span {
  background-color: #e9fc20;
}

.footer-wrapper {
  padding: 40px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.footer-wrapper img {
  height: 20px;
  width: 45px;
}

.footer-wrapper .common-text {
  color: #898a8d;
}

.tip-detail-page .main-wrapper {
  padding: unset;
}

.tip-detail-page .tip-card-wrapper {
  border-radius: 0px;
}

.tip-detail-page .tip-card-wrapper .tip-card {
  height: 100vh;
}

.revert-button {
  position: absolute;
  top: 30px;
  left: 20px;
}

.main-wrapper.tip-reply-wrapper,
.main-wrapper.publish-tip-wrapper {
  align-items: center;
  justify-content: center;
  position: relative;
}

.tip-reply-wrapper .tip-user-info {
  position: unset;
  gap: 10px;
}

.tip-reply-wrapper .common-text {
  color: #282a2e;
  font-weight: 500;
}

.tip-reply-wrapper .sub-heading h2 {
  color: #282a2e;
}

.forward-button {
  position: absolute;
  bottom: 15px;
  background-color: #f4f4f4b8;
}

.form-wrapper {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

.input-field {
  background-color: white;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.input-field.text-field {
  padding: 15px 12px;
  border: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.input-field.text-field:focus-within {
  border: 1px solid #b6b6b6;
}

.input-field textarea {
  resize: none;
  width: 100%;
  border: none;
  font-size: 1rem;
  font-weight: 400;
  color: #282a2e;
  outline: none;
  line-height: 1.5rem;
  height: 120px;
  padding-top: calc(50% - 8rem);
  box-sizing: border-box;
}

.input-field textarea::-webkit-scrollbar {
  display: none;
}

.input-field textarea::placeholder {
  font-size: 26px;
  font-weight: 600;
  color: #d5d5d5;
}

.text-area-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.text-area-footer h4.common-text {
  display: flex;
  align-items: center;
  color: #b6b6b6;
}

.text-area-footer img {
  width: 22px;
  height: 24px;
}

.input-field input {
  border: none;
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-weight: 400;
  color: #282a2e;
  outline: none;
  padding: 12px 18px;
  padding-left: 38px;
  background-color: transparent;
}

.input-field input::placeholder {
  color: #b6b6b6;
}

.input-field .location-icon {
  position: absolute;
  left: 12px;
  top: 11px;
  height: 20px;
  width: 20px;
}

.forward-button[disabled] {
  pointer-events: none;
  background-color: #f4f4f4b8;
}

.forward-button {
  background-color: white;
}

.forward-button[disabled] svg path {
  stroke: #d5d5d5;
}

.location-picker-wrapper .input-field {
  background-color: #f4f4f4;
}

/* .location-picker-wrapper {
    background: #282A2E4D;
    min-height: 100vh;
} */
.location-picker-wrapper .sub-heading h2 {
  font-size: 18px;
  text-align: center;
}

.location-picker-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(40, 42, 46, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  z-index: 1000;
}

.location-modal {
  border-radius: 20px 20px 0 0;
  width: 100%;
  height: 70vh;
  max-width: 400px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;

  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
}

/* show when open */
.location-picker-wrapper.show .location-modal {
  transform: translateY(0);
}

.suggestions {
  max-height: 300px;
  overflow-y: auto;
}

.suggestions::-webkit-scrollbar {
  display: none;
}

.suggestion {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 12px;
  transition: background 0.2s;
}

.suggestion:hover {
  background: #f0f0f0;
}

.suggestion-text {
  flex: 1;
}

.suggestion-title {
  font-size: 15px;
  font-weight: 600;
  color: #282a2e;
}

.suggestion-subtitle {
  color: #b6b6b6;
}

.selected {
  background: #f9fce0;
  border-radius: 40px;
}

.location-image-wrapper {
  height: 56px;
  width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  box-shadow: 2px 2px 24px 0px #282a2e14;
  background-color: white;
}

.location-image-wrapper img {
  height: 24px;
  width: 24px;
}

.checkmark {
  height: 20px;
  width: 20px;
}

.bottom-buttons-wrapper {
  display: flex;
  gap: 15px;
  position: absolute;
  bottom: 15px;
}

.publish-tip-wrapper {
  align-items: center;
  justify-content: flex-end;
}

.tip-card .common-button.image-upload-button {
  top: 15px;
  right: 15px;
}

.created-tip-card {
  background-color: #b6b6b6;
}

.created-tip-detail {
  position: absolute;
  bottom: 15px;
  padding: 15px;
  border-radius: 15px;
  width: calc(100% - 30px);
  background: #282a2e99;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.created-tip-body {
  display: flex;
  align-items: center;
  gap: 8px;
}

.created-tip-body .image-wrapper {
  border-radius: 6px;
  height: 22px;
  width: 26px;
  padding: 2px 6px;
  background-color: #826046;
}

.created-tip-body .image-wrapper img {
  height: 100%;
  width: 100%;
}

.created-tip-body p {
  display: flex;
  align-items: center;
  gap: 4px;
}

.created-tip-body .common-text img {
  height: 16px;
  width: 16px;
}

.created-tip-detail .tip-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  color: white;
  font-size: 12px;
  position: relative;
  padding-right: 20px;
}

.created-tip-detail .tip-description img {
  height: 14px;
  width: 16px;
  position: absolute;
  top: 0;
  right: 0;
}

.created-tip-detail .sub-heading h2 {
  color: white;
}

.user-info-wrapper {
  padding-top: 80px;
  position: relative;
  gap: 35px;
}

.user-info-wrapper .form-wrapper {
  gap: 40px;
}

.user-info-wrapper .input-field {
  border: 1px solid #b6b6b6;
  position: relative;
  overflow: unset;
}

.user-info-wrapper .input-field label {
  background-color: white;
  color: #676b77;
  position: absolute;
  top: -10px;
  left: 12px;
  padding: 0 5px;
}

.user-info-wrapper .input-field input {
  padding-left: unset;
  padding: 14px;
  color: #999999;
}

.user-info-wrapper .input-field input::placeholder {
  color: #d5d5d5;
  font-size: 14px;
}

.user-info-wrapper .bottom-buttons-wrapper {
  flex-direction: column;
  width: calc(100% - 40px);
}

.user-info-wrapper .bottom-buttons-wrapper .common-button {
  background-color: black;
  color: white;
  width: 100%;
}

.user-info-wrapper .bottom-buttons-wrapper .common-button[disabled] {
  background-color: #d5d5d5;
  pointer-events: none;
}

.confirm-mail-wrapper {
  align-items: center;
  gap: 50px;
}

.confirm-mail-wrapper p {
  text-align: center;
  font-weight: 500;
}

.confirm-mail-wrapper .common-text {
  text-align: center;
  color: #898a8d;
}

.confirm-mail-wrapper span a {
  text-decoration: underline;
  color: #898a8d;
}

.confirm-tip-sent-wrapper .main-wrapper {
  position: relative;
  justify-content: space-between;
  overflow: hidden;
}

.confirm-tip-sent-wrapper .main-wrapper .main-logo {
  padding-top: 25px;
}

.right-background-image {
  height: 530px;
  width: 361px;
  position: absolute;
  top: -200px;
  right: 150px;
  transform: rotate(-45deg);
  transform-origin: top right;
}

.right-background-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.body-content {
  display: flex;
  flex-direction: column;
  gap: 25px;
  align-items: center;
  z-index: 10;
}

.body-content .correct-circle-image {
  height: 100px;
  width: 100px;
  border-radius: 50px;
  overflow: hidden;
}

.body-content h2 {
  text-align: center;
}

.body-content p {
  text-align: center;
  color: #727574;
  font-size: 14px;
}

.body-content button {
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  background-color: black;
}

.body-content button p {
  color: white;
  font-size: 10px;
  font-weight: 400;
  display: flex;
  flex-direction: column;
}

.body-content button img {
  height: 24px;
  width: 24px;
}

.body-content button span {
  font-size: 20px;
  font-weight: 600;
  line-height: 20px;
}

.confirm-tip-sent-wrapper .footer-wrapper {
  padding-bottom: 0px;
}
.tip-card-detail .image-wrapper-over {
  position: relative;
}

/* .tip-card-detail .image-wrapper-over img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
} */

.tip-card-detail .image-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35); /* black overlay */
  pointer-events: none;
}