/* Shared component styles extracted from common.css. */

/* XFlewit modal components */
/* Overlay: Centers the modal perfectly */
.xflewit-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--xflewit-bg);
    display: flex;
    align-items: center; /* Vertical center */
    justify-content: center; /* Horizontal center */
    z-index: 1000;
    padding: 20px; /* Prevents modal from touching screen edges on mobile */
    box-sizing: border-box;
}

/* Modal Box */
.xflewit-modal {
    background: white;
    width: 100%;
    max-width: 500px; /* Adjust for desired width */
    border-radius: var(--xflewit-radius);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    animation: xflewit-fadein 0.3s ease-out;
}

/* Content Sections */
.xflewit-modal-header, .xflewit-modal-footer {
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.xflewit-modal-header { border-bottom: 1px solid #eee; }
.xflewit-modal-footer { border-top: 1px solid #eee; justify-content: flex-end; gap: 10px; }
.xflewit-modal-body { padding: 20px; line-height: 1.5; }

/* Utilities */
.xflewit-hidden { display: none !important; }

.xflewit-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
}

.xflewit-btn {
    padding: 8px 16px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}

.xflewit-btn-primary { background: #007bff; color: white; }
.xflewit-btn-secondary { background: #6c757d; color: white; }

/* Animation */
@keyframes xflewit-fadein {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Buttons and form controls */
.primary-button {
    border: none;
    display: flex;
    width: 100%;
    height: 48px;
    padding: 13px 16px;
    justify-content: center;
    align-items: center;
    gap: 6px;

    border-radius: 8px;
    background: linear-gradient(124deg, rgba(0, 113, 206, 0.80) -8.3%, #005AB6 43.6%, #062F87 97.5%);

    color: var(--Core-Pure-White, #FFF);
    text-align: center;
    font-family: var(--font-family-body, "DM Sans");
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 16.8px */
    letter-spacing: 0.28px;
}

.primary-button:hover {
    border-radius: 8px;
    opacity: 0.9;
    background: var(--Core-Altitude-Blue, #062F87);
    box-shadow: 0 2px 12px 0 rgba(0, 90, 182, 0.08);
}

.primary-button:focus:not(:active) {
    border-radius: 8px;
    border: none;
    outline: 2px solid var(--Tints-Blue-80, #338DD8);
    outline-offset: -2px;
    background: linear-gradient(124deg, rgba(0, 113, 206, 0.80) -8.3%, #005AB6 43.6%, #062F87 97.5%);
}

.primary-button:active,
.primary-button:hover:active,
.primary-button:focus:active,
.primary-button:hover:focus:active {
    border: none;
    border-radius: 8px;
    opacity: 1;
    background: var(--Core-Altitude-Blue, #062F87);
    box-shadow: none;
}

.primary-button:disabled {
    border-radius: 8px;
    opacity: 0.4;
    background: var(--Core-Skyline-Gradient, linear-gradient(124deg, rgba(0, 113, 206, 0.80) -8.3%, #005AB6 43.6%, #062F87 97.5%));
}

.primary-button img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    aspect-ratio: 1/1;
}

/* ======================================================================== */
/* secondary button error */
.secondary-button-error {
    display: flex;
    width: 100%;
    height: 48px;
    padding: 13px 22px;
    justify-content: center;
    align-items: center;
    gap: 6px;

    border-radius: 8px;
    border: 1px solid var(--Error-Red-100, #C70101);
    background: var(--Core-Pure-White, #FFF);

    color: var(--Error-Red-100, #C70101);
    text-align: center;
    font-family: var(--font-family-body, "DM Sans");
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 16.8px */
    letter-spacing: 0.28px;
}

.secondary-button-error:hover {
    border-radius: 8px;
    border: 1px solid var(--Error-Red-100, #C70101);
    background: var(--Error-Red-3, #FDF7F7);
}

.secondary-button-error:active {
    border-radius: 8px;
    border: 1px solid var(--Error-Red-100, #C70101);
    background: var(--Error-Red-10, #FFEFEF);
}

.secondary-button-error:focus {
    border-radius: 8px;
    border: 2px solid var(--Error-Red-100, #C70101);
    background: var(--Error-Red-10, #FFEFEF);
}

.secondary-button-error:disabled {
    border-radius: 8px;
    border: 1px solid var(--Error-Red-100, #C70101);
    opacity: 0.4;
}

/* ======================================================================== */
/* delete button */
.delete-button {
    display: inline-flex;
    width: 100%;
    height: 48px;
    padding: 13px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;

    border-radius: 8px;
    border: 1px solid var(--Error-Red-100, #C70101);
    background: var(--Core-Pure-White, #FFF);

    color: var(--Error-Red-100, #C70101);
    text-align: center;
    font-family: var(--font-family-body, "DM Sans");
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: 0.28px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.delete-button i,
.delete-button img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.delete-button:hover {
    background: var(--Error-Red-3, #FDF7F7);
}

.delete-button:active {
    border-radius: 8px;
    border: 1px solid var(--Error-Red-100, #C70101);
    background: var(--Error-Red-10, #FFEFEF);
}

.delete-button:focus-visible {
    border: 2px solid var(--Error-Red-100, #C70101);
    background: var(--Error-Red-3, #FDF7F7);
}

.delete-button:disabled,
.delete-button.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ======================================================================== */
/* secondary button */
.secondary-button {
    display: flex;
    width: 100%;
    height: 48px;
    padding: 13px 22px;
    justify-content: center;
    align-items: center;
    gap: 6px;

    border-radius: 8px;
    border: 1px solid rgba(0, 113, 206, 0.80);
    background-image:
        var(--Core-Skyline-Gradient, linear-gradient(124deg, rgba(0, 113, 206, 0.80) -8.3%, #005AB6 43.6%, #062F87 97.5%)),
        linear-gradient(var(--Core-Pure-White, #FFF), var(--Core-Pure-White, #FFF));
    background-origin: border-box;
    background-clip: text, padding-box;
    -webkit-background-clip: text, padding-box;

    text-align: center;
    font-family: var(--font-family-body, "DM Sans");
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 14.4px */
    letter-spacing: 0.24px;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.secondary-button:hover {
    border: 1px solid rgba(0, 113, 206, 0.80);
    border-radius: 8px;
    background-image:
        var(--Core-Skyline-Gradient, linear-gradient(124deg, rgba(0, 113, 206, 0.80) -8.3%, #005AB6 43.6%, #062F87 97.5%)),
        linear-gradient(var(--Neutrals-Cloud-Blue, #F1F7FE), var(--Neutrals-Cloud-Blue, #F1F7FE));
    background-clip: text, padding-box;
    -webkit-background-clip: text, padding-box;
}
.secondary-button:active {
    border-radius: 8px;
    border: 1px solid rgba(0, 113, 206, 0.80);
    background-image:
        var(--Core-Skyline-Gradient, linear-gradient(124deg, rgba(0, 113, 206, 0.80) -8.3%, #005AB6 43.6%, #062F87 97.5%)),
        linear-gradient(var(--Tints-Blue-10, #E5F1FA), var(--Tints-Blue-10, #E5F1FA));
    background-clip: text, padding-box;
    -webkit-background-clip: text, padding-box;
}

.secondary-button:focus {
    border-radius: 8px;
    border: 1px solid rgba(0, 113, 206, 0.80);
    background-image:
        var(--Core-Skyline-Gradient, linear-gradient(124deg, rgba(0, 113, 206, 0.80) -8.3%, #005AB6 43.6%, #062F87 97.5%)),
        linear-gradient(var(--Tints-Blue-10, #E5F1FA), var(--Tints-Blue-10, #E5F1FA));
    background-clip: text, padding-box;
    -webkit-background-clip: text, padding-box;
}

.secondary-button:disabled {
    border-radius: 8px;
    border: 1px solid rgba(0, 113, 206, 0.80);
    opacity: 0.4;
}

/* ======================================================================== */
/* tertiary button */
.tertiary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 42px;
    padding: 13px 16px;
    border: none;
    border-radius: 8px;
    background: var(--Neutrals-Cloud-Blue, #F1F7FE);
    color: transparent;
    text-align: center;
    font-family: var(--font-family-body, "DM Sans");
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: 0.28px;
    cursor: pointer;
    transition: var(--t-fast);
    text-decoration: none;
    white-space: nowrap;
}

.tertiary-button:hover {
    border-radius: 8px;
    background: var(--Tints-Blue-10, #E5F1FA);
}

.tertiary-button.active {
    opacity: 0.85;
}

.tertiary-button:disabled {
    opacity: 0.4;
    cursor: default;
}

.tertiary-button img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.tertiary-button__label {
    background: var(--Core-Skyline-Gradient, linear-gradient(124deg, rgba(0, 113, 206, 0.80) -8.3%, #005AB6 43.6%, #062F87 97.5%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ======================================================================== */
/* active filter pills */
.page-filters-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 0;
    border-top: none;
}

.page-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    box-sizing: border-box;
    padding: 8px 16px;
    border: 0.5px solid rgba(0, 113, 206, 0.80);
    border-radius: 24px;
    background: var(--card);
    color: var(--Neutrals-Panel-Gray, #626262);
    text-align: center;
    font-family: var(--font-family-body, "DM Sans");
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.24px;
    position: relative;
}

.page-filter-pill button {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    color: var(--muted);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.page-filter-pill button img {
    display: block;
    width: 12px;
    height: 12px;
}

.page-filter-pill button:hover {
    color: var(--waypoint-coral);
}

.page-clear-all,
button.page-clear-all {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border: none;
    border-radius: 24px;
    background: var(--Core-Skyline-Gradient, linear-gradient(124deg, rgba(0, 113, 206, 0.80) -8.3%, #005AB6 43.6%, #062F87 97.5%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-family: var(--font-family-body, "DM Sans");
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: 0.28px;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--t-fast);
}

.page-clear-all:hover,
button.page-clear-all:hover {
    background-color: var(--blue-10);
}

/* ======================================================================== */
/* view toggles */
.page-view-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    background: var(--bg);
}

.page-view-btn {
    width: 53px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    background: var(--Tints-Blue-2, #FAFCFE);
    color: var(--muted);
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    transition: var(--t-fast);
}

.page-view-btn img {
    width: 24px;
    height: 24px;
    display: block;
    flex-shrink: 0;
}

.page-view-btn:hover,
.page-view-btn.active {
    border-radius: 6px;
    background: var(--Neutrals-Cloud-Blue, #F1F7FE);
}

@media (max-width: 560px) {
    .page-view-btn--table {
        display: none;
    }
}

/* ======================================================================== */
/* desktop listing rows */
.page-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
}

.page-list-item {
    position: relative;
    margin-bottom: 24px;
    border-radius: 8px;
}

.page-list-item--slidable {
    overflow: hidden;
    margin-bottom: 8px;
}

.page-list-row {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    border-radius: 8px;
    border: 1px solid var(--Neutrals-Light-Gray, #F1F1F1);
    background: var(--Core-Pure-White, #FFF);
    box-shadow: 10px 12px 40px 4px rgba(0, 90, 182, 0.06);
    transition: var(--t-fast);
    animation: fadeUp .22s ease both;
}

.page-list-row--clickable {
    cursor: pointer;
}

.page-list-row:hover {
    border-radius: 8px;
    border: 1px solid var(--Neutrals-Light-Gray, #F1F1F1);
    background: var(--Neutrals-Cloud-Blue, #F1F7FE);
    box-shadow: 10px 12px 40px 4px rgba(0, 90, 182, 0.06);
}

.page-list-item--slidable .page-list-row {
    transition: transform 0.3s ease, background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

.page-list-item--slidable.active .page-list-row {
    transform: translateX(-120px);
}

.page-list-actions-bg {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 120px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding-left: 12px;
    background: #f8f9ff;
}

.page-list-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    flex: 1;
    width: 100%;
}

.page-list-main--flight {
    display: grid;
    grid-template-columns: 46px minmax(0, calc(50% - 62px)) minmax(0, calc(50% - 16px));
    column-gap: 16px;
}

.page-list-main--flight .page-list-primary,
.page-list-main--flight .page-list-secondary--flight {
    width: auto;
    min-width: 0;
}

.page-list-main--trip {
    display: grid;
    grid-template-columns: minmax(0, calc(50% - 8px)) minmax(0, calc(50% - 8px));
    column-gap: 16px;
}

.page-list-main--trip .page-list-primary,
.page-list-main--trip .page-list-secondary--trip {
    width: auto;
    min-width: 0;
}

.page-list-logo {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    overflow: hidden;
    color: var(--sky-blue);
    font-size: 9px;
    font-weight: 800;
}

.page-list-logo img {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.page-list-primary {
    flex: 0 1 50%;
    min-width: 0;
}

.page-list-logo + .page-list-primary {
    flex-basis: calc(50% - 62px);
}

.page-list-primary[onclick] {
    cursor: pointer;
}

.page-list-meta {
    margin-bottom: 2px;
    color: var(--Neutrals-Panel-Gray, #626262);
    font-family: var(--font-family-body, "DM Sans");
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: 0.28px;
    text-transform: uppercase;
}

.page-list-meta-separator {
    display: inline-block;
    margin: 0 6px;
}

.page-list-title {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 0;
    font-family: var(--font-family-body, "DM Sans");
    font-size: var(--font-size-lg, 20px);
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: 0.4px;
    background: var(--Core-Skyline-Gradient, linear-gradient(124deg, rgba(0, 113, 206, 0.80) -8.3%, #005AB6 43.6%, #062F87 97.5%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.page-list-route {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    -webkit-text-fill-color: initial;
    color: inherit;
}

.page-list-route-segment {
    background: var(--Core-Skyline-Gradient, linear-gradient(124deg, rgba(0, 113, 206, 0.80) -8.3%, #005AB6 43.6%, #062F87 97.5%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.page-list-route-arrow {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
}

.page-list-secondary {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.page-list-secondary--flight {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 50%;
    gap: 16px;
}

.page-list-secondary--trip {
    display: grid;
    grid-template-columns: 25% minmax(0, 1fr);
    width: 50%;
    gap: 16px;
}

.page-list-secondary--trip .page-list-chip--trip-count,
.page-list-secondary--trip .page-list-tags {
    min-width: 0;
}

.page-list-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--Neutrals-Panel-Gray, #626262);
    font-family: var(--font-family-body, "DM Sans");
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0.28px;
    white-space: nowrap;
}

.page-list-chip img {
    display: block;
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
}

.page-list-chip img.page-list-chip__icon--plane {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
}

.page-list-secondary--flight .page-list-chip {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-list-secondary--flight .page-list-chip--cabin img {
    filter: brightness(0) saturate(100%) invert(38.43%);
}

.page-list-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    overflow: hidden;
}

.page-list-tag {
    padding: 6px 16px;
    border: none;
    border-radius: 24px;
    background: var(--Tints-Blue-10, #E5F1FA);
    white-space: nowrap;
}

.page-list-tag__text {
    text-align: center;
    font-family: var(--font-family-body, "DM Sans");
    font-size: var(--font-size-xs, 12px);
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
    letter-spacing: 0.03px;
    text-transform: uppercase;
    background: var(--Core-Skyline-Gradient, linear-gradient(124deg, rgba(0, 113, 206, 0.80) -8.3%, #005AB6 43.6%, #062F87 97.5%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.page-list-inline-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.page-list-action {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: var(--t-fast);
}

.page-list-inline-actions .page-list-action {
    padding: 10px;
}

.page-list-actions-bg .page-list-action {
    width: 100%;
    height: 100%;
}

.page-list-action--edit {
    background: var(--Neutrals-Cloud-Blue, #F1F7FE);
    color: var(--sky-blue);
}

.page-list-action--edit:hover {
    background: var(--blue-20);
    color: var(--cruise-blue);
}

.page-list-actions-bg .page-list-action--edit {
    border-radius: 12px 0 0 12px;
}

.page-list-action--delete {
    background: var(--Error-Red-10, #FFEFEF);
    color: var(--Error-Red-100, #C70101);
}

.page-list-action--delete:hover {
    background: #ffe2e2;
    color: #a40000;
}

.page-list-actions-bg .page-list-action--delete {
    border-radius: 0 12px 12px 0;
}

.page-list-action img {
    width: 20px;
    height: 20px;
    display: block;
}

.page-list-actions-bg .page-list-action img {
    width: 14px;
    height: 14px;
}

.page-list-chevron {
    flex-shrink: 0;
    color: var(--sky-blue);
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
}

.page-list-item.active .page-list-chevron {
    transform: rotate(180deg);
}

/* ======================================================================== */
/* toolbar dropdown */
.page-sort-control {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
}

.page-sort-dropdown {
    position: relative;
}

.page-sort-dropdown > summary {
    list-style: none;
}

.page-sort-dropdown > summary::-webkit-details-marker {
    display: none;
}

.page-sort-dropdown > summary.tertiary-button {
    box-sizing: border-box;
    border: 1px solid var(--Neutrals-Runway-Gray, #C4C4C4);
    background: var(--Core-Pure-White, #FFF);
    color: var(--Neutrals-Panel-Gray, #626262);
    font-size: var(--font-size-sm, 16px);
    font-weight: 400;
    letter-spacing: 0.32px;
    opacity: 1;
    transition: border-color .18s ease, background .18s ease;
}

.page-sort-dropdown > summary.tertiary-button:hover {
    border: 1px solid rgba(0, 113, 206, 0.80);
    background: var(--Neutrals-Cloud-Blue, #F1F7FE);
}

.page-sort-dropdown[open] > summary.tertiary-button {
    border: 2px solid rgba(0, 113, 206, 0.80);
    background: var(--Core-Pure-White, #FFF);
    box-shadow: none;
    outline: none;
}

.page-sort-dropdown .tertiary-button__label {
    background: none;
    color: inherit;
    -webkit-text-fill-color: currentColor;
}

.page-sort-direction {
    box-sizing: border-box;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #0071CE;
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease;
}

.page-sort-direction:hover,
.page-sort-direction:focus {
    background: var(--Neutrals-Cloud-Blue, #F1F7FE);
    color: #0071CE;
    outline: none;
}

.page-sort-dropdown__chevron {
    background: var(--Core-Skyline-Gradient, linear-gradient(124deg, rgba(0, 113, 206, 0.80) -8.3%, #005AB6 43.6%, #062F87 97.5%));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-size: 14px;
    line-height: 1;
    transition: transform .18s ease;
}

.page-sort-dropdown[open] .page-sort-dropdown__chevron {
    transform: rotate(180deg);
}

.page-sort-dropdown__menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1000;
    min-width: 280px;
    overflow: visible;
    border: none;
    border-radius: 8px;
    background: #fff;
    box-shadow: 10px 12px 40px 4px rgba(0, 90, 182, .06);
    padding: 16px 0 12px;
}

.page-sort-dropdown__title {
    padding: 0 24px 14px;
    color: var(--Neutrals-Panel-Gray, #626262);
    font-family: var(--font-family-body, "DM Sans");
    font-size: var(--font-size-sm, 16px);
    font-weight: 400;
    line-height: 120%;
    letter-spacing: 0.32px;
}

.page-sort-dropdown__item {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 10px 24px;
    border: 0;
    background: transparent;
    color: var(--Neutrals-Panel-Gray, #626262);
    font-family: var(--font-family-body, "DM Sans");
    font-size: var(--font-size-sm, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: 0.32px;
    text-decoration: none;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease;
}

.page-sort-dropdown__item:hover {
    background: #F1F7FE;
}

.page-sort-dropdown__item.selected {
    background: transparent;
    color: #0071CE;
}

.page-sort-dropdown__item.selected:hover {
    background: #F1F7FE;
}

.page-sort-dropdown__item.selected span,
.page-sort-dropdown__item.selected i {
    color: #0071CE;
}

.page-sort-dropdown__radio {
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: 2px solid #9AA4AF;
    border-radius: 50%;
    flex: 0 0 20px;
    position: relative;
}

.page-sort-dropdown__item.selected .page-sort-dropdown__radio {
    border-color: #0071CE;
}

.page-sort-dropdown__item.selected .page-sort-dropdown__radio::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0071CE;
    transform: translate(-50%, -50%);
}

.page-sort-dropdown__divider {
    height: 1px;
    margin: 12px 0;
    background: #E1E6EC;
}

.page-sort-dropdown__divider--footer {
    margin: 12px 0;
}

.page-sort-dropdown__direction i {
    width: 20px;
    flex: 0 0 20px;
    color: #626262;
    font-size: 18px;
    line-height: 1;
    text-align: center;
}

.page-sort-dropdown__footer {
    padding: 10px 16px 16px;
}

.page-sort-dropdown__apply {
    width: 100%;
    min-height: 40px;
    justify-content: center;
}

/* ======================================================================== */
/* Custom select dropdown */
.custom-select-field {
    position: relative;
}

.custom-select-field > input[type="hidden"] {
    display: none;
}

.custom-select-field__trigger {
    position: relative;
    width: 100%;
    height: 56px;
    padding: 0 40px 0 16px;
    border: 1px solid var(--Neutrals-Runway-Gray, #C4C4C4);
    border-radius: 8px;
    background: var(--Core-Pure-White, #FFF);
    color: var(--Neutrals-Panel-Gray, #626262);
    font-family: var(--font-family-body, "DM Sans");
    font-size: var(--font-size-sm, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: 0.32px;
    outline: none;
    cursor: pointer;
    box-sizing: border-box;
    text-align: left;
    display: flex;
    align-items: center;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.custom-select-field--with-label > .custom-select-field__trigger {
    min-height: 56px;
    padding: 24px 40px 8px 16px;
}

.custom-select-field--with-label > .custom-select-field__trigger > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-select-field__trigger::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230071CE' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    transition: transform .18s ease;
}

.custom-select-field.open .custom-select-field__trigger::after {
    transform: translateY(-50%) rotate(180deg);
}

.custom-select-field__trigger:hover {
    border-color: rgba(0, 113, 206, 0.80);
    background: var(--Neutrals-Cloud-Blue, #F1F7FE);
}

.custom-select-field.open .custom-select-field__trigger,
.custom-select-field__trigger:focus {
    border: 2px solid rgba(0, 113, 206, 0.80);
    background: var(--Core-Pure-White, #FFF);
    box-shadow: none;
}

.custom-select-field__menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1000;
    display: none;
    max-height: var(--custom-select-menu-max-height, 280px);
    overflow-y: auto;
    background: #fff;
    border: none;
    border-radius: 8px;
    box-shadow: 10px 12px 40px 4px rgba(0, 90, 182, .06);
}

.custom-select-field.open .custom-select-field__menu {
    display: block;
}

.custom-select-field.custom-select-field--open-up .custom-select-field__menu {
    top: auto;
    bottom: calc(100% + 4px);
}

.custom-select-field__option {
    width: 100%;
    padding: 12px 16px 12px 42px;
    border: 0;
    border-bottom: 1px solid #F1F1F1;
    background: #fff;
    color: var(--Neutrals-Panel-Gray, #626262);
    font-family: var(--font-family-body, "DM Sans");
    font-size: var(--font-size-sm, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: 0.32px;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.custom-select-field__option:last-child {
    border-bottom: none;
}

.custom-select-field__option:hover,
.custom-select-field__option:focus {
    background: #F1F7FE;
    outline: none;
}

.custom-select-field__option.selected {
    background: var(--Neutrals-Cloud-Blue, #F1F7FE);
    color: #0071CE;
}

/* ======================================================================== */
/* Shared guided date input and Air Datepicker */
.guided-date-wrap {
    position: relative;
}

.guided-date-input {
    padding-right: 48px !important;
}

.fl-field.guided-date-wrap label {
    top: 10px;
    transform: none;
    color: #0071CE;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
}

.guided-date-button {
    position: absolute;
    top: 28px;
    right: 10px;
    z-index: 5;
    width: 32px;
    height: 32px;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    background: transparent url("../icons/calendar-icon.svg") center / 20px no-repeat;
    cursor: pointer;
}

.guided-date-picker {
    position: absolute;
    top: 50%;
    right: 18px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.air-datepicker.guided-date-calendar {
    width: 305px;
    padding: 16px;
    border: 1px solid #E0E6EF;
    border-radius: 0;
    box-shadow: 10px 12px 40px 4px rgba(0, 90, 182, 0.06);
    font-family: "DM Sans", Helvetica, sans-serif;
}

.guided-date-wrap.guided-date-wrap--open-up .air-datepicker.guided-date-calendar {
    top: auto !important;
    bottom: calc(100% + 4px) !important;
}

.guided-date-calendar .air-datepicker-body--cells.-months-,
.guided-date-calendar .air-datepicker-body--cells.-years- {
    min-height: 0;
    grid-auto-rows: 48px;
}

.guided-date-calendar .air-datepicker-body--cells.-days- {
    row-gap: 4px;
}

.guided-date-calendar .air-datepicker-nav {
    margin-bottom: 8px;
    padding: 0;
    border-bottom: 0;
    background: var(--Core-Pure-White, #FFF);
}

.guided-date-calendar .air-datepicker-nav--title,
.guided-date-calendar .air-datepicker-nav--title i {
    background: var(--Core-Skyline-Gradient, linear-gradient(124deg, rgba(0, 113, 206, .80) -8.3%, #005AB6 43.6%, #062F87 97.5%));
    background-clip: text;
    color: transparent;
    font-family: var(--font-family-body, "DM Sans");
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: .28px;
    text-transform: uppercase;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.guided-date-calendar .air-datepicker-nav--action {
    color: #005AB6;
}

.guided-date-calendar .air-datepicker-nav--action path {
    stroke: #005AB6;
}

.guided-date-calendar .air-datepicker-body--day-name {
    color: var(--Neutrals-Runway-Gray, #C4C4C4);
    font-family: var(--font-family-body, "DM Sans");
    font-size: var(--font-size-xs, 12px);
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: .24px;
    text-align: center;
    text-transform: uppercase;
}

.guided-date-calendar .air-datepicker-cell.-day- {
    display: flex;
    width: 36px;
    height: 36px;
    margin: 1.5px auto;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    color: var(--Neutrals-Panel-Gray, #626262);
    font-family: var(--font-family-body, "DM Sans");
    font-size: var(--font-size-sm, 16px);
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: .32px;
    text-align: center;
}

.guided-date-calendar .air-datepicker-cell.-month-,
.guided-date-calendar .air-datepicker-cell.-year- {
    color: var(--Neutrals-Panel-Gray, #626262);
    font-family: var(--font-family-body, "DM Sans");
    font-size: var(--font-size-sm, 16px);
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: .32px;
    text-align: center;
    text-transform: uppercase;
}

.guided-date-calendar .air-datepicker-cell.-day-.-focus- {
    border-radius: 50%;
    background: #F1F7FE;
}

.guided-date-calendar .air-datepicker-cell.-day-.-current- {
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px #0071CE;
    color: var(--Neutrals-Panel-Gray, #626262);
}

.guided-date-calendar .air-datepicker-cell.-day-.-selected-,
.guided-date-calendar .air-datepicker-cell.-day-.-selected-.-current- {
    border-radius: 50%;
    background: var(--Core-Skyline-Gradient, linear-gradient(124deg, rgba(0, 113, 206, .80) -8.3%, #005AB6 43.6%, #062F87 97.5%));
    box-shadow: none;
    color: var(--Label-Color-Dark-Primary, #FFF);
    font-family: var(--font-family-body, "DM Sans");
    font-size: var(--font-size-sm, 16px);
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: .32px;
    text-align: center;
}

/* ======================================================================== */
/* text fields */
.fl-field {
    position: relative;
}

.fl-field input,
.fl-field select,
.fl-field textarea {
    width: 100%;
    height: 56px;
    padding: 24px 16px 8px;
    border-radius: 8px;
    border: 1px solid var(--Core-Skyline-Gradient, rgba(0, 113, 206, 0.80));
    border-radius: 10px;
    background: #fff;
    font-family: "DM Sans", Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #26262A;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    margin-bottom: 12px;
}

.fl-field textarea {
    height: auto;
    min-height: 110px;
    padding-top: 28px;
    resize: vertical;
    line-height: 1.5;
}

.fl-field label {
    position: absolute;
    left: 16px;
    /* top: 50%; */
    /* transform: translateY(-50%); */
    font-family: "DM Sans", Helvetica, sans-serif;
    /* font-size: 11px; */
    font-weight: 400;
    /* color: #A0A8B8; */
    pointer-events: none;
    transition: top .18s ease, font-size .18s ease, color .18s ease, font-weight .18s ease;
    white-space: nowrap;
    line-height: 1;

    top: 10px;
    transform: none;
    font-size: 11px;
    font-weight: 600;
    color: #0071CE;
    letter-spacing: 0.02em;
}

.fl-field textarea~label {
    top: 20px;
    transform: none;
}

.fl-field label .req {
    color: #F05F6E;
    margin-left: 2px;
}

.fl-field input:focus~label,
.fl-field input:not(:placeholder-shown)~label,
.fl-field select:focus~label,
.fl-field select.has-value~label,
.fl-field textarea:focus~label,
.fl-field textarea:not(:placeholder-shown)~label,
.fl-field.floated label {
    top: 10px;
    transform: none;
    font-size: 11px;
    font-weight: 600;
    color: #0071CE;
    letter-spacing: 0.02em;
}

.fl-field input:focus,
.fl-field select:focus,
.fl-field textarea:focus {
    border-radius: 8px;
    border: 2px solid var(--Core-Skyline-Gradient, rgba(0, 113, 206, 0.80));
}

.fl-field input[type="date"]::-webkit-datetime-edit,
.fl-field input[type="time"]::-webkit-datetime-edit {
    color: transparent;
}

.fl-field input[type="date"]:focus::-webkit-datetime-edit,
.fl-field input[type="time"]:focus::-webkit-datetime-edit,
.fl-field input[type="date"].has-value::-webkit-datetime-edit,
.fl-field input[type="time"].has-value::-webkit-datetime-edit {
    color: #26262A;
}

.fl-field.fl-field_error input,
.fl-field.fl-field_error select,
.fl-field.fl-field_error textarea {
    border: 1px solid #C70101;
    background: #FDF7F7;
}

/* Also ensure the label turns red when in error state */
.fl-field.fl-field_error label,
.fl-field.fl-field_error input:focus~label,
.fl-field.fl-field_error input:not(:placeholder-shown)~label {
    color: #C70101 !important;
}

.fl-field.fl-field_error input:focus {
    border-color: #C70101;
    box-shadow: 0 0 0 2px rgba(199, 1, 1, 0.2);
}

.fl-field_error input {
    display: flex;
    height: 56px;
    padding: 12px 16px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Error-Red-100, #C70101);
    background: var(--Error-Red-3, #FDF7F7);
}

.fl-field_error_label {
    position: absolute;
    left: 16px;
    top: 30%;
    transform: translateY(-50%);
    font-family: "DM Sans", Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #C70101;
    pointer-events: none;
    transition: top .18s ease, font-size .18s ease, color .18s ease, font-weight .18s ease;
    white-space: nowrap;
    line-height: 1;
}

.fl-field select {
    cursor: pointer;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230071CE' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.error_message {
    margin-top: 6px;
    color: var(--Error-Red-100, #C70101);
    font-family: var(--font-family-body, "DM Sans");
    font-size: var(--font-size-xs, 12px);
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
    /* 15px */
    letter-spacing: 0.24px;
    padding-left: 5px;
}

/* Position the icon */
.fl-field.has-icon .input-icon {
    position: absolute;
    left: 16px;
    top: 35px;
    /* Centered relative to the 56px height, accounting for padding */
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
    transition: stroke .18s ease;
}

/* Add space for the icon inside the input */
.fl-field.has-icon input {
    padding-left: 44px;
    /* 16px (left) + 18px (svg) + 10px (gap) */
}

/* Shift the label to the right to clear the icon */
.fl-field.has-icon label {
    left: 44px;
}

/* Active State: When focused or filled, the label floats up */
/* We move the label back to the left (16px) for a cleaner look when it's small */
.fl-field.has-icon input:focus~label,
.fl-field.has-icon input:not(:placeholder-shown)~label {
    left: 16px;
    color: #0071CE;
}

/* Change icon color on focus */
.fl-field.has-icon input:focus~.input-icon {
    stroke: #0071CE;
}

/* ================================================= */
/* Dropdown + Textfield */
.fp-wrapper {
    position: relative;
    margin-bottom: 14px;
}

.fp-container {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0;
    border: 1px solid #0071cecc;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.fp-container:focus-within {
    border-color: rgba(0, 113, 206, 0.8);
    /* box-shadow: 0 0 0 3px rgba(0, 113, 206, 0.08);  */
    border: 2px solid #0071cecc;
}

.fp-currency-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 14px;
    min-width: 80px;
    background: #f8f9fb;
    border: none;
    font-family: "DM Sans", Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #26262A;
    cursor: pointer;
    outline: none;
    position: relative;
    user-select: none;
}

.fp-currency-trigger::after {
    content: '';
    width: 10px;
    height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230071CE' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
    transition: transform .18s ease;
}

.fp-currency-trigger.open::after {
    transform: rotate(180deg);
}

.fp-currency-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    background: #fff;
    border: 1.5px solid #E0E6EF;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 90, 182, .12);
    z-index: 1000;
    overflow: hidden;
    display: none;
    min-width: 100px;
    z-index: 9999;
}

.fp-currency-dropdown.open {
    display: block;
}

.fp-currency-option {
    padding: 10px 14px;
    font-size: 13px;
    font-family: "DM Sans", Helvetica, sans-serif;
    color: #26262A;
    cursor: pointer;
    transition: background .15s ease;
    border-bottom: 1px solid #F1F1F1;
}

.fp-currency-option:last-child {
    border-bottom: none;
}

.fp-currency-option:hover {
    background: #F1F7FE;
}

.fp-currency-option.selected {
    background: #E8F0FE;
    color: #0071CE;
    font-weight: 600;
}

.fp-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.fp-input-group input {
    width: 100%;
    height: 60px;
    border: none;
    padding: 24px 16px 8px;
    background: #fff;
    font-family: "DM Sans", Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #26262A;
    outline: none;
    box-sizing: border-box;
}

.fp-input-group input:focus+.fp-label,
.fp-input-group input:not(:placeholder-shown)+.fp-label {
    top: 10px;
    transform: none;
    font-size: 11px;
    font-weight: 600;
    color: #0071CE;
}

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

.fp-input-group input[type=number] {
    -moz-appearance: textfield;
}

.fp-label {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "DM Sans", Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #A0A8B8;
    pointer-events: none;
    transition: top .18s ease, font-size .18s ease, color .18s ease, font-weight .18s ease;
    line-height: 1;
    z-index: 2;
}

.fp-wrapper.has-value .fp-label,
.fp-wrapper.focused .fp-label {
    top: 10px;
    transform: none;
    font-size: 11px;
    font-weight: 600;
    color: #0071CE;
    letter-spacing: 0.02em;
}

.password-wrapper {
    position: relative;
}

.password-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #A0A8B8;
    transition: color 0.18s ease;
    z-index: 10;
    /* Move icon down slightly if label is floated */
}

/* Ensure the icon color changes when the field is focused */
.fl-field:focus-within .password-toggle {
    color: #0071CE;
}

.password-toggle:hover {
    color: #26262A;
}

/* Adjust input padding so text doesn't go under the icon */
.password-wrapper input {
    padding-right: 48px !important;
}

.checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;



    border: 1.5px solid #E0E6EF;
    background: #fff;

    cursor: pointer;
    position: relative;
    transition: all 0.18s ease;

    display: grid;
    place-content: center;

    width: 14px;
    height: 14px;
    flex-shrink: 0;
    aspect-ratio: 1/1;
}

/* Hover */
.checkbox input[type="checkbox"]:hover {
    border-color: #0071CE;
}

/* Checked state */
.checkbox input[type="checkbox"]:checked {
    border: none;
    background: linear-gradient(123.84deg,
            rgba(0, 113, 206, 0.8) -8.3%,
            #005AB6 43.6%,
            #062F87 97.5%);
}

/* SVG check icon */
.checkbox input[type="checkbox"]::after {
    content: "";
    width: 12px;
    height: 12px;

    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17L4 12' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border-radius: 2px;

    transform: scale(0);
    transition: transform 0.18s ease;
}

/* Show SVG when checked */
.checkbox input[type="checkbox"]:checked::after {
    transform: scale(1);
}

/* Focus effect */
.checkbox input[type="checkbox"]:focus {
    box-shadow: 0 0 0 3px rgba(0, 113, 206, 0.08);
    border-color: rgba(0, 113, 206, 0.8);
}

/* ======================================================================== */
/* Shared form fields */
.form-field {
    position: relative;
}

.form-field {
    margin-bottom: 14px;
}

.form-input,
.form-select,
.form-textarea,
.form-readonly-value,
.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    min-height: 56px;
    padding: 24px 16px 8px;
    border: 1px solid rgba(0, 113, 206, 0.80);
    border-radius: 8px;
    background: var(--Core-Pure-White, #FFF);
    color: var(--Neutrals-Panel-Gray, #626262);
    font-family: var(--font-family-body, "DM Sans"), Helvetica, sans-serif;
    font-size: var(--font-size-sm, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: 0.32px;
    outline: none;
    box-sizing: border-box;
    transition: border-color .18s ease, background-color .18s ease;
    -webkit-appearance: none;
    appearance: none;
}

.form-input,
.form-select,
.form-textarea,
.form-field input,
.form-field select,
.form-field textarea {
    display: block;
}

.form-field input[type="text"],
.form-input[type="text"] {
    display: flex;
    max-width: 100%;
    height: 56px;
    min-height: 56px;
    padding: 16px 16px 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    border-radius: 8px;
    border: 1px solid var(--Neutrals-Runway-Gray, #C4C4C4);
    background: var(--Core-Pure-White, #FFF);
}

.form-field:not(.form-field-error) input[type="text"]:hover,
.form-input[type="text"]:not(:disabled):not(:focus):hover {
    border-radius: 8px;
    border: 1px solid rgba(0, 113, 206, 0.80);
    background: var(--Neutrals-Cloud-Blue, #F1F7FE);
}

.form-readonly-value {
    display: flex;
    align-items: center;
    font-weight: 600;
}

.form-textarea,
.form-field textarea {
    height: auto;
    min-height: 110px;
    padding-top: 28px;
    border-radius: 8px;
    border: 1px solid var(--Neutrals-Runway-Gray, #C4C4C4);
    background: var(--Core-Pure-White, #FFF);
    resize: vertical;
    line-height: 1.5;
}

.form-field:not(.form-field-error) textarea:hover,
.form-textarea:not(:disabled):not(:focus):hover {
    border-radius: 8px;
    border: 1px solid rgba(0, 113, 206, 0.80);
    background: var(--Neutrals-Cloud-Blue, #F1F7FE);
}

.form-label,
.form-field label {
    position: absolute;
    left: 16px;
    top: 10px;
    transform: none;
    font-family: var(--font-family-caption, "DM Sans");
    font-size: var(--font-size-xs, 12px);
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: 0.025px;
    background: var(--Core-Skyline-Gradient, linear-gradient(124deg, rgba(0, 113, 206, 0.80) -8.3%, #005AB6 43.6%, #062F87 97.5%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    pointer-events: none;
    transition: color .18s ease;
    white-space: nowrap;
    z-index: 1;
}

.form-label .req,
.form-field label .req {
    color: inherit;
    -webkit-text-fill-color: transparent;
    margin-left: 2px;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-radius: 8px;
    border: 2px solid rgba(0, 113, 206, 0.80) !important;
    background: var(--Core-Pure-White, #FFF) !important;
    box-shadow: none !important;
    outline: none !important;
    outline-offset: 0;
}

.form-input::placeholder,
.form-textarea::placeholder,
.form-field input::placeholder,
.form-field textarea::placeholder {
    color: var(--Neutrals-Placeholder, #8E8E93);
    font-family: var(--font-family-body, "DM Sans"), Helvetica, sans-serif;
    font-size: var(--font-size-sm, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: 0.32px;
    opacity: 1;
}

.form-field.has-icon .form-input,
.form-field.has-icon input {
    padding-left: 42px;
}

.form-field--with-status .form-input,
.form-field--with-status .form-textarea,
.form-field--with-status input,
.form-field--with-status textarea {
    padding-right: 44px;
}

.form-field.has-icon .form-label,
.form-field.has-icon label {
    left: 42px;
}

.form-field-error .form-input,
.form-field-error .form-select,
.form-field-error .form-textarea,
.form-field-error input,
.form-field-error select,
.form-field-error textarea,
.af-field-error input,
.af-field-error select,
.af-field-error textarea {
    border-color: var(--Error-Red-100, #C70101) !important;
    background: var(--Error-Red-3, #FDF7F7) !important;
    box-shadow: none !important;
}

.form-field-error .form-input:focus,
.form-field-error .form-select:focus,
.form-field-error .form-textarea:focus,
.form-field.form-field-error input:focus,
.form-field.form-field-error select:focus,
.form-field.form-field-error textarea:focus {
    border: 2px solid var(--Error-Red-100, #C70101) !important;
    background: var(--Error-Red-3, #FDF7F7) !important;
    box-shadow: none !important;
    outline: none !important;
}

.form-field-error .form-label,
.form-field-error label,
.form-field-error label .req,
.form-field-error input:focus~label,
.form-field-error input:focus~label .req,
.form-field-error input:not(:placeholder-shown)~label,
.form-field-error input:not(:placeholder-shown)~label .req,
.form-field-error select:focus~label,
.form-field-error select.has-value~label,
.form-field-error textarea:focus~label,
.form-field-error textarea:not(:placeholder-shown)~label,
.af-field-error label {
    color: var(--Error-Red-100, #C70101) !important;
    background: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: var(--Error-Red-100, #C70101) !important;
}

.form-field-message {
    display: none;
    margin-top: 6px;
    margin-bottom: 6px;
    color: var(--Error-Red-100, #C70101);
    font-family: var(--font-family-body, "DM Sans");
    font-size: var(--font-size-xs, 12px);
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
    letter-spacing: 0.24px;
    background: transparent;
    border: none;
    padding: 0 16px;
    border-radius: 0;
}

/* Shared add-form inline action button */
.add-form-add-btn {
    display: inline-flex;
    align-items: center;
    text-align: center;
    gap: 6px;
    font-family: var(--font-family-body, "DM Sans");
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: 0.28px;
    color: var(--sky-blue);
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 0;
    margin-top: 2px;
    background: var(--Core-Skyline-Gradient, linear-gradient(124deg, rgba(0, 113, 206, 0.80) -8.3%, #005AB6 43.6%, #062F87 97.5%));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.add-form-add-btn i {
    -webkit-text-fill-color: var(--sky-blue);
}

.add-form-add-btn:hover {
    opacity: .8;
}

/* Shared add-form action bars */
.add-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    gap: 12px;
    margin-top: 32px;
}

.add-form-actions--step {
    margin-top: 28px;
}

.add-form-btn-cancel {
    width: 48%;
    cursor: pointer;
    text-decoration: none;
}

.add-form-btn-save {
    width: 48%;
}

.add-form-btn-next {
    width: 48%;
    cursor: pointer;
}

.add-form-actions--step .add-form-btn-cancel {
    flex: 1;
    width: auto;
}

.add-form-actions--step .add-form-btn-save,
.add-form-actions--step .add-form-btn-next {
    flex: 2;
    width: auto;
}

.add-form-actions.step-first .add-form-btn-cancel,
.add-form-actions.step-first .add-form-btn-save,
.add-form-actions.step-first .add-form-btn-next {
    flex: 1 1 0;
    width: auto;
}

@media (max-width: 768px) {
    .add-form-actions {
        flex-direction: column-reverse;
    }

    .add-form-btn-cancel,
    .add-form-btn-save,
    .add-form-btn-next {
        width: 100%;
    }

    .add-form-actions--step .add-form-btn-cancel,
    .add-form-actions--step .add-form-btn-save,
    .add-form-actions--step .add-form-btn-next {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* Shared add-form search wrapper */
.add-form-search {
    position: relative;
}

.add-form-search.form-field {
    margin-bottom: 12px;
}

.add-form-search .form-field {
    margin-bottom: 0;
}

.add-form-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--runway-gray);
    font-size: 14px;
    pointer-events: none;
    z-index: 2;
}

/* Shared add-form tag editor */
.add-form-tags-wrap {
    border: 1px solid var(--Neutrals-Runway-Gray, #C4C4C4);
    border-radius: 10px;
    padding: 12px 14px;
    background: #fff;
    min-height: 56px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    cursor: text;
    transition: border-color .18s, box-shadow .18s, background .18s;
}

.add-form-tags-wrap:hover {
    border: 1px solid rgba(0, 113, 206, 0.80);
    background: var(--Neutrals-Cloud-Blue, #F1F7FE);
}

.add-form-tags-wrap:focus-within {
    border: 2px solid rgba(0, 113, 206, 0.80);
    background: var(--Core-Pure-White, #FFF);
    box-shadow: none;
}

.add-form-tags-wrap.form-field-error,
.add-form-tags-wrap.form-field-error:hover,
.add-form-tags-wrap.form-field-error:focus-within {
    border: 1px solid var(--Error-Red-100, #C70101) !important;
    background: var(--Error-Red-3, #FDF7F7) !important;
    box-shadow: none !important;
}

.add-form-tag-input,
.add-form-tag-input:focus {
    border: none !important;
    outline: none !important;
    color: var(--Neutrals-Panel-Gray, #626262);
    font-family: var(--font-family-body, "DM Sans");
    font-size: var(--font-size-sm, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: 0.32px;
    background: transparent !important;
    min-width: 140px;
    flex: 1;
    min-height: auto;
    padding: 0;
    box-shadow: none !important;
}

.add-form-tag-input::placeholder {
    color: var(--Neutrals-Placeholder, #8E8E93);
    font-family: var(--font-family-body, "DM Sans");
    font-size: var(--font-size-sm, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: 0.32px;
    opacity: 1;
}

.add-form-tag-chip {
    display: flex;
    height: 28px;
    padding: 6px 16px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    border-radius: 24px;
    background: var(--Tints-Blue-10, #E5F1FA);
    white-space: nowrap;
    box-sizing: border-box;
}

.add-form-tag-chip-text {
    text-align: center;
    font-family: var(--font-family-body, "DM Sans");
    font-size: var(--font-size-xs, 12px);
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
    letter-spacing: 0.03px;
    background: var(--Core-Skyline-Gradient, linear-gradient(124deg, rgba(0, 113, 206, 0.80) -8.3%, #005AB6 43.6%, #062F87 97.5%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
}

.add-form-tag-x {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    line-height: 1;
    color: var(--panel-gray);
}

.add-form-tag-x:hover {
    color: var(--waypoint-coral);
}

.add-form-tag-x img {
    display: block;
    width: 12px;
    height: 12px;
    object-fit: contain;
    pointer-events: none;
}

.add-form-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/* Shared add-form photo upload */
.add-form-photo-zone {
    border: 0.5px dashed rgba(0, 113, 206, 0.80);
    border-radius: 8px;
    padding: 24px 0;
    text-align: center;
    cursor: pointer;
    transition: var(--t-fast);
    background: var(--Core-Pure-White, #FFF);
    position: relative;
}

.add-form-photo-zone:hover,
.add-form-photo-zone:focus-within {
    border-color: rgba(0, 113, 206, 0.80);
    background: var(--Core-Pure-White, #FFF);
}

.add-form-photo-zone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.add-form-photo-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
}

.add-form-photo-title {
    color: var(--Neutrals-Panel-Gray, #626262);
    font-family: var(--font-family-body, "DM Sans");
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: 0.28px;
    margin-bottom: 6px;
}

.add-form-photo-sub {
    color: var(--Neutrals-Placeholder, #8E8E93);
    font-family: var(--font-family-body, "DM Sans");
    font-size: var(--font-size-xs, 12px);
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
    letter-spacing: 0.24px;
}

.add-form-photo-previews {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.add-form-photo-preview {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #a8d4f7;
    aspect-ratio: 4 / 3;
    box-shadow: 10px 12px 40px 4px rgba(0, 90, 182, 0.06);
}

.add-form-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.add-form-photo-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: var(--panel-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

.add-form-photo-remove:hover {
    background: #fff;
}

.add-form-photo-remove img {
    width: 12px;
    height: 12px;
    display: block;
    object-fit: contain;
}

.add-form-photo-remove i {
    font-size: 12px;
    line-height: 1;
}

@media (max-width: 900px) {
    .add-form-photo-previews {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .add-form-photo-previews {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Layout */
.checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.checkbox p {
    margin: 0;
    font-size: 14px;
    color: #26262A;
    font-family: "DM Sans", Helvetica, sans-serif;
}

/* Bottom sliding modal components */
/* [Style for the trigger action button] */
.click-to-open-sheet-button {
    padding: 12px 24px;
    background-color: #0078d4;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.click-to-open-sheet-button:hover {
    background-color: #005a9e;
}

/* [Style for the full screen darkened backdrop] */
.dimmed-background-overlay-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: flex-end;
    /* Keeps modal at the bottom */
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* [Style for the white container sliding from bottom] */
.bottom-fixed-sliding-modal-container {
    width: 100%;
    background: #ffffff;
    /* 12px Top border radius as requested */
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    padding: 24px;
    box-sizing: border-box;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);

    /* Transform effect: Hidden below screen by default */
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.1, 0.9, 0.2, 1);
}







/* [Style for the header section containing title and exit] */
.modal-top-header-navigation-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

/* [Style for the close button inside the header] */
.close-modal-icon-action-button {

    border: none;
    width: 32px;
    height: 32px;

    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* [Style for the main body text area] */
.modal-internal-scrollable-content-body {
    color: #323130;



    line-height: 1.5;
}

/* [Active states to trigger the animations] */
.dimmed-background-overlay-layer.is-currently-active {
    visibility: visible;
    opacity: 1;
}

.dimmed-background-overlay-layer.is-currently-active .bottom-fixed-sliding-modal-container {
    transform: translateY(0);
}




.flewit_modal_body {
    display: flex;
    width: 100%;
    height: 500px;
    padding: 24px 0 48px 0;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    overflow-y: scroll;
}

.bottom-fixed-sliding-modal-container {
    width: 576px;
    margin: 0 auto;
}

/* Bottom sliding modal responsive overrides */
    .flewit_modal_body {
        display: flex;
        width: 90%;
        height: 470px;
        padding: 24px 0 48px 0;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        overflow-y: scroll;
    }

    .bottom-fixed-sliding-modal-container {
        max-width: 500px;
        margin: 0 auto;
    }

/* Success toast used after collection-page actions. */
.page-success-toast {
    position: absolute;
    top: 16px;
    left: 50%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: min(744.6px, calc(100vw - 48px));
    min-height: 56px;
    padding: 0 16px;
    border-radius: 8px;
    background: #EDF7ED;
    color: #1B5E20;
    font-family: var(--font-family-body, "DM Sans"), Helvetica, sans-serif;
    font-size: var(--font-size-sm, 16px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.32px;
    box-shadow: 0 12px 28px rgba(27, 94, 32, 0.12);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -12px);
    transition: opacity .18s ease, transform .18s ease;
}

.page-success-toast.show {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.page-success-toast-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.page-success-toast-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 50%;
    background: #1B5E20;
    color: #EDF7ED;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

.page-success-toast-message {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-word;
}

.page-success-toast-close {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border: 0;
    padding: 0;
    background: transparent;
    color: #1B5E20;
    cursor: pointer;
    font-size: 24px;
    font-weight: 300;
    line-height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Shared bottom-drawer popup shell: behavior is owned by assets/js/popup-dialog.js. */
.popup-dialog {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    box-sizing: border-box;
    color: var(--Neutrals-Panel-Gray, #626262);
}

.popup-dialog:not([open]) {
    display: none;
}

.popup-dialog[open] {
    display: grid;
}

.popup-dialog::backdrop {
    background: var(--Neutrals-Overlay, rgba(38, 38, 42, 0.40));
}

.popup-dialog__surface {
    position: fixed;
    bottom: 0;
    left: 50%;
    display: flex;
    width: min(640px, 100%);
    max-width: calc(100vw - 32px);
    max-height: min(820px, calc(100dvh - 32px));
    padding: 24px 32px 48px;
    flex-direction: column;
    overflow: hidden;
    border-radius: 22px 22px 0 0;
    background: var(--Core-Pure-White, #FFF);
    box-shadow: 0 24px 70px rgba(6, 47, 135, 0.22);
    transform: translate3d(-50%, 0, 0);
}

.popup-dialog__surface:focus {
    outline: none;
}

.popup-dialog--sheet .popup-dialog__surface {
    width: min(580px, 100%);
    max-height: min(90dvh, 820px);
}

.popup-dialog--wide .popup-dialog__surface {
    width: min(760px, 100%);
}

.popup-dialog--compact .popup-dialog__surface {
    width: min(480px, 100%);
}

@keyframes popup-dialog-slide-in {
    from {
        transform: translate3d(-50%, 100%, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes popup-dialog-slide-out {
    from {
        transform: translate3d(-50%, 0, 0);
    }

    to {
        transform: translate3d(-50%, 100%, 0);
    }
}

@keyframes popup-dialog-backdrop-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes popup-dialog-backdrop-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.popup-dialog.is-opening::backdrop {
    animation: popup-dialog-backdrop-in 200ms linear both;
}

.popup-dialog.is-closing::backdrop {
    animation: popup-dialog-backdrop-out 200ms linear both;
}

.popup-dialog.is-opening .popup-dialog__surface {
    animation: popup-dialog-slide-in 200ms linear both;
    backface-visibility: hidden;
    will-change: transform;
}

.popup-dialog.is-closing .popup-dialog__surface {
    animation: popup-dialog-slide-out 200ms linear both;
    backface-visibility: hidden;
    will-change: transform;
}

.popup-dialog__header,
.popup-dialog__footer {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.popup-dialog__header {
    align-items: flex-start;
    border-bottom: 1px solid var(--Neutrals-Light-Gray, #F1F1F1);
}

.popup-dialog__footer {
    border-top: 1px solid var(--Neutrals-Light-Gray, #F1F1F1);
}

.popup-dialog__heading {
    min-width: 0;
}

.popup-dialog__title {
    margin: 0;
    font-family: var(--font-family-body, "DM Sans");
    font-size: var(--font-size-lg, 20px);
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: 0.4px;
    background: var(--Core-Skyline-Gradient, linear-gradient(124deg, rgba(0, 113, 206, 0.80) -8.3%, #005AB6 43.6%, #062F87 97.5%));
    background-clip: text;
    -webkit-background-clip: text;
    color: #005AB6;
    -webkit-text-fill-color: transparent;
}

.popup-dialog__subtitle {
    margin: 8px 0 0;
    color: var(--Neutrals-Placeholder, #8E8E93);
    font-family: var(--font-family-body, "DM Sans");
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
    letter-spacing: 0.28px;
}

.popup-dialog__close {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    border: 0;
    padding: 0;
    background: transparent;
    line-height: 1;
    cursor: pointer;
}

.popup-dialog__close::before {
    width: 16px;
    height: 16px;
    background: url("../icons/cross-icon.svg") center / contain no-repeat;
    content: "";
}

.popup-dialog__close > .bi {
    display: none;
}

.popup-dialog__close:focus-visible {
    outline: 2px solid var(--Tints-Blue-80, #338DD8);
    outline-offset: 2px;
}

.popup-dialog__body {
    min-height: 0;
    overflow-y: auto;
}

.popup-dialog__footer > .primary-button,
.popup-dialog__footer > .secondary-button,
.popup-dialog__footer > .delete-button,
.popup-dialog__footer > .popup-dialog__action-form {
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    flex: 1 1 0;
}

.popup-dialog__action-form {
    margin: 0;
}

.popup-dialog__action-form > .primary-button,
.popup-dialog__action-form > .secondary-button,
.popup-dialog__action-form > .delete-button {
    width: 100%;
}

.popup-dialog__message {
    margin: 0 0 8px;
    color: var(--Neutrals-Panel-Gray, #626262);
    font-family: var(--font-family-body, "DM Sans");
    font-size: var(--font-size-sm, 16px);
    font-weight: 600;
    line-height: 120%;
    letter-spacing: 0.32px;
}

.popup-dialog__description {
    margin: 0;
    color: var(--Neutrals-Placeholder, #8E8E93);
    font-family: var(--font-family-body, "DM Sans");
    font-size: var(--font-size-xs, 12px);
    font-weight: 400;
    line-height: 125%;
    letter-spacing: 0.24px;
}

.popup-dialog--badge .popup-dialog__surface {
    width: min(560px, 100%);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
}

.popup-dialog--badge .popup-dialog__close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1;
}

.popup-dialog--badge .popup-dialog__title {
    font-size: var(--font-size-xl, 24px);
    line-height: 100%;
    letter-spacing: 0.48px;
    text-align: center;
}

.popup-dialog--badge .popup-dialog__subtitle {
    font-size: var(--font-size-sm, 16px);
    line-height: 120%;
    letter-spacing: 0.32px;
    text-align: center;
}

@media (max-width: 560px) {
    .popup-dialog__surface {
        max-height: calc(100dvh - 24px);
        border-radius: 18px 18px 0 0;
    }

    .popup-dialog--sheet .popup-dialog__surface {
        max-height: 92dvh;
        border-radius: 20px 20px 0 0;
    }

    .popup-dialog__footer {
        gap: 10px;
    }

    .popup-dialog__surface {
        max-width: 100vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .popup-dialog.is-opening .popup-dialog__surface,
    .popup-dialog.is-closing .popup-dialog__surface {
        animation: none;
    }

    .popup-dialog.is-opening::backdrop,
    .popup-dialog.is-closing::backdrop {
        animation: none;
    }
}