.gold-price-popup-toolbar,
.gold-price-mobile-toolbar {
    flex-wrap: wrap;
}

.gold-price-mobile-toolbar .gold-price-range {
    margin-left: auto;
}

@media (min-width: 769px) {
    #goldPriceModal:not(.gold-price-modal-mobile):has(#goldPriceCustomRange:not([hidden])) .modal-content {
        height: auto;
        min-height: 559px;
    }

    #goldPriceModal:not(.gold-price-modal-mobile):has(#goldPriceCustomRange:not([hidden])) .gold-price-chart-wrap {
        flex: 0 0 200px;
        height: 200px;
    }

    #goldPriceModal:not(.gold-price-modal-mobile):has(#goldPriceCustomRange:not([hidden])) .gold-price-popup-footer {
        flex-shrink: 0;
    }

    #goldPriceModal:not(.gold-price-modal-mobile):has(#goldPriceAlertSummary:not([hidden])) .modal-content {
        height: auto;
        min-height: 653px;
    }

    #goldPriceModal:not(.gold-price-modal-mobile):has(#goldPriceAlertSummary:not([hidden])) .gold-price-chart-wrap {
        flex: 0 0 200px;
        height: 200px;
    }

    #goldPriceModal:not(.gold-price-modal-mobile):has(#goldPriceAlertSummary:not([hidden])) .gold-price-popup-footer {
        flex-shrink: 0;
    }
}

.gold-price-modal .gold-price-range .gold-price-custom-button {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
    padding: 3px 8px;
    border: 1px solid #e1e4e8;
    color: #626b79;
    background: #fff;
    white-space: nowrap;
}

.gold-price-modal .gold-price-range .gold-price-custom-button[aria-pressed="true"] {
    border-color: #9b3159;
    color: #873254;
    background: #fff2f5;
}

.gold-price-custom-range {
    margin: 10px 0 14px;
    padding: 12px;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    color: #343b4a;
    background: #fff;
    font-size: 12px;
}

.gold-price-date-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.gold-price-date-fields label {
    min-width: 0;
    font-weight: 600;
}

.gold-price-date-fields input {
    display: block;
    width: 100%;
    min-width: 0;
    height: 38px;
    margin-top: 6px;
    padding: 6px 8px;
    border: 1px solid #cbd1d8;
    border-radius: 4px;
    color: #343b4a;
    background: #fff;
    font-size: 12px;
}

.gold-price-date-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.gold-price-date-actions button {
    min-width: 60px;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid #dce0e5;
    border-radius: 4px;
    color: #626b79;
    background: #fff;
    font-size: 12px;
}

.gold-price-date-actions button[type="submit"] {
    border-color: #873254;
    color: #fff;
    background: #873254;
}

.gold-price-date-actions button:disabled {
    opacity: .5;
    cursor: wait;
}

.gold-price-range-error,
.gold-price-range-status {
    margin: 8px 0;
    font-size: 12px;
}

.gold-price-range-error {
    color: #b42342;
}

.gold-price-range-status {
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    color: #626b79;
}

.gold-price-range-spinner {
    display: block;
    width: 14px;
    height: 14px;
    border: 2px solid #ead5dd;
    border-top-color: #873254;
    border-radius: 50%;
    animation: gold-price-range-spin .7s linear infinite;
}

@keyframes gold-price-range-spin {
    to {
        transform: rotate(360deg);
    }
}

.gold-price-datepicker {
    position: absolute;
    z-index: 1000004;
    width: 260px;
    max-width: calc(100vw - 24px);
    padding: 8px;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    color: #343b4a;
    background: #fff;
    box-shadow: 0 4px 16px rgba(40, 30, 35, .16);
    font-size: 13px;
}

.gold-price-datepicker > div {
    display: none;
}

.gold-price-datepicker table {
    width: 100%;
    border-collapse: collapse;
}

.gold-price-datepicker td,
.gold-price-datepicker th {
    height: 32px;
    padding: 0;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
}

.gold-price-datepicker .day:hover,
.gold-price-datepicker .prev:hover,
.gold-price-datepicker .next:hover,
.gold-price-datepicker .datepicker-switch:hover,
.gold-price-datepicker span:hover {
    background: #fff2f5;
}

.gold-price-datepicker .old,
.gold-price-datepicker .new {
    color: #8d9eaf;
}

.gold-price-datepicker .disabled,
.gold-price-datepicker .disabled:hover {
    color: #cbd1d8;
    background: transparent;
    cursor: default;
}

.gold-price-datepicker .active,
.gold-price-datepicker .active:hover {
    color: #fff;
    background: #873254;
}

.gold-price-datepicker .today {
    box-shadow: inset 0 0 0 1px #9b3159;
}

.gold-price-datepicker .datepicker-months span,
.gold-price-datepicker .datepicker-years span {
    display: block;
    float: left;
    width: 25%;
    padding: 8px 0;
    border-radius: 4px;
}