html, body {
    overscroll-behavior: none;
}

select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23131313%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat;
    background-position: right 10px top 50%;
    background-size: 8px auto;
    padding-right: 24px;
}

/* toasts */
.toast-close {
    margin-left: 5px;
}

.toast-success {
    background: #10b981 !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    box-shadow: none !important;
}

.toast-progress {
    background: #2c61ff !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    box-shadow: none !important;
}

.toast-error {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    box-shadow: none !important;
}

/* toasts */

/* toggle switch */
.toggle_container .switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

.toggle_container .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle_container .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 999px;
}

.toggle_container .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 999px;
}

.toggle_container input:checked+.slider {
    background-color: #2C61FF;
}

.toggle_container input:focus+.slider {
    box-shadow: 0 0 1px #2C61FF;
}

.toggle_container input:checked+.slider:before {
    -webkit-transform: translateX(24px);
    -ms-transform: translateX(24px);
    transform: translateX(24px);
}

/* toggle switch */

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 5px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/* fancy gradient bg */
:root {
    --color1: 125, 125, 251;
    --color2: 125, 125, 251;
    --color3: 125, 125, 251;
    --color4: 125, 125, 251;
    --color5: 125, 125, 251;
    --circle-size: 80%;
    --blending: hard-light;
}

@keyframes moveInCircle {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes moveVertical {
    0% {
        transform: translateY(-50%);
    }

    50% {
        transform: translateY(50%);
    }

    100% {
        transform: translateY(-50%);
    }
}

@keyframes moveHorizontal {
    0% {
        transform: translateX(-50%) translateY(-10%);
    }

    50% {
        transform: translateX(50%) translateY(10%);
    }

    100% {
        transform: translateX(-50%) translateY(-10%);
    }
}

.gradient-bg svg {
    display: none;
}

.gradient-bg {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    top: 0;
    left: 0;
}

.gradient-bg .gradients-container {
    filter: url("#goo") blur(40px);
    width: 100%;
    height: 100%;
}

.gradient-bg .g1 {
    position: absolute;
    background: radial-gradient(circle at center,
            rgba(var(--color1), 0.2) 0,
            rgba(var(--color1), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);

    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2);
    left: calc(50% - var(--circle-size) / 2);

    transform-origin: center center;
    animation: moveVertical 15s ease infinite;

    opacity: 1;
}

.gradient-bg .g2 {
    position: absolute;
    background: radial-gradient(circle at center,
            rgba(var(--color2), 0.2) 0,
            rgba(var(--color2), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);

    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2);
    left: calc(50% - var(--circle-size) / 2);

    transform-origin: calc(50% - 400px);
    animation: moveInCircle 10s reverse infinite;

    opacity: 1;
}

.gradient-bg .g3 {
    position: absolute;
    background: radial-gradient(circle at center,
            rgba(var(--color3), 0.2) 0,
            rgba(var(--color3), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);

    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2 + 200px);
    left: calc(50% - var(--circle-size) / 2 - 500px);

    transform-origin: calc(50% + 400px);
    animation: moveInCircle 20s linear infinite;

    opacity: 1;
}

.gradient-bg .g4 {
    position: absolute;
    background: radial-gradient(circle at center,
            rgba(var(--color4), 0.2) 0,
            rgba(var(--color4), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);

    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2);
    left: calc(50% - var(--circle-size) / 2);

    transform-origin: calc(50% - 200px);
    animation: moveHorizontal 20s ease infinite;

    opacity: 0.7;
}

.gradient-bg .g5 {
    position: absolute;
    background: radial-gradient(circle at center,
            rgba(var(--color5), 0.2) 0,
            rgba(var(--color5), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);

    width: calc(var(--circle-size) * 2);
    height: calc(var(--circle-size) * 2);
    top: calc(50% - var(--circle-size));
    left: calc(50% - var(--circle-size));

    transform-origin: calc(50% - 800px) calc(50% + 200px);
    animation: moveInCircle 10s ease infinite;

    opacity: 1;
}

/* fancy gradient bg */


.fade-up-in {
    animation: fade-up-in 0.5s ease-in-out;
}

.fade-up-in-fast {
    animation: fade-up-in 0.25s ease-in-out;
}

@keyframes fade-up-in {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


.selected-option {
    border-color: #2c61ff;
    box-shadow: 0 0 0 1px #2c61ff;
}

.selected-option .checkmark-container {
    display: block !important;
}

.selected-option .empty-container {
    display: none;
}

.frequency-selected {
    background-color: #eaefff;
    color: #2c61ff;
}

.plan-selected {
    border-color: #2c61ff;
    box-shadow: 0 0 0 1px #2c61ff;
}

.plan-selected .checkmark-container {
    display: block !important;
}

.plan-selected .empty-container {
    display: none;
}

.payment-method-selected, .extra-credit-pack-selected {
    border-color: #2c61ff;
    box-shadow: 0 0 0 1px #2c61ff;
}

.payment-method-selected .checkmark-container, .extra-credit-pack-selected .checkmark-container {
    display: block !important;
}

.payment-method-selected .empty-container, .extra-credit-pack-selected .empty-container {
    display: none;
}

.loader {
    width: 20px;
    height: 20px;
    border: 2px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.loader-gray {
    width: 15px;
    height: 15px;
    border: 2px solid #e5e7eb;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: flex;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.story {
    position: relative;
    width: 100%;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out, max-height 0.5s ease-out;
}

.story .recommendations {
    height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, height 0.3s ease-in-out;
}

.story .recommendations.active {
    height: auto;
    height: calc-size(auto);
  }

.story-exit {
    animation: slideOut 0.75s ease-out forwards !important;
}

@keyframes slideOut {
    0% {
        transform: translateX(0);
        opacity: 1;
        max-height: var(--story-height);
        padding-bottom: 1.25rem;
    }
    
    100% {
        transform: translateX(100%);
        opacity: 0;
        max-height: 0;
        padding-bottom: 0;
    }
}

.gap-recommendations {
    max-height: 0;
    overflow: hidden;
    /* transition: max-height 0.3s ease-in-out; */
}

/* .section-complete {
    background-color: #f9fffc;
    border-color: #10b981
} */

.completed-count {
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    background-color: #2c61ff;
    color: white;
}

.section-complete .completed-count {
    background-color: #10b981;
    color: white;
}

.section-complete .recommendation-checkbox {
    background-color: #10b981;
}

        .rich-text-excerpt {
    font-size: 0.875rem;
    line-height: 1.5;
}

.rich-text-excerpt p {
    margin-bottom: 0.5rem;
}

.rich-text-excerpt h1 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.rich-text-excerpt h2 {
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.rich-text-excerpt h3 {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}   

.rich-text-excerpt a {
    color: #2c61ff;
    text-decoration: underline;
}

.rich-text-excerpt a:hover {
    color: #1e40af;
}

.rich-text-excerpt ul, .rich-text-excerpt ol {
    margin-bottom: 0.5rem;
    padding-left: 1.25rem;
}

.rich-text-excerpt ul {
    list-style-type: disc;
}

.rich-text-excerpt ol {
    list-style-type: decimal;
}

.rich-text-excerpt li {
    margin-bottom: 0.25rem;
}

.rich-text-excerpt dl {
    margin-bottom: 0.5rem;
}

.rich-text-excerpt dt {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.rich-text-excerpt dd {
    margin-left: 1rem;
    margin-bottom: 0.5rem;
}

.rich-text-excerpt code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.875rem;
    background-color: #f9fafb;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
}

.rich-text-excerpt blockquote {
    font-style: italic;
    margin-bottom: 0.5rem;
    padding-left: 1.25rem;
    border-left: 2px solid #2c61ff;
}

.rich-text-excerpt table {
    width: 100%;
    margin-bottom: 0.5rem;
    border-collapse: collapse;
}

.rich-text-excerpt th, .rich-text-excerpt td {
    padding: 0.5rem;
    text-align: left;
    border: 1px solid #e5e7eb;
}   

.rich-text-excerpt th {
    font-weight: 600;
}

.rich-text-excerpt strong {
    font-weight: 600;
}

.rich-text-excerpt em {
    font-style: italic;
}

.rich-text-excerpt del {
    text-decoration: line-through;
}


.rich-text-excerpt > *:last-child, .rich-text-excerpt p:last-child {
    margin-bottom: 0;
}

.tab-button.active {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-bottom: 1px solid #ffffff;
}

.tab-button {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    border: 1px solid transparent;
    margin-bottom: -1px;
}

.rank-dark-emerald {
    background-color: #064e3b;
    color: #ffffff;
}

.rank-emerald {
    background-color: #10b981;
    color: #ffffff;
}

.rank-light-emerald {
    background-color: #d9f99d;
    color: #065f46;
}

.rank-yellow {
    background-color: #fef3c7;
    color: #b45309;
}

.rank-orange {
    background-color: #fbbf24;
    color: #7c2d12;
}

.rank-light-orange {
    background-color: #fed7aa;
    color: #7c2d12;
}

.rank-red {
    background-color: #fca5a5;
    color: #7f1d1d;
}

/* Animation keyframes */
@keyframes fadeUpIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  @keyframes slide-in-from-right {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }
  
  /* Common transitions */
  .transition-all {
    transition: all 0.3s ease-out;
  }
  
  /* Stories container styles */
  #stories-container {
    transition-property: position, top, left, right, bottom, z-index, background-color, overflow-y, opacity, transform;
    position: fixed;
    top: 51px;
    height: calc(100vh - 51px);
    left: 20%;
    right: 0;
    bottom: 0;
    z-index: 50;
    background-color: #f3f4f6;
    overflow-y: auto;
    padding: 1rem;
    opacity: 0;
    animation: fadeUpIn 0.5s forwards;
    animation-delay: calc(var(--animation-order, 0) * 0.1s);
  }
  
  #stories-container.fullscreen {
    opacity: 1;
  }
  
  #stories-container.fullscreen.fading-out {
    opacity: 0;
  }
  
  /* Fullscreen mode styles */
  .fullscreen #stories-header,
  .fullscreen #recommendations-container > div:not(.active) {
    opacity: 0;
  }
  
  .fullscreen .story:not(.active) {
    display: none;
  }
  
  .fullscreen .story.active {
    padding: 0;
    animation: slide-in-from-right 0.3s ease-out;
  }
  
  .fullscreen .story.active > div {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
  }
  
  .fullscreen #back-button {
    display: flex;
  }
  
  .fullscreen #stories-header {
    display: none;
  }

  .fullscreen #type-filters {
    display: none;
  }
  
  /* Story and recommendations styles */
  .story {
    transition: opacity 0.3s ease-out, transform 0.5s ease-out;
  }
  
  .fullscreen .story.active {
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
  }
  
  #recommendations-container {
    transition: transform 0.5s ease-out;
  }
  
  .fullscreen #recommendations-container {
    transform: translateX(0);
  }
  
  /* Initial load animation for recommendations */
  #recommendations-container.initial-load > div {
    opacity: 0;
    animation: fadeUpIn 0.5s forwards;
    animation-delay: calc(var(--animation-order, 0) * 0.1s);
  }
  
  /* Transitions for header and non-active recommendations */
  #stories-header,
  #recommendations-container > div:not(.active) {
    transition: opacity 0.3s ease-out;
  }

  .filter-btn {
    padding: 4px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background-color: #fff;
    color: #4a5568;
    font-size: 0.875rem;
    transition: all 0.2s;
    opacity: 0.5;
  }

  .filter-btn:hover {
    opacity: 1;
  }

  .filter-btn.active {
    opacity: 1;
    border-color: #2c61ff;
    box-shadow: 0 0 0 2px #2c61ff61;
  }

  .feedback-btn.active[data-feedback="positive"] {
    background-color: #ecfdf5;
  }

  .feedback-btn.active[data-feedback="negative"] {
    background-color: #fff1f2;
  }