.homeshortlink-btn {
  height: 60px;
  background: #8a63b3;
  color: white;
  font-weight: 600;
  border: none;
  border-radius: 80px;
  padding: 0.65rem 1.5rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 20px;
  margin-bottom: 20px;
}

@media (min-width: 1200px) {
  a.btn.aos-init.aos-animate {
    width: 28% !important;
  }
}
/* default: mobile (stacked) */
.switch-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

/* each item */
.switch-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
}

/* desktop: row layout */
@media (min-width: 768px) {
  .switch-group {
    flex-direction: row;
    justify-content: center;
  }

  .switch-item {
    flex: 1;
    justify-content: center;
  }
}
.custom-gap {
  --bs-gutter-x: 5rem;
}
.option-pill {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent !important;
}

/* When the field inside is visible, highlight the whole card */
.option-pill:has(input:checked) {
  background: #fff !important;
  border-color: #8a63b3 !important; /* Your brand purple */
  box-shadow: 0 10px 20px rgba(138, 99, 179, 0.1);
}

.form-check-input:checked {
  background-color: #0d6efd !important; /* Your brand blue */
}

/* Smooth expansion animation */
.d-none {
  display: none !important;
}
.show-field {
  display: block !important;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.bg-light-toggle {
  background: #edf4fc;
}

@media (max-width: 768px) {
  .hiddenmobile {
    display: none;
  }
}
.feature-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #edf4fc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 16px;
  transition: 0.2s ease;
}

.feature-alert:hover {
  border-color: #cbd5e1;
  transform: translateY(-1px);
}
.text-primary {
    color: #1e3bb3 !important;
}
.feature-alert-icon {
  font-size: 18px;
  line-height: 1;
  margin-top: 2px;
}

.feature-alert-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: #1e293b;
  margin-bottom: 3px;
}

.feature-alert-desc {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.4;
}
a.btn.aos-init.aos-animate {
  background-color: #8a63b3 !important;
  color: white !important;
}
a.btn.aos-init.aos-animate:hover {
  background-color: #3d80c9 !important;
}
a.btn.aos-init.aos-animate .btn-text {
  color: white !important;
}
input#formGroupExampleInput {
  color: black;
}
.custom-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #111;
  color: #fff;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 9999;
  max-width: 300px;
}

.custom-toast.show {
  opacity: 1;
  transform: translateY(0);
}
.result-panel {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
/* Custom Styles for the Result Section */
.result-card {
  background-color: #f0f7ff; /* Soft light blue background from the image */
  border: 1px solid #e1e9f1;
  border-radius: 15px; /* Highly rounded corners */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  padding: 10px;
}

.qr-wrapper {
  background: white;
  padding: 8px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.qr-wrapper img {
  width: 50px;
  height: 50px;
}
.header.fixed-header {
  background-color:#edf4fc!important;
}
/* Green "Copy" Button */
.btn-success {
  background-color: #3d7fc9 !important;
  border: none;
  font-size: 0.9rem;
  font-weight: 500;
  color: white;
}

/* Purple "Create Another" Button */
.btn-primary-custom {
  background-color: #8a64ad !important;
  color: white;
  border: none;
  font-size: 0.9rem;
  font-weight: 500;
}

.btn-primary-custom:hover {
  background-color: #765296 !important;
  color: white;
}

/* Adjustments for icons (using Bootstrap Icons) */
.bi {
  font-size: 1.1rem;
}

/* for features */

.feature-card {
  background: #ffffff;
  border: 1px solid #e0e7ff;
  border-radius: 24px;
  padding: 30px;
  transition: transform 0.2s ease;
  height: 100%;
}
.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}
.icon-box {
  width: 56px;
  height: 56px;
  background: #ffffff;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}
.feature-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 8px;
}
.feature-desc {
  color: #64748b;
  font-size: 0.95rem;
  line-height: 1.5;
}
/* Custom Colors from image_c207b4.png */
.icon-blue {
  color: #0056b3;
}
.icon-purple {
  color: #6f42c1;
}
.icon-teal {
  color: #0d9488;
}
.use-card {
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(13, 110, 253, 0.08);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Hover effect */
.use-card:hover {
  transform: translateY(-6px);
  border-color: rgba(138, 99, 179, 0.35);
  box-shadow: 0 20px 40px rgba(13, 110, 253, 0.12);
}

/* subtle gradient glow */
.use-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at top left,
      rgba(13, 110, 253, 0.08),
      transparent 60%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(138, 99, 179, 0.08),
      transparent 60%
    );
  opacity: 0;
  transition: 0.3s ease;
}

.use-card:hover::before {
  opacity: 1;
}

/* Icon bubble */
.icon-bubble {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: linear-gradient(135deg, #0d6efd, #8a63b3);
  color: white;
  box-shadow: 0 10px 20px rgba(13, 110, 253, 0.2);
}
.features-cards {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  border: 1px solid #eee;
  height: 100%;
}
.features-cards:hover {
  transform: translateY(-10px);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1) !important;
  border-color: #0d6efd; /* Brand color */
}
.icon-box {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  border-radius: 12px;
  margin-bottom: 1.25rem;
  color: #0d6efd;
  font-size: 1.5rem;
}



    .qr-modal {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        justify-content: center;
        align-items: center;
        z-index: 9999999999999;
    }

    .qr-box {
        background: #fff;
        padding: 20px;
        border-radius: 10px;
        width: 360px;
        height: 400px;
        text-align: center;
        position: relative;
    }

    #closeQr {
        position: absolute;
        right: 10px;
        top: 5px;
        cursor: pointer;
        font-size: 20px;
    }

    /* Skeleton loader */
    .skeleton {
        width: 321px;
        height: 355px;

        margin: auto;
        border-radius: 10px;
        background: linear-gradient(90deg, #eee, #ddd, #eee);
        background-size: 200% 100%;
        animation: shimmer 1.2s infinite;
    }

    @keyframes shimmer {
        0% {
            background-position: -200% 0;
        }

        100% {
            background-position: 200% 0;
        }
    }

    .progress-bar {
        background-color: #b9a3d6;
    }

    .delete-btn:disabled {
        cursor: not-allowed;
        /* Shows the 'circle-slash' icon */
        opacity: 0.5;
        /* Makes it look faded */
        filter: grayscale(1);
        /* Turns the blue icon gray */
    }

    .btn-primary {
    background: #8a63b3 !important;
    color: #ffffff;
    border: none;
    
    font-size: 0.812rem;
    border-radius: 15px;
    padding-top: 0.5rem;
    padding-right: 1.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1.5rem;

}
.btn-outline-secondary {
      background: none !important;

    border: 1px solid #8a63b3 !important;
    color: #8a63b3 !important;
    padding-top: 0.5rem;
    padding-right: 1.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1.5rem;
    
}