/************* Account: Deals *************/

/* The deals page: the account shell (account/global.css) around the shared list
   (wine-list.css: the filter rail, results toolbar, wine rows and pagination).
   The shell's 1280px width (account/global.css) is sized for the rail. */

/* width, gutters and the nav's column come from .accountPage */
#deals {
}

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

/* the title row's layout comes from .accountPageHeader */
#dealsHeader {
}

#dealsHeaderText {
    min-width: 0;
}

/* size from .accountPageTitle */
#dealsHeaderTextTitle {
}

/* size and colour from .accountPageIntro */
#dealsHeaderTextIntro {
}

#dealsHeaderTextIntroRegion {
    color: var(--black);
}

/* "Change" reads as a link in the sentence, with a 24px target */
#dealsHeaderTextIntroChange {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--primary);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

#dealsHeaderTextIntroChange:hover {
    color: var(--primary-hover);
}

/* the "pick your state" nudge, only for a US shopper with no state */
#dealsHeaderTextHint {
    display: none;
    margin-top: 6px;
    color: var(--muted);
    font-size: 14px;
}

#dealsHeaderTextHint.active {
    display: block;
}

/* the screen reader count after each change */
#dealsStatus {
}

/************* List *************/

/* the rail and rows come from wine-list.css; this only holds the loading and empty states */
#dealsList {
}

/* skeleton rows while the deals load, in the row's shape: name on the left, price on the right */
#dealsListLoading {
    display: flex;
    flex-direction: column;
    margin-top: 28px;
}

.dealsListLoadingRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid var(--hairline);
}

.dealsListLoadingRowName {
    width: 55%;
}

.dealsListLoadingRowPrice {
    width: 80px;
}

/* a failed load: the reason and a retry */
#dealsListError {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-top: 28px;
    padding: 24px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--surface);
}

#dealsListErrorText {
    font-size: var(--font-size-body);
}

#dealsListErrorRetry {
}

/* no deals at all at the stores that ship to the shopper */
#dealsListNone {
    margin-top: 28px;
    padding: 24px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--surface);
}

#dealsListNoneTitle {
    font-size: var(--font-size-h3);
    font-weight: 700;
}

#dealsListNoneText {
    max-width: 640px;
    margin-top: 6px;
    color: var(--muted);
    font-size: var(--font-size-body);
    line-height: 1.5;
}

/************* Footer *************/

#dealsDisclaimer {
    max-width: 760px;
    margin-top: 40px;
    color: var(--muted);
    font-size: var(--font-size-meta);
    line-height: 1.5;
}