/************* New alert *************/

/* The new and edit alert form (account/new/index.html, assets/js/account/new.js):
   a focused full-width flow with no side nav. The header, then every section of
   the form listed out beside a sticky live preview that ends on the save button;
   on a phone the preview follows the form and a bar pinned to the bottom keeps
   the count and the save button in reach. #newAlert carries the page state as
   classes (ready, welcome, editing, missing, limit, loadFailed). */
#newAlert.accountPage {
    padding-left: var(--account-gutter);
}

/************* Header *************/

#newAlertHeader {
    align-items: flex-end;
}

#newAlertHeaderText {
}

#newAlertHeaderTextBack {
}

#newAlertHeaderTextTitle {
    margin-top: 4px;
}

#newAlertHeaderTextIntro {
}

/* the welcome banner from register (?welcome=1) */
#newAlertWelcome {
    display: none;
    margin-top: 24px;
    padding: 16px 20px;
    border: 1px solid var(--tint-border);
    border-radius: var(--radius-card);
    background-color: var(--tint);
}

#newAlert.welcome.ready #newAlertWelcome {
    display: block;
}

#newAlertWelcomeStep {
    color: var(--primary);
    font-size: var(--font-size-meta);
    font-weight: 700;
}

#newAlertWelcomeText {
    margin-top: 4px;
    font-size: 15px;
    line-height: 1.5;
}

/************* Loading, missing, limit *************/

#newAlertLoading {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
}

#newAlert.ready #newAlertLoading,
#newAlert.missing #newAlertLoading,
#newAlert.limit #newAlertLoading {
    display: none;
}

#newAlertLoadingBar {
    height: 8px;
}

#newAlertLoadingStep {
    height: 64px;
    border-radius: var(--radius-card);
}

#newAlertLoadingLine {
    width: 50%;
}

#newAlert.loadFailed #newAlertLoadingBar,
#newAlert.loadFailed #newAlertLoadingStep,
#newAlert.loadFailed #newAlertLoadingLine {
    display: none;
}

#newAlertLoadingError:empty {
    display: none;
}

#newAlertMissing,
#newAlertLimitReached {
    display: none;
    max-width: 560px;
    margin-top: 32px;
}

#newAlert.missing #newAlertMissing,
#newAlert.limit #newAlertLimitReached {
    display: block;
}

#newAlertMissingTitle,
#newAlertLimitReachedTitle {
}

#newAlertMissingText,
#newAlertLimitReachedText {
    margin-top: 8px;
    font-size: var(--font-size-body);
    line-height: 1.5;
}

#newAlertMissingButton,
#newAlertLimitReachedButton {
    margin-top: 20px;
}

/* nothing to edit, or no alerts left: the intro and form give way */
#newAlert.missing #newAlertHeaderTextIntro,
#newAlert.limit #newAlertHeaderTextIntro {
    display: none;
}

/************* Layout *************/

#newAlertLayout {
    display: none;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 48px;
    align-items: start;
    margin-top: 28px;
}

#newAlert.ready #newAlertLayout {
    display: grid;
}

#newAlertForm {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/************* Sections *************/

/* What, Price and deal and Where, each under its heading and a rule */
.newAlertFormSection {
    padding: 0 0 32px;
    border-bottom: 1px solid var(--hairline);
}

.newAlertFormSection + .newAlertFormSection {
    padding-top: 32px;
}

.newAlertFormSectionTitle {
}

.newAlertFormSectionIntro {
    margin-top: 4px;
    color: var(--muted);
    font-size: 15px;
}

/************* Fields *************/

.newAlertFormField {
    margin-top: 24px;
}

.newAlertFormFieldset {
    min-width: 0;
    margin-right: 0;
    margin-left: 0;
    padding: 0;
    border: 0;
}

.newAlertFormFieldsetLegend {
    padding: 0;
    font-size: 15px;
}

.newAlertFormFieldOptional {
    color: var(--muted);
    font-weight: 400;
}

.newAlertFormHint {
    margin-top: 8px;
    color: var(--muted);
    font-size: var(--font-size-meta);
    line-height: 1.5;
}

/* inline errors stay out of the way until they have something to say */
.newAlertFormError:empty {
    display: none;
}

/* the wine name search, with its magnifier inside the field */
#newAlertFormWineNameWrapper {
    position: relative;
}

#newAlertFormWineNameIcon {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 18px;
    height: 18px;
    color: var(--muted);
    transform: translateY(-50%);
    pointer-events: none;
}

#newAlertFormWineName {
    padding-left: 38px;
}

#newAlertFormTypes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.newAlertFormTypesItem {
}

/* the tick shows only on a picked type */
.newAlertFormTypesItemIcon {
    display: none;
}

.newAlertFormTypesItem[aria-pressed="true"] .newAlertFormTypesItemIcon {
    display: block;
}

/* producer, grape, region and country two by two */
#newAlertFormFacets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
}

/* min to max, with the unit or "to" between */
.newAlertFormRange {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.newAlertFormRangeItem {
    width: 160px;
}

.newAlertFormRangeItemInput {
}

.newAlertFormRangeTo {
    color: var(--muted);
    font-size: 15px;
}

.newAlertFormRangeHint {
    color: var(--muted);
    font-size: var(--font-size-meta);
}

#newAlertFormDiscountRow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

#newAlertFormDiscount {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.newAlertFormDiscountItem {
}

#newAlertFormDiscountCustom {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}

#newAlertFormDiscountCustomText {
    font-weight: 600;
}

#newAlertFormDiscountCustomInput {
    width: 80px;
}

#newAlertFormDiscountCustomUnit {
    color: var(--muted);
}

/* "Still notify me", only while a deal size is set */
#newAlertFormNoComparison {
    display: none;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: var(--radius);
    background-color: var(--surface);
    font-size: 15px;
    line-height: 1.5;
    cursor: pointer;
}

#newAlertFormNoComparison.active {
    display: flex;
}

#newAlertFormNoComparisonInput {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--primary);
}

#newAlertFormNoComparisonText {
}

/* Where: the three scopes and the panel for the picked one */
#newAlertFormWhere {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.newAlertFormWhereItem {
}

.newAlertFormWherePanel {
    display: none;
    margin-top: 16px;
}

.newAlertFormWherePanel.active {
    display: block;
}

#newAlertFormWhereRegion {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 220px));
    gap: 16px;
}

.newAlertFormWhereRegionItem {
}

#newAlertFormWhereState {
    display: none;
}

#newAlertFormWhereState.active {
    display: block;
}

/* choices.js restyled into the site's field and chips */
#newAlertForm .choices {
    margin: 0;
    font-size: 15px;
}

#newAlertForm .choices__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: var(--control-height);
    padding: 5px 8px;
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    background-color: #FFF;
    font-size: 15px;
}

#newAlertForm .choices.is-focused .choices__inner,
#newAlertForm .choices.is-open .choices__inner {
    border-color: var(--primary);
    border-radius: var(--radius);
    box-shadow: 0 0 0 1px var(--primary), 0 0 0 4px rgba(128, 0, 0, .15);
}

#newAlertForm .choices__list--multiple {
    display: contents;
}

#newAlertForm .choices__list--multiple .choices__item {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 30px;
    margin: 0;
    padding: 0 4px 0 12px;
    border: 0;
    border-radius: var(--radius-pill);
    background-color: var(--tint);
    color: var(--primary);
    font-size: 14px;
    font-weight: 600;
    word-break: normal;
}

#newAlertForm .choices[data-type*="select-multiple"] .choices__button {
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    border: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23800000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
    background-position: center;
    background-size: 14px;
    opacity: 1;
    text-indent: -9999px;
}

#newAlertForm .choices__input {
    flex: 1;
    min-width: 100px;
    height: 30px;
    margin: 0;
    padding: 0 4px;
    border: 0;
    background-color: transparent;
    color: var(--black);
    font-size: 16px;
}

#newAlertForm .choices__input::placeholder {
    color: var(--muted);
    opacity: 1;
}

#newAlertForm .choices__list--dropdown,
#newAlertForm .choices__list[aria-expanded] {
    z-index: var(--z-dropdown);
    margin-top: 4px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(35, 31, 32, .12);
}

#newAlertForm .choices__list--dropdown .choices__item,
#newAlertForm .choices__list[aria-expanded] .choices__item {
    padding: 12px;
    font-size: 15px;
}

#newAlertForm .choices__list--dropdown .choices__item--selectable.is-highlighted,
#newAlertForm .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: var(--tint);
    color: var(--primary);
}

/* More options: vintage, score and listing types behind one disclosure */
#newAlertFormTune {
    border-bottom: 1px solid var(--hairline);
}

#newAlertFormTuneToggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 72px;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: var(--black);
    font-size: var(--font-size-h2);
    font-weight: 800;
    text-align: left;
}

#newAlertFormTuneToggleText {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}

#newAlertFormTuneToggleTextSub {
    color: var(--muted);
    font-size: 15px;
    font-weight: 400;
}

#newAlertFormTuneToggleIcon {
    flex: none;
    width: 20px;
    height: 20px;
    transition: transform var(--transition);
}

#newAlertFormTune.active #newAlertFormTuneToggleIcon {
    transform: rotate(180deg);
}

#newAlertFormTuneBody {
    display: none;
    padding-bottom: 24px;
}

#newAlertFormTune.active #newAlertFormTuneBody {
    display: block;
}

#newAlertFormTuneBounds {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
}

#newAlertFormTuneBounds .newAlertFormField {
    margin-top: 8px;
}

#newAlertFormTuneBounds .newAlertFormRangeItem {
    width: 100px;
}

#newAlertFormKinds {
}

.newAlertFormKindsItem {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
}

.newAlertFormKindsItemInput {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    accent-color: var(--primary);
}

.newAlertFormKindsItemText {
    color: var(--muted);
}

.newAlertFormKindsItemTextName {
    display: block;
    color: var(--black);
    font-weight: 700;
}

#newAlertFormNameField {
    margin-top: 32px;
}

#newAlertFormName {
    max-width: 420px;
}

/* editing only: on or paused, the last send, Pause or Resume and Delete */
#newAlertFormManage {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 40px;
    padding: 20px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
}

#newAlert.editing #newAlertFormManage {
    display: flex;
}

#newAlertFormManageText {
    flex: 1 1 260px;
    min-width: 0;
}

#newAlertFormManageTextStatus {
    font-weight: 700;
}

#newAlertFormManageTextSent {
    margin-top: 2px;
    color: var(--muted);
    font-size: var(--font-size-meta);
}

#newAlertFormManageActions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Delete swaps the actions for its question */
#newAlertFormManage.confirming #newAlertFormManageActions {
    display: none;
}

#newAlertFormManageConfirm {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    flex-basis: 100%;
}

#newAlertFormManage.confirming #newAlertFormManageConfirm {
    display: flex;
}

#newAlertFormManageConfirmText {
    flex: 1 1 260px;
    font-size: 15px;
}

#newAlertFormManageConfirmTextStrong {
}

#newAlertFormManageConfirmCancel {
}

#newAlertFormManageConfirmDelete {
}

#newAlertFormManageError {
    flex-basis: 100%;
}

#newAlertFormManageError:empty {
    display: none;
}

/************* Preview rail *************/

#newAlertPreview {
    position: sticky;
    top: 92px;
}

#newAlertPreviewCard {
    padding: 20px;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    background-color: var(--surface);
}

#newAlertPreviewCardEyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--positive);
    font-size: var(--font-size-meta);
    font-weight: 700;
}

#newAlertPreviewCardEyebrowDot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background-color: var(--positive);
}

#newAlertPreviewCardTitle {
    margin-top: 16px;
    transition: opacity var(--transition);
}

/* the count dims while a newer one is on its way */
#newAlertPreview.loading #newAlertPreviewCardTitle,
#newAlertPreview.loading #newAlertPreviewCardFrom {
    opacity: .55;
}

#newAlertPreviewCardFrom {
    margin-top: 4px;
    color: var(--muted);
    font-size: 15px;
}

#newAlertPreviewCardFrom:empty {
    display: none;
}

#newAlertPreviewCardSummary {
    margin-top: 10px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
}

#newAlertPreviewCardEstimate {
    margin-top: 8px;
    color: var(--muted);
    font-size: var(--font-size-meta);
}

#newAlertPreviewCardEstimate.warning {
    color: var(--danger);
    font-weight: 600;
}

#newAlertPreviewCardEstimate:empty {
    display: none;
}

/* the cheapest matches, under the count */
#newAlertPreviewCardMatches {
    margin-top: 8px;
}

#newAlertPreviewCardMatchesList {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

/* a match: name and store, the price beside them, the pill under them */
.newAlertPreviewCardMatchesListItem {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: start;
    padding: 12px 0;
    border-bottom: 1px solid var(--hairline);
}

/* rows past the first few wait for "Show the N cheapest" */
.newAlertPreviewCardMatchesListItem.extra {
    display: none;
}

#newAlertPreviewCardMatchesList.expanded .newAlertPreviewCardMatchesListItem.extra {
    display: grid;
}

.newAlertPreviewCardMatchesListItemInfo {
    min-width: 0;
}

.newAlertPreviewCardMatchesListItemInfoName {
    color: var(--black);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
}

.newAlertPreviewCardMatchesListItemInfoName[href]:hover {
    color: var(--primary);
    text-decoration: underline;
}

.newAlertPreviewCardMatchesListItemInfoMeta {
    margin-top: 3px;
    color: var(--muted);
    font-size: var(--font-size-meta);
}

.newAlertPreviewCardMatchesListItemInfoMetaSize {
}

.newAlertPreviewCardMatchesListItemInfoMetaStore {
    color: var(--muted);
}

.newAlertPreviewCardMatchesListItemInfoMetaStore[href] {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.newAlertPreviewCardMatchesListItemPrice {
    font-size: 17px;
    font-weight: 800;
    text-align: right;
}

.newAlertPreviewCardMatchesListItemStatus {
    grid-column: 1 / -1;
}

.newAlertPreviewCardMatchesListItemStatus:empty {
    display: none;
}

#newAlertPreviewCardMatchesEmpty {
    display: none;
    margin-top: 8px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

#newAlertPreviewCardMatchesEmpty.active {
    display: block;
}

#newAlertPreviewCardMatchesMore {
    display: none;
    min-height: var(--control-height);
    padding: 0;
    border: 0;
    background-color: transparent;
    color: var(--primary);
    font-size: 15px;
    font-weight: 600;
}

#newAlertPreviewCardMatchesMore.active {
    display: flex;
}

#newAlertPreviewCardMatchesNote {
    display: none;
    margin-top: 10px;
    color: var(--muted);
    font-size: var(--font-size-meta);
    line-height: 1.5;
}

#newAlertPreviewCardMatches.hasMatches #newAlertPreviewCardMatchesNote {
    display: block;
}

/* Free plan: the daily limit every alert shares, by the save button */
#newAlertPreviewCardPlan {
    display: none;
    margin-top: 16px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background-color: var(--tint);
    font-size: 14px;
    line-height: 1.5;
}

#newAlertPreviewCardPlan.active {
    display: block;
}

#newAlertPreviewCardPlanStrong {
}

#newAlertPreviewCardPlanLink {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

#newAlertPreviewCardSubmitError {
    margin-top: 16px;
}

#newAlertPreviewCardSubmitError:empty {
    display: none;
}

#newAlertPreviewCardSubmit {
    margin-top: 16px;
}

#newAlertPreviewStatus {
}

/* the phone bar only exists on a phone */
#newAlertBar {
    display: none;
}

#newAlertBarCount {
}

#newAlertBarCountText {
}

#newAlertBarCountSub {
}

#newAlertBarSubmit {
}

/************* Mid widths *************/

@media (max-width: 1100px) {
    #newAlertLayout {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 32px;
    }
}

/************* Phone *************/

@media (max-width: 800px) {
    /* the pinned bar sits over the bottom of the page, so the page ends that much higher */
    #newAlert.ready {
        padding-bottom: 120px;
    }

    #newAlertLayout {
        display: block;
        margin-top: 20px;
    }

    #newAlert.ready #newAlertLayout {
        display: block;
    }

    .newAlertFormSection {
        padding-bottom: 24px;
    }

    .newAlertFormSection + .newAlertFormSection {
        padding-top: 24px;
    }

    #newAlertFormFacets,
    #newAlertFormTuneBounds {
        grid-template-columns: minmax(0, 1fr);
    }

    #newAlertFormWhereRegion {
        grid-template-columns: minmax(0, 1fr);
    }

    .newAlertFormRangeItem {
        flex: 1;
        width: auto;
    }

    #newAlertFormTuneBounds .newAlertFormRangeItem {
        width: auto;
    }

    .newAlertFormRangeHint {
        flex-basis: 100%;
    }

    /* chips grow to the 44px thumb target */
    .newAlertFormTypesItem,
    .newAlertFormDiscountItem,
    .newAlertFormWhereItem {
        min-height: var(--control-height);
    }

    #newAlertFormTuneToggle {
        font-size: 22px;
    }

    #newAlertFormName {
        max-width: none;
    }

    #newAlertFormManageActions .button,
    #newAlertFormManageConfirm .button {
        flex: 1;
    }

    /* the preview follows the form, as one more section; the bar carries the save button */
    #newAlertPreview {
        position: static;
        margin-top: 32px;
        scroll-margin-top: 80px;
    }

    #newAlertPreviewCardSubmit {
        display: none;
    }

    #newAlertBar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: var(--z-sheet);
        display: none;
        align-items: center;
        gap: 12px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--hairline);
        background-color: #FFF;
        box-shadow: 0 -2px 12px rgba(35, 31, 32, .08);
    }

    #newAlert.ready #newAlertBar {
        display: flex;
    }

    #newAlertBarCount {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
        min-height: var(--control-height);
        justify-content: center;
        color: var(--black);
        text-decoration: none;
    }

    #newAlertBarCountText {
        font-size: 15px;
        font-weight: 700;
    }

    #newAlertBarCountSub {
        overflow: hidden;
        color: var(--muted);
        font-size: var(--font-size-meta);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #newAlertBarSubmit {
        flex: none;
        min-height: 48px;
    }
}